*{box-sizing:border-box}
/* DWA MOTYWY (decyzja właściciela 2026-09-25, po jasnym motywie apki: „przebudowanie całej strony na dwa motywy"):
   CIEMNY domyślny (`:root` = dotychczasowy wygląd 1:1; decyzja właściciela 2026-09-25 po zrzutach: „domyślnie ma być motyw
   ciemny, zmiana przez przycisk") i JASNY (`html[data-motyw="jasny"]`, kolory z jasnego motywu apki). Pasek z logo
   (.site-header, .legal-header, rozwijane menu telefonu) i stopka są CIEMNE W OBU motywach (dostają ciemne tokeny),
   bo logo źle wygląda na jasnym tle. ⛔ W regułach niżej NIE wpisujemy kolorów na sztywno: przezroczystości przez
   rgba(var(--NAZWA-rgb),a), tekst na gradiencie marki var(--na-fill), cienie rgba(var(--cien-rgb),calc(a*var(--cien-k))),
   poświaty neonowe z mnożnikiem var(--glow-k) (w jasnym ściszone), tła kart przez tokeny --kart-a, --f-a, --lp-a itd.
   ⚠️ W komentarzach CSS nie wolno pisać gwiazdki z ukośnikiem, bo zamyka komentarz i wycina całą regułę :root.
   Wyjątek świadomy: „sprzęt" makiet (szyny, ramki, klawisze telefonu, laptopa, tabletu, opinii) jest ciemny w obu
   motywach, jasne są tylko ekrany (--scr-*). Przełącznik: `.motyw-btn` w pasku (motyw_skrypt()), klucz localStorage
   `bv:motyw` wspólny z apką (ten sam host), odczytany w <head> PRZED CSS (MOTYW_HEAD), żeby nie błysnęło.
   GRADIENT MARKI: w ciemnym żywa para z aplikacji (decyzja właściciela 2026-09-06; --gs w kierunku zgodnym z kątem,
   --gsr w odwrotnym, cyjan trzyma pierwsze 20 % paska, decyzja 2026-09-07), w jasnym para z jasnego motywu apki.
   Barwy napisów w ciemnym: biel ODROBINĘ ściszona (decyzja właściciela 2026-09-21: #DCE7E4). */
:root{
  color-scheme:dark;
  /* barwy marki Trustpilot do odznaki w hero: te same w obu motywach (wytyczne Trustpilot), świadomy wyjątek od tokenów */
  --tp:#00b67a;--tp-szary:#dcdce6;
  --bg:#020508;--bg-tel:#04080c;--panel:#0a1418;--panel2:#0c1a20;--card2:transparent;
  --line:rgba(255,255,255,.07);--line2:rgba(61,217,212,.14);--bright:rgba(61,217,212,.4);
  --cyan:#3DD9D4;--cyan-rgb:61,217,212;--green:#7FE83C;--green-rgb:127,232,60;--green2:#7AFF8A;--green2-rgb:122,255,138;
  --grad-a:#00FAFB;--grad-a-rgb:0,250,251;--grad-b:#5BFB22;--grad-b-rgb:91,251,34;
  --gs:#00FAFB 0%,#00FAFB 20%,#5BFB22 100%;--gsr:#5BFB22 0%,#00FAFB 80%,#00FAFB 100%;
  --green-vivid:#5BFB22;--cyan-vivid:#00FAFB;
  --text:#DCE7E4;--text2:#b8c6c3;--muted:#93a4a1;--dim:#5f6f6c;
  --hi-rgb:255,255,255;--na-fill:#04270f;
  --cien-rgb:0,0,0;--cien-k:1;--glow-k:1;--ziarno:.075;--zaslona:rgba(2,5,8,.74);
  --red:#ff6b6b;--red-rgb:255,107,107;--red-txt:#ff9d95;--amber-rgb:255,214,74;--amber-txt:#ffe6a3;
  --scr-a:#0a0f14;--scr-b:#06090d;--scr-c:#04070a;--dot-ring:#0a141a;
  --kart-a:#0a1720;--kart-b:#060e14;--kart2-a:#0c1a20;--kart2-b:#070d12;
  --f-a:#0a1b24;--f-b:#060f16;--f-c:#040a10;--f-hi:rgba(170,255,250,.16);--lp-a:#0d1e25;--lp-b:#0a1620;
  --rim-a:#c8fffb;--rim-b:#8df3ee;--rim-c-rgb:105,240,140;--rim-d:#dcffc2;
  --rim-p1:80%;--rim-p2:40%;--rim-p3:100%;--rim-p4:62%;--rim-p5:62%;--rim-p6:26%;
  --price-a:rgba(12,44,50,.6);--price-b:rgba(6,20,26,.94);--price-c:rgba(5,17,22,.97);
  --story-a:#123842;--story-b:#081319;--photo-bg:#091217;--loop-c:rgba(5,10,13,.98);
  --sel-bg:rgba(2,10,14,.72);--sel-list:#07161c;--pole-bg:rgba(255,255,255,.04);--ck-bg:rgba(10,20,24,.97);--kosz-bg:#1b0f10;
  --don1:#6DF12F;--don2:#ffd166;--don3:#ff7a7a;--don4:#41525b;
  --st1:#FF4D4D;--st2:#FF7A2F;--st3:#DCD62E;--st4:#7FE83C;
  --ic1-c:#83bbff;--ic1-a:rgba(35,89,146,.7);--ic1-b:rgba(11,42,76,.75);
  /* pieczęć gwarancji satysfakcji (2026-10-04, „kolorowa niebieska"): wypełnienie --gw-a → --gw-b, znak --gw-na, napis --gw-txt */
  --gw-a:#5aa8ff;--gw-b:#1f5fe0;--gw-rgb:74,150,255;--gw-txt:#9cc8ff;--gw-na:#ffffff;
  --ic2-a:rgba(11,101,106,.78);--ic2-b:rgba(8,57,64,.76);--ic3-a:rgba(10,90,42,.8);--ic3-b:rgba(5,48,31,.8);
  --limit-a:#8ff04a;
  --luna-a-rgb:70,240,86;--luna-b-rgb:56,220,104;--luna-c-rgb:52,214,120;--luna-d-rgb:50,210,150;
  --luna-e-rgb:140,255,64;--luna-f-rgb:70,235,150;--aur-rgb:120,245,58;
  --strzalka:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233dd9d4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --nag:#04080c;--nag-scroll:rgba(7,13,17,.93);--nag-legal:rgba(7,13,17,.88);--nag-zaslona:rgba(4,7,10,.62);--nag-linia:rgba(255,255,255,.055);--stopka-bg:transparent;--max:1200px;
  --fd:'Space Grotesk',sans-serif;--fb:'Inter',system-ui,sans-serif;
  --logo:url(logo-nav.webp);   /* plik zamiast base64: 330 KB mniej w każdej stronie, cache między stronami */
}
html[data-motyw="jasny"]{
  color-scheme:light;
  --bg:#f2f5f4;--bg-tel:#f2f5f4;--panel:#ffffff;--panel2:#f3f6f5;--card2:#f7f9f8;
  --line:rgba(16,32,28,.1);--line2:rgba(11,138,137,.22);--bright:rgba(11,138,137,.5);
  --cyan:#0b8a89;--cyan-rgb:11,138,137;--green:#1f9e3f;--green-rgb:31,158,63;--green2:#15803d;--green2-rgb:21,128,61;
  --grad-a:#0891b2;--grad-a-rgb:8,145,178;--grad-b:#16a34a;--grad-b-rgb:22,163,74;
  --gs:#0891b2 0%,#0891b2 20%,#16a34a 100%;--gsr:#16a34a 0%,#0891b2 80%,#0891b2 100%;
  --green-vivid:#16a34a;--cyan-vivid:#0891b2;
  --text:#12201b;--text2:#2b3c36;--muted:#5e736b;--dim:#7d8d88;
  --hi-rgb:16,32,28;--na-fill:#ffffff;
  --cien-rgb:16,32,28;--cien-k:.4;--glow-k:.35;--ziarno:.035;--zaslona:rgba(18,32,27,.5);
  --red:#d93a3a;--red-rgb:217,58,58;--red-txt:#b42323;--amber-rgb:234,138,20;--amber-txt:#8a4b06;
  --scr-a:#f7f9f8;--scr-b:#eef2f0;--scr-c:#e9eeec;--dot-ring:#f2f5f4;
  --kart-a:#ffffff;--kart-b:#f6f9f8;--kart2-a:#ffffff;--kart2-b:#f3f7f6;
  --f-a:#ffffff;--f-b:#f5f9f8;--f-c:#eef4f2;--f-hi:rgba(255,255,255,.9);--lp-a:#ffffff;--lp-b:#f4f8f7;
  --rim-a:#5fcfcb;--rim-b:#2fb9b5;--rim-c-rgb:31,158,63;--rim-d:#7fd39a;
  --rim-p1:30%;--rim-p2:16%;--rim-p3:42%;--rim-p4:24%;--rim-p5:24%;--rim-p6:10%;
  --price-a:rgba(11,138,137,.07);--price-b:rgba(255,255,255,.96);--price-c:rgba(255,255,255,.98);
  --story-a:#dfe9e6;--story-b:#cbd8d4;--photo-bg:#e4ebe9;--loop-c:rgba(255,255,255,.98);
  --sel-bg:#ffffff;--sel-list:#ffffff;--pole-bg:#ffffff;--ck-bg:rgba(255,255,255,.97);--kosz-bg:#fbeaea;
  --don1:#16a34a;--don2:#e0a01c;--don3:#e05555;--don4:#c9d3cf;
  --st1:#d92e2e;--st2:#d9601a;--st3:#a89a00;--st4:#1f9e3f;
  --ic1-c:#2f6fd1;--ic1-a:#dfe9fb;--ic1-b:#c9daf5;
  --gw-a:#3d8bff;--gw-b:#1748c6;--gw-rgb:37,99,235;--gw-txt:#1d4ed8;--gw-na:#ffffff;
  --ic2-a:#d8efee;--ic2-b:#c0e3e1;--ic3-a:#d9f2df;--ic3-b:#c1e8cb;
  --limit-a:#16a34a;
  --luna-a-rgb:22,163,74;--luna-b-rgb:22,163,74;--luna-c-rgb:13,148,136;--luna-d-rgb:13,148,136;
  --luna-e-rgb:22,163,74;--luna-f-rgb:13,148,136;--aur-rgb:22,163,74;
  --strzalka:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b8a89' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* Pasek z logo, nagłówek podstron, menu telefonu i stopka: od 2026-09-25 wieczorem JASNE (decyzja właściciela: „spróbujmy zmienić
     logo na jasne tło i użyć tego; zamień wszędzie, gdzie zostały kawałki ciemnego"), na tle ciut ciemniejszym niż strona, z logo
     o ciemnym napisie (logo-nav-jasne.webp, pochodna logo/duze_logo/bioverse-wordmark-jasny.svg). */
  /* Pasek nawigacji w kolorze tła strony (decyzja właściciela 2026-09-25 późnym wieczorem: „nav bar na stronie głównej niech
     będzie taki jak tło strony"; wcześniej #e6ecea, ciut ciemniej). Stopka zostaje ciut ciemniejsza. */
  --nag:#f2f5f4;--nag-scroll:rgba(242,245,244,.93);--nag-legal:rgba(242,245,244,.88);--nag-zaslona:rgba(18,32,27,.45);--nag-linia:rgba(16,32,28,.1);
  --stopka-bg:#e6ecea;--logo:url(logo-nav-jasne.webp);
}
/* (do 2026-09-25 stał tu blok ciemnych tokenów dla .site-header, .legal-header i footer w obu motywach; zdjęty decyzją
   właściciela: w jasnym motywie te miejsca są jasne, tło z --nag / --stopka-bg, logo z --logo) */
/* overflow-x:clip (NIE hidden): ucina boczne wystawanie transformowanych elementow
   (slajdy pokazu, luny) bez tworzenia kontenera przewijania — position:sticky paska
   dziala dalej (hidden na html/body psul sticky, patrz saga menu na iOS) */
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip}
body{margin:0;background:radial-gradient(120% 90% at 82% 0%,rgba(var(--cyan-rgb),.032),transparent 55%),radial-gradient(110% 85% at 4% 30%,rgba(var(--green-rgb),.024),transparent 52%),var(--bg);
  color:var(--text);font-family:var(--fb);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
/* subtelne ziarno (dithering) — rozbija „pasy"/banding na dużych, ciemnych gradientach; pointer-events:none, nie blokuje klików */
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:var(--ziarno);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}
section{padding:92px 0}
/* wiekszy oddech miedzy hero a Petla (na zyczenie) */
/* #metoda (Pętla) zdjęta ze strony głównej 2026-10-02 wieczorem; w jej miejscu #bledy */
h1,h2,h3{margin:0;font-family:var(--fd);font-weight:700;line-height:1.1}
h1{font-size:clamp(2.15rem,4.4vw,3.7rem);letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.025em}
h3{font-size:1.12rem;letter-spacing:-.01em}
p{margin:0}
.muted{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--cyan);font-family:var(--fd);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem}
.eyebrow:before{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}
/* ⛔ Gradient w napisach STATYCZNY (decyzja właściciela 2026-09-21: „tak samo gradient pływający
   w napisach, ma być statyczny"), tak jak przycisk w hero. Zdjęta animacja `gradShift`, a szerokość
   tła z 230 % na 100 %, żeby w napisie widać było CAŁE przejście barw, a nie jego wycinek. */
.grad{background:linear-gradient(96deg,var(--grad-b),var(--green2),var(--gs));background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
/* nagłówki sekcji ZAWSZE wyśrodkowane — na desktopie i na telefonie (decyzja: spójny rytm strony).
   Klasa .center jest od tej pory zbędna, ale zostaje w HTML jako nieszkodliwa. */
/* kontener szerszy (980), żeby nagłówki nie łamały się mimo wolnego miejsca;
   akapity wracają do wąskiej, czytelnej kolumny własnym limitem */
.sec-head{max-width:980px;margin:0 auto 2.6rem;text-align:center}
.sec-head p{color:var(--muted);margin:.9rem auto 0;font-size:1.02rem;max-width:760px}

.btn{min-height:50px;padding:0 1.4rem;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--fd);font-weight:600;font-size:.95rem;border:1px solid var(--line);background:rgba(var(--hi-rgb),.025);color:var(--text);transition:.22s;cursor:pointer}
.btn svg{width:17px;height:17px}
.btn:hover{transform:translateY(-2px);border-color:var(--bright)}
.btn-primary{color:var(--na-fill);border:0;background:linear-gradient(96deg,var(--gs));box-shadow:0 12px 34px rgba(var(--cyan-rgb),calc(.2*var(--glow-k)))}
/* ⛔ Przycisk „Wypróbuj za darmo" w hero BEZ poświaty i BEZ pulsowania (decyzja właściciela 2026-09-21:
   „usuń podświetlenie tego przycisku, na pewno nie może być animowana pulsacja podświetlenia, statyczne,
   zrób bez podświetlenia w ogóle, ale tylko tego przycisku"). Zdjęta też animacja `ctaPulse`, bo nic innego
   jej nie używało. Pozostałe przyciski w gradiencie marki (Zaloguj się, Wybieram …)
   zostają z cieniem. */
.hero-actions .btn-primary,.hero-actions .btn-primary:hover{box-shadow:none}
.btn-primary:hover{box-shadow:0 18px 44px rgba(var(--green-rgb),calc(.32*var(--glow-k)))}

/* SEKCJA APLIKACJA — makiety laptopa i tabletu (HTML/CSS, bez obrazków).
   Ramki urządzeń: niemal czarne (#0b0f13) z cienkim 1px rozświetleniem krawędzi (outline)
   — jasnoszare obwódki wyglądały jak ramki kart, nie sprzęt. */
.dev-stage{position:relative;margin-top:2.8rem}
/* POKAZ: slajdy leżą jeden na drugim, a przejście to prawdziwy odjazd W BOK — wchodzący
   wsuwa się z prawej (przy cofaniu z lewej), gasnący odpływa DALEKO w przeciwną stronę
   (42% szerokości kadru). Oba są widoczne przez cały czas przejścia, więc pusty kadr nie
   może wystąpić. Kierunek zadaje JS zmienną --tx; JS ustawia też z-index: wchodzący ZAWSZE
   nad gasnącym — bez tego slajd późniejszy w DOM (telefon) malował się na wierzchu i jego
   duch „przebijał" przez wjeżdżający laptop. */
.dev-track{position:relative;z-index:1;height:520px}
.dev-slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;
  transform:translateX(var(--tx,42%)) scale(.985);pointer-events:none;
  transition:opacity .22s ease-out,transform .6s cubic-bezier(.3,.7,.25,1),visibility 0s .3s}
/* wchodzący rozjaśnia się szybko (.28s) i jedzie nad gasnącym — gasnący gaśnie w trakcie
   odjazdu, zanim dojedzie do skraju, więc nie zostawia ducha na sąsiedniej pozycji */
.dev-slide.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .1s ease,transform .6s cubic-bezier(.3,.7,.25,1)}
.dev-phone{--s:.84;width:300px;height:calc(600px * var(--s));transform:scale(var(--s));transform-origin:top center}
/* w suwaku ekran telefonu jest STATYCZNY (inaczej niż w hero, gdzie przewija się przez
   widoki apki) — tu przesuwa się już cały suwak, dwa ruchy naraz tylko męczą oko */
.dev-slide .screens{animation:none;transform:none}
.dev-slide .phone{animation:floatD 6.5s ease-in-out infinite}
@keyframes floatD{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.dev-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:.5rem;margin-top:.6rem}
.dev-dots button{cursor:pointer;font-family:var(--fd);font-size:.78rem;font-weight:600;letter-spacing:.01em;
  padding:.42rem 1.05rem;border-radius:999px;border:1px solid var(--line);background:rgba(var(--hi-rgb),.02);
  color:var(--muted);transition:color .25s,border-color .25s,background .25s}
.dev-dots button:hover{color:var(--text)}
.dev-dots .on{color:var(--na-fill);border-color:transparent;background:linear-gradient(96deg,var(--gsr))}
@media(prefers-reduced-motion:reduce){.dev-slide{transition:opacity .2s ease}.dev-slide .phone{animation:none}}
/* PODŚWIETLENIE SCENY — ta sama konstrukcja co za telefonem w hero: szeroka miękka łuna
   (głębia) plus ciasne jaśniejsze jądro tuż za urządzeniami (podbija krawędzie ramek).
   blur() dokłada rozmycie ponad sam gradient, więc światło nie ma widocznej granicy. */
.dev-stage:before,.dev-stage:after{content:"";position:absolute;left:50%;top:43%;border-radius:50%;pointer-events:none;z-index:0}
.dev-stage:before{width:96%;height:118%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(var(--luna-a-rgb),calc(.44*var(--glow-k))),rgba(var(--luna-b-rgb),calc(.22*var(--glow-k))) 30%,rgba(var(--luna-c-rgb),calc(.08*var(--glow-k))) 50%,rgba(var(--luna-d-rgb),calc(.027*var(--glow-k))) 68%,transparent 90%);
  filter:blur(44px)}
.dev-stage:after{width:58%;height:74%;transform:translate(-52%,-52%);
  background:radial-gradient(closest-side,rgba(var(--luna-e-rgb),calc(.36*var(--glow-k))),rgba(var(--luna-f-rgb),calc(.14*var(--glow-k))) 40%,rgba(var(--luna-f-rgb),calc(.045*var(--glow-k))) 62%,transparent 88%);
  filter:blur(56px)}

/* LAPTOP — budowany warstwami jak urządzenie:
   .laptop-lid    szyna klapy (aluminium): jasna krawędź górna i dwie boczne, do tego
                  barwne odblaski od poświaty sceny (zieleń z dołu-lewej, cyjan z góry-prawej)
   .laptop-screen czarna ramka ekranu (border) + wyświetlacz
   .dev-gloss     odblask szkła nad treścią
   .laptop-base   podstawa widziana z boku: aluminiowy klin z rozjaśnioną górną krawędzią,
                  wcięciem na palec i cieniem kontaktowym pod spodem */
