/* ===========================================================================
   Dany Creative. Jeden arkusz stylów.
   01 tokeny · 02 podstawa · 03 tło · 04 nawigacja · 05 hero · 06 pasma
   07 realizacje · 08 moment interaktywny · 09 usługi · 10 proces
   11 termin · 12 pasek · 13 pakiety · 14 opinie · 15 pytania
   16 kontakt · 17 stopka · 18 kursor · 19 kurtyna · 20 ograniczony ruch
   =========================================================================== */

/* --- 01 tokeny ----------------------------------------------------------- */
:root{
  --canvas:#F4F3F1;
  --canvas-2:#EBEAE7;
  --panel:#FFFFFF;
  --ink:#0B0B0C;
  --ink-2:#63656A;          /* 6.9:1 na canvas */
  --ink-3:#83827D;          /* 3.2:1, minimum dla obramowań interaktywnych */
  --ink-czyt:#44464B;       /* 8.5:1, opisy które muszą się czytać z odległości */
  --line:#E0DFDB;
  --line-2:#CFCEC9;
  --light:#F8F8F6;          /* tekst na ciemnym materiale */
  --focus:#0B0B0C;

  --display:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",monospace;

  --e-out:cubic-bezier(.16,1,.3,1);        /* wyjście, ekspo */
  --e-io:cubic-bezier(.65,.05,.36,1);      /* dwustronne */
  --t-micro:180ms; --t-ui:420ms; --t-sec:900ms;

  --gut:clamp(20px,4vw,48px);
  --maxw:1320px;
  --r:6px; --r-lg:14px; --r-pill:999px;
}

/* --- 02 podstawa --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
/* height:auto jest tu obowiązkowe. Atrybuty width/height na obrazku dają
   dwa określone wymiary, a wtedy przeglądarka ignoruje aspect-ratio. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.032em;line-height:1.03;margin:0}
p{margin:0}
.kick{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:13px;white-space:nowrap}
.kick::before{content:"";width:30px;height:1px;background:var(--line-2);flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;
  border-radius:var(--r-pill);font-size:15px;font-weight:500;text-decoration:none;
  border:1px solid transparent;transition:transform var(--t-ui) var(--e-out),
    background var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);background:#222326}
.btn-ghost{border-color:var(--ink-3);color:var(--ink)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--ink);background:rgba(255,255,255,.6)}
@media (pointer:coarse){.btn{min-height:48px}}

/* --- 03 tło: jedno środowisko za całą stroną ----------------------------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(72% 52% at 70% 18%,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 64%),
    radial-gradient(64% 46% at 10% 82%,rgba(206,204,198,.38) 0%,rgba(206,204,198,0) 66%);
  animation:drift 96s ease-in-out -22s infinite}
.env::after{content:"";position:absolute;inset:0;opacity:.14;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.55'/></svg>")}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-1.5%,1.2%,0) scale(1.04)}}
.page{position:relative;z-index:1}

/* pyłki, poziom szeptu */
.motes{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(11,11,12,.16);
  animation:mote 26s linear infinite}
@keyframes mote{0%{transform:translate3d(0,10vh,0);opacity:0}
  12%{opacity:.7}88%{opacity:.7}100%{transform:translate3d(4vw,-96vh,0);opacity:0}}

/* --- 04 nawigacja -------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(244,243,241,0);border-bottom:1px solid transparent;
  transition:background var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out)}
.nav.solid{background:rgba(244,243,241,.82);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:34px;height:74px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand svg{height:21px;width:auto;color:var(--ink)}
.brand-txt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.35;padding-top:2px}
.brand-txt b{display:block;font-weight:400;color:var(--ink)}
.brand-txt span{display:block;color:var(--ink-2);font-size:9px;letter-spacing:.16em}
.nav-links{margin-left:auto;display:flex;gap:30px}
.nav-links a{font-size:14.5px;color:var(--ink-2);text-decoration:none;position:relative;
  transition:color var(--t-micro) var(--e-out)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-ui) var(--e-out)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav .btn{height:42px;padding:0 20px;font-size:14px}
@media (max-width:1000px){.nav-links{display:none}}

/* --- 05 hero -------------------------------------------------------------
   Domyślnie hero jest STATYCZNY: nieruchomy kadr plus blok spoczynku.
   Wersję przewijaną włącza klasa .scrub, którą nadaje JavaScript po
   sprawdzeniu pięciu warunków. Jedno źródło prawdy, więc CSS i JS nie mogą
   się rozjechać przy obrocie ekranu ani przy zmianie ustawień ruchu.        */
.hero{position:relative}
.stage{position:relative;min-height:min(720px,92vh);overflow:hidden;background:var(--canvas-2);
  display:flex;align-items:flex-end;padding:126px 0 60px}
body.scrub .hero{height:900vh}
body.scrub .stage{position:sticky;top:0;height:100vh;min-height:0;display:block;padding:0}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity 700ms var(--e-out)}
.stage.video-ready .poster{opacity:0}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 700ms var(--e-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}

