/* ============================================================
   HONEYART STUDIO
   01 — wideo w tle, znak, treść z paralaksą
   02 — wideo przewijane scrollem, hasła w wolnej przestrzeni
   ============================================================ */

@font-face{
  font-family:'Vogjer';
  src:url('assets/fonts/VogjerDemo.otf') format('opentype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('assets/fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:'SuperCar';
  src:url('assets/fonts/SuperCar-ExpMLDemo.otf') format('opentype');
  font-weight:400; font-display:swap;
}
/* Kinetic wskazywał na `assets/fonts/`, a plik leży w `fonts/` — deklaracja
   nigdy się nie wczytywała. Krój i tak stoi wyłącznie jako zapas za Vogjerem,
   więc zostaje wypisany w listach `font-family`, ale bez martwego @font-face.
   Gdyby miał realnie działać, wystarczy skopiować plik do `assets/fonts/`
   i przywrócić tę deklarację. */

:root{
  --bg:#000;
  --ink:#eef2f6;
  --dim:rgba(238,242,246,.44);
  --line:rgba(238,242,246,.12);
  --blue:#7cb3ff;
  --ease:cubic-bezier(.22,1,.36,1);
  --frame:clamp(22px,2.4vw,44px);
  /* Linear 180°, jak w oknie Gradient Overlay: od jasnej góry do
     ciemnego dołu. Rozciągnięty ponad wysokość tekstu (odpowiednik
     Scale 112%), żeby skrajne odcienie nie ucinały się na krawędziach. */
  --grad:linear-gradient(180deg,#ffffff 0%,#e2e8f0 20%,#aab4c1 58%,#5c6572 100%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif;font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============================================================
   PRELOADER
   ============================================================ */
.pre{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;background:var(--bg);
  transition:opacity .9s var(--ease),visibility .9s var(--ease);
}
/* Poświata za sygnetem — osobna warstwa, bo `filter` na samym obrazku
   przycinałby się do jego nieprzezroczystych pikseli. */
.pre::before{
  content:'';position:absolute;left:50%;top:50%;
  width:min(70vw,620px);aspect-ratio:1;transform:translate(-50%,-58%);
  background:radial-gradient(circle,rgba(124,179,255,.16) 0%,transparent 62%);
  animation:preGlow 3.4s var(--ease) infinite;
}
/* Wyjście: całość odjeżdża do przodu i rozmywa się — ten sam gest,
   którym potem wchodzi sekcja 01. */
.pre.is-done{opacity:0;visibility:hidden}
.pre.is-done .pre__in{transform:scale(1.09);filter:blur(9px)}

.pre__in{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  width:min(80vw,430px);
  transition:transform .9s var(--ease),filter .9s var(--ease);
}

/* ---------- sygnet w plastrze miodu ----------
   Pudełko znaku ma rozmiar całego plastra, a nie samego sygnetu.
   Dzięki temu tekst poniżej układa się pod plastrem, zamiast wchodzić
   mu pod spód. Ograniczenie na `vh` jest po to, żeby na niskim oknie
   plaster nie wypchnął paska postępu poza ekran. */
.pre__mark{
  position:relative;
  width:min(74vw,38vh,420px);aspect-ratio:1;
  display:grid;place-items:center;
  animation:preIn 1.1s var(--ease) both;
}
.pre__comb{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* rdzeń: sygnet w obracającej się przerywanej obręczy */
.pre__core{
  position:relative;
  width:24%;aspect-ratio:1;
  display:grid;place-items:center;
}
.pre__hex{
  position:absolute;inset:-24%;width:148%;height:148%;
  fill:none;stroke:rgba(124,179,255,.5);stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:16 28;
  filter:drop-shadow(0 0 6px rgba(124,179,255,.5));
  animation:preSpin 7s linear infinite;
}
.pre__sygnet{
  position:relative;width:100%;height:auto;
  filter:drop-shadow(0 0 18px rgba(124,179,255,.35));
  animation:prePulse 2.6s var(--ease) infinite;
}

/* ---------- napis ---------- */
.pre__name{
  margin:clamp(14px,2vh,24px) 0 0;
  font-family:'Vogjer','Kinetic',sans-serif;font-weight:400;
  font-size:clamp(19px,2.6vw,32px);letter-spacing:.16em;line-height:1;
  color:#eaf3ff;
  animation:preIn 1.1s .14s var(--ease) both;
}
.pre__name b{font-weight:400;color:rgba(198,220,255,.42)}

/* ---------- pasek postępu ---------- */
.pre__bar{
  position:relative;width:100%;height:2px;margin-top:clamp(22px,3vh,34px);
  background:rgba(206,226,255,.12);border-radius:2px;
  animation:preIn 1.1s .26s var(--ease) both;
}
.pre__bar i{
  position:absolute;left:0;top:0;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,rgba(124,179,255,.35),var(--blue));
  box-shadow:0 0 14px 1px rgba(124,179,255,.75);
  /* bez `transition` — szerokość dociąga JS klatka po klatce
     i dwa wygładzania naraz zaczynały ze sobą walczyć */
}
/* iskra na czubku paska — jedzie razem z wypełnieniem */
.pre__bar i::after{
  content:'';position:absolute;right:-3px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:#dceaff;box-shadow:0 0 12px 3px rgba(124,179,255,.9);
}

/* ---------- podpis i procent ---------- */
.pre__meta{
  display:flex;align-items:flex-end;justify-content:space-between;
  width:100%;margin-top:12px;
  animation:preIn 1.1s .38s var(--ease) both;
}
.pre__st{
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.3em;color:rgba(198,220,255,.45);
  padding-bottom:4px;
}
.pre__pct{
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:10px;letter-spacing:.14em;color:rgba(198,220,255,.45);
  padding-bottom:4px;
}
/* Cyfry idą SuperCarem — ta sama rodzina co numery realizacji,
   ale znak „%" zostaje w Montserracie, bo SuperCar go nie ma. */
.pre__pct b{
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:clamp(26px,3.4vw,42px);line-height:.8;letter-spacing:.02em;
  color:#eaf3ff;margin-right:3px;
  /* stała szerokość pola, żeby licznik nie drgał przy zmianie cyfr */
  display:inline-block;min-width:2.1ch;text-align:right;
}

@keyframes preIn{
  from{opacity:0;transform:translateY(16px);filter:blur(8px)}
  to  {opacity:1;transform:none;filter:none}
}
@keyframes preSpin{to{transform:rotate(360deg)}}
@keyframes prePulse{
  0%,100%{filter:drop-shadow(0 0 14px rgba(124,179,255,.28));transform:scale(1)}
  50%    {filter:drop-shadow(0 0 26px rgba(124,179,255,.55));transform:scale(1.045)}
}
@keyframes preGlow{
  0%,100%{opacity:.55}
  50%    {opacity:1}
}

/* ============================================================
   SEKCJA 01
   ============================================================ */
.hero{
  position:relative;z-index:1;
  height:100svh;overflow:hidden;
  cursor:none;
}

/* wideo gra bez przerwy; delikatne pulsowanie skalą */
.hero__bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  animation:bgPulse 11s ease-in-out infinite;
  will-change:transform;
}
@keyframes bgPulse{
  0%,100%{transform:scale(1.02)}
  50%    {transform:scale(1.055)}
}
/* Dół hero gaśnie do czerni, a góra sekcji 02 wychodzi z czerni.
   Oba gradienty są czyste czarne, więc styk przestaje być widoczną
   kreską — kadrowane „cover" wideo ma twardą krawędź bez tego. */
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:26vh;z-index:3;pointer-events:none;
  background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.7) 38%,transparent 100%);
}

/* przyciemnienie brzegów, żeby tekst miał na czym usiąść */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 24%,
                            transparent 72%, rgba(0,0,0,.75) 100%);
}

/* --- sygnet --- */
.sygnet{
  position:absolute;z-index:6;
  left:var(--frame);top:var(--frame);
  line-height:0;text-decoration:none;
}
.sygnet img{
  width:clamp(52px,5.2vw,84px);height:auto;display:block;
  animation:sygnetPulse 4.4s ease-in-out infinite;
}
/* pulsowanie w pętli: skala i poświata chodzą razem, ale poświata
   ma własny szczyt, więc znak „oddycha" zamiast tylko rosnąć */
@keyframes sygnetPulse{
  0%,100%{ transform:scale(1);
           filter:drop-shadow(0 0 6px rgba(124,179,255,.18)) brightness(1) }
  45%    { transform:scale(1.07);
           filter:drop-shadow(0 0 20px rgba(124,179,255,.55)) brightness(1.18) }
  70%    { transform:scale(1.03);
           filter:drop-shadow(0 0 12px rgba(124,179,255,.3)) brightness(1.06) }
}
.sygnet:hover img{
  animation-play-state:paused;
  filter:drop-shadow(0 0 26px rgba(124,179,255,.75)) brightness(1.25);
  transform:scale(1.1);
  transition:filter .4s var(--ease),transform .4s var(--ease);
}

/* --- treść --- */
.hcopy{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:4;width:min(96vw,1560px);
  text-align:center;
  perspective:900px;                 /* daje warstwom głębię przy paralaksie */
  pointer-events:none;
}
.hcopy > *{
  transform-style:preserve-3d;
  will-change:transform;
}

.hcopy__kicker{
  margin:0 0 clamp(8px,1vw,16px);
  font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif;font-weight:500;
  font-size:clamp(9px,.82vw,14px);
  letter-spacing:.52em;text-indent:.52em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:0;
}
/* Znak jest obrazem z wypalonym gradientem. Proporcje wzięte z pliku
   inspiracji: napis zajmuje tam ~59% szerokości kadru, nie 88%. */
.hcopy__title{margin:0;line-height:0;opacity:0}
.hcopy__title img{
  width:min(59vw,1010px);height:auto;display:block;margin:0 auto;
}
/* opis w inspiracji ma 548 px z 1672, czyli ~33% szerokości */
.hcopy__lead{
  margin:clamp(14px,1.7vw,26px) auto 0;
  width:min(34vw,620px);max-width:none;
  font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif;font-weight:500;
  font-size:clamp(10px,.78vw,13.5px);
  line-height:1.75;letter-spacing:.12em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:0;
}

/* wejście: kicker, potem tytuł, potem tekst — powoli i po kolei */
body.is-in .hcopy__kicker{animation:copyIn 1.5s .45s var(--ease) forwards}
body.is-in .hcopy__title {animation:copyIn 1.8s 1.25s var(--ease) forwards}
body.is-in .hcopy__lead  {animation:copyIn 1.6s 2.35s var(--ease) forwards}
/* Animujemy `translate`, nie `transform`. Wypełniona animacja (forwards)
   wygrywa w kaskadzie ze stylem inline, więc gdyby ruszała `transform`,
   zablokowałaby paralaksę wpisywaną z JS. Te dwie właściwości się składają. */
@keyframes copyIn{
  from{opacity:0;translate:0 26px;filter:blur(12px)}
  to  {opacity:1;translate:0 0;filter:none}
}

/* --- pasek na dole --- */
.hbar{
  position:absolute;left:50%;bottom:calc(var(--frame) + 6px);
  transform:translateX(-50%);
  margin:0;z-index:5;white-space:nowrap;
  font-family:'Vogjer','Kinetic',sans-serif;
  font-size:clamp(9px,1vw,15px);letter-spacing:.18em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:0;
}
body.is-in .hbar{animation:copyIn 1.4s 3.1s var(--ease) forwards}

/* ============================================================
   SOCIAL
   ============================================================ */
.social{
  position:absolute;z-index:6;
  left:var(--frame);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.soc{
  position:relative;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  color:rgba(196,218,248,.72);
  transition:.45s var(--ease);
}
.soc::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(160,200,255,.30);
  background:rgba(124,179,255,.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transform:scale(.55);transition:.45s var(--ease);
}
.soc::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(124,179,255,.6);opacity:0;
}
.soc svg{
  position:relative;z-index:2;width:16px;height:16px;
  filter:drop-shadow(0 0 8px rgba(150,190,255,.28));
  transition:.45s var(--ease);
}
.soc:hover::before{opacity:1;transform:scale(1)}
.soc:hover::after{animation:socRing .9s var(--ease)}
.soc:hover{color:#dceaff}
.soc:hover svg{transform:scale(1.16) translateY(-1px);
  filter:drop-shadow(0 0 16px rgba(190,215,255,.95))}
@keyframes socRing{
  0%  {opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.75)}
}

/* ============================================================
   HAMBURGER — heksagon, pulsowanie i rozchodzące się pierścienie
   ============================================================ */
/* Menu jedzie ze stroną: `fixed`, nie `absolute`, więc zostaje
   w prawym górnym rogu ekranu na każdej sekcji. Z-index musi być
   ponad scenami taśm (te mają 3) i ponad reflektorem kursora. */
.burger{
  position:fixed;z-index:60;
  right:var(--frame);top:var(--frame);
  width:clamp(44px,4.2vw,56px);height:clamp(44px,4.2vw,56px);padding:0;
  display:grid;place-items:center;
  background:transparent;border:0;cursor:none;
  animation:burgerPulse 3.6s ease-in-out infinite;
}
/* Podpis pod hamburgerem: najpierw pionowa kreska, pod nią słowo MENU.
   Pionowy zapis siedzi tylko na samym słowie — gdyby był na całym
   pudełku, `flex-direction:column` układałby elementy w poziomie
   i kreska stawałaby obok napisu zamiast nad nim.
   Prawa krawędź liczona tak, żeby oś podpisu wypadła na osi ikony. */
.burger__tag{
  position:fixed;z-index:60;pointer-events:none;
  right:calc(var(--frame) + clamp(44px,4.2vw,56px) / 2 - 5px);
  top:calc(var(--frame) + clamp(44px,4.2vw,56px) + 10px);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:opacity .4s var(--ease),color .4s var(--ease);
  color:rgba(198,220,255,.42);
}
.burger__tag b{
  writing-mode:vertical-rl;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8px;letter-spacing:.4em;color:inherit;
}
.burger__tag i{
  width:1px;height:clamp(26px,3vh,44px);
  background:linear-gradient(180deg,rgba(124,179,255,.7),transparent);
}
.burger:hover ~ .burger__tag{color:var(--blue)}
/* przy otwartym menu podpis znika — przycisk jest wtedy krzyżykiem */
body.nav-open .burger__tag{opacity:0}

@keyframes burgerPulse{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.045)}
}
.burger__ring{
  position:absolute;inset:0;overflow:hidden;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background:linear-gradient(145deg, rgba(198,222,255,.15), rgba(150,190,255,.04));
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  transition:.5s var(--ease);
}
.burger:hover .burger__ring{
  background:linear-gradient(145deg, rgba(198,222,255,.26), rgba(150,190,255,.09));
}
/* poświata dopiero po najechaniu */
.burger:hover{
  filter:drop-shadow(0 0 22px rgba(124,179,255,.65))
         drop-shadow(0 0 44px rgba(124,179,255,.3));
}
/* refleks przelatuje bez przerwy, nie tylko w hoverze */
.gbtn__sheen{
  position:absolute;top:0;left:-70%;z-index:1;
  width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(220,236,255,.34),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:sheenLoop 5.2s var(--ease) infinite;
}
@keyframes sheenLoop{
  0%,72%{left:-70%}
  100%  {left:120%}
}
/* w hoverze przebiega szybciej i mocniej */
.burger:hover .gbtn__sheen{animation-duration:1.6s}