.laptop{width:min(720px,84%);position:relative;z-index:1}
.laptop-lid{position:relative;padding:3px 3px 0;border-radius:21px 21px 0 0;
  background:
    linear-gradient(35deg,rgba(var(--green-rgb),.16),rgba(var(--green-rgb),0) 28%),
    linear-gradient(215deg,rgba(var(--cyan-rgb),.09),rgba(var(--cyan-rgb),0) 26%),
    linear-gradient(90deg,rgba(255,255,255,.13),rgba(255,255,255,0) 2.2%),
    linear-gradient(270deg,rgba(255,255,255,.13),rgba(255,255,255,0) 2.2%),
    linear-gradient(180deg,#5d6c74,#232c33 2.2%,#141b21 55%,#0e151a);
  box-shadow:0 38px 80px -28px rgba(var(--cien-rgb),calc(.95*var(--cien-k))),0 0 100px rgba(var(--green-rgb),calc(.18*var(--glow-k))),0 0 56px rgba(var(--cyan-rgb),calc(.05*var(--glow-k)))}
/* oczko kamery w górnej ramce — detal, który urealnia makietę */
.lap-cam{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 34% 30%,#2b515e,#03080b 62%);box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.laptop-screen{container-type:inline-size;position:relative;border:11px solid #0b1015;border-bottom-width:15px;
  border-radius:18px 18px 0 0;background:var(--scr-c);overflow:hidden}
.laptop-base{position:relative;height:15px;margin:0 -5.2%;border-radius:3px 3px 13px 13px;
  background:linear-gradient(180deg,#3c464d,#1e262c 14%,#111820 58%,#070c10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.85),0 22px 34px -16px rgba(var(--cien-rgb),calc(.92*var(--cien-k)))}
/* wcięcie na palec z przodu podstawy */
.laptop-base:after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:15%;height:5px;
  background:#05090c;border-radius:0 0 9px 9px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.09)}
/* cień kontaktowy — „stawia" laptop na podłożu sceny */
.laptop-base:before{content:"";position:absolute;left:3%;right:3%;bottom:-14px;height:24px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 0,rgba(0,0,0,.7),transparent 74%);filter:blur(5px)}
/* wspólny odblask szkła laptopa i tabletu: ukośna smuga światła plus cień pod krawędzią
   (ekran wpuszczony w ramkę). Osobna warstwa NAD treścią, inaczej zakryłby ją interfejs. */
.dev-gloss{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(128deg,rgba(255,255,255,.07),rgba(255,255,255,.03) 15%,rgba(255,255,255,0) 34%,
    rgba(255,255,255,0) 66%,rgba(255,255,255,.022) 84%,rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 8px 20px rgba(0,0,0,.5),inset 0 -8px 20px rgba(0,0,0,.45)}
/* LAPTOP = zadanie z arkusza jak w apce na desktopie (właściciel 2026-10-02: „pokaż zadanie jak na zrzucie, ale zmniejsz
   czcionki i zdjęcie, żeby się zmieściło wszystko"): pasek z „Lista zadań", tytułem arkusza i pagerem, wprowadzenie
   z fotografią po lewej, podpunkty po prawej. Wszystko w cqw szerokości ekranu, więc kadr 16:10 mieści całość w każdym rozmiarze. */
.lap-ui{aspect-ratio:16/10;overflow:hidden;display:flex;flex-direction:column;font-size:1.2cqw;line-height:1.42;color:var(--text);text-align:left}
.lap-ava{width:2.5cqw;height:2.5cqw;border-radius:50%;background:linear-gradient(96deg,var(--gs));flex:none;
  color:var(--na-fill);display:grid;place-items:center;font-weight:700;font-size:1.2cqw}
.lzt{display:flex;align-items:center;gap:1.2cqw;padding:1.1cqw 2cqw;border-bottom:1px solid var(--line);background:rgba(var(--hi-rgb),.02);flex:none;min-width:0}
.lzt-ic{width:2.3cqw;height:2.3cqw;display:grid;place-items:center;color:var(--muted);flex:none}
.lzt-ic svg{width:1.7cqw;height:1.7cqw}
.lzt-back{border:1px solid var(--line);border-radius:0.8cqw;padding:0.4cqw 1cqw;font-weight:600;font-size:1.05cqw;white-space:nowrap;flex:none}
.lzt-ti{font-family:var(--fd);font-size:1.25cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lzt-pg{display:flex;align-items:center;gap:0.7cqw;margin-left:auto;font-weight:700;font-size:1.1cqw;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
.lzt-pg i{font-style:normal;width:2.1cqw;height:2.1cqw;border:1px solid var(--line);border-radius:0.6cqw;display:grid;place-items:center;color:var(--muted)}
.lzt-ikony{display:flex;align-items:center;gap:0.5cqw;margin-left:1.2cqw;flex:none}
.lz-cols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.1fr;gap:1.4cqw;padding:1.4cqw 2cqw;align-items:start}
.lz-cols>*{min-width:0}   /* bez tego treść kart rozpycha siatkę poza ekran laptopa */
.lz-card{border:1px solid var(--line);background:rgba(var(--hi-rgb),.025);border-radius:1.344cqw;padding:1.344cqw 1.568cqw;min-width:0}
.lz-badge{display:inline-block;font-family:var(--fd);font-weight:800;font-size:1.142cqw;color:var(--green);text-transform:uppercase;letter-spacing:.04em;
  border:1px solid rgba(var(--green-rgb),.4);border-radius:0.784cqw;padding:0.112cqw 0.728cqw;background:rgba(var(--green-rgb),.06);white-space:nowrap}
.lz-wst p{margin:0.728cqw 0 0;font-size:1.142cqw;line-height:1.45;color:var(--text2)}
.lz-foto{display:block;width:44%;height:auto;margin:1.008cqw 0 0;border-radius:0.784cqw;background:rgba(var(--hi-rgb),.06)}
.lz-zr{display:inline-block;margin-top:0.392cqw;font-size:1.008cqw;color:var(--dim)}
.lz-zad{display:flex;flex-direction:column;gap:1.344cqw}
.lz-head{display:flex;align-items:center;gap:0.672cqw}
.lz-pill,.lz-pkt{border:1px solid var(--line);border-radius:99px;padding:0.112cqw 0.84cqw;font-size:1.03cqw;font-weight:700;color:var(--muted);white-space:nowrap}
.lz-pkt{margin-left:auto;color:var(--text);font-weight:800;background:rgba(var(--hi-rgb),.07)}
.lz-acts{display:flex;align-items:center;margin-top:0.896cqw}
.lz-gh,.lz-star{display:inline-flex;align-items:center;gap:0.448cqw;border:1px solid var(--line);border-radius:0.784cqw;padding:0.336cqw 0.952cqw;font-size:1.064cqw;font-weight:600;white-space:nowrap}
.lz-star{margin-left:auto;color:var(--muted);font-weight:700}
.lz-gh svg{width:1.232cqw;height:1.232cqw;flex:none}
.lz-q{margin:0.896cqw 0 0;font-size:1.254cqw;line-height:1.45}
.lz-field{margin-top:0.896cqw;border:1px solid var(--line2);border-radius:0.896cqw;padding:0.896cqw 1.12cqw;height:5.152cqw;color:var(--dim);font-size:1.142cqw;background:rgba(var(--hi-rgb),.02)}
.lz-btns{display:flex;gap:0.672cqw;margin-top:0.896cqw}
.lz-cta{border-radius:0.784cqw;padding:0.336cqw 1.68cqw;font-family:var(--fd);font-weight:700;font-size:1.098cqw;color:var(--na-fill);background:linear-gradient(96deg,var(--gsr));display:inline-flex;align-items:center}
/* Ekran laptopa węższy niż 600 px (telefon, mały tablet): pełne zadanie w 16:10 dałoby czcionkę poniżej 6 px, której
   przeglądarka nie rysuje czytelnie. Zostaje to samo zadanie w czytelnej skali: wprowadzenie od zdjęcia, tekst urwany
   miękko u dołu karty, z prawej sam pierwszy podpunkt; w pasku „Lista zadań", pager i awatar. */
@container (max-width:599px){
  .lap-ui{font-size:2.1cqw}
  .lzt{gap:2cqw;padding:1.8cqw 3cqw}
  .lzt-ti,.lzt-ikony .lzt-ic,.lzt>.lzt-ic{display:none}
  .lzt-back{font-size:2cqw;padding:0.6cqw 1.6cqw;border-radius:1.4cqw}
  .lzt-pg{font-size:2cqw;gap:1.2cqw}
  .lzt-pg i{width:3.6cqw;height:3.6cqw;border-radius:1cqw}
  .lap-ava{width:4.4cqw;height:4.4cqw;font-size:2cqw}
  .lz-cols{grid-template-columns:1fr 1.15fr;grid-template-rows:minmax(0,1fr);align-items:stretch;gap:2.2cqw;padding:2.2cqw 3cqw}
  .lz-card{border-radius:2cqw;padding:2cqw 2.2cqw}
  .lz-wst{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .lz-badge{font-size:1.75cqw;border-radius:1.2cqw;padding:0.2cqw 1.1cqw}
  .lz-foto{order:-1;width:100%;margin:0 0 1.6cqw;border-radius:1.2cqw}
  .lz-wst .lz-badge{order:-2;margin-bottom:1.6cqw}
  .lz-wst p{font-size:1.9cqw;margin-top:0}
  .lz-zr{display:none}
  .lz-card+.lz-card{display:none}
  .lz-zad{gap:0}
  .lz-pill,.lz-pkt{font-size:1.65cqw;padding:0.2cqw 1.2cqw}
  .lz-head{gap:1cqw}
  .lz-acts{margin-top:1.4cqw}
  .lz-gh,.lz-star{font-size:1.7cqw;padding:0.5cqw 1.4cqw;border-radius:1.2cqw;gap:0.7cqw}
  .lz-gh svg{width:2cqw;height:2cqw}
  .lz-q{font-size:2cqw;margin-top:1.4cqw}
  .lz-field{font-size:1.85cqw;height:8cqw;margin-top:1.4cqw;padding:1.3cqw 1.6cqw;border-radius:1.4cqw}
  .lz-btns{gap:1cqw;margin-top:1.4cqw}
  .lz-cta{font-size:1.8cqw;padding:0.6cqw 2.6cqw;border-radius:1.2cqw}
}
/* tablet OBOK laptopa (bez nachodzenia — zasłaniał prawą kartę kokpitu), wspólna linia dolna */
/* TABLET — ta sama konstrukcja co telefon w hero: szyna z gradientu STOŻKOWEGO (refleks
   zależny od kąta, jak na obręczy aparatu), barwne odblaski od poświaty sceny, pod spodem
   czarna ramka i wyświetlacz, na wierzchu wspólny .dev-gloss. */
.tablet{position:relative;width:min(352px,54%);z-index:2;padding:3px;border-radius:23px;
  background:
    linear-gradient(35deg,rgba(var(--green-rgb),.24),rgba(var(--green-rgb),0) 32%),
    linear-gradient(215deg,rgba(var(--cyan-rgb),.11),rgba(var(--cyan-rgb),0) 28%),
    conic-gradient(from 200deg at 50% 50%,#1b2227,#4a565d 3%,#77878f 5%,#2c353b 9%,#0d1317 18%,
      #232c32 27%,#5f6f77 33%,#333d44 38%,#0f151a 48%,#28323a 58%,#6b7b83 64%,#343e45 69%,
      #0c1216 78%,#2b353b 86%,#86979f 92%,#39444b 95%,#1b2227);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.7),
    0 30px 56px -22px rgba(var(--cien-rgb),calc(.95*var(--cien-k))),0 0 88px rgba(var(--green-rgb),calc(.19*var(--glow-k))),0 0 46px rgba(var(--cyan-rgb),calc(.05*var(--glow-k)))}
.tablet-frame{container-type:inline-size;position:relative;border:9px solid #0b1015;border-radius:20px;background:var(--scr-c);overflow:hidden}
/* TABLET = ekran „Działy biologii" z apki (2026-10-02): pasek z „← Ćwicz", filtry, sortowanie, siatka kafli działów w dwóch
   kolumnach (jak dz-grid w apce: ikona, nazwa, liczba zadań, procent, pasek, „Kontynuuj →"). Wszystko w cqw ramki, czwarty
   rząd kafli gaśnie miękko u dołu ekranu (działów jest więcej niż mieści się na ekranie). */
.tab-ui{aspect-ratio:3/4;overflow:hidden;padding:3.6cqw 3.8cqw 0;font-size:3cqw;line-height:1.35;color:var(--text);display:flex;flex-direction:column;gap:2.4cqw;text-align:left}
.tdz-top{display:flex;align-items:center;gap:2cqw;padding-bottom:2.4cqw;border-bottom:1px solid var(--line)}
.tdz-back{border:1px solid var(--line);border-radius:2cqw;padding:0.8cqw 2cqw;font-weight:700;font-size:2.7cqw;white-space:nowrap;flex:none}
.tdz-ti{display:flex;flex-direction:column;min-width:0;flex:1}
.tdz-ti b{font-family:var(--fd);font-size:3.5cqw;line-height:1.2;white-space:nowrap}
.tdz-ti i{font-style:normal;color:var(--muted);font-size:2.6cqw}
.tdz-ik{width:5.4cqw;height:5.4cqw;display:grid;place-items:center;color:var(--muted);flex:none}
.tdz-ik svg{width:4.2cqw;height:4.2cqw}
.tdz-ava{width:6.4cqw;height:6.4cqw;border-radius:50%;background:linear-gradient(96deg,var(--gs));color:var(--na-fill);display:grid;place-items:center;font-weight:700;font-size:3cqw;flex:none}
.tdz-seg{display:flex;gap:1.4cqw}
.tdz-seg span{border:1px solid var(--line);border-radius:1.8cqw;padding:0.9cqw 2.2cqw;font-weight:700;font-size:2.6cqw;color:var(--muted);white-space:nowrap}
.tdz-seg .on{background:linear-gradient(96deg,var(--gsr));border-color:transparent;color:var(--na-fill)}
.tdz-tools{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.tdz-sort{border:1px solid var(--line);border-radius:1.8cqw;padding:0.9cqw 2.2cqw;font-size:2.6cqw;color:var(--muted);white-space:nowrap}
.tdz-sort b{color:var(--text);font-weight:600}
.tdz-view{display:flex;gap:0.8cqw;border:1px solid var(--line);border-radius:1.8cqw;padding:0.8cqw}
.tdz-view i{width:5cqw;height:5cqw;border-radius:1cqw;display:grid;place-items:center;color:var(--muted)}
.tdz-view i.on{background:rgba(var(--green-rgb),.14);color:var(--green)}
.tdz-view svg{width:3.4cqw;height:3.4cqw}
.tdz-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;align-content:start;flex:1;min-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
.tdz-card{border:1px solid var(--line);border-radius:3cqw;padding:2.6cqw 2.8cqw;display:flex;flex-direction:column;gap:2cqw;min-width:0;
  background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
.tdz-hd{display:flex;align-items:center;gap:2.2cqw;min-width:0}
.tdz-ic{width:8.4cqw;height:8.4cqw;border-radius:50%;border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);display:grid;place-items:center;color:var(--cyan);flex:none}
.tdz-ic svg{width:4.6cqw;height:4.6cqw}
.tdz-nm{display:flex;flex-direction:column;min-width:0}
.tdz-nm b{font-family:var(--fd);font-size:3cqw;line-height:1.2}
.tdz-nm i{font-style:normal;color:var(--muted);font-size:2.5cqw}
.tdz-pr{display:flex;align-items:center;gap:1.8cqw}
.tdz-pct{font-family:var(--fd);font-weight:700;font-size:2.7cqw;color:var(--green);flex:none}
.tdz-bar{flex:1;height:0.9cqw;border-radius:99px;background:rgba(var(--hi-rgb),.09);overflow:hidden}
.tdz-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gs))}
.tdz-go{display:flex;align-items:center;justify-content:space-between;font-family:var(--fd);font-weight:700;font-size:2.7cqw;color:var(--green)}
.tdz-arr{width:5.2cqw;height:5.2cqw;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--text);font-size:2.6cqw}

/* header */
/* header wtopiony w hero: przezroczysty na górze; przy scrollu delikatna, rozmyta warstwa z miękkim zanikiem u dołu (jak neurify).
   Chowa się przy przewijaniu w dół, wraca przy przewijaniu w górę (jak w apce FB). */
/* will-change: pasek ma WŁASNĄ warstwę kompozytora — bez tego iOS Safari maluje go
   na głównym wątku, który przy przewijaniu z rozpędem stoi, więc przejście transform
   „odtwarzało się" bez klatek i pasek wyskakiwał twardo zamiast się wysunąć */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .35s ease;will-change:transform}
.site-header.hide{transform:translateY(calc(-100% - 30px))}
/* ⛔ ŻADNYCH osobnych warstw kryjących pas statusu i żadnych zasłon na elementach FIXED
   (tarcza, cień, zapas tła — wszystkie przegrały z kotwiczeniem viewportu na iOS).
   Na telefonie pasek jest STICKY (warstwa przewijania), a pas statusu kryje jego
   ::before — uzasadnienie w bloku @media(max-width:800px). */
.site-header:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:var(--nag-scroll);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  -webkit-mask:linear-gradient(180deg,#000 88%,transparent);mask:linear-gradient(180deg,#000 88%,transparent)}
/* ::before = desktopowa warstwa paska przy scrollu (na telefonie wyłączona w media ≤800px) */
.site-header.scrolled:before{opacity:1}
/* JASNY motyw: warstwa tła paska widoczna od razu (nad jasnym hero przezroczysty pasek zostawiałby napisy bez tła);
   w ciemnym jak dotąd wtapia się w hero i pojawia dopiero przy przewijaniu. */
html[data-motyw="jasny"] .site-header:before{opacity:1}
.site-header .nav{position:relative;z-index:1}
/* menu otwarte: sama warstwa ::before jest pełna i nieprzezroczysta (#04080c), spójna z panelem menu.
   Kluczowe: przy zamykaniu opacity ::before ZOSTAJE 1 (schodzi tylko na górze strony, gdzie za nim i tak jest to samo tło),
   więc pasek nigdy nie „mignie" na 100% przezroczysty — zmienia się tylko tło ::before na wersję ze scrolla. */
.site-header.menu-open:before{opacity:1;background:var(--nag);backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-mask:none;mask:none}
.site-header.menu-open{transform:none}   /* otwarte menu: nagłówek nigdy nie jest schowany (po .hide w kaskadzie) */
/* otwarte menu blokuje przewijanie DOTYKIEM (touch-action), celowo BEZ overflow:hidden:
   overflow:hidden na html/body wyłącza sticky i pasek z otwieranym menu teleportował się
   do swojej pozycji w dokumencie — poza ekran (menu „nie rozwijało się"). touch-action:none
   zatrzymuje gesty przewijania, a tapnięcia w pozycje menu działają normalnie. */
html.menu-lock,body.menu-lock{overscroll-behavior:none}
body.menu-lock{touch-action:none}
/* przyciemnienie reszty strony pod otwartym menu (klik w nie zamyka menu — obsługa w JS).
   position:absolute + 100vh od góry przypiętego paska daje pełny ekran (menu otwiera się
   tylko przy widocznym pasku); fixed u potomka nagłówka bywał zawodny na Safari. */
.site-header.menu-open:after{content:"";position:absolute;left:0;right:0;top:0;height:100vh;z-index:-1;
  background:var(--nag-zaslona);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.nav{min-height:74px;display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:2.2rem}
/* PRZEŁĄCZNIK MOTYWU (2026-09-25): ikona słońca w ciemnym, księżyca w jasnym, jak w apce (.bv-motyw-btn) */
.motyw-btn{width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;
  border:1px solid rgba(var(--hi-rgb),.14);background:rgba(var(--hi-rgb),.04);color:var(--text);cursor:pointer;padding:0;transition:border-color .2s,color .2s}
.motyw-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.motyw-btn svg{width:20px;height:20px;display:block}
.motyw-btn .ik-ksiezyc{display:none}
html[data-motyw="jasny"] .motyw-btn .ik-ksiezyc{display:block}
html[data-motyw="jasny"] .motyw-btn .ik-slonce{display:none}
.legal-prawa{display:flex;align-items:center;gap:1rem}
.logo{width:224px;height:48px;background:var(--logo) left center/contain no-repeat;display:block}
.nav-links{justify-self:end;display:flex;align-items:center;gap:2.4rem;color:var(--text);font-family:var(--fd);font-size:1.02rem;font-weight:500}
.nav-links a{position:relative;padding:4px 0}
.nav-links a:hover{color:var(--green)}
.nav-links a[aria-current="page"]:not(.btn){color:var(--green)}   /* zakładka Platforma: bieżąca pozycja menu */
.nav-cta{display:none}
.nav-inner{display:contents}
.menu-btn{display:none;background:none;border:0;color:var(--text);font-size:1.4rem}

/* hero */
.hero{padding:124px 0 64px;position:relative;overflow:hidden}
/* AURORA — dwa źródła światła sceny: cyjanowe od góry-prawej (nad makietą) i zielone
   od dołu-lewej (pod nagłówkiem). Gradienty mają po cztery przystanki zamiast dwóch:
   światło gaśnie ŁAGODNIE, bez „obręczy" na krawędzi plamy, którą widać przy prostym
   radial-gradient na ciemnym tle. Każda plama w innym rytmie, więc się nie synchronizują. */
.hero:before{content:"";position:absolute;top:-26%;right:-4%;width:720px;height:720px;max-width:84%;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--cyan-rgb),.16),rgba(var(--cyan-rgb),.08) 30%,rgba(var(--cyan-rgb),.03) 52%,transparent 74%);pointer-events:none;animation:aur1 18s ease-in-out infinite;will-change:transform}
.hero:after{content:"";position:absolute;bottom:-34%;left:-14%;width:700px;height:700px;max-width:84%;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--aur-rgb),.155),rgba(var(--aur-rgb),.058) 32%,rgba(var(--aur-rgb),.020) 54%,transparent 74%);pointer-events:none;animation:aur2 23s ease-in-out infinite;will-change:transform;
  -webkit-mask:linear-gradient(180deg,#000 18%,transparent 52%);mask:linear-gradient(180deg,#000 18%,transparent 52%)}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-48px,36px) scale(1.18)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(54px,-32px) scale(1.12)}}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.16fr 1fr;gap:48px;align-items:center}
.hero-copy p.lead{margin-top:1.2rem;max-width:520px;font-size:1.06rem;color:var(--text2)}
.hero-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.05rem;margin-bottom:1.3rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--green) 48%,transparent);background:color-mix(in srgb,var(--green) 6%,transparent);
  box-shadow:0 0 24px -8px rgba(var(--green-rgb),calc(.55*var(--glow-k))),inset 0 0 16px -9px rgba(var(--green-rgb),.5);
  font-family:var(--fd);font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--text)}
.hero-badge em{font-style:normal;color:var(--green)}
.hero-badge svg{width:16px;height:16px;color:var(--green);filter:drop-shadow(0 0 5px rgba(var(--green-rgb),calc(.8*var(--glow-k))))}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.9rem}
/* Odznaka Trustpilot pod przyciskami hero (właściciel 2026-10-02, własny kafel „w stylu TrustBoxa", bo TrustBox jest
   w planie płatnym): „Nasza ocena to X na 5", pięć kafelków z gwiazdką (zielone wypełnienie = ocena, reszta szara) i znak
   Trustpilot; bez linii z liczbą opinii (właściciel). Kolory kafelków i znaku to barwy marki Trustpilot (wytyczne
   Trustpilot wymagają ich zieleni), świadomy wyjątek od tokenów motywu, jednakowy w obu motywach jak sprzęt makiet.
   Bez oceny (TRUSTPILOT_OCENA = None) zostaje sam odnośnik `.hero-tp-pusty`. */
.hero-tp{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.45rem;margin-top:1.25rem;font-family:var(--fd);
  color:var(--text);text-decoration:none;transition:opacity .2s}
.hero-tp:hover{opacity:.85}
.tp-txt{font-size:.92rem;font-weight:500;letter-spacing:.005em}
.tp-txt b{font-weight:800}
.tp-row{display:inline-flex;align-items:center;gap:.7rem}
.tp-stars{position:relative;display:inline-flex;gap:3px;flex:none}
.tp-stars i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;background:var(--tp-szary)}
.tp-stars i svg{width:17px;height:17px;fill:#fff}
.tp-fill{position:absolute;inset:0;overflow:hidden;width:var(--tp-w);white-space:nowrap}
.tp-fill span{display:inline-flex;gap:3px}
.tp-fill i{background:var(--tp)}
.tp-logo{display:inline-flex;align-items:center;gap:.3rem;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.tp-logo svg{width:20px;height:20px;fill:var(--tp);flex:none}
.hero-tp-pusty{flex-direction:row;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:var(--text2)}
.hero-tp-pusty .tp-logo{font-size:.95rem}
.hero-tp-pusty:hover{opacity:1;color:var(--text)}
.lead-ak{color:var(--green);font-weight:600}
/* BLOK AUTORA pod H1 (2026-10-02, właściciel: „Stworzony przez biologa i przyszłego lekarza… opraw to jakoś ładnie graficznie"):
   dwie okrągłe ikony zachodzące na siebie (mikroskop, stetoskop) w gradientowej obwódce marki + zdanie; na tablecie i telefonie
   blok jest inline-flex, więc staje na środku razem z resztą hero */
.hero-autor{display:inline-flex;align-items:center;gap:.75rem;margin:1.25rem 0 0;padding:.4rem .95rem .4rem .45rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(var(--hi-rgb),.03);font-family:var(--fd);font-size:.95rem;line-height:1.3;color:var(--muted)}
.hero-autor b{color:var(--text);font-weight:600}
.ha-foto{display:inline-flex;flex:none;width:44px;height:44px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--cyan),var(--green))}
.ha-foto img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:var(--panel)}
.ha-foto.brak{display:none}                      /* bez pliku na CDN wracają dwie ikony */
.ha-foto:not(.brak)+.ha-ik{display:none}
.ha-ik{display:inline-flex;flex:none}
.ha-ik i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--green);
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,var(--cyan),var(--green)) border-box;border:1.5px solid transparent;
  box-shadow:0 0 14px -6px rgba(var(--green-rgb),calc(.9*var(--glow-k)))}
.ha-ik i+i{margin-left:-10px;color:var(--cyan)}
.ha-ik svg{width:17px;height:17px}
.hero-copy .hero-autor+p.lead{margin-top:.85rem}
/* telefon: zdanie w dwóch liniach („Stworzony przez” mniejszym nad pogrubionym „biologa i przyszłego lekarza”), kapsuła → karta */
@media(max-width:600px){.hero-autor{border-radius:16px;gap:.65rem;padding:.5rem .85rem .5rem .5rem;font-size:.9rem}.ha-tx{text-align:left}.ha-k{display:block;font-size:.76rem}.ha-ik i{width:30px;height:30px}.ha-ik svg{width:15px;height:15px}.ha-foto{width:40px;height:40px}}
/* PAS WYNIKÓW pod hero (2026-10-02): trzy cytaty 1:1 z transkrypcji opinii, pseudonim i ocena 5/5 */
.dowody{padding:0 0 40px}
.dw-pas{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.dw-k{margin:0;display:flex;flex-direction:column;gap:.45rem;padding:1.05rem 1.2rem;border-radius:16px;border:1px solid var(--line);background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
.dw-gw{color:var(--green);font-size:.8rem;letter-spacing:.14em}
.dw-k blockquote{margin:0;font-size:.95rem;line-height:1.5;color:var(--text)}
.dw-k figcaption{color:var(--muted);font-size:.85rem;font-weight:600}
.dw-link{margin:.9rem 0 0;text-align:center;font-size:.9rem}
.dw-link a{color:var(--muted)}
.dw-link a:hover{color:var(--green)}
/* PASY WEZWAŃ w treści (pod lekcją, pod opiniami) i przycisk na dole ekranu (tablet i telefon) */
.cta-pas{margin-top:2.4rem;text-align:center}
.cta-pas .hero-actions{justify-content:center;margin-top:0}
.cta-dol{display:none}
/* Tylko PRZED zalogowaniem: po zalogowaniu ten sam element dostaje klasę bv-zal i ma być plakietką konta
   z gradientem marki (litera w kolorze --na-fill); bez :not(.bv-zal) tło zostawało przezroczyste i ciemna litera
   ginęła na ciemnym pasku (zgłoszenie właściciela 2026-10-02: „awatar prawie czarny"). */
.nav-zal:not(.bv-zal){background:transparent;color:var(--text);box-shadow:none;padding-left:.6rem;padding-right:.6rem}
.nav-zal:not(.bv-zal):hover{color:var(--green)}
html.bv-zalogowany .nav-demo,html.bv-zalogowany .nav-cta-demo,html.bv-zalogowany .cta-dol{display:none!important}
@media(max-width:359px){.hero-autor{font-size:.82rem}}
.btn-ghost{border-color:color-mix(in srgb,var(--green) 40%,transparent);background:color-mix(in srgb,var(--green) 5%,transparent)}
.btn-ghost:hover{border-color:var(--green)}

/* makieta */
.hero-mock{position:relative;perspective:1200px;display:grid;place-items:center}
/* PODŚWIETLENIE ZA TELEFONEM — główne światło sceny, dwie warstwy:
   :before  – szeroka, miękka łuna rozlana daleko poza urządzenie (buduje głębię),
   :after   – ciasne, jaśniejsze jądro tuż za obudową (to ono podbija krawędzie ramki).
   Do gradientu dokładamy blur(): rozmycie wygładza przejście mocniej, niż potrafi sam
   gradient, więc światło nie ma widocznej granicy. */
.hero-mock:before,.hero-mock:after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;z-index:0}
.hero-mock:before{width:124%;height:100%;
  background:radial-gradient(closest-side,rgba(var(--luna-a-rgb),calc(.40*var(--glow-k))),rgba(var(--luna-b-rgb),calc(.17*var(--glow-k))) 30%,rgba(var(--luna-c-rgb),calc(.065*var(--glow-k))) 50%,rgba(var(--luna-d-rgb),calc(.022*var(--glow-k))) 68%,transparent 90%);
  filter:blur(40px);animation:glowA 11s ease-in-out infinite}
.hero-mock:after{width:72%;height:74%;
  background:radial-gradient(closest-side,rgba(var(--luna-e-rgb),calc(.34*var(--glow-k))),rgba(var(--luna-f-rgb),calc(.13*var(--glow-k))) 40%,rgba(var(--luna-f-rgb),calc(.04*var(--glow-k))) 62%,transparent 88%);
  filter:blur(52px);animation:glowB 9s ease-in-out infinite}
@keyframes glowA{0%,100%{opacity:.86;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-52%) scale(1.05)}}
@keyframes glowB{0%,100%{opacity:.7;transform:translate(-50%,-46%) scale(1)}50%{opacity:1;transform:translate(-50%,-48%) scale(1.08)}}

/* TELEFON — budowany warstwami jak prawdziwe urządzenie.
   1) .phone       = szyna (metalowa ramka). Gradient STOŻKOWY zamiast liniowego, bo światło
      ślizga się po polerowanej krawędzi zależnie od KĄTA, nie od wysokości: stąd cztery
      ostre refleksy i cztery ciemne odcinki, jak na obręczy aparatu. Na wierzchu dwa
      barwne odblaski od poświaty tła (cyjan z góry-prawej, zieleń z dołu-lewej).
   2) cień: dwie warstwy czerni (bliski + daleki, oba przesunięte w dół) plus dwie warstwy
      barwnej łuny — telefon jednocześnie RZUCA cień i ZBIERA światło ze sceny.
   3) ekran przewija się przez 7 widoków apki (auto-scroll). */
