/*
 * Asevra - serwis o ubezpieczeniach dla firm. Marka: brandbook Asevra B3 v1.0 i specyfikacja UX/UI (docs/marka/asevra).
 * Kolory: grafit = treść, nagłówki i główne CTA (biały tekst); stalowy niebiesko-szary (--akcent) = linki, fokus, elementy wspierające;
 * miedź (--bursztyn) = akcent marki i sygnał - NIGDY kolor drobnego tekstu na bieli (3,4:1), tekst miedziany tylko w --miedz-tekst.
 * Dominuje biel i ciepłe neutralne tła; grafit nie tworzy rozległych ciężkich bloków (brandbook, rozdz. 04). Krój Inter (400-700), lokalnie (OFL).
 * Kalkulatory, raport, słownik i formularze: narzedzia.css (ładowany tylko tam, gdzie są - Komponenty::styl, po tym pliku).
 * Porządek pliku: jedna definicja na regułę, tokeny tylko w :root; zmiany wpisywać w bloku komponentu, nie dopisywać warstw na końcu.
 */

@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	/* tylko polskie litery spoza latin (5 KB zamiast 74 KB - font dochodzi przed pierwszym malowaniem; audyt 2, S-W1);
	   inne znaki latin-ext (np. š, č w nazwach) biorą font zastępczy */
	src: url(../fonts/inter-latin-ext-pl-wght-normal.woff2?v=1) format("woff2-variations");
	unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	/* ?v=1 - cache na rok; przy wymianie pliku podbić wersję tu i w uklad.php (preload; audyt 3, S-D1) */
	src: url(../fonts/inter-latin-wght-normal.woff2?v=1) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* font zastępczy na czas wczytywania Inter: lokalny Arial (Windows, macOS, iOS) albo Roboto (Android) przeskalowany do metryk Inter
   (średnia szerokość znaku, wysokość wiersza) - tekst po zamianie fontu nie łamie się inaczej i nie przesuwa układu (audyt 2, S-W1).
   Wartości z pomiaru w Chrome (zdanie 17 px: Inter 400 = 1222 px, Arial 1143 px, Inter 600-700 ok. 1252 px, Arial Bold 1229 px) i metryk
   Inter 4 (UPM 2048, ascent 1984, descent 494); dla Roboto z metryk (śr. szerokość 0,445 em wobec 0,476 em Inter). */
@font-face { font-family: "Inter zastepczy"; font-weight: 100 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 106.9%; ascent-override: 90.6%; descent-override: 22.6%; line-gap-override: 0%; }
@font-face { font-family: "Inter zastepczy"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 102%; ascent-override: 95%; descent-override: 23.6%; line-gap-override: 0%; }
@font-face { font-family: "Inter zastepczy Roboto"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 107%; ascent-override: 90.5%; descent-override: 22.5%; line-gap-override: 0%; }
:root {
	/* tokeny marki Asevra B3 (brandbook, rozdz. 04; docs/marka/asevra/asevra.tokens.css) - paleta interfejsu, nie do przemalowywania logo.
	   Nazwy zmiennych zostały z rdzenia (granat = rola „kolor fundamentu”), wartości - B3. */
	--granat: #1F2937;           /* graphite: nagłówki, logotyp, główne CTA (14,7:1 z bielą) */
	--noc: #142B3E;              /* navy z tokenów B3: stopka i nieliczne ciemne moduły */
	--tekst: #1F2937;            /* tekst główny */
	--tekst-slaby: #5A6879;      /* tekst pomocniczy: muted B3 #657486 przyciemniony, bo na Warm Neutral ma 4,36:1 (ten: 5,2:1 z #F7F4F0, 5,7:1 z bielą) */
	--linia: #DBE2E8;            /* border B3: obramowania kart i separatory */
	--tlo-sekcji: #F7F4F0;       /* warm neutral: sekcje, hero, tła */
	--tlo-chlodne: #EDF3F6;      /* pale blue-gray: delikatny podział sekcji („Jak to działa”) */
	--akcent: #4B6B8A;           /* steel blue-gray: linki, fokus, elementy wspierające (5,6:1 z bielą, 5,1:1 z #F7F4F0) */
	--akcent-hover: #1F2937;
	--akcent-tlo: #EDF3F6;       /* jasne tło w kolorze akcentu */
	--cta: #1F2937;              /* przycisk główny: grafit z białym tekstem (brandbook, rozdz. 04) */
	--cta-hover: #142B3E;
	--cta-tekst: #FFFFFF;
	--bursztyn: #C17A4E;         /* copper: akcent marki - kreska nad H2, znaczniki, numery kroków, stan aktywny (nie tekst na bieli: 3,4:1) */
	--miedz-tekst: #9A5A33;      /* miedź przyciemniona do tekstu (etykiety nad H1; 5,4:1 z bielą, 4,9:1 z #F7F4F0) */
	--na-ciemnym: #EDF3F6;       /* akcent graficzny na ciemnym tle */
	--blad: #B91C1C;
	--blad-tlo: #FEF2F2;
	--blad-tekst: #991B1B;
	/* ostrzeżenie bez koloru zbliżonego do miedzi: grafitowa krawędź i znak „!” na neutralnym tle (audyt 1, G-W7, decyzja koordynatora 5) */
	--ostrzezenie: #1F2937;
	--ostrzezenie-na-ciemnym: #FFFFFF;
	--ostrzezenie-tlo: #EDF3F6;
	--miedz-jasna: #E6B48F;      /* miedź rozjaśniona do tekstu na ciemnym tle (nadtytuł hero, min. 4,5:1 z nakładką) */
	--zaznaczenie: #F3DCC9;
	--obramowanie-pola: #7A8699;  /* pola i kafle - kontrast min. 3:1 z bielą (WCAG 1.4.11) */
	--promien-karty: 12px;
	--promien: 8px;              /* przyciski i pola */

	--font-naglowki: "Inter Variable", "Inter zastepczy", "Inter zastepczy Roboto", system-ui, "Segoe UI", Arial, sans-serif;
	--font-tresc: "Inter Variable", "Inter zastepczy", "Inter zastepczy Roboto", system-ui, "Segoe UI", Arial, sans-serif;
	--margines: clamp(16px, 4vw, 48px);
	--wys-naglowka: 68px;
	/* jedna siatka sekcji "tytuł | treść" (5 + 7 z 12 kolumn) */
	--uklad-kolumny: minmax(0, 5fr) minmax(0, 7fr);
	--uklad-odstep: clamp(40px, 6vw, 96px);
	--szer: calc(1200px + 2 * var(--margines)); /* 1200 px treści + marginesy (brandbook B3, rozdz. 06) */
	/* skala typografii (decyzja właściciela 21, ankieta 2026-11-06 - większa niż brandbook B3 48 / 16/25): H1 54/62 (telefon 32/37; H1 podstrony na telefonie 28-32 - krótsze tytuły, G-D8),
	   H2 36/44 (28/35), H3 26/34 (22/29), lead 22/34 (18/28), tekst treści 17/28. Strona główna i podstrony używają tego samego --h1,
	   więc H1 podstrony nigdy nie jest większy od H1 strony głównej. Komponenty używają tokenów, nie własnych rozmiarów. */
	--h1: clamp(2rem, 1.25rem + 2.5vw, 3.375rem);
	--h2: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
	--h3: clamp(1.375rem, 1.2rem + .45vw, 1.625rem);
	--lead: clamp(1.125rem, .95rem + .55vw, 1.375rem);
	--tekst-tresci: 17px;        /* 17/28 */
	--interlinia-tresci: 1.65;
}
@media (min-width: 1200px) { :root { --wys-naglowka: 76px; } }
@media (max-width: 1199.98px) { :root { --wys-naglowka: 64px; } }

