/* 937.design — Home EN v2
   Przezroczysty Liquid Glass, mocna typografia, każda sekcja wchodzi inaczej. */

/* ---------- fonty, lokalnie, latin-ext (zmienne: jeden plik = wszystkie grubosci) ---------- */
@font-face {
  font-family:'Unbounded'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('../fonts/unbounded-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Unbounded'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('../fonts/unbounded-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blackout:#0A0910;
  --green:#C6FF3D;
  --magenta:#FF2E88;
  --ultra:#2B2BF0;
  --amber:#FFA51F;
  --cyan:#19DFE6;
  --paper:#F6F4EE;

  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --wrap:1440px;
  --pad:40px;

  --edge-dark:rgba(246,244,238,.26);
  --edge-light:rgba(10,9,16,.20);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body {
  margin:0; background:var(--blackout); color:var(--paper);
  font-family:'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,blockquote { margin:0; }
.filters { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip { position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--paper); color:var(--blackout); padding:12px 20px; font-weight:600; }
.skip:focus { left:0; }
:focus-visible { outline:3px solid var(--green); outline-offset:4px; }

/* ---------- 00 blackout ---------- */
#blackout { position:fixed; inset:0; z-index:60; background:var(--blackout);
  pointer-events:none; display:none; align-items:center; justify-content:center; }
#blackout.play { display:flex; animation:lightsUp 1500ms cubic-bezier(.4,0,.2,1) forwards; }
#blackout.play .filament { animation:filament 1500ms ease-out forwards; }
#blackout.off { display:none; }
.filament { width:220px; height:220px; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(255,214,120,.9), rgba(255,165,31,0) 70%); }
@keyframes lightsUp { 0%,18% { opacity:1 } 100% { opacity:0 } }
@keyframes filament { 0% { opacity:0; transform:scale(.6) } 40% { opacity:.9; transform:scale(1.02) } 100% { opacity:0; transform:scale(1.6) } }

/* ---------- swiatlo sceniczne ---------- */
.gel { position:fixed; inset:0; z-index:0; background:var(--blackout);
  transition:background-color 700ms var(--ease); }
.wash { position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.20), rgba(0,0,0,0) 60%);
  transition:background 400ms var(--ease); }
