/* ==========================================================================
   pomocstatystyka.pl - wyglad wg makiet "Zatwierdzone" (ekran 14a, 16a-16c,
   17a/17b dla krokow kreatora).

   Zasada nadrzedna: to jest wylacznie warstwa wizualna. Wszystkie
   identyfikatory, klasy i nazwy pol, z ktorych korzysta JavaScript kreatora
   i backend, zostaly zachowane co do znaku.
   ========================================================================== */
:root{
  --granat:#1d2d3d;        /* hero, naglowek, ciemne bloki */
  --papier:#f2f2f3;        /* tlo jasnych sekcji, tekst na granacie */
  --tekst:#1d1f20;
  --akcent:#5980a6;        /* przyciski, ikony */
  --akcent-hover:#416180;
  --akcent-link:#416180;   /* akcent do tekstu na jasnym tle */
  --link-hover:#2c455d;
  --akcent-jasny:#94bce3;  /* akcent na granacie */
  --akcent-tlo:#dfe6ed;    /* jasny odcien akcentu */
  --karta:#ffffff;
  --sekcja-szara:#e9e9ea;
  --tekst-2:rgba(29,31,32,.7);
  --tekst-tresc:rgba(29,31,32,.85);   /* dluzsze akapity - ciemniejsze niz --tekst-2 */
  --tekst-3:rgba(29,31,32,.65);
  --linia:rgba(29,31,32,.2);
  --linia-slaba:rgba(29,31,32,.12);
  --na-granacie-2:rgba(242,242,243,.8);
  --na-granacie-3:rgba(242,242,243,.6);
  --linia-granat:rgba(242,242,243,.25);
  --czeka-tlo:#fdf1dc; --czeka-tekst:#8a5a12;
  --ok-tlo:#e3efe6;     --ok-tekst:#2f6b43;
  --info-tlo:#dfe6ed;   --info-tekst:#2c455d;
  --blad:#9a3b2a;
  --maxw:1100px;
  --cien-plyw:0 12px 40px rgba(0,0,0,.3);
  /* Wysokosc naglowka kroku kreatora - od niej zalezy pozycja przycisku
     "Dalej", ktory jest wspolny dla wszystkich krokow. */
  --krok-naglowek:62px;
  /* Kolory, ktore NIE zmieniaja sie w trybie ciemnym. Granatowe bloki
     (naglowek, hero, pasma CTA) wygladaja tak samo w obu motywach, wiec
     tekst na nich musi zostac jasny, a pola kreatora - biale. */
  --na-granacie:#f2f2f3;
  --na-jasnym:#1d1f20;
  /* Wysokosc pola kreatora i przycisku "Dalej". Przycisk lezy w polu, wiec
     obie liczby musza byc w jednym miejscu - inaczej przycisk wystaje. */
  --kpole:54px;
  --kbtn:44px;
}
/* Tryb ciemny. UWAGA: makiety nie definiuja palety ciemnej, a przelacznik
   istnieje w serwisie i widnieje w makiecie (ikona ksiezyca). Ponizsza paleta
   jest wiec wyprowadzeniem z tokenow jasnych, nie kopia z makiety. */