.burger__hex{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.burger__hex polygon{
  fill:none;stroke:rgba(186,214,255,.28);stroke-width:1;
  vector-effect:non-scaling-stroke;transition:stroke .45s var(--ease);
}
.burger:hover .burger__hex polygon{stroke:rgba(124,179,255,.75)}

/* trzy heksagonalne pierścienie odchodzące na zewnątrz */
.burger__pulse{position:absolute;inset:0;pointer-events:none}
.burger__pulse i{
  position:absolute;inset:0;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  box-shadow:inset 0 0 0 1px rgba(124,179,255,.55);
  opacity:0;
  animation:hexOut 4.2s var(--ease) infinite;
}
.burger__pulse i:nth-child(2){animation-delay:1.4s}
.burger__pulse i:nth-child(3){animation-delay:2.8s}
@keyframes hexOut{
  0%  {opacity:.5;transform:scale(1)}
  70% {opacity:0;transform:scale(1.85)}
  100%{opacity:0;transform:scale(1.85)}
}

.burger__box{position:relative;width:20px;height:14px;display:block;z-index:2}
.burger__box i{
  position:absolute;left:0;height:1.5px;border-radius:2px;background:var(--ink);
  transition:width .45s var(--ease),transform .45s var(--ease),
             opacity .3s var(--ease),background .45s var(--ease);
}
.burger__box i:nth-child(1){top:0;   width:100%}
.burger__box i:nth-child(2){top:6px; width:70%; transition-delay:.05s}
.burger__box i:nth-child(3){top:12px;width:45%; transition-delay:.1s}
.burger:hover .burger__box i{background:var(--blue)}
.burger:hover .burger__box i:nth-child(2),
.burger:hover .burger__box i:nth-child(3){width:100%}
.burger.is-open .burger__box i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open .burger__box i:nth-child(2){opacity:0;transform:translateX(12px)}
.burger.is-open .burger__box i:nth-child(3){width:100%;transform:translateY(-6px) rotate(-45deg)}
.burger.is-open .burger__hex polygon{stroke:rgba(124,179,255,.8)}

/* ============================================================
   WSKAŹNIK POSTĘPU
   ============================================================ */
.prog{
  position:fixed;right:calc(var(--frame) - 4px);top:50%;
  transform:translateY(-50%);
  z-index:39;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.prog__num{font-size:9px;letter-spacing:.24em;color:rgba(210,228,255,.45)}
.prog__num--end{color:rgba(210,228,255,.28)}
.prog__track{
  position:relative;width:2px;height:min(34vh,300px);
  border-radius:2px;background:rgba(210,228,255,.12);
}
/* Poświata jest celowo oszczędna — wcześniej pasek świecił mocniej niż
   treść obok i ściągał wzrok na siebie. */
.prog__fill{
  position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,#8ef4ff 0%,#5aa8ff 55%,#3f7bff 100%);
  box-shadow:0 0 6px rgba(120,200,255,.45);
}
.prog__fill::after{
  content:'';position:absolute;inset:-2px -3px;border-radius:5px;
  background:inherit;filter:blur(4px);opacity:.35;
}
.prog__dot{
  position:absolute;left:50%;top:0;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#eafaff;
  box-shadow:0 0 5px rgba(159,230,255,.8),0 0 12px rgba(120,200,255,.45);
  animation:progPulse 2.2s var(--ease) infinite;
}
/* nazwa sekcji, w której właśnie jesteśmy */
.prog__lbl{
  writing-mode:vertical-rl;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8px;letter-spacing:.34em;color:rgba(210,228,255,.42);
  text-transform:uppercase;white-space:nowrap;
  transition:opacity .3s var(--ease);
}
@keyframes progPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* ============================================================
   SEKCJA 02
   ============================================================ */
.s2{position:relative;z-index:1;height:460svh;cursor:none}
.s2__stick{position:sticky;top:0;height:100svh;overflow:hidden}
.s2__stick::before{
  content:'';position:absolute;left:0;right:0;top:0;
  height:26vh;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 38%,transparent 100%);
}
.s2__film{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Przyciemnienie na sam koniec sekcji — zjeżdża po finale, żeby
   hasło zostało na materiale, a dopiero potem obraz przeszedł
   w czerń i wtopił się w sekcję 03. */
.s2__out{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:#000;opacity:0;
}

/* ============================================================
   SEKCJA 03 — panel HUD
   Dwie płyty wjeżdżają z góry i z dołu, po czym zapala się
   niebieski neon na krawędzi i w suwaku. Przełączenie tematu
   powtarza całą sekwencję i podmienia treść.
   ============================================================ */
/* Faktura mokrego szkła jest w lewej części pliku, prawa jest czarna —
   dlatego kotwiczymy tło do lewej krawędzi. Kadr z pszczołą siedzi
   po prawej, więc nie wchodzi na fakturę. */
.s3{
  position:relative;z-index:1;
  min-height:100svh;background:#000;
  overflow:hidden;cursor:none;
}
.s3__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('assets/s3-tlo3.webp') center/cover no-repeat;
  opacity:0;transition:opacity 2.1s var(--ease);
}
.s3.is-live .s3__bg{opacity:1}

/* Druga warstwa: szklana ramka obejmująca całą sekcję. Ma być
   przezroczysta, ale odróżnialna od tła — stąd delikatne
   rozjaśnienie plus rozmycie i ten sam obrys co blok główny. */
.s3__frame{
  position:absolute;z-index:1;pointer-events:none;
  inset:clamp(20px,2.4vw,46px);
  border-radius:clamp(18px,1.8vw,30px);
  border:1px solid rgba(206,226,255,.16);
  background:linear-gradient(160deg,
      rgba(150,185,235,.055) 0%,
      rgba(40,68,116,.03) 50%,
      rgba(10,18,34,.06) 100%);
  backdrop-filter:blur(3px) saturate(112%);
  -webkit-backdrop-filter:blur(3px) saturate(112%);
  box-shadow:inset 0 1px 0 rgba(206,226,255,.12);
  opacity:0;transition:opacity 1.4s var(--ease);
}
.s3.is-live .s3__frame{opacity:1;transition-delay:.35s}
/* czarne gradienty zszywające sekcję z sąsiadami */
.s3::before,.s3::after{
  content:'';position:absolute;left:0;right:0;height:20vh;
  z-index:5;pointer-events:none;
}
.s3::before{top:0;   background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 40%,transparent 100%)}
.s3::after {bottom:0;background:linear-gradient(0deg,  #000 0%,rgba(0,0,0,.6) 40%,transparent 100%)}

/* --- HUD ---
   z-index:2 jest tu konieczny: ramka sekcji ma `backdrop-filter`,
   a bez wyniesienia treści ponad nią rozmywałaby nagłówek i opis. */
.hud3{position:absolute;inset:0;z-index:2;pointer-events:none}

/* ------------------------------------------------------------
   CHOREOGRAFIA WEJSCIA
   Jeden wyzwalacz (is-live), a kolejnosc robia opoznienia:
   tlo -> nadtytul -> naglowek -> opis -> slider -> przyciski.
   ------------------------------------------------------------ */
.s3__top{position:absolute;left:8%;right:8%;top:9%}

.s3__kicker{
  display:flex;align-items:center;gap:11px;margin:0 0 10px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9px;letter-spacing:.32em;color:var(--blue);
  opacity:0;transform:translateY(12px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.s3__kicker i{width:26px;height:1px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.s3.is-live .s3__kicker{opacity:1;transform:none;transition-delay:.75s}

.s3__head{
  margin:0;
  font-family:'Vogjer','Kinetic',sans-serif;font-weight:400;
  font-size:clamp(28px,4.2vw,72px);letter-spacing:.03em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:0;transform:translateY(20px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
}
.s3.is-live .s3__head{opacity:1;transform:none;transition-delay:.95s}

.s3__sub{
  margin:14px 0 0;max-width:min(88vw,1500px);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10px,.82vw,13.5px);line-height:1.7;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(214,230,250,.5);
  opacity:0;transform:translateY(16px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.s3.is-live .s3__sub{opacity:1;transform:none;transition-delay:1.15s}

/* sygnet w prawym gornym rogu, w miejscu dawnego radaru */
.s3__logo{
  position:absolute;right:5%;top:9%;
  width:clamp(64px,6.4vw,108px);height:auto;
  opacity:0;transform:translateY(-14px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.s3.is-live .s3__logo{opacity:.92;transform:none;transition-delay:.6s}
/* ============================================================
   SLIDER
   Tor przesuwa się o jedną szerokość na slajd. Tekst zostaje
   prostopadle do ekranu, więc jest ostry — płynność robi przesuw
   toru plus kaskada treści na slajdzie, który wchodzi.
   ============================================================ */
/* Lekka paralaksa 3D bloku — kontener daje perspektywę, a sam
   slider odchyla się o ułamek stopnia za kursorem (--rx/--ry z JS). */
.slider{
  /* Blok wyśrodkowany między opisem u góry a przyciskami u dołu —
     wcześniej wisiał za nisko i dotykał paska z przyciskami. */
  position:absolute;left:7.5%;right:7.5%;
  top:clamp(240px,30vh,340px);bottom:clamp(170px,22vh,250px);
  overflow:hidden;
  border-radius:clamp(16px,1.5vw,26px);
  z-index:2;                 /* nad ramką sekcji, inaczej jej blur zmiękcza tekst */
  --rx:0deg; --ry:0deg;
  /* Wychylenie jest małe celowo: przy większym kącie przeglądarka
     rasteryzuje warstwę raz i skaluje, przez co tekst mięknie. */
  transform:perspective(2200px) rotateX(var(--rx)) rotateY(var(--ry));
}
.slider__track{
  --i:0;
  display:flex;height:100%;
  transform:translate3d(calc(var(--i) * -100%),0,0);
  transition:transform .95s var(--ease);
}
.slide{
  position:relative;flex:0 0 100%;height:100%;margin:0;
  border-radius:clamp(16px,1.5vw,26px);
  border:1px solid rgba(206,226,255,.20);
  background:linear-gradient(158deg,
      rgba(122,158,214,.12) 0%,
      rgba(40,68,116,.08) 46%,
      rgba(10,18,34,.14) 100%);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(206,226,255,.18),
    0 34px 90px rgba(0,0,0,.62),
    0 12px 34px rgba(0,0,0,.45);
  overflow:hidden;isolation:isolate;
}

/* numer w lewym górnym rogu bloku, średniej wielkości */
.slide__no{
  position:absolute;left:clamp(22px,2.2vw,40px);top:clamp(18px,1.8vw,32px);
  z-index:3;
  font-family:'SuperCar','Vogjer',sans-serif;
  font-size:clamp(26px,2.4vw,44px);line-height:1;letter-spacing:.03em;
  background:linear-gradient(180deg,rgba(232,244,255,.95),rgba(140,175,225,.55));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  user-select:none;
}
/* refleks przesuwający się po tafli */
.slide__sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.slide__sheen::before{
  content:'';position:absolute;top:-30%;left:-60%;
  width:38%;height:170%;
  background:linear-gradient(100deg,transparent,rgba(220,238,255,.13),transparent);
  transform:skewX(-16deg);
  animation:sheenLoop 9s var(--ease) infinite;
}
.slide__in{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  align-items:center;gap:clamp(20px,3vw,60px);
  /* Marginesy pionowe są równe, więc grafika i tekst stoją dokładnie
     w połowie bloku. Numer w rogu nie potrzebuje zapasu u góry —
     jest pozycjonowany absolutnie i kończy się nad grafiką. */
  padding:clamp(34px,3.2vw,56px) clamp(24px,2.8vw,52px);
}
/* treść wyśrodkowana w pionie względem grafiki */
.slide__body{align-self:center}
/* grafika usługi po lewej — wchodzi przenikaniem razem ze slajdem */
.slide__img{
  justify-self:center;
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.55));
}
.slide__eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9px;letter-spacing:.3em;color:var(--blue);
}
.slide__eyebrow i{width:26px;height:1px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.slide__title{
  margin:0;font-family:'Vogjer','Kinetic',sans-serif;font-weight:400;
  font-size:clamp(24px,2.9vw,50px);line-height:1.06;letter-spacing:.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.slide__lead{
  margin:16px 0 0;max-width:none;   /* tekst ma iść do prawej krawędzi bloku */
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(11px,.82vw,14px);line-height:1.85;
  color:rgba(226,238,252,.66);
}
.slide__list{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px clamp(18px,2vw,34px);
}
.slide__list li{
  position:relative;padding-left:16px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10px,.72vw,12px);line-height:1.6;
  color:rgba(214,230,250,.5);
}
.slide__list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:1px;background:var(--blue);box-shadow:0 0 6px var(--blue);
}
.slide__list b{
  display:block;margin-bottom:3px;font-weight:500;
  letter-spacing:.14em;font-size:9px;text-transform:uppercase;
  color:rgba(232,242,255,.9);
}

/* Kaskada treści na aktywnym slajdzie. Elementy nie ruszają się
   w poprzek, tylko unoszą — dzięki temu tekst nie rozmazuje się
   w trakcie przesuwu toru. */
.slide__img,.slide__eyebrow,.slide__title,.slide__lead,.slide__list{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
/* grafika sama przenika, bez podjeżdżania */
.slide__img{transform:none;transition:opacity .95s var(--ease)}
.slide.is-on .slide__img   {opacity:1;transition-delay:.16s}
.slide.is-on .slide__eyebrow{opacity:1;transform:none;transition-delay:.26s}
.slide.is-on .slide__title {opacity:1;transform:none;transition-delay:.34s}
.slide.is-on .slide__lead  {opacity:1;transform:none;transition-delay:.44s}
.slide.is-on .slide__list  {opacity:1;transform:none;transition-delay:.54s}
/* Wejście kolumny: sam fade, bez ruchu — kolumna ma wyglądać
   tak samo od pierwszej klatki. Podmianę treści animujemy na niej,
   nie na siatce, żeby nie tworzyć kontekstu izolacji nad canvasem. */
/* Slider wchodzi jako całość. Wejście idzie przez `translate`, nie
   `transform` — ten drugi jest zajęty przez paralaksę 3D i reguła
   z `transform:none` skasowałaby ją po wejściu. */
.slider{
  opacity:0;translate:0 26px;
  transition:opacity 1.1s var(--ease),translate 1.1s var(--ease),
             transform .5s var(--ease);
}
.s3.is-live .slider{opacity:1;translate:0 0;transition-delay:1.35s}
.s3.is-done .slider{transition-delay:0s}
/* --- przyciski --- */
.s3__nav{
  position:absolute;z-index:4;
  left:0;right:0;bottom:7%;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
/* przyciski zamykają sekwencję, jeden po drugim */
.hbtn{opacity:0;transform:translateY(22px)}
.s3.is-live .hbtn{
  opacity:1;transform:translateY(0);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease),
             background .45s var(--ease),box-shadow .45s var(--ease),color .45s var(--ease);
}
.s3.is-live .hbtn:nth-child(1){transition-delay:2.75s}
.s3.is-live .hbtn:nth-child(2){transition-delay:3.01s}
.s3.is-live .hbtn:nth-child(3){transition-delay:3.27s}
.s3.is-live .hbtn:nth-child(4){transition-delay:3.53s}
.s3.is-live .hbtn:nth-child(5){transition-delay:3.79s}
/* po wejściu opóźnienia nie mogą spowalniać hoveru */
.s3.is-live .hbtn:hover{transition-delay:0s}
/* Szkło z neonem wsiąkającym od dolnej krawędzi — tak jak
   w referencji przycisków. Sam `box-shadow` daje płaską obwódkę,
   więc światło robi osobna, rozmyta warstwa w środku kształtu. */
.hbtn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:11px;
  padding:14px 24px;border:0;cursor:none;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9.5px;letter-spacing:.2em;color:rgba(226,238,252,.82);
  background:linear-gradient(180deg,
      rgba(214,234,255,.16) 0%,
      rgba(120,170,240,.06) 42%,
      rgba(30,60,120,.14) 100%);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  clip-path:polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  box-shadow:
    inset 0 1px 0 rgba(224,240,255,.42),
    inset 0 -1px 0 rgba(120,180,255,.20),
    0 14px 30px rgba(0,0,0,.5);
  transition:.45s var(--ease);
}
/* neon przy dolnej krawędzi */
.hbtn::after{
  content:'';position:absolute;left:12%;right:12%;bottom:-9px;height:16px;
  border-radius:99px;pointer-events:none;z-index:1;
  background:radial-gradient(60% 100% at 50% 100%,
      rgba(150,220,255,.95) 0%, rgba(80,160,255,.55) 45%, transparent 100%);
  filter:blur(6px);
  opacity:.55;transition:.45s var(--ease);
}
.hbtn__sheen{
  position:absolute;top:0;left:-70%;width:55%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(224,240,255,.34),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:sheenLoop 6.5s var(--ease) infinite;
}
.hbtn__n{position:relative;z-index:2;color:var(--blue);opacity:.75}
.hbtn__t{position:relative;z-index:2}

/* Zbliżenie kursora: przycisk lekko rośnie i wypuszcza podpowiedź
   z własną nazwą — sygnał, że to element klikalny, jeszcze zanim
   mysz na niego wejdzie. --near ustawia JS w zakresie 0..1. */
.hbtn{--near:0}
.s3.is-btns .hbtn{
  transform:translateY(calc(var(--near) * -6px)) scale(calc(1 + var(--near) * .07));
}
/* Jeden wspólny dymek, pozycjonowany z JS nad najbliższym przyciskiem.
   Nie może być dzieckiem przycisku, bo `clip-path` obcina potomków. */
.tipbox{
  position:absolute;left:0;bottom:0;z-index:6;
  padding:6px 12px;white-space:nowrap;pointer-events:none;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8px;letter-spacing:.22em;color:#eaf3ff;
  background:rgba(16,26,44,.86);
  border:1px solid rgba(160,200,255,.3);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 18px rgba(110,180,255,.28);
  opacity:0;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),
             left .25s var(--ease),bottom .25s var(--ease);
}
.tipbox.is-on{opacity:1;transform:translateY(0)}

.hbtn:hover{
  color:#fff;transform:translateY(-3px);
  background:linear-gradient(180deg,
      rgba(224,240,255,.26) 0%,
      rgba(130,180,250,.10) 42%,
      rgba(40,80,160,.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(236,246,255,.6),
    0 18px 40px rgba(0,0,0,.55),
    0 0 34px rgba(110,180,255,.4);
}
.hbtn:hover::after{opacity:1;left:6%;right:6%;height:20px}
.hbtn:hover .hbtn__sheen{animation-duration:1.8s}

.hbtn.is-active{
  color:#fff;
  background:linear-gradient(180deg,
      rgba(224,240,255,.3) 0%,
      rgba(120,180,255,.16) 40%,
      rgba(46,96,190,.28) 100%);
  box-shadow:
    inset 0 1px 0 rgba(240,248,255,.75),
    inset 0 0 26px rgba(120,190,255,.35),
    0 18px 44px rgba(0,0,0,.55),
    0 0 40px rgba(110,180,255,.55);
}
.hbtn.is-active::after{
  opacity:1;left:4%;right:4%;height:22px;
  background:radial-gradient(60% 100% at 50% 100%,
      #cfeaff 0%, rgba(120,190,255,.75) 42%, transparent 100%);
}
.hbtn.is-active .hbtn__n{opacity:1}

@media (max-width:1024px){
  .s3__body{left:8%;width:84vw}
  .s3__nav{left:8%;bottom:8%}
  .s3__logo{display:none}
  /* na wąskim ekranie grafika idzie NAD tekst i obie części są
     wyśrodkowane — układ dwukolumnowy byłby tu nieczytelny */
  /* Blok zaczyna się nieco niżej — pod opisem zostawał ciasny odstęp.
     Dolna krawędź zeszła o tyle samo, żeby karta nie straciła wysokości
     i treść nadal mieściła się bez przewijania. */
  .slider{left:4%;right:4%;top:clamp(238px,30vh,330px);bottom:clamp(126px,17vh,180px)}
  /* Treść musi się zmieścić w bloku bez przewijania — stąd `overflow:hidden`
     zamiast `auto` i mniejsze wszystko w środku. Pasek przewijania
     wewnątrz karty wyglądał jak usterka. */
  .slide__in{
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:auto;align-content:center;
    gap:clamp(8px,1.6vw,14px);
    text-align:center;
    padding:clamp(28px,5vw,42px) clamp(16px,4vw,28px) clamp(16px,3vw,24px);
    overflow:hidden;
  }
  .slide__img{max-height:min(13vh,108px)}
  .slide__eyebrow{justify-content:center;margin-bottom:6px}
  .slide__title{font-size:clamp(15px,3.6vw,24px);margin-bottom:6px}
  .slide__lead{font-size:clamp(10px,2.5vw,12px);line-height:1.55}
  .slide__list{
    grid-template-columns:minmax(0,1fr);text-align:left;
    max-width:420px;margin-inline:auto;gap:6px;
  }
  .slide__list li{font-size:9px;line-height:1.35}
  .slide__list{gap:5px}
  /* Numer wraca do lewego górnego rogu karty — na środku zderzał się
     z nadtytułem i tytułem, które też są wyśrodkowane. */
  .slide__no{
    left:clamp(14px,4vw,24px);top:clamp(12px,3vw,20px);
    transform:none;font-size:clamp(20px,5vw,30px);
  }
  /* Przyciski zawijają się i wszystkie są widoczne. Wcześniej stał tu
     pasek przewijany w poziomie, przez co połowa pozycji była poza
     ekranem. Flex zamiast siatki: ostatni, niepełny rząd zostaje
     wyśrodkowany, a w siatce lądował przy lewej krawędzi. */
  .s3__nav{
    left:4%;right:4%;bottom:4%;
    display:flex;flex-wrap:wrap;justify-content:center;align-content:end;
    gap:7px;padding:0;overflow:visible;
  }
  .hbtn{
    flex:0 0 calc((100% - 14px) / 3);
    padding:9px 6px;font-size:7.5px;letter-spacing:.1em;
    justify-content:center;text-align:center;gap:6px;
  }
}

.blk{position:absolute;z-index:2;--v:0;opacity:var(--v);pointer-events:none}
.blk--a{right:7%;top:17%;text-align:right}
.blk--b{left:7%;top:40%}
.blk--c{left:50%;bottom:12%;transform:translateX(-50%);text-align:center}
.blk--end{left:7%;top:36%}

.blk__id{
  display:inline-flex;align-items:center;gap:10px;
  font-size:9px;letter-spacing:.30em;color:var(--blue);
  opacity:calc(var(--v) * .9);
  transform:translateY(calc((1 - var(--v)) * 10px));
}
.blk__id::before{
  content:'';width:calc(var(--v) * 34px);height:1px;
  background:var(--blue);box-shadow:0 0 8px var(--blue);
}
.blk__h{
  position:relative;margin:12px 0 0;
  font-family:'Vogjer','Kinetic',sans-serif;font-weight:400;
  font-size:clamp(22px,2.5vw,44px);line-height:1.06;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;
  clip-path:inset(0 calc((1 - var(--v)) * 100%) 0 0);
  transform:translateX(calc((1 - var(--v)) * -16px));
  text-shadow:0 0 calc(var(--v) * 26px) rgba(124,179,255,.35);
}
.blk--c .blk__h{transform:none}
.blk__h::after{
  content:'';position:absolute;top:-4%;bottom:-4%;
  left:calc(var(--v) * 100%);width:2px;
  background:linear-gradient(180deg,transparent,#cfe6ff,transparent);
  box-shadow:0 0 14px rgba(140,200,255,.9);
  opacity:calc((1 - var(--v)) * var(--v) * 4);
}
.blk__p{
  margin:16px 0 0;max-width:44ch;
  font-size:clamp(14px,1.05vw,16.5px);line-height:1.72;
  color:rgba(232,240,250,.78);
  opacity:calc(var(--v) * var(--v));
  transform:translateY(calc((1 - var(--v)) * 16px));
}
.blk--a .blk__p{margin-left:auto}
.blk--c .blk__p{margin-left:auto;margin-right:auto}

@property --in{syntax:'<number>';inherits:false;initial-value:0}

/* ============================================================
   TAŚMA REALIZACJI (.reel)
   Wspólny komponent sekcji 04 i 05. Sekcja jest wysoka i służy jako
   tor przewijania; treść siedzi w scenie przyklejonej do góry ekranu.
   Wysokość bierze się z `--screens`, które ustawia JS — liczba ekranów
   wynika z liczby kart i tempa, a tego CSS sam nie policzy.
   ============================================================ */
.reel{
  position:relative;z-index:1;
  height:calc(var(--screens,7) * 100svh);
  background:var(--bg);
}
/* Sekcja graficzna startuje ekran wcześniej, niż kończy się sekcja 04.
   Dzięki temu blok zjeżdżający w dół z poprzedniej taśmy trafia prosto
   na scenę tej sekcji, zamiast lecieć przez ekran pustki. */
.reel--graf{margin-top:-100svh;z-index:2}

/* Zwykłe `sticky` — scena przykleja się do góry na czas przesuwu
   taśmy i odjeżdża razem ze stroną, bez żadnych sztuczek. */
.reel__stage{
  position:sticky;top:0;z-index:1;
  height:100svh;overflow:hidden;cursor:none;
  background:var(--bg);
}

/* ---------------- pole heksów ----------------
   Siatka to zwykłe powtarzane tło z kafla SVG, a brzegi wygasza
   położona na niej warstwa w kolorze tła.

   Wcześniej robiła to maska (`mask-image: url(hex.svg)`) i działała
   tylko w części przeglądarek: silniki różnie decydują, czy z pliku
   SVG brać kanał alfa, czy jasność, i tam gdzie wypadła jasność cała
   siatka znikała. Gradient w tle interpretuje się wszędzie tak samo. */
.reel__hex{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.8s var(--ease);
}
.reel.is-live .reel__hex{opacity:1}
.reel__hex i{
  position:absolute;inset:0;display:block;opacity:.09;
  background-image:
    radial-gradient(ellipse 58% 54% at 50% 48%,
        rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 60%,var(--bg) 100%),
    url('assets/hex.svg');
  background-repeat:no-repeat,repeat;
  background-size:100% 100%,84px 48.497px;
  background-position:center,center;
}

/* winieta plus wygaszenie góry i dołu, żeby taśma nie ucinała się ostro */
.reel__grad{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 78%,var(--bg) 100%),
    radial-gradient(ellipse 90% 70% at 50% 50%,transparent 40%,rgba(0,0,0,.72) 100%);
}

/* ---------------- nagłówek ---------------- */
.reel__top{
  position:absolute;left:7.5%;top:clamp(30px,4.6vh,60px);z-index:3;
  /* Blok trzyma się lewej połowy ekranu — prawa należy do taśmy. */
  width:min(52vw,980px);pointer-events:none;
  /* razem z blokiem gaśnie przy przejściu do następnej sekcji */
  opacity:calc(1 - var(--hand,0));
}
.reel__kicker{
  display:flex;align-items:center;gap:10px;margin:0 0 10px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9px;letter-spacing:.32em;color:var(--blue);
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reel__kicker i{width:26px;height:1px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.reel__head{
  margin:0;font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(17px,2.1vw,32px);letter-spacing:.02em;line-height:1.14;
  color:#eaf3ff;text-transform:uppercase;
  opacity:0;transform:translateY(22px);
  transition:opacity 1.1s .12s var(--ease),transform 1.1s .12s var(--ease);
}
.reel__lead{
  margin:clamp(12px,1.6vh,20px) 0 0;
  font-family:'Montserrat',sans-serif;font-weight:500;
  /* Wielkość dobrana tak, żeby najdłuższy z opisów (ok. 430 znaków)
     zmieścił się w trzech linijkach na połowie szerokości ekranu. */
  font-size:clamp(8.5px,.63vw,12px);line-height:1.72;
  color:rgba(206,226,255,.55);
  opacity:0;transform:translateY(18px);
  transition:opacity 1.1s .3s var(--ease),transform 1.1s .3s var(--ease);
}
.reel.is-live .reel__kicker,
.reel.is-live .reel__head,
.reel.is-live .reel__lead{opacity:1;transform:none}

/* ---------------- taśma ---------------- */
.reel__strip{
  position:absolute;inset:0;z-index:2;
  perspective:1800px;
  /* `--sy` prowadzi zjazd bloku do sekcji niżej i jego wjazd z góry */
  translate:0 var(--sy,0px);
}
/* Tor jest szerszy od ekranu, a grid w takim wypadku przestaje
   centrować (przełącza się na `start`, żeby nie uciąć treści).
   Dlatego środek liczymy sami — `left:50%` plus przesuw z JS. */
/* `top:53%`, nie `50%` — nagłówek z akapitem zajmuje górny lewy róg,
   a taśma zsunięta o kilka procent w dół omija go bez kolizji. */
.reel__track{
  position:absolute;left:50%;top:53%;
  display:flex;align-items:center;
  gap:var(--gap);
  --gap:clamp(24px,3vw,56px);
  transform-style:preserve-3d;
  translate:calc(-50% + var(--x,0px)) -50%;
}

.wrk{
  --d:0;                      /* odległość od środka w kartach, ze znakiem */
  --dr:0;                     /* to samo, ale przycięte — kąt nie ucieka   */
  --a:0;                      /* |d| znormalizowane — steruje wygaszeniem  */
  --in:0;                     /* 0→1 wejście karty, z opóźnieniem po kolei */
  flex:0 0 auto;
  width:var(--cw);
  --cw:clamp(280px,44vw,720px);
  transform-style:preserve-3d;
  /* Wejście dokłada się do stałego układu taśmy: karta nadlatuje
     z głębi i lekko z dołu, ale kąt i odsunięcie wynikające z pozycji
     w taśmie zostają nietknięte. */
  transform:
    rotateY(calc(var(--dr) * -20deg))
    translateZ(calc(var(--a) * -190px + (1 - var(--in)) * -560px))
    translateY(calc((1 - var(--in)) * 80px))
    scale(calc(1 - var(--a) * .07));
  opacity:calc((1 - var(--a) * .78) * var(--in));
  transition:opacity .25s linear,--in 1s var(--ease);
}
/* Karty wchodzą jedna po drugiej, od pierwszej realizacji.
   `--in` musi być zarejestrowane przez `@property`, inaczej przeglądarka
   traktuje je jako zwykły token tekstowy i nie ma czego animować. */
.reel.is-live .wrk{--in:1}
.wrk:nth-child(1){transition-delay:0s,.30s}
.wrk:nth-child(2){transition-delay:0s,.42s}
.wrk:nth-child(3){transition-delay:0s,.54s}
.wrk:nth-child(4){transition-delay:0s,.66s}
.wrk:nth-child(5){transition-delay:0s,.78s}
.wrk:nth-child(6){transition-delay:0s,.90s}
.wrk:nth-child(7){transition-delay:0s,1.02s}
.wrk:nth-child(8){transition-delay:0s,1.14s}
.wrk:nth-child(9){transition-delay:0s,1.26s}

.wrk__media{
  position:relative;aspect-ratio:16/9;
  border-radius:clamp(10px,1vw,18px);overflow:hidden;
  background:#05070c;
  box-shadow:
    0 30px 80px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
.wrk__v{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Boczne kadry schodzą do szarości, żeby wzrok trzymał się środka. */
  filter:saturate(calc(1 - var(--a) * .9)) brightness(calc(1 - var(--a) * .35));
  transition:filter .3s linear;
}
/* Prace graficzne mają różne proporcje — od pionowego plakatu po
   panoramiczny folder. `contain` pokazuje projekt w całości; `cover`
   obcinałby połowę plakatu. */
.wrk__v--fit{object-fit:contain;padding:clamp(10px,1.2vw,22px)}
/* delikatne linie skanujące — HUD, ten sam język co reszta strony */
.wrk__scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
      rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  opacity:calc(.55 - var(--a) * .3);mix-blend-mode:overlay;
}
/* obrys rozjaśnia się tylko na karcie w środku */
.wrk__edge{
  position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  border:1px solid rgba(124,179,255,calc(.5 - var(--a) * .45));
  box-shadow:0 0 calc(34px * (1 - var(--a))) rgba(124,179,255,calc(.3 - var(--a) * .3)) inset;
  transition:border-color .3s linear;
}

.wrk__meta{
  display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,22px);
  margin-top:clamp(14px,1.8vh,24px);
  /* `--mfade` gasi opis przed zjazdem bloku do następnej sekcji —
     najpierw znika podpis, dopiero potem rusza sam kadr. */
  opacity:calc((1 - var(--a) * 1.15) * (1 - var(--mfade,0)));
  transform:translateY(calc(var(--a) * 10px));
  transition:opacity .25s linear,transform .25s linear;
}
.wrk__no{
  font-family:'SuperCar',sans-serif;font-size:clamp(26px,3vw,44px);
  line-height:.85;color:transparent;
  -webkit-text-stroke:1px rgba(124,179,255,.55);
  text-shadow:0 0 22px rgba(124,179,255,.22);
}
.wrk__title{
  margin:0 0 5px;font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(17px,1.9vw,30px);letter-spacing:.02em;
  color:#eaf3ff;text-transform:uppercase;line-height:1;
}
.wrk__tags{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9px,.72vw,11px);letter-spacing:.18em;
  color:rgba(198,220,255,.5);text-transform:uppercase;
}

/* ---------------- wskaźnik pozycji ---------------- */
.reel__dots{
  position:absolute;left:50%;bottom:clamp(104px,13vh,152px);z-index:3;
  display:flex;gap:9px;transform:translateX(-50%);pointer-events:none;
  opacity:calc(1 - var(--hand,0));
}
.reel__dots i{
  width:26px;height:2px;border-radius:2px;
  background:rgba(210,228,255,.16);
  opacity:0;scale:.3 1;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),
             opacity .5s var(--ease),scale .5s var(--ease);
}
.reel.is-live .reel__dots i{opacity:1;scale:1 1}
.reel.is-live .reel__dots i:nth-child(1){transition-delay:0s,0s,1.05s,1.05s}
.reel.is-live .reel__dots i:nth-child(2){transition-delay:0s,0s,1.11s,1.11s}
.reel.is-live .reel__dots i:nth-child(3){transition-delay:0s,0s,1.17s,1.17s}
.reel.is-live .reel__dots i:nth-child(4){transition-delay:0s,0s,1.23s,1.23s}
.reel.is-live .reel__dots i:nth-child(5){transition-delay:0s,0s,1.29s,1.29s}
.reel.is-live .reel__dots i:nth-child(6){transition-delay:0s,0s,1.35s,1.35s}
.reel.is-live .reel__dots i:nth-child(7){transition-delay:0s,0s,1.41s,1.41s}
.reel.is-live .reel__dots i:nth-child(8){transition-delay:0s,0s,1.47s,1.47s}
.reel.is-live .reel__dots i:nth-child(9){transition-delay:0s,0s,1.53s,1.53s}
.reel__dots i.is-on{background:var(--blue);box-shadow:0 0 12px var(--blue)}

/* ---------------- przycisk „zobacz portfolio" ----------------
   Ten sam język co przyciski w sekcji 03: ścięty róg, szkło i neon
   wsiąkający od dolnej krawędzi — tylko w większej skali. */
.pbtn{
  position:absolute;left:50%;bottom:clamp(30px,4.4vh,58px);z-index:4;
  translate:-50% 0;
  overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:14px;
  padding:19px 42px;border:0;cursor:none;text-decoration:none;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:11.5px;letter-spacing:.24em;color:rgba(226,238,252,.9);
  background:linear-gradient(180deg,
      rgba(214,234,255,.16) 0%,
      rgba(120,170,240,.06) 42%,
      rgba(30,60,120,.14) 100%);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  clip-path:polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  box-shadow:
    inset 0 1px 0 rgba(224,240,255,.42),
    inset 0 -1px 0 rgba(120,180,255,.20),
    0 16px 34px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity 1s var(--ease),background .45s var(--ease),
             box-shadow .45s var(--ease),color .45s var(--ease);
}
.reel.is-live .pbtn{opacity:calc(1 - var(--hand,0));transition-delay:1.7s,0s,0s,0s}
.pbtn::after{
  content:'';position:absolute;left:14%;right:14%;bottom:-11px;height:20px;
  border-radius:99px;pointer-events:none;z-index:1;
  background:radial-gradient(60% 100% at 50% 100%,
      rgba(150,220,255,.95) 0%, rgba(80,160,255,.55) 45%, transparent 100%);
  filter:blur(7px);
  opacity:.6;transition:.45s var(--ease);
}
.pbtn:hover{
  color:#fff;
  background:linear-gradient(180deg,
      rgba(214,234,255,.26) 0%,
      rgba(120,170,240,.12) 42%,
      rgba(40,80,160,.20) 100%);
  box-shadow:
    inset 0 1px 0 rgba(235,246,255,.6),
    inset 0 -1px 0 rgba(140,200,255,.35),
    0 20px 44px rgba(0,0,0,.55);
}
.pbtn:hover::after{opacity:1;filter:blur(9px)}
.pbtn__sheen{
  position:absolute;top:0;left:-70%;width:55%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(224,240,255,.34),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:sheenLoop 6.5s var(--ease) infinite;
}
.pbtn__t{position:relative;z-index:2}
.pbtn__ar{
  position:relative;z-index:2;width:17px;height:17px;
  color:var(--blue);
  transition:transform .45s var(--ease);
}
.pbtn:hover .pbtn__ar{transform:translateX(5px)}

/* ============================================================
   SEKCJA 06 — marketing i video FX
   Laptop stoi po prawej, tekst po lewej. Mockup jest rozcięty na
   klapę i podstawę, bo klapa musi się otwierać osobno; obie części
   mają przezroczyste tło, a wnętrze ekranu jest wycięte — wideo leży
   warstwę niżej i widać je dokładnie w tym wycięciu.
   ============================================================ */
.reel--film{margin-top:-100svh;z-index:3}
/* Kolumna z tekstem i laptop są wyśrodkowane w pionie wokół tej samej
   osi, więc trzymają się razem niezależnie od wysokości okna. Oś jest
   przesunięta nad środek, bo pod spodem muszą się jeszcze zmieścić
   oś czasu, equalizer i przycisk. */
.reel__top--wide{
  left:5.5%;width:min(58ch,36vw);top:48%;translate:0 -50%;
}

.film__p{
  margin:clamp(10px,1.4vh,18px) 0 0;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10.5px,.74vw,13px);line-height:1.85;
  color:rgba(206,226,255,.58);
  opacity:0;transform:translateY(18px);
  transition:opacity 1.1s .3s var(--ease),transform 1.1s .3s var(--ease);
}
.film__p + .film__p{transition-delay:.42s}
.film__cap{
  margin:clamp(16px,2.2vh,26px) 0 0;padding-left:16px;
  border-left:1px solid rgba(124,179,255,.45);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10.5px,.74vw,13px);line-height:1.8;
  color:rgba(226,238,252,.86);
  opacity:0;transform:translateY(18px);
  transition:opacity 1.1s .56s var(--ease),transform 1.1s .56s var(--ease);
}
.film__badge{
  display:inline-flex;align-items:center;gap:10px;margin:14px 0 0 16px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.3em;color:var(--blue);
  opacity:0;transform:translateY(14px);
  transition:opacity 1.1s .68s var(--ease),transform 1.1s .68s var(--ease);
}
.film__badge i{width:20px;height:1px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.reel.is-live .film__p,
.reel.is-live .film__cap,
.reel.is-live .film__badge{opacity:1;transform:none}

/* ---------------- laptop ---------------- */
.film{
  /* Odsunięcie od prawej krawędzi jest większe niż standardowe 4,5%:
     laptop ma stać wyraźnie w polu, a nie przy samym brzegu ekranu. */
  position:absolute;right:7.3%;top:48%;translate:0 -50%;
  width:min(50vw,860px);
  --ry:0deg; --rx:0deg;
}
/* Zachęta nad laptopem. Pozycjonowana absolutnie, więc nie przesuwa
   kadru — laptop zostaje dokładnie tam, gdzie był. Gaśnie, kiedy
   dźwięk jest już włączony: wtedy nie ma czego zachęcać. */
.film__hint{
  position:absolute;left:0;right:0;bottom:calc(100% + 16px);margin:0;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9px;letter-spacing:.34em;color:var(--blue);
  text-shadow:0 0 12px rgba(124,179,255,.45);
  opacity:calc(var(--open,1) * (1 - var(--hand,0)));
  transition:opacity .6s var(--ease);
  animation:hintPulse 2.8s var(--ease) infinite;
}
.film__hint i{
  width:clamp(24px,3vw,54px);height:1px;
  background:linear-gradient(90deg,transparent,var(--blue));
  box-shadow:0 0 8px var(--blue);
}
.film__hint i:last-child{background:linear-gradient(90deg,var(--blue),transparent)}
.film.is-loud .film__hint{opacity:0;animation:none}
@keyframes hintPulse{
  0%,100%{filter:brightness(1)}
  50%    {filter:brightness(1.55)}
}

.mac{
  position:relative;width:100%;
  transform-style:preserve-3d;
  transform:rotateY(var(--ry)) rotateX(var(--rx));
}
/* `--open` prowadzi klapę: 0 to laptop zamknięty, 1 otwarty.
   Zawias jest u dołu klapy, stąd `transform-origin` na dolnej krawędzi. */
.mac__lid{
  position:relative;width:100%;aspect-ratio:1000/526;
  transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--open,1)) * -84deg));
  transform-style:preserve-3d;
}
/* Wycięcie ekranu w mockupie: zmierzone na oryginale, 195,5/79,8 px
   przy kadrze 1000×526. Wideo musi trafić dokładnie w te ramy. */
.mac__v{
  position:absolute;left:19.55%;top:15.17%;
  width:62.95%;height:78.21%;
  object-fit:cover;background:#04060a;display:block;
}
.mac__lidimg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
/* refleks na szybie — jaśnieje razem z otwieraniem klapy */
.mac__glare{
  position:absolute;left:19.55%;top:15.17%;width:62.95%;height:78.21%;
  z-index:3;pointer-events:none;
  background:linear-gradient(112deg,
      transparent 34%,rgba(224,240,255,.10) 46%,
      rgba(224,240,255,.02) 54%,transparent 62%);
  opacity:var(--open,1);
}
.mac__base{display:block;width:100%;height:auto;position:relative;z-index:4}

/* poświata bijąca zza ekranu — pojawia się dopiero po otwarciu */
.mac__lid::after{
  content:'';position:absolute;left:14%;right:14%;top:26%;bottom:6%;
  z-index:0;pointer-events:none;border-radius:40%;
  background:radial-gradient(ellipse at 50% 50%,rgba(110,170,255,.5),transparent 70%);
  filter:blur(58px);
  opacity:calc(var(--open,1) * .85);
}

/* ---------------- oś czasu ---------------- */
.film__line{
  position:relative;
  display:flex;align-items:center;gap:clamp(10px,1vw,18px);
  margin:clamp(20px,2.6vh,34px) 6% 0;
  opacity:calc(var(--open,1) * (1 - var(--hand,0)));
  transition:opacity .5s var(--ease);
}
.film__btn{
  flex:0 0 auto;position:relative;
  width:34px;height:34px;padding:0;border:0;cursor:none;
  display:grid;place-items:center;
  color:rgba(226,238,252,.85);
  background:linear-gradient(180deg,rgba(214,234,255,.16),rgba(30,60,120,.14));
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:inset 0 1px 0 rgba(224,240,255,.36);
  transition:.4s var(--ease);
}
.film__btn svg{width:13px;height:13px;fill:currentColor}
.film__btn:hover{color:#fff;background:linear-gradient(180deg,rgba(214,234,255,.3),rgba(40,80,160,.2))}
/* pauza: dwa słupki zamiast trójkąta */
.film__btn.is-play svg{display:none}
.film__btn.is-play::after{
  content:'';width:11px;height:13px;
  border-left:3.5px solid currentColor;border-right:3.5px solid currentColor;
}
/* Podpis przy przycisku dźwięku. Wisi nad nim i schodzi kreską do
   samego przycisku — obok się nie mieści, bo przycisk stoi na końcu
   paska, tuż przy krawędzi laptopa. */
.film__tip{
  position:absolute;right:0;bottom:calc(100% + 9px);
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  pointer-events:none;white-space:nowrap;
}
.film__tip b{
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8px;letter-spacing:.28em;color:var(--blue);
  text-shadow:0 0 10px rgba(124,179,255,.5);
}
.film__tip i{
  width:1px;height:9px;margin-right:16px;
  background:linear-gradient(180deg,var(--blue),transparent);
}

/* przekreślenie przy wyciszonym dźwięku */
.film__x{
  position:absolute;left:6px;right:6px;top:50%;height:1.5px;
  background:currentColor;transform:rotate(-38deg);
}
.film__btn--snd[aria-pressed="true"] .film__x{display:none}

.film__bar{
  position:relative;flex:1;height:3px;border-radius:3px;cursor:none;
  background:rgba(206,226,255,.14);
}
.film__bar i{
  position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,rgba(124,179,255,.4),var(--blue));
  box-shadow:0 0 12px rgba(124,179,255,.7);
}
.film__bar i::after{
  content:'';position:absolute;right:-4px;top:50%;
  width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  background:#dceaff;box-shadow:0 0 12px 3px rgba(124,179,255,.9);
}
.film__time{
  flex:0 0 auto;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9px;letter-spacing:.2em;color:rgba(198,220,255,.45);
}
.film__time b{font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:15px;letter-spacing:.04em;color:#eaf3ff;margin-right:2px}

/* ---------------- equalizer ---------------- */
/* Equalizer jest dzieckiem `.film`, więc wisi pod laptopem niezależnie
   od szerokości okna. Szerokość podana wprost, nie przez `left`+`right`:
   canvas jest elementem zastępowanym, więc przy `width:auto` bierze
   swój wymiar własny zamiast rozpiąć się między krawędziami — a ten
   wymiar sam wynika z pomiaru, więc rozmiar zatrzaskiwał się na starcie. */
.film__eq{
  position:absolute;left:21%;top:calc(100% + clamp(20px,3.4vh,40px));
  display:block;width:56%;height:clamp(20px,2.8vh,34px);
  opacity:calc(var(--open,1) * (1 - var(--hand,0)));
}

/* ============================================================
   SEKCJA 07 — przebieg współpracy
   Pasek postępu wypełnia się razem ze scrollem, a kolejne kroki
   zapalają się, gdy czoło paska je minie. Jasność kroku liczy sam
   CSS z `--p` i numeru kolumny — bez przełączania klas co klatkę.
   ============================================================ */
.reel--steps .reel__stage{display:grid;align-content:center;justify-items:center}

.stp__top{text-align:center;z-index:3;margin-bottom:clamp(30px,5vh,64px)}
.stp__pill{
  display:inline-block;margin:0 0 clamp(14px,2.4vh,28px);
  padding:11px 26px;border-radius:99px;
  border:1px solid rgba(206,226,255,.16);
  background:linear-gradient(180deg,rgba(214,234,255,.10),rgba(30,60,120,.10));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9.5px;letter-spacing:.3em;color:rgba(226,238,252,.8);
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.stp__head{
  margin:0;font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(26px,4.6vw,74px);letter-spacing:.02em;line-height:1;
  color:#eaf3ff;text-transform:uppercase;
  opacity:0;transform:translateY(22px);
  transition:opacity 1.1s .14s var(--ease),transform 1.1s .14s var(--ease);
}
.reel.is-live .stp__pill,
.reel.is-live .stp__head{opacity:1;transform:none}

.stp__wrap{width:min(74vw,1300px);z-index:3}

/* ---------------- pasek ---------------- */
/* Liczba kolumn idzie z `--steps`, które ustawia JS z atrybutu sekcji —
   oś procesu ma pięć kroków na stronie głównej i sześć w cenniku. */
.stp__rail{
  position:relative;height:12px;
  display:grid;grid-template-columns:repeat(var(--steps,5),1fr);align-items:center;
  margin-bottom:clamp(22px,3.4vh,40px);
}
.stp__track,.stp__fill{
  position:absolute;left:0;top:50%;height:1px;margin-top:-.5px;
}
.stp__track{right:0;background:rgba(206,226,255,.16)}
.stp__fill{
  width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,rgba(124,179,255,.55),var(--blue));
  box-shadow:0 0 12px rgba(124,179,255,.6);
}
/* czoło paska — jedzie po linii razem z postępem */
.stp__head-dot{
  position:absolute;top:50%;left:calc(var(--p,0) * 100%);
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:#dceaff;box-shadow:0 0 14px 4px rgba(124,179,255,.9);
  opacity:calc(var(--p,0) * 3);
}
/* kropki kroków — jedna w każdej kolumnie, przy jej lewej krawędzi */
.stp__rail i{
  position:relative;z-index:2;justify-self:start;
  width:11px;height:11px;border-radius:50%;
  background:rgba(206,226,255,.18);
  /* zapala się, gdy czoło paska ją minie */
  --on:clamp(0,(var(--p,0) * var(--steps,5) - var(--i) + .15) * 8,1);
  background:rgb(
      calc(206 - var(--on) * 82) calc(226 - var(--on) * 47) 255);
  box-shadow:0 0 calc(var(--on) * 14px) rgba(124,179,255,calc(var(--on) * .9));
}

/* ---------------- kroki ---------------- */
.stp__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(var(--steps,5),1fr);
  gap:clamp(16px,1.8vw,34px);
}
.stp{
  --on:clamp(0,(var(--p,0) * var(--steps,5) - var(--i) + .15) * 8,1);
  opacity:calc(.34 + var(--on) * .66);
  transition:opacity .25s linear;
}
.stp__no{
  display:block;margin-bottom:clamp(12px,1.8vh,22px);
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:clamp(24px,2.6vw,42px);line-height:.8;letter-spacing:.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(206,226,255,calc(.3 + var(--on) * .55));
  text-shadow:0 0 calc(var(--on) * 26px) rgba(124,179,255,calc(var(--on) * .55));
}
.stp__ico{
  display:block;width:clamp(20px,1.5vw,26px);height:auto;
  margin-bottom:clamp(10px,1.4vh,18px);
  color:rgb(calc(206 - var(--on) * 82) calc(226 - var(--on) * 47) 255);
}
/* Tytuł kroku ma się mieścić w jednej linii — najdłuższy („Ustalenie
   stylu i kolorystyki") wyznacza rozmiar. `nowrap` plus dopasowanie
   litery do szerokości kolumny, bez zawijania i bez ucinania. */
.stp__t{
  margin:0 0 8px;font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(8.5px,.66vw,12px);letter-spacing:.05em;line-height:1.3;
  color:#eaf3ff;text-transform:uppercase;white-space:nowrap;
}
.stp__p{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10px,.72vw,12.5px);line-height:1.75;
  color:rgba(206,226,255,.58);
}

@media (max-width:1200px){
  /* Pięć kolumn robi się nieczytelne — wtedy dwa rzędy. Pasek zostaje
     nad nimi i dalej wypełnia się scrollem; to jedyny wskaźnik postępu
     w tej sekcji, więc nie może znikać. */
  .stp__list{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
  .stp{opacity:calc(.34 + var(--on) * .66)}
}
/* ---------------- oś w pionie ----------------
   Na wąskim ekranie oś obraca się o ćwierć obrotu: pasek biegnie po lewej
   stronie kolumny z krokami, a kropki siedzą w rzędach siatki, więc każda
   wypada przy swoim kroku niezależnie od tego, ile ma tekstu. */
@media (max-width:820px){
  .proc .stp__wrap{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:clamp(14px,4vw,26px);
  }
  .proc .stp__rail{
    grid-column:1;grid-row:1;align-self:stretch;
    width:12px;height:auto;margin:0;
    grid-template-columns:1fr;grid-template-rows:repeat(var(--steps,5),1fr);
    justify-items:center;align-items:center;
  }
  .proc .stp__track{
    left:50%;top:0;right:auto;bottom:0;
    width:1px;height:auto;margin:0 0 0 -.5px;
  }
  .proc .stp__fill{
    left:50%;top:0;width:1px;height:calc(var(--p,0) * 100%);
    margin:0 0 0 -.5px;
  }
  .proc .stp__head-dot{
    left:50%;top:calc(var(--p,0) * 100%);
  }
  .proc .stp__rail i{justify-self:center}
  .proc .stp__list{grid-column:2;grid-row:1;grid-template-columns:1fr}

  /* Nagłówek z sześcioma krokami w pionie nie mieści się w jednym
     ekranie telefonu, a scena ma `overflow:hidden` — dlatego na wąskim
     ekranie sekcja przestaje być przyklejoną sceną i płynie normalnie.
     Postęp nadal idzie ze scrollem: `reel.js` wykrywa brak `sticky`
     i liczy `--p` z drogi sekcji przez okno, a nie z liczby ekranów. */
  .proc{height:auto}
  .proc .reel__stage{
    position:static;height:auto;overflow:visible;
    padding:clamp(78px,12vh,120px) 0 clamp(36px,6vh,64px);
  }
}

@media (max-width:700px){
  .stp__list{grid-template-columns:1fr;gap:clamp(14px,2.4vh,22px)}
  .stp__wrap{width:84vw}
  /* Pasek zostaje poziomy nad listą — pionowy musiałby trafiać kropkami
     w kroki o różnej wysokości, a to i tak by się rozjeżdżało. */
  .stp__rail{grid-template-columns:repeat(5,1fr)}
  .stp__no{font-size:26px;margin-bottom:8px}
  .stp__ico{width:18px;margin-bottom:8px}
  .stp__t{font-size:11px}
  .stp__p{font-size:10.5px;line-height:1.6}
}

@media (max-width:1100px){
  /* Nagłówek wraca na górę ekranu. Samo `top` nie wystarczyło: bazowa
     reguła ma jeszcze `translate:0 -50%`, które ciągnęło blok o połowę
     jego wysokości w górę i chowało tytuł nad krawędzią. */
  .reel--film .reel__top--wide{
    width:auto;right:8%;top:clamp(18px,3vh,40px);translate:none;
  }
  /* `relative`, nie `static`: equalizer jest pozycjonowany względem
     bloku laptopa, a przy `static` zaczepiał się o całą scenę i lądował
     poniżej dolnej krawędzi ekranu. */
  .film{position:relative;top:auto;right:auto;translate:none;width:92%;margin:0 auto}
  .reel--film .reel__strip{display:grid;align-content:end;padding-bottom:20vh}
  .film__eq{left:8%;width:84%;top:calc(100% + 16px)}
  /* Podpis o realizacji i plakietka schodzą — na wąskim ekranie
     wypychały laptop poza dolną krawędź. Oba akapity zostają. */
  .reel--film .film__cap,
  .reel--film .film__badge{display:none}
  /* Przycisk schodzi pod equalizer. Wspólna reguła stawia go wyżej, przez
     co na telefonie nachodził na słupki. Mniejszy zapas na dole taśmy
     zsuwa całą grupę — kadr, oś czasu i equalizer — bliżej przycisku,
     a przy okazji odsuwa ją od bloku z tekstem nad nią. */
  .reel--film .reel__strip{padding-bottom:20vh}
  .reel--film .pbtn{bottom:clamp(20px,3.4vh,40px)}
  /* Podpis wchodzi na czarną ramkę nad ekranem laptopa. Nad kadrem
     wchodził w akapity sekcji, a odsunięcie go wyżej zrobiłoby dziurę. */
  .reel--film .film__hint{
    top:clamp(5px,2.6%,16px);bottom:auto;
  }
}

@media (max-width:1200px){
  .reel__top{width:min(52vw,560px)}
}
@media (max-width:700px){
  .wrk{--cw:82vw}
  .reel__top{left:8%;right:8%;width:auto}
  /* Opis zostaje także na telefonie — bez niego sekcja traci sens.
     Mieści się, bo taśma i tak zaczyna się dopiero pod nim. */
  .reel__lead{display:block;font-size:10.5px;line-height:1.7}
  /* Paseczki pozycji lądują przy dolnej krawędzi, a przycisk nad nimi —
     mniej więcej w połowie odstępu między nimi a blokiem. */
  .reel__dots{bottom:clamp(22px,3vh,34px)}
  .pbtn{bottom:clamp(110px,15vh,150px);padding:15px 26px;font-size:10px;letter-spacing:.18em}
  .reel--film .pbtn{bottom:clamp(20px,3.4vh,40px)}
}

/* ============================================================
   MENU — terminal HUD
   Panel otwiera się jak konsola diagnostyczna: linie startowe i pozycje
   wypisują się litera po literze, z boku stoi panel stanu. Wypisywanie
   robi JS, CSS odpowiada za wygląd i za kursor migający na końcu linii.
   ============================================================ */

/* Przy otwartym menu strona pod spodem stoi. `body` jest tu kontenerem
   przewijania (ma `height:100%`), więc blokada na nim zachowuje pozycję
   scrolla — nic nie skacze przy zamknięciu. */
body.nav-open{overflow:hidden}

/* Wejście: panel jest przycięty do zerowej wysokości na środku ekranu
   i rozchodzi się w górę i w dół — strona wygląda, jakby pękała.
   `--o` prowadzi jednocześnie cięcie i pozycje świecących krawędzi,
   więc te trzymają się linii co do piksela. `inherits:true` jest tu
   konieczne, bo z tej samej liczby korzystają elementy w środku. */
@property --o{syntax:'<number>';inherits:true;initial-value:0}

.nav{
  position:fixed;inset:0;z-index:55;overflow:hidden;--o:0;
  display:grid;place-items:center;
  background:
    radial-gradient(ellipse 80% 70% at 26% 34%,rgba(24,48,96,.42),transparent 68%),
    linear-gradient(180deg,#04060c,#010205);
  clip-path:inset(calc((1 - var(--o)) * 50%) 0);
  visibility:hidden;pointer-events:none;
  transition:--o .95s var(--ease),visibility 0s .95s;
}
body.nav-open .nav{
  --o:1;visibility:visible;pointer-events:auto;
  transition:--o .95s var(--ease),visibility 0s;
}

/* krawędzie cięcia — jadą razem z rozsuwaniem */
.nav__edge{
  position:absolute;left:0;right:0;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--blue) 22%,#dcecff 50%,var(--blue) 78%,transparent);
  box-shadow:0 0 26px 3px rgba(124,179,255,.6);
  opacity:calc(1 - var(--o) * var(--o));
}
.nav__edge--t{top:calc((1 - var(--o)) * 50%)}
.nav__edge--b{bottom:calc((1 - var(--o)) * 50%)}
.nav__edge::after{
  content:'';position:absolute;left:0;right:0;height:clamp(50px,8vh,110px);
  background:linear-gradient(180deg,rgba(96,158,255,.26),transparent);
}
.nav__edge--t::after{top:0}
.nav__edge--b::after{bottom:0;transform:scaleY(-1)}

/* linie skanujące — najtańszy sposób, żeby ekran wyglądał na monitor */
.term__scan{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg,
      rgba(124,179,255,.045) 0 1px,transparent 1px 3px);
}
/* smuga przejeżdżająca w dół, jak odświeżanie obrazu */
.term__beam{
  position:absolute;left:0;right:0;top:0;height:26%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(124,179,255,.07),transparent);
  animation:termBeam 5.5s linear infinite;
}
@keyframes termBeam{
  0%  {transform:translateY(-120%)}
  100%{transform:translateY(520%)}
}
.term__grid{position:absolute;inset:0;z-index:0;pointer-events:none}
.term__grid i{
  position:absolute;inset:0;display:block;opacity:.05;
  background-image:
    radial-gradient(ellipse 66% 70% at 40% 45%,
        rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 58%,#02040a 100%),
    url('assets/hex.svg');
  background-repeat:no-repeat,repeat;
  background-size:100% 100%,84px 48.497px;
}

.term__in{
  position:relative;z-index:2;
  width:min(88vw,1420px);
  display:grid;gap:clamp(18px,3vh,42px);
}

/* ---------------- linie startowe ---------------- */
.term__head{display:grid;gap:5px}
.term__boot{
  margin:0;min-height:1.35em;
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace;
  font-size:clamp(9.5px,.76vw,12.5px);letter-spacing:.06em;
  color:rgba(150,190,250,.5);white-space:pre;
}
.term__boot--ok{color:var(--blue)}

/* ---------------- treść ---------------- */
.term__body{position:relative;z-index:2}

.term__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2px,.6vh,9px)}
.term__list li{
  opacity:0;transition:opacity .3s linear;
}
body.nav-open .term__list li{opacity:1;transition-delay:calc(.72s + var(--n) * .08s)}
.term__list a{
  position:relative;display:flex;align-items:baseline;
  gap:clamp(12px,1.5vw,26px);
  padding:clamp(5px,.8vh,11px) 0 clamp(5px,.8vh,11px) clamp(16px,1.8vw,34px);
  text-decoration:none;color:#eaf3ff;
  transition:color .35s var(--ease),padding-left .35s var(--ease),background .35s var(--ease);
}
/* strzałka wiersza polecenia — pojawia się przy najechaniu */
.term__list a::before{
  content:'>';position:absolute;left:0;top:50%;translate:0 -50%;
  font-family:ui-monospace,Consolas,monospace;
  font-size:clamp(12px,1.1vw,18px);color:var(--blue);
  opacity:0;transition:.35s var(--ease);
}
.term__list a:hover{
  padding-left:clamp(26px,2.8vw,52px);
  background:linear-gradient(90deg,rgba(124,179,255,.10),transparent 62%);
}
.term__list a:hover::before{opacity:1}
.term__list a:focus-visible{outline:1px solid var(--blue);outline-offset:4px}
/* Cyfry pełne, bez obrysu — kontur gubił się przy tej wielkości
   i czytał się jak brud, a nie jak numer. */