/* delikatne ziarno — zdejmuje cyfrowa gladkosc ze szkla */
.grain { position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Stage pozostaje stabilny. Ruch dzieje się wewnątrz sekcji, nie na całej stronie. */
#stage { position:relative; z-index:3; }

/* ---------- Liquid Glass ----------
   Zero mlecznego wypełnienia, zero blur i zero zewnętrznego cienia.
   Kolorowa krawędź jest maską 1 px, więc nigdy nie tworzy prostokątnego bufora. */
.glass {
  --gx:50%; --gy:0%;
  /* Tlo zamiast backdrop-filter. Chrome liczy filtr tla przez odczyt
     zawartosci spod kazdej tafli — przy 19 taflach na ekranie 2x zatyka sie,
     podczas gdy Safari robi to sprzetowo i nie mruga. Zwykla polprzezroczysta
     plama jest darmowa w obu i zgodna z briefem, ktory zabrania matowego szkla. */
  background:rgba(10,9,16,.20);
  position:relative; isolation:isolate; overflow:clip;
  border:1px solid var(--edge-dark);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.26),
    inset -1px -1px 0 rgba(255,46,136,.16);
  border-radius:28px;
}
.glass::before,
.nav::before,
.btn-liquid::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(90% 150% at var(--gx,50%) var(--gy,0%),
    rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 24%, transparent 58%);
  mix-blend-mode:screen;
}
.glass::after,
.nav::after,
.btn-liquid::after {
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  padding:1px; border-radius:inherit;
  background:conic-gradient(from 215deg,
    rgba(25,223,230,.95), rgba(255,255,255,.14) 18%,
    rgba(255,46,136,.82) 37%, rgba(255,255,255,.08) 56%,
    rgba(198,255,61,.86) 76%, rgba(25,223,230,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.72;
}
/* USUNIETE 16.08.2026 — zaginanie tla filtrem SVG w backdrop-filter.
   Filtr #liquid-glass mial w srodku feTurbulence, czyli generator szumu
   fraktalnego, plus rozmycie i mape znieksztalcen. Jako filtr TLA liczyl sie
   od zera przy kazdej klatce, na calej powierzchni pod tafla. Najgorszy
   przypadek to .nav — element fixed, widoczny zawsze, wiec praca szla przez
   cale przewijanie strony. Efekt: scroll na desktopie praktycznie stawal.
   Mobile bylo sprawne, bo media query i tak to nadpisywalo.
   Nie przywracaj SVG w backdrop-filter. Refrakcje, jesli ma wrocic, trzeba
   zrobic statycznie — gradientem na ::after, nie filtrem liczonym per klatka. */

[data-fg="dark"] .glass {
  background:rgba(255,255,255,.14);
  border-color:var(--edge-light);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.30),
    inset -1px -1px 0 rgba(43,43,240,.20);
}

/* ---------- nawigacja: plywajaca pigulka ---------- */
.nav {
  --gx:50%; --gy:0%;
  position:fixed; top:18px; left:50%; z-index:50;
  display:flex; align-items:center; gap:30px;
  padding:11px 13px 11px 22px; border-radius:999px;
  background:rgba(10,9,16,.62);
  border:1px solid rgba(246,244,238,.18);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),
    inset -1px -1px 0 rgba(255,46,136,.16);
  max-width:calc(100vw - 32px); color:var(--paper);
  transform:translateX(-50%);
  transition:transform 420ms var(--out), opacity 300ms linear;
}
.nav.hide { transform:translateX(-50%) translateY(-140%); opacity:0; }
.nav-name { font-family:'Unbounded',sans-serif; font-weight:800; font-size:15px;
  letter-spacing:-.01em; text-transform:uppercase; white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:24px; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:rgba(246,244,238,.82); white-space:nowrap; }
.nav-links a { padding:4px 0; transition:color 180ms var(--ease); }
.nav-links a:hover { color:var(--green); }
.lang { display:flex; align-items:center; gap:6px; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  background:transparent; border-radius:999px; padding:7px 12px;
  border:1px solid rgba(246,244,238,.2); }
.lang span[aria-current] { font-weight:700; }
.lang .sep { opacity:.4; }
/* Nieaktywna wersja jest linkiem, nie wygaszonym napisem — obie wersje istnieja. */
.lang a { opacity:.62; text-decoration:none; color:inherit; transition:opacity 160ms linear; }
.lang a:hover,.lang a:focus-visible { opacity:1; }
.nav-toggle { display:none; width:36px; height:32px; padding:0; border:1px solid rgba(246,244,238,.2);
  border-radius:999px; background:transparent; color:inherit; place-content:center; gap:5px; }
.nav-toggle i { display:block; width:14px; height:1px; background:currentColor;
  transition:transform 220ms var(--ease); }
.nav.open .nav-toggle i:first-of-type { transform:translateY(3px) rotate(45deg); }
.nav.open .nav-toggle i:last-of-type { transform:translateY(-3px) rotate(-45deg); }

/* ---------- sekcje ---------- */
section { min-height:100vh; padding:120px var(--pad); display:flex; align-items:center;
  position:relative; overflow:hidden; }
.wrap { max-width:var(--wrap); margin:0 auto; width:100%; position:relative; z-index:2; }
.split { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:72px; align-items:center; }
.col { display:flex; flex-direction:column; gap:28px; }
[data-fg="dark"] { color:var(--blackout); }
[data-fg="light"] { color:var(--paper); }