:root[data-theme="dark"]{
  --papier:#16202b; --karta:#1d2d3d; --sekcja-szara:#16202b;
  --tekst:#eef1f4;
  --tekst-2:rgba(238,241,244,.72); --tekst-3:rgba(238,241,244,.55);
  --tekst-tresc:rgba(238,241,244,.86);
  --linia:rgba(238,241,244,.2); --linia-slaba:rgba(238,241,244,.12);
  --akcent-link:#94bce3; --link-hover:#bcd6ee; --akcent-tlo:#22384d;
  --czeka-tlo:#3a2f1c; --czeka-tekst:#e9c384;
  --ok-tlo:#1e3527;     --ok-tekst:#8fd0a6;
  --info-tlo:#22384d;   --info-tekst:#bcd6ee;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Barlow",system-ui,-apple-system,sans-serif;
  background:var(--papier);color:var(--tekst);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.kq{font-family:"Barlow Condensed",Impact,system-ui,sans-serif;
  line-height:1.08;text-wrap:balance;font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}

/* --- przyciski: pigulki --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Barlow Condensed",system-ui,sans-serif;font-weight:600;font-size:16px;
  padding:12px 26px;border-radius:100px;border:1px solid transparent;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;white-space:nowrap}
.btn-primary{background:var(--akcent);color:var(--na-granacie)}
.btn-primary:hover{background:var(--akcent-hover)}
.btn-ghost{border-color:var(--akcent);color:var(--akcent-link);background:transparent}
.btn-ghost:hover{background:rgba(89,128,166,.08)}
.btn-stat{background:var(--granat);color:var(--na-granacie)}
.btn-stat:hover{background:#16242f}
.btn-lg{padding:13px 28px;font-size:17px}
.btn.full{width:100%}
.btn:disabled{cursor:not-allowed}

/* --- naglowek: granatowy na kazdej stronie --- */
header{position:sticky;top:0;z-index:60;background:var(--granat);color:var(--na-granacie)}
header.on{box-shadow:0 6px 24px -18px rgba(0,0,0,.8)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 40px;max-width:var(--maxw);margin:0 auto}
.brandlogo{height:34px;width:auto;display:block}
@media (max-width:768px){.brandlogo{height:30px}}
.brandlogo.light{display:none}
nav.links{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:500}
nav.links a{color:var(--na-granacie-2);padding-bottom:4px;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
nav.links a:hover{color:var(--na-granacie);border-bottom-color:var(--akcent-jasny)}
.nav-cta{display:flex;gap:14px;align-items:center;font-size:14px}
.nav-cta .zal{color:var(--na-granacie)}
.icon-btn{background:transparent;border:0;color:var(--na-granacie-2);cursor:pointer;
  font-size:17px;line-height:1;padding:4px;display:grid;place-items:center}
.icon-btn:hover{color:var(--na-granacie)}
.btn-nav{padding:8px 18px;border:1px solid rgba(242,242,243,.4);border-radius:100px;
  color:var(--na-granacie);font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:15px;
  transition:background .18s}
.btn-nav:hover{background:rgba(242,242,243,.1)}
.hamb{display:none}
.mnav{display:none;flex-direction:column;background:var(--granat);
  border-top:1px solid var(--linia-granat);padding:6px 20px 14px}
.mnav.open{display:flex}
.mnav a{padding:13px 2px;color:var(--na-granacie);font-weight:500;
  border-bottom:1px solid rgba(242,242,243,.14)}
.mnav a:last-child{border-bottom:0}

/* --- komunikaty (flash) --- */
.flash-wrap{padding:16px 40px 0;max-width:var(--maxw);margin:0 auto}
.flash{padding:12px 18px;border-radius:12px;font-size:15px;margin-bottom:10px}
.flash-ok{background:var(--ok-tlo);color:var(--ok-tekst)}
.flash-error{background:var(--czeka-tlo);color:var(--blad)}

/* ==========================================================================
   HERO + KREATOR  (ekran 14a / 17a / 17b)
   ========================================================================== */
.hero{background:var(--granat);color:var(--na-granacie);min-height:640px;
  display:flex;flex-direction:column;justify-content:center;
  padding:56px 40px 72px}
.hero-in{max-width:var(--maxw);margin:0 auto;width:100%;
  display:flex;flex-direction:column;align-items:center}

/* Naglowek kroku kreatora. Krok 1 jest <h1> (jedyny w dokumencie - SEO),
   kroki 2-4 to .kq o identycznym wygladzie.

   UWAGA: regula MUSI byc ograniczona do .hero. Bez tego malowala na kolor
   papieru kazdy <h1> w serwisie - a na jasnych podstronach (blog, wpis)
   znaczylo to biale litery na bialym tle. */
.hero h1,.hero .kq{font-family:"Barlow Condensed",sans-serif;font-weight:500;
  font-size:44px;line-height:1.05;margin:0;text-align:center;color:var(--na-granacie);
  min-height:var(--krok-naglowek)}
.hero .lede{display:none}

.kard{width:100%;display:flex;flex-direction:column;align-items:center}
.cardtag,.ktop{display:none}   /* w nowym ukladzie pytanie jest naglowkiem */

/* Naglowek kroku jest szeroki na cala sekcje, a pole i przycisk maja 600 px -
   dlatego kontener jest pelnej szerokosci, a zwezane sa dopiero elementy. */
.kbody{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.wq{display:none;width:100%;flex-direction:column;align-items:center;order:1}
.wq.on{display:flex}
.stepno,.qt,.qh,.khint .hl{display:none}  /* pytanie widnieje jako naglowek */

/* pole - pigulka */
.kinp{width:600px;max-width:100%;margin-top:30px;padding:0 150px 0 24px;
  height:var(--kpole);font-family:"Barlow",sans-serif;font-size:16px;
  color:var(--na-jasnym);background:#fff;border:0;border-radius:100px;outline:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.kinp::placeholder{color:rgba(29,31,32,.5)}
.kinp:focus{box-shadow:0 0 0 2px var(--akcent-jasny)}
/* krok 4: hipotezy - pole wieloliniowe, wiec prostokat o promieniu 16px */
textarea.kinp{height:auto;padding:16px 18px;border-radius:16px;min-height:130px;
  resize:vertical;line-height:1.5}

/* przycisk "Dalej" - wspolny dla krokow, przyklejony do prawej krawedzi pola */
.wnav{display:contents}
/* Prawa krawedz przycisku kotwiczona do prawej krawedzi pola (srodek + 300px),
   dzieki czemu zmiana napisu ("Dalej" -> "Dobierz analizy") nic nie przesuwa. */
#kr-next{position:absolute;
  top:calc(var(--krok-naglowek) + 30px + (var(--kpole) - var(--kbtn)) / 2);
  right:calc(50% - 300px + 5px);
  height:var(--kbtn);padding:0 26px;background:var(--akcent);
  color:var(--na-granacie);border:0;border-radius:100px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:17px;
  cursor:pointer;transition:background .18s}
#kr-next:hover:not(:disabled){background:var(--akcent-hover)}
/* Przycisk nieaktywny zostaje w pelnym kolorze (tak jest w makiecie) -
   o niedostepnosci mowi kursor, nie wyblakniecie. */
#kr-next:disabled{background:var(--akcent);cursor:not-allowed}
/* Przy kroku 4 pole jest wysokie - przycisk wraca pod nie, na calej szerokosci.
   Krok rozpoznajemy po obecnosci <textarea> w aktywnym kroku, bo skryptu
   kreatora celowo nie modyfikujemy (nie ma jak dolozyc klasy). */
.kbody:has(.wq.on textarea.kinp) #kr-next{position:static;width:600px;max-width:100%;
  margin-top:14px;height:50px;order:2}
/* Zapas na wypadek przegladarki bez :has() - tekst nie wejdzie pod przycisk. */
textarea.kinp{padding-right:170px}
.kbody:has(.wq.on textarea.kinp) textarea.kinp{padding-right:18px}
#kr-prev{order:4;margin-top:14px;background:transparent;border:0;cursor:pointer;
  font-family:"Barlow",sans-serif;font-size:13px;color:rgba(242,242,243,.5)}
#kr-prev:hover{color:var(--na-granacie-2)}

/* paski postepu */
.wsteps{order:3;display:flex;gap:6px;margin-top:18px}
.wsteps .d{width:24px;height:2px;background:var(--linia-granat);border-radius:2px;
  transition:background .2s}
.wsteps .d.on{background:var(--akcent-jasny)}

/* chipsy ze skalami (krok 3) */
.khint{width:600px;max-width:100%;margin-top:14px;display:flex;justify-content:center}
.kchips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  font-size:13px;color:rgba(242,242,243,.85);align-items:center}
.kchip{padding:5px 12px;border:1px solid rgba(242,242,243,.3);border-radius:100px;
  cursor:pointer;transition:background .18s,border-color .18s}
.kchip:hover{background:rgba(242,242,243,.1);border-color:rgba(242,242,243,.55)}
.kchip small{color:rgba(242,242,243,.5)}

/* informacja o pliku z danymi (krok 4) */
.krtip{width:600px;max-width:100%;margin-top:12px;padding:12px 16px;
  border:1px dashed rgba(242,242,243,.3);border-radius:12px;
  display:flex;align-items:center;gap:10px;font-size:13px;
  color:rgba(242,242,243,.55)}
.krtip svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.krtip b{color:rgba(242,242,243,.8);font-weight:600}

/* ==========================================================================
   WYCENA - panel budowany przez JavaScript do #stage
   ========================================================================== */
.kreveal{display:none;width:100%;max-width:720px;margin:0 auto}
.kreveal.show{display:block}
#stage{background:var(--karta);color:var(--tekst);border:1px solid transparent;
  border-radius:12px;padding:28px 30px;box-shadow:0 18px 50px -34px rgba(0,0,0,.55)}
/* W trybie ciemnym karta ma ten sam kolor co hero - rozdziela je obrys. */
:root[data-theme="dark"] #stage{border-color:rgba(242,242,243,.16);box-shadow:none}
@keyframes rv{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rlead{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--akcent-link);font-weight:600}
.rbig2{font-family:"Barlow Condensed",sans-serif;font-size:26px;font-weight:600;
  line-height:1.1;margin:6px 0 10px}
.rwhy{font-size:13.5px;color:var(--tekst-2);line-height:1.55;margin-bottom:12px}
.rll{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--tekst-3);margin:16px 0 8px}
.rll .req{color:var(--blad);letter-spacing:0;text-transform:none;font-weight:500}
.addhdr{display:flex;justify-content:space-between;align-items:baseline}
.addhdr span{font-weight:500;text-transform:none;letter-spacing:0;font-size:12.5px}

.v2list{display:flex;flex-direction:column;gap:8px}
.v2item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  background:var(--papier);border:1px solid var(--linia-slaba);border-radius:12px;
  cursor:pointer;transition:border-color .16s,background .16s}
.v2item:hover{border-color:var(--akcent)}
.v2item.on{border-color:var(--akcent);background:var(--akcent-tlo)}
.v2item.lock{cursor:default;opacity:.9}
.v2item .cb{width:20px;height:20px;flex:none;border-radius:100px;
  border:1px solid var(--linia);display:grid;place-items:center;background:var(--karta)}