.term__idx{
  flex:0 0 auto;font-weight:400;
  font-family:'SuperCar','Vogjer',sans-serif;
  font-size:clamp(11px,.9vw,15px);line-height:1;
  color:rgba(124,179,255,.75);
  transition:color .35s var(--ease);
}
.term__list a:hover .term__idx{color:#dcecff}
.term__t{
  font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(13px,1.35vw,22px);letter-spacing:.04em;line-height:1.1;
  text-transform:uppercase;white-space:pre;
}

/* ---------------- pszczoła ----------------
   Leży jako tło po prawej, wychodząc poza krawędź ekranu, a pozycje menu
   przechodzą po niej. Przyciemniona, bo w pełnej jasności zjadałaby
   czytelność najdłuższej pozycji. */
.term__bee{
  position:absolute;right:1.2%;top:50%;z-index:1;
  width:min(54vw,1080px);height:auto;
  translate:0 -50%;pointer-events:none;
  filter:drop-shadow(0 30px 80px rgba(0,0,0,.7));
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
body.nav-open .term__bee{opacity:1;transition-delay:.5s}

.term__foot{
  margin:0;display:flex;align-items:center;gap:8px;
  font-family:ui-monospace,Consolas,monospace;
  font-size:clamp(9px,.7vw,11.5px);letter-spacing:.08em;
  color:rgba(150,190,250,.4);
  opacity:0;transition:opacity .5s var(--ease);
}
body.nav-open .term__foot{opacity:1;transition-delay:1.2s}
/* kursor terminala — miga w kółko na końcu ostatniej linii */
.term__caret{
  width:8px;height:1.05em;background:var(--blue);
  box-shadow:0 0 10px var(--blue);
  animation:termBlink 1.05s steps(1) infinite;
}
@keyframes termBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (max-width:900px){
  /* Na telefonie pszczoła zajmowałaby cały ekran pod tekstem i tylko
     przeszkadzała — menu zostaje samym terminalem. */
  .term__bee{display:none}
}

/* ============================================================
   PODSTRONA — katalog realizacji
   Po lewej lista, po prawej jeden laptop przełączany wskazaniem.
   Strona nie ma przyklejanych scen, więc przewija się normalnie.
   ============================================================ */
.sub{background:var(--bg)}

/* Siatka heksów jak w ostatnich sekcjach strony głównej — wpisana
   bezpośrednio w tło sekcji, a nie jako osobna warstwa pod spodem.
   Osobna warstwa musiałaby być półprzezroczysta, a wtedy przez treść
   prześwitywałaby przypięta stopka. Kryjący kolor pod spodem i ciemna
   płachta nad siatką dają ten sam efekt bez tego kompromisu.
   `fixed` na tle sprawia, że oba bloki dzielą jeden raster, więc na
   ich styku wzór się nie przesuwa. */
.sub__top,.pf,.gf,.prn,.mkt,.ctc,.frm,.sub__fade{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(2,4,9,.955),rgba(2,4,9,.955)),
    url('assets/hex.svg');
  background-repeat:no-repeat,repeat;
  background-size:auto,84px 48.497px;
  background-attachment:fixed,fixed;
}

/* Całość ma się zmieścić na jednym ekranie, więc nagłówek jest zwarty
   — bez tego opis realizacji lądował poniżej krawędzi i trzeba było
   przewijać, żeby go przeczytać. */
.sub__top{
  position:relative;z-index:1;
  padding:clamp(52px,7.5vh,86px) 7.5% clamp(8px,1.2vh,16px);
}
.sub__back{
  display:inline-flex;align-items:center;gap:9px;
  margin-bottom:clamp(12px,1.8vh,22px);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(198,220,255,.5);text-decoration:none;
  transition:color .35s var(--ease),gap .35s var(--ease);
}
.sub__back svg{width:15px;height:15px}
.sub__back:hover{color:var(--blue);gap:14px}
.sub__kicker{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9px;letter-spacing:.32em;color:var(--blue);
}
.sub__kicker i{width:26px;height:1px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.sub__head{
  margin:0;font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(19px,2.7vw,42px);letter-spacing:.02em;line-height:1.08;
  color:#eaf3ff;text-transform:uppercase;
}
.sub__lead{
  margin:clamp(10px,1.4vh,16px) 0 0;max-width:min(56vw,940px);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9.5px,.66vw,11.5px);line-height:1.7;
  color:rgba(206,226,255,.55);
}

/* ---------------- układ ---------------- */
/* Dwa rzędy: u góry lista i kadr obok siebie, pod spodem opis na całej
   szerokości prawej kolumny. Wszystko ma się mieścić na jednym ekranie,
   stąd kadr ograniczony także wysokością okna. */
.pf{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);
  column-gap:clamp(16px,2vw,40px);
  row-gap:clamp(12px,1.8vh,26px);
  /* Węższy margines boczny niż w nagłówku sekcji: katalog musi pomieścić
     najdłuższą nazwę w jednej linii, a kadr nie ma na tym stracić. */
  padding:0 5.5% clamp(20px,3vh,40px);
  align-items:start;
}
/* Wygaszenie dolnej krawędzi — przejście w stopkę bez ostrego cięcia.
   Maską, a nie własnym gradientem: dzięki temu razem z tłem znika też
   siatka heksów, zamiast urywać się prostą linią. */
