/* Sprytny Wartownik — strona oferty, konto klienta, dokumenty (30.10.2026). Kolory znaku: granat + bursztyn.
   Łagodne statusy (jasne tło + kolorowy napis); po najechaniu nigdy zmiana tła — tylko cień/ruch/kolor tekstu. */
:root{--granat:#1f3a5f;--granat2:#2b4c77;--bursztyn:#f08c00;--bursztyn-t:#b36800;--bursztyn-j:#fff4e3;--tlo:#f6f8fb;--tekst:#2a3547;--szary:#5a6a85;--linia:#e5eaef;
  --ok-j:#e6fffa;--ok-t:#0b9e83;--zle-j:#fdede8;--zle-t:#d9603f;--uwaga-j:#fef5e5;--uwaga-t:#b97700;--info-j:#ecf2ff;--info-t:#2a5bd7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tekst);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.w{max-width:1140px;margin:0 auto;padding:0 20px}
[hidden]{display:none!important}

/* nagłówek */
header.gora{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--linia);z-index:5}
header.gora .w{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{width:38px;height:38px}
.logo b{display:block;font-size:15px;line-height:1.1;color:var(--granat)}
.logo span{font-size:15px;font-weight:700;color:var(--bursztyn);line-height:1.1}
nav.menu{display:flex;gap:22px;margin-left:auto;font-size:14px;font-weight:600;color:var(--szary)}
nav.menu a{text-decoration:none}
nav.menu a:hover{color:var(--granat)}
.prawa{margin-left:auto;display:flex;gap:10px;align-items:center}
@media(max-width:600px){#kto{display:none!important}}
nav.menu + .prawa{margin-left:0}
@media(max-width:860px){nav.menu{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:11px 20px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:box-shadow .15s,transform .15s;white-space:nowrap}
.btn:hover{box-shadow:0 6px 16px rgba(31,58,95,.18);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.btn.g{background:var(--granat);color:#fff}
.btn.b{background:var(--bursztyn);color:#fff}
.btn.j{background:#fff;color:var(--granat);border:1px solid var(--linia)}
.btn.zle{background:var(--zle-j);color:var(--zle-t)}
.btn.maly{padding:7px 12px;font-size:13px}
.link{background:none;border:0;padding:0;font:inherit;color:var(--info-t);cursor:pointer;text-decoration:underline}

/* statusy */
.st{white-space:nowrap;display:inline-block;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700}
.st.ok{background:var(--ok-j);color:var(--ok-t)}
.st.zle{background:var(--zle-j);color:var(--zle-t)}
.st.uw{background:var(--uwaga-j);color:var(--uwaga-t)}
.st.nic{background:#f1f4f8;color:var(--szary)}
.st.info{background:var(--info-j);color:var(--info-t)}

/* hero */
.hero{background:linear-gradient(180deg,#eef3f9 0%,#fff 100%);padding:64px 0 56px}
.hero .w{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero .w>*{min-width:0}
.plak{display:inline-block;background:var(--bursztyn-j);color:var(--bursztyn-t);font-weight:700;font-size:13px;border-radius:20px;padding:5px 12px}
h1{font-size:42px;line-height:1.15;color:var(--granat);margin:16px 0 14px;font-weight:800;letter-spacing:-.5px}
h1 em{font-style:normal;color:var(--bursztyn)}
.lead{font-size:17px;color:var(--szary);margin:0 0 24px;max-width:560px}
.test{background:#fff;border:1px solid var(--linia);border-radius:12px;padding:6px;display:flex;gap:6px;max-width:560px;box-shadow:0 10px 30px rgba(31,58,95,.08)}
.test:focus-within{border-color:var(--granat2)}
.test input{flex:1;border:0;outline:0;font:inherit;font-size:15px;padding:10px 12px;min-width:0;background:transparent}
.pod{font-size:13px;color:var(--szary);margin-top:10px}
.sieci{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.siec{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--linia);border-radius:8px;padding:6px 11px;font-size:13px;font-weight:700}
.kropka{width:9px;height:9px;border-radius:50%}
@media(max-width:900px){.hero .w{grid-template-columns:1fr}h1{font-size:32px}}

.panel{background:#fff;border:1px solid var(--linia);border-radius:14px;box-shadow:0 20px 50px rgba(31,58,95,.14);overflow:hidden;overflow-x:auto}
.panel .pasek{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--linia);background:#fafbfd}
.panel .pasek i{width:9px;height:9px;border-radius:50%;background:#dfe5ec}
.panel table{width:100%;border-collapse:collapse;font-size:13px}
.panel th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--szary);text-align:left;padding:10px 8px;font-weight:700}
.panel td{padding:10px 8px;border-top:1px solid var(--linia)}

.wynik{margin-top:16px;max-width:560px;background:#fff;border:1px solid var(--linia);border-radius:12px;padding:16px 18px;box-shadow:0 10px 30px rgba(31,58,95,.08)}
.wynik h4{margin:0 0 10px;font-size:15px;color:var(--granat)}
.wynik ul{list-style:none;margin:0;padding:0;font-size:14px}
.wynik li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:7px 0;border-top:1px solid var(--linia)}
.wynik li:first-child{border-top:0}
.wynik li small{display:block;color:var(--szary);font-size:12px}
.wynik .dalej{margin-top:12px;font-size:13px;color:var(--szary)}
.wynik.blad{color:var(--zle-t);background:var(--zle-j);border-color:#f7c7b8;box-shadow:none}

section{padding:72px 0}
section.szare{background:var(--tlo)}
.tyt{text-align:center;max-width:680px;margin:0 auto 40px}
.tyt small{color:var(--bursztyn);font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:12px}
h2{font-size:30px;color:var(--granat);margin:8px 0 10px;line-height:1.2;font-weight:800}
.tyt p{color:var(--szary);margin:0}

.historia{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.krok-h{background:#fff;border:1px solid var(--linia);border-radius:12px;padding:20px}
.krok-h .d{font-size:12px;font-weight:800;color:var(--bursztyn);text-transform:uppercase;letter-spacing:.5px}
.krok-h b{display:block;margin:6px 0 4px;color:var(--granat)}
.krok-h p{margin:0;font-size:14px;color:var(--szary)}
.krok-h.zle{border-color:#f7c7b8;background:#fffaf8}
@media(max-width:900px){.historia{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.historia{grid-template-columns:1fr}}

.siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kafel{background:#fff;border:1px solid var(--linia);border-radius:12px;padding:24px;transition:box-shadow .15s,transform .15s}
.kafel:hover{box-shadow:0 10px 26px rgba(31,58,95,.10);transform:translateY(-2px)}
.ikona{width:44px;height:44px;border-radius:10px;background:var(--info-j);color:var(--granat);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:14px}
.ikona.b{background:var(--bursztyn-j)}
.kafel h3{margin:0 0 6px;font-size:17px;color:var(--granat)}
.kafel p{margin:0;font-size:14px;color:var(--szary)}
.kafel .co{margin-top:10px;font-size:12px;color:var(--szary)}
.wkrotce{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;background:var(--uwaga-j);color:var(--uwaga-t);border-radius:5px;padding:1px 6px;vertical-align:middle}
@media(max-width:900px){.siatka{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.siatka{grid-template-columns:1fr}}

.dwie{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.kroki{counter-reset:k;list-style:none;margin:0;padding:0}
.kroki li{counter-increment:k;position:relative;padding:0 0 22px 56px}
.kroki li::before{content:counter(k);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--granat);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.kroki b{color:var(--granat)}
.kroki p{margin:3px 0 0;color:var(--szary);font-size:14px}
.telefon{max-width:330px;margin:0 auto;background:#111c2b;border-radius:34px;padding:14px;box-shadow:0 24px 50px rgba(17,28,43,.35)}
.ekran{background:#e9edf2;border-radius:24px;padding:18px 12px;min-height:360px}
.chmura{background:#fff;border-radius:14px;padding:12px 14px;font-size:13px;margin-bottom:10px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.chmura .od{font-size:11px;font-weight:800;color:var(--granat2);margin-bottom:4px}
.chmura .cz{font-size:11px;color:#8a97a8;text-align:right;margin-top:4px}
@media(max-width:900px){.dwie{grid-template-columns:1fr}}

.cennik{display:grid;gap:20px;justify-content:center;grid-template-columns:repeat(auto-fit,minmax(250px,340px))}
.pakiet{background:#fff;border:1px solid var(--linia);border-radius:14px;padding:26px;display:flex;flex-direction:column;position:relative}
.pakiet.pol{border:2px solid var(--bursztyn)}
.pakiet.pol::before{content:"Najczęściej wybierany";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--bursztyn);color:#fff;font-size:11px;font-weight:800;border-radius:10px;padding:3px 10px;white-space:nowrap}
.pakiet h3{margin:0;color:var(--granat);font-size:18px}
.pakiet .cena{font-size:34px;font-weight:800;color:var(--granat);margin:10px 0 0}
.pakiet .cena small{font-size:14px;font-weight:600;color:var(--szary)}
.pakiet .stara{font-size:13px;color:var(--szary);min-height:20px}
.pakiet .stara s{color:#a0aab8}
.pakiet ul{list-style:none;padding:0;margin:16px 0 20px;font-size:14px;flex:1}
.pakiet li{padding:5px 0 5px 22px;position:relative}
.pakiet li::before{content:"✓";position:absolute;left:0;color:var(--ok-t);font-weight:800}
.pakiet li.nie{color:#a0aab8}
.pakiet li.nie::before{content:"–";color:#a0aab8}
.netto{text-align:center;color:var(--szary);font-size:13px;margin-top:18px}

.faq{max-width:780px;margin:0 auto}
details.pyt{background:#fff;border:1px solid var(--linia);border-radius:10px;margin-bottom:10px;padding:0 18px}
details.pyt summary{cursor:pointer;font-weight:700;color:var(--granat);padding:15px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.pyt summary::-webkit-details-marker{display:none}
details.pyt summary::after{content:"+";font-size:20px;line-height:1;color:var(--bursztyn)}
details.pyt[open] summary::after{content:"–"}
details.pyt p{margin:0 0 16px;color:var(--szary);font-size:14px}

.cta{background:var(--granat);color:#fff;border-radius:18px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{color:#fff;margin:0 0 6px}
.cta p{margin:0;color:#c6d3e4}

footer.stopka{background:#14263f;color:#aebcd0;font-size:13px;padding:40px 0}
footer.stopka .w{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
footer.stopka b{color:#fff;display:block;margin-bottom:8px}
footer.stopka a{display:block;text-decoration:none;margin:4px 0}
footer.stopka a:hover{color:#fff}
@media(max-width:700px){footer.stopka .w{grid-template-columns:1fr}}
@media(max-width:600px){section{padding:52px 0}h2{font-size:24px}.cta{padding:28px}.historia,.siatka{gap:12px}}

/* formularze i konto */
.srodek{min-height:calc(100vh - 69px);background:linear-gradient(180deg,#eef3f9 0%,#fff 100%);padding:48px 16px}
.karta{background:#fff;border:1px solid var(--linia);border-radius:14px;padding:28px;box-shadow:0 10px 30px rgba(31,58,95,.06)}
.karta.waska{max-width:440px;margin:0 auto}
.karta h1{font-size:26px;margin:0 0 6px}
.karta .lead{font-size:15px;margin-bottom:20px}
.pole{display:block;margin:0 0 14px}
.pole>span{display:block;font-size:13px;font-weight:600;color:var(--szary);margin-bottom:5px}
.pole input,.pole select{width:100%;padding:10px 12px;border:1px solid var(--linia);border-radius:8px;font:inherit;font-size:15px;color:var(--tekst);background:#fff;transition:border-color .15s,box-shadow .15s}
.pole input:focus{outline:none;border-color:var(--granat2);box-shadow:0 0 0 3px rgba(43,76,119,.12)}
.zgoda{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--szary);margin:0 0 10px;cursor:pointer}
.zgoda input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--granat)}
.zgoda a{color:var(--info-t)}
.komunikat{border-radius:8px;padding:10px 12px;font-size:14px;margin:0 0 14px}
.komunikat.zle{background:var(--zle-j);color:var(--zle-t)}
.komunikat.ok{background:var(--ok-j);color:var(--ok-t)}
.komunikat.info{background:var(--info-j);color:var(--info-t)}
.komunikat.uw{background:var(--uwaga-j);color:var(--uwaga-t)}
.komunikat.akceptacja{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.komunikat.akceptacja a{color:inherit}
details.pyt .odpowiedz{color:var(--szary);font-size:14px;padding-bottom:14px}
details.pyt .odpowiedz img{max-width:100%;border-radius:8px}
.pelna{width:100%}
.pod-formularzem{text-align:center;font-size:14px;color:var(--szary);margin-top:16px}

.konto{padding:28px 0 60px;background:var(--tlo);min-height:calc(100vh - 69px)}
.konto-gora{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.konto-gora h1{font-size:26px;margin:0}
.konto-gora p{margin:4px 0 0;color:var(--szary);font-size:14px}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi .karta{padding:16px 18px}
.kpi .k{font-size:12px;color:var(--szary);font-weight:600}
.kpi .v{font-size:24px;font-weight:800;color:var(--granat);margin-top:2px}
@media(max-width:800px){.kpi{grid-template-columns:1fr 1fr}}
.k{font-size:16px;font-weight:700;color:var(--granat);margin:0 0 12px}
.siatka-konta{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
.siatka-konta>*{min-width:0}
@media(max-width:960px){.siatka-konta{grid-template-columns:1fr}}
.dodaj{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dodaj input{flex:1;min-width:160px;padding:9px 12px;border:1px solid var(--linia);border-radius:8px;font:inherit;font-size:14px}
.dodaj input:focus{outline:none;border-color:var(--granat2)}
.przewijana{overflow-x:auto}
table.adresy{width:100%;border-collapse:collapse;font-size:14px}
table.adresy th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--szary);text-align:left;padding:8px 10px;font-weight:700;white-space:nowrap}
table.adresy td{padding:10px;border-top:1px solid var(--linia);vertical-align:top}
table.adresy td small{display:block;color:var(--szary);font-size:12px}
.wiersz-adresu{cursor:pointer}
.wiersz-adresu:hover td:first-child b{color:var(--info-t)}
.szczegoly td{background:#fafbfd}
.zrodla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.zrodlo{border:1px solid var(--linia);border-radius:8px;padding:8px 10px;font-size:13px;background:#fff}
.zrodlo b{display:block;font-size:12.5px}
.zrodlo small{color:var(--szary)}
.zdarzenie{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--linia);font-size:13px}
.zdarzenie:first-child{border-top:0}
.zdarzenie time{color:var(--szary);white-space:nowrap;font-size:12px;min-width:92px}
.mut{color:var(--szary)}
.maly{font-size:13px}
.pusto{text-align:center;color:var(--szary);padding:28px 10px;font-size:14px}
.zakladki{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.zakladki button{border:1px solid var(--linia);background:#fff;border-radius:99px;padding:7px 14px;font:inherit;font-size:13px;font-weight:700;color:var(--szary);cursor:pointer}
.zakladki button.on{border-color:var(--granat);color:var(--granat);box-shadow:0 0 0 2px #d6e2f2}
.usun-x{background:none;border:0;color:#a0aab8;font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.usun-x:hover{color:var(--zle-t)}

/* dokumenty */
.dokument{max-width:820px;margin:0 auto;padding:40px 20px 70px}
.dokument h1{font-size:30px}
.dokument h2{font-size:19px;margin:30px 0 8px}
.dokument p,.dokument li{font-size:15px;color:var(--tekst)}
.dokument .mut{font-size:13px}