/* ASPOL Konsulting, wersja 5 „Praktyk od ręki".
   Strona jak podręczne narzędzie: najpierw narzędzia (Co otwierasz?, skrzynka z zakładkami), potem mozaika treści.
   Jeden arkusz dla trzech stron. Kolory i kontrast policzone rachunkiem WCAG. */

:root {
  --bialy: #FFFFFF;
  --tlo: #F6F8FC;
  --granat: #12305A;          /* tekst: 13,2:1 na bieli, 12,4:1 na tle */
  --niebieski: #0B6BFF;       /* przyciski z białym tekstem: 4,6:1; nigdy tekst na tle #F6F8FC */
  --link: #0A58D0;            /* tekst odnośników: 6,3:1 na bieli, 6,0:1 na tle */
  --zolty: #FFC53D;           /* zakreślacz i wypełnienia; nigdy kolor tekstu na bieli */
  --zolty-jasny: #FFE8A8;
  --niebieski-jasny: #E4EDFF;
  --szary: #4A5D7A;           /* tekst pomocniczy: 6,7:1 na bieli, 5,7:1 na jasnym niebieskim */
  --linia: #D5DEEC;
  --ramka: #7F8FA8;           /* ramki pól: 3,3:1 na bieli */
  --cien: 0 1px 0 rgba(18, 48, 90, .06), 0 18px 40px -24px rgba(18, 48, 90, .45);
  --cien-maly: 0 1px 0 rgba(18, 48, 90, .08), 0 8px 20px -14px rgba(18, 48, 90, .5);
  --r-duzy: 30px;
  --r-karta: 20px;
  --r-pole: 12px;
  --szer: 1320px;
  --margines: clamp(16px, 4vw, 40px);
  --naglowek-h: 88px;
  --font-tytul: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-tekst: "Figtree", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (max-width: 959px) { html { scroll-padding-top: 132px; } }
body {
  margin: 0; background: var(--tlo); color: var(--granat);
  font-family: var(--font-tekst); font-size: 1.0625rem; line-height: 1.6;
  font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--granat); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
h1, h2, h3, h4 { font-family: var(--font-tytul); color: var(--granat); margin: 0 0 .5em; line-height: 1.08; font-weight: 700; font-variation-settings: "wdth" 92; letter-spacing: -.008em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 750; }
h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); }
h4 { font-size: 1.15rem; line-height: 1.25; letter-spacing: 0; }
strong { font-weight: 700; }
small, .maly { font-size: .875rem; line-height: 1.5; color: var(--szary); }
.podstawa { font-size: .8125rem; line-height: 1.5; color: var(--szary); margin: .6em 0 0; }

:focus-visible { outline: 3px solid var(--niebieski); outline-offset: 3px; border-radius: 6px; }
.na-ciemnym :focus-visible, .skrzynka :focus-visible, .stopka :focus-visible { outline-color: var(--zolty); }
.skrzynka .panel :focus-visible { outline-color: var(--niebieski); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.przejdz { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--granat); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; }
.przejdz:focus { top: 12px; color: #fff; }

.kontener { width: 100%; max-width: var(--szer); margin: 0 auto; padding: 0 var(--margines); }
.sekcja { padding: clamp(64px, 8vw, 120px) 0; }
.sekcja--biala { background: var(--bialy); }
.sekcja--jasna { background: var(--niebieski-jasny); }
.naglowek-sekcji { max-width: 52rem; margin-bottom: clamp(28px, 4vw, 48px); }
.naglowek-sekcji p { font-size: 1.1875rem; color: var(--szary); max-width: 44rem; }

/* Zakreślacz: żółty pas pod tekstem (ceny, liczby wyniku). Na tekst nakłada się tło, kolor tekstu zostaje granatowy. */
.zakreslacz { background: linear-gradient(180deg, transparent 52%, var(--zolty) 52%, var(--zolty) 90%, transparent 90%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kwota { font-family: var(--font-tytul); font-weight: 750; font-variation-settings: "wdth" 88; white-space: nowrap; }

/* ---------- Przyciski ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 12px 24px; border-radius: 14px; border: 2px solid transparent; font: 700 1.0625rem/1.2 var(--font-tekst); text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--glowny { background: var(--niebieski); color: #fff; box-shadow: 0 10px 22px -12px rgba(11, 107, 255, .9); }
.btn--glowny:hover { background: #0857D6; color: #fff; transform: translateY(-1px); }
.btn--duzy { min-height: 60px; padding: 14px 30px; font-size: 1.1875rem; border-radius: 16px; }
.btn--obrys { background: var(--bialy); color: var(--granat); border-color: var(--granat); }
.btn--obrys:hover { background: var(--zolty-jasny); color: var(--granat); }
.btn--zolty { background: var(--zolty); color: var(--granat); }
.btn--zolty:hover { background: #FFD266; color: var(--granat); }
.btn--tekst { background: none; border: 0; padding: 8px 2px; min-height: 44px; color: var(--link); text-decoration: underline; text-underline-offset: .2em; font-weight: 600; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.tel { font-family: var(--font-tytul); font-weight: 700; font-size: 1.25rem; color: var(--granat); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .4em; min-height: 44px; }
.tel:hover { text-decoration: underline; color: var(--granat); }
.strzalka { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; min-height: 44px; }
.strzalka svg { width: 18px; height: 18px; transition: transform .15s ease; }
.strzalka:hover svg { transform: translateX(3px); }

/* ---------- Nagłówek jako pasek narzędzi ---------- */
.naglowek { position: sticky; top: 0; z-index: 100; padding: 12px var(--margines) 0; pointer-events: none; }
.naglowek__pasek { pointer-events: auto; max-width: calc(var(--szer) - 2 * 40px + 32px); margin: 0 auto; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 8px 8px 14px; background: rgba(255, 255, 255, .96); border: 1px solid var(--linia); border-radius: 22px; box-shadow: var(--cien-maly); backdrop-filter: saturate(1.4) blur(8px); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--granat); margin-right: auto; min-height: 44px; }
.logo img { width: 40px; height: 40px; }
.logo__nazwa { font-family: var(--font-tytul); font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; line-height: 1; font-variation-settings: "wdth" 85; }
.logo__nazwa span { display: block; font-family: var(--font-tekst); font-weight: 600; font-size: .75rem; letter-spacing: .02em; color: var(--szary); margin-top: 3px; }
.menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu__el { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 0; background: none; font: 600 1rem/1 var(--font-tekst); color: var(--granat); text-decoration: none; cursor: pointer; }
.menu__el:hover, .menu__el[aria-expanded="true"] { background: var(--niebieski-jasny); color: var(--granat); }
.menu__el svg { width: 14px; height: 14px; transition: transform .15s ease; }
.menu__el[aria-expanded="true"] svg { transform: rotate(180deg); }
.naglowek__tel { font-size: 1.0625rem; padding: 0 10px; }
.naglowek .btn { min-height: 48px; padding: 10px 18px; font-size: 1rem; }
.naglowek__menu-btn { display: none; }

/* Panel „Usługi": siatka o elastycznej liczbie kolumn filarów (auto-fit), osobna wąska kolumna sytuacji. */
.panel-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--r-karta); box-shadow: var(--cien); padding: 24px; z-index: 110; }
.panel-menu[hidden] { display: none; }
.panel-uslugi { max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; width: min(1180px, calc(100vw - 48px)); left: auto; right: auto; transform: none; position: fixed; top: 96px; left: 50%; translate: -50% 0; }
.panel-uslugi__siatka { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; }
.panel-uslugi__filary { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 18px; }
.panel-uslugi .panel-menu__tytul { font-family: var(--font-tytul); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; margin: 0 0 4px; }
.panel-uslugi .panel-menu__tytul a { color: var(--granat); text-decoration: none; }
.panel-uslugi .panel-menu__tytul a:hover { text-decoration: underline; }
.panel-uslugi .zasieg { margin: 0 0 10px; }
.panel-uslugi ul { list-style: none; padding: 0; margin: 0; }
.panel-uslugi li a { display: block; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; color: var(--granat); text-decoration: none; font-size: .9375rem; line-height: 1.35; min-height: 44px; }
.panel-uslugi li a:hover { background: var(--tlo); }
.panel-uslugi li a .cena-m { display: block; font-size: .8125rem; color: var(--szary); font-weight: 600; margin-top: 2px; }
.panel-uslugi__sytuacje { background: var(--zolty-jasny); border-radius: 16px; padding: 16px; }
.panel-uslugi__sytuacje li a { font-weight: 600; }
.panel-uslugi__dol { grid-column: 1 / -1; border-top: 1px solid var(--linia); padding-top: 14px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 600; }
.panel-dla-kogo { width: 340px; left: 0; transform: none; }
.panel-dla-kogo ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.panel-dla-kogo a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--granat); text-decoration: none; font-weight: 600; }
.panel-dla-kogo a:hover { background: var(--tlo); }
.panel-dla-kogo .panel-menu__wszystkie { margin-top: 8px; border-top: 1px solid var(--linia); padding-top: 8px; }
/* Bez JS panele otwierają się najechaniem i fokusem (wygrywa z globalnym [hidden]) */
.no-js .menu > li:hover > .panel-menu[hidden], .no-js .menu > li:focus-within > .panel-menu[hidden] { display: block !important; }

/* Zasięg jako znaczek z ikoną */
.zasieg { display: inline-flex; align-items: flex-start; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--szary); line-height: 1.35; }
.zasieg svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* Pigułki filarów (telefon) */
.pigulki { display: none; }