.v2item .cb svg{width:12px;height:12px;fill:none;stroke:var(--karta);
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.v2item.on .cb,.v2item.lock .cb{background:var(--akcent);border-color:var(--akcent)}
.v2item .tt{flex:1}
.v2item .tt b{display:block;font-size:15px;font-weight:600}
.v2item .tt small{display:block;font-size:13px;color:var(--tekst-3);margin-top:2px}
.v2item .pp{font-size:14px;font-weight:600;color:var(--akcent-link);white-space:nowrap}

.moretoggle{width:100%;margin-top:10px;padding:11px 16px;background:transparent;
  border:1px dashed var(--linia);border-radius:12px;cursor:pointer;
  font-family:"Barlow",sans-serif;font-size:14px;color:var(--akcent-link);
  display:flex;align-items:center;justify-content:center;gap:8px}
.moretoggle:hover{background:rgba(89,128,166,.06)}
.moretoggle .mchev{transition:transform .2s;display:inline-block}
.moretoggle.open .mchev{transform:rotate(180deg)}

.addgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.addtile{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--papier);border:1px solid var(--linia-slaba);border-radius:12px;
  cursor:pointer;font-size:14px;transition:border-color .16s,background .16s}
.addtile:hover{border-color:var(--akcent)}
.addtile.on{border-color:var(--akcent);background:var(--akcent-tlo)}
.addtile .cb{width:18px;height:18px;flex:none;border-radius:100px;
  border:1px solid var(--linia);display:grid;place-items:center;background:var(--karta)}
.addtile .cb svg{width:11px;height:11px;fill:none;stroke:var(--karta);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.addtile.on .cb{background:var(--akcent);border-color:var(--akcent)}
.addtile b{flex:1;font-weight:500}
.addtile .ap{font-weight:600;color:var(--akcent-link);white-space:nowrap}

.rdop{width:100%;padding:12px 16px;font-family:"Barlow",sans-serif;font-size:14.5px;
  color:var(--tekst);background:var(--papier);border:1px solid var(--linia-slaba);
  border-radius:12px;outline:0;resize:vertical}
.rdop:focus{border-color:var(--akcent)}
.rauto{font-size:13px;color:var(--tekst-3);margin-top:14px;line-height:1.5}
/* --- wycena: przelacznik trybu, pakiety, wlasny zestaw (ekrany 27b/20a/27c) --- */
.ztaby{display:inline-flex;padding:3px;margin:2px 0 16px;border:1px solid var(--linia);
  border-radius:100px}
.ztaby button{padding:9px 20px;border:0;border-radius:100px;background:transparent;
  color:var(--tekst-2);font-family:"Barlow",sans-serif;font-size:14px;font-weight:500;
  cursor:pointer;transition:background .16s,color .16s}
.ztaby button:hover{color:var(--tekst)}
.ztaby button.on{background:var(--granat);color:var(--na-granacie);font-weight:600}

.pakiety{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;
  margin-top:14px}
.pakiet{background:var(--papier);border:2px solid var(--linia-slaba);border-radius:12px;
  padding:20px 22px;cursor:pointer;transition:border-color .16s,background .16s}
.pakiet:hover{border-color:var(--akcent)}
.pakiet.on{border-color:var(--akcent);background:var(--akcent-tlo)}
.pakiet .gora{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pakiet .nazwa{font-family:"Barlow Condensed",sans-serif;font-size:22px;font-weight:600}
.pakiet .cena{font-family:"Barlow Condensed",sans-serif;font-size:28px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pakiet .lista{display:flex;flex-direction:column;margin-top:10px;font-size:14px}
.pakiet .lista div{display:flex;gap:10px;align-items:flex-start;padding:9px 0;
  border-top:1px solid var(--linia-slaba);line-height:1.45}
.pakiet .lista .ptak{color:var(--akcent);font-size:13px;flex:none;line-height:1.6}
.pakiet .wiecej{display:flex;align-items:center;gap:6px;width:100%;margin-top:12px;
  padding:10px 0 0;border:0;border-top:1px solid var(--linia-slaba);background:none;
  font-family:"Barlow",sans-serif;font-size:13px;color:var(--akcent-link);cursor:pointer}
.pakiet .wiecej .chev{transition:transform .2s}
.pakiet.rozwiniety .wiecej .chev{transform:rotate(180deg)}
.pakiet .szczegoly{display:none;flex-direction:column;gap:10px;margin-top:12px;
  font-size:13px;line-height:1.5;color:var(--tekst-2)}
.pakiet .szczegoly b{color:var(--tekst);font-weight:600}
.pakiet.rozwiniety .szczegoly{display:flex}

/* Po przejsciu do wlasnego zestawu pakiety zwijaja sie do dwoch pasków (20a). */
.pkt-chipy{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 14px}
.pkt-chip{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:14px 18px;background:transparent;border:1px solid var(--linia);
  border-radius:12px;cursor:pointer;font-family:"Barlow Condensed",sans-serif;
  font-size:19px;font-weight:600;color:var(--tekst);transition:border-color .16s}
.pkt-chip:hover{border-color:var(--akcent)}
.zmien-liste{margin-top:16px;padding:0;background:none;border:0;cursor:pointer;
  font-family:"Barlow",sans-serif;font-size:14px;color:var(--akcent-link);
  text-decoration:underline;text-underline-offset:3px}

.stat-panel{text-align:center;padding:16px 0 4px}
.stat-panel .od{font-family:"Barlow Condensed",sans-serif;font-size:48px;font-weight:600;
  line-height:1}
.stat-panel p{font-size:16px;line-height:1.6;margin:14px auto 0;max-width:48ch}
.stat-panel .pod{font-size:14px;color:var(--tekst-3);margin-top:6px}

.ksumbar{display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;background:var(--granat);color:var(--na-granacie);border-radius:12px}
.rsL{font-size:13px;color:var(--na-granacie-3);text-transform:uppercase;
  letter-spacing:.1em;font-weight:600}
.rsV{font-family:"Barlow Condensed",sans-serif;font-size:32px;font-weight:600;
  line-height:1;font-variant-numeric:tabular-nums}
.rsumrow{display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;background:var(--akcent-tlo);border-radius:12px;font-size:14px}
.rsumrow b{font-family:"Barlow Condensed",sans-serif;font-size:26px;font-weight:600;
  font-variant-numeric:tabular-nums}
.rroute{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;
  border-radius:12px;background:var(--info-tlo);color:var(--info-tekst);font-size:13.5px;
  line-height:1.55}
.rroute svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rspacer{height:16px}
.rcode{display:flex;gap:10px;align-items:center}
.rcode .kinp{margin-top:0;padding:13px 18px}
.rcode .btn{flex:none}
.rconsent{display:flex;gap:11px;align-items:flex-start;margin-top:16px;
  font-size:13px;color:var(--tekst-2);line-height:1.5;cursor:pointer}
.rconsent .ccb{width:20px;height:20px;flex:none;border-radius:6px;
  border:1px solid var(--linia);display:grid;place-items:center;background:var(--karta);
  transition:background .16s,border-color .16s}
.rconsent .ccb svg{width:12px;height:12px;fill:none;stroke:var(--karta);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.rconsent.on .ccb{background:var(--akcent);border-color:var(--akcent)}
.rconsent.err .ccb{border-color:var(--blad)}
.rconsent a{color:var(--akcent-link);text-decoration:underline;text-underline-offset:2px}
.finerr{margin-top:12px;padding:12px 16px;border-radius:12px;font-size:13.5px;
  background:#f7e4e0;color:var(--blad)}
.rback{width:100%;margin-top:14px;background:transparent;border:0;cursor:pointer;
  font-family:"Barlow",sans-serif;font-size:13.5px;color:var(--tekst-3)}
.rback:hover{color:var(--tekst)}
/* Pole i zgoda w stanie bledu - JS dodaje .err oraz .shake */
.kinp.err,.rdop.err{box-shadow:0 0 0 2px var(--blad)}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}
  50%{transform:translateX(-3px)}}
.shake{animation:shake .4s}

/* ==========================================================================
   SEKCJE
   ========================================================================== */
section{padding:72px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto}
.kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--akcent-link);font-weight:600}
h2{font-size:36px;font-weight:600;margin-top:8px}
.sec-head p{color:var(--tekst-2);font-size:16px;margin-top:12px}

/* --- jak to dziala: os z kropkami --- */
.stepper-wrap{position:relative;margin-top:48px}
.stepper-line{position:absolute;left:12.5%;right:12.5%;top:9px;height:1px;
  background:rgba(29,31,32,.25)}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.st{display:flex;flex-direction:column;align-items:center}
.st .n{width:19px;height:19px;border-radius:100px;background:var(--papier);
  border:1px solid var(--akcent);position:relative;font-size:0}
.st:first-child .n{background:var(--akcent);border-color:var(--akcent)}
.st h4{font-family:"Barlow",sans-serif;font-weight:600;font-size:16px;margin-top:18px}
.st p{font-size:14px;color:var(--tekst-2);margin-top:4px;line-height:1.5;max-width:22ch}

/* --- dwie drogi --- */
.band{background:var(--sekcja-szara)}
.dwie{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-top:36px;
  align-items:stretch}
.droga{border-radius:12px;padding:32px 32px 28px;display:flex;flex-direction:column;gap:20px}
.droga.ciemna{background:var(--granat);color:var(--na-granacie)}
.droga.jasna{background:var(--papier);border:1px solid var(--linia)}
.droga .tyt{display:flex;justify-content:space-between;align-items:center;gap:12px}
.droga h3{font-family:"Barlow Condensed",sans-serif;font-size:26px;font-weight:600}
.znacznik{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--akcent-jasny);font-weight:600;border:1px solid rgba(148,188,227,.5);
  border-radius:100px;padding:4px 10px;white-space:nowrap}
