@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin-ext-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--asfalt:#1e2a32;--asfalt2:#2c3b45;--zolty:#ffd200;--zielony:#1a8f43;--czerwony:#c8202a;--niebieski:#0b5cad;--tlo:#f4f5f1;--karta:#fff;--tekst:#1b2329;--szary:#5d6a73;--linia:#dfe3e0;--r:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--tekst);font:18px/1.6 "Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--niebieski)}
img,svg{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
.wrap--waski{max-width:780px}
/* nagłówek */
.gora{background:var(--asfalt);color:#fff;border-bottom:6px solid var(--zolty);position:relative}
.gora::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:repeating-linear-gradient(90deg,var(--zolty) 0 34px,var(--asfalt) 34px 52px)}
.gora .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:20px;line-height:1.1}
.logo svg{width:44px;height:44px;flex:none}
.logo small{display:block;font-weight:500;font-size:13px;color:#c6d0d6}
.menu{display:flex;flex-wrap:wrap;gap:4px 14px;margin-left:auto;font-size:16px}
.menu a{color:#fff;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{border-color:var(--zolty)}
/* główna */
main{padding:28px 0 40px}
h1{font-size:clamp(30px,5vw,44px);line-height:1.12;margin:.2em 0 .4em;letter-spacing:-.01em}
h2{font-size:26px;line-height:1.2;margin:1.6em 0 .5em}
h3{font-size:20px;margin:1.2em 0 .3em}
p{margin:.5em 0 .9em}
.okruszki{font-size:14px;color:var(--szary);margin-bottom:6px}
.okruszki a{color:var(--szary)}
.lead{font-size:20px;color:#2d3940}
.karta{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);padding:20px 22px;margin:18px 0}
.siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:16px 0}
.kafel{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--tekst);font-weight:700;line-height:1.25}
.kafel:hover{border-color:var(--asfalt);box-shadow:0 3px 0 var(--zolty)}
.kafel svg{width:46px;height:46px;flex:none}
.kafel small{display:block;font-weight:500;color:var(--szary);font-size:14px}
.btn{display:inline-block;background:var(--zolty);color:var(--asfalt);font-weight:800;text-decoration:none;border:0;border-radius:12px;padding:13px 22px;font-size:19px;cursor:pointer;box-shadow:0 3px 0 #b89700;font-family:inherit}
.btn:hover{filter:brightness(1.05)}
.btn--ciemny{background:var(--asfalt);color:#fff;box-shadow:0 3px 0 #000}
.btn--maly{font-size:16px;padding:9px 16px}
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center}
.hero__znaki{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:330px;margin-left:auto}
.fakty{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.fakt{background:#fff;border:1px solid var(--linia);border-radius:999px;padding:6px 14px;font-weight:700;font-size:16px}
.fakt b{color:var(--zielony)}
.uwaga{border-left:6px solid var(--zolty);background:#fffbe6;padding:14px 18px;border-radius:0 var(--r) var(--r) 0;margin:18px 0}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:var(--r);overflow:hidden;font-size:16px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linia);vertical-align:top}
th{background:var(--asfalt);color:#fff}
.tab-znaki td:first-child{width:86px}
.tab-znaki svg{width:64px;height:auto}
ol.kroki{counter-reset:k;list-style:none;padding:0}
ol.kroki>li{counter-increment:k;position:relative;padding:4px 0 10px 50px}
ol.kroki>li::before{content:counter(k);position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:50%;background:var(--asfalt);color:var(--zolty);font-weight:800;display:grid;place-items:center}
/* quiz */
.pyt{border:1px solid var(--linia);background:#fff;border-radius:var(--r);padding:16px 18px;margin:0 0 14px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px}
.pyt__znak{grid-row:1/4;width:92px}
.pyt__znak svg{width:92px;height:auto}
.pyt--bez .pyt__znak{display:none}
.pyt--bez{grid-template-columns:1fr}
.pyt legend{float:left;width:100%;font-weight:700;font-size:19px;line-height:1.35;padding:0;margin-bottom:8px}
.pyt__nr{color:var(--szary);font-weight:600;margin-right:6px}
.odp{display:block;margin:6px 0;padding:10px 12px 10px 44px;border:2px solid var(--linia);border-radius:10px;cursor:pointer;position:relative;line-height:1.35}
.odp input{position:absolute;left:14px;top:13px;width:18px;height:18px;accent-color:var(--asfalt)}
.odp:hover{border-color:#9aa6ad}
.odp.dobra{border-color:var(--zielony);background:#e9f7ee}
.odp.zla{border-color:var(--czerwony);background:#fdeceb}
.wyj{margin-top:8px;font-size:16px;background:var(--tlo);border-radius:10px;padding:10px 12px}
.wyj__zr{display:block;color:var(--szary);font-size:14px;margin-top:4px}
.wynik{position:sticky;bottom:10px;z-index:5;background:var(--asfalt);color:#fff;border-radius:var(--r);padding:12px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.wynik b{color:var(--zolty)}
.egz-pasek{position:sticky;top:0;z-index:6;background:var(--asfalt);color:#fff;border-radius:0 0 var(--r) var(--r);padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700}
.egz-pasek .czas{font-variant-numeric:tabular-nums;font-size:22px;color:var(--zolty)}
.werdykt{font-size:26px;font-weight:800;padding:18px 20px;border-radius:var(--r);margin:14px 0}
.werdykt--ok{background:#e1f5e8;color:#0f5a2a;border:2px solid var(--zielony)}
.werdykt--nie{background:#fdeceb;color:#8a1219;border:2px solid var(--czerwony)}
.produkt{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;background:#fff;border:2px solid var(--asfalt);border-radius:var(--r);padding:18px;margin:26px 0;box-shadow:0 5px 0 var(--zolty)}
.produkt img{width:150px;height:auto;border-radius:8px;border:1px solid var(--linia)}
.produkt h2{margin:0 0 .3em;font-size:22px}
.produkt .cena{font-weight:800;font-size:20px}
details{background:#fff;border:1px solid var(--linia);border-radius:12px;padding:10px 16px;margin:8px 0}
summary{font-weight:700;cursor:pointer}
.dol{background:var(--asfalt);color:#c6d0d6;font-size:15px;padding:26px 0;margin-top:30px}
.dol a{color:#fff}
.dol p{margin:.3em 0}
.zgoda{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;max-width:560px;margin:0 auto;padding:14px 16px;border-radius:14px;background:#fff;color:#1d2530;box-shadow:0 8px 30px rgba(0,0,0,.18);font-size:15px;line-height:1.45}
.zgoda p{margin:0 0 10px}.zgoda__przyciski{display:flex;gap:8px;flex-wrap:wrap}
.zgoda button{font:inherit;font-weight:700;padding:9px 14px;border-radius:10px;border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.zgoda button[data-zgoda=tak]{background:#1d2530;color:#fff;border-color:#1d2530}
@media (max-width:760px){body{font-size:17px}.hero{grid-template-columns:1fr}.hero__znaki{margin:0;max-width:260px}.menu{margin-left:0;font-size:15px}.pyt{grid-template-columns:1fr}.pyt__znak{grid-row:auto;width:76px}.pyt__znak svg{width:76px}.produkt{grid-template-columns:90px 1fr}.produkt img{width:90px}}
@media print{.gora,.dol,.wynik,.egz-pasek,.produkt,.zgoda,.btn{display:none!important}.pyt{break-inside:avoid}body{background:#fff}}
