@font-face {font-family: 'Familjen Grotesk';font-style: normal;font-weight: 500 700;font-display: swap;src: url(fonts3/familjen-grotesk-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Familjen Grotesk';font-style: normal;font-weight: 500 700;font-display: swap;src: url(fonts3/familjen-grotesk-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Martian Mono';font-style: normal;font-weight: 400 600;font-stretch: 100%;font-display: swap;src: url(fonts3/martian-mono-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Martian Mono';font-style: normal;font-weight: 400 600;font-stretch: 100%;font-display: swap;src: url(fonts3/martian-mono-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Onest';font-style: normal;font-weight: 400 700;font-display: swap;src: url(fonts3/onest-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Onest';font-style: normal;font-weight: 400 700;font-display: swap;src: url(fonts3/onest-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: GM;font-style: normal;font-weight: 400 600;font-stretch: 100%;font-display: swap;src: url(fonts3/martian-mono-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: GM;font-style: normal;font-weight: 400 600;font-stretch: 100%;font-display: swap;src: url(fonts3/martian-mono-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: G;font-style: normal;font-weight: 400 700;font-display: swap;src: url(fonts3/onest-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: G;font-style: normal;font-weight: 400 700;font-display: swap;src: url(fonts3/onest-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ===== Dobieracz v3: własny system - ciemny tusz + limonkowy zakreślacz ===== */
:root{--bg:#0e100e;--pow:#151815;--pow2:#1b1f1b;--linia:#252a24;--linia2:#363c34;--tekst:#f3f6ee;--tekst2:#dde2d6;--szary:#bfc6b7;--szary2:#9aa292;
--ak:#d4ff3a;--ak2:#e4ff86;--ziel:#d4ff3a;--zielony:#d4ff3a;--akcent2:#ff8a5c;--ciemny:#0e100e;--w:1280px;--m:clamp(18px,3.2vw,40px);
--H:"Familjen Grotesk",system-ui,sans-serif;--T:G,"Onest",system-ui,sans-serif;--M:GM,"Martian Mono",ui-monospace,monospace}
body{font:400 16.5px/1.62 var(--T);color:var(--tekst);background:var(--bg)}
::selection{background:var(--ak);color:var(--ciemny)}
h1,h2,h3,summary,.liczby b,.okl3 b,.okl-gen b,.okl-p b,.rank-p .poz{font-family:var(--H);font-weight:700}
h1{font-size:clamp(46px,6.6vw,104px);letter-spacing:-.035em;line-height:.94}
h2{font-size:clamp(28px,2.7vw,42px);letter-spacing:-.025em;line-height:1.02}
h3{font-size:20px;letter-spacing:-.01em}
.mono,.etk{font:500 11px/1.5 var(--M);letter-spacing:.06em;text-transform:uppercase;color:var(--ak)}
/* nagłówek */
.top{background:rgba(14,16,14,.94);border-bottom:1px solid var(--linia)}
.top .w{height:68px}
.nav{gap:30px;font:600 15px var(--T);color:var(--tekst2)}
.nav a{position:relative;padding:6px 0}.nav a.on,.nav a:hover{color:#fff}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--ak)}
.szuk-btn{border-radius:10px;background:var(--pow);border-color:var(--linia2);color:var(--szary);font:500 14px var(--T)}
.szuk-btn kbd{border-radius:6px;font:500 10px var(--M)}
.menu-btn{border-radius:10px}
/* pasek terminala */
.pasek3{border-bottom:1px solid var(--linia);background:#121512;font:500 11.5px/1 var(--M);letter-spacing:.04em;color:var(--szary)}
.pasek3 .w{display:flex;gap:28px;height:38px;align-items:center;white-space:nowrap;overflow:hidden}
.pasek3 b{color:var(--ak);font-weight:600;text-transform:uppercase}
.pasek3 em{font-style:normal;color:#fff;font-weight:600}
.pasek3 span+span::before{content:"■";color:var(--linia2);margin-right:28px;font-size:8px;vertical-align:2px}
/* przyciski */
.btn{height:48px;padding:0 20px;border-radius:10px;background:var(--ak);border:1px solid var(--ak);color:var(--ciemny);font:700 15px var(--T)}
.btn:hover{background:var(--ak2);border-color:var(--ak2)}
.btn.ak{background:var(--ak);color:var(--ciemny)}
.btn.ob{background:transparent;border:1px solid var(--linia2);color:#fff}.btn.ob:hover{border-color:#fff;background:transparent}
.btn.male{height:40px;border-radius:9px}
.tresc a.btn{color:var(--ciemny)}.tresc a.btn.ob{color:#fff}
.partner{font:500 10px var(--M);letter-spacing:.05em;text-transform:uppercase;color:var(--szary2)}
/* hero */
.hero{padding-block:clamp(44px,6vw,96px) clamp(44px,5vw,80px);gap:clamp(32px,5vw,88px)}
.hero h1 em{font-style:normal;color:#fff;background:linear-gradient(var(--ak),var(--ak)) no-repeat 0 88%/0% .22em;animation:zakresl .9s .25s cubic-bezier(.7,0,.2,1) forwards;padding:0 .04em}
@keyframes zakresl{to{background-size:100% .22em}}
.hero .lead{font:500 clamp(19px,1.5vw,23px)/1.45 var(--T);color:#fff;max-width:640px;margin:26px 0 30px}
.duzy-szuk{height:64px;border-radius:14px;border:1.5px solid var(--linia2);background:var(--pow);padding:0 8px 0 20px}
.duzy-szuk:focus-within{border-color:var(--ak);box-shadow:0 0 0 4px rgba(212,255,58,.12)}
.duzy-szuk input{font:500 17px var(--T)}
.duzy-szuk .btn{height:48px}
.probuj{font:500 11px var(--M);letter-spacing:.05em;text-transform:uppercase;color:var(--szary2);gap:8px}
.probuj a{font:500 14px var(--T);letter-spacing:0;text-transform:none;border-radius:9px;background:transparent;border-color:var(--linia2);color:var(--tekst2);padding:7px 12px}
.probuj a:hover{border-color:var(--ak);color:#fff}
.liczby{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;border:1px solid var(--linia);border-radius:14px;overflow:hidden;max-width:720px}
.liczby>div{padding:16px 18px;border-left:1px solid var(--linia)}.liczby>div:first-child{border-left:0}
.liczby b{font-size:clamp(30px,2.6vw,42px);letter-spacing:-.03em;line-height:1;color:#fff}
.liczby>div:first-child b{color:var(--ak)}
.liczby span{display:block;margin-top:8px;font:500 10.5px var(--M);letter-spacing:.06em;text-transform:uppercase;color:var(--szary)}
/* boksy */
.box{border-radius:18px;background:var(--pow);border:1px solid var(--linia);overflow:hidden}
.box>h3{font:600 11px var(--M);letter-spacing:.07em;text-transform:uppercase;color:var(--ak);padding:16px 20px}
.box>h3 span{font:500 11px var(--M);color:var(--szary2)}
.box li{border-color:var(--linia)}
.box li a{font:500 15px var(--T);color:var(--tekst2)}.box li a:hover{background:var(--pow2);color:#fff}
.box li a span{font:500 11px var(--M);color:var(--szary2)}
.wiersz{border-color:var(--linia)}.wiersz b{font:700 17px var(--H)}.wiersz small{color:var(--szary)}
.logo-n{border-radius:12px}.logo-n.duze{border-radius:20px}.logo-n.lit{background:var(--pow2);font-family:var(--H)}
.wiersz .logo-n,.szuk .wyn .logo-n,.t-nazwa .logo-n{border-radius:10px}
/* sekcje */
.sek-g{margin-bottom:10px;align-items:baseline}
.sek-g>a{font:600 12px var(--M);letter-spacing:.05em;text-transform:uppercase;color:var(--ak)}
.opis-sek{color:var(--szary);font-size:16px}
.sek{padding-block:72px}
/* lista rankingowa */
.lista-n .r,.lista .r{border-top:1px solid var(--linia);padding:20px 0 20px 18px;position:relative;transition:background .15s}
.lista-n .r::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:3px;background:var(--kb,var(--ak))}
.lista-n .r:hover{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent)}
.lista-n .r .n,.lista .r .n{font:600 13px var(--M);color:var(--ak)}
.lista-n .r h3{font-size:22px}.lista-n .r:hover h3{color:var(--ak2)}
.lista-n .r p{color:var(--tekst2);font-size:15.5px}
.lista-n .r .c{font:500 11.5px/1.6 var(--M);color:var(--tekst2);letter-spacing:.02em}.lista-n .r .c i{color:var(--ak)}
.lista-n .r .logo-n{border-radius:14px}
.widok{border-radius:10px}.widok button{font:500 13px var(--T)}.widok button.on{background:var(--ak);color:var(--ciemny)}
body.widok-kafle .lista-n .r{border-radius:18px;padding:20px 20px 20px 24px}
body.widok-kafle .lista-n .r::before{top:20px;bottom:20px;left:0}
/* karty */
.karta{border-radius:18px;background:var(--pow);border:1px solid var(--linia);padding:22px;position:relative;overflow:hidden}
.karta:hover{border-color:var(--linia2);background:var(--pow2)}
.karta h3{font-size:21px}
.karta p{color:var(--tekst2)}
.karta .d{font:500 11px var(--M);text-transform:uppercase;letter-spacing:.04em;color:var(--szary)}
.karta .d .pl{color:var(--ak)}
.siatka>.karta:first-child:not(:has(.okl)){background:var(--ak);border-color:var(--ak);color:var(--ciemny)}
.siatka>.karta:first-child:not(:has(.okl)) p{color:#2a3313}
.tag{font:500 10.5px/1 var(--M);text-transform:uppercase;letter-spacing:.04em;border-radius:7px;padding:7px 9px}
.tag.free{color:var(--ak);border-color:#4a5a1c}.tag.pl{color:#fff;border-color:var(--linia2)}
.zadania a{font:600 16px var(--T)}.zadania a:hover{color:var(--ak)}
.linki-rzad a{border-radius:9px;font:500 14px var(--T);color:var(--tekst2)}.linki-rzad a:hover{border-color:var(--ak);color:#fff}
/* okładka narzędzia w kolorze marki */
.okl3{--d:color-mix(in srgb,var(--kb) 52%,#0b0d0b);aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,40px);border-radius:22px;
 background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--kb) 70%,#0b0d0b) 0%,transparent 60%),var(--d);border:1px solid color-mix(in srgb,var(--kb) 40%,#2a2e29);position:relative;overflow:hidden;color:#fff}
.okl3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--kb)}
.okl3-g{display:flex;justify-content:space-between;align-items:flex-start}
.okl3-lg img,.okl3-lg .lit{width:clamp(64px,7vw,104px);height:clamp(64px,7vw,104px);border-radius:22px;background:#fff;padding:12%;object-fit:contain;display:grid;place-items:center;font:700 40px var(--H);color:#111}
.okl3-nr{font:600 11px var(--M);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.3);border-radius:7px;padding:7px 9px}
.okl3 b{font-size:clamp(40px,5.2vw,84px);letter-spacing:-.04em;line-height:.92;margin-top:auto;padding-top:24px;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.okl3-m{display:block;margin-top:14px;font:500 11.5px var(--M);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.zrzut3{margin:28px 0 8px}.zrzut3 .ramka{border-radius:14px;border:1px solid var(--linia2)}
.zrzut3 figcaption{font:500 10.5px var(--M);letter-spacing:.05em;text-transform:uppercase;color:var(--szary2);margin-top:10px}
/* strona narzędzia */
.okr{font:500 11px var(--M);letter-spacing:.05em;text-transform:uppercase;color:var(--szary2);padding-top:24px}
.okr a{color:var(--tekst2)}.okr a:hover{color:var(--ak)}
.n-head{grid-template-columns:minmax(0,1fr) minmax(0,640px);padding-block:20px 56px;align-items:center}
.n-head h1{font-size:clamp(48px,5.6vw,92px);margin:18px 0 18px}
.n-head .logo-n.duze{display:none}
.n-head .lead{font:500 clamp(19px,1.45vw,22px)/1.45 var(--T);color:#fff}
.meta{border-radius:14px;overflow:hidden;background:transparent}
.meta .etk{font-size:10px}.meta b{font:700 17px var(--T)}.meta a{color:var(--ak)}
.art-h h1{font-size:clamp(40px,5vw,80px)}
.art-h .lead{font:500 clamp(18px,1.4vw,22px)/1.5 var(--T);color:#fff}
.tresc{font-size:17.5px;line-height:1.72;color:#e8ece2}
.tresc h2{font-size:clamp(28px,2.4vw,38px);margin:60px 0 18px}
.tresc h3{font-size:22px}
.tresc ul{list-style:square}.tresc ul li::marker{color:var(--ak)}
.tresc ol li::marker{font:600 14px var(--M);color:var(--ak)}
.tresc a{color:var(--ak2);text-decoration-color:rgba(212,255,58,.35)}
.tresc blockquote{border-left-color:var(--ak);border-radius:0 12px 12px 0}
.pm>div{border-radius:16px}
.uwaga{border-left-color:var(--ak)}
.boczny .box .wew{padding:20px}
table{font-size:15px}th{font:600 10.5px var(--M);letter-spacing:.06em;text-transform:uppercase;color:var(--ak)}
td{border-color:var(--linia)}
summary{font-size:19px}summary::after{font-family:var(--M);color:var(--ak)}
details p{color:var(--tekst2)}
/* ranking */
.rank-p{grid-template-columns:76px 72px minmax(0,1fr) auto;padding:28px 0}
.rank-p{position:relative;padding-left:18px}.rank-p::before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:3px;border-radius:3px;background:var(--kb,var(--ak))}
.rank-p .poz{font-size:52px;line-height:.9;color:var(--ak);letter-spacing:-.04em}
.rank-p .logo-n{border-radius:16px}
.rank-p h3{font-size:26px}.rank-p p{color:var(--tekst2)}
.vs-g .vs{font:700 34px var(--H);color:var(--ak)}
.wer{border-radius:16px;border-color:var(--ak);background:rgba(212,255,58,.06)}
.filtry button{border-radius:9px;font:500 14px var(--T)}.filtry button.on{background:var(--ak);border-color:var(--ak);color:var(--ciemny)}
.n-karta-w{border-radius:14px}
.wykres .bar{background:var(--ak);border-radius:3px}
.okl-gen,.okl-p{border-radius:18px}
.okl-p{background:var(--pow2)}.okl-p span{font:600 10.5px var(--M);letter-spacing:.06em;text-transform:uppercase;color:var(--ak)}
.okl-p b{font-family:var(--H)}
/* wyszukiwarka i stopka */
.szuk .pud{border-radius:18px}.szuk input{font:500 19px var(--T)}
.szuk .wyn h5{font:600 10.5px var(--M);letter-spacing:.06em;text-transform:uppercase;color:var(--ak)}
.szuk .wyn a{border-radius:10px}.szuk .ik{border-radius:10px;background:#232a17;color:var(--ak)}
.szuk .chips a{border-radius:9px}
.stopka{background:#0b0d0b}
.stopka h4{font:600 10.5px var(--M);letter-spacing:.07em;text-transform:uppercase;color:var(--ak)}
.stopka a{color:var(--tekst2)}.stopka a:hover{color:var(--ak)}
.news-b input,.news-pas input,.pole-kal{border-radius:12px}
.quiz fieldset{border-radius:16px}.quiz label{border-radius:10px}.quiz label:has(input:checked){border-color:var(--ak);background:rgba(212,255,58,.08)}
.quiz input{accent-color:var(--ak)}
/* wjazd treści */
main>*{animation:wjedz .5s ease-out both}
@keyframes wjedz{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){main>*,.hero h1 em{animation:none}.hero h1 em{background-size:100% .22em}}
/* responsywność */
@media(max-width:1100px){.n-head{grid-template-columns:1fr}.n-head>div:last-child{order:-1}.pasek3 span:nth-child(n+5){display:none}}
@media(max-width:640px){
 h1{font-size:clamp(42px,12.5vw,60px)}
 .pasek3 .w{gap:16px;height:34px}.pasek3 span:nth-child(n+3){display:none}.pasek3 span+span::before{margin-right:16px}
 .liczby{grid-template-columns:1fr 1fr}.liczby>div:nth-child(3){border-left:0}.liczby>div:nth-child(n+3){border-top:1px solid var(--linia)}
 .lista-n .r{padding-left:14px}
 .okl3{aspect-ratio:16/11;border-radius:18px}
 .rank-p{grid-template-columns:52px minmax(0,1fr)}
 .n-head h1{font-size:clamp(40px,11vw,56px)}
}
/* okładki TOP 6 na głównej */
.okl3-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:6px 0 28px}
.okl3-a{display:flex;flex-direction:column;gap:12px}
.okl3-a .okl3{aspect-ratio:4/3;padding:20px;border-radius:18px;transition:transform .2s}
.okl3-a:hover .okl3{transform:translateY(-3px)}
.okl3-a .okl3-lg img,.okl3-a .okl3-lg .lit{width:56px;height:56px;border-radius:14px}
.okl3-a .okl3 b{font-size:clamp(28px,2.4vw,38px)}
.okl3-a .okl3-m{font-size:10px;margin-top:10px}
.okl3-a .okl3-nr{font-size:9.5px;padding:5px 7px}
.okl3-p{font-size:14.5px;line-height:1.45;color:var(--tekst2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1100px){.okl3-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.okl3-siatka{grid-template-columns:1fr 1fr;gap:12px}.okl3-a .okl3{padding:14px}.okl3-a .okl3-lg img{width:42px;height:42px}.okl3-a .okl3 b{font-size:22px}.okl3-a .okl3-m,.okl3-a .okl3-nr{display:none}}
.okl3-a .okl3-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main input[type=search],main input[type=text],main input[type=number],main input[type=email],main select{background:var(--pow);color:#fff;border:1.5px solid var(--linia2);border-radius:12px;height:54px;padding:0 16px;font:500 16px var(--T);outline:none}
main input[type=search]:focus,main input[type=text]:focus,main input[type=number]:focus,main select:focus{border-color:var(--ak)}
main input::placeholder{color:var(--szary2)}
.duzy-szuk input[type=search],.pole-kal input{border:0;height:auto;background:none;padding:0}
@media(max-width:1100px){.n-head .okl3 b{display:none}.n-head .okl3{aspect-ratio:16/7}}

/* ===== szlif 29.10.2026 (wyłączenie: usunąć ten blok albo cp v3.css.bak-2910) ===== */
@media(max-width:1100px){.top .w{grid-template-columns:auto 1fr}}
.logo{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:640px){
 .probuj{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--m));padding:2px var(--m) 4px;max-width:none}
 .probuj::-webkit-scrollbar{display:none}
 .probuj>span{flex:none}
 .probuj a{flex:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
 .karta .okl-p{aspect-ratio:auto;padding:0;background:none;border:0;border-radius:0}
 .karta .okl-p b,.karta .okl-p img{display:none}
 .okr a{display:inline-block;padding-block:8px}
 .sek{padding-block:48px}
}