/* pierścień ładowania */
.ring{position:absolute;right:calc(var(--gut) + 4px);bottom:34px;width:38px;height:38px;
  color:var(--ink);opacity:.55;transition:opacity 500ms var(--e-out)}
.ring circle{transition:stroke-dashoffset 140ms linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0;pointer-events:none}
.cue{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);text-align:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);opacity:var(--cue,1);transition:opacity 600ms var(--e-out);pointer-events:none}
.cue i{display:block;font-style:normal;font-size:15px;margin-bottom:7px;animation:bob 2.8s ease-in-out -.6s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* --- 06 pasma napisów ----------------------------------------------------
   Statycznie widać wyłącznie blok spoczynku, ułożony na nieruchomym kadrze.
   Przy .scrub pasma wracają na warstwę nad wideo i przejmuje je przewijanie. */
.bands{position:relative;width:100%;pointer-events:auto}
.bandwrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative}
.band{position:relative;width:100%}
/* Statycznie zostają DWA bloki, nie jeden: pasmo wejściowe, bo w nim siedzi
   jedyny h1 na stronie i telefon inaczej nie dostaje go wcale, oraz blok
   spoczynku z przyciskami. Reszta pasm to warstwy pod przewijane wideo. */
/* Zakres świadomie zawężony do trybu statycznego. Reguła bez "body:not(.scrub)"
   ma swoistość (0,3,0) i wygrywa z "body.scrub .band{display:block}" (0,2,1),
   przez co w trybie przewijanym znikają zawias i pasmo terminu. */
body:not(.scrub) .band:not(.settle):not(.wejscie){display:none}
.band .ctarow{pointer-events:auto}

body.scrub .bands{position:absolute;inset:0;pointer-events:none}
body.scrub .bandwrap{height:100%}
body.scrub .band{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);
  width:min(39%,540px);opacity:0;display:block}
body.scrub .band.hinge{width:min(44%,600px)}
body.scrub .band.settle{width:min(40%,545px)}

/* welon: jasny na jasnym materiale, ciemny na ciemnym. --tone przełącza. */
/* Warstwa czytelności: JEDNA na całą scenę, nie plamka pod każdym napisem.
   Mocna przy lewej krawędzi, wygaszona zanim dojdzie do pasa akcji, więc
   materiał po prawej zostaje żywy. --tone przełącza ją między jasną a ciemną,
   --vo prowadzi ją za widocznością aktywnego pasma. */
.veil{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--vo,0);
  background:
    linear-gradient(90deg,
      rgba(248,248,246,calc(.95*var(--tone,1))) 0%,
      rgba(248,248,246,calc(.90*var(--tone,1))) 38%,
      rgba(248,248,246,calc(.42*var(--tone,1))) 60%,
      rgba(248,248,246,0) 76%),
    linear-gradient(90deg,
      rgba(6,6,10,calc(.84*(1 - var(--tone,1)))) 0%,
      rgba(6,6,10,calc(.76*(1 - var(--tone,1)))) 38%,
      rgba(6,6,10,calc(.34*(1 - var(--tone,1)))) 60%,
      rgba(6,6,10,0) 76%)}
body.scrub .bands{z-index:2}

/* cień tekstu, też przełączany tonem: jasny halo na jasnym, ciemny na ciemnym */
.band h1,.band h2,.band p,.band .kick{
  text-shadow:
    0 1px 2px rgba(5,5,10,calc(.55*(1 - var(--tone,1)))),
    0 3px 16px rgba(5,5,10,calc(.42*(1 - var(--tone,1)))),
    0 1px 2px rgba(252,252,250,calc(.7*var(--tone,1))),
    0 3px 18px rgba(252,252,250,calc(.5*var(--tone,1)))}
.band .btn{text-shadow:none}

.band h2,.band p{color:var(--band-fg,var(--ink))}
.band h2{font-size:clamp(30px,4.3vw,62px)}
.band.hinge h2{font-size:clamp(46px,7vw,108px);letter-spacing:-.045em}
.band p{margin-top:18px;font-size:clamp(14.5px,1.2vw,18px);max-width:36ch;
  color:var(--band-fg2,var(--ink-2));
  opacity:var(--ks,1);transform:translateY(calc((1 - var(--ks,1)) * 12px))}
.band .kick{margin-bottom:24px;color:var(--band-fg2,var(--ink-2))}
.band .kick::before{background:currentColor;opacity:.45}

.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* wejścia */
.e-blur{position:relative;display:block}
.e-blur .soft{position:absolute;inset:0;filter:blur(12px);opacity:calc(1 - var(--k,0))}
.e-blur .sharp{opacity:var(--k,0)}
.e-grid .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))}
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --k2:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--k2)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
.e-depth{display:block;--kc:clamp(0,var(--k,0)*1.5,1);opacity:var(--kc);
  transform:scale(calc(.85 + .15*var(--kc)))}
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 26px))}
.band .ctarow{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;pointer-events:auto;
  opacity:var(--kb,1);transform:translateY(calc((1 - var(--kb,1)) * 16px))}