/* Odcinek musi być wysoki: przy 90 px stopka wyłaniała się tak szybko,
   że górna krawędź jej karty przecinała ekran ostrą linią zamiast wtapiać
   się w treść. Maska ma kilka przystanków — pojedynczy `#000 → transparent`
   przechodzi liniowo i w połowie drogi wciąż jest na tyle kryjący,
   że krawędź karty widać jak cięcie. */
.sub__fade{
  position:relative;z-index:1;height:clamp(180px,28vh,360px);
  -webkit-mask-image:linear-gradient(180deg,
      #000 0%,rgba(0,0,0,.86) 22%,rgba(0,0,0,.55) 48%,
      rgba(0,0,0,.22) 72%,transparent 100%);
  mask-image:linear-gradient(180deg,
      #000 0%,rgba(0,0,0,.86) 22%,rgba(0,0,0,.55) 48%,
      rgba(0,0,0,.22) 72%,transparent 100%);
}

/* ---------------- katalog ---------------- */
/* Lista zajmuje oba rzędy lewej kolumny. Gdyby siedziała tylko w pierwszym,
   jej wysokość rozpychałaby rząd z kadrem i opis lądowałby poniżej ekranu. */
.pf__list{
  grid-column:1;grid-row:1 / span 2;
  list-style:none;margin:0;padding:clamp(16px,3vh,48px) 0 0;
  display:grid;gap:2px;align-content:start;
}
.pf__item{
  position:relative;width:100%;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;column-gap:clamp(12px,1.4vw,24px);
  padding:clamp(7px,1vh,12px) clamp(10px,1.2vw,20px);
  border:0;background:transparent;cursor:none;text-align:left;
  transition:background .35s var(--ease),padding-left .35s var(--ease);
}
/* pasek zapalający się przy wskazanej pozycji */
.pf__item::before{
  content:'';position:absolute;left:0;top:12%;bottom:12%;width:2px;
  background:var(--blue);box-shadow:0 0 12px var(--blue);
  opacity:0;transform:scaleY(.3);transform-origin:50% 50%;
  transition:.4s var(--ease);
}
.pf__item:hover,.pf__item.is-on{
  background:linear-gradient(90deg,rgba(124,179,255,.10),transparent 70%);
  padding-left:clamp(20px,2vw,32px);
}
.pf__item:hover::before,.pf__item.is-on::before{opacity:1;transform:scaleY(1)}
.pf__item:focus-visible{outline:1px solid var(--blue);outline-offset:3px}
.pf__no{
  grid-row:1 / span 2;
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:clamp(15px,1.3vw,22px);line-height:1;
  color:rgba(124,179,255,.6);
  transition:color .35s var(--ease);
}
.pf__item.is-on .pf__no{color:#dcecff}
/* Wszystkie pozycje jednym rozmiarem i każda w jednej linii: `nowrap`
   pilnuje linii, a szerokość lewej kolumny (`.64fr`) jest dobrana tak,
   żeby zmieściła się najdłuższa nazwa — „Georgia Uncovered". Kadr na tym
   nie traci, bo i tak ogranicza go wysokość okna, nie szerokość kolumny. */
.pf__nm{
  font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(12.5px,1.25vw,20px);letter-spacing:.01em;line-height:1.1;
  color:#eaf3ff;text-transform:uppercase;white-space:nowrap;
}
.pf__br{
  grid-column:2;margin-top:4px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(8.5px,.62vw,10.5px);letter-spacing:.18em;
  color:rgba(198,220,255,.42);text-transform:uppercase;
}

/* ---------------- podgląd ---------------- */
/* Flex, nie grid: kolumna `1fr` rozpychała kadr na całą szerokość i tytuł
   odjeżdżał do prawej krawędzi. Tu para kadr+tytuł jest jedną grupą
   wyśrodkowaną w poziomie, więc napis zawsze stoi przy laptopie. */
.pf__stage{
  grid-column:2;grid-row:1;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.4vw,26px);
}
/* Ograniczenie wysokością okna, nie tylko szerokością: kadr ma proporcje
   1000×600, więc na niskim ekranie rósłby szybciej niż zostaje miejsca
   i wypychał opis pod dolną krawędź. */
