/* =========================================================================
   f-finance - demo PART-WEB
   PRZEPIS WIZUALNY PART-WEB (zmierzony z despe-debki.pl, pizzeriakuchar.pl, dziadkowizna):
   ciemna dominanta + JEDEN mocny akcent uzyty odwaznie + hero pelnoekranowy ze zdjeciem
   + naglowki dwutonowe + przyciski-pigulki + rzad chipow.

   Paleta wyprowadzona z REALNEJ identyfikacji klienta (pipeta z logo i ze sciany w biurze):
   zloto #FFC330, petrol #2E4A5A, czern.

   KONTRASTY (policzone, nie zgadniete):
   krem na nocy 16.74:1 | mgla na nocy 9.23:1 | ZLOTO na nocy 9.63:1 | noc na zlocie 9.63:1
   Na ciemnym tle zloto ma wysoki kontrast, wiec MOZE niesc tekst - inaczej niz na jasnym,
   gdzie dawalo 1.8:1. Stad cala strona jest ciemna: to odblokowuje kolor marki.
   ========================================================================= */

:root {
  --noc: #0A1219;          /* tlo glowne */
  /* 19.08 noc (Maciek: header i hero maja byc jasniejsze). Rodzina ciemnych powierzchni
     poszla W GORE o ~3 stopnie, do petrolu ze zdjec biura. Sufit wyznacza male zloto
     #FFC330: przy 7:1 tlo nie moze byc jasniejsze niz lum 0.044. Pas #16394A = 7,62:1. */
  --noc-2: #16394A;        /* CIEMNY PAS (.sekcja--petrol) i pasek kontaktowy nad menu.
                              19.08 wieczorem pociemniony z #0D2432: biel na nim skacze
                              z 15,96:1 na 16,7:1 - to najtansza dzwignia "jasniejszego" tekstu,
                              bo bielszego koloru niz #FFFFFF nie ma.
                              Od 19.08 to nie jest juz "sekcja przeplatana" na ciemnej
                              podlodze, tylko pas przecinajacy jasna strone. */
  --karta: #16262F;        /* karty na ciemnym */
  --petrol: #2E4A5A;       /* obramowania, tla drugorzedne */
  --kresa: rgba(255, 195, 48, .28);
  --kresa-zimna: rgba(214, 196, 158, .17);   /* bylo stalowe rgba(167,184,194,.16) - ocieplone na bez (przegląd PART-WEB 07.08) */

  --zloto: #FFC330;        /* AKCENT. Od 19.08 nocy JEDNA wartosc dla powierzchni (przyciski,
                              ikony, wypelnienia) i dla litery na ciemnym. Tekst --noc na tym
                              zlocie ma 11,4:1, samo zloto na pasie 10,4:1, w nawigacji 11,4:1. */
  --zloto-jasne: #FFD569;
  /* ⚡ 19.08.2026 - ZLOTO MA DWIE ROLE i trzeba je rozdzielic:
     --zloto       POWIERZCHNIA (tlo przyciskow, wypelnienia, obwodki) - zawsze marka,
     --zloto-tekst LITERA. Na ciemnym to zloto marki (8,7:1), w sekcji jasnej przelacza
                   sie na --zloto-ink (#654200, 8,0:1 na papierze), bo zloto marki
                   na papierze ma 1,73:1 i po prostu znika. */
  /* Zloto w TEKSCIE jasniejsze od zlota marki (prosba Macka 19.08): na pasie #0D2432
     daje 10,37:1 zamiast 8,15:1 i nie brazowieje przy malych stopniach pisma.
     ⚠️ 19.08 noc: powierzchnie POSZLY za litera. Zloto UI jest teraz o stopien jasniejsze
        niz pasek w samym znaku (#EAB035) - swiadoma decyzja klienta, nie przeoczenie. */
  /* 19.08 wieczorem (Maciek: „wyblakly, ma byc bardziej zloty"): --zloto-jasne #FFD569
     mialo nasycenie ledwie 60% i na ciemnym czytalo sie slomkowo. #FFC330 to ta sama
     rodzina barwna co logo (43 st. wobec 41 st.), pelna jasnosc, nasycenie 81%.
     Kontrasty: hero 9,9:1, pas 10,4:1, nawigacja 11,4:1, stopka 12,3:1. */
  --zloto-tekst: var(--zloto);
  --zloto-tekst-jasny: var(--zloto-jasne);
  /* ⚡ 19.08 noc: DWA zlota na jasnym tle, bo prog kontrastu zalezy od wielkosci pisma.
     --zloto-duze  do NAGLOWKOW i wielkich liczb (5,07:1 na papierze, prog 4,5:1 dla duzego),
     --zloto-ink   do malych napisow: linki, etykiety, podpisy (8,00:1, prog domowy 7:1).
     Oba maja pelne nasycenie zlota - braz bierze sie ze spadku nasycenia, nie z jasnosci. */
  /* ⚡ 19.08 noc, decyzja Macka powtorzona dwa razy: naglowki na jasnym maja to SAMO
     zloto co przyciski, czyli #FFC330. ⚠️ POMIAR: 1,42:1 na papierze (prog dla duzego
     tekstu to 4,5:1). Swiadomy wybor estetyczny ponad prog kontrastu - odnotowane. */
  --zloto-duze: #FFC330;
  /* ⚡ 20.08.2026, decyzja Macka: KONIEC BRAZU. Zloto na jasnym tle ma byc to samo,
     co w przyciskach. ⚠️ POMIAR: jako maly tekst #FFC330 ma 1,60:1 na bialej karcie
     i 1,42:1 na papierze (prog domowy 7:1). Swiadomy wybor estetyczny.
     ⚡ Jesli padnie „nie widac": to samo zloto jako PIGULKA (tlo zlote, napis --noc)
     daje 11,77:1 - tak juz dzialaja przyciski w kartach. */
  --zloto-ink: #FFC330;    /* zloto do tekstu na JASNYM tle. Bylo #7A5200 = 6,06:1 na papierze
                              i 6,92:1 na bieli, czyli PONIZEJ progu domowego 7:1 w kilkudziesieciu
                              miejscach. Teraz 8,20:1 na papierze i 9,00:1 na bieli. */

  /* ⚡ 19.08.2026, prosba Macka: tekst na ciemnym CALKOWICIE bialy. To zreszta nasza
     regula domowa po Kawie i Zabawie: cieply bez przy wygladzaniu czcionki miesza sie
     z ciemnym tlem i wychodzi braz, mimo ze kontrast liczbowo przechodzil (7-9:1).
     Biel na pasie #0D2432 daje 15,96:1. Hierarchie na ciemnym niesie rozmiar i grubosc
     pisma, nie odcien. */
  --krem: #FFFFFF;         /* tekst na ciemnym */
  --mgla: #FFFFFF;         /* tekst drugorzedny na ciemnym - TEZ biel (prosba Macka 19.08).
                              Poprzednia bezowa mgla #D9D2C2 czytala sie jak szarosc.
                              Bylo #A7B8C2 (9,23:1): normy nie lamalo, ale przy naglowkach
                              o 16,74:1 czytalo sie jako wyblakle (uwaga klienta 31.07). */

  /* ---------- BAZA JASNA (od 19.08.2026) ----------
     Trzy tony na jasnej stronie, przypisane do ROLI, nie dobierane na oko:
     --papier   = domyslna sekcja jasna,
     --papier-2 = co druga sekcja jasna, zeby dwie sasiadujace nie zlaly sie w jedna plame,
     --karta-jasna = karty lezace NA jasnym (biel z cieniem, warstwa wyzej). */
  --tlo: #F5F1EA;          /* podloga strony (body) - cieply papier */
  --papier: #F5F1EA;       /* sekcja jasna */
  --papier-2: #FFFFFF;     /* co druga sekcja jasna */
  --karta-jasna: #FFFFFF;  /* karta na jasnym */
  --atrament: #101A21;     /* tekst na jasnym */
  --atrament-mgla: #37454C;   /* 8,96:1 na jasnej sekcji; bylo #48585F = 6,69:1 */

  --legal-bg: #FFFBEE;
  /* ⚠️ --legal-line to NIE tylko ramka: siedzi w text-decoration-color i w outline
     focusa (regula .link-reset:focus-visible). Przy #B18628 mialo 3,21:1 na --legal-bg,
     czyli obrys focusa byl slabo widoczny. #6B4E0C daje 7,46:1. */
  --legal-line: #6B4E0C;

  --tekst: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Archivo', 'Inter Tight', system-ui, sans-serif;

  /* SKALA TYPOGRAFICZNA - piec stopni na cala strone.
     Zadnych rozmiarow wpisywanych "z reki" w atrybucie style: kazdy naglowek
     siega po jeden z tych pieciu kroków. To jest cala skala, nic poza nia. */
  --t-1: clamp(2.35rem, 1.1rem + 4.4vw, 4.2rem);   /* H1 - jeden na stronie */
  --t-2: clamp(1.95rem, 1.1rem + 3.1vw, 3.4rem);   /* H2 - naglowek sekcji */
  --t-3: clamp(1.55rem, 1.15rem + 1.6vw, 2.3rem);  /* H2 w karcie, wpis wyrozniony */
  --t-4: clamp(1.15rem, 1rem + .7vw, 1.55rem);     /* H3 */
  --t-5: 1.1rem;                                   /* naglowek w karcie, H4 */

  /* RYTM PIONOWY - trzy odstepy, nie dwadziescia przypadkowych.
     Uzywane przez klasy .mt-s / .mt-m / .mt-l zamiast inline margin-top. */
  --odstep-s: 18px;
  --odstep-m: 34px;
  --odstep-l: 46px;

  --miara: 70ch;           /* maksymalna dlugosc wiersza w akapicie */

  --wrap: 1220px;
  --wrap-naglowek: 1460px;  /* pasek nagl. szerszy niz tresc - patrz regula .nav .wrap */
  --pigulka: 999px;
  --r: 18px;               /* duze zaokraglenia - zdjecia i karty */
}

*, *::before, *::after { box-sizing: border-box; }

/* Atrybut hidden musi wygrywac z klasami, ktore ustawiaja display.
   Bez tego .btn { display: inline-flex } bije regule przegladarki [hidden] { display: none }
   i przycisk "Wstecz" w konfiguratorze widac juz przy pierwszym pytaniu. */
[hidden] { display: none !important; }

/* scroll-padding-top: kotwice (#uslugi, #formularz, #dokumenty) musza zatrzymac sie
   PONIZEJ przyklejonego naglowka. Naglowek ma 78-79 px, wiec 100 px daje zapas.
   Bez tego pierwszy wiersz sekcji chowal sie pod paskiem nawigacji. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  /* ⚡ 19.08.2026: podloga strony jest JASNA. Ciemne zostaly pasy, hero, pasek i stopka.
     color zostaje jasny CELOWO: tekst lezy wylacznie w sekcjach, a te maja wlasny ton.
     Sekcja bez klasy tonu bylaby bledem (jasne tlo + jasny tekst) - pilnuje tego bramka. */
  background: var(--tlo);
  color: var(--krem);
  font-family: var(--tekst);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* height:auto OBOWIAZKOWE - kazdy <img> ma atrybuty width/height (rezerwuja miejsce).
   Bez tej linii atrybut height rozciaga zdjecie tam, gdzie CSS nadpisuje szerokosc. */
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.022em;
  text-transform: uppercase;
  margin: 0 0 .45em;
  text-wrap: balance;
}
/* 4.2rem, nie 5.1rem: przy 5.1 naglowek zajmowal trzy wiersze po 85 px i wypychal chipy
   pod krawedz ekranu. Nadal krzyczy, ale hero miesci sie w jednym kadrze. */
h1 { font-size: var(--t-1); }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-4); letter-spacing: -.012em; }
h4 { font-family: var(--tekst); font-weight: 700; font-size: var(--t-5); text-transform: none; letter-spacing: 0; margin: 0 0 .5em; }

/* H2 w karcie albo w waskiej kolumnie - stopien nizej, nadal ze skali. */
.h2--karta { font-size: var(--t-3); }

/* naglowek dwutonowy - kluczowe slowo w zlocie. Sygnatura naszych stron. */
h1 em, h2 em, .zloty { font-style: normal; color: var(--zloto-tekst); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.proza { max-width: 62ch; }

/* DLUGOSC WIERSZA. Akapit szerszy niz ok. 70 znakow czyta sie gorzej - oko gubi
   poczatek nastepnego wiersza. Kolumna tekstu ma wiec twardy sufit, niezaleznie
   od tego, jak szeroka jest sekcja. .proza zawezaja jeszcze mocniej. */
.sekcja p, .sekcja dd, .sekcja li,
.podstrona-hero p, .stopka-nota p { max-width: var(--miara); }

/* RYTM PIONOWY - zamiast margin-top wpisywanego w atrybut style */
.mt-s { margin-top: var(--odstep-s); }
.mt-m { margin-top: var(--odstep-m); }
.mt-l { margin-top: var(--odstep-l); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: .5em; }
li::marker { color: var(--zloto-tekst); }

strong, b { font-weight: 700; color: var(--krem); }
::selection { background: var(--zloto); color: var(--noc); }

:focus-visible { outline: 3px solid var(--zloto); outline-offset: 3px; border-radius: 4px; }

/* ---------- uklad ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* PASEK NAGLOWKA SZERSZY NIZ TRESC (przegląd PART-WEB, 31.07.2026: „zostan partnerem i zaloguj
   powinno byc bardziej przesuniete do prawej").
   Przyciski stały juz 24 px od prawej krawedzi kontenera - w kolumnie tresci nie da sie
   ich przesunac dalej. Zeby poszly w prawo, musi sie poszerzyc SAM PASEK. Naglowek
   i topbar dostaja wiec wlasna, szersza miare niz sekcje tresci. Efekt przy 1920 px:
   przyciski koncza sie 254 px od krawedzi okna zamiast 374 px. */
.topbar .wrap, .nav .wrap { max-width: var(--wrap-naglowek); }

.sekcja { padding: clamp(62px, 7.5vw, 122px) 0; position: relative; }
.sekcja--zwarta { padding: clamp(42px, 5vw, 76px) 0; }
/* CIEMNE PASY. Rytm dlugiej strony niesie kontrast MIEDZY sasiadami (okolo 13:1),
   a nie roznica odcieni jasnych (te daja 1,05-1,2:1 i to wlasnie klient nazwal
   "zlewa sie na telefonie"). Ton nadaje generator - patrz _ff-serwis.py, tonuj_sekcje. */
.sekcja--petrol { background: var(--noc-2); }
.sekcja--ciemna { background: #143544; }
/* Co druga sekcja jasna schodzi na biel, zeby dwie z rzedu nie zlaly sie w plame. */
main > .sekcja--jasna:nth-of-type(even) { background: var(--papier-2); }

/* jasna wyspa - dla gestego tekstu prawnego i formularzy. Na ciemnym meczyloby. */
.sekcja--jasna { background: var(--papier); color: var(--atrament); }
.sekcja--jasna h1, .sekcja--jasna h2, .sekcja--jasna h3, .sekcja--jasna strong { color: var(--atrament); }
.sekcja--jasna .lead, .sekcja--jasna .mute { color: var(--atrament-mgla); }
/* (wariant jasny usuniety 20.08 - plytka zlota jest jednakowa w kazdym kontekscie) */
.sekcja--jasna h1 em, .sekcja--jasna h2 em, .sekcja--jasna .zloty { color: var(--zloto-ink); }
.sekcja--jasna li::marker { color: var(--zloto-ink); }

/* ---------- eyebrow: PIGULKA, nie kreska ----------
   ⛔ Kreski 34x2 px przed napisem NIE przywracamy. Czytala sie jak dlugi myslnik
   i zdradzala AI - zgloszone 07.08.2026 i ta sama decyzja zapadla wczesniej
   w szkielecie alpaki. Zamiennik jest stamtad: pigulka na tle akcentu.
   Alternatywy, gdyby pigulka gdzies nie pasowala: sama etykieta bez znaku,
   kropka 7x7 px albo numer sekcji. Nigdy pozioma kreska. */
.etykieta {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  background: rgba(255, 195, 48, .17);
  border-radius: var(--pigulka);
  font-family: var(--tekst);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zloto-tekst);
  margin-bottom: 1.2em;
}

.lead { font-size: clamp(1.08rem, 1rem + .38vw, 1.3rem); color: var(--mgla); }
.mute { color: var(--mgla); }
.male { font-size: .93rem; }

/* ---------- przyciski-pigulki ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 56px;
  padding: 15px 32px;
  border: 2px solid transparent;
  border-radius: var(--pigulka);
  font-family: var(--tekst);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn svg { width: 19px; height: 19px; flex: none; }

.btn--amber { background: var(--zloto); color: var(--noc); box-shadow: 0 10px 30px rgba(255, 195, 48, .18); }
/* Klient chce bialego tekstu na hover. Biel na jasnym zlocie #FFD569 to 1.68:1,
   czyli napis znika - dlatego tlo hovera schodzi do ciemnego petrolu, gdzie biel
   ma ok. 15:1, a zlota obwodka trzyma przycisk w identyfikacji. [partweb-kontrast-przyciskow] */
.btn--amber:hover {
  background: var(--noc-2);
  color: #fff;
  border-color: var(--zloto);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(255, 195, 48, .22);
}

.btn--kontur { background: transparent; color: var(--krem); border-color: rgba(244, 241, 236, .32); }
.btn--kontur:hover { border-color: var(--zloto); color: var(--zloto-tekst); transform: translateY(-3px); }

.sekcja--jasna .btn--kontur { color: var(--atrament); border-color: rgba(16, 26, 33, .28); }
.sekcja--jasna .btn--kontur:hover { border-color: var(--zloto-ink); color: var(--zloto-ink); }

.btn--pelny { width: 100%; }

/* ---------- topbar ----------
   Pasek demonstracyjny („Wersja demonstracyjna - projekt PART-WEB") zdjety 07.08.2026
   ze wszystkich 16 podstron - razem ze stylami i z pomiarem w app.js. */
.topbar {
  background: var(--noc-2);
  border-bottom: 1px solid var(--kresa);
  font-size: .84rem;
  color: var(--mgla);
}
/* Pasek nad nawigacja: tresc na SRODEK. Byla upchnieta do lewej i zostawiala
   506 px pustki po prawej przy kazdej szerokosci okna (zmierzone na 1440/1660/1920). */
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; padding-top: 10px; padding-bottom: 10px; }
.topbar b { color: var(--krem); font-weight: 600; }
.topbar .sep { opacity: .3; }
/* inline-block + padding: bez tego odnosnik w topbarze mial 20 px wysokosci,
   czyli ponizej progu 24 px z WCAG 2.2 SC 2.5.8 */
.topbar a { color: var(--zloto-tekst); text-decoration: none; font-weight: 600; display: inline-block; padding: 5px 0; }

/* ---------- nawigacja ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  /* ⚠️ Bylo rgba(10,18,25,.88) z backdrop-filter. Nad JASNA strona ta polprzezroczystosc
     mieszala sie do #262D32 i zloty link aktywny mial tam 7,16:1, czyli ledwie ocieral sie
     o prog domowy. Przy pelnym kryciu jest 8,67:1 i pasek nie zmienia koloru przy przewijaniu. */
  /* jasniejszy petrol zamiast czerni; zloto w aktywnym linku 8,07:1 */
  background: #143544;
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--kresa-zimna);
}
.nav-inner { display: flex; align-items: center; gap: 20px; min-height: 78px; }
.nav-logo { flex: none; display: block; line-height: 0; }
.nav-logo img { width: 176px; height: auto; }

.nav-linki { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* TRZY STREFY W PASKU (przegląd PART-WEB, 31.07.2026): logo do lewej, linki na SRODEK,
   przyciski „Zostan partnerem" i „Zaloguj sie" do PRAWEJ krawedzi.
   Przyciski siedza w tym samym <nav class="nav-linki"> co linki, bo na telefonie
   maja zjechac razem z nimi do szuflady hamburgera - dlatego rozdzielamy je
   marginesami `auto`, a nie osobnym kontenerem w HTML. Dwa marginesy auto dziela
   wolna przestrzen po rowno, wiec grupa linkow lezy posrodku miedzy logo a przyciskami.
   ⚠️ Tylko od 861 px w gore - ponizej `.nav-linki` jest pionowa szuflada i auto marginesy
   zepchnelyby w niej pozycje na dol ekranu.
   ⚠️ NIE uzywac tu `:first-of-type` - linki i przyciski to wszystko `<a>`, wiec
   `.btn:first-of-type` znaczy „pierwszy <a> w rodzicu, o ile ma klase .btn", a pierwszy <a>
   to link „Start". Regula nie trafiala w nic, przez co dzialal tylko jeden margines auto
   i linki dokleily sie do przyciskow (14 px odstepu, 133 px na prawo od srodka paska).
   Dlatego pierwszy przycisk lapiemy sasiedztwem: `.link + .btn`. */
@media (min-width: 1025px) {
  .nav-linki { flex: 1 1 auto; margin-left: 0; }
  .nav-linki > a:first-child { margin-left: auto; }
  .nav-linki > .link + .btn { margin-left: auto; }
}
.nav-linki .link {
  padding: 10px 15px;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mgla);
  border-radius: var(--pigulka);
  white-space: nowrap;
  transition: color .16s ease;
}
.nav-linki .link:hover { color: var(--krem); }
.nav-linki .link.aktywny { color: var(--zloto-tekst); }
.nav-linki .btn { min-height: 48px; padding: 12px 26px; margin-left: 12px; font-size: .92rem; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(244, 241, 236, .26);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--krem); transition: transform .22s ease, opacity .22s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================================
   HERO PELNOEKRANOWY - sygnatura stron PART-WEB
   Zdjecie na calej szerokosci, ciemna gradientowa nakladka, naglowek NA zdjeciu.
   ========================================================================= */