/* --- sekcje: wspólne ----------------------------------------------------- */
.sec{position:relative;padding:clamp(84px,11vw,160px) 0}
.sec-head{margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{font-size:clamp(28px,3.5vw,50px);max-width:17ch;margin-top:22px}
.sec-head .lede{margin-top:20px;color:var(--ink-2);max-width:46ch;font-size:17px}
.rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform 1100ms var(--e-out)}
.in .rule{transform:scaleX(1)}

/* wejścia sekcji */
.rev{opacity:0;transform:translateY(26px);
  transition:opacity 900ms var(--e-out),transform 900ms var(--e-out)}
.in .rev{opacity:1;transform:none}
.in .rev:nth-child(2){transition-delay:80ms}
.in .rev:nth-child(3){transition-delay:160ms}
.in .rev:nth-child(4){transition-delay:240ms}
.in .rev:nth-child(5){transition-delay:320ms}
.in.done .rev,.in.done .rev:nth-child(2),.in.done .rev:nth-child(3),
.in.done .rev:nth-child(4),.in.done .rev:nth-child(5){transition-delay:0s !important}

/* --- 07 realizacje ------------------------------------------------------- */
.prace{display:grid;gap:clamp(60px,7vw,110px)}
.praca{display:grid;grid-template-columns:1fr;gap:26px;text-decoration:none;position:relative}
.praca-shot{position:relative;overflow:hidden;border-radius:var(--r);background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 30px 60px -34px rgba(20,20,22,.34)}
.praca-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  transform:scale(1.02);transition:transform 1200ms var(--e-out)}
.praca:hover .praca-shot img{transform:scale(1.055)}
.praca-meta{display:grid;grid-template-columns:1fr;gap:14px}
.praca-top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.praca-top h3{font-size:clamp(24px,2.6vw,36px)}
.praca-cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2)}
.praca-typ{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:5px 11px;
  color:var(--ink-2);white-space:nowrap}
.praca-typ.zywe{border-color:var(--ink);color:var(--ink)}
.praca-opis{color:var(--ink-2);max-width:56ch;font-size:16.5px}
.tagi{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 12px;color:var(--ink-2)}
.praca-link{font-size:14.5px;display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
.praca-link i{font-style:normal;transition:transform var(--t-ui) var(--e-out)}
.praca:hover .praca-link i{transform:translate(4px,-4px)}
@media (min-width:900px){
  .praca{grid-template-columns:1.32fr .98fr;gap:clamp(36px,4vw,64px);align-items:center}
  /* parzyste wiersze mają zdjęcie po prawej, więc szeroka kolumna też
     musi przejść na prawo. Sam order przeniósłby je w wąską. */
  .praca:nth-child(even){grid-template-columns:.98fr 1.32fr}
  .praca:nth-child(even) .praca-shot{order:2}
}

/* --- 08 moment interaktywny --------------------------------------------- */
.roznica{display:grid;gap:40px}
@media (min-width:960px){.roznica{grid-template-columns:1fr 1fr;gap:60px;align-items:center}}
.mock{container-type:inline-size;position:relative;aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 30px 60px -36px rgba(20,20,22,.3)}
/* Pasek okna też w cqw. Ze sztywnymi pikselami zjadał przy wąskiej makiecie
   proporcjonalnie więcej wysokości niż wnętrze liczone w cqw i treść na
   telefonie nachodziła sama na siebie. */
.mock-bar{height:4.5cqw;background:var(--canvas-2);border-bottom:.15cqw solid var(--line);
  display:flex;align-items:center;gap:.9cqw;padding:0 1.8cqw}
.mock-bar span{width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--line-2)}
.mock-body{position:absolute;inset:4.5cqw 0 0 0}
.layer{position:absolute;inset:0;overflow:hidden}
.layer-przed{opacity:calc(1 - var(--cut,0))}
.layer-po{opacity:var(--cut,0)}

/* Wnętrze makiety mierzy się w cqw, czyli w procentach szerokości samej
   makiety, a nie okna. Dzięki temu obie strony wyglądają tak samo na
   telefonie i na 27 calach, bez ani jednego zapytania medialnego. */
.mock{container-type:inline-size}

/* --- lewa strona porównania: cudza tandeta ------------------------------
   Kolor jest tu ŚWIADOMYM złamaniem monochromu całej witryny. To ma być
   czyjaś zła strona, a nie nasz projekt, więc wolno jej być krzykliwa.
   Na tym polega cały dowód: obok niej nasza połowa wygląda na spokojną. */