.pf__mac{
  --ry:0deg;--rx:0deg;--open:1;
  flex:0 1 auto;
  width:min(100%,1080px,92vh);justify-self:center;
  /* Powiększenie i przesunięcie przez `scale`/`translate`, a nie przez
     szerokość: te własności nie wchodzą do układu, więc pionowy tytuł,
     lista i opis zostają dokładnie tam, gdzie były. */
  scale:1.05;translate:-2.5% 0;
}

/* tytuł realizacji stoi pionowo przy kadrze — `center`, a nie `stretch`,
   żeby środek napisu pokrywał się ze środkiem laptopa */
.pf__vert{
  margin:0;flex:0 0 auto;align-self:center;
  display:flex;align-items:center;
  writing-mode:vertical-rl;
  font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(15px,2vw,38px);letter-spacing:.05em;line-height:1;
  color:#eaf3ff;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 0 30px rgba(124,179,255,.3);
}
/* Nagrania mają proporcje okna przeglądarki (ok. 2:1), a ekran laptopa
   1,53 — `contain` zostawia paski, ale pokazuje stronę w całości.
   `cover` obcinałby jedną czwartą szerokości układu. */
.pf__mac .mac__v{object-fit:contain;background:#05070c;transition:opacity .3s var(--ease)}
.pf__mac .mac__v.is-swap{opacity:.25}
/* Bez poświaty zza ekranu. `.mac__lid::after` ma `z-index:0`, tyle samo co
   wideo, ale leży za nim w kolejności dokumentu — więc niebieski gradient
   kładł się NA nagraniu i rozjaśniał jego środek. Na stronie głównej robi
   za atmosferę, tu przeszkadza w czytaniu realizacji. */
.pf__mac .mac__lid::after{display:none}

/* ---------------- kadr z osią czasu (video FX) ----------------
   Skala i przesunięcie przechodzą z samego kadru na opakowanie, żeby
   pasek postępu jechał razem z laptopem i miał dokładnie jego szerokość.
   Na podstronie stron WWW `.pf__wrap` nie istnieje, więc tam nadal
   działa reguła na `.pf__mac`. */
.pf__wrap{
  position:relative;flex:0 1 auto;
  width:min(100%,1080px,92vh);
  scale:1.05;translate:-2.5% 0;
}
.pf__wrap .pf__mac{width:100%;scale:1;translate:none}
.pf__line{margin:clamp(14px,2vh,24px) 6% 0}
/* Oś czasu dokłada wysokości pod laptopem, więc nagłówek podstrony oddaje
   część górnego marginesu — kadr i proporcje zostają nietknięte. */
.sub--vfx .sub__top{padding-top:clamp(56px,5vh,86px)}

/* PLAY WITH SOUND — poziomo, na czarnej ramce nad ekranem laptopa.
   Nad kadrem zawadzałby o opis sekcji, a ramka i tak jest pusta: ekran
   zaczyna się dopiero na 15% wysokości klapy. Pozycjonowane bezwzględnie,
   więc nie zabiera wysokości i nie zsuwa laptopa w dół. */
.pf__hint{
  position:absolute;left:0;right:0;top:clamp(10px,3.6%,34px);
  margin:0;z-index:4;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.3em;color:var(--blue);white-space:nowrap;
  text-shadow:0 0 12px rgba(124,179,255,.45);
  animation:hintPulse 2.8s var(--ease) infinite;
  transition:opacity .6s var(--ease);
}
.pf__hint i{
  width:clamp(22px,3vw,52px);height:1px;
  background:linear-gradient(90deg,transparent,var(--blue));
  box-shadow:0 0 8px var(--blue);
}
.pf__hint i:last-child{background:linear-gradient(90deg,var(--blue),transparent)}

/* ---------------- łącznik lista → kadr ----------------
   Rysowany w jednym SVG rozpiętym na sekcji, bo łączy elementy z dwóch
   różnych kolumn siatki. `pointer-events:none`, żeby nie przechwytywał
   kliknięć w kafle pod spodem. */
.pf__link{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .45s var(--ease);
}
.pf__link.is-on{opacity:1}

/* Trzy warstwy zamiast jednej kreski: rozmyta poświata pod spodem, nad nią
   włos rysowany gradientem, a na wierzchu powolny, przygaszony impuls.
   Wszystkie rysują się tą samą ścieżką — łuk, nie łamana, bo miękka
   krzywa mniej krzyczy niż techniczne załamanie. */
.pf__link__glow{
  fill:none;stroke:rgba(124,179,255,.3);stroke-width:5;stroke-linecap:round;
  filter:url(#pfSoft);
  stroke-dasharray:var(--len,1) var(--len,1);
  stroke-dashoffset:var(--len,1);
  transition:stroke-dashoffset .8s var(--ease);
}
.pf__link__wire{
  fill:none;stroke:url(#pfGrad);stroke-width:1;stroke-linecap:round;
  stroke-dasharray:var(--len,1) var(--len,1);
  stroke-dashoffset:var(--len,1);
  transition:stroke-dashoffset .8s var(--ease);
}
.pf__link.is-on .pf__link__glow,
.pf__link.is-on .pf__link__wire{stroke-dashoffset:0}

/* Impuls jest długi i słaby — ma sugerować przepływ, nie ciąć linii. */
.pf__link__flow{
  fill:none;stroke:rgba(214,236,255,.5);stroke-width:1;stroke-linecap:round;
  stroke-dasharray:34 var(--len,1);
  animation:pfFlow 4.2s var(--ease) infinite;
  opacity:0;transition:opacity .6s var(--ease);
}
.pf__link.is-on .pf__link__flow{opacity:1;transition-delay:.7s}
@keyframes pfFlow{
  from{stroke-dashoffset:calc(var(--len,1) + 34px)}
  to  {stroke-dashoffset:calc(var(--len,1) * -1)}
}

/* Końcówki: dwie ciche kropki, bez pulsowania i bez twardej bieli. */
.pf__link__a{fill:rgba(214,236,255,.75);filter:drop-shadow(0 0 5px rgba(124,179,255,.7))}
.pf__link__b{fill:rgba(160,205,255,.5); filter:drop-shadow(0 0 9px rgba(124,179,255,.6))}
.pf__link__a,.pf__link__b{opacity:0;transition:opacity .5s var(--ease)}
.pf__link.is-on .pf__link__a{opacity:1}
.pf__link.is-on .pf__link__b{opacity:1;transition-delay:.55s}
/* po włączeniu dźwięku podpowiedź nie ma już czego podpowiadać */
.pf__stage.is-loud .pf__hint{opacity:0;animation:none}

/* ---------------- strzałki katalogu (tylko wąski ekran) ---------------- */
.pf__arrows{display:none}
.pf__arr{
  display:grid;place-items:center;
  width:44px;height:44px;padding:0;
  color:#dcecff;cursor:pointer;
  border:1px solid rgba(170,205,255,.22);
  border-radius:11px;
  background:linear-gradient(158deg,rgba(126,182,255,.16),rgba(44,94,192,.08));
  transition:border-color .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease);
}
.pf__arr svg{width:20px;height:20px}
.pf__arr:active{background:linear-gradient(158deg,rgba(126,182,255,.3),rgba(44,94,192,.18))}
.pf__arr:disabled{opacity:.3;pointer-events:none}
.pf__arrlbl{
  min-width:66px;text-align:center;
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:14px;letter-spacing:.06em;color:rgba(198,220,255,.5);
}
.pf__arrlbl b{font-weight:400;color:#eaf3ff}

.pf__case{
  grid-column:2;grid-row:2;
  margin-top:clamp(6px,1.2vh,16px);
  width:100%;padding-left:clamp(14px,1.4vw,22px);
  border-left:1px solid rgba(124,179,255,.35);
}
.pf__case.is-in .pf__ckicker,
.pf__case.is-in .pf__ctext,
.pf__case.is-in .pf__tags{animation:pfIn .6s var(--ease) both}
.pf__case.is-in .pf__ctext{animation-delay:.07s}
.pf__case.is-in .pf__tags {animation-delay:.14s}
@keyframes pfIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

.pf__ckicker{
  display:flex;align-items:center;gap:10px;margin:0 0 8px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.3em;color:var(--blue);
}
.pf__ckicker i{width:22px;height:1px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.pf__ctext{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10px,.7vw,12.5px);line-height:1.78;
  color:rgba(206,226,255,.6);
}
.pf__tags{
  list-style:none;margin:clamp(12px,1.8vh,20px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:7px;
}
.pf__tags li{
  padding:6px 12px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(206,226,255,.62);
  background:linear-gradient(180deg,rgba(214,234,255,.10),rgba(30,60,120,.08));
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}

@media (max-width:1000px){
  /* Wszystko schodzi do jednej kolumny: kadr, zaraz pod nim przełącznik
     realizacji, na końcu opis. Lista pod opisem wymuszałaby przewijanie
     w dół po każdej zmianie projektu, żeby zobaczyć nagranie. */
  .pf{grid-template-columns:1fr;row-gap:clamp(12px,2vh,22px)}
  /* Kolumna, nie rząd: w rzędzie kadr dzielił się szerokością z tytułem
     i kurczył do kilkunastu procent szerokości ekranu. */
  .pf__stage{grid-column:1;grid-row:1;flex-direction:column;align-items:center}
  .pf__list  {grid-column:1;grid-row:2;padding-top:0}
  .pf__arrows{
    grid-column:1;grid-row:3;
    display:flex;align-items:center;justify-content:center;
    gap:clamp(14px,4vw,24px);
    margin-top:clamp(2px,1vh,8px);
  }
  .pf__case {grid-column:1;grid-row:4;margin-top:0}
  /* na wąskim ekranie kadr stoi sam pośrodku — nie ma go od czego odsuwać */
  .pf__mac{flex:0 0 auto;width:min(100%,620px);scale:1;translate:none}
  .pf__wrap{flex:0 0 auto;width:min(100%,620px);scale:1;translate:none}
  /* Na wąskim ekranie podpowiedź wchodzi w przepływ nad kadrem — nad nim
     nie ma marginesu, w którym mogłaby zawisnąć. */
  .pf__hint{
    position:static;top:auto;margin:0 0 clamp(6px,1.2vh,12px);
  }
  .pf__hint i{width:clamp(20px,8vw,44px)}
  /* łącznik ma sens tylko przy liście z boku */
  .pf__link{display:none}
  /* pionowy tytuł nie ma tu obok czego stać */
  .pf__vert{
    writing-mode:horizontal-tb;align-self:center;
    justify-content:center;margin-top:10px;
  }
  .sub__lead{max-width:none}

  /* Katalog jako pozioma taśma kafelków: dziewięć pozycji jedna pod drugą
     zajmowało ponad pół ekranu, więc kadr i wybór nigdy nie były widoczne
     naraz. Tu przewija się w bok, a laptop zostaje na miejscu. */
  .pf__list{
    display:flex;gap:8px;align-content:normal;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
    /* kafelki dobiegają do krawędzi ekranu, a nie do marginesu sekcji */
    margin-inline:-8%;padding-inline:8%;
  }
  .pf__list::-webkit-scrollbar{display:none}
  .pf__list>li{flex:0 0 auto;scroll-snap-align:center}
  .pf__item{
    flex:0 0 auto;width:auto;scroll-snap-align:center;
    grid-template-columns:auto auto;align-items:center;
    column-gap:8px;padding:9px 14px;
    border:1px solid rgba(170,205,255,.16);
    border-radius:9px;
    background:linear-gradient(158deg,rgba(120,175,255,.07),rgba(70,120,210,.04));
    transition:background .35s var(--ease),border-color .35s var(--ease);
  }
  .pf__item:hover,.pf__item.is-on{padding-left:14px}
  .pf__item.is-on{
    border-color:rgba(124,179,255,.5);
    background:linear-gradient(158deg,rgba(126,182,255,.26),rgba(44,94,192,.16));
  }
  /* pionowa kreska aktywnej pozycji nie pasuje do kafelka */
  .pf__item::before{display:none}
  .pf__br{display:none}
  .pf__no{grid-row:auto;font-size:13px}
  .pf__nm{font-size:12px;white-space:nowrap}
}
@media (max-width:700px){
  .sub__top{padding-top:clamp(80px,12vh,120px)}
  .pf,.sub__top{padding-left:8%;padding-right:8%}
}

/* ============================================================
   PODSTRONA — cennik
   Oś procesu i taśma z cenami korzystają z komponentów zbudowanych
   na stronie głównej (`.reel`, `.stp`), tu dochodzą tylko karty cen,
   blok o druku i pionowa oś na wąskim ekranie.
   ============================================================ */

/* Nagłówek strony wciągnięty do sceny osi procesu. */
.proc .stp__top{max-width:min(64vw,1000px);margin-inline:auto}
.proc .sub__back{margin-bottom:clamp(10px,1.6vh,20px)}
.proc .sub__kicker{justify-content:center}
.proc__h1{
  margin:0 0 clamp(8px,1.2vh,14px);
  font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(24px,3.6vw,58px);letter-spacing:.02em;line-height:1.06;
  color:#eaf3ff;text-transform:uppercase;
}
.proc__lead{
  margin:0 auto clamp(20px,3.2vh,42px);max-width:min(52vw,760px);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9.5px,.68vw,12px);line-height:1.75;
  color:rgba(206,226,255,.55);
}
/* Wszystkie nagłówki sekcji na tej podstronie mają jeden rozmiar —
   równorzędne kroki tej samej strony. Wyjątkiem jest tytuł strony,
   który stoi nad nimi w hierarchii. */
.proc .stp__head,
.reel--price .reel__head,
.prn__h{font-size:clamp(18px,2.4vw,38px)}

/* karta ceny zamiast kadru z filmem */
.prc{--cw:clamp(280px,34vw,520px)}
/* Bardzo lekkie, chłodne szkło — karta ma przepuszczać siatkę heksów,
   a nie kłaść na niej płytę. */
.prc__card{
  display:grid;align-content:start;gap:clamp(8px,1.2vh,14px);
  padding:clamp(22px,2.4vw,38px);
  border:1px solid rgba(150,196,255,.24);
  border-radius:clamp(12px,1vw,18px);
  /* wyraźniej niebieski gradient, ale nadal prześwitujący — hexy z tła
     muszą być widoczne przez kartę */
  background:linear-gradient(158deg,
      rgba(126,182,255,.30) 0%,
      rgba(88,146,240,.19) 48%,
      rgba(44,94,192,.25) 100%);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(214,236,255,.28),
    inset 0 0 60px rgba(96,158,255,.10),
    0 26px 60px rgba(0,0,0,.38);
}
.prc__tag{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--blue);
}
.prc__t{
  margin:0;font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(16px,1.7vw,28px);letter-spacing:.02em;line-height:1.12;
  color:#eaf3ff;text-transform:uppercase;
}
.prc__lead{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10px,.72vw,12.5px);line-height:1.7;
  color:rgba(206,226,255,.6);
}
.prc__list{
  list-style:none;margin:clamp(4px,.8vh,8px) 0 0;padding:0;
  display:grid;gap:5px;
}
.prc__list li{
  position:relative;padding-left:16px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9.5px,.68vw,11.5px);line-height:1.55;
  color:rgba(206,226,255,.55);
}
.prc__list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:1px;background:var(--blue);box-shadow:0 0 6px var(--blue);
}
/* Cena tą samą czcionką co numery sekcji — ma się czytać jak element
   systemu, a nie jak zwykły tekst w akapicie. */
