/* Widoma — style wszystkiego poniżej pierwszego ekranu.
   Kolory, fonty, nagłówek i pierwszy ekran są w <style> w index.html (ładują się od razu).
   Zasady ruchu: animujemy wyłącznie opacity i transform; nic nie kręci się w pętli —
   ruch wywołuje przewijanie, kursor albo pojawienie się elementu na ekranie. */

/* ---------- wspólne ---------- */
[hidden]{display:none}
.sekcja{position:relative;isolation:isolate;padding-block:var(--o-8);scroll-margin-top:4.5rem}
.sekcja-tytul{max-width:18ch;font-size:clamp(2.25rem,6.4vw,4.5rem);line-height:1.02;letter-spacing:-.045em}
.sekcja-lead{max-width:38rem;margin-top:var(--o-3);color:var(--tekst-2);font-size:clamp(1.0625rem,1.4vw,1.25rem)}
.kontener-waski{width:min(100% - 2rem,50rem)}
.etykieta-sekcji{display:inline-flex;align-items:center;gap:.625rem;margin-bottom:var(--o-3);padding:.3125rem .9375rem .3125rem .3125rem;border-radius:999px;background:rgba(237,243,239,.05);box-shadow:inset 0 0 0 1px rgba(237,243,239,.1);color:var(--tekst-2);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.etykieta-sekcji span{display:inline-grid;place-items:center;min-width:1.875rem;height:1.625rem;padding:0 .5rem;border-radius:999px;background:rgba(61,245,154,.14);color:var(--marka);letter-spacing:.02em}
.poswiata-sekcji{position:absolute;z-index:-1;width:75vmax;height:75vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(61,245,154,.14),rgba(61,245,154,.04) 55%,transparent);pointer-events:none}
.poswiata-prawo{top:-8%;right:-45vmax}
.poswiata-lewo{top:0;left:-50vmax;background:radial-gradient(closest-side,rgba(185,248,106,.1),transparent)}
.poswiata-srodek{top:50%;left:50%;translate:-50% -50%}
.karta,.cena,.faq-pozycja,.krok{background:linear-gradient(160deg,rgba(237,243,239,.06),rgba(237,243,239,.012) 55%),var(--karta)}

/* nagłówki sekcji: słowa wjeżdżają spod linii (podział na słowa robi skrypt) */
.slowo{display:inline-block;vertical-align:top;overflow:hidden;padding:.14em .05em .22em;margin:-.14em -.05em -.22em}
.slowo > *{display:inline-block}

/* ---------- pas haseł ---------- */
.pasmo{display:grid;gap:.25rem;overflow:hidden;margin-block:var(--o-4) 0;padding-block:var(--o-3);rotate:-2deg}
.pasmo-rzad{display:flex;align-items:center;gap:.4em;width:max-content;font-family:var(--f-naglowki);font-size:clamp(2.5rem,8vw,6rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;white-space:nowrap}
.pasmo-rzad i{flex:none;width:.28em;height:.28em;border-radius:50%;background:var(--marka);box-shadow:0 0 .5em rgba(61,245,154,.7)}
.pasmo-obrys{margin-left:-20%;color:transparent;-webkit-text-stroke:1.5px rgba(237,243,239,.32)}
.pasmo-obrys i{background:var(--akcent);box-shadow:0 0 .5em rgba(230,255,82,.5)}

/* ---------- 3. co robimy: bento z makietami ---------- */
.bento{display:grid;gap:var(--o-2);margin-top:var(--o-6);list-style:none}
.karta{position:relative;isolation:isolate;overflow:hidden;display:grid;padding:.625rem;border-radius:var(--r-karta);container-type:inline-size}
.karta-uklad{display:grid;align-content:start;gap:var(--o-3)}
.karta.szklo{background:linear-gradient(160deg,rgba(61,245,154,.1),rgba(237,243,239,.015) 55%),var(--szklo)}
.karta-tresc{padding:0 .875rem var(--o-2)}
.karta-poswiata{position:absolute;z-index:-1;top:0;left:0;width:24rem;height:24rem;margin:-12rem 0 0 -12rem;border-radius:50%;background:radial-gradient(closest-side,rgba(61,245,154,.18),transparent);opacity:0;pointer-events:none;transition:opacity var(--ruch) var(--krzywa)}
.swieci > .karta-poswiata{opacity:1;will-change:transform}
.karta-ikona{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:1rem;background:rgba(61,245,154,.1);color:var(--marka)}
.karta-ikona .ikona{width:1.5rem;height:1.5rem}
.karta h3{margin-top:var(--o-2);font-size:clamp(1.625rem,3vw,2.125rem);letter-spacing:-.03em}
.karta-tresc > p{max-width:34rem;margin-top:var(--o-1);color:var(--tekst-2)}
.lista-punkty{display:grid;gap:.75rem;margin-top:var(--o-3);list-style:none}
.lista-punkty li{display:flex;align-items:baseline;gap:.75rem}
.lista-punkty li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--marka);box-shadow:0 0 0 3px rgba(61,245,154,.12),0 0 14px rgba(61,245,154,.5);transform:translateY(-.1em)}
/* dopisek „wycenę podajemy razem z makietą” przy dodatkach */
.karta-tresc > .karta-wycena{display:flex;align-items:baseline;gap:.625rem;margin-top:var(--o-3);padding:.625rem .875rem;border-radius:1rem;background:rgba(230,255,82,.08);color:var(--tekst);font-size:var(--t-s);font-weight:600;line-height:1.45}
.karta-wycena .punkt{width:.4375rem;height:.4375rem;background:var(--akcent);box-shadow:0 0 10px rgba(230,255,82,.55);transform:translateY(-.1em)}
.karta-makieta{position:relative;order:-1;display:grid;justify-items:center;align-items:start;height:14.5rem;overflow:hidden;border-radius:calc(var(--r-karta) - .5rem);background:radial-gradient(90% 70% at 50% 110%,rgba(61,245,154,.2),transparent 70%),rgba(11,15,13,.6)}
@container (min-width:38rem){
  .karta-uklad{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-content:stretch}
  .karta-tresc{align-self:center;padding:var(--o-3) 0 var(--o-3) var(--o-2)}
  .karta-makieta{order:0;height:auto;min-height:19rem;align-items:center}}