.cena{font-family:"Barlow Condensed",sans-serif;font-size:56px;font-weight:600;
  line-height:1;font-variant-numeric:tabular-nums}
.cena span{font-size:16px;font-weight:400;font-family:"Barlow",sans-serif}
.droga.ciemna .cena span{color:rgba(242,242,243,.65)}
.droga.jasna .cena span{color:var(--tekst-2)}
.droga p{font-size:15px;line-height:1.5}
.droga.ciemna p{color:var(--na-granacie-2)}
.droga.jasna p{color:var(--tekst-2)}
.droga .btn{align-self:flex-start;margin-top:auto}
.droga.ciemna .btn{background:var(--na-granacie);color:var(--granat)}
.droga.ciemna .btn:hover{background:#fff}

/* --- FAQ --- */
.faqwrap{max-width:760px;margin:36px auto 0}
.fitem{border-top:1px solid var(--linia)}
.fitem:last-child{border-bottom:1px solid var(--linia)}
.fq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 0;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:"Barlow",sans-serif;font-weight:600;font-size:17px;color:var(--tekst)}
.fq .pl{color:var(--akcent);font-size:18px;line-height:1}
.fitem.open .fq .pl{font-size:0}
.fitem.open .fq .pl::after{content:"−";font-size:18px}
.fa{max-height:0;overflow:hidden;transition:max-height .28s ease}
.fa p{font-size:15px;color:var(--tekst-2);line-height:1.55;padding-bottom:20px}
.faq-foot{text-align:center;font-size:14px;color:var(--tekst-3);margin-top:22px}
.faq-foot a{color:var(--akcent-link);text-decoration:underline;text-underline-offset:3px}

/* --- opinie --- */
.opinie-sek{background:var(--granat);color:var(--na-granacie)}
.opinie-grid{display:grid;grid-template-columns:320px 1fr;gap:60px}
.opinie-grid .kicker{color:var(--akcent-jasny)}
.opinie-lead h2{font-family:"Barlow Condensed",sans-serif;font-size:36px;margin-top:10px}
.opinie-lead p{font-size:14px;color:rgba(242,242,243,.65);margin-top:14px;line-height:1.5}
.opl{display:flex;flex-direction:column}
.opw{border-top:1px solid rgba(242,242,243,.2);padding:20px 0;display:grid;
  grid-template-columns:1fr 170px;gap:24px;font-size:15px;line-height:1.5}
.opw:last-child{border-bottom:1px solid rgba(242,242,243,.2)}
.opw .kto{text-align:right}
.opw .gw{color:var(--akcent-jasny);letter-spacing:2px;font-size:12px}
.opw .kto small{display:block;font-size:12px;color:rgba(242,242,243,.55);
  text-transform:uppercase;letter-spacing:.08em;margin-top:4px}

/* --- pasmo CTA --- */
.cta-sek{padding:88px 0;text-align:center;border-bottom:1px solid var(--linia-slaba)}
.cta-sek h2{font-size:44px;max-width:20ch;margin:0 auto}
.cta-sek p{font-size:16px;color:var(--tekst-2);margin-top:14px}
.cta-akcje{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* --- kontakt --- */
.kontakt-grid{display:grid;grid-template-columns:320px 1fr;gap:60px}
.kontakt-lead h2{font-size:36px;margin-top:8px}
.kontakt-lead p{font-size:15px;color:var(--tekst-2);margin-top:14px;line-height:1.5}
.kontakt-mail{margin-top:20px;font-size:15px;color:var(--akcent-link)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cfields{display:contents}
.cin{width:100%;padding:13px 16px;font-family:"Barlow",sans-serif;font-size:15px;
  color:var(--tekst);background:var(--karta);border:1px solid var(--linia);
  border-radius:8px;outline:0}
.cin::placeholder{color:var(--tekst-3)}
.cin:focus{border-color:var(--akcent)}
.contact>input[name="temat"],.contact>textarea,.contact>.psck,
.contact>button,.contact>.chint{grid-column:1/-1}
textarea.cin{min-height:120px;resize:vertical;line-height:1.5}
.psck{display:flex;gap:10px;align-items:flex-start;font-size:13px;
  color:var(--tekst-2);line-height:1.45;cursor:pointer}
.psck input{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;
  margin-top:2px;border:1px solid rgba(29,31,32,.4);border-radius:3px;
  background:var(--karta);cursor:pointer;position:relative;transition:background .16s}
.psck input:checked{background:var(--akcent);border-color:var(--akcent)}
.psck input::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8px;
  border:solid var(--karta);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .16s}
.psck input:checked::after{transform:rotate(45deg) scale(1)}
.psck a{color:var(--akcent-link);text-decoration:underline;text-underline-offset:2px}
.contact button{justify-self:start}
.chint{font-size:13px;color:var(--tekst-3)}

/* --- stopka --- */
footer{border-top:1px solid var(--linia);padding:44px 0 28px;background:var(--papier)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;font-size:14px}
.foot-brand .brandlogo{height:24px}
.foot-brand p{color:var(--tekst-2);margin-top:14px;max-width:30ch;line-height:1.5}
.socials{display:flex;gap:10px;margin-top:14px}
.socials .soc{width:40px;height:40px;border-radius:100px;display:grid;place-items:center;margin:0;padding:0;
  background:var(--granat);color:var(--papier);
  transition:background .18s,transform .18s,box-shadow .18s}
.socials .soc:hover{color:var(--papier);background:var(--akcent);transform:translateY(-2px);box-shadow:0 6px 14px rgba(29,45,61,.18)}
.soc:focus-visible{outline:2px solid var(--akcent);outline-offset:3px}
.soc svg{width:19px;height:19px;display:block}
@media (prefers-reduced-motion:reduce){.socials .soc{transition:none}.socials .soc:hover{transform:none}}
.foot-grid h5{font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:600;
  margin-bottom:10px}
.foot-grid a{display:block;margin-bottom:8px;color:var(--tekst)}
.foot-grid a:hover{color:var(--akcent-link)}
.foot-bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:40px;padding-top:18px;border-top:1px solid var(--linia-slaba);
  font-size:13px;color:var(--tekst-3)}

