/* Strona główna TacticLab: style sekcji. Czcionka, podstawa, kontener, przyciski, nawigacja i stopka są w css/rama.css.
   Kolory, czasy i miary tylko z css/02-tokeny.css. Ruch jest pod html.anim (skrypt dodaje klasę, gdy nie ma prefers-reduced-motion);
   bez JS wszystko stoi w stanie końcowym. Ruch tylko przez transform i opacity. */

/* ===== typografia i rytm sekcji: odstępy i skala zamiast pasów tła i kresek ===== */
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(36px,4.6vw,62px);font-weight:800;letter-spacing:-.035em}
h3{font-size:20px;font-weight:600}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--text-2);max-width:56ch;text-wrap:pretty}
section{padding:var(--sekcja) 0;position:relative}
section.oddech{padding:calc(var(--sekcja) * 1.45) 0}
.podpis{margin-top:10px;font-size:13px;color:var(--text-3)}
/* nagłówek jak w wydawnictwie: bardzo duży, ciasny; wariant dłuższy dla nagłówków w kilku zdaniach */
.kino-h2{font-size:clamp(32px,5.2vw,72px);font-weight:800;line-height:1;letter-spacing:-.045em;text-wrap:balance}
.kino-h2.dluzszy{font-size:clamp(30px,3.9vw,56px);line-height:1.04;letter-spacing:-.04em}
/* blok nagłówka sekcji: nagłówek, pod nim jedno zdanie, wszystko od lewej krawędzi siatki */
.sek-gl{margin-bottom:clamp(40px,6vw,88px)}
.sek-gl .kino-h2{max-width:20ch}
.sek-gl .kino-h2.dluzszy{max-width:26ch}
.sek-gl .lead{margin-top:clamp(18px,2vw,28px)}
/* pozycja z obrazem: obraz albo pętla, pod nim podpis, nagłówek i zdanie (bez ramek kart) */
.poz{min-width:0}
.poz h3{margin:clamp(16px,1.8vw,24px) 0 8px;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em}
.poz p:not(.podpis){max-width:52ch;color:var(--text-2);font-size:16px}
.plan-opis{margin-top:12px;font-size:13px;font-weight:600;color:var(--text-3)}

/* ===== ekran 1: nagranie meczu na cały ekran ===== */
.hero{position:relative;display:flex;align-items:flex-end;height:100svh;min-height:600px;padding:0;overflow:hidden;background:var(--bg)}
.kino-wideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg)}
.kino-zaslona{position:absolute;inset:0;background:var(--kino-zaslona);pointer-events:none}
.hero .kino-siatka{position:relative;width:100%;max-width:var(--kino-w);padding:calc(var(--nav-h) + 24px) var(--kino-gutter) calc(var(--kino-os-h) + 36px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.kino-tekst{grid-column:1 / span 9}
.hero h1{font-size:clamp(38px,min(7.2vw,12svh),104px);font-weight:800;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.hero h1 .ac{display:block;margin-top:.5em;color:var(--primary);font-size:.36em;font-weight:700;line-height:1.15;letter-spacing:-.025em}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(18px,3svh,32px)}
.hero .btn-secondary{background:var(--kino-szklo);border-color:var(--kino-krawedz)}
.hero .btn-secondary:hover{background:var(--surface-2);border-color:var(--text)}
.hero .note{margin-top:16px;font-size:13px;color:var(--text)}
.hero .note b{font-weight:600}

/* oś meczu na dole: biegnący czas i znaczniki zdarzeń z kino-tagi.js, jak oś w Tagowaniu */
.kino-os{position:absolute;left:0;right:0;bottom:0;height:var(--kino-os-h);display:flex;align-items:flex-end}
.kino-os-in{position:relative;width:100%;max-width:var(--kino-w);margin:0 auto;padding:0 var(--kino-gutter) 28px}
.kino-os-gora{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;font-size:13px;color:var(--text)}
.kino-zegar{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;min-width:3.2ch}
.kino-tor{--u:0;position:relative;height:30px;border-top:1px solid var(--kino-os-linia);background-image:linear-gradient(90deg,var(--kino-os-tyk) 1px,transparent 1px);background-size:calc(100% / var(--kino-sek,6.7)) 9px;background-repeat:repeat-x}
.kino-bieg{position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--primary);transform-origin:0 50%;transform:scaleX(var(--u))}
.kino-glowica{position:absolute;left:0;top:-14px;width:2px;height:46px;background:var(--text);transform:translate3d(calc(var(--os-px,0px) * var(--u)),0,0)}
.kino-znacznik{position:absolute;left:calc(var(--u) * 100%);top:0;width:0;height:0;opacity:0;--kropka:var(--cat-shot)}
.kino-znacznik[data-kat=pass]{--kropka:var(--cat-pass)}
.kino-znacznik[data-kat=shot]{--kropka:var(--cat-shot)}
.kino-znacznik[data-kat=ours]{--kropka:var(--cat-ours)}
.kino-znacznik[data-kat=defense]{--kropka:var(--cat-defense)}
.kino-znacznik.jest,.kino-stoi .kino-znacznik{opacity:1}
.kz-pion{position:absolute;left:-1px;top:-1px;width:3px;height:26px;border-radius:2px;background:var(--kropka)}
.kz-karta{position:absolute;left:0;bottom:12px;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:var(--r8);background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--cien-2);color:var(--text);font-size:14px;font-weight:600;white-space:nowrap;transform:translate(-50%,10px)}
.kino-znacznik.jest .kz-karta,.kino-stoi .kz-karta{transform:translateX(-50%)}
.kz-karta kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r6);background:var(--surface-3);border:1px solid var(--border-strong);font-size:12px;font-weight:700}
.kz-karta em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.kz-karta::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kropka);flex:none}
.anim .kino-znacznik,.anim .kz-karta{transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out)}
.kino-stoi .kino-glowica,.kino-stoi .kino-bieg{display:none}
@media(max-width:960px){.kino-tekst{grid-column:1 / -1}}
@media(max-width:600px){
  .hero{height:88svh;min-height:520px}
  .kino-zaslona{background:var(--kino-zaslona-waski)}
  .hero .kino-siatka{--kino-os-h:96px}
  .hero .ctas .btn{flex:1 1 100%}
  .kz-karta{gap:6px;font-size:12px;padding:6px 9px 6px 8px}
  .kz-karta kbd,.kino-os-gora span{display:none}
  .kino-os{--kino-os-h:96px}
}

