/* jakodkladac.pl – design system */
:root{
  --tlo:#F7F6F2;--karta:#FFFFFF;--tlo2:#EEF2F0;
  --atrament:#101828;--tekst2:#475467;--linia:#E4E7EC;
  --marka:#0B5C4B;--marka-ciemna:#084536;--marka-jasna:#D9F0E6;
  --akcent:#C8901A;--akcent-ciemny:#A87712;--akcent-jasny:#FBF1DC;
  --ok:#12805C;--uwaga:#B54708;--uwaga-jasny:#FEF0C7;
  --bank:var(--akcent);--obl:var(--marka);
  --cien:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.08);
  --cien-duzy:0 2px 4px rgba(16,24,40,.06),0 24px 48px rgba(16,24,40,.12);
  --r:16px;--r-duzy:24px;
  --f-tytul:"Fraunces Variable","Fraunces",Georgia,serif;
  --f-tekst:"Manrope Variable","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:16px;--szer:1200px;--sekcja:clamp(3rem,6vw,5rem);
  --t:150ms ease;
}
@media (min-width:768px){:root{--gutter:24px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--tlo);color:var(--atrament);font:400 1rem/1.6 var(--f-tekst);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--marka);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--marka-ciemna)}
:focus-visible{outline:3px solid var(--akcent);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--f-tytul);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;color:var(--atrament)}
h1{font-size:clamp(2rem,4vw,3.25rem);font-variation-settings:"opsz" 144}
h2{font-size:clamp(1.5rem,2.5vw,2rem);font-variation-settings:"opsz" 96}
h3{font-size:1.2rem;font-variation-settings:"opsz" 36;line-height:1.25}
.h-maly{font-size:1.25rem}
p{margin:0 0 1em}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--marka);color:#fff;padding:.5rem 1rem;border-radius:999px;z-index:100}
.skip:focus{left:8px}
.kontener{max-width:var(--szer);margin-inline:auto;padding-inline:var(--gutter)}
.kontener--waski{max-width:820px}
.kontener--art{max-width:760px}
.sekcja{padding-block:var(--sekcja)}
.sekcja--ciasna{padding-block:clamp(2rem,4vw,3rem)}
.sekcja--pierwsza{padding-top:clamp(1.5rem,3vw,2.5rem)}
.sekcja--tlo2{background:var(--tlo2)}
.sekcja__naglowek{max-width:720px;margin-bottom:2rem}
.sekcja__naglowek--rzad{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.sekcja__naglowek--rzad h2{margin:0}
.sekcja__naglowek--foto{max-width:none;display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
.sekcja__miniatura img{border-radius:var(--r);aspect-ratio:16/10;object-fit:cover;width:100%;box-shadow:var(--cien)}
@media (min-width:900px){.sekcja__naglowek--foto{grid-template-columns:1.4fr 1fr;gap:3rem}.sekcja__miniatura img{aspect-ratio:21/10}}
.sekcja__lead{color:var(--tekst2);font-size:1.075rem;margin:0}
.nadtytul{font:700 .75rem/1.2 var(--f-tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--marka);margin:0 0 .75rem}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--tekst2);line-height:1.55}
.meta{color:var(--tekst2);font-size:.875rem}
.przypis{color:var(--tekst2);font-size:.8125rem;margin:1.25rem 0 0;line-height:1.5}
.karta{background:var(--karta);border-radius:var(--r-duzy);box-shadow:var(--cien)}
.link-strzalka{font-weight:700;text-decoration:none;white-space:nowrap}
.link-strzalka::after{content:"";display:inline-block;width:.5em;height:.5em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:.45em;transition:transform var(--t)}
.link-strzalka:hover::after{transform:translateX(3px) rotate(45deg)}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:700 .9375rem/1 var(--f-tekst);padding:.85rem 1.35rem;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background var(--t),color var(--t),transform var(--t),box-shadow var(--t);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--glowny{background:var(--marka);color:#fff}
.btn--glowny:hover{background:var(--marka-ciemna);color:#fff}
.btn--obrys{background:var(--karta);color:var(--atrament);border-color:var(--linia)}
.btn--obrys:hover{border-color:var(--atrament);color:var(--atrament)}
.btn--akcent,.btn--oferta{background:var(--akcent);color:#1d1403}
.btn--akcent:hover,.btn--oferta:hover{background:#D9A232;color:#1d1403;box-shadow:0 6px 16px rgba(200,144,26,.35)}
.btn--oferta{padding:.75rem 1.1rem;font-size:.875rem}
.btn--szary{background:var(--tlo2);color:var(--tekst2)}
.btn--szary:hover{background:var(--linia);color:var(--atrament);box-shadow:none}
.btn--maly{padding:.5rem .9rem;font-size:.8125rem;background:var(--marka-jasna);color:var(--marka)}
.btn--maly:hover{background:var(--marka);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* chipy */
.chip{display:inline-flex;align-items:center;font:600 .75rem/1 var(--f-tekst);padding:.4rem .65rem;border-radius:999px;background:var(--tlo2);color:var(--tekst2);white-space:nowrap}
.chip--ok{background:var(--marka-jasna);color:var(--ok)}
.chip--uwaga{background:var(--uwaga-jasny);color:var(--uwaga)}
.chip--typ-konto{background:var(--akcent-jasny);color:#7a560c}
.chip--typ-lokata{background:#E8EEF9;color:#2B4C8C}
.chip--kat{background:var(--marka-jasna);color:var(--marka);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.6875rem}
.chip--zal{background:var(--akcent-jasny);color:#7a560c;font-size:.6875rem;padding:.25rem .5rem;margin-right:.25rem}
.chip--wkrotce{position:absolute;top:12px;left:12px;background:rgba(16,24,40,.72);color:#fff;backdrop-filter:blur(6px)}

/* nagłówek */
.naglowek{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(228,231,236,.8)}
.naglowek__in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--atrament)}
.logo__znak svg{display:block;border-radius:9px}
.logo__tekst{font:600 1.2rem/1 var(--f-tytul);letter-spacing:-.01em;font-variation-settings:"opsz" 48}
.logo__tekst .logo__q{color:var(--akcent);font-weight:700}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a{padding:.55rem .85rem;border-radius:999px;font-weight:600;font-size:.9375rem;color:var(--tekst2);text-decoration:none;transition:background var(--t),color var(--t)}
.nav a:hover,.nav a[aria-current]{color:var(--atrament);background:var(--tlo2)}
.nav a.nav__cta{background:var(--marka);color:#fff;margin-left:.5rem;padding-inline:1.1rem}
.nav a.nav__cta:hover{background:var(--marka-ciemna);color:#fff}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--linia);background:var(--karta);border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn__kreski,.menu-btn__kreski::before,.menu-btn__kreski::after{display:block;width:18px;height:2px;background:var(--atrament);border-radius:2px;position:relative;transition:transform var(--t)}
.menu-btn__kreski::before,.menu-btn__kreski::after{content:"";position:absolute;left:0}
.menu-btn__kreski::before{top:-6px}.menu-btn__kreski::after{top:6px}
.menu-btn[aria-expanded="true"] .menu-btn__kreski{background:transparent}
.menu-btn[aria-expanded="true"] .menu-btn__kreski::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__kreski::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--karta);padding:.75rem var(--gutter) 1.25rem;box-shadow:var(--cien-duzy);display:none}
  .nav.otwarte{display:flex}
  .nav a{padding:.85rem 1rem;font-size:1rem}
  .nav a.nav__cta{margin:.5rem 0 0;text-align:center}
}

/* hero */
.hero{padding-block:clamp(1.75rem,4vw,3.5rem) var(--sekcja)}
.hero__siatka{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;margin-bottom:clamp(2rem,4vw,3rem)}
@media (min-width:900px){.hero__siatka{grid-template-columns:1.1fr .9fr;gap:4rem}}
.hero h1{max-width:18ch}
.hero--obl h1{max-width:16ch}
.zaufanie{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.zaufanie li{display:inline-flex;align-items:center;gap:.5rem;background:var(--karta);border:1px solid var(--linia);border-radius:999px;padding:.45rem .85rem;font-size:.8125rem;font-weight:600;color:var(--tekst2)}
.zaufanie a{color:inherit}
.kropka{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--marka-jasna)}
.hero__foto{position:relative;margin:0}
.hero__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-duzy);box-shadow:var(--cien-duzy)}
.hero__karta{position:absolute;left:-12px;bottom:-22px;background:var(--karta);border-radius:var(--r);box-shadow:var(--cien-duzy);padding:1rem 1.25rem;display:grid;gap:.15rem;min-width:230px;max-width:80%}
.hero__karta-et{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst2)}
.hero__karta-liczba{font:600 2.5rem/1 var(--f-tytul);color:var(--akcent-ciemny);font-variation-settings:"opsz" 144;margin:.2rem 0}
.hero__karta--obl .hero__karta-liczba{color:var(--marka)}
.hero__karta-bank{font-weight:700;font-size:.9375rem}
.hero__karta-opis{font-size:.8125rem;color:var(--tekst2)}
.hero__karta2{position:absolute;right:16px;top:16px;background:rgba(11,92,75,.92);color:#fff;border-radius:14px;padding:.6rem .9rem;display:grid;font-size:.75rem;backdrop-filter:blur(6px)}
.hero__karta2 strong{font:600 1.35rem/1.1 var(--f-tytul)}
@media (max-width:600px){.hero__karta{left:12px;right:12px;max-width:none;bottom:-28px}.hero__foto{margin-bottom:28px}.hero__karta2{display:none}}

/* ranking */
.ranking{padding:clamp(1rem,2vw,1.5rem)}
.filtry{display:flex;flex-wrap:wrap;gap:.5rem .6rem;align-items:center;padding-bottom:1.1rem;border-bottom:1px solid var(--linia)}
.segment{display:inline-flex;background:var(--tlo2);border-radius:999px;padding:4px}
.segment label{position:relative}
.segment input,.przelacznik input{position:absolute;opacity:0;width:1px;height:1px}
.segment span{display:block;padding:.5rem .95rem;border-radius:999px;font-weight:600;font-size:.875rem;color:var(--tekst2);cursor:pointer;transition:background var(--t),color var(--t)}
.segment input:checked+span{background:var(--karta);color:var(--atrament);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.segment input:focus-visible+span,.przelacznik input:focus-visible+span{outline:3px solid var(--akcent);outline-offset:2px}
.przelacznik span{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border:1px solid var(--linia);border-radius:999px;font-weight:600;font-size:.875rem;color:var(--tekst2);cursor:pointer;background:var(--karta);transition:all var(--t)}
.przelacznik span::before{content:"";width:14px;height:14px;border-radius:4px;border:1.5px solid #98A2B3;transition:all var(--t)}
.przelacznik input:checked+span{border-color:var(--marka);color:var(--marka);background:var(--marka-jasna)}
.przelacznik input:checked+span::before{background:var(--marka) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%23fff' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center/10px no-repeat;border-color:var(--marka)}
.pole-sel{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;color:var(--tekst2)}
select{font:600 .875rem var(--f-tekst);color:var(--atrament);background:var(--karta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23475467' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") right .8rem center/11px no-repeat;border:1px solid var(--linia);border-radius:999px;padding:.55rem 2.2rem .55rem .9rem;appearance:none;-webkit-appearance:none;cursor:pointer}
.filtry__licznik{margin:0 0 0 auto;font-size:.8125rem;color:var(--tekst2);font-weight:600}
.tabela-wrap{overflow-x:auto}
.ranking__tabela{width:100%;border-collapse:collapse;font-size:.9375rem}
.ranking__tabela thead th{text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst2);padding:1rem .75rem .6rem;white-space:nowrap}
.ranking__tabela thead button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.ranking__tabela thead button::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:#98A2B3;margin-top:4px;opacity:.6}
.ranking__tabela thead th[aria-sort="ascending"] button::after{border-top-color:transparent;border-bottom-color:var(--marka);margin-top:-4px;opacity:1}
.ranking__tabela thead th[aria-sort="descending"] button::after{border-top-color:var(--marka);opacity:1}
.ranking__tabela thead th[aria-sort] {color:var(--marka)}
.ranking__tabela thead button:focus-visible{outline:3px solid var(--akcent);outline-offset:3px;border-radius:4px}
.ranking__tabela tbody tr{border-top:1px solid var(--linia);transition:background var(--t)}
.ranking__tabela tbody tr:hover{background:#FAFBF9}
.ranking__tabela tbody th,.ranking__tabela td{padding:1.1rem .75rem;vertical-align:middle;text-align:left;font-weight:400}
.ranking__bank{min-width:210px}
.ranking__bank .bank{display:block;font-weight:800;font-size:1rem}
.ranking__bank .produkt{display:block;color:var(--tekst2);font-size:.875rem;margin-bottom:.25rem}
.ranking__bank .chip--uwaga{margin:.2rem 0}
.odznaka{display:inline-flex;align-items:center;gap:.35rem;background:var(--akcent-jasny);color:#7a560c;font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;margin-bottom:.45rem}
.odznaka::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--akcent)}
.warunki{font-size:.8125rem;margin-top:.2rem}
.warunki summary{cursor:pointer;color:var(--marka);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.warunki summary::-webkit-details-marker{display:none}
.warunki summary::after{content:"+";font-weight:700}
.warunki[open] summary::after{content:"–"}
.warunki p{margin:.4rem 0 0;color:var(--tekst2);max-width:40ch;line-height:1.45}
.stawka{display:block;font:600 1.6rem/1 var(--f-tytul);color:var(--atrament);font-variation-settings:"opsz" 72;letter-spacing:-.02em}
.ranking__w:first-child .stawka{color:var(--akcent-ciemny)}
.stawka__opis,.stawka__po,.stawka__zarobek{display:block;font-size:.75rem;color:var(--tekst2);margin-top:.25rem}
.stawka__po{color:var(--tekst2)}
.stawka__zarobek{font-weight:600;color:var(--marka)}
.ranking__chipy{min-width:150px}
.ranking__chipy .chip{margin:0 .25rem .3rem 0}
.zrodlo{font-size:.8125rem;color:var(--tekst2);line-height:1.4}
.zrodlo a{color:var(--tekst2);font-weight:600}
.zrodlo a:hover{color:var(--marka)}
.ranking__zrodlo{min-width:130px}
.ranking__cta{text-align:right}
.ranking__w--weryf .stawka{color:var(--tekst2)}
.ranking__pusto{padding:2rem 1rem;text-align:center;color:var(--tekst2);background:var(--tlo2);border-radius:var(--r);margin:1rem 0 0}
.ranking__przypis{font-size:.8125rem;color:var(--tekst2);margin:1rem 0 0;line-height:1.5}
.reklama:empty{display:none}
.reklama{margin-top:2rem;min-height:90px}

@media (max-width:768px){
  .filtry{gap:.5rem}
  .filtry__licznik{margin:0;width:100%}
  .ranking{padding:1rem;background:transparent;box-shadow:none}
  .ranking .filtry{background:var(--karta);border-radius:var(--r);padding:1rem;box-shadow:var(--cien);border:0;margin-bottom:1rem}
  .ranking__tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ranking__tabela,.ranking__tabela tbody{display:block}
  .ranking__tabela tbody tr{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;background:var(--karta);border:0;border-radius:var(--r);box-shadow:var(--cien);padding:1.1rem 1.1rem 1.2rem;margin-bottom:1rem}
  .ranking__tabela tbody tr:hover{background:var(--karta)}
  .ranking__tabela tbody th,.ranking__tabela td{padding:0;display:block}
  .ranking__bank{grid-column:1/-1;min-width:0}
  .ranking__stawka{grid-column:1/-1;grid-row:auto;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;row-gap:.15rem;text-align:left;padding-top:.5rem!important;margin-top:.35rem;border-top:1px dashed var(--linia)}
  .ranking__stawka .stawka{display:inline}
  .ranking__stawka .stawka__opis,.ranking__stawka .stawka__po{display:inline;margin:0 0 0 .4rem;font-size:.75rem}
  .ranking__stawka .stawka__po::before{content:"· "}
  .ranking__tabela td[data-etykieta="Okres"],.ranking__tabela td[data-etykieta="Do kwoty"]{font-size:.875rem;font-weight:600}
  .ranking__tabela td[data-etykieta="Okres"]::before,.ranking__tabela td[data-etykieta="Do kwoty"]::before{content:attr(data-etykieta);display:block;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst2)}
  .ranking__tabela td[data-etykieta="Do kwoty"]{text-align:right}
  .ranking__chipy,.ranking__zrodlo,.ranking__cta{grid-column:1/-1}
  .ranking__chipy{padding-top:.4rem!important}
  .ranking__cta{text-align:left;margin-top:.5rem}
  .ranking__cta .btn{width:100%;padding-block:.95rem}
  .ranking .tabela-wrap{overflow:visible}
  .ranking__przypis{padding:0 .25rem}
}

/* pola formularzy */
.pole{display:grid;gap:.35rem;align-content:start}
.pole__et{font-size:.8125rem;font-weight:700;color:var(--atrament)}
.pole__in{display:flex;align-items:center;background:var(--karta);border:1px solid var(--linia);border-radius:12px;transition:border-color var(--t),box-shadow var(--t)}
.pole__in:focus-within{border-color:var(--marka);box-shadow:0 0 0 4px var(--marka-jasna)}
.pole__in input{flex:1;min-width:0;border:0;background:transparent;font:600 1rem var(--f-tekst);color:var(--atrament);padding:.7rem .85rem;outline:none}
.pole__suf{padding-right:.85rem;color:var(--tekst2);font-weight:600;font-size:.875rem}
.pole>select,.pole>input{width:100%;border-radius:12px;padding-block:.75rem;font-size:.9375rem}
.pole>input{font:600 1rem var(--f-tekst);border:1px solid var(--linia);padding:.7rem .85rem;background:var(--karta)}
.pole>input:focus,.pole>select:focus{outline:none;border-color:var(--marka);box-shadow:0 0 0 4px var(--marka-jasna)}
.pole__opis{font-size:.75rem;color:var(--tekst2);line-height:1.4}
.zgoda{display:flex;gap:.6rem;font-size:.8125rem;color:var(--tekst2);line-height:1.45;align-items:flex-start}
.zgoda input{margin-top:.2rem;accent-color:var(--marka);width:16px;height:16px;flex:none}
.form__info{grid-column:1/-1;margin:0;font-size:.8125rem;color:var(--uwaga);background:var(--uwaga-jasny);padding:.7rem 1rem;border-radius:12px}

/* duel */
.duel{padding:clamp(1.25rem,3vw,2rem)}
.duel__pola{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;padding-bottom:1.5rem;border-bottom:1px solid var(--linia)}
.duel__wyniki{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem;align-items:stretch}
@media (min-width:800px){.duel__wyniki{grid-template-columns:1fr auto 1fr}}
.duel__vs{align-self:center;justify-self:center;width:44px;height:44px;border-radius:50%;background:var(--atrament);color:#fff;display:grid;place-items:center;font:600 .95rem var(--f-tytul);font-style:italic}
.duel__karta{border-radius:var(--r);padding:1.25rem 1.35rem;border:1px solid var(--linia);position:relative;overflow:hidden}
.duel__karta::before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
.duel__karta--bank{background:linear-gradient(180deg,var(--akcent-jasny),#fff 70%)}
.duel__karta--bank::before{background:var(--bank)}
.duel__karta--obl{background:linear-gradient(180deg,var(--marka-jasna),#fff 70%)}
.duel__karta--obl::before{background:var(--obl)}
.duel__karta.wygrywa{box-shadow:0 0 0 2px var(--atrament)}
.duel__et{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst2);margin:0 0 .15rem;display:flex;justify-content:space-between;gap:.5rem}
.duel__et .wygr{background:var(--atrament);color:#fff;padding:.2rem .5rem;border-radius:999px;font-size:.625rem}
.duel__nazwa{font-weight:700;margin:0 0 .75rem}
.duel__netto{font:600 2.25rem/1 var(--f-tytul);margin:0 0 .25rem;font-variation-settings:"opsz" 144;letter-spacing:-.02em}
.duel__karta--bank .duel__netto{color:var(--akcent-ciemny)}
.duel__karta--obl .duel__netto{color:var(--marka)}
.duel__netto-et{font-size:.8125rem;color:var(--tekst2);margin:0 0 1rem}
.duel dl,.kalk__staty,.mini__wynik{margin:0;display:grid;gap:.1rem}
.duel dl div,.mini__wynik div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-top:1px dashed var(--linia);font-size:.875rem}
.duel dt,.mini__wynik dt{color:var(--tekst2)}
.duel dd,.mini__wynik dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.duel__uwaga{font-size:.75rem;color:var(--uwaga);margin:.6rem 0 0}
.duel__dol{display:grid;gap:1.25rem;margin-top:1.5rem;align-items:center}
@media (min-width:800px){.duel__dol{grid-template-columns:1fr 1fr}}
.duel__wykres svg{width:100%;height:auto;display:block}
.duel__werdykt{font:600 clamp(1.15rem,2vw,1.45rem)/1.3 var(--f-tytul);margin:0}
.duel__werdykt small{display:block;font:500 .875rem/1.5 var(--f-tekst);color:var(--tekst2);margin-top:.4rem}

/* mini kalkulator */
.sekcja-dwie{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center}
@media (min-width:900px){.sekcja-dwie{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:4rem}.sekcja-dwie--szeroka{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
.sekcja-dwie__tekst p{color:var(--tekst2)}
.mini{padding:1.5rem}
.mini__pola{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem;margin-bottom:1rem}
.mini__pola .pole:first-child{grid-column:1/-1}
.mini__netto{border-top:1px solid var(--atrament)!important;margin-top:.25rem;padding-top:.75rem!important}
.mini__netto dt{color:var(--atrament)!important;font-weight:700}
.mini__netto dd{font:600 1.5rem/1 var(--f-tytul)!important;color:var(--marka)}

/* tabele ogólne */
.karta--tabela{padding:clamp(1rem,2vw,1.5rem)}
.tabela{width:100%;border-collapse:collapse;font-size:.9375rem}
.tabela thead th{text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst2);padding:.75rem .75rem .6rem;white-space:nowrap}
.tabela tbody tr{border-top:1px solid var(--linia);transition:background var(--t)}
.tabela tbody tr:hover{background:#FAFBF9}
.tabela tbody th,.tabela td{padding:.95rem .75rem;text-align:left;vertical-align:top;font-weight:400}
.tabela .liczba{white-space:nowrap;font-variant-numeric:tabular-nums}
.tabela .liczba strong{font:600 1.2rem var(--f-tytul);color:var(--marka)}
.tabela .dalej{color:var(--tekst2);font-size:.875rem;line-height:1.45;min-width:180px}
.tabela .nazwa{font-size:.875rem;min-width:200px;line-height:1.45}
.seria{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:.35rem .6rem;border-radius:10px;background:var(--marka);color:#fff;font:800 .8125rem/1 var(--f-tekst);letter-spacing:.06em}
.tabela__w--rodz .seria{background:var(--akcent)}
.uwaga-mala{display:block;font-size:.75rem;color:var(--tekst2);margin-top:.3rem}
.tabela__akcja{text-align:right;vertical-align:middle!important}
@media (max-width:1100px){
  .tabela--obl thead,.tabela--emisje thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tabela--obl,.tabela--obl tbody,.tabela--emisje,.tabela--emisje tbody{display:block}
  .tabela--obl tr,.tabela--emisje tr{display:grid;grid-template-columns:auto 1fr auto;gap:.3rem .75rem;padding:1rem 0;align-items:center}
  .tabela--obl tbody th,.tabela--obl td,.tabela--emisje tbody th,.tabela--emisje td{padding:0;display:block}
  .tabela--obl .dalej,.tabela--emisje .dalej,.tabela--emisje .nazwa{grid-column:1/-1;min-width:0}
  .tabela--emisje td[data-etykieta="Okres"]{grid-column:2;grid-row:1;font-weight:700}
  .tabela--emisje td[data-etykieta="1. okres"]{grid-column:3;grid-row:1}
  .tabela--emisje td[data-etykieta="Wykup / 100 zł"]::before,.tabela--emisje td[data-etykieta="Odsetki"]::before{content:attr(data-etykieta)": ";font-weight:700;color:var(--atrament)}
  .tabela--emisje td[data-etykieta="Wykup / 100 zł"]{grid-column:1/-1;font-size:.875rem}
  .tabela__akcja{grid-column:1/-1;text-align:left}
  .tabela__akcja .btn{width:100%}
}

/* artykuły – karty */
.siatka-art{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.siatka-art--4{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.karta-art{background:var(--karta);border-radius:var(--r-duzy);box-shadow:var(--cien);overflow:hidden;transition:transform var(--t),box-shadow var(--t);display:flex;flex-direction:column}
.karta-art:hover{transform:translateY(-3px);box-shadow:var(--cien-duzy)}
.karta-art--wkrotce:hover{transform:none;box-shadow:var(--cien)}
.karta-art__link{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.karta-art__foto{position:relative;overflow:hidden}
.karta-art__foto img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 400ms ease}
.karta-art:hover .karta-art__foto img{transform:scale(1.03)}
.karta-art--wkrotce .karta-art__foto img{filter:saturate(.55)}
.karta-art__tresc{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.karta-art__tresc .chip{align-self:flex-start}
.karta-art h3{margin:0;font-size:1.15rem}
.karta-art__link:hover h3{color:var(--marka)}
.karta-art p{margin:0;color:var(--tekst2);font-size:.9rem;line-height:1.5}
.karta-art .meta{margin-top:auto;padding-top:.4rem;font-size:.8125rem}

/* faq */
.faq{display:grid;gap:.75rem}
.faq__el{background:var(--karta);border-radius:var(--r);box-shadow:var(--cien);transition:box-shadow var(--t)}
.faq__el summary{cursor:pointer;list-style:none;padding:1.15rem 3.25rem 1.15rem 1.35rem;font-weight:700;font-size:1.02rem;position:relative}
.faq__el summary::-webkit-details-marker{display:none}
.faq__el summary::after{content:"";position:absolute;right:1.25rem;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--tlo2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%230B5C4B' stroke-width='1.8'/%3E%3C/svg%3E") center/11px no-repeat;transition:transform var(--t)}
.faq__el[open] summary::after{transform:rotate(45deg);background-color:var(--marka-jasna)}
.faq__odp{padding:0 1.35rem 1.2rem;color:var(--tekst2)}
.faq__odp p{margin:0}

/* lead form */
.lead-karta{display:grid;gap:2rem;padding:clamp(1.5rem,4vw,3rem);background:var(--atrament);color:#fff;position:relative;overflow:hidden}
.lead-karta::after{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(200,144,26,.35),transparent 70%)}
@media (min-width:900px){.lead-karta{grid-template-columns:1fr 1.2fr;gap:3rem;align-items:center}}
.lead-karta h2{color:#fff}
.lead-karta p{color:#D0D5DD}
.lead-karta .nadtytul{color:var(--akcent)}
.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;position:relative;z-index:1}
.lead-form .pole--szer{grid-column:1/-1}
.lead-form .pole__et{color:#fff}
.lead-form .zgoda{color:#D0D5DD}
.lead-form .zgoda a{color:#fff}
.lead-form .form__info{background:rgba(254,240,199,.12);color:#FEDF89}
@media (max-width:520px){.lead-form{grid-template-columns:1fr}}

/* obligacje */
.baner{padding:1rem 1.25rem;margin-bottom:1rem;background:var(--akcent-jasny);box-shadow:none}
.kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.kafel{padding:1.35rem 1.5rem;display:flex;flex-direction:column}
.kafel__et{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst2);margin:0}
.kafel__liczba{font:600 2.5rem/1.05 var(--f-tytul);color:var(--marka);margin:.4rem 0;font-variation-settings:"opsz" 144}
.kafel__opis{font-size:.875rem;color:var(--tekst2);margin:0 0 .75rem}
.kafel__zr{margin:auto 0 0;padding-top:.75rem;border-top:1px dashed var(--linia)}
.kalk{padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1.5rem}
@media (min-width:960px){.kalk{grid-template-columns:320px 1fr;gap:2.5rem}.kalk .przypis{grid-column:1/-1}}
.kalk__pola{display:grid;gap:1rem;align-content:start}
.kalk__staty{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}
.kalk__staty div{background:var(--tlo);border-radius:14px;padding:.9rem 1rem}
.kalk__staty dt{font-size:.75rem;font-weight:700;color:var(--tekst2);text-transform:uppercase;letter-spacing:.06em}
.kalk__staty dd{margin:.25rem 0 0;font:600 1.35rem/1.1 var(--f-tytul);font-variant-numeric:tabular-nums}
.kalk__staty .glowna{background:var(--marka);color:#fff}
.kalk__staty .glowna dt{color:var(--marka-jasna)}
.kalk__uwaga{margin:1rem 0 0;font-size:.875rem;color:var(--uwaga);background:var(--uwaga-jasny);padding:.7rem 1rem;border-radius:12px}
.tabela--lata{margin-top:1.25rem;font-size:.875rem}
.tabela--lata td,.tabela--lata th{padding:.6rem .75rem!important;font-variant-numeric:tabular-nums}
.portfel{padding:1.5rem}
.portfel__form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:.75rem;align-items:end;padding-bottom:1.25rem;border-bottom:1px solid var(--linia)}
.portfel__wynik{display:grid;grid-template-columns:140px 1fr;gap:1.25rem;margin-top:1.25rem;align-items:start}
.portfel__suma{margin:0 0 .5rem;font-size:.9375rem}
.portfel__suma strong{font:600 1.35rem var(--f-tytul)}
.portfel__lista{list-style:none;margin:0;padding:0;font-size:.875rem}
.portfel__lista li{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-top:1px dashed var(--linia)}
.portfel__lista .kolor{width:10px;height:10px;border-radius:3px;flex:none}
.portfel__lista .kw{margin-left:auto;font-weight:700}
.portfel__lista button{border:0;background:none;color:var(--tekst2);cursor:pointer;font-size:1.1rem;line-height:1;padding:.2rem .35rem;border-radius:6px}
.portfel__lista button:hover{background:var(--tlo2);color:var(--uwaga)}
.portfel__pusto{color:var(--tekst2);font-size:.875rem}
@media (max-width:480px){.portfel__wynik{grid-template-columns:1fr}.portfel__wykres{max-width:160px}}
.nl{display:grid;gap:2rem;padding:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:900px){.nl{grid-template-columns:1.5fr 1fr;gap:3rem}}
.nl__form{display:grid;gap:.9rem;max-width:520px;margin-top:1rem}
.nl__form .btn{justify-self:start}
.nl__cross{background:var(--akcent-jasny);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column;align-items:flex-start}
.nl__cross .nadtytul{color:#7a560c}
.nl__cross-liczba{font:600 3rem/1 var(--f-tytul);color:var(--akcent-ciemny);margin:0 0 .5rem}
.nl__cross p{color:var(--tekst2)}

/* okruszki, artykuł, strony tekstowe */
.okruszki ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:0 0 1.25rem;font-size:.8125rem;color:var(--tekst2)}
.okruszki li+li::before{content:"/";margin-right:.35rem;color:#98A2B3}
.okruszki a{color:var(--tekst2)}
.art__naglowek{padding-top:clamp(1.5rem,3vw,2.5rem)}
.art__naglowek .chip{margin-bottom:1rem}
.art__foto{margin:2rem auto 2.5rem;max-width:1000px}
.art__foto img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-duzy);box-shadow:var(--cien)}
.prose{font-size:1.0625rem;line-height:1.75}
.prose h2{margin-top:2.25rem}
.prose h3{margin-top:1.75rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin-bottom:.5rem}
.prose .tabela{margin:1.5rem 0;background:var(--karta);border-radius:var(--r);box-shadow:var(--cien);overflow:hidden;font-size:.9375rem;line-height:1.5}
.prose .tabela thead th{background:var(--tlo2)}
.ramka{border-radius:var(--r);padding:1.15rem 1.35rem;margin:1.75rem 0;background:var(--tlo2);font-size:.9375rem;line-height:1.6}
.ramka--uwaga{background:var(--uwaga-jasny);color:#6b2d05}
.ramka--info{background:var(--marka-jasna);color:#0a3b30}
.ramka--zrodla{background:var(--karta);box-shadow:var(--cien)}
.ramka--zrodla ul{margin:.5rem 0 0;padding-left:1.1rem}
.ramka--zrodla li{margin-bottom:.35rem;font-size:.875rem}
.prose a.cta,a.cta{display:inline-flex;background:var(--marka);color:#fff;padding:.8rem 1.3rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.9375rem}
.art__faq{margin-top:2.5rem}
.art__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0}
.o-hero{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.o-hero{grid-template-columns:1.1fr 1fr;gap:3.5rem}}
.o-hero__foto{margin:0}
.o-hero__foto img{border-radius:var(--r-duzy);aspect-ratio:16/10;object-fit:cover;width:100%;box-shadow:var(--cien-duzy)}
.pusto{padding:2rem}
.e404{text-align:center;padding-block:3rem}
.e404__kod{font:600 clamp(5rem,14vw,9rem)/1 var(--f-tytul);color:var(--marka-jasna);margin:0;-webkit-text-stroke:2px var(--marka)}
.e404 .art__cta{justify-content:center}
.zrodlo-blok{margin:0 0 1.25rem}

/* stopka */
.stopka{background:#0B1A16;color:#C7D0CC;padding-block:3.5rem 2rem;margin-top:0}
.stopka a{color:#fff}
.stopka__gora{display:grid;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media (min-width:800px){.stopka__gora{grid-template-columns:1.2fr 1fr}}
.logo--stopka .logo__tekst{color:#fff;font-size:1.4rem}
.stopka__marka p{max-width:44ch;margin-top:1rem;font-size:.9375rem}
.stopka__linki{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;align-content:start}
.stopka__linki a{text-decoration:none;font-weight:600;font-size:.9375rem;color:#E4ECE8}
.stopka__linki a:hover{color:var(--akcent)}
.stopka__prawne{padding-top:1.75rem;font-size:.8125rem;line-height:1.6;display:grid;gap:.25rem}
.stopka__prawne strong{color:#fff}
.stopka__copy{color:#8A9A94;margin-top:.75rem}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Mobile: ranking (źródło przychodu) jak najwyżej */
@media (max-width:600px){
.hero{padding-top:1.5rem}
.hero h1{font-size:clamp(1.75rem,8vw,2.1rem)}
.hero .lead{font-size:1rem}
.zaufanie{gap:.35rem;margin-top:1rem}
.zaufanie li{padding:.3rem .65rem;font-size:.75rem}
.zaufanie li:nth-child(n+3){display:none}
.hero__foto img{aspect-ratio:16/9}
.filtry .przelacznik span{padding:.4rem .7rem;font-size:.8125rem}
.filtry .pole-sel{flex:1 1 100%}.filtry .pole-sel select{flex:1}
.filtry .pole-sel select{width:100%}
.segment{width:100%}.segment label{flex:1;text-align:center}
}

.pole__in,.pole select{min-width:0}
@media (min-width:640px) and (max-width:1100px){.tabela--emisje tbody,.tabela--obl tbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1.25rem}}
.kalk{grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.kalk{grid-template-columns:320px minmax(0,1fr)}}
select{max-width:100%}
.kalk .tabela-wrap,.kalk table{max-width:100%}
@media (max-width:768px){.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}}