/* --- okno modalne (zachowane) --- */
.modal{display:none;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5);
  align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.modal-card{background:var(--karta);border-radius:18px;padding:28px;max-width:560px;
  width:100%;position:relative;box-shadow:var(--cien-plyw)}
.modal-x{position:absolute;top:14px;right:16px;background:transparent;border:0;
  font-size:22px;cursor:pointer;color:var(--tekst-3);line-height:1}

/* ==========================================================================
   TELEFON - punkt zlamania 768 px (ekrany 16a-16c, 51a-51g)
   ========================================================================== */
@media (max-width:768px){
  :root{--krok-naglowek:78px}
  .wrap,.nav,.flash-wrap{padding-left:20px;padding-right:20px}
  .hero{padding:24px 20px 40px;min-height:0}
  .hero h1,.hero .kq{font-size:32px}
  h2{font-size:22px}
  .cta-sek h2{font-size:30px}
  nav.links,.nav-cta .zal,.nav-cta .btn-nav{display:none}
  .hamb{display:grid;font-size:22px}
  .kbody{width:100%}
  .kinp{padding:14px 18px;margin-top:22px}
  /* Na telefonie przycisk zawsze pod polem, na calej szerokosci.
     order:2 jest KONIECZNE - .wnav ma display:contents, wiec bez tego przycisk
     dostaje kolejnosc 0 i lapie sie PRZED naglowkiem kroku. */
  #kr-next{position:static;width:100%;margin-top:12px;height:50px;order:2}
  /* Wycena na telefonie (51d): zakladki na cala szerokosc, pakiety jeden
     pod drugim. */
  .ztaby{display:flex;width:100%}
  .ztaby button{flex:1;text-align:center;padding:9px 6px;font-size:13px}
  .pakiety,.pkt-chipy{grid-template-columns:1fr}
  .pakiet{padding:18px 20px}
  .stat-panel .od{font-size:38px}
  .stat-panel p{font-size:15px}
  .wsteps{margin-top:16px}
  section{padding:48px 0}
  .stepper{grid-template-columns:1fr;gap:26px;text-align:left}
  .st{flex-direction:row;align-items:flex-start;gap:14px}
  .st .n{margin-top:6px}
  .st h4{margin-top:0}
  .st p{max-width:none}
  .stepper-line{display:none}
  .dwie,.opinie-grid,.kontakt-grid,.contact{grid-template-columns:1fr}
  .cena{font-size:44px}
  .opw{grid-template-columns:1fr;gap:10px}
  .opw .kto{text-align:left}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  #stage{padding:22px 18px}
  .addgrid{grid-template-columns:1fr}
  .rcode{flex-direction:column;align-items:stretch}
}

/* ==========================================================================
   PODSTRONY - wzorce wspolne dla wszystkich stron poza glowna
   (ekrany 50e, 55a, 60a, 49a, 46c, 47d, 44a, 50a-50d, 56a)
   ========================================================================== */

/* Granatowy pasek z tytulem strony - tuz pod naglowkiem serwisu */
.page-head{background:var(--granat);color:var(--na-granacie);padding:24px 0 34px}
.page-head h1{font-size:42px;font-weight:500;margin:0;text-align:left;min-height:0}
.page-head .pod{font-size:14px;color:rgba(242,242,243,.6);margin-top:6px}
.page-head .kicker{color:var(--akcent-jasny);margin-bottom:8px}

/* Tresc podstrony */
.page-body{padding:36px 0 48px}
.prose{max-width:680px}
.prose h2{font-size:26px;font-weight:600;margin:0 0 12px}
.prose h2:not(:first-child){margin-top:34px}
.prose h3{font-size:20px;font-weight:600;margin:24px 0 10px}
.prose p{font-size:16px;line-height:1.7;color:var(--tekst-tresc);margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px 20px}
.prose li{font-size:16px;line-height:1.7;color:var(--tekst-tresc);margin-bottom:6px}
.prose a{color:var(--akcent-link);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--link-hover)}
.prose b,.prose strong{font-weight:600}

/* Ramka wyrozniajaca w tresci (np. dane firmy, "w skrocie") */
.boks{background:var(--karta);border:1px solid var(--linia-slaba);border-radius:12px;
  padding:16px 20px;font-size:15px;line-height:1.7;margin-bottom:28px}
.boks-info{background:var(--akcent-tlo);border:0}