.phone{position:relative;z-index:1;width:min(300px,80vw);height:600px;border-radius:48px;padding:3.5px;
  background:
    linear-gradient(35deg,rgba(var(--green-rgb),.27),rgba(var(--green-rgb),0) 30%),
    linear-gradient(215deg,rgba(var(--cyan-rgb),.14),rgba(var(--cyan-rgb),0) 28%),
    conic-gradient(from 200deg at 50% 50%,#1b2227,#4a565d 3%,#77878f 5%,#2c353b 9%,#0d1317 18%,
      #232c32 27%,#5f6f77 33%,#333d44 38%,#0f151a 48%,#28323a 58%,#6b7b83 64%,#343e45 69%,
      #0c1216 78%,#2b353b 86%,#86979f 92%,#39444b 95%,#1b2227);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 44px 68px -26px rgba(var(--cien-rgb),calc(.95*var(--cien-k))),
    0 16px 32px -14px rgba(var(--cien-rgb),calc(.9*var(--cien-k))),
    0 0 110px rgba(var(--green-rgb),calc(.22*var(--glow-k))),
    0 0 54px rgba(var(--cyan-rgb),calc(.07*var(--glow-k)));
  transform-style:preserve-3d;animation:floatP 7s ease-in-out infinite}
@keyframes floatP{0%,100%{transform:translate3d(0,0,0) rotate(-5deg)}50%{transform:translate3d(0,-16px,0) rotate(-2.5deg)}}
/* telefon w hero NIERUCHOMY (właściciel 2026-10-02: „niech będzie nieruchomy, a nie pływający”): sam przechył, bez floatP */
.hero-mock .phone{animation:none;transform:rotate(-5deg)}
/* GRAFIKA URZĄDZEŃ W HERO (HERO_GRAFIKA, 2026-10-05): obraz ma margines przezroczystego tła, więc rośnie nieco ponad kolumnę
   (.hero ma overflow:hidden, przewijania w bok nie ma); bez pliku na CDN klasa brak chowa obraz i pokazuje telefon */
.hero-graf{position:relative;display:grid;place-items:center}
.hero-graf>.hero-mock{display:none}
.hero-graf.brak>.hero-mock{display:grid}
.hero-graf.brak>.hero-img{display:none}
.hero-img{display:block;width:118%;max-width:none;height:auto;margin:-7% -9% -7% -9%;position:relative;z-index:1}
/* dwa pliki hero (2026-10-06): ciemny domyślnie, jasny w jasnym motywie; `.hero-graf.brak` wyżej chowa oba i pokazuje telefon */
.hero-img-j{display:none}
html[data-motyw="jasny"] .hero-img-j{display:block}
html[data-motyw="jasny"] .hero-img-c{display:none}
/* jedna kolumna (≤ 1040 px): grafika pod tekstem, najwyżej 640 px, bez wystawania (urządzenia sięgają prawie krawędzi obrazu) */
@media(max-width:1040px){.hero-img{width:min(100%,640px);margin:-3% auto -5%}}
/* przyciski boczne: wyciszenie i głośność +/− po lewej, blokada po prawej — wystają 3 px
   poza szynę i mają własny mikro-cień, więc czytają się jako element wypukły */
.phone__keys{position:absolute;inset:0;z-index:2;pointer-events:none}
.phone__keys i{position:absolute;display:block;width:3px}
.phone__keys .k-mute,.phone__keys .k-up,.phone__keys .k-dn{left:-3px;border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,#151b20,#5a6a72 55%,#1d242a);box-shadow:-1px 1px 2px rgba(var(--cien-rgb),calc(.85*var(--cien-k)))}
.phone__keys .k-mute{top:104px;height:26px}
.phone__keys .k-up{top:150px;height:52px}
.phone__keys .k-dn{top:214px;height:52px}
.phone__keys .k-pw{right:-3px;top:178px;height:76px;border-radius:0 2px 2px 0;
  background:linear-gradient(270deg,#151b20,#5a6a72 55%,#1d242a);box-shadow:1px 1px 2px rgba(var(--cien-rgb),calc(.85*var(--cien-k)))}
/* czarna obudowa pod szkłem = ciemna ramka między szyną a wyświetlaczem */
.phone__body{display:block;height:100%;border-radius:44.5px;padding:8px;background:#01050a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 6px rgba(0,0,0,.9)}
.phone__screen{position:relative;display:block;height:100%;border-radius:36px;overflow:hidden;background:var(--scr-c)}
/* odblask szkła: ukośna smuga światła + cień pod krawędzią (ekran wpuszczony w obudowę).
   Osobna warstwa NAD treścią, bo cień wewnętrzny samego ekranu zakryłaby przewijana makieta. */
.phone__gloss{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:36px;
  background:linear-gradient(128deg,rgba(255,255,255,.09),rgba(255,255,255,.04) 15%,rgba(255,255,255,0) 33%,
    rgba(255,255,255,0) 64%,rgba(255,255,255,.028) 82%,rgba(255,255,255,.065));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 10px 24px rgba(0,0,0,.5),inset 0 -10px 24px rgba(0,0,0,.45)}
.phone__notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:88px;height:24px;border-radius:99px;background:#000;z-index:7;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 1px 3px rgba(var(--cien-rgb),calc(.9*var(--cien-k)))}
/* oczko aparatu w wyspie — detal, który najbardziej „urealnia" makietę */
.phone__notch:after{content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#24485460,#03080b 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
/* 6 slotów = 5 ekranów + klon 1. na końcu (bezszwowa pętla). Każdy ekran PRZEWIJA się w następny. */
/* Rytm JEDNAKOWY dla każdego ekranu: postój 15% (2,7 s) + przejazd 5% (0,9 s).
   Postój STARTU jest rozcięty na pół przez zawinięcie pętli (klon trzyma 92,5-100%,
   oryginał 0-7,5%) — skok klon->oryginał wypada w POŁOWIE bezruchu na identycznej
   treści, więc żaden ekran nie stoi dłużej od innych i nic nie „przeskakuje".
   will-change trzyma warstwę na kompozytorze na stałe — bez rerasteryzacji
   (mignięcia) przy restarcie iteracji. */
.screens{height:600%;animation:scrollScreens 18s infinite cubic-bezier(.7,0,.3,1);will-change:transform}
@keyframes scrollScreens{0%,7.5%{transform:translateY(0)}12.5%,27.5%{transform:translateY(-16.6667%)}32.5%,47.5%{transform:translateY(-33.3333%)}52.5%,67.5%{transform:translateY(-50%)}72.5%,87.5%{transform:translateY(-66.6667%)}92.5%,100%{transform:translateY(-83.3333%)}}
/* translateZ(0): każdy ekran ma WŁASNĄ małą warstwę kompozytora, stale zrasteryzowaną.
   Bez tego cała taśma ekranów (300x3462 px) jest jedną wielką teksturą i przy skoku pętli
   o 5 slotów GPU potrafi nie mieć już kafli sprzed 18 s -> czarny ekran na klatkę. */
.app-screen{height:16.6667%;padding:42px 13px 12px;background:linear-gradient(180deg,var(--scr-a),var(--scr-b));display:flex;flex-direction:column;gap:8px;font-family:var(--fb);transform:translateZ(0)}
/* ekrany makiety = 1:1 z realną apką. Pasek zakładek (aktywna = zielona pigułka z ciemnym tekstem) */
.ph-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:rgba(var(--hi-rgb),.03);border:1px solid var(--line);border-radius:13px;padding:4px}
.ph-tabs span{padding:8px 0;text-align:center;font-family:var(--fd);font-weight:600;font-size:.7rem;color:var(--muted);border-radius:9px}
.ph-tabs .on{background:var(--green);color:var(--na-fill)}
/* chipsy: Arkusze/Działy…, Tryb, Liczba pytań */
.ph-chips{display:flex;flex-wrap:wrap;gap:5px}
.ph-chip{padding:6px 10px;border-radius:9px;border:1px solid var(--line);background:rgba(var(--hi-rgb),.02);font-family:var(--fd);font-weight:600;font-size:.66rem;color:var(--muted)}
.ph-chip.on{background:var(--green);color:var(--na-fill);border-color:transparent}
/* — makieta wg OBECNEJ aplikacji (2026-08-29): topbar, zakladki z domkiem, plan dnia,
   prognoza ze skala i progami, dzialy, zadanie, ocena, postepy — */
.ph-top{display:flex;align-items:center;gap:6px}
.ph-hello{flex:1;min-width:0}
.ph-hello b{display:block;font-family:var(--fd);font-size:.78rem;color:var(--text);line-height:1.25}
.ph-hello span{display:block;color:var(--muted);font-size:.6rem}
.ph-icobtn{width:26px;height:23px;border-radius:7px;border:1px solid var(--line);background:rgba(var(--hi-rgb),.03);
  display:flex;align-items:center;justify-content:center;color:var(--muted)}
.ph-icobtn svg{width:12px;height:12px}
.ph-burger{flex-direction:column;gap:2.5px}
.ph-burger i{display:block;width:11px;height:1.6px;border-radius:2px;background:linear-gradient(90deg,var(--gs))}
.ph-tabs{display:flex;gap:4px;background:rgba(var(--hi-rgb),.03);border:1px solid var(--line);border-radius:12px;padding:4px}
.ph-tb{flex:1;padding:7px 0;text-align:center;font-family:var(--fd);font-weight:600;font-size:.6rem;color:var(--muted);border-radius:8px;white-space:nowrap}
.ph-tb.on{background:var(--green);color:var(--na-fill)}
.ph-tb-dom{flex:0 0 34px;display:flex;align-items:center;justify-content:center}
.ph-tb-dom svg{width:12px;height:12px}
.ph-kick{font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.ph-h1{font-family:var(--fd);font-size:.86rem;color:var(--text);line-height:1.25}
.ph-chip.zi{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent);background:color-mix(in srgb,var(--green) 8%,transparent)}
.ph-chip.cy{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
.ph-days{display:block;border:1px solid var(--line2);border-radius:9px;padding:5px 8px;color:var(--cyan);font-size:.62rem;margin-bottom:4px}
.ph-days b{color:var(--text)}
.ph-est{display:flex;align-items:baseline;gap:7px}
.ph-big{font-family:var(--fd);font-weight:700;font-size:1.5rem;background:linear-gradient(96deg,var(--gsr));-webkit-background-clip:text;background-clip:text;color:transparent}
.ph-up{color:var(--green);font-size:.6rem;font-weight:600}
.ph-scale{position:relative;height:6px;border-radius:99px;background:rgba(var(--hi-rgb),.09);margin:7px 0 3px}
.ph-fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,var(--gs))}
.ph-mark{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--scr-a);border:2.5px solid var(--green);box-shadow:0 0 8px rgba(var(--green-rgb),calc(.6*var(--glow-k)))}
.ph-goal{position:absolute;top:-2px;bottom:-2px;width:2px;transform:translateX(-50%);background:rgba(var(--hi-rgb),.55);border-radius:2px}
.ph-oslab{display:flex;justify-content:space-between;color:var(--dim);font-size:.54rem}
.ph-progi{margin-top:4px;border-top:1px solid var(--line);padding-top:4px;display:flex;flex-direction:column;gap:3px}
.ph-progi div{display:flex;justify-content:space-between;font-size:.6rem;color:var(--muted)}
.ph-progi em{font-style:normal;color:var(--dim)}
.ph-progi em.ok{color:var(--green)}
.ph-mini .ph-chip{padding:4px 8px;font-size:.58rem}
.ph-dz{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;
  padding:9px 10px 11px;background:rgba(var(--hi-rgb),.02);overflow:hidden}
.ph-dzic{width:26px;height:26px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);font-size:.7rem}
.ph-dztx{flex:1;min-width:0}
.ph-dztx b{display:block;font-family:var(--fd);font-size:.68rem;color:var(--text)}
.ph-dztx span{display:block;color:var(--muted);font-size:.56rem}
.ph-dz em{font-style:normal;color:var(--cyan);font-size:.6rem;font-family:var(--fd)}
.ph-dz em.st{color:var(--green)}
.ph-dzbar{position:absolute;left:0;right:0;bottom:0;height:2.5px;background:rgba(var(--hi-rgb),.05)}
.ph-dzbar:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:linear-gradient(90deg,var(--gsr))}
.ph-tnav{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:7px}
.ph-tbtn{width:26px;height:22px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.8rem}
.ph-tnum{border:1px solid var(--line);border-radius:99px;padding:3px 12px;font-family:var(--fd);font-weight:700;font-size:.62rem;color:var(--text)}
.ph-ghost{width:100%;text-align:center;padding:8px 0;border-radius:11px;border:1px solid var(--line);color:var(--muted);font-family:var(--fd);font-weight:600;font-size:.66rem}
.ph-panel{border:1px solid color-mix(in srgb,var(--green) 45%,transparent);border-radius:13px;padding:11px 11px 12px;background:var(--panel);display:flex;flex-direction:column;gap:6px}
.ph-otx{flex:1;min-width:0}
.ph-otag{display:block;font-size:.54rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.ph-otx p{margin:2px 0 0;color:var(--muted);font-size:.6rem;line-height:1.45}
.ph-klab{font-size:.54rem;font-weight:700;color:var(--dim);border-top:1px solid var(--line);padding-top:6px}
.ph-fb{font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ph-fb.zi{color:var(--green)}
.ph-fb.cy{color:var(--cyan)}
.ph-fbtx{margin:0;color:var(--muted);font-size:.6rem;line-height:1.45}
.ph-link{color:var(--cyan);font-size:.62rem;text-align:center}
.ph-st2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ph-stk{border:1px solid var(--line);border-radius:11px;background:rgba(var(--hi-rgb),.02);padding:8px 9px}
.ph-stk span{display:block;color:var(--muted);font-size:.54rem}
.ph-stk b{display:block;font-family:var(--fd);font-size:.92rem;color:var(--text);margin:1px 0}
.ph-stk i{display:block;font-style:normal;color:var(--dim);font-size:.5rem}
.ph-stk i.zi{color:var(--green)}
.ph-don{display:flex;align-items:center;gap:12px;margin-top:5px}
.ph-donut{position:relative;width:72px;height:72px;flex:none;border-radius:50%;
  background:conic-gradient(var(--don1) 0 28deg,var(--don2) 28deg 37deg,var(--don3) 37deg 42deg,var(--don4) 42deg 360deg)}
.ph-donut:before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--panel)}
.ph-donut b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.66rem;color:var(--text)}
.ph-leg{display:flex;flex-direction:column;gap:3px;font-size:.58rem;color:var(--muted)}
.ph-leg i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.ph-leg b{color:var(--text);font-family:var(--fd)}
.ph-chip.sel{border-color:color-mix(in srgb,var(--green) 60%,transparent);color:var(--green);background:color-mix(in srgb,var(--green) 9%,transparent)}
.ph-chip.pkt{margin-left:auto;color:var(--muted)}
/* nagłówki: cyan (Przewidywane (AI), 2026) + małe wersaliki (ROZSTRZYGNIĘCIE, OCENA) + neutralne (Tryb) */
.ph-h{color:var(--cyan);font-family:var(--fd);font-weight:700;font-size:.82rem}
.ph-lab{color:var(--cyan);font-size:.55rem;letter-spacing:.15em;font-weight:700;text-transform:uppercase}
.ph-nlab{color:var(--text);font-family:var(--fd);font-weight:600;font-size:.72rem}
/* wiersze listy arkuszy + karta „przewidywany arkusz" */
.ph-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);background:rgba(var(--hi-rgb),.02);border-radius:11px}
.ph-item b{font-weight:600;font-size:.7rem;color:var(--text)}
.ph-item span{font-size:.6rem;color:var(--muted);flex:none}
.ph-dash{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 11px;border:1px dashed color-mix(in srgb,var(--green) 50%,var(--line));background:color-mix(in srgb,var(--green) 6%,transparent);border-radius:11px}
.ph-dash b{font-weight:600;font-size:.7rem;color:var(--text)}
.ph-dash i{font-style:normal;color:var(--green);font-weight:700;font-size:.6rem}
/* pytanie + pola odpowiedzi + przyciski + pager */
.ph-q{font-size:.76rem;line-height:1.34;color:var(--text)}
.ph-field{border:1px solid var(--line);background:rgba(var(--hi-rgb),.02);border-radius:10px;padding:8px 10px;font-size:.72rem;color:var(--text2)}
.ph-cta{width:100%;text-align:center;padding:10px 0;border-radius:11px;font-family:var(--fd);font-weight:700;font-size:.76rem;color:var(--na-fill);background:linear-gradient(96deg,var(--gsr))}
.ph-pager{display:flex;justify-content:space-between;align-items:center}
.ph-pg{border:1px solid var(--line);border-radius:8px;padding:3px 11px;font-family:var(--fd);font-size:.62rem;color:var(--muted)}
.ph-nx{width:26px;height:26px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:.85rem}
/* karta grupująca (Tryb, Postępy) */
.ph-card{border:1px solid var(--line);background:rgba(var(--hi-rgb),.02);border-radius:13px;padding:11px;display:flex;flex-direction:column;gap:9px}
.ph-time{font-size:.62rem;color:var(--muted)}
/* ekran „Prognozowany wynik matury" */
.ph-hi{font-family:var(--fd);font-weight:700;font-size:.95rem}
.ph-sub{color:var(--muted);font-size:.7rem}
.ph-pred{border:1px solid color-mix(in srgb,var(--green) 24%,var(--line));background:color-mix(in srgb,var(--green) 7%,transparent);border-radius:13px;padding:12px;display:flex;flex-direction:column;gap:5px}
.ph-metric{font-family:var(--fd);font-size:2.4rem;line-height:1;font-weight:700;letter-spacing:-.04em;background:linear-gradient(96deg,var(--gsr));-webkit-background-clip:text;background-clip:text;color:transparent}
.ph-up{color:var(--green);font-size:.6rem;font-weight:700}
.ph-track{height:6px;border-radius:99px;background:rgba(var(--hi-rgb),.09);overflow:hidden}
.ph-track span{display:block;height:100%;background:linear-gradient(90deg,var(--gsr));border-radius:inherit}
/* ekran „Ocena": wynik + odhaczone elementy klucza CKE + wskazówka */
.ph-ohead{display:flex;gap:11px;align-items:flex-start}
.ph-score{flex:none;font-family:var(--fd);font-weight:700;letter-spacing:-.04em;display:flex;align-items:baseline;gap:1px}
.ph-score b{font-size:2rem;line-height:.9;color:var(--green)}
.ph-score i{font-style:normal;font-size:.72rem;color:var(--muted)}
.ph-ohead p{color:var(--text2);font-size:.72rem;line-height:1.32}
.ph-checks{display:flex;flex-direction:column;gap:7px}
.ph-crow{display:flex;gap:8px;align-items:flex-start;font-size:.72rem;color:var(--text2);line-height:1.3}
.ph-ck{flex:none;width:16px;height:16px;border-radius:5px;background:color-mix(in srgb,var(--green) 22%,transparent);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:700;margin-top:1px}
.ph-tip{font-size:.72rem;color:var(--muted);line-height:1.34}
/* ekran „Postępy": wiersze punktów + kafelki liczb */
.ph-prow{display:flex;flex-direction:column;gap:4px}
.ph-ptop{display:flex;justify-content:space-between;align-items:center}
.ph-ptop span{font-size:.7rem;color:var(--text)}
.ph-ptop em{font-style:normal;color:var(--cyan);font-size:.62rem;font-weight:600}
.ph-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ph-stat{border:1px solid var(--line);background:rgba(var(--hi-rgb),.02);border-radius:11px;padding:9px 3px;text-align:center}
.ph-stat b{display:block;font-family:var(--fd);font-size:1.3rem;font-weight:700;line-height:1}
.ph-stat span{font-size:.54rem;color:var(--muted)}
.mk-lap{position:relative}
.mk-scr{background:linear-gradient(160deg,var(--scr-a),var(--scr-b));border:1px solid var(--line2);border-radius:14px 14px 0 0;padding:13px;display:grid;grid-template-columns:42px 1fr;gap:11px;box-shadow:0 30px 70px rgba(var(--cien-rgb),calc(.55*var(--cien-k)))}
.mk-side{display:flex;flex-direction:column;gap:13px;align-items:center;padding-top:5px}
.mk-side span{width:19px;height:19px;border-radius:6px;background:rgba(var(--hi-rgb),.06)}
.mk-side span:first-child{background:linear-gradient(120deg,var(--gs))}
.mk-h{font-family:var(--fd);font-weight:700;font-size:14px;margin-bottom:10px}
.mk-card{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:11px}
.mk-cap{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.mk-row{display:flex;align-items:center;justify-content:space-between;gap:9px}
.mk-row b{font-size:12.5px;display:block}.mk-row small{color:var(--muted);font-size:10.5px}
.mk-ring{width:38px;height:38px;flex:0 0 auto}
.mk-cap2{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin:3px 0 7px}
.mk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
.mk-st{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 9px}
.mk-st b{font-family:var(--fd);font-size:16px}.mk-st b.g{color:var(--green)}.mk-st small{color:var(--muted);font-size:9.5px;display:block}
.mk-chart{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px;height:60px}
.mk-chart .mk-spark{width:100%;height:100%}
.mk-base{height:11px;background:linear-gradient(180deg,#10181e,#0a0f13);border:1px solid var(--line2);border-top:0;border-radius:0 0 15px 15px;margin:0 -4%}
.mk-phone{position:absolute;right:-4%;bottom:-6%;width:33%;z-index:3;animation:floaty 5.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.mk-pscr{background:linear-gradient(160deg,var(--scr-a),var(--scr-b));border:1px solid var(--line2);border-radius:20px;padding:13px 12px;box-shadow:0 26px 60px rgba(var(--cien-rgb),calc(.7*var(--cien-k)))}
.mk-ptop{font-size:10px;color:var(--dim);margin-bottom:8px}
.mk-pq{font-size:11.5px;line-height:1.4;margin-bottom:9px}
.mk-pg{width:100%;height:52px;margin-bottom:9px}
.mk-pf{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:10px;color:var(--muted);margin-bottom:6px}
.mk-pf.ok{border-color:rgba(var(--green-rgb),.4);color:var(--green)}
.mk-pai{display:flex;align-items:center;gap:6px;font-family:var(--fd);font-weight:600;font-size:10.5px;color:var(--cyan)}
.mk-pai svg{width:13px;height:13px}
.mk-paic{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;background:rgba(var(--cyan-rgb),.12);border:1px solid var(--line2)}
.mk-paic svg{width:12px;height:12px}

/* problem */

/* pętla */
/* petla po LEWEJ, tekst po PRAWEJ (uklad lustrzany na zyczenie). Kolejnosc zamieniona
   przez order, nie w markupie — na telefonie (jedna kolumna) tekst ma zostac PRZED petla. */
.loop-layout{display:grid;grid-template-columns:1.22fr .78fr;gap:48px;align-items:center}
.loop-layout .loop-copy{order:2}
.loop-layout .loop-stage{order:1}
.loop-copy p{margin-top:.9rem;max-width:460px}
.loop-copy p+p{margin-top:.7rem;color:var(--dim);font-size:.92rem}
.loop-stage{position:relative;min-height:630px;display:grid;place-items:center}
.loop-ring{position:relative;width:min(520px,88vw);aspect-ratio:1;border-radius:50%;--R:calc(min(520px,88vw)*0.46)}
/* pierścień = pasek postępu: pusty ślad dopełnia się gradientem od kafelka Film
   (start 12:00, zgodnie z ruchem wskazówek), zgrany 1:1 z kumulacyjnym
   podświetlaniem kafelków w cyklu 12,5 s; na końcu reset i od nowa */
.loop-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.loop-track{fill:none;stroke:rgba(var(--hi-rgb),.06);stroke-width:.4}
.loop-fill{fill:none;stroke:url(#loopGrad);stroke-width:.62;stroke-linecap:round;stroke-dasharray:289.03;animation:fillRing 16s linear infinite;filter:drop-shadow(0 0 5px rgba(var(--cyan-rgb),calc(.55*var(--glow-k))))}
@keyframes fillRing{from{stroke-dashoffset:289.03}to{stroke-dashoffset:0}}
.loop-center{position:absolute;inset:31%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.1rem;
  background:radial-gradient(circle,rgba(var(--cyan-rgb),.1),var(--loop-c) 66%);border:1px solid var(--line2);box-shadow:0 0 70px rgba(var(--cyan-rgb),calc(.12*var(--glow-k)))}
.lc-lab{font-family:var(--fd);font-size:.8rem;font-weight:600;color:var(--text2);letter-spacing:.2em;text-transform:uppercase;margin-bottom:.1rem;white-space:nowrap}
.lc-score{font-family:var(--fd);font-weight:700;font-size:clamp(2.7rem,5.2vw,3.9rem);line-height:1;letter-spacing:-.04em;margin:0;display:flex;align-items:baseline;justify-content:center;gap:.02em;background:linear-gradient(96deg,var(--gsr));-webkit-background-clip:text;background-clip:text;color:transparent}
.lc-score b{font-weight:700;font-size:1em}
.lc-pct{font-size:.46em;font-weight:700;font-style:normal}
.lp-step{position:absolute;top:50%;left:50%;width:146px;border-radius:22px;padding:.9rem;text-align:center;background:linear-gradient(180deg,var(--lp-a),var(--lp-b));border:1px solid var(--line);box-shadow:0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k)))}
/* kumulacyjne podświetlanie: Film świeci zawsze; każdy kolejny zapala się, gdy pasek
   postępu dojedzie do jego KRAWĘDZI (ok. 5% przed środkiem = pół szerokości kafelka)
   i zostaje do końca; na końcu wszystko gaśnie oprócz Filmu */
@keyframes lit0{0%,100%{border-color:var(--green);box-shadow:0 0 0 1px rgba(var(--green-rgb),calc(.6*var(--glow-k))),0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k))),0 0 44px rgba(var(--green-rgb),calc(.3*var(--glow-k)))}}
@keyframes lit1{0%,11.5%{border-color:var(--line);box-shadow:0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k)))}13%,100%{border-color:var(--green);box-shadow:0 0 0 1px rgba(var(--green-rgb),calc(.6*var(--glow-k))),0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k))),0 0 44px rgba(var(--green-rgb),calc(.3*var(--glow-k)))}}
@keyframes lit2{0%,28%{border-color:var(--line);box-shadow:0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k)))}29.5%,100%{border-color:var(--green);box-shadow:0 0 0 1px rgba(var(--green-rgb),calc(.6*var(--glow-k))),0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k))),0 0 44px rgba(var(--green-rgb),calc(.3*var(--glow-k)))}}
@keyframes lit3{0%,45%{border-color:var(--line);box-shadow:0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k)))}46.5%,100%{border-color:var(--green);box-shadow:0 0 0 1px rgba(var(--green-rgb),calc(.6*var(--glow-k))),0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k))),0 0 44px rgba(var(--green-rgb),calc(.3*var(--glow-k)))}}
@keyframes lit4{0%,61.5%{border-color:var(--line);box-shadow:0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k)))}63%,100%{border-color:var(--green);box-shadow:0 0 0 1px rgba(var(--green-rgb),calc(.6*var(--glow-k))),0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k))),0 0 44px rgba(var(--green-rgb),calc(.3*var(--glow-k)))}}
@keyframes lit5{0%,78%{border-color:var(--line);box-shadow:0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k)))}79.5%,100%{border-color:var(--green);box-shadow:0 0 0 1px rgba(var(--green-rgb),calc(.6*var(--glow-k))),0 16px 46px rgba(var(--cien-rgb),calc(.4*var(--cien-k))),0 0 44px rgba(var(--green-rgb),calc(.3*var(--glow-k)))}}
.lp-b{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;margin:0 auto .6rem;color:var(--cyan);border:1px solid currentColor;box-shadow:0 0 16px rgba(var(--cyan-rgb),calc(.4*var(--glow-k)))}
.lp-b svg{width:24px;height:24px}
.lp-step p{font-size:.76rem;color:var(--muted);margin-top:.3rem}
/* równe osadzenie na okręgu: środek kafelka na linii, co 72° */
.s1{transform:translate(-50%,-50%) translateY(calc(-1*var(--R)));animation:lit0 16s linear infinite}
.s2{transform:translate(-50%,-50%) rotate(60deg) translateY(calc(-1*var(--R))) rotate(-60deg);animation:lit1 16s linear infinite}
.s3{transform:translate(-50%,-50%) rotate(120deg) translateY(calc(-1*var(--R))) rotate(-120deg);animation:lit2 16s linear infinite}
.s4{transform:translate(-50%,-50%) rotate(180deg) translateY(calc(-1*var(--R))) rotate(-180deg);animation:lit3 16s linear infinite}
.s5{transform:translate(-50%,-50%) rotate(240deg) translateY(calc(-1*var(--R))) rotate(-240deg);animation:lit4 16s linear infinite}
.s6{transform:translate(-50%,-50%) rotate(300deg) translateY(calc(-1*var(--R))) rotate(-300deg);animation:lit5 16s linear infinite}
/* wejście pętli: kafelki wskakują po kolei (szybko), potem „ładuje się" okrąg (wypełnienie od zera).
   Sterowane klasami .go (kafelki) i .spin (okrąg) dokładanymi przez JS, gdy pętla wejdzie w kadr.
   Gate .ioreveal -> bez JS wszystko widoczne, a animacje lecą normalnie. */
/* wejście pętli w kolejności: 1) środek (loop-center) się pojawia, 2) kafelki dookoła po kolei,
   3) pusty okrąg RYSUJE się dookoła (.draw, stroke od zera), 4) standardowa animacja (.spin: wypełnienie + podświetlanie). */
.loop-ring .loop-center{transition:opacity .45s ease .15s,transform .55s cubic-bezier(.34,1.45,.5,1) .15s}  /* środek pojawia się z „pop" po krótkiej ciszy */
.loop-ring .lp-step{transition-property:opacity;transition-duration:.32s;transition-timing-function:ease}  /* longhand — nie nadpisuje transition-delay z .sN */
.s1{transition-delay:.75s}.s2{transition-delay:.85s}.s3{transition-delay:.95s}.s4{transition-delay:1.05s}.s5{transition-delay:1.15s}.s6{transition-delay:1.25s}
.loop-track{stroke-dasharray:289.03}
.ioreveal .loop-ring .lp-step{opacity:0}
.ioreveal .loop-ring .loop-center{opacity:0;transform:scale(.5)}   /* start: środek niewidoczny i pomniejszony */
.ioreveal .loop-track{stroke-dashoffset:289.03}   /* pusty okrąg schowany do chwili rysowania */
.ioreveal .loop-fill,.ioreveal .loop-ring .lp-step{animation-play-state:paused}
.loop-ring.go .loop-center{opacity:1;transform:scale(1)}
.loop-ring.go .lp-step{opacity:1}
.loop-ring.draw .loop-track{animation:drawTrack .6s ease forwards}   /* rysowanie pustego okręgu */
.loop-ring.spin .loop-fill,.loop-ring.spin .lp-step{animation-play-state:running}
@keyframes drawTrack{from{stroke-dashoffset:289.03}to{stroke-dashoffset:0}}

/* pas statystyk — KAFELKI: liczba (rośnie przy przewinięciu) + neonowa ikona + teza
   + opis + kreska + źródło; szkło jak w reszcie strony, akcent karty w --c */
/* 4 karty w siatce 2x2 (od 2026-08-29), wezsza niz pelen wrap — spokojniejszy rytm */
.stat-band{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:3.2rem;max-width:920px;margin-inline:auto}
/* kolumna flex: kreska + źródło dopychane do DOLNEJ krawędzi — w każdej karcie
   „Źródło:" leży na tej samej wysokości niezależnie od długości opisu */
.stat{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;padding:2.3rem 2.1rem 1.8rem;
  background:radial-gradient(125% 85% at 12% 0%,rgba(var(--cyan-rgb),.10),transparent 62%),
             radial-gradient(110% 80% at 100% 100%,rgba(var(--green-rgb),.10),transparent 58%),
             linear-gradient(165deg,var(--kart-a),var(--kart-b))}
/* liczby w LITYM kolorze marki — każdy gradient z bielą rozbielał je na szerokich kartach */
.stat-num{font-family:var(--fd);font-weight:700;font-size:clamp(2.9rem,3.9vw,3.8rem);line-height:1.1;
  color:var(--c,var(--green))}
.stat-num .suf{font-style:normal;font-size:.42em;font-weight:700;letter-spacing:0}
.stat-claim{margin:.9rem 0 .7rem;font-family:var(--fd);font-weight:700;font-size:1.12rem;color:var(--text)}
.stat-desc{margin:0 0 1.5rem;color:var(--muted);font-size:.9rem;line-height:1.5}
/* kreska + źródło dopychane do dolnej krawędzi (margin-top:auto) — równo we wszystkich kartach */
.stat-hr{height:1px;flex:none;background:color-mix(in srgb,var(--c,var(--green)) 22%,var(--line));margin:auto 0 .9rem}
.stat-src{margin:0;color:var(--dim);font-size:.76rem}
.stat-foot{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:2.6rem auto 0;max-width:760px;
  color:var(--muted);font-size:.95rem;line-height:1.55;text-align:left}

/* funkcje — karty z obrotem (flip): przód = ikona + tytuł, tył = opis */
.f-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem;margin-top:2.6rem}
/* Barwa własna elementu przychodzi z atrybutu style jako para: --c (ciemny motyw, neon) i --cj (jasny, nasycona);
   reguły niżej czytają --ck, który wybiera motyw. Karty pasa statystyk mają --c już jako var(--cyan)/var(--green). */
.f-card,.sc-card,.sc-mark{--ck:var(--c)}
html[data-motyw="jasny"] .f-card,html[data-motyw="jasny"] .sc-card,html[data-motyw="jasny"] .sc-mark{--ck:var(--cj,var(--c))}
.f-card{flex:0 1 calc(33.333% - .87rem);height:296px;perspective:1200px;background:none;border:0;padding:0}
.f-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.f-card:hover .f-inner{transform:rotateY(180deg)}}   /* desktop: obrót po najechaniu */
.f-card.flip .f-inner{transform:rotateY(180deg)}                          /* mobile: auto-obrót (klasa z JS) */
/* Lico kafelka: ciemna tafla z dwoma źródłami światła — cyjan od góry-lewej, zieleń od dołu-prawej.
   BEZ overflow:hidden, bo poświata neonowej krawędzi ma wychodzić POZA kafelek; to ona robi
   wrażenie podświetlenia, obcięta na krawędzi wyglądałaby jak zwykła ramka. */
.f-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:26px;border:0;padding:1.5rem 1.4rem;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1.05rem;
  box-shadow:inset 0 1px 0 var(--f-hi),
    inset 0 26px 48px -36px rgba(var(--cyan-rgb),.4),
    inset 0 -26px 48px -42px rgba(var(--green-rgb),.26);
  background:radial-gradient(135% 72% at 18% 0%,rgba(var(--cyan-rgb),.22),rgba(var(--cyan-rgb),.06) 42%,transparent 65%),
             radial-gradient(72% 58% at 100% 100%,rgba(var(--green2-rgb),.15),transparent 62%),
             linear-gradient(168deg,var(--f-a),var(--f-b) 48%,var(--f-c))}
/* NEONOWA KRAWĘDŹ. Gradientowa ramka wycięta maską: dwie warstwy maski, jedna ograniczona do
   content-box, druga do całego pudełka, złożone przez xor — zostaje sama obwódka o szerokości
   paddingu. drop-shadow działa na kształt PO masce, czyli na obwódkę, więc poświata idzie za
   krawędzią zamiast rozlewać się z całego prostokąta. */
.f-rim{position:absolute;inset:0;border-radius:inherit;padding:1.8px;pointer-events:none;z-index:2;
  background:linear-gradient(150deg,var(--rim-a),var(--rim-b) 7%,var(--cyan) 20%,rgba(var(--cyan-rgb),.55) 40%,
    rgba(var(--rim-c-rgb),.5) 62%,var(--green) 86%,var(--rim-d));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* FALA: światło płynnie przechodzi z kafelka na kafelek po kolei 1->2->3->4->5 i od nowa.
   Delay wg --i (kolejność w siatce), sąsiednie impulsy zachodzą na siebie, więc podświetlenie
   PŁYNIE, a nie skacze. 13%-100% = ~1 s ciemniejszej przerwy przed kolejnym kafelkiem. */
.f-front .f-rim{animation:cardWave 12.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*2.5s - 12.5s)}
@keyframes cardWave{
  0%,13%,100%{opacity:.98;filter:drop-shadow(0 0 11px color-mix(in srgb,var(--cyan) var(--rim-p1),transparent))
       drop-shadow(0 0 34px color-mix(in srgb,var(--ck) var(--rim-p2),transparent))}
  6.5%{opacity:1;filter:drop-shadow(0 0 17px color-mix(in srgb,var(--cyan) var(--rim-p3),transparent))
       drop-shadow(0 0 56px color-mix(in srgb,var(--ck) var(--rim-p4),transparent))}
}
.f-back .f-rim{opacity:.96;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--ck) var(--rim-p5),transparent)) drop-shadow(0 0 26px color-mix(in srgb,var(--cyan) var(--rim-p6),transparent))}
/* GRAFIKA: neonowy rysunek liniowy. Kolor nadają klasy, nie atrybuty — dzięki temu jeden
   gradient (#bvg) obsługuje wszystkie kafelki, a poświata to drop-shadow na całym rysunku
   (idzie za kształtem linii, nie za prostokątem obrazka). */
.f-art-wrap{display:block;width:100%;max-width:268px;line-height:0}
.f-art{width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 8px rgba(var(--cyan-rgb),calc(.45*var(--glow-k)))) drop-shadow(0 0 19px rgba(var(--green2-rgb),calc(.26*var(--glow-k))))}
.f-art .a{stroke:var(--cyan)}
.f-art .b{stroke:var(--green)}
.f-art .g{stroke:url(#bvg)}
.f-art .da{fill:var(--cyan);stroke:none}
.f-art .db{fill:var(--green);stroke:none}
.f-back{transform:rotateY(180deg)}
.f-ic{flex:none;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 45%,transparent);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--cyan) 24%,transparent),transparent 72%);box-shadow:0 0 22px -7px var(--cyan)}
.f-ic svg{width:34px;height:34px}
.f-front h3{margin:0;font-family:var(--fd);font-weight:700;font-size:1.3rem;line-height:1.22;color:var(--text)}
.f-back p{margin:0;color:var(--muted);font-size:1.2rem;line-height:1.5;max-width:23ch}
@media(hover:none){.f-card{cursor:pointer}}                    /* na dotyku: tap = obrót */
@media(prefers-reduced-motion:reduce){.f-inner{transition:none}.f-front .f-rim{animation:none;opacity:.85}}

/* twórcy */
.about-lead{max-width:720px}
.people{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.4rem}
/* podświetlenie jak w statach, ale TYLKO pod częścią tekstową (zdjęcie u góry
   i tak zasłoniłoby gradient) — cyan z lewej, zieleń z prawego dolnego rogu */
/* JEDEN kontener na kartę: zdjęcie u góry (od krawędzi do krawędzi) i tekst pod nim.
   Wcześniej w karcie siedziały DWA osobne pudełka — zdjęcie w ramce i tekst z własnym tłem
   i zaokrągleniem — przez co robiło się ciasno (uwaga właściciela 2026-09-02). Poświata
   przeniesiona z pudełka tekstu na całą kartę, więc wygląd zostaje, a warstwa znika. */
.person{padding:0;border-radius:22px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(120% 60% at 8% 100%,rgba(var(--cyan-rgb),.09),transparent 60%),
             radial-gradient(110% 55% at 100% 100%,rgba(var(--green-rgb),.10),transparent 58%),
             linear-gradient(165deg,var(--kart-a),var(--kart-b))}
.person .photo{min-height:340px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 26%,rgba(var(--hi-rgb),.13),transparent 16%),linear-gradient(145deg,rgba(var(--cyan-rgb),.15),transparent 38%),linear-gradient(325deg,rgba(var(--green-rgb),.1),transparent 42%),var(--photo-bg)}
/* „O nas": dwa kafle stoją OBOK SIEBIE, więc zdjęcia muszą mieć równą wysokość — inaczej
   opisy pod nimi zaczynają się na różnym poziomie (portrety Eli i Rafała mają nieco inne
   proporcje). Dajemy więc wspólną ramkę i `contain`: zdjęcie wpisuje się w nią W CAŁOŚCI,
   nic nie jest przycinane, a ewentualny margines jest ciemny jak tło kafla, więc niewidoczny. */