.prc__price{
  display:flex;align-items:baseline;gap:8px;
  margin:clamp(8px,1.4vh,16px) 0 0;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9.5px,.7vw,12px);letter-spacing:.16em;
  color:rgba(206,226,255,.55);text-transform:uppercase;
}
.prc__price span{color:rgba(198,220,255,.42)}
.prc__price b{
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:clamp(30px,3.4vw,54px);line-height:.85;letter-spacing:.02em;
  color:#eaf3ff;text-shadow:0 0 26px rgba(124,179,255,.35);
}
.prc__note{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(198,220,255,.38);
}
/* Warianty bez podanej kwoty: zamiast wielkiej cyfry idzie napis,
   więc `b` musi wrócić do zwykłej typografii. */
.prc__price--ind b{
  font-family:'Vogjer',sans-serif;
  font-size:clamp(15px,1.5vw,24px);line-height:1.1;letter-spacing:.03em;
  text-transform:uppercase;
}

/* ---------------- porównanie wariantów ----------------
   Bloki idą prawie na całą szerokość strony, ale z marginesem — pełna
   szerokość zlewałaby się z krawędzią ekranu. */
.prn--wide{padding-left:4%;padding-right:4%}
.prn__in.prn__in--wide{max-width:min(92vw,1720px)}
.cmp{
  list-style:none;margin:clamp(20px,3vh,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,28px);
}
.cmp__it{
  /* kolumna + margin-top:auto na cenie => ceny stoją równo w pionie
     niezależnie od tego, ile linii zajmie opis */
  display:flex;flex-direction:column;
  padding:clamp(16px,1.6vw,26px);
  border:1px solid rgba(170,205,255,.13);
  border-radius:clamp(10px,.8vw,14px);
  background:linear-gradient(158deg,
      rgba(120,175,255,.09) 0%,rgba(70,120,210,.05) 100%);
}
.cmp__no{
  display:block;margin-bottom:8px;
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:clamp(15px,1.3vw,22px);line-height:1;color:rgba(124,179,255,.65);
}
.cmp__t{
  margin:0 0 6px;font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(12px,1.15vw,19px);letter-spacing:.02em;line-height:1.15;
  color:#eaf3ff;text-transform:uppercase;
}
.cmp__f{
  margin:0 0 8px;font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(9px,.66vw,11px);letter-spacing:.08em;
  color:var(--blue);
}
.cmp__d{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9.5px,.68vw,11.5px);line-height:1.65;
  color:rgba(206,226,255,.55);
}
.cmp__p{
  margin:clamp(10px,1.4vh,16px) 0 0;margin-top:auto;
  padding-top:clamp(8px,1.2vh,14px);
  border-top:1px solid rgba(124,179,255,.16);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9px,.66vw,11px);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(198,220,255,.45);
}
.cmp__p b{
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:clamp(14px,1.15vw,19px);letter-spacing:.03em;
  color:#eaf3ff;margin-right:5px;
}
@media (max-width:1000px){
  .cmp{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cmp{grid-template-columns:1fr}
}

/* ---------------- blok o druku ---------------- */
.prn{
  position:relative;z-index:1;
  padding:clamp(50px,8vh,100px) 7.5%;
}
.prn__in{max-width:min(70vw,1100px)}
/* rozmiar ustala wspólna reguła nagłówków tej podstrony */
.prn__h{
  margin:0 0 clamp(12px,1.8vh,20px);
  font-family:'Vogjer',sans-serif;font-weight:400;
  letter-spacing:.02em;line-height:1.1;
  color:#eaf3ff;text-transform:uppercase;
}
.prn__p,.prn__cta{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10px,.72vw,12.5px);line-height:1.78;
  color:rgba(206,226,255,.6);
}
.prn__cta{margin-top:clamp(16px,2.4vh,26px);color:rgba(226,238,252,.82)}
.prn__tags{
  list-style:none;margin:clamp(16px,2.4vh,26px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:7px;
}
.prn__tags li{
  padding:7px 14px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(206,226,255,.62);
  background:linear-gradient(180deg,rgba(214,234,255,.10),rgba(30,60,120,.08));
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.prn__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,3vh,34px)}
/* przyciski w normalnym przepływie, nie przyklejone do dołu sceny */
.pbtn--st{position:static;translate:none;bottom:auto;left:auto;opacity:1}
.pbtn--ghost{background:linear-gradient(180deg,rgba(214,234,255,.06),rgba(30,60,120,.06))}

@media (max-width:900px){
  .prn__in{max-width:none}
  .prc{--cw:82vw}
}
@media (max-width:700px){
  /* Na telefonie blok idzie na oś ekranu: tekst, chipy i przyciski
     wyśrodkowane, a dolny margines mniejszy — przy szerokim ustawieniu
     pod przyciskami zostawał pusty pas. */
  .prn{padding-bottom:clamp(20px,3vh,36px)}
  .prn__in{text-align:center}
  .prn__in .sub__kicker{justify-content:center}
  .prn__tags,.prn__btns{justify-content:center}
  .prn__btns .pbtn{width:100%;justify-content:center}
  /* kafle porównania zostają z tekstem do lewej — wyśrodkowany akapit
     na pięć linii czyta się gorzej niż wyrównany */
  .cmp__it{text-align:left}
}

/* ============================================================
   PODSTRONA — realizacje graficzne
   Lewa kolumna: nagłówek i kategorie, o stałej, umiarkowanej szerokości.
   Prawa: pionowy stos prac z własnym przewijaniem.
   ============================================================ */