.layer-przed{background:#fff;font-family:"Times New Roman",Times,serif;color:#12448F}
.zla-top{height:9cqw;background:linear-gradient(180deg,#3D8AE0,#0F3C84);
  display:flex;align-items:center;justify-content:space-between;padding:0 2.6cqw}
.zla-logo{color:#FFE24A;font-weight:700;font-size:3.5cqw;text-shadow:0 .2cqw 0 #062C63}
.zla-logo b{color:#fff}
.zla-menu{display:flex;gap:1.5cqw}
.zla-menu i{display:block;width:4.4cqw;height:1cqw;background:rgba(255,255,255,.88)}
.zla-baner{height:7.2cqw;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#E01B00 0 3cqw,#FF7A00 3cqw 6cqw)}
.zla-baner span{color:#fff;font-weight:700;font-size:2.9cqw;letter-spacing:.03em;
  text-shadow:0 .2cqw .4cqw rgba(0,0,0,.5)}
.zla-h{margin:2.8cqw 0 0;text-align:center;font-size:3.7cqw;font-weight:700}
.zla-txt{margin:2.4cqw 3.2cqw 0;display:grid;gap:1.1cqw}
.zla-txt i{display:block;height:.9cqw;background:#B4B4B4}
.zla-txt i:nth-child(2){width:93%}
.zla-txt i:nth-child(3){width:97%}
.zla-txt i:nth-child(4){width:86%}
.zla-txt i:nth-child(5){width:64%}
.zla-kafle{margin:2.8cqw 3.2cqw 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.7cqw}
.zla-kafle b{display:block;height:9.5cqw;border:.2cqw solid #92A2B8}
.zla-kafle b:nth-child(1){background:linear-gradient(160deg,#8ED8FF,#1B7FC4)}
.zla-kafle b:nth-child(2){background:linear-gradient(160deg,#FFD97A,#E08A00)}
.zla-kafle b:nth-child(3){background:linear-gradient(160deg,#A6EBAA,#2E9B45)}
.zla-kafle b:nth-child(4){background:linear-gradient(160deg,#E9AEF3,#8A2FA8)}
.zla-btny{margin:2.8cqw 3.2cqw 0;display:flex;gap:1.5cqw;flex-wrap:wrap}
.zla-btny u{font-size:2.2cqw;font-weight:700;color:#fff;text-decoration:none;
  padding:1cqw 2cqw;border-radius:.7cqw;border:.2cqw solid #B45300;
  background:linear-gradient(180deg,#FFB43D,#F07A00)}
.zla-stopka{position:absolute;left:3.2cqw;bottom:1.8cqw;margin:0;
  font-size:2.1cqw;text-decoration:underline}

/* --- prawa strona porównania: nasz projekt ------------------------------
   Zostaje monochromatyczna, dokładnie jak reszta witryny. Jedna myśl,
   jeden przycisk, dużo powietrza. */
.layer-po{background:var(--canvas);display:flex;flex-direction:column}
.po-top{height:8cqw;display:flex;align-items:center;gap:2cqw;padding:0 4cqw;
  border-bottom:.15cqw solid var(--line)}
.po-mark{width:2.8cqw;height:2.8cqw;border-radius:.5cqw;background:var(--ink);flex:none}
.po-nav{display:flex;gap:2.2cqw;margin-left:1.4cqw}
.po-nav i{display:block;width:4.4cqw;height:.8cqw;background:#BFBEB9;border-radius:.4cqw}
.po-pill{margin-left:auto;width:9.5cqw;height:3.6cqw;border-radius:2cqw;background:var(--ink)}
.po-main{flex:1;display:grid;grid-template-columns:1fr .78fr;gap:5cqw;
  align-items:center;align-content:center;padding:5cqw 4cqw}
.po-txt{display:flex;flex-direction:column}
.po-h{height:4.3cqw;width:92%;background:var(--ink);border-radius:.4cqw}
.po-h2{height:4.3cqw;width:57%;background:var(--ink);border-radius:.4cqw;margin-top:1.7cqw}
.po-p{height:1.1cqw;width:78%;background:#C6C5C0;border-radius:.4cqw;margin-top:4.2cqw}
.po-p2{height:1.1cqw;width:55%;background:#C6C5C0;border-radius:.4cqw;margin-top:1.3cqw}
.po-btn{height:5.4cqw;width:47%;background:var(--ink);border-radius:3cqw;margin-top:4.8cqw}
.po-img{height:37cqw;border-radius:.8cqw;
  background:linear-gradient(150deg,#2C2D30 0%,#141517 46%,#0A0A0B 100%)}
/* przechodzące światło */
.sweep{position:absolute;top:0;bottom:0;width:34%;pointer-events:none;
  left:calc(var(--cut,0) * 128% - 24%);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96) 46%,rgba(255,255,255,0));
  opacity:calc(var(--cut,0) > 0 ? 1 : 0);mix-blend-mode:normal}
.hold{display:inline-flex;align-items:center;gap:14px;margin-top:28px;
  border:1px solid var(--ink-3);border-radius:var(--r-pill);padding:0 24px;height:52px;
  position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.hold-fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);
  width:calc(var(--cut,0) * 100%)}
/* Tryb różnicy działa tylko z bielą: na jasnym tle daje czerń, na czarnym
   wypełnieniu daje biel. Dlatego kolor musi być #fff, nie kolor tekstu. */
.hold-txt{position:relative;z-index:1;font-size:15px;font-weight:500;
  color:#fff;mix-blend-mode:difference}
.hold b{position:relative;z-index:1;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:#fff;mix-blend-mode:difference;opacity:.62;
  transition:opacity var(--t-ui) var(--e-out)}
.hold.gotowe b{opacity:0}
.wyniki{margin-top:30px;display:grid;gap:12px}
.wynik{display:flex;gap:14px;align-items:baseline;font-size:16.5px;
  opacity:0;transform:translateY(10px);
  transition:opacity 600ms var(--e-out),transform 600ms var(--e-out)}
.wynik.on{opacity:1;transform:none}
.wynik em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.16em;
  color:var(--ink-2);flex:none;padding-top:4px}

/* --- 09 usługi ----------------------------------------------------------- */
.uslugi{border-top:1px solid var(--line)}
.usl{border-bottom:1px solid var(--line);position:relative}
.usl-btn{display:flex;align-items:center;gap:20px;width:100%;text-align:left;
  padding:clamp(18px,2.4vw,30px) 0;position:relative}
.usl-nr{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-2);flex:none;width:34px}
.usl-nz{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.7vw,34px);
  letter-spacing:-.025em;flex:1;transition:transform var(--t-ui) var(--e-out)}
.usl-btn:hover .usl-nz{transform:translateX(10px)}
.usl-pm{width:16px;height:16px;flex:none;position:relative}
.usl-pm::before,.usl-pm::after{content:"";position:absolute;background:var(--ink);
  transition:transform var(--t-ui) var(--e-out),opacity var(--t-ui) var(--e-out)}
.usl-pm::before{left:0;right:0;top:7.5px;height:1px}
.usl-pm::after{top:0;bottom:0;left:7.5px;width:1px}
.usl.open .usl-pm::after{transform:scaleY(0);opacity:0}
.usl-panel{overflow:hidden;height:0;transition:height var(--t-ui) var(--e-io)}
.usl-panel p{padding:0 0 26px 54px;color:var(--ink-2);max-width:58ch;font-size:16.5px;
  opacity:0;transition:opacity var(--t-ui) var(--e-out)}
.usl.open .usl-panel p{opacity:1;transition-delay:80ms}

/* --- domknięcie: powrót do formularza po sekcji pytań ------------------- */
.domkniecie{border-top:1px solid var(--line);padding-top:clamp(52px,6.5vw,80px)}
.domkniecie h2{font-size:clamp(24px,3vw,38px);max-width:20ch}
.domkniecie .lede{margin-top:18px;color:var(--ink-2);max-width:44ch;font-size:17px}
.domkniecie .btn{margin-top:30px}

/* --- 10b liczby ----------------------------------------------------------
   Belka udziału i kafle. Świadome decyzje, żeby ktoś ich później nie "poprawił":
   · to nie jest wykres kołowy z dwoma kawałkami, tylko jedna belka proporcji
   · dwa odcienie tej samej szarości, nie dwa kolory: różnicę niesie jasność,
     a obie wartości i tak są podpisane wprost, więc znaczenie nie stoi na kolorze
   · 2 px przerwy między odcinkami, zaokrąglone końce, cienka belka
   · żadnego dymka po najechaniu: obie liczby są na stałe na ekranie, więc dymek
     nie odsłaniałby niczego, czego już nie widać, a na telefonie i tak nie działa
   · wielkie liczby BEZ tabular-nums, bo cyfry o równej szerokości rozjeżdżają
     się optycznie przy dużym stopniu pisma
   -------------------------------------------------------------------------- */
.udzial{margin-bottom:clamp(48px,6vw,80px)}
.ud-tytul{font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2.4vw,30px);max-width:24ch;margin:0}
.ud-tor{display:flex;gap:2px;height:clamp(52px,5.4vw,72px);margin-top:clamp(22px,2.6vw,32px);
  clip-path:inset(0 100% 0 0);transition:clip-path 1200ms var(--e-out)}
.in .ud-tor{clip-path:inset(0 0 0 0)}
.ud-a{background:var(--ink);border-radius:4px}
.ud-b{background:var(--line-2);border-radius:4px}
.ud-opisy{display:flex;flex-wrap:wrap;gap:14px clamp(28px,4vw,56px);margin-top:18px}
.ud-op{margin:0;display:flex;align-items:baseline;gap:10px;font-size:16px;color:var(--ink-czyt)}
.ud-op b{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,24px);color:var(--ink)}
.ud-kropka{width:10px;height:10px;border-radius:2px;flex:none;align-self:center}
.ud-kropka.a{background:var(--ink)}
.ud-kropka.b{background:var(--line-2)}
.ud-zrodlo{margin-top:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}

.kafle{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
@media (min-width:640px){.kafle{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.kafle{grid-template-columns:repeat(4,1fr)}}
.kafel{background:var(--canvas);padding:clamp(26px,3vw,38px) clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column}
.kafel-lcz{font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(38px,4.4vw,58px);line-height:1;margin:0}
.kafel-opis{margin-top:16px;color:var(--ink-czyt);font-size:16px;font-weight:500;line-height:1.55}
.kafel-zrodlo{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.lcz-puenta{margin-top:clamp(40px,5vw,64px);font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.1vw,27px);max-width:34ch}

/* --- 10 proces ----------------------------------------------------------- */
.proces{position:relative;display:grid;gap:0}
.proces::before{content:"";position:absolute;left:13.5px;top:12px;bottom:12px;width:2px;
  background:var(--line-2)}
.proces::after{content:"";position:absolute;left:13.5px;top:12px;width:2px;background:var(--ink);
  height:calc(var(--pp,0) * 100%);max-height:calc(100% - 24px);transform-origin:top}
.etap{display:grid;grid-template-columns:30px 1fr;gap:24px;padding:clamp(18px,2.4vw,28px) 0;
  position:relative}
/* Bez tych dwóch reguł siatka układa opis AUTOMATYCZNIE i wrzuca go pod kropkę,
   czyli do kolumny szerokiej na 30 px. Opis robi się wtedy pionowym paskiem.
   Widoczne tylko poniżej 820 px, bo wyżej nadpisuje to zapytanie medialne. */
.etap-head{grid-column:2}
.etap-txt{grid-column:2}
.etap-dot{width:9px;height:9px;border-radius:50%;background:var(--canvas);
  border:1px solid var(--line-2);margin:9px 0 0 10px;position:relative;z-index:1;
  transition:background var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out),
    transform var(--t-ui) var(--e-out)}
.etap.on .etap-dot{background:var(--ink);border-color:var(--ink);transform:scale(1.25)}
.etap-nr{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-2)}
.etap h3{font-size:clamp(19px,2.2vw,27px);font-weight:600;margin-top:8px}
.etap p{margin-top:10px;color:var(--ink-czyt);max-width:52ch;
  font-size:clamp(17px,1.25vw,18.5px);font-weight:500;line-height:1.62}
@media (min-width:820px){.etap{grid-template-columns:30px 200px 1fr;align-items:baseline}
  .etap .etap-txt{grid-column:3}
  .etap-head{grid-column:2}}

/* --- 11 termin ----------------------------------------------------------- */
.termin{display:grid;gap:34px}
@media (min-width:860px){.termin{grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}}
.tkol{padding:clamp(26px,3vw,40px);border-radius:var(--r-lg);border:1px solid var(--line)}
.tkol.nasz{background:var(--ink);color:var(--light);border-color:var(--ink)}
.tkol .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2)}
.tkol.nasz .lbl{color:rgba(248,248,246,.62)}
.tnum{font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:.92;
  font-size:clamp(56px,9vw,124px);margin:18px 0 6px}
.tunit{font-size:17px;color:var(--ink-2)}
.tkol.nasz .tunit{color:rgba(248,248,246,.7)}
.tkol p{margin-top:20px;color:var(--ink-2);font-size:16.5px;max-width:40ch}
.tkol.nasz p{color:rgba(248,248,246,.78)}
.tstopka{margin-top:34px;font-size:16.5px;color:var(--ink-2);max-width:60ch}

/* --- 12 pasek ------------------------------------------------------------ */
.pasek{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;background:rgba(255,255,255,.4)}
.tor{display:flex;width:max-content;gap:0;animation:tor 46s linear infinite}
.tor.rev{animation-direction:reverse}
.tor span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);padding:0 26px;display:inline-flex;align-items:center;gap:26px;white-space:nowrap}
.tor span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2)}
@keyframes tor{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- 13 pakiety ---------------------------------------------------------- */
.pakiety{display:grid;gap:20px}
@media (min-width:900px){.pakiety{grid-template-columns:repeat(3,1fr)}}
.pak{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,2.6vw,36px);
  background:rgba(255,255,255,.62);display:flex;flex-direction:column;
  transition:transform var(--t-ui) var(--e-out),box-shadow var(--t-ui) var(--e-out)}
.pak:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(20,20,22,.3)}
.pak.top{background:var(--ink);color:var(--light);border-color:var(--ink)}
.pak-nz{font-family:var(--mono);font-size:11px;letter-spacing:.22em}
.pak-cena{font-family:var(--display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(38px,4.4vw,58px);margin:20px 0 2px;line-height:1}
.pak-cena small{font-size:.4em;font-weight:600;letter-spacing:-.01em;margin-left:6px}
.pak-koncowa{font-size:13.5px;color:var(--ink-2)}
.pak.top .pak-koncowa{color:rgba(248,248,246,.66)}
.pak ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px;flex:1}
.pak li{font-size:15.5px;color:var(--ink-2);display:flex;gap:11px;align-items:flex-start}
.pak.top li{color:rgba(248,248,246,.86)}
.pak li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-2);
  margin-top:9px;flex:none}
.pak.top li::before{background:rgba(248,248,246,.42)}
.pak .btn{margin-top:30px}
.pak.top .btn-ghost{border-color:rgba(248,248,246,.42);color:var(--light)}
.pak.top .btn-ghost:hover{border-color:var(--light);background:rgba(255,255,255,.1)}
.pak-uwaga{margin-top:26px;color:var(--ink-2);font-size:15.5px;max-width:70ch}
.opieka{display:grid;gap:20px;margin-top:clamp(40px,5vw,66px)}
@media (min-width:820px){.opieka{grid-template-columns:repeat(2,1fr)}}
.op{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.4vw,32px);
  background:rgba(255,255,255,.5)}
.op-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.op-nz{font-family:var(--mono);font-size:11px;letter-spacing:.22em}
.op-cena{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.03em}
.op-cena small{font-size:.5em;font-weight:500;color:var(--ink-2)}
.op ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.op li{font-size:15px;color:var(--ink-2);display:flex;gap:10px}
.op li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2);
  margin-top:9px;flex:none}

/* --- 14 opinie ----------------------------------------------------------- */
.opinie{display:grid;gap:30px}
.opinia{border-left:2px solid var(--ink);padding-left:28px}
.opinia q{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,30px);
  letter-spacing:-.025em;line-height:1.28;quotes:"„" "”"}
.opinia footer{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2)}

/* --- 15 pytania ---------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q-btn{display:flex;align-items:center;gap:20px;width:100%;text-align:left;
  padding:clamp(18px,2.2vw,26px) 0}
.q-txt{flex:1;font-family:var(--display);font-weight:600;font-size:clamp(17px,1.9vw,22px);
  letter-spacing:-.018em}
.q-pm{width:15px;height:15px;flex:none;position:relative}
.q-pm::before,.q-pm::after{content:"";position:absolute;background:var(--ink);
  transition:transform var(--t-ui) var(--e-out),opacity var(--t-ui) var(--e-out)}
.q-pm::before{left:0;right:0;top:7px;height:1px}
.q-pm::after{top:0;bottom:0;left:7px;width:1px}
.q.open .q-pm::after{transform:scaleY(0);opacity:0}
.q-panel{overflow:hidden;height:0;transition:height var(--t-ui) var(--e-io)}
.q-panel p{padding:0 40px 26px 0;color:var(--ink-2);max-width:66ch;font-size:16.5px;
  opacity:0;transition:opacity var(--t-ui) var(--e-out)}
.q.open .q-panel p{opacity:1;transition-delay:80ms}

/* --- 16 kontakt ---------------------------------------------------------- */
.cta{padding:clamp(90px,12vw,180px) 0 clamp(70px,8vw,120px)}
.cta h2{font-size:clamp(38px,7.6vw,124px);letter-spacing:-.048em;line-height:.98;max-width:13ch}
.cta .lede{margin-top:30px;font-size:18px;color:var(--ink-2);max-width:46ch}
.form{margin-top:clamp(44px,5vw,72px);display:grid;gap:18px;max-width:760px}
@media (min-width:760px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.pole{display:grid;gap:8px}
.pole label{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2)}
.pole label em{font-style:normal;text-transform:none;letter-spacing:.02em}
.pole input,.pole select,.pole textarea{font:inherit;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.72);border:1px solid var(--line-2);border-radius:var(--r);
  padding:14px 16px;width:100%;
  transition:border-color var(--t-ui) var(--e-out),background var(--t-ui) var(--e-out)}