.person .photo{aspect-ratio:1.42;min-height:0;display:flex;align-items:center;justify-content:center}
.person-img{width:100%;height:100%;object-fit:cover;display:block}
.person .photo .tag{position:absolute;z-index:2;left:12px;bottom:12px;font-size:.72rem;color:#7AFF8A;border:1px dashed rgba(127,232,138,.4);background:rgba(0,0,0,.6);padding:.35rem .6rem;border-radius:8px}
.person .body{padding:1.5rem 1.6rem 1.7rem}
.person .role{color:var(--cyan);font-family:var(--fd);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.person h3{margin:.35rem 0 .5rem;font-size:1.3rem}
.person p{color:var(--muted);font-size:.94rem}


/* CENNIK: karty wg wzoru właściciela (2026-09-10). Kolumna = plakietka NAD kartą + karta; karta jest
   kolumną flex, przycisk „Wybieram …" ma margin-top:auto, więc w trzech kartach stoi przy dolnej krawędzi.
   Bez bibliotek: czysty CSS i inline SVG. */
.price-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:1.05rem;margin-top:2.8rem}
.price-col{position:relative;flex:0 1 calc(33.333% - .7rem);display:flex;flex-direction:column;min-width:0}
.price-card{flex:1 1 auto;position:relative;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 40% at 50% 0%,rgba(var(--cyan-rgb),.15),transparent 62%),
    linear-gradient(180deg,var(--price-a) 0%,var(--price-b) 24%,var(--price-c) 100%);
  border:1px solid color-mix(in srgb,var(--cyan) 15%,var(--line));
  border-radius:22px;padding:2.6rem 1.25rem 1.35rem}
.price-card.premium{border-color:color-mix(in srgb,var(--green) 24%,transparent)}
.price-card.hot{border-color:color-mix(in srgb,var(--cyan) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 35%,transparent),0 26px 64px rgba(var(--cyan-rgb),calc(.20*var(--glow-k)))}
/* plakietka nad kartą: kapsuła wyśrodkowana; pod nią (Premium) linia z kropką „Pozostało N",
   wypełniana WYŁĄCZNIE z sondy bv_kto (bez sondy zostaje ukryta). Stała wysokość = równe karty. */
.price-badge-wrap{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:center;
  transform:translateY(-50%);pointer-events:none}
.price-badge-wrap .price-badge{pointer-events:auto}
.price-badge-pusta{display:none}   /* Basic nie ma plakietki, a karty i tak mają jednakowy górny margines */
.price-badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:32px;
  padding:.45rem 1.3rem;border-radius:999px;font-family:var(--fd);font-weight:700;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;line-height:1}
.price-badge-hot{min-width:min(210px,80%);color:var(--na-fill);background:linear-gradient(96deg,var(--gsr));
  box-shadow:0 0 22px rgba(var(--cyan-rgb),calc(.18*var(--glow-k)))}
 /* Wypełnienie NIEPRZEZROCZYSTE (decyzja właściciela 2026-09-10): przez półprzezroczyste tło przebijała
    krawędź karty i napisu nie dało się odczytać. */
.price-badge-limit{color:var(--na-fill);border:0;background:linear-gradient(96deg,var(--limit-a),var(--green));
  box-shadow:0 0 20px rgba(var(--green-rgb),calc(.22*var(--glow-k)))}
.pc-wolne{position:absolute;top:1.15rem;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:.45rem;color:var(--text2);font-family:var(--fd);font-size:.78rem;font-weight:600;line-height:1.2}
.pc-wolne[hidden]{display:none}   /* klasa ma display, więc atrybut hidden trzeba dopowiedzieć */
.pc-wolne:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
/* nagłówek karty: kwadratowy kafelek z ikoną + nazwa planu dużą czcionką + podpis pod nią */
.pc-head{display:flex;align-items:center;gap:.85rem;min-height:60px;margin-bottom:1.15rem}
.pc-tyt{min-width:0}
.pc-head h3{margin:0;font-family:var(--fd);font-weight:700;font-size:clamp(1.45rem,1.6vw,1.7rem);
  letter-spacing:-.03em;line-height:1;color:var(--text)}
.pc-podpis{color:var(--muted);font-size:.88rem;line-height:1.3;margin:.3rem 0 0}
.pc-ic{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex:none;
  border:1px solid var(--line);box-shadow:inset 0 0 20px rgba(var(--hi-rgb),.04)}