/* pelnoekranowe zdjecia */
.bleed { position:absolute; inset:-6% 0; z-index:0; will-change:transform; }
.bleed img { width:100%; height:100%; object-fit:cover; }
.s-hero .bleed { inset:0; }
.hero-photo { object-position:69% 0%; }
.bleed-veil { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-veil { background:linear-gradient(180deg, rgba(10,9,16,.55) 0%, rgba(10,9,16,.10) 38%, rgba(10,9,16,.82) 100%); }
.callback-veil { background:linear-gradient(90deg, rgba(10,9,16,.74) 0%, rgba(10,9,16,.12) 70%); }
.callback-photo { object-position:50% 50%; }
.curtain-veil { background:linear-gradient(180deg, rgba(10,9,16,.86) 0%, rgba(10,9,16,.42) 50%, rgba(10,9,16,.95) 100%); }
.bleed-tint { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(43,43,240,.34); mix-blend-mode:screen; }
.kenburns img { animation:kb 22s ease-in-out infinite alternate; }
@keyframes kb { from { transform:scale(1) } to { transform:scale(1.09) } }

/* ---------- typografia ---------- */
.eyebrow { font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:600; }
.accent-green { color:var(--green); }
.accent-amber { color:var(--amber); }
.h-big { font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(38px,5.8vw,116px); line-height:.9; text-transform:uppercase; letter-spacing:-.045em; }
.h-mid { font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(28px,4vw,68px); line-height:1.02; text-transform:uppercase; letter-spacing:-.04em; text-wrap:balance; }
.word { font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(58px,10.4vw,168px); line-height:.84; text-transform:uppercase; letter-spacing:-.045em; }
.body { font-size:17px; line-height:1.6; max-width:560px; text-wrap:pretty; }
.light-body { color:rgba(246,244,238,.9); }
.narrow { max-width:400px; }
.lead { font-size:clamp(18px,1.7vw,24px); line-height:1.34; max-width:600px;
  text-wrap:pretty; color:rgba(246,244,238,.92); margin-top:24px; }

/* ---------- przyciski ---------- */
.btn { display:inline-flex; align-items:center; gap:11px; padding:18px 29px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  border-radius:999px; transition:background-color 200ms var(--ease), color 200ms var(--ease); }
.btn-lime { background:var(--green); color:var(--blackout); }
.btn-lime:hover { background:var(--magenta); }
.btn-liquid { --gx:50%; --gy:0%; background:transparent;
  border:1px solid rgba(246,244,238,.26); font-weight:600; position:relative; isolation:isolate; overflow:clip; }
.btn-liquid:hover { background:transparent; color:var(--green); border-color:rgba(198,255,61,.64); }
.btn-ink { background:var(--blackout); color:var(--amber); align-self:flex-start; }
.btn-ink:hover { background:var(--ultra); color:var(--paper); }
.btn-outline { background:transparent; color:var(--blackout); border:1px solid rgba(10,9,16,.42); }
.btn-outline:hover { border-color:var(--ultra); color:var(--ultra); }

/* ---------- 01 hero ---------- */
.s-hero { align-items:flex-end; padding:120px var(--pad) 60px; }
.hero-wrap { display:flex; flex-direction:column; gap:26px; }
.hero-glass { align-self:flex-start; max-width:840px; padding:40px 44px; border-radius:32px; }
.btns { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.btn-note { font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(246,244,238,.92); margin-left:8px; text-shadow:0 1px 12px rgba(10,9,16,.9); }

/* ---------- 02 pierwsza scena ---------- */
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; max-width:780px; }
.stat-tile { padding:22px; border-radius:22px; }
.num { display:block; font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(34px,3.4vw,52px); line-height:.9; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.num-plus::after { content:"+"; font-size:.58em; vertical-align:top; margin-left:.06em; }
.cap { display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  margin-top:10px; font-weight:600; }
.framed { position:relative; height:74vh; min-height:440px; min-width:0;
  border-radius:28px; overflow:hidden; box-shadow:0 30px 80px rgba(10,9,16,.28); will-change:transform; }
.framed img { width:100%; height:100%; object-fit:cover; }
.s-first .framed img { object-position:50% 5%; }

/* ---------- 03 eskalacja ---------- */
.rows { display:flex; flex-direction:column; gap:10px; margin-top:34px; }
.row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:28px;
  align-items:baseline; padding:26px 30px; border-radius:24px;
  transition:background-color 220ms var(--ease), color 220ms var(--ease); }
.row:hover { background:transparent; border-color:rgba(10,9,16,.5); }
.row-n { font-size:11px; letter-spacing:.18em; font-weight:600; }
/* Unbounded, tak jak reszta naglowkow. Stylizowane "L" w PONIEDZIALKI to
   charakterystyczny glif tego kroju, nie brak polskich znakow — plik
   latin-ext jest sprawny. Nie przelaczaj tego z powrotem na Space Grotesk. */
.row-main h3 { font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(21px,2.9vw,49px); line-height:1.02; text-transform:uppercase; letter-spacing:-.03em;
  overflow-wrap:break-word; }
.row-main p { font-size:16px; margin-top:12px; max-width:640px; line-height:1.5; }
.row-tag { font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  text-align:right; white-space:nowrap; font-weight:600; }

/* ---------- 04 rodowod ---------- */
.lineage-head { display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:24px; margin-bottom:36px; }
.panel { padding:30px 34px 22px; border-radius:32px; }
.names { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 44px; }
.names li { font-family:'Unbounded',sans-serif; font-weight:700;
  font-size:clamp(15px,1.5vw,24px); line-height:1.24; letter-spacing:-.03em;
  border-bottom:1px solid rgba(246,244,238,.22); padding:13px 0; }
/* ostatni wiersz bez kreski — inaczej linia dobija do zaokraglonego rogu.
   24 nazwiska dziela sie bez reszty przez 4, 3 i 2, wiec to zawsze pelny wiersz. */
.names li:nth-last-child(-n+3) { border-bottom:none; }

/* ---------- 05 sceny: przewijanie w bok ---------- */
.s-stages { min-height:auto; padding:0; display:block; overflow:visible; }
.s-stages .pin { position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  justify-content:center; gap:26px; padding:110px var(--pad) 60px; }
.stages-head { display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:20px; }
.stages-head .eyebrow { margin-bottom:16px; }
.rail-hint { font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(246,244,238,.6); animation:hint 2600ms ease-in-out infinite; }
@keyframes hint { 0%,100% { opacity:.4 } 50% { opacity:.9 } }
.rail-frame { position:relative; max-width:var(--wrap); margin:0 auto; width:100%;
  border-radius:30px; overflow:hidden; height:58vh; min-height:360px; background:#141220; }
.rail { display:flex; height:100%; will-change:transform; }
.slide { flex:0 0 100%; position:relative; height:100%; }
.slide img { width:100%; height:100%; object-fit:cover; }
.slide img.stage-focus-jo { object-position:50% 4%; }
.slide img.stage-focus-riot { object-position:50% 0%; }
.slide img.stage-focus-torun { object-position:50% 10%; }
.slide-scrim { position:absolute; inset:auto 0 0 0; height:58%; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,16,0) 0%, rgba(10,9,16,.86) 100%); }
.slide-cap { position:absolute; left:clamp(20px,3vw,44px); right:clamp(20px,3vw,44px);
  bottom:clamp(18px,2.6vw,36px); display:flex; flex-direction:column; gap:8px; }