.pole textarea{min-height:118px;resize:vertical}
.pole input:hover,.pole select:hover,.pole textarea:hover{border-color:var(--ink-3)}
.pole input:focus,.pole select:focus,.pole textarea:focus{border-color:var(--ink);
  background:#fff;outline:2px solid var(--focus);outline-offset:2px}
.form-stopka{grid-column:1/-1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.form-info{font-size:14px;color:var(--ink-2);max-width:40ch}
.form-stan{grid-column:1/-1;font-size:16px;padding:16px 18px;border-radius:var(--r);display:none}
.form-stan.ok{display:block;background:var(--ink);color:var(--light)}
.form-stan.err{display:block;background:#fff;border:1px solid var(--ink-3);color:var(--ink)}
.form-stan b{display:block;font-family:var(--display);font-size:19px;margin-bottom:5px}

/* --- 17 stopka ----------------------------------------------------------- */
.stopka{border-top:1px solid var(--line);padding:clamp(50px,6vw,80px) 0 40px}
.st-top{display:grid;gap:36px}
@media (min-width:860px){.st-top{grid-template-columns:1.4fr 1fr 1fr}}
.st-brand svg{height:30px;color:var(--ink)}
.st-brand p{margin-top:18px;color:var(--ink-2);font-size:15.5px;max-width:34ch}
.st-kol h3{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.st-kol a,.st-kol span{display:block;font-size:15.5px;color:var(--ink);text-decoration:none;
  margin-bottom:9px}
.st-kol a{transition:opacity var(--t-micro) var(--e-out)}
.st-kol a:hover{opacity:.6}
.zywy{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.puls{width:7px;height:7px;border-radius:50%;background:var(--ink);position:relative;flex:none}
.puls::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--ink);
  animation:puls 3.4s var(--e-out) -1.1s infinite}
@keyframes puls{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.st-dol{margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-2)}

/* --- 18 kursor ----------------------------------------------------------- */
.kursor{position:fixed;top:0;left:0;z-index:120;pointer-events:none;mix-blend-mode:difference;
  will-change:transform;opacity:0;transition:opacity 300ms var(--e-out)}
.kursor.on{opacity:1}
.kursor-dot{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%) scale(var(--ks,1));
  transition:transform 420ms var(--e-out)}
.kursor-ring{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:50%;border:1px solid rgba(255,255,255,.9);
  transform:translate(-50%,-50%) scale(var(--kr,0));
  transition:transform 520ms var(--e-out)}
.kursor-txt{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;opacity:var(--kt,0);transition:opacity 300ms var(--e-out);white-space:nowrap}
@media (pointer:coarse),(hover:none){.kursor{display:none !important}}

/* --- 19 kurtyna ---------------------------------------------------------- */
.kurtyna{position:fixed;inset:0;z-index:150;pointer-events:none;display:flex}
.kurtyna div{flex:1;background:var(--canvas);transition:transform 900ms var(--e-out)}
.kurtyna div:first-child{transform-origin:left}
.kurtyna div:last-child{transform-origin:right}
.kurtyna.off div:first-child{transform:translateX(-101%)}
.kurtyna.off div:last-child{transform:translateX(101%)}
.kurtyna.gone{display:none}
.kurtyna-mark{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:151;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  transition:opacity 400ms var(--e-out)}
.kurtyna-mark svg{height:44px;color:var(--ink)}
.kurtyna-mark b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.24em;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
.kurtyna.off .kurtyna-mark,.kurtyna.off ~ .kurtyna-mark{opacity:0}

/* --- 20 ograniczony ruch ------------------------------------------------- */
@media (max-height:600px){.cue,.ring{display:none}}

/* hero statyczny: kadr końcowy plus blok spoczynku, zaprojektowany układ,
   a nie przeprosiny za brak wideo */
body:not(.scrub) .stage .cue,
body:not(.scrub) .stage .ring{display:none}
/* Hero statyczny to WŁASNY układ, nie zmniejszony desktop: kadr na górze,
   blok tekstu pod nim na czystym tle. Kontrast jest wtedy pewny, a nie
   wywalczony welonem na przyciętym zdjęciu. */
body:not(.scrub) .stage{display:block;min-height:0;padding:0;background:none;overflow:visible}
body:not(.scrub) .poster{position:relative;inset:auto;width:100%;
  height:clamp(280px,52vh,460px);margin-top:74px;
  background-position:70% 50%;border-bottom:1px solid var(--line)}
body:not(.scrub) .veil{display:none}
body:not(.scrub) .bands{padding:clamp(34px,7vw,60px) 0 clamp(44px,9vw,80px)}
/* Wejścia liter prowadzi --k, którego w trybie statycznym nikt nie ustawia.
   Bez tego nagłówek zostaje niewidoczny. Wszystko ląduje w stanie końcowym. */
body:not(.scrub) .band{--k:1;--ks:1;--kb:1;--tone:1}
body:not(.scrub) .band h1,body:not(.scrub) .band h2{font-size:clamp(30px,5.6vw,54px)}
body:not(.scrub) .band.settle{margin-top:clamp(30px,4.4vw,48px);
  padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
body:not(.scrub) .band.settle h2{font-size:clamp(21px,3.2vw,30px)}
body:not(.scrub) .band .kick{margin-bottom:20px}
body:not(.scrub) .band .ctarow{margin-top:30px}
@media (max-width:720px){
  body:not(.scrub) .band h1,body:not(.scrub) .band h2{font-size:clamp(29px,7.6vw,42px)}
  body:not(.scrub) .band.settle h2{font-size:clamp(20px,4.8vw,26px)}
  body:not(.scrub) .band .ctarow{flex-direction:column;align-items:stretch}
  body:not(.scrub) .band .ctarow .btn{width:100%}
}
/* nawigacja na wąskim ekranie: podtytuł i pełna nazwa przycisku nie mieszczą się */
/* Etykieta jest monospace z dużym światłem, więc na wąskim ekranie nie mieści
   się w jednej linii i chowa się pod przycięciem. Schodzi o stopień i wolno jej
   się złamać. Widoczne dopiero odkąd pasmo wejściowe pokazuje się statycznie. */
@media (max-width:560px){
  .band .kick{white-space:normal;font-size:10px;letter-spacing:.16em;gap:10px}
  .kick::before{width:20px}
}
@media (max-width:560px){
  .nav-in{gap:14px;height:66px}
  .brand-txt span{display:none}
  .brand-txt b{font-size:9.5px}
  .nav .btn{height:38px;padding:0 15px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;
    transition-delay:0s !important;animation-delay:0s !important}
  .rev{opacity:1 !important;transform:none !important}
  .rule{transform:scaleX(1) !important}
  .kurtyna{display:none !important}
  .kursor{display:none !important}
  .cue{display:none}
}