/* ---------- Pierwszy ekran: narzędzie „Co otwierasz?" ---------- */
.start { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.start__siatka { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.start__nadtytul { font-weight: 700; font-size: .9375rem; color: var(--szary); margin: 0 0 12px; }
.start h1 { font-size: clamp(3.2rem, 1.6rem + 5.4vw, 6.4rem); font-weight: 780; font-variation-settings: "wdth" 88, "opsz" 96; letter-spacing: -.01em; line-height: .96; margin: 0 0 20px; position: relative; display: inline-block; }
/* Pociągnięcie zakreślaczem pod całym nagłówkiem (jeden ruch przy wejściu, wyłączony przy reduced motion) */
.start h1 .pociagniecie { position: absolute; left: -2%; right: -3%; bottom: .02em; height: .3em; z-index: -1; background: var(--zolty); border-radius: 4px 18px 6px 22px; rotate: -1.2deg; transform-origin: left center; animation: pociagniecie .7s .15s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pociagniecie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.start h1 span.t { position: relative; }
.start__podtytul { font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.5; max-width: 38rem; margin-bottom: 24px; }
.co__opis { font-weight: 600; margin-bottom: 14px; }
.zetony { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.zeton { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 108px; padding: 14px 14px 12px; background: var(--bialy); border: 2px solid var(--linia); border-radius: 18px; font: 700 1rem/1.2 var(--font-tekst); color: var(--granat); text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease, background-color .15s ease; }
.zeton svg { width: 30px; height: 30px; color: var(--niebieski); }
.zeton:hover { border-color: var(--granat); transform: translateY(-2px); }
.zeton[aria-pressed="true"] { background: var(--granat); border-color: var(--granat); color: #fff; }
.zeton[aria-pressed="true"] svg { color: var(--zolty); }
.co__uwaga { font-size: .9375rem; color: var(--szary); margin: 0; }

.skroty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.skroty__etykieta { font-weight: 700; margin-right: 4px; }
.skroty a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 99px; background: var(--bialy); border: 2px solid var(--granat); color: var(--granat); text-decoration: none; font-weight: 700; font-size: .9375rem; }
.skroty a svg { width: 20px; height: 20px; color: var(--niebieski); }
.skroty a:hover { background: var(--zolty); color: var(--granat); }
/* Wspólny wzór panelu wyniku: ten sam dla czterech narzędzi („kartka z wynikiem" z żółtym grzbietem) */
.wynik { background: var(--bialy); border-radius: var(--r-karta); box-shadow: var(--cien); padding: 22px 24px 22px 28px; position: relative; overflow: hidden; }
.wynik::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--zolty); }
.wynik__etykieta { font-weight: 700; font-size: .9375rem; color: var(--szary); margin: 0 0 6px; }
.wynik__glowny { font-family: var(--font-tytul); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.1; font-variation-settings: "wdth" 85; margin: 0 0 8px; letter-spacing: -.02em; }
.wynik__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.wynik dl { margin: 0; display: grid; gap: 14px; }
.wynik dt { font-weight: 700; font-size: .875rem; color: var(--szary); margin-bottom: 2px; }
.wynik dd { margin: 0; }
.co__wynik { margin-top: 14px; }
.co__wynik[hidden] { display: none; }
.js .co-typ[hidden] { display: none; }
.co-typ h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 14px; }
.co-typ__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.co-typ__siatka .pelny { grid-column: 1 / -1; }
.co-typ__linki { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .9375rem; }
.no-js .co-typ { margin-bottom: 14px; }

/* Portret na plamie */
.osoba { position: relative; padding-top: 8px; }
.osoba__plama { position: relative; width: min(100%, 440px); margin: 0 auto; aspect-ratio: 440 / 430; }
.osoba__plama > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.osoba__plama img { position: absolute; left: 6%; right: 6%; bottom: 0; width: 88%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.osoba__karta { position: relative; z-index: 2; margin: -64px 0 0 clamp(0px, 3vw, 28px); background: var(--bialy); border-radius: var(--r-karta); box-shadow: var(--cien); padding: 20px 22px; max-width: 420px; }
.osoba__imie { font-family: var(--font-tytul); font-size: 1.625rem; font-weight: 800; margin: 0 0 2px; font-variation-settings: "wdth" 88; line-height: 1.1; }
.osoba__rola { font-size: .9375rem; color: var(--szary); margin: 0 0 12px; }
.osoba__zdanie { font-size: 1.125rem; font-weight: 600; line-height: 1.45; margin: 0 0 12px; }
.osoba__dosw { font-size: .9375rem; margin: 0 0 6px; }
.osoba__zasieg { font-size: .9375rem; color: var(--szary); margin: 0 0 16px; }
.osoba__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.osoba__cta .btn { flex: 1 1 auto; }
.osoba__test { display: inline-block; margin-top: 10px; font-weight: 600; }

/* ---------- Pasek wiarygodności ---------- */
.wiarygodnosc { padding: 0 0 clamp(48px, 6vw, 80px); }
.wiarygodnosc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.1fr 1fr 1.2fr .9fr; background: var(--bialy); border: 2px dashed var(--ramka); border-radius: var(--r-karta); }
.wiarygodnosc li { padding: 18px 22px; border-left: 2px dashed var(--linia); }
.wiarygodnosc li:first-child { border-left: 0; }
.wiarygodnosc b { display: block; font-family: var(--font-tytul); font-size: 1.375rem; line-height: 1.15; font-weight: 800; font-variation-settings: "wdth" 88; }
.wiarygodnosc span { display: block; font-size: .9375rem; color: var(--szary); line-height: 1.4; margin-top: 4px; }
.wiarygodnosc a { color: inherit; text-decoration: none; display: block; border-radius: 12px; }
.wiarygodnosc a span { color: var(--link); text-decoration: underline; }

/* ---------- Skrzynka narzędzi (zakładki) ---------- */
.skrzynka { background: var(--granat); color: #fff; border-radius: clamp(24px, 3vw, 40px); padding: clamp(20px, 3vw, 40px); }
.skrzynka__naglowek { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 32px; margin: 4px 4px 22px; }
.skrzynka__naglowek h2 { color: #fff; margin: 0; }
.skrzynka__naglowek p { margin: 0; color: #DCE6F8; max-width: 34rem; }
.zakladki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.no-js .zakladki { display: none; }
.zakladka { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 18px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; text-align: left; font: 700 1.125rem/1.2 var(--font-tytul); font-variation-settings: "wdth" 90; cursor: pointer; text-decoration: none; }
.zakladka svg { width: 34px; height: 34px; flex: none; color: var(--zolty); }
.zakladka small { display: block; font: 500 .875rem/1.3 var(--font-tekst); color: #DCE6F8; margin-top: 3px; }
.zakladka:hover { border-color: #fff; color: #fff; }
.zakladka[aria-selected="true"] { background: var(--zolty); border-color: var(--zolty); color: var(--granat); }
.zakladka[aria-selected="true"] svg { color: var(--granat); }
.zakladka[aria-selected="true"] small { color: var(--granat); }
.panel { background: var(--tlo); color: var(--granat); border-radius: clamp(18px, 2.4vw, 28px); padding: clamp(18px, 3vw, 40px); }
.panel + .panel { margin-top: 14px; }
.js .panel[hidden] { display: none; }
.panel__siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(20px, 3vw, 40px); align-items: start; }
.panel__wynik { position: sticky; top: calc(var(--naglowek-h) + 20px); }
.panel h2, .panel h3.tytul-narzedzia { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem); margin-bottom: 8px; }
.panel__opis { font-size: 1.0625rem; color: var(--szary); max-width: 44rem; margin-bottom: 22px; }

/* Test: lista 18 punktów */
.test-grupy { columns: 2 300px; column-gap: 18px; }
.test-grupy fieldset { break-inside: avoid; margin: 0 0 18px; padding: 16px 16px 8px; border: 0; background: var(--bialy); border-radius: 18px; }
.test-grupy legend { float: left; width: 100%; font-family: var(--font-tytul); font-weight: 700; font-size: 1.125rem; margin: 0 0 6px; padding: 0; }
.test-grupy legend + * { clear: both; }
.punkt { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; cursor: pointer; align-items: start; }
.punkt:hover { background: var(--tlo); }
.punkt input { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin: 0; border: 2px solid var(--ramka); border-radius: 8px; background: var(--bialy); display: grid; place-content: center; cursor: pointer; }
.punkt input::after { content: ""; width: 14px; height: 8px; border: solid var(--granat); border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .12s ease; }
.punkt input:checked { background: var(--zolty); border-color: var(--granat); }
.punkt input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.punkt input:focus-visible { outline: 3px solid var(--niebieski); outline-offset: 2px; }
.punkt__tresc { font-weight: 600; line-height: 1.35; padding-top: 2px; }
.punkt__pod { display: block; font-weight: 400; font-size: .875rem; color: var(--szary); margin-top: 2px; }
.pomagam { display: inline-block; margin-top: 4px; font-size: .8125rem; font-weight: 700; color: var(--granat); background: var(--zolty-jasny); border-radius: 6px; padding: 1px 7px; }
.pasek { height: 14px; background: var(--niebieski-jasny); border-radius: 99px; overflow: hidden; margin: 6px 0 14px; }
.pasek__wypelnienie { height: 100%; width: 0; background: var(--niebieski); border-radius: 99px; transition: width .3s ease; }
.wynik__linie p { margin: 0 0 .5em; }
.braki { margin-top: 10px; }
.braki summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: var(--link); }
.braki ul { margin: 4px 0 0; padding-left: 1.2em; font-size: .9375rem; }
.test-noty { margin-top: 18px; display: grid; gap: 8px; font-size: .9375rem; color: var(--szary); max-width: 46rem; }
.test-noty p { margin: 0; }
.test-noty .termin { color: var(--granat); background: var(--bialy); border-radius: 14px; padding: 12px 16px; }
.druk-naglowek { display: none; }

/* Kalkulator */
.kalk__pole { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: center; background: var(--bialy); border-radius: 18px; padding: 16px 18px; margin-bottom: 16px; }
.kalk__pole label { grid-column: 1 / -1; font-weight: 700; }
.pole-m2 { position: relative; }
.pole-m2 input { width: 100%; min-height: 60px; padding: 8px 52px 8px 16px; border: 2px solid var(--ramka); border-radius: var(--r-pole); font: 800 1.75rem/1 var(--font-tytul); color: var(--granat); background: var(--bialy); }
.pole-m2 span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--szary); }
input[type="range"] { width: 100%; height: 44px; accent-color: var(--niebieski); cursor: pointer; }
.wybory { border: 0; margin: 0 0 16px; padding: 0; }
.wybory legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.wybory__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.wybor { position: relative; display: block; background: var(--bialy); border: 2px solid var(--linia); border-radius: 16px; padding: 14px 14px 14px 48px; cursor: pointer; min-height: 56px; }
.wybor input { position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; margin: 0; accent-color: var(--granat); }
.wybor b { display: block; line-height: 1.25; }
.wybor small { display: block; margin-top: 4px; }
.wybor:has(input:checked) { border-color: var(--granat); box-shadow: inset 0 0 0 1px var(--granat); background: var(--zolty-jasny); }
.wybor:has(input:checked) small { color: var(--granat); }
.wybor:has(input:focus-visible) { outline: 3px solid var(--niebieski); outline-offset: 2px; }
.kalk__podpowiedz { font-size: .9375rem; color: var(--szary); margin: -4px 0 16px; }
.rozbicie { list-style: none; padding: 0; margin: 6px 0 10px; font-size: .9375rem; }
.rozbicie li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--linia); }
.wynik__parametry { font-weight: 600; margin: 0 0 4px; }
.wynik__weterynaria { font-size: .875rem; background: var(--niebieski-jasny); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }

/* Termin szkolenia */
.termin__pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pole { display: flex; flex-direction: column; gap: 6px; }
.pole label { font-weight: 700; }
.pole input, .pole select, .pole textarea { width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--ramka); border-radius: var(--r-pole); font: 500 1.0625rem/1.4 var(--font-tekst); color: var(--granat); background: var(--bialy); }
.pole textarea { min-height: 150px; resize: vertical; }
.pole input:focus, .pole select:focus, .pole textarea:focus, .pole-m2 input:focus { border-color: var(--niebieski); outline: 3px solid rgba(11, 107, 255, .25); outline-offset: 0; }
.pole [aria-invalid="true"] { border-color: #B3261E; }

/* ---------- Mozaika sytuacji ---------- */
.mozaika-sytuacji { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 14px; }
.kafel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px 24px; border-radius: var(--r-karta); background: var(--bialy); color: var(--granat); text-decoration: none; border: 2px solid transparent; transition: transform .15s ease, border-color .15s ease; }
.kafel:hover { transform: translateY(-3px); border-color: var(--granat); color: var(--granat); }
.kafel h3 { margin: 0 0 8px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.kafel p { margin: 0; font-size: 1.0625rem; max-width: 34rem; }
.kafel .strzalka-kolko { align-self: flex-end; width: 48px; height: 48px; border-radius: 50%; background: var(--granat); color: #fff; display: grid; place-items: center; flex: none; }
.kafel .strzalka-kolko svg { width: 22px; height: 22px; }
.kafel--a { grid-column: span 3; grid-row: span 2; background: var(--bialy); border-color: var(--granat); }
.kafel--a h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.kafel--a p { font-size: 1.1875rem; }
.kafel__cena { margin-top: 22px !important; font-size: 1.0625rem; }
.kafel__cena .kwota { display: block; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem); line-height: 1; margin-top: 4px; }
.kafel--b { grid-column: span 3; }
.kafel--c { grid-column: span 3; }
.kafel--d { grid-column: span 2; }
.pod-mozaika { margin-top: 22px; font-size: 1.125rem; font-weight: 600; }

/* ---------- Filary usług: siatka 12 kolumn, każdy filar inna szerokość; kolejny filar domyślnie pół szerokości ---------- */
.filary { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.filar { grid-column: span 6; background: var(--bialy); border-radius: var(--r-duzy); padding: clamp(22px, 2.6vw, 34px); }
.filar--1 { grid-column: span 7; }
.filar--2 { grid-column: span 5; }
.filar--3 { grid-column: span 5; }
.filar--4 { grid-column: span 7; }

.filar__glowa { margin-bottom: 18px; }
.filar__glowa h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-bottom: 10px; }
.filar__obietnica { font-size: 1.0625rem; margin-bottom: 12px; }
.filar__cena { margin: 12px 0 0; font-size: 1.0625rem; }
.filar__cena .kwota { font-size: 1.75rem; }
.uslugi-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.usluga { background: var(--tlo); border-radius: 16px; padding: 16px 18px; }

.usluga__gora { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; margin-bottom: 6px; }
.usluga h4 { margin: 0; }
.metka { display: inline-block; max-width: 100%; font-weight: 700; font-size: .9375rem; background: var(--zolty-jasny); border-radius: 8px; padding: 2px 10px; white-space: nowrap; }
.usluga p { margin: 0; font-size: 1rem; }
.usluga .zasieg { margin-top: 8px; }
.usluga .strzalka { margin-top: 4px; }
.filar__test { margin-top: 12px; background: var(--granat); color: #fff; border-radius: 16px; padding: 16px 18px; }
.filar__test a { color: #fff; font-weight: 700; }
.filar__test p { margin: 4px 0 0; color: #DCE6F8; font-size: .9375rem; }

/* ---------- Cennik ---------- */
.metki { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.metka-duza { position: relative; flex: 1 1 200px; background: var(--bialy); border-radius: 18px 18px 18px 18px; padding: 18px 20px 18px 34px; min-width: 0; }
.metka-duza::before { content: ""; position: absolute; left: 13px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--tlo); box-shadow: inset 0 0 0 2px var(--ramka); }
.metka-duza:nth-child(1) { flex-basis: 320px; }
.metka-duza h3 { font-size: 1.0625rem; margin: 0 0 6px; }
.metka-duza .kwota { font-size: 1.9rem; display: block; white-space: normal; line-height: 1.1; margin-bottom: 8px; }
.metka-duza p { font-size: .9375rem; margin: 0; }
.cennik-dopisek { font-weight: 600; }
.cennik-pelny { columns: 2 520px; column-gap: 16px; margin-top: 28px; }
.blok-ceny { break-inside: avoid; background: var(--bialy); border-radius: var(--r-karta); padding: clamp(18px, 2.4vw, 28px); margin: 0 0 16px; }
.blok-ceny h3 { margin-bottom: 6px; }
.blok-ceny .zasieg { margin-bottom: 14px; }
.scenariusze { display: grid; gap: 10px; margin: 14px 0; }
.scenariusz { border: 2px solid var(--linia); border-radius: 16px; padding: 14px 16px; }
.scenariusz h4 { margin-bottom: 4px; }
.scenariusz .kwota { font-size: 1.5rem; }
.scenariusz p { margin: 6px 0 0; font-size: .9375rem; }
.scenariusz p b { font-weight: 700; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 8px 0 4px; }
.tabela caption { text-align: left; font-size: .8125rem; color: var(--szary); caption-side: bottom; padding-top: 8px; }
.tabela th, .tabela td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--linia); vertical-align: top; }
.tabela thead th { font-size: .8125rem; color: var(--szary); font-weight: 700; }
.tabela td:last-child, .tabela th:last-child { padding-right: 0; }
.tabela .num { white-space: nowrap; font-weight: 700; }
.rozwin summary { cursor: pointer; font-weight: 700; color: var(--link); min-height: 44px; display: flex; align-items: center; }
.cennik-koniec { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.cennik-koniec p { margin: 0; max-width: 46rem; }
.kalk-zacheta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; background: var(--zolty-jasny); border-radius: 14px; padding: 12px 16px; margin: 6px 0 14px; font-weight: 600; }

/* ---------- Dla kogo: szuflady w dwóch kolumnach ---------- */
.szuflady { columns: 2 440px; column-gap: 14px; }
.szuflada { break-inside: avoid; background: var(--bialy); border-radius: var(--r-karta); margin: 0 0 14px; border: 2px solid transparent; }
.szuflada[open] { border-color: var(--granat); }
.szuflada summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px 1fr 36px; gap: 14px; align-items: center; padding: 16px 18px; min-height: 76px; border-radius: var(--r-karta); }
.szuflada summary::-webkit-details-marker { display: none; }
.szuflada summary .ikona { width: 52px; height: 52px; border-radius: 14px; background: var(--niebieski-jasny); display: grid; place-items: center; color: var(--granat); }
.szuflada summary .ikona svg { width: 28px; height: 28px; }
.szuflada summary h3 { margin: 0; font-size: 1.375rem; }
.szuflada summary .pod { display: block; font-size: .9375rem; color: var(--szary); font-weight: 500; margin-top: 2px; font-family: var(--font-tekst); }
.szuflada summary .plus { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--granat); display: grid; place-items: center; transition: transform .2s ease; }
.szuflada summary .plus svg { width: 16px; height: 16px; }
.szuflada[open] summary .plus { transform: rotate(45deg); background: var(--zolty); }
.szuflada__tresc { padding: 0 22px 22px 84px; }
.szuflada__tresc ul { padding-left: 1.1em; }
.szuflada__tresc li { margin-bottom: 6px; }
.szuflada__akcje { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: 10px; }
.dopisek { background: var(--zolty-jasny); border-radius: 12px; padding: 10px 14px; font-size: .9375rem; }

/* ---------- Współpraca: tor czterech kroków ---------- */
.kroki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: krok; position: relative; }
.krok { position: relative; background: var(--bialy); border-radius: var(--r-karta); padding: 22px 22px 24px; counter-increment: krok; }
.krok::before { content: counter(krok); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--granat); color: #fff; font: 800 1.75rem/1 var(--font-tytul); margin-bottom: 16px; }
.krok:not(:last-child)::after { content: ""; position: absolute; top: 49px; left: calc(22px + 56px + 10px); right: -14px; border-top: 3px dashed var(--ramka); }
.krok h3 { font-size: 1.375rem; }
.krok p { margin: 0; }