.pc-ic svg{width:28px;height:28px}
.pc-ic.c1{color:var(--ic1-c);background:linear-gradient(145deg,var(--ic1-a),var(--ic1-b))}
.pc-ic.c2{color:var(--cyan);background:linear-gradient(145deg,var(--ic2-a),var(--ic2-b))}
.pc-ic.c3{color:var(--green);background:linear-gradient(145deg,var(--ic3-a),var(--ic3-b))}
/* DOSTĘP: etykieta wersalikami + pole w ramce (lista okresu albo stały napis w Premium) */
.pc-okres{display:block;margin:0 0 .9rem}
.pc-okres-lab{display:block;margin-bottom:.45rem;color:var(--muted);font-family:var(--fd);
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
/* Lista natywna (bez bibliotek): własna strzałka w SVG, ciemny motyw pola i rozwijanej listy
   (`color-scheme:dark`, inaczej system rysuje białe menu na ciemnej stronie). */
.pc-select,.pc-dostep{display:flex;align-items:center;width:100%;box-sizing:border-box;min-height:50px;
  padding:.65rem .9rem;border-radius:13px;border:1px solid var(--line2);background:var(--sel-bg);
  color:var(--text);font:inherit;font-size:1rem;font-weight:600;line-height:1.3}
.pc-select{padding-right:2.4rem;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:var(--strzalka);
  background-repeat:no-repeat;background-position:right .85rem center;background-size:18px 18px}
.pc-select:hover{border-color:var(--cyan)}
.pc-select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* klasa wyżej ma `display`, więc atrybut `hidden` (stawia go skrypt własnej listy) trzeba dopowiedzieć */
.pc-select[hidden]{display:none}
/* WŁASNA LISTA ROZWIJANA (2026-09-10). Natywny <select> rozwija menu RYSOWANE PRZEZ SYSTEM: na ciemnej
   stronie wygląda jak okno sprzed lat i nie da się go ostylować (CSS sięga tylko do pola, nie do menu).
   Skrypt strony chowa więc <select> i wstawia obok własny przycisk + listę; wartość i tak ląduje
   z powrotem w <select> (zdarzenie `change`), więc logika cen nic o podmianie nie wie.
   BEZ JS <select> zostaje widoczny i działa jak dotąd. */
.bv-sel{position:relative}
.bv-sel-btn{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;box-sizing:border-box;
  min-height:50px;padding:.65rem .9rem;border-radius:13px;border:1px solid var(--line2);background:var(--sel-bg);
  color:var(--text);font:inherit;font-size:1rem;font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.bv-sel-btn:hover{border-color:var(--cyan)}
.bv-sel-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.bv-sel-btn svg{width:18px;height:18px;flex:none;color:var(--cyan);transition:transform .18s ease}
.bv-sel.otw .bv-sel-btn{border-color:var(--cyan)}
.bv-sel.otw .bv-sel-btn svg{transform:rotate(180deg)}
.bv-sel-lista{position:absolute;z-index:30;top:calc(100% + .4rem);left:0;right:0;margin:0;padding:.35rem;
  list-style:none;border-radius:13px;border:1px solid color-mix(in srgb,var(--cyan) 38%,transparent);
  background:var(--sel-list);box-shadow:0 20px 44px rgba(var(--cien-rgb),calc(.55*var(--cien-k)));max-height:min(16rem,50vh);overflow:auto}
.bv-sel-lista[hidden]{display:none}
.bv-sel-opt{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .7rem;
  border-radius:9px;color:var(--text);font-size:.95rem;font-weight:600;line-height:1.3;cursor:pointer}
.bv-sel-opt:hover,.bv-sel-opt.akt{background:color-mix(in srgb,var(--cyan) 15%,transparent)}
.bv-sel-opt[aria-selected="true"]{color:var(--cyan)}
/* ptaszek przy wybranej pozycji: dwa boki kwadratu obrócone o 45 stopni (bez pliku i bez SVG w skrypcie) */
.bv-sel-opt[aria-selected="true"]:after{content:"";width:13px;height:7px;flex:none;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translate(1px,-3px)}
@media(prefers-reduced-motion:reduce){.bv-sel-btn svg{transition:none}}
/* cena bardzo dużą czcionką w kolorze marki + podpis (równowartość za miesiąc / jednorazowo) */
.price-wrap{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:1.05rem 0 .35rem}
.price-tag{font-family:var(--fd);font-weight:700;font-size:clamp(2.2rem,2.5vw,2.7rem);line-height:1;letter-spacing:-.035em;margin:0;
  background:linear-gradient(96deg,var(--gsr));-webkit-background-clip:text;background-clip:text;color:transparent}
.price-per{color:var(--text2);font-size:.88rem;font-weight:600;margin:0 0 .5rem}
/* cena po rabacie kuponu, pod ceną zwykłą. Cena zwykła zostaje wiodąca (bez przekreśleń):
   przekreślenie komunikuje cenę przeszłą, a tu chodzi o rabat naliczany dopiero w kasie. */
/* zwykły tekst, NIE flex z `gap`: gap rozdzielałby też dwukropek od słowa („START : 419,30 zł") */
.price-kod{display:block;margin:0 0 1.05rem;color:var(--muted);font-size:.86rem;line-height:1.5}
.price-kod[hidden]{display:none}
.price-kod b{font-weight:700}
/* w zieleni marki SAMA kwota po rabacie (decyzja właściciela 2026-09-21: „nie koloruj kodu"; wcześniej 2026-09-10 także nazwa kodu) */
.price-kod-akcent{color:var(--green)}
.price-kod-kwota{font-family:var(--fd);font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
/* ta sama kwota w przeliczeniu na miesiąc, w nawiasie przy kwocie (decyzja właściciela 2026-09-21:
   „z kodem: 479,40 zł (53 zł / mies.)", zamiast osobnej linii; kupon nazywa się `matura`) */
.price-kod-per{white-space:nowrap}
/* zakres planu: grupy SKUMULOWANE (BASIC / STANDARD / PREMIUM), nagłówek wersalikami, pozycje z kwadratową
   zieloną fajką; przypis o gwarancji drobną czcionką pod listą Premium */
.pc-plan{margin:0 0 1.15rem;border-top:1px solid rgba(var(--hi-rgb),.1);padding-top:.25rem}
.pc-plan ul{list-style:none;margin:0;padding:0}
.pc-grupa+.pc-grupa{margin-top:.7rem}
.pc-grupa-tyt{margin:.75rem 0 .2rem;color:var(--muted);font-family:var(--fd);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
/* nagłówek grupy w kolorze planu, którego dotyczy (wzór właściciela 2026-09-10) */
.pc-grupa.g-standard .pc-grupa-tyt{color:color-mix(in srgb,var(--cyan) 82%,var(--text))}
.pc-grupa.g-premium .pc-grupa-tyt{color:var(--green)}
.pc-plan .pf-it{padding:.3rem 0;gap:.65rem;align-items:center}
.pc-plan .pf-ic{width:24px;height:24px;border-radius:8px;background:rgba(var(--green-rgb),.16);
  color:var(--green);border:1px solid rgba(var(--green-rgb),.42);margin-top:0}
.pc-plan .pf-ic svg{width:14px;height:14px;stroke-width:2.6}
.pc-plan .pf-tx{color:var(--text);font-size:.86rem;font-weight:500;line-height:1.32}
.pc-plan .pf-tx sup{font-size:.72em;line-height:0;vertical-align:super}
/* .pf-tag: wolne miejsce na plakietkę; od 2026-09-19 nie używa jej żadna pozycja (patrz FUNKCJE_GRUPY) */
.pf-tag{display:inline-block;vertical-align:middle;margin-left:.3rem;padding:.08rem .42rem;border-radius:6px;
  font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.08em;line-height:1.3;
  color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
.pc-przypis{margin:.8rem 0 0;color:var(--muted);font-size:.71rem;line-height:1.45}
.pc-przypis sup{font-size:.8em;line-height:0;vertical-align:super}
/* zdanie „To co w … oraz:" zastępuje na TELEFONIE grupy odziedziczone; na desktopie go nie ma */
.pc-skrot{display:none;margin:.85rem 0 .1rem;color:var(--text);font-family:var(--fd);font-weight:700;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.pc-przypis a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.pc-przypis a:hover{color:var(--cyan)}
/* przycisk pełnej szerokości, zawsze przy dolnej krawędzi karty */
.price-cta{width:100%;min-height:50px;justify-content:center;margin-top:auto;border-radius:13px;
  border-width:2px;font-size:.97rem;font-weight:700}
.cta-green{border-color:color-mix(in srgb,var(--green) 50%,transparent);color:var(--text);background:color-mix(in srgb,var(--green) 5%,transparent)}
.cta-green:hover{border-color:var(--green)}
.cta-cyan{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);color:var(--text);background:color-mix(in srgb,var(--cyan) 5%,transparent)}
.cta-cyan:hover{border-color:var(--cyan)}
.price-card .price-cta:not(.btn-primary):hover{border-color:var(--green)}
/* Premium wyprzedane: przycisk zostaje na swoim miejscu, ale nie da się w niego kliknąć.
   Stan bierze się z sondy `bv_kto` (premium_wolne = 0), nigdy z liczby wpisanej na stronie. */
.price-cta.is-wyprzedane{opacity:.55;cursor:not-allowed;pointer-events:none;
  border-color:var(--line2);background:none;color:var(--muted)}
/* trzy hasła pod nagłówkiem sekcji, rozdzielone kropką w kolorze marki */
/* ⛔ Wspólna rama cennika (.cennik-box) ZDJĘTA decyzją właściciela 2026-09-10: trzy karty stoją luzem
   i niosą podświetlenie same (reguła .price-card wyżej). Nie przywracać bez nowej decyzji. */
.price-note{max-width:760px;margin:1.5rem auto 0;text-align:center;color:var(--cyan);font-size:.94rem;line-height:1.6}
.pf-it{display:flex;align-items:center;gap:1.15rem}
.pf-ic{width:48px;height:48px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--cyan-rgb),.09);color:var(--cyan);border:1px solid rgba(var(--cyan-rgb),.16)}
.pf-ic svg{width:23px;height:23px}

/* 2026-09-10: w karcie stoi WŁASNY zakres planu (.pc-plan), a wspólny panel pigułek pod cennikiem
   został zdjęty decyzją właściciela, więc na telefonie karty niosą całą treść cennika. */
@media(max-width:900px){
  /* kolumny jedna pod drugą (szerokość ustawia reguła niżej); przycisk „Wybieram …" na dole karty */
  /* TELEFON (decyzja właściciela 2026-09-10): karta nie powtarza zakresu tańszego planu.
     Grupy odziedziczone znikają, a zastępuje je jedno zdanie „To co w … oraz:"; nagłówek
     własnej grupy jest wtedy zbędny, bo mówi to samo. */
  .pc-grupa-dziedz{display:none}
  .pc-skrot{display:block}
  .pc-skrot+.pc-grupa .pc-grupa-tyt,.pc-grupa-dziedz+.pc-grupa .pc-grupa-tyt{display:none}
  .pc-grupa+.pc-grupa{margin-top:0}
  /* karty cennika w kolumnie — cena wyśrodkowana (na życzenie) */
  .price-wrap{justify-content:center}
  .price-per{text-align:center}}
/* telefon: karta ma pełną szerokość, więc duże elementy wzoru schodzą o stopień */
@media(max-width:640px){
  .pc-ic{width:60px;height:60px;border-radius:16px}
  .pc-ic svg{width:30px;height:30px}
  .pc-head h3{font-size:1.75rem}
  .pc-select,.pc-dostep{min-height:56px;font-size:1.06rem}
  .price-tag{font-size:2.9rem}
  .price-cta{min-height:54px;font-size:1rem}}

/* PASEK PROMOCJI nad cennikiem — termin + realny licznik miejsc */
.promo-bar{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  max-width:940px;margin:0 auto 2.2rem;padding:.95rem 1.4rem;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--green) 34%,var(--line));
  background:linear-gradient(96deg,color-mix(in srgb,var(--green) 8%,transparent),color-mix(in srgb,var(--cyan) 7%,transparent))}
.promo-main{display:flex;align-items:center;gap:.7rem;min-width:0}
.promo-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);animation:promoPulse 2.4s ease-out infinite}
@keyframes promoPulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.promo-txt{font-size:.95rem;color:var(--text);line-height:1.45}
.promo-txt b{color:var(--text);font-family:var(--fd);font-weight:700}
.promo-left b{color:var(--green)}
.promo-time{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;margin-left:auto}
.promo-lab{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.promo-clock{font-family:var(--fd);font-weight:700;font-size:1.15rem;
  background:linear-gradient(96deg,var(--gsr));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
@media(max-width:640px){.promo-bar{justify-content:center;text-align:center}
  .promo-main{justify-content:center}.promo-time{margin:0 auto;align-items:center}}
@media(prefers-reduced-motion:reduce){.promo-dot{animation:none}}
/* Karty jedna pod drugą: odstęp pionowy MUSI pomieścić plakietkę, która wisi na górnej krawędzi
   karty i wystaje nad nią o połowę wysokości. Przy wąskim odstępie dotykała dolnej krawędzi
   karty powyżej (zgłoszenie właściciela 2026-09-10). */
@media(max-width:900px){.price-col{flex-basis:100%;max-width:440px}
  .price-grid{row-gap:3rem}}

/* OPINIE — wiadomości od uczniów (zrzuty SMS) */
/* Siatka trzykolumnowa. Zrzuty maja niemal identyczne proporcje (1:1.8), wiec rzedy
   i tak wychodza rowne — ale obrazy NIE sa przycinane (zadnego object-fit:cover ani
   wymuszonej proporcji): cala tresc opinii musi byc widoczna. */
/* Specyficzność MUSI być wyższa niż `.promo-txt b` wyżej (0,1,1), inaczej tamta reguła
   przywraca zwykły kolor i akcent w pasku znika bez śladu. */
.promo-txt b.promo-kod{color:var(--green);letter-spacing:.04em}
.promo-kod{color:var(--green);letter-spacing:.04em}
/* FAQ pod Opiniami (2026-09-25): akordeon <details>, tło i linie z tokenów obu motywów */
.faq{display:grid;gap:.7rem;margin-top:2.4rem;max-width:900px;margin-left:auto;margin-right:auto}
.faq details{padding:0 1.1rem;border-radius:15px;background:var(--panel);border:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem .2rem;font-family:var(--fd);font-weight:600;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary h3{margin:0;font:inherit;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--green);font-size:1.2rem;flex:none}
.faq details[open] summary:after{content:"−"}
.faq details p{margin:0;padding:0 .2rem 1.15rem;color:var(--muted);max-width:820px}
.op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:2.8rem;align-items:start;
  max-width:1060px;margin-inline:auto}
/* TREŚĆ OPINII TEKSTEM, POD FAQ (2026-09-28, decyzja właściciela „dodaj tekst opinii pod faq").
   Wygląd i mechanika 1:1 jak pytania FAQ nad tym blokiem, żeby nie dokładać strony nowego wzoru:
   <details> z plusem, tokeny obu motywów, zero kolorów na sztywno. */
.opt{margin:2.4rem auto 0;max-width:900px;padding:0 1.1rem;border-radius:15px;background:var(--panel);border:1px solid var(--line)}
.opt summary{list-style:none;cursor:pointer;padding:1.15rem .2rem;font-family:var(--fd);font-weight:600;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
.opt summary span{margin:0;font:inherit;font-size:1.02rem}
#opinie-tresc{padding-top:0}   /* osobna sekcja tuż za FAQ (2026-10-02), bez drugiego odstępu sekcji */
.opt summary::-webkit-details-marker{display:none}
.opt summary:after{content:"+";color:var(--green);font-size:1.2rem;flex:none}
.opt[open] summary:after{content:"\2212"}
.opt-wstep{margin:0 .2rem 1.2rem;font-size:.86rem;line-height:1.6;color:var(--text2)}
.opt-wiad{padding:1.1rem .2rem;border-top:1px solid var(--line)}
.opt-wiad:last-child{padding-bottom:1.3rem}
.opt-wiad h3{margin:0 0 .7rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}
.opt-wiad p{margin:0 0 .6rem;font-size:.9rem;line-height:1.6;color:var(--muted);max-width:820px}
.opt-wiad p:last-child{margin-bottom:0}
.opt-wiad b{color:var(--text);font-weight:600}
/* Opis tego, czego nie da się przepisać (zrzut w zrzucie): kursywą, żeby nie udawał cudzej wypowiedzi. */
.opt-wiad .op-o{font-style:italic}
/* Każda opinia w MAKIECIE TELEFONU jak w hero (decyzja 2026-08-29, zamiast ramki):
   ta sama metalowa szyna (conic-gradient), klawisze boczne, czarna obudowa i ekran.
   Różnice względem hero: wysokość z proporcji zrzutu (nie stała), wysepka aparatu
   w OSOBNYM pasku nad zrzutem i belka home pod nim (nic nie zakrywa treści opinii),
   bez animacji unoszenia (karty statyczne) i ze ściszoną poświatą (grid, nie scena). */
.op-card{position:relative;margin:0 auto;width:min(100%,310px);border-radius:46px;padding:3.5px;
  background:
    linear-gradient(35deg,rgba(var(--green-rgb),.22),rgba(var(--green-rgb),0) 30%),
    linear-gradient(215deg,rgba(var(--cyan-rgb),.12),rgba(var(--cyan-rgb),0) 28%),
    conic-gradient(from 200deg at 50% 50%,#1b2227,#4a565d 3%,#77878f 5%,#2c353b 9%,#0d1317 18%,
      #232c32 27%,#5f6f77 33%,#333d44 38%,#0f151a 48%,#28323a 58%,#6b7b83 64%,#343e45 69%,
      #0c1216 78%,#2b353b 86%,#86979f 92%,#39444b 95%,#1b2227);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 26px 44px -22px rgba(var(--cien-rgb),calc(.9*var(--cien-k))),
    0 0 56px rgba(var(--green-rgb),calc(.09*var(--glow-k))),
    0 0 28px rgba(var(--cyan-rgb),calc(.05*var(--glow-k)))}
.op-keys{position:absolute;inset:0;z-index:2;pointer-events:none}
.op-keys i{position:absolute;display:block;width:3px}
.op-keys .k-mute,.op-keys .k-up,.op-keys .k-dn{left:-3px;border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,#151b20,#5a6a72 55%,#1d242a);box-shadow:-1px 1px 2px rgba(var(--cien-rgb),calc(.85*var(--cien-k)))}
.op-keys .k-mute{top:100px;height:24px}
.op-keys .k-up{top:142px;height:48px}
.op-keys .k-dn{top:202px;height:48px}
.op-keys .k-pw{right:-3px;top:170px;height:70px;border-radius:0 2px 2px 0;
  background:linear-gradient(270deg,#151b20,#5a6a72 55%,#1d242a);box-shadow:1px 1px 2px rgba(var(--cien-rgb),calc(.85*var(--cien-k)))}
.op-body{display:block;border-radius:42.5px;padding:7px;background:#01050a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 6px rgba(0,0,0,.9)}
.op-screen{position:relative;display:flex;flex-direction:column;border-radius:35px;overflow:hidden;background:#050505;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* pasek statusowy z wysepką aparatu — NAD zrzutem (osobny wiersz, niczego nie przykrywa) */
.op-notch{display:block;position:relative;height:34px;flex:none;background:#050505}
.op-notch:before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:80px;height:20px;border-radius:99px;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 1px 3px rgba(var(--cien-rgb),calc(.9*var(--cien-k)))}
.op-notch:after{content:"";position:absolute;top:15px;left:50%;transform:translateX(23px);width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#24485460,#03080b 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
/* belka home — POD zrzutem */
.op-home{display:block;position:relative;height:22px;flex:none;background:#050505}
.op-home:before{content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:96px;height:4px;border-radius:99px;background:rgba(255,255,255,.32)}
.op-card img{width:100%;height:auto;display:block}
.op-shot{aspect-ratio:3/4;border:1.5px dashed color-mix(in srgb,var(--cyan) 35%,var(--line));border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1.2rem;color:var(--muted)}
.op-shot .op-ic{font-size:2rem;line-height:1}
.op-shot b{color:var(--text);font-family:var(--fd);font-weight:600;font-size:1rem}
.op-shot span{font-size:.85rem}
@media(max-width:1040px){.op-grid{grid-template-columns:1fr 1fr}}
/* Telefon (od 2026-10-02, przebudowa): sześć zrzutów w JEDNYM RZĘDZIE przesuwanym palcem (scroll-snap) zamiast kolumny
   sześciu telefonów (4,8 ekranu, 17 % strony). Pierwszy zrzut widać w całości, krawędź drugiego zaprasza do przesunięcia. */
@media(max-width:720px){
  .op-grid{display:flex;gap:1rem;margin:2rem -20px 0;padding:0 20px 1rem;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:none}
  .op-grid::-webkit-scrollbar{display:none}
  .op-grid .op-card{flex:0 0 min(300px,76vw);scroll-snap-align:center;margin:0}
}

/* formularz kontaktowy */
.kf-form{max-width:560px;display:flex;flex-direction:column;gap:.8rem;margin:1.3rem 0 .4rem}
.kf-in{width:100%;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line2);background:var(--pole-bg);color:var(--text);font:inherit;font-size:1rem}
.kf-in::placeholder{color:var(--muted)}
.kf-in:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(var(--cyan-rgb),calc(.15*var(--glow-k)))}
/* hasło niespełniające zasady po odkliknięciu pola: czerwona ramka (decyzja właściciela 2026-09-12), znika, gdy hasło jest już dobre */
.kf-in.kf-zle,.kf-in.kf-zle:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(var(--red-rgb),.15)}
textarea.kf-in{resize:vertical;min-height:120px;line-height:1.6}
/* Pole hasła z przyciskiem „pokaż hasło" po prawej (decyzja właściciela 2026-09-07: w każdym polu
   hasła). Skrypt owija input w .kf-pw i dokłada przycisk; koszyk i ekrany logowania portalu mają
   własne oczko (WooCommerce, rdzeń WordPressa), ostylowane w motywie. */
.kf-pw{position:relative;display:block}
.kf-pw .kf-in{padding-right:2.9rem}
.kf-oko{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:8px;color:var(--muted);cursor:pointer;padding:0}
.kf-oko:hover,.kf-oko[aria-pressed="true"]{color:var(--cyan)}
.kf-oko:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.kf-oko svg{width:20px;height:20px;display:block}
.ko-przyciski .kf-pw{flex:1 1 200px;max-width:260px}
.kf-hp{position:absolute;left:-5000px;width:0;height:0;opacity:0;pointer-events:none}
.kf-btn{align-self:flex-start;margin-top:.2rem}
.kf-ok{display:none;color:var(--green);font-weight:600}
.kf-err{display:none;color:var(--red-txt)}
/* KONTAKT (2026-09-11, decyzja właściciela: „minimalizm, jak w panelu ucznia"): trzy drogi kontaktu
   1:1 z ekranem Pomocy w aplikacji (Zadzwoń / Napisz SMS / Napisz e-mail), pod nimi sam formularz.
   Bez ściany tekstu o operatorze (dane rejestrowe stoją w Regulaminie §1). */
.kt-drogi{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.3rem 0 1.7rem}
.legal a.kt-droga{display:flex;align-items:center;gap:.8rem;padding:.85rem .95rem;border-radius:14px;border:1px solid var(--line2);
  background:var(--pole-bg);color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}
.legal a.kt-droga:hover{border-color:var(--cyan);background:rgba(var(--cyan-rgb),.06)}
.kt-ic{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(var(--cyan-rgb),.12);color:var(--cyan)}
.kt-ic svg{width:22px;height:22px;display:block}
.kt-tx{min-width:0}
.kt-l1{display:block;font-family:var(--fd);font-weight:600;font-size:.95rem;line-height:1.25}
.kt-l2{display:block;font-size:.84rem;color:var(--muted);line-height:1.35;word-break:break-all}
@media(max-width:640px){.kt-drogi{grid-template-columns:1fr}}
/* pojemnik widgetu Turnstile w oknach (rejestracja, reset hasła); pusty nie zajmuje miejsca */
.bv-turnstile{margin:12px 0 0}
.bv-turnstile:empty{display:none}
/* Pasek konta w koszu (usunięte, 30 dni na cofnięcie): nad wszystkim, bo bez niego nie da się przywrócić konta. */
/* z-index PONIŻEJ okien (.lg-ov 250) i paska cookies (.ck-bar 240): pasek informuje, nie blokuje. */
.bv-kosz{position:fixed;left:0;right:0;bottom:0;z-index:230;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem;
  padding:.9rem 1.1rem;background:var(--kosz-bg);border-top:1px solid rgba(var(--red-rgb),.45);color:var(--text);font-size:.92rem;line-height:1.5}
.bv-kosz[hidden]{display:none}
.bv-kosz .btn{padding:.55rem 1.1rem;font-size:.9rem}
/* .btn ma własne `display`, więc samo [hidden] by go nie schowało (przycisk przywracania bez sesji). */
.bv-kosz .btn[hidden]{display:none}
footer{padding:2.4rem 0 2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem;background:var(--stopka-bg)}
.foot{display:flex;flex-direction:column;gap:1.3rem}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap}
.foot-brand{font-family:var(--fd);font-weight:600;color:var(--text);font-size:1.02rem}
.foot-brand-sub{color:var(--dim);font-weight:400}
.foot-nav{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
.foot-nav a{color:var(--muted);transition:color .15s}
.foot-nav a:hover{color:var(--text)}
.foot-nav a.foot-cta{color:var(--cyan)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.6rem;flex-wrap:wrap;color:var(--dim);font-size:.82rem}
.foot-legal{display:flex;gap:1.3rem;flex-wrap:wrap}
/* odnośniki do Instagrama i Facebooka: stopka (prawa strona dolnego wiersza) i sekcja O nas */
.social-links{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
.social-links a{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-weight:500;transition:color .15s}
.social-links a:hover{color:var(--cyan)}
.social-links svg{flex:none}
.about-social{margin:.2rem 0 2rem;justify-content:center}
/* BAZA WIEDZY (wiedza/): szata z przebudowy 2026-09-26 (wiedza.py `szata()`; decyzja właściciela: „przebuduj bazę wiedzy",
   skill frontend-design + audyt UX). Tokeny marki w obu motywach, żadnych kolorów na sztywno. Układ: pasek sekcji pod
   nagłówkiem, treść (max 760 px) + prawa kolumna ze spisem nagłówków od 1100 px, okruszki NAD tytułem (order:-1 w kolumnie
   flex, HTML bez zmian), lead, rozdziały z linią nad h2, tabele z paskami danych (jedyny mocny element), listy odnośników
   zamiast kart, ramka CTA z gradientową linią. Poniżej 1100 px jedna kolumna, spis jako zwijana pigułka nad tytułem. */
.wz-pasek{border-bottom:1px solid var(--line);background:var(--bg)}
.wz-pasek .wrap{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wz-pasek .wrap::-webkit-scrollbar{display:none}
.wz-pasek a{flex:none;padding:.8rem .75rem .7rem;font-family:var(--fd);font-weight:600;font-size:.88rem;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s}
.wz-pasek a.on{color:var(--text);border-bottom-color:var(--cyan)}
.wz-pasek a:hover{color:var(--text)}
@media (max-width:640px){.wz-pasek a{padding:.7rem .55rem .6rem;font-size:.82rem}}
.legal-wrap.wz-main{max-width:1160px;padding:36px 20px 84px;container-type:inline-size}   /* .legal-wrap ma 800 px i stoi niżej w kaskadzie, stąd dwie klasy;
   kontener (od 2026-10-05): blok .bl-blok w artykule mierzy się do pełnego wrapu jednostką cqw */
@media (min-width:1100px){.legal-wrap.wz-main{display:grid;grid-template-columns:minmax(0,760px) 250px;column-gap:64px;align-items:start;justify-content:center}}
.wz{display:flex;flex-direction:column;min-width:0}
.wz>*{margin-top:0}
.wz .wz-okruszki{order:-1;margin:0 0 1.1rem;font-size:.84rem;line-height:1.5}
.wz .wz-okruszki a{text-decoration:none}
.wz h1{font-size:clamp(1.85rem,1.3rem + 1.6vw,2.5rem);letter-spacing:-.015em;line-height:1.08;margin:0 0 1.1rem}
.wz .wz-data{margin:0 0 1.4rem}
.wz .wz-lead{font-size:1.1rem;line-height:1.65;color:var(--text);margin:0 0 1.2rem}
.wz p,.wz li{font-size:1rem;line-height:1.7}
.wz p{margin:0 0 1rem}
.wz ul,.wz ol{margin:.2rem 0 1rem 1.25rem}
.wz h2{font-size:1.38rem;font-weight:700;letter-spacing:-.01em;margin:2rem 0 .7rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.wz h3{font-family:var(--fd);font-weight:600;font-size:1.05rem;margin:1.4rem 0 .4rem}
.wz a{text-decoration-thickness:1px;text-underline-offset:.16em}
.wz .wz-owijka{margin:0}
.wz .wz-tab{margin:.6rem 0 1.6rem;font-size:.93rem}
.wz .wz-tab th{font-family:var(--fb);font-weight:600;font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--muted);padding:.4rem .6rem .55rem;border-bottom:1px solid var(--line2)}
.wz .wz-tab td{padding:.55rem .6rem;color:var(--text)}
.wz .wz-tab td:first-child{font-weight:500}
.wz .wz-tab td.n{font-family:var(--fd);font-variant-numeric:tabular-nums;font-weight:600}
.wz .wz-tab td.wz-bar{position:relative;min-width:6.5rem}
.wz .wz-tab td.wz-bar::before{content:"";position:absolute;left:.35rem;right:.35rem;top:.4rem;bottom:.4rem;border-radius:4px;background:linear-gradient(90deg,rgba(var(--cyan-rgb),.17) calc(var(--u)*100%),transparent calc(var(--u)*100%))}
.wz .wz-tab td.wz-bar span{position:relative}
.wz .wz-tab tr:hover td{background:rgba(var(--hi-rgb),.03)}
.wz .wz-siatka{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 1.6rem;margin:.4rem 0 1.4rem}
.wz .wz-siatka a{padding:.62rem 0 .62rem 1.15rem;border:0;border-radius:0;border-bottom:1px solid var(--line);position:relative;text-decoration:none;color:var(--text);transition:color .15s}
.wz .wz-siatka a::before{content:"";position:absolute;left:.1rem;top:1.05rem;width:.42rem;height:.42rem;border-right:1.5px solid var(--cyan);border-bottom:1.5px solid var(--cyan);transform:rotate(-45deg)}
.wz .wz-siatka a:hover{background:none;color:var(--cyan)}
.wz .wz-siatka a small{color:var(--muted)}
.wz .wz-spis{border:0;border-left:2px solid var(--cyan);border-radius:0;background:none;padding:.15rem 0 .15rem 1.1rem;margin:1.4rem 0 2rem}
.wz .wz-spis a{text-decoration:none}
.wz-rail{position:sticky;top:92px;font-size:.9rem;min-width:0}
.wz-toc summary{cursor:pointer;font-family:var(--fd);font-weight:600;color:var(--text);list-style:none;padding:.55rem 0;border-bottom:1px solid var(--line)}
.wz-toc summary::-webkit-details-marker{display:none}
.wz-toc ol{list-style:none;margin:.55rem 0 0;padding:0}
.wz-toc li{margin:0;font-size:.88rem}
.wz-toc a{display:block;padding:.36rem 0 .36rem .85rem;color:var(--muted);text-decoration:none;border-left:2px solid var(--line);line-height:1.4;transition:color .15s,border-color .15s}
.wz-toc a:hover{color:var(--text);border-left-color:var(--cyan)}
@media (max-width:1099px){.legal-wrap.wz-main{display:flex;flex-direction:column}.wz-rail{order:-1;position:static;margin:0 0 1.3rem}
  .wz-toc summary{display:inline-block;padding:.42rem .95rem;border:1px solid var(--line2);border-radius:999px;font-size:.86rem}
  .wz-toc[open] summary{border-radius:14px 14px 0 0;border-bottom-color:transparent}
  .wz-toc ol{margin:0;padding:.3rem 1rem .6rem;border:1px solid var(--line2);border-radius:0 14px 14px 14px}}
.wz .wz-cta{margin:2.4rem 0 0;padding:1.4rem 1.4rem 1.5rem;border:1px solid var(--line2);border-radius:18px;background:var(--card2);position:relative;overflow:hidden}
.wz .wz-cta::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--cyan-vivid),var(--green-vivid))}
.wz .wz-cta p{color:var(--text);margin:0 0 .7rem}
.wz .wz-cta p+p{color:var(--muted);font-size:.95rem;margin-bottom:1.1rem}
.wz .wz-cta .btn{display:inline-block;padding:.72rem 1.25rem;border-radius:12px;background:linear-gradient(120deg,var(--green-vivid),var(--cyan-vivid));color:var(--na-fill);font-family:var(--fd);font-weight:600;text-decoration:none}
.wz .wz-sasiedzi{margin:2rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.9rem}
.wz .wz-sasiedzi a{text-decoration:none;color:var(--muted)}.wz .wz-sasiedzi a:hover{color:var(--cyan)}
/* Bazowe reguły tabel i siatki (także spoza .wz, np. drogowskazy). */
.wz-tab{width:100%;border-collapse:collapse;margin:.6rem 0 1.4rem;font-size:.9rem}
.wz-tab th,.wz-tab td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--muted)}
.wz-tab th{color:var(--text);font-weight:600;font-size:.82rem}
.wz-tab td.n,.wz-tab th.n{text-align:right;white-space:nowrap}
.wz-owijka{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wz-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem;margin:.6rem 0 1.4rem;padding:0;list-style:none}
.wz-siatka li{margin:0}
.wz-siatka a{display:block;padding:.75rem .9rem;border:1px solid var(--line2);border-radius:12px;color:var(--text);font-weight:500;line-height:1.35}
.wz-siatka a small{display:block;color:var(--muted);font-weight:400;font-size:.82rem;margin-top:.15rem}
.wz-cta{margin:2rem 0 0;padding:1.2rem 1.3rem;border:1px solid var(--line2);border-radius:16px;background:var(--card2)}
.wz-cta p{margin:0 0 .8rem}
.wz-cta .btn{display:inline-block;padding:.7rem 1.2rem;border-radius:12px;background:linear-gradient(120deg,var(--green-vivid),var(--cyan-vivid));color:var(--na-fill);font-weight:600}
.wz-sasiedzi{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1.6rem 0 0;font-size:.9rem}
.wz-okruszki{font-size:.86rem;color:var(--muted);margin:0 0 1rem}.wz-okruszki a{color:var(--muted)}.wz-okruszki a:hover{color:var(--cyan)}
.wz-data{font-size:.86rem;color:var(--dim);margin:0 0 1.6rem}
.wz-spis{margin:1.8rem 0;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:14px;background:var(--card2)}
.wz-spis p{margin:0 0 .5rem;color:var(--text);font-weight:600;font-size:.9rem}
.wz-spis ol{margin:0 0 0 1.1rem;padding:0}
.wz-spis li{margin:.25rem 0;font-size:.92rem}
.wz-spis a{color:var(--muted)}.wz-spis a:hover{color:var(--cyan)}
.legal h3{margin-top:1.6rem}
.foot-legal a{color:var(--dim);transition:color .15s}
.foot-legal a:hover{color:var(--cyan)}
.wzor-odstapienie{border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;line-height:1.9}
/* MAPY MYŚLI: jedno zdjęcie tablicy, wykadrowane przez właściciela (2026-09-09): ma być widać CAŁE,
   bez docinania do szerokości strony, więc ramka jest węższa i wyśrodkowana, a obraz idzie w naturalnej
   proporcji (height:auto). Miejsce przed pobraniem pliku rezerwują atrybuty width/height obrazka
   (bez tego strona podskakuje przy przewijaniu do cennika). */
.mm-foto{max-width:940px;margin:2.6rem auto 0;border:1px solid var(--line2);border-radius:20px;overflow:hidden;
  background:var(--card2);box-shadow:0 26px 60px rgba(var(--cien-rgb),calc(.45*var(--cien-k)))}
.mm-foto img{width:100%;height:auto;display:block}
@media(max-width:640px){.mm-foto{border-radius:14px;margin-top:1.8rem}}
.foot-kolumny{display:grid;grid-template-columns:1fr auto;gap:1.4rem 3rem;align-items:start}
.foot-firma{display:flex;flex-direction:column;gap:.15rem;font-style:normal;color:var(--dim);font-size:.82rem;line-height:1.7}
.foot-firma b{color:var(--muted);font-weight:600}
.foot-firma a{color:var(--dim)}.foot-firma a:hover{color:var(--cyan)}
.foot-kolumny .foot-legal{flex-direction:column;gap:.35rem;text-align:right;font-size:.86rem}
.foot-pay{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.2rem}
.foot-pay-t{color:var(--dim);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.foot-pay-ikony{display:flex;align-items:center;gap:1.05rem;flex-wrap:wrap}
.foot-pay-ikony img{height:26px;width:auto}   /* WYSOKOSC_ZNAKU_PLATNOSCI */
.foot-pay-ikony a{display:inline-flex}
/* Oficjalny pasek metod płatności — wariant przezroczysty, wprost na tle stopki.
   Bez własnego tła i bez filtrów: znaki towarowe pokazujemy takimi, jakie są. */
.foot-pay-baner{display:block;width:100%;max-width:560px;margin:0 0 1.1rem}
.foot-pay-baner img{display:block;width:100%;height:auto}
/* Klauzula operatora płatności — musi być czytelna, bo to informacja wymagana prawem,
   a nie ozdoba stopki; stąd jaśniejszy kolor niż reszta drobnego druku. */
.foot-pay-info{color:var(--muted);font-size:.8rem;line-height:1.65;margin:.7rem 0 1.1rem;max-width:74ch}
.foot-pay-info b{color:var(--text);font-weight:600}
/* strony prawne (regulamin / polityki) */
.legal-header{position:sticky;top:0;z-index:50;background:var(--nag-legal);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.legal-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px}
.legal-back{color:var(--muted);font-size:.9rem;white-space:nowrap}
.legal-back:hover{color:var(--cyan)}
.legal-wrap{max-width:800px;margin:0 auto;padding:44px 20px 84px}
.legal h1{font-family:var(--fd);font-weight:700;font-size:2rem;line-height:1.15;margin:0 0 .35rem}
.legal-meta{color:var(--dim);font-size:.85rem;margin:0 0 1.6rem}
.legal h2{font-family:var(--fd);font-weight:600;font-size:1.24rem;margin:2.1rem 0 .65rem;color:var(--text)}
.legal h3{font-size:1.02rem;margin:1.2rem 0 .45rem;color:var(--text)}
.legal p,.legal li{color:var(--muted);line-height:1.72;font-size:.96rem}
.legal ul,.legal ol{margin:.45rem 0 .6rem 1.25rem;padding:0}
.legal li{margin:.32rem 0}
.legal a{color:var(--cyan);text-decoration:underline}
.legal strong{color:var(--text)}
.legal .todo{background:rgba(var(--amber-rgb),.16);color:var(--amber-txt);padding:.05em .35em;border-radius:5px;font-style:normal}
.legal .draft-banner{background:rgba(var(--amber-rgb),.09);border:1px solid rgba(var(--amber-rgb),.34);border-radius:12px;padding:.95rem 1.15rem;color:var(--amber-txt);font-size:.9rem;line-height:1.6;margin:0 0 2rem}
.legal .draft-banner a{color:var(--amber-txt)}
/* sekcja „Nasza droga do BIOVERSE" — jeden kafel = zdjęcie + tekst (zygzak), bez numerów */
.story-rows{display:flex;flex-direction:column;gap:2.2rem;margin-top:3rem}
.story-row{display:grid;grid-template-columns:.82fr 1.18fr;align-items:stretch;overflow:hidden;border-radius:22px;border:1px solid var(--line2);
  background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
/* podświetlenie jak w statach, ale TYLKO na połowie tekstowej (fotografia
   zasłoniłaby gradient na swojej połowie) */
.story-text{background:radial-gradient(120% 90% at 10% 0%,rgba(var(--cyan-rgb),.09),transparent 60%),
  radial-gradient(115% 85% at 100% 100%,rgba(var(--green-rgb),.06),transparent 58%)}
.story-row:nth-child(even) .story-photo{order:2}
.story-photo{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 18%,var(--story-a),var(--story-b))}
/* ZDJĘCIA (2026-09-02). Zasada właściciela: tło wolno przyciąć, POSTAĆ MA ZOSTAĆ CAŁA.
   ⛔ NIE wracać do `object-fit:cover` na tych kaflach. Sprawdzone pomiarem
   (`sprawdzacz/scripts/e2e/kadr/`): wysokość kolumny ze zdjęciem dyktuje SĄSIEDNIA kolumna
   tekstu, więc przy dłuższych opisach kafel robi się wąski i wysoki — na tablecie proporcje
   spadały do 0,4 i `cover` pokazywał 33–47% szerokości zdjęcia, ucinając ramiona i głowy
   we wszystkich sześciu kaflach. Dlatego zdjęcie idzie w NATURALNYCH proporcjach
   (szerokość kolumny, wysokość automatyczna, wyśrodkowane w pionie): nic nie jest przycinane
   na żadnym ekranie, a wolne miejsce wypełnia ciemne tło kafla. Tak też wyglądają makiety
   właściciela. */
/* Zdjęcie WYPEŁNIA kafel w całości (bez ciemnych pasów) — `cover` przycina to, co nie mieści
   się w proporcjach kafla. Żeby przycinało TŁO, a nie postać, każde zdjęcie ma własne
   ognisko (`object-position` przy znaczniku img): wskazuje człowieka, więc kadr schodzi
   z krawędzi. Ile wolno przyciąć, pilnuje geometria kafla — patrz komentarz przy .story-photo. */
.story-img{width:100%;height:100%;object-fit:cover;display:block}
.story-cap{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;font-size:.76rem;color:#7AFF8A;border:1px dashed rgba(127,232,138,.4);background:rgba(0,0,0,.55);padding:.4rem .65rem;border-radius:8px;text-align:center}
.story-text{padding:2rem 2.2rem;display:flex;flex-direction:column;justify-content:center}
.story-text h3{font-family:var(--fd);font-weight:600;font-size:1.35rem;line-height:1.2;margin:0 0 .8rem;color:var(--text)}
.story-text p{color:var(--muted);line-height:1.72;margin:.7rem 0;font-size:.97rem}
.story-quote{border-left:3px solid var(--cyan);padding:.15rem 0 .15rem 1.1rem;margin:1.15rem 0;color:var(--text);font-size:1.1rem;line-height:1.5;font-weight:500}
.story-text .hl{color:var(--green);font-weight:600}   /* podświetlenie ważnych, motywujących fraz —

   JEDEN jaskrawy zielony marki wszędzie (także w cytatach); wyjątkiem jest podpis .story-sig */
/* podpis Eli — selektor z .story-text, bo sama klasa przegrywała specyficznością z „.story-text p" */
.story-text p.story-sig{font-family:var(--fd);font-weight:700;font-size:1.75rem;line-height:1.2;letter-spacing:-.01em;
  margin-top:1.5rem;background:linear-gradient(90deg,var(--cyan),var(--green2));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Układ jednokolumnowy (zdjęcie nad tekstem) NIE tylko na telefonie, ale i na tablecie:
   przy dwóch kolumnach wysokość zdjęcia dyktuje sąsiedni tekst, więc na wąskim ekranie kafel
   robił się wysoki i chudy (proporcje 0,4) i `cover` ucinał ludziom ramiona. Zmierzone:
   sprawdzacz/scripts/e2e/kadr/test-kadr.mjs. */
@media(max-width:1180px){
  .story-rows{gap:1.8rem}
  .story-row{grid-template-columns:1fr}
  .story-row:nth-child(even) .story-photo{order:-1}
  /* Zdjęcie NAD tekstem: nic nie narzuca mu wysokości, więc bierze swoje proporcje —
     wypełnia kafel co do piksela i nie jest przycinane ani na milimetr. Sztywne 4:3 byłoby
     tu gorsze: portretom (0,85) ucinałoby 36% wysokości, czyli głowy i nogi. */
  .story-photo{aspect-ratio:auto}
  .story-img{height:auto}
  .story-text{padding:1.6rem 1.5rem}
}

/* ===== PRZEBUDOWA 2026-10-02 (gałąź strona-glowna): hero demo, Co dostajesz, Ciąg, Liczby, O nas skrót, o-nas/ =====
   Same tokeny obu motywów (zasada 2026-09-25), hover tylko pod @media (hover:hover). */
.hero-demo-nota{margin:.9rem 0 0;font-size:.86rem;color:var(--muted)}
/* GWARANCJA SATYSFAKCJI (2026-10-04): pieczęć z falistym brzegiem w niebieskim gradiencie, biały znak „✓" w środku; ta sama
   pieczęć w hero (pod przyciskami) i pod kartami cennika. Barwy z tokenów --gw-* obu motywów. */
.gw-pieczec{display:block;flex:none;filter:drop-shadow(0 6px 14px rgba(var(--gw-rgb),calc(.38*var(--glow-k))))}
.gw-s1{stop-color:var(--gw-a)}.gw-s2{stop-color:var(--gw-b)}
.gw-ring{stroke:var(--gw-na);opacity:.42}.gw-ok{stroke:var(--gw-na)}
.hero-gw{display:flex;align-items:center;gap:.8rem;width:fit-content;max-width:100%;margin:1.35rem 0 0;text-align:left}
.hero-gw .gw-pieczec{width:48px;height:48px}
.gw-tx{display:flex;flex-direction:column;line-height:1.35}
.gw-tx b{font-family:var(--fd);font-weight:700;color:var(--gw-txt);font-size:1rem;letter-spacing:.005em}
.gw-tx span{color:var(--muted);font-size:.88rem}
.cennik-gw{display:flex;align-items:center;gap:1.1rem;width:fit-content;max-width:100%;margin:2.4rem auto 0;padding:1rem 1.5rem 1rem 1.1rem;
  border-radius:20px;border:1px solid rgba(var(--gw-rgb),.3);background:linear-gradient(120deg,rgba(var(--gw-rgb),.12),rgba(var(--gw-rgb),.03))}
.cennik-gw .gw-pieczec{width:62px;height:62px}
.cennik-gw .gw-tx b{font-size:1.12rem}
.cennik-gw .gw-tx span{font-size:.95rem}
@media(max-width:1040px){.hero-gw{margin-left:auto;margin-right:auto}}
@media(max-width:560px){.hero-gw{max-width:20.5rem}.hero-gw .gw-pieczec{width:42px;height:42px}.gw-tx span{font-size:.84rem}
  .cennik-gw{padding:.9rem 1rem;gap:.85rem;border-radius:16px}.cennik-gw .gw-pieczec{width:52px;height:52px}.cennik-gw .gw-tx b{font-size:1.02rem}}
/* telefon z pokazem oceny: jeden ekran na całą wysokość, bez taśmy przewijanych ekranów */
.screens-demo{height:100%;animation:none}
.demo-screen{height:100%;position:relative;gap:7px;overflow:hidden}
.demo-field{position:relative;min-height:64px;line-height:1.38;font-size:.7rem}
.demo-ph{display:none;color:var(--dim);position:absolute;left:10px;top:8px}
.demo-caret{display:inline-block;width:1.5px;height:.95em;margin-left:1px;vertical-align:-2px;background:var(--text);opacity:0}
.demo-btns{display:flex;flex-direction:column;gap:7px;transition:opacity .3s}
/* panel oceny leży NAD przyciskami (position:absolute), więc jego wejście nie przesuwa niczego na ekranie */
.demo-panel{position:absolute;left:13px;right:13px;bottom:12px;transition:opacity .45s ease,transform .45s ease;
  box-shadow:0 -14px 34px rgba(var(--cien-rgb),calc(.55*var(--cien-k)))}
.demo-el .ph-ck{transition:transform .35s cubic-bezier(.34,1.5,.5,1),opacity .3s}
.ph-cta{transition:transform .15s ease,filter .15s ease}
/* stany sterowane skryptem (klasa demo-on dokłada JS). Bez JS nie ma klasy .anim na <html>, więc stoi stan końcowy. */
.anim .demo-txt{visibility:hidden}
.anim .demo-on .demo-txt{visibility:visible}
.anim .demo-on .demo-ph{display:inline}
.anim .demo-on.pisze .demo-ph,.anim .demo-on.sprawdza .demo-ph,.anim .demo-on.wynik .demo-ph,.anim .demo-on.fin .demo-ph{display:none}
.anim .demo-panel{opacity:0;transform:translateY(10px);pointer-events:none}
.anim .wynik .demo-panel,.anim .fin .demo-panel{opacity:1;transform:none}
.anim .wynik .demo-btns,.anim .fin .demo-btns{opacity:0}
.anim .demo-on .demo-el{opacity:.4;transition:opacity .3s}
.anim .demo-on .demo-el .ph-ck{transform:scale(.4);opacity:0}
.anim .demo-on .demo-el.in{opacity:1}
.anim .demo-on .demo-el.in .ph-ck{transform:none;opacity:1}
.pisze .demo-caret{opacity:1;animation:demoCaret 1s steps(2,start) infinite}
@keyframes demoCaret{to{opacity:0}}
.sprawdza #demoBtn{transform:scale(.97);filter:brightness(.85)}

/* CO DOSTAJESZ = przewodnik po aplikacji (2026-10-02 wieczorem): lista punktów po lewej (aktywny rozwija jedną linię
   i ma pasek postępu automatu), telefon po prawej z ekranem wybranego punktu (ekrany leżą jeden na drugim, przenikanie) */
.tour{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:center;margin-top:2.4rem}
.tour-list{display:flex;flex-direction:column;gap:.45rem}
.tour-it{position:relative;display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;padding:.8rem 1rem;border-radius:16px;border:1px solid var(--line);
  background:rgba(var(--hi-rgb),.02);color:var(--text);font:inherit;cursor:pointer;clip-path:inset(0 round 16px);transition:border-color .25s,background .25s;-webkit-tap-highlight-color:transparent}
@media(hover:hover) and (pointer:fine){.tour-it:hover{border-color:color-mix(in srgb,var(--cyan) 40%,var(--line))}}
.tour-it.on{border-color:color-mix(in srgb,var(--green) 55%,transparent);background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
.tour-it:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.tour-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);
  background:color-mix(in srgb,var(--cyan) 7%,transparent);transition:box-shadow .3s,color .3s,border-color .3s}
.tour-ic svg{width:21px;height:21px}
.tour-it.on .tour-ic{color:var(--green);border-color:color-mix(in srgb,var(--green) 50%,transparent);box-shadow:0 0 18px -6px rgba(var(--green-rgb),calc(.9*var(--glow-k)))}
.tour-tx{min-width:0;flex:1}
.tour-tx b{display:block;font-family:var(--fd);font-weight:700;font-size:1rem;line-height:1.25}
.tour-tx span{display:block;color:var(--muted);font-size:.86rem;line-height:1.45;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin .35s ease}
.tour-it.on .tour-tx span{max-height:3.2em;opacity:1;margin-top:.2rem}
.tour-num{flex:none;font-family:var(--fd);font-size:.74rem;font-weight:700;color:var(--dim)}
/* pasek postępu automatu: 1 px w gradiencie marki (właściciel 2026-10-03 rano: „pasek postępu może być gradient 2px",
   chwilę po wydaniu: „jednak pasek postępu 1px"; gradient zostaje, zmieniła się tylko wysokość) */
/* Pasek (1 px) leżał tuż NAD dolną ramką kafla (1 px, zielona przy aktywnym), więc tam, gdzie dojechał, linia miała 2 px,
   a dalej 1 px (właściciel 2026-10-04: „niektóre paski mają 2px, a inne 1, napraw na 1”). Do 2026-10-05 aktywny kafel miał dolną
   ramkę PRZEZROCZYSTĄ, a prostą linię rysował ::after w rzędzie paska: w zaokrąglonych rogach ramki brakowało (właściciel ze
   zrzutem: „ramki są do poprawy, bo na dole po prawej i lewej są braki"). Teraz kafel zamiast overflow:hidden ma clip-path:inset(0
   round 16px) (przycina do zaokrąglonej RAMKI, nie do pola wewnętrznego), ramka zostaje cała, a pasek leży NA dolnej ramce
   (bottom:-1px, szerokość liczona z ramką): tam, gdzie dojechał, zasłania zieloną linię, w rogach przycina go zaokrąglenie. */
.tour-bar{position:absolute;left:-1px;bottom:-1px;height:1px;width:0;z-index:1;background:linear-gradient(90deg,var(--gs));opacity:0}
.tour.go .tour-it.on .tour-bar{opacity:1;animation:tourBar var(--tour-t,4.2s) linear forwards}
/* pauza musi być BARDZIEJ specyficzna niż reguła wyżej: skrót `animation` resetuje play-state na running */
.tour.go.paused .tour-it.on .tour-bar{animation-play-state:paused}
@keyframes tourBar{from{width:0}to{width:calc(100% + 2px)}}
/* touch-action:pan-y na telefonie i oknie lekcji: przewijanie strony palcem w pionie zostaje w przeglądarce, a poziome
   przesunięcie dociera do skryptu jako pointerup (zmiana ekranu, właściciel 2026-10-03) */
.tour-phone{position:relative;display:grid;place-items:center;touch-action:pan-y}
.tour-phone:before{content:"";position:absolute;left:50%;top:50%;width:120%;height:90%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--luna-a-rgb),calc(.3*var(--glow-k))),rgba(var(--luna-c-rgb),calc(.06*var(--glow-k))) 55%,transparent 90%);filter:blur(40px)}
.tour-phone .phone{animation:none;transform:none}
.screens-tour{position:relative;height:100%;animation:none}
.tour-scr{position:absolute;inset:0;height:100%;opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;overflow:hidden}
.tour-scr.on{opacity:1;transform:none;pointer-events:auto}
.tour-desc{display:none;margin:.9rem 0 0;text-align:center;color:var(--muted);font-size:.92rem;min-height:2.8em}
/* ekrany przewodnika: elementy spoza makiety telefonu (ciąg, egzamin, zdjęcia Papieru) */
.ph-cg{display:flex;flex-direction:column;gap:3px}
.ph-cgp,.ph-cgk{border:1px solid var(--line);border-radius:9px;padding:6px 8px;font-size:.58rem;line-height:1.35;color:var(--text);background:rgba(var(--hi-rgb),.02)}
.ph-cgp{border-color:color-mix(in srgb,var(--cyan) 40%,var(--line))}
.ph-cgp i{display:block;font-style:normal;font-size:.5rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.ph-cgk{border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
.ph-cgs{display:block;text-align:center;color:var(--dim);font-size:.6rem;line-height:1}
.ph-egz{gap:5px}
.ph-egzt{display:flex;align-items:baseline;justify-content:space-between}
.ph-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;font-size:.64rem;color:var(--text2)}
.ph-opt b{flex:none;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;border:1px solid var(--line);font-size:.58rem;color:var(--muted)}
.ph-opt.on{border-color:var(--green);color:var(--text)}
.ph-opt.on b{background:var(--green);color:var(--na-fill);border-color:transparent}
.ph-foto{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ph-fotok{aspect-ratio:3/4;border-radius:9px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.54rem;color:var(--muted);
  background:linear-gradient(160deg,rgba(var(--hi-rgb),.08),rgba(var(--hi-rgb),.02))}
.ph-fotok i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 22%,transparent);color:var(--green);font-size:.56rem;font-weight:700}
.ph-fotod{border-style:dashed;background:none;color:var(--cyan)}
/* pasek z sześcioma zakładkami (od 2026-10-02 także „Powtórki"): mniejsza czcionka, żeby nic nie nachodziło na siebie */
.ph-tabs-6 .ph-tb{font-size:.52rem;letter-spacing:-.01em;padding:7px 0}
.ph-tabs-6 .ph-tb-dom{flex:0 0 26px}
/* pod przewodnikiem: dwie karty planów + pigułki „na czym działa" */
/* CO DOSTAJESZ = TRZY FILARY (2026-10-02 późnym wieczorem, właściciel: „kafelki jakoś ładniej ująć graficznie… ściana tekstu"):
   karta = mini-makieta u góry (panel oceny / odtwarzacz lekcji / Ela z plakietką 1:1) z plakietką planu, tytuł, pigułki, odnośnik */
.fil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
/* subgrid: makiety trzech kart dostają jedną wysokość (najwyższa = kadr filmu 16:9), więc tytuły i listy startują
   na tej samej linii; przeglądarka bez subgrid układa karty po swojemu, bez szkody dla treści (2026-10-04) */
/* karty statyczne: bez odnośnika i bez reakcji na najechanie (właściciel 2026-10-04) */
.fil{position:relative;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;border-radius:22px;border:1px solid var(--line);overflow:hidden;color:var(--text);
  background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
/* trzy karty w JEDNYM stylu: bez zielonej ramki i zielonej poświaty karty Premium i bez plakietek planów
   (właściciel 2026-10-04: „usuń też podświetlenie ostatniego kafelka i usuń te kapsułki basic, standard i premium") */
.fil-vis{position:relative;min-height:170px;padding:1.1rem 1.2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(120% 90% at 20% 0%,rgba(var(--cyan-rgb),calc(.16*var(--glow-k))),transparent 60%),radial-gradient(90% 80% at 100% 100%,rgba(var(--green-rgb),calc(.14*var(--glow-k))),transparent 60%);
  border-bottom:1px solid var(--line)}
.fil-tx{display:flex;flex-direction:column;gap:.7rem;padding:1.15rem 1.25rem 1.25rem}
.fil-tx h3{margin:0;font-family:var(--fd);font-size:1.28rem;line-height:1.2;font-weight:700}
/* punkty oferty: lista z ✓, jeden na linię (2026-10-04: pigułki wyglądały jak przyciski i łamały się nierówno) */
.fil-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fil-lista li{display:flex;align-items:flex-start;gap:.55rem;font-size:.93rem;line-height:1.4;color:var(--text2)}
.fil-lista svg{width:18px;height:18px;flex:none;margin-top:.08rem;color:var(--green)}
/* mini-makiety filarów */
.fv{width:100%;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--scr-a),var(--scr-b));color:var(--text);font-size:.72rem;line-height:1.35;overflow:hidden}
.fv-ocena{padding:.7rem .8rem;display:flex;flex-direction:column;gap:.45rem}
.fv-chips{display:flex;gap:.35rem}
.fv-chips span{border:1px solid var(--line);border-radius:7px;padding:.2rem .5rem;font-family:var(--fd);font-weight:700;font-size:.62rem;color:var(--muted)}
.fv-chips .sel{color:var(--green);border-color:rgba(var(--green-rgb),.4);text-transform:uppercase}
.fv-wynik{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:10px;border:1px solid rgba(var(--green-rgb),.35);background:rgba(var(--green-rgb),.06)}
.fv-wynik b{font-family:var(--fd);font-size:1.5rem;line-height:1;color:var(--green)}
.fv-wynik b i{font-style:normal;font-size:.75rem;color:var(--muted)}
.fv-wynik span{display:flex;flex-direction:column;font-size:.7rem;color:var(--text)}
.fv-wynik em{font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.fv-el{display:flex;align-items:center;gap:.45rem;color:var(--text2)}
.fv-el i{font-style:normal;width:16px;height:16px;border-radius:5px;display:grid;place-items:center;font-size:.6rem;color:var(--na-fill);background:var(--green);flex:none}
/* odtwarzacz: kadr w PEŁNYM 16:9 (bez max-height, które ucinało klatkę), podpis lekcji pod kadrem w kolorach motywu */
.fv-player{display:flex;flex-direction:column;border-color:var(--line2)}
.fv-kadr{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,rgba(var(--cyan-rgb),.25),rgba(var(--green-rgb),.18)),var(--scr-c)}
.fv-img{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.fv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;z-index:1;
  background:linear-gradient(96deg,var(--gsr));color:var(--na-fill);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.fv-play svg{width:21px;height:21px;margin-left:2px}
.fv-cap{display:flex;align-items:baseline;gap:.5rem;padding:.5rem .75rem;border-top:1px solid var(--line);min-width:0}
.fv-cap b{font-family:var(--fd);font-size:.85rem;flex:none}
.fv-cap span{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-ela{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.9rem .8rem;text-align:center}
.fv-aw{position:relative;width:72px;height:72px;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--cyan),var(--green));display:grid;place-items:center}
.fv-aw i,.fv-aw img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:50%;object-fit:cover}
.fv-aw i{display:grid;place-items:center;font-style:normal;font-family:var(--fd);font-weight:800;font-size:1.6rem;color:var(--na-fill);background:linear-gradient(135deg,var(--cyan),var(--green))}
.fv-aw b{position:absolute;right:-6px;bottom:-4px;font-family:var(--fd);font-size:.62rem;font-weight:800;color:var(--na-fill);background:var(--green);border-radius:99px;padding:.15rem .45rem;border:2px solid var(--panel)}
.fv-kto b{display:block;font-family:var(--fd);font-size:.95rem}
.fv-kto span{color:var(--muted);font-size:.72rem}
@media(max-width:900px){
  .tour{grid-template-columns:1fr;gap:1rem;margin-top:1.6rem}
  .tour-list{flex-direction:row;overflow-x:auto;gap:.5rem;margin:0 -22px;padding:0 22px .5rem;scrollbar-width:none;scroll-snap-type:x proximity}
  .tour-list::-webkit-scrollbar{display:none}
  .tour-it{flex:0 0 auto;width:auto;padding:.5rem .8rem .6rem;border-radius:999px;gap:.5rem;scroll-snap-align:center}
  .tour-ic{width:28px;height:28px;border-radius:9px}.tour-ic svg{width:15px;height:15px}
  .tour-tx b{font-size:.84rem;white-space:nowrap}
  .tour-tx span,.tour-num,.tour-it.on .tour-tx span{display:none}
  .tour-desc{display:block}
  .fil-grid{grid-template-columns:1fr;gap:.9rem}
  .fil-vis{min-height:0}   /* jedna kolumna: wysokość za treścią makiety */
  .fil .fv{max-width:440px}   /* na tablecie w jednej kolumnie kadr filmu rósł do 680 × 380 px */
  /* pas wyników pod hero: na telefonie jeden rząd przesuwany palcem (jak opinie), karta na 84 % szerokości */
  .dw-pas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;padding:0 0 .5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dw-pas::-webkit-scrollbar{display:none}
  .dw-k{flex:0 0 84%;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){.tour-scr{transition:none}.tour-bar{animation:none!important}.tour-tx span{transition:none}}

/* CIĄG PRZYCZYNOWO-SKUTKOWY: tekst po lewej, scena pokazu po prawej (układ 1:1 z oknem KrokPoKroku w apce:
   Przyczyna, ogniwa ze strzałkami, Skutek, pula „Wybierz", przycisk „Sprawdź kolejność") */
.cg-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.cg-copy p{margin-top:.9rem;max-width:480px}
.cg-lista{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-direction:column;gap:.7rem}
.cg-lista li{position:relative;padding-left:1.5rem;color:var(--muted);font-size:.95rem;line-height:1.5}
.cg-lista li:before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.7rem;border-radius:50%;background:linear-gradient(120deg,var(--gs))}
.cg-lista b{color:var(--text);font-weight:600}
.cg-stage{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.2rem 1.2rem;border-radius:22px;border:1px solid var(--line2);
  background:radial-gradient(120% 60% at 100% 0%,rgba(var(--green-rgb),.07),transparent 60%),linear-gradient(165deg,var(--kart-a),var(--kart-b));
  box-shadow:0 24px 60px rgba(var(--cien-rgb),calc(.45*var(--cien-k)))}
.cg-etyk{display:block;font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:.25rem}
.cg-punkt{border:1px solid color-mix(in srgb,var(--cyan) 35%,var(--line));border-radius:14px;padding:.7rem .9rem;font-size:.9rem;line-height:1.4;color:var(--text);background:color-mix(in srgb,var(--cyan) 5%,transparent)}
.cg-lancuch{display:flex;flex-direction:column;align-items:stretch}
.cg-strz{display:block;width:11px;height:11px;margin:3px auto 5px;border-right:2px solid var(--line2);border-bottom:2px solid var(--line2);transform:rotate(45deg)}
.cg-slot{min-height:46px;border:1px dashed var(--line2);border-radius:14px;display:flex;flex-direction:column;transition:border-color .3s,background .3s}
.cg-karta{border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;font-size:.88rem;line-height:1.4;color:var(--text);background:var(--panel);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .3s;will-change:transform;position:relative;z-index:1}
.cg-slot .cg-karta{flex:1;border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.cg-slot .cg-karta.zle{border-color:var(--red);background:rgba(var(--red-rgb),.08);box-shadow:0 0 0 1px rgba(var(--red-rgb),.5)}
.cg-stage.ok .cg-slot{border-style:solid;border-color:color-mix(in srgb,var(--green) 55%,transparent);background:color-mix(in srgb,var(--green) 6%,transparent)}
.cg-stage.ok .cg-slot .cg-karta{border-color:color-mix(in srgb,var(--green) 60%,transparent)}
.cg-pula{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem;padding:.8rem;border:1px dashed var(--line2);border-radius:16px}
.cg-pula .cg-etyk{margin-bottom:0}
.cg-dol{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem}
.cg-btn{align-self:flex-start;padding:.7rem 1.3rem;border-radius:12px;font-family:var(--fd);font-weight:700;font-size:.88rem;color:var(--na-fill);background:linear-gradient(96deg,var(--gsr));transition:transform .15s,filter .15s}
.cg-btn.press{transform:scale(.97);filter:brightness(.85)}
.cg-msg{margin:0;min-height:4.3em;font-size:.86rem;line-height:1.45;color:var(--muted);transition:color .3s}
.cg-msg.zle{color:var(--red-txt)}
.cg-stage.ok .cg-msg{color:var(--text)}
/* przycisk do gry pod tekstem + okno gry „Ułóż ciąg samodzielnie" (ta sama scena .cg-stage, karty są przyciskami) */
.cg-graj-wrap{margin-top:1.5rem;display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.cg-graj-nota{font-size:.84rem;color:var(--dim)}
.cg-ov .lg-card.cg-card{width:min(660px,100%);padding:22px 20px 20px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto}
.cg-x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);font:inherit;font-size:1.35rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media(hover:hover) and (pointer:fine){.cg-x:hover{color:var(--text);border-color:var(--line2)}}
.cg-head{padding-right:44px}
.cg-licznik{font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.cg-head h3{font-family:var(--fd);font-weight:700;font-size:1.25rem;line-height:1.2;margin:.25rem 0 .35rem;color:var(--text)}
.cg-instr{margin:0 0 .9rem;color:var(--muted);font-size:.86rem;line-height:1.5}
.cg-instr b{color:var(--text)}
.cg-gra{box-shadow:none;padding:1rem .9rem .9rem;background:rgba(var(--hi-rgb),.02);border-color:var(--line)}
.cg-gra .cg-karta{display:block;width:100%;text-align:left;font:inherit;font-size:.88rem;line-height:1.4;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s}
@media(hover:hover) and (pointer:fine){.cg-gra .cg-pula .cg-karta:hover{border-color:color-mix(in srgb,var(--cyan) 50%,var(--line))}}
.cg-gra .cg-lancuch .cg-karta{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.cg-gra .cg-karta.zle{border-color:var(--red);background:rgba(var(--red-rgb),.08)}
.cg-gra .cg-karta.poz{border-color:rgba(var(--amber-rgb),.75);background:rgba(var(--amber-rgb),.08)}
.cg-gra .cg-lancuch:empty:before{content:"Tu ułożysz ogniwa: stuknij kartę z puli";display:block;border:1px dashed var(--line2);border-radius:14px;padding:.7rem .9rem;color:var(--dim);font-size:.84rem;text-align:center}
.cg-uwaga{display:block;font-size:.78rem;color:var(--amber-txt);margin:.3rem .2rem .1rem;line-height:1.4}
.cg-uwaga.zle{color:var(--red-txt)}
.cg-gra .cg-msg{min-height:0;margin-top:.5rem}
.cg-gbtns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
/* atrybut hidden przegrywa z display:flex/inline-flex reguł klas, więc wprost */
.cg-gbtns .btn[hidden],.cg-pula[hidden],.cg-cta[hidden]{display:none}
.cg-gbtns .btn[disabled]{opacity:.45;cursor:default}
.cg-cta{margin:.9rem 0 0;font-size:.9rem;color:var(--muted);line-height:1.5}
.cg-cta a{color:var(--green);font-weight:600}
@media(max-width:1020px){.cg-graj-wrap{align-items:center}}
@media(max-width:600px){.cg-ov{padding:10px}.cg-ov .lg-card.cg-card{padding:18px 14px 16px;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}.cg-gra .cg-karta{font-size:.82rem}}
@media(max-width:1020px){.cg-layout{grid-template-columns:1fr;gap:2rem}.cg-copy{text-align:center}.cg-copy p{margin-left:auto;margin-right:auto}
  .cg-lista{max-width:560px;margin-left:auto;margin-right:auto;text-align:left}}
@media(max-width:600px){.cg-stage{padding:1rem .85rem .9rem;border-radius:18px}.cg-karta,.cg-punkt{font-size:.82rem;padding:.6rem .75rem}.cg-msg{min-height:5.6em}}

/* JAK WYGLĄDA LEKCJA: drugi przewodnik (te same klasy .tour-*), kroki w rzędzie NAD oknem przeglądarki z ekranem lekcji */
/* blok lekcji nie szerszy niż 1120 px (właściciel 2026-10-02 wieczorem: „sekcja jak wygląda lekcja jest źle wyskalowana na desktop"):
   na pełnej szerokości odtwarzacz był paskiem, a tabela rozjeżdżała się na 1200 px; do tego kolumna „Program kursu" jak w apce */
.tour-poziomy{grid-template-columns:1fr;gap:1.2rem;align-items:stretch;max-width:1120px;margin-left:auto;margin-right:auto}
.tour-poziomy .tour-list{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.tour-poziomy .tour-it{align-items:center;padding:.85rem .95rem}   /* ikona + sam tytuł (bez opisu i numeru, właściciel 2026-10-02) */
.tour-poziomy .tour-ic{width:36px;height:36px;border-radius:11px}
.tour-poziomy .tour-ic svg{width:19px;height:19px}
.tour-poziomy .tour-tx b{font-size:.96rem}
.tour-screen{position:relative}
.lek-okno{position:relative;touch-action:pan-y;border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--scr-a),var(--scr-b));
  box-shadow:0 30px 70px rgba(var(--cien-rgb),calc(.5*var(--cien-k)))}
.lek-okno-pasek{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--line);background:rgba(var(--hi-rgb),.03)}
.lek-okno-pasek i{width:9px;height:9px;border-radius:50%;background:rgba(var(--hi-rgb),.14)}
.lek-okno-pasek span{margin-left:8px;font-size:.72rem;color:var(--dim);font-family:var(--fd)}
/* ekrany lekcji leżą w JEDNEJ komórce siatki: okno ma wysokość NAJWYŻSZEGO ekranu (nic nie jest ucięte, nic nie skacze
   przy automacie), a przenikanie zostaje z .tour-scr */
.lek-screens{display:grid;height:auto}
.lek-screens .tour-scr{position:relative;inset:auto;height:auto;grid-area:1/1}
.lek-scr{display:grid;grid-template-columns:230px minmax(0,1fr);padding:0;font-family:var(--fb)}   /* padding:0, bo ekrany to <section> (globalny padding sekcji) */
.lek-tresc{min-width:0;padding:16px 18px 14px;display:flex;flex-direction:column;gap:10px}
.lek-prog{border-right:1px solid var(--line);background:rgba(var(--hi-rgb),.02);padding:14px 12px;display:flex;flex-direction:column;gap:4px;align-self:stretch}
.lek-prog-t{font-family:var(--fd);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.lek-prog-d{font-family:var(--fd);font-weight:700;font-size:.86rem;color:var(--text);margin-bottom:6px}
.lek-prog ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.lek-prog li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;font-size:.74rem;color:var(--muted)}
.lek-prog li i{font-style:normal;flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.6rem;font-weight:700;font-family:var(--fd);border:1px solid var(--line2)}
.lek-prog li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lek-prog li em{font-style:normal;font-size:.64rem;color:var(--dim)}
.lek-prog li.on{background:color-mix(in srgb,var(--green) 10%,transparent);color:var(--text)}
.lek-prog li.on i{background:var(--green);color:var(--na-fill);border-color:transparent}
.lek-prog li.bez{opacity:.55}
.lek-head{display:flex;flex-direction:column;gap:3px}
.lek-meta{font-size:.72rem;color:var(--muted)}
.lek-tyt{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.lek-tyt h4{margin:0 auto 0 0;font-family:var(--fd);font-weight:700;font-size:1.25rem;color:var(--text)}
.lek-btn{font-size:.7rem;font-family:var(--fd);font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.3rem .65rem;white-space:nowrap}
.lek-tabs{display:flex;gap:1.1rem;border-bottom:1px solid var(--line);padding:0 2px}
.lek-tab{position:relative;padding:.45rem 0 .55rem;font-family:var(--fd);font-weight:600;font-size:.8rem;color:var(--muted)}
.lek-tab.on{color:var(--text)}
.lek-tab.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--gs))}
.lek-player-img{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.lek-player:after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}  /* odtwarzacz = ten sam w obu motywach (świadomy wyjątek) */
.lek-player{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line2);   /* pełne 16:9, bez przycinania klatki (właściciel: „lekcja ucięta") */
  background:radial-gradient(90% 70% at 30% 30%,rgba(var(--cyan-rgb),.22),transparent 60%),radial-gradient(80% 60% at 80% 90%,rgba(var(--green-rgb),.18),transparent 60%),#06121a}