/* Hero MUSI zmiescic sie w jednym ekranie razem z chipami - to pierwsze, co widzi klient.
   Wysokosc liczona jako reszta okna po pasku demo, topbarze i nawigacji (--nad-hero),
   a nie sztywne 88svh: przy sztywnej wartosci chipy wypadaly pod krawedz. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(calc(100svh - var(--nad-hero, 160px)), 760px);
  padding: clamp(48px, 6vw, 84px) 0 clamp(34px, 4vw, 54px);
  overflow: hidden;                  /* zdjecie jest powiekszone - bez tego wypycha strone w bok */
  isolation: isolate;
}
.hero-tlo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-tlo img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; animation: oddech 26s ease-out forwards; }
/* Zdjete scale(1.06) - przyblizenie zjadalo brzegi kadru, czyli skrajne osoby.
   24%, nie 58%: przy 58% pasmo twarzy laduje w gornych 0-37% wysokosci hero, czyli pod
   przyklejonym naglowkiem i pod najciemniejsza czescia gradientu (55% czerni przy samej gorze).
   Zmierzone: przy 1920x1080 mezczyzna mial 17 px zapasu nad wlosami, przy 58% i wysokim oknie
   kadr grazil linie wlosow. Przy 24% zespol stoi wyzej, a pasmo twarzy siedzi tam, gdzie gradient
   jest najjasniejszy (26% wysokosci).
   GORNA GRANICA to naglowek, nie kadr: przy 32% i wyzej druga linia h1 przecina czolo mezczyzny
   (sprawdzone zrzutem przy 1655x694, czyli na szerokim ekranie, gdzie luz pionowy jest najwiekszy).
   Przy 1440 i wezej procent prawie nie dziala - luz pionowy to tam raptem 186 px zrodla,
   wiec zapas nad glowa i tak wychodzi ok. 18-20% wysokosci hero.
   Poziomu tym nie ruszysz: od 1100 px w gore widac cala szerokosc zdjecia (x 0..2400),
   a zespol jest w zrodle wysrodkowany (srodek grupy 1190 przy srodku kadru 1200). Wrazenie
   pustki po prawej bierze sie z bocznej nakladki, ktora przyciemnia lewa trzecia czesc pod tekst.
   Zmiana 32% -> 58% z 29.07 nie rozwiazala uwagi klienta („widac tylko jedna osobe") - ta uwaga
   dotyczy WASKICH ekranow, gdzie okno kadru ma 560 px szerokosci przy zrodle 1200 px
   i miesci tylko srodkowa osobe. Pionu w object-position sie tym nie naprawi. */
/* Kadry dobrane pod konkretne zdjecie - selektor po nazwie pliku celowo, zeby podmiana
   fotografii wymusila ponowna decyzje o kadrze zamiast po cichu odziedziczyc cudzy. */
.podstrona-hero .ph-tlo img[src$="przy-biurku-1400.jpg"] { object-position: center 20%; }
/* zespol3 w pasie CTA: kadr zsuniety w dol, zeby naglowek NIE lezal na twarzach.
   Przy domyslnym 50% wysrodkowany naglowek wypada dokladnie na wysokosci glow.
   Podstrony moga to nadpisac inline (o-nas ma `center bottom`). */
.podstrona-hero .ph-tlo img[src$="zespol3-2000.jpg"] { object-position: 72% 82%;   /* grupa przesunieta w prawo - naglowek stoi z lewej i nie wchodzi na twarze */ }
/* Pasy CTA (.podstrona-hero .ph-tlo) uzywaja teraz zespol3 - duet-1600 (dwie osoby) zszedl
   z calego serwisu 04.08.2026 na wniosek klienta: zespol liczy trzy osoby.
   ⚠️ Kadr w tych pasach ZOSTAJE nisko (domyslne 50% albo nizej, ustawiane inline na
   podstronie). Zdjecie ma tu byc tlem, nie portretem: naglowek jest wysrodkowany i lezy
   dokladnie na wysokosci twarzy, wiec podniesienie kadru robi z tego glowy patrzace zza
   napisu. Probowano 20% na duet-1600, polecono cofnac (01.08.2026). Nie „naprawiac". */
@keyframes oddech { from { transform: scale(1.03); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-tlo img { animation: none; transform: none; } }

/* dwie nakladki: pionowa czytelnosc + boczna, zeby tekst mial oparcie */
.hero-tlo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,18,25,.55) 0%, rgba(10,18,25,.22) 26%, rgba(10,18,25,.82) 78%, var(--noc) 100%),
    linear-gradient(90deg, rgba(10,18,25,.90) 0%, rgba(10,18,25,.44) 28%, rgba(10,18,25,.04) 54%, rgba(10,18,25,0) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { margin-bottom: .3em; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.hero .lead { max-width: 52ch; color: var(--krem); }  /* bylo zaszyte #D6E0E6 - stalowy szary,
   jedyny tekst, ktory NIE zbielal przy zmianie palety 19.08 (prosba Macka: biel wszedzie) */
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px; }

/* rzad chipow pod hero */
.chipy { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  min-height: 46px;
  background: rgba(20, 53, 68, .78);
  border: 1px solid var(--kresa);
  border-radius: var(--pigulka);
  font-size: .92rem;
  font-weight: 600;
  color: var(--krem);
  backdrop-filter: blur(8px);
}
.chip svg { width: 17px; height: 17px; flex: none; color: var(--zloto-tekst); }

/* ---------- naglowek podstrony (mniejszy hero ze zdjeciem) ---------- */
.podstrona-hero {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px);
  overflow: hidden;
  isolation: isolate;
  background: var(--noc-2);
}
.podstrona-hero .ph-tlo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.podstrona-hero .ph-tlo img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.podstrona-hero .ph-tlo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,18,25,.94) 0%, rgba(10,18,25,.6) 62%, rgba(10,18,25,.4) 100%);
}
.podstrona-hero .wrap { position: relative; z-index: 1; }
.podstrona-hero h1 { max-width: 18ch; }
.podstrona-hero .lead { max-width: 58ch; }

.okruszki { font-size: .84rem; color: var(--mgla); margin-bottom: 22px; letter-spacing: .04em; text-transform: uppercase; }
.okruszki a { color: var(--zloto-tekst); text-decoration: none; display: inline-block; padding: 6px 0; }
.okruszki .sep { margin: 0 9px; opacity: .4; }

/* ---------- pas ze zdjeciem miedzy sekcjami ---------- */
.pas-foto { position: relative; height: clamp(150px, 20vw, 260px); overflow: hidden; }
.pas-foto img { width: 100%; height: 100%; object-fit: cover; }
.pas-foto::after {
  content: ''; position: absolute; inset: 0;
  /* ⚠️ Wygaszalo w var(--noc), czyli w kolor STAREJ, ciemnej podlogi. Na jasnej stronie
     zostawialoby ciemna smuge nad i pod pasem. Teraz welon jest rowny i przezroczysty. */
  background: linear-gradient(180deg, rgba(8,22,31,.42) 0%, rgba(8,22,31,.24) 45%, rgba(8,22,31,.42) 100%);
}

/* ---------- fakty w hero (paski) ---------- */
.hero-fakty { display: flex; flex-wrap: wrap; gap: 0; margin-top: 34px; border-top: 1px solid var(--kresa-zimna); }
.hero-fakty div { flex: 1 1 190px; padding: 18px 22px 0 0; }
.hero-fakty dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--zloto-tekst); font-weight: 700; }
.hero-fakty dd { margin: 6px 0 0; font-size: .97rem; color: var(--mgla); }
.hero-fakty dd a { color: var(--krem); }

/* ---------- moduly uslug ---------- */
.uslugi { display: grid; gap: 20px; }
.usluga {
  position: relative;
  background: var(--karta);
  border: 1px solid var(--kresa);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 40px);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease;
}
.usluga::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--zloto); transform: scaleY(0); transform-origin: top; transition: transform .3s ease;
}
.usluga:hover { transform: translateY(-4px); border-color: var(--kresa); }
.usluga:hover::before { transform: scaleY(1); }

/* min-width:0 na naglowku jest konieczne: element flex domyslnie nie kurczy sie ponizej
   swojej tresci, wiec dlugi tytul wypychal numer uslugi poza karte (zmierzone: 15 px przy 360 px). */
.usluga-naglowek { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.usluga-naglowek h3 { min-width: 0; overflow-wrap: break-word; }
/* Na malym telefonie (360px) naglowek dostawal obok ikony tylko 143px, a najdluzsza nazwa
   uslugi - „Ubezpieczenia" - potrzebuje ~144px. `overflow-wrap: break-word` (potrzebny, zeby
   nic nie wystawalo z kafla) lamal ja wtedy W SRODKU WYRAZU na „Ubezpieczeni" + „a".
   Zamiast zdejmowac zabezpieczenie, robimy naglowkowi miejsce. */
@media (max-width: 400px) {
  .usluga-naglowek { gap: 12px; }
  .usluga-ikona { width: 44px; height: 44px; }
  .usluga-naglowek h3 { font-size: calc(var(--t-4) * .92); }
}
.usluga-ikona {
  flex: none; width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(255, 195, 48, .1);
  border: 1px solid var(--kresa);
  border-radius: 14px;
  color: var(--zloto-tekst);
}
.usluga-ikona svg { width: 25px; height: 25px; }
.usluga h3 { margin: 0; }
.usluga-nr {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 800;
  color: rgba(255, 195, 48, .85);
  margin-left: auto; line-height: 1;
}
.usluga--szeroka { grid-column: 1 / -1; }
.usluga--szeroka .usluga-tresc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }

.usluga-lista { list-style: none; margin: 18px 0 0; padding: 0; }
.usluga-lista li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; font-size: .96rem; }
.usluga-lista svg { flex: none; width: 17px; height: 17px; margin-top: 5px; color: var(--zloto-tekst); }

.usluga-kroki { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.usluga-kroki span {
  font-size: .85rem; padding: 8px 16px;
  background: rgba(46, 74, 90, .5);
  border: 1px solid var(--kresa-zimna);
  border-radius: var(--pigulka);
  color: var(--krem); font-weight: 600;
}

/* ---------- blok prawny - jasny dokument na ciemnym biurku ---------- */
.blok-prawny {
  background: var(--legal-bg);
  color: var(--atrament);
  border: 2px solid var(--legal-line);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 40px);
}
/* Naglowki wewnatrz kart i blokow dokumentowych: JEDEN stopien (--t-5), krój tekstowy,
   normalna wielkosc liter. Wersaliki w kroju Archivo zostaja dla naglowkow sekcji
   (H1-H3) - inaczej strona ma dwie rozne konwencje wielkosci liter naraz. */
.blok-prawny h3 { font-family: var(--tekst); font-size: var(--t-5); font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--atrament); }
.blok-prawny p, .blok-prawny li { font-size: .97rem; }
.blok-prawny strong { color: var(--atrament); }
.blok-prawny .mute, .blok-prawny .male.mute { color: var(--atrament-mgla); }
.blok-prawny li::marker { color: var(--zloto-ink); }
.blok-prawny dl { margin: 20px 0 0; }
.blok-prawny dt { font-weight: 700; font-size: .92rem; margin-top: 17px; }
.blok-prawny dd { margin: 6px 0 0; }
.blok-prawny .podstawa { display: block; font-size: .8rem; color: var(--atrament-mgla); margin-top: 4px; }
.blok-prawny a { color: var(--zloto-ink); font-weight: 700; }

/* Placeholder - ma byc nie do przeoczenia, bo to pytanie do klienta, nie wypelniacz.
   Wersja DOMYSLNA jest ciemna: 65 kremowych plach na ciemnej stronie rozbijalo caly uklad.
   Zloto na karcie daje 7.93:1, wiec czytelnosc nie cierpi, a strona zostaje spojna. */
.brak {
  display: inline-block;
  background: rgba(255, 195, 48, .09);
  border: 1px dashed var(--zloto);
  border-radius: 10px;
  padding: 4px 12px;
  font-size: .87rem;
  font-weight: 700;
  color: var(--zloto-tekst);
}
.brak--blok { display: block; padding: 14px 16px; font-weight: 600; line-height: 1.55; }
/* Ramka placeholdera to widoczna krawedz - nie moze dotykac akapitu nad soba.
   Gdy blok otwiera swojego rodzica, marginesu nie dokladamy (nie ma czego odsuwac). */
.brak--blok:not(:first-child) { margin-top: 20px; }

/* Na JASNYM tle (wyspa dokumentowa, blok prawny) placeholder wraca do wersji kremowej -
   zloto na jasnym ma tylko 1.8:1 i byloby nieczytelne. */
.sekcja--jasna .brak, .blok-prawny .brak {
  background: #FFF4D6;
  border-color: var(--legal-line);
  color: var(--zloto-ink);
}

/* ---------- proces ---------- */
.kroki { counter-reset: krok; display: grid; gap: 0; }
.krok {
  counter-increment: krok;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 28px;
  /* ujemny margines w bok: podswietlenie na hover siega poza kolumne tekstu */
  padding: 34px 22px;
  margin-inline: -22px;
  border-top: 1px solid var(--kresa-zimna);
  border-radius: var(--r);
  transition: border-color .2s ease, background-color .2s ease;
}
.krok:last-child { border-bottom: 1px solid var(--kresa-zimna); }
.krok:hover {
  border-top-color: var(--zloto);
  background: rgba(255, 195, 48, .06);
}
.krok:hover h3 { color: var(--zloto-tekst); }
.krok h3 { transition: color .2s ease; }
.krok::before {
  content: counter(krok, decimal-leading-zero);
  font-family: var(--display);
  font-size: 3.2rem; font-weight: 800; line-height: .9;
  /* bylo rgba(...,.34) - po zmieszaniu z tlem #0F1D26 dawalo brudna oliwke
     o kontrascie ok. 2.1:1. Pelne zloto to 8.77:1 i klient widzi numer. */
  color: var(--zloto-tekst);
  transition: color .2s ease, transform .2s ease;
  transform-origin: left center;
}
.krok:hover::before { color: var(--zloto-tekst-jasny); transform: scale(1.07); }
.krok h3 { margin-bottom: .35em; }
/* Numer kroku na jasnym: PELNE zloto, bez przezroczystosci. Krycie .3 mieszalo sie
   z papierem i dawalo bez - ten sam blad, ktory wczesniej dawal „brudna oliwke"
   na ciemnym tle. Zgodnie z .usluga-nr i .kwadrat-nr uzywamy --zloto-duze. */
.sekcja--jasna .krok::before { color: var(--zloto-duze); }
.sekcja--jasna .krok, .sekcja--jasna .krok:last-child { border-color: rgba(16, 26, 33, .14); }

/* ---------- karty ---------- */
.karty { display: grid; gap: 20px; }
/* Karty z przyciskiem na dole: gdy opisy maja rozna dlugosc, przyciski staly na roznych
   wysokosciach (uwaga Maćka 07.08.2026, sekcja „Panel partnera" na Kontakcie).
   Flex + margin-top:auto dopycha ostatni akapit (ten z przyciskiem) do dolu karty. */
.karty--rowne-przyciski .karta { display: flex; flex-direction: column; }
.karty--rowne-przyciski .karta p:last-child { margin-top: auto; padding-top: var(--odstep-s); }
.karta {
  background: var(--karta);
  border: 1px solid var(--kresa);   /* zlota obwodka zamiast zimnej - ocieplenie 07.08 */
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 34px);
  transition: transform .22s ease, border-color .22s ease;
}
.karta:hover { transform: translateY(-4px); border-color: var(--kresa); }
.karta h3 { margin-bottom: .45em; }
.sekcja--jasna .karta { background: #fff; border-color: rgba(16, 26, 33, .12); }

/* karta ze zdjeciem */
.karta-foto { padding: 0; overflow: hidden; }
.karta-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.karta-foto:hover img { transform: scale(1.05); }
.karta-foto .tresc { padding: clamp(22px, 2.4vw, 30px); }

/* ---------- blog ---------- */
.wpisy { display: grid; gap: 22px; }
.wpis {
  display: flex; flex-direction: column;
  background: var(--karta);
  border: 1px solid var(--kresa-zimna);
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 32px);
  transition: transform .22s ease, border-color .22s ease;
}
.wpis:hover { transform: translateY(-4px); border-color: var(--kresa); }
.wpis-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .82rem; color: var(--mgla); margin-bottom: 14px; }
.wpis-kat {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--zloto-tekst); background: rgba(255, 195, 48, .12);
  border: 1px solid var(--kresa);
  padding: 5px 12px; border-radius: var(--pigulka);
}
.wpis h2, .wpis h3 { font-size: var(--t-4); margin-bottom: .45em; }
.wpis p { font-size: .96rem; color: var(--mgla); }
.wpis-stopka { margin-top: auto; padding-top: 18px; font-size: .88rem; font-weight: 700; color: var(--zloto-tekst); letter-spacing: .04em; text-transform: uppercase; }