/* makieta: telefon ze stroną */
.m-tel{position:relative;width:8.75rem;height:16rem;margin-top:2.5rem;padding:.375rem;border-radius:1.75rem;background:linear-gradient(160deg,#2c3832,#111713);box-shadow:inset 0 0 0 1px rgba(237,243,239,.18);transform:rotate(-4deg)}
.m-tel::before{content:"";position:absolute;top:.75rem;left:50%;width:2.5rem;height:.375rem;margin-left:-1.25rem;border-radius:1rem;background:#0b0f0d}
.m-ekran{display:grid;align-content:start;gap:.45rem;height:100%;padding:1.5rem .625rem .625rem;border-radius:1.4rem;background:radial-gradient(circle at 85% 0,rgba(61,245,154,.35),transparent 55%),#0c120f;overflow:hidden}
.m-pasek{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}
.m-kropka{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--marka)}
.m-kreska{display:block;height:.3125rem;border-radius:1rem;background:rgba(237,243,239,.2)}
.m-kreska.gruba{height:.625rem;background:rgba(237,243,239,.85)}
.m-kreska.gradient{background:var(--gradient)}
.w-40{width:40%}.w-60{width:60%}.w-70{width:70%}.w-80{width:80%}.w-90{width:90%}
.m-przycisk{justify-self:start;margin-top:.3rem;padding:.3rem .625rem;border-radius:1rem;background:var(--marka);color:var(--tlo);font-size:.625rem;font-weight:600;line-height:1}
.m-kafle{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;margin-top:.35rem}
.m-kafle span{height:2.25rem;border-radius:.5rem;background:rgba(237,243,239,.07)}

/* makieta: mapa z pinezką */
.m-mapa{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 18% 28%,rgba(61,245,154,.12),transparent 26%),radial-gradient(circle at 82% 78%,rgba(185,248,106,.09),transparent 28%),#101713}
.m-droga{position:absolute;left:-10%;right:-10%;height:.5rem;border-radius:1rem;background:rgba(237,243,239,.09)}
.m-droga-1{top:34%;rotate:-9deg}
.m-droga-2{top:66%;rotate:13deg}
.m-droga-3{top:-10%;bottom:-10%;left:64%;right:auto;width:.5rem;height:auto;rotate:8deg}
.m-pinezka{position:absolute;top:42%;left:50%;width:2.75rem;height:2.75rem;margin:-2.75rem 0 0 -1.375rem}
.m-pinezka svg{width:100%;height:100%}
.m-pinezka path{fill:var(--marka)}
.m-pinezka circle{fill:var(--tlo)}
.m-fala{position:absolute;top:42%;left:50%;width:3.5rem;height:1.25rem;margin:-.625rem 0 0 -1.75rem;border-radius:50%;box-shadow:0 0 0 2px rgba(61,245,154,.65);opacity:0}
.m-wizytowka{position:absolute;bottom:1rem;left:50%;display:grid;gap:.125rem;min-width:12rem;margin-left:-6rem;padding:.625rem .875rem;border-radius:1rem;background:rgba(18,25,21,.94);box-shadow:inset 0 0 0 1px rgba(237,243,239,.12);font-size:.75rem;line-height:1.35}
.m-wizytowka b{font-family:var(--f-naglowki);font-size:.9375rem}
.m-wizytowka span{color:var(--marka);font-weight:600}

/* makieta: lista opieki */
.m-opieka{display:grid;gap:.5rem;align-self:center;width:min(100% - 2rem,16rem)}
.m-wiersz{display:flex;align-items:center;gap:.625rem;padding:.5625rem .75rem;border-radius:.875rem;background:rgba(237,243,239,.06);font-size:.8125rem;font-weight:600}
.m-ptaszek{flex:none;display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--marka)}
.m-ptaszek::after{content:"";width:.45rem;height:.25rem;border-bottom:2px solid var(--tlo);border-left:2px solid var(--tlo);transform:translateY(-1px) rotate(-45deg)}
.m-status{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;margin-top:.25rem;padding:.375rem .75rem;border-radius:999px;background:rgba(61,245,154,.12);color:var(--marka);font-size:.75rem;font-weight:600}
.m-status .punkt{width:.4375rem;height:.4375rem}

/* makieta: profil na Facebooku */
.m-fb{position:relative;width:min(100% - 2.5rem,18rem);margin-top:2.25rem;overflow:hidden;border-radius:1.125rem;background:#121915;box-shadow:inset 0 0 0 1px rgba(237,243,239,.12);transform:rotate(2deg)}
.m-fb-okladka{display:block;height:5.5rem;background:radial-gradient(circle at 78% 15%,rgba(61,245,154,.8),transparent 55%),radial-gradient(circle at 15% 100%,rgba(185,248,106,.45),transparent 50%),#0f1a14}
.m-fb-avatar{position:absolute;top:3.5rem;left:1rem;display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;background:#0b0f0d;box-shadow:0 0 0 3px #121915}
.m-fb-avatar svg{width:72%}
.m-fb-dol{display:grid;gap:.5rem;padding:2.25rem 1rem 1rem}
.m-fb-nazwa{font-family:var(--f-naglowki);font-size:1rem;font-weight:700}
.m-fb-przyciski{display:flex;gap:.375rem;margin-top:.25rem}
.m-fb-przyciski span{padding:.375rem .75rem;border-radius:.625rem;background:rgba(237,243,239,.08);font-size:.6875rem;font-weight:600}
.m-fb-przyciski span:first-child{background:var(--marka);color:var(--tlo)}

/* ---------- 4. test „30 sekund” z okiem-miernikiem ---------- */
.test{display:grid;gap:var(--o-3);padding:var(--o-3);border-radius:var(--r-karta)}
.test-miernik{display:none}
.js .test-miernik{position:sticky;top:.75rem;z-index:5;display:flex;align-items:center;gap:.875rem;padding:.5rem 1rem .5rem .625rem;border-radius:999px;background:rgba(14,20,17,.9);box-shadow:inset 0 0 0 1px rgba(237,243,239,.12)}
.miernik-oko{flex:none;width:3.5rem;overflow:visible}
.miernik-oko g{transform-box:view-box;transform-origin:100px 52px;transition:transform .7s var(--sprezyna),opacity .5s var(--krzywa)}
.miernik-powieka{transform:scaleY(calc(.14 + var(--otwarcie,0) * .86))}
.miernik-swiatlo{opacity:calc(.3 + var(--otwarcie,0) * .7);transform:scale(calc(.45 + var(--otwarcie,0) * .55))}
.miernik-opis{color:var(--tekst-2);font-size:var(--t-s);line-height:1.2}
.miernik-opis b{color:var(--tekst);font-family:var(--f-naglowki);font-size:1.25rem;font-variant-numeric:tabular-nums}
.miernik-punkty{display:flex;gap:.375rem;margin-left:auto}
.miernik-punkty .punkt{width:.5rem;height:.5rem;transition:opacity .4s var(--krzywa),transform .5s var(--sprezyna)}
.punkt.zgaszony{opacity:.22;box-shadow:none;transform:scale(.8)}
.test-formularz{display:grid;gap:var(--o-3);margin-top:var(--o-4)}
.pytanie{min-width:0;margin:0;padding:0;border:0}
.pytanie legend{display:flex;align-items:baseline;gap:.75rem;padding:0;font-size:1.0625rem;font-weight:600;line-height:1.4}
.pytanie-nr{flex:none;display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(61,245,154,.12);color:var(--marka);font-size:var(--t-xs);font-weight:600;transform:translateY(-.05em)}
.odpowiedzi{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;max-width:22rem;margin-top:.75rem}
.odpowiedz{position:relative;display:block}
.odpowiedz input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.odpowiedz span{display:flex;align-items:center;justify-content:center;min-height:3rem;border-radius:999px;background:rgba(237,243,239,.05);box-shadow:inset 0 0 0 1.5px rgba(237,243,239,.42);font-weight:600;transition:transform var(--ruch-szybki) var(--sprezyna)}
.odpowiedz input:checked + span{background:var(--marka);box-shadow:0 0 24px rgba(61,245,154,.35);color:var(--tlo)}
.odpowiedz input:active + span{transform:scale(.96)}
.odpowiedz input:focus-visible + span{outline:2px solid var(--akcent);outline-offset:2px}
.test-brak{color:var(--uwaga);font-weight:600}
.test-pokaz{display:none;justify-self:start}
.js .test-pokaz{display:inline-flex}
.test-wynik{margin-top:var(--o-4)}
.test-punkty{display:flex;gap:.875rem;margin-bottom:var(--o-2)}
.test-punkty .punkt{width:1rem;height:1rem}
.test-komunikat{display:block;max-width:40rem;font-family:var(--f-naglowki);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.test-komunikat:empty{display:none}
.test-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:var(--o-1) var(--o-3);margin-top:var(--o-3)}
.test-akcje[hidden],.test-punkty[hidden]{display:none}
.test-prywatnosc{margin-top:var(--o-3);color:var(--tekst-2);font-size:var(--t-s)}

/* ---------- 5. kroki z punktem światła ---------- */
.jak-siatka{display:grid;gap:var(--o-6)}
.kroki-wrap{position:relative}
.kroki{display:grid;gap:var(--o-2);padding-left:3.75rem;list-style:none}
.kroki-tor{position:absolute;top:1.5rem;bottom:1.5rem;left:1.3125rem;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(61,245,154,.6),rgba(237,243,239,.1))}
.kroki-jezdzik{display:none;position:absolute;inset:0;transform:translateY(-100%)}
.kroki-jezdzik .punkt{position:absolute;bottom:-.4375rem;left:-.375rem;width:.875rem;height:.875rem}
.krok{position:relative;isolation:isolate;padding:var(--o-3);border-radius:1.5rem}
.krok::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(61,245,154,.45),0 0 40px -10px rgba(61,245,154,.35);opacity:0}
.krok-nr{position:absolute;top:1.25rem;left:-3.75rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--tlo);box-shadow:inset 0 0 0 1.5px rgba(61,245,154,.55);color:var(--marka);font-family:var(--f-naglowki);font-weight:700}
.krok h3{font-size:clamp(1.375rem,2.4vw,1.75rem);letter-spacing:-.025em}
.krok p{margin-top:.25rem;color:var(--tekst-2)}

/* ---------- 6. ceny ---------- */
.ceny{display:grid;gap:var(--o-2);margin-top:var(--o-6);list-style:none}
.cena{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:var(--o-4) var(--o-3);border-radius:var(--r-karta)}
.cena h3{font-size:var(--t-l);letter-spacing:-.015em}
.cena-opis{margin-top:.25rem;color:var(--tekst-2);font-size:var(--t-s)}
.cena-kwota{margin-top:auto;padding-top:var(--o-3);font-family:var(--f-naglowki);font-size:clamp(2.25rem,4.4vw,3.25rem);font-weight:700;line-height:1;letter-spacing:-.04em}
.cena-dodatek{margin-top:var(--o-2);padding:.5rem .75rem;border-radius:.875rem;background:rgba(237,243,239,.06);color:var(--tekst-2);font-size:var(--t-s)}
.cena-dodatek b{color:var(--tekst);font-weight:600}
.cena-okres{display:block;margin-top:.375rem}
.cena-limit{display:inline-block;margin-left:.25rem;font-family:var(--f-tresc);font-size:var(--t-s);font-weight:600;letter-spacing:0;color:var(--tekst-2);white-space:nowrap}
.cena-od,.cena-okres{font-family:var(--f-tresc);font-size:var(--t-s);font-weight:600;letter-spacing:0;color:var(--tekst-2)}
.cena-opieka{background:radial-gradient(120% 90% at 100% 0,rgba(61,245,154,.22),transparent 60%),var(--karta)}
.cena-znacznik{align-self:flex-start;margin-bottom:var(--o-2);padding:.25rem .625rem;border-radius:999px;background:rgba(61,245,154,.14);color:var(--marka);font-size:var(--t-xs);font-weight:600}
.ceny-uwaga{max-width:40rem;margin-top:var(--o-4)}
.ceny-netto{margin-top:var(--o-1);color:var(--tekst-2);font-size:var(--t-s);font-weight:600}
/* karta pod kursorem: przechylenie liczy skrypt klatka po klatce, więc bez przejścia CSS na transform */
.przechylona{will-change:transform}

/* ---------- 7. pewność: duże słowa + wskaźnik szybkości ---------- */
.obietnice{display:grid;gap:var(--o-3);margin-top:var(--o-6);list-style:none}
.obietnica{display:grid;gap:.375rem}
.obietnica-slowo{position:relative;display:block;width:max-content;max-width:100%;font-family:var(--f-naglowki);font-size:clamp(2.5rem,10.5vw,5.5rem);font-weight:800;line-height:.95;letter-spacing:-.05em;white-space:nowrap}
.obietnica-slowo .obrys{color:transparent;-webkit-text-stroke:1.5px rgba(237,243,239,.3)}
.obietnica-slowo .wypelnienie{position:absolute;inset:0 -.15em 0 0;padding-right:.15em;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.obietnica-tekst{max-width:38rem;font-size:clamp(1.125rem,1.8vw,1.375rem);font-weight:600;line-height:1.4}
.szybkosc{display:grid;gap:var(--o-3);margin-top:var(--o-8);padding:var(--o-4) var(--o-3);border-radius:var(--r-karta)}
.szybkosc[hidden],.szybkosc-mala[hidden]{display:none}
.szybkosc-liczby{display:flex;flex-wrap:wrap;gap:var(--o-2) var(--o-6)}
/* zapas z prawej: gradient na tekście nie może ucinać ostatniej litery */
.szybkosc-liczby strong{display:block;padding-right:.12em;margin-right:-.12em;font-family:var(--f-naglowki);font-size:clamp(3rem,9vw,5.5rem);font-weight:800;line-height:1;letter-spacing:-.05em;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.szybkosc-liczby span{color:var(--tekst-2);font-size:var(--t-s);font-weight:600}
.szybkosc-zdanie{display:flex;align-items:flex-start;gap:.75rem;max-width:44rem;color:var(--tekst-2);font-size:var(--t-s)}
.szybkosc-zdanie .punkt{margin-top:.45rem}
.szybkosc-zdanie b{color:var(--tekst)}

/* ---------- 8. kto za tym stoi ---------- */
.kto{display:grid;justify-items:start;gap:var(--o-4);padding:var(--o-4) var(--o-3);border-radius:var(--r-karta)}
.kto-obraz{position:relative;display:grid;place-items:center;width:13rem;aspect-ratio:1}
.kto-napis{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--tekst-2);font-family:var(--f-tresc);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.kto-kolo{position:relative;display:grid;place-items:center;width:64%;aspect-ratio:1;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(61,245,154,.4),rgba(61,245,154,.06) 60%,transparent 75%),var(--karta)}
.kto-kolo::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(180deg,var(--szklo-kr),transparent 50%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.kto-kolo img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.kto-monogram{font-family:var(--f-naglowki);font-size:3.5rem;font-weight:800;letter-spacing:-.03em}
.kto-rola{margin-top:.25rem;color:var(--marka);font-size:var(--t-s);font-weight:600}
.kto-imie{margin-top:var(--o-3);font-size:var(--t-l);font-weight:600}
.kto-opis{max-width:40rem;margin-top:var(--o-2);color:var(--tekst-2);font-size:clamp(1.0625rem,1.5vw,1.25rem)}

/* ---------- 9. pytania ---------- */
#pytania{content-visibility:auto;contain-intrinsic-size:auto 1000px}
.faq{display:grid;gap:.75rem;margin-top:var(--o-6)}
.faq-pozycja{border-radius:1.25rem}
.faq-pozycja summary{display:flex;align-items:center;justify-content:space-between;gap:var(--o-2);min-height:3.75rem;padding:var(--o-2) var(--o-3);border-radius:1.25rem;font-size:1.0625rem;font-weight:600;list-style:none;cursor:pointer}
.faq-pozycja summary::-webkit-details-marker{display:none}
.faq-pozycja summary::after{content:"+";flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:rgba(61,245,154,.12);color:var(--marka);font-size:1.375rem;font-weight:400;line-height:1;transition:transform var(--ruch) var(--sprezyna)}
.faq-pozycja[open] summary::after{transform:rotate(135deg)}
.faq-odpowiedz{padding:0 var(--o-3) var(--o-3);color:var(--tekst-2)}

/* ---------- 10. kontakt i formularz ---------- */
.kontakt-siatka{display:grid;gap:var(--o-6)}
.kontakt-telefon{display:inline-flex;align-items:center;gap:.875rem;min-height:3rem;margin-top:var(--o-4);color:var(--tekst);font-family:var(--f-naglowki);font-size:clamp(1.75rem,8.2vw,3rem);font-weight:700;letter-spacing:-.035em;text-decoration:none;white-space:nowrap}
.kontakt-telefon-ikona{display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--akcent);color:var(--tlo)}
.kontakt-telefon-ikona .ikona{width:.55em;height:.55em;stroke-width:2}
.kontakt-telefon:hover > span:last-child{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--marka)}
.kontakt-godziny{display:flex;align-items:center;gap:.625rem;margin-top:var(--o-2);color:var(--tekst-2)}
.kontakt-nieodbiera{max-width:30rem;margin-top:var(--o-1);color:var(--tekst-2)}
.kontakt-nieodbiera a{color:var(--tekst);font-weight:600}
.kontakt-email{margin-top:var(--o-2)}
.formularz-karta{padding:var(--o-4) var(--o-3);border-radius:var(--r-karta)}
.formularz-tytul{font-size:clamp(1.625rem,3vw,2.125rem);letter-spacing:-.03em}
.formularz-opis{margin-top:var(--o-1);color:var(--tekst-2)}
.formularz{display:grid;gap:var(--o-3);margin-top:var(--o-4)}
.pole{display:grid;gap:.375rem;min-width:0}
.pole label,.pole-grupa legend{font-size:var(--t-s);font-weight:600}
.pole input,.pole textarea{width:100%;min-height:3rem;padding:.75rem 1rem;border:1.5px solid var(--obrys-pola);border-radius:var(--r-pole);background:rgba(11,15,13,.65);color:var(--tekst);font:inherit}
.pole textarea{min-height:7rem;resize:vertical}
.pole input:focus-visible,.pole textarea:focus-visible{border-color:var(--marka)}
.pole input[aria-invalid="true"]{border-color:var(--blad)}
.pole-blad{display:flex;align-items:flex-start;gap:.5rem;color:var(--blad);font-size:var(--t-s);font-weight:600}
.pole-blad::before{content:"!";flex:none;display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;margin-top:.1rem;border-radius:50%;background:var(--blad);color:var(--tlo);font-size:.8125rem;font-weight:700;line-height:1}
.pole-blad[hidden]{display:none}
.pole-grupa{display:grid;gap:.75rem;min-width:0;margin:0;padding:0;border:0}
.pole-grupa legend{padding:0}
.pole-wskazowka{margin-top:-.25rem;color:var(--tekst-2);font-size:var(--t-s)}
.pola-dwa{display:grid;gap:.75rem}
.opcjonalne{color:var(--tekst-2);font-weight:400}
.wybor-rzad{display:flex;flex-wrap:wrap;gap:var(--o-3)}
.wybor{display:inline-flex;align-items:center;gap:.625rem;min-height:2.75rem;font-weight:600;cursor:pointer}
.wybor input,.zgoda input{flex:none;width:1.375rem;height:1.375rem;margin:0;accent-color:var(--marka)}
.pole-adres{display:none}
.formularz:has(#ma-strone-tak:checked) .pole-adres,.pole-adres.pokaz{display:grid}
.zgody{display:grid;gap:var(--o-2)}
.zgoda{display:flex;align-items:flex-start;gap:.75rem;color:var(--tekst-2);font-size:var(--t-s);line-height:1.5;cursor:pointer}
.zgoda input{margin-top:.1rem}
.zgoda a{color:var(--tekst)}
.formularz-blad{color:var(--blad);font-weight:600}
.formularz-wyslij{justify-self:start}
.formularz-wyslij[disabled]{opacity:.6;cursor:progress}
.formularz-sukces{display:flex;align-items:center;gap:var(--o-2);margin-top:var(--o-4);padding:var(--o-3);border-radius:var(--r-pole);background:rgba(61,245,154,.1);font-family:var(--f-naglowki);font-size:var(--t-l);font-weight:600}
.formularz-sukces[hidden]{display:none}
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 11. stopka i polityka prywatności ---------- */
.stopka{overflow:hidden;margin-top:var(--o-8);padding-top:var(--o-6);background:linear-gradient(180deg,transparent,rgba(22,29,25,.85) 40%)}
.stopka-siatka{display:grid;gap:var(--o-4)}
.stopka p{color:var(--tekst-2);font-size:var(--t-s)}
.stopka-marka p{margin-top:var(--o-1)}
.stopka a{text-decoration-color:rgba(237,243,239,.35)}
.stopka-kontakt a,.stopka-dane a{display:inline-block;padding-block:.125rem}
.stopka-fb{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;margin-top:var(--o-2);border-radius:50%;background:rgba(237,243,239,.08);color:var(--tekst)}
.stopka-dol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--o-1) var(--o-3);margin-top:var(--o-6);color:var(--tekst-2);font-size:var(--t-xs)}
.stopka-dol a{display:inline-flex;align-items:center;min-height:2.75rem}
.stopka-dol p{font-size:var(--t-xs)}
.stopka .stopka-slowo{margin:var(--o-4) 0 -.14em;background:linear-gradient(180deg,rgba(61,245,154,.5),rgba(237,243,239,.08) 55%,transparent 85%);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--f-naglowki);font-size:clamp(5rem,29vw,26rem);font-weight:800;line-height:.8;letter-spacing:-.06em;text-align:center;white-space:nowrap;user-select:none}
.stopka-slowo span{display:inline-block}
.polityka{margin-block:var(--o-3) var(--o-6);border-radius:var(--r-karta);background:var(--karta)}
.polityka summary{display:flex;align-items:center;justify-content:space-between;min-height:3.5rem;padding:var(--o-2) var(--o-3);border-radius:var(--r-karta);list-style:none;cursor:pointer}
.polityka summary::-webkit-details-marker{display:none}
.polityka summary::after{content:"+";flex:none;color:var(--marka);font-size:1.5rem;line-height:1}
.polityka[open] summary::after{content:"−"}
.polityka summary h2{font-size:var(--t-l);letter-spacing:-.01em}
.polityka-tresc{padding:0 var(--o-3) var(--o-4);color:var(--tekst-2);font-size:var(--t-s)}
.polityka-tresc h3{margin-top:var(--o-4);color:var(--tekst);font-size:var(--t-m);letter-spacing:0}
.polityka-tresc p,.polityka-tresc ul{max-width:65ch;margin-top:var(--o-1)}
.polityka-tresc ul{display:grid;gap:var(--o-1);padding-left:1.25rem}
.polityka-tresc strong{color:var(--tekst)}