.lek-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:var(--na-fill);
  background:linear-gradient(96deg,var(--gsr));box-shadow:0 0 40px rgba(var(--green-rgb),calc(.55*var(--glow-k)))}
.lek-play svg{width:28px;height:28px;margin-left:3px}
.lek-bar{position:absolute;z-index:2;left:12px;right:12px;bottom:10px;display:flex;align-items:center;gap:8px}
.lek-czas{font-size:.66rem;color:#dfe8e6;font-family:var(--fd);font-weight:600}
.lek-track{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.lek-track b{display:block;height:100%;background:linear-gradient(90deg,var(--gs));border-radius:inherit}
.lek-mini{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(var(--hi-rgb),.03);font-size:.72rem;color:var(--muted)}
.lek-mini b{color:var(--text);font-family:var(--fd)}
.lek-mini .lek-track{background:rgba(var(--hi-rgb),.1)}
.lek-mini-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--na-fill);background:linear-gradient(96deg,var(--gsr));flex:none}
.lek-mini-ic svg{width:11px;height:11px;margin-left:1px}
.lek-blok{display:flex;flex-direction:column;gap:7px}
.lek-lab{font-family:var(--fd);font-weight:700;font-size:.74rem;color:var(--cyan);letter-spacing:.04em}
.lek-tabela{width:100%;border-collapse:collapse;font-size:.72rem;line-height:1.35}
.lek-tabela th{text-align:left;font-family:var(--fd);font-weight:600;color:var(--dim);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:0 8px 5px 0}
.lek-tabela td{padding:5px 8px 5px 0;border-top:1px solid var(--line);color:var(--text2);vertical-align:top}
.lek-tabela td:first-child{color:var(--text);font-weight:600}
.lek-chips{display:flex;flex-wrap:wrap;gap:5px}
.lek-chip{border:1px solid var(--line);border-radius:9px;padding:4px 8px;font-size:.68rem;color:var(--muted);background:rgba(var(--hi-rgb),.02)}
.lek-chip b{color:var(--text)}
.lek-zady{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lek-zad{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:rgba(var(--hi-rgb),.02)}
.lek-zad.done{border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
.lek-zad-tx b{display:block;font-family:var(--fd);font-size:.78rem;color:var(--text)}
.lek-zad-tx span{display:block;font-size:.66rem;color:var(--muted)}
.lek-rozw{flex:none;font-family:var(--fd);font-weight:700;font-size:.72rem;color:var(--na-fill);background:linear-gradient(96deg,var(--gsr));border-radius:9px;padding:6px 10px}
.lek-ok{flex:none;font-family:var(--fd);font-weight:700;font-size:.72rem;color:var(--green)}
/* jedna plansza naraz, wybrana motywem strony (ciemny domyślny → ciemna; jasny → jasna); właściciel 2026-10-02: „wgramy po jednej,
   jedna w motywie ciemnym i druga w jasnym" */
.lek-mapy{display:grid;grid-template-columns:1fr}
.lek-mapa.jasna{display:none}
html[data-motyw="jasny"] .lek-mapa.jasna{display:flex}
html[data-motyw="jasny"] .lek-mapa.ciemna{display:none}
.lek-mapa{border-radius:12px;overflow:hidden;border:1px solid var(--line2);display:flex;flex-direction:column}
.lek-mapa.jasna{background:#fff;color:#1a2b2a}      /* tła kart = tła plansz (biel / czerń), żeby wokół obrazu nie było paska */
.lek-mapa.ciemna{background:#000;color:#dfe8e6}
/* obraz mapy z CDN (plansze od właściciela); gdy pliku nie ma (onerror → .brak), zostaje rysunek SVG */
.lek-mapa-img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;padding:6px}
.lek-mapa:not(.brak) .mm-svg,.lek-mapa.brak .lek-mapa-img{display:none}
.mm-svg{display:block;width:100%;height:auto;max-height:215px;padding:8px 6px 2px}
.mm-g{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.55}
.mm-w{fill:none;stroke:currentColor;stroke-width:1;opacity:.8}
.mm-t{font:600 8.4px var(--fb);fill:currentColor}
.mm-c{fill:none;stroke-width:1.8}
.lek-mapa.jasna .mm-c{stroke:#1f9e3f}.lek-mapa.ciemna .mm-c{stroke:#5FE889}
.mm-tc{font:700 10px var(--fd);fill:currentColor;letter-spacing:.08em}
.lek-mapa-dol{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;font-size:.66rem;border-top:1px solid rgba(127,127,127,.25)}
.lek-mapa-dol b{font-family:var(--fd);font-size:.68rem;padding:4px 9px;border-radius:8px;color:var(--na-fill);background:linear-gradient(96deg,var(--gsr))}
@media(max-width:900px){
  .tour-poziomy .tour-list{display:flex}
  .tour-poziomy .tour-it{align-items:center;padding:.5rem .8rem .6rem}
  .lek-tresc{padding:12px 12px 10px;gap:8px}
  .lek-tyt h4{font-size:1.05rem}
  .lek-tabela td,.lek-tabela th{padding-right:5px}
}
@media(max-width:1020px){.lek-scr{grid-template-columns:1fr}.lek-prog{display:none}}   /* jak w apce: poniżej 1020 px bez przypiętego programu */
@media(max-width:760px){.lek-zady{grid-template-columns:1fr}}
/* ===== DZIEŃ NAUKI W BIOVERSE: okno apki na komputerze (2026-10-04) ===== */
/* siedem kafli w jednym rzędzie (≤ 1120 px): ciaśniejszy kafel i mniejsza czcionka, żeby „przykładowe” i „Sprawdzasz” nie
   wychodziły poza krawędź (pomiar dsk-kafle.mjs: scrollWidth ≤ clientWidth na 1440 i 1100) */
.tour-dsk .tour-list{grid-template-columns:repeat(6,1fr)}   /* sześć kroków (do 2026-10-05 siedem) */
.tour-dsk .tour-it{padding:.7rem .62rem;gap:.5rem}
.tour-dsk .tour-ic{width:30px;height:30px;border-radius:9px}
.tour-dsk .tour-ic svg{width:16px;height:16px}
.tour-dsk .tour-tx b{font-size:.8rem}
.dsk-scr{display:grid;grid-template-columns:168px minmax(0,1fr);padding:0;font-family:var(--fb);font-size:.76rem;line-height:1.4;color:var(--text);min-height:440px}
.dsk-side{border-right:1px solid var(--line);background:rgba(var(--hi-rgb),.02);padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.dsk-logo{display:block;height:22px;margin:4px 8px 14px;background-image:var(--logo);background-repeat:no-repeat;background-position:left center;background-size:contain}
.dsk-nav{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;color:var(--muted);font-weight:600;font-size:.8rem}
.dsk-nav svg{width:16px;height:16px;flex:none}
.dsk-nav.on{color:var(--green);background:rgba(var(--green-rgb),.1)}
.dsk-main{min-width:0;display:flex;flex-direction:column}
.dsk-top{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}
.dsk-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.dsk-tt b{font-family:var(--fd);font-size:.95rem}
.dsk-tt span{font-size:.7rem;color:var(--muted)}
.dsk-ico{width:28px;height:28px;display:grid;place-items:center;color:var(--text2)}
.dsk-ico svg{width:16px;height:16px}
.dsk-ava{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:.8rem;color:var(--na-fill);background:linear-gradient(135deg,var(--cyan),var(--green))}
.dsk-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.dsk-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;align-items:start}
.dsk-lek{grid-template-columns:210px minmax(0,620px)}   /* film nie szerszy niż 620 px, inaczej ekran lekcji dyktował oknu 650 px wysokości */
.dsk-seria{display:flex;gap:5px}
.dsk-seria i{flex:1;height:18px;border-radius:6px;border:1px solid var(--line)}
.dsk-seria i.on{background:rgba(var(--green-rgb),.22);border-color:transparent}
.dsk-jeden{max-width:640px}
.dsk-stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.dsk-card{border:1px solid var(--line);border-radius:13px;padding:12px 14px;background:rgba(var(--hi-rgb),.02);display:flex;flex-direction:column;gap:8px;min-width:0}
.dsk-lab{font-family:var(--fd);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.dsk-kick{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.dsk-h{font-family:var(--fd);font-size:1.05rem;font-weight:700}
.dsk-sub,.dsk-dim{color:var(--muted);font-size:.74rem}
.dsk-staty{display:flex;gap:14px;font-weight:700}
.dsk-staty .zi{color:var(--green)}.dsk-staty .cy{color:var(--cyan)}
.dsk-cta{align-self:flex-start;border-radius:9px;padding:7px 16px;font-family:var(--fd);font-weight:700;font-size:.8rem;color:var(--na-fill);background:linear-gradient(96deg,var(--gsr))}
.dsk-gh{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);border-radius:9px;padding:6px 12px;font-weight:600;font-size:.76rem;color:var(--text2)}
.dsk-gh svg{width:13px;height:13px;flex:none}
.dsk-cta.dsk-full{flex:1;text-align:center}
.dsk-link{font-size:.74rem;color:var(--green);font-weight:600}
.dsk-dz{display:flex;align-items:center;gap:10px}
.dsk-dz i{font-style:normal;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--cyan-rgb),.12);font-size:1rem;flex:none}
.dsk-dz div{flex:1;min-width:0;display:flex;flex-direction:column}
.dsk-dz b{font-size:.84rem}.dsk-dz span{font-size:.7rem;color:var(--muted)}
.dsk-dz em{font-style:normal;font-family:var(--fd);font-weight:700;color:var(--green)}
.dsk-bar{display:block;height:6px;border-radius:99px;background:rgba(var(--hi-rgb),.09);position:relative;overflow:hidden}
.dsk-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);border-radius:99px;background:linear-gradient(90deg,var(--gs))}
.dsk-est{display:flex;align-items:baseline;gap:8px}
.dsk-big{font-family:var(--fd);font-weight:700;font-size:1.7rem;line-height:1;background:linear-gradient(96deg,var(--gsr));-webkit-background-clip:text;background-clip:text;color:transparent}
.dsk-up{font-size:.7rem;color:var(--green)}
.dsk-progi{display:flex;flex-direction:column;gap:4px;font-size:.72rem}
.dsk-progi div{display:flex;justify-content:space-between;color:var(--text2)}
.dsk-progi em{font-style:normal;color:var(--muted)}.dsk-progi em.ok{color:var(--green)}
.dsk-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dsk-chips span{border:1px solid var(--line);border-radius:7px;padding:3px 8px;font-family:var(--fd);font-weight:700;font-size:.64rem;color:var(--muted)}
.dsk-chips .sel{color:var(--green);border-color:rgba(var(--green-rgb),.4);text-transform:uppercase}
.dsk-chips .pkt{color:var(--cyan)}
.dsk-chips .dsk-pager{margin-left:auto;border:0;padding:0;font-size:.72rem;color:var(--dim)}
.dsk-q{margin:0;font-size:.84rem;line-height:1.5}
.dsk-field{position:relative;min-height:64px;border:1px solid var(--line2);border-radius:10px;padding:9px 11px;background:rgba(var(--hi-rgb),.02);font-size:.8rem;line-height:1.5}
.dsk-field.pisze{border-color:rgba(var(--cyan-rgb),.5)}
.dsk-caret{display:none;width:2px;height:1em;vertical-align:text-bottom;background:var(--cyan);margin-left:1px}
.dsk-field.pisze .dsk-caret{display:inline-block;animation:dskBlink .9s steps(1) infinite}
@keyframes dskBlink{50%{opacity:0}}
.dsk-btns{display:flex;gap:8px;flex-wrap:wrap}
/* zadanie w układzie apki na desktopie (właściciel 2026-10-04): wprowadzenie z fotografią w lewej karcie, podpunkt w prawej;
   te same proporcje co w apce (wprowadzenie węższe), zdjęcie na środku karty jak w apce */
.dsk-zad2{grid-template-columns:1fr 1.4fr}
.dsk-badge{display:inline-block;align-self:flex-start;font-family:var(--fd);font-weight:800;font-size:.64rem;color:var(--green);text-transform:uppercase;letter-spacing:.04em;
  border:1px solid rgba(var(--green-rgb),.4);border-radius:7px;padding:3px 8px}
.dsk-wst-tx p{margin:0;font-size:.78rem;line-height:1.5;color:var(--text2)}
.dsk-wst-tx p+p{margin-top:.5rem}
.dsk-foto{display:block;width:62%;height:auto;margin:2px auto 0;border-radius:8px;background:rgba(var(--hi-rgb),.06)}
.dsk-zr{font-size:.66rem;color:var(--dim);text-decoration:underline}
.dsk-chips .dsk-pkt{margin-left:auto;color:var(--text);background:rgba(var(--hi-rgb),.07)}
.dsk-acts{display:flex;align-items:center}
.dsk-star{margin-left:auto;border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.7rem;font-weight:700;color:var(--muted);white-space:nowrap}
.dsk-ph{color:var(--dim)}
.dsk-foto{width:50%}
.dsk-wst-tx p{font-size:.76rem}
.dsk-panel{margin-top:4px;border:1px solid rgba(var(--green-rgb),.35);border-radius:11px;padding:9px 11px;background:rgba(var(--green-rgb),.05);display:flex;flex-direction:column;gap:5px}
.dsk-panel .dsk-lab i{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none}
.dsk-panel .dsk-el{font-size:.74rem}.dsk-panel .dsk-fbtx{font-size:.72rem}
/* po „Sprawdź": odnośnik „Pokaż / Ukryj przykładowe odpowiedzi" i karta z zasadami oceniania + przykładowymi odpowiedziami CKE
   (jak w Question.jsx; treść 1:1 z bazy, w apce widoczna dopiero po sprawdzeniu) */
.dsk-przyk{gap:6px}
.tour-scr.on .dsk-przyk{animation:dskUp .5s ease both;animation-delay:.25s}
.dsk-zasady{margin:0;white-space:pre-wrap;font-size:.67rem;line-height:1.42;color:var(--muted)}
.dsk-modele{margin:0;padding-left:16px;font-size:.72rem;line-height:1.42}
.dsk-przyk .dsk-otag{color:var(--muted)}
.tour-scr.on .dsk-panel{animation:dskUp .5s ease both}
@keyframes dskUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dsk-ohead{display:flex;align-items:center;gap:12px}
.dsk-score{flex:none}
.dsk-score b{font-family:var(--fd);font-size:1.7rem;color:var(--green);line-height:1}
.dsk-score i{font-style:normal;font-size:.8rem;color:var(--muted)}
.dsk-otag{display:block;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.dsk-els{display:flex;flex-direction:column;gap:6px}
.dsk-el{display:flex;align-items:center;gap:8px;color:var(--text2)}
.dsk-el i{font-style:normal;width:17px;height:17px;border-radius:5px;display:grid;place-items:center;font-size:.6rem;color:var(--na-fill);background:var(--green);flex:none}
.tour-scr.on .dsk-els .dsk-el{animation:dskUp .4s ease both;animation-delay:.6s}
.tour-scr.on .dsk-els .dsk-el:nth-child(2){animation-delay:1.1s}
.tour-scr.on .dsk-els .dsk-el:nth-child(3){animation-delay:1.6s}
/* krok „Odkrywasz przykładowe odpowiedzi": panel wyniku był już widoczny krok wcześniej, więc stoi w miejscu (bez ponownego
   wjazdu i bez gaśnięcia wiersza elementu na 0,6 s przy każdym przejściu automatu); wjeżdża tylko karta przykładów */
.tour-scr.on .dsk-po2 .dsk-panel,.tour-scr.on .dsk-po2 .dsk-els .dsk-el{animation:none}
/* PRZEJŚCIE BEZ RUCHU (właściciel 2026-10-04 drugi raz: „przy różnych krokach pojawia się ponownie to zdanie ✓ wyjaśnienie…"):
   zwykły ekran przewodnika wjeżdża z dołu o 16 px i przenika się ze starym, więc elementy WSPÓLNE kolejnych kroków (wstęp
   zadania, pole, panel oceny) przy każdym przejściu migały i podjeżdżały, jakby pojawiały się od nowa. W oknie „Dnia nauki"
   nowy ekran (nieprzezroczyste tło jak okno) zakrywa stary bez przesunięcia: stary znika dopiero po pełnym wejściu nowego
   (opóźnione 0s), więc to, co na obu krokach stoi w tym samym miejscu, nie drgnie. */
.dsk-okno .tour-scr{transform:none;z-index:0;background:linear-gradient(180deg,var(--scr-a),var(--scr-b));transition:opacity 0s linear .35s}
.dsk-okno .tour-scr.on{z-index:1;transition:opacity .35s ease}
@media(prefers-reduced-motion:reduce){.dsk-okno .tour-scr,.dsk-okno .tour-scr.on{transition:none}}
/* OKNO = ZAWSZE DESKTOP: ekran lekcji używa klas .lek-* z sekcji „Jak wygląda lekcja", a te mają reguły dla wąskiego ekranu
   (program chowany ≤ 1020 px, zadania w jednej kolumnie ≤ 760 px, ciaśniejsze zakładki ≤ 600 px). W pomniejszonym oknie 1120 px
   (właściciel 2026-10-04: „ekran oglądasz lekcję na mobilne jest mikro mały") schowany program zostawiał film w kolumnie 210 px;
   tu przywracamy układ desktopu niezależnie od szerokości telefonu (specyficzność .dsk-okno wygrywa z regułami w @media) */
.dsk-okno .lek-prog{display:flex}
.dsk-okno .lek-zady{grid-template-columns:1fr 1fr}
.dsk-okno .lek-tabs{gap:1.1rem}
.dsk-okno .lek-tyt h4{font-size:1.25rem}
.dsk-fb{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.dsk-fb.zi{color:var(--green)}.dsk-fb.cy{color:var(--cyan)}
.dsk-fbtx{margin:0;font-size:.74rem;color:var(--text2)}
.dsk-prog{border-right:0;border:1px solid var(--line);border-radius:13px}
.dsk-lek .lek-head{gap:2px}
.dsk-chart{display:flex;align-items:flex-end;gap:5px;height:70px}
.dsk-chart i{flex:1;border-radius:4px 4px 0 0;background:rgba(var(--green-rgb),.35);height:var(--h)}
.dsk-chart i.hi{background:linear-gradient(180deg,var(--cyan),var(--green))}
.dsk-dzrow{display:grid;grid-template-columns:1fr auto auto;gap:4px 10px;align-items:center;font-size:.76rem}
.dsk-dzrow b{font-weight:600}.dsk-dzrow em{font-style:normal;font-family:var(--fd);font-weight:700;color:var(--green);font-size:.72rem}
.dsk-dzrow .dsk-bar{grid-column:1/-1}
@media(max-width:1020px){.tour-dsk .tour-list{grid-template-columns:repeat(3,1fr)}}   /* sześć kafli = dwa równe rzędy */
/* OKNO „DNIA NAUKI" ZAWSZE W UKŁADZIE DESKTOPU (właściciel 2026-10-04: „na mobile musi być skompresowany tak, żeby pokazywał
   dokładnie to samo co na desktop; będzie nieczytelne, ale musi pokazać ekran desktopa, bo ktoś na telefonie pomyśli, że mamy
   tylko aplikację, a my mamy całą platformę"): okno ma STAŁĄ szerokość 1120 px i na węższym ekranie jest pomniejszane
   transformacją (skala = szerokość miejsca / 1120, liczy skrypt sekcji i wpisuje --dsk-s oraz wysokość .dsk-skala);
   ⛔ żadnych reguł mobilnych dla .dsk-* (bez chowania panelu bocznego, kolumn, zdjęcia i paneli) */
.tour-dsk{grid-template-columns:minmax(0,1fr)}   /* 1fr = minmax(auto,1fr): bez minmax(0,…) kolumna rosłaby do 1120 px okna i skala zostawałaby 1 */
.tour-dsk .tour-screen{min-width:0}
.dsk-skala{position:relative;overflow:hidden;min-width:0;width:100%}
/* zakładka Platforma (platforma/): pierwsza sekcja stoi pod paskiem jak hero na głównej (pasek fixed na desktopie i tablecie) */
.pl-pierwsza{padding-top:124px}
.pl-pierwsza h1{font-size:clamp(2rem,4.2vw,3.1rem)}
.lek-okno.dsk-okno{width:1120px;max-width:none;margin:0;transform-origin:0 0;transform:scale(var(--dsk-s,1))}
/* telefon: jedna mapa (jasna), krótsza tabela i cztery pojęcia, żeby okno lekcji nie rosło ponad ~600 px */
@media(max-width:600px){.lek-tabs{gap:.8rem}
  .lek-tabela tbody tr:nth-child(n+4),.lek-chip:nth-child(n+5){display:none}}

/* NA CZYM MATURZYŚCI TRACĄ PUNKTY: od 2026-10-05 wieczorem blok w ARTYKULE Bazy wiedzy (bledy_blok(), znacznik {BLEDY_BLOK}),
   nie sekcja strony głównej (właściciel: „zostaw to, ale usuń z głównej i przerzuć do bazy wiedzy"). Szata 1:1 z drugiej grafiki
   właściciela 2026-10-05 (wersja `6085f0b3`; zwięzła `270b35a0` trwała godzinę): pięć
   wierszy „błąd → w Bioverse". Lewa karta: tytuł, opis, pigułka „+ Przykład" (details) i biała KARTKA z odręcznym pismem (Caveat)
   pokazująca błędną odpowiedź, z czerwonym ✕ i błyskiem; strzałka w cyjanie; prawa karta zielona: pigułka „W BIOVERSE", tekst
   z pogrubieniem i wizytówka (klocki Przyczyna → Proces → Skutek, okno „Analiza odpowiedzi" z alertem, fiszka „Denaturacja"
   z karteczką, pola Przyczyna / Mechanizm / Skutek, szachownica Punnetta). Kartki i fiszka są JASNE w obu motywach (papier, świadomy
   wyjątek jak ryciny); reszta z tokenów. ≤ 1020 px ilustracje pod tekstem, ≤ 860 px kolumna ze strzałką w dół. */
.bl-lista{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:1rem}
.bl-row{display:grid;grid-template-columns:minmax(0,.84fr) 60px minmax(0,1.16fr);gap:0;align-items:stretch}
.bl-blad,.bl-my{position:relative;border-radius:22px;border:1px solid var(--line);padding:1.3rem 1.5rem;min-width:0;min-height:236px;display:flex;align-items:center;gap:1.2rem;
  transition:border-color .25s,box-shadow .25s}
.bl-blad{background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
.bl-my{border-color:color-mix(in srgb,var(--green) 30%,var(--line));
  background:linear-gradient(165deg,color-mix(in srgb,var(--green) 10%,var(--kart-a)),color-mix(in srgb,var(--green) 4%,var(--kart-b)))}
@media(hover:hover) and (pointer:fine){
  .bl-row:hover .bl-blad{border-color:rgba(var(--red-rgb),.4)}
  .bl-row:hover .bl-my{border-color:color-mix(in srgb,var(--green) 55%,var(--line));box-shadow:0 0 46px rgba(var(--green-rgb),calc(.1*var(--glow-k)))}}
.bl-blad-tx{flex:1;min-width:0}
.bl-blad-tx>b{display:block;font-family:var(--fd);font-weight:700;font-size:1.32rem;line-height:1.2;color:var(--text)}
.bl-blad-tx>span{display:block;color:var(--muted);font-size:1.02rem;line-height:1.5;margin-top:.4rem}
.bl-ex{margin-top:.75rem;font-size:.9rem;color:var(--muted)}
.bl-ex summary{cursor:pointer;color:var(--cyan);font-family:var(--fd);font-weight:600;font-size:.8rem;list-style:none;display:inline-flex;align-items:center;gap:.5rem;
  padding:.32rem .85rem .32rem .55rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--cyan) 45%,transparent);background:color-mix(in srgb,var(--cyan) 6%,transparent);
  -webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s}
@media(hover:hover) and (pointer:fine){.bl-ex summary:hover{background:color-mix(in srgb,var(--cyan) 13%,transparent);border-color:color-mix(in srgb,var(--cyan) 65%,transparent)}}
.bl-ex summary::-webkit-details-marker{display:none}
.bl-ex summary:before{content:"+";width:16px;height:16px;border-radius:5px;display:grid;place-items:center;border:1px solid currentColor;font-size:.78rem;line-height:1;transition:transform .2s}
.bl-ex[open] summary:before{transform:rotate(45deg)}
.bl-ex p{margin:.6rem 0 0;line-height:1.5;color:var(--text2)}
/* kartka ucznia: biały papier, odręczne pismo, lekki przechył, ✕ w rogu, czerwony błysk z lewej */
.bl-kartka{position:relative;flex:none;width:214px;min-height:160px;display:grid;place-items:center}
.kp{position:relative;display:block;background:#fbfbf8;color:#1c2126;font-family:'Caveat','Segoe Print','Bradley Hand',cursive;font-weight:500;font-size:1.3rem;line-height:1.15;
  padding:.8rem 1rem;border-radius:4px;box-shadow:0 14px 30px -14px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.25);text-align:left}
.kp b{font-weight:600}
.kp-1{width:150px;padding:.9rem 2.9rem .9rem 1rem;transform:rotate(2deg)}
.kp-1 b,.kp-1 em{display:block;font-style:normal}
.kp-1 em{text-align:center;font-size:1.4rem;line-height:1;margin:.1rem 0}
.kp-1 b:last-of-type{padding-left:.6rem}
.kp-luk{position:absolute;right:.55rem;top:.45rem;width:30px;height:48px;fill:none;stroke:#1c2126;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kp-2{width:206px;font-size:1.02rem;line-height:1.22;transform:rotate(-6deg)}
.kp-2 mark{background:linear-gradient(180deg,transparent 15%,rgba(255,84,160,.55) 15%,rgba(255,84,160,.55) 85%,transparent 85%);color:inherit;padding:0 .1em}
.kp-dymek{width:168px;padding:1.1rem 1.2rem 1.2rem;border-radius:52% 48% 50% 50%/58% 58% 42% 42%;text-align:center;font-size:1.45rem;line-height:1.1;transform:rotate(-2deg)}
.kp-dymek:after{content:"";position:absolute;left:36%;bottom:-13px;width:22px;height:22px;background:#fbfbf8;clip-path:polygon(0 0,100% 0,20% 100%)}
.kp-4{width:176px;transform:rotate(-5deg)}
.kp-4 b{display:block;white-space:nowrap}.kp-4 b+b{margin-top:.45rem;padding-left:.5rem}
.kp-5{width:164px;transform:rotate(-3deg)}
.kp-krzyz{display:block;text-align:center;margin-bottom:.35rem;letter-spacing:.06em}
.kp-pn{display:grid;grid-template-columns:1fr 1fr;border:1.6px solid #1c2126}
.kp-pn i{font-style:normal;display:grid;place-items:center;height:30px;border:.8px solid #1c2126;font-size:1.2rem}
.bl-kartka>.bw-zn.abs{right:12px;bottom:6px;width:38px;height:38px;box-shadow:0 6px 14px -4px rgba(0,0,0,.5)}
.bl-kartka>.bw-zn.abs svg{width:18px;height:18px;stroke-width:3}
.bw-zn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:none}
.bw-zn svg{width:12px;height:12px;stroke-width:2.6}
.bw-zn.abs{position:absolute;right:-8px;bottom:-8px;width:30px;height:30px;box-shadow:0 0 0 3px var(--bg)}
.bw-zn.abs svg{width:15px;height:15px}
.bw-zn.zle{background:#ff8c8c;color:#1a0505}
.bw-zn.ok{background:var(--green);color:var(--na-fill)}
.bw-zn.uwaga{background:#ff6b6b;color:#fff}
.bw-blysk{position:absolute;width:30px;height:30px;fill:none;stroke-width:2.2;stroke-linecap:round}
.bw-blysk.zle{left:-6px;top:38%;stroke:var(--red)}
.bw-blysk.ok{left:-18px;top:-10px;stroke:var(--green);transform:scaleX(-1) rotate(-20deg)}
.bl-arr{display:grid;place-items:center;color:var(--cyan)}
.bl-arr svg{width:30px;height:30px;stroke-width:1.5}
.bl-my-tx{flex:1;min-width:0}
.bl-my-tx i{display:inline-block;font-style:normal;font-family:var(--fd);font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--green);
  padding:.3rem .8rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--green) 70%,transparent);margin-bottom:.8rem}
.bl-my-tx span{display:block;color:var(--text2);font-size:1.08rem;line-height:1.45}
.bl-my-tx span b{color:var(--text);font-weight:700;font-size:1.14em;font-family:var(--fd)}
.bl-my-tx a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--green) 40%,transparent);text-underline-offset:4px}
@media(hover:hover) and (pointer:fine){.bl-my-tx a:hover{color:var(--green)}}
.bl-wiz{position:relative;flex:none;width:276px;min-height:150px;display:grid;place-items:center}
/* 1. klocki Przyczyna → Proces → Skutek w przekrzywionej ramce */
.bw-lancuch{position:relative;display:block;padding:.2rem}
.bw-ramka{display:inline-flex;align-items:center;gap:.35rem;padding:.9rem .7rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);
  background:color-mix(in srgb,var(--cyan) 4%,transparent);transform:rotate(-3deg)}