.wpis--wyrozniony {
  grid-column: 1 / -1;
  background: linear-gradient(140deg, #1B4152 0%, #123240 100%);
  border-color: var(--kresa);
}
.wpis--wyrozniony h2 { font-size: var(--t-3); }

/* ---------- zespol ---------- */
/* WSPOLNE ZDJECIE ZESPOLU - szeroki prostokat (przegląd PART-WEB, 31.07.2026).
   Bylo 900x909, czyli praktycznie kwadrat, a odstep do kart ponizej wynosil -8px:
   zdjecie i portrety sie stykaly. Teraz panorama na pelna szerokosc kolumny,
   a naglowek „Poznaj nasz zespol" rozdziela oba bloki. */
.zespol-foto img {
  display: block; width: 100%;
  aspect-ratio: 2.2 / 1;
  object-fit: cover;
  /* 18%, a nie 26%: przy 26% logo na scianie bylo przeciete w polowie liter.
     Porownane na trzech zrzutach (18/26/34) - przy 18% miesci sie cale „f-finance",
     wszystkie trzy twarze i sylwetki. */
  object-position: center 18%;
  border-radius: var(--r);
}
/* Na telefonie panorama zamienilaby zespol w pasek, w ktorym nie widac twarzy. */
@media (max-width: 700px) {
  .zespol-foto img { aspect-ratio: 4 / 3; object-position: center 30%; }
}
.zespol-tytul {
  margin: var(--odstep-l) 0 var(--odstep-m);
  text-align: center;
}

/* SEKCJA Z TEKSTEM NA SRODKU (przegląd PART-WEB, 31.07.2026 - „Jesli macie klientow-firmy").
   Naglowek, lead i nota nad i pod siatka kafli maja stac na srodku i byc szersze.
   ⚠️ Same kafle zostaja wyrownane DO LEWEJ - wysrodkowany akapit w kaflu czyta sie zle,
   bo oko nie ma stalej krawedzi, do ktorej wraca. Wysrodkowujemy oprawe, nie tresc kafli. */
.sekcja--srodek { text-align: center; }
.sekcja--srodek .proza,
.sekcja--srodek p.male { max-width: 76ch; margin-left: auto; margin-right: auto; }
/* Rzad przyciskow to flex, wiec text-align go nie rusza - trzeba justify-content. */
.sekcja--srodek .hero-cta { justify-content: center; }
/* ⚠️ `.sekcja p` ma `max-width: var(--miara)`, wiec akapit jest WEZSZY niz kolumna i jako
   blok stoi przy lewej krawedzi. `text-align: center` wysrodkowuje wtedy tylko tekst
   WEWNATRZ tego waskiego bloku - dlatego pojedynczy przycisk w akapicie zostawal po lewej
   (sekcja uslug na /wspolpraca/). Blok trzeba wysrodkowac marginesami, nie wyrownaniem. */
.sekcja--srodek p { margin-left: auto; margin-right: auto; }
.sekcja--srodek :is(.karta, .kanal, .osoba, .krok, .wpis, .usluga, .numer, .wyroznik,
                    .podzial, .karta-foto, .zespol-karta, .faq, .formularz, .klauzula,
                    .blok-prawny, .panel, .panel-akcja) p { margin-left: 0; margin-right: 0; }
/* Lista KART, w ktorych tresc wraca do lewej. Jest wypisana swiadomie, a nie przez `*`:
   wysrodkowanie ma dotyczyc OPRAWY sekcji (etykieta, naglowek, lead, nota), a nie wnetrza
   kafli - wysrodkowany akapit w kaflu czyta sie zle, bo oko nie ma stalej krawedzi powrotu.
   Dokladajac nowy typ kafla do sekcji wysrodkowanej, dopisz go tutaj. */
.sekcja--srodek :is(.karta, .kanal, .osoba, .krok, .wpis, .usluga, .numer, .wyroznik,
                    .podzial, .karta-foto, .zespol-karta, .faq, .formularz, .klauzula,
                    .blok-prawny, .panel, .panel-akcja),
.sekcja--srodek :is(.karta, .kanal, .osoba, .krok, .wpis, .usluga, .numer, .wyroznik,
                    .podzial, .karta-foto, .zespol-karta, .faq, .formularz, .klauzula,
                    .blok-prawny, .panel, .panel-akcja) * { text-align: left; }
/* Ramka z adresami („Obszar dzialania"): szersza i na srodku, ale tekst w srodku do lewej. */
.sekcja--srodek .karta--szeroka { max-width: 80ch; margin-left: auto; margin-right: auto; }

/* MAPY DOJAZDU - po jednej na kazdy adres, zeby nie bylo watpliwosci, ktora jest ktora.
   Szerokosc PELNEJ kolumny tresci, a nie 80ch jak ramka z adresami: przy 80ch dwie mapy
   obok siebie mialy po ~340 px i wygladaly na przypadkowe miniaturki (uwaga z przeglądu 31.07).
   Waski tekst + szeroka media to normalny rytm redakcyjny, a nie niezgodnosc szerokosci. */
.mapy { display: grid; gap: 20px; }
@media (min-width: 760px) { .mapy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mapa { margin: 0; }
.mapa iframe {
  display: block; width: 100%; aspect-ratio: 16 / 10; border: 0;
  border-radius: var(--r); background: var(--karta);
  /* mapa Google jest jasna - obwodka wiaze ja z ciemna sekcja */
  outline: 1px solid var(--kresa-zimna); outline-offset: -1px;
}
.mapa figcaption {
  margin-top: 9px; font-size: .84rem; line-height: 1.5;
  color: var(--mgla); text-align: center;
}
.sekcja--jasna .mapa figcaption { color: var(--atrament-mgla); }
/* ⚠️ Ta mediaquery MUSI stac po regule bazowej `.mapa iframe`, a nie przy `.zespol-foto`
   wyzej w arkuszu: ma z nia rowna specyficznosc, wiec przy remisie decyduje kolejnosc
   i telefon dostawal proporcje 16/10 mimo tej reguly (zmierzone: 342x214 zamiast 342x257).
   Na waskim ekranie 16/10 robi sie za niskie, zeby cokolwiek z mapy odczytac. */
@media (max-width: 700px) {
  .mapa iframe { aspect-ratio: 4 / 3; }
}

.zespol { display: grid; gap: 22px; }
.osoba { background: var(--karta); border: 1px solid var(--kresa-zimna); border-radius: var(--r); overflow: hidden; transition: transform .22s ease, border-color .22s ease; }
.osoba:hover { transform: translateY(-4px); border-color: var(--kresa); }
.osoba img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.osoba-tresc { padding: 26px; }
/* imie i nazwisko - normalna wielkosc liter, tak jak w pozostalych naglowkach kart */
.osoba h3 { font-family: var(--tekst); font-size: var(--t-5); font-weight: 800; text-transform: none; letter-spacing: 0; margin-bottom: .2em; }
.osoba .rola { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zloto-tekst); font-weight: 700; margin-bottom: 12px; }
.osoba p { font-size: .96rem; }
.osoba-lista { list-style: none; margin: 14px 0 0; padding: 0; }
.osoba-lista li { position: relative; padding-left: 17px; margin-bottom: 8px; font-size: .93rem; color: var(--mgla); }
.osoba-lista li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--zloto); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--kresa-zimna); }
.faq details { border-bottom: 1px solid var(--kresa-zimna); }
.faq summary {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 4px; min-height: 48px; cursor: pointer;
  font-weight: 700; font-size: 1.05rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; margin-left: auto; flex: none;
  width: 15px; height: 15px;
  background:
    linear-gradient(var(--zloto), var(--zloto)) center/15px 2px no-repeat,
    linear-gradient(var(--zloto), var(--zloto)) center/2px 15px no-repeat;
  transition: transform .22s ease;
}
.faq details[open] summary::after { background: linear-gradient(var(--zloto), var(--zloto)) center/15px 2px no-repeat; transform: rotate(180deg); }
.faq .odpowiedz { padding: 0 4px 24px; color: var(--mgla); max-width: 70ch; }
.sekcja--jasna .faq, .sekcja--jasna .faq details { border-color: rgba(16, 26, 33, .14); }
.sekcja--jasna .faq .odpowiedz { color: var(--atrament-mgla); }
.sekcja--jasna .faq summary::after {
  background: linear-gradient(var(--zloto-ink), var(--zloto-ink)) center/15px 2px no-repeat,
              linear-gradient(var(--zloto-ink), var(--zloto-ink)) center/2px 15px no-repeat;
}
.sekcja--jasna .faq details[open] summary::after { background: linear-gradient(var(--zloto-ink), var(--zloto-ink)) center/15px 2px no-repeat; }

/* ---------- zakladki + checklista ---------- */
.zakladki { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.zakladka {
  min-height: 48px; padding: 12px 24px;
  background: transparent;
  border: 1px solid rgba(244, 241, 236, .24);
  border-radius: var(--pigulka);
  font: inherit; font-size: .94rem; font-weight: 600;
  color: var(--krem); cursor: pointer;
  transition: all .18s ease;
}
.zakladka:hover { border-color: var(--zloto); color: var(--zloto-tekst); }
.zakladka[aria-selected="true"] { background: var(--zloto); color: var(--noc); border-color: var(--zloto); font-weight: 700; }
.sekcja--jasna .zakladka { color: var(--atrament); border-color: rgba(16, 26, 33, .24); }
.sekcja--jasna .zakladka[aria-selected="true"] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }

.checklista { list-style: none; margin: 0; padding: 0; }
.checklista li { margin: 0; border-bottom: 1px solid var(--kresa-zimna); }
.checklista label { display: flex; align-items: flex-start; gap: 14px; padding: 16px 4px; min-height: 48px; cursor: pointer; font-size: .98rem; }
.checklista input { flex: none; width: 22px; height: 22px; margin-top: 3px; accent-color: var(--zloto); }
.checklista input:checked + span { color: var(--mgla); text-decoration: line-through; text-decoration-color: var(--zloto); }
.checklista .opis { display: block; font-size: .87rem; color: var(--mgla); margin-top: 3px; }
.sekcja--jasna .checklista li { border-color: rgba(16, 26, 33, .12); }
.sekcja--jasna .checklista .opis, .sekcja--jasna .checklista input:checked + span { color: var(--atrament-mgla); }

.postep { display: flex; align-items: center; gap: 16px; margin: 26px 0 0; }
.postep-tor { flex: 1; height: 10px; background: rgba(244, 241, 236, .12); border-radius: var(--pigulka); overflow: hidden; }
.sekcja--jasna .postep-tor { background: rgba(16, 26, 33, .1); }
.postep-wypelnienie { height: 100%; width: 0; background: linear-gradient(90deg, var(--zloto), var(--zloto-jasne)); border-radius: var(--pigulka); transition: width .35s ease; }
.postep-liczba { font-variant-numeric: tabular-nums; font-weight: 800; font-size: .96rem; min-width: 66px; text-align: right; color: var(--zloto-tekst); }
.sekcja--jasna .postep-liczba { color: var(--zloto-ink); }

/* ---------- konfigurator ---------- */
.konfig { background: var(--karta); border: 1px solid var(--kresa-zimna); border-radius: var(--r); padding: clamp(26px, 3vw, 42px); }
.sekcja--jasna .konfig { background: #fff; border-color: rgba(16, 26, 33, .12); }
/* FAIL-SAFE: bez JS widac wszystkie pytania jako liste. Chowanie wlacza dopiero skrypt. */
.konfig-pytanie { display: block; margin-bottom: 30px; }
.konfig.js-gotowy .konfig-pytanie { display: none; margin-bottom: 0; }
.konfig.js-gotowy .konfig-pytanie.aktywne { display: block; }
.konfig-opcje { display: grid; gap: 11px; margin: 22px 0 0; }
.konfig-opcja {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 60px; padding: 15px 22px;
  background: rgba(46, 74, 90, .28);
  border: 1px solid var(--kresa-zimna);
  border-radius: 14px;
  font: inherit; font-size: 1rem; color: var(--krem);
  text-align: left; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.konfig-opcja::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--zloto); opacity: .35; transition: opacity .18s ease, transform .18s ease; }
.konfig-opcja:hover { border-color: var(--zloto); background: rgba(255, 195, 48, .08); transform: translateX(4px); }
.konfig-opcja:hover::before { opacity: 1; transform: scale(1.3); }
.sekcja--jasna .konfig-opcja { background: var(--papier); color: var(--atrament); border-color: rgba(16, 26, 33, .16); }
.konfig-krok-info { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--zloto-tekst); font-weight: 800; }
.sekcja--jasna .konfig-krok-info { color: var(--zloto-ink); }
.konfig-wynik { display: none; }
.konfig.js-gotowy .konfig-wynik.aktywne { display: block; }
.konfig-wynik ul { list-style: none; padding: 0; margin: 20px 0 0; }
.konfig-wynik li { padding: 17px 20px; background: rgba(46, 74, 90, .3); border-left: 3px solid var(--zloto); border-radius: 10px; margin-bottom: 11px; }
.sekcja--jasna .konfig-wynik li { background: var(--papier); }
.konfig-wynik li strong { display: block; margin-bottom: 4px; color: var(--zloto-tekst); }
.sekcja--jasna .konfig-wynik li strong { color: var(--zloto-ink); }
.konfig-nota { font-size: .88rem; color: var(--mgla); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--kresa-zimna); }
.sekcja--jasna .konfig-nota { color: var(--atrament-mgla); border-color: rgba(16, 26, 33, .12); }
[data-usluga] { display: none; }

/* ---------- formularz ---------- */
.formularz { background: var(--karta); border: 1px solid var(--kresa); border-radius: var(--r); padding: clamp(26px, 3vw, 42px); }
.sekcja--jasna .formularz { background: #fff; border-color: rgba(16, 26, 33, .12); }
.pole { margin-bottom: 20px; }
.pole label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 8px; letter-spacing: .02em; }
.pole .wskazowka { font-weight: 400; color: var(--mgla); }
.sekcja--jasna .pole .wskazowka { color: var(--atrament-mgla); }
.pole input, .pole textarea, .pole select {
  width: 100%; min-height: 54px; padding: 14px 17px;
  background: rgba(10, 18, 25, .5);
  border: 1px solid rgba(244, 241, 236, .42);
  border-radius: 12px;
  font: inherit; font-size: 1rem; color: var(--krem);
}
.pole input::placeholder, .pole textarea::placeholder { color: rgba(167, 184, 194, .6); }
.pole textarea { min-height: 124px; resize: vertical; }
.pole input:focus, .pole textarea:focus, .pole select:focus { border-color: var(--zloto); background: rgba(10, 18, 25, .75); }
.sekcja--jasna .pole input, .sekcja--jasna .pole textarea, .sekcja--jasna .pole select { background: var(--papier); color: var(--atrament); border-color: rgba(16, 26, 33, .55); }

/* Natywny checkbox maluje sie DOKLADNIE na rozmiar swojego pudelka, wiec „22px widac,
   44px da sie trafic palcem" wymaga appearance:none i wlasnego kwadratu w ::before.
   Pudelko ma 44px, a ujemne marginesy cofaja je tak, zeby widoczny kwadrat stal
   tam, gdzie stal wczesniej. Stad tez gap 2px zamiast 13px - reszte odstepu daje overhang. */
.zgoda { display: flex; align-items: flex-start; gap: 2px; margin-bottom: 15px; font-size: .88rem; color: var(--mgla); }
.zgoda input {
  flex: none; -webkit-appearance: none; appearance: none;
  width: 44px; height: 44px; margin: -9px -11px -11px -11px;
  padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.zgoda input::before, .zgoda input::after { content: ''; grid-area: 1 / 1; }
.zgoda input::before {
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--kresa-zimna); background: rgba(255, 255, 255, .05);
  transition: background .16s ease, border-color .16s ease;
}
.zgoda input:checked::before { background: var(--zloto); border-color: var(--zloto); }
.zgoda input::after {
  width: 11px; height: 6px; margin-top: -3px;
  border-left: 2.5px solid var(--noc); border-bottom: 2.5px solid var(--noc);
  transform: rotate(-45deg); opacity: 0; transition: opacity .12s ease;
}
.zgoda input:checked::after { opacity: 1; }
.zgoda input:focus-visible { outline: 2px solid var(--zloto); outline-offset: -10px; border-radius: 12px; }
.sekcja--jasna .zgoda { color: var(--atrament-mgla); }
.sekcja--jasna .zgoda input::before { border-color: var(--atrament-mgla); background: rgba(0, 0, 0, .04); }
/* MUSI byc po regule wyzej: ma z nia rowna specyficznosc (0,2,2), wiec bez tego wariant
   jasny nadpisywal stan zaznaczony i kwadrat nie robil sie zloty. Widac to tylko na zrzucie. */
.sekcja--jasna .zgoda input:checked::before { background: var(--zloto); border-color: var(--zloto); }
.klauzula { font-size: .84rem; color: var(--mgla); margin: 20px 0; padding-top: 18px; border-top: 1px solid var(--kresa-zimna); }
.sekcja--jasna .klauzula { color: var(--atrament-mgla); border-color: rgba(16, 26, 33, .12); }

.komunikat {
  display: none; margin-top: 18px; padding: 17px 19px;
  background: rgba(255, 195, 48, .1);
  border: 1px solid var(--zloto);
  border-radius: 12px; font-size: .94rem;
}
.komunikat.widoczny { display: block; }
.sekcja--jasna .komunikat { background: var(--legal-bg); }

/* ---------- kanaly kontaktu ---------- */
.kanaly { display: grid; gap: 18px; }
.kanal {
  display: flex; gap: 18px;
  padding: 26px;
  background: var(--karta);
  border: 1px solid var(--kresa-zimna);
  border-radius: var(--r);
  transition: transform .22s ease, border-color .22s ease;
}
.kanal:hover { transform: translateY(-4px); border-color: var(--kresa); }
.kanal > svg { flex: none; width: 26px; height: 26px; color: var(--zloto-tekst); margin-top: 3px; }
.kanal h3 { font-family: var(--tekst); font-size: var(--t-5); font-weight: 800; margin-bottom: .3em; text-transform: none; letter-spacing: 0; }
/* ⚠️ `:not(.btn)` dopisane 20.08: bez tego ta regula (0,1,1) przebijala
   `.btn--amber` (0,1,0) i napis na przycisku wychodzil ZLOTY NA ZLOTYM. */