/* ---------- większe ekrany (tylko min-width) ---------- */
@media (min-width:48rem){
  .kontener-waski{width:min(100% - 4rem,50rem)}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .test{padding:var(--o-4)}
  .pytanie legend{font-size:var(--t-l)}
  .ceny{grid-template-columns:repeat(2,minmax(0,1fr))}
  .obietnica{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;column-gap:var(--o-4)}
  .szybkosc{padding:var(--o-6)}
  .kto{grid-template-columns:auto 1fr;align-items:center;gap:var(--o-6);padding:var(--o-6)}
  .kto-obraz{width:17rem}
  .kto-monogram{font-size:4.75rem}
  .kto-napis{font-size:10px}
  .formularz-karta{padding:var(--o-6)}
  .pola-dwa{grid-template-columns:1fr 1fr}
  .stopka-siatka{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:64rem){
  .sekcja{padding-block:var(--o-12)}
  .bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .karta-duza{grid-column:span 2}
  .test{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:var(--o-6);padding:var(--o-6)}
  .test-glowna{grid-column:1;grid-row:1}
  .js .test-miernik{grid-column:2;grid-row:1;align-self:start;top:6rem;flex-direction:column;justify-content:center;gap:var(--o-3);min-height:26rem;padding:var(--o-6) var(--o-4);border-radius:var(--r-karta);background:radial-gradient(70% 60% at 50% 38%,rgba(61,245,154,.14),transparent 70%),rgba(14,20,17,.7);text-align:center}
  .miernik-oko{width:14rem}
  .miernik-etykieta{display:block;margin-bottom:.5rem}
  .miernik-opis b{font-size:4.5rem;letter-spacing:-.05em;line-height:1}
  .miernik-punkty{gap:.625rem;margin-left:0}
  .miernik-punkty .punkt{width:.875rem;height:.875rem}
  .jak-siatka{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}
  .jak-naglowek{position:sticky;top:7rem}
  .kontakt-siatka{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
  /* węższa kolumna obok formularza: mniejszy nagłówek i numer, żeby nic nie nachodziło na formularz */
  .kontakt-dane .sekcja-tytul{font-size:clamp(2.25rem,4.4vw,3.75rem)}
  .kontakt-telefon{font-size:clamp(1.75rem,3.1vw,2.75rem)}
  .kontakt-dane{position:sticky;top:7rem}}

/* ---------- ruch ---------- */
@media (prefers-reduced-motion:no-preference){
  /* pojawianie się przy przewijaniu (klasy .ruch i .widoczne dodaje skrypt; bez JS wszystko jest widoczne) */
  .ruch .wejscie{opacity:0;transform:translateY(2.5rem);transition:opacity .8s var(--krzywa),transform 1s var(--krzywa);transition-delay:calc(var(--i,0) * 80ms)}
  .ruch .wejscie.widoczne{opacity:1;transform:none}
  .ruch .wejscie.widoczne.przechylona{transition:opacity .8s var(--krzywa)}
  .ruch .sekcja-tytul .slowo > *{transform:translateY(115%);transition:transform .9s var(--krzywa);transition-delay:calc(var(--i,0) * 55ms)}
  .ruch .sekcja-tytul.widoczne .slowo > *{transform:none}
  /* makiety ożywają, gdy karta się pojawi */
  .ruch .karta .m-ptaszek{transform:scale(0);transition:transform .5s var(--sprezyna)}
  .ruch .karta.widoczne .m-ptaszek{transform:none}
  .ruch .karta.widoczne .m-wiersz:nth-child(1) .m-ptaszek{transition-delay:.45s}
  .ruch .karta.widoczne .m-wiersz:nth-child(2) .m-ptaszek{transition-delay:.7s}
  .ruch .karta.widoczne .m-wiersz:nth-child(3) .m-ptaszek{transition-delay:.95s}
  .ruch .karta.widoczne .m-pinezka{animation:pinezka .8s var(--sprezyna) .4s both}
  .ruch .karta.widoczne .m-fala{animation:fala 1.4s var(--krzywa) 1s both}
  .ruch .karta.widoczne .m-wizytowka{animation:wjazd-dol .7s var(--krzywa) .7s both}
  /* wynik testu i podziękowanie po formularzu wjeżdżają łagodnie (bez zrzutu całej strony) */
  .ruch .test-wynik.pojawia > *{animation:wjazd var(--ruch) var(--krzywa) both}
  .ruch .test-wynik.pojawia > :nth-child(2){animation-delay:60ms}
  .ruch .test-wynik.pojawia > :nth-child(3){animation-delay:120ms}
  .ruch .formularz-sukces:not([hidden]){animation:wjazd var(--ruch) var(--krzywa) both}
  /* pytania rozwijają się płynnie tam, gdzie przeglądarka to umie; gdzie indziej — od razu */
  .faq-pozycja{interpolate-size:allow-keywords}
  .faq-pozycja::details-content{block-size:0;overflow-y:clip;transition:block-size var(--ruch) var(--krzywa),content-visibility var(--ruch) allow-discrete}
  .faq-pozycja[open]::details-content{block-size:auto}

  /* ruch sterowany przewijaniem (nowoczesne przeglądarki, bez JS) */
  @supports (animation-timeline:view()){
    .pasmo{view-timeline:--pasmo block}
    .pasmo-rzad{animation:pasmo-lewo linear both;animation-timeline:--pasmo}
    .pasmo-obrys{animation-name:pasmo-prawo}
    .m-tel{animation:makieta-tel linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    .m-fb{animation:makieta-fb linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    .kroki-wrap{view-timeline:--kroki block}
    .kroki-jezdzik{display:block;animation:jazda linear both;animation-timeline:--kroki;animation-range:cover 25% cover 62%}
    .krok-nr,.krok::after{animation:krok-zapal linear both;animation-timeline:--kroki}
    .krok:nth-child(1) .krok-nr,.krok:nth-child(1)::after{animation-range:cover 20% cover 25%}
    .krok:nth-child(2) .krok-nr,.krok:nth-child(2)::after{animation-range:cover 31% cover 37%}
    .krok:nth-child(3) .krok-nr,.krok:nth-child(3)::after{animation-range:cover 43% cover 49%}
    .krok:nth-child(4) .krok-nr,.krok:nth-child(4)::after{animation-range:cover 55% cover 62%}
    .obietnica{view-timeline:--obietnica block}
    .obietnica .wypelnienie{animation:wypelnij linear both;animation-timeline:--obietnica;animation-range:cover 28% cover 48%}
    .obietnica-slowo{animation:slowo-plynie linear both;animation-timeline:--obietnica}
    .kto-napis{animation:obrot linear both;animation-timeline:view()}
    .stopka-slowo span{animation:wzlot linear both;animation-timeline:view();animation-range:entry 0% entry 100%}}}
@keyframes pinezka{from{opacity:0;transform:translateY(-3rem)}}
@keyframes fala{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(3.2)}}
@keyframes wjazd-dol{from{opacity:0;transform:translateY(1rem)}}
@keyframes pasmo-lewo{from{transform:translateX(0)}to{transform:translateX(-30%)}}
@keyframes pasmo-prawo{from{transform:translateX(-30%)}to{transform:translateX(0)}}
@keyframes makieta-tel{from{transform:translateY(4rem) rotate(-14deg)}to{transform:translateY(0) rotate(-4deg)}}
@keyframes makieta-fb{from{transform:translateY(3rem) rotate(9deg) scale(.92)}to{transform:rotate(2deg)}}
@keyframes jazda{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes krok-zapal{from{opacity:.35}}
@keyframes wypelnij{from{opacity:0}to{opacity:1}}
@keyframes slowo-plynie{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@keyframes obrot{from{transform:rotate(-40deg)}to{transform:rotate(160deg)}}
@keyframes wzlot{from{transform:translateY(40%)}}

/* poświata za kursorem — tylko myszka */
@media not ((hover:hover) and (pointer:fine)){.karta-poswiata{display:none}}

/* ---------- ograniczony ruch: wszystko od razu w stanie końcowym ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .karta-poswiata{display:none}}