/* Uklad dokumentow prawnych: spis po lewej, tresc po prawej */
.legal{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
.legal-nav{display:flex;flex-direction:column;gap:2px;font-size:14px;
  position:sticky;top:96px}
.legal-nav a{padding:8px 12px;border-radius:8px;border:1px solid transparent;
  color:var(--tekst-2);transition:background .16s,border-color .16s,color .16s}
.legal-nav a:hover{color:var(--tekst);background:rgba(89,128,166,.06)}
.legal-nav a.on{background:var(--karta);border-color:var(--linia-slaba);
  font-weight:600;color:var(--tekst)}
.legal-nav .dalej{margin-top:14px;padding:8px 12px;color:var(--akcent-link);
  text-decoration:underline;text-underline-offset:3px}

/* Lista definicji (Regulamin par. 2) */
.defs{display:flex;flex-direction:column}
.defs .d{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:12px 0;
  border-top:1px solid var(--linia-slaba);font-size:15px;line-height:1.55}
.defs .d b{font-weight:600}
.defs .d span{color:var(--tekst-2)}

/* Siatka kart (narzedzia, blog) */
.karty{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.karta{background:var(--karta);border:1px solid var(--linia-slaba);border-radius:12px;
  padding:22px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .16s,transform .16s}
.karta:hover{border-color:var(--akcent);transform:translateY(-2px)}
.karta h3{font-size:20px;font-weight:600}
.karta p{font-size:14.5px;color:var(--tekst-2);line-height:1.55;flex:1}
.karta .wiecej{font-size:14px;color:var(--akcent-link);font-weight:500}
.karta-miniatura{aspect-ratio:16/10;border-radius:10px;overflow:hidden;
  background:var(--akcent);margin:-22px -22px 4px}
.karta-miniatura img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}

/* Strony statusu (platnosc OK / anulowana / 404) */
.status{min-height:60vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:72px 20px}
.status .ikona{width:64px;height:64px;border-radius:100px;display:grid;
  place-items:center;margin-bottom:22px}
.status .ikona svg{width:30px;height:30px;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.status.ok .ikona{background:var(--ok-tlo)}   .status.ok .ikona svg{stroke:var(--ok-tekst)}
.status.czeka .ikona{background:var(--czeka-tlo)} .status.czeka .ikona svg{stroke:var(--czeka-tekst)}
.status.blad .ikona{background:#f7e4e0}       .status.blad .ikona svg{stroke:var(--blad)}
.status h1{font-size:42px;font-weight:600;color:var(--tekst);min-height:0}
.status p{font-size:16px;color:var(--tekst-2);margin:14px auto 0;max-width:46ch;
  line-height:1.6}
.status .akcje{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}

/* Plakietki statusu */
.plakietka{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:100px;font-size:12.5px;font-weight:600}
.plakietka.czeka{background:var(--czeka-tlo);color:var(--czeka-tekst)}
.plakietka.ok{background:var(--ok-tlo);color:var(--ok-tekst)}
.plakietka.info{background:var(--info-tlo);color:var(--info-tekst)}

/* Baner cookies - przyklejony do dolu, pelna szerokosc (ekran 56a / 57b) */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--papier);color:var(--tekst);padding:20px 40px;
  display:flex;align-items:center;gap:28px;
  box-shadow:0 -8px 30px rgba(0,0,0,.2)}
.cookies[hidden]{display:none}
.cookies .tresc{flex:1;font-size:14px;line-height:1.55}
.cookies a{color:var(--akcent-link);text-decoration:underline;text-underline-offset:3px}
.cookies .ust{padding:9px 8px;background:transparent;border:0;cursor:pointer;
  color:var(--akcent-link);font-family:"Barlow",sans-serif;font-size:14px;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* "Tylko niezbedne" i "Akceptuje" maja byc rownej wielkosci - wymog z handoffu */
.cookies .btn{min-width:170px;justify-content:center;font-size:15px;padding:10px 20px}

@media (max-width:768px){
  .page-head{padding:18px 0 26px}
  .page-head h1{font-size:30px}
  .page-body{padding:26px 0 36px}
  .prose h2{font-size:22px}
  .legal{grid-template-columns:1fr;gap:22px}
  .legal-nav{position:static;flex-direction:row;overflow-x:auto;gap:6px;
    padding-bottom:6px}
  .legal-nav a{white-space:nowrap;border:1px solid var(--linia-slaba)}
  .legal-nav .dalej{display:none}
  .defs .d{grid-template-columns:1fr;gap:4px}
  .karty{grid-template-columns:1fr}
  .status h1{font-size:30px}
  .cookies{flex-direction:column;align-items:stretch;gap:12px;padding:18px 20px}
  .cookies .btn,.cookies .ust{width:100%}
}

/* Aktywna pozycja w menu - podkreslenie jasnym akcentem (wzorzec z ekranu 49a) */
nav.links a.on{color:var(--na-granacie);border-bottom-color:var(--akcent-jasny)}

/* Zgodnosc dla stron statusowych: platnosc_ok, platnosc_anulowana,
   zamowienie_ok uzywaja klas .ic / .actions. Zamiast przerabiac trzy pliki,
   tlumaczymy te klasy na nowy system. */
.status .ic{width:64px;height:64px;border-radius:100px;display:grid;
  place-items:center;margin:0 auto 22px}
.status .ic svg{width:30px;height:30px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.status .ic.good{background:var(--ok-tlo);color:var(--ok-tekst)}
.status .ic.warn{background:var(--czeka-tlo);color:var(--czeka-tekst)}
.status .ic.blue,.status .ic.stat{background:var(--info-tlo);color:var(--info-tekst)}
.status .actions{display:flex;gap:12px;justify-content:center;margin-top:28px;
  flex-wrap:wrap}
.status .meta{background:var(--karta);border:1px solid var(--linia-slaba);
  border-radius:12px;padding:14px 18px;font-size:14.5px;text-align:left;
  margin:18px auto 0;max-width:460px;line-height:1.6}
.status .meta b{font-weight:600}
/* Strony statusowe uzywaja samego .btn w znaczeniu "przycisk glowny"
   (tak bylo w starym systemie). Tlumaczymy to, zeby nie ruszac tych plikow. */
.status .actions .btn:not(.btn-ghost):not(.btn-primary):not(.btn-stat){
  background:var(--akcent);color:var(--na-granacie);border-color:var(--akcent)}
.status .actions .btn:not(.btn-ghost):not(.btn-primary):not(.btn-stat):hover{
  background:var(--akcent-hover)}

/* ==========================================================================
   Blog - lista wpisow (ekran 46c / 54i) i pojedynczy wpis (47d / 54j).
   ========================================================================== */
/* Pasek tytulu listy. Na komputerze stoi na jasnym tle (46c), na telefonie
   zlewa sie z granatowym naglowkiem serwisu (54i) - stad zmiana tla ponizej. */
.blog-top{padding:32px 0 0}
.blog-top .rzad{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px}
.blog-top h1{font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:40px;margin:0;text-align:left;color:var(--tekst);min-height:0}
.szukajka{display:flex;align-items:center;gap:12px;width:340px;flex:none;
  padding:12px 20px;background:#fff;border:1px solid var(--linia);
  border-radius:100px}
.szukajka svg{width:18px;height:18px;flex:none;fill:none;stroke:rgba(29,31,32,.5);
  stroke-width:1.5;stroke-linecap:round}
.szukajka input{width:100%;border:0;outline:0;background:transparent;
  font-family:"Barlow",sans-serif;font-size:16px;color:var(--tekst)}
.szukajka input::placeholder{color:rgba(29,31,32,.5)}

.kategorie{display:flex;gap:6px;flex-wrap:wrap;padding-top:22px}
.kat{padding:7px 14px;border-radius:100px;font-family:"Barlow",sans-serif;
  font-size:13px;font-weight:500;color:var(--tekst-2);background:transparent;
  border:1px solid var(--linia);cursor:pointer;transition:background .15s,color .15s}
.kat:hover{color:var(--tekst)}
.kat.on{background:var(--granat);color:var(--na-granacie);border-color:var(--granat);
  font-weight:600}

/* Okladki: te same grafiki kategorii co dotad, tylko w nowej oprawie. */
.oklad{border-radius:12px;overflow:hidden;background:var(--akcent);flex:none}
.oklad img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}
.nadtytul{display:block;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--akcent-link);font-weight:600}

.wyroznik{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;
  align-items:center;padding:28px 0}
.wyroznik .oklad{height:300px}
.wyroznik h2{font-size:34px;line-height:1.1;margin-top:10px}
.wyroznik p{font-size:16px;color:var(--tekst-2);line-height:1.55;margin-top:12px}
.wyroznik .czytaj{display:inline-block;margin-top:18px;font-size:14px;
  color:var(--akcent-link);text-decoration:underline;text-underline-offset:3px}

.wpisy{display:flex;flex-direction:column;padding-bottom:36px}
.wpis{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;
  padding:16px 0;border-top:1px solid var(--linia-slaba)}
.wpis .oklad{height:80px;border-radius:8px}
.wpis h3{font-size:21px;line-height:1.15;margin-top:4px}
.wpis p{font-size:14px;color:var(--tekst-2);margin-top:4px;line-height:1.5}
.wpis:hover h3{color:var(--akcent-link)}
.brak-wynikow{padding:28px 0 40px;color:var(--tekst-2);font-size:15px}

/* Granatowe pasmo zachety - takie samo na liscie i pod wpisem. */
.pasmo{background:var(--granat);color:var(--na-granacie);border-radius:12px;
  padding:26px 30px;display:flex;justify-content:space-between;align-items:center;
  gap:24px;margin-bottom:40px}
.pasmo .tyt{font-family:"Barlow Condensed",sans-serif;font-size:24px;
  font-weight:500;line-height:1.15}
.pasmo .pod{font-size:14px;color:rgba(242,242,243,.7);margin-top:4px}
.pasmo .btn{flex:none;background:var(--na-granacie);color:var(--granat);
  border-color:var(--na-granacie)}
.pasmo .btn:hover{background:#fff;color:var(--granat)}

/* --- pojedynczy wpis --- */
.art{max-width:720px;margin:0 auto;padding:40px 20px 0}
.art .crumbs{font-size:13px;color:var(--tekst-3)}
.art .crumbs a{color:var(--akcent-link)}
.art h1{font-size:46px;line-height:1.05;margin:10px 0 0;text-align:left;
  color:var(--tekst);min-height:0}
.art .meta{font-size:14px;color:var(--tekst-3);margin-top:12px}
.art .oklad{height:240px;margin-top:22px}
.wskrocie{background:var(--akcent-tlo);border-radius:12px;padding:20px 24px;
  margin:26px 0 18px;font-size:16px;line-height:1.65;color:var(--tekst)}
.art-tresc h2{font-size:26px;font-weight:600;margin:28px 0 10px}
.art-tresc p{font-size:17px;line-height:1.7;color:var(--tekst-tresc);
  margin:0 0 18px;text-wrap:pretty}
.art-tresc a{color:var(--akcent-link);text-decoration:underline;
  text-underline-offset:3px}
.art .zrodlo{font-size:13px;color:var(--tekst-3);padding-top:14px;
  border-top:1px solid var(--linia-slaba);margin-top:8px}
.art .zastrzezenie{font-size:13px;color:var(--tekst-3);line-height:1.6;
  margin-top:18px}
.dalej-sek{padding:36px 0 40px;background:var(--sekcja-szara);margin-top:28px}
.dalej-sek h2{font-size:24px;font-weight:600}
/* auto-fit, bo sasiadow bywa dwoch (pierwszy i ostatni wpis maja jednego). */
.dalej-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin-top:16px}
.dalej-k{display:flex;flex-direction:column;gap:10px}
.dalej-k .oklad{height:130px;border-radius:10px}
.dalej-k .tyt{font-family:"Barlow Condensed",sans-serif;font-size:20px;
  font-weight:600;line-height:1.15}
.dalej-k:hover .tyt{color:var(--akcent-link)}

/* Tryb ciemny: pole szukania i okladki musza sie trzymac palety. */
:root[data-theme="dark"] .szukajka{background:var(--karta);
  border-color:var(--linia)}
:root[data-theme="dark"] .szukajka input{color:var(--tekst)}
:root[data-theme="dark"] .szukajka input::placeholder{color:var(--tekst-3)}
:root[data-theme="dark"] .szukajka svg{stroke:var(--tekst-3)}
:root[data-theme="dark"] .oklad img{mix-blend-mode:normal;opacity:.85}

@media (max-width:768px){
  /* Telefon (54i): tytul i szukajka wchodza w granatowy naglowek. */
  .blog-top{background:var(--granat);color:var(--na-granacie);padding:10px 0 22px}
  .blog-top .rzad{flex-direction:column;align-items:stretch;gap:14px}
  .blog-top h1{font-size:32px;font-weight:500;color:var(--na-granacie)}
  .szukajka{width:100%;padding:13px 18px}
  .kategorie{flex-wrap:nowrap;overflow-x:auto;padding-top:22px;
    scrollbar-width:none}
  .kategorie::-webkit-scrollbar{display:none}
  .kat{white-space:nowrap}
  .wyroznik{grid-template-columns:1fr;gap:14px;padding:22px 0 0}
  .wyroznik .oklad{height:180px}
  .wyroznik h2{font-size:26px;margin-top:6px}
  .wpis{grid-template-columns:84px 1fr;gap:14px;padding:14px 0}
  .wpis .oklad{height:64px}
  .wpis h3{font-size:18px}
  .wpis p{display:none}
  .pasmo{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .pasmo .btn{width:100%}
  .art{padding:22px 20px 0}
  .art h1{font-size:32px}
  .art .oklad{height:170px}
  .art-tresc p{font-size:16px}
  .dalej-grid{grid-template-columns:1fr;gap:16px}
}

/* ==========================================================================
   Narzedzia - darmowe kalkulatory (ekran 49a/49b na komputerze, 54k na telefonie).
   Makieta pokazuje jedno narzedzie naraz, przelaczane zakladkami; oba
   pozostaja w HTML, wiec skrypty i identyfikatory dzialaja jak dotad.
   ========================================================================== */
.nar-hero{background:var(--granat);color:var(--na-granacie);padding:30px 0 56px}
.nar-hero .wrap{display:flex;flex-direction:column;align-items:center}
.nar-hero h1{font-family:"Barlow Condensed",sans-serif;font-weight:500;
  font-size:44px;margin:0;text-align:center}
.nar-hero .wstep{font-size:15px;color:rgba(242,242,243,.7);max-width:64ch;
  text-align:center;margin-top:12px;line-height:1.55}
.nar-hero .wstep b{color:var(--na-granacie);font-weight:600}
.zakladki{display:inline-flex;margin-top:22px;padding:3px;
  border:1px solid rgba(242,242,243,.3);border-radius:100px}
.zakladki button{padding:9px 22px;border:0;border-radius:100px;
  background:transparent;color:rgba(242,242,243,.8);
  font-family:"Barlow",sans-serif;font-size:14px;font-weight:500;cursor:pointer;
  transition:background .16s,color .16s}
.zakladki button:hover{color:var(--na-granacie)}
.zakladki button.on{background:var(--na-granacie);color:var(--granat);font-weight:600}

.narzedzie{width:720px;max-width:100%;margin-top:22px;padding:28px 30px;
  background:var(--papier);color:var(--tekst);border-radius:16px;
  display:flex;flex-direction:column;gap:18px}
.narzedzie[hidden]{display:none}
.narzedzie .desc{font-size:14px;color:var(--tekst-2);line-height:1.55}
.narzedzie .pola{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Rzedy tylko grupuja pola dla skryptu - ukladem rzadzi .pola powyzej.
   Dzieki display:contents ukrycie rzedu (style.display) nadal dziala. */
.narzedzie .row{display:contents}
.narzedzie label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.narzedzie label span{font-weight:400;color:var(--tekst-3)}
.narzedzie .inp,.narzedzie select{width:100%;padding:12px 18px;
  font-family:"Barlow",sans-serif;font-size:15px;color:var(--tekst);
  background:#fff;border:1px solid var(--linia);border-radius:100px;outline:0;
  transition:border-color .16s,box-shadow .16s}
.narzedzie .inp:focus,.narzedzie select:focus{border-color:var(--akcent);
  box-shadow:0 0 0 2px var(--akcent-tlo)}
.narzedzie select{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:44px}
.narzedzie select::-ms-expand{display:none}
.narzedzie .sel{position:relative}
.narzedzie .sel .chev{position:absolute;right:18px;top:50%;width:16px;height:16px;
  transform:translateY(-50%);pointer-events:none;color:rgba(29,31,32,.5);
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .24s}
.narzedzie .sel:focus-within .chev{transform:translateY(-50%) rotate(180deg);
  color:var(--akcent)}
.narzedzie .out{background:var(--granat);color:var(--na-granacie);border-radius:12px;
  padding:20px 24px}
.narzedzie .out .etyk{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--akcent-jasny)}
.narzedzie .out .n{font-family:"Barlow Condensed",sans-serif;font-size:30px;
  font-weight:600;line-height:1.1;margin-top:6px}
.narzedzie .out .l{font-size:14px;color:rgba(242,242,243,.75);margin-top:6px;
  line-height:1.5}
.narzedzie .hint{font-size:12px;color:var(--tekst-3);line-height:1.5}
.nar-cta{padding:56px 0;text-align:center}
.nar-cta h2{font-size:36px;margin:0}
.nar-cta p{font-size:16px;color:var(--tekst-2);margin:10px 0 0}
.nar-cta .btn{margin-top:22px}

/* W trybie ciemnym karta narzedzia nie moze byc "papierowa" - bylaby ciemna
   plama na ciemnym tle; bierzemy kolor karty. */
:root[data-theme="dark"] .narzedzie{background:var(--karta)}
:root[data-theme="dark"] .narzedzie .inp,
:root[data-theme="dark"] .narzedzie select{background:var(--papier);
  color:var(--tekst)}
:root[data-theme="dark"] .narzedzie .sel .chev{color:var(--tekst-3)}
:root[data-theme="dark"] .narzedzie .out{background:var(--granat)}

@media (max-width:768px){
  .nar-hero{padding:10px 0 24px}
  .nar-hero h1{font-size:32px}
  .nar-hero .wstep{font-size:14px;text-align:left}
  .zakladki{display:flex;width:100%;margin-top:18px}
  .zakladki button{flex:1;padding:9px 6px;font-size:13px;text-align:center}
  .narzedzie{margin-top:16px;padding:20px 18px;gap:12px}
  .narzedzie .pola{grid-template-columns:1fr}
  .narzedzie .out .n{font-size:24px}
  .nar-cta{padding:40px 0}
  .nar-cta h2{font-size:28px}
  .nar-cta .btn{width:100%}
}

/* ===== Treści rozbudowane: spis treści, listy, tabele, FAQ (wpisy i usługi) ===== */
.spis{background:var(--karta);border:1px solid var(--linia-slaba);border-radius:12px;
  padding:16px 22px;margin:4px 0 26px}
.spis-tyt{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2);margin-bottom:6px}
.spis ol{margin:0;padding-left:20px;display:grid;gap:4px}
.spis a{color:var(--akcent-link);font-size:15px;line-height:1.45}
.spis a:hover{color:var(--link-hover)}
.art-tresc h2{scroll-margin-top:calc(var(--krok-naglowek) + 16px)}
.art-tresc h3{font-size:20px;font-weight:600;margin:22px 0 8px}
.art-tresc ul,.art-tresc ol{margin:0 0 18px;padding-left:22px;font-size:17px;
  line-height:1.65;color:var(--tekst-tresc)}
.art-tresc li{margin:0 0 6px}
.art-tresc blockquote{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--akcent);
  background:var(--akcent-tlo);border-radius:0 10px 10px 0;font-size:16px;line-height:1.6;
  color:var(--tekst)}