.slide-cap h3 { font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(20px,2.4vw,40px); text-transform:uppercase; letter-spacing:-.035em; }
.slide-cap p { font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green); font-weight:600; }
.dots { position:absolute; top:24px; right:24px; display:flex; gap:8px; align-items:center;
  padding:10px 14px; border-radius:999px; }
.dots i { width:9px; height:9px; border-radius:999px; background:rgba(246,244,238,.36);
  transition:width 240ms var(--ease), background-color 240ms var(--ease); }
.dots i.on { width:22px; background:var(--green); }

/* telefon i reduced motion: zamiast pinowania zwykly przesuw palcem z zatrzaskiem */
.s-stages.swipe { height:auto !important; }
.s-stages.swipe .rail-frame { overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.s-stages.swipe .rail-frame::-webkit-scrollbar { display:none; }
.s-stages.swipe .slide { flex:0 0 90%; scroll-snap-align:center; }
.s-stages.swipe .rail-hint { display:none; }
.s-stages.swipe .pin { position:relative; top:auto; height:auto !important; padding-bottom:80px; }

/* ---------- 06 callback ---------- */
.callback-glass { max-width:820px; margin-right:auto; padding:42px 46px; border-radius:34px;
  display:flex; flex-direction:column; gap:24px; }

/* ---------- 07 warsztaty ---------- */
.s-workshops .wrap { display:flex; flex-direction:column; gap:42px; }
.ws-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px; }
.ws-head .eyebrow { margin-bottom:16px; }
.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.card { display:flex; flex-direction:column; justify-content:space-between; gap:34px;
  padding:28px; min-height:340px; border-radius:26px;
  transition:background-color 200ms var(--ease), color 200ms var(--ease); }