.gf{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  column-gap:clamp(24px,3.4vw,70px);
  padding:clamp(56px,8vh,92px) 7.5% clamp(20px,3vh,40px);
  align-items:start;
}
.gf__left{display:grid;align-content:start;gap:clamp(18px,3vh,38px)}
/* Nagłówek i opis nie rozciągają się na całą kolumnę — mają zostawić
   powietrze po prawej, tak jak na szkicu. */
.gf__top{max-width:min(42vw,660px)}
.gf__cats{list-style:none;margin:0;padding:0;display:grid;gap:2px}

/* ---------------- okno z pracami ---------------- */
.gf__view{
  position:relative;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  height:min(74vh,720px);
  padding:clamp(12px,1.4vw,20px);
  border:1px solid rgba(124,179,255,.20);
  border-radius:clamp(10px,1vw,16px);
  background:linear-gradient(158deg,rgba(122,158,214,.05),rgba(10,18,34,.05));
}
.gf__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:0 4px;
}
.gf__cat{
  display:flex;align-items:center;gap:10px;margin:0;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(9px,.7vw,11.5px);letter-spacing:.24em;
  color:#eaf3ff;text-transform:uppercase;
}
.gf__cat i{width:20px;height:1px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.gf__count{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:9px;letter-spacing:.2em;color:rgba(198,220,255,.42);
}
.gf__count b{
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:15px;color:var(--blue);margin-right:2px;
}

/* Własne przewijanie zamiast strony: dzięki temu bloki jadą w pionie
   w wyznaczonym oknie, a nagłówek i kategorie zostają na miejscu. */
.gf__scroll{
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(124,179,255,.35) transparent;
  perspective:1400px;
  /* brzegi wygaszone, żeby bloki nie ucinały się o ramkę */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
}
.gf__scroll::-webkit-scrollbar{width:4px}
.gf__scroll::-webkit-scrollbar-thumb{background:rgba(124,179,255,.35);border-radius:4px}
.gf__stack{
  display:grid;gap:clamp(14px,2vh,26px);
  padding:clamp(10px,2vh,26px) clamp(4px,1vw,14px);
  transform-style:preserve-3d;
}

/* ---------------- blok z pracą ---------------- */
.gfx{
  --d:0;--dr:0;--a:0;position:relative;margin:0;
  transform-style:preserve-3d;
  transform:
    rotateX(calc(var(--dr) * -9deg))
    translateZ(calc(var(--a) * -130px))
    scale(calc(1 - var(--a) * .05));
  opacity:calc(1 - var(--a) * .55);
  transition:opacity .2s linear;
}
.gfx__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:clamp(8px,.8vw,14px);background:#05070c;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05) inset;
}
/* `contain`, bo prace mają skrajnie różne formaty — od panoramicznego
   banera po pionową ulotkę. `cover` obcinałby połowę projektu. */
.gfx__media img{
  width:100%;height:100%;object-fit:contain;display:block;
  padding:clamp(6px,1vw,16px);
}
.gfx__scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
      rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  opacity:calc(.5 - var(--a) * .3);mix-blend-mode:overlay;
}
.gfx__edge{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  border:1px solid rgba(124,179,255,calc(.42 - var(--a) * .38));
  box-shadow:0 0 calc(28px * (1 - var(--a))) rgba(124,179,255,calc(.22 - var(--a) * .22)) inset;
}
.gfx__no{
  position:absolute;left:clamp(10px,1vw,16px);top:clamp(8px,.9vw,14px);z-index:2;
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:clamp(13px,1.1vw,19px);line-height:1;
  color:rgba(206,226,255,.5);
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}

/* ---------------- oznaczenie obszaru przewijanego ---------------- */
.gf__wrap{position:relative;min-height:0;display:flex;flex-direction:column}

.gf__badge{
  position:absolute;left:50%;top:clamp(10px,1.6vh,18px);translate:-50% 0;
  z-index:4;margin:0;pointer-events:none;
  display:flex;align-items:center;gap:8px;
  padding:7px 14px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(214,236,255,.85);white-space:nowrap;
  border:1px solid rgba(150,196,255,.3);
  background:linear-gradient(158deg,rgba(126,182,255,.3),rgba(20,40,80,.75));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:opacity .45s var(--ease),translate .45s var(--ease);
}
.gf__badge svg{width:13px;height:13px;color:var(--blue)}
.gf__badge b{font-weight:600;color:#fff}
/* po ruszeniu z miejsca plakietka nie ma już nic do powiedzenia */
.gf__badge.is-off{opacity:0;translate:-50% -8px}

/* Wygaszenie dolnej krawędzi — widać, że treść leci dalej pod spód. */
.gf__veil{
  position:absolute;left:1px;right:1px;bottom:1px;height:clamp(40px,7vh,80px);
  z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(3,6,13,.9));
  opacity:var(--gfveil,1);transition:opacity .4s var(--ease);
}

/* Pasek postępu przy prawej ramce — od razu widać, ile jeszcze zostało. */
.gf__prog{
  position:absolute;right:5px;top:clamp(10px,1.6vh,18px);bottom:clamp(10px,1.6vh,18px);
  z-index:4;width:2px;border-radius:2px;pointer-events:none;
  background:rgba(206,226,255,.12);
}
.gf__prog i{
  position:absolute;left:0;width:100%;border-radius:2px;
  top:calc(var(--gfp,0) * (100% - var(--gfh,20%)));
  height:var(--gfh,20%);
  background:linear-gradient(180deg,rgba(124,179,255,.6),var(--blue));
  box-shadow:0 0 10px rgba(124,179,255,.7);
}

/* ---------------- podpowiedź o przewijaniu ---------------- */
.gf__hint{
  display:flex;align-items:center;justify-content:center;gap:10px;margin:0;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(198,220,255,.45);
  transition:opacity .45s var(--ease);
}
.gf__hint.is-off{opacity:0}
.gf__arrow{display:block;width:13px;height:13px;color:var(--blue);animation:gfArrow 1.9s var(--ease) infinite}
@keyframes gfArrow{
  0%,100%{transform:translateY(-2px);opacity:.5}
  50%    {transform:translateY(3px); opacity:1}
}

@media (max-width:1000px){
  .gf{grid-template-columns:1fr;row-gap:clamp(20px,3vh,34px)}
  .gf__top{max-width:none}
  .gf__view{height:min(68vh,560px)}
}

/* ============================================================
   STOPKA
   Leży pod sekcjami, przypięta do dołu okna. Ostatnia sekcja ma pod
   sobą margines równy jej wysokości, więc przy dojeżdżaniu do końca
   strony zsuwa się z niej i odsłania ją jak spod rolety. Stąd `fixed`
   i `z-index:0` — sekcje mają własne tło i wyższą warstwę.
   ============================================================ */
:root{--footH:clamp(360px,50vh,470px)}
/* Miejsce na odsłonięcie stopki robi pusty element w zwykłym przepływie.
   Ani margines ostatniej sekcji, ani `padding` na `body` tu nie zadziała:
   margines dolny ostatniego dziecka skleja się z `body`, a `body` ma
   `height:100%`, więc jego własny padding mieści się w oknie zamiast
   przedłużać obszar przewijania. */
.foot__space{height:var(--footH)}

/* Stopka mierzy się swoją treścią (`height:auto`), a wysokość odcinka,
   po którym się odsłania, dopisuje JS. Sztywna wysokość obcinała dolny
   pasek na niższych oknach — treść nie mieściła się w narzuconych
   pikselach, a `overflow:hidden` ucinał to, co wystawało. */
.foot{
  position:fixed;left:0;right:0;bottom:0;z-index:0;
  height:auto;min-height:clamp(380px,66vh,620px);max-height:100svh;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 120% at 22% 0%,rgba(40,70,130,.30),transparent 62%),
    linear-gradient(180deg,#05070d 0%,#020306 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,3.2vh,44px) 0 clamp(14px,2vh,24px);
}
/* siatka heksów — ta sama technika co w sekcjach: kafel w tle,
   brzegi wygaszone warstwą w kolorze tła */
.foot__hex{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9}
.foot__hex i{
  position:absolute;inset:0;display:block;opacity:.045;
  background-image:
    radial-gradient(ellipse 70% 80% at 50% 40%,
        rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 62%,#03040a 100%),
    url('assets/hex.svg');
  background-repeat:no-repeat,repeat;
  background-size:100% 100%,84px 48.497px;
}
/* Górna krawędź: cienka nitka, po niej przejeżdża światło, a pod nią
   rozlewa się łuna — to ona „wyłania się" spod ostatniej sekcji,
   kiedy ta zjeżdża ze stopki. */
.foot__beam{
  position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,
      transparent,rgba(124,179,255,.45) 30%,rgba(124,179,255,.45) 70%,transparent);
}
.foot__beam::before{
  content:'';position:absolute;left:0;right:0;top:0;height:clamp(90px,14vh,160px);
  pointer-events:none;
  background:radial-gradient(ellipse 62% 100% at 50% 0%,
      rgba(96,158,255,.28) 0%,rgba(60,110,210,.12) 42%,transparent 78%);
}
.foot__beam::after{
  content:'';position:absolute;top:-1px;left:0;width:26%;height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  box-shadow:0 0 22px 3px rgba(124,179,255,.6);
  animation:footBeam 6.5s var(--ease) infinite;
}
@keyframes footBeam{
  0%  {transform:translateX(-120%)}
  55% {transform:translateX(420%)}
  100%{transform:translateX(420%)}
}

/* Proporcje odmierzone z inspiracji: karta zajmuje ~40% szerokości
   okna, znak ~37%, kolumna ikon ~5%. Znak jest węższy od karty, ale
   przez swój format wyraźnie od niej wyższy — i o to chodziło. */
/* Ikony i karta stoją blisko siebie jako jedna grupa, znak odjeżdża
   do prawej krawędzi. Wcześniej `space-between` na trzech kolumnach
   rozpychało ikony od bloku na pół ekranu. */
.foot__in{
  position:relative;z-index:2;
  width:min(88vw,1600px);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,60px);
}
.foot__left{display:flex;align-items:center;gap:clamp(18px,3.7vw,70px)}

/* ---------------- ikony społecznościowe ---------------- */
.foot__socwrap{display:flex;align-items:center;gap:clamp(10px,1vw,18px)}
/* podpis pionowy, tak jak na inspiracji */
.foot__soclbl{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.42em;color:rgba(198,220,255,.38);
  text-transform:uppercase;white-space:nowrap;
}
.foot__soc{display:flex;flex-direction:column;gap:clamp(7px,1vh,12px)}
.hexbtn{
  position:relative;display:grid;place-items:center;
  width:clamp(38px,2.9vw,46px);aspect-ratio:1;
  color:rgba(198,220,255,.62);
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  background:linear-gradient(180deg,rgba(214,234,255,.12),rgba(30,60,120,.12));
  transition:.4s var(--ease);
}
.hexbtn svg{width:44%;height:44%}
.hexbtn:hover{
  color:#fff;
  background:linear-gradient(180deg,rgba(124,179,255,.4),rgba(40,80,160,.28));
  transform:translateY(-2px);
}

/* ---------------- karta kontaktu ---------------- */
/* Szkło: mocniejsze rozmycie tła, dużo mniej własnego wypełnienia
   i wyraźny błysk na górnej krawędzi — dzięki temu blok przepuszcza
   siatkę heksów, zamiast kłaść na niej granatową płytę. */
.foot__card{
  width:min(38vw,706px);
  padding:clamp(24px,2.6vw,40px) clamp(24px,2.6vw,40px) clamp(26px,3vw,44px);
  border:1px solid rgba(206,226,255,.16);
  border-radius:clamp(12px,1vw,18px);
  background:linear-gradient(158deg,
      rgba(168,202,255,.10) 0%,
      rgba(120,160,220,.035) 46%,
      rgba(10,18,34,.06) 100%);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(224,240,255,.28),
    inset 0 -1px 0 rgba(124,179,255,.10),
    0 30px 70px rgba(0,0,0,.45);
}
.foot__h{
  margin:0;font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(20px,2vw,32px);letter-spacing:.14em;
  color:#eaf3ff;text-transform:uppercase;
}
/* Każda kolumna niesie własny nagłówek i kreskę pod nim. Dzięki temu
   po zwinięciu do jednej kolumny na telefonie „MENU" z kreską ląduje
   pod adresem e-mail, a nie odjeżdża od swojej listy. */
.foot__cols{
  display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
  gap:clamp(16px,2vw,36px);align-items:start;
}
.foot__menu{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.5vh,18px);align-content:start}
/* Pozycje menu w tej samej typografii co „Lokalizacja". */
/* Ta sama typografia co „Lokalizacja" obok — bez wersalików, żeby obie
   kolumny karty czytały się jak jedna całość. */
.foot__menu a{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(11px,.82vw,14px);letter-spacing:.06em;
  color:#eaf3ff;text-decoration:none;
  transition:color .35s var(--ease),padding-left .35s var(--ease);
}
.foot__menu a:hover{color:var(--blue);padding-left:5px}
.foot__rule{
  display:block;height:1px;margin:clamp(14px,1.8vh,22px) 0;
  background:linear-gradient(90deg,rgba(124,179,255,.55),transparent);
}
.foot__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.8vh,20px)}
.foot__list li{display:flex;align-items:center;gap:clamp(12px,1.2vw,20px)}
.hexico{
  flex:0 0 auto;display:grid;place-items:center;
  width:clamp(38px,2.9vw,48px);aspect-ratio:1;
  color:var(--blue);
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  background:linear-gradient(180deg,rgba(124,179,255,.22),rgba(30,60,120,.18));
}
.hexico svg{width:46%;height:46%}
.foot__list h3{
  margin:0 0 3px;font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(11px,.82vw,14px);letter-spacing:.06em;color:#eaf3ff;
}
.foot__list p{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10.5px,.76vw,13px);letter-spacing:.04em;
  color:rgba(206,226,255,.62);
}
.foot__list a{color:inherit;text-decoration:none;transition:color .35s var(--ease)}
.foot__list a:hover{color:var(--blue)}

/* ---------------- marka ---------------- */
.foot__brand{display:grid;justify-items:end}
.foot__logo{
  width:min(34vw,645px);height:auto;display:block;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.6));
}

/* ---------------- pasek dolny ---------------- */
.foot__bar{
  position:relative;z-index:2;flex:0 0 auto;
  width:min(88vw,1600px);margin:clamp(14px,2vh,26px) auto 0;
  padding-top:clamp(12px,1.8vh,20px);
  border-top:1px solid rgba(206,226,255,.10);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,40px);flex-wrap:wrap;
}
.foot__copy,.foot__links{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9px,.7vw,11.5px);letter-spacing:.1em;
  color:rgba(198,220,255,.42);
}
.foot__links{list-style:none;padding:0;display:flex;gap:clamp(14px,1.8vw,38px);flex-wrap:wrap}
.foot__links a{color:inherit;text-decoration:none;transition:color .35s var(--ease)}
.foot__links a:hover{color:var(--blue)}

@media (max-width:1100px){
  .foot__space{display:none}
  /* Stopka wraca do przepływu, więc `max-height:100svh` + `overflow:hidden`
     z reguły bazowej nie mają już sensu — na wąskim ekranie treść układa
     się w kolumnę i jest wyższa niż okno, przez co dolny pasek był ucinany. */
  .foot{
    position:relative;height:auto;max-height:none;overflow:visible;
    padding:clamp(40px,7vh,72px) 0;
  }
  /* `.foot__in` jest kontenerem elastycznym, więc reguły siatki nic tu
     nie robiły — znak zostawał obok karty i chował się za nią. */
  .foot__in{
    position:relative;
    flex-direction:column;align-items:center;gap:clamp(18px,2.6vh,30px);
  }
  /* Znak schodzi pod treść jako znak wodny wyśrodkowany w pionie i poziomie.
     Ustawiony w przepływie dokładał ponad 200 px wysokości, przez co stopka
     nie mieściła się w oknie telefonu i nie dało się jej odsłaniać jak
     na desktopie. */
  .foot__brand{
    position:absolute;inset:0;z-index:0;
    display:grid;place-items:center;justify-items:center;
    width:100%;pointer-events:none;
  }
  .foot__logo{width:min(86vw,520px);opacity:.16}
  .foot__left{position:relative;z-index:1}
  .foot__socwrap{flex-direction:column}
  .foot__soclbl{writing-mode:horizontal-tb;transform:none}
  .foot__soc{flex-direction:row}
  .foot{min-height:0}
  /* Ikony schodzą pod blok — na wąskim ekranie kolumna obok karty
     zjadałaby jej szerokość. */
  .foot__left{flex-direction:column}
  .foot__socwrap{order:2;flex-direction:row;gap:14px}
  .foot__soclbl{writing-mode:horizontal-tb;transform:none}
  .foot__card{order:1;width:min(92vw,560px)}
  .foot__cols{grid-template-columns:1fr;gap:clamp(14px,2.2vh,22px)}
  /* Osiem pozycji jedna pod drugą rozpychało kartę o połowę ekranu. */
  .foot__menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vh,12px)}
  .foot__bar{flex-direction:column;text-align:center;gap:6px}
}
@media (max-width:700px){
  /* Sześć ikon obok podpisu nie mieści się w szerokości telefonu —
     podpis idzie nad nie, a same ikony schodzą o kilka pikseli. */
  .foot__socwrap{flex-direction:column;gap:12px}
  .foot__soc{gap:10px}
  .hexbtn{width:34px}
  .foot__links{justify-content:center}
}

/* Odsłanianie stopki spod treści działa też na telefonie — ale tylko wtedy,
   gdy stopka mieści się w oknie. Przy niższych ekranach `position:fixed`
   ucinałby jej górę, więc tam zostaje zwykły przepływ. */