.art-tresc code{font-size:.9em;background:var(--akcent-tlo);padding:1px 5px;border-radius:4px}
.tabela-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--linia-slaba);border-radius:10px}
.art-tresc table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45;
  font-variant-numeric:tabular-nums;background:var(--karta)}
.art-tresc th,.art-tresc td{padding:9px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--linia-slaba)}
.art-tresc thead th{font-weight:600;color:var(--tekst);border-bottom:1px solid var(--linia)}
.art-tresc tbody tr:last-child td{border-bottom:0}
.art-faq{margin-top:12px}
.art-faq details{border-top:1px solid var(--linia-slaba);padding:4px 0}
.art-faq details:last-of-type{border-bottom:1px solid var(--linia-slaba)}
.art-faq summary{cursor:pointer;list-style:none;padding:12px 28px 12px 0;position:relative;
  font-weight:600;font-size:16.5px;color:var(--tekst)}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:20px;
  color:var(--akcent-link)}
.art-faq details[open] summary::after{content:"\2212"}
.art-faq summary:focus-visible{outline:2px solid var(--akcent);outline-offset:2px;border-radius:4px}
.art-faq .odp{font-size:16px;line-height:1.65;color:var(--tekst-tresc);padding:0 0 14px}
.art .zrodlo ul{margin:6px 0 0;padding-left:18px;line-height:1.55}