.card:hover { background:transparent; border-color:rgba(43,43,240,.62); }
.card-kicker { font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
.card-title { display:block; font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(20px,1.9vw,29px); line-height:1; text-transform:uppercase;
  letter-spacing:-.04em; margin-bottom:14px; }
.card-desc { display:block; font-size:15px; line-height:1.5; opacity:.86; }
.card-foot { font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border-top:1px solid currentColor; padding-top:12px; font-weight:600; }
.card-soon { background:transparent;  border:2px dashed rgba(10,9,16,.4); box-shadow:none; opacity:.62; }
.card-soon:hover { background:transparent; color:var(--blackout); }
.ws-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- 08 galeria: pionowa talia rozkladana scrollem ---------- */
.s-gallery { display:block; min-height:auto; overflow:hidden; }
.fan-sticky { width:100%; }
.gal-head { display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px; }
.gal-head > div:first-child { display:flex; flex-direction:column; gap:18px; }
.gal-copy { display:flex; flex-direction:column; gap:18px; }
.fan-hint { font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(246,244,238,.62); font-weight:600; }
.fan-hint-swipe { display:none; }
.s-gallery:not(.fan-on) .fan-hint-scroll { display:none; }
.s-gallery:not(.fan-on) .fan-hint-swipe { display:inline; }
.fan-track { display:flex; gap:14px; width:100%; overflow-x:auto; padding:48px 0 24px;
  scroll-padding-inline:var(--pad); scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; touch-action:pan-x pinch-zoom; }
.fan-track::-webkit-scrollbar { display:none; }
.fan-slot { flex:0 0 min(78vw,330px); scroll-snap-align:center;
  scroll-snap-stop:always; }
.fan-card { width:100%; aspect-ratio:2 / 3; }
.fan-card-link { display:block; position:relative; width:100%; height:100%;
  overflow:hidden; border-radius:30px; background:#141220;
  border:1px solid rgba(246,244,238,.24);
  box-shadow:inset 1px 0 rgba(25,223,230,.68), inset -1px 0 rgba(255,46,136,.68);
  transition:border-color 220ms linear, box-shadow 300ms var(--out),
    filter 260ms linear, opacity 260ms linear;
  transform-origin:center bottom; backface-visibility:hidden; }
.fan-card img { width:100%; height:100%; object-fit:cover; pointer-events:none;
  -webkit-user-drag:none; user-select:none;
  transition:transform 420ms var(--out), filter 260ms linear; }
@media (hover:hover) and (pointer:fine) {
  .fan-slot:hover,.fan-slot:focus-within,.fan-slot.fan-focus { z-index:1000 !important; }
  .fan-slot:hover .fan-card-link,.fan-slot:focus-within .fan-card-link,
  .fan-slot.fan-focus .fan-card-link {
    border-color:var(--green);
    filter:brightness(1.14) saturate(1.12);
    box-shadow:0 24px 72px rgba(0,0,0,.48), 0 0 34px rgba(198,255,61,.22),
      inset 1px 0 rgba(25,223,230,.9), inset -1px 0 rgba(255,46,136,.9); }
  .fan-slot:hover .fan-card img,.fan-slot:focus-within .fan-card img,
  .fan-slot.fan-focus .fan-card img {
    transform:scale(1.045); }
  /* Karty nachodza na siebie, wiec przezroczystosc robi z wachlarza papke:
     przez kazde zdjecie widac dwa nastepne. Przygaszamy wylacznie swiatlem,
     zdjecia zostaja w pelni kryjace i normalnie sie zaslaniaja. */
  .fan-on .fan-track:has(.fan-slot:hover,.fan-slot:focus-within,.fan-slot.fan-focus)
    .fan-slot:not(:hover):not(:focus-within):not(.fan-focus) .fan-card-link {
    filter:brightness(.44) saturate(.6); }
}

/* Desktop: natywny sticky trzyma kadr, JS porusza tylko poszczegolne karty. */
/* 240vh, nie 520. Przy 520 galeria zabierala 5,2 ekranu przewijania w miejscu
   i razem ze scenami dawala 54% wysokosci strony jako sekcje przyklejone —
   uzytkownik krecil kolkiem, a strona nie jechala w dol. Nie podnos. */
.s-gallery.fan-on { height:240vh; min-height:1700px; padding:0;
  overflow:visible; }
.fan-on .fan-sticky { position:sticky; top:0; height:100vh; height:100svh;
  overflow:clip; perspective:1500px; isolation:isolate; z-index:5;
  pointer-events:none; }
.fan-on .gal-head,.fan-on .fan-card-link { pointer-events:auto; }
.fan-on .gal-head { padding-top:clamp(88px,12svh,132px); position:relative;
  padding-inline:var(--pad); z-index:50; }
.fan-on .fan-track { position:absolute; inset:0; display:block; overflow:visible;
  width:100%; padding:0; transform-style:flat; }
.fan-on .fan-slot { position:absolute; left:50%; bottom:-3svh; width:0; height:0;
  flex:none; scroll-snap-align:none; transform-style:flat;
  transform-origin:center bottom; will-change:transform; }
.fan-on .fan-card { position:absolute; left:0; bottom:0;
  width:clamp(210px,min(20.5vw,44svh),320px); transform:translateX(-50%);
  transition:transform 300ms var(--out); }
@media (hover:hover) and (pointer:fine) {
  .fan-on .fan-slot.fan-focus .fan-card {
    transform:translateX(-50%) translateX(var(--fan-focus-x,0px)); }
}

/* ---------- 09 boczne wyjscia ---------- */
.s-doors { min-height:80vh; }
.s-gallery.fan-on + .s-doors {
  min-height:100vh; margin-top:-100vh; z-index:4; overflow:visible;
  background:var(--cyan); }
.s-gallery.fan-on + .s-doors::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:0; right:0; top:-18vh; height:18vh;
  background:linear-gradient(180deg, rgba(25,223,230,0), var(--cyan)); }