/* okno filmu: kafel rośnie do odtwarzacza (FLIP w skrypcie), bez JS przycisk otwiera plik */
.film-okno{margin:auto;padding:0;border:1px solid var(--border-strong);border-radius:var(--r16);background:var(--czern);color:var(--text);width:min(1100px,calc(100% - 32px));box-shadow:var(--cien-okno);overflow:hidden}
.film-okno::backdrop{background:var(--zaslona);backdrop-filter:blur(6px)}
.film-okno video{width:100%;aspect-ratio:16/9;background:var(--czern)}
.film-okno .film-x{position:absolute;top:10px;right:10px;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:var(--r8);background:var(--przyciemnienie);color:var(--text);cursor:pointer;z-index:2}
.film-okno .film-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.film-okno figcaption{padding:12px 16px;font-size:13px;color:var(--text-3);background:var(--surface)}

/* ===== ekran 2: nagranie wchodzi do okna programu (#jak) ===== */
/* domyślnie (telefon, ograniczony ruch, bez skryptu) okno stoi złożone; przypięcie tylko na szerokim ekranie z ruchem (html.anim) */
.jak{padding:var(--sekcja) 0;background:var(--bg)}
.jak-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;width:100%;max-width:var(--kino-w);margin:0 auto;padding:0 var(--kino-gutter)}
.jak-tekst{position:relative;z-index:2}
.jak-tekst .kino-h2{font-size:clamp(28px,2.7vw,40px);line-height:1.04}
.jak-kroki{list-style:none;position:relative;display:grid;gap:18px;margin-top:28px;padding-left:24px}
.jak-kroki::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--border)}
.jak-kroki::after{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--primary);transform-origin:50% 0;transform:scaleY(var(--jp,1))}
.jak-krok{font-size:clamp(18px,1.55vw,22px);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text);transition:color var(--t-3) var(--ease-out)}
.jak-nr{display:block;margin-bottom:2px;font-size:13px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.jak-okno{--pr:1;--pl:1;--pk:1;--pg:1;--pz:1;--po:1;--ps:1;--pc:1;position:relative;z-index:1;width:100%}
.jak-plansza{position:relative;aspect-ratio:16/9;container-type:inline-size;border-radius:var(--r12)}
.jak-rama{position:absolute;inset:0;border-radius:var(--r12);background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--cien-okno);opacity:var(--pr)}
/* warstwy prawdziwego zrzutu Tagowania: ten sam obraz, każda warstwa przycięta do jednego pola programu */
.jak-w{position:absolute;inset:0;background:url(../img/tagowanie.jpg) center / 100% 100% no-repeat;border-radius:var(--r12)}
.jak-w-pasek{clip-path:inset(0 96.5625% 11.1111% 0);opacity:var(--pg);transform:translate3d(calc((1 - var(--pg)) * -24px),0,0)}
.jak-w-gora{clip-path:inset(0 25% 88.3333% 3.4375%);opacity:var(--pg);transform:translate3d(0,calc((1 - var(--pg)) * -24px),0)}
.jak-w-lista{clip-path:inset(11.6667% 85.75% 11.1111% 3.4375%);opacity:var(--pl);transform:translate3d(calc((1 - var(--pl)) * -56px),0,0)}
.jak-w-pole{clip-path:inset(11.6667% 25% 37.2222% 14.25%);opacity:var(--pk)}
.jak-w-zdarz{clip-path:inset(62.7778% 25% 11.1111% 14.25%);opacity:var(--pz);transform:translate3d(0,calc((1 - var(--pz)) * 40px),0)}
.jak-w-kody{clip-path:inset(0 0 11.1111% 75%);opacity:var(--pk);transform:translate3d(calc((1 - var(--pk)) * 56px),0,0)}
.jak-w-os{clip-path:inset(88.8889% 0 0 0);opacity:var(--po);transform:translate3d(0,calc((1 - var(--po)) * 48px),0)}
/* pole wideo w oknie programu: skrypt skaluje je od całego ekranu do tego miejsca */
.jak-pole{position:absolute;left:19.1875%;top:11.6667%;width:50.875%;height:51.1111%;overflow:hidden;background:var(--czern);transform-origin:50% 50%}
.jak-pole::after{content:"";position:absolute;inset:0;background:var(--kino-zaslona);opacity:var(--zas,0);pointer-events:none}
.jak-wideo{display:block;width:100%;height:100%;object-fit:cover}
/* zdarzenia z tagów spadają na oś (te same dwa, które widać na osi nad nagraniem) */
.jak-spadki{position:absolute;inset:0;pointer-events:none}
.jak-spadek{--q:clamp(0,calc(var(--ps) * 2.4 - var(--i)),1);position:absolute;display:flex;align-items:center;gap:.6cqw;padding:.35cqw .8cqw .35cqw .5cqw;border-radius:.6cqw;background:var(--surface-3);border:1px solid var(--border-strong);box-shadow:var(--cien-2);font-size:1.02cqw;font-weight:700;color:var(--text);white-space:nowrap;opacity:var(--q);transform:translate3d(0,calc((1 - var(--q)) * -16cqw),0)}
.jak-spadek kbd{display:inline-grid;place-items:center;min-width:1.7cqw;height:1.7cqw;border-radius:.4cqw;background:var(--surface);border:1px solid var(--border-strong);font-size:.95cqw}
.jak-spadek::before{content:"";width:.7cqw;height:.7cqw;border-radius:50%;background:var(--cat-shot);flex:none}
.jak-spadek em{font-style:normal;font-variant-numeric:tabular-nums}
/* licznik w polu wideo: liczby rosną z tagów */
.jak-licznik{position:absolute;left:20.6%;top:46.2%;display:flex;flex-direction:column;gap:.2cqw;padding:.9cqw 1.4cqw;border-radius:.9cqw;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--cien-2);opacity:var(--pc);transform:translate3d(0,calc((1 - var(--pc)) * 2cqw),0)}
.jak-licznik small{font-size:1.1cqw;color:var(--text-2)}
.jak-licznik b{font-size:3.6cqw;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.jak-licznik span{font-size:1.05cqw;color:var(--text-3)}
/* telefon: okno wjeżdża raz przy wejściu na ekran (skrypt dodaje .in) */
@media(max-width:899px){
  .anim .jak .jak-okno{opacity:0;transform:translate3d(0,36px,0) scale(.97);transition:opacity var(--t-4) var(--ease-out),transform var(--t-4) var(--ease-out)}
  .anim .jak .jak-okno.in{opacity:1;transform:none}
}
/* szeroki ekran z ruchem: tor ma 350 svh, okno stoi przypięte przez 250 svh przewijania (bez ruchu i na telefonie wszystko stoi złożone) */
@media(min-width:900px){
  .jak-wrap{grid-template-columns:minmax(200px,270px) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:center}
  .anim .jak{padding:0}
  .anim .jak-tor{height:350svh}
  .anim .jak-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
  .anim .jak-wrap{padding-top:var(--nav-h)}
  .anim .jak-okno{width:min(100%,calc((100svh - var(--nav-h) - 96px) * 1.7778))}
  .anim .jak-krok:not(.akt){color:var(--text-3)}
  .jak.aktywna .jak-pole,.jak.aktywna .jak-w{will-change:transform,opacity}
}
/* ===== ekran 3: liczby rosną z zapisanych zdarzeń (#liczby) ===== */
.liczby .liczby-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:center;max-width:var(--kino-w);padding:0 var(--kino-gutter)}
.liczby-kol{grid-column:1 / span 7}
.liczby-lista{list-style:none;margin-top:clamp(24px,4vw,48px)}
.liczba{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);padding:clamp(12px,1.6vw,20px) 0;border-top:1px solid var(--border)}
.liczba b{min-width:2.3ch;font-size:clamp(64px,10.5vw,152px);font-weight:800;line-height:.88;letter-spacing:-.06em;color:var(--text);font-variant-numeric:tabular-nums}
.liczba-opis{display:flex;flex-direction:column;gap:4px;font-size:clamp(18px,1.9vw,26px);font-weight:700;letter-spacing:-.02em}
.liczba-opis small{font-size:clamp(14px,1.2vw,17px);font-weight:500;letter-spacing:0;color:var(--text-2)}
.liczby-podpis{margin-top:8px;padding-top:12px;border-top:1px solid var(--border);color:var(--text-2)}
.liczby-zdanie{margin-top:14px;max-width:46ch;color:var(--text-2);font-size:clamp(16px,1.3vw,18px)}
.link-strzalka{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:600;white-space:nowrap}
.link-strzalka .strzalka{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-1) var(--ease-out)}
.link-strzalka:hover .strzalka{transform:translateX(3px)}
.liczby-boisko{grid-column:8 / span 5}
.boisko{display:block;width:100%;height:auto}
.b-tlo{fill:none}
.b-linie{fill:none;stroke:var(--border-strong);stroke-width:2}
.b-linie .b-punkt{fill:var(--border-strong);stroke:none}
.b-linie .b-bramka{stroke:var(--text-3)}
.pkt{--c:var(--cat-shot);transform-box:fill-box;transform-origin:50% 50%;transition:opacity var(--t-3) var(--ease-out) calc(var(--i) * 90ms),transform var(--t-4) var(--ease-out) calc(var(--i) * 90ms)}
.pkt-gol{fill:var(--primary);stroke:var(--text);stroke-width:2.5}
.pkt-celny{fill:var(--cat-shot);stroke:none}
.pkt-zablokowany{fill:none;stroke:var(--cat-defense);stroke-width:3.5}
.pkt-niecelny{fill:none;stroke:var(--text-3);stroke-width:3.5}
.anim .liczby:not(.in) .pkt{opacity:0;transform:translate3d(0,-90px,0)}
.boisko-opis{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:13px;color:var(--text-2)}
.legenda{display:inline-flex;align-items:center;gap:8px}
.lg{width:12px;height:12px;border-radius:50%;box-sizing:border-box}
.lg-gol{background:var(--primary);border:2px solid var(--text)}
.lg-celny{background:var(--cat-shot)}
.lg-zablokowany{border:2.5px solid var(--cat-defense)}
.lg-niecelny{border:2.5px solid var(--text-3)}
.boisko-nota{flex-basis:100%;color:var(--text-3)}
@media(max-width:960px){
  .liczby-kol,.liczby-boisko{grid-column:1 / -1}
  .liczby-boisko{max-width:520px}
}
/* ===== spróbuj sam (#sprobuj): duża scena, podpowiedzi klawiszy w samym interfejsie ===== */
.sprobuj .sek-gl{margin-bottom:clamp(28px,4vw,56px)}
.sprobuj-siatka{row-gap:32px;align-items:start}
.sprobuj-lead{grid-column:1 / span 4}
.tagownik{grid-column:5 / -1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,26px) clamp(20px,2.6vw,40px);padding:clamp(16px,2.2vw,32px);border-radius:var(--r16);background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--cien-okno);transition:border-color var(--t-2)}
.tagownik:focus-within{border-color:var(--primary-line)}
.tg-gora{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:14px;color:var(--text-2)}
.tg-gora>span{white-space:nowrap}
.tg-gora .tg-druzyna{display:flex;align-items:center;gap:8px}
.tg-gora .tg-druzyna::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--club)}
.tg-nr{display:inline-grid;place-items:center;min-width:48px;height:34px;padding:0 10px;border-radius:var(--r6);background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;margin-left:6px;transition:background var(--t-1),border-color var(--t-1)}
.tg-nr.wybrany{background:var(--primary-soft);border-color:var(--primary)}
.tg-zegar{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.tg-lewo,.tg-prawo{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);min-width:0}
.tg-etykieta{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--text-2)}
.tg-etykieta kbd{display:inline-grid;place-items:center;height:20px;padding:0 7px;border-radius:var(--r6);background:var(--surface-3);border:1px solid var(--border-strong);font-size:11px;font-weight:700;color:var(--text)}
.tg-klawisze{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.tg-klawisze button,.tg-akcje button{min-height:52px;border-radius:var(--r8);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background var(--t-1),border-color var(--t-1),transform var(--t-1) var(--ease-out)}
.tg-klawisze button:hover,.tg-akcje button:hover{background:var(--surface-3);border-color:var(--text-3)}
.tg-klawisze button:active,.tg-akcje button:active,.tg-klawisze button.wcisniety,.tg-akcje button.wcisniety{transform:translateY(1px);background:var(--primary-soft);border-color:var(--primary)}
.tg-klawisze button.on{background:var(--primary-soft);border-color:var(--primary)}
.tg-akcje{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.tg-akcje button{justify-content:flex-start;gap:6px;padding:0 10px;font-weight:500;font-size:13.5px;text-align:left}
.tg-akcje button kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:var(--r6);background:var(--surface-3);border:1px solid var(--border-strong);font-size:13px;font-weight:700;flex:none}
.tg-akcje button i{width:7px;height:7px;border-radius:50%;flex:none;margin-left:auto;background:var(--cat-pass)}
.tg-akcje button[data-kat=strzal] i{background:var(--cat-shot)}
.tg-akcje button[data-kat=strata] i{background:var(--cat-ours)}
.tg-akcje button[data-kat=obrona] i{background:var(--cat-defense)}
.tg-lista{list-style:none;display:flex;flex-direction:column;gap:2px;min-height:178px;max-height:178px;overflow:hidden;border-radius:var(--r8);background:var(--bg);border:1px solid var(--border);padding:6px}
.tg-lista li{display:grid;grid-template-columns:36px 24px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:var(--r6);font-size:14px;color:var(--text-2)}
.tg-lista li.nowy{animation:wiersz-wjazd var(--t-2) var(--ease-out) both;background:var(--primary-soft)}
.tg-lista li b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}
.tg-lista li em{font-style:normal;font-weight:700;color:var(--text)}
.tg-lista li span{display:flex;align-items:center;gap:8px}
.tg-lista li span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kropka,var(--cat-pass))}
[data-kat=pass]{--kropka:var(--cat-pass)}[data-kat=shot]{--kropka:var(--cat-shot)}[data-kat=ours]{--kropka:var(--cat-ours)}[data-kat=defense]{--kropka:var(--cat-defense)}
.tg-os .t0{left:0}.tg-os .t15{left:33.33%}.tg-os .t30{left:66.66%}.tg-os .t45{left:99.9%}
.tg-os .z1{left:25.85%}.tg-os .z2{left:26.7%}
.tg-lista li small{color:var(--text-3)}
.tg-lista .pusto{justify-content:center;color:var(--text-3);text-align:center;display:block;padding:40px 0}
@keyframes wiersz-wjazd{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.tg-os{position:relative;height:36px;border-radius:var(--r6);background:var(--bg);border:1px solid var(--border);overflow:hidden}
.tg-os .tyk{position:absolute;top:0;bottom:0;width:1px;background:var(--border)}
.tg-os .tyk span{position:absolute;top:2px;left:4px;font-size:10px;color:var(--text-3)}
.tg-os .glowica{position:absolute;top:0;bottom:0;width:2px;background:var(--text-2)}
.tg-os .znacz{position:absolute;bottom:4px;width:4px;height:14px;border-radius:2px;background:var(--kropka,var(--cat-pass));transform-origin:50% 100%}
.anim .tg-os .znacz.nowy{animation:znacz-wejscie var(--t-3) var(--ease-spring) both}
@keyframes znacz-wejscie{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.tg-kafle{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tg-kafel{padding:10px 12px;border-radius:var(--r8);background:var(--surface-2);border:1px solid var(--border)}
.tg-kafel small{display:block;font-size:12px;color:var(--text-2)}
.tg-kafel b{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:2px}
.tg-kafel b.skok{animation:liczba-skok var(--t-3) var(--ease-spring)}
@keyframes liczba-skok{30%{color:var(--primary);transform:translateY(-2px)}}
.tg-stopka{grid-column:1 / -1;font-size:13px;color:var(--text-3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tg-stopka button{background:none;border:0;color:var(--text-2);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}
@media(max-width:860px){.tg-stopka button{min-height:var(--tap);padding:0 8px}}
@media(max-width:1100px){.sprobuj-lead,.tagownik{grid-column:1 / -1}}
@media(max-width:760px){.tagownik{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.tg-klawisze{grid-template-columns:repeat(3,1fr)}.tg-akcje button i{display:none}.tagownik{padding:14px}.tg-lista li{grid-template-columns:34px 22px 1fr}.tg-lista li small{display:none}}

/* ===== pętle (ramka, okładka, przycisk przy ograniczonym ruchu) ===== */
.petla-ramka{position:relative;border-radius:var(--r12);overflow:hidden;background:var(--surface-2);border:1px solid var(--border-strong)}
.petla-ramka video,.petla-ramka img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
/* okładka pętli: leniwy obraz nad filmem bez postera; znika, gdy film naprawdę gra (klasa .gra na ramce) */
.okladka{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity var(--t-3) var(--ease-out)}
.gra>.okladka{opacity:0;pointer-events:none}
.petla-play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;border:0;background:var(--primary);color:var(--on-primary);cursor:pointer;display:none;place-items:center;box-shadow:0 0 0 8px var(--primary-soft);z-index:2}
.petla-play::after{content:"";width:0;height:0;border-left:16px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.petla-play.pauza::after{width:14px;height:18px;border:0;border-left:5px solid currentColor;border-right:5px solid currentColor;margin:0}
html.petle-przycisk .petla-play{display:grid}
.petla-play.pauza{opacity:0;transition:opacity var(--t-2)}
.petla-ramka:hover .petla-play.pauza,.petla-play.pauza:focus-visible{opacity:1}

/* ===== co dostajesz (#dostajesz): jedna duża pętla, trzy mniejsze, różne szerokości i przesunięcia ===== */
.dost{row-gap:clamp(56px,7vw,104px);align-items:start}
.poz-a{grid-column:1 / span 8}
.poz-a h3{font-size:clamp(24px,2.4vw,34px)}
.poz-b{grid-column:9 / -1;align-self:end}
.poz-c{grid-column:1 / span 5}
.poz-d{grid-column:7 / -1;margin-top:clamp(0px,6vw,88px)}
@media(max-width:900px){
  .poz-a,.poz-b,.poz-c,.poz-d{grid-column:1 / -1;margin-top:0}
}

/* ===== gdy meczów przybywa (#wiecej): dwie kolumny o różnej szerokości, prawa przesunięta w dół ===== */
.wiecej-uklad{align-items:start}
.wiecej-kol{display:flex;flex-direction:column;gap:clamp(48px,6vw,88px);min-width:0}
.wiecej-l{grid-column:1 / span 7}
.wiecej-p{grid-column:8 / -1;padding-top:clamp(0px,9vw,140px)}
@media(max-width:900px){
  .wiecej-l,.wiecej-p{grid-column:1 / -1;padding-top:0}
  .wiecej-uklad{row-gap:clamp(48px,6vw,88px)}
}

/* ===== dane u trenera (#dane): oś 15 dni zamiast schematu z blokami ===== */
.dane .kontener{align-items:center}
.dane-tekst{grid-column:1 / span 6}
.dane-tekst .lead{margin-top:clamp(18px,2vw,28px)}
.dane-lista{list-style:none;display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);margin-top:clamp(28px,3.4vw,48px);max-width:48ch}
.dane-lista li{color:var(--text-2);font-size:16px}
.dane-lista li b{display:block;margin-bottom:4px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.os-dane{grid-column:8 / -1;align-self:center;margin:0}
.os-dane-gora{display:flex;flex-direction:column;gap:4px;margin-bottom:clamp(28px,3vw,44px)}
.os-dane-gora b{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.os-dane-gora span{font-size:15px;color:var(--text-2)}
/* oś: 15 dni (kreski pomocnicze co dzień), zielona linia to praca na komputerze, pionowe znaczniki to połączenie z serwerem co 5 dni */
.os-tor{position:relative;height:64px;background-image:linear-gradient(90deg,var(--kino-os-tyk) 1px,transparent 1px);background-size:calc(100% / 15) 9px;background-repeat:repeat-x;background-position:0 25px}
.os-bieg{position:absolute;left:0;right:0;top:24px;height:2px;background:var(--primary);transform-origin:0 50%}
.os-pol{position:absolute;top:14px;width:2px;height:22px;border-radius:2px;background:var(--text)}
.os-pol:nth-of-type(2){left:0}
.os-pol:nth-of-type(3){left:calc(100% / 3)}
.os-pol:nth-of-type(4){left:calc(100% * 2 / 3)}
.os-pol:nth-of-type(5){left:calc(100% - 2px)}
.os-et{position:absolute;top:42px;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.os-et:nth-of-type(1){left:0}
.os-et:nth-of-type(2){left:calc(100% / 3)}
.os-et:nth-of-type(3){left:calc(100% * 2 / 3)}
.os-et:nth-of-type(4){right:0}
.os-legenda{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:20px;font-size:14px;color:var(--text-2)}
.os-legenda li{display:flex;align-items:center;gap:12px}
.os-zn{flex:none;display:block}
.os-zn-linia{width:20px;height:2px;border-radius:2px;background:var(--primary)}
.os-zn-pol{width:2px;height:16px;margin:0 9px;border-radius:2px;background:var(--text)}
.anim .os-dane:not(.in) .os-bieg{transform:scaleX(0)}
.anim .os-dane:not(.in) .os-pol{opacity:0;transform:scaleY(.2)}
.os-bieg{transition:transform var(--t-4) var(--ease-out)}
.os-pol{transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out)}
.os-dane.in .os-pol:nth-of-type(3){transition-delay:240ms}
.os-dane.in .os-pol:nth-of-type(4){transition-delay:480ms}
.os-dane.in .os-pol:nth-of-type(5){transition-delay:720ms}
@media(max-width:900px){
  .dane-tekst,.os-dane{grid-column:1 / -1}
  .os-dane{margin-top:clamp(32px,6vw,56px)}
}

/* ===== wymagania (#wymagania): trzy bloki z dużymi wartościami, wysoki po lewej, dwa po prawej ===== */
.req-siatka{row-gap:clamp(40px,5vw,72px);align-items:start}
.req-blok{min-width:0}
.req-a{grid-column:1 / span 6;grid-row:1 / span 2}
.req-b{grid-column:8 / -1;grid-row:1}
.req-c{grid-column:8 / -1;grid-row:2}
.req-et{font-size:14px;font-weight:600;color:var(--text-2)}
.req-wart{margin-top:8px;font-size:clamp(40px,4.6vw,68px);font-weight:800;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;text-wrap:balance}
.req-a .req-wart{font-size:clamp(48px,7.4vw,112px);line-height:.96}
.req-opis{margin-top:14px;max-width:34ch;font-size:16px;color:var(--text-2)}
.req-blok dl{margin-top:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;max-width:46ch}
.req-blok dt{font-size:14px;font-weight:600;color:var(--text)}
.req-blok dd{font-size:15px;color:var(--text-2)}
.req-note{grid-column:1 / span 6;grid-row:3;max-width:56ch;font-size:15px;color:var(--text-3)}
@media(max-width:900px){
  .req-a,.req-b,.req-c,.req-note{grid-column:1 / -1;grid-row:auto}
}

/* ===== cennik (#cennik): Klub wyróżniony i większy, Start i Pro prostsze ===== */
.toggle{position:relative;display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r8);padding:4px;margin:0 0 14px;isolation:isolate}
.toggle .suwak{position:absolute;top:4px;bottom:4px;left:4px;width:var(--sw,0px);transform:translateX(var(--sx,0px));border-radius:var(--r6);background:var(--surface-3);transition:transform var(--t-3) var(--ease-in-out),width var(--t-3) var(--ease-in-out);z-index:-1}
.toggle-note{font-size:15px;color:var(--text-2);margin:0 0 clamp(36px,4vw,56px)}
.toggle-note b{color:var(--text);font-weight:600}
.toggle button{border:0;background:transparent;color:var(--text-2);font:inherit;font-size:14px;font-weight:600;padding:0 16px;min-height:var(--tap);border-radius:var(--r6);cursor:pointer;transition:color var(--t-2)}
.toggle button.on{color:var(--text)}
.toggle button em{font-style:normal;background:var(--primary);color:var(--on-primary);margin-left:8px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r6)}
.plans{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px;align-items:start}
.plan{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;padding-top:clamp(24px,3vw,44px)}
.plan.hot{grid-column:1 / span 6;grid-row:1;padding:clamp(24px,3vw,44px);background:var(--surface);border:1px solid var(--primary);border-radius:var(--r16)}
.plan-start{grid-column:7 / span 3;grid-row:1}
.plan-pro{grid-column:10 / -1;grid-row:1}
.plan .tag{position:absolute;top:-13px;left:clamp(24px,3vw,44px);background:var(--primary);color:var(--on-primary);font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r6)}
.plan h3{font-size:22px}
.plan.hot h3{font-size:clamp(26px,2.4vw,34px)}
.plan .who{font-size:14px;color:var(--text-2);max-width:44ch}
.price{display:flex;align-items:baseline;gap:6px}
.price b{white-space:nowrap;font-size:clamp(34px,3.2vw,44px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan.hot .price b{font-size:clamp(52px,5.8vw,84px);letter-spacing:-.045em}
.price span{color:var(--text-2);font-size:14px;transition:opacity var(--t-2)}
.price-box{display:flex;flex-direction:column;gap:4px}
.price-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;transition:opacity var(--t-2)}
.price-note{font-size:13px;color:var(--text-3);min-height:18px;transition:opacity var(--t-2)}
.plans.swap .price-top,.plans.swap .price-note,.plans.swap .price span{opacity:0}
.price-old{font-size:15px;color:var(--text-3);text-decoration:line-through}
.price-top .save{font-style:normal;font-size:12px;font-weight:700;padding:3px 8px;border-radius:var(--r6);background:var(--primary-soft);border:1px solid var(--primary-line);color:var(--primary);white-space:nowrap}
.price-top .save:empty{display:none}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--text-2)}
.plan li{position:relative;padding-left:20px}
.plan li::before{content:"";position:absolute;left:0;top:.78em;width:9px;height:2px;border-radius:2px;background:var(--primary)}
.plan li.no{color:var(--text-3)}
.plan li.no::before{background:var(--text-3)}
.plan .btn{width:100%}
@media(max-width:1180px){
  .plan.hot,.plan-start,.plan-pro{grid-column:1 / -1;grid-row:auto}
  .plan.hot{order:-1}
  .plan-start,.plan-pro{padding-top:clamp(8px,2vw,24px)}
}
.pricing-foot{margin-top:clamp(36px,4vw,56px);max-width:72ch;font-size:13px;color:var(--text-3)}
.ceny-robocze{margin-top:10px;max-width:72ch;font-size:12px;color:var(--text-3)}
table.diff{width:100%;border-collapse:collapse;font-size:15px}
table.diff th,table.diff td{padding:16px 16px 16px 0;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
table.diff th{font-weight:600;color:var(--text-3);font-size:13px}
table.diff th.hot{color:var(--primary)}
table.diff td:first-child{color:var(--text);font-weight:600}
table.diff td{color:var(--text-2)}
.diff-zwoj{margin-top:clamp(56px,7vw,96px)}
/* telefon: każdy wiersz porównania to osobny blok, plany podpisane przy wartościach */
@media(max-width:700px){
  table.diff,table.diff tbody,table.diff tr,table.diff td{display:block;width:100%}
  table.diff thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.diff tr{padding:20px 0;border-bottom:1px solid var(--border)}
  table.diff td{padding:0;border:0}
  table.diff td:first-child{margin-bottom:10px;font-size:17px}
  table.diff td[data-e]{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:12px;padding:5px 0;font-size:15px}
  table.diff td[data-e]::before{content:attr(data-e);font-size:13px;font-weight:600;color:var(--text-3)}
  table.diff td[data-e="Klub"]::before{color:var(--primary)}
}

/* ===== pytania (#faq): nagłówek po lewej, szeroka kolumna po prawej ===== */
.faq-uklad{align-items:start;row-gap:32px}
.faq-uklad .sek-gl{grid-column:1 / span 4;margin-bottom:0}
.faq{grid-column:5 / -1}
.faq details{border-bottom:1px solid var(--border);padding:clamp(18px,2vw,28px) 0}
.faq details:first-child{border-top:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;font-weight:600;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em;line-height:1.25;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;color:var(--text);transition:color var(--t-1)}
.faq summary:hover{color:var(--primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:22px;height:22px;position:relative}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--text-3);border-radius:2px;transform:translate(-50%,-50%);transition:transform var(--t-2) var(--ease-in-out),background var(--t-2)}
.faq summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq details[open] summary .plus::before,.faq details[open] summary .plus::after{background:var(--primary)}
.faq-tresc{overflow:hidden}
.faq p{color:var(--text-2);margin-top:14px;font-size:clamp(16px,1.25vw,18px);max-width:62ch}
.faq p a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.faq p a:hover{color:var(--primary)}
@media(max-width:1100px){
  .faq-uklad .sek-gl,.faq{grid-column:1 / -1}
}

/* ===== na dole: jedno zdanie i jeden przycisk, asymetrycznie ===== */
.final .siatka{align-items:end;row-gap:32px}
.final .kino-h2{grid-column:1 / span 8}
.final-akcja{grid-column:9 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.final-akcja .podpis{margin-top:0}
@media(max-width:900px){
  .final .kino-h2,.final-akcja{grid-column:1 / -1}
}

/* ===== okno próby (dialog): krok 1 formularz, krok 2 pobranie; te same id co dotąd ===== */
html:has(dialog[open]){overflow:hidden}
dialog.proba{margin:auto;padding:0;border:1px solid var(--border-strong);border-radius:var(--r16);background:var(--surface);color:var(--text);width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;box-shadow:var(--cien-okno)}
dialog.proba::backdrop{background:var(--zaslona);backdrop-filter:blur(4px)}
dialog.proba[open]{animation:okno-wejscie var(--t-2) var(--ease-out)}
@keyframes okno-wejscie{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.proba-box{position:relative;padding:32px 28px 28px}
.proba-box [hidden]{display:none}
.proba-x{position:absolute;top:10px;right:10px;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:var(--r8);background:transparent;color:var(--text-2);cursor:pointer}
.proba-x:hover{background:var(--surface-2);color:var(--text)}
.proba-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.proba-box h2{font-size:26px;letter-spacing:-.02em;padding-right:40px;margin-bottom:8px}
.proba-box h2:focus{outline:none}
.proba-lead{color:var(--text-2);font-size:15px;margin-bottom:22px;overflow-wrap:anywhere}
.proba-lead b{color:var(--text);font-weight:600}
.proba-box label.pole{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.proba-box input[type=email]{width:100%;height:48px;padding:0 14px;border-radius:var(--r8);border:1px solid var(--border-strong);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.proba-box input[type=email]:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
.proba-box input[aria-invalid=true],.proba-box input[aria-invalid=true]:focus-visible{border-color:var(--danger)}
.proba-box input[aria-invalid=true]:focus-visible{outline-color:var(--danger)}
#p2Adres{margin-bottom:4px}
.zgoda{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:14px;color:var(--text-2);cursor:pointer;min-height:var(--tap)}
.zgoda input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--primary);cursor:pointer}
.zgoda a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.zgoda a:hover{color:var(--primary)}
.blad{margin-top:6px;font-size:13px;color:var(--danger)}
.proba-ts{margin-top:16px;min-height:65px}
.proba-box .btn-duzy{width:100%;height:52px;font-size:16px;margin-top:18px}
.proba-box .btn[disabled]{opacity:.6;cursor:default}
.proba-note{margin-top:14px;font-size:13px;color:var(--text-3);text-align:center}
.proba-kroki{list-style:none;counter-reset:k;margin:22px 0 0;display:flex;flex-direction:column;gap:12px}
.proba-kroki li{counter-increment:k;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15px;color:var(--text-2)}
.proba-kroki li::before{content:counter(k);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:13px}
.proba-kroki button,.proba-box .link-przycisk{background:none;border:0;padding:0;font:inherit;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.proba-kroki button:hover{color:var(--primary)}
.proba-notka{margin-top:20px;padding:14px 16px;border-left:3px solid var(--primary);background:var(--surface-2);border-radius:0 var(--r8) var(--r8) 0;font-size:13px;color:var(--text-2)}
.proba-notka p+p{margin-top:8px}
.proba-notka b{color:var(--text);font-weight:600}
.proba-podglad{margin-top:10px;font-size:12px;color:var(--warning);text-align:center}

/* ===== odsłanianie na przewijaniu: ukrycie tylko pod html.anim, każdy rodzaj elementu wchodzi inaczej ===== */
/* tekst: krótki wjazd; nagłówek (rv-n): dłuższy i wyższy; obraz (rv-o): od dołu z lekkim powiększeniem; lista (rv-l): pozycje jedna po drugiej */
.anim .rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out)}
.anim .rv-n{transform:translate3d(0,40px,0);transition-duration:var(--t-4)}
.anim .rv-o{transform:translate3d(0,32px,0) scale(.965);transform-origin:50% 100%;transition-duration:var(--t-4)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv-l>*{opacity:0;transform:translate3d(0,16px,0);transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out)}
.anim .rv-l.in>*{opacity:1;transform:none}
.anim .rv-l.in>*:nth-child(2){transition-delay:90ms}
.anim .rv-l.in>*:nth-child(3){transition-delay:180ms}
.anim .rv-l.in>*:nth-child(4){transition-delay:270ms}
.rv.d1{transition-delay:80ms}.rv.d2{transition-delay:160ms}.rv.d3{transition-delay:240ms}

/* ===== przejścia między stronami (gdzie przeglądarka umie) ===== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-2)}

/* ===== ograniczony ruch: bez animacji i przejść, treść od razu ===== */
@media(prefers-reduced-motion:reduce){
  dialog.proba[open],.tg-lista li.nowy,.tg-kafel b.skok,.tg-os .znacz.nowy{animation:none}
  @view-transition{navigation:none}
}