@media (max-width:1100px) and (min-height:620px){
  .foot__space{display:block}
  .foot{
    position:fixed;left:0;right:0;bottom:0;
    height:auto;max-height:100svh;overflow:hidden;
    padding:clamp(22px,3.4vh,44px) 0;
  }
}

/* ============================================================
   PODSTRONA — marketing
   Pulpit usług: dwa moduły w ramce w stylu HUD, a pod nim dwie osie
   procesu na wspólnym komponencie `.reel--steps`.
   ============================================================ */
/* Ten sam margines boczny co nagłówek podstrony — panel ma stać dokładnie
   w osi tekstu nad nim, inaczej krawędzie rozjeżdżają się o dwa procent. */
.mkt{position:relative;z-index:1;padding:0 7.5% clamp(40px,6vh,80px)}
.mkt__in{max-width:none;margin:0 auto}

/* Rozwinięcie wstępu w trzech kolumnach — wypełnia dół pierwszego ekranu
   i daje treści miejsce bez rozciągania jednego akapitu na całą szerokość. */
.mkt__cols{
  margin:clamp(16px,2.4vh,28px) 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,40px);
}
.mkt__cols p{
  margin:0;padding-top:clamp(10px,1.4vh,16px);
  border-top:1px solid rgba(124,179,255,.16);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9.5px,.66vw,11.5px);line-height:1.72;
  color:rgba(206,226,255,.5);
}

.mkt__hud{
  position:relative;overflow:hidden;
  padding:clamp(18px,2.2vw,34px);
  border:1px solid rgba(150,196,255,.2);
  border-radius:clamp(12px,1vw,18px);
  background:linear-gradient(158deg,
      rgba(120,175,255,.10) 0%,rgba(60,110,200,.05) 100%);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(214,236,255,.2),0 26px 60px rgba(0,0,0,.38);
}
/* przelatująca linia skanu — ten sam motyw co w menu terminalowym */
/* Przesuwane tło, a nie przesuwany element: pasek ma jechać przez całą
   wysokość panelu, a tej nie znamy z góry — `translateY` na elemencie
   o wysokości 1px przesunąłby go o jeden piksel. */
.mkt__scan{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
      transparent 0%,rgba(124,179,255,.14) 3%,
      rgba(124,179,255,.03) 6%,transparent 9%);
  background-size:100% 400%;
  animation:mktScan 6s linear infinite;
}
@keyframes mktScan{
  from{background-position:0 -100%}
  to  {background-position:0 300%}
}
.mkt__corner{
  position:absolute;width:16px;height:16px;pointer-events:none;
  border:1px solid rgba(124,179,255,.5);
}
.mkt__corner--tl{left:9px;top:9px;border-right:0;border-bottom:0}
.mkt__corner--br{right:9px;bottom:9px;border-left:0;border-top:0}

.mkt__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding-bottom:clamp(12px,1.6vh,18px);
  border-bottom:1px solid rgba(124,179,255,.16);
}
.mkt__lbl,.mkt__cnt{
  margin:0;display:flex;align-items:center;gap:10px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(198,220,255,.5);
}
.mkt__lbl{color:var(--blue)}
.mkt__lbl i{width:22px;height:1px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.mkt__cnt b{
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:15px;letter-spacing:.04em;color:#eaf3ff;
}

.mkt__tiles{
  list-style:none;margin:clamp(16px,2.2vh,26px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px);
}
.mkt__tile{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(16px,1.8vw,28px);
  border:1px solid rgba(170,205,255,.14);
  border-radius:clamp(10px,.8vw,14px);
  background:linear-gradient(158deg,
      rgba(126,182,255,.14),rgba(44,94,192,.07));
}
.mkt__no{
  position:absolute;right:clamp(14px,1.6vw,24px);top:clamp(12px,1.4vw,20px);
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:clamp(15px,1.3vw,22px);line-height:1;color:rgba(124,179,255,.45);
}
.mkt__ico{
  display:grid;place-items:center;
  width:clamp(34px,2.6vw,44px);aspect-ratio:1;margin-bottom:12px;
  color:var(--blue);
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  background:linear-gradient(180deg,rgba(124,179,255,.24),rgba(30,60,120,.18));
}
.mkt__ico svg{width:48%;height:48%}
.mkt__t{
  margin:0 0 8px;font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(13px,1.15vw,19px);letter-spacing:.02em;line-height:1.15;
  color:#eaf3ff;text-transform:uppercase;
}
.mkt__d{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9.5px,.68vw,11.5px);line-height:1.65;
  color:rgba(206,226,255,.58);
}
.mkt__chips{
  list-style:none;margin:clamp(12px,1.6vh,18px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.mkt__chips li{
  padding:5px 10px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(206,226,255,.6);
  background:linear-gradient(180deg,rgba(214,234,255,.10),rgba(30,60,120,.08));
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
/* cena zawsze przy dolnej krawędzi kafla — moduły stoją równo
   niezależnie od długości opisu */
.mkt__price{
  margin:auto 0 0;padding-top:clamp(12px,1.6vh,18px);
  border-top:1px solid rgba(124,179,255,.16);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9px,.66vw,11px);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(198,220,255,.5);
}
.mkt__price b{
  font-family:'SuperCar','Vogjer',sans-serif;font-weight:400;
  font-size:clamp(20px,1.7vw,30px);letter-spacing:.03em;
  color:#eaf3ff;margin-right:6px;
}
.mkt__note{
  margin:6px 0 0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.1em;color:rgba(198,220,255,.34);
}

/* ---------------- co daje wizytówka ---------------- */
.mkt__wins{
  list-style:none;margin:clamp(20px,3vh,34px) 0 clamp(34px,5vh,60px);padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.4vw,22px);
}
.mkt__wins li{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:clamp(14px,1.4vw,20px) clamp(8px,1vw,14px);
  border:1px solid rgba(170,205,255,.13);
  border-radius:clamp(10px,.8vw,14px);
  background:linear-gradient(158deg,rgba(120,175,255,.08),rgba(70,120,210,.04));
}
.mkt__wins p{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9px,.66vw,11px);line-height:1.55;
  color:rgba(206,226,255,.6);
}
/* drugi nagłówek w tej samej sekcji potrzebuje odstępu od bloku wyżej */
.mkt__k2{margin-top:clamp(24px,4vh,48px)}
/* dwie usługi zamiast czterech wariantów */
.cmp--two{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:1000px){
  .mkt__cols{grid-template-columns:1fr;gap:clamp(12px,2vh,20px)}
  .mkt__tiles{grid-template-columns:1fr}
  .mkt__wins{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp--two{grid-template-columns:1fr}
}
@media (max-width:700px){
  .mkt{padding-left:8%;padding-right:8%}
  .mkt__wins{grid-template-columns:1fr}
  .mkt__bar{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Tekst tylko dla wyszukiwarek i czytników ekranu — poza kadrem, ale
   nie `display:none`, bo tamto usuwa go także z drzewa dostępności. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================
   PODSTRONA — kontakt
   Dane po lewej, scena 3D po prawej, pod spodem formularz.
   ============================================================ */
.ctc{
  position:relative;z-index:1;
  padding:clamp(52px,7.5vh,86px) 7.5% clamp(30px,4vh,56px);
}
.ctc__in{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(24px,3.4vw,64px);
}
.ctc__side{min-width:0}

.ctc__list{
  list-style:none;margin:clamp(20px,3vh,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,24px);
}
.ctc__list li{
  display:flex;align-items:center;gap:clamp(10px,1vw,16px);
  padding:clamp(12px,1.3vw,18px);
  border:1px solid rgba(170,205,255,.13);
  border-radius:clamp(10px,.8vw,14px);
  background:linear-gradient(158deg,rgba(120,175,255,.09),rgba(70,120,210,.045));
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.ctc__list li:hover{
  border-color:rgba(124,179,255,.4);
  background:linear-gradient(158deg,rgba(126,182,255,.18),rgba(44,94,192,.09));
}
.ctc__lbl{
  margin:0 0 3px;font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(9px,.62vw,10.5px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(198,220,255,.45);
}
.ctc__list p{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10px,.74vw,13px);line-height:1.4;color:#eaf3ff;
}
.ctc__list a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
.ctc__list a:hover{color:var(--blue)}

.ctc__btns{
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,18px);
  margin-top:clamp(18px,2.6vh,30px);
}

/* ---------------- scena 3D ---------------- */
.ctc__scene{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:1/1;width:100%;max-height:74vh;justify-self:center;
  border:1px solid rgba(150,196,255,.2);
  border-radius:clamp(14px,1.2vw,22px);
  background:
    radial-gradient(ellipse 70% 70% at 50% 45%,rgba(40,80,160,.28),transparent 70%),
    linear-gradient(158deg,rgba(120,175,255,.07),rgba(6,10,20,.9));
}
/* poświata pod sceną — widać ją także zanim skrypt z CDN dojedzie */
.ctc__glow{
  position:absolute;left:12%;right:12%;top:16%;bottom:16%;z-index:0;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(110,170,255,.42),transparent 70%);
  filter:blur(60px);
  animation:ctcGlow 7s var(--ease) infinite;
}
@keyframes ctcGlow{0%,100%{opacity:.55}50%{opacity:.95}}
.ctc__scan{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
      transparent 0%,rgba(124,179,255,.12) 3%,
      rgba(124,179,255,.03) 6%,transparent 9%);
  background-size:100% 400%;
  animation:mktScan 7s linear infinite;
}
.ctc__corner{
  position:absolute;z-index:3;width:18px;height:18px;pointer-events:none;
  border:1px solid rgba(124,179,255,.55);
}
.ctc__corner--tl{left:10px;top:10px;border-right:0;border-bottom:0}
.ctc__corner--tr{right:10px;top:10px;border-left:0;border-bottom:0}
.ctc__corner--bl{left:10px;bottom:10px;border-right:0;border-top:0}
.ctc__corner--br{right:10px;bottom:10px;border-left:0;border-top:0}
.ctc__tag,.ctc__hint{
  position:absolute;z-index:3;margin:0;pointer-events:none;
  display:flex;align-items:center;gap:9px;
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8px;letter-spacing:.3em;text-transform:uppercase;
}
.ctc__tag{left:clamp(18px,2vw,30px);top:clamp(16px,1.8vw,26px);color:var(--blue)}
.ctc__tag i{width:20px;height:1px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.ctc__hint{
  left:clamp(18px,2vw,30px);bottom:clamp(16px,1.8vw,26px);
  color:rgba(198,220,255,.4);
  animation:hintPulse 2.8s var(--ease) infinite;
}
/* Scena leży nad poświatą, ale pod ramką i podpisami. */
.ctc__spline{
  position:relative;z-index:1;
  display:block;width:100%;height:100%;
}
/* Plakietka „Built with Spline" zostaje — na darmowym planie Spline jest
   wymagana, więc nie zasłaniamy jej. Podpis sceny stoi po przeciwnej
   stronie, żeby nie stykały się ze sobą. */

/* ---------------- formularz ---------------- */
.frm{position:relative;z-index:1;padding:clamp(30px,5vh,70px) 7.5%}
.frm__in{max-width:min(92vw,1720px);margin:0 auto}
.frm__h{
  margin:0 0 clamp(10px,1.4vh,16px);
  font-family:'Vogjer',sans-serif;font-weight:400;
  font-size:clamp(19px,2.7vw,38px);letter-spacing:.02em;line-height:1.1;
  color:#eaf3ff;text-transform:uppercase;
}
.frm__p{
  margin:0 0 clamp(18px,2.6vh,30px);max-width:min(64vw,900px);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10px,.72vw,12.5px);line-height:1.78;
  color:rgba(206,226,255,.55);
}
.frm__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,22px);
}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld--wide{grid-column:1 / -1}
.fld__l{
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(198,220,255,.45);
}
.fld__i{
  width:100%;padding:clamp(11px,1.1vw,15px) clamp(12px,1.2vw,18px);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(10px,.74vw,12.5px);line-height:1.5;
  color:#eaf3ff;cursor:none;
  border:1px solid rgba(170,205,255,.16);
  border-radius:9px;
  background:linear-gradient(158deg,rgba(120,175,255,.08),rgba(70,120,210,.04));
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.fld__i::placeholder{color:rgba(198,220,255,.26)}
.fld__i:focus{
  outline:none;border-color:rgba(124,179,255,.55);
  background:linear-gradient(158deg,rgba(126,182,255,.16),rgba(44,94,192,.08));
}
.fld__i.is-bad{border-color:rgba(255,120,120,.6)}
.fld__i--area{resize:vertical;min-height:120px}
/* strzałka listy rozwijanej rysowana tłem — natywna nie da się ostylować */
.fld__i--sel{
  appearance:none;-webkit-appearance:none;
  padding-right:38px;
  background-image:
    linear-gradient(45deg,transparent 50%,rgba(198,220,255,.6) 50%),
    linear-gradient(135deg,rgba(198,220,255,.6) 50%,transparent 50%),
    linear-gradient(158deg,rgba(120,175,255,.08),rgba(70,120,210,.04));
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%,0 0;
  background-size:6px 6px,6px 6px,100% 100%;
  background-repeat:no-repeat;
}
.fld__i--sel option{background:#070b14;color:#eaf3ff}

.frm__foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:clamp(12px,1.6vw,24px);
  margin-top:clamp(16px,2.4vh,28px);
}
.frm__note{
  margin:0;font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9px,.66vw,11px);letter-spacing:.1em;
  color:rgba(198,220,255,.4);
}
.frm__note.is-bad{color:rgba(255,140,140,.85)}
.frm__send{border:0;cursor:none}

/* odnośnik w kaflu skrótów */
.cmp__a{
  margin-top:clamp(10px,1.4vh,16px);padding-top:clamp(8px,1.2vh,14px);
  border-top:1px solid rgba(124,179,255,.16);
  font-family:'Montserrat',sans-serif;font-weight:500;
  font-size:clamp(9px,.66vw,11px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;
  transition:color .3s var(--ease),letter-spacing .3s var(--ease);
}
.cmp__a::after{content:' →'}
.cmp__a:hover{color:#eaf3ff;letter-spacing:.18em}
/* link ma stać przy dolnej krawędzi, tak jak cena w innych kaflach */
.cmp--four .cmp__it .cmp__a{margin-top:auto}

@media (max-width:1000px){
  .ctc__in{grid-template-columns:1fr}
  .ctc__scene{order:-1;max-height:56vh;aspect-ratio:4/3}
  .frm__grid{grid-template-columns:1fr}
  .cmp--four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .ctc,.frm{padding-left:8%;padding-right:8%}
  .ctc__list{grid-template-columns:1fr}
  .cmp--four{grid-template-columns:1fr}
  .frm__foot{flex-direction:column;align-items:stretch}
}

/* ============================================================
   REFLEKTOR KURSORA
   Miękkie światło idące za myszą. `screen` sprawia, że czerń jest
   neutralna — rozjaśnia tylko to, co pod nim leży, zamiast kłaść
   szarą mgłę na całą stronę.
   ============================================================ */
.spot{
  position:fixed;left:0;top:0;z-index:44;pointer-events:none;
  width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle,
      rgba(150,200,255,.16) 0%,
      rgba(110,170,255,.09) 32%,
      rgba(70,130,230,.03) 58%,
      transparent 72%);
  mix-blend-mode:screen;
  opacity:0;transition:opacity .5s var(--ease);
  will-change:transform;
}
.spot.is-on{opacity:1}

/* elementy, które reagują na zbliżenie kursora (--near z JS) */
[data-lit]{--near:0}
[data-lit]{
  transition:filter .45s var(--ease),transform .45s var(--ease);
  filter:brightness(calc(1 + var(--near) * .28))
         drop-shadow(0 0 calc(var(--near) * 18px) rgba(124,179,255,.45));
  transform:translateY(calc(var(--near) * -3px));
}

/* ============================================================
   KURSOR
   ============================================================ */
.cur{
  position:fixed;left:0;top:0;z-index:50;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid rgba(242,240,236,.45);
  opacity:0;transition:opacity .3s var(--ease),width .35s var(--ease),
             height .35s var(--ease),margin .35s var(--ease);
  will-change:transform;
}
.cur.is-on{opacity:1}
.cur::after{
  content:'';position:absolute;left:50%;top:50%;
  width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 10px var(--blue);
  transition:opacity .3s var(--ease);
}
.cur__arrow,.cur__label{
  position:absolute;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .4s var(--ease);
}
.cur__arrow{left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;color:var(--blue)}
.cur__label{
  left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  font-size:8px;letter-spacing:.26em;white-space:nowrap;color:rgba(214,232,255,.75);
}
.cur.is-scroll{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border-color:rgba(124,179,255,.55);box-shadow:0 0 18px rgba(124,179,255,.25);
}
.cur.is-scroll::after{opacity:0}
.cur.is-scroll .cur__arrow,.cur.is-scroll .cur__label{opacity:1}
.cur.is-scroll.scroll-up .cur__arrow{transform:rotate(180deg)}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width:1024px){
  .hcopy__title{white-space:normal}
  .hbar{white-space:normal;text-align:center;width:min(90vw,520px)}
  .prog{display:none}
}
@media (max-width:700px){
  .social{
    left:50%;top:auto;bottom:calc(var(--frame) + 44px);
    transform:translateX(-50%);flex-direction:row;
  }
  .blk{width:min(86vw,420px)}
  .blk--a{right:auto;left:7%;text-align:left}
  .blk--a .blk__p{margin-left:0}
  /* Opis pod znakiem miał 34vw, czyli na telefonie ledwie dwa słowa
     w linijce. Na wąskim ekranie idzie na pełną szerokość kolumny. */
  .hcopy__lead{
    width:84vw;font-size:11px;letter-spacing:.1em;line-height:1.8;
  }
  .hcopy__title img{width:86vw}
  .hcopy__kicker{font-size:10px;letter-spacing:.42em}
}
@media (hover:none){
  .hero,.s2{cursor:auto}
  .cur{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .hcopy__kicker,.hcopy__title,.hcopy__lead,.hbar{opacity:1}
  .cur{display:none}
}