/* Strony usług */
.usl-head{padding:30px 0 40px}
.usl-head .kicker a{color:inherit}
.usl-head h1{font-size:46px;line-height:1.05;max-width:820px}
.usl-lead{font-size:17px;line-height:1.6;color:var(--na-granacie-2);max-width:680px;margin:12px 0 0}
.usl-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.btn-jasny{background:var(--papier);color:var(--granat)}
.btn-jasny:hover{background:#fff;color:var(--granat)}
:root[data-theme="dark"] .btn-jasny{background:#f2f2f3}
.usl-cena{font-size:14px;color:var(--na-granacie-2);max-width:340px;line-height:1.45}
.usl-cena b{color:var(--na-granacie)}
.art.usl{padding-top:32px}
.usl-kroki{margin:34px 0 0;padding:24px 26px;background:var(--karta);
  border:1px solid var(--linia-slaba);border-radius:14px}
.usl-kroki h2{font-size:24px;font-weight:600;margin:0 0 12px}
.usl-kroki ol{margin:0;padding-left:22px;display:grid;gap:10px;font-size:16px;
  line-height:1.6;color:var(--tekst-tresc)}
.usl-kroki b{color:var(--tekst);font-weight:600}
.usl-dane{font-size:14px;color:var(--tekst-2);margin:16px 0 0;line-height:1.55}
.usl-dane a{color:var(--akcent-link);text-decoration:underline;text-underline-offset:3px}
.usl-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.usl-karta{display:flex;flex-direction:column;gap:8px;padding:22px 24px;background:var(--karta);
  border:1px solid var(--linia-slaba);border-radius:14px;transition:border-color .15s}
.usl-karta:hover,.usl-karta:focus-visible{border-color:var(--akcent)}
.usl-karta .tyt{font-family:"Barlow Condensed",sans-serif;font-size:23px;font-weight:600;
  line-height:1.15;color:var(--tekst)}
.usl-karta .pod{font-size:14.5px;line-height:1.55;color:var(--tekst-2)}
@media (max-width:768px){
  .usl-head h1{font-size:32px}
  .usl-lead{font-size:16px}
  .usl-akcje .btn{width:100%}
  .art-tresc ul,.art-tresc ol{font-size:16px}
  .art-tresc table{font-size:13.5px;line-height:1.4}
  .art-tresc th,.art-tresc td{padding:7px 8px;overflow-wrap:break-word}
  .tabela-wrap{margin-left:-4px;margin-right:-4px}
  .usl-kroki{padding:20px}
}