/* HUMBLE — booklet as a website.
   Desktop: each spread is a "stage" in booklet units (841.9 × 595.3 pt), scaled to the viewport.
   Phones / portrait tablets: one booklet panel per screen, normal flow. */

:root {
  --ink: #0D1B2A; --red: #E0262F; --steel: #55616E; --bg: #EBEBEB; --blue: #2A4674;
  --f-display: 'Unbounded', system-ui, sans-serif;
  --f-text: 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* phones: spacing unit and type unit (booklet pt → px) */
  --u: 1.15px;
  --uf: 1.6px;
}
@media (min-width: 600px) { :root { --u: 1.4px; --uf: 1.9px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-text); font-weight: 600; -webkit-font-smoothing: antialiased; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
em { font-style: normal; color: var(--red); }
b { font-weight: 800; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type (sizes come from --fs = booklet pt) ---------- */
[style*="--fs"] { font-size: calc(var(--fs) * var(--uf)); line-height: var(--lh, 1.366); }
.t-hero { font-family: var(--f-display); font-weight: 900; letter-spacing: -.02em; --lh: 1.25; }
.t-h1   { font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; --lh: 1.24; }
.t-h2, .t-spec { font-weight: 800; }
.t-lead { font-weight: 800; --lh: 1.15; }
.t-pl   { color: var(--ink); }
.t-en   { color: var(--steel); }
.t-cap  { color: var(--steel); text-transform: uppercase; letter-spacing: .05em; }
.t-big  { display: block; font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; --lh: 1.24; }
.t-note { font-family: var(--f-mono); font-weight: 500; color: var(--red); --lh: 1.3; }
.t-idx  { font-family: var(--f-mono); font-weight: 500; color: var(--red); --lh: 1.32; }
.t-pl b, .t-en b { font-weight: 800; }
.tag {
  display: inline-block; font-family: var(--f-mono); font-weight: 500; color: var(--red);
  text-transform: uppercase; letter-spacing: .08em; --lh: 1.32;
  border: max(1px, calc(1 * var(--u))) solid var(--red); padding: calc(3 * var(--u)) calc(6 * var(--u));
}
.rule { display: block; width: calc(32 * var(--u)); height: calc(3 * var(--u)); background: var(--red); margin: calc(6 * var(--u)) 0; }

/* statements (outside left) */
.stmts { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.stmt { display: flex; gap: calc(10 * var(--u)); }
.stmt .t-idx { line-height: 1.7; }
.stmt .t-cap { margin-top: calc(4 * var(--u)); }

/* bullet lists */
.items { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.items.tight { gap: calc(7 * var(--u)); }
.items li { position: relative; padding-left: calc(11 * var(--u)); }
.items li::before { content: ''; position: absolute; left: 0; top: .3em; width: calc(5 * var(--u)); height: calc(5 * var(--u)); background: var(--red); }
.items li > p + p { margin-top: calc(3 * var(--u)); }
.items li.civil::before { background: var(--blue); }
.items li.civil b { color: var(--blue); }
.items li.civil::after { content: ''; position: absolute; z-index: -1; left: calc(-7.2 * var(--u)); top: calc(-7.3 * var(--u)); width: calc(261 * var(--u)); height: calc(100% + 16 * var(--u)); background: rgba(42, 70, 116, .10); border-radius: calc(3 * var(--u)); }
.items li.civil { z-index: 0; }

/* spec grid (inside right) */
.specs { display: grid; grid-template-columns: calc(118 * var(--u)) calc(100 * var(--u)); column-gap: calc(25 * var(--u)); row-gap: calc(14 * var(--u)); }
.specs p { margin-top: calc(3 * var(--u)); }

/* ---------- SVG art ---------- */
.art, .art-m { display: block; overflow: hidden; }
.art text, .art-m text { user-select: none; }
.s-cap { font: 800 14px var(--f-text); fill: var(--ink); }
.s-en  { font: 600 7.5px var(--f-text); fill: var(--steel); letter-spacing: .375px; }
.ring { fill: none; stroke: var(--red); stroke-width: 1; }
.ring.dash { stroke-dasharray: 3 3; }
.dot { fill: var(--red); }
.tick, .thin { fill: none; stroke: var(--red); stroke-width: 1; }
.thin.steel { stroke: var(--steel); }
.sweep-line { stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; }
.pill rect { fill: var(--bg); }
.pill text { font: 500 6.5px var(--f-mono); fill: var(--red); text-anchor: middle; }
.pill.steel text { fill: var(--steel); }

/* ---------- animations ---------- */
@keyframes blink2 { 0%, 14%, 100% { opacity: 1 } 2% { opacity: 0 } 5% { opacity: 1 } 8% { opacity: 0 } 11% { opacity: 1 } }
.blink { animation: blink2 5s infinite; }
.blink.late { animation-delay: 4.5s; }
.blink-slow { animation: none; }
.in .blink-slow { animation: blink2 6s 2.4s infinite; }

/* leader lines draw down in .5s, then the end rings appear, then regular blinking */
.draw { stroke: var(--red); stroke-width: 1; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.in .draw { transition: stroke-dashoffset .5s linear .3s; stroke-dashoffset: 0; }
.in .draw.d2 { transition-delay: .6s; }
.pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.in .pop { animation: pop .45s .8s both; }
.in .pop.d2 { animation-delay: 1.1s; }
@keyframes pop { 0% { opacity: 0; transform: scale(2.2) } 30% { opacity: 1 } 100% { opacity: 1; transform: none } }

/* inside: drone rises, target locks on, net flies in, then idle bob */
.drone-rise { opacity: 0; transform: translateY(260px); }
.in .drone-rise { animation: rise 1.4s cubic-bezier(.16,.84,.3,1) .2s forwards; }
@keyframes rise { to { opacity: 1; transform: none } }
.tgt-in { opacity: 0; transform-box: fill-box; transform-origin: center; }
.in .tgt-in { animation: lock 1.2s 1.5s forwards; }
@keyframes lock { 0% { opacity: 0; transform: scale(2.2) } 25% { opacity: 1; transform: scale(1) } 40% { opacity: 0 } 55% { opacity: 1 } 70% { opacity: 0 } 85%, 100% { opacity: 1; transform: none } }
.net-in { opacity: 0; transform-box: fill-box; transform-origin: center; transform: translate(-480px, 30px) rotate(-12deg) scale(.55); }
.in .net-in { animation: netin 1.2s cubic-bezier(.2,.8,.25,1) 1.4s forwards; }
@keyframes netin { to { opacity: 1; transform: none } }
.bob { animation: bob 6s ease-in-out infinite; }
.bob.lag { animation-delay: .35s; }
@keyframes bob { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(5px, -7px) } 50% { transform: translate(-4px, -2px) } 75% { transform: translate(3px, 6px) } }
/* phone pinned scene (HTML layers): drone flies in from the right, target locks, bob; net driven by scroll */
.duo-cam > * { position: absolute; }
.duo-net { opacity: 0; will-change: transform, opacity; }
.duo-drone { opacity: 0; transform: translate3d(120vw, 0, 0); transition: transform 1.4s cubic-bezier(.16,.84,.3,1), opacity .5s; will-change: transform; }
.duo-drone > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.duo-in .duo-drone { opacity: 1; transform: none; animation: bobpx 6s ease-in-out 1.6s infinite; }
.duo-tgt { position: absolute; overflow: visible; opacity: 0; transform-origin: center; }
.duo-in .duo-tgt { animation: lock 1.2s 1.5s forwards; }
.duo-blink { animation: blink2 5s 4.5s infinite; }
@keyframes bobpx { 0%, 100% { translate: 0 0 } 25% { translate: 5px -6px } 50% { translate: -4px -2px } 75% { translate: 3px 5px } }
.off, .off * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .art *, .art-m *, .duo-drone, .duo-tgt, .duo-blink { animation: none !important; transition: none !important; }
  .duo-drone, .duo-tgt { opacity: 1 !important; transform: none !important; }
  .drone-rise, .tgt-in, .net-in, .pop { opacity: 1 !important; transform: none !important; }
  .draw { stroke-dashoffset: 0; }
}

/* ---------- swooshes ---------- */
.bg-swoosh { display: none; }
[data-swoosh] { position: relative; isolation: isolate; }
.m-swoosh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- phones & portrait tablets (default) ---------- */
.spread { background: var(--bg); overflow: hidden; overflow: clip; }
.stage { display: flex; flex-direction: column; }
.art { display: none; }
.panel { width: 100%; padding: 44px 22px 8px; }
.panel > .blk, .contact-m > :not(.m-swoosh) { max-width: 680px; margin-inline: auto; }
.blk { position: relative; }
.m-visual { margin: 24px -22px 0; }
.m-visual > svg { width: 100%; height: 100%; }
.m-visual { aspect-ratio: var(--ar); }
@media (min-width: 700px) { .m-visual { aspect-ratio: 4 / 3; margin-inline: -22px; } }
.d-only { display: none; }
.p-ocover { order: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(36px + env(safe-area-inset-top)); }
.p-ocover .m-visual { flex: 1 1 auto; min-height: 45svh; aspect-ratio: auto; position: relative; }
.p-ocover .m-visual > svg { position: absolute; inset: 0; }
.p-omid { order: 2; padding-bottom: 36px; }
.p-omid > .m-visual { margin-bottom: 0; }
.p-oleft { order: 3; padding-top: 8px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 24px; }
.p-oleft .stmts { gap: 22px; }
.p-iright { order: 1; padding-bottom: 36px; }
.p-iright .m-visual { margin-bottom: 20px; }
.duo { order: 2; position: relative; height: 300vh; height: 300svh; }
.contact-m { order: 3; padding: 40px 22px 28px; text-align: center; }
/* single words must always fit: HUMBLE is ~5.5em wide, INTEGRACJA ~8.2em */
.t-hero { font-size: min(calc(44 * var(--uf)), calc((100vw - 48px) / 5.7)); }
.p-omid .t-h1 { font-size: min(calc(27 * var(--uf)), calc((100vw - 48px) / 8.5)); }
.t-h1 { font-size: min(calc(var(--fs) * var(--uf)), 10.5vw); }
.items li.civil::after { left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }

/* pinned "who we are → who we look for" scene */
.duo-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.duo-text { position: relative; flex: none; height: var(--th, 60svh); --uf: 1.45px; }
@media (max-height: 720px) { .duo-text { --uf: 1.3px; --u: 1px; } }
@media (min-width: 600px) { .duo-text { --uf: 1.75px; } }
.duo-text .panel { position: absolute; top: 0; left: 0; right: 0; padding-top: calc(28px + env(safe-area-inset-top)); will-change: transform, opacity; backface-visibility: hidden; }
.duo-text .p-ileft { opacity: 0; transform: translateX(-105%); }
.duo-scene { position: relative; flex: 1; min-height: 160px; overflow: hidden; }
.duo-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.big-mail { display: inline-block; font: 800 clamp(20px, 6.2vw, 30px) var(--f-text); color: var(--red); text-decoration: none; margin-bottom: 10px; }
.contact-m .t-cap { margin-top: 6px; }
/* reply lines always on one line: ~22em and ~21em wide */
.contact-m .one-line { white-space: nowrap; font-size: min(calc(10 * var(--uf)), calc((100vw - 40px) / 22.5)); }
.contact-m .one-line-en { white-space: nowrap; font-size: min(calc(7.5 * var(--uf)), calc((100vw - 40px) / 21)); }
/* phones: the contact block replaces the footer contact line */
@media (max-width: 1099px), (orientation: portrait) { .foot .d-flex { display: none; } .foot { padding: 0 22px 76px; font-size: 11px; } }

/* landscape phones: panel as two columns */
@media (orientation: landscape) and (max-width: 1099px) {
  .panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: center; padding: 40px 32px; min-height: 100svh; }
  .panel .m-visual { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .p-ocover .m-visual { margin: 0; }
  .p-oleft { display: flex; min-height: 0; }
  .duo-sticky { flex-direction: row; }
  .duo-text { width: 50%; height: 100%; }
  .duo-text .panel { display: block; min-height: 0; }
  .t-hero { font-size: min(calc(44 * var(--uf)), calc((50vw - 72px) / 5.7)); }
  .p-omid .t-h1 { font-size: min(calc(27 * var(--uf)), calc((50vw - 72px) / 8.5)); }
}

/* ---------- desktop / landscape tablets: the booklet ---------- */
@media (min-width: 1100px) and (orientation: landscape) {
  .spread { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow-x: clip; overflow-y: visible; }
  .stage {
    position: relative; display: block; margin: 0 auto;
    width: min(100vw, calc(100vh * 841.9 / 595.3)); width: min(100vw, calc(100svh * 841.9 / 595.3));
    aspect-ratio: 841.9 / 595.3; container-type: inline-size;
  }
  .stage * { --u: calc(100cqw / 841.9); --uf: var(--u); }
  .art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .bg-swoosh { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .panel, .duo, .duo-sticky, .duo-text { display: contents; }
  .panel[data-swoosh] > .m-swoosh, .duo-sticky > .m-swoosh, .contact-m { display: none; }
  .m-visual, .m-only, .duo-scene { display: none; }
  .d-only { display: inline; }
  .blk { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
  .nw { white-space: nowrap; }
  .t-hero, .t-h1 { font-size: calc(var(--fs) * var(--u)); }
}
/* when the viewport is wider than the booklet, soften the art at the edges */
@media (min-width: 1100px) and (min-aspect-ratio: 1.45) {
  .spread .art { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); }
}

/* ---------- demo video ---------- */
.demo { position: relative; background: var(--bg); padding: 16px 12px 28px; }
@media (min-width: 1100px) and (orientation: landscape) { .demo { padding: 10vh 22px; } }
.demo-in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; text-align: center; }
@media (max-width: 1099px), (orientation: portrait) { .demo > .m-swoosh { display: none; } }
.demo .tag { font-size: 12px; --u: 1.3px; }
.demo .t-h1 { font-size: clamp(24px, 4.2vw, 52px); margin-top: 10px; }
.demo .t-cap { font-size: 13px; margin-top: 6px; }
.player {
  margin: 16px auto 0; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden;
  width: min(100%, calc((100svh - 240px) * 16 / 9)); min-width: min(100%, 320px);
  box-shadow: 0 24px 60px rgba(13, 27, 42, .22);
}
.player video { width: 100%; height: 100%; display: block; }

/* ---------- footer + floating email ---------- */
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding: 40px 22px 110px; font-size: 13px; color: var(--steel); }
.foot a { color: var(--red); font-weight: 800; text-decoration: none; }
.mail {
  position: fixed; z-index: 10; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px;
  background: rgba(13, 27, 42, .9); color: #fff; font: 800 14px var(--f-text); text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(13,27,42,.25);
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity .35s, transform .35s, background .2s;
}
.mail svg { width: 20px; height: 20px; color: var(--red); transition: color .2s; }
.mail.show { opacity: 1; transform: none; pointer-events: auto; }
.mail:hover, .mail:focus-visible { background: var(--red); transform: translateY(-3px); }
.mail:hover svg, .mail:focus-visible svg { color: #fff; }
@media (max-width: 599px) {
  .mail { right: 50%; transform: translate(50%, 24px); }
  .mail.show { transform: translate(50%, 0); }
  .mail:hover { transform: translate(50%, -3px); }
}

/* ---------- loader: target spins, dashes ±20 px, blinks, spins again ---------- */
html.loading, html.loading body { overflow: hidden; }
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg);
  transition: opacity .45s ease, visibility .45s, background-color .8s ease;
  animation: ld-safety .01s 20s forwards;           /* never block the page if scripts fail */
}
.loader.done { opacity: 0; visibility: hidden; }
@keyframes ld-safety { to { opacity: 0; visibility: hidden; } }
.loader svg { width: 96px; height: 96px; overflow: visible; transition: transform .9s cubic-bezier(.65,0,.25,1); }
.loader.stop * { animation: none !important; }
.loader.fly { background-color: transparent; pointer-events: none; }
html.handoff .drift { visibility: hidden; }
.ld-move { animation: ld-move 2.4s cubic-bezier(.5,0,.3,1) infinite; }
.ld-rot { transform-box: fill-box; transform-origin: center; animation: ld-rot 2.4s cubic-bezier(.6,0,.3,1) infinite; }
.ld-blink { animation: ld-blink 2.4s linear infinite; }
@keyframes ld-rot { 0% { transform: rotate(0) } 22%, 100% { transform: rotate(360deg) } }
@keyframes ld-move { 0%, 24% { transform: translate(0, 0) } 34% { transform: translate(24px, -16px) } 44% { transform: translate(-20px, 18px) } 54%, 100% { transform: translate(0, 0) } }
@keyframes ld-blink { 0%, 58%, 100% { opacity: 1 } 61% { opacity: 0 } 64% { opacity: 1 } 67% { opacity: 0 } 70% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .loader * { animation: none !important; } }