.bw-blok{display:inline-grid;place-items:center;height:40px;padding:0 .7rem;border-radius:9px;font-family:var(--fd);font-weight:700;font-size:.8rem;white-space:nowrap;transform:rotate(3deg)}
.bw-blok.b1{color:#fff;background:linear-gradient(135deg,var(--gw-a),var(--gw-b));box-shadow:0 0 18px rgba(var(--gw-rgb),.45)}
.bw-blok.b2{color:#06201a;background:linear-gradient(135deg,var(--cyan),color-mix(in srgb,var(--cyan) 55%,var(--green)));box-shadow:0 0 18px rgba(var(--cyan-rgb),calc(.4*var(--glow-k)))}
.bw-blok.b3{color:var(--na-fill);background:linear-gradient(135deg,var(--green),color-mix(in srgb,var(--green) 70%,#fff));box-shadow:0 0 18px rgba(var(--green-rgb),calc(.45*var(--glow-k)))}
.bw-strz{display:grid;place-items:center;color:var(--cyan)}
.bw-strz svg{width:14px;height:14px}
.bw-lancuch>.bw-zn.abs{right:-6px;bottom:-10px;width:38px;height:38px;box-shadow:0 6px 16px -4px rgba(0,0,0,.5)}
.bw-lancuch>.bw-zn.abs svg{width:18px;height:18px;stroke-width:3}
/* 2. okno „Analiza odpowiedzi" z liniami, czerwoną linią i alertem */
.bw-okno{position:relative;display:flex;flex-direction:column;gap:8px;width:230px;padding:.75rem .85rem 1rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--cyan) 35%,var(--line));
  background:linear-gradient(165deg,color-mix(in srgb,var(--cyan) 7%,var(--panel)),var(--panel));box-shadow:0 14px 30px -16px rgba(0,0,0,.6);transform:rotate(-2deg)}
.bw-okno-k{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.bw-okno-k b{font-family:var(--fd);font-weight:700;font-size:.78rem;color:var(--text)}
.bw-okno-k svg{width:12px;height:12px;color:var(--muted)}
.bw-okno>i{display:block;height:6px;border-radius:3px;background:rgba(var(--hi-rgb),.2)}
.bw-okno>i:nth-of-type(1){width:84%}.bw-okno>i:nth-of-type(2){width:92%}.bw-okno>i:nth-of-type(3){width:56%}.bw-okno>i:nth-of-type(4){width:78%}.bw-okno>i:nth-of-type(5){width:64%}
.bw-okno>i.zle{background:var(--red);box-shadow:0 0 10px rgba(var(--red-rgb),.7)}
.bw-alert{position:absolute;right:-26px;bottom:14px;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:12px;font-family:var(--fd);font-weight:700;font-size:.78rem;
  line-height:1.15;color:#2a0808;background:linear-gradient(135deg,#ffb3b3,#ff8f8f);box-shadow:0 10px 24px -10px rgba(var(--red-rgb),.8);transform:rotate(-4deg)}
.bw-alert .bw-zn{width:20px;height:20px;background:#d93a3a;color:#fff}
.bw-okno>.bw-zn.abs{right:-22px;bottom:-12px;width:34px;height:34px;box-shadow:0 6px 14px -4px rgba(0,0,0,.5)}
.bw-okno>.bw-zn.abs svg{width:17px;height:17px;stroke-width:3}
/* 3. fiszka z definicją + karteczka „Enzym się zepsuł" i strzałka między nimi */
.bw-fiszka-w{position:relative;display:flex;align-items:center;gap:.2rem;width:100%}
.bw-fiszka{display:block;flex:1;min-width:0;padding:.75rem .85rem .85rem;border-radius:10px;background:linear-gradient(165deg,#f6fbff,#e9f4f8);color:#13202a;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.25);transform:rotate(-3deg)}
.bw-fiszka b{display:flex;align-items:center;justify-content:space-between;font-family:var(--fd);font-weight:800;font-size:.98rem;margin-bottom:.3rem}
.bw-fiszka b svg{width:15px;height:15px;color:#2b8dc2;flex:none}
.bw-fiszka span{display:block;font-size:.74rem;line-height:1.35}
.bw-fiszka-luk{flex:none;width:34px;height:26px;fill:none;stroke:#fbfbf8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:0 -.3rem;position:relative;z-index:1}
.kp-notka{flex:none;width:78px;padding:.55rem .5rem;font-size:1.05rem;line-height:1;text-align:center;transform:rotate(8deg)}
/* 4. trzy pola */
.bw-pola{display:flex;flex-direction:column;gap:.45rem;width:100%}
.bw-pola span{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .85rem;border-radius:11px;font-family:var(--fd);font-weight:600;font-size:.92rem;color:var(--text);border:1px solid var(--line2);background:rgba(var(--hi-rgb),.03)}
.bw-pola .bw-zn{width:22px;height:22px}.bw-pola .bw-zn svg{width:12px;height:12px;stroke-width:3}
.bw-pola .p1{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.bw-pola .p2{border-color:rgba(var(--red-rgb),.65);background:rgba(var(--red-rgb),.14)}
.bw-pola .p3{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
/* 5. szachownica Punnetta */
.bw-punnett{position:relative;display:inline-flex;align-items:center;gap:.9rem}
.bw-punnett>.bw-zn{width:38px;height:38px}.bw-punnett>.bw-zn svg{width:18px;height:18px;stroke-width:3}
.bw-pn{display:grid;grid-template-columns:28px 52px 52px;grid-auto-rows:36px;gap:2px;font-family:var(--fd);font-weight:700;font-size:.98rem}
.bw-pn b,.bw-pn em{display:grid;place-items:center;border-radius:6px;font-style:normal}
.bw-pn b{color:var(--text2)}
.bw-pn em{color:var(--text);border:1px solid var(--line2);background:rgba(var(--hi-rgb),.06)}
@media(max-width:1020px){
  .bl-row{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}
  .bl-blad,.bl-my{flex-direction:column;align-items:stretch;gap:1rem;min-height:0;padding:1.15rem 1.2rem}
  .bl-kartka,.bl-wiz{width:100%;justify-self:center;margin:0 auto;max-width:300px;min-height:0;padding:.6rem 0}
  .bl-blad-tx>b{font-size:1.15rem}.bl-blad-tx>span{font-size:.95rem}.bl-my-tx span{font-size:1rem}
}
/* TELEFON I MAŁY TABLET (≤ 860 px) = WERSJA SKRÓCONA (właściciel 2026-10-05: „na telefon to za dużo treści, może dać tylko część,
   albo jakąś skróconą wersję"): każdy błąd to JEDNA zwarta karta: tytuł, opis, pigułka „+ Przykład" i zielona wstawka „W Bioverse";
   kartki, ilustracje i strzałka schowane (pełna wersja zostaje od 861 px). Pięć kart ≈ jeden ekran zamiast trzech i pół. */
@media(max-width:860px){
  .bl-lista{gap:.7rem}
  .bl-row{display:block;border-radius:18px;border:1px solid var(--line);background:linear-gradient(165deg,var(--kart-a),var(--kart-b));padding:.9rem 1rem .95rem}
  .bl-blad{display:block;border:0;background:none;padding:0;min-height:0;border-radius:0}
  .bl-kartka,.bl-arr,.bl-wiz{display:none}
  .bl-blad-tx>b{font-size:1.1rem}.bl-blad-tx>span{font-size:.93rem;margin-top:.3rem}
  .bl-ex{margin-top:.55rem}
  .bl-my{display:block;min-height:0;margin-top:.65rem;padding:.7rem .85rem .75rem;border-radius:12px}
  .bl-my-tx i{margin-bottom:.3rem;font-size:.62rem;padding:.18rem .55rem}
  .bl-my-tx span{font-size:.95rem}
  .bl-my-tx span b{font-size:1.08em}
}
/* Blok w kolumnie artykułu Bazy wiedzy: kolumna ma 760 px (siatka .wz-main: 760 + 64 + 250 px, wyśrodkowana w 1120 px), a wiersz
   „błąd → w Bioverse" potrzebuje pełnego wrapu, więc blok ma 100cqw z kontenera .wz-main i ujemny lewy margines równy luzowi
   siatki (poniżej 1100 px kolumna jest pełna, margines 0). Reguły .wz ol / li / a nie mogą przestawić listy ani pigułek. */
.wz .bl-blok{width:100cqw;max-width:none;margin:1.2rem 0 1.6rem calc(-1*max(0px,(100cqw - 1074px)/2))}
.wz .bl-blok .bl-lista{margin:0;padding:0}
.wz .bl-blok li{line-height:1.5;margin:0;font-size:1rem}
.wz .bl-blok .bl-ex summary,.wz .bl-blok .bl-my-tx i{line-height:1.25}

/* LICZBY: ten sam pas .stat-band (licznik od zera w skrypcie), ale 3 kolumny, bez źródeł */
.stat-band.lb-band{grid-template-columns:repeat(3,1fr);max-width:1040px;gap:1.1rem;margin-top:2.6rem}
.stat.lb{padding:1.7rem 1.5rem 1.5rem;border-radius:20px}
.stat.lb .stat-num{font-size:clamp(2.4rem,3.2vw,3.1rem)}
.stat.lb .stat-claim{margin:.4rem 0;font-size:1.02rem}
.stat.lb .stat-desc{margin:0;font-size:.86rem}
@media(max-width:900px){.stat-band.lb-band{grid-template-columns:1fr 1fr}}

/* O NAS: skrót na głównej (przycisk pod kartami) i podstrona o-nas/ (szerszy łam, historia, zdjęcie tablicy) */
.about-cta{margin:1.8rem 0 0;text-align:center}
.legal-wrap.onas-wrap{max-width:1100px}
/* nagłówek i akapit O nas na środku (właściciel 2026-10-02: „to na środku i Bioverse na gradient tak jak na głównej") */
.onas-wrap .legal h1{text-align:center;font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:.9rem}
.legal .onas-lead{color:var(--muted);font-size:1.05rem;line-height:1.7;max-width:760px;margin:0 auto 1.8rem;text-align:center}
.legal .onas-people{margin-top:0}
.legal .person h3{margin:.35rem 0 .5rem;font-size:1.3rem}
.legal .onas-h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;margin:3.2rem 0 .2rem;text-align:center;letter-spacing:-.01em}
.legal .onas-h2 .grad{background:linear-gradient(90deg,var(--gs));-webkit-background-clip:text;background-clip:text;color:transparent}
.legal .story-rows{margin-top:2rem}
.legal .mm-cap{margin:.7rem 0 0;text-align:center;color:var(--muted);font-size:.86rem}
.onas-cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin:2.8rem 0 0}
/* przyciski w treści podstrony: reguła .legal a (cyjan + podkreślenie) zabierała im kolor i napis znikał na gradiencie
   (właściciel 2026-10-02: „kolory czcionki do poprawy, bo nie widać napisów") */
.legal .onas-cta .btn{text-decoration:none}
.legal .onas-cta .btn-primary{color:var(--na-fill)}
.legal .onas-cta .btn-ghost{color:var(--text)}

/* reveal — enhancement przez JS (bez JS treść pozostaje widoczna) */
.reveal{will-change:opacity,transform}
.ioreveal .reveal{opacity:0}   /* ukryte od pierwszej klatki (gdy jest JS+IO) — pojawiają się „od zera", bez mignięcia. Bez JS pozostają widoczne. */
/* animacje wejścia + „ożywienie" makiety (odpalają się od razu; bez JS treść widoczna) */
.anim .enter{opacity:0;animation:enterUp .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes enterUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.anim .mk-ring circle:last-of-type{animation:ringfill 1.6s cubic-bezier(.3,.9,.3,1) .4s both}
@keyframes ringfill{from{stroke-dashoffset:100.5}to{stroke-dashoffset:25}}
.anim .mk-spark path:first-of-type{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2s ease .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* wykres: wpływ stresu na dostęp do wiedzy */
.sc-svg{width:100%;height:auto;display:block;overflow:visible;margin-top:.4rem}
.sc-grid{stroke:rgba(var(--hi-rgb),.07);stroke-width:1;stroke-dasharray:2 6}
.sc-yl{fill:var(--muted);font-size:14px;font-family:var(--fb);text-anchor:end}
.sc-axis{fill:none;stroke-width:2.4}
.sc-axis-y{stroke:var(--green)}
.sc-axis-x{stroke:var(--cyan)}
.sc-arrow-y{fill:var(--green)}
.sc-arrow-x{fill:var(--cyan)}
.sc-line{fill:none;stroke:url(#stressGrad);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 14px rgba(var(--cien-rgb),calc(.45*var(--cien-k))))}
.sc-drop{stroke:rgba(var(--hi-rgb),.16);stroke-width:1.3;stroke-dasharray:2 4}
.sc-dot{stroke:var(--dot-ring);stroke-width:2.5}
.sc-val{font-family:var(--fd);font-weight:700;font-size:23px;text-anchor:middle}
.sc-cat{fill:var(--text2);font-family:var(--fd);font-weight:600;font-size:14px;text-anchor:middle;letter-spacing:.03em}
.sc-sub2{fill:var(--muted);font-size:12.5px;font-weight:500;letter-spacing:0}
.sc-axttl{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.1em}
.sc-axttl-y{fill:var(--green);text-anchor:middle}
.sc-axttl-x{fill:var(--cyan);text-anchor:end}
.sc-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2.6rem}
.sc-card{position:relative;border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.1rem 1.2rem 1.3rem;background:linear-gradient(180deg,rgba(var(--hi-rgb),.035),rgba(var(--hi-rgb),.008));overflow:hidden}
.sc-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ck);box-shadow:0 0 16px var(--ck)}
.sc-cardtop{display:flex;align-items:center;gap:.6rem}
.sc-pct{font-family:var(--fd);font-weight:700;font-size:1.55rem;line-height:1;color:var(--ck)}
.sc-lvl{display:flex;flex-direction:column;line-height:1.18}
.sc-lvl b{font-family:var(--fd);font-size:.78rem;letter-spacing:.02em}
.sc-lvl i{font-style:normal;font-size:.72rem;color:var(--muted)}
.sc-card p{margin-top:.7rem;color:var(--muted);font-size:.82rem;line-height:1.5}
.stress-note{display:flex;gap:1.1rem;align-items:flex-start;margin-top:2.4rem;padding:1.4rem 1.6rem;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(var(--cyan-rgb),.06),rgba(var(--cyan-rgb),.015))}
.sn-ic{flex-shrink:0;color:var(--cyan);line-height:0}
.sn-ic svg{width:34px;height:34px}
.sn-tx b{font-family:var(--fd);font-size:1.06rem;line-height:1.35;font-weight:700}
.sn-accent{color:var(--cyan)}
.sn-hl{color:var(--green);font-weight:700}
.stress-note p{color:var(--text2);margin-top:.55rem;font-size:.92rem;line-height:1.6}
.stress-note small{display:block;margin-top:.6rem;color:var(--muted);font-size:.76rem}
/* animacja wejścia: linia „rysuje się" (JS), a punkty/podpisy/buźki wchodzą po kolei (gate .ioreveal, klasa .drawn od JS) */
.stress-chart .sc-dot,.stress-chart .sc-val,.stress-chart .sc-drop,.stress-chart .sc-face{transition:opacity .5s ease,transform .5s ease}
.stress-chart .sc-dot{transform-box:fill-box;transform-origin:center}
.ioreveal .stress-chart .sc-line{stroke-dasharray:2400;stroke-dashoffset:2400}
.ioreveal .stress-chart .sc-dot,.ioreveal .stress-chart .sc-val,.ioreveal .stress-chart .sc-drop,.ioreveal .stress-chart .sc-face{opacity:0}
.ioreveal .stress-chart .sc-dot{transform:scale(0)}
.stress-chart.drawn .sc-dot{opacity:1;transform:scale(1)}
.stress-chart.drawn .sc-val,.stress-chart.drawn .sc-drop,.stress-chart.drawn .sc-face{opacity:1}

/* łamanie H1 (br.h1-w / br.h1-s, opis przy nagłówku w HTML): desktop i telefon trzy linie, tablet dwie */
@media(min-width:1041px){.h1-s{display:none}}
@media(min-width:561px) and (max-width:1040px){.h1-w{display:none}}
@media(max-width:560px){.h1-s{display:none}}
@media(max-width:359px){#hero-tytul{font-size:1.85rem}}   /* 320 px: „Kompletny kurs do” w jednej linii, bez czwartej linii */
@media(max-width:1040px){
  .hero-grid,.loop-layout{grid-template-columns:1fr;gap:40px}
  /* TABLET I TELEFON: hero wyśrodkowane (właściciel 2026-10-02: „na tablecie całe hero powinno być chyba na środku");
     do tego dnia środek był tylko ≤ 720 px, a tablet stał do lewej nad wyśrodkowanym telefonem */
  .hero-copy{text-align:center}
  .hero-copy p.lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  /* MENU TABLETU = hamburger jak na telefonie (721–1040 px pozycje menu łamały się na dwie linie, a przycisk motywu
     wychodził poza ekran): przyciski w pasku, lista rozwijana pod nim; pasek zostaje fixed jak na desktopie */
  .nav{display:flex;align-items:center;gap:.75rem}
  .nav .logo{margin-right:auto}
  .nav>.btn{display:none}
  .nav>.js-login.bv-zal{display:inline-flex}
  .nav>.nav-demo{display:inline-flex;padding:.6rem 1rem;font-size:.9rem}
  .nav-inner .nav-cta.nav-cta-demo{display:none}   /* w rozwijanym menu bez dubla: przycisk stoi w pasku obok hamburgera */
  /* przycisk przyklejony do dołu (2026-10-02): widoczny, gdy przyciski hero zjadą z ekranu, znika przy cenniku i stopce */
  .cta-dol{display:block;position:fixed;left:0;right:0;bottom:0;z-index:230;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    background:var(--nag);border-top:1px solid var(--nag-linia);transform:translateY(110%);transition:transform .3s ease;pointer-events:none}
  .cta-dol.on{transform:none;pointer-events:auto}
  .cta-dol .btn{width:100%;justify-content:center}
  .nav>.nav-demo{white-space:nowrap}
  .menu-btn{display:block;font-size:1.9rem;line-height:1}
  .nav-links{position:absolute;top:100%;left:50%;width:100vw;transform:translateX(-50%);display:block;background:var(--nag);overflow:hidden}
  .nav-inner{display:flex;flex-direction:column;align-items:center;gap:1.05rem;font-size:1.1rem;
    max-height:0;overflow:hidden;padding:0 1.2rem;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
  .nav-links.open .nav-inner{max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto}
  .nav-inner>:first-child{margin-top:1.4rem}
  .nav-inner>:last-child{margin-bottom:1.6rem}
  .nav-inner .nav-cta{display:inline-flex;margin-top:.35rem;padding:.8rem 1.7rem;font-size:1rem}
  .nav-inner .nav-cta.bv-zal{display:none}
  .nav-inner>:has(+ .nav-cta.bv-zal){margin-bottom:1.6rem}
  .loop-layout .loop-copy{order:1}
  .loop-layout .loop-stage{order:2}
  .sc-cards{grid-template-columns:repeat(3,1fr)}
  .f-card{flex-basis:calc(50% - .65rem)}
  .loop-stage{min-height:630px}
}
@media(max-width:720px){
  .nav{grid-template-columns:1fr auto}
  .logo{width:170px;height:37px}   /* na telefonie logo mniejsze niż na desktopie */
  /* mobile: całe tło strony jednolite (#04080c), spójne z paskiem/menu — brak jakichkolwiek „szwów"
     między hero a kolejnymi sekcjami i nic nie „skacze" przy rozwijaniu menu. */
  body{background:var(--bg-tel)}
  /* overflow:visible — poświata telefonu nie jest ucinana na dole hero (żadnej ostrej linii); auror na mobile i tak nie ma */
  /* tlo hero na telefonie CIEMNE jak reszta strony — swieca tylko lokalne poswiaty
     (aurory .hero:before/:after i luna za telefonem), jak na desktopie. Wielki zielony
     wash na calym hero usuniety na zyczenie (2026-08-29); owale zostaja, ale BEZ animacji
     — nic nie plywa, bateria spokojna. Krawedzi juz nie zostawiaja: gradienty maja
     czterostopniowe, lagodne ogony. */
  .hero{overflow:visible;padding-bottom:48px;background:var(--bg-tel)}
  .hero:before,.hero:after{animation:none}
  /* wyśrodkowanie hero stoi od 2026-10-02 w bloku ≤ 1040 px (tablet i telefon); tu tylko odstępy telefonu */
  .stat-band{grid-template-columns:1fr;gap:1.1rem;margin-top:2.2rem}
  .stat{padding:1.8rem 1.6rem 1.4rem}
  .stat-num{font-size:2.7rem}
  .stat-foot{margin-top:2.2rem}
  .hero-badge{font-size:.72rem;padding:.45rem .8rem}
  /* więcej powietrza nad telefonem, minimalnie mniej pod nim */
  .hero-mock{margin-top:2.2rem}
  .hero-graf{margin-top:1.2rem}
  /* sekcja Aplikacja na telefonie: laptop i tablet w kolumnie. Kokpit przechodzi w jedną
     kolumnę — przy 390px dwie kolumny łamały tekst po jednym słowie. */
  .dev-stage{margin-top:2.2rem}
  .dev-track{height:420px}
  .dev-phone{--s:.62}
  /* na telefonie urządzenia stoją w kolumnie — łuna węższa i wyższa niż na desktopie */
  .dev-stage:before{width:124%;height:104%;top:50%}
  .dev-stage:after{width:78%;height:56%;top:50%;transform:translate(-50%,-50%)}
  .laptop{width:100%}
  .laptop-base{margin:0 -3%}
  .tablet{width:min(300px,84%)}
  /* Hamburger, rozwijana lista i plakietka zalogowanego OBOK hamburgera (decyzja właściciela 2026-09-08) stoją od 2026-10-02
     w bloku ≤ 1040 px (tablet i telefon): pasek jest flexem (logo, plakietka, hamburger), lista nav-links pozycjonowana
     absolutnie; egzemplarz plakietki w liście znika, odstęp pod ostatnim odnośnikiem przejmuje sąsiad (:has). */
  .motyw-btn{width:36px;height:36px}
  /* „Wypróbuj za darmo" z paska wraca do rozwijanego menu (nie mieści się obok logo, motywu i hamburgera, łamał się na dwie
     linie); w menu „Zaloguj się" jako zwykły odnośnik pod nim. Na ekranie i tak jest duży przycisk w hero, a niżej pasek na dole. */
  .nav>.nav-demo{display:none}
  .nav-inner .nav-cta.nav-cta-demo{display:inline-flex}
  .nav-inner .nav-cta.js-login:not(.bv-zal){background:transparent;color:var(--text);box-shadow:none;margin-top:0;padding-top:.2rem}
  /* niższy pasek na telefonie (sam pasek z logo) */
  .nav{min-height:56px}
  /* TELEFON — konstrukcja jak u konkurencji: okno przewija się NORMALNIE (dolny pasek
     Safari chowa się przy scrollu), a pasek menu jest STICKY, nie fixed.
     Dlaczego sticky: element fixed jest kotwiczony do viewportu, którym iOS porusza
     przy animacjach własnych belek — pasek „odklejał się" i nad nim prześwitywała
     treść (zrzuty 07:19–08:53, wersja potwierdzona stemplem). Element sticky żyje
     w WARSTWIE PRZEWIJANIA, tej samej co treść — porusza się z nią synchronicznie,
     więc między nim a treścią nie ma się gdzie wcisnąć piksel. Dowód lokalny:
     nagłówek stron prawnych (.legal-header) od zawsze jest sticky i nigdy nie przebijał.
     Pas statusu NAD paskiem kryje ::before — zasłona doczepiona do sticky paska,
     czyli malowana w warstwie przewijania. Zrzut 08:53 dowiódł, że ta warstwa JEST
     malowana w pasie statusu (treść była tam widoczna) — więc i zasłona tam sięga.
     Chowa się i wraca razem z paskiem (to jego pseudo-element), więc przy schowanym
     pasku treść normalnie przewija się pod zegarem — jak u konkurencji. */
  /* transition:none — na telefonie pasek jest SPIĘTY z palcem (JS przesuwa go inline
     o dokładnie tyle pikseli, ile przewinęła się strona); przejście czasowe by to rozmyło */
  .site-header{position:sticky;background:var(--nag);border-bottom:1px solid var(--nag-linia);transition:none}
  .site-header:before{inset:-200px 0 auto 0;height:200px;opacity:1;background:var(--nag);
    backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-mask:none;mask:none;transition:none}
  /* pasek zajmuje miejsce w dokumencie (sticky) — hero nie potrzebuje zapasu na nakładkę:
     74px paska + 50px oddechu = dawne 124px */
  .hero{padding-top:50px}
  /* menu (harmonijka: nav-inner bez pionowego paddingu, rozwija się wysokością; rozwinięte z zapasem i przewijaniem na niskich
     ekranach, 2026-09-08) stoi od 2026-10-02 w bloku ≤ 1040 px, wspólne dla tabletu i telefonu */
  section{padding:66px 0}
  .pl-pierwsza{padding-top:50px}   /* zakładka Platforma: pasek sticky zajmuje miejsce, jak .hero */
  .stat-band.lb-band{grid-template-columns:1fr 1fr;gap:.7rem;margin-top:2rem}
  .stat.lb{padding:1.1rem .9rem 1rem}
  .stat.lb .stat-num{font-size:1.9rem}
  .stat.lb .stat-claim{font-size:.9rem}
  .stat.lb .stat-desc{font-size:.78rem}
  .people{grid-template-columns:1fr}
  .f-card{flex-basis:100%}
  .f-grid{gap:1.9rem}   /* na telefonie kafelki stoją w kolumnie — trochę większy odstęp między nimi */
  /* opis Pętli wyśrodkowany na telefonie (nagłówki .sec-head są wyśrodkowane globalnie —
     patrz reguła .sec-head; tu zostaje tylko układ dwukolumnowy Pętli, który na telefonie
     zwija się w jedną kolumnę) */
  #metoda .loop-copy{text-align:center}
  #metoda .loop-copy p{margin-left:auto;margin-right:auto}
  .f-card{height:270px}   /* flip: pełna szerokość; niższe niż na desktopie, ale grafika musi się zmieścić */
  /* stopka na telefonie: wyśrodkowana, elementy jeden pod drugim */
  .foot-top,.foot-bottom{flex-direction:column;align-items:center;text-align:center}
  .foot-nav,.foot-legal{justify-content:center}
  .foot-kolumny{grid-template-columns:1fr;text-align:center}
  .foot-firma{align-items:center}
  .foot-kolumny .foot-legal{text-align:center;align-items:center}
  /* historia na telefonie: jeden kafel, zdjęcie zawsze na górze, tekst pod spodem */
  .story-rows{gap:1.8rem;margin-top:2.2rem}
  .story-row{grid-template-columns:1fr}
  .story-row:nth-child(even) .story-photo{order:-1}
  .story-text{padding:1.5rem 1.4rem}
  /* pętla: ten sam okrąg co na desktopie, tylko kompaktowy i SAME IKONY (mieści się na telefonie) */
  .loop-ring{width:min(290px,80vw);--R:calc(min(290px,80vw)*0.46)}
  .loop-stage{min-height:min(350px,96vw)}
  .lc-lab{font-size:.58rem;letter-spacing:.12em;margin-bottom:.05rem}
  .lc-score{font-size:clamp(1.7rem,9vw,2.4rem)}
  .loop-fill,.lp-step{animation-duration:12s}   /* trochę szybciej na mobile; okrąg + kafelki zgrane */
  .lp-step{width:60px;height:60px;padding:0;display:grid;place-items:center;border-radius:18px}
  .lp-step h3,.lp-step p{display:none}
  .lp-b{width:40px;height:40px;margin:0}
  .lp-b svg{width:19px;height:19px}
  .cta{padding:2rem 1.2rem}
  /* wykres stresu na telefonie: karty w kolumnie; sam wykres jako czytelny obraz (bez drobnych podpisów) */
  .sc-cards{grid-template-columns:1fr}
  .sc-cat,.sc-sub2,.sc-axttl,.sc-yl{display:none}
  .sc-val{font-size:30px}
  .sc-line{stroke-width:5.5}
  .sc-drop{stroke-width:1.8}
  .stress-note{flex-direction:column;gap:.8rem;padding:1.2rem 1.3rem}
}

/* ---- okno logowania (2026-08-31) ----
   Klik w „Zaloguj się" otwiera panel NA STRONIE zamiast przerzucać na /portal/moje-konto/.
   Formularz celuje w wp-login.php (ta sama domena), więc bez JS zwykła wysyłka też działa. */
/* ⛔ ROZMYCIE TŁA STOI W OSOBNEJ WARSTWIE (::before), NIGDY NA RODZICU PÓL (zgłoszenie właściciela
   2026-09-19, iPhone: „wskaźnik pisania jest poza polem"). WebKit rysuje kursor tekstowy w warstwie
   kompozycji, a gdy przodek pola ma `backdrop-filter`, kursor ląduje przesunięty (zwykle o tyle, ile
   strona pod spodem jest przewinięta) — pole i ramka są na miejscu, migający kursor kilkadziesiąt
   pikseli niżej. Pseudoelement jest RODZEŃSTWEM karty, więc żaden `input` nie ma już rozmywanego
   przodka, a wygląd jest identyczny: przyciemnienie i tak jest jednolite, więc jego rozmycie nic
   nie zmienia. `pointer-events:none` zostawia klik w tło (zamykanie okna) bez zmian. */
.lg-ov{position:fixed;inset:0;z-index:250;background:var(--zaslona);display:flex;align-items:center;justify-content:center;padding:20px}
.lg-ov::before{content:"";position:absolute;inset:0;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);pointer-events:none}
.lg-ov[hidden]{display:none}
.lg-card{position:relative;width:min(420px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:28px 26px 24px;box-shadow:0 30px 80px rgba(var(--cien-rgb),calc(.55*var(--cien-k)));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto}
.lg-card h3{margin:0 0 16px;font-size:1.3rem}
.lg-lab{display:block;margin:12px 0 6px;font-size:.9rem;color:var(--muted)}
.lg-rem{display:flex;align-items:flex-start;gap:.5rem;margin:12px 0 0;font-size:.9rem;color:var(--muted);cursor:pointer;line-height:1.45}
.lg-rem input{margin-top:.22rem;flex:0 0 auto}
/* Odnośniki w zgodach (regulamin, polityka) mają WYGLĄDAĆ jak linki: kolor marki i podkreślenie
   (zgłoszenie właściciela 2026-09-07: w szarym tekście zgody zlewały się z resztą zdania). */
.lg-rem a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.lg-rem a:hover{color:var(--green);text-decoration-thickness:2px}
/* Baner informacyjny o cookies (2026-09-07): tylko cookies niezbędne, więc informacja, nie zgoda.
   Przypięty do dołu, wąska karta na środku; na telefonie przycisk na całą szerokość. */
/* z-index NIŻSZY niż okna (.lg-ov = 250): pasek cookies stoi na dole ekranu i zasłaniał dolną
   część okna logowania i rejestracji — czyli przyciski, w które klika ktoś, kto jest tu pierwszy
   raz (a tylko taki widzi pasek). Znalezione testem E2E 2026-09-07. */
.ck-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:240;display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:760px;margin:0 auto;padding:14px 18px;border-radius:14px;background:var(--ck-bg);border:1px solid var(--line2);box-shadow:0 18px 50px rgba(var(--cien-rgb),calc(.5*var(--cien-k)));font-size:.9rem;color:var(--muted);line-height:1.5}
.ck-bar[hidden]{display:none}
.ck-txt{flex:1 1 320px}
.ck-txt a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.ck-ok{flex:0 0 auto;padding:10px 22px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;color:var(--na-fill);background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) 20%,var(--green) 100%)}
/* Wersja ZGODY (Google Analytics, 2026-09-15): dwa przyciski obok siebie, „Tylko niezbędne" jako drugi, cichszy. */
.ck-btns{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap}
.ck-nie{flex:0 0 auto;padding:10px 18px;border:1px solid var(--line2);border-radius:999px;cursor:pointer;font:inherit;font-weight:600;color:var(--muted);background:transparent}
.ck-nie:hover{color:var(--text)}
@media(max-width:559px){.ck-bar{left:10px;right:10px;bottom:10px;padding:12px 14px}.ck-ok{width:100%}.ck-btns{width:100%}.ck-btns button{flex:1 1 auto;width:auto}}
.lg-rem input{accent-color:var(--cyan)}
.lg-btn{width:100%;margin-top:16px}
.lg-err{margin:12px 0 0;font-size:.9rem;color:var(--red-txt);background:rgba(var(--red-rgb),.08);border:1px solid rgba(var(--red-rgb),.3);border-radius:10px;padding:9px 12px}
.lg-brak{margin:10px 0 0;font-size:.9rem;color:var(--muted);background:rgba(var(--cyan-rgb),.06);border:1px solid var(--line2);border-radius:10px;padding:9px 12px}
.lg-brak a{color:var(--cyan);font-weight:600;white-space:nowrap}
.bk-txt{margin:0 0 6px;font-size:.95rem;color:var(--muted);line-height:1.65}
/* Plakietka zalogowanego w miejscu „Zaloguj się": kwadracik 1:1 ze stylem z Trenera
   (40px, promień 11px, gradient marki) z SAMĄ literą imienia — bez zdjęcia z Google
   (decyzja właściciela 2026-09-01). ⛔ Bez własności `display` — te reguły stoją PO media
   queries i display tutaj wskrzeszał drugi, ukryty na desktopie egzemplarz przycisku
   (błąd z 2026-08-31). */
.js-login.bv-zal{width:40px;min-height:40px;height:40px;padding:0;border-radius:11px;overflow:hidden;font-family:'Space Grotesk',sans-serif;font-weight:800}
.js-login.bv-zal .bv-aw{width:100%;height:100%;display:grid;place-items:center;color:var(--na-fill);font-size:1rem}
/* Rozwijane menu konta pod plakietką (2026-09-01): imię i e-mail + wejścia do platformy,
   konta w portalu i wylogowania. Pozycję (top/right) ustawia skrypt od prostokąta plakietki. */
.bv-menu{position:fixed;z-index:240;min-width:240px;max-width:320px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 18px 50px rgba(var(--cien-rgb),calc(.5*var(--cien-k)))}
.bv-menu[hidden]{display:none}
.bv-menu-kto{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.bv-menu-imie{font-family:var(--fd);font-weight:700;color:var(--text)}
.bv-menu-mail{font-size:.82rem;color:var(--muted);word-break:break-all}
.bv-menu a.bv-menu-poz{display:block;padding:9px 12px;border-radius:9px;color:var(--text);text-decoration:none;font-size:.93rem}
.bv-menu a.bv-menu-poz:hover{background:var(--panel2);color:var(--cyan)}
.bv-menu a.bv-menu-poz[hidden]{display:none}
/* Panel „Moje konto" wbudowany w stronę (2026-09-01) — kafelki jak ekran konta w apce. */
.ko-card{width:min(960px,100%);max-height:88vh;overflow:auto}
.ko-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;align-items:start;margin-top:12px}
.ko-kafel{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:15px 16px}
.ko-kafel h4{margin:0 0 8px;font-size:.98rem;font-family:var(--fd)}
.ko-kafel[hidden]{display:none}
.ko-szeroki{grid-column:1/-1}
.ko-przyciski{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:14px}
.ko-btn{min-height:42px;padding:0 18px;font-size:.9rem}
.ko-btn2{min-height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:var(--text);font-family:var(--fd);font-weight:600;font-size:.88rem;cursor:pointer}
.ko-btn2:hover{border-color:var(--cyan);color:var(--cyan)}
.ko-info{margin-top:10px;font-size:.87rem;color:var(--green2)}
.ko-info.ko-info-blad{color:var(--red-txt)}
.ko-info[hidden]{display:none}
.ko-zgoda{display:flex;gap:9px;align-items:flex-start;margin:9px 0 0;font-size:.88rem;color:var(--muted);line-height:1.5;cursor:pointer}
.ko-zgoda input{flex:none;margin-top:3px;width:15px;height:15px;accent-color:var(--cyan)}
/* strefa usunięcia konta — jedyna czerwień w panelu, ma ostrzegać */
.ko-groza{border-color:rgba(var(--red-rgb),.4)}
.ko-groza h4{color:var(--red)}
.ko-groza-txt{margin:0 0 4px}
.ko-usun-haslo{max-width:260px}
.ko-btn-groza{min-height:42px;padding:0 18px;border-radius:12px;border:1px solid var(--red);background:transparent;color:var(--red);font-family:var(--fd);font-weight:600;font-size:.9rem;cursor:pointer}
.ko-btn-groza[disabled]{opacity:.45;cursor:not-allowed}
/* konto w koszu: pasek na górze panelu zamiast karty „Usuń konto" (zgłoszenie właściciela 2026-09-08,
   przycisk przywracania stał tylko na dole strony i w panelu go nie było) */
.ko-kosz{border:1px solid rgba(var(--red-rgb),.45);background:rgba(var(--red-rgb),.07);border-radius:13px;padding:14px 16px;margin:2px 0 0}
.ko-kosz p{margin:0;font-size:.9rem;line-height:1.55;color:var(--text)}
.ko-kosz[hidden]{display:none}
/* „Wyloguj się" w menu konta — na czerwono (życzenie właściciela 2026-09-01) */
.bv-menu a#bvMenuWyloguj{color:var(--red)}
.bv-menu a#bvMenuWyloguj:hover{background:rgba(var(--red-rgb),.08);color:var(--red)}
.ko-glowa{display:flex;align-items:center;gap:14px;margin:4px 0 10px}
.ko-aw{width:54px;height:54px;flex:0 0 auto;border-radius:15px;background:linear-gradient(140deg,var(--gs));display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:22px;color:var(--na-fill)}
.ko-imie{font-family:var(--fd);font-weight:700;font-size:1.05rem}
.ko-mail{font-size:.85rem;color:var(--muted);word-break:break-all}
.ko-kv .ko-rz{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.ko-kv .ko-rz:last-child{border-bottom:0}
.ko-et{color:var(--muted)}
.ko-wart{text-align:right}
.ko-badge{font-size:.8rem;font-weight:600;color:var(--green2);white-space:nowrap}
.ko-badge.ko-wygasl{color:var(--red-txt)}
.ko-pod{font-size:.78rem;color:var(--dim)}
.ko-h4{margin:18px 0 2px;font-size:.95rem;font-family:var(--fd)}
.ko-puste{color:var(--muted);font-size:.88rem;padding:8px 0}
.lg-sub{margin:13px 0 0;font-size:.88rem;color:var(--muted);text-align:center}
.lg-sub a{color:var(--cyan)}
.lg-albo{display:flex;align-items:center;gap:.8rem;margin:16px 0 0;color:var(--dim);font-size:.82rem}
.lg-albo:before,.lg-albo:after{content:"";flex:1;height:1px;background:var(--line)}
.lg-google,.lg-drugi{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:48px;margin-top:14px;border-radius:12px;border:1px solid var(--line2);background:var(--pole-bg);color:var(--text);font-family:var(--fd);font-weight:600;font-size:.95rem;transition:.2s}
.lg-google:hover{background:rgba(var(--hi-rgb),.07);border-color:var(--cyan)}
/* „Zarejestruj się": drugi przycisk okna, tuż pod „Zaloguj się" (2026-09-11): wypełnienie delikatnym gradientem marki
   w poświacie i obwódka w barwie marki, biały napis; nie konkuruje z pełnym gradientem „Zaloguj się" */
.lg-drugi{margin-top:10px;border-color:rgba(var(--cyan-rgb),.4);background:linear-gradient(96deg,rgba(var(--grad-a-rgb),.14),rgba(var(--grad-b-rgb),.14));color:var(--text)}
.lg-drugi:hover{border-color:var(--cyan);background:linear-gradient(96deg,rgba(var(--grad-a-rgb),.22),rgba(var(--grad-b-rgb),.22));color:var(--text)}
.lg-opis{margin:0 0 6px;font-size:.9rem;line-height:1.55;color:var(--muted)}
.lg-zapomn{margin:10px 0 0;text-align:left}
#lgWidokLog[hidden],#lgWidokReset[hidden],#lgZapomnP[hidden],#lgWidokReset .kf-in[hidden],#lgWidokReset .lg-lab[hidden],#lgResetBtn[hidden],.bv-turnstile[hidden]{display:none}
.lg-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--muted);font-size:15px;cursor:pointer;transition:color .15s}
.lg-x:hover{color:var(--text)}
html.lg-lock,body.lg-lock{overflow:hidden}

/* STRONY DOCELOWE (landing pages, 2026-10-08: najlepszy-kurs-matura-biologia/, kurs-biologia-matura-2027/,
   aplikacja-do-matury-z-biologii/; landing_page() w builderze). Hero w układzie głównej (.hero), własne bloki w kartach
   z tych samych tokenów (--kart-a/--kart-b, --line, --cyan, --green), siatki schodzą do jednej kolumny na telefonie. */
.lp-hero h1{font-size:clamp(2rem,3.9vw,3.2rem)}
.lp-hero .hero-copy p.lead{max-width:560px}
.lp-kryt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.lp-k{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.35rem 1.4rem 1.3rem;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
.lp-k-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.lp-k-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;color:var(--cyan);
  background:rgba(var(--cyan-rgb),calc(.12*var(--glow-k)));border:1px solid rgba(var(--cyan-rgb),.22)}
.lp-k-ic svg{width:20px;height:20px}
.lp-k-nr{font-family:var(--fd);font-weight:700;font-size:.8rem;letter-spacing:.16em;color:var(--dim)}
.lp-k h3,.lp-fn h3{margin:0;font-family:var(--fd);font-size:1.12rem;line-height:1.25;color:var(--text)}
.lp-k p,.lp-fn p{margin:0;color:var(--text2);font-size:.94rem;line-height:1.55}
.lp-k-fakt{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;width:fit-content;padding:.34rem .8rem;border-radius:999px;
  font-size:.82rem;font-weight:600;color:var(--green);background:rgba(var(--green-rgb),calc(.1*var(--glow-k)));border:1px solid rgba(var(--green-rgb),.25)}
.lp-k-fakt svg{width:14px;height:14px}
@media(max-width:860px){.lp-kryt{grid-template-columns:1fr}}
/* matura 2027 w pigułce: cztery kafle z liczbą w gradiencie marki */
.lp-fakty{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.lp-f{padding:1.3rem 1.3rem 1.2rem;border-radius:18px;border:1px solid var(--line);background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
.lp-f>b{display:block;font-family:var(--fd);font-weight:700;font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.1;letter-spacing:-.02em;
  background:linear-gradient(96deg,var(--gs));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-f>span{display:block;margin-top:.35rem;color:var(--text);font-weight:600;font-size:.95rem}
.lp-f>small{display:block;margin-top:.4rem;color:var(--muted);font-size:.84rem;line-height:1.45}
.lp-f small b{color:var(--green);font-weight:700}
@media(max-width:900px){.lp-fakty{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.lp-fakty{grid-template-columns:1fr}}
/* program kursu: działy z numerem i ikoną */
.lp-dzialy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.lp-dzialy li{display:flex;align-items:center;gap:.65rem;padding:.8rem 1rem;border-radius:14px;border:1px solid var(--line);background:var(--panel);
  font-size:.9rem;font-weight:600;line-height:1.3;color:var(--text)}
.lp-dzialy li i{flex:none;font-style:normal;font-family:var(--fd);font-size:.78rem;font-weight:700;color:var(--dim);min-width:1.4em}
.lp-dzialy li svg{width:20px;height:20px;flex:none;color:var(--cyan)}
@media(max-width:1020px){.lp-dzialy{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.lp-dzialy{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.lp-dzialy{grid-template-columns:1fr}}
/* etapy nauki do matury: cztery karty z etykietą czasu */
.lp-etapy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.lp-e{padding:1.2rem 1.25rem;border-radius:18px;border:1px solid var(--line);background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
.lp-e-kiedy{display:inline-block;margin-bottom:.7rem;padding:.26rem .7rem;border-radius:999px;font-family:var(--fd);font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--na-fill);background:linear-gradient(96deg,var(--gs))}
.lp-e h3{margin:0 0 .45rem;font-family:var(--fd);font-size:1.08rem;line-height:1.25;color:var(--text)}
.lp-e p{margin:0;color:var(--text2);font-size:.92rem;line-height:1.5}
@media(max-width:1020px){.lp-etapy{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lp-etapy{grid-template-columns:1fr}}
/* funkcje aplikacji i urządzenia: karty z ikoną, etykietą planu i opisem */
.lp-funk{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.lp-fn{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem 1.3rem;border-radius:18px;border:1px solid var(--line);background:linear-gradient(165deg,var(--kart-a),var(--kart-b))}
.lp-fn .lp-k-ic{margin-bottom:.25rem}
.lp-fn em{font-style:normal;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.lp-funk+.cta-pas{margin-top:2.6rem}
@media(max-width:1020px){.lp-funk{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.lp-funk{grid-template-columns:1fr}}
/* odnośniki „Zobacz też": pigułki */
#zobacz-tez{padding-top:0}
.lp-linki{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.lp-linki a{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.05rem;border-radius:999px;border:1px solid var(--line2);background:var(--panel);
  color:var(--text);font-weight:600;font-size:.9rem;text-decoration:none;transition:border-color .2s,color .2s}
.lp-linki a svg{width:15px;height:15px;color:var(--green)}
.lp-linki a:hover{border-color:var(--green);color:var(--green)}