/* ---------- podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--wys-naglowka) + 16px); }
body { margin: 0; overflow-x: clip; font: 16px/1.55 var(--font-tresc); /* brandbook B3: tekst bazowy 16/25 */ color: var(--tekst); background: #fff; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-naglowki); font-weight: 700; letter-spacing: -0.02em; color: var(--granat); }
h1 { font-size: var(--h1); line-height: 1.15; margin: 0; }
h2 { font-size: var(--h2); line-height: 1.22; }
h3 { font-size: var(--h3); line-height: 1.3; font-weight: 600; margin: 1.8em 0 0.5em; }
h1, h2 { text-wrap: balance; } /* bez wiszącego pojedynczego słowa (G-D6) */
p { margin: 0 0 1em; }
a { color: var(--granat); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--akcent) 55%, transparent); }
a:hover { color: var(--akcent); }
strong { color: var(--granat); font-weight: 600; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
main:focus { outline: none; }
.kontener { max-width: var(--szer); margin: 0 auto; padding: 0 var(--margines); }
.pomin { position: absolute; left: -9999px; }
.pomin:focus { left: 16px; top: 16px; z-index: 2000; background: #fff; padding: 8px 12px; }
/* tekst tylko dla czytników ekranu */
.dla-czytnikow { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* kadrowanie zdjęć kart i nagłówka (pole zdjecie_pozycja; CSP bez stylów inline) */
.zdjecie--gora { object-position: 50% 15%; }
.zdjecie--dol { object-position: 50% 85%; }
.zdjecie--lewo { object-position: 15% 50%; }
.zdjecie--prawo { object-position: 85% 50%; }
/* fokus na ciemnym tle - biały obrys (niebieski #4B6B8A na granacie ma ok. 2,6:1; A-W4) */
.stopka :focus-visible, .bx-hero :focus-visible, .pas-cta :focus-visible, .karta-cta :focus-visible,
.ramka--firmowe :focus-visible, .panel__kafel--blok :focus-visible, .sciezka__postep :focus-visible, .sciezka-krok__ramka :focus-visible { outline-color: #fff; }
/* link w grafitowym nagłówku karty tabeli (telefon) - biały obrys, stalowy miał 2,6:1 (audyt 1, A-W2) */
@media (max-width: 639.98px) { .tabela--karty tbody tr > :first-child :focus-visible { outline-color: #fff; } }

/* ---------- przyciski i linki akcji ---------- */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; min-height: 44px; border-radius: var(--promien); border: 0; background: var(--cta); color: var(--cta-tekst); font: 600 16px/1.2 var(--font-naglowki); text-decoration: none; cursor: pointer; transition: background-color .2s, box-shadow .2s, transform .2s; }
.przycisk:hover, .przycisk:focus-visible { background: var(--cta-hover); color: var(--cta-tekst); }
.przycisk:active { transform: translateY(1px); }
.przycisk:hover { box-shadow: 0 8px 20px rgba(75, 107, 138, .28); transform: translateY(-1px); }
.przycisk--maly { padding: 11px 20px; font-size: 15px; }
.przycisk--pelny { width: 100%; }
.przycisk--jasny { background: #fff; color: var(--granat); }
.przycisk--jasny:hover, .przycisk--jasny:focus-visible { background: var(--akcent-tlo); color: var(--granat); }
.przycisk--obrys { background: #fff; color: var(--granat); box-shadow: inset 0 0 0 1.5px var(--granat); }
.przycisk--obrys:hover, .przycisk--obrys:focus-visible { background: var(--akcent-tlo); color: var(--granat); }
/* główne wezwanie na granacie (pas CTA, karta CTA; wynik kalkulatora - narzedzia.css): biały przycisk - niebieski miał 2,6:1 do tła (WCAG 1.4.11; G-W9) */
.pas-cta .przycisk, .karta-cta .przycisk { background: #fff; color: var(--granat); }
.pas-cta .przycisk:hover, .pas-cta .przycisk:focus-visible, .karta-cta .przycisk:hover, .karta-cta .przycisk:focus-visible { background: var(--akcent-tlo); color: var(--granat); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.przycisk--przyklejony { display: none; }
.przycisk--zastepczy { visibility: hidden; pointer-events: none; }
@media (max-width: 1199.98px) { .przycisk--zastepczy { display: none; } }
.link-podkreslony { color: var(--granat); font: 500 16px/1.2 var(--font-naglowki); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.link-podkreslony:hover { color: var(--akcent); }
.strzalka { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; transition: background-color .2s, color .2s, border-color .2s; }
.akcje-tresci { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 28px 0 0; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; }
.logo__obraz { display: block; width: auto; height: 36px; }
/* na ciemnym tle (stopka) - kolorowy logotyp na białej plakietce (brandbook: wersja kolorowa tylko na jasnym tle) */
.logo--plakietka { padding: 12px 16px; border-radius: var(--promien); background: #fff; }
.logo--plakietka .logo__obraz { height: 30px; }
@media (min-width: 1200px) { .logo__obraz { height: 40px; } }
@media (max-width: 1199.98px) { .logo__obraz { height: 30px; } }

/* ---------- nagłówek: jeden niski rząd - logo | menu | wyszukiwarka, linki, CTA ---------- */
.naglowek { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--linia); font-family: var(--font-naglowki); }
.naglowek__pasek { display: flex; align-items: center; gap: 32px; max-width: var(--szer); min-height: var(--wys-naglowka); margin: 0 auto; padding: 0 var(--margines); }
.naglowek__logo { flex: none; text-decoration: none; }
.naglowek__burger { display: none; }
/* 768-1199 px: przycisk paska obok "Menu" (poniżej 768 px - przyklejony przycisk na dole ekranu, od 1200 px - przycisk w menu) */
.naglowek__cta { display: none; }
.nawigacja { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nawigacja__lista { display: flex; gap: 0 26px; margin: 0; padding: 0; list-style: none; }
.nawigacja__przelacznik, .nawigacja__link, .nawigacja__pomocniczy, .nawigacja__jezyk, .nawigacja__boczne .przycisk { white-space: nowrap; }
.nawigacja__przelacznik, .nawigacja__link {
	display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; border: 0; background: none; color: var(--granat);
	font: 400 15px/1.2 var(--font-naglowki); text-decoration: none; cursor: pointer;
	background-repeat: no-repeat; background-position: 0 calc(100% - 4px); background-size: 0 2px; transition: background-size .3s ease;
}
.nawigacja__przelacznik:hover, .nawigacja__link:hover, .nawigacja__przelacznik[aria-expanded="true"],
.jest-biezaca > .nawigacja__przelacznik, .jest-biezaca > .nawigacja__link { color: var(--granat); background-size: 100% 2px; }
.panel-otwarty .jest-biezaca > .nawigacja__przelacznik[aria-expanded="false"]:not(:hover) { background-size: 0 2px; }
.nawigacja__przelacznik svg { transition: transform .2s ease; }
.nawigacja__przelacznik[aria-expanded="true"] svg { transform: rotate(180deg); }
.nawigacja__boczne { display: flex; align-items: center; gap: 20px; }
.nawigacja__pomocniczy { color: var(--tekst-slaby); font-size: 15px; text-decoration: none; }
.nawigacja__pomocniczy:hover { color: var(--granat); }
/* „Program poleceń” na podstronach sekcji (aria-current="true") i na niej samej - jak pozycje menu */
.nawigacja__pomocniczy[aria-current] { color: var(--granat); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nawigacja__jezyk { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--tekst-slaby); font: 500 14px/1 var(--font-naglowki); letter-spacing: .04em; text-decoration: none; }
.nawigacja__jezyk:hover { color: var(--granat); }
.nawigacja__szukaj { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; color: var(--granat); text-decoration: none; }
.nawigacja__szukaj:hover { color: var(--akcent); }
.nawigacja__szukaj-tekst { position: absolute; left: -9999px; }
.nawigacja__telefon { display: none; }
/* mega-menu */
.panel__tytul { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; color: var(--granat); font: 600 26px/1.2 var(--font-naglowki); letter-spacing: -0.02em; text-decoration: none; }
.panel__przedrostek { display: none; }
.panel__tytul:hover .strzalka, .panel__kafel:hover .strzalka { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.panel__grupy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.panel__naglowek { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linia); color: var(--tekst-slaby); font: 600 13px/1.3 var(--font-naglowki); letter-spacing: .1em; text-transform: uppercase; }
.panel__naglowek a { color: inherit; text-decoration: none; }
.panel__naglowek a:hover, .panel__naglowek a[aria-current] { color: var(--granat); }
.panel__linki { margin: 0; padding: 0; list-style: none; }
.panel__linki li + li { margin-top: 8px; }
.panel__linki a { color: var(--granat); font: 400 16px/1.35 var(--font-tresc); text-decoration: none; }
.panel__linki a:hover, .panel__linki a[aria-current] { color: var(--akcent); text-decoration: underline; text-decoration-color: var(--akcent); }
/* link "Wszystkie (N)" pod skróconą listą grupy */
.panel__linki .panel__wszystkie { margin-top: 14px; }
.panel__linki .panel__wszystkie a { display: inline-flex; align-items: center; gap: 8px; color: var(--akcent); font: 500 15px/1.3 var(--font-naglowki); }
.panel__linki .panel__wszystkie a:hover { color: var(--akcent-hover); }
/* panel Wiedza: skróty pod tytułem */
.panel__skroty { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: -12px 0 28px; padding: 0; list-style: none; }
.panel__skroty a { color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); text-decoration: underline; text-decoration-color: var(--akcent); text-underline-offset: 5px; }
.panel__skroty a:hover { color: var(--akcent); }
/* kafel obok grup */
.panel__kafel { display: flex; flex-direction: column; align-self: start; gap: 10px; padding: 28px; border-radius: 12px; background: var(--akcent-tlo); color: var(--granat); text-decoration: none; }
.panel__kafel:hover { color: var(--granat); }
.panel__kafel-tytul { font: 600 20px/1.25 var(--font-naglowki); letter-spacing: -0.01em; }
.panel__kafel-tekst { color: var(--tekst); font: 400 16px/1.45 var(--font-tresc); }
.panel__kafel-cta { display: inline-flex; align-items: center; gap: 12px; padding-top: 14px; color: var(--akcent); font: 500 15px/1.2 var(--font-naglowki); }
/* kafel-blok: granat nocy, kadr ciepłych pięter, linki i przycisk */
.panel__kafel--blok { display: block; align-self: start; padding: 0; overflow: hidden; border-radius: 14px; background: var(--noc); color: #fff; }
.panel__kafel-zdjecie { display: block; width: 100%; height: 112px; object-fit: cover; }
.panel__kafel-tresc { padding: 22px 24px 24px; }
.panel__kafel--blok .panel__kafel-tytul { margin: 0 0 6px; color: #fff; }
.panel__kafel--blok .panel__kafel-tekst { margin: 0 0 14px; color: #DBE2E8; font-size: 15px; }
.panel__kafel-linki { margin: 0 0 18px; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .14); }
.panel__kafel-linki a { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 500; text-decoration: none; }
.panel__kafel-linki a svg { color: var(--na-ciemnym); transition: transform .2s; }
.panel__kafel-linki a:hover svg { transform: translateX(3px); }
.panel__kafel--blok .przycisk { width: 100%; justify-content: center; }
/* karty narzędzi (Kalkulatory) */
.panel__narzedzia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.panel__karty { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.panel__karty li { display: flex; }
.panel__karty .panel__karta { flex: 1; }
.panel__karta { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--linia); border-radius: 12px; background: #fff; color: var(--granat); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.panel__karta:hover, .panel__karta[aria-current] { border-color: var(--akcent); box-shadow: 0 10px 24px rgba(20, 43, 62, .08); transform: translateY(-1px); color: var(--granat); }
.panel__karta-ikona { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--noc); color: #fff; } /* jeden wzór ikony z .ikona-karty (G-D6) */
.panel__karta-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.panel__karta-tytul { font: 600 15px/1.3 var(--font-naglowki); }
.panel__karta-opis { color: var(--tekst-slaby); font: 400 14px/1.4 var(--font-tresc); }
@media (prefers-reduced-motion: reduce) {
	.panel__karta { transition: none; }
	.panel__karta:hover { transform: none; }
}
/* komputer: menu na środku, panel pod belką */
@media (min-width: 1200px) {
	.naglowek__pasek { gap: 40px; }
	.nawigacja { flex: 1; margin-left: 0; }
	.nawigacja__lista { flex: 1; justify-content: center; gap: 0 36px; }
	.nawigacja__przelacznik, .nawigacja__link { color: var(--tekst); font-size: 16px; font-weight: 500; background-image: linear-gradient(var(--bursztyn), var(--bursztyn)); }
	.nawigacja__boczne .przycisk { padding: 13px 24px; font-size: 16px; font-weight: 600; box-shadow: 0 4px 12px rgba(75, 107, 138, .25); }
	.panel { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--wys-naglowka)); overflow-y: auto; background: #fff; border-top: 3px solid var(--granat); box-shadow: 0 24px 48px rgba(20, 43, 62, .18); }
	.panel__wnetrze { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: var(--szer); margin: 0 auto; padding: 28px var(--margines) 36px; }
	.panel__wnetrze:has(.panel__kafel) { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
	.panel-otwarty body::after { content: ""; position: fixed; inset: 0; z-index: 900; background: rgba(20, 43, 62, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
	/* grupy: nagłówek wersalikami w kolorze akcentu z linią, pozycje jak przyciski */
	.panel__naglowek { margin: 0 0 10px; padding-bottom: 8px; border-bottom-color: rgba(75, 107, 138, .35); color: var(--akcent); font: 700 13px/1.3 var(--font-naglowki); letter-spacing: .07em; white-space: nowrap; }
	.panel__linki li + li { margin-top: 2px; }
	.panel__linki a { display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 5px 10px; border-radius: 8px; color: var(--tekst); font: 400 15px/1.4 var(--font-tresc); white-space: nowrap; }
	.panel__linki a:hover, .panel__linki a:focus-visible { background: var(--akcent-tlo); color: var(--granat); text-decoration: none; }
	.panel__linki a[aria-current] { background: var(--akcent-tlo); color: var(--granat); }
	.panel__skroty { gap: 10px; margin: -6px 0 28px; }
	.panel__skroty a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--linia); border-radius: 999px; color: var(--granat); font: 500 15px/1 var(--font-naglowki); text-decoration: none; }
	.panel__skroty a:hover { border-color: var(--akcent); color: var(--akcent); }
}
@media (min-width: 1200px) and (max-width: 1439.98px) {
	.nawigacja__boczne { gap: 12px; }
	.nawigacja__pomocniczy { font-size: 14px; }
}
/* 1200-1279 px: przycisk „Zapytaj o ubezpieczenie firmy” wychodził 37 px poza ekran (przewijanie w bok; audyt 3, B) - ciaśniej */
@media (min-width: 1200px) and (max-width: 1279.98px) {
	.naglowek__pasek { gap: 24px; }
	.nawigacja__lista { gap: 0 24px; }
	.nawigacja__boczne { gap: 10px; }
	.nawigacja__boczne .przycisk { padding: 12px 18px; font-size: 15px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	.naglowek__cta { display: inline-flex; flex: none; margin-left: auto; }
	.naglowek__cta + .naglowek__burger { margin-left: 0; }
	.naglowek__pasek:has(.naglowek__cta) { gap: 24px; }
	.menu-otwarte .naglowek__cta { display: none; }
	.menu-otwarte .naglowek__cta + .naglowek__burger { margin-left: auto; }
}
/* telefon i tablet: menu w panelu pod przyciskiem "Menu" */
@media (max-width: 1199.98px) {
	.naglowek__burger { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 10px 0; border: 0; background: none; color: var(--granat); font: 400 15px/1 var(--font-naglowki); cursor: pointer; }
	.naglowek__burger-linie, .naglowek__burger-linie::before, .naglowek__burger-linie::after { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s; }
	.naglowek__burger-linie { position: relative; }
	.naglowek__burger-linie::before, .naglowek__burger-linie::after { content: ""; position: absolute; left: 0; }
	.naglowek__burger-linie::before { top: -7px; }
	.naglowek__burger-linie::after { top: 7px; }
	.naglowek__burger[aria-expanded="true"] .naglowek__burger-linie { background: transparent; }
	.naglowek__burger[aria-expanded="true"] .naglowek__burger-linie::before { transform: translateY(7px) rotate(45deg); }
	.naglowek__burger[aria-expanded="true"] .naglowek__burger-linie::after { transform: translateY(-7px) rotate(-45deg); }
	.nawigacja { display: none; position: fixed; top: var(--wys-naglowka); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--margines) 40px; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-top: 1px solid var(--linia); }
	.menu-otwarte .nawigacja { display: flex; }
	.menu-otwarte body { overflow: hidden; }
	.nawigacja__lista { flex-direction: column; }
	.nawigacja__lista > li { border-bottom: 1px solid var(--linia); }
	.nawigacja__przelacznik, .nawigacja__link { justify-content: space-between; width: 100%; padding: 18px 0; font-size: 19px; }
	.jest-biezaca > .nawigacja__przelacznik span, .jest-biezaca > .nawigacja__link { color: var(--akcent); }
	.panel__wnetrze { padding: 0 0 24px; }
	.panel__przedrostek { display: inline; }
	.panel__tytul { margin-bottom: 20px; font-size: 18px; }
	.panel__grupy { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
	.panel__linki li + li { margin-top: 0; }
	.panel__linki a { display: block; padding: 10px 0; }
	.panel__kafel { margin-top: 24px; }
	.panel__kafel--blok { display: none; } /* kafel wydłużał panel menu; przycisk „Zapytaj o ubezpieczenie firmy” jest na dole menu (G-D7) */
	.panel__kafel:not(.panel__kafel--blok) { padding: 22px; }
	.panel__narzedzia { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	/* linki pomocnicze i przycisk na dole panelu (bez margin-top: auto - bez luki przy krótkim menu) */
	.nawigacja__boczne { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 24px; padding-top: 24px; }
	.nawigacja__pomocniczy { display: none; } /* na telefonie są w liście .nawigacja__telefon */
	.nawigacja__telefon { display: grid; margin: 0; padding: 0; list-style: none; }
	.nawigacja__telefon a { display: flex; align-items: center; min-height: 44px; color: var(--granat); font: 400 17px/1.3 var(--font-naglowki); text-decoration: none; }
	.nawigacja__telefon a[aria-current] { color: var(--akcent); }
	.nawigacja__boczne .przycisk { order: 10; width: 100%; padding: 16px 28px; font-size: 16px; }
	.nawigacja__jezyk { align-self: flex-start; width: 44px; height: 44px; border: 1px solid var(--obramowanie-pola); border-radius: 50%; color: var(--granat); }
	.nawigacja__szukaj { justify-content: flex-start; }
	.nawigacja__szukaj-tekst { position: static; font-size: 17px; }
}

/* ---------- nagłówek podstrony: jasny, zdjęcie tematu w karcie ---------- */
.naglowek-strony { position: relative; overflow: hidden; background: var(--tlo-sekcji); color: var(--tekst); border-bottom: 1px solid var(--linia); }
.naglowek-strony:not(.naglowek-strony--zdjecie) h1 { max-width: 28ch; }
.naglowek-strony:not(.naglowek-strony--zdjecie) .naglowek-strony__lead { max-width: 72ch; }
.naglowek-strony__uklad { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(40px, 4.5vw, 64px); }
.naglowek-strony--zdjecie .naglowek-strony__uklad { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.naglowek-strony h1 { max-width: 22ch; color: var(--granat); font-size: var(--h1); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }
.naglowek-strony__lead { max-width: 56ch; margin: 24px 0 0; color: var(--tekst); font-size: var(--lead); line-height: 1.55; }
.naglowek-strony__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 32px 0 0; }
.naglowek-strony__zdjecie { margin: 0; }
.naglowek-strony__zdjecie img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, .28); }
.naglowek-strony .link-podkreslony { color: var(--granat); }
.okruszki ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 20px; padding: 0; list-style: none; color: var(--tekst-slaby); font-size: 15px; }
.okruszki li + li::before { content: "/"; margin-right: 8px; color: var(--tekst-slaby); }
.okruszki a { display: inline-flex; align-items: center; min-height: 24px; color: var(--granat); text-decoration: none; } /* cel dotykowy min. 24 px (A-D9) */
.okruszki a:hover, .okruszki a:focus-visible { color: var(--akcent); }
.metryka { margin: 20px 0 0; color: var(--tekst-slaby); font: 500 15px/1.4 var(--font-naglowki); }
.metryka a { color: var(--granat); }
/* "ptaszki" zaufania: flex z zawijaniem - dłuższy punkt dostaje własny wiersz */
.zaufanie { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--tekst); font-size: 16px; }
.zaufanie li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; max-width: 100%; color: var(--granat); font-weight: 500; font-size: 15.5px; }
.zaufanie svg { flex: none; margin-top: 3px; color: var(--akcent); }
.udostepnij { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--tekst-slaby); font-size: 14px; }
.udostepnij a, .udostepnij button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--linia); border-radius: 50%; background: #fff; color: var(--granat); cursor: pointer; }
.udostepnij a:hover, .udostepnij button:hover { border-color: var(--akcent); color: var(--akcent); }
.udostepnij button.skopiowano { border-color: var(--akcent); color: var(--akcent); }
/* skróty do grup huba pod nagłówkiem strony */
.skroty ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.skroty a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px 8px 18px; border: 1px solid var(--linia); border-radius: var(--promien); background: #fff; color: var(--granat); font: 500 15px/1.2 var(--font-naglowki); text-decoration: none; transition: border-color .2s; }
.skroty a:hover { border-color: var(--akcent); color: var(--granat); }
.skroty__liczba { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--akcent-tlo); color: var(--granat); font-size: 13px; }
/* zdjęcie nagłówka podstrony nieco większe (ocena właściciela, P1) - kolumny 11:9 zamiast 3:2 */
@media (min-width: 992px) { .naglowek-strony--zdjecie .naglowek-strony__uklad { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 56px; } }
@media (max-width: 991.98px) {
	.naglowek-strony--zdjecie .naglowek-strony__uklad { grid-template-columns: minmax(0, 1fr); }
	.naglowek-strony__zdjecie img { max-height: 240px; }
}
@media (max-width: 599.98px) {
	/* okruszki: tylko "← poziom nadrzędny" */
	.okruszki li { display: none; }
	.okruszki li:nth-last-child(2) { display: block; }
	.okruszki li:nth-last-child(2)::before { content: "\2190"; content: "\2190" / ""; margin-right: 8px; color: var(--granat); }
	.okruszki a { min-height: 44px; margin: -10px 0; } /* jedyny link: większy cel dotykowy bez zmiany odstępów */
	.zaufanie { flex-direction: column; }
	/* strona ze zdjęciem: "ptaszki" zwinięte do jednego punktu, żeby nie spychały krótkiej odpowiedzi */
	.naglowek-strony--zdjecie .zaufanie { font-size: 15px; }
	.naglowek-strony--zdjecie .zaufanie li:not(:first-child) { display: none; }
	.naglowek-strony--zdjecie .naglowek-strony__uklad { gap: 20px; padding-bottom: 24px; }
	/* pierwszy ekran telefonu: tytuł 28-30 px zamiast 36 px (78 stron miało H1 w 4-5 wierszach), ciaśniejsze odstępy, zdjęcie 120 px (G-W4) */
	.naglowek-strony__uklad { padding-top: 20px; padding-bottom: 28px; }
	.naglowek-strony h1 { font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2rem); line-height: 1.15; }
	.naglowek-strony__lead { margin-top: 14px; font-size: 18px; line-height: 1.55; }
	.naglowek-strony__akcje { margin-top: 20px; }
	.okruszki ol { margin-bottom: 12px; }
	.metryka { margin-top: 14px; }
	.zaufanie { margin-top: 16px; }
	.skroty ul { margin-top: 20px; }
	.naglowek-strony--zdjecie .naglowek-strony__zdjecie img { max-height: 120px; }
	/* strona kalkulatora albo formularza (narzędzie we wstępie): bez zdjęcia nagłówka - narzędzie zaczyna się na pierwszym ekranie.
	   Kalkulator osadzony niżej w treści produktu zdjęcia nie ukrywa (audyt 3, G-D2) */
	body:has(.wstep .kalkulator, .wstep .formularz) .naglowek-strony__zdjecie { display: none; }
}

/* ---------- treść: wstęp i sekcje "tytuł | treść" ---------- */
.wstep { padding: clamp(48px, 6vw, 80px) 0 clamp(16px, 3vw, 32px); }
.wstep + .sekcja:not(.sekcja--szara) { padding-top: clamp(24px, 3vw, 40px); }
/* akapity i listy wstępu na pełną szerokość kontenera */
.wstep .kontener > p, .wstep .kontener > ul, .wstep .kontener > ol { max-width: none; }
.sekcja { padding: clamp(44px, 4.5vw, 64px) 0; }
.sekcja + .sekcja:not(.sekcja--szara):not([class*="sekcja--karty"]) { padding-top: clamp(36px, 3.5vw, 52px); }
.sekcja--szara { background: var(--tlo-sekcji); }
.sekcja__uklad { display: grid; grid-template-columns: var(--uklad-kolumny); gap: 24px var(--uklad-odstep); align-items: start; }
/* sekcja z modułem (karty, tabela, checklista, osadzony kalkulator): nagłówek nad treścią, moduł na pełną szerokość
   (kalkulator osadzony w kolumnie treści miał zbyt wąski panel wyniku) */
.sekcja__uklad:has(.ramka--karty, .tabela, .ramka--checklista, .kalkulator) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* panele "obejmuje" i "wyłączenia" oraz sytuacje: pełna szerokość, wyłączenia tak samo widoczne jak zakres (MODEL_PRAWNY; audyt 2, G-W1, decyzja 28) */
.sekcja__uklad:has(.ramka--wylaczenia, .ramka--obejmuje, .ramka--sytuacje) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* branże (audyt 3, G-W3): dwa i więcej przykładów - sekcja w jednej kolumnie, przykłady obok siebie (jak ::: sytuacje), od 992 px;
   ramka „Podstawa prawna” z akapitem - pod nagłówkiem na pełną szerokość (wiersz do 75ch), nie gęsty blok w wąskiej kolumnie */
.sekcja__uklad:has(> .sekcja__tresc > .ramka--przyklad + .ramka--przyklad), .sekcja__uklad:has(> .sekcja__tresc > .ramka--podstawa) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sekcja__uklad:has(> .sekcja__tresc > .ramka--podstawa) .sekcja__tytul h2 { max-width: none; }
.sekcja__uklad:has(> .sekcja__tresc > .ramka--podstawa) .ramka--podstawa { max-width: 860px; }
@media (min-width: 992px) {
	.sekcja__tresc:has(> .ramka--przyklad + .ramka--przyklad) { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: stretch; }
	.sekcja__tresc:has(> .ramka--przyklad + .ramka--przyklad) > :not(.ramka--przyklad) { grid-column: 1 / -1; }
	.sekcja__tresc:has(> .ramka--przyklad + .ramka--przyklad) > .ramka--przyklad { margin: 0; }
}
.sekcja__tytul h2, .sekcja__naglowek h2 { margin: 0; font-weight: 700; font-size: var(--h2); line-height: 1.22; letter-spacing: -0.02em; }
.sekcja__tytul h2 { max-width: 18ch; }
/* kotwice sekcji: nad H2 stoi etykieta z kropką - cel przewija się razem z nią */
.sekcja__tytul h2[id] { scroll-margin-top: 40px; }
/* tytuł sekcji: krótka bursztynowa kreska nad nagłówkiem (także sekcje strony głównej i ścieżki nauki) */
.sekcja__naglowek h2::before, .sekcja__uklad > div > h2::before, .bx-sekcja-naglowek h2::before, .bx-kroki h2::before, .bx-zalety__panel h2::before, .sciezka__naglowek h2::before { content: ""; display: block; width: 40px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--bursztyn); }
/* jeden znacznik nad tytułem: sekcja z etykietą ma kropkę etykiety, bez kreski (G-W7) */
.etykieta + h2::before, .sekcja__uklad > div > .etykieta + h2::before { content: none; }
.sekcja__tresc { max-width: none; padding-top: 6px; }
.sekcja__tresc:empty { display: none; }
.sekcja__tresc > :last-child, .sekcja__tekst > :last-child { margin-bottom: 0; }
.sekcja__tresc > h3:first-child { margin-top: 0; }
.sekcja__dalej { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }
.sekcja__dalej > * { min-width: 0; } /* tabela szersza od ekranu przewija się w .tabela, nie rozpycha kolumny */
.sekcja__tekst { max-width: none; }
.sekcja__naglowek { display: grid; grid-template-columns: var(--uklad-kolumny); gap: 16px var(--uklad-odstep); align-items: end; margin-bottom: 40px; }
.sekcja__naglowek p { margin: 0; max-width: none; }
/* tekst treści 17/28 (decyzja właściciela 21) - ten sam we wstępie i w sekcjach (G-D7); :where nie zmienia specyficzności,
   więc klasy osadzonego kalkulatora wygrywają */
.tresc p:where(:not(.kalkulator *)), .sekcja__tresc p:where(:not(.kalkulator *)), .sekcja__tekst p:where(:not(.kalkulator *)), .sekcja li:where(:not(.kalkulator *)), .wstep .kontener > p, .wstep .kontener > ul > li, .wstep .kontener > ol > li { font-size: var(--tekst-tresci); line-height: var(--interlinia-tresci); }
/* czytelna długość wiersza (60-80 znaków): akapity pod modułem i w szerokich ramkach - ramka zostaje szeroka, tekst w niej nie (audyt 2, G-W2) */
.sekcja__tresc > p, .sekcja__tekst > p, .ramka--przyklad p, .ramka--firmowe p, .ramka--podstawa p, .ramka--uwaga p, .ramka--wskazowka p { max-width: 75ch; }
/* link "Wszystkie ..." pod siatką kart */
.sekcja__szeroka:has(.karty, .ramka--karty) + .sekcja__tekst > p:only-child > a:only-child { color: var(--granat); font: 500 16px/1.2 var(--font-naglowki); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sekcja__szeroka:has(.karty, .ramka--karty) + .sekcja__tekst > p:only-child > a:only-child::after { content: " \2192"; content: " \2192" / ""; }
/* etykieta nad tytułem sekcji ("● Pytania") - z "## Tytuł {etykieta=...}" albo domyślna w szablonie */
.etykieta { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--tekst-slaby); font: 500 15px/1.3 var(--font-naglowki); letter-spacing: 0; }
.etykieta::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }
.sekcja__naglowek .etykieta { margin-bottom: 14px; }
/* listy z kropką w kolorze akcentu */
.wstep ul:not([class]), .sekcja ul:not([class]), .faq__odpowiedz ul { padding-left: 0; list-style: none; }
.wstep ul:not([class]) > li, .sekcja ul:not([class]) > li, .faq__odpowiedz ul > li { position: relative; margin: .55em 0; padding-left: 22px; }
.wstep ul:not([class]) > li::before, .sekcja ul:not([class]) > li::before, .faq__odpowiedz ul > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--akcent); }
.sekcja ol:not([class]) { padding-left: 1.3em; }
.sekcja ol:not([class]) > li { margin: .55em 0; padding-left: 4px; }
.sekcja ol:not([class]) > li::marker { color: var(--akcent); font-weight: 600; }
/* FAQ z 1-2 pytaniami: jedna kolumna */
.faq--krotki .sekcja__uklad { grid-template-columns: minmax(0, 1fr); }
.faq--krotki .sekcja__tresc, .faq--krotki .sekcja__tytul h2 { max-width: none; }
@media (max-width: 991.98px) {
	.sekcja__uklad, .sekcja__naglowek { grid-template-columns: minmax(0, 1fr); }
	.sekcja__tytul h2 { max-width: none; }
	.sekcja__tresc { padding-top: 0; }
}
@media (max-width: 599.98px) { .naglowek-strony + .wstep { padding-top: 28px; } }
/* telefon: mniejsze odstępy między sekcjami i modułami - strony produktów miały 16-26 tys. px (audyt 2, G-W6, decyzja 28; treść bez zmian) */
@media (max-width: 599.98px) {
	.sekcja { padding: 32px 0; }
	.sekcja + .sekcja:not(.sekcja--szara):not([class*="sekcja--karty"]) { padding-top: 28px; }
	.sekcja__uklad { gap: 16px; }
	.sekcja__dalej { gap: 24px; margin-top: 24px; }
	.sekcja .karta-cta { margin-top: 28px; }
	.ramka { margin: 24px 0; }
	.ramka--przyklad { margin: 24px 0; padding: 20px; }
	.faq summary { padding: 18px 48px 18px 0; font-size: 18px; }
	.faq__odpowiedz { padding-bottom: 18px; }
	.zrodla { padding-bottom: 32px; }
}
/* strona formularza: formularz zaraz pod nagłówkiem strony (G-D9) */
.naglowek-strony + .wstep:has(.formularz) { padding-top: clamp(24px, 3vw, 32px); }
/* telefon: pierwszy kafel celu bliżej pierwszego ekranu - mniejsze odstępy nagłówka i modułu B2B na stronie formularza (G-W4) */
@media (max-width: 599.98px) {
	.naglowek-strony + .wstep:has(.formularz) { padding-top: 16px; }
	.naglowek-strony:has(+ .wstep .formularz) .naglowek-strony__uklad { padding-bottom: 20px; }
	.wstep:has(.formularz) .ramka--firmowe { margin-bottom: 16px; padding: 14px 18px; }
	.wstep:has(.formularz) .ramka--firmowe p { margin-bottom: 0; }
}

/* ---------- ramki (::: krotko, uwaga, wskazowka, przyklad, firmowe, checklista, obejmuje, wylaczenia, podstawa, sytuacje) ---------- */
.ramka { margin: 32px 0; padding: 24px 28px; border-left: 3px solid var(--akcent); border-radius: 0 14px 14px 0; background: var(--tlo-sekcji); }
.sekcja--szara .ramka { background: #fff; }
.ramka > :last-child { margin-bottom: 0; }
.ramka p, .ramka li { line-height: var(--interlinia-tresci); }
.ramka__tytul { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); }
.ramka__tytul::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }
/* uwaga: grafitowa krawędź i znak „!” na chłodnym neutralnym tle - nie brąz zbliżony do miedzi (G-W7) */
.ramka--uwaga, .sekcja--szara .ramka--uwaga { border-left: 4px solid var(--ostrzezenie); background: var(--ostrzezenie-tlo); }
.ramka--uwaga .ramka__tytul { font-weight: 600; }
.ramka--uwaga .ramka__tytul::before { content: "!"; content: "!" / ""; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--ostrzezenie); color: #fff; font: 700 13px/1 var(--font-naglowki); }
/* co zwykle obejmuje: ptaszki jak w checkliście (G-W3); punkt „- **Kategoria** przykład” - kategoria w osobnym wierszu */
.ramka.ramka--obejmuje { border-left: 4px solid var(--akcent); }
.ramka.ramka--obejmuje ul:not([class]) > li { padding-left: 32px; }
.ramka.ramka--obejmuje ul:not([class]) > li::before { left: 0; top: .2em; width: 20px; height: 20px; background: var(--akcent-tlo) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* typowe wyłączenia: wyróżniony panel - biała karta z grafitową krawędzią i znacznikiem „–” w grafitowym kole, inny niż „obejmuje”
   (MODEL_PRAWNY: wyłączenia tak samo widoczne jak zakres; G-W3, ocena właściciela P2) */
.ramka.ramka--wylaczenia { padding: 24px 28px 26px; border: 1px solid var(--linia); border-left: 4px solid var(--granat); background: #fff; box-shadow: 0 6px 20px rgba(20, 43, 62, .06); }
.ramka--wylaczenia .ramka__tytul { color: var(--granat); font: 700 18px/1.35 var(--font-naglowki); }
.ramka--wylaczenia .ramka__tytul::before { width: 10px; height: 10px; border-radius: 2px; background: var(--bursztyn); }
.ramka.ramka--wylaczenia ul:not([class]) > li { padding-left: 32px; }
.ramka.ramka--wylaczenia ul:not([class]) > li::before { left: 0; top: .2em; width: 20px; height: 20px; background: var(--granat) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5h6' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* kategorie z przykładami (punkt zaczyna się od pogrubienia): siatka 2 kolumn, kategoria nad przykładem */
.ramka--obejmuje ul:has(> li > strong:first-child), .ramka--wylaczenia ul:has(> li > strong:first-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 12px 0 0; }
.ramka--obejmuje ul:has(> li > strong:first-child) > li, .ramka--wylaczenia ul:has(> li > strong:first-child) > li { margin: 0; color: var(--tekst-slaby); font-size: 16px; line-height: 1.6; }
.ramka--obejmuje li > strong:first-child, .ramka--wylaczenia li > strong:first-child { display: block; margin-bottom: 2px; color: var(--granat); font: 600 17px/1.4 var(--font-naglowki); }
@media (max-width: 767.98px) { .ramka--obejmuje ul:has(> li > strong:first-child), .ramka--wylaczenia ul:has(> li > strong:first-child) { grid-template-columns: minmax(0, 1fr); } }
/* podstawa prawna: przypis - mniejszy tekst, kreska w kolorze tekstu pomocniczego, znak paragrafu zamiast kropki */
.ramka.ramka--podstawa { padding: 16px 22px; border-left-color: var(--tekst-slaby); }
.ramka--podstawa p:where(:not(.ramka__tytul)), .ramka--podstawa li { font-size: 15px !important; line-height: 1.55; }
.ramka--podstawa .ramka__tytul { color: var(--tekst-slaby); font-size: 14px; }
.ramka--podstawa .ramka__tytul::before { content: "§"; content: "§" / ""; width: auto; height: auto; border-radius: 0; background: none; color: var(--tekst-slaby); font-weight: 700; }
/* ::: sytuacje - przykłady ryzyk jako siatka wyróżnionych kart z miedzianym numerem (ocena właściciela P2) */
.ramka.ramka--sytuacje { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.ramka--sytuacje > .ramka__tytul { margin-bottom: 16px; font: 600 19px/1.35 var(--font-naglowki); }
/* 2 kolumny (4 wąskie karty po ok. 200 px tekstu łamały opis w 6-7 wierszach), na telefonie 1 (audyt 2, G-W6, decyzja 28) */
.ramka--sytuacje ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0 !important; list-style: none; counter-reset: sytuacja; }
.ramka--sytuacje ul > li { position: relative; margin: 0 !important; padding: 22px 22px 22px 66px !important; border: 1px solid var(--linia); border-radius: var(--promien-karty); background: var(--tlo-sekcji); color: var(--tekst); font-size: 16px; line-height: 1.6; counter-increment: sytuacja; }
.sekcja--szara .ramka--sytuacje ul > li { background: #fff; }
.ramka--sytuacje ul > li::before { content: counter(sytuacja) !important; position: absolute; left: 20px !important; top: 20px !important; display: inline-flex; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; border: 2px solid var(--bursztyn); border-radius: 50%; background: #fff !important; color: var(--granat); font: 700 15px/1 var(--font-naglowki); }
.ramka--sytuacje li > strong:first-child { display: block; margin-bottom: 6px; color: var(--granat); font: 600 18px/1.35 var(--font-naglowki); }
/* telefon: jedna kolumna, numer w linii z tytułem zamiast wcięcia 66 px - opis na całą szerokość karty */
@media (max-width: 767.98px) {
	.ramka--sytuacje ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ramka--sytuacje ul > li:has(> strong:first-child) { padding: 16px 18px 18px !important; }
	.ramka--sytuacje ul > li:has(> strong:first-child)::before { left: 18px !important; top: 14px !important; width: 30px !important; height: 30px !important; font-size: 14px; }
	.ramka--sytuacje li > strong:first-child { display: flex; align-items: center; min-height: 30px; padding-left: 42px; font-size: 17px; }
}
.ramka--wygaslo { max-width: 60ch; margin: 20px 0 0; padding: 14px 20px; font-size: 16px; }
/* krótka odpowiedź: duży tekst na jasnym niebieskim tle z niebieską kreską (decyzja właściciela 3) */
.ramka--krotko { margin: 0 0 clamp(24px, 3vw, 40px); padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 48px); border-left: 4px solid var(--akcent); border-radius: 0 16px 16px 0; background: var(--akcent-tlo); }
.ramka--krotko:last-child { margin-bottom: 0; }
.ramka--krotko .ramka__tytul { color: var(--granat); font-weight: 600; }
.ramka--krotko p:not(.ramka__tytul) { max-width: none; color: var(--granat); font: 400 var(--lead)/1.55 var(--font-naglowki); letter-spacing: -0.01em; }
.ramka--krotko strong { font-weight: 500; }
/* hover na jasnoniebieskim tle granatem z podkreśleniem - niebieski #4B6B8A na #EDF3F6 miał 4,35:1 (A-D1) */
.ramka--krotko a:hover, .bx-zalety__panel a:hover { color: var(--granat); text-decoration-color: var(--granat); }
/* bloki układu: kroki, fakty, karty (lista w ramce bez tytułu) */
.ramka--kroki, .ramka--fakty, .ramka--karty { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.sekcja--szara .ramka--kroki, .sekcja--szara .ramka--fakty, .sekcja--szara .ramka--karty { background: none; }
@media (max-width: 599.98px) {
	.ramka { padding: 20px; }
	.ramka--kroki, .ramka--fakty, .ramka--karty { padding: 0; }
}
/* przykład liczbowy: biała karta z granatowym paskiem; treść zaczyna się od "Dane przykładowe:" (dopisek w CSS usunięty - G-W4) */
.ramka--przyklad { margin: 36px 0; padding: 28px 32px; border: 1px solid var(--linia); border-left: 4px solid var(--granat); border-radius: 0 16px 16px 0; background: #fff; box-shadow: 0 6px 20px rgba(20, 43, 62, .06); }
.ramka--przyklad .ramka__tytul { color: var(--granat); font: 700 18px/1.35 var(--font-naglowki); }
.ramka--przyklad p { font-size: var(--tekst-tresci); }
/* zastrzeżenie B2B (::: firmowe): granatowy moduł - także w szarej sekcji (biała ramka gubiła jasny tekst) */
.ramka--firmowe, .sekcja--szara .ramka--firmowe { padding: 28px 32px; border: 0; border-left: 4px solid var(--bursztyn); border-radius: 0 16px 16px 0; background: var(--noc); color: #EDF3F6; }
.ramka--firmowe .ramka__tytul { color: #fff; font: 700 19px/1.35 var(--font-naglowki); }
.ramka--firmowe .ramka__tytul::before { background: var(--bursztyn); }
.ramka--firmowe p { color: #EDF3F6; }
.ramka--firmowe strong { color: #fff; }
.ramka--firmowe a { color: #fff; }
/* wezwanie na końcu modułu ("… Poproś o kontakt"): biały przycisk w osobnym wierszu, nie goły link po zdaniu (audyt 2, G-D9) */
.ramka--firmowe p > a[href^="/zapytanie"]:last-child { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 48px; margin-top: 16px; padding: 0 24px; border-radius: var(--promien); background: #fff; color: var(--granat); font: 600 16px/1.2 var(--font-naglowki); text-decoration: none; }
.ramka--firmowe p > a[href^="/zapytanie"]:last-child:hover { background: var(--akcent-tlo); color: var(--granat); }
.wstep:has(.formularz) .ramka--firmowe p > a[href^="/zapytanie"]:last-child { display: inline; min-height: 0; margin: 0; padding: 0; background: none; color: #fff; text-decoration: underline; }
/* strona formularza: moduł zwarty (mniejsze odstępy i tytuł) - pierwszy wybór celu bliżej pierwszego ekranu (audyt 3, G-W4); treść bez zmian */
.wstep:has(.formularz) .ramka--firmowe { margin: 0 0 20px; padding: 16px 22px; }
.wstep:has(.formularz) .ramka--firmowe .ramka__tytul { margin-bottom: 4px; font-size: 16px; }
.wstep:has(.formularz) .ramka--firmowe p:not(.ramka__tytul) { font-size: 15px; line-height: 1.5; }
/* checklista: lista z ptaszkami po lewej, przycisk po prawej (ostatni akapit z linkiem) */
.ramka--checklista { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--linia); border-left: 4px solid var(--akcent); border-radius: 0 16px 16px 0; background: #fff; }
.ramka--checklista ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
.ramka--checklista li { position: relative; margin: 0; padding-left: 32px; font-size: var(--tekst-tresci); line-height: var(--interlinia-tresci); }
.sekcja .ramka--checklista ul:not([class]) > li { padding-left: 32px; } /* odstęp .55em z list w sekcji */
.ramka--checklista li::before, .sekcja .ramka--checklista ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--akcent-tlo) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ramka--checklista > p { margin: 0; }
/* akapit z tekstem przed przyciskiem (formuła przekazania z linkiem do listy partnerów): pod listą na całą szerokość, przyciskiem jest tylko ostatni link */
.ramka--checklista:has(> p:last-child > a:not(:last-child)) { grid-template-columns: minmax(0, 1fr); }
.ramka--checklista > p:last-child:has(> a:not(:last-child)) { padding-top: 20px; border-top: 1px solid var(--linia); color: var(--tekst-slaby); font-size: 15px; }
.ramka--checklista > p:last-child a:last-child { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: var(--promien); background: var(--cta); color: #fff; font: 600 17px/1 var(--font-naglowki); text-decoration: none; white-space: nowrap; }
.ramka--checklista > p:last-child a:last-child:hover { background: var(--cta-hover); }
.ramka--checklista > p:last-child:has(> a:not(:last-child)) a:last-child { display: flex; width: fit-content; margin-top: 16px; }
@media (max-width: 991.98px) { .ramka--checklista, .ramka--checklista ul { grid-template-columns: minmax(0, 1fr); } }

/* ---------- moduł ::: kroki ---------- */
.sekcja .ramka--kroki ol, .wstep .ramka--kroki ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: krok; }
.sekcja .ramka--kroki li, .wstep .ramka--kroki li { counter-increment: krok; margin: 0; padding: 0; border-top: 0; }
/* numer w granatowym kole - jak "Jak to działa?" */
.ramka--kroki li::before { content: counter(krok); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: var(--noc); color: #fff; font: 700 19px/1 var(--font-naglowki); }
.ramka--kroki li strong { display: block; margin-bottom: 8px; font: 600 21px/1.3 var(--font-naglowki); }
@media (min-width: 768px) { .sekcja .ramka--kroki li, .wstep .ramka--kroki li { min-height: 180px; } }
@media (max-width: 767.98px) { .ramka--kroki li::before { width: 38px; height: 38px; font-size: 17px; } }
@media (max-width: 599.98px) {
	/* kroki zwarte: numer obok tytułu, nie nad nim */
	.sekcja .ramka--kroki ol, .wstep .ramka--kroki ol { gap: 20px; }
	.sekcja .ramka--kroki ol > li, .wstep .ramka--kroki ol > li { position: relative; padding: 18px 0 0 52px; }
	.ramka--kroki li::before { position: absolute; left: 0; top: 0; margin: 0 0 16px; }
}

/* ---------- moduł ::: fakty ---------- */
.sekcja .ramka--fakty ul, .wstep .ramka--fakty ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.sekcja .ramka--fakty ul > li, .wstep .ramka--fakty ul > li { margin: 0; padding: 24px 28px 28px 0; color: var(--tekst-slaby); font: 500 14px/1.4 var(--font-naglowki); }
.sekcja .ramka--fakty ul > li + li, .wstep .ramka--fakty ul > li + li { padding-left: 28px; border-left: 1px solid var(--linia); }
.ramka--fakty li::before { display: none; }
.ramka--fakty li strong { display: block; margin-top: 10px; color: var(--granat); font: 400 clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem)/1.15 var(--font-naglowki); letter-spacing: -0.02em; }
.ramka--fakty--tekst li strong { font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); line-height: 1.3; letter-spacing: -0.01em; }
@media (max-width: 991.98px) { .sekcja .ramka--fakty ul > li + li, .wstep .ramka--fakty ul > li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--linia); } }

/* ---------- siatki kart: moduł ::: karty i karty stron (.karty) ---------- */
.sekcja .ramka--karty ul, .wstep .ramka--karty ul, .karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.karty > li { display: flex; }
.karty > li > .karta { flex: 1 1 auto; }
@media (min-width: 1200px) {
	.karty { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* liczba kart niepodzielna przez 4 -> 3 kolumny */
	.karty--3, .sekcja .ramka--karty ul:not(:has(> li:nth-child(4n):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* karty stron w 3 kolumnach: siatka 6 ścieżek, karta na 2 - niepełny ostatni rząd (1 albo 2 karty) wyśrodkowany, karty bez rozciągania
	   (rozciągnięta 5. karta ze zdjęciem miała zdjęcie 793 × 514 px, a karta obok pustą połowę - audyt 3, G-W1, G-D1) */
	.karty--3:has(> li:nth-child(3)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.karty--3:has(> li:nth-child(3)) > li { grid-column: span 2; }
	.karty--3:has(> li:nth-child(3)) > li:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
	.karty--3:has(> li:nth-child(3)) > li:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
	/* moduł ::: karty (tekst bez zdjęć): 5 kart - ostatnia na 2 kolumny, 7, 10… - ostatnia na całą szerokość (audyt 2 i 3, G-D1) */
	.sekcja .ramka--karty ul > li:nth-child(5):last-child { grid-column: span 2; }
	.sekcja .ramka--karty ul:not(:has(> li:nth-child(4n):last-child)) > li:nth-child(3n+1):nth-child(n+7):last-child { grid-column: 1 / -1; }
}
/* jedna karta w sekcji (np. hub: „Rolnictwo”, „Gwarancje”): karta pozioma, zdjęcie z lewej, zamiast 1/3 szerokości i pustego miejsca (G-D1) */
@media (min-width: 600px) {
	.karty:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
	.karty > li:only-child { grid-column: 1 / -1; }
	.karty > li.karta--zdjecie:only-child { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto auto 1fr; align-content: start; gap: 0; padding: 0; }
	.karty > li.karta--zdjecie:only-child > .karta__zdjecie { grid-column: 1; grid-row: 1 / -1; height: 100%; min-height: 220px; aspect-ratio: auto; margin: 0; }
	.karty > li.karta--zdjecie:only-child > :not(.karta__zdjecie) { grid-column: 2; margin: 0 28px 10px; }
	.karty > li.karta--zdjecie:only-child > :nth-child(2) { margin-top: 28px; }
	.karty > li.karta--zdjecie:only-child > .karta__wiecej { align-self: end; margin-bottom: 24px; }
}
/* 2 karty: dwie równe kolumny zamiast 2 z 3-4 kolumn i pustego miejsca obok (G-D1) */
@media (min-width: 600px) {
	.karty:has(> li:nth-child(2):last-child), .sekcja .ramka--karty ul:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* karty modułu: tytuł pogrubiony w osobnym wierszu, znacznik, opcjonalne <details>; z linkiem w tytule - cała karta klikalna */
.ramka--karty li { position: relative; transition: border-color .2s, transform .2s, box-shadow .2s; }
.wstep .ramka--karty ul > li { margin: 0; padding: 32px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; }
.sekcja .ramka--karty ul > li { position: relative; margin: 0; padding: 28px 26px 26px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(20, 43, 62, .05); color: var(--tekst); font-size: 16.5px; line-height: 1.65; transition: border-color .2s, box-shadow .2s; }
.sekcja .ramka--karty ul:not([class]) > li { padding: 32px 28px 30px; }
.sekcja .ramka--karty ul > li:hover { border-color: #DBE2E8; box-shadow: 0 10px 28px rgba(20, 43, 62, .08); }
/* bez znacznika przy tytule: ptaszek przy "Kosztach" czy "Zabezpieczeniach" sugerował zaletę (G-W14); ikona tylko z {ikona=...} */
.ramka--karty li::before, .sekcja .ramka--karty ul > li::before, .sekcja .ramka--karty ul:not([class]) > li::before { content: none; display: none; }
.ramka--karty li strong:first-child { display: block; margin-bottom: 10px; font: 600 21px/1.3 var(--font-naglowki); letter-spacing: -0.01em; }
.sekcja .ramka--karty ul > li > strong:first-child { display: block; margin-bottom: 10px; color: var(--granat); font: 700 21px/1.3 var(--font-naglowki); }
.ramka--karty li.karta-ikona > .ikona-karty { display: flex; margin-bottom: 22px; }
.ramka--karty li > .ikona-karty + strong { display: block; margin-bottom: 10px; font: 600 20px/1.3 var(--font-naglowki); letter-spacing: -0.01em; }
/* widoczny separator tytułu i treści karty (krótka miedziana kreska pod tytułem; zgłoszenie D, B-D14) */
.ramka--karty li > strong:first-child::after, .ramka--karty li > .ikona-karty + strong::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 10px; border-radius: 1px; background: var(--bursztyn); }
.ramka--karty li > strong a { color: inherit; text-decoration: none; }
.ramka--karty li > strong a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.ramka--karty li > strong a:focus-visible { outline: none; }
/* drugi link w opisie karty nad rozciągniętym linkiem tytułu - da się go kliknąć (audyt 2, A-D1) */
.ramka--karty li a:not(strong a) { position: relative; z-index: 1; }
.ramka--karty li:has(> strong a:focus-visible) { outline: 2px solid var(--akcent); outline-offset: 3px; }
.ramka--karty li:has(> strong a):hover { border-color: var(--akcent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20, 43, 62, .08); }
/* karta z linkiem: strzałka w kółku jak na kartach stron - widać, że jest klikalna (G-W11) */
/* strzałka przy dolnej krawędzi karty także przy 2-wierszowym tytule sąsiada (audyt 3, G-D1) */
.sekcja .ramka--karty ul > li:has(> strong a) { padding-bottom: 74px !important; }
.sekcja .ramka--karty ul > li:has(> strong a)::after { position: absolute; left: 26px; bottom: 26px; margin: 0 !important; }
.ramka--karty li:has(> strong a)::after { content: ""; display: block; width: 32px; height: 32px; margin-top: 16px; border: 1px solid var(--akcent); border-radius: 50%; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%234B6B8A' stroke-width='1.5'/%3E%3C/svg%3E"); }
.ramka--karty li:has(> strong a):hover::after { background: var(--akcent) no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); }
.sekcja .ramka--karty details { margin-top: 12px; border-top: 1px solid var(--linia); padding-top: 10px; }
.sekcja .ramka--karty summary { color: var(--akcent); font-weight: 600; cursor: pointer; }
.sekcja .ramka--karty details[open] summary { margin-bottom: 8px; }
/* ikona liniowa - jeden wzór w serwisie: granatowy kwadrat z białą ikoną (karty z {ikona=...}, karty produktów, zasady, kolumna formularza; G-W14) */
.ikona-karty { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--noc); color: #fff; }

/* karta strony: link tylko na tytule, cała karta klikalna (rozciągnięty obszar linku), strzałka w kółku */
.karta { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; margin: 0; padding: 28px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; color: var(--tekst); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.karta:hover { border-color: #DBE2E8; color: var(--tekst); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20, 43, 62, .12); }
.karta:has(.karta__link:focus-visible) { outline: 2px solid var(--akcent); outline-offset: 3px; }
.karta__etykieta { display: inline-flex; align-self: start; max-width: 100%; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; padding: 3px 10px; border-radius: 999px; background: var(--akcent-tlo); color: var(--granat); font: 600 13px/1.3 var(--font-naglowki); }
/* długi wyraz: miękkie dzielenie z szablonu (Typografia::dzielenie - „ubez-pie-cze-nio-we”), break-word tylko jako zabezpieczenie;
   bez overflow-wrap: anywhere, które cięło wyraz w dowolnym miejscu bez łącznika (audyt 3, G-W2, A-D3) */
.karta__tytul { margin: 0; color: var(--granat); font: 600 20px/1.3 var(--font-naglowki); letter-spacing: -0.01em; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
.karta__link { color: inherit; text-decoration: none; }
.karta__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.karta__link:focus-visible { outline: none; }
.karta:hover .karta__link { color: var(--granat); }
/* opis bez obcinania i wielokropka: pole "zajawka" albo opis strony bez powtórzonego tytułu (ub_opis_karty; G-W3) */
.karta__opis { font-size: 16.5px; line-height: 1.65; }
.karta__wiecej { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; color: var(--akcent); font: 500 15px/1.2 var(--font-naglowki); }
.karta__wiecej .strzalka { color: var(--akcent); }
.karta:hover .strzalka { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.karta--ikona > .ikona-karty { margin-bottom: 8px; }
.karta--zdjecie { padding: 0 0 24px; overflow: hidden; }
.karta--zdjecie > :not(.karta__zdjecie) { margin-left: 24px; margin-right: 24px; }
.karta__zdjecie { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 8px; background: var(--tlo-sekcji); }
.karty--zdjecia .karta__tytul { font-size: 20px; }
.karty--zdjecia .karta img { transition: transform .4s; }
.karty--zdjecia .karta:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .karta:hover, .przycisk:hover, .karty--zdjecia .karta:hover img { transform: none; } }
@media (max-width: 599.98px) {
	/* karty ze zdjęciem na telefonie: 2 kolumny, sam tytuł */
	.karty--zdjecia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.karty--zdjecia .karta { padding-bottom: 16px; gap: 6px; }
	.karty--zdjecia .karta > :not(.karta__zdjecie) { margin-left: 14px; margin-right: 14px; }
	.karty--zdjecia .karta__tytul { font-size: 16px; }
	/* nieparzysta liczba kart: ostatnia na całą szerokość, niższe zdjęcie - bez samotnej karty w rzędzie (G-W2 c, G-D1) */
	.karty--zdjecia > li:nth-child(odd):last-child { grid-column: 1 / -1; }
	.karty--zdjecia > li:nth-child(odd):last-child .karta__zdjecie { aspect-ratio: 2 / 1; }
	.karty--zdjecia .karta__opis, .karty--zdjecia .karta__wiecej { display: none; }
}
/* najwęższe telefony (320 px): jedna kolumna - polskie wyrazy nie mieszczą się w ok. 110 px (A-W2) */
@media (max-width: 359.98px) { .karty--zdjecia { grid-template-columns: minmax(0, 1fr); } }
/* karta z wezwaniem w treści (za 2. sekcją) */
.karta-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 20px; padding: 30px 32px 30px 36px; border: 0; border-left: 4px solid var(--akcent); border-radius: 0 14px 14px 0; background: var(--noc); }
.sekcja .karta-cta { margin-top: clamp(32px, 4vw, 48px); }
.karta-cta p { margin: 0; color: #DBE2E8; font-size: 16px; line-height: 1.65; }
.karta-cta .karta-cta__tytul { margin-bottom: 6px; color: #fff; font: 700 22px/1.3 var(--font-naglowki); }
.karta-cta .przycisk { flex: none; padding: 16px 30px; font-size: 17px; }
@media (max-width: 991.98px) { .karta-cta { flex-direction: column; align-items: flex-start; } }

/* ---------- tabele ---------- */
.tabela { overflow-x: auto; border: 1px solid var(--linia); border-radius: 14px; background: #fff; }
.tabela:focus-visible { outline-offset: 2px; }
.tabela table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.tabela th, .tabela td { padding: 18px 22px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; line-height: 1.55; }
.tabela thead th { padding: 16px 20px; background: var(--granat); color: #fff; font: 500 15px/1.3 var(--font-naglowki); }
/* pierwsza kolumna tym samym rozmiarem co pozostałe - wspólna linia bazowa w wierszu (audyt 3, G-D9) */
.tabela tbody th { width: 34%; font: 600 16.5px/1.55 var(--font-naglowki); }
.tabela tbody td:first-child, .tabela tbody th { color: var(--granat); font-weight: 600; }
.tabela tbody tr:nth-child(even) > * { background: var(--tlo-sekcji); }
.tabela tr:last-child > * { border-bottom: 0; }
@media (max-width: 767.98px) {
	/* pierwsza kolumna zostaje przy przewijaniu w bok */
	.tabela th:first-child, .tabela td:first-child { position: sticky; left: 0; z-index: 1; min-width: 112px; max-width: 40vw; background: #fff; box-shadow: 8px 0 8px -8px rgba(20, 43, 62, .25); }
	.tabela thead th:first-child { background: var(--granat); }
	.tabela tbody th { width: auto; }
}
/* tabela bez nagłówka kolumn (przewijana w bok): od krawędzi do krawędzi ekranu */
@media (max-width: 599.98px) {
	.tabela:not(:has(.tabela--karty)) { border-radius: 0; margin: 0 calc(var(--margines) * -1); border-left: 0; border-right: 0; }
}
/* tabele porównawcze na telefonie: każdy wiersz jako karta z marginesem treści (G-W2) - etykieta wiersza u góry, wartości z nazwą kolumny (serwis.js: data-kolumna) */
@media (max-width: 639.98px) {
	.tabela:has(.tabela--karty) { overflow: visible; margin: 0; border: 0; border-radius: 0; background: none; }
	.tabela table.tabela--karty, .tabela--karty tbody, .tabela--karty tr, .tabela--karty td, .tabela--karty th { display: block; width: auto; }
	.tabela--karty thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tabela--karty tbody tr { margin-bottom: 14px; border: 1px solid var(--linia); border-radius: 14px; background: #fff; overflow: hidden; }
	.tabela--karty tbody tr > * { position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 12px 18px; border-bottom: 1px solid var(--linia); background: #fff !important; }
	.tabela--karty tbody tr > :first-child { background: var(--granat) !important; color: #fff; font-weight: 600; }
	.tabela--karty tbody tr > :first-child a { color: #fff; }
	.tabela--karty tbody tr > :last-child { border-bottom: 0; }
	.tabela--karty td[data-kolumna]::before { content: attr(data-kolumna); display: block; margin-bottom: 4px; color: var(--tekst-slaby); font-size: 14px; font-weight: 600; }
}

/* ---------- FAQ i źródła ---------- */
.faq__pozycja { border-bottom: 1px solid var(--linia); }
.faq__pozycja:first-child { border-top: 1px solid var(--linia); }
.faq summary { position: relative; padding: 26px 56px 26px 0; color: var(--granat); font: 600 20px/1.4 var(--font-naglowki); letter-spacing: -0.01em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--akcent); }
.faq__ikona { position: absolute; right: 0; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 1px solid var(--obramowanie-pola); border-radius: 50%; background: #fff; }
.faq__ikona::before, .faq__ikona::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--granat); transition: transform .2s; }
.faq__ikona::after { transform: rotate(90deg); }
.faq details[open] .faq__ikona::after { transform: rotate(0); }
.faq__odpowiedz { padding: 0 0 26px; font-size: var(--tekst-tresci); line-height: var(--interlinia-tresci); }
.faq__odpowiedz > :last-child { margin-bottom: 0; }
.zrodla { padding: 0 0 clamp(48px, 6vw, 80px); }
.zrodla__ramka { padding: 24px 28px; border: 1px solid var(--linia); border-radius: 14px; background: #fff; font-size: 15px; }
.zrodla:not(.sekcja--szara) .zrodla__ramka { background: var(--tlo-sekcji); }
.zrodla__tytul { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); }
.zrodla__tytul::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }
/* zwijane źródła (decyzja 28): tytuł z datą jako przełącznik, ikona plus/minus jak w FAQ */
.zrodla__ramka > summary { position: relative; display: flex; min-height: 32px; margin: 0; padding-right: 48px; list-style: none; cursor: pointer; }
.zrodla__ramka > summary::-webkit-details-marker { display: none; }
.zrodla__ramka > summary:hover { color: var(--akcent); }
.zrodla__ramka[open] > summary { margin-bottom: 8px; }
.zrodla__liczba { color: var(--tekst-slaby); }
.zrodla .faq__ikona::before, .zrodla .faq__ikona::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--granat); transition: transform .2s; }
.zrodla .faq__ikona::after { transform: rotate(90deg); }
.zrodla details[open] .faq__ikona::after { transform: rotate(0); }
.zrodla ul { margin: 0; padding-left: 18px; }
.zrodla li { margin: 4px 0; }

/* ---------- spis treści długich stron (czesci/tresc.php, ub_spis) ---------- */
/* zwinięty blok pod wstępem; na komputerze rozwija go serwis.js */
.spis { margin-top: 20px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; }
.spis summary { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 16px 64px 16px 24px; color: var(--granat); font: 600 17px/1.35 var(--font-naglowki); list-style: none; cursor: pointer; }
.spis summary::-webkit-details-marker { display: none; }
.spis summary:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 16px; }
.spis__tytul { display: inline-flex; align-items: center; gap: 10px; }
.spis__tytul::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }
.spis__liczba { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--akcent-tlo); color: var(--granat); font-size: 13px; font-weight: 500; }
.spis__ikona { position: absolute; right: 20px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 1px solid var(--obramowanie-pola); border-radius: 50%; background: #fff; }
.spis__ikona::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px; border: solid var(--granat); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; }
.spis details[open] .spis__ikona::before { margin-top: -2px; transform: rotate(-135deg); }
.spis__lista { margin: 0; padding: 0 24px 16px; list-style: none; counter-reset: spis; columns: 2 300px; column-gap: 40px; }
.spis__lista li { position: relative; margin: 0; padding: 10px 0 10px 40px; border-top: 1px solid var(--linia); break-inside: avoid; counter-increment: spis; }
.spis__lista li::before { content: counter(spis, decimal-leading-zero); position: absolute; left: 0; top: 11px; color: var(--akcent); font: 600 14px/1.5 var(--font-naglowki); }
.spis__lista a { color: var(--granat); font-size: 16px; line-height: 1.45; text-decoration: none; }
.spis__lista a:hover, .spis__lista a:focus-visible { color: var(--akcent); text-decoration: underline; }
/* bieżąca sekcja (serwis.js: aria-current="location") - kolor, grubość i znacznik, nie sam kolor (WCAG 1.4.1) */
.spis__lista a[aria-current] { color: var(--granat); font-weight: 650; text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; }
.spis__lista li:has(> a[aria-current])::before { color: var(--akcent); }
/* przyklejony pasek spisu (serwis.js): pod nagłówkiem po minięciu spisu, rozwija tę samą listę */
.spis-pasek { position: fixed; top: var(--wys-naglowka); left: 0; right: 0; z-index: 990; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--linia); box-shadow: 0 8px 24px rgba(20, 43, 62, .06); }
.spis-pasek[hidden], .menu-otwarte .spis-pasek, .panel-otwarty .spis-pasek { display: none; }
/* telefon: schowany przy przewijaniu w dół (serwis.js; audyt 2, G-D6) */
.spis-pasek { transition: transform .2s, visibility .2s; }
.spis-pasek--schowany { visibility: hidden; transform: translateY(-110%); }
.spis-pasek__przycisk { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 52px 8px 0; border: 0; background: none; color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); text-align: left; cursor: pointer; }
.spis-pasek__przycisk:focus-visible { outline-offset: -2px; }
.spis-pasek__przycisk .spis__ikona { right: 0; }
.spis-pasek__etykieta { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--tekst-slaby); font-size: 14px; }
.spis-pasek__etykieta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }
.spis-pasek__biezaca { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.spis-pasek__biezaca:not(:empty)::before { content: "·"; margin-right: 12px; color: var(--tekst-slaby); font-weight: 400; }
.spis-pasek--otwarty .spis__ikona::before { margin-top: -2px; transform: rotate(-135deg); }
.spis-pasek__panel { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.spis-pasek__panel .spis__lista { columns: 1; padding: 0; }
html.spis-pasek-widoczny { scroll-padding-top: calc(var(--wys-naglowka) + 64px); }
@media (max-width: 599.98px) {
	.spis summary { padding: 14px 60px 14px 18px; }
	.spis__ikona { right: 14px; }
	.spis__lista { padding: 0 18px 12px; }
}
@media (prefers-reduced-motion: reduce) { .spis__ikona::before { transition: none; } }

/* ---------- ścieżka nauki (hub bazy wiedzy) ---------- */
.sciezka { padding: clamp(48px, 5vw, 72px) 0; background: var(--tlo-sekcji); border-bottom: 1px solid var(--linia); }
.sciezka__naglowek { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: 40px; }
.sciezka__naglowek h2 { margin: 0 0 10px; }
.sciezka__wstep { max-width: 64ch; margin: 0; color: var(--tekst-slaby); font-size: var(--tekst-tresci); }
.sciezka__postep { display: grid; gap: 10px; min-width: 300px; padding: 20px 22px; border-radius: 14px; background: var(--noc); color: #fff; }
.sciezka__postep[hidden] { display: none; }
.sciezka__postep-tekst { margin: 0; font-weight: 600; }
.sciezka__postep .przycisk { justify-content: center; }
.sciezka__wyczysc { justify-self: start; padding: 4px 0; border: 0; background: none; color: #DBE2E8; font: 400 14px/1.3 var(--font-tresc); text-decoration: underline; cursor: pointer; }
progress.sciezka__pasek { display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .18); appearance: none; -webkit-appearance: none; }
progress.sciezka__pasek::-webkit-progress-bar { background: rgba(255, 255, 255, .18); }
progress.sciezka__pasek::-webkit-progress-value { background: var(--bursztyn); }
progress.sciezka__pasek::-moz-progress-bar { background: var(--bursztyn); }
.sciezka__poziomy { position: relative; display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.sciezka__poziom { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 48px; padding: 28px 28px 28px 92px; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(20, 43, 62, .06); }
.sciezka__poziom:not(:last-child)::after { content: ""; position: absolute; left: 51px; top: 84px; bottom: -28px; width: 2px; background: linear-gradient(var(--granat), rgba(31, 41, 55, .15)); }
.sciezka__numer { position: absolute; left: 24px; top: 26px; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--noc); color: #fff; font: 700 24px/1 var(--font-naglowki); }
.jest-ukonczony .sciezka__numer { background: var(--bursztyn); color: var(--noc); }
.sciezka__nazwa { margin: 4px 0 8px; font-size: 22px; }
.sciezka__opis { margin: 0 0 10px; color: var(--tekst); }
.sciezka__meta { margin: 0; color: var(--tekst-slaby); font-size: 15px; }
.sciezka__lista { margin: 0; padding: 0; list-style: none; counter-reset: art; }
.sciezka__lista li { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--linia); }
.sciezka__lista li:last-child { border-bottom: 0; }
.sciezka__lista a { display: flex; flex: 1; align-items: center; gap: 12px; padding: 11px 0; color: var(--granat); font-weight: 500; text-decoration: none; }
.sciezka__lista a:hover .sciezka__tytul { text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sciezka__znacznik { flex: none; width: 20px; height: 20px; border: 2px solid var(--obramowanie-pola); border-radius: 50%; } /* 3,7:1 - stan „do przeczytania” widoczny (A-D6) */
.jest-przeczytany .sciezka__znacznik { border-color: var(--bursztyn); background: var(--bursztyn) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23142B3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.jest-przeczytany .sciezka__tytul { color: var(--tekst-slaby); }
.sciezka__minuty { flex: none; color: var(--tekst-slaby); font-size: 14px; font-variant-numeric: tabular-nums; }
.sciezka__uwaga { margin: 20px 0 0; color: var(--tekst-slaby); font-size: 14px; }
@media (max-width: 991.98px) {
	.sciezka__naglowek { grid-template-columns: minmax(0, 1fr); }
	.sciezka__poziom { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 20px 84px; }
	.sciezka__numer { left: 18px; width: 48px; height: 48px; font-size: 20px; }
	.sciezka__poziom:not(:last-child)::after { left: 41px; top: 76px; }
}
@media (max-width: 575.98px) {
	.sciezka__poziom { padding: 20px 16px; }
	.sciezka__numer { position: static; margin-bottom: 4px; }
	.sciezka__poziom:not(:last-child)::after { display: none; }
	.sciezka__postep { min-width: 0; }
}
/* następny krok w ścieżce (artykuł) */
.sciezka-krok { margin-top: 40px; margin-bottom: 8px; }
.sciezka-krok__ramka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 40px; align-items: center; padding: 28px 32px; border-radius: 16px; background: var(--noc); color: #EDF3F6; }
.sciezka-krok__poziom { margin: 0 0 4px; font-size: 15px; }
.sciezka-krok__poziom strong { color: #fff; }
.sciezka-krok__nr { margin: 0 0 10px; color: #DBE2E8; font-weight: 600; font-size: 14px; }
.sciezka-krok__dalej { position: relative; display: grid; gap: 4px; padding: 18px 56px 18px 20px; border-radius: 12px; background: #fff; color: var(--granat); text-decoration: none; transition: box-shadow .2s; }
.sciezka-krok__dalej:hover, .sciezka-krok__dalej:focus-visible { box-shadow: 0 0 0 3px var(--bursztyn); }
.sciezka-krok__dalej svg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--akcent); }
.sciezka-krok__etykieta { color: var(--tekst-slaby); font-size: 14px; font-weight: 600; }
.sciezka-krok__tytul { font: 700 19px/1.3 var(--font-naglowki); }
.sciezka-krok__minuty { color: var(--tekst-slaby); font-size: 14px; }
.sciezka-krok__koniec { margin: 0; }
.sciezka-krok__koniec a { color: #fff; }
.sciezka-krok__cala { grid-column: 1 / -1; justify-self: start; color: #fff; font-size: 15px; text-decoration-color: rgba(255, 255, 255, .5); }
.sciezka-krok__cala:hover, .sciezka-krok__koniec a:hover { color: #fff; text-decoration-color: #fff; } /* bez niebieskiego na granacie (3,21:1; A-D1) */
@media (max-width: 767.98px) { .sciezka-krok__ramka { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } }

/* ---------- strona główna - układ Smart Comparison (specyfikacja UX/UI v1.0, rozdz. 3-5; brandbook B3, rozdz. 07) ---------- */
/* hero: zdjęcie na całą szerokość (kadr 3:1) pod ciepłą grafitową nakładką, biały tekst na spokojnej, ciemnej lewej części kadru
   (polecenie właściciela 2026-11-06: jak w Finaxio, ale w tonacji B3 - grafit, ciepła biel i miedziany akcent, bez granatu i niebieskich
   przycisków). Bez zdjęcia: grafit z ciepłą poświatą. Kontrast tekstu zmierzony na zrzutach (docs/audyty/audyt-1/wykonane-B.md). */
.bx-hero { position: relative; overflow: hidden; background: var(--granat) radial-gradient(ellipse 70% 120% at 100% 0%, rgba(193, 122, 78, .28), transparent 65%); color: #fff; }
.bx-hero__obraz { position: absolute; inset: 0; }
.bx-hero__zdjecie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
/* nakładka w ciepłym grafiocie (#26211F zamiast chłodnego #1F2937) - ciepłe światło kadru zostaje widoczne (audyt 2, G-W5, decyzja 27) */
.bx-hero--zdjecie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(38, 33, 31, .92) 0%, rgba(38, 33, 31, .82) 36%, rgba(38, 33, 31, .35) 62%, rgba(38, 33, 31, .05) 82%); }
.bx-hero__uklad { position: relative; z-index: 1; padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
/* miejsce na kartę modułu zapytania, która nachodzi na dolną krawędź hero (ocena właściciela, P1) */
.bx-hero--z-modulem .bx-hero__uklad { padding-bottom: clamp(104px, 10vw, 160px); }
.bx-hero__tekst { max-width: 660px; }
.bx-hero__nadtytul { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--miedz-jasna); font: 600 15px/1.3 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; }
.bx-hero__nadtytul::before { content: ""; flex: none; width: 32px; height: 2px; border-radius: 1px; background: var(--bursztyn); }
.bx-hero__tytul { max-width: 18ch; color: #fff; font-size: var(--h1); line-height: 1.15; }
.bx-hero__lead { max-width: 52ch; margin: 20px 0 0; color: #EFEAE3; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; }
.bx-hero__tytul, .bx-hero__lead, .bx-hero__nadtytul { text-shadow: 0 1px 12px rgba(17, 24, 39, .55); }
.bx-hero__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 32px 0 0; }
.bx-hero__akcje .przycisk svg { flex: none; }
/* przycisk w ciepłej bieli z grafitowym tekstem (grafit zlewałby się z nakładką); miedziana kreska po najechaniu */
.bx-hero .przycisk { background: var(--tlo-sekcji); color: var(--granat); }
.bx-hero .przycisk:hover, .bx-hero .przycisk:focus-visible { background: #fff; color: var(--granat); box-shadow: inset 0 -3px 0 var(--bursztyn), 0 10px 24px rgba(0, 0, 0, .25); }
.bx-hero__link { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--bursztyn); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bx-hero__link:hover { color: #fff; text-decoration-color: #fff; }
/* telefon i tablet jaśniej i cieplej (decyzja 27): słabsza ciepła nakładka, gradient mocniejszy tylko pod tekstem, nadtytuł w ciepłej bieli
   (miedź jasna #E6B48F miała 3,7-3,9:1 przy 420-767 px - A-W1). Kontrast zmierzony na pikselach kadru z nakładką co 3 px pod każdym wierszem,
   320-1199 px (docs/audyty/audyt-2/wykonane-B.md): nadtytuł min. 5,2:1, tytuł 4,8:1 (tekst duży), lead 5,7:1, link 8,2:1. */
@media (max-width: 1199.98px) { .bx-hero__nadtytul { color: #F6E3D3; } }
/* tablet: nakładka od lewej (pod kolumną tekstu), prawa część kadru z ciepłym światłem odkryta */
@media (min-width: 768px) and (max-width: 1199.98px) { .bx-hero--zdjecie::after { background: linear-gradient(90deg, rgba(38, 33, 31, .8) 0%, rgba(38, 33, 31, .62) 45%, rgba(38, 33, 31, .3) 70%, rgba(38, 33, 31, 0) 100%); } }
/* telefon: kadr na pasie ciepłego światła, nakładka .6 -> .78 (było .6 -> .9 - jednolity grafit) */
@media (max-width: 767.98px) {
	.bx-hero__zdjecie { object-position: 72% 40%; }
	.bx-hero--zdjecie::after { background: linear-gradient(180deg, rgba(38, 33, 31, .6) 0%, rgba(38, 33, 31, .64) 45%, rgba(38, 33, 31, .78) 100%); }
	.bx-hero__akcje .przycisk { width: 100%; }
}
/* nagłówki sekcji strony głównej */
.bx-sekcja-naglowek { margin-bottom: 28px; }
.bx-sekcja-naglowek h2 { margin: 0 0 8px; }
.bx-sekcja-naglowek p { max-width: 70ch; margin: 0; color: var(--tekst-slaby); font-size: 16px; line-height: 1.6; }
.bx-sekcja-naglowek--link { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
/* moduł zapytania: biała karta nachodząca na dolną krawędź hero, miedziany akcent u góry; krok 1 - rodzaj ochrony (większe kafle z wyraźnym
   stanem wyboru), krok 2 - informacje o firmie (branża), mocny przycisk (ocena właściciela, P1). Bez dodatkowych wymaganych pól. */
.bx-dobor { padding-top: 0; }
.bx-dobor .kontener { position: relative; z-index: 2; margin-top: clamp(-120px, -8vw, -64px); }
.bx-dobor__panel { padding: clamp(22px, 3vw, 40px); border: 1px solid var(--linia); border-top: 4px solid var(--bursztyn); border-radius: var(--promien-karty); background: #fff; box-shadow: 0 24px 56px rgba(20, 43, 62, .16); }
.bx-dobor__naglowek h2 { margin: 0 0 6px; font-size: var(--h2); }
.bx-dobor__naglowek h2::before { display: none; }
.bx-dobor__naglowek p { max-width: 70ch; margin: 0; color: var(--tekst-slaby); }
.bx-dobor__krok { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }
.bx-dobor__etykieta { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 0; color: var(--granat); font: 600 17px/1.3 var(--font-naglowki); }
.bx-dobor__pytanie { color: var(--tekst-slaby); font-weight: 400; }
/* numer kroku: miedziany pierścień, grafitowa cyfra (miedź jako akcent, nie tło tekstu) */
.bx-dobor__numer { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border: 2px solid var(--bursztyn); border-radius: 50%; background: #fff; color: var(--granat); font-size: 14px; font-weight: 700; }
.bx-dobor__produkty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bx-wybor { position: relative; display: flex; height: 100%; cursor: pointer; }
.bx-wybor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bx-wybor__tekst { position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 84px; padding: 16px 40px 16px 18px; border: 1px solid var(--obramowanie-pola); border-radius: var(--promien); background: #fff; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.bx-wybor__nazwa { color: var(--granat); font: 600 17px/1.3 var(--font-naglowki); }
.bx-wybor__opis { color: var(--tekst-slaby); font-size: 14px; line-height: 1.4; }
.bx-wybor:hover .bx-wybor__tekst { border-color: var(--granat); background: var(--tlo-sekcji); }
.bx-wybor input:focus-visible + .bx-wybor__tekst { outline: 3px solid var(--akcent); outline-offset: 2px; }
/* wybrany kafel: grafitowa ramka 2 px, miedziana kreska i znacznik z ptaszkiem (stan nie tylko kolorem) */
.bx-wybor input:checked + .bx-wybor__tekst { border-color: var(--granat); box-shadow: inset 0 0 0 1px var(--granat), inset 4px 0 0 var(--bursztyn); background: var(--tlo-sekcji); }
.bx-wybor input:checked + .bx-wybor__tekst::after { content: ""; position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--bursztyn) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bx-dobor__dol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linia); }
.bx-dobor__pole select { width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid var(--obramowanie-pola); border-radius: var(--promien); background: #fff; color: var(--tekst); font: 16px/1.3 var(--font-tresc); }
.bx-dobor__pole select:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.bx-dobor__wyslij .przycisk { min-height: 56px; padding: 16px 36px; font-size: 17px; white-space: nowrap; box-shadow: 0 10px 24px rgba(31, 41, 55, .22); }
.bx-dobor__przypis { margin: 16px 0 0; color: var(--tekst-slaby); font-size: 14px; line-height: 1.5; }
@media (max-width: 1199.98px) { .bx-dobor__produkty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* telefon: kafle w dwóch kolumnach, sama nazwa (opis zostaje dla czytników) - moduł miał 1413 px, a przycisk stał 3 ekrany niżej (G-W5) */
@media (max-width: 767.98px) {
	.bx-dobor__dol { grid-template-columns: minmax(0, 1fr); }
	.bx-dobor__wyslij .przycisk { width: 100%; }
	.bx-dobor__produkty { gap: 8px; }
	.bx-wybor__tekst { justify-content: center; min-height: 52px; padding: 10px 30px 10px 14px; }
	/* długi wyraz dzielony miękkim łącznikiem z szablonu (glowna.php), nie pod znacznikiem i nie poza kaflem; „Gwarancje” - krótka nazwa kafla
	   (decyzja 38); break-word tylko jako zabezpieczenie (audyt 2, G-W4, A-W2; audyt 3, G-W2, A-D3) */
	.bx-wybor__nazwa { font-size: 15px; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
	.bx-wybor__opis { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.bx-wybor input:checked + .bx-wybor__tekst::after { right: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; }
}
@media (max-width: 359.98px) { .bx-dobor__produkty { grid-template-columns: minmax(0, 1fr); } }
/* kategorie ochrony: spokojne białe karty 1 px, radius 12 (brandbook, rozdz. 06), ikona liniowa w jasnym kwadracie */
.bx-kategorie__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.bx-kategoria { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding: 28px; border: 1px solid var(--linia); border-radius: var(--promien-karty); background: #fff; transition: border-color .2s, box-shadow .2s; }
.bx-kategoria:has(a):hover, .bx-kategoria:focus-within { border-color: var(--akcent); box-shadow: 0 10px 28px rgba(20, 43, 62, .08); }
.bx-kategoria__ikona .ikona-karty { width: 52px; height: 52px; margin: 0; }
.bx-kategoria__tytul { margin: 0 0 6px; font-size: var(--h3); }
.bx-kategoria__tytul a { color: inherit; text-decoration: none; }
.bx-kategoria__tytul a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bx-kategoria__opis { margin: 0; color: var(--tekst-slaby); }
.bx-kategoria__produkty { margin: 12px 0 0; color: var(--granat); font-size: 15px; font-weight: 500; }
/* nazwy produktów - linki nad rozciągniętym linkiem tytułu karty (audyt 2, S-D4) */
.bx-kategoria__produkty a { position: relative; z-index: 1; display: inline-block; padding: 4px 0; color: var(--granat); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--akcent) 55%, transparent); }
.bx-kategoria__produkty a:hover { color: var(--akcent); text-decoration-color: var(--akcent); }
@media (max-width: 767.98px) { .bx-kategorie__lista { grid-template-columns: minmax(0, 1fr); } .bx-kategoria { padding: 20px; gap: 16px; } }
/* branże: lista skrótów (jak tematy) */
.bx-branze__lista { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* telefon: 12 najczęstszych branż i „Wszystkie branże (N)” zamiast 1,5 ekranu pigułek (audyt 2, G-D3) */
.bx-branze__wszystkie { display: none; }
.bx-branze__wszystkie a { font-weight: 600; }
@media (max-width: 599.98px) {
	.bx-branze__lista > li:nth-child(n+13):not(.bx-branze__wszystkie) { display: none; }
	.bx-branze__wszystkie { display: block; }
}
/* "Jak to działa?": oś czasu - duże numery na linii */
.bx-kroki { background: var(--tlo-chlodne); }
.bx-kroki h2 { margin-top: 0; }
.bx-kroki__lista { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin: 40px 0 0; padding: 0; list-style: none; counter-reset: krok; }
.bx-krok { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; align-content: start; }
.bx-krok__numer { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; background: var(--noc); color: #fff; font-size: 28px; font-weight: 700; box-shadow: 0 0 0 8px var(--tlo-chlodne); }
.bx-krok__tytul { grid-column: 1 / -1; margin: 0 0 8px; font-size: var(--h3); }
.bx-krok p { grid-column: 1 / -1; margin: 0; color: var(--tekst-slaby); font-size: 16px; line-height: 1.6; }
.bx-kroki__lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1200px) { .bx-kroki__lista--4::before { content: ""; position: absolute; top: 32px; left: 32px; right: calc((100% - 120px) / 4 - 28px); height: 2px; background: linear-gradient(90deg, var(--granat), var(--akcent)); } }
/* zasady: jasnoniebieski panel, tytuł nad listą, 4 kolumny */
/* panel na ciepłej bieli z ramką - „Jak to działa?” (tło chłodne) i „Jak pracuje Asevra” nie zlewają się w jeden blok (audyt 2, G-D3) */
.bx-zalety__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; padding: clamp(32px, 4vw, 56px); border: 1px solid var(--linia); border-radius: 20px; background: var(--tlo-sekcji); }
.bx-zalety__panel h2 { margin: 0; font-size: var(--h2); line-height: 1.25; }
.bx-zalety__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.bx-zalety__ikona .ikona-karty { width: 52px; height: 52px; }
.bx-zalety__ikona svg { width: 28px; height: 28px; }
.bx-zalety__lista h3 { margin: 14px 0 6px; font-size: 20px; }
.bx-zalety__lista p { margin: 0; color: var(--tekst); font-size: 16px; line-height: 1.6; }
@media (max-width: 1199.98px) { .bx-kroki__lista, .bx-zalety__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .bx-kroki__lista, .bx-zalety__lista { grid-template-columns: minmax(0, 1fr); } }
/* baza wiedzy na stronie głównej: karty ze zdjęciem i lista tematów */
.bx-wiedza { background: var(--tlo-sekcji); }
.bx-wiedza__linki { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.bx-wiedza .karty--zdjecia { gap: 24px; }
.bx-wiedza .karta--zdjecie { gap: 10px; padding-bottom: 28px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(20, 43, 62, .06); transition: box-shadow .2s; }
.bx-wiedza .karta--zdjecie:hover, .bx-wiedza .karta--zdjecie:focus-within { box-shadow: 0 16px 36px rgba(20, 43, 62, .14); }
.bx-wiedza .karta__zdjecie { margin-bottom: 10px; }
.bx-wiedza .karta--zdjecie:hover .karta__zdjecie { transform: scale(1.03); }
.bx-wiedza .karta__tytul { margin-top: 4px; margin-bottom: 0; font-size: 21px; line-height: 1.25; }
.bx-wiedza .karta__opis { color: var(--tekst-slaby); }
/* telefon: 3 artykuły w jednej kolumnie jako karty poziome (zdjęcie 112 px z lewej, etykieta i tytuł obok) - w siatce 2-kolumnowej
   karty miały 160 px, tytuły w 3 wierszach, a trzecia stała sama (audyt 3, G-D5); tablet 768-991 px: 3 kolumny zamiast 2 + sierota */
@media (min-width: 768px) and (max-width: 991.98px) {
	.bx-wiedza .karty--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.bx-wiedza .karta--zdjecie > :not(.karta__zdjecie) { margin-left: 18px; margin-right: 18px; }
	.bx-wiedza .karta__tytul { font-size: 18px; }
}
@media (max-width: 767.98px) {
	.bx-wiedza .karty--zdjecia { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.bx-wiedza .karta--zdjecie { justify-content: center; gap: 6px; min-height: 96px; padding: 12px 16px 12px 128px; }
	.bx-wiedza .karta--zdjecie > .karta__zdjecie { position: absolute; left: 0; top: 0; width: 112px; height: 100%; margin: 0; aspect-ratio: auto; }
	.bx-wiedza .karta--zdjecie > :not(.karta__zdjecie) { margin: 0; }
	.bx-wiedza .karta__tytul { font-size: 17px; -webkit-hyphens: manual; hyphens: manual; }
	.bx-wiedza .karta__wiecej { display: none; }
}
.bx-tematy { margin-top: 24px; }
.bx-tematy__tytul { margin: 0 0 12px; color: var(--granat); font-size: 16px; font-weight: 600; }
.bx-tematy ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bx-tematy a, .bx-branze__lista a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--linia); border-radius: var(--promien); background: #fff; color: var(--granat); font-size: 15px; text-decoration: none; }
.bx-tematy a:hover, .bx-tematy a:focus-visible, .bx-branze__lista a:hover, .bx-branze__lista a:focus-visible { border-color: var(--akcent); color: var(--akcent); }

/* ---------- pas CTA nad stopką: granat marki (stopka = granat nocy), biały tytuł ---------- */
.pas-cta { position: relative; overflow: hidden; background: var(--granat) radial-gradient(ellipse 45% 140% at 100% 0%, rgba(75, 107, 138, .55), transparent 70%); border-bottom: 1px solid rgba(255, 255, 255, .12); color: #EDF3F6; }
.pas-cta__uklad { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); } /* jeden odstęp pionowy (G-W10) */
.pas-cta__tytul { margin: 0 0 8px; color: #fff; font-weight: 700; font-size: var(--h2); line-height: 1.25; letter-spacing: -0.02em; }
.pas-cta__tytul::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 16px; border-radius: 2px; background: var(--bursztyn); }
.pas-cta p { margin: 0; color: #DBE2E8; font-size: 18px; }
/* formuła przekazania (jedno miejsce na stronie - decyzja 26): mniejszy krój pod opisem, link biały z miedzianym podkreśleniem */
.pas-cta__tekst { max-width: 72ch; }
.pas-cta p.pas-cta__formula { margin-top: 12px; font-size: 15px; line-height: 1.6; }
.pas-cta__formula a { color: #fff; text-decoration-color: var(--bursztyn); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pas-cta__formula a:hover { color: #fff; text-decoration-color: #fff; }
/* przycisk nie jest ściskany przez długi tekst obok (był 247 x 97 px w trzech wierszach; audyt 1, G-W1) */
.pas-cta .przycisk { flex: none; padding: 18px 34px; font-size: 17px; white-space: nowrap; }
@media (max-width: 479.98px) { .pas-cta .przycisk { width: 100%; white-space: normal; } }
@media (max-width: 991.98px) { .pas-cta__uklad { flex-direction: column; align-items: flex-start; } }

/* ---------- stopka: kolumny sekcji menu i pas dolny (logo, akcje, kontakt, linki prawne) ---------- */
.stopka { padding: clamp(56px, 6vw, 72px) 0 36px; background: var(--noc); color: rgba(255, 255, 255, .62); font: 400 16px/1.5 var(--font-tresc); }
.stopka a { color: rgba(255, 255, 255, .86); text-decoration: none; transition: color .15s; }
.stopka a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--bursztyn); text-underline-offset: 4px; }
.stopka ul { margin: 0; padding: 0; list-style: none; }
.stopka li { margin: 0; }
.stopka__nawigacja { display: grid; grid-template-columns: repeat(4, max-content) minmax(0, 1fr); gap: 32px 56px; }
.stopka__tytul { margin: 0 0 18px; color: #fff; font: 700 14px/1.4 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; }
.stopka .stopka__tytul a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; } /* cel dotykowy (A-D9) */
.stopka__linki li + li { margin-top: 11px; }
.stopka__pas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: stretch; margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .14); }
.stopka__marka { display: flex; flex-direction: column; gap: 16px; }
.stopka__logo { display: inline-block; line-height: 0; }
.stopka__opis { max-width: 52ch; margin: 18px 0 0; color: rgba(255, 255, 255, .62); font-size: 15px; line-height: 1.6; }
/* prawa kolumna na pełną wysokość pasa: akcje u góry (przy logo), kontakt, linki prawne i copyright na dole */
.stopka__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; height: 100%; text-align: right; }
.stopka__meta > .stopka__akcje + * { margin-top: auto; }
.stopka__akcje { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 32px; margin: -2px 0 4px; }
.stopka .stopka__akcje a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 700 14px/1.3 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.stopka__strzalka { flex: none; transition: transform .15s; }
.stopka__akcje a:hover .stopka__strzalka { transform: translateX(2px); }
.stopka__kontakt { margin: 0; color: rgba(255, 255, 255, .86); }
.stopka__etykieta { margin-right: 8px; color: rgba(255, 255, 255, .62); font: 700 14px/1.3 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; }
.stopka__prawne { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; margin: 0; font-size: 15px; }
.stopka__prawne + .stopka__prawne { margin-top: -10px; } /* odstęp między wierszami 4 px */
.stopka .stopka__prawne a, .stopka .stopka__link { color: rgba(255, 255, 255, .62); }
.stopka__link { display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.stopka .stopka__link:hover { color: #fff; text-decoration: underline; }
.stopka__prawa { margin: 0; color: rgba(255, 255, 255, .5); font: 500 12px/1.6 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 1199.98px) {
	.stopka__nawigacja { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
	.stopka__kolumna--polecane { grid-column: span 2; }
	.stopka__pas { grid-template-columns: minmax(0, 1fr); }
	.stopka__meta { align-items: flex-start; text-align: left; }
	.stopka__meta > .stopka__akcje + * { margin-top: 0; }
	.stopka__akcje, .stopka__prawne { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
	.stopka__nawigacja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
	.stopka__kolumna--polecane { grid-column: 1 / -1; }
	.stopka__akcje { flex-direction: column; gap: 0; }
	.stopka .stopka__akcje a, .stopka__linki a, .stopka__prawne a, .stopka__prawne .stopka__link { display: inline-block; padding: 6px 0; }
}

/* ---------- wyszukiwarka ---------- */
.wyszukiwarka { display: flex; gap: 12px; max-width: 760px; }
.wyszukiwarka input { flex: 1; min-width: 0; padding: 14px 18px; border: 1px solid var(--obramowanie-pola); border-radius: var(--promien); font: 400 17px/1.3 var(--font-tresc); color: var(--granat); }
.wyszukiwarka input:focus { outline: 2px solid var(--akcent); border-color: var(--akcent); }
/* pole w nagłówku strony /szukaj: pełna szerokość kolumny, białe tło */
.wyszukiwarka--naglowek { max-width: 980px; margin-top: 28px; }
.wyszukiwarka--naglowek input { background: #fff; padding: 16px 22px; }
.wyszukiwarka__czesto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.wyszukiwarka__czesto span { color: var(--tekst-slaby); font-size: 15px; margin-right: 4px; }
.wyszukiwarka__czesto a { padding: 6px 14px; border: 1px solid var(--linia); border-radius: var(--promien); background: #fff; color: var(--granat); font-size: 15px; text-decoration: none; transition: border-color .2s, color .2s; }
.wyszukiwarka__czesto a:hover { border-color: var(--akcent); color: var(--akcent); }
.wyszukiwarka__liczba { margin: 0 0 16px !important; color: var(--tekst); font: 400 16px/1.4 var(--font-tresc); }
.wyszukiwarka__wiecej { margin-top: 20px; border: 1px solid var(--obramowanie-pola); }
.wyszukiwarka__brak { max-width: none; }
.wyszukiwarka__brak .wyszukiwarka__czesto { margin-top: 20px; }
.wyszukiwarka__dzialy { margin-top: 32px; }
.wstep .wyszukiwarka { margin-bottom: 20px; } /* 404: akapit nie klei się do pola (G-D8) */
/* wyniki: miniatura | dział, tytuł, fragment | strzałka; cała karta klikalna */
.wyszukiwarka__wyniki { display: grid; gap: 16px; max-width: none; margin: 0; padding: 0 !important; list-style: none; }
.wyszukiwarka__wyniki .wynik { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px 28px; align-items: start; margin: 0 !important; padding: 28px 32px !important; border: 1px solid var(--linia); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.wyszukiwarka__wyniki .wynik::before { display: none !important; }
.wyszukiwarka__wyniki .wynik[hidden] { display: none; }
.wyszukiwarka__wyniki .wynik--zdjecie { grid-template-columns: 200px minmax(0, 1fr) 32px; }
.wynik:hover { border-color: var(--akcent); box-shadow: 0 8px 24px rgba(20, 43, 62, .06); }
.wynik:hover .strzalka { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.wynik:focus-within { outline: 2px solid var(--akcent); outline-offset: 2px; }
.wynik__zdjecie { display: block; width: 200px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.wynik__dzial { margin: 0 0 6px !important; color: var(--akcent); font: 500 14px/1.3 var(--font-naglowki); }
/* długi wyraz („restrukturyzacyjnego”) przy 320 px łamany w karcie, bez przewijania w bok (WCAG 1.4.10; audyt 3, A-D1) */
.wynik__tytul { margin: 0 0 8px !important; color: var(--granat); font: 500 22px/1.3 var(--font-naglowki); letter-spacing: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.wynik__link { color: inherit; text-decoration: none; }
.wynik__link:focus { outline: none; }
.wynik__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.wynik__fragment { margin: 0 !important; color: var(--tekst); font-size: 16px; line-height: 1.55; }
.wynik .strzalka { color: var(--granat); }
/* podświetlenie bez poziomego odstępu - nie dzieli wyrazów; obwódka cieniem, nie paddingiem */
.wynik mark { background: var(--akcent-tlo); color: var(--granat); border-radius: 2px; padding: 0; box-shadow: 0 0 0 1px var(--akcent-tlo); }
@media (max-width: 767.98px) {
	.wyszukiwarka__wyniki .wynik, .wyszukiwarka__wyniki .wynik--zdjecie { grid-template-columns: minmax(0, 1fr); padding: 18px !important; gap: 12px; }
	/* telefon: miniatura 72 x 72 obok tytułu, fragment do 3 linii */
	.wyszukiwarka__wyniki .wynik--zdjecie { grid-template-columns: 72px minmax(0, 1fr); gap: 0 14px; align-items: start; }
	.wynik__zdjecie { width: 72px; height: 72px; aspect-ratio: 1; border-radius: 8px; }
	.wynik .strzalka { display: none; }
	.wynik__tytul { font-size: 18px; }
	.wynik__dzial { font-size: 13px; }
	.wynik__fragment { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 15px; }
	.wyszukiwarka--naglowek { flex-wrap: wrap; }
	.wyszukiwarka--naglowek input { flex-basis: 100%; }
}

/* ---------- mapa strony i drobne strony ---------- */
.mapa-strony { columns: 3 300px; column-gap: 48px; }
.mapa-strony__sekcja { break-inside: avoid; margin-bottom: 32px; }
.mapa-strony h2 { margin: 0 0 10px; font-size: 1.25rem; }
.mapa-strony h2 a { text-decoration: none; }
.mapa-strony ul { margin: 0; padding: 0 !important; list-style: none; }
.mapa-strony li { margin: 4px 0 !important; padding: 0 !important; font-size: 15px; }
.mapa-strony li::before { display: none !important; }
.mapa-strony__poziom-2 { padding-left: 16px !important; }
.mapa-strony__poziom-3 { padding-left: 32px !important; }
.podziekowanie p { margin: 0 0 8px; }

/* ---------- baner cookies, przyklejony przycisk, "do góry" ---------- */
.cookies { position: fixed; left: 50%; bottom: 20px; z-index: 1100; display: flex; align-items: center; gap: 16px 28px; width: min(1080px, calc(100% - 32px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px; transform: translateX(-50%); border: 1px solid var(--linia); border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(20, 43, 62, .18); font-size: 14px; line-height: 1.5; }
.cookies[hidden], .menu-otwarte .cookies { display: none; } /* otwarte menu telefonu: baner nie zasłania menu */
.cookies p { margin: 0; }
.cookies__tytul { color: var(--granat); font: 600 15px/1.3 var(--font-naglowki); margin-bottom: 2px !important; }
.cookies__przyciski { display: flex; flex: none; gap: 10px; }
/* baner otwarty: element z fokusem nie chowa się pod banerem (WCAG 2.4.11); --wys-banera może ustawić serwis.js z rzeczywistej wysokości */
html.cookies-otwarte { scroll-padding-bottom: calc(var(--wys-banera, 124px) + 16px); }
/* koniec strony: stopka dłuższa o wysokość banera, żeby jej ostatni wiersz dało się przewinąć nad baner (audyt 3, A-W1 / G-D1);
   0-2-1 wygrywa z dopełnieniem pod przyklejony przycisk, który przy otwartym banerze i tak jest ukryty */
html.cookies-otwarte .stopka { padding-bottom: calc(var(--wys-banera, 170px) + 36px); }
.do-gory { position: fixed; right: 24px; bottom: 24px; z-index: 940; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--obramowanie-pola); border-radius: 50%; background: #fff; color: var(--granat); box-shadow: 0 8px 24px rgba(20, 43, 62, .14); cursor: pointer; transition: background-color .2s, color .2s; }
.do-gory svg { transform: rotate(-90deg); }
.do-gory:hover { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.do-gory[hidden], .cookies-otwarte .do-gory, .menu-otwarte .do-gory { display: none; }
@media (max-width: 991.98px) { html:has(.kalkulator, .formularz) .do-gory { display: none; } }
/* niski ekran (np. powiększenie 200-400%): baner zwarty, przyciski w rzędzie, przewijany w sobie */
@media (max-height: 480px) {
	/* baner najwyżej do połowy ekranu, przyciski na górze, tekst przewijany w banerze - zostaje miejsce na treść z fokusem (A-W2) */
	.cookies { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; bottom: 8px; max-height: 50dvh; padding: 10px 14px; font-size: 13px; line-height: 1.4; }
	.cookies__przyciski { order: -1; }
	.cookies__tekst p { display: inline; }
	.cookies__tytul { margin-right: 4px; font-size: 13px; }
	html.cookies-otwarte { scroll-padding-bottom: calc(50dvh + 16px); }
	html.cookies-otwarte .stopka { padding-bottom: calc(50dvh + 24px); }
	/* nagłówek w treści (przyklejony z paskiem wyniku zajmował połowę ekranu); przy otwartym menu wraca na górę (A-D2) */
	.naglowek { position: static; }
	.menu-otwarte .naglowek, .panel-otwarty .naglowek { position: sticky; }
	html { scroll-padding-top: 16px; }
	.spis-pasek, .do-gory { display: none; }
}
@media (max-width: 767.98px) {
	/* baner kompaktowy: tytuł w jednym wierszu z tekstem, przyciski obok siebie - zasłania mniej ekranu i głównego CTA (A-W1) */
	.cookies { flex-direction: column; align-items: stretch; gap: 10px; bottom: 8px; width: calc(100% - 16px); padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
	.cookies__tekst p { display: inline; }
	.cookies__tytul { margin-right: 4px; font-size: 14px; }
	.cookies__przyciski { gap: 8px; }
	.cookies__przyciski > * { flex: 1; padding: 10px 12px; }
	html.cookies-otwarte { scroll-padding-bottom: calc(var(--wys-banera, 170px) + 16px); }
	/* przyklejony przycisk (telefon): pokazuje go serwis.js po zniknięciu głównego CTA; ukryty, gdy otwarty baner cookies */
	.przycisk--przyklejony { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 950; box-shadow: 0 12px 30px rgba(20, 43, 62, .25); }
	.przycisk--przyklejony[hidden], .cookies-otwarte .przycisk--przyklejony { display: none; }
	html.przyklejony-widoczny { scroll-padding-bottom: 88px; }
	.przyklejony-widoczny .stopka { padding-bottom: 72px; }
	.do-gory { right: 16px; }
	.przyklejony-widoczny .do-gory { display: none; } /* kółko zasłaniało tekst obok przyklejonego przycisku */
}
/* niski ekran (powiększenie 400%, telefon poziomo): bez przyklejonego przycisku - zajmował ponad 1/4 ekranu; CTA zostaje w nagłówku i pasie (audyt 3, A-D2) */
@media (max-width: 767.98px) and (max-height: 480px) {
	.przycisk--przyklejony { display: none !important; }
	html.przyklejony-widoczny { scroll-padding-bottom: 16px; }
}

/* ---------- tryb wymuszonych kolorów (Windows Kontrast): przyciski z ramką, ikona menu widoczna (A-D5) ---------- */
@media (forced-colors: active) {
	.przycisk, .cookies button, .stopka__link { border: 1px solid ButtonText; }
	.naglowek__burger-linie, .naglowek__burger-linie::before, .naglowek__burger-linie::after { forced-color-adjust: none; background: ButtonText; }
	.naglowek__burger[aria-expanded="true"] .naglowek__burger-linie { background: transparent; }
	.ikona-karty, .panel__karta-ikona { border: 1px solid CanvasText; }
	.spis-pasek, .przycisk--przyklejony, .cookies { border: 1px solid CanvasText; }
	/* logo (granatowy raster) na białej plakietce - w ciemnym motywie kontrastowym znikało na czarnym tle (audyt 3, A-D4) */
	.logo { forced-color-adjust: none; padding: 4px 8px; border-radius: 6px; background: #fff; }
	.logo--plakietka { padding: 12px 16px; }
}

/* ---------- ograniczony ruch i druk ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@page { size: A4; margin: 14mm 14mm 16mm; }
@media print {
	html, body { background: #fff; font-size: 11pt; }
	.naglowek, .stopka, .cookies, .pas-cta, .do-gory, .spis-pasek, .pomin, .przycisk--przyklejony, .okruszki, .udostepnij, [data-komunikat-strony] { display: none !important; }
	thead { display: table-header-group; }
	tr, li { break-inside: avoid; page-break-inside: avoid; }
	h2, h3 { break-after: avoid; page-break-after: avoid; }
	* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}