.s-doors .wrap { display:flex; flex-direction:column; gap:34px; }
.doors { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.door { display:flex; flex-direction:column; gap:18px; padding:32px; border-radius:28px;
  transition:background-color 220ms var(--ease), color 220ms var(--ease); }
.door:hover { background:transparent; color:var(--ultra); border-color:rgba(43,43,240,.62); }
.door h2 { font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(28px,3.6vw,68px); line-height:.94; text-transform:uppercase; letter-spacing:-.045em; }
.door p { font-size:17px; line-height:1.55; max-width:480px; }
.door-cta { align-self:flex-start; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.door-cta:hover { text-decoration:underline; text-underline-offset:.24em; }

/* ---------- 10 kurtyna ---------- */
.s-curtain { flex-direction:column; justify-content:center; padding:120px var(--pad) 40px; }
.s-curtain .wrap { display:flex; flex-direction:column; gap:32px; }
.mail { align-self:flex-start; font-size:clamp(19px,2.3vw,38px); color:var(--green);
  padding:16px 28px; border-radius:999px; background:transparent;
  border-color:rgba(198,255,61,.4);
  transition:background-color 200ms var(--ease), color 200ms var(--ease); }
.mail:hover { background:transparent; color:var(--paper); border-color:var(--green); }
/* Socjale przy mailu. Powod jest wyszukiwarkowy, nie ozdobny: to one skladaja
   profile w jedna tozsamosc, razem z sameAs w danych strukturalnych. */
.socials { display:flex; gap:10px; flex-wrap:wrap; list-style:none;
  margin:18px 0 0; padding:0; }
.socials a { display:inline-block; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:inherit;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(246,244,238,.24);
  transition:border-color 180ms linear, color 180ms linear, background-color 180ms linear; }
.socials a:hover,.socials a:focus-visible {
  border-color:var(--green); color:var(--green); background:rgba(198,255,61,.08); }
.curtain-notes { display:flex; gap:32px; flex-wrap:wrap; font-size:15px;
  color:rgba(246,244,238,.72); line-height:1.6; max-width:900px; }
.curtain-notes p { flex:1; min-width:220px; }
.curtain-notes a { color:var(--green); }
.text-link { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
.text-link:hover { text-decoration-thickness:2px; }
.academy-link-title { text-decoration:underline; text-decoration-thickness:.045em;
  text-underline-offset:.12em; text-decoration-color:rgba(10,9,16,.28);
  transition:color 180ms var(--ease), text-decoration-color 180ms var(--ease); }
.academy-link-title:hover { color:var(--ultra); text-decoration-color:currentColor; }
.foot { position:relative; z-index:2; max-width:var(--wrap); margin:64px auto 0; width:100%;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
  border-top:1px solid rgba(246,244,238,.14); padding-top:22px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,244,238,.5); }
.foot-links { display:flex; gap:22px; }
.sig { color:var(--green); }

/* ============ RUCH ============
   Kazda sekcja wchodzi inaczej. Stan poczatkowy i koncowy maja te sama wage
   selektora, zeby zaden nie przykryl drugiego. */
.motion [data-enter] {
  opacity:0;
  transition:opacity 560ms var(--ease), transform 760ms var(--out), filter 560ms var(--ease);
}
.motion [data-enter="up"]    { transform:translateY(38px) rotate(-1.2deg); }
.motion [data-enter="rise"]  { transform:translateY(52px) scale(.97); }
.motion [data-enter="left"]  { transform:translateX(-17vw) rotate(-3.4deg) scale(.95); }
.motion [data-enter="right"] { transform:translateX(17vw)  rotate(3.4deg)  scale(.95); }
.motion [data-enter="deal"]  { transform:translateY(58px) rotate(-7deg) scale(.9); transform-origin:bottom center; }
/* warp bez blur: rozmycie na elemencie, ktory ma juz rozmycie tla,
   kaze Chrome rysowac naroznik jako kwadrat */
.motion [data-enter="warp"]  { transform:scale(1.09) rotate(1.4deg); }
.motion [data-enter="wipe"]  { transform:scale(1.12); clip-path:inset(0 0 100% 0); transition:opacity 500ms var(--ease), transform 900ms var(--out), clip-path 900ms var(--out); }

.motion [data-enter].in {
  opacity:1; transform:none; filter:none; clip-path:inset(0 0 0 0);
}
.motion .fan-on.fan-handoff .gal-head {
  opacity:0; transform:translate3d(0,-28px,0); pointer-events:none;
  transition:opacity 360ms linear, transform 500ms var(--out); }

/* glitch: rozjazd kanalow RGB. Duchy to klony z tym samym lamaniem wierszy,
   wiec siedza dokladnie na tekscie niezaleznie od tresci. */
[data-glitch] { position:relative; }
.ghost { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; }
.ghost.g1 { color:var(--magenta); animation:gl1 620ms steps(2,end) 1 both; }
.ghost.g2 { color:var(--cyan);    animation:gl2 620ms steps(2,end) 1 both; }
@keyframes gl1 {
  0%   { clip-path:inset(12% 0 62% 0); transform:translate3d(-6px,2px,0); opacity:.95 }
  25%  { clip-path:inset(48% 0 26% 0); transform:translate3d(5px,-1px,0) }
  50%  { clip-path:inset(74% 0 8% 0);  transform:translate3d(-3px,3px,0) }
  75%  { clip-path:inset(30% 0 52% 0); transform:translate3d(4px,0,0); opacity:.55 }
  100% { clip-path:inset(0 0 100% 0);  transform:none; opacity:0 }
}
@keyframes gl2 {
  0%   { clip-path:inset(66% 0 12% 0); transform:translate3d(6px,-2px,0); opacity:.95 }
  25%  { clip-path:inset(20% 0 58% 0); transform:translate3d(-5px,1px,0) }
  50%  { clip-path:inset(40% 0 40% 0); transform:translate3d(3px,-3px,0) }
  75%  { clip-path:inset(78% 0 6% 0);  transform:translate3d(-4px,0,0); opacity:.55 }
  100% { clip-path:inset(100% 0 0 0);  transform:none; opacity:0 }
}

/* ---------- responsywnosc ---------- */
@media (max-width:1180px) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .names { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .names li:nth-last-child(-n+3) { border-bottom:1px solid rgba(246,244,238,.22); }
  .names li:nth-last-child(-n+2) { border-bottom:none; }
}
@media (max-width:900px) {
  :root { --pad:20px; }
  section { padding:96px var(--pad); }
  .split, .cards, .doors { grid-template-columns:minmax(0,1fr); gap:36px; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .stat-tile { min-width:0; }
  .fan-track { padding-top:36px; padding-bottom:0; }
  .fan-slot { flex-basis:min(78vw,300px); }
  .fan-card-link { border-radius:26px; }
  .framed { height:56vh; min-height:320px; }
  .s-first .framed img { object-position:50% 0%; }
  .hero-glass { padding:28px 26px; border-radius:26px; }
  .callback-glass { padding:28px 26px; }
  .panel { padding:24px 22px; }
  .row { grid-template-columns:minmax(0,1fr); gap:10px; padding:22px; }
  .row-tag { text-align:left; }
  .hero-photo { object-position:72% 0%; }
  .callback-photo { object-position:74% 50%; }
  .nav { padding:9px 9px 9px 16px; gap:9px; }
  .nav-name { font-size:13px; }
  .lang { padding:6px 9px; }
  .nav-toggle { display:grid; }
  .nav-links { position:absolute; top:calc(100% + 10px); left:0; right:0;
    display:flex; flex-direction:column; gap:0; padding:10px; border-radius:24px;
    background:transparent; border:1px solid rgba(246,244,238,.22);
    opacity:0; pointer-events:none; transform:translateY(-8px) scale(.98);
    transform-origin:top center; transition:opacity 180ms linear,transform 240ms var(--out); }
  .nav.open .nav-links { opacity:1; pointer-events:auto; transform:none; }
  .nav-links a { width:100%; padding:13px 12px; border-bottom:1px solid rgba(246,244,238,.12); }
  .nav-links a:last-child { border-bottom:0; }
  .glass {
 }
  .glass::after,.nav::after,.btn-liquid::after { opacity:.62; }
  .s-stages .pin { padding:96px var(--pad) 40px; }
  .rail-frame { height:46vh; min-height:280px; }
  .slide-scrim { height:66%; }
  /* na telefonie ruch tanszy: krotsza droga, ale skos zostaje */
  .motion [data-enter="left"]  { transform:translateY(30px) rotate(-2deg); }
  .motion [data-enter="right"] { transform:translateY(30px) rotate(2deg); }
  .motion [data-enter="deal"]  { transform:translateY(34px) rotate(-4deg) scale(.95); }
}
@media (max-width:560px) {
  .names { grid-template-columns:minmax(0,1fr); }
  .names li:nth-last-child(-n+2) { border-bottom:1px solid rgba(246,244,238,.22); }
  .names li:last-child { border-bottom:none; }
  .card { min-height:0; gap:26px; }
}

/* ---------- reduced motion: pelny kolor, zero ruchu ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  #blackout { display:none; }
  .rail-hint, .kenburns img { animation:none; }
  .motion [data-enter] { opacity:1 !important; transform:none !important;
    filter:none !important; clip-path:none !important; transition:none !important; }
  .ghost { display:none; }
  .gel { transition:none; }
  .fan-card-link,.fan-card-link:hover,.fan-card-link:focus-visible {
    transition:none; transform:none; }
  .fan-card,.fan-card img { transition:none; }
  .glass,.nav,.btn-liquid { }
}