.kanal a:not(.btn) { color: var(--zloto-tekst); font-weight: 700; }
.sekcja--jasna .kanal { background: #fff; border-color: rgba(16, 26, 33, .12); }
.sekcja--jasna .kanal a:not(.btn) { color: var(--zloto-ink); }

/* ---------- numery telefonu rozdzielone wg dzialu ---------- */
.numery { display: grid; gap: 18px; }
@media (min-width: 700px) { .numery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.numer { background: var(--karta); border: 1px solid var(--kresa); border-radius: var(--r); padding: 26px; }
.sekcja--jasna .numer { background: #fff; border-color: rgba(16, 26, 33, .16); }
.numer .dzial { display: block; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--zloto-tekst); margin-bottom: 8px; }
.sekcja--jasna .numer .dzial { color: var(--zloto-ink); }
.numer-tel {
  display: inline-block; padding: 4px 0;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem);
  letter-spacing: -.01em; color: var(--zloto-tekst); text-decoration: none;
}
.sekcja--jasna .numer-tel { color: var(--zloto-ink); }
.numer p { font-size: .93rem; margin-top: 6px; }

/* ---------- wyroznik: jedno zdanie, ktore ma zostac w glowie ---------- */
.wyroznik {
  background: linear-gradient(140deg, #1B4152 0%, #123240 100%);
  border: 1px solid var(--kresa);
  border-left: 4px solid var(--zloto);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 40px);
}
.wyroznik .zdanie {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: var(--t-3); line-height: 1.08; letter-spacing: -.02em;
  color: var(--krem); margin-bottom: .5em; max-width: 22ch;
}
.wyroznik .zdanie em { font-style: normal; color: var(--zloto-tekst); }

/* ---------- podzial 50/50 (program partnerski) ---------- */
.podzial { display: grid; gap: 14px; margin-top: var(--odstep-m); }
@media (min-width: 700px) { .podzial { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.podzial div {
  background: rgba(46, 74, 90, .3);
  border: 1px solid var(--kresa-zimna);
  border-radius: 14px; padding: 20px 22px;
}
.podzial .udzial {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.9rem; line-height: 1; color: var(--zloto-tekst-jasny); margin-bottom: 8px;
}
.podzial p { font-size: .95rem; margin: 0; }


/* ---------- dane kontaktowe przy formularzu (wzorzec z despe-debki.pl/kontakt) ---------- */
.dane-kontakt { display: grid; gap: 12px; margin-top: 30px; }
.dane-karta {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  background: var(--karta);
  border: 1px solid var(--kresa-zimna);
  border-radius: var(--r);
  transition: transform .2s ease, border-color .2s ease;
}
.dane-karta:hover { transform: translateY(-3px); border-color: var(--kresa); }
.dane-ikona {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: rgba(255, 195, 48, .1);
  border: 1px solid var(--kresa);
  color: var(--zloto-tekst);
}
.dane-ikona svg { width: 20px; height: 20px; }
.dane-lab {
  display: block; font-size: .74rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--zloto-tekst); margin-bottom: 5px;
}
.dane-val { font-size: 1.02rem; font-weight: 700; color: var(--krem); line-height: 1.5; }
.dane-val a { color: inherit; text-decoration: none; transition: color .18s ease; }
.dane-val a:hover { color: var(--zloto-tekst); }
.dane-val small { display: block; font-size: .86rem; font-weight: 400; color: var(--mgla); margin-top: 3px; }

/* wariant na jasnej sekcji - tam stoi formularz */
.sekcja--jasna .dane-karta { background: #fff; border-color: rgba(16, 26, 33, .12); }
.sekcja--jasna .dane-karta:hover { border-color: var(--zloto-ink); }
.sekcja--jasna .dane-ikona { background: rgba(122, 82, 0, .08); border-color: rgba(122, 82, 0, .22); color: var(--zloto-ink); }
.sekcja--jasna .dane-lab { color: var(--zloto-ink); }
.sekcja--jasna .dane-val { color: var(--atrament); }
.sekcja--jasna .dane-val a:hover { color: var(--zloto-ink); }
.sekcja--jasna .dane-val small { color: var(--atrament-mgla); }

/* kolka social 44px, nie 38 jak w referencji - 38 jest ponizej celu dotyku */
.dane-social { display: flex; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.dane-social a, .dane-social span {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--kresa-zimna); border-radius: 50%;
  color: var(--krem);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.dane-social svg { width: 18px; height: 18px; }
.dane-social a:hover { background: var(--zloto); color: var(--noc); border-color: var(--zloto); }
.sekcja--jasna .dane-social a, .sekcja--jasna .dane-social span { color: var(--atrament); border-color: rgba(16, 26, 33, .18); }
.sekcja--jasna .dane-social a:hover { background: var(--zloto-ink); color: #fff; border-color: var(--zloto-ink); }

/* ---------- stopka ---------- */
.stopka { background: #0D2530; color: var(--mgla); padding: clamp(40px, 4vw, 58px) 0 24px; font-size: .9rem; border-top: 1px solid var(--kresa); }
/* Na telefonie dwie kolumny linkow obok siebie, a nie jedna wieza - wzorzec ze stopki
   partweb.pl. Sama ta zmiana zdejmuje ok. 225 px z wysokosci na 390 px. */
.stopka-grid { display: grid; gap: 28px 40px; margin-bottom: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stopka-grid > div:first-child { grid-column: 1 / -1; }
/* Czwarta kolumna (Dokumenty) doszla 31.07.2026. Na telefonie blok firmowy zajmuje caly rzad,
   wiec trzy kolumny linkow w ukladzie 2-kolumnowym dawaly 2+1 z dziura - wylapala to bramka
   "siatki bez dziury w ostatnim rzedzie". Ostatnia kolumna tez idzie na pelna szerokosc. */
.stopka-grid > div:last-child { grid-column: 1 / -1; }
.stopka h3 { color: var(--zloto-tekst); font-family: var(--tekst); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
/* padding 9px zamiast 6px: cel dotyku linku rosnie z 36 do ok. 42 px. Kosztuje ok. 36 px
   wysokosci stopki, ale po odchudzeniu (864 -> 577 px) jest z czego oddac. */
/* padding 10px, nie 9px: przy 9px linki nawigacyjne stopki mierzyly 42px, czyli 2px ponizej
   zasady domowej 44px. Dwa piksele nie pogrubiaja stopki, ktora miala byc smukla. */
.stopka a { color: var(--mgla); text-decoration: none; display: inline-block; padding: 10px 0; transition: color .16s ease; }
.stopka a:hover { color: var(--zloto-tekst); }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* padding 6px zostaje - to cel dotyku linku; skrocony jest odstep MIEDZY pozycjami */
.stopka li { margin-bottom: 0; }
.stopka-logo { width: 152px; margin-bottom: 16px; }
.stopka-rejestr { font-size: .85rem; line-height: 1.58; }
.stopka-kontakt { display: block; margin-top: 8px; }
.stopka-kontakt a { color: var(--zloto-tekst); font-weight: 700; padding: 4px 0; }

/* ---------- pas kontaktowy pod kolumnami ----------
   Telefony, godziny, maile i social w JEDNYM poziomym rzedzie (przegląd PART-WEB 07.08.2026).
   Wczesniej te pozycje wisialy w kolumnie adresowej i wydluzaly ja o ok. 300 px
   wzgledem kolumn nawigacji - pas pustki po prawej byl pierwszym, co widac.
   space-between zamiast stalego odstepu: pozycji jest 6 i maja rozna szerokosc,
   rowny gap zostawialby reszte luzu w jednym miejscu. */
.stopka-kontakty {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 30px;
  border-top: 1px solid var(--kresa-zimna);
  padding-top: 16px;
}
.stopka-kontakty .sk { display: inline-flex; align-items: center; gap: 4px; }
.stopka-kontakty .sk a { color: var(--zloto-tekst); font-weight: 700; }
/* 18 px miedzy napisem SOCIAL MEDIA a pierwsza ikona - stykaly sie optycznie
   (uwaga Maćka 07.08.2026). Notka „TikTok - profil w przygotowaniu" zdjeta na jego
   prosbe - informacje niesie dalej title/aria-label na wyszarzonej ikonie.
   ⚠️ Selektor podwojny NIE dla ozdoby: samo `.sk-social` (0,1,0) przegrywalo
   z `.stopka-kontakty .sk` (0,2,0) i dziedziczylo gap 4 px - dlatego napis
   nachodzil na ikone, mimo ze w arkuszu stalo 12. */
.stopka-kontakty .sk-social { gap: 10px 18px; flex-wrap: wrap; }
/* tytul i ikony maja wlasne marginesy z kolumnowego ukladu - w rzedzie je zerujemy */
.sk-social .stopka-social-tyt { margin-bottom: 0; white-space: nowrap; }
.sk-social .dane-social { margin-top: 0; flex-wrap: nowrap; }
/* Nota prawna stoi teraz NAD siatka kolumn (przegląd PART-WEB 07.08.2026): trzy krotkie teksty
   w trzech kolumnach wypelniaja cala szerokosc, wiec pas pustki, ktory wczesniej
   zostawal pod krotkimi kolumnami nawigacji obok wysokiej kolumny adresowej,
   przestal byc pierwszym, co widac. Stad border-BOTTOM, nie top.
   Kolory podniesione z #8FA0AA na --mgla (12,4:1 na #060B0F), a wyroznienia
   na krem - nota byla zakreslona jako nieczytelna. */
.stopka-nota { border-bottom: 1px solid var(--kresa-zimna); padding-bottom: 22px; margin-bottom: 30px; font-size: .82rem; line-height: 1.6; color: var(--mgla); }
/* Akapity prawne ustawione w kolumny. Tresc zostaje w calosci - zmienia sie tylko uklad,
   bo w jednej waskiej kolumnie rosly do 341 px (desktop) i 409 px (telefon). */
/* KOLUMNY CSS, nie grid. Grid dzieli na sztywna liczbe kolumn, wiec 4 akapity
   (tylko /wspolpraca/ je ma) daly 3+1 z dziura - wylapala to poprawiona bramka.
   `columns` rozklada plynacy tekst sam i pojecie "dziury w ostatnim rzedzie" nie istnieje. */
.stopka-nota-tresc { columns: 3 290px; column-gap: 36px; }
.stopka-nota-tresc p { break-inside: avoid; margin-bottom: 8px; }
.stopka-nota p { max-width: none; }
.stopka-nota a { padding: 0; }
.stopka-nota strong { color: var(--krem); }
/* MIEJSCE NA SOCIAL MEDIA (przegląd PART-WEB, 31.07.2026 - wzorzec ze stopki despe-debki.pl).
   ⚠️ Ikon NIE wstawiamy, dopoki nie mamy dzialajacych adresow profili - martwy odnosnik
   w stopce wyglada gorzej niz jego brak. Slot jest gotowy, tresc czeka na dane klienta. */
/* PODSTRONY PRAWNE - gesty tekst na jasnej wyspie, bo czarny blok regulaminu na ciemnym
   tle jest nie do czytania (zasada z przepisu wizualnego: tresc prawna idzie na jasne). */
.dokument { max-width: 78ch; margin: 0 auto; text-align: left; }
.dokument h2 {
  font-size: var(--t-4); margin-top: 34px; margin-bottom: 10px;
  text-transform: none; letter-spacing: -.01em;
}
.dokument h2:first-child { margin-top: 0; }
.dokument p, .dokument li { max-width: none; }
.dokument ul { margin: 10px 0 0; padding-left: 22px; }
.dokument li { margin-bottom: 7px; }
.dokument p + p { margin-top: 10px; }
.dokument .brak { margin-top: 12px; }

.stopka-social { margin-top: 18px; }
.stopka-social-tyt {
  display: block; color: var(--zloto-tekst); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px;
}
.stopka-social .brak { font-size: .78rem; line-height: 1.5; }
/* ⚠️ `.stopka a` (padding 10px 0 + display) stoi w arkuszu NIZEJ niz `.dane-social a`, a ma
   TAKA SAMA specyficznosc (0,1,1) - przy remisie decyduje kolejnosc, wiec nadpisuje komponent.
   Za pierwszym razem nadpisalem tylko `padding` i to bylo zbyt waskie: `display` tez przechodzil
   z `.stopka a`, przez co odnosniki mialy `display:block` zamiast `grid` i glif ladowal
   12 px w lewo i w gore - czyli w rogu kolka. TikTok wygladal dobrze tylko dlatego, ze jest
   `<span>`, ktorego `.stopka a` nie lapie - i ta roznica byla jedyna widoczna wskazowka.
   → Nadpisujac komponent w innym kontekscie, przywroc WSZYSTKIE wlasciwosci ukladu, nie jedna. */
.stopka .dane-social a, .stopka .dane-social span {
  padding: 0; display: grid; place-items: center;
}

/* TikTok: profilu jeszcze nie ma, wiec ikona JEST, ale nie jest odnosnikiem. Wyszarzona
   i bez kursora - zeby nikt nie klikal w cos, co nigdzie nie prowadzi. Gdy profil powstanie,
   wystarczy zamienic "span class=social-wkrotce" na zwykly odnosnik i skasowac te regule. */
.social-wkrotce { opacity: .42; cursor: default; }
.dane-social a:focus-visible { outline: 2px solid var(--zloto); outline-offset: 2px; }

/* DOLNY PASEK: prawa autorskie do lewej, realizacja do prawej - tak jak w despe-debki. */
.stopka-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--kresa-zimna);
  /* bylo #8FA0AA - przy stopce rozjasnionej do #0D2530 spadlo do 5,87:1; --mgla (biel) = 15,9:1 */
  font-size: .82rem; color: var(--mgla);
}
.stopka-bar a { color: var(--zloto-tekst); font-weight: 700; padding: 0; }
@media (max-width: 620px) {
  /* na waskim ekranie pasek w dwoch wierszach, oba wyrownane do lewej - wysrodkowanie
     dwoch roznej dlugosci napisow pod soba wyglada na przypadkowe */
  .stopka-bar { flex-direction: column; align-items: flex-start; }
}

.stopka-partweb { color: var(--krem); }
.stopka-partweb a { color: var(--zloto-tekst); font-weight: 700; padding: 0; }

/* ---------- cele klikalne ----------
   WCAG 2.2 SC 2.5.8 wymaga minimum 24x24 px. Zmierzone bez tych regul: samodzielne
   odnosniki w tresci mialy 20 px. Odnosnikow OSADZONYCH W ZDANIU norma nie obejmuje
   (nie da sie ich powiekszyc bez rozwalenia interlinii) - stad selektor a:only-child. */
/* :not(.btn) jest KONIECZNE. Bez niego "main p > a:only-child" (0-1-3) bije .btn (0-1-0)
   i lezy 674 linie nizej, wiec pigulka traci display:inline-flex ORAZ padding 15px 32px,
   dostajac 5px 0. Tekst przykleja sie do luku obramowania i wyglada na uciety.
   Dotyczylo 13 przyciskow na 6 podstronach. To pulapka 9 ze skilla styl-partweb:
   szeroki reset odnosnikow nadpisujacy .btn. */
.hero-fakty dd a:not(.btn),
.kanal p > a:only-child:not(.btn),
main p > a:only-child:not(.btn) { display: inline-block; padding: 8px 0; } /* 5px dawalo 38px, za malo na cel dotyku */

/* ---------- pasek kontaktu na mobile ---------- */
.pasek-mobile { display: none; }

/* ---------- reveal - fail-safe ---------- */
.js-ruch [data-reveal] { opacity: 0; transform: translateY(26px); }
.js-ruch [data-reveal].widoczny { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s cubic-bezier(.22, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) { .js-ruch [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* =========================================================================
   OD 700 px
   ========================================================================= */
@media (min-width: 700px) {
  .uslugi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zespol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kanaly { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* piata kolumna („Uslugi") doszla 01.08.2026 razem z podstronami produktowymi */
  .stopka-grid { grid-template-columns: 1.55fr .85fr .85fr .95fr 1.05fr; }
  .stopka-grid > div:first-child, .stopka-grid > div:last-child { grid-column: auto; }
}
@media (min-width: 900px) {
  .karty--trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wpisy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 10 wpisow w 3 kolumnach zostawia ostatni sam, z dwiema trzecimi rzedu pustymi.
     Samotny ostatni kafel rozciaga sie na caly rzad - wyglada na decyzje, nie na dziure.
     Warunek 3n+1 lapie dokladnie przypadek "jeden w ostatnim rzedzie przy 3 kolumnach". */
  .wpisy > *:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 700px) and (max-width: 899.98px) {
  /* to samo dla ukladu dwukolumnowego */
  .wpisy > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =========================================================================
   DO 860 px - TELEFON. Tu strona ma wygladac najlepiej, bo tu ja oglada klient.
   ========================================================================= */
/* ---------- ROZWIJANE „USLUGI" W NAWIGACJI ----------
   Cztery podstrony produktowe nie zmieszcza sie plasko: przy 1025 px zapas do krawedzi
   paska wynosil 24 px, a same linki to okolo 460 px. Jedna pozycja z podmenu kosztuje ~110 px.
   Otwieranie KLIKNIECIEM, nie hoverem - dziala tak samo myszka, palcem i klawiatura,
   a stan niesie `aria-expanded`, wiec czytnik ekranu tez wie, co sie dzieje. */
.nav-grupa { position: relative; display: flex; align-items: center; }
/* ⚠️ Nazwa BEZ czlonu "btn": to jest link nawigacji (niesie klase .link), a nie pigulka-przycisk.
   Poprzednia nazwa "nav-grupa-btn" wpadala w selektor bramki [class*="btn-"] i element byl
   mierzony wzorcem dla pigulek CTA. Pomiar pokazal, ze oddech tekstu jest IDENTYCZNY jak
   w sasiednich linkach nawigacji (15 px na desktopie, 10 px na waskim, 6 px w szufladzie) -
   falszywy alarm bral sie wylacznie z nazwy klasy, nie z geometrii. */
.nav-grupa-toggle {
  background: none; border: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 7px;
}
.nav-grupa-toggle svg { width: 12px; height: 12px; flex: none; transition: transform .2s ease; }
.nav-grupa-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (min-width: 1025px) {
  .nav-podmenu {
    position: absolute; top: calc(100% + 12px); left: 50%;
    min-width: 236px; display: grid; gap: 2px; padding: 10px;
    background: #123240;
    border: 1px solid var(--kresa-zimna); border-radius: var(--r);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index: 70;
  }
  .nav-grupa-toggle[aria-expanded="true"] + .nav-podmenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .nav-podmenu a {
    display: block; padding: 11px 14px; border-radius: 10px; white-space: nowrap;
    color: var(--mgla); text-decoration: none; font-size: .92rem; font-weight: 600;
    transition: background-color .16s ease, color .16s ease;
  }
  .nav-podmenu a:hover, .nav-podmenu a:focus-visible {
    background: rgba(255, 195, 48, .12); color: var(--zloto-tekst);
  }
}

/* W szufladzie podmenu rozwija sie w miejscu, jako wciety blok - zadnych warstw nad warstwa. */
@media (max-width: 1024px) {
  .nav-grupa { display: block; }
  .nav-grupa-toggle { width: 100%; justify-content: space-between; text-align: left; }
  .nav-podmenu { display: none; padding: 4px 0 10px 14px; }
  .nav-grupa-toggle[aria-expanded="true"] + .nav-podmenu { display: grid; }
  .nav-podmenu a {
    display: block; padding: 13px 6px; color: var(--mgla); text-decoration: none;
    font-size: .95rem; border-bottom: 1px solid var(--kresa-zimna);
  }
  .nav-podmenu a:last-child { border-bottom: 0; }
}

/* Waski desktop tuz nad progiem szuflady: przy 1025 px zapas do krawedzi paska wynosil
   1 PIKSEL - czyli formalnie miescilo sie, a realnie wystarczylby inny rendering fontu,
   zeby przyciski zaczely byc ucinane (i to niewidocznie, bo overflow-x jest przyciety).
   Lekki zacisk kupuje kilkanascie pikseli zapasu bez ruszania celow dotyku. */
@media (min-width: 1025px) and (max-width: 1120px) {
  .nav-linki .link { padding: 10px 10px; font-size: .86rem; letter-spacing: .03em; }
  .nav-linki .btn { padding: 12px 18px; font-size: .86rem; }
}

/* SZUFLADA NAWIGACJI ponizej 1025 px (bylo 861 px).
   Etykieta „Strona glowna" zamiast „Start" dolozyla pasku ~90 px i przy 861-1024 px
   nawigacja wychodzila poza pasek o 163 px. ⚠️ Bramka tego NIE widziala: przy
   "overflow-x: clip" nie ma poziomego przewijania, wiec przyciski byly po prostu
   UCIETE na krawedzi, a kontrola melduje czysto. Zamiast sciskac font i padding
   (kosztem celow dotyku) - wczesniejszy hamburger. */
@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  /* menu kotwiczone do paska nawigacji (top:100%), nie do stalej odleglosci od gory okna -
     stala wartosc ignorowalaby wysokosc paska demo i topbaru. Chowamy przez visibility,
     bo przesuniecie procentowe przy krotkim menu zostawia je czesciowo w kadrze. */
  .nav-linki {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 12px 22px 28px;
    background: #0B1620;
    border-bottom: 1px solid var(--kresa);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .5);
    max-height: calc(100dvh - 140px); overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
  }
  .nav-linki.otwarte { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .24s ease, transform .24s ease, visibility 0s; }
  .nav-linki .link { padding: 15px 6px; font-size: 1rem; border-bottom: 1px solid var(--kresa-zimna); border-radius: 0; }
  .nav-linki .btn { margin: 18px 0 0; }
  .nav-logo img { width: 150px; }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }


  /* Topbar znika na telefonie. Zjadal ok. 50 px pierwszego ekranu, a powtarzal informacje,
     ktore i tak sa w przyklejonym pasku na dole i w stopce. Odzyskana wysokosc idzie na hero. */
  .topbar { display: none; }

  /* Pigulka etykiety na telefonie: „Program partnerski dla biur rachunkowych" to 40 znakow
     i przy 390 px i tak nie zmiesci sie w jednym wierszu. Ciasniejszy trakt i mniejsze
     wypelnienie sprawiaja, ze dwuwierszowa pigulka czyta sie jak etykieta, a nie jak ramka. */
  .etykieta { letter-spacing: .1em; padding: 6px 13px; line-height: 1.45; }

  /* hero: mniej wysoki, zdjecie kadrowane pionowo, tekst ma oddech */
  .hero { min-height: auto; padding: clamp(44px, 11vw, 74px) 0 clamp(30px, 6vw, 44px); align-items: flex-start; }
  .hero-tlo img { object-position: center 56%; }
  .hero-tlo::after {
    /* ten sam powod co przy .pas-foto::after - ostatni stop szedl w kolor podlogi */
    background: linear-gradient(180deg, rgba(8,22,31,.62) 0%, rgba(8,22,31,.72) 38%, rgba(8,22,31,.95) 78%, rgba(8,22,31,1) 100%);
  }
  .hero .lead { max-width: none; }
  .hero-cta { margin-top: 24px; gap: 11px; }
  .hero-cta .btn { width: 100%; }
  /* Chipy w JEDNYM rzedzie przewijanym palcem. Zawijane do trzech wierszy zabieraly
     ok. 150 px pierwszego ekranu i wypychaly sie pod krawedz. */
  .chipy {
    margin-top: 24px; gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px;
    /* Wygaszenie na prawej krawedzi: bez niego pasek urywa sie w polowie chipa i wyglada
       na zepsuty zamiast na przewijany. Chipy jada od 390 do 748 px, wiec sygnal, ze jest
       tam cos dalej, jest realnie potrzebny. Maska zamiast gradientu w tle, bo pasek lezy
       na zdjeciu hero i kolor tla nie jest staly. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 42px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 42px), transparent 100%);
  }
  .chipy::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; font-size: .85rem; padding: 10px 16px; }

  .usluga--szeroka .usluga-tresc { grid-template-columns: 1fr; gap: 22px; }
  .krok { grid-template-columns: 62px minmax(0, 1fr); gap: 18px; padding: 26px 0; }
  .krok::before { font-size: 2.1rem; }
  .hero-fakty div { flex-basis: 45%; padding-right: 14px; }

  /* przyklejony pasek kontaktu - telefon jest glownym kanalem w tej branzy */
  .pasek-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .4);
  }
  .pasek-mobile a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 60px; padding: 12px 10px;
    font-size: .96rem; font-weight: 700; text-decoration: none;
  }
  .pasek-mobile svg { width: 18px; height: 18px; flex: none; }
  .pasek-mobile .tel { background: var(--zloto); color: var(--noc); }
  .pasek-mobile .mail { background: #143544; color: var(--krem); }
  body { padding-bottom: 60px; }
}

@media (max-width: 560px) {
  .hero-fakty div { flex-basis: 100%; padding-right: 0; border-bottom: 1px solid var(--kresa-zimna); padding-bottom: 16px; }
  .hero-fakty div:last-child { border-bottom: 0; }
  .btn { width: 100%; }
  .zakladki .zakladka { flex: 1 1 100%; }
  .stopka-logo { width: 158px; }

  /* Najmniejsze telefony (360x740). Bez tego chipy wychodzily 33 px pod krawedz
     pierwszego ekranu, a na Wspolpracy drugi przycisk 22 px - zmierzone, nie oszacowane. */
  .hero h1 { font-size: 2.05rem; }
  .hero .lead { font-size: .99rem; }
  .hero { padding-bottom: 24px; }
  .podstrona-hero { padding-top: 40px; padding-bottom: 30px; }
  .podstrona-hero h1 { font-size: 2.05rem; }
}

/* =========================================================================
   NISKIE EKRANY - reguly po WYSOKOSCI okna, nie po szerokosci.
   Laptop 1366x768 i iPhone SE 375x667 sa szerokie albo waskie, ale przede wszystkim NISKIE.
   Bez tego naglowki podstron wychodzily poza pierwszy ekran (zmierzone: 55 px na Wspolpracy
   przy 1366x768). Zwykle media query po szerokosci tego nie lapie.
   ========================================================================= */
@media (max-height: 800px) {
  .podstrona-hero { padding-top: clamp(34px, 4vw, 58px); padding-bottom: clamp(30px, 3.5vw, 48px); }
  .podstrona-hero h1 { font-size: clamp(1.95rem, 1rem + 2.9vw, 2.9rem); }
  .podstrona-hero .lead { font-size: 1.04rem; }
  .podstrona-hero .okruszki { margin-bottom: 16px; }
}
@media (max-height: 700px) {
  .podstrona-hero { padding-top: 30px; padding-bottom: 20px; }
  .podstrona-hero h1 { font-size: 1.9rem; }
  .podstrona-hero .lead { font-size: 1rem; }
  .hero { padding-top: 34px; padding-bottom: 20px; }
}

/* ---------- druk ---------- */
@media print {
  .nav, .topbar, .pasek-mobile, .stopka, .hero-tlo, .pas-foto, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; padding-bottom: 0; }
  .sekcja { padding: 12pt 0; }
  .checklista input { -webkit-appearance: none; appearance: none; width: 14pt; height: 14pt; border: 1pt solid #000; }
}


/* Numer telefonu, ktorego jeszcze nie potwierdzilismy - widoczny, ale nieklikalny.
   Klikalny link z bledna cyfra to realna szkoda, wiec do czasu potwierdzenia
   pokazujemy numer z jawna adnotacja. */
.doPotw{
  display:inline-block;font-style:normal;font-size:.72em;font-weight:600;
  letter-spacing:.02em;color:#8a6d1f;background:rgba(201,163,90,.14);
  border:1px dashed rgba(201,163,90,.55);border-radius:6px;
  padding:1px 7px;margin-left:6px;vertical-align:middle;white-space:nowrap;
}

/* --- ZGODNOSC Z WEBKIT (iPhone) ---
   Safari rysuje <select> wlasna strzalka i innymi metrykami niz Chrome, przez co
   tekst opcji bywa uciety mimo, ze w Chrome miesci sie z zapasem. przyslano
   zdjecia z telefonu (22.07.2026): „Pokoj 2-osobow" zamiast „Pokoj 2-osobowy".
   Wlasna strzalka w tle daje te sama szerokosc na obu silnikach.
   !important, bo reguly w plikach maja wyzsza specyficznosc, a ich skrot
   background: kasuje obrazek strzalki. */
select{
  -webkit-appearance:none!important;appearance:none!important;
  padding-right:38px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231a1a1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  text-overflow:ellipsis;
}
/* iOS potrafi splaszczyc pole daty - wymuszamy wysokosc i wlasny wyglad */
input[type="date"],input[type="time"]{
  -webkit-appearance:none;appearance:none;min-height:52px;
}

/* =========================================================================
   LANDING PARTNERSKI (strona glowna w wersji dla biur rachunkowych)
   Dodatki uzyte tylko na index.html: poglądowy panel partnera oraz
   formularz "Polec klienta" z dynamiczna etykieta odbiorcy.
   Nowe, unikalne nazwy klas - nie ruszaja pozostalych podstron.
   ========================================================================= */

/* Twarda tama na poziomy scroll (mobile baseline 2026): clip, NIE hidden -
   hidden zabija position:sticky na iOS, clip przycina tak samo, a sticky zyje. */
html, body { overflow-x: clip; }

/* znacznik "to tylko podglad" nad panelem */
.znacznik-podglad {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: var(--pigulka);
  background: rgba(255, 195, 48, .12);
  border: 1px dashed var(--zloto);
  color: var(--zloto-tekst); font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 20px;
}
.znacznik-podglad svg { width: 15px; height: 15px; flex: none; }

/* ---- poglądowy panel partnera ---- */
.panel {
  background: #0E1B23;
  border: 1px solid var(--kresa-zimna);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 30px 64px rgba(0, 0, 0, .38);
}
.panel-belka {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 15px clamp(15px, 2.4vw, 24px);
  background: #0A141B;
  border-bottom: 1px solid var(--kresa-zimna);
}
.panel-awatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 195, 48, .16);
  border: 1px solid var(--kresa);
  color: var(--zloto-tekst); font-weight: 800; font-family: var(--display);
}
.panel-kto { line-height: 1.3; min-width: 0; }
.panel-kto b { display: block; color: var(--krem); font-size: .95rem; }
.panel-kto span { font-size: .8rem; color: var(--mgla); }
.panel-wyloguj {
  margin-left: auto; flex: none;
  font-size: .8rem; color: var(--mgla);
  border: 1px solid var(--kresa-zimna);
  border-radius: var(--pigulka); padding: 8px 15px;
}
.panel-cialo { padding: clamp(18px, 2.6vw, 30px); }

.panel-akcja {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 17px 20px; margin-bottom: 24px;
  background: rgba(255, 195, 48, .08);
  border: 1px solid var(--kresa); border-radius: 14px;
}
.panel-akcja p { margin: 0; font-size: .92rem; color: var(--mgla); max-width: 44ch; }
.panel-btn-mock {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  background: var(--zloto); color: var(--noc);
  font-weight: 700; padding: 13px 24px; border-radius: var(--pigulka);
  min-height: 48px; font-size: .96rem;
}
.panel-btn-mock svg { width: 18px; height: 18px; flex: none; }

.panel-naglowek-sekcji {
  margin: 0 0 12px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--zloto-tekst); font-weight: 800;
}
/* Podsekcja panelu musi odklejac sie od tego, co nad nia - jej naglowek ma byc
   blizej wlasnej tresci (12 px) niz poprzedniego bloku. */
.panel-podsekcja { margin-top: 34px; }

/* tabela zgloszen - na telefonie przewijana w poziomie WEWNATRZ kontenera,
   zeby nie rozpychac calej strony */
.panel-tabela {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--kresa-zimna); border-radius: 12px;
}
.panel-tabela table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: .9rem; }
.panel-tabela th, .panel-tabela td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--kresa-zimna); }
.panel-tabela thead th {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mgla); font-weight: 700; background: rgba(46, 74, 90, .28);
}
.panel-tabela tbody tr:last-child td { border-bottom: 0; }
.panel-tabela td b { color: var(--krem); font-weight: 700; }
.panel-tabela .branza { display: block; font-size: .78rem; color: var(--mgla); font-weight: 400; margin-top: 2px; }
.panel-tabela .prowizja { color: var(--zloto-tekst); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--pigulka); font-size: .77rem; font-weight: 700; white-space: nowrap; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status--nowe { color: #7FB2D9; background: rgba(127, 178, 217, .14); }
.status--trakcie { color: var(--zloto-tekst); background: rgba(255, 195, 48, .14); }
.status--gotowe { color: #7BC9A0; background: rgba(123, 201, 160, .14); }
/* Sciezka sprawy ma teraz szesc etapow i dwa konce (01.08.2026). Kolory ida od chlodnego
   niebieskiego przy przyjeciu, przez zloto w srodku procesu, po zielen przy sukcesie
   i stonowana czerwien przy odmowie - zeby status dalo sie odczytac kolorem, nie tylko napisem. */
.status--kontakt   { color: #8FC4E6; background: rgba(143, 196, 230, .14); }
.status--dokumenty { color: #C9B36A; background: rgba(201, 179, 106, .14); }
.status--wniosek   { color: var(--zloto-tekst); background: rgba(255, 195, 48, .16); }
.status--decyzja   { color: #E8A25C; background: rgba(232, 162, 92, .16); }
.status--odrzucone { color: #E08A8A; background: rgba(224, 138, 138, .14); }

.panel-materialy {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.panel-material {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; min-width: 0;
  background: rgba(46, 74, 90, .28);
  border: 1px solid var(--kresa-zimna); border-radius: 12px;
}
.panel-material svg { flex: none; width: 21px; height: 21px; color: var(--zloto-tekst); }
.panel-material b { display: block; font-size: .88rem; color: var(--krem); }
.panel-material span { font-size: .78rem; color: var(--mgla); }

/* etykieta dynamicznego odbiorcy w formularzu "Polec klienta" */
.odbiorca-info {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 20px; padding: 13px 16px;
  background: rgba(255, 195, 48, .1);
  border: 1px solid var(--zloto);
  border-radius: 12px; font-size: .93rem;
}
.odbiorca-info svg { width: 19px; height: 19px; flex: none; color: var(--zloto-tekst); }
.sekcja--jasna .odbiorca-info { background: #FFF4D6; border-color: var(--legal-line); color: var(--atrament); }
.sekcja--jasna .odbiorca-info svg { color: var(--zloto-ink); }
.sekcja--jasna .odbiorca-info strong { color: var(--atrament); }

/* siatka dwoch kolumn dla "co biuro z tego ma" - zwija sie sama do 1 kolumny */
/* 4 kafle: auto-fit dawal 3 w rzedzie + 1 samotny w drugim (uwaga klienta 30.07).
   Twarde 2 kolumny na szerszych ekranach daja rowny uklad 2+2. */
.korzysci { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .korzysci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* nota o prowizji rozciagnieta pod kaflami, jako wyrozniony pasek zamiast waskiego akapitu */
/* .sekcja p ma (0,1,1) i wygrywa z sama klasa - stad selektor p.nota-prowizja (0,2,1),
   inaczej nota zostaje zwezona do --miara i wyglada jak zabladzony akapit. */
/* Kolor jawnie na krem (nadpisuje .mute z HTML) + zlota kresa i mocniejsze tlo:
   nota w barwach drugorzednych ginela na ciemnej sekcji - uwaga Maćka 07.08.2026,
   zakreslil ja na czerwono jako nieczytelna. To kluczowa obietnica („klient nie
   placi nam nic"), ma byc widoczna jak tresc kafli, nie jak przypis. */
.sekcja p.nota-prowizja {
  margin-top: 22px; padding: 18px 24px;
  text-align: center;
  color: var(--krem);
  border: 1px solid var(--kresa); border-radius: var(--r);
  background: rgba(255, 195, 48, .09);
  max-width: none;
}
/* Nazwa marki nie moze sie lamac na wlasnym myslniku ("F-" na koncu wiersza). */
.nw { white-space: nowrap; }

/* Adres e-mail i numer telefonu sa JEDNA informacja - przelamane miedzy wierszami
   ("biuro@f-" / "finance.pl", "788 147" / "656") czytaja sie jak blad i nie da sie ich
   zaznaczyc jednym ruchem. Nowrap sprawia, ze caly adres schodzi do nastepnego wiersza
   zamiast pekac w polowie. Zgloszone 31.07.2026; pomiar pokazal to na 4 podstronach
   i na wielu szerokosciach, wiec regula jest globalna, a nie punktowa. */
a[href^="mailto:"], a[href^="tel:"] { white-space: nowrap; }

.korzysci .karta { min-width: 0; }
.korzysc-ikona {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 16px;
  background: rgba(255, 195, 48, .15);
  border: 1px solid var(--kresa); border-radius: 13px; color: var(--zloto-tekst);
}
.korzysc-ikona svg { width: 24px; height: 24px; }


/* --- HERO: korekta po uwagach klienta (29.07.2026) ---
   Nowy lead jest znacznie dluzszy od poprzedniego, wiec rozlewal sie na polowe
   kadru i zakrywal zespol. Wezsza kolumna tekstu oddaje zdjecie. */
/* Parametry dobrane pomiarem: przy pelnym tekscie klienta hero ma 868 px na desktopie
   i 861 px na telefonie, wiec miesci sie w pierwszym ekranie (limit 900 px). */
.hero .lead { max-width: 54ch; line-height: 1.55; }
.hero h1 { font-size: clamp(1.9rem, 1.15rem + 2.6vw, 3rem); }
.hero .wrap { padding-block: clamp(32px, 3vw, 52px) clamp(74px, 7.5vw, 110px); }
@media (max-width: 860px) {
  .hero .lead { max-width: none; }
  .hero .wrap { padding-block: clamp(24px, 5vw, 38px) clamp(64px, 14vw, 96px); }
}

/* Odnosnik „wiecej" w kaflu uslugi na stronie glownej. Do 01.08.2026 cztery kafle uslug
   NIE prowadzily do swoich podstron - jedyna droga bylo podmenu w nawigacji i stopka.
   Cel dotyku pelnej wysokosci, strzalka dorysowana przez ::after (bez encji w tresci). */
.usluga-wiecej { margin: 16px 0 0; }
.usluga-wiecej a:not(.btn) {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 0;
  font-size: .92rem; font-weight: 700; color: var(--zloto-tekst);
  border-bottom: 1px solid transparent;
  transition: gap .18s ease, border-color .18s ease;
}
.usluga-wiecej a::after {
  content: ''; flex: none; width: 15px; height: 9px;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h13M9.5 1l3.5 3.5L9.5 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h13M9.5 1l3.5 3.5L9.5 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}
.usluga-wiecej a:not(.btn):hover { gap: 13px; border-bottom-color: var(--zloto); }
.usluga-wiecej a:focus-visible { outline: 2px solid var(--zloto); outline-offset: 3px; }

/* Przycisk „wyczysc zaznaczenia" pod checklista dokumentow. Jest <button>, a nie <a>,
   bo nie prowadzi nigdzie - wiec musi wygladac jak odnosnik, ale zachowac cel dotyku. */
.link-reset {
  display: inline-block; min-height: 44px; padding: 10px 0;
  background: none; border: 0; font: inherit; font-size: inherit;
  color: var(--zloto-ink); text-decoration: underline; cursor: pointer;
}
.link-reset:hover { text-decoration: none; }
.link-reset:focus-visible { outline: 2px solid var(--legal-line); outline-offset: 2px; }

/* Oznaczenie tresci reklamowej - wymog art. 7 ust. 4 ustawy o dystrybucji ubezpieczen:
   „informacje o charakterze reklamowym lub marketingowym sa wyraznie oznaczone". */
.oznaczenie-reklamy {
  margin: 0 0 14px; padding: 9px 14px;
  background: rgba(177, 134, 40, .1);
  border-left: 3px solid var(--legal-line); border-radius: 0 8px 8px 0;
  font-size: .86rem; font-weight: 700; letter-spacing: .02em;
  color: var(--zloto-ink);
}

/* ⚠️ CHECKLISTA NA JASNEJ WYSPIE. Regula bazowa wygasza zaznaczona pozycje kolorem
   --mgla (#CBD6DD), ktory jest przeznaczony na CIEMNE tlo. Na jasnej wyspie dawal
   kontrast 1,34:1 - tekst praktycznie znikal po zaznaczeniu. Zmierzone, nie na oko.
   Wersja jasna: --atrament-mgla = 8,96:1, przekreslenie ciemniejszym zlotem. */
.sekcja--jasna .checklista input:checked + span,
.dokument .checklista input:checked + span {
  color: var(--atrament-mgla);
  text-decoration-color: var(--legal-line);
}
.sekcja--jasna .checklista li,
.dokument .checklista li { border-bottom-color: rgba(16, 26, 33, .12); }

/* Instrukcja nad checklista. Bez niej osiem pozycji z kratkami wyglada jak ozdoba -
   czytelnik nie wie, czy ma cos z tym zrobic, czy tylko przeczytac. */
.checklista-jak {
  margin: 0 0 14px; padding: 11px 15px;
  background: rgba(177, 134, 40, .09);
  border-left: 3px solid var(--legal-line); border-radius: 0 8px 8px 0;
  font-size: .92rem; font-weight: 600; line-height: 1.55;
  color: var(--atrament);
}

/* =========================================================================
   BLOK PRAWNY - uklad dwukolumnowy (01.08.2026)
   Zmierzone przed poprawka: wnetrze bloku 1092 px, a akapity 586 px i definicje
   641 px - czyli ponad 40% szerokosci stalo puste, bo `.sekcja p/dd` maja
   `max-width: 70ch`. Sama miara jest sluszna (dluga linia czyta sie zle), wiec
   nie rozciagamy tekstu, tylko UZYWAMY tej przestrzeni: etykieta w lewej kolumnie,
   tresc w prawej. Ten sam idiom co `.panel-szczegoly-dane` w panelu.
   Przy okazji: `dt` bylo MNIEJSZE (0,92rem) niz `dd` (1,06rem) - etykieta mniejsza
   od tresci, ktora opisuje, czyta sie odwrotnie do hierarchii.
   ========================================================================= */
.blok-prawny dt {
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--zloto-ink);
}
.blok-prawny > p:first-of-type { max-width: 72ch; }

@media (min-width: 880px) {
  .blok-prawny dl {
    display: grid;
    grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
    column-gap: 40px;
    margin-top: 28px;
  }
  .blok-prawny dt {
    grid-column: 1; margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(177, 134, 40, .28);
  }
  .blok-prawny dd {
    grid-column: 2; margin: 0;
    padding: 18px 0 20px;
    border-top: 1px solid rgba(177, 134, 40, .28);
    max-width: none;          /* miare trzyma juz sama kolumna */
  }
  /* pierwsza para bez kreski u gory - kreska ma DZIELIC, nie obramowywac */
  .blok-prawny dl > dt:first-child,
  .blok-prawny dl > dt:first-child + dd { border-top: 0; padding-top: 4px; }
}

/* na waskim ekranie wracamy do listy jedna pod druga, ale etykieta zostaje etykieta */
@media (max-width: 879px) {
  .blok-prawny dt { margin-top: 22px; }
  .blok-prawny dd { margin-top: 6px; }
}

/* Sam blok byl na cala szerokosc `--wrap` (1172 px). Po rozbiciu na dwie kolumny wiersz
   tresci wychodzil ~94 znaki - grubo ponad komfortowe 45-75. Zwezamy PUDELKO zamiast
   dodawac kolejny max-width w srodku: wtedy obie kolumny same wracaja do miary,
   a blok siedzi na osi wysrodkowanego naglowka nad nim. */
.blok-prawny { max-width: 940px; margin-inline: auto; }
@media (min-width: 880px) {
  .blok-prawny dl { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); column-gap: 36px; }
}

/* Pigulki pod naglowkiem w sekcji wysrodkowanej. `.chipy` to flex, wiec `text-align:center`
   z `.sekcja--srodek` ich nie rusza - potrzebne jest justify-content. Ten sam wyjatek
   istnieje juz dla `.hero-cta` kilka regul wyzej. */
.sekcja--srodek .chipy { justify-content: center; }

/* =========================================================================
   BLOK „GRANICE" - czego nie obiecujemy (01.08.2026)
   Wczesniej byl to goly `.dokument`: przezroczysty, bez ramki, bez tla - kolumna
   tekstu wisiaca posrodku wielkiego kremowego pasa. Zmierzone: 715 px tresci
   w kontenerze 1220 px, zero oprawy. Wygladalo na zapomniany akapit, a to jest
   najwazniejszy prawnie blok na podstronie produktowej.
   Cichszy niz `.blok-prawny` (ten ma 2 px zlota ramke i niesie rejestry) - tu
   wystarczy delikatna karta ze zlota kreska po lewej.
   ⚠️ Tekst zostaje DO LEWEJ. Wysrodkowany akapit dyskalimera czyta sie zle, bo oko
   nie ma stalej krawedzi powrotu - srodkujemy BLOK, nie wiersze.
   ========================================================================= */
.dokument--granice {
  max-width: 820px; margin-inline: auto;
  padding: 30px 34px;
  background: var(--legal-bg);
  border: 1px solid rgba(177, 134, 40, .35);
  border-left: 4px solid var(--legal-line);
  border-radius: 0 var(--r) var(--r) 0;
  text-align: left;
}
.dokument--granice p { margin: 0 0 14px; }
.dokument--granice p:last-child { margin-bottom: 0; }
.dokument--granice .dokument-linki {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(177, 134, 40, .25);
  font-size: .92rem;
}
.dokument--granice .dokument-linki .sep { color: var(--atrament-mgla); margin: 0 6px; }
.dokument--granice .brak--blok { margin-top: 16px; }
@media (max-width: 620px) {
  .dokument--granice { padding: 22px 20px; border-left-width: 3px; }
}

/* WSTEP I ZAKONCZENIE BLOKU PRAWNEGO - na srodku (przegląd PART-WEB, 01.08.2026).
   Blok ma trzy czesci o roznej naturze i kazda chce czego innego:
     - naglowek + akapit wprowadzajacy: OPRAWA bloku, wiec na srodku,
     - lista dt/dd: dane rejestrowe, zostaja w dwoch kolumnach do lewej,
     - nota koncowa + przycisk: znowu oprawa, wiec na srodku.
   ⚠️ Regula `.sekcja--srodek :is(...,.blok-prawny,...) *` ustawia WSZYSTKO w srodku
   bloku do lewej (slusznie, bo chroni wnetrze kart). Ma specyficznosc (0,2,0), wiec
   zeby ja pokonac, selektor musi miec klase sekcji PLUS klase bloku: (0,2,1).
   Celujemy tylko w BEZPOSREDNIE dzieci - tresc z <dl> zostaje nietknieta.
   Sprawdzone: wszystkie trzy podstrony z tym blokiem (glowna, wspolpraca, kontakt)
   maja identyczna budowe h3 / p / dl / p / p. */
.sekcja--srodek .blok-prawny > h3,
.sekcja--srodek .blok-prawny > p { text-align: center; }
.sekcja--srodek .blok-prawny > p { margin-inline: auto; }
/* akapit wprowadzajacy ma limit 72ch - bez auto-marginesow stalby przy lewej krawedzi
   mimo `text-align: center` (srodkowalby sie tylko tekst WEWNATRZ waskiego bloku) */
.sekcja--srodek .blok-prawny > p:first-of-type { max-width: 72ch; margin-inline: auto; }

/* WPIS WYROZNIONY NA BLOGU - wysrodkowany (przegląd PART-WEB, 01.08.2026).
   Zmierzone przed poprawka: wnetrze karty 1108 px, akapity 580 px przyklejone do lewej
   i 527 px MARTWEJ PRZESTRZENI po prawej. Naglowek i pigulki szly na pelna szerokosc,
   wiec karta rozjezdzala sie na dwie rozne osie.
   To karta zapowiedzi, a nie tresc artykulu - dlatego srodkujemy CALOSC, tak jak hero.
   Akapity dostaja 76ch (jak `.proza` w sekcjach wysrodkowanych) zamiast domyslnych 70ch,
   zeby zapowiedz nie byla wezsza od naglowka nad nia. */
.wpis--wyrozniony { text-align: center; }
.wpis--wyrozniony .wpis-meta { justify-content: center; }
.wpis--wyrozniony p { max-width: 76ch; margin-inline: auto; }
.wpis--wyrozniony .brak { margin-inline: auto; }

/* Rzad przyciskow POD wpisem wyroznionym na blogu. Karta zapowiedzi jest wysrodkowana,
   wiec przyciski pod nia tez musza byc - inaczej blok konczy sie krzywo.
   Regula wiaze je z karta (`+`), a nie z sekcja: dzieki temu nie rusza zadnego innego
   rzedu przyciskow w serwisie. Hero strony glownej ma je po lewej CELOWO, bo caly hero
   jest wyrownany do lewej - to jedyne drugie miejsce z .hero-cta poza sekcja--srodek. */
.wpis--wyrozniony + .hero-cta { justify-content: center; }

/* ---------- mapa na zadanie (RODO, 09.08.2026) ----------
   Iframe Google nie laduje sie sam - w jego miejscu stoi placeholder w tym samym
   rozmiarze (zeby uklad nie skakal po kliknieciu), z nota i przyciskiem. */
.mapa-zgoda {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 22px;
  width: 100%; aspect-ratio: 16 / 10;
  background: var(--karta);
  border: 1px solid var(--kresa-zimna); border-radius: var(--r);
}
.mapa-zgoda p { max-width: 40ch; color: var(--mgla); margin: 0; }
.mapa-zgoda a { color: var(--zloto-tekst); }
.sekcja--jasna .mapa-zgoda { background: #fff; }
.sekcja--jasna .mapa-zgoda p { color: var(--atrament-mgla); }
.sekcja--jasna .mapa-zgoda a { color: var(--zloto-ink); }
@media (max-width: 480px) { .mapa-zgoda { aspect-ratio: 4 / 3; } }

/* =========================================================================
   MNIEJ GESTEGO TEKSTU (12.08.2026)
   Cztery wzorce zamiast scian prozy:
   .sedno     - jedno zdanie sedna nad punktami (pogrubione, nie naglowek)
   .punkty    - lista ze zlota kropka; workhorse, zastepuje akapit opisowy
   .fakty     - wiersze ETYKIETA -> tresc; do opisow produktow („Na co", „Haczyk")
   .wskrocie  - pasek „w skrocie" pod naglowkiem sekcji, 2-4 krotkie zdania
   .porownanie - tabela dwoch wariantow zamiast dwoch akapitow obok siebie
   ========================================================================= */

.sedno {
  margin: 0 0 12px;
  font-size: 1.02rem; font-weight: 700; line-height: 1.45;
  color: var(--krem);
}
.sekcja--jasna .sedno { color: var(--atrament); }

.punkty { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.punkty li {
  position: relative; padding-left: 22px;
  font-size: .95rem; line-height: 1.58; color: var(--mgla);
}
.punkty li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--zloto); opacity: .85;
}
.punkty strong, .punkty b { color: var(--krem); font-weight: 700; }
.sekcja--jasna .punkty li { color: var(--atrament-mgla); }
.sekcja--jasna .punkty li::before { background: var(--zloto-ink); }
.sekcja--jasna .punkty strong, .sekcja--jasna .punkty b { color: var(--atrament); }

.fakty { margin: 0; display: grid; gap: 0; }
.fakty > div {
  display: grid; grid-template-columns: minmax(88px, 26%) 1fr; gap: 4px 16px;
  padding: 11px 0; border-top: 1px solid var(--kresa-zimna);
}
.fakty > div:first-child { border-top: 0; padding-top: 4px; }
.fakty dt {
  font-size: .71rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--zloto-tekst); padding-top: 3px;
}
.fakty dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--mgla); }
.sekcja--jasna .fakty > div { border-color: rgba(16, 26, 33, .12); }
.sekcja--jasna .fakty dt { color: var(--zloto-ink); }
.sekcja--jasna .fakty dd { color: var(--atrament-mgla); }
@media (max-width: 460px) {
  .fakty > div { grid-template-columns: 1fr; gap: 3px; }
}

.wskrocie {
  list-style: none; margin: 22px auto 0; padding: 18px 22px;
  max-width: 62ch; text-align: left;
  display: grid; gap: 10px;
  background: rgba(255, 195, 48, .07);
  border: 1px solid var(--kresa); border-radius: 16px;
}
.wskrocie li {
  position: relative; padding-left: 26px;
  font-size: .95rem; line-height: 1.55; color: var(--mgla);
}
.wskrocie li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255, 195, 48, .2); border: 1px solid var(--zloto);
}
.wskrocie strong, .wskrocie b { color: var(--krem); }
.sekcja--jasna .wskrocie { background: rgba(177, 134, 40, .09); border-color: rgba(122, 82, 0, .3); }
.sekcja--jasna .wskrocie li { color: var(--atrament-mgla); }
.sekcja--jasna .wskrocie li::before { background: rgba(122, 82, 0, .16); border-color: var(--zloto-ink); }
.sekcja--jasna .wskrocie strong, .sekcja--jasna .wskrocie b { color: var(--atrament); }

.porownanie { width: 100%; overflow-x: auto; margin-top: var(--odstep-m); }
.porownanie table { width: 100%; min-width: 520px; border-collapse: collapse; text-align: left; }
.porownanie th, .porownanie td {
  padding: 13px 16px; border-bottom: 1px solid var(--kresa-zimna);
  font-size: .93rem; line-height: 1.5; vertical-align: top;
}
.porownanie thead th {
  font-family: var(--display); font-size: .95rem; font-weight: 800; color: var(--krem);
  border-bottom-color: var(--kresa);
}
.porownanie tbody th {
  font-size: .71rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--zloto-tekst); white-space: nowrap;
}
.porownanie td { color: var(--mgla); }
.sekcja--jasna .porownanie th, .sekcja--jasna .porownanie td { border-color: rgba(16, 26, 33, .12); }
.sekcja--jasna .porownanie thead th { color: var(--atrament); }
.sekcja--jasna .porownanie tbody th { color: var(--zloto-ink); }
.sekcja--jasna .porownanie td { color: var(--atrament-mgla); }

/* Kafle w hero (12.08.2026) - cztery plaskie prostokaty zamiast 533-znakowego akapitu.
   Prostokaty, nie pigulki: promien 4px, plaskie tlo, zloty pasek po lewej. Hover jest
   obowiazkowy - to blok powtarzalny (zasada domowa). */
.hero-kafle {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 28px;
}
.hero-kafel {
  padding: 15px 17px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--kresa-zimna);
  border-left: 3px solid var(--zloto);
  border-radius: 4px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-kafel:hover {
  background: rgba(255, 195, 48, .1);
  border-color: var(--kresa); border-left-color: var(--zloto-jasne);
  transform: translateY(-2px);
}
.hero-kafel-tyt {
  display: block; margin-bottom: 5px;
  font-family: var(--display); font-size: .95rem; font-weight: 800;
  line-height: 1.25; color: var(--krem);
}
.hero-kafel-tresc {
  display: block; font-size: .87rem; line-height: 1.5; color: var(--mgla);
}
@media (prefers-reduced-motion: reduce) {
  .hero-kafel, .hero-kafel:hover { transition: none; transform: none; }
}
@media (max-width: 480px) {
  .hero-kafle { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- PROSTOKATY SEKCYJNE ---------- */
.kafle {
  display: grid; gap: 12px; margin-top: var(--odstep-m); text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.kafle--dwa { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.kafel {
  padding: 16px 18px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--kresa-zimna);
  border-left: 3px solid var(--zloto);
  border-radius: 4px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.kafel:hover {
  background: rgba(255, 195, 48, .1);
  border-color: var(--kresa); border-left-color: var(--zloto-jasne);
  transform: translateY(-2px);
}
.kafel-tyt {
  display: block; margin-bottom: 5px;
  font-family: var(--display); font-size: .95rem; font-weight: 800;
  line-height: 1.25; color: var(--krem);
}
.kafel-tresc { display: block; font-size: .88rem; line-height: 1.5; color: var(--mgla); }
.sekcja--jasna .kafel { background: #fff; border-color: rgba(16, 26, 33, .12); border-left-color: var(--zloto-ink); }
.sekcja--jasna .kafel:hover { background: rgba(177, 134, 40, .08); }
.sekcja--jasna .kafel-tyt { color: var(--atrament); }
.sekcja--jasna .kafel-tresc { color: var(--atrament-mgla); }

/* ---------- PRZEPLYW ZE STRZALKAMI ---------- */
.przeplyw {
  list-style: none; margin: var(--odstep-m) 0 0; padding: 0; text-align: left;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.przeplyw li {
  position: relative; padding: 15px 17px;
  background: rgba(46, 74, 90, .3);
  border: 1px solid var(--kresa-zimna); border-radius: 4px;
  transition: background .2s ease, border-color .2s ease;
}
.przeplyw li:hover { background: rgba(255, 195, 48, .1); border-color: var(--kresa); }
.przeplyw li:not(:last-child)::after {
  content: "\203A"; position: absolute; right: -13px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--display); font-size: 1.5rem; font-weight: 800;
  line-height: 1; color: var(--zloto-tekst); opacity: .75; z-index: 1;
}
.przeplyw-tyt {
  display: block; margin-bottom: 5px;
  font-family: var(--display); font-size: .92rem; font-weight: 800; color: var(--krem);
}
.przeplyw-tresc { display: block; font-size: .86rem; line-height: 1.5; color: var(--mgla); }
.sekcja--jasna .przeplyw li { background: #fff; border-color: rgba(16, 26, 33, .12); }
.sekcja--jasna .przeplyw li:not(:last-child)::after { color: var(--zloto-ink); }
.sekcja--jasna .przeplyw-tyt { color: var(--atrament); }
.sekcja--jasna .przeplyw-tresc { color: var(--atrament-mgla); }
@media (max-width: 640px) {
  .przeplyw { grid-template-columns: 1fr; gap: 22px; }
  .przeplyw li:not(:last-child)::after {
    right: auto; left: 50%; top: auto; bottom: -20px;
    transform: translateX(-50%) rotate(90deg);
  }
}

/* ---------- KLIKALNE KWADRATY (natywny <details>, dziala bez JS) ---------- */
.kwadraty {
  display: grid; gap: 12px; margin-top: var(--odstep-m); text-align: left;
  /* auto-fit zostawialo SIEROTKE: cztery kafle ukladaly sie 3+1. Twarde dwie kolumny
     daja rowne 2x2, a na waskim ekranie jedna kolumne. Zasada domowa: zero sierotek. */
  grid-template-columns: 1fr;
  align-items: start;
}
.kwadrat {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--kresa-zimna); border-radius: 4px;
  transition: border-color .2s ease, background .2s ease;
}
.kwadrat:hover { border-color: var(--kresa); background: rgba(255, 195, 48, .07); }
.kwadrat[open] { border-color: var(--kresa); background: rgba(255, 195, 48, .07); }
.kwadrat > summary {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  min-height: 48px;
}
.kwadrat > summary::-webkit-details-marker { display: none; }
.kwadrat-nr {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 3px;
  background: rgba(255, 195, 48, .16); border: 1px solid var(--kresa);
  font-family: var(--display); font-size: .8rem; font-weight: 800; color: var(--zloto-tekst-jasny);
}
.kwadrat-glowa { flex: 1 1 auto; min-width: 0; }
.kwadrat-tyt {
  display: block; font-family: var(--display); font-size: .95rem; font-weight: 800;
  line-height: 1.25; color: var(--krem);
}
.kwadrat-haslo { display: block; margin-top: 4px; font-size: .86rem; line-height: 1.45; color: var(--mgla); }
.kwadrat-znak {
  flex: none; width: 22px; height: 22px; margin-top: 4px; position: relative;
  border-radius: 3px; border: 1px solid var(--kresa-zimna);
}
/* Strzalka w dol, nie „plus" - pasek 10x2px czytal sie jak ozdobna kreska
   (bramka QA slusznie go zglaszala), a strzalka od razu mowi „rozwin". */
.kwadrat-znak::before {
  content: ""; position: absolute; left: 50%; top: 45%;
  width: 7px; height: 7px;
  border-right: 2px solid var(--zloto); border-bottom: 2px solid var(--zloto);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .2s ease;
}
.kwadrat[open] .kwadrat-znak::before { transform: translate(-50%, -25%) rotate(225deg); }
.kwadrat-tresc { padding: 0 18px 17px 60px; }
.kwadrat-tresc .punkty { margin-top: 2px; }
.kwadrat-tresc .fakty { margin-top: 2px; }
.sekcja--jasna .kwadrat { background: #fff; border-color: rgba(16, 26, 33, .12); }
.sekcja--jasna .kwadrat[open], .sekcja--jasna .kwadrat:hover { background: rgba(177, 134, 40, .07); border-color: rgba(122, 82, 0, .3); }
.sekcja--jasna .kwadrat-nr { color: var(--zloto-ink); background: rgba(177, 134, 40, .14); border-color: rgba(122, 82, 0, .3); }
.sekcja--jasna .kwadrat-tyt { color: var(--atrament); }
.sekcja--jasna .kwadrat-haslo { color: var(--atrament-mgla); }
.sekcja--jasna .kwadrat-znak::before { border-right-color: var(--zloto-ink); border-bottom-color: var(--zloto-ink); }
@media (max-width: 460px) {
  .kwadrat-tresc { padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .kafel, .kafel:hover, .przeplyw li, .kwadrat { transition: none; transform: none; }
}

/* Tekst wylacznie dla czytnikow ekranu - podpis tabeli porownawczej musi istniec
   w drzewie dostepnosci, ale wizualnie powtarzalby naglowek sekcji. */
.brak-wizualnie {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  /* kolor nieistotny wizualnie (element jest przyciety do 1px), ale audyt kontrastu
     mierzy kazdy tekst w DOM - wiec ustawiamy taki, ktory przechodzi. */
  color: inherit;  /* dziedziczy po tabeli - element jest przyciety do 1px i niewidoczny,
                       ale audyt kontrastu mierzy kazdy tekst w DOM */
}


/* .punkty/.fakty maja margin: 0, a stoja w arkuszu PO utility .mt-*, wiec je zjadaly.
   Bramka QA zlapala to jako 4px odstepu od bloku nad soba. Przywracamy odstepy. */
.punkty.mt-s, .fakty.mt-s { margin-top: var(--odstep-s); }
.punkty.mt-m, .fakty.mt-m { margin-top: var(--odstep-m); }
.punkty.mt-l, .fakty.mt-l { margin-top: var(--odstep-l); }

/* Akapit tuz po liscie punktow przyklejal sie do niej (4px) - .punkty nie ma
   marginesu dolnego, a nastepny <p> ma wlasny maly. Bramka QA to zlapala. */
.punkty + p, .fakty + p, .wskrocie + p { margin-top: var(--odstep-s); }


@media (min-width: 860px) {
  .kwadraty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kafle w hero podstrony. .wrap ma tu pelna szerokosc, a h1 max-width 18ch - bez
   ograniczenia kafle rozjezdzaly sie na cala szerokosc i odklejaly od naglowka.
   Wyrownanie do LEWEJ, nigdy auto - wysrodkowany pasek pod naglowkiem z lewej
   wygladal, jakby plywal osobno (uwaga z przeglądu 12.08.2026). */
.podstrona-hero .hero-kafle { max-width: 760px; margin-left: 0; margin-right: auto; }
.podstrona-hero .hero-kafle + .hero-cta { margin-top: 28px; }





/* =====================================================================
   KOMPONENTY NA JASNYM (19.08.2026) - domkniecie motywu jasnego.

   Kontekst: do 18.08 podloga byla ciemna, wiec te komponenty pisano pod ciemne tlo.
   Po odwroceniu ustroju (jasna baza, ciemne pasy) wpadly na papier ze swoim ciemnym
   tlem i jasnym tekstem. To ta sama klasa bledu, o ktorej mowi styl-partweb:
   „klasa pisana pod ciemne tlo, uzyta na jasnej sekcji = tekst znika".

   Zasada porzadkujaca: karta na jasnym jest BIALA i lezy WYZEJ (cien), a nie ciemniejsza
   od tla. Zloto na jasnym nigdy nie niesie tekstu w wersji markowej #EAB035 (1,73:1),
   tylko w wersji tekstowej --zloto-ink #654200.
   ===================================================================== */

/* ---------- karty uslug ---------- */
.sekcja--jasna .usluga {
  background: var(--karta-jasna);
  border-color: rgba(16, 26, 33, .12);
  box-shadow: 0 1px 2px rgba(16, 26, 33, .05), 0 14px 30px rgba(16, 26, 33, .05);
}
.sekcja--jasna .usluga h3,
.sekcja--jasna .usluga strong { color: var(--atrament); }
.sekcja--jasna .usluga p,
.sekcja--jasna .usluga li { color: var(--atrament-mgla); }
/* (martwa regula usunieta 20.08 - numer uslugi ustawia blok nizej, na --zloto-duze) */
.sekcja--jasna .usluga-ikona {
  background: rgba(101, 66, 0, .1);
  border-color: rgba(101, 66, 0, .28);
  color: var(--zloto-ink);
}
.sekcja--jasna .usluga-lista svg,
/* (regula `.sekcja--jasna .usluga-wiecej a` usunieta 19.08 - link jest teraz komponentem
   .btn--amber, wiec kolor napisu bierze z przycisku: ciemny --noc, 11,44:1) */
.sekcja--jasna .usluga-kroki span {
  background: rgba(16, 26, 33, .05);
  border-color: rgba(16, 26, 33, .14);
  color: var(--atrament-mgla);
}

/* ---------- zespol ---------- */
.sekcja--jasna .osoba {
  background: var(--karta-jasna);
  border-color: rgba(16, 26, 33, .12);
  box-shadow: 0 1px 2px rgba(16, 26, 33, .05), 0 14px 30px rgba(16, 26, 33, .05);
}
.sekcja--jasna .osoba:hover { border-color: rgba(101, 66, 0, .35); }
.sekcja--jasna .osoba h3 { color: var(--atrament); }
.sekcja--jasna .osoba p { color: var(--atrament-mgla); }
.sekcja--jasna .osoba .rola { color: var(--zloto-ink); }
.sekcja--jasna .osoba-lista li { color: var(--atrament-mgla); }
.sekcja--jasna .osoba-lista li::before { background: var(--zloto-ink); }
.sekcja--jasna .zespol-tytul { color: var(--atrament); }

/* ---------- wpisy na blogu ---------- */
.sekcja--jasna .wpis {
  background: var(--karta-jasna);
  border-color: rgba(16, 26, 33, .12);
  box-shadow: 0 1px 2px rgba(16, 26, 33, .05), 0 14px 30px rgba(16, 26, 33, .05);
}
.sekcja--jasna .wpis:hover { border-color: rgba(101, 66, 0, .35); }
.sekcja--jasna .wpis h2,
.sekcja--jasna .wpis h3 { color: var(--atrament); }
.sekcja--jasna .wpis p,
.sekcja--jasna .wpis-meta { color: var(--atrament-mgla); }
.sekcja--jasna .wpis-kat {
  color: var(--zloto-ink);
  background: rgba(101, 66, 0, .12);
}
.sekcja--jasna .wpis-stopka { color: var(--zloto-ink); }
/* wpis wyrozniony ma gradient zaszyty pod ciemne tlo - na jasnym idzie w biel z ramka */
.sekcja--jasna .wpis--wyrozniony {
  background: var(--karta-jasna);
  border-color: rgba(101, 66, 0, .32);
}

/* ---------- chipy ---------- */
.sekcja--jasna .chip {
  background: rgba(16, 26, 33, .05);
  border-color: rgba(16, 26, 33, .14);
  color: var(--atrament-mgla);
}
.sekcja--jasna .chip svg { color: var(--zloto-ink); }

/* ---------- zlota powierzchnia na jasnym ----------
   Zloto marki na papierze ma 1,60:1, wiec sam przycisk jako KSZTALT znika, choc napis
   na nim jest czytelny. WCAG 1.4.11 wymaga 3:1 dla elementow interfejsu, stad obwodka. */
.sekcja--jasna .btn--amber,
.sekcja--jasna .panel-btn-mock { border: 1px solid #9C7414; }


/* =====================================================================
   POPRAWKI PO AUDYCIE ROZJASNIENIA (19.08.2026)
   ===================================================================== */

/* ---------- SIATKA BEZPIECZENSTWA ----------
   Sekcja bez klasy tonu to blad: tlo bierze jasne z body, a kolor tekstu ciemny
   z reguly bazowej, wiec napisy znikaja. Zamiast liczyc na to, ze generator zawsze
   otaguje wszystko, sekcja bez tonu dostaje tlo CIEMNE - czyli wraca do zachowania
   sprzed 19.08 i usterka jest widoczna od razu, a nie po cichu nieczytelna. */
main > section.sekcja:not(.sekcja--jasna):not(.sekcja--petrol):not(.sekcja--ciemna) {
  background: var(--noc-2);
}

/* ---------- OKRUSZKI NA JASNYM ----------
   `.okruszki a` stalo na zlocie MARKI (#FFC330). Na ciemnej podlodze mialo 8,7:1,
   po rozjasnieniu 1,74:1 i sciezka nawigacji znikala na kazdej podstronie. */
.sekcja--jasna .okruszki { color: var(--atrament-mgla); }
.sekcja--jasna .okruszki a { color: var(--zloto-ink); }              /* 8,0:1 na papierze */
.sekcja--jasna .okruszki a:hover { color: var(--atrament); }

/* ---------- ETYKIETY NA JASNYM ----------
   Bylo 6,87:1, czyli tuz pod progiem domowym. Ciemniejszy tekst i lzejsza pigulka
   daja 7,84:1 na papierze i 8,75:1 na bieli. */
/* (drugi wariant jasny usuniety 20.08 - patrz komponent .etykieta nizej) */


/* =====================================================================
   PRZELACZNIK ZLOTA I ETYKIETY (19.08.2026)
   ===================================================================== */

/* Jedna regula zamiast poprawiania 66 miejsc: w sekcji jasnej litera zlota
   schodzi na wersje tekstowa. Powierzchnie (przyciski) zostaja marka. */
.sekcja--jasna {
  --zloto-tekst: var(--zloto-ink);
  --zloto-tekst-jasny: var(--zloto-ink);
}

/* Etykieta to pigulka 12 px wersalikami. Na ciemnym zlote litery na zlotym tle daly
   5,87:1 - regula domowa mowi: male etykiety na ciemnym to CZYSTA BIEL. Dotyczy tez
   hero, gdzie audyt tego nie widzial, bo tlo jest gradientem. */
.hero .etykieta,
.podstrona-hero .etykieta,
.sekcja--petrol .etykieta,
/* (wariant dla pasa CTA usuniety 20.08 - plytka ma wlasny, ciemny napis) */


/* =====================================================================
   OSTATNIE TRZY Z AUDYTU ROZJASNIENIA (19.08.2026)
   ===================================================================== */

/* Nota o prowizji. ⚠️ Selektor musi miec specyficznosc >= (0,2,1), bo sama regula
   `.sekcja p.nota-prowizja` tyle wlasnie ma i zwykle `.sekcja--jasna .mute` (0,2,0)
   jej nie przebija. Bez tego nota zostaje kremowa na papierze: 1,06:1. */
.sekcja--jasna p.nota-prowizja { color: var(--atrament-mgla); }

/* Kafel podzialu obowiazkow. Podklad byl petrolowy (rozjasnienie na ciemnym), na bieli
   dawal szarosc #C0C9CE i tekst drugorzedny spadal do 5,9:1. Neutralny, lekki podklad
   podnosi go do 9,0:1. */
.sekcja--jasna .podzial div {
  background: #FFFFFF;
  border-color: rgba(16, 26, 33, .12);
}
/* Kafle podzialu staja sie biale jak sasiednie karty, a napis granatowy: zloto #FFC330
   na jasnej plycie ma 1,42:1, wiec „Partner" i „F-FINANCE" byly ledwo widoczne. */
.sekcja--jasna .podzial .udzial { color: var(--atrament); }

/* Numer telefonu dzialu: 20 px zlotem marki mial na papierze 1,96:1. */
/* ⚠️ Podstrona kontakt ma LOKALNY <style> z regula `.zespol-karta .telefon-dzialu`
   o tej samej specyficznosci (0,2,0), a lokalny arkusz stoi w <head> PO wspolnym,
   wiec wygrywal kolejnoscia. Stad selektor o stopien mocniejszy (0,3,0). */
.sekcja--jasna .telefon-dzialu,
.sekcja--jasna .zespol-karta .telefon-dzialu,
.sekcja--jasna .telefon-dzialu a { color: var(--zloto-ink); }


/* =====================================================================
   ODBIOR BIELI NA CIEMNYM (19.08.2026 wieczorem, prosba Macka)
   Tekst na ciemnym JUZ jest #FFFFFF - bielszego koloru nie ma. Jasniejszy odbior
   daja dwie rzeczy: GRUBSZE pismo (cienkie kreski na ciemnym gasna przy wygladzaniu
   czcionki) i glebsze tlo pod spodem. Wagi tylko w kontekstach ciemnych - na jasnym
   tekst zostaje 400, bo tam ciemny atrament nie ma tego problemu.
   ===================================================================== */
.hero .lead, .hero--split .lead, .podstrona-hero .lead,
.hero .mute, .podstrona-hero .mute,
.sekcja--petrol .lead, .sekcja--petrol .mute, .sekcja--petrol p,
.sekcja--ciemna .lead, .sekcja--ciemna .mute, .sekcja--ciemna p { font-weight: 500; }


/* =====================================================================
   HERO DWUKOLUMNOWY (przeniesione z lokalnego <style> strony glownej 19.08.2026)
   Uzywaja go teraz DWIE strony: glowna i /wspolpraca/ (czesc dla partnerow),
   wiec styl nie moze dluzej mieszkac w naglowku jednej z nich.
   ===================================================================== */
/* =====================================================================
   HERO DWUKOLUMNOWY - zdjecie OBOK tekstu (prosba klientki, 10.08.2026).
   Sylwia: „Nasze zdjecie chcemy zeby bylo na boku nie tak jak jest teraz".
   Zdjecie przestaje byc tlem pod napisami: stoi we wlasnej kolumnie, nic go
   nie zaslania i nie trzeba welonu. Znika przez to caly rachunek kontrastu
   tekstu na fotografii - tekst lezy na jednolitym petrolu.
   ⚠️ To odejscie od naszego wzorca hero pelnoekranowego (alpaki/dziadkowizna).
   Decyzja klienta o wlasnej stronie - nie kopiowac tego do innych makiet.
   Style lokalne, bo dotycza wylacznie strony glownej.
   ===================================================================== */
.hero--split {
  min-height: 0;
  align-items: center;
  padding: clamp(34px, 4vw, 62px) 0 clamp(42px, 4.8vw, 76px);
  /* Petrol z fotografii ze sciany w biurze zamiast czerni - jasniejsza dominanta.
     Kontrasty policzone na najjasniejszym koncu (#17333F):
     krem 11,8:1 | mgla 9,0:1 | zloto 6,7:1 - kazdy z zapasem ponad 4,5:1. */
  background: linear-gradient(168deg, #245565 0%, #1B4152 46%, #143544 100%);
  /* 19.08 noc: hero rozjasnione do petrolu ze sciany na zdjeciu. Zloto siedzi tu tylko
     w WIELKIM naglowku (prog 4,5:1 dla duzego tekstu): na gornym stopie 5,11:1. Biel 8,2:1. */
  /* 19.08 wieczorem: gradient pociemniony (bylo #17333F/#12262F/#0D1A23) - biel na
     gornym stopie skacze z 13,3:1 na 15,8:1, zloto-jasne z 8,6:1 na 10,3:1 */
}
.hero--split .wrap { padding-block: 0; }
.hero--split h1 { text-shadow: none; }          /* nie ma juz zdjecia pod tekstem */
.hero--split .lead { max-width: none; color: var(--mgla); }
/* Etykieta wraca do zwyklej pigulki - ciemna byla potrzebna tylko na zdjeciu. */
.hero--split .etykieta { background: rgba(255, 195, 48, .17); color: #FFFFFF; }
/* zdanie Sylwii nad kafelkami - most miedzy akapitem a wyborem obszaru */
.hero-pytanie { margin: 24px 0 2px; font-weight: 700; font-size: 1.02rem; color: var(--krem); }
/* wariant bez akapitu nad soba - odstep od naglowka bierze na siebie samo pytanie */
.hero-pytanie--sam { margin-top: clamp(20px, 2.4vw, 34px); font-size: 1.08rem; }
.hero-siatka { display: grid; gap: clamp(26px, 3.4vw, 54px); align-items: center; }
.hero-tresc { min-width: 0; }
.hero-foto {
  margin: 0; min-width: 0;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--kresa);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
}
/* Kadr 4/5 przy zrodle 1200x1548 (0,775) zabiera raptem 32 px wysokosci, wiec nikomu
   nie ucina glowy ani nog. 30% od gory: pasmo twarzy siedzi w gornej trzeciej kadru. */
.hero-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }

@media (min-width: 901px) {
  /* tekst nieco szerszy niz zdjecie - naglowek ma 57 znakow i potrzebuje miejsca */
  .hero-siatka { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}
@media (max-width: 900px) {
  /* Na telefonie zdjecie NAD tekstem - zespol jest pierwszym, co widac.
     max-height pilnuje tabletu: przy 768 px pionowy kadr na pelnej szerokosci
     mial 864 px i sam zjadal caly pierwszy ekran. */
  /* ⚡ 18.08.2026: na telefonie NAJPIERW naglowek, potem zdjecie. Do 11.08 zdjecie
     szlo nad tekstem, ale strona glowna mowi teraz do klienta, a nie do partnera,
     i pierwszy ekran musi niesc zdanie, a nie sama fotografie. Na desktopie zdjecie
     zostaje z boku, czyli dokladnie tak, jak prosila klientka. */
  .hero-foto { order: 0; }
  .hero-foto img { aspect-ratio: 5 / 6; max-height: 520px; }
  .hero--split { padding-top: clamp(24px, 5vw, 38px); }
}


/* =====================================================================
   ZLOTO W DUZYCH NAPISACH NA JASNYM (19.08.2026 noc)
   Naglowki sekcji, wyroznione slowa i wielkie liczby moga niesc jasniejsze zloto,
   bo przy tej wielkosci pisma prog to 4,5:1, a nie 7:1. Male napisy zostaja
   na --zloto-ink, inaczej wrocilaby skarga „nie widac".
   ===================================================================== */
/* ⚠️ Klasa .zloty NIE moze tu byc sama z siebie: obsluguje takze telefony i maile
   w zwyklym akapicie (15-17 px), a te przy 5,7:1 zeszly pod prog domowy. Bierzemy ja
   wylacznie WEWNATRZ naglowkow, gdzie pismo jest duze. */
.sekcja--jasna h1 em,
.sekcja--jasna h2 em,
.sekcja--jasna h1 .zloty,
.sekcja--jasna h2 .zloty,
.sekcja--jasna .zdanie em { color: var(--zloto-duze); }

/* wielkie liczby: numer uslugi (1,6rem/800) i numer kwadratu */
.sekcja--jasna .usluga-nr { color: var(--zloto-duze); }
.sekcja--jasna .kwadrat-nr { color: var(--zloto-duze); }

/* ikony w kolkach to nie tekst - moga wziac zloto marki, bo maja wlasne tlo i ramke */
.sekcja--jasna .usluga-ikona,
.sekcja--jasna .korzysc-ikona,
.sekcja--jasna .dane-ikona {
  background: rgba(255, 195, 48, .16);
  border-color: rgba(138, 94, 0, .42);
  color: var(--zloto-duze);
}


/* =====================================================================
   MALY PRZYCISK W KARCIE (19.08.2026 noc)
   Link „wiecej" w karcie uslugi jest teraz komponentem `.btn.btn--amber.btn--maly`,
   a nie linkiem w zlotym kolorze. Zysk podwojny: zloto marki jest mocniej widoczne
   (tlo zamiast litery), a kontrast napisu rosnie z 8,0:1 do 11,44:1.
   Mniejszy od glownego CTA, zeby cztery karty nie zrobily sciany zlota.
   ===================================================================== */
.btn--maly {
  min-height: 44px;              /* nasze minimum na cel dotykowy */
  padding: 11px 22px;
  font-size: .92rem;
  gap: 9px;
  box-shadow: 0 8px 22px rgba(255, 195, 48, .16);
}
.btn--maly:hover { box-shadow: 0 12px 28px rgba(255, 195, 48, .26); }
.usluga-wiecej { margin-top: 18px; }


/* =====================================================================
   PRZYCISKI W KARTACH ROWNO (20.08.2026)
   Karty w siatce maja rowna wysokosc, ale tresci roznej dlugosci, wiec przycisk
   ladowal raz wyzej, raz nizej i rzad wygladal na krzywy. Karta staje sie kolumna,
   a blok przycisku dostaje `margin-top: auto` - spada na dol i wszystkie
   przyciski w rzedzie staja w jednej linii, niezaleznie od dlugosci opisu.
   ===================================================================== */
.usluga { display: flex; flex-direction: column; }
.usluga .usluga-wiecej { margin-top: auto; padding-top: 18px; }
/* 20.08: ten sam mechanizm dla zwyklych kart. Odnosniki „Zobacz: Faktoring/Leasing"
   w kartach „Kiedy odradzimy..." byly tekstem w zlocie i stały raz wyzej, raz nizej -
   zaleznie od tego, ile punktow miala karta. Teraz sa przyciskami na dnie karty.
   ⚠️ `:has()` zawezą regule do kart, ktore FAKTYCZNIE maja taki przycisk - inaczej
      kazda karta w serwisie stalaby sie kolumna flex bez powodu. */
.karta:has(> .usluga-wiecej) { display: flex; flex-direction: column; }
.karta > .usluga-wiecej { margin-top: auto; padding-top: 20px; text-align: center; }
/* ⚠️ `.sekcja--srodek :is(.karta, ...) *` zwraca cala tresc karty do lewej (0,2,0),
   wiec wysrodkowanie musi byc o stopien mocniejsze. */
.sekcja--srodek .karta > .usluga-wiecej { text-align: center; }


/* =====================================================================
   ETYKIETA: ZLOTA PLYTKA 3D (20.08.2026)
   Jeden komponent zamiast czterech wariantow zaleznych od tla. Napis jest ciemny,
   wiec czytelnosc nie zalezy juz od tego, na czym pigulka lezy: 11,4:1 na jasnym
   koncu gradientu i 9,6:1 na ciemnym.
   ===================================================================== */
.etykieta,
.hero .etykieta,
.hero--split .etykieta,
.podstrona-hero .etykieta,
.sekcja--jasna .etykieta,
.sekcja--petrol .etykieta,
.sekcja--ciemna .etykieta {
  color: var(--noc);
  background: linear-gradient(180deg, #FFD569 0%, #FFC330 46%, #E5A81C 100%);
  border: 1px solid rgba(150, 100, 0, .38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),      /* krawedz odbijajaca swiatlo */
    inset 0 -1px 0 rgba(120, 78, 0, .3),        /* cien wlasny plytki */
    0 4px 12px rgba(255, 195, 48, .22);         /* cien rzucony, w kolorze zlota */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}


/* =====================================================================
   WIECEJ GRANATU W JASNYCH SEKCJACH (20.08.2026)
   Jasna baza nie znaczy „wszystko biale". Miejsca, ktore byly pusta biela,
   dostaja granat z rodziny pasow - jako WYSPA, nie jako tlo sekcji.
   ===================================================================== */

/* 1. Karta ze zdjeciem: biala plyta pod fotografia sprawiala, ze zdjecie i tekst
      wygladaly na dwa osobne elementy. Granat scala je w jeden blok. */
.sekcja--jasna .karta-foto {
  background: linear-gradient(168deg, #1B4152 0%, #143544 100%);
  border-color: rgba(255, 195, 48, .3);
  box-shadow: 0 18px 40px rgba(16, 26, 33, .16);
}
.sekcja--jasna .karta-foto h3 { color: #FFFFFF; }
.sekcja--jasna .karta-foto p,
.sekcja--jasna .karta-foto .mute { color: var(--mgla); }
.sekcja--jasna .karta-foto strong { color: #FFFFFF; }
.sekcja--jasna .karta-foto a:not(.btn) { color: var(--zloto); }

/* 2. Kafle w hero: 4,5% bieli to bylo prawie nic. Granat o stopien jasniejszy od tla
      hero daje realne pole, a zlota kreska z lewej zostaje jako akcent. */
.hero-kafel {
  background: linear-gradient(180deg, rgba(36, 85, 101, .55) 0%, rgba(27, 65, 82, .68) 100%);
  /* ⚠️ TYLKO trzy krawedzie. `border-color` skrotem zabralby zlota kreske z lewej,
     ktora jest tu jedynym akcentem - sprawdzone na zrzucie, kafle zrobily sie szare. */
  border-top-color: rgba(255, 255, 255, .1);
  border-right-color: rgba(255, 255, 255, .1);
  border-bottom-color: rgba(255, 255, 255, .1);
}
.hero-kafel:hover {
  background: linear-gradient(180deg, rgba(46, 100, 118, .7) 0%, rgba(33, 78, 98, .8) 100%);
  border-left-color: var(--zloto-jasne);
}


/* =====================================================================
   WYROZNIK NA JASNEJ SEKCJI (20.08.2026)
   Blok zostawal granatowy posrod bialych kart, a `.sekcja--jasna .punkty li`
   dawal mu CIEMNY tekst - zdania byly nieczytelne. Tlo i kolor tekstu musza
   zmieniac sie razem, wiec wyroznik staje sie biala karta. Zlota kreska
   z lewej zostaje: to ona odroznia go od zwyklej karty.
   ===================================================================== */
.sekcja--jasna .wyroznik {
  background: #FFFFFF;
  border-top-color: rgba(16, 26, 33, .12);
  border-right-color: rgba(16, 26, 33, .12);
  border-bottom-color: rgba(16, 26, 33, .12);
  border-left-color: var(--zloto);
}
.sekcja--jasna .wyroznik .zdanie { color: var(--atrament); }
.sekcja--jasna .wyroznik .zdanie em { color: var(--atrament); }
.sekcja--jasna .wyroznik .sedno { color: var(--atrament); }
.sekcja--jasna .wyroznik .punkty strong,
.sekcja--jasna .wyroznik .punkty b { color: var(--atrament); }

/* =====================================================================
   HOVER NA POWTARZALNYCH BLOKACH (20.08.2026)
   Regula domowa: kazdy powtarzalny kafel reaguje na kursor. Na jasnych sekcjach
   sama zmiana obwodki nie wystarcza - potrzebny jest cien, bo to on niesie
   wrazenie uniesienia. Na ciemnych zostaje dotychczasowa, delikatniejsza reakcja.
   ===================================================================== */

/* 1. WZMOCNIENIE na jasnym: cien + wyrazniejsza zlota krawedz */
.sekcja--jasna .karta:hover,
.sekcja--jasna .usluga:hover,
.sekcja--jasna .osoba:hover,
.sekcja--jasna .wpis:hover,
.sekcja--jasna .kafel:hover,
.sekcja--jasna .kwadrat:hover {
  border-color: rgba(255, 195, 48, .85);
  box-shadow: 0 2px 4px rgba(16, 26, 33, .06), 0 22px 44px rgba(16, 26, 33, .14);
}

/* 2. BLOKI, KTORE NIE MIALY HOVERA WCALE */
.numer, .zespol-karta, .wyroznik, .wskrocie, .podzial div, .chip {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.numer:hover, .zespol-karta:hover, .wyroznik:hover, .podzial div:hover {
  transform: translateY(-4px);
  border-color: var(--zloto);
}
/* ⚠️ Wyroznik ma zlota kreske z lewej - obwodke podnosimy z trzech stron osobno,
   inaczej skrot `border-color` zjadlby ja przy najechaniu. */
.wyroznik:hover {
  border-top-color: var(--zloto);
  border-right-color: var(--zloto);
  border-bottom-color: var(--zloto);
}
.sekcja--jasna .numer:hover,
.sekcja--jasna .zespol-karta:hover,
.sekcja--jasna .wyroznik:hover,
.sekcja--jasna .podzial div:hover {
  box-shadow: 0 2px 4px rgba(16, 26, 33, .06), 0 22px 44px rgba(16, 26, 33, .14);
}
.wskrocie:hover { border-color: var(--zloto); }
.chip:hover { border-color: var(--zloto); transform: translateY(-2px); }

/* 3. FAQ: naglowek jest KLIKALNY, wiec brak reakcji byl bledem, a nie brakiem ozdoby */
.faq summary { transition: color .18s ease, background .18s ease; }
.faq summary:hover { color: var(--zloto-tekst); }
.sekcja--jasna .faq summary:hover { background: rgba(255, 195, 48, .1); }


/* =====================================================================
   WYRAZISTOSC NA JASNYCH SEKCJACH (20.08.2026)

   Zmierzone przed zmiana: 23 odmiany drobnego tekstu w zlocie na papierze,
   wszystkie 1,31-1,60:1 - czyli praktycznie niewidoczne. Numer telefonu,
   e-mail, okruszki, przycisk „Wyczysc zaznaczenia" i ustawowe oznaczenie
   tresci reklamowej wlacznie.

   ZASADA: na jasnym tle zloto nie jest drobnym tekstem. Jest PODKRESLENIEM
   linku, KRESKA albo PLAKIETKA z ciemnym napisem. Zlotym tekstem zostaja
   wylacznie naglowki (>=20 px) - tam zostalo wybrane swiadomie.
   ===================================================================== */

/* --- 1. PASEK „W SKROCIE": biala karta zamiast bezowej plamy ---------------
   To jest blok, ktory Maciek zaznaczyl. Podbarwienie kosztowalo 1,84 punktu
   kontrastu (8,07:1 zamiast 9,91:1), a wizualnie stawialo go pol stopnia
   nizej niz biale karty obok. Teraz stoi rowno z nimi. */
.sekcja--jasna .wskrocie {
  background: #FFFFFF;
  border-color: rgba(16, 26, 33, .12);
  box-shadow: 0 1px 3px rgba(16, 26, 33, .05);
  padding: 22px 26px;
}
.sekcja--jasna .wskrocie li { color: var(--atrament-mgla); font-size: 1rem; }
/* Kropka byla zlotem przy 16% krycia - na bieli prawie nie istniala. Pelne zloto
   z ciemniejsza obwodka czyta sie jako znacznik, a nie jako zabrudzenie. */
.sekcja--jasna .wskrocie li::before {
  background: var(--zloto);
  border-color: rgba(150, 100, 0, .45);
}

/* --- 2. LINKI: granat + ZLOTE PODKRESLENIE --------------------------------
   Zloty tekst linku mial 1,42-1,60:1. Granat ma 15:1, a zlota kreska pod nim
   nadal mowi „to jest link" - identyfikacja koloru zostaje, czytelnosc wraca.
   ⚠️ Dotyczy takze `.link-reset`, ktory jest <button> udajacym odnosnik. */
.sekcja--jasna a.zloty,
.sekcja--jasna .okruszki a,
.sekcja--jasna .blok-prawny a:not(.btn),
.sekcja--jasna .dokument a:not(.btn),
.sekcja--jasna .link-reset,
.sekcja--jasna .wpis-stopka,
.blok-prawny a:not(.btn),
.dokument--granice a:not(.btn) {
  color: var(--atrament);
  text-decoration: underline;
  text-decoration-color: var(--zloto);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.sekcja--jasna a.zloty:hover,
.sekcja--jasna .okruszki a:hover,
.sekcja--jasna .blok-prawny a:not(.btn):hover,
.sekcja--jasna .dokument a:not(.btn):hover,
.sekcja--jasna .link-reset:hover,
.sekcja--jasna .wpis-stopka:hover,
.blok-prawny a:not(.btn):hover,
.dokument--granice a:not(.btn):hover {
  text-decoration-color: var(--legal-line);
}

/* --- 3. DROBNE ETYKIETY WERSALIKAMI: granat przygaszony --------------------
   11-13 px wersalikami w zlocie to bylo 1,55-1,60:1. Etykieta ma byc cichsza
   od tresci, ktora opisuje - ale ma byc WIDOCZNA. `--atrament-mgla` daje 9,5:1
   i te sama hierarchie, ktora ma juz `.podstawa` stojaca obok. */
.sekcja--jasna .dane-lab,
.sekcja--jasna .numer .dzial,
.sekcja--jasna .osoba .rola,
.sekcja--jasna .fakty dt,
.sekcja--jasna .porownanie th,
.blok-prawny dt {
  color: var(--atrament-mgla);
}

/* --- 4. PLAKIETKI I NUMERY: zloto jako PODKLAD, napis ciemny ---------------
   Ta sama zasada, co przy etykietach 3D: plakietka z ciemnym napisem czyta sie
   niezaleznie od tla pod soba, a zloto zostaje widoczne jako plama koloru. */
.sekcja--jasna .wpis-kat {
  color: var(--noc);
  background: var(--zloto);
  border-color: rgba(150, 100, 0, .38);
}
.sekcja--jasna .kwadrat-nr {
  color: var(--noc);
  background: var(--zloto);
  border-color: rgba(150, 100, 0, .38);
}
.sekcja--jasna .postep-liczba { color: var(--atrament); }

/* --- 5. OZNACZENIE TRESCI REKLAMOWEJ ---------------------------------------
   ⚠️⚠️ To nie jest ozdoba. Art. 7 ust. 4 ustawy o dystrybucji ubezpieczen wymaga,
   zeby tresc reklamowa byla „wyraznie oznaczona" - a napis stal na 1,40:1, czyli
   byl niewidoczny. Zostaje zloty podklad i brazowa kreska (rozpoznawalnosc bloku),
   napis idzie na granat: 15,8:1. */
.oznaczenie-reklamy { color: var(--atrament); }

/* ⚠️ Naglowek WIERSZA w tabeli porownania zostal zloty (1,60:1) mimo poprawki wyzej -
   `.sekcja--jasna .porownanie tbody th` ma specyficznosc (0,2,2) i bil selektor (0,2,1).
   Naglowek wiersza ma byc MOCNIEJSZY od komorki, wiec pelny granat, nie przygaszony. */
.sekcja--jasna .porownanie tbody th { color: var(--atrament); }

/* ⚠️ REGRESJA ZLAPANA PRZEZ BRAMKE HOVER: `.wskrocie:hover` (0,2,0) stalo w pliku
   PRZED `.sekcja--jasna .wskrocie` (tez 0,2,0), wiec przy rownej specyficznosci
   wygrywala kolejnosc i regula bez `:hover` kasowala reakcje. Stan najechania
   musi byc definiowany PO stanie spoczynku, nie tylko z wieksza specyficznoscia. */
.sekcja--jasna .wskrocie:hover {
  border-color: var(--zloto);
  box-shadow: 0 2px 4px rgba(16, 26, 33, .06), 0 18px 36px rgba(16, 26, 33, .12);
}

/* =====================================================================
   SZEROKA KARTA W SEKCJI WYSRODKOWANEJ: GLOWA I PRZYCISK NA SRODKU (20.08.2026)

   Regula wyzej („tresc kafli wraca do lewej") jest sluszna dla kafli w SIATCE:
   wysrodkowany akapit w malym kaflu czyta sie zle, bo oko nie ma stalej krawedzi
   powrotu. Ale `.karta--szeroka` to nie jeden z wielu kafli - to POJEDYNCZY blok
   na cala szerokosc kolumny, ktory niesie wlasna etykiete i wlasny naglowek.
   W takim ukladzie karta JEST oprawa sekcji, wiec jej glowa i domykajacy przycisk
   maja stac na srodku, tak jak glowa kazdej innej sekcji.

   Listy i akapity zostaja DO LEWEJ - to sie nie zmienia i nie ma sie zmienic.

   ⚠️ `.etykieta` jest `inline-flex`, wiec `text-align: center` na niej samej nic nie
      robi - liczy sie wyrownanie RODZICA. Dlatego srodkujemy karte, a regula `*`
      wyzej i tak zwraca cala tresc do lewej.
   ===================================================================== */
.sekcja--srodek .karta--szeroka { text-align: center; }
.sekcja--srodek .karta--szeroka > h2,
.sekcja--srodek .karta--szeroka > h3,
.sekcja--srodek .karta--szeroka > .sedno { text-align: center; }
/* ⚠️ Sam `text-align` nie wystarczy: regula wyzej zeruje akapitom marginesy boczne,
   wiec akapit z przyciskiem stal przy LEWEJ krawedzi karty i przycisk wypadal 14 px
   w lewo od srodka. Blok trzeba wysrodkowac marginesami, tak samo jak w komentarzu wyzej. */
/* ⚠️ Wiazemy sie z OBECNOSCIA PRZYCISKU, nie z pozycja `:last-child`. Na /kontakt/
   ostatni akapit szerokiej karty to proza („Wspolpracujemy z biurami rachunkowymi...")
   i selektor pozycyjny wysrodkowal ja razem z przyciskami - zlapane pomiarem, nie na oko. */
.sekcja--srodek .karta--szeroka > p:has(.btn) { text-align: center; margin-left: auto; margin-right: auto; }

/* =====================================================================
   PAS CTA (20.08.2026) - nastepca golego `.pas-foto`.

   `.pas-foto` byl czysto dekoracyjnym wycinkiem zdjecia z `aria-hidden`: zero tresci,
   zero funkcji. Miedzy dwiema sekcjami czytal sie jak dziura w stronie, a nie jak oddech.
   Regula domowa: zdjecie nigdy nie stoi samo - albo niesie wezwanie, albo go nie ma.

   ⚠️ Welon jest MOCNY (.84/.80/.92) celowo. Zdjecie sciany jest jasne w gornej czesci,
      a biale 24 px na jasnym zdjeciu to dokladnie ten uklad, ktory potrafi zbic kontrast
      ponizej progu. Wartosc bierzemy z rodziny sprawdzonej w hero, nie z oka.
   ===================================================================== */
.pas-cta {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(200px, 22vw, 280px);
  padding: 44px 0;
  overflow: hidden;
}
.pas-cta-tlo { position: absolute; inset: 0; }
.pas-cta-tlo img { width: 100%; height: 100%; object-fit: cover; }
.pas-cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 22, 31, .84) 0%, rgba(8, 22, 31, .80) 45%, rgba(8, 22, 31, .92) 100%);
}
.pas-cta-tresc {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 30px; text-align: center;
}
.pas-cta-tyt {
  margin: 0; max-width: 36ch;
  font-family: var(--display); font-weight: 800;
  font-size: 24px; line-height: 1.25; color: #FFFFFF;
}
@media (max-width: 600px) {
  .pas-cta-tyt { font-size: 20px; }
}

/* (`.pas-foto` zostaje w arkuszu jako komponent, ale nie jest juz nigdzie uzywany -
   kazde wystapienie zostalo zamienione na `.pas-cta` albo usuniete.) */

/* =====================================================================
   CHECKLISTA: REAKCJA NA KURSOR I PRZYCISK RESETU (20.08.2026)
   ===================================================================== */

/* 1. Pozycja checklisty JEST klikalna, wiec musi to pokazywac. Wczesniej zmienial sie
      tylko ksztalt kursora - przy siedmiu dlugich pozycjach nie bylo widac, ktora
      wlasnie zaznaczysz. Podswietlenie calego wiersza jest tanie i jednoznaczne. */
.checklista li { transition: background .16s ease; }
.checklista li:hover { background: rgba(255, 195, 48, .1); }
.sekcja--jasna .checklista li:hover { background: rgba(255, 195, 48, .16); }

/* 2. Punkty pod checklista to PROZA, nie pozycje do klikania. Dostaja wlasna, wyraznie
      slabsza reakcje: kropka rosnie, tekst ciemnieje - zadnego tla, zadnego wskaznika.
      ⚠️ Gdyby reagowaly tak samo jak checklista, hover przestalby cokolwiek znaczyc. */
.punkty li { transition: color .16s ease; }
.punkty li::before { transition: transform .16s ease, background .16s ease; }
.punkty li:hover::before { transform: scale(1.35); }
.punkty li:hover { color: var(--krem); }
.sekcja--jasna .punkty li:hover { color: var(--atrament); }

/* 3. Przycisk „Wyczysc zaznaczenia" pod paskiem postepu.
      ⚠️ `.dokument` ma `text-align: left` (0,1,0), wiec wysrodkowanie musi byc mocniejsze. */
.reset-listy,
.dokument .reset-listy { text-align: center; margin-top: 18px; }

/* Komunikat o nieudanej wysylce. Musi sie ODROZNIAC od potwierdzenia - inaczej
   czlowiek przeczyta go jako sukces i odejdzie przekonany, ze zgloszenie poszlo. */
.komunikat--blad {
  border-color: #B3261E;
  background: rgba(179, 38, 30, .08);
}
.sekcja--jasna .komunikat--blad { color: var(--atrament); }
.komunikat--blad a { font-weight: 700; }

/* =====================================================================
   PRZYCISKI W KARTACH KANALOW ROWNO (20.08.2026)
   Karta kanalu to `display:flex` - ikona z lewej, kolumna tresci z prawej.
   Zeby przycisk spadl na dno karty, `margin-top:auto` musi trafic na akapit
   WEWNATRZ kolumny, a sama kolumna musi byc flexem: inaczej nie ma czego
   rozpychac i przycisk zostaje tam, gdzie skonczyl sie tekst.
   Trzy karty w siatce maja rowna wysokosc, wiec przyciski staja w jednej linii.
   ===================================================================== */
.kanal > div { display: flex; flex-direction: column; flex: 1 1 auto; }
.kanal > div > .usluga-wiecej { margin-top: auto; padding-top: 16px; }

/* =====================================================================
   PASEK ZGODY NA COOKIES (20.08.2026)
   Stoi na dole ekranu, nad trescia. Nie zaslania calej strony - czlowiek moze
   czytac dalej i zdecydowac pozniej. ⚠️ Oba przyciski maja te sama wage wizualna
   pod wzgledem dostepnosci (44 px celu dotyku); odrzucenie NIE jest schowane
   ani trudniejsze od akceptacji.
   ===================================================================== */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--noc-2);
  border-top: 1px solid rgba(255, 195, 48, .35);
  box-shadow: 0 -12px 32px rgba(8, 22, 31, .35);
  padding: 18px clamp(16px, 4vw, 40px);
}
.cookies[hidden] { display: none; }
.cookies-tresc {
  max-width: 1220px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.cookies-tekst {
  flex: 1 1 420px; margin: 0;
  font-size: .9rem; line-height: 1.55; color: var(--mgla);
}
.cookies-tekst a { color: var(--zloto); font-weight: 700; }
.cookies-akcje { display: flex; flex-wrap: wrap; gap: 12px; }

/* Pozycja „Ustawienia cookies" w stopce jest <button>, bo nigdzie nie prowadzi -
   otwiera pasek ponownie. Musi jednak wygladac jak reszta odnosnikow stopki. */
.link-stopka {
  background: none; border: 0; padding: 0; font: inherit;
  color: inherit; cursor: pointer; text-align: left;
}
.link-stopka:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .cookies-akcje { width: 100%; }
  .cookies-akcje .btn { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   PODSTRONA ARTYKUŁU (20.08.2026)
   Tekst czyta się w jednej kolumnie o stałej szerokości - nie na całą stronę.
   Miara ok. 68 znaków to nie widzimisię: dłuższy wiersz gubi oko przy powrocie
   do początku następnego, a to jedyna rzecz, która realnie męczy przy czytaniu.
   ===================================================================== */
.art-hero .lead { max-width: 62ch; }
.art-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px;
  font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mgla); font-weight: 700;
}
.art-stan { color: var(--zloto); }

/* Grafika nagłówkowa. Rysowana w SVG, nie fotografia - schemat pokazuje mechanizm
   tematu, a zdjęcie osoby przy biurku nie pokazuje niczego. */
.art-figura {
  margin: 0 auto var(--odstep-m); max-width: 900px;
  border-radius: var(--r); overflow: hidden;
  box-shadow: 0 18px 44px rgba(16, 26, 33, .16);
}
.art-grafika { display: block; width: 100%; height: auto; }

.art-tresc { max-width: 68ch; margin: 0 auto; text-align: left; }
.art-tresc > .art-sekcja + .art-sekcja { margin-top: var(--odstep-m); }
.art-sekcja h2 {
  font-size: var(--t-4); margin-bottom: .5em;
  text-transform: none; letter-spacing: -.01em;
}
.art-tresc p { max-width: none; }
.art-tresc p + p { margin-top: 14px; }

/* Spis treści. Pojawia się tylko przy tekstach od czterech sekcji w górę -
   przy trzech byłby ozdobą, a nie pomocą. */
.art-spis {
  max-width: 68ch; margin: 0 auto var(--odstep-m);
  padding: 22px 26px; border-radius: var(--r);
  background: #FFFFFF; border: 1px solid rgba(16, 26, 33, .12);
}
.art-spis-tyt {
  margin: 0 0 10px; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 800; color: var(--atrament-mgla);
}
.art-spis ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.art-spis a {
  color: var(--atrament); text-decoration: underline;
  text-decoration-color: var(--zloto); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.art-spis a:hover { text-decoration-color: var(--legal-line); }

/* Lista kroków. Numer jest złoty i wisi w marginesie, żeby nie zjadał wcięcia tekstu. */
.art-kroki { margin: 0; padding: 0; list-style: none; counter-reset: krok; display: grid; gap: 12px; }
.art-kroki li { position: relative; padding-left: 42px; counter-increment: krok; }
.art-kroki li::before {
  content: counter(krok); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 8px; background: var(--zloto); color: var(--noc);
  font-family: var(--display); font-weight: 800; font-size: .86rem;
}

/* Podsumowanie. Złota kreska z lewej odróżnia je od zwykłej listy w tekście. */
.art-zapamietaj {
  margin-top: var(--odstep-m); padding: 24px 28px;
  background: #FFFFFF; border: 1px solid rgba(16, 26, 33, .12);
  border-left: 4px solid var(--zloto); border-radius: 0 var(--r) var(--r) 0;
}
.art-zapamietaj-tyt {
  margin: 0 0 12px; font-family: var(--display); font-weight: 800;
  font-size: 1.05rem; color: var(--atrament);
}

/* Podstawa prawna i nota. Cichsze od treści, ale nie schowane - to jest
   informacja o granicach tekstu, a nie drobny druk do przeoczenia. */
.art-podstawa {
  margin-top: var(--odstep-m); padding: 20px 24px;
  background: var(--legal-bg); border: 1px solid rgba(177, 134, 40, .35);
  border-left: 4px solid var(--legal-line); border-radius: 0 var(--r) var(--r) 0;
}
.art-podstawa-tyt {
  margin: 0 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--atrament-mgla);
}
.art-podstawa p:last-child { margin: 0; }
.art-nota {
  margin-top: var(--odstep-m); padding-top: 18px;
  border-top: 1px solid rgba(16, 26, 33, .12);
  font-size: .88rem; color: var(--atrament-mgla);
}

@media (max-width: 600px) {
  .art-spis, .art-zapamietaj, .art-podstawa { padding-left: 20px; padding-right: 20px; }
}

/* =====================================================================
   KARTA WPISU ZE ZDJECIEM (20.08.2026, wzor: blog despe-debki)
   Karta byla samym tekstem w ramce. Teraz zaczyna sie grafika na cala szerokosc,
   wiec padding schodzi z KARTY do bloku tresci - inaczej obrazek lezalby w srodku
   ramki z marginesem dookola, zamiast dotykac krawedzi.
   ===================================================================== */
.wpis:has(> .wpis-foto) { padding: 0; overflow: hidden; }

.wpis-foto {
  /* ⚠️ Kadr ma DOKLADNIE proporcje grafiki (1200x520). Przy 16/10 i `slice` przycinalo
     opisy przy krawedziach - na karcie o starej umowie ginelo `skutek od tej daty`.
     Rowna proporcja = zero przyciecia i zero pasow tla. */
  aspect-ratio: 1200 / 520;
  background: var(--noc-2);
  border-bottom: 1px solid var(--kresa-zimna);
}
.sekcja--jasna .wpis-foto { border-bottom-color: rgba(16, 26, 33, .12); }
/* ⚠️ `slice` na SVG (ustawiane w generatorze) sprawia, ze grafika WYPELNIA kadr.
   Bez tego karty mialyby obrazki roznej wysokosci z pasami tla. */
.wpis-svg { display: block; width: 100%; height: 100%; }

.wpis-tresc {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: clamp(22px, 2.4vw, 28px);
}
/* Przycisk na dno karty: karty w siatce maja rowna wysokosc, ale zajawki roznej
   dlugosci - bez tego przyciski stalyby raz wyzej, raz nizej. */
.wpis-tresc > .usluga-wiecej { margin-top: auto; padding-top: 20px; }
.wpis-tresc h3 { margin-bottom: .4em; }

/* Zdjecie lekko najezdza przy kursorze - ten sam idiom co `.karta-foto` w serwisie. */
.wpis-foto .wpis-svg { transition: transform .3s ease; }
.wpis:hover .wpis-foto .wpis-svg { transform: scale(1.04); }

/* ⚠️ Karta musi WYPELNIC komorke siatki, inaczej ma wysokosc wlasnej tresci i przyciski
   w rzedzie rozjezdzaja sie (zmierzone: 78 px). Wczesniej trzymal to inline `height:100%`
   na .wpis; po przebudowie siatki z danych robi to arkusz.
   Owijka `[data-kategoria]` jest elementem siatki - to ona dostaje pelna wysokosc,
   wiec musi byc flexem, zeby przekazac ja karcie. */
.wpisy > [data-kategoria] { display: flex; }
.wpisy > [data-kategoria] > .wpis { width: 100%; }

/* =====================================================================
   CELE DOTYKOWE PRZY DANYCH KONTAKTOWYCH (21.08.2026)
   Zmierzone na ZYWEJ stronie w emulacji iPhone: numery telefonu i adresy e-mail
   w kartach kontaktowych mialy 20-24 px wysokosci. To najczestsze dotkniecie na
   telefonie i jedyne, ktore konczy sie rozmowa - a nie miescilo sie nawet w progu
   24 px, nie mowiac o domowych 44.

   ⚠️ Nie ruszamy odnosnikow W PROZIE (wewnatrz p oraz li) - tam mniejszy cel jest
      dopuszczalny i tak juz obsluguje go regula "main p > a:only-child". Powiekszamy
      WYLACZNIE samodzielne kontrolki, gdzie odnosnik jest cala trescia wiersza.
   ⚠️ W bloku prawnym numery stoja w kilku wierszach blisko siebie, wiec dajemy im
      mniejszy zapas (32 px). Rozciagniecie ich do 44 px nachodziloby na sasiedni
      wiersz i palec trafialby w zly numer - gorzej niz maly cel.
   ===================================================================== */
.dane-val a {
  display: inline-block;
  padding: 12px 0;          /* ~20 px wiersza + 2x12 = 44 px */
  margin: -12px 0;          /* zdejmujemy dodana wysokosc z ukladu karty */
}
.blok-prawny dd a:not(.btn) {
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
}
/* Logo w naglowku prowadzi na strone glowna, a mialo 37 px. */
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; }