/* ---------- O mnie ---------- */
.o-mnie__siatka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.o-mnie__lewa { position: sticky; top: calc(var(--naglowek-h) + 20px); }
.o-mnie__foto { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin-bottom: 18px; }
.o-mnie__foto svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.o-mnie__foto img { position: absolute; inset: auto 8% 0 8%; width: 84%; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.o-mnie__podpis { font-size: .9375rem; color: var(--szary); margin-bottom: 20px; max-width: 26rem; }
.liczby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.liczba { background: var(--bialy); border-radius: 16px; padding: 12px 14px; }
.liczba b { display: block; font-family: var(--font-tytul); font-size: 1.75rem; line-height: 1.05; font-weight: 800; font-variation-settings: "wdth" 85; }
.liczba span { display: block; font-size: .8125rem; line-height: 1.35; color: var(--szary); margin-top: 4px; }
.liczba--szeroka { grid-column: span 2; background: var(--niebieski-jasny); }
.liczba--szeroka span { color: var(--granat); }
.liczba--granat { background: var(--granat); }
.liczba--granat b, .liczba--granat span { color: #fff; }
.liczba a { color: inherit; text-decoration: none; display: block; }
.liczba a span { text-decoration: underline; color: var(--link); }
.historia { max-width: 40rem; font-size: 1.125rem; line-height: 1.65; }
.historia .akapit-glowny { font-size: 1.3125rem; font-weight: 600; line-height: 1.5; }
.os-czasu { list-style: none; margin: 32px 0 40px; padding: 0; position: relative; }
.os-czasu::before { content: ""; position: absolute; left: 100px; top: 6px; bottom: 6px; border-left: 3px solid var(--linia); }
.os-czasu li { display: grid; grid-template-columns: 88px 1fr; gap: 28px; padding: 8px 0; position: relative; }
.os-czasu li::before { content: ""; position: absolute; left: 94px; top: 16px; width: 15px; height: 15px; border-radius: 50%; background: var(--bialy); border: 3px solid var(--granat); }
.os-czasu time { font-family: var(--font-tytul); font-weight: 800; font-size: 1.0625rem; text-align: right; line-height: 1.5; font-variation-settings: "wdth" 85; }
.kwalifikacje { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 40px; }
.kwalifikacje div { background: var(--bialy); border-radius: 16px; padding: 16px 18px; }
.kwalifikacje h4 { margin-bottom: 8px; }
.kwalifikacje ul { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.kwalifikacje li + li { margin-top: 8px; }
.zasady { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zasada { background: var(--bialy); border-radius: 18px; padding: 18px 20px; }
.zasada:first-child { grid-column: 1 / -1; background: var(--granat); color: #fff; }
.zasada:first-child h4 { color: #fff; font-size: 1.375rem; }
.zasada h4 { margin-bottom: 6px; }
.zasada p { margin: 0; font-size: 1rem; }

/* ---------- Szkolenia ---------- */
.szkolenia__siatka { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.szkolenia-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.szkolenie { background: var(--bialy); border-radius: 18px; padding: 18px 20px; }
.szkolenie h4 { margin-bottom: 4px; }
.szkolenie .metka { margin-bottom: 8px; white-space: normal; }
.szkolenie p { margin: 0; font-size: 1rem; }
.szkolenia__na-miejscu { background: var(--niebieski-jasny); border-radius: var(--r-duzy); padding: clamp(20px, 2.6vw, 32px); }
.szkolenia__na-miejscu > h3 { margin-bottom: 6px; }
.szkolenia__na-miejscu > ul { columns: 2; margin-bottom: 14px; font-weight: 600; }
.szkolenia__online { background: var(--bialy); border-radius: var(--r-duzy); padding: clamp(20px, 2.6vw, 32px); border: 2px dashed var(--ramka); }
.plakietka { display: inline-block; background: var(--zolty); color: var(--granat); font-weight: 800; font-size: .875rem; border-radius: 99px; padding: 4px 12px; margin-bottom: 10px; }
.termin-zacheta { margin-top: 16px; background: var(--granat); color: #fff; border-radius: 18px; padding: 16px 18px; }
.termin-zacheta p { margin: 0 0 6px; }
.termin-zacheta a { color: var(--zolty); font-weight: 700; }
.kto-online { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.kto-online > div { background: var(--bialy); border-radius: var(--r-duzy); padding: clamp(20px, 2.6vw, 32px); }
.tak { font-weight: 700; }
.nie { font-weight: 700; background: var(--zolty-jasny); border-radius: 6px; padding: 0 6px; }

/* ---------- Wiedza: mozaika zajawek ---------- */
.mozaika-wiedzy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.zajawka { display: flex; flex-direction: column; background: var(--bialy); border-radius: var(--r-karta); padding: 20px 22px; }
.zajawka h3 { font-size: 1.25rem; margin-bottom: 8px; }
.zajawka h3 a { color: var(--granat); text-decoration: none; }
.zajawka h3 a:hover { text-decoration: underline; }
.zajawka p { font-size: .9688rem; margin-bottom: 10px; }
.zajawka .podstawa { margin: auto 0 10px; }
.zajawka .strzalka { margin-top: auto; }
.zajawka--duza { grid-column: span 2; grid-row: span 2; background: var(--granat); color: #fff; padding: clamp(24px, 3vw, 36px); }
.zajawka--duza h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.zajawka--duza h3 a, .zajawka--duza .strzalka { color: #fff; }
.zajawka--duza .podstawa { color: #DCE6F8; }
.zajawka--duza p { font-size: 1.125rem; }
.zajawka--srednia { grid-column: span 2; background: var(--niebieski-jasny); }
.zajawka--srednia .podstawa { color: var(--granat); }
.nastepny-krok { grid-column: span 2; background: var(--niebieski-jasny); border-radius: var(--r-karta); padding: 22px 24px; }
.nastepny-krok__etykieta { display: inline-block; font-weight: 800; background: var(--bialy); border-radius: 99px; padding: 3px 12px; font-size: .875rem; margin-bottom: 10px; }
.nastepny-krok h3 { font-size: 1.375rem; }
.nastepny-krok ol { padding-left: 1.3em; margin-bottom: 12px; }
.nastepny-krok li { margin-bottom: 8px; font-size: .9688rem; }
.nastepny-krok li::marker { font-weight: 800; font-family: var(--font-tytul); }

/* ---------- Partnerzy ---------- */
.partnerzy__siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.partner { background: var(--bialy); border-radius: var(--r-karta); padding: 20px 22px; }
.partner h3 { font-size: 1.3125rem; }
.partner p { margin: 0; }
.partnerzy__dol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; background: var(--bialy); border-radius: var(--r-karta); padding: 20px 24px; }
.partnerzy__dol h3 { font-size: 1.25rem; margin-bottom: 8px; }
.odhaczone { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.odhaczone li { position: relative; padding-left: 32px; }
.odhaczone li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 6px; background: var(--niebieski-jasny); }
.odhaczone li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 10px; height: 5px; border: solid var(--granat); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }

/* ---------- Pytania ---------- */
.pytania__siatka { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.pytania__lewa { position: sticky; top: calc(var(--naglowek-h) + 20px); }
.pytanie { background: var(--bialy); border-radius: 18px; margin-bottom: 10px; }
.pytanie summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 20px; min-height: 64px; font: 700 1.1875rem/1.3 var(--font-tytul); font-variation-settings: "wdth" 92; }
.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary .plus { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 2px solid var(--granat); display: grid; place-items: center; transition: transform .2s ease; }
.pytanie summary .plus svg { width: 14px; height: 14px; }
.pytanie[open] summary .plus { transform: rotate(45deg); background: var(--zolty); }
.pytanie__tresc { padding: 0 20px 20px; max-width: 46rem; }
.pytanie__tresc p:last-child { margin-bottom: 0; }

/* ---------- Kontakt ---------- */
.kontakt__siatka { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.formularz { background: var(--bialy); border-radius: var(--r-duzy); padding: clamp(20px, 3vw, 40px); }
.formularz__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.formularz__siatka .pelny { grid-column: 1 / -1; }
.zgoda { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: .9688rem; cursor: pointer; }
.zgoda input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--granat); }
.zgoda button { font: inherit; color: var(--link); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.wymagane { color: var(--szary); font-weight: 500; font-size: .875rem; }
.formularz__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.formularz__akcje p { margin: 0; font-size: .9375rem; color: var(--szary); max-width: 26rem; }
.komunikat { margin: 0; font-weight: 600; }
.komunikat:empty { display: none; }
.komunikat--blad { background: #FDECEA; color: #8C1D18; border-radius: 12px; padding: 12px 14px; }
.komunikat--ok { background: var(--zolty-jasny); border-radius: 12px; padding: 12px 14px; }
.kontakt__dane { background: var(--granat); color: #fff; border-radius: var(--r-duzy); padding: clamp(22px, 3vw, 36px); }
.kontakt__dane h3 { color: #fff; font-size: 1.125rem; margin: 18px 0 4px; }
.kontakt__dane h3:first-child { margin-top: 0; }
.kontakt__dane a { color: #fff; }
.kontakt__dane .tel { color: #fff; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); }
.kontakt__dane address { font-style: normal; }
.kontakt__dane p { color: #DCE6F8; }

/* Okno informacji o danych */
dialog.okno { border: 0; border-radius: var(--r-karta); padding: 0; max-width: min(640px, calc(100vw - 32px)); color: var(--granat); box-shadow: var(--cien); }
dialog.okno::backdrop { background: rgba(18, 48, 90, .55); }
.okno__tresc { padding: clamp(22px, 3vw, 34px); }
.okno__tresc h2 { font-size: 1.75rem; }
.okno__tresc p { font-size: 1rem; }
.no-js dialog.okno { display: block; position: static; margin: 0 auto 40px; max-width: var(--szer); }

/* ---------- Stopka ---------- */
.stopka { background: var(--granat); color: #DCE6F8; padding: 48px 0 40px; }
.stopka__siatka { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-start; justify-content: space-between; }
.stopka .logo { color: #fff; margin-right: 0; }
.stopka .logo__nazwa span { color: #DCE6F8; }
.stopka__dane { max-width: 46rem; font-size: .9375rem; margin: 0; }
.stopka__linki { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.stopka__linki a, .stopka__linki button { color: #fff; font: 600 .9375rem/1.4 var(--font-tekst); background: none; border: 0; padding: 10px 0; min-height: 44px; text-decoration: underline; cursor: pointer; }

/* Dolny pasek na telefonie */
.dolny-pasek { display: none; }

/* ---------- Menu mobilne (pełny ekran, harmonijka) ---------- */
.menu-mobilne { position: fixed; inset: 0; z-index: 150; background: var(--tlo); overflow-y: auto; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
.menu-mobilne[hidden] { display: none; }
.menu-mobilne__gora { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.harmonijka { border-radius: 18px; background: var(--bialy); margin-bottom: 8px; }
.harmonijka > h2, .harmonijka > h3 { margin: 0; font-size: 1.125rem; }
.harmonijka__przycisk { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; background: none; border: 0; text-align: left; font: 700 1.125rem/1.25 var(--font-tytul); color: var(--granat); cursor: pointer; }
.harmonijka__przycisk small { display: block; font: 500 .8125rem/1.35 var(--font-tekst); color: var(--szary); margin-top: 2px; }
.harmonijka__przycisk svg { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.harmonijka__przycisk[aria-expanded="true"] svg { transform: rotate(180deg); }
.harmonijka__tresc { padding: 0 16px 12px; }
.harmonijka__tresc[hidden] { display: none; }
.harmonijka__tresc ul { list-style: none; margin: 0; padding: 0; }
.harmonijka__tresc a { display: block; padding: 10px 0; min-height: 44px; color: var(--granat); text-decoration: none; font-weight: 600; border-top: 1px solid var(--linia); }
.harmonijka__tresc a .cena-m { display: block; font-weight: 500; font-size: .8125rem; color: var(--szary); }
.menu-mobilne__grupa { font: 700 .9375rem/1 var(--font-tekst); color: var(--szary); margin: 18px 4px 8px; }
.menu-mobilne__filary { background: var(--bialy); border-radius: 18px; }
.menu-mobilne__filary .harmonijka { margin: 0; border-radius: 0; border-top: 1px solid var(--linia); background: none; }
.menu-mobilne__filary .harmonijka:first-child { border-top: 0; }
.menu-mobilne__proste { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.menu-mobilne__proste a { display: flex; align-items: center; min-height: 52px; padding: 10px 16px; background: var(--bialy); border-radius: 14px; color: var(--granat); text-decoration: none; font-weight: 700; }
.menu-mobilne__dol { display: grid; gap: 10px; margin-top: 16px; }
.menu-mobilne__dol .tel { justify-content: center; }

/* ---------- Podstrona usługi ---------- */
.okruszki { font-size: .9375rem; color: var(--szary); margin: 0 0 14px; }
.okruszki ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 0; margin: 0; }
.okruszki li { display: flex; align-items: center; min-height: 44px; }
.okruszki li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--ramka); }
.okruszki a { color: var(--link); display: inline-flex; align-items: center; min-height: 44px; }
.podstrona-start { padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 64px); }
.podstrona-start__siatka { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.podstrona-start h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.4rem); font-weight: 760; font-variation-settings: "wdth" 88, "opsz" 96; letter-spacing: -.01em; line-height: 1.02; }
.lead { font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.5; max-width: 40rem; }
.znaczek-zasieg { display: inline-flex; align-items: center; gap: 8px; background: var(--niebieski-jasny); border-radius: 99px; padding: 6px 14px; font-weight: 700; margin-bottom: 16px; }
.znaczek-zasieg svg { width: 18px; height: 18px; }
.start-akcje { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 22px 0 10px; }
.karta-ceny-start { background: var(--bialy); border-radius: var(--r-duzy); box-shadow: var(--cien); padding: 26px 28px; position: relative; overflow: hidden; }
.karta-ceny-start::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--zolty); }
.karta-ceny-start .kwota { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); display: inline-block; line-height: 1; margin: 6px 0 10px; }
.porownanie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.porownanie__kol { background: var(--bialy); border-radius: var(--r-duzy); padding: clamp(20px, 2.6vw, 30px); }
.porownanie__kol--wet { background: var(--granat); color: #fff; }
.porownanie__kol--wet h3, .porownanie__kol--wet dt { color: #fff; }
.porownanie__kol--wet .podstawa { color: #DCE6F8; }
.porownanie dl { margin: 0; display: grid; gap: 14px; }
.porownanie dt { font-weight: 700; font-size: .875rem; color: var(--szary); }
.porownanie dd { margin: 2px 0 0; font-size: 1.0625rem; }
.porownanie__kol--wet dt { color: #DCE6F8; }
.po-co { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 14px; }
.po-co > div { background: var(--bialy); border-radius: var(--r-duzy); padding: clamp(20px, 2.6vw, 30px); }
.mozaika-co { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.mozaika-co .poz { background: var(--tlo); border-radius: var(--r-karta); padding: 20px 22px; grid-column: span 2; }
.mozaika-co .poz:nth-child(1) { grid-column: span 3; background: var(--zolty); }
.mozaika-co .poz:nth-child(2) { grid-column: span 3; background: var(--granat); color: #fff; }
.mozaika-co .poz:nth-child(2) h3 { color: #fff; }
.mozaika-co .poz h3 { font-size: 1.375rem; }
.mozaika-co .poz p { margin: 0; }
.mozaika-co__dol { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mozaika-co__dol p { margin: 0; background: var(--niebieski-jasny); border-radius: 16px; padding: 16px 18px; }
.lista-przed { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lista-przed li { background: var(--bialy); border-radius: 14px; padding: 14px 16px 14px 48px; position: relative; font-weight: 600; }
.lista-przed li::before { content: ""; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; border: 2px solid var(--ramka); border-radius: 6px; }
.wezwanie { background: var(--granat); color: #fff; border-radius: clamp(24px, 3vw, 40px); padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: 20px 40px; align-items: center; }
.wezwanie h2 { color: #fff; margin-bottom: 10px; }
.wezwanie p { color: #DCE6F8; margin: 0; font-size: 1.125rem; }
.wezwanie__akcje { display: flex; flex-direction: column; gap: 10px; }
.wezwanie .tel { color: #fff; justify-content: center; }
.powiazane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.powiazane a { display: block; background: var(--bialy); border-radius: var(--r-karta); padding: 20px 22px; text-decoration: none; color: var(--granat); border: 2px solid transparent; }
.powiazane a:hover { border-color: var(--granat); color: var(--granat); }
.powiazane b { display: block; font-family: var(--font-tytul); font-size: 1.3125rem; line-height: 1.2; margin-bottom: 6px; }

/* ---------- Artykuł ---------- */
.artykul-start { padding: clamp(28px, 4vw, 56px) 0 24px; }
.artykul-start h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.9rem); font-weight: 760; font-variation-settings: "wdth" 88, "opsz" 96; letter-spacing: -.01em; max-width: 60rem; line-height: 1.02; }
.metryka { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; padding: 0; margin: 0 0 20px; }
.metryka li { background: var(--bialy); border-radius: 99px; padding: 5px 12px; font-size: .875rem; font-weight: 600; }
.metryka li:first-child { background: var(--niebieski-jasny); }
.artykul__siatka { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.spis { position: sticky; top: calc(var(--naglowek-h) + 20px); background: var(--bialy); border-radius: 18px; padding: 18px 20px; }
.spis h2 { font-size: 1.125rem; margin-bottom: 8px; }
.spis ol { padding-left: 1.3em; margin: 0; font-size: .9375rem; }
.spis li { margin: 0; padding: 7px 0; line-height: 1.4; }
.spis ol a { color: var(--granat); }
.tresc-art { max-width: 44rem; font-size: 1.125rem; line-height: 1.7; }
.tresc-art .lead { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 400; line-height: 1.5; }
.tresc-art h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin: 48px 0 14px; }
.tresc-art blockquote { margin: 1em 0; padding: 14px 18px; background: var(--zolty-jasny); border-radius: 14px; }
.w-skrocie { background: var(--bialy); border-radius: var(--r-karta); padding: 20px 24px; margin: 24px 0; }
.w-skrocie h2 { margin: 0 0 10px !important; font-size: 1.375rem !important; }
.w-skrocie ul { margin: 0; padding-left: 1.1em; }
.w-skrocie li { margin-bottom: 8px; font-size: 1.0625rem; }
.tabela-przewin { overflow-x: auto; background: var(--bialy); border-radius: 16px; padding: 6px 16px; margin: 14px 0 20px; }
.tabela-przewin .tabela { font-size: 1rem; }
.tresc-art .nastepny-krok { margin: 40px 0; }
.faq-art .pytanie { background: var(--bialy); }
.autor { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; background: var(--bialy); border-radius: var(--r-karta); padding: 18px 20px; margin: 32px 0; }
.autor__foto { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--zolty); overflow: hidden; }
.autor__foto img { position: absolute; bottom: 0; left: 4%; width: 92%; }
.autor p { margin: 0 0 10px; font-size: 1.0625rem; }

/* Kolory tła powierzchni wewnątrz sekcji (zamiast stylów w linii) */
.filar--5 .usluga { background: var(--tlo); }
.filar--4 { background: var(--granat); color: #fff; }
.filar--4 .filar__glowa h3 { color: #fff; }
.filar--4 .filar__glowa .zasieg { color: #DCE6F8; }
.filar--4 .filar__cena .zakreslacz { color: var(--granat); background: var(--zolty); border-radius: 6px; padding: 0 6px; }
.filar--4 .usluga { background: var(--bialy); color: var(--granat); }
.filar--5 { background: var(--bialy); }
@media (min-width: 960px) { .filar--5 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 40px; align-items: start; } }
.szuflada { background: var(--tlo); }
.formularz { background: var(--tlo); }
.blok-ceny--zolty { background: var(--niebieski-jasny); }



/* Linki na żółtym: granat (ciemnoniebieski link miałby na żółtym tylko 4,2:1) */
.zajawka--srednia a, .kafel--a a, .blok-ceny--zolty a, .liczba--szeroka a, .kalk-zacheta a, .filar--5 a { color: var(--granat); }
.zajawka--duza .podstawa { font-size: .8125rem; }
.zajawka--duza { justify-content: space-between; }
.zajawka--duza h3 { font-size: clamp(2rem, 1.3rem + 2vw, 3rem); }
/* Mozaika filarów: z JS siatka o rzędach 4 px, każdy filar dostaje liczbę rzędów według wysokości (nierówne pola bez dziur) */
.lista-chipy { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.lista-chipy li { background: var(--bialy); border-radius: 99px; padding: 6px 14px; font-weight: 700; font-size: .9375rem; }


/* Telefon: mały licznik testu przyklejony nad listą, awatar przy nazwisku w pierwszym ekranie */
.licznik-mini { display: none; }
.start__awatar { display: none; }
@media (max-width: 1100px) {
  .licznik-mini { display: flex; position: sticky; top: 140px; z-index: 5; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 16px; border-radius: 14px; background: var(--granat); color: #fff; font-weight: 700; box-shadow: var(--cien-maly); column-span: all; }
  .licznik-mini b { color: var(--zolty); font-family: var(--font-tytul); font-size: 1.25rem; }
}
@media (max-width: 959px) {
  .skrzynka { padding: 12px; border-radius: 24px; }
  .skrzynka__naglowek { margin: 10px 6px 16px; }
  .panel { padding: 18px 14px; }
  .test-grupy fieldset { padding: 12px 12px 6px; }
  .start__nadtytul { display: flex; align-items: center; gap: 10px; }
  .start__awatar { display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--zolty); object-fit: cover; object-position: top; flex: none; }
}


/* Podstrona usługi: obiekty jako żetony, trzy scenariusze w rzędzie */
.znacznik { font-weight: 800; background: var(--zolty); color: var(--granat); border-radius: 6px; padding: 0 6px; }
.obiekty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.obiekty__el { display: flex; gap: 14px; align-items: flex-start; background: var(--tlo); border-radius: var(--r-karta); padding: 18px 20px; font-size: 1rem; line-height: 1.45; }
.obiekty__el svg { width: 30px; height: 30px; flex: none; color: var(--niebieski); }
.obiekty__el b { display: block; font-family: var(--font-tytul); font-size: 1.25rem; line-height: 1.2; margin-bottom: 2px; }
.obiekty__el--duzy { grid-column: span 2; grid-row: span 2; background: var(--niebieski-jasny); flex-direction: column; justify-content: space-between; font-size: 1.125rem; }
.obiekty__el--duzy svg { width: 56px; height: 56px; color: var(--granat); }
.obiekty__el--duzy b { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.obiekty__dol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.obiekty__dol p { margin: 0; background: var(--niebieski-jasny); border-radius: 16px; padding: 16px 18px; }
.scenariusze--trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.scenariusze--trzy .scenariusz { background: var(--bialy); border: 0; padding: 22px 22px; }
.scenariusze--trzy .scenariusz:nth-child(3) { background: var(--granat); color: #fff; }
.scenariusze--trzy .scenariusz:nth-child(3) h3 { color: #fff; }
.scenariusze--trzy .scenariusz:nth-child(3) .zakreslacz { color: var(--granat); background: var(--zolty); border-radius: 6px; }
.scenariusze--trzy .scenariusz:nth-child(3) .podstawa { color: #DCE6F8; }
.scenariusze--trzy h3 { font-size: 1.375rem; }
.cena__dol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1100px) { .obiekty { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scenariusze--trzy { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .obiekty { grid-template-columns: minmax(0, 1fr); } .obiekty__el--duzy { grid-column: auto; grid-row: auto; } .obiekty__dol, .cena__dol { grid-template-columns: minmax(0, 1fr); } }


.co-typ dd .podstawa { display: block; }
#k-wynik .wynik__glowny, #t-wynik .wynik__glowny { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); }
@media (max-width: 959px) {
  .naglowek { background: var(--tlo); box-shadow: 0 10px 18px -16px rgba(18, 48, 90, .5); }
  .pigulki { padding-bottom: 8px; }
}
@media (max-width: 400px) {
  .logo__nazwa { font-size: 1.0625rem; white-space: nowrap; }
}


/* Cele dotykowe co najmniej 44 px dla samodzielnych odnośników */
.osoba__test, .slabszy, .co-typ__linki a, .stopka__linki a, .kalk-zacheta a, .termin-zacheta a, .filar__test a { display: inline-flex; align-items: center; min-height: 44px; }
/* Bez JS na telefonie: menu jako drugi wiersz odnośników w nagłówku (przycisk „Menu" wymaga skryptu) */
@media (max-width: 959px) {
  .no-js .naglowek__menu-btn { display: none; }
  .no-js .naglowek__pasek { flex-wrap: wrap; }
  .no-js .naglowek nav[aria-label="Menu główne"] { order: 3; width: 100%; }
  .no-js .menu { display: flex; flex-wrap: wrap; }
  .no-js .panel-menu { position: static; width: auto; transform: none; translate: none; max-height: none; }
  .no-js .panel-uslugi__siatka, .no-js .panel-uslugi__filary { grid-template-columns: minmax(0, 1fr); }
}
/* Pierwszy ekran: portret i karta mieszczą się w 900 px wysokości razem z telefonem */
@media (min-width: 1101px) {
  .osoba__plama { width: min(100%, 380px); }
  .osoba__karta { margin-top: -58px; padding: 18px 20px; }
  .osoba__zdanie { font-size: 1.0625rem; margin-bottom: 10px; }
  .osoba__dosw, .osoba__zasieg { font-size: .875rem; }
  .osoba__zasieg { margin-bottom: 12px; }
  .osoba__test { margin-top: 2px; }
}

.sekcja--biala .zajawka:not(.zajawka--duza):not(.zajawka--srednia) { background: var(--tlo); }


/* ---------- Poprawki po przeglądzie ---------- */
/* Portret: jeden kształt (prostokąt o dużym zaokrągleniu i jednym ściętym rogu), ten sam w pierwszym ekranie i w „O mnie" */
.kadr { position: relative; overflow: hidden; background: var(--niebieski-jasny); border-radius: 36px 36px 36px 6px; aspect-ratio: 1 / 1; }
.kadr img { position: absolute; left: 6%; bottom: 0; width: 88%; height: auto; -webkit-mask-image: none; mask-image: none; }
.osoba__plama { aspect-ratio: auto; }
.osoba__plama .kadr { width: 100%; }
.o-mnie__foto { aspect-ratio: auto; }
/* Wynik „Co otwierasz?" może przyjąć fokus po wyborze */
.co-typ__tytul:focus { outline: none; }
.co-typ__tytul:focus-visible { outline: 3px solid var(--niebieski); outline-offset: 4px; }
/* Fokus min. 3:1: na granatowych polach żółty obrys, na żółtych i jasnożółtych granatowy */
.kafel--b :focus-visible, .filar__test :focus-visible, .zajawka--duza :focus-visible, .termin-zacheta :focus-visible, .filar--4 .filar__glowa :focus-visible,
.porownanie__kol--wet :focus-visible, .scenariusze--trzy .scenariusz:nth-child(3) :focus-visible, .liczba--granat :focus-visible, .zasada:first-child :focus-visible, .zeton[aria-pressed="true"]:focus-visible { outline-color: var(--zolty); }
.zakladka[aria-selected="true"]:focus-visible, .btn--zolty:focus-visible, .plakietka :focus-visible { outline-color: #fff; }
/* Zgoda: odnośnik w zdaniu z większym polem dotyku */
.zgoda a { padding: 12px 0; }
/* Cennik: zwijane bloki (na telefonie domyślnie zwinięte przez skrypt) */
.blok-ceny > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 44px; }
.blok-ceny > summary::-webkit-details-marker { display: none; }
.blok-ceny > summary h3 { margin: 0 0 6px; }
.blok-ceny > summary .plus { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 2px solid var(--granat); display: grid; place-items: center; transition: transform .2s ease; }
.blok-ceny > summary .plus svg { width: 14px; height: 14px; }
.blok-ceny[open] > summary .plus { transform: rotate(45deg); background: var(--zolty-jasny); }
/* Pole Temat na pełną szerokość, żeby nazwy tematów nie były ucinane */
.formularz__siatka .pole--temat { grid-column: 1 / -1; }
/* Telefon: osoba w pierwszym ekranie (portret w tym samym kadrze i zdanie o pracy z ekspertem) */
.osoba-mini { display: none; }
@media (max-width: 959px) {
  .osoba-mini { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 0 18px; }
  .osoba-mini .kadr { width: 112px; border-radius: 22px 22px 22px 4px; }
  .osoba-mini p { margin: 0; }
  .osoba-mini__imie { font-family: var(--font-tytul); font-weight: 760; font-size: 1.125rem; line-height: 1.2; }
  .osoba-mini__zdanie { font-weight: 600; font-size: .9688rem; line-height: 1.4; margin-top: 4px !important; }
  .osoba .osoba__zdanie { display: none; }
  .osoba .osoba__plama { display: none; }
  .osoba .osoba__karta { margin: 0 auto; }
}
/* Bez JS: ukryte przyciski i liczniki, które działają tylko ze skryptem (zostaje treść noscript) */
.no-js [data-co-zapytaj], .no-js .wynik__akcje, .no-js #wynik-ile, .no-js #wynik-pasek, .no-js #wynik-opis, .no-js #wynik-braki,
.no-js #k-wynik, .no-js #t-wynik, .no-js .licznik-mini, .no-js .co__opis { display: none !important; }
/* Artykuł: tabela porównania jako karty na telefonie */
@media (max-width: 700px) {
  .tabela-przewin { overflow: visible; padding: 4px 16px; }
  .tabela-przewin .tabela thead { display: none; }
  .tabela-przewin .tabela tr { display: block; border-bottom: 1px solid var(--linia); padding: 10px 0; }
  .tabela-przewin .tabela th, .tabela-przewin .tabela td { display: block; border: 0; padding: 2px 0; }
  .tabela-przewin .tabela th[scope="row"] { font-family: var(--font-tytul); font-size: 1.0625rem; padding-bottom: 4px; }
  .tabela-przewin .tabela td[data-etykieta]::before { content: attr(data-etykieta) ": "; font-weight: 700; color: var(--szary); }
  .metryka li { font-size: .8125rem; padding: 4px 10px; }
}

/* ---------- Ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

/* ---------- Szerokości ---------- */
@media (max-width: 1240px) {
  .menu__el { padding: 8px 9px; font-size: .9688rem; }
  .naglowek__tel { display: none; }
}
@media (max-width: 1100px) {
  .zetony { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeton { flex-direction: row; align-items: center; min-height: 64px; }
  .zeton svg { width: 26px; height: 26px; flex: none; }
  .panel__siatka { grid-template-columns: minmax(0, 1fr); }
  .panel__wynik { position: static; }
  .wiarygodnosc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiarygodnosc li:nth-child(3) { border-left: 0; }
  .wiarygodnosc li:nth-child(n+3) { border-top: 2px dashed var(--linia); }
  .kwalifikacje { grid-template-columns: minmax(0, 1fr); }
  .mozaika-wiedzy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .szkolenia__siatka, .kto-online { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 959px) {
  :root { --naglowek-h: 72px; }
  .naglowek { padding: 8px 10px 0; }
  .naglowek__pasek { min-height: 58px; padding: 6px 6px 6px 10px; border-radius: 18px; }
  .menu, .naglowek__cta, .naglowek__tel { display: none; }
  .naglowek__menu-btn { display: inline-flex; }
  .logo img { width: 36px; height: 36px; }
  .pigulki { pointer-events: auto; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px 2px 6px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
  .pigulki::-webkit-scrollbar { display: none; }
  .pigulki a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; background: var(--bialy); border: 1px solid var(--linia); border-radius: 99px; color: var(--granat); text-decoration: none; font-weight: 700; font-size: .9375rem; box-shadow: var(--cien-maly); }
  .start__siatka, .o-mnie__siatka, .pytania__siatka, .kontakt__siatka, .podstrona-start__siatka, .artykul__siatka { grid-template-columns: minmax(0, 1fr); }
  .o-mnie__lewa, .pytania__lewa, .spis { position: static; }
  .osoba { display: grid; grid-template-columns: minmax(0, 1fr); }
  .osoba__plama { width: min(100%, 340px); }
  .osoba__karta { margin: -56px auto 0; }
  .filar, .filar--1, .filar--2, .filar--3, .filar--4, .filar--5 { grid-column: 1 / -1; grid-row: auto; }
  .filar--5 { grid-template-columns: minmax(0, 1fr); }
  .mozaika-sytuacji { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kafel--a, .kafel--b, .kafel--c { grid-column: 1 / -1; grid-row: auto; }
  .kafel--d { grid-column: span 1; }
  .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .krok::after { display: none; }
  .partnerzy__siatka { grid-template-columns: minmax(0, 1fr); }
  .partnerzy__dol { grid-template-columns: minmax(0, 1fr); }
  .dolny-pasek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linia); box-shadow: 0 -10px 24px -18px rgba(18, 48, 90, .5); transition: transform .2s ease; }
  .dolny-pasek a { min-height: 52px; }
  .dolny-pasek.ukryty { transform: translateY(110%); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .porownanie, .po-co, .powiazane, .mozaika-co__dol { grid-template-columns: minmax(0, 1fr); }
  .mozaika-co { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mozaika-co .poz, .mozaika-co .poz:nth-child(1), .mozaika-co .poz:nth-child(2) { grid-column: span 1; }
  .mozaika-co .poz:nth-child(1) { grid-column: 1 / -1; }
  .wezwanie { grid-template-columns: minmax(0, 1fr); }
  .zakladki { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .zakladka { min-height: 60px; }
}
@media (max-width: 700px) {
  body { font-size: 1rem; }
  .zetony { gap: 8px; }
  .zeton { padding: 10px 12px; font-size: .9375rem; gap: 10px; }
  .co-typ__siatka { grid-template-columns: minmax(0, 1fr); }
  .wiarygodnosc ul { grid-template-columns: minmax(0, 1fr); }
  .wiarygodnosc li { border-left: 0 !important; border-top: 2px dashed var(--linia); }
  .wiarygodnosc li:first-child { border-top: 0; }
  .mozaika-sytuacji { grid-template-columns: minmax(0, 1fr); }
  .kafel--d { grid-column: 1 / -1; }
  .kroki { grid-template-columns: minmax(0, 1fr); }
  .liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liczba--szeroka { grid-column: 1 / -1; }
  .zasady { grid-template-columns: minmax(0, 1fr); }
  .szkolenia-lista { grid-template-columns: minmax(0, 1fr); }
  .szkolenia__na-miejscu > ul { columns: 1; }
  .mozaika-wiedzy { grid-template-columns: minmax(0, 1fr); }
  .zajawka--duza, .zajawka--srednia, .nastepny-krok { grid-column: auto; grid-row: auto; }
  .formularz__siatka, .termin__pola { grid-template-columns: minmax(0, 1fr); }
  .odhaczone { grid-template-columns: minmax(0, 1fr); }
  .kalk__pole { grid-template-columns: minmax(0, 1fr); }
  .szuflada summary { grid-template-columns: 44px 1fr 32px; gap: 12px; padding: 14px; }
  .szuflada summary .ikona { width: 44px; height: 44px; }
  .szuflada__tresc { padding: 0 16px 18px; }
  .lista-przed { grid-template-columns: minmax(0, 1fr); }
  .mozaika-co { grid-template-columns: minmax(0, 1fr); }
  .mozaika-co .poz { grid-column: auto !important; }
  .os-czasu::before { left: 62px; }
  .os-czasu li { grid-template-columns: 52px 1fr; gap: 26px; }
  .os-czasu li::before { left: 56px; }
  .os-czasu time { font-size: .9375rem; }
  /* Tabela „kto może": na wąskim ekranie wiersze jako karty */
  .tabela--karty thead { display: none; }
  .tabela--karty tr { display: block; border-bottom: 1px solid var(--linia); padding: 10px 0; }
  .tabela--karty td { display: block; border: 0; padding: 2px 0; }
  .tabela--karty td[data-etykieta]::before { content: attr(data-etykieta) ": "; font-weight: 700; color: var(--szary); font-size: .8125rem; }
  .test-grupy { columns: 1; }
}
@media (max-width: 400px) {
  .zetony { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeton { flex-direction: column; align-items: flex-start; min-height: 88px; }
  .logo__nazwa span { display: none; }
  .menu-mobilne__proste { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Druk: lista 18 punktów na jedną stronę A4 ---------- */
@media print {
  body.druk-lista { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  body.druk-lista > *:not(main) { display: none !important; }
  body.druk-lista main > *:not(#narzedzia) { display: none !important; }
  body.druk-lista #narzedzia { padding: 0; background: #fff; }
  body.druk-lista .skrzynka { background: #fff; color: #000; padding: 0; border-radius: 0; }
  body.druk-lista .skrzynka__naglowek, body.druk-lista .zakladki, body.druk-lista #kalkulator, body.druk-lista #termin-szkolenia, body.druk-lista .panel__wynik, body.druk-lista .test-noty, body.druk-lista .panel__opis, body.druk-lista #test .tytul-narzedzia, body.druk-lista .licznik-mini { display: none !important; }
  body.druk-lista #test { display: block !important; background: #fff; padding: 0; }
  body.druk-lista .panel__siatka { display: block; }
  body.druk-lista .druk-naglowek { display: block; margin-bottom: 8pt; }
  body.druk-lista .druk-naglowek h3 { font-size: 16pt; margin: 0 0 2pt; color: #000; }
  body.druk-lista .druk-naglowek p { margin: 0 0 2pt; font-size: 11pt; }
  body.druk-lista .test-grupy { columns: 2; column-gap: 14pt; }
  body.druk-lista .test-grupy fieldset { background: #fff; padding: 0; margin: 0 0 8pt; break-inside: avoid; }
  body.druk-lista .test-grupy legend { font-size: 12pt; color: #000; }
  body.druk-lista .punkt { background: none !important; padding: 2pt 0; margin: 0; break-inside: avoid; grid-template-columns: 16pt 1fr; gap: 6pt; }
  body.druk-lista .punkt input { width: 13pt; height: 13pt; border: 1.5pt solid #000; border-radius: 2pt; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.druk-lista .punkt input:checked { background: #fff; }
  body.druk-lista .punkt input::after { border-color: #000; }
  body.druk-lista .punkt__tresc, body.druk-lista .punkt__pod, body.druk-lista .pomagam { color: #000; background: none; font-size: 10.5pt; }
  body.druk-lista .pomagam { padding: 0; font-weight: 700; }
  body.druk-lista .druk-stopka { display: block !important; margin-top: 8pt; font-size: 10pt; border-top: 1pt solid #000; padding-top: 4pt; }
  @page { size: A4; margin: 14mm; }
}
.druk-stopka { display: none; }


/* =====================================================================
   V2 (11.11.2026): 39 stron, pasek kontaktu, kreator planu, karty narzędziowe, materiały do wypełnienia.
   Ten sam język wersji 5: narzędzie najpierw, jeden wzór panelu wyniku, mozaika o nierównych polach.
   ===================================================================== */
.js .js-tylko[hidden] { display: none !important; }
.no-js .js-tylko { display: none !important; }

/* Pasek kontaktu nad paskiem narzędzi (duży ekran); na telefonie ikony w nagłówku */
.pasek-kontaktu { background: var(--granat); color: #fff; font-size: .875rem; }
.pasek-kontaktu__w { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; min-height: 40px; }
.pasek-kontaktu__opis { color: #DCE6F8; }
.pasek-kontaktu__linki { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pasek-kontaktu a, .kontakt-lista a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: #fff; text-decoration: none; font-weight: 600; }
.pasek-kontaktu a:hover, .kontakt-lista a:hover { text-decoration: underline; color: #fff; }
.pasek-kontaktu svg, .kontakt-lista svg { width: 18px; height: 18px; color: var(--zolty); flex: none; }
.pasek-kontaktu :focus-visible, .kontakt-lista :focus-visible { outline-color: var(--zolty); }
.kontakt-lista { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 10px 0; }
.kontakt-ikony { display: none; }
.menu-mobilne .kontakt-lista a { color: var(--granat); }
.menu-mobilne .kontakt-lista svg { color: var(--niebieski); }
.naglowek { top: 0; }

/* Małe panele menu (Twój plan, Cennik, Szkolenia, Wiedza) */
.panel-maly { width: 360px; left: 0; transform: none; max-height: calc(100vh - 150px); overflow-y: auto; }
.panel-maly ul { list-style: none; margin: 0; padding: 0; }
.panel-maly li a { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 9px 10px; border-radius: 10px; color: var(--granat); text-decoration: none; font-weight: 600; font-size: .9688rem; line-height: 1.35; }
.panel-maly li a:hover { background: var(--tlo); }
.panel-maly li a svg { width: 22px; height: 22px; flex: none; color: var(--niebieski); margin-top: 1px; }
.panel-maly li a small { display: block; font-weight: 500; color: var(--szary); font-size: .8125rem; margin-top: 2px; }
.panel-maly li a .cena-m { margin-left: auto; font-size: .8125rem; color: var(--szary); white-space: nowrap; padding-left: 8px; }
.panel-menu__narzedzia { border-top: 1px solid var(--linia); margin-top: 8px !important; padding-top: 8px !important; }
.panel-menu__wszystkie { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; border-top: 1px solid var(--linia); padding-top: 8px; font-weight: 700; }
.panel-menu__wszystkie a { display: inline-flex; align-items: center; min-height: 44px; }
.menu > li:nth-last-child(-n+3) > .panel-maly { left: auto; right: 0; }
.panel-uslugi { top: 136px; }

/* Blok „Jak skorzystać z tej strony" */
.przewodnik { padding: 0 0 clamp(28px, 4vw, 44px); }
.przewodnik__w { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; background: var(--niebieski-jasny); border-radius: var(--r-karta); padding: 18px 22px; }
.przewodnik__etykieta { font-size: .8125rem; font-weight: 700; color: var(--szary); margin: 0 0 2px; }
.przewodnik__tytul { font-family: var(--font-tytul); font-weight: 760; font-size: 1.3125rem; line-height: 1.25; margin: 0 0 4px; }
.przewodnik__tekst > p:last-of-type { margin-bottom: 6px; }
.przewodnik__wiecej summary { cursor: pointer; font-weight: 700; color: var(--link); min-height: 44px; display: inline-flex; align-items: center; }
.przewodnik__wiecej dl { margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.przewodnik__wiecej dt { font-weight: 700; font-size: .875rem; color: var(--szary); }
.przewodnik__wiecej dd { margin: 2px 0 0; }
.przewodnik__akcje { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Karty narzędziowe usług (oferta, działy) */
.karty-narz { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.karty-narz__tytul { margin: 32px 0 14px; }
.karta-narz { display: flex; flex-direction: column; gap: 6px; background: var(--bialy); border-radius: var(--r-karta); padding: 20px 22px; border: 2px solid transparent; }
.sekcja--biala .karta-narz { background: var(--tlo); }
.karta-narz:hover { border-color: var(--granat); }
.karta-narz h3 { font-size: 1.3125rem; margin: 0; }
.karta-narz h3 a { color: var(--granat); text-decoration: none; }
.karta-narz h3 a:hover { text-decoration: underline; }
.karta-narz > p { margin: 0; }
.karta-narz__obszar { display: inline-flex; align-items: flex-start; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--szary); margin: 0; line-height: 1.35; }
.karta-narz__obszar svg { width: 16px; height: 16px; flex: none; }
.karta-narz__cena { margin-top: auto !important; padding-top: 8px; }
.karta-narz__cena .kwota { font-size: 1.375rem; background: var(--zolty-jasny); border-radius: 8px; padding: 2px 10px; white-space: normal; }
.karta-narz__akcje { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; }
.karta-narz:first-child { grid-column: span 2; }
@media (max-width: 700px) { .karta-narz:first-child { grid-column: auto; } }

.sekcja-dzialu { padding: clamp(40px, 5vw, 64px) 0; }
.sekcja-dzialu--jasna { background: var(--bialy); }
.sekcja-dzialu--jasna .karta-narz { background: var(--tlo); }
.sekcja-dzialu__glowa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; align-items: end; margin-bottom: 18px; }
.sekcja-dzialu__glowa h2 { margin: 6px 0 8px; }
.sekcja-dzialu__glowa h2 a { color: var(--granat); text-decoration: none; }
.sekcja-dzialu__glowa p { max-width: 46rem; margin: 0; }
.sekcja-dzialu__akcje { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

/* Wybór sytuacji (dział) i panel wyniku jako narzędzie */
.wynik--wybor .wybor-syt__lista { display: grid; gap: 8px; margin: 6px 0 12px; }
.wybor-syt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--linia); background: var(--bialy); color: var(--granat); font: 700 1rem/1.25 var(--font-tekst); text-decoration: none; text-align: left; cursor: pointer; }
.wybor-syt svg { width: 22px; height: 22px; color: var(--niebieski); flex: none; }
.wybor-syt:hover { border-color: var(--granat); color: var(--granat); }
.wybor-syt[aria-pressed="true"] { background: var(--granat); color: #fff; border-color: var(--granat); }
.wybor-syt[aria-pressed="true"] svg { color: var(--zolty); }
.wybor-syt[aria-pressed="true"]:focus-visible { outline-color: var(--niebieski); }
.wynik--cena .wynik__glowny { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.wynik > svg { width: 30px; height: 30px; color: var(--niebieski); margin-bottom: 6px; }
.dopisek-duzy { display: grid; grid-template-columns: 32px 1fr; gap: 12px; background: var(--zolty-jasny); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; }
.dopisek-duzy svg { width: 28px; height: 28px; }
.dopisek-duzy p { margin: 0; }
.dzial-opis { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: start; }
.schemat { margin: 0; }
.schemat ol { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; counter-reset: s; }
.schemat li { background: var(--tlo); border-radius: 14px; padding: 12px 16px; }
.schemat li p { margin: 0; }
.schemat__kol { font-weight: 700; }
.schemat__dok { font-family: var(--font-tytul); font-weight: 760; font-size: 1.125rem; margin-top: 4px !important; }
.mat-i-pyt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: start; }
.mat-i-pyt h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* Karty materiałów */
.karty-mat { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.karta-mat { background: var(--bialy); border-radius: var(--r-karta); padding: 20px 22px; border-top: 6px solid var(--zolty); display: flex; flex-direction: column; gap: 6px; }
.karta-mat h3 { font-size: 1.25rem; margin: 0; }
.karta-mat h3 a { color: var(--granat); text-decoration: none; }
.karta-mat p { margin: 0; }
.karta-mat__kicker { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--szary); }
.karta-mat__kicker svg { width: 16px; height: 16px; }
.karta-mat__sekcje { margin: 4px 0; padding-left: 1.1em; font-size: .9375rem; }
.karta-mat .strzalka { margin-top: auto; }

/* Kroki: trzy i w pionie */
.kroki--trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kroki--pion { grid-template-columns: minmax(0, 1fr); }
.kroki--pion .krok::after { display: none; }
.kroki--pion .krok { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; }
.kroki--pion .krok::before { grid-row: span 3; }
.kroki--pion .krok h3, .kroki--pion .krok p, .kroki--pion .krok a { grid-column: 2; }
.pakiet { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.pakiet li { background: var(--bialy); border-radius: 12px; padding: 10px 14px; }
.pakiet b { display: block; }
.skrzynka--jedna .panel + .panel { margin-top: 0; }
.skrzynka--jedna { margin: 0; }

/* Strona usługi: mozaika pól */
.mozaika-usl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.mozaika-usl__pole { grid-column: span 4; background: var(--tlo); border-radius: var(--r-karta); padding: 20px 22px; }
.mozaika-usl__pole h2 { font-size: 1.375rem; }
.mozaika-usl__pole ul { margin: 0; padding-left: 1.1em; }
.mozaika-usl__pole li + li { margin-top: 6px; }
.mozaika-usl__pole--duze { grid-column: span 7; background: var(--granat); color: #fff; }
.mozaika-usl__pole--duze h2, .mozaika-usl__pole--duze .start__nadtytul { color: #fff; }
.mozaika-usl__pole--duze .historia { margin: 0; }
.mozaika-usl__pole--zakres { grid-column: span 5; }
.mozaika-usl__pole--podstawa { grid-column: 1 / -1; background: var(--niebieski-jasny); }
.mozaika-usl__pole--podstawa .podstawa { font-size: .9375rem; color: var(--granat); }
.odhaczone--jedna { grid-template-columns: minmax(0, 1fr) !important; }
.lista-prz { display: grid; gap: 4px; background: var(--bialy); border-radius: 18px; padding: 14px 18px; }
.gdzie { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.gdzie a { display: block; background: var(--bialy); border-radius: 14px; padding: 12px 16px; color: var(--granat); text-decoration: none; border: 2px solid transparent; }
.gdzie a:hover { border-color: var(--granat); color: var(--granat); }
.gdzie__droga { display: block; font-size: .8125rem; color: var(--szary); font-weight: 600; }
.lista-pod { margin: 14px 0; }
.tabela--ceny th[scope="row"] { font-weight: 600; }
.tabela--ceny th[scope="row"] .maly { display: block; font-weight: 400; margin-top: 2px; }
.tabela--ceny .num { white-space: normal; min-width: 7.5em; }

/* Kreator „Twój plan" */
.kreator { display: grid; gap: 22px; }
.kreator__krok { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
.kreator__krok h2 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: 6px 0 4px; }
.kreator__nr { width: 52px; height: 52px; border-radius: 50%; background: var(--zolty); color: var(--granat); display: grid; place-items: center; font: 800 1.5rem/1 var(--font-tytul); margin: 0; }
.kreator__podpis { color: #DCE6F8 !important; margin-bottom: 12px; }
.kreator__drogi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.zeton--droga { min-height: 92px; flex-direction: row; align-items: flex-start; }
.zeton--droga span small { display: block; font-weight: 500; font-size: .875rem; color: var(--szary); margin-top: 4px; }
.zeton--droga[aria-pressed="true"] small { color: #DCE6F8; }
.zeton--droga[aria-pressed="true"] { border-color: var(--zolty); }
.kreator__sytuacje { display: flex; flex-wrap: wrap; gap: 10px; }
.kreator__sytuacje .wybor-syt { min-width: 220px; }
.kreator__podpowiedz { margin-top: 12px; }
.plan-pusty { background: var(--tlo); border-radius: var(--r-karta); padding: 24px; text-align: left; }
.droga-planu { margin-bottom: 28px; }
.droga-planu__glowa { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; margin-bottom: 14px; }
.droga-planu__glowa > svg { width: 44px; height: 44px; color: var(--niebieski); }
.droga-planu__glowa h2 { margin-bottom: 6px; }
.etap-planu { background: var(--tlo); border-radius: var(--r-duzy); padding: clamp(18px, 2.6vw, 32px); margin-bottom: 14px; }
.etap-planu__glowa h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.krok-planu { background: var(--bialy); border-radius: var(--r-karta); padding: clamp(18px, 2.4vw, 28px); margin-top: 14px; box-shadow: var(--cien); position: relative; overflow: hidden; }
.krok-planu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--zolty); }
.krok-planu__etap { font-weight: 800; font-family: var(--font-tytul); color: var(--szary); margin: 0 0 4px; }
.krok-planu h4 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); margin-bottom: 8px; }
.krok-planu h4:focus { outline: none; }
.krok-planu h4:focus-visible { outline: 3px solid var(--niebieski); outline-offset: 4px; }
.krok-planu h5 { font: 700 .9375rem/1.3 var(--font-tekst); color: var(--szary); margin: 0 0 6px; }
.krok-planu__tekst { font-size: 1.0625rem; max-width: 46rem; }
.krok-planu__siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.krok-planu__siatka > div { background: var(--tlo); border-radius: 14px; padding: 14px 16px; }
.krok-planu__siatka ul { margin: 0; padding-left: 1.1em; }
.krok-planu__wynik { background: var(--zolty-jasny) !important; }
.krok-planu__wynik p { margin: 0; font-weight: 600; }
.krok-planu__dol { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px 24px; }
.krok-planu__lista { display: grid; gap: 2px; }
.krok-planu__uslugi { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.krok-planu__uslugi a { font-weight: 700; }
.krok-planu__nawig { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 16px; }
.krok-planu__nawig .btn { white-space: normal; text-align: left; }
.plan-akcje { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.plan-podpis { max-width: 52rem; }
.no-js .krok-planu { box-shadow: none; }

/* Filtr branż */
.filtr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.filtr__etyk { font-weight: 700; margin-right: 4px; }
.filtr__el { min-height: 44px; padding: 8px 16px; border-radius: 99px; border: 2px solid var(--granat); background: var(--bialy); color: var(--granat); font: 700 .9375rem/1.2 var(--font-tekst); cursor: pointer; }
.filtr__el[aria-pressed="true"] { background: var(--granat); color: #fff; }
.filtr__el[aria-pressed="true"]:focus-visible { outline-color: var(--niebieski); }
.filtr__stan { margin: 0 0 16px; min-height: 1.5em; }

/* Materiały: karty pełne do wypełnienia */
.karty-pelne { display: grid; gap: 16px; }
.karta-pelna { background: var(--tlo); border-radius: var(--r-duzy); padding: clamp(20px, 3vw, 36px); border-top: 8px solid var(--zolty); }
.karta-pelna h2 { margin-top: 6px; }
.karta-pelna__sekcje { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.karta-pelna__sek { background: var(--bialy); border-radius: 16px; padding: 16px 18px; }
.karta-pelna__sek h3 { font-size: 1.125rem; }
.karta-pelna__sek ul { margin: 0; padding-left: 1.1em; font-size: .9688rem; }
.karta-pelna__notatki { background: var(--bialy); border-radius: 18px; padding: 16px 18px; }
.karta-pelna__notatki h3 { font-size: 1.125rem; }
.karta-pelna__pola { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.karta-pelna__pola textarea { min-height: 68px; }

/* Przykład lokalu i rzut (statyczny; interaktywny rzut należy do wersji 3) */
.przyklad { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px 48px; align-items: start; }
.przyklad__rzut { margin: 0; background: var(--tlo); border-radius: var(--r-duzy); padding: 18px; position: sticky; top: calc(var(--naglowek-h) + 20px); }
.rzut { width: 100%; height: auto; }
.przyklad-glowna { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px 48px; align-items: center; }
.przyklad-glowna__rzut { background: var(--tlo); border-radius: var(--r-duzy); padding: 16px; }

/* Strona główna V2 */
.test-skrot { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.test-skrot li { background: var(--bialy); border-radius: 16px; padding: 14px 16px; }
.test-skrot b { display: block; font-family: var(--font-tytul); font-size: 1.125rem; }
.etapy-lokalu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kafel--etap { min-height: 220px; }
.kafel__nr { width: 44px; height: 44px; border-radius: 50%; background: var(--granat); color: #fff !important; display: grid; place-items: center; font: 800 1.25rem/1 var(--font-tytul); margin: 0 0 12px !important; }
.naglowek-sekcji--z-akcja { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; max-width: none; }
.naglowek-sekcji--z-akcja h2 { margin: 0; }
.drogi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.drogi li { grid-column: span 3; }
.drogi li:nth-child(-n+3) { grid-column: span 4; }
.droga-kafel { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; height: 100%; background: var(--tlo); border-radius: var(--r-karta); padding: 18px 18px; color: var(--granat); text-decoration: none; border: 2px solid transparent; }
.droga-kafel:hover { border-color: var(--granat); color: var(--granat); }
.droga-kafel svg { width: 36px; height: 36px; color: var(--niebieski); }
.droga-kafel b { display: block; font-family: var(--font-tytul); font-size: 1.1875rem; line-height: 1.2; margin-bottom: 4px; }
.droga-kafel small { display: block; color: var(--szary); margin-top: 6px; font-size: .8125rem; }
.filary--szesc .filar--5 { grid-column: span 6; display: block; }
.filary--szesc .filar--6 { grid-column: span 6; background: var(--bialy); }
.uslugi-krotko { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.uslugi-krotko li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; align-items: baseline; background: var(--tlo); border-radius: 12px; padding: 9px 12px; }
.filar--4 .uslugi-krotko li { background: var(--bialy); }
.uslugi-krotko a { font-weight: 700; color: var(--granat); }
.filar--4 .karta-narz__akcje .btn--obrys { background: transparent; color: #fff; border-color: #fff; }
.filar--4 .karta-narz__akcje .strzalka, .filar--4 .karta-narz__obszar { color: #fff; }
.filar .karta-narz__obszar { margin-bottom: 6px; }
.o-mnie-skrot { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 56px; align-items: center; }
.liczby--rzad { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 18px 0; }
.wezwanie--kontakt .kontakt-lista { margin-top: 14px; }

/* Portret: ten sam kadr (zaokrąglony prostokąt ze ściętym rogiem) dla obu wariantów */
.kadr--popiersie, .kadr--kwadrat { aspect-ratio: auto; }
.kadr--popiersie img, .kadr--kwadrat img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.kadr--popiersie { aspect-ratio: 4 / 5; }
.kadr--kwadrat { aspect-ratio: 1 / 1; }
.osoba__plama .kadr { max-width: 400px; }
.o-mnie__portret { max-width: 420px; justify-self: end; width: 100%; }
.o-mnie__portret .maly { margin-top: 10px; }
.motto { font-family: var(--font-tytul); font-weight: 760; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; margin-bottom: 20px; }
.kadr--maly { width: 96px; border-radius: 18px 18px 18px 4px; }
.autor__foto { background: none; border-radius: 0; overflow: visible; width: 96px; height: auto; }
.kadr--sredni { width: 160px; border-radius: 26px 26px 26px 4px; flex: none; }
.kontakt__osoba { display: flex; gap: 20px; align-items: center; background: var(--bialy); border-radius: var(--r-karta); padding: 18px; box-shadow: var(--cien); }
.kontakt__osoba .osoba__zdanie { display: block !important; }
.lista-narz { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lista-narz a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; color: var(--granat); }
.lista-narz svg { width: 22px; height: 22px; color: var(--niebieski); }
.podglad { background: var(--bialy); border-radius: 18px; padding: 16px 18px; border: 2px solid var(--granat); }
.podglad h3:focus { outline: none; }
.podglad h3:focus-visible { outline: 3px solid var(--niebieski); outline-offset: 3px; }
.podglad textarea { width: 100%; min-height: 220px; border: 2px solid var(--ramka); border-radius: var(--r-pole); padding: 12px; font: 500 1rem/1.5 var(--font-tekst); color: var(--granat); background: var(--tlo); }
.nk-tytul { font-size: 1.375rem !important; margin: 0 0 10px !important; }

/* Stopka V2 */
.stopka__siatka { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr); gap: 24px 40px; }
.stopka__adres { font-style: normal; margin-top: 12px; color: #DCE6F8; }
.stopka__kontakt { flex-direction: column; margin: 0; }
.stopka .kontakt-lista a { min-height: 44px; }

/* ---------- V2: szerokości ---------- */
@media (max-width: 1240px) {
  .pasek-kontaktu__opis { display: none; }
  .menu__el { padding: 8px 8px; font-size: .9375rem; }
}
@media (max-width: 1100px) {
  .dzial-opis, .mat-i-pyt, .przyklad, .przyklad-glowna, .o-mnie-skrot { grid-template-columns: minmax(0, 1fr); }
  .przyklad__rzut { position: static; }
  .krok-planu__siatka { grid-template-columns: minmax(0, 1fr); }
  .drogi li, .drogi li:nth-child(-n+3) { grid-column: span 6; }
  .mozaika-usl__pole, .mozaika-usl__pole--duze, .mozaika-usl__pole--zakres { grid-column: span 6; }
  .stopka__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stopka__prawa { grid-column: 1 / -1; }
}
@media (max-width: 959px) {
  .pasek-kontaktu { display: none; }
  .kontakt-ikony { display: flex; gap: 2px; margin-left: auto; }
  .kontakt-ikony a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--granat); }
  .kontakt-ikony a:hover { background: var(--niebieski-jasny); }
  .kontakt-ikony svg { width: 22px; height: 22px; }
  .logo { margin-right: 0; }
  .naglowek__menu-btn { margin-left: 4px; }
  .przewodnik__w { grid-template-columns: minmax(0, 1fr); }
  .przewodnik__akcje { justify-content: flex-start; }
  .sekcja-dzialu__glowa { grid-template-columns: minmax(0, 1fr); }
  .etapy-lokalu, .kroki--trzy, .karta-pelna__sekcje { grid-template-columns: minmax(0, 1fr); }
  .krok-planu__dol { grid-template-columns: minmax(0, 1fr); }
  .filary--szesc .filar--5, .filary--szesc .filar--6 { grid-column: 1 / -1; }
  .kontakt__osoba { flex-direction: column; align-items: flex-start; }
  .o-mnie__portret { justify-self: start; max-width: 320px; }
}
@media (max-width: 700px) {
  .drogi li, .drogi li:nth-child(-n+3) { grid-column: 1 / -1; }
  .mozaika-usl__pole, .mozaika-usl__pole--duze, .mozaika-usl__pole--zakres { grid-column: 1 / -1; }
  .przewodnik__wiecej dl { grid-template-columns: minmax(0, 1fr); }
  .kreator__krok { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kreator__nr { width: 40px; height: 40px; font-size: 1.125rem; }
  .kreator__sytuacje .wybor-syt { min-width: 0; width: 100%; }
  .stopka__siatka { grid-template-columns: minmax(0, 1fr); }
  .kafel--etap { min-height: 0; }
}
@media (max-width: 560px) {
  .naglowek__pasek { gap: 4px; padding-left: 8px; }
  .logo { gap: 8px; }
  .logo__nazwa { font-size: .9375rem; line-height: 1.05; max-width: 5.6em; white-space: normal; }
  .logo__nazwa span { display: none; }
  .kontakt-ikony a { width: 40px; }
  .naglowek__menu-btn { padding: 8px 10px; min-height: 44px; gap: 6px; }
  .uslugi-krotko .metka { white-space: normal; }
}
@media (max-width: 400px) {
  .logo__nazwa { font-size: .875rem; }
  .logo img { width: 32px; height: 32px; }
  .kontakt-ikony a { width: 40px; }
  .naglowek__menu-btn { padding: 8px 10px; }
}

/* ---------- Druk planu ---------- */
@media print {
  body.druk-plan > *:not(main) { display: none !important; }
  body.druk-plan main > *:not(.plan-tresc) { display: none !important; }
  body.druk-plan .krok-planu { display: block !important; box-shadow: none; break-inside: avoid; border: 1pt solid #000; }
  body.druk-plan .krok-planu__nawig, body.druk-plan .plan-akcje, body.druk-plan .pasek { display: none !important; }
  body.druk-plan { background: #fff; color: #000; padding: 0; }
}
/* Długie adresy źródeł w artykułach łamią się zamiast poszerzać stronę */
.tresc-art, .nastepny-krok, .podstawa { overflow-wrap: break-word; }
.tresc-art a, .nastepny-krok a { overflow-wrap: anywhere; }
.metka { color: var(--granat); }
.skroty { gap: 6px; }
.skroty a { padding: 8px 12px 8px 10px; font-size: .9063rem; }
.znaczek-zasieg { border-radius: 14px; align-items: flex-start; max-width: 40rem; }
.znaczek-zasieg svg { margin-top: 2px; flex: none; }

.podstrona-start + .kreator-sekcja { padding-top: clamp(8px, 2vw, 24px); }
.krok-planu, .droga-planu { scroll-margin-top: 120px; }