/* ============================================================
   KALKULATOR SZKOD - system designu
   Zrodlo prawdy: Ksiega marki 1.0 (lipiec 2026).

   Kanon:
   - Granat prowadzi, pomarancz dziala. 60% granat / 25% krem+biel / 15% pomarancz.
   - Gradient 120 stopni TYLKO na CTA. Tla plaskie: granat albo krem.
   - Zieleń wylacznie funkcyjna: kafel "=", potwierdzenia, "za darmo".
   - ZERO CZERWIENI w calym serwisie. Bledy: ciemny pomarancz + pelne zdanie.
   - Jeden akcent na fraze - nigdy caly naglowek.
   - Liczby sa bohaterem: waga 900, swiatlo -.03em.
   - Montserrat (krój wspolny z Xaltum).
   ============================================================ */

/* ---------- Tokeny ---------- */
:root{
  /* Pomarancz - dziala. Para z Ksiegi, zadnych innych odcieni. */
  --orange:       #D97E27;   /* ciemny koniec - tekst/akcent na kremie */
  --orange-2:     #F09C33;   /* jasny koniec - akcent na granacie */
  --orange-700:   #B85E1A;   /* bledy i walidacja (zamiast czerwieni) */
  --orange-soft:  rgba(217,126,39,.10);
  --grad-cta:     linear-gradient(120deg, #D97E27 0%, #F09C33 100%);

  /* Granat - prowadzi */
  --bg:           #0F2142;   /* granat nocny - tlo serwisu */
  --bg-2:         #0A1730;   /* glebszy granat - pasy, stopka */
  --bg-3:         #14224A;   /* granat atramentowy */
  --card:         #14224A;   /* karta ciemna = wynik */
  --card-line:    rgba(255,255,255,.10);

  /* Krem - karty formularzy i dokumenty */
  --cream:        #FAF7F0;
  --cream-2:      #F1EBDD;
  --cream-line:   #E3DCC8;

  /* Tekst na granacie */
  --text:         rgba(255,255,255,.72);
  --text-strong:  #FFFFFF;
  --text-muted:   rgba(255,255,255,.50);

  /* Tekst na kremie */
  --ink:          #14224A;   /* granat atramentowy */
  --ink-soft:     #5A6580;
  --ink-mute:     #8A94AC;

  /* Zieleń - tylko funkcyjna */
  --green:        #35C26E;
  --green-700:    #1E8A4C;

  /* Stany (bez czerwieni) */
  --ok:           var(--green);
  --danger:       var(--orange-700);

  /* Typografia - Montserrat */
  --font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --h1: clamp(2.1rem, 4.6vw, 3.4rem);
  --h2: clamp(1.7rem, 3.2vw, 2.6rem);
  --h3: clamp(1.2rem, 2vw, 1.55rem);
  --lead: clamp(1.02rem, 1.4vw, 1.2rem);

  /* Karty: radius 14-22 px (Ksiega) */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-card: 0 24px 60px rgba(6,12,30,.35);
  /* 1400 px zamiast 1200. Powod praktyczny, nie estetyczny: menu urowslo do
     dziewieciu pozycji (doszly Case Study i FAQ), przez co logo + nawigacja +
     telefon + CTA przestaly sie miescic i przycisk wychodzil poza ekran.
     Szerszy kontener daje im miejsce, a na wiekszosci dzisiejszych ekranow
     1200 px zostawialo i tak duzo pustki po bokach. */
  --container: 1400px;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(3rem, 7vw, 5.5rem);

  /* ---- Warstwa mobilna (urzadzenie referencyjne: iPhone 17 Pro, 402x874) ----
     --safe-b nigdy jako samo env(): Safari zwraca 0, gdy dolny pasek jest
     schowany, i wtedy CTA laduje pod krawedzia. Stad max().
     Dziala tylko z viewport-fit=cover w meta viewport (header.php).
     --bar-total to wysokosc, ktora sticky-cta zabiera dokumentowi; ta sama
     wartosc idzie w padding-bottom body i w scroll-padding html, wiec pasek
     nie zaslania ani stopki, ani pola z fokusem (WCAG 2.4.11). */
  --safe-b: max(10px, env(safe-area-inset-bottom, 0px));
  /* 54 px = padding gorny (.45rem) + przycisk (46 px). Zmierzone, nie przyjete:
     przy zmianie wysokosci przyciskow paska trzeba poprawic tez ten token,
     inaczej kompensacja w body przestaje sie zgadzac z realnym paskiem. */
  --bar-h: 54px;
  --bar-total: calc(var(--bar-h) + var(--safe-b));

  /* Krzywa o charakterze iOS: szybki start, dlugie wyhamowanie. Ona odpowiada
     za wrazenie "aplikacyjnosci" ruchu - panele, pasek, przejscia. */
  --ease-ios: cubic-bezier(.32,.72,0,1);
  /* Cel dotykowy: 44 px to Apple HIG i podloga dla obszaru konwersji.
     24 px z WCAG 2.5.8 jest minimum prawnym, nie celem projektowym. */
  --tap: 44px;
}

/* ---------- Reset / baza ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* scrollbar-gutter:stable - rezerwuje miejsce na pasek przewijania ZAWSZE,
   zeby pojawienie sie paska (gdy karta kalkulatora rosnie) nie zwezalo viewportu
   i nie przesuwalo/nie zmienialo szerokosci wysrodkowanych elementow. */
/* background na <html>, nie tylko na <body>: przy przeladowaniu i przy
   odbiciu scrolla (overscroll) widac tlo dokumentu, a domyslne jest biale. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-gutter:stable; overflow-y:scroll;
  background:var(--bg); scroll-padding-top:80px; }
body{
  margin:0; font-family:var(--font-body); font-weight:500; color:var(--text);
  background:var(--bg); line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--text-strong); text-decoration:none; }
a:hover{ color:var(--orange-2); }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:800; line-height:1.1; color:var(--text-strong); margin:0 0 .5em; letter-spacing:-.015em; }
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }
p{ margin:0 0 1rem; }
ul{ margin:0; padding:0; }
strong{ color:var(--text-strong); }
:focus-visible{ outline:3px solid var(--orange-2); outline-offset:2px; border-radius:4px; }

/* Akcent: jedna fraza, nigdy caly naglowek.
   Na granacie - pomarancz. Na kremie pomarancz ma ~2:1 kontrastu,
   wiec akcentem jest MARKER (tlo pomaranczowe + granatowy tekst). */
.txt-orange{ color:var(--orange-2); }
.section--light .txt-orange,
.calc .txt-orange,
.marker{
  color:var(--ink);
  background:var(--orange-2);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  padding:.02em .22em; border-radius:4px;
}

/* Liczby sa bohaterem */
.num{ font-family:var(--font-head); font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

/* ---------- Uklad ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
/* Rytm pionowy: sekcje NIE oddychaja identycznie. Kluczowa dostaje wiecej
   powietrza, pomocnicza mniej. Wartosci pochodne od --section-y, wiec skala
   zostaje spojna, a strona przestaje byc rowna jak z szablonu. */
.section{ padding-block:var(--section-y); }
.section--air{ padding-block:calc(var(--section-y) * 1.35); }
.section--tight{ padding-block:calc(var(--section-y) * 0.45); }
.section--alt{ background:var(--bg-2); }
.section--light{ background:var(--cream); color:var(--ink); }
.section--light h2,.section--light h3,.section--light h4{ color:var(--ink); }

/* Kicker: zawsze z ukosnikiem, wersaliki, rozstrzelenie .13em, waga 700 */
/* Kicker zawsze z ukosnikiem - element sygnaturowy nr 6 z Ksiegi marki
   ("rozpoznawalnosc w 2 sekundy"). Ukosnik doklejamy w CSS, nie w tresci:
   redaktor wpisuje w panelu sama nazwe sekcji i nie ma jak o nim zapomniec.

   UWAGA: dzis ta regula NIC nie robi na ekranie, bo kickery sekcji sa ukryte
   decyzja klienta (`.eyebrow{display:none}` na koncu pliku). Zostaje, zeby
   przywrocenie kickerow bylo usunieciem jednej reguly, a nie kolejna robota.
   Rownanie marki ma wlasny kicker (.eq__kicker) i jest widoczne zawsze. */
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--orange-2); margin-bottom:.7rem;
}
.eyebrow::before{ content:"/ "; }
/* Kicker bez ukosnika tam, gdzie tekst juz go ma albo gdzie pelni role etykiety danych. */
.eyebrow--plain::before{ content:none; }
.section--light .eyebrow{ color:var(--orange); }

.lead{ font-size:var(--lead); color:var(--text); max-width:62ch; }
.section--light .lead{ color:var(--ink-soft); }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }

/* ---------- Przyciski ----------
   Primary: pill, gradient 120, tekst granatowy, ZAWSZE ze strzalka.
   Secondary: obrys 3 px. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-head); font-weight:800; font-size:1.02rem; line-height:1; cursor:pointer;
  padding:1rem 1.7rem; border-radius:var(--r-pill); border:3px solid transparent;
  transition:transform 80ms ease-out, box-shadow .2s ease, background .2s ease, filter 80ms ease-out;
  text-align:center;
  max-width:100%;
  min-height:var(--tap);
}
/* Cien neutralny, nie pomaranczowa poswiata - neon nie nalezy do tej marki. */
.btn--orange{ background:var(--grad-cta); color:var(--ink); box-shadow:0 6px 16px rgba(6,12,30,.28); }
.btn--orange:hover{ color:var(--ink); filter:brightness(1.05); box-shadow:0 10px 24px rgba(6,12,30,.34); }
/* Strzalka doklejana automatycznie - Ksiega: "zawsze ze strzalka" */
.btn--orange::after{ content:"→"; font-weight:800; }
.btn--orange.btn--noarrow::after{ content:none; }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn--ghost:hover{ border-color:var(--orange-2); color:#fff; }
.section--light .btn--ghost, .btn--ghost.btn--on-cream{ border-color:var(--ink); color:var(--ink); }
.section--light .btn--ghost:hover, .btn--ghost.btn--on-cream:hover{ border-color:var(--orange); color:var(--ink); }
.btn--light{ background:var(--cream); color:var(--ink); }
.btn--light:hover{ color:var(--orange-700); }
.btn--block{ width:100%; }
/* Wysylka trwa. JS ustawia disabled, ale bez tej reguly przycisk wygladal
   dokladnie tak samo i klikniecie w niego nie dawalo zadnej reakcji - czyli
   wygladalo na zawieszona strone. Kropka po prawej zastepuje strzalke. */
.btn[disabled]{ cursor:progress; filter:saturate(.55) brightness(.94); box-shadow:none; }
.btn--orange[disabled]::after{ content:"·"; animation:btn-praca .9s steps(4,end) infinite; }
@keyframes btn-praca{ 0%{ content:"·" } 25%{ content:"··" } 50%{ content:"···" } 75%{ content:"··" } }
@media (prefers-reduced-motion:reduce){ .btn--orange[disabled]::after{ animation:none; content:"···" } }
.btn--lg{ padding:1.15rem 2rem; font-size:1.1rem; }

/* ---------- Dotyk ----------
   Na telefonie nie ma hovera. Jedyna informacja zwrotna przed odpowiedzia
   serwera jest stan :active i musi byc natychmiastowy - powyzej ok. 100 ms
   przestaje byc odbierany jako reakcja na palec. Stad 80 ms.

   Szary prostokat iOS (tap-highlight) zdejmujemy TYLKO tam, gdzie dajemy
   wlasna reakcje. Element bez zadnego potwierdzenia wydaje sie niedzialajacy,
   uzytkownik klika drugi raz i wysyla formularz dwa razy. */
.btn,
#ksCalc .opt, #ksCalc .send, #ksCalc .skip, #ksCalc .backbar button,
.choice, .calc__back, .nav-toggle, .sticky-cta .btn, .action-bar a{
  -webkit-tap-highlight-color:transparent;
}
.btn:active,
#ksCalc .opt:active, #ksCalc .send:active,
.choice:active, .action-bar a:active{
  transform:scale(.97); filter:brightness(.94);
}
#ksCalc .skip:active, #ksCalc .backbar button:active, .calc__back:active{ opacity:.6; }

/* Efekty najechania tylko tam, gdzie istnieje wskaznik. Na dotyku :hover
   potrafi "przykleic sie" po tapnieciu i zostawic karte w stanie hover. */
@media (hover: none){
  .step:hover, .review:hover{ transform:none; box-shadow:none; }
  #ksCalc .opt:hover{ border-color:var(--cream-line); background:#fff; }
}

/* Cele dotykowe w kalkulatorze: ikona moze byc mala, cel nie.
   "Pomin" i "cofnij" byly wczesniej celami wysokosci ok. 20 px. */
#ksCalc .skip, #ksCalc .backbar button, .calc__back{
  min-height:var(--tap); display:inline-flex; align-items:center; padding-inline:2px;
}
#ksCalc .opt{ min-height:var(--tap); }
#ksCalc .send{ min-width:52px; min-height:var(--tap); }

/* ---------- Pille i badge ----------
   Trust-pille: obrys w kolorze tla przeciwnym. Wyroznienie - wypelnienie pomaranczem.
   Zieleń tylko "za darmo / potwierdzone". */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-head); font-weight:700; font-size:.82rem;
  padding:.42rem .95rem; border-radius:var(--r-pill);
  border:2px solid var(--text-muted); color:var(--text-strong);
}
.section--light .pill, .pill--on-cream{ border-color:var(--ink-mute); color:var(--ink); }
.pill--fill{ background:var(--orange-2); border-color:var(--orange-2); color:var(--ink); }
/* "Za darmo" wg Ksiegi (str. KOMPONENTY): miekkie zielone tlo + zielony tekst i obrys.
   NIE bialy tekst na pelnej zieleni - to ~2:1 kontrastu, nieczytelne.
   Na granacie zielen #35C26E daje ~5.9:1, na kremie ciemniejsza --green-700. */
.pill-row{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ---------- Pasek utility (gora) ---------- */
.topbar{ background:var(--bg-2); color:var(--text-muted); font-size:.85rem; border-bottom:1px solid rgba(255,255,255,.06); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:40px; }
/* Sygnatura "MARKA OD XALTUM" po lewej gornego paska (zastapila ikony social). */
.topbar__brand{ display:inline-flex; align-items:center; gap:.55rem; color:#fff; transition:opacity .15s; }
.topbar__brand:hover{ opacity:.82; }
/* Pasek jest granatowy w obu motywach - kolor etykiety staly (polbialy), nie z motywu. */
.topbar__brand-label{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:rgba(255,255,255,.55); }
.topbar__right{ display:flex; gap:1.4rem; align-items:center; }
.topbar__phone{ color:#fff; font-weight:700; }

/* Znak slowny XALTUM: wordmark + pomaranczowa tarcza na literze "U".
   Kolor XALT/M dziedziczy z kontekstu (bialy na granacie); tarcza zawsze pomaranczowa. */
.xaltum-mark{ font-family:var(--font-head); font-weight:800; letter-spacing:.02em; line-height:1; display:inline-flex; align-items:center; white-space:nowrap; }
.xaltum-mark__u{ display:inline-flex; align-items:center; justify-content:center; background:var(--orange); color:#fff; border-radius:4px; padding:0 .16em; margin:0 .04em; }
.topbar__brand .xaltum-mark{ font-size:.92rem; }

/* Znak XALTUM jako plik. Wariant jasny na granacie, ciemny na kremie.
   Wysokosc sterowana CSS-em, szerokosc automatyczna, zeby proporcje logotypu
   zostaly nienaruszone niezaleznie od tego, co przyjdzie w pliku. */
.topbar__brand-logo{ display:block; height:14px; width:auto; }
.topbar__brand-logo--dark{ display:none; }
[data-theme="light"] .topbar__brand-logo--light{ display:none; }
[data-theme="light"] .topbar__brand-logo--dark{ display:block; }
/* W linii prawnej stopki: znak nieco wiekszy niz otaczajacy drobny tekst, XALT/M biale. */
.xaltum-mark--legal{ font-size:1.02em; color:#fff; vertical-align:-.05em; margin:0 .06em; }

/* ---------- Logo ---------- */
.ksz-logo{ display:inline-flex; align-items:center; gap:.62em; }
.ksz-logo__word{
  display:flex; flex-direction:column; font-family:var(--font-head);
  font-weight:900; letter-spacing:-.025em; line-height:1.02; font-size:1.32rem;
}
.ksz-logo--light .ksz-logo__word{ color:#fff; }
.ksz-logo--dark .ksz-logo__word{ color:var(--ink); }
.ksz-mark{ display:block; flex:none; }

/* ---------- Naglowek ---------- */
.site-header{ position:sticky; top:0; z-index:60; background:rgba(15,33,66,.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.07); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:clamp(.6rem,1.4vw,1.5rem); min-height:70px; }
/* Logo i CTA maja stala szerokosc, kurczy sie wylacznie nawigacja. Bez tego
   przy dluzszym menu przycisk "Policz doplate" wypychalo poza krawedz. */
.site-header__inner > .site-logo{ flex:0 0 auto; }
.site-header__inner > .mainnav{ flex:1 1 auto; min-width:0; display:flex; justify-content:flex-end; }
.site-header__inner > .header-cta{ flex:0 0 auto; }
/* Wysokość logo pilnowana także wtedy, gdy obrazek wyjdzie poza .site-logo
   (własne logo z Kustomizatora niesie własny <a>). Selektor po klasie
   .custom-logo działa niezależnie od miejsca w drzewie. */
.site-logo img,
.site-header .custom-logo{ height:40px; width:auto; max-width:min(260px,44vw); object-fit:contain; }
.site-logo--custom{ flex:0 0 auto; display:flex; align-items:center; }
.site-logo--custom .custom-logo-link{ display:flex; align-items:center; }
.nav{ display:flex; align-items:center; gap:clamp(.55rem,1.05vw,1.1rem); list-style:none; min-width:0; }
/* Pozycja menu nigdy nie lamie sie w srodku - "Zanizone stawki" w dwoch liniach
   rozpycha naglowek na dwa rzedy. Etykiety trzymamy krotkie (ksz_menu_labels). */
.nav a{ font-weight:600; font-size:clamp(.86rem,.92vw,.97rem); color:#dbe4f5; white-space:nowrap; }
.nav a:hover{ color:var(--orange-2); }

.header-cta{ display:flex; align-items:center; gap:1rem; }
/* CTA w naglowku ma sie NIE lamac: zlamane na dwie linie przestaje byc pigulka
   i robi sie owal (rosnie z ~54 do ~71 px). Etykieta jest tu krotka i nasza,
   wiec nowrap jest bezpieczny. Celowo NIE na .btn globalnie - w kaflach kontaktu
   przyciskiem jest dlugi adres e-mail, ktory musi sie zawijac, inaczej rozpycha
   strone na 390 px. */
.header-cta .btn{ white-space:nowrap; flex:0 0 auto; }
/* Na desktopie telefon w naglowku NIE istnieje - ten sam numer jest w pasku gornym
   tuz nad nim. Duplikat zjadal ~140 px i wypychal menu poza ekran ponizej 1170 px
   (menu nie moze sie zwezac, bo pozycje maja nowrap). Wraca na telefonie, gdzie
   pasek gorny jest ukryty i numer nie ma sie skad wziac. */
.header-phone{ display:none; font-family:var(--font-head); font-weight:800; color:#fff; white-space:nowrap; }
.header-phone span{ display:block; font-size:.7rem; font-weight:700; color:var(--orange-2); letter-spacing:.13em; text-transform:uppercase; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span{ display:block; width:26px; height:2px; background:#fff; margin:5px 0; transition:.2s; }

/* ---------- Hero ----------
   Tlo plaskie granatowe. Bez gradientowych sekcji, bez neonu. */
.hero{ position:relative; background:var(--bg); color:#fff; overflow:hidden; }
/* Hero prowadzi klaimem marki, nie liczba. Kolejnosc: kicker -> H1 -> haslo -> pille.
   Domyslnie tekst idzie na pelnej szerokosci, wysrodkowany. Zdjecie w panelu
   przelacza gore hero na dwie kolumny (.hero__top--split) - patrz nizej. */
.hero__top{ padding-top:clamp(1.5rem,3vw,2.5rem); }
.hero__intro{ text-align:center; }
.hero__kicker{ display:block; margin-bottom:.6rem; }
/* Wielkosc naglowka: mnoznik z panelu nakladany na systemowy clamp, wiec skala
   responsywna zostaje. --h1-scale wchodzi inline w front-page.php. */
.hero__title{ font-size:calc(var(--h1) * var(--h1-scale,1)); margin:0 auto; max-width:14ch; text-wrap:balance; }
/* Akcent to JEDNA fraza (Ksiega, zasada 05) - rozbita na dwie linie przestaje nia byc.
   Trzymamy ja w calosci, a naglowek lamie sie przed nia. */
.hero__title .txt-orange{ white-space:nowrap; }
/* Trust-pille w hero korzystaja z systemowej .pill (sekcja "Pille i badge") -
   tu tylko ich rozstawienie. */

/* ---------- Hero dwukolumnowe (gdy w panelu wybrano zdjecie) ----------
   Tekst zostaje wysrodkowany we WLASNEJ kolumnie - tak jak na makiecie.
   Kolumna tekstu jest szersza, bo to ona niesie klaim; zdjecie towarzyszy. */
.hero__top--split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1rem,3vw,2.5rem); align-items:center; }
.hero__top--split .hero__title{ max-width:none; }   /* kolumna sama ogranicza szerokosc */
.hero__photo{ display:flex; justify-content:center; align-items:flex-end; }
/* Zdjecie moze byc dowolnej wysokosci - ograniczamy je do rozsadnego kadru,
   zeby nie rozpychalo hero na wysokich ekranach. */
.hero__photo-img{ width:100%; height:auto; max-height:clamp(320px,38vw,460px); object-fit:contain; object-position:bottom center; }

@media (max-width: 980px){
  /* Ponizej ~980 px zdjecie zabiera miejsce kalkulatorowi, ktory jest tu
     najwazniejszy - wiec znika, a tekst wraca na pelna szerokosc. */
  .hero__top--split{ grid-template-columns:1fr; }
  .hero__photo{ display:none; }
}
/* Kolumna kalkulatora ~10% szersza (bohater hero); Bartek nieco wezszy po prawej.
   minmax(0,...) na kolumnie kalkulatora => tresc kroku NIE rozpycha toru (min-content=0).
   Dzieki temu szerokosc kalkulatora jest STALA na kazdym kroku (Bartek jest niezmienny,
   wiec jego tor tez), a widget nie przeskakuje ksztaltem/pozycja miedzy ekranami. */
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.24fr) .82fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start; padding-bottom:clamp(2rem,5vw,3.5rem); position:relative; z-index:1; }

/* ---- Hero z figurą (Bartek): górny pas = hasło | ostatnia dopłata; niżej kalkulator | Bartek ---- */
.hero--figure .container{ position:relative; z-index:1; }

/* Górny pas: obietnica (H1) po lewej, dowód (ostatnia dopłata) po PRAWEJ (nad Bartkiem),
   z małym odstępem od krawędzi (~15px), żeby nie był wklejony w róg. */
.hero--figure .hero__top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:clamp(1.25rem,3.5vw,2.5rem); }
.hero--figure .hero__intro{ text-align:left; flex:0 1 auto; width:fit-content; max-width:min(440px,44vw); }
.hero--figure .hero__proof{ margin-right:14px; }
.hero--figure .hero__title{ margin:0; max-width:100%; }
.hero__proof{ flex:0 0 auto; align-self:center; }

/* Dół hero: kalkulator (lewa) + Bartek (prawa). Bartek to NORMALNA kolumna gridu -
   koniec z pozycją absolutną i rosnącą pustką na szerokich monitorach. */
.hero__media{ display:flex; flex-direction:column; }
.hero__media > [data-calc]{ width:100%; display:flex; }
.hero__media [data-calc] > .calc{ width:100%; }

/* Pille zaufania przeniesione DO formularza - slim pasek tuż nad kartą kalkulatora. */

/* Bartek: wycięcie z alfą przycięte do kadru głowa+klatka+tablet (bartek-hero.webp 780x1150, WebP z przezroczystością: 79 KB zamiast 706 KB w PNG).
   NIE SKACZE: wysokość ZAMROŻONA (clamp) + `align-items:start` na gridzie przykleja go GÓRĄ,
   więc głowa stoi w stałym miejscu, a rosnąca karta formularza wydłuża wiersz tylko w dół pod
   nim (nie przesuwa postaci). Maska rozpływa dół w granacie (gdy karta krótka, pas „wisi"). */
.hero__figure{ position:relative; display:flex; align-items:flex-start; justify-content:flex-end; min-height:0; }
.hero__figure img{ width:auto; height:clamp(500px,44vw,640px); max-width:100%; display:block;
  /* Skala z panelu (--hero-fig, 1 = domyslnie). transform NIE zmienia boxu w gridzie,
     wiec kalkulator obok stoi w miejscu; kotwica top-right trzyma Bartka w rogu,
     nadmiar przycina hero (overflow:hidden). */
  transform:translate(var(--hero-x,0),var(--hero-y,0)) scale(var(--hero-fig,1)); transform-origin:top right;
  -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 80%, transparent 100%); }

/* ---- DESKTOP OD 1280 px: górny pas na TRZY kolumny ----
   Hasło | ostatnia dopłata | Bartek. Wcześniej dopłata stała nad Bartkiem
   (dwie kolumny), teraz siada obok niego, w jednej linii z hasłem.

   Trzecia kolumna ma szerokość LICZONĄ ze zdjęcia, nie z ułamka fr. Powód
   praktyczny: zdjęcie ma stałą wysokość i szerokość auto (proporcja 780/1150
   = 0.678), więc kolumna z `fr` bywała węższa niż sam obraz i Bartek wchodził
   pod kwotę dopłaty. Teraz kolumna zawsze odpowiada realnej szerokości figury.

   Blok dopłaty ma STAŁE 360 px: kwota zmienia się przy rotacji spraw, a
   kolumna `auto` przesuwałaby przy każdej zmianie hasło obok.

   Poniżej 1280 px zostaje układ dwukolumnowy - trzy kolumny nie mieszczą się
   bez ściskania hasła do trzech linii. */
@media (min-width:1280px){
  .hero--figure{
    --bartek-h: clamp(550px,48.4vw,704px);   /* +10% wobec 500/44vw/640 */
    --bartek-w: calc(var(--bartek-h) * 0.678);
  }
  .hero--figure .hero__top{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px var(--bartek-w);
    gap:clamp(1.5rem,3vw,2.5rem);
    align-items:center;
  }
  .hero--figure .hero__intro{ max-width:none; width:auto; }
  /* Pozycja bloku doplaty sterowana z panelu (--proof-x / --proof-y, ustawiane
     inline w front-page.php; domyslnie 18 px w prawo = 5% szerokosci bloku).

     Przesuwamy przez offset `position:relative`, NIE przez transform ani
     margines: transform kasuje `.reveal.is-in{transform:none}` (animacja
     wejscia stoi nizej w pliku), a margines w pionie rozpychalby gorny pas.
     Offset relatywny nie rusza ani siatki, ani sasiadow - zdjecie i karta
     kalkulatora zostaja dokladnie tam, gdzie sa. */
  .hero--figure .hero__proof{
    margin-right:0; width:360px; justify-self:start;
    position:relative; left:var(--proof-x,18px); top:var(--proof-y,0px);
  }
  .hero__figure img{ height:var(--bartek-h); }

  /* Bartek wyzej o 100 px: przy trzech kolumnach glowa siada na wysokosci
     pierscienia zamiast zaczynac sie dopiero przy karcie kalkulatora.
     Ujemny margines, nie transform - transform jest juz zajety przez skale
     i kadrowanie z panelu (--hero-fig / --hero-x / --hero-y), a marginesu
     nie widzi zaden inny mechanizm. Karta obok nie drgnie: figura i karta to
     osobne kolumny gridu z align-items:start. */
  .hero--figure .hero__figure img{ margin-top:-100px; }
}

/* Karta kalkulatora nie moze stykac sie z gornym pasem. Wczesniej odstep
   wynosil 0 px: kwota doplaty konczyla sie dokladnie tam, gdzie zaczynala
   karta. Od 981 px, bo problem dotyczy calego ukladu desktopowego, nie tylko
   wersji trzykolumnowej. */
@media (min-width:981px){
  .hero--figure .hero__grid{ margin-top:clamp(1.25rem,2.4vw,2.25rem); }
}

@media (max-width:980px){
  /* Bartek WYRAZNY, obok hasla u gory - pozycja absolutna, wiec kalkulator NIE zjezdza
     (figura poza flow). Haslo zwezone do lewej, Bartek po prawej. */
  .hero--figure .hero__top{ flex-direction:column; align-items:flex-start; position:relative; }
  /* grid nie moze byc kontenerem pozycjonowania figury (inaczej Bartek laduje w strefie
     kalkulatora); zerujemy - figura liczy sie wtedy od .container (gora hero). */
  .hero--figure .hero__grid{ position:static; }
  .hero--figure .hero__intro{ text-align:left; width:56%; max-width:56%; }
  .hero--figure .hero__title{ margin:0; }
  /* KICKER (jest na wysokosci Bartka) ograniczony i w JEDNEJ linii z przycieciem (...):
     nie wchodzi pod Bartka i ma zawsze te sama wysokosc -> ring i kwota (ponizej Bartka)
     stoja w TYM SAMYM miejscu przy kazdej rotacji. Ring/kwota/sub bez ograniczenia (sa nizej,
     obok nie ma juz Bartka - sub zostaje w jednej linii). */
  /* align-self:flex-start nadpisuje bazowe align-self:center - inaczej wezszy blok
     (po ograniczeniu kicera) wysrodkowuje sie w kolumnie hero__top zamiast isc do lewej. */
  .hero--figure .hero__proof{ margin-right:0; margin-top:.8rem; align-self:flex-start; }
  .hero--figure .ks-cases__kicker{ display:block; max-width:53vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hero--figure .ks-cases__where{ display:block; max-width:53vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Odstep miedzy doplata a karta kalkulatora - navy pasek czatu zlewal sie z tlem. */
  .hero--figure .hero__grid{ position:static; margin-top:clamp(1rem,4vw,1.5rem); }
  .hero__figure{ display:block; position:absolute; top:2px; right:0; width:min(42%,180px);
    height:auto; margin:0; align-items:initial; justify-content:initial; pointer-events:none; }
  .hero__figure img{ width:100%; height:auto; opacity:1; transform:none;
    -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 97%);
    mask-image:linear-gradient(to bottom, #000 72%, transparent 97%); }
}
.flow{ list-style:none; display:grid; gap:.7rem; }
.flow li{ display:flex; gap:.8rem; align-items:center; background:rgba(255,255,255,.03); border:1px solid var(--card-line); border-radius:var(--r-md); padding:.85rem 1rem; }
.flow__num{ width:34px; height:34px; flex:0 0 auto; border-radius:9px; background:var(--orange); color:var(--ink); font-family:var(--font-head); font-weight:900; display:grid; place-items:center; }
.flow__txt strong{ display:block; color:#fff; font-size:.98rem; }
.flow__txt span{ font-size:.85rem; color:var(--text-muted); }

/* ---------- Pasek 3 akcji ----------
   Ksiega: tla plaskie granat albo krem - stad granat, nie pomaranczowy pas. */
.action-bar{ background:var(--bg-2); padding-block:clamp(1.3rem,2.6vw,1.9rem); }
/* Cztery kolumny w DOKLADNIE tej samej siatce co rzad badge'ow zaufania pod
   spodem: ten sam kontener (z paddingiem) i ten sam gap. Wczesniej pasek szedl
   od krawedzi do krawedzi z gapem 1 px, wiec jego kolumny mialy 349 px, a
   badge'y 310 px - ikony i teksty rozjezdzaly sie narastajaco, od +17 do -15 px.
   Cena zmiany: pasek przestaje byc ciaglym pasem i jest rzedem czterech kart.
   Tlo sekcji zostaje granatowe, wiec pas nadal czyta sie jako jedna wstega. */
.action-bar__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
@media (max-width:1180px){ .action-bar__grid{ grid-template-columns:repeat(2,1fr); } }
/* Bez wlasnego tla i paddingu poziomego: ikona ma startowac DOKLADNIE na
   krawedzi kolumny, tak jak ikona badge'a nizej. Kazdy padding wewnetrzny
   przesuwalby tresc wzgledem tamtego rzedu (bylo -23 px). Pas granatowy robi
   sekcja, wiec wizualnie nadal jest to jedna wstega. */
.action-bar a{ display:flex; align-items:center; gap:.9rem; padding:0; background:none; border:0; color:#fff; transition:color .15s; }
.action-bar a:hover{ color:#fff; }
.action-bar a:hover .action-bar__ico{ background:var(--orange-2); }
/* 48 px i radius 12 - dokladnie jak ikona badge'a nizej. Przy 40 px tekst
   startowal 8 px wczesniej niz w tamtym rzedzie, mimo tego samego gapu. */
.action-bar__ico{ width:48px; height:48px; flex:0 0 auto; border-radius:12px; background:var(--orange); color:var(--ink); display:grid; place-items:center; transition:background .15s; }
.action-bar strong{ display:block; font-family:var(--font-head); font-weight:800; color:#fff; }
.action-bar span{ font-size:.84rem; color:var(--text-muted); }

/* ---------- Kalkulator (kreator) ----------
   Karta kremowa = formularz. Pole aktywne: obrys pomaranczowy. */
.calc{ background:var(--cream); color:var(--ink); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; }
.calc__head{ background:var(--bg-3); color:#fff; padding:1.1rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.calc__head h2{ color:#fff; font-size:1.15rem; margin:0; }
.calc__step-no{ font-family:var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); }
/* Stopka karty - domyka kremowa plaszczyzne i trzyma "za darmo" przy CTA. */
.calc__foot{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem;
  background:var(--cream-2); border-top:1px solid var(--cream-line);
  padding:.85rem 1.4rem;
}
.calc__foot span{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-head); font-weight:700; font-size:.78rem; color:var(--ink-soft); }
.calc__foot svg{ width:15px; height:15px; color:var(--green-700); flex:0 0 auto; }
.calc__progress{ display:flex; gap:6px; }
.calc__dot{ width:26px; height:5px; border-radius:99px; background:rgba(255,255,255,.22); transition:.25s; }
.calc__dot.is-active{ background:var(--orange-2); }
.calc__dot.is-done{ background:var(--orange); }
.calc__body{ padding:clamp(1.2rem,3vw,1.7rem); flex:1 1 auto; display:flex; flex-direction:column; min-height:340px; }
.calc__body > .calc__step{ flex:1 1 auto; }
.calc__nav{ margin-top:auto; }
.calc__step{ display:none; animation:fade .25s ease; }
.calc__step.is-active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.calc__step h3{ font-size:1.15rem; margin-bottom:.25rem; color:var(--ink); }
.calc__hint{ color:var(--ink-soft); font-size:.93rem; margin-bottom:1.05rem; }
/* Kafle wypelniaja karte: align-content:start trzyma je przy gorze, a gdy krok ma
   ich malo, pustke domyka stopka karty (.calc__foot). */
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; align-content:start; }
.choice{ border:2px solid var(--cream-line); border-radius:var(--r-md); padding:1.05rem 1.1rem; cursor:pointer; font-weight:700; color:var(--ink); background:#fff; display:flex; align-items:center; gap:.7rem; transition:.15s; text-align:left; font-family:var(--font-body); }
.choice:hover{ border-color:var(--orange); }
.choice.is-selected{ border-color:var(--orange); background:var(--orange-soft); }

/* Pola: etykieta zawsze nad polem, waga 700 */
.field{ margin-bottom:1rem; }
.field label{ display:block; font-family:var(--font-head); font-weight:700; margin-bottom:.4rem; color:var(--ink); }
.field input, .field select{ width:100%; padding:.85rem 1rem; border:2px solid var(--cream-line); border-radius:var(--r-md); font:inherit; font-weight:500; color:var(--ink); background:#fff; }
.field input:focus, .field select:focus{ border-color:var(--orange); outline:none; }
/* Blad bez czerwieni: ciemny pomarancz + pelne zdanie */
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field.has-error input{ border-color:var(--orange-700); }
.field__error{ display:block; margin-top:.35rem; font-size:.86rem; font-weight:600; color:var(--orange-700); }
/* Oznaczamy wymagane I opcjonalne. Sama gwiazdka przy czesci pol zostawia
   pytanie "a te bez gwiazdki to co", i to jest realne zrodlo porzucen. */
/* --ink-soft, nie --ink-mute: zmierzone na kremie --ink-mute daje 2,84:1, czyli
   poniżej progu 4,5:1 dla drobnego tekstu. To dotyczy tekstów pomocniczych
   formularza, które użytkownik MUSI przeczytać, żeby wiedzieć, co jest
   obowiązkowe i jakie są limity załączników. */
.field__opt{ font-weight:600; color:var(--ink-soft); font-size:.82rem; }
.calc__nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:1.1rem; }
.calc__back{ background:none; border:0; color:var(--ink-soft); font-family:var(--font-head); font-weight:700; cursor:pointer; padding:.6rem .2rem; }
.calc__back:hover{ color:var(--ink); }
.calc__back[hidden]{ display:none; }
.calc__nav .btn--orange{ flex:0 0 auto; }

/* wynik */
.result{ text-align:center; }
.result__badge{ display:inline-block; background:var(--orange-soft); color:var(--orange-700); font-family:var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; padding:.35rem .8rem; border-radius:99px; margin-bottom:.7rem; }
.result__amount{ font-family:var(--font-head); font-size:clamp(1.9rem,6vw,2.6rem); font-weight:900; letter-spacing:-.03em; color:var(--ink); line-height:1; }
.result__range{ color:var(--ink-soft); margin:.4rem 0 1.1rem; font-size:.95rem; }
/* Pola silnika formularzy (inc/forms.php): textarea, radio, upload, notka. */
.field textarea{ width:100%; padding:.85rem 1rem; border:2px solid var(--cream-line); border-radius:var(--r-md); font:inherit; font-weight:500; color:var(--ink); background:#fff; resize:vertical; min-height:6.5rem; }
.field textarea:focus{ border-color:var(--orange); outline:none; }
.field__label{ display:block; font-family:var(--font-head); font-weight:700; margin-bottom:.4rem; color:var(--ink); }
.field__note{ display:block; margin-top:.4rem; font-size:.78rem; font-weight:500; color:var(--ink-soft); line-height:1.45; }
/* Pille wyboru. Kolko radio jest schowane (ks-visually-hidden w forms.php),
   wiec caly stan - zaznaczenie, hover, fokus - niesie sama pilla. Fokus przez
   :has(), bo fokusowany jest niewidoczny input, a widoczna ma byc etykieta.
   Wysokosc 44 px: pille sa jedynym miejscem formularza, gdzie trafia sie w
   krotki tekst, a nie w pole na cala szerokosc. */
.field__radios{ display:flex; flex-wrap:wrap; gap:.5rem; }
.field__radios .radio{ display:inline-flex; align-items:center; margin:0; padding:.6rem 1.05rem; min-height:var(--tap); border:2px solid var(--cream-line); border-radius:999px; background:#fff; cursor:pointer; font-weight:600; font-size:.86rem; color:var(--ink); transition:border-color .18s, background .18s, color .18s; }
.field__radios .radio:hover{ border-color:var(--orange); }
.field__radios .radio:has(input:checked){ border-color:var(--orange); background:var(--orange-soft); color:var(--orange-700); font-weight:800; }
.field__radios .radio:has(input:focus-visible){ outline:3px solid var(--orange-2); outline-offset:2px; }
.field.has-error .field__radios .radio{ border-color:var(--orange-700); }

/* Pole plikow: input schowany, widoczny jest <label class="btn"> obok licznika.
   Regula .field label (blok, waga 700, margines) dotyczy etykiet pol - ten
   label jest przyciskiem, wiec musi z niej wyjsc. */
.upload{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.field .upload__btn{ display:inline-flex; margin:0; padding:.62rem 1.15rem; font-size:.88rem; min-height:var(--tap); border-width:2px; }
.upload__stan{ font-size:.84rem; font-weight:600; color:var(--ink-soft); }
.upload__stan.is-set{ color:var(--green-700); }
.upload__stan.is-err{ color:var(--orange-700); }
.upload:has(input:focus-visible) .upload__btn{ outline:3px solid var(--orange-2); outline-offset:2px; }

/* Cala etykieta jest celem (stad <label class="consent">), ale sam kwadrat tez
   musi byc widoczny i trafialny - domyslny checkbox ma na iOS ok. 13 px.
   Kwadrat jest rysowany, nie natywny: accent-color koloruje wylacznie stan
   zaznaczony, wiec pusty checkbox zostawal szarym pudelkiem systemowym. */
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.8rem; color:var(--ink-soft); text-align:left; margin-top:.4rem;
  min-height:var(--tap); padding-block:.35rem; cursor:pointer; }
.consent__box{ width:24px; height:24px; flex:0 0 auto; margin-top:1px; display:grid; place-items:center;
  border:2px solid var(--cream-line); border-radius:7px; background:#fff; color:transparent;
  transition:border-color .15s, background .15s, color .15s; }
.consent input:checked ~ .consent__box{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.consent:hover .consent__box{ border-color:var(--orange); }
.consent input:focus-visible ~ .consent__box{ outline:3px solid var(--orange-2); outline-offset:2px; }
.consent.has-error .consent__box{ border-color:var(--orange-700); }
/* Komunikat dopina sie na koniec etykiety (main.js), a ta jest wierszem flex -
   bez tego blad wyladowalby jako trzecia kolumna obok tekstu zgody. Tresc zgody
   musi przy tym miec prawo sie zwezac (flex:1 1 0 + min-width:0), inaczej
   wrapping wypycha caly akapit pod kwadrat. */
.consent{ flex-wrap:wrap; }
.consent > span:not(.consent__box){ flex:1 1 0; min-width:0; }
.consent .field__error{ flex:1 0 100%; margin-left:calc(24px + .6rem); }
.consent a{ color:var(--orange-700); }
.form-note{ font-size:.8rem; color:var(--ink-soft); margin-top:.7rem; text-align:center; }

/* ---------- Pasek ubezpieczycieli ---------- */
.insurers{ background:var(--cream); }
.insurers__label{ text-align:center; font-family:var(--font-head); color:var(--ink); font-weight:700; font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1.4rem; }
/* Tasma logotypow. Jedzie w nieskonczonej petli: track = dwie identyczne grupy,
   animacja przesuwa go o -50% (czyli dokladnie o jedna grupe) i wraca do zera -
   podmiana jest niewidoczna, bo w tym momencie grupa 2 stoi tam, gdzie startowala 1.
   Krawedzie wygaszamy maska, zeby logotypy nie ucinaly sie twardo. */
.marquee{
  position:relative; overflow:hidden; padding-block:.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:marquee 46s linear infinite; }
.marquee__group{ display:flex; align-items:center; gap:clamp(2rem,4vw,3.4rem); padding-right:clamp(2rem,4vw,3.4rem); list-style:none; }
.marquee__group img{
  /* Powiekszone z 38-54 px: przy tamtej skali logotypy tonely w kremowym pasie. */
  height:clamp(52px,5.4vw,76px); width:auto; display:block;
  filter:grayscale(1); opacity:.72; transition:filter .2s, opacity .2s;
}
.marquee__group img:hover{ filter:none; opacity:1; }
/* Pauza na hover - zeby dalo sie odczytac konkretny logotyp. */
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Bez ruchu: tasma staje i zwija sie do zawijanej listy, bez urwanej drugiej kopii. */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; flex-wrap:wrap; width:100%; justify-content:center; }
  .marquee__group[aria-hidden="true"]{ display:none; }
  .marquee__group{ flex-wrap:wrap; justify-content:center; gap:1.4rem 2rem; padding-right:0; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
}

/* ---------- Badge'y zaufania ---------- */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.trust__item{ display:flex; gap:.9rem; align-items:flex-start; }
.trust__ico{ width:48px; height:48px; flex:0 0 auto; border-radius:12px; background:rgba(240,156,51,.14); color:var(--orange-2); display:grid; place-items:center; }
.trust__item h3{ font-size:1.05rem; margin:0 0 .2rem; }
.trust__item p{ color:var(--text-muted); font-size:.9rem; margin:0; }

/* ---------- Proces ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.step{ background:rgba(255,255,255,.03); border:1px solid var(--card-line); border-radius:var(--r-lg); padding:1.5rem; }
.step__num{ width:46px; height:46px; border-radius:50%; background:var(--orange); color:var(--ink); font-family:var(--font-head); font-weight:900; display:grid; place-items:center; margin-bottom:1rem; }
.step h3{ font-size:1.08rem; }
.step p{ color:var(--text-muted); font-size:.94rem; margin:0; }

/* ---------- Opinie ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.review{ background:rgba(255,255,255,.04); border:1px solid var(--card-line); border-radius:var(--r-lg); padding:1.5rem; }
.review__top{ display:flex; align-items:center; gap:.8rem; margin-bottom:.7rem; }
.review__avatar{ width:44px; height:44px; border-radius:50%; background:var(--orange); color:var(--ink); font-family:var(--font-head); font-weight:900; display:grid; place-items:center; }
.review__name{ font-weight:700; color:#fff; }
.review__name span{ display:block; font-weight:500; color:var(--text-muted); font-size:.82rem; }
.review p{ color:var(--text); font-size:.96rem; margin:0; }
.stars{ color:var(--orange-2); letter-spacing:1px; font-size:.92rem; }
/* Opinie na kremie - karta bialy papier w linii E3DCC8 */
.section--light .review{ background:#fff; border-color:var(--cream-line); }
.section--light .review__name{ color:var(--ink); }
.section--light .review__name span{ color:var(--ink-mute); }
.section--light .review p{ color:var(--ink-soft); }
.section--light .review:hover{ border-color:var(--orange); box-shadow:0 16px 40px rgba(20,34,74,.10); }
.section--light .stars{ color:var(--orange); }

/* ---------- Blog ---------- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.post-card{ background:rgba(255,255,255,.04); border:1px solid var(--card-line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:.2s; }
.post-card:hover{ transform:translateY(-3px); border-color:var(--orange); }
.post-card__img{ aspect-ratio:16/9; background:var(--bg-3); object-fit:cover; }
.post-card__body{ padding:1.3rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post-card h3{ font-size:1.02rem; margin:0; color:#fff; }
.post-card__more{ margin-top:auto; font-family:var(--font-head); font-weight:700; color:var(--orange-2); }

/* ---------- Stopka ---------- */
.site-footer{ background:var(--bg-2); color:var(--text-muted); padding-block:clamp(2.5rem,5vw,4rem) 1.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--gap); }
/* Naglowki kolumn w stylu stopki xaltum.pl: "/ USLUGI" - ukosnik pomaranczowy,
   tekst wersalikami, krotka pomaranczowa linia pod spodem. */
.site-footer h3{ color:#fff; font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.2rem; padding-bottom:.6rem; position:relative; }
.site-footer h3::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--orange-2); }
/* :not(.btn) jest tu istotne - reguła "display:block" łapała także przycisk
   "Policz dopłatę" w kolumnie kontaktu: rozciągał się na całą szerokość
   kolumny i gubił własny padding, przez co wyglądał jak pomarańczowy pasek,
   a nie przycisk. */
.site-footer a:not(.btn){ color:var(--text-muted); display:block; padding:.25rem 0; }
.site-footer a:not(.btn):hover{ color:var(--orange-2); }
/* Przycisk w stopce: naturalna szerokość, wyrównany do lewej jak reszta
   kolumny, i wyraźnie odsunięty od listy linków nad nim. */
.site-footer .btn{ margin-top:1.1rem; }
.footer-logo{ margin-bottom:1rem; }

/* Lockup "Kalkulator szkod | marka XALTUM" w stopce. */
.footer-brand{ display:inline-block; margin-bottom:1.1rem; transition:opacity .15s; }
.footer-brand:hover{ opacity:.85; }
/* 48 px zamiast 38: nowy lockup ma nad wordmarkiem XALTUM mikropodpis
   "MARKA OD", ktory przy poprzedniej wysokosci schodzil do okolo 4 px i byl
   nieczytelny. Pole ochronne wg paczki logo = wysokosc jednego kafla. */
.footer-brand__img{ display:block; height:48px; width:auto; max-width:100%; }
.footer-brand__img--dark{ display:none; }
[data-theme="light"] .footer-brand__img--light{ display:none; }
[data-theme="light"] .footer-brand__img--dark{ display:block; }
@media (max-width:640px){ .footer-brand__img{ height:40px; } }
.footer-about > p{ max-width:40ch; }
/* Ikony social (kolumna marki) - okragle, jak w stopce xaltum.pl */
.footer-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-social a{ width:40px; height:40px; padding:0; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--text-muted); transition:.15s; }
.footer-social a:hover{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
/* Blok danych rejestrowych operatora - w kolumnie marki (jak w xaltum) */
.footer-reg{ margin-top:1.6rem; font-size:.82rem; line-height:1.65; color:var(--text-muted); }
.footer-reg strong{ display:block; color:#fff; font-weight:800; margin-bottom:.1rem; }
.footer-reg span{ display:block; }
.footer-reg b{ color:rgba(255,255,255,.75); font-weight:700; }
.footer-disclaimer{ font-size:.76rem; color:var(--text-muted); opacity:.75; max-width:44ch; margin-top:1.1rem; }
.footer-hours{ display:block; padding:.25rem 0; font-size:.92rem; }
/* Haslo marki (Ksiega 1.0 / lookbook) - skromne, do lewej, jak claim w stopce xaltum */
.footer-claim{ margin:2.5rem 0 0; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.1); font-weight:900; letter-spacing:-.02em; line-height:1; font-size:clamp(1.7rem,3.4vw,2.7rem); color:#fff; }
.footer-claim .txt-orange{ color:var(--orange-2); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:1.6rem; padding-top:1.4rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem 1rem; flex-wrap:wrap; font-size:.85rem; color:var(--text-muted); }
.footer-tagline{ font-weight:700; letter-spacing:.02em; }
.footer-legal{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.footer-legal a{ display:inline; padding:0; }

/* ---------- Sticky CTA mobile ----------
   Pasek akcji, nie nawigacja: dwie akcje konwersyjne w strefie kciuka.
   Trzy rzeczy, bez ktorych szkodzi zamiast pomagac:
   1. padding-bottom z --safe-b, inaczej dolny pasek Safari klada sie na przyciski,
   2. kompensacja w body (--bar-total), inaczej zaslania stopke i ostatnie pole,
   3. chowanie przy otwartej klawiaturze (klasa is-hidden, sterowana w ui.js),
      inaczej przykrywa pole, ktore uzytkownik wlasnie wypelnia. */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:.5rem;
  padding:.45rem .6rem var(--safe-b); background:rgba(10,23,48,.97);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 -6px 20px rgba(0,0,0,.4); border-top:1px solid var(--card-line);
  transition:transform .25s var(--ease-ios);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .sticky-cta{ background:var(--bg-2); }
}
.sticky-cta .btn{ flex:1; padding:.62rem .6rem; font-size:.9rem; border-width:2px; min-height:46px; }
/* Zjazd o wlasna wysokosc + zapas na cien, zeby nie zostawal pasek nad krawedzia. */
.sticky-cta.is-hidden{ transform:translateY(calc(100% + 24px)); }

/* ---------- Pomocnicze ---------- */
.mt-sm{ margin-top:.8rem; } .mt{ margin-top:1.4rem; } .mt-lg{ margin-top:2.2rem; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--orange); color:var(--ink); padding:.7rem 1rem; z-index:200; }
.skip-link:focus{ left:.5rem; top:.5rem; }

/* ============================================================
   RESPONSYWNOSC (mobile-first)
   ============================================================ */
@media (max-width: 1024px){
  .trust,.steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
/* Prog nawigacji jest WYZSZY niz prog layoutu (860). Pozycje menu maja nowrap,
   wiec nie zwezaja sie - ponizej progu rozpychalyby strone poziomym scrollem.
   Dlatego hamburger wchodzi wczesniej niz reszta ukladu.

   UWAGA PRZY DODAWANIU POZYCJI DO MENU: ten prog zalezy od SUMY szerokosci
   logo + menu + CTA. Przy 7 pozycjach wystarczalo 1000 px; osma ("Darmowy
   kredyt") podniosla wymaganie do ~1145 px. Po kazdej zmianie ksz_menu_labels()
   zmierz szerokosc naglowka i popraw ten prog, inaczej wroci scroll. */
.mainnav__cta{ display:none; }
/* hamburger -> X po rozwinieciu */
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
body.nav-open{ overflow:hidden; }

/* Podniesione z 1160 na 1280: przy dziewieciu pozycjach menu wersja posrednia
   byla nieczytelna, hamburger jest tam uczciwszym rozwiazaniem. */
@media (max-width: 1280px){
  .nav{ display:none; }
  .nav-toggle{ display:block; }
  /* Tablet (860-1160): rozwijane menu pod naglowkiem. */
  .mainnav.is-open{ position:absolute; top:70px; left:0; right:0; z-index:75; background:var(--bg-2); padding:1rem 1.5rem; border-bottom:1px solid var(--card-line); }
  .mainnav.is-open .nav{ display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; }
  .mainnav.is-open .nav a{ padding:.6rem 0; width:100%; }
}
@media (max-width: 860px){
  /* Telefon: rozwiniete menu = PELNOEKRANOWA nakladka, duze pozycje, CTA na dole, bez przewijania. */
  .mainnav.is-open{ position:fixed; inset:0; z-index:75; background:var(--bg); border:0;
    display:flex; flex-direction:column;
    padding:calc(70px + 1.4rem) 7vw calc(env(safe-area-inset-bottom,0px) + 1.4rem); overflow:hidden; }
  .mainnav.is-open .nav{ flex:1 1 auto; justify-content:center; gap:.15rem; }
  .mainnav.is-open .nav a{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.35rem,6.2vw,1.95rem);
    line-height:1.15; padding:.5rem 0; color:var(--text-strong); border-bottom:1px solid var(--card-line); }
  .mainnav.is-open .mainnav__cta{ display:flex; flex-direction:column; gap:.7rem; }
  .mainnav.is-open .mainnav__cta .btn{ width:100%; }
  /* Baner cookies ma z-index:9999 (musi stać nad wszystkim) i przy otwartym
     menu pełnoekranowym zasłaniał ostatnie pozycje - przed dołożeniem
     "Eksperckiej wyceny" jedną, po niej dwie. Na czas otwartego menu znika
     i wraca natychmiast po jego zamknięciu; zgoda nadal jest wymagana,
     a bez niej i tak nic się nie ładuje (Consent Mode: denied). */
  body.nav-open .cookies{ display:none; }
  /* Naglowek nad strona; wylaczamy backdrop-filter, bo tworzy blok zawierajacy dla
     position:fixed - inaczej nakladka jest uwieziona w naglowku. */
  body.nav-open .site-header{ z-index:80; backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* Nakladka (dziecko naglowka) ma z-index:75 i przykrywa logo+hamburger; podnosimy je,
     zeby X byl widoczny i klikalny do zamkniecia. */
  body.nav-open .site-logo,
  body.nav-open .nav-toggle{ position:relative; z-index:78; }
  /* jasny motyw: przycisk "Zadzwon" (ghost) na bezowej nakladce = granatowy, nie bialy */
  [data-theme="light"] .mainnav.is-open .mainnav__cta .btn--ghost{ border-color:var(--ink-mute); color:var(--ink); }
}
@media (max-width: 860px){
  .hero__grid{ grid-template-columns:1fr; }
  .reviews,.posts{ grid-template-columns:1fr; }   /* 3 -> 1, bez sieroty 2+1 */
  .header-phone span{ display:none; }
  .header-phone{ display:block; }   /* pasek gorny znika - numer musi byc w naglowku */
  /* Pasek gorny znika na telefonie: numer lamal sie na dwie linie, a oba jego
     komunikaty i tak sa wyzej - telefon w naglowku, "0 zl z gory" w pillach hero.
     Pierwszy ekran zaczyna sie od klaimu, nie od zawijanego drobiazgu. */
  .topbar{ display:none; }
  /* Logo + telefon + CTA + hamburger nie mieszcza sie w jednym pasku -
     CTA z naglowka wypada, bo ponizej 640px zastepuje je .sticky-cta,
     a miedzy 640 a 860 px zostaje telefon (szybsza sciezka niz formularz). */
  .header-cta .btn{ display:none; }
  .header-cta{ gap:.6rem; min-width:0; }
  .site-header__inner{ gap:.5rem; }
  .site-logo{ min-width:0; }
  .action-bar__grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  /* Kompensacja paska akcji. Wczesniej stale 60 px, co nie uwzglednialo
     safe-area iPhone'a - na modelach z home indicatorem ostatni element
     tresci chowal sie pod paskiem. Teraz jedna wartosc dla body i scrolla. */
  body{ font-size:16px; padding-bottom:var(--bar-total); }
  html{ scroll-padding-bottom:calc(var(--bar-total) + 16px); }
  /* Wszystko, co plywa przy dolnej krawedzi, musi stac NAD paskiem akcji.
     Inaczej dwa elementy zajmuja to samo miejsce i albo sie zaslaniaja,
     albo uzytkownik trafia palcem w komunikat zamiast w CTA. */
  .live-toast{ bottom:calc(var(--bar-total) + 12px); left:12px; right:12px; max-width:none; }
  .ksz-toast{ bottom:calc(var(--bar-total) + 14px); }
  .choices{ grid-template-columns:1fr; }
  .trust,.steps,.reviews,.posts,.footer-grid{ grid-template-columns:1fr; }
  .sticky-cta{ display:flex; }
  .section{ padding-block:clamp(2.2rem,8vw,3rem); }
  .trust__item{ flex-direction:row; }
  /* Pille (0 zl / wynik 60 s / analiza za darmo) ukryte na telefonie - trust jest w czacie. */
}

/* ============================================================
   WARSTWA RUCHU - scroll-reveal, hover, toast
   Bez neonu i gradientowych tel (Ksiega: gradient tylko na CTA).
   ============================================================ */

/* --- Hover na kartach --- */
.trust__item,.step,.review,.post-card,.flow li,.action-bar a{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .2s ease; }
.step:hover,.review:hover{ transform:translateY(-4px); border-color:rgba(240,156,51,.45); box-shadow:0 16px 40px rgba(6,12,30,.35); }
.trust__item:hover .trust__ico{ background:var(--orange); color:var(--ink); transform:translateY(-2px); }
.action-bar a:hover .action-bar__ico{ transform:scale(1.08) rotate(-3deg); }

/* --- Scroll reveal --- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

/* --- Live toast (social proof) --- */
.live-toast{
  position:fixed; left:16px; bottom:16px; z-index:65; max-width:300px;
  display:flex; gap:.7rem; align-items:center;
  background:var(--bg-3); border:1px solid var(--card-line); border-radius:var(--r-md); padding:.8rem 1rem;
  box-shadow:0 18px 40px rgba(6,12,30,.45);
  transform:translateY(140%); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s;
}
.live-toast.is-show{ transform:none; opacity:1; }
/* Krzyzyk: element plywajacy nad trescia musi dac sie zamknac, szczegolnie na
   telefonie, gdzie zajmuje miejsce w strefie kciuka. Cel 44 px mimo malej ikony. */
.live-toast__close{
  flex:0 0 auto; align-self:flex-start; margin:-.4rem -.5rem -.4rem .2rem;
  min-width:var(--tap); min-height:var(--tap);
  background:none; border:0; cursor:pointer; font-size:1.15rem; line-height:1;
  color:var(--text-muted); font-family:var(--font-head);
}
.live-toast__close:hover{ color:#fff; }
.live-toast__dot{ width:10px; height:10px; border-radius:50%; background:var(--green); animation:ping 1.6s infinite; flex:0 0 auto; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(53,194,110,.55);} 70%{ box-shadow:0 0 0 10px rgba(53,194,110,0);} 100%{ box-shadow:0 0 0 0 rgba(53,194,110,0);} }
.live-toast__txt{ font-size:.85rem; color:var(--text); line-height:1.35; }
.live-toast__txt strong{ color:#fff; }
.live-toast__txt span{ color:var(--text-muted); font-size:.78rem; }
@media (max-width:640px){ .live-toast{ display:none; } }

/* --- Szacunek dla uzytkownikow z reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .live-toast__dot{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  /* Reguly punktowe wyzej nie obejmowaly nowych elementow (pasek akcji, stan
     :active, czat). Redukcja ruchu bywa ustawiona z powodow medycznych, wiec
     domykamy ja globalnie zamiast dopisywac kolejne wyjatki. */
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   KALKULATOR 1:1 - ikony wyborow, chip, wyniki progowe
   ============================================================ */

.ks-chip{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--cream-line); border-radius:999px; padding:.4rem .9rem; font-size:.9rem; font-weight:600; color:var(--ink); margin-bottom:1rem; }
.ks-chip svg{ width:18px; height:18px; color:var(--orange); }
.ks-chip strong{ color:var(--ink); }

.ks-result{ display:flex; gap:1rem; align-items:flex-start; border-radius:var(--r-md); padding:1.1rem 1.2rem; margin-bottom:1.2rem; border:1px solid; }
.ks-result__ico{ width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; color:#fff; }
.ks-result__ico svg{ width:24px; height:24px; }
.ks-result__title{ font-family:var(--font-head); font-weight:800; font-size:1.12rem; color:var(--ink); margin-bottom:.2rem; }
.ks-result__desc{ font-size:.92rem; color:var(--ink-soft); }
/* Progi w palecie Ksiegi. Zieleń = potwierdzenie (naleza sie pieniadze).
   Zoltego i niebieskiego Ksiega nie zna - stad jasny i ciemny pomarancz oraz granat. */
.ks-result.ks-green{ background:rgba(53,194,110,.10); border-color:rgba(53,194,110,.35); }
.ks-result.ks-green .ks-result__ico{ background:var(--green-700); }
.ks-result.ks-yellow{ background:rgba(240,156,51,.12); border-color:rgba(240,156,51,.40); }
.ks-result.ks-yellow .ks-result__ico{ background:var(--orange-2); color:var(--ink); }
.ks-result.ks-orange{ background:rgba(217,126,39,.12); border-color:rgba(217,126,39,.40); }
.ks-result.ks-orange .ks-result__ico{ background:var(--orange); }
.ks-result.ks-neutral{ background:var(--cream-2); border-color:var(--cream-line); }
.ks-result.ks-neutral .ks-result__ico{ background:var(--bg-3); }

/* ---------- Pasek CTA (cta-band) ----------
   Ksiega: tla plaskie. Gradient zostaje na przycisku w srodku. */
.cta-band{ background:var(--cream); border:1px solid var(--cream-line); border-radius:var(--r-lg); padding:clamp(1.6rem,4vw,2.6rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.cta-band h2{ color:var(--ink); margin:0 0 .3rem; }
.cta-band p, .cta-band .lead{ color:var(--ink-soft); margin:0; }
.cta-band .eyebrow{ color:var(--orange); }
.cta-band__actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.cta-band .btn--ghost{ border-color:var(--ink); color:var(--ink); }
.cta-band .btn--ghost:hover{ border-color:var(--orange); color:var(--ink); }

/* ---------- Podstrony: naglowek strony, prose, siatki ---------- */
.page-hero{ background:var(--bg); padding-block:clamp(2.5rem,6vw,4rem); text-align:center; }
.page-hero .eyebrow{ margin-bottom:.6rem; }
.page-hero h1{ max-width:18ch; margin-inline:auto; }
/* Tresci edytorskie (strony prawne, wpisy) potrafia zawierac dlugie adresy URL -
   w polityce prywatnosci sa linki do instrukcji cookies w przegladarkach.
   Bez lamania rozpychaly strone na telefonie (430 px przy oknie 390). */
.prose{ max-width:760px; margin-inline:auto; color:var(--text); overflow-wrap:break-word; }
.prose h2{ margin-top:1.8rem; }
.prose p{ color:var(--text); }
.prose.prose--light, .section--light .prose{ color:var(--ink); }
.section--light .prose p, .section--light .prose li{ color:var(--ink-soft); }
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.tile{ background:rgba(255,255,255,.04); border:1px solid var(--card-line); border-radius:var(--r-lg); padding:1.6rem; }
.tile h3{ font-size:1.1rem; }
.tile p{ color:var(--text-muted); font-size:.95rem; margin:0 0 1rem; }
.section--light .tile{ background:#fff; border-color:var(--cream-line); }
.section--light .tile h3{ color:var(--ink); }
.section--light .tile p{ color:var(--ink-soft); }
/* Kontakt: obie kolumny startują nagłówkiem H2 tej samej wielkości i mają
   ten sam odstęp pod nim, więc formularz i treść obok zaczynają się w jednej
   linii. Wcześniej lewa strona ruszała od razu kaflem i wyglądała na zsuniętą
   w dół, a kończyła się w połowie wysokości formularza. */
/* stretch, nie start: obie kolumny sięgają tej samej wysokości, ale ŻADNA karta
   nie jest już rozciągana, żeby to osiągnąć - lewa strona ma po prostu tyle
   treści, ile trzeba (kroki, cena, kto odbiera telefon, dane firmy). Rozciąganie
   kart było lekarstwem na pustkę i widać było, że to lekarstwo: tekst pływał
   w środku kafla, a kafel rósł bez powodu. */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:stretch; }
.contact-col{ display:flex; flex-direction:column; }
/* Nadmiar wysokości (formularz jest wyższy niż treść obok) rozdzielają auto-
   marginesy na czterech dolnych blokach. Flexbox dzieli wolną przestrzeń RÓWNO
   między wszystkie auto-marginesy, więc zamiast jednej dziury na końcu kolumna
   dostaje nieco szersze odstępy - a żadna karta nie jest rozciągana i tekst
   w niej nie pływa. Tytuł i kroki zostają zwarte, bo ich to nie dotyczy. */
.contact-col > .darmo,
.contact-col > .odbior,
.contact-col > .contact-bezposrednio{ margin-top:auto; }
.contact-col__tytul{ font-size:clamp(1.4rem,2.6vw,1.85rem); margin:0 0 1.1rem; min-height:2.2em; }
/* Kroki jako karty. Wersja z samą osią (kółka + linia) robiła 140 px przerwy
   między krokami i wyglądały na oderwane od siebie; karta trzyma krok w kupie. */
.kroki{
  list-style:none; margin:0 0 1rem; padding:0;
  display:grid; gap:.7rem;
}
.kroki li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
  padding:1rem 1.2rem;
  background:rgba(255,255,255,.04); border:1px solid var(--card-line);
  border-radius:var(--r-md);
}
.kroki__nr{
  width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center;
  background:var(--orange); color:var(--ink);
  font-family:var(--font-head); font-weight:900; font-size:1rem; line-height:1;
}
[data-theme="light"] .kroki li{ background:#fff; border-color:var(--cream-line); }
.kroki__tresc{ display:grid; gap:.25rem; }
.kroki__tresc strong{ font-family:var(--font-head); font-weight:800; font-size:1.02rem; color:var(--text-strong); }
.kroki__tresc > span{ font-size:.92rem; line-height:1.6; color:var(--text-muted); }

/* Puenta strony: cena. Znak "=" jak w sygnecie, kwota największa w kolumnie.
   Tło neutralne jak w pozostałych kartach kolumny: zielona płaszczyzna na
   granacie dawała odcień morski, którego w palecie nie ma. Zieleń zostaje tam,
   gdzie coś znaczy - na znaku i na kwocie (Księga: zieleń dla „za darmo”). */
.darmo{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
  padding:1.2rem 1.3rem; margin-bottom:1.2rem;
  background:rgba(255,255,255,.04); border:1px solid var(--card-line);
  border-left:3px solid var(--green);
  border-radius:var(--r-lg);
}
.darmo__zn{
  width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center;
  background:var(--green); color:#0F2142;
  font-family:var(--font-head); font-weight:900; font-size:1.35rem; line-height:1;
}
.darmo__tresc{ display:grid; gap:.2rem; min-width:0; }
.darmo__tresc strong{
  font-family:var(--font-head); font-weight:900; font-size:1.7rem; line-height:1;
  letter-spacing:-.03em; color:var(--green);
}
.darmo__tresc > span{ font-size:.88rem; line-height:1.55; color:var(--text-muted); }
[data-theme="light"] .darmo{ background:#fff; border-color:var(--cream-line); border-left-color:var(--green-700); }
[data-theme="light"] .darmo__tresc strong{ color:var(--green-700); }
[data-theme="light"] .darmo__tresc > span{ color:var(--ink-soft); }
[data-theme="light"] .kroki__tresc strong{ color:var(--ink); }
[data-theme="light"] .kroki__tresc > span{ color:var(--ink-soft); }

/* „Kto odbierze telefon” - twarze zespołu obsługi zachodzące na siebie.
   Nachodzenie (ujemny margines + obwódka w kolorze tła) zamiast rzędu kafli:
   ma być sygnał „są tu ludzie”, a nie druga galeria zespołu - pełna jest na
   /o-nas/ i tam prowadzi link. */
.odbior{ margin-bottom:1.1rem; }
.odbior__twarze{ display:flex; align-items:center; margin-bottom:.6rem; padding-left:3px; }
.odbior__foto{
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  margin-left:-10px; border:2px solid var(--bg); background:var(--bg-3);
}
.odbior__foto:first-child{ margin-left:0; }
.odbior__foto--ini, .odbior__foto--wiecej{
  display:grid; place-items:center;
  font-family:var(--font-head); font-weight:800; font-size:.78rem; color:var(--text-strong);
}
.odbior__foto--wiecej{ background:var(--orange); color:var(--ink); }
.odbior__opis{ margin:0; font-size:.88rem; line-height:1.6; color:var(--text-muted); }
.odbior__opis a{ color:var(--orange-2); }
[data-theme="light"] .odbior__foto{ border-color:var(--cream); }
[data-theme="light"] .odbior__opis{ color:var(--ink-soft); }
[data-theme="light"] .odbior__opis a{ color:var(--orange-700); }

/* Dane rejestrowe w treści strony. Drobne, ale nie ukryte - na stronie kontakt
   to jest informacja, której się szuka, a nie drobny druk. */
.firma-dane{ display:grid; gap:.15rem; margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--card-line); }
.firma-dane strong{ font-family:var(--font-head); font-weight:800; font-size:.92rem; color:var(--text-strong); }
/* Pełne 44 px, mimo że to tylko adres: na telefonie ten link otwiera nawigację,
   więc trafia się w niego kciukiem w ruchu. */
.firma-dane__adres{ font-size:.88rem; color:var(--text-muted); text-decoration:underline; text-underline-offset:3px; min-height:var(--tap); display:inline-flex; align-items:center; }
.firma-dane__adres:hover{ color:var(--orange-2); }
.firma-dane__rej{ font-size:.76rem; color:var(--text-muted); letter-spacing:.01em; }
[data-theme="light"] .firma-dane{ border-top-color:var(--cream-line); }
[data-theme="light"] .firma-dane strong{ color:var(--ink); }
[data-theme="light"] .firma-dane__adres, [data-theme="light"] .firma-dane__rej{ color:var(--ink-soft); }

/* Kontakt bezpośredni: dwa cele dotykowe na całą szerokość kolumny. */
.contact-bezposrednio{ display:grid; gap:.6rem; }
.contact-bezposrednio__poz{
  display:flex; align-items:center; gap:.8rem; min-height:var(--tap);
  padding:.85rem 1rem; border:1px solid var(--card-line); border-radius:var(--r-md);
  background:rgba(255,255,255,.03); color:var(--text); text-decoration:none; transition:border-color .18s;
}
.contact-bezposrednio__poz:hover{ border-color:rgba(240,156,51,.45); }
.contact-bezposrednio__poz:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.contact-bezposrednio__poz svg{ color:var(--orange); flex:none; }
.contact-bezposrednio__poz span{ display:grid; font-size:.82rem; color:var(--text-muted); line-height:1.4; min-width:0; }
.contact-bezposrednio__poz strong{
  font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text-strong);
  overflow-wrap:anywhere;
}

@media (max-width:860px){
  .tiles{ grid-template-columns:1fr; }
  /* Jedna kolumna pod drugą potrzebuje wyraźniejszej przerwy niż kolumny
     obok siebie - inaczej kontakt bezpośredni skleja się z nagłówkiem
     formularza i wygląda jak jego część. */
  .contact-grid{ grid-template-columns:1fr; gap:clamp(2rem,6vw,2.6rem); }
  /* Na telefonie nagłówki nie stoją już obok siebie, więc rezerwa na dwa
     wiersze tylko dokładałaby pustego miejsca. */
  .contact-col__tytul{ min-height:0; }
  /* Formularz idzie na górę. W dwóch kolumnach argumenty i formularz widać
     naraz; w jednej kolumnie kolejność z desktopu kazałaby przewinąć pięć
     kafli, zanim w ogóle pojawi się pole do wpisania. Kto wszedł na /kontakt/,
     zwykle już zdecydował - argumentacja ma być pod ręką, nie na drodze.
     order zmienia tylko kolejność wizualną; w DOM i dla czytnika ekranu
     „Jak pomagamy” nadal jest pierwsze, a oba bloki mają własny nagłówek. */
  .contact-col:nth-child(2){ order:-1; }
  /* Bez nadmiaru wysokości do rozdania auto-marginesy tylko rozstrzeliwałyby
     kafle na całą długość ekranu. */
  .contact-col > .darmo,
  .contact-col > .odbior,
  .contact-col > .contact-bezposrednio{ margin-top:0; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   SEKCJA PRODUKTOWA (/skd/)
   Odwzorowanie strony "SEKCJA PRODUKTOWA" z Ksiegi marki 1.0.
   Te same komponenty co reszta serwisu - zmienia sie tylko tresc.
   ============================================================ */
.hero--product{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.prod{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.prod__txt h1{ font-size:clamp(1.9rem,3.8vw,2.9rem); max-width:16ch; }
.prod__txt .lead{ max-width:46ch; }
.prod__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* Karta przykladu: kremowa (Ksiega - karty kremowe na tresc/dokument). */
.prod__card{ background:var(--cream); color:var(--ink); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow-card); }
.prod__card-label{ display:block; font-family:var(--font-head); font-weight:700; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:1.1rem; }
.prod__rows{ margin:0; }
.prod__row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px dashed var(--cream-line); }
.prod__row dt{ color:var(--ink-soft); font-size:.98rem; }
.prod__row dd{ margin:0; font-family:var(--font-head); font-weight:800; color:var(--ink); white-space:nowrap; }
.prod__was{ color:var(--ink-mute); font-weight:600; text-decoration:line-through; }
/* Zielen na kremie MUSI byc ciemniejsza: #35C26E na #FAF7F0 to ~2.3:1. */
.prod__zero{ color:var(--green-700); font-weight:800; }
.prod__total{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.1rem; }
/* Pomarancz na kremie ma ~2.9:1 - dla etykiety bierzemy ciemny wariant (4.6:1),
   tak samo jak przy bledach walidacji. Charakter zostaje, czytelnosc rosnie. */
.prod__total-label{ font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; color:var(--orange-700); }
.prod__total-num{ font-size:clamp(1.7rem,3.4vw,2.3rem); color:var(--ink); line-height:1; }
.prod__note{ margin:.9rem 0 0; font-size:.85rem; color:var(--ink-mute); }

/* Kalkulator na podstronie produktowej - wezszy niz pelna szerokosc sekcji. */
.prod__calc{ max-width:760px; margin-inline:auto; }

/* Cztery kafle w rzedzie (domyslne .tiles to trzy - przy czterech robila sie sierota) */
.tiles--4{ grid-template-columns:repeat(4,1fr); }

/* ---------- FAQ (natywne details/summary - dziala bez JS) ---------- */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:.7rem; }
.faq__item{ background:rgba(255,255,255,.04); border:1px solid var(--card-line); border-radius:var(--r-md); }
.faq__item summary{
  cursor:pointer; list-style:none; padding:1.05rem 1.3rem;
  font-family:var(--font-head); font-weight:700; color:var(--text-strong);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-size:1.4rem; font-weight:800; color:var(--orange-2); line-height:1; flex:0 0 auto; }
.faq__item[open] summary::after{ content:"-"; }
.faq__item[open] summary{ color:var(--orange-2); }
.faq__item summary:hover{ color:var(--orange-2); }
.faq__a{ padding:0 1.3rem 1.15rem; }
.faq__a p{ margin:0; color:var(--text); }
.section--light .faq__item{ background:#fff; border-color:var(--cream-line); }
.section--light .faq__item summary{ color:var(--ink); }
.section--light .faq__a p{ color:var(--ink-soft); }

@media (max-width: 980px){
  .prod{ grid-template-columns:1fr; }
  .prod__txt h1, .prod__txt .lead{ max-width:none; }
}
@media (max-width: 860px){
  .tiles--4{ grid-template-columns:1fr; }
}
@media (min-width: 861px) and (max-width: 1100px){
  .tiles--4{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Film (click-to-load) ----------
   Do kliknięcia stoi tu plakat - zero polaczen z zewnetrznym serwisem.
   Reele sa pionowe (9:16), zwykle filmy poziome (16:9) - stad dwa warianty. */
.video{ max-width:760px; margin:0 auto 2.5rem; }
.video--pion{ max-width:400px; }
.video__btn{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:var(--bg-3); border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:16/9; box-shadow:var(--shadow-card);
}
.video--pion .video__btn{ aspect-ratio:9/16; }
.video__poster{ width:100%; height:100%; object-fit:cover; display:block; }
.video__poster--pusty{ display:block; width:100%; height:100%; background:linear-gradient(160deg,#14224A,#0A1730); }
.video__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; background:var(--grad-cta); color:var(--ink);
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(6,12,30,.45);
  transition:transform .15s ease;
}
.video__play svg{ width:32px; height:32px; margin-left:4px; }
.video__btn:hover .video__play{ transform:translate(-50%,-50%) scale(1.07); }
.video__label{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  font-family:var(--font-head); font-weight:800; font-size:.95rem; color:#fff;
  background:rgba(10,23,48,.72); padding:.5rem 1.1rem; border-radius:var(--r-pill); white-space:nowrap;
}
.video__note{ margin:.8rem 0 0; text-align:center; font-size:.82rem; color:var(--text-muted); }
.video__note a{ color:var(--orange-2); text-decoration:underline; }
/* Po kliknieciu: iframe w tej samej ramce co plakat */
.video__frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); background:#000; }
.video--pion .video__frame{ aspect-ratio:9/16; }
.video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Baner zgody na cookies ----------
   Kremowa karta na granacie - te same komponenty co reszta serwisu (Ksiega).
   Siedzi nad trescia, ale nie zaslania jej calkowicie: to pasek u dolu, nie modal. */
/* Padding dolny z --safe-b: bez tego przyciski zgody na iPhonie wchodza pod
   dolny pasek Safari i baner nie da sie zamknac inaczej niz po przewinieciu. */
.cookies{ position:fixed; left:0; right:0; bottom:0; z-index:9999;
  padding:clamp(.7rem,2vw,1.2rem); padding-bottom:calc(clamp(.7rem,2vw,1.2rem) + var(--safe-b)); }
.cookies[hidden]{ display:none; }
.cookies__box{
  max-width:var(--container); margin-inline:auto;
  background:var(--cream); color:var(--ink);
  border:1px solid var(--cream-line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:clamp(1.1rem,2.5vw,1.6rem);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(1rem,3vw,2rem);
  animation:cookies-in .3s ease;
}
@keyframes cookies-in{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .cookies__box{ animation:none; } }
.cookies__title{ font-size:1.05rem; color:var(--ink); margin:0 0 .3rem; }
.cookies__txt p{ margin:0; font-size:.88rem; color:var(--ink-soft); max-width:70ch; }
.cookies__txt a{ color:var(--orange-700); text-decoration:underline; }
.cookies__akcje{ display:flex; gap:.6rem; flex:0 0 auto; }
.cookies__akcje .btn{ padding:.8rem 1.3rem; font-size:.95rem; }
.cookies__akcje .btn--ghost{ border-color:var(--ink-mute); color:var(--ink); }
.cookies__akcje .btn--ghost:hover{ border-color:var(--ink); }
@media (max-width: 860px){
  .cookies__box{ flex-direction:column; align-items:stretch; }
  .cookies__akcje{ flex-direction:column-reverse; }
  .cookies__akcje .btn{ width:100%; }
}

/* Przycisk w stopce wygladajacy jak link ("Ustawienia cookies") */
.footer-link-btn{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline;
}
.footer-link-btn:hover{ color:var(--orange-2); }

/* ============================================================
   ODSTEPSTWA OD KSIEGI MARKI - swiadome decyzje klienta
   Celowo na samym koncu pliku: te reguly maja wygrywac z tym,
   co wyzej, bez uciekania sie do !important.
   ============================================================ */

/* KICKERY UKRYTE (decyzja klienta, 15.07.2026).
   Ksiega 1.0 przewiduje je jako staly element ("/ KICKER SEKCJI": wersaliki,
   rozstrzelenie .13em, waga 700) - to wiec swiadome odstepstwo, nie blad.
   Znaczniki zostaja w szablonach, a teksty w panelu: zeby przywrocic kickery,
   wystarczy usunac ta jedna regule.
   .hero__kicker musi byc wymieniony osobno - ma wlasny display:block wyzej. */
.eyebrow, .hero__kicker{ display:none; }

/* ============================================================
   KALKULATOR 1.9.0 - dwa widoki (siatka + czat).
   Wszystko scope'owane pod #ksCalc, zeby nie kolidowac z reszta strony.
   ============================================================ */
#ksCalc .btn{border:none;border-radius:40px;padding:12px 22px;font-weight:800;font-family:inherit;font-size:.92rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.14s;text-decoration:none;line-height:1;max-width:100%}
#ksCalc .btn--primary{background:linear-gradient(120deg,var(--orange),var(--orange-2));color:#fff;box-shadow:0 8px 18px -10px rgba(184,94,26,.6)}
#ksCalc .btn--primary:hover{filter:brightness(1.03)}
#ksCalc .btn--block{width:100%}
#ksCalc .btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--cream-line)}
#ksCalc .btn--ghost:hover{border-color:var(--orange);color:var(--orange)}
#ksCalc .btn svg{width:17px;height:17px}
#ksCalc .field{margin-bottom:13px}
#ksCalc .field label{display:block;font-weight:700;font-size:.8rem;margin-bottom:6px;color:var(--ink)}
#ksCalc .field input,#ksCalc .field select{width:100%;height:48px;box-sizing:border-box;padding:0 14px;border:1px solid var(--cream-line);border-radius:10px;font-size:1rem;font-family:inherit;font-weight:700;color:var(--ink);background:#fff}
#ksCalc .field select{-webkit-appearance:none;appearance:none;padding-right:38px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2142' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px}
#ksCalc .field input:focus,#ksCalc .field select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
#ksCalc .field .sub{font-weight:600;font-size:.73rem;color:var(--ink-mute);margin-top:5px}
#ksCalc .grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#ksCalc .consent{display:flex;gap:8px;font-size:.75rem;color:var(--ink-soft);font-weight:500;margin:12px 0;line-height:1.4}
#ksCalc .consent a{color:var(--orange)}
#ksCalc .endform .or{display:flex;align-items:center;gap:10px;margin:11px 0 9px;color:var(--ink-mute);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
#ksCalc .endform .or::before,#ksCalc .endform .or::after{content:"";flex:1;height:1px;background:var(--cream-line)}
#ksCalc .endform .alt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){#ksCalc .endform .alt{grid-template-columns:1fr}#ksCalc .grid2{grid-template-columns:1fr}}

/* ---- SIATKA ---- */
#ksCalc .stage{display:grid;grid-template-columns:1.12fr .88fr;gap:20px;align-items:start}
#ksCalc .stage.narrow{grid-template-columns:1fr}
/* waski kontener: sama karta (bez panelu obok/pod), a "dlaczego warto" w dymku */
#ksCalc .stage.solo{grid-template-columns:1fr}
#ksCalc .card{background:var(--cream);color:var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -34px rgba(0,0,0,.35)}
#ksCalc .card__head{background:var(--bg-3);color:#fff;padding:17px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px}
#ksCalc .card__head h2{font-size:1rem;font-weight:800;color:#fff}
#ksCalc .card__head .stepno{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:3px}
#ksCalc .dots{display:flex;gap:5px}
#ksCalc .dot{width:24px;height:4px;border-radius:2px;background:rgba(255,255,255,.16)}
#ksCalc .dot.on{background:var(--orange-2)}
#ksCalc .dot.done{background:rgba(240,156,51,.5)}
#ksCalc .card__body{padding:22px 20px}
/* JEDNA karta: stala szerokosc (max 640), wysokosc dynamiczna (rosnie z trescia). */
#ksCalc .calcwrap{max-width:640px;margin:0 auto}
/* dymek "Dlaczego warto?" w stopce (tylko waski uklad) */
#ksCalc .whybubble{position:relative;background:none;border:none;font-family:inherit;font-weight:700;font-size:.74rem;color:var(--orange);cursor:help;display:inline-flex;align-items:center;gap:5px;padding:0}
#ksCalc .whybubble::before{content:"i";width:15px;height:15px;border-radius:50%;background:var(--orange);color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center;line-height:1}
#ksCalc .whybubble__pop{position:absolute;bottom:calc(100% + 12px);right:0;width:270px;max-width:78vw;background:var(--bg-3);color:#fff;padding:14px 16px;border-radius:12px;font-weight:500;font-size:.8rem;line-height:1.5;text-align:left;box-shadow:0 16px 36px -14px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.12);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:6}
#ksCalc .whybubble__pop::after{content:"";position:absolute;top:100%;right:16px;border:7px solid transparent;border-top-color:var(--bg-3)}
#ksCalc .whybubble:hover .whybubble__pop,#ksCalc .whybubble:focus .whybubble__pop,#ksCalc .whybubble:focus-visible .whybubble__pop{opacity:1;visibility:visible;transform:translateY(0)}
#ksCalc .step h3{font-size:1.15rem;font-weight:800;margin-bottom:5px;color:var(--ink)}
#ksCalc .step .hint{color:var(--ink-soft);font-weight:500;font-size:.88rem;margin-bottom:16px}
#ksCalc .choices{display:grid;grid-template-columns:1fr 1fr;gap:11px}
/* Bez kafelka z piktogramem przy kazdej opcji. Dziewiec identycznych bezowych
   plytek z ikona to dekoracja w pozycji strukturalnej: kropla obok slowa
   "Zalanie" nie mowi nic, czego nie mowi samo slowo, a znak zapytania przy
   "Inne" nie mowi nic w ogole. Etykiety dostaly za to wiecej miejsca. */
#ksCalc .choice{display:flex;align-items:center;gap:12px;padding:16px 17px;border:1px solid var(--cream-line);border-radius:10px;background:#fff;cursor:pointer;font-weight:700;font-size:.95rem;color:var(--ink);text-align:left;transition:.12s;font-family:inherit}
#ksCalc .choice:hover{border-color:var(--orange);background:var(--orange-soft)}
#ksCalc .choice.sel{border-color:var(--orange);background:var(--orange-soft)}
#ksCalc .choice small{display:block;font-weight:600;color:var(--ink-mute);font-size:.75rem;margin-top:2px}
/* Krok "sposob" (wariant A): pytanie plus lista odpowiedzi, dokladnie tak jak
   kazdy inny krok kreatora. Wczesniej byly tu dwie symetryczne karty z plakietka,
   tytulem, opisem i strzalka. Identyczna anatomia po obu stronach plus plakietka
   powtarzajaca tytul to byl caly problem: uklad udawal wybor miedzy roznymi
   rzeczami, a rozni je wylacznie to, ile danych ma uzytkownik.
   Po prawej stronie kazdej odpowiedzi stoi jedyna prawdziwa roznica: co dostanie
   na koncu. */
#ksCalc .forkopts{display:grid;gap:10px}
#ksCalc .forkopt{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:16px 17px;border:1px solid var(--cream-line);border-radius:10px;background:#fff;cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s}
#ksCalc .forkopt:hover{border-color:var(--orange);background:var(--orange-soft)}
#ksCalc .forkopt__txt{display:block;min-width:0}
#ksCalc .forkopt__t{display:block;font-weight:800;font-size:1rem;color:var(--ink);margin-bottom:2px}
#ksCalc .forkopt__s{display:block;font-weight:500;font-size:.85rem;line-height:1.45;color:var(--ink-soft)}
#ksCalc .forkopt__k{margin-left:auto;flex:0 0 auto;padding-top:3px;font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
@media (max-width:560px){
  #ksCalc .forkopt{flex-wrap:wrap}
  #ksCalc .forkopt__k{margin-left:0;padding-top:6px}
}
#ksCalc .nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:12px}
#ksCalc .back{background:none;border:none;color:var(--ink-soft);font-weight:700;cursor:pointer;font-family:inherit;font-size:.88rem}
#ksCalc .foot{background:var(--cream-2);padding:11px 20px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:.74rem;font-weight:700;color:var(--ink-soft);border-top:1px solid var(--cream-line)}
/* Stopka po usunieciu duplikatu trust: zostaje samo "Dlaczego warto?" - subtelny link w prawo. */
#ksCalc .foot--why{justify-content:flex-end;padding:9px 20px}
#ksCalc .foot span{display:flex;align-items:center;gap:5px}
#ksCalc .foot svg{width:13px;height:13px;color:var(--green-700)}
#ksCalc .live{background:var(--bg-3);border-radius:18px;padding:22px 20px;position:sticky;top:20px;border:1px solid rgba(255,255,255,.06)}
#ksCalc .live__kicker{font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:.64rem;color:var(--orange-2);margin-bottom:13px}
#ksCalc .live__amount{font-weight:900;font-size:2.35rem;letter-spacing:-.035em;line-height:1;color:#fff}
#ksCalc .live__amount.dim{color:rgba(255,255,255,.32);font-size:1.4rem}
#ksCalc .live__unit{font-size:1rem;font-weight:800;color:rgba(255,255,255,.55)}
#ksCalc .live__label{font-weight:700;font-size:.88rem;color:rgba(255,255,255,.82);margin-top:6px}
#ksCalc .live__break{margin-top:16px;border-top:1px solid rgba(255,255,255,.1);padding-top:13px;display:flex;flex-direction:column;gap:8px}
#ksCalc .live__row{display:flex;justify-content:space-between;font-size:.82rem}
#ksCalc .live__row span:first-child{color:rgba(255,255,255,.55);font-weight:500}
#ksCalc .live__row span:last-child{font-weight:800;color:#fff}
#ksCalc .live__note{margin-top:15px;font-size:.7rem;color:rgba(255,255,255,.4);font-weight:500;line-height:1.5}
#ksCalc .live__empty{color:rgba(255,255,255,.4);font-size:.85rem;font-weight:500;line-height:1.55}
#ksCalc .dirbox{border:1px solid var(--cream-line);border-left:4px solid var(--orange);border-radius:12px;padding:17px;margin-bottom:15px;background:#fff}
#ksCalc .dirbox.green{border-left-color:var(--green)}
#ksCalc .dirbox .tag{display:inline-block;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.62rem;padding:5px 10px;border-radius:5px;margin-bottom:10px}
#ksCalc .dirbox.green .tag{background:var(--green-soft);color:var(--green-700)}
#ksCalc .dirbox.neutral .tag{background:var(--orange-soft);color:var(--orange)}
#ksCalc .dirbox h4{font-size:1.05rem;font-weight:800;color:var(--ink);margin-bottom:5px}
#ksCalc .dirbox p{font-size:.84rem;color:var(--ink-soft);font-weight:500;line-height:1.5}
#ksCalc .dirbox .big{font-weight:900;font-size:2rem;letter-spacing:-.03em;color:var(--ink);line-height:1;margin-bottom:4px}
#ksCalc .dirbox .big small{font-size:.95rem;font-weight:800;color:var(--ink-soft)}
#ksCalc .dirbox .brk{margin-top:12px;border-top:1px solid var(--cream-line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
#ksCalc .dirbox .brk div{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-soft);font-weight:600}
#ksCalc .dirbox .brk div b{color:var(--ink);font-weight:800}

/* ---- SIATKA: „Licznik wyceny" (dwupanelowy) ----
   Lewy panel granatowy (wycena na zywo: donut + prognoza + co juz wiemy) - bialy tekst
   w obu motywach (jak stopka). Prawy panel kremowy prowadzi przez kroki. */
/* width:100% => widget wypelnia kontener i NIE kurczy sie do tresci (bylby wtedy
   inny na kazdym kroku + wysrodkowany margin-auto = przeskakiwal). Jedna szerokosc,
   wyrownany do lewej krawedzi kolumny. Nadmiar (jesli kontener > 900) wysrodkowuje sie. */
#ksCalc .lc{display:grid;grid-template-columns:238px 1fr;width:100%;max-width:900px;margin-inline:auto;background:var(--cream);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.5)}
#ksCalc .lc--stack{grid-template-columns:1fr}
/* lewy panel */
#ksCalc .lc__panel{background:var(--bg-3);color:#fff;padding:20px 20px 16px;display:flex;flex-direction:column}
#ksCalc .lc__kick{font-weight:800;letter-spacing:.15em;text-transform:uppercase;font-size:.6rem;color:var(--orange-2);margin-bottom:16px}
#ksCalc .lc__kick.is-ok{color:var(--green)}
/* donut postepu */
#ksCalc .lc__donut{position:relative;width:96px;height:96px;margin:0 0 18px}
#ksCalc .lc__ring{width:96px;height:96px;transform:rotate(-90deg)}
#ksCalc .lc__ring-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9}
#ksCalc .lc__ring-fill{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-dasharray:251;transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1)}
#ksCalc .lc__ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#ksCalc .lc__ring-n{font-size:1.25rem;font-weight:800;color:#fff;line-height:1}
#ksCalc .lc__ring-n b{font-weight:700;color:rgba(255,255,255,.4);font-size:.9rem}
#ksCalc .lc__ring-c small{font-size:.55rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:3px}
#ksCalc .lc__ring-ok{color:var(--green);display:grid;place-items:center}
#ksCalc .lc__ring-ok svg{width:34px;height:34px}
/* lista „co juz wiemy" */
#ksCalc .lc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
#ksCalc .lc__li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.8rem;font-weight:600}
#ksCalc .lc__mk{width:16px;height:16px;flex:none;border-radius:50%;display:grid;place-items:center;box-sizing:border-box}
#ksCalc .lc__mk svg{width:11px;height:11px}
#ksCalc .lc__li--done .lc__mk{background:var(--green);color:#fff}
#ksCalc .lc__li--done .lc__lk{color:rgba(255,255,255,.78)}
#ksCalc .lc__li--done .lc__lk b{color:#fff;font-weight:800}
#ksCalc .lc__li--now .lc__mk{border:2px solid var(--orange-2)}
#ksCalc .lc__li--now .lc__lk{color:#fff;font-weight:700}
#ksCalc .lc__li--todo .lc__mk{border:2px solid rgba(255,255,255,.22)}
#ksCalc .lc__li--todo .lc__lk{color:rgba(255,255,255,.4)}
#ksCalc .lc__sep{height:1px;background:rgba(255,255,255,.12);margin:12px 0}
/* prognoza */
#ksCalc .lc__flabel{font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-size:.58rem;color:rgba(255,255,255,.5);margin-bottom:7px}
#ksCalc .lc__famt{font-weight:900;font-size:1.9rem;letter-spacing:-.03em;line-height:1;color:var(--green)}
#ksCalc .lc__famt span{font-size:.85rem;font-weight:800;color:rgba(53,194,110,.6)}
#ksCalc .lc__famt--range{font-size:1.15rem;color:#fff}
#ksCalc .lc__break{margin-top:11px;display:flex;flex-direction:column;gap:6px}
#ksCalc .lc__break div{display:flex;justify-content:space-between;font-size:.75rem}
#ksCalc .lc__break span:first-child{color:rgba(255,255,255,.5);font-weight:500}
#ksCalc .lc__break span:last-child{color:#fff;font-weight:700}
#ksCalc .lc__fnote{margin-top:9px;font-size:.68rem;color:rgba(255,255,255,.4);font-weight:500;line-height:1.5}
#ksCalc .lc__seal{margin-top:auto;padding-top:16px;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.34)}
/* prawy panel */
#ksCalc .lc__main{padding:20px 22px 18px;display:flex;flex-direction:column;min-width:0}
#ksCalc .lc__crumb{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
#ksCalc .lc__stepno{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.6rem;color:var(--orange)}
#ksCalc .lc__seg{display:flex;gap:4px;flex:none}
#ksCalc .lc__seg i{width:24px;height:5px;border-radius:3px;background:var(--cream-line)}
#ksCalc .lc__seg i.done,#ksCalc .lc__seg i.on{background:var(--orange)}
#ksCalc .lc__body{flex:1}
#ksCalc .lc__main .step{background:none;border:none;padding:0}
#ksCalc .lc__main .step:hover{transform:none;box-shadow:none;border-color:transparent}
/* kafle: pojedyncza kolumna dla malej liczby (kategoria = rowne, pelnej szerokosci);
   duze zestawy (>=6, np. 8 zdarzen) w DWOCH kolumnach (4+4) - nie rozciagaja formularza.
   Na mobile (stack) wszystko wraca do jednej kolumny (dlugie etykiety by sie lamaly). */
#ksCalc .lc__main .choices{grid-template-columns:1fr}
#ksCalc .lc__main .choices--dense{grid-template-columns:1fr 1fr}
#ksCalc .lc--stack .lc__main .choices--dense{grid-template-columns:1fr}
#ksCalc .lc__main .choice{padding:15px 18px}
#ksCalc .lc__main .choices--dense .choice{padding:14px 15px}
#ksCalc .lc__hint{margin-top:14px;display:flex;justify-content:flex-end}
/* waski kontener -> panel jako gorny pasek (donut + prognoza obok siebie) */
#ksCalc .lc--stack .lc__panel{flex-direction:row;align-items:center;gap:16px;padding:15px 18px;flex-wrap:wrap}
#ksCalc .lc--stack .lc__kick{width:100%;margin-bottom:2px}
#ksCalc .lc--stack .lc__donut{width:60px;height:60px;margin:0;flex:none}
#ksCalc .lc--stack .lc__ring{width:60px;height:60px}
#ksCalc .lc--stack .lc__ring-n{font-size:.92rem}
#ksCalc .lc--stack .lc__ring-c small{display:none}
#ksCalc .lc--stack .lc__list,#ksCalc .lc--stack .lc__sep,#ksCalc .lc--stack .lc__break,#ksCalc .lc--stack .lc__seal{display:none}
#ksCalc .lc--stack .lc__fore{flex:1;min-width:130px}
#ksCalc .lc--stack .lc__famt{font-size:1.45rem}
#ksCalc .lc--stack .lc__flabel{margin-bottom:3px}
#ksCalc .lc--stack .lc__fnote{margin-top:4px}
#ksCalc .lc--stack .lc__main{padding:18px}
/* kompaktowy dwupanel (kolumna hero ~600px) - wciaz lewo-prawo, ale ciasniej */
#ksCalc .lc--compact{grid-template-columns:198px 1fr}
#ksCalc .lc--compact .lc__panel{padding:18px 15px 13px}
#ksCalc .lc--compact .lc__kick{margin-bottom:12px;font-size:.56rem}
#ksCalc .lc--compact .lc__donut{width:76px;height:76px;margin-bottom:13px}
#ksCalc .lc--compact .lc__ring{width:76px;height:76px}
#ksCalc .lc--compact .lc__ring-n{font-size:1.02rem}
#ksCalc .lc--compact .lc__ring-c small{font-size:.5rem}
#ksCalc .lc--compact .lc__li{font-size:.75rem;gap:8px;padding:4px 0}
#ksCalc .lc--compact .lc__famt{font-size:1.5rem}
#ksCalc .lc--compact .lc__flabel{font-size:.55rem}
#ksCalc .lc--compact .lc__main{padding:18px 18px 16px}
#ksCalc .lc--compact .lc__seg i{width:20px}
#ksCalc .lc--compact .grid2{grid-template-columns:1fr}

/* ---- Makieta laptopa (MacBook) na /kalkulator/ ----
   Kalkulator renderuje sie jako "aplikacja" na ekranie otwartego laptopa:
   ciemna ramka ekranu z kamerka u gory + srebrna podstawa (klawiatura) z wcieciem. */
.laptop{ max-width:900px; margin-inline:auto; }
.laptop__screen{ position:relative; background:#0c0c0f; border-radius:22px 22px 6px 6px; padding:38px 16px 18px;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.65), inset 0 0 0 2px #26262d, inset 0 0 0 3px rgba(0,0,0,.55); }
/* kamerka wtopiona w gorna ramke */
.laptop__cam{ position:absolute; top:17px; left:50%; transform:translateX(-50%); width:7px; height:7px; border-radius:50%;
  background:#1b1f26; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.laptop__cam::after{ content:""; position:absolute; inset:2px; border-radius:50%; background:#33454f; }
/* kalkulator jako aplikacja na ekranie - subtelny cien zamiast wlasnego mocnego */
.laptop__screen .lc{ box-shadow:0 10px 26px -14px rgba(0,0,0,.5); }
/* podstawa (klawiatura) - srebrny trapez szerszy niz ekran, z wcieciem na kciuk */
.laptop__deck{ position:relative; width:106%; margin-left:-3%; height:20px;
  background:linear-gradient(180deg,#e2e6eb 0%,#c2c7cf 55%,#a2a7b0 100%); border-radius:0 0 12px 12px;
  clip-path:polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%); box-shadow:0 14px 22px -10px rgba(0,0,0,.45); }
.laptop__deck::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:rgba(0,0,0,.22); } /* linia zawiasu */
.laptop__notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:14%; height:9px;
  background:#b4b9c1; border-radius:0 0 9px 9px; box-shadow:inset 0 -2px 3px rgba(0,0,0,.18); }
/* MOBILE: makieta laptopa NIE wystepuje - kalkulator jak zwykle (na telefonie laptop
   nie ma sensu i zwezal kalkulator). Zdejmujemy ramke, kamerke i podstawe. */
@media (max-width:760px){
  .laptop__screen{ background:none; padding:0; box-shadow:none; border-radius:0; }
  .laptop__cam, .laptop__deck{ display:none; }
  .laptop__screen .lc{ box-shadow:0 24px 60px -30px rgba(0,0,0,.5); }
}

/* ---- CZAT ---- */
#ksCalc .chat{max-width:520px;margin:0 auto;background:var(--cream);border-radius:18px;overflow:hidden;border:1px solid var(--cream-line);box-shadow:0 24px 60px -34px rgba(0,0,0,.35);display:flex;flex-direction:column;min-height:500px}
#ksCalc .chat__bar{background:var(--bg-3);padding:14px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.06)}
#ksCalc .sig{width:38px;height:38px;flex:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
#ksCalc .sig i{border-radius:3px;background:#fff}
#ksCalc .sig i:nth-child(4){background:var(--orange-2)}
#ksCalc .chat__who b{display:block;font-size:.88rem;font-weight:800;color:#fff}
#ksCalc .chat__who span{font-size:.68rem;color:rgba(255,255,255,.5);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#ksCalc .chat__prog{height:2px;background:rgba(20,34,74,.12)}
#ksCalc .chat__prog i{display:block;height:100%;background:var(--orange);width:0;transition:width .4s ease}
#ksCalc .chat__scroll{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px;max-height:470px}
#ksCalc .msg{max-width:90%;animation:kszpop .26s ease both}
@keyframes kszpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#ksCalc .msg.bot{align-self:flex-start}
#ksCalc .msg.user{align-self:flex-end}
#ksCalc .mb{padding:12px 15px;border-radius:12px;font-size:.89rem;font-weight:600;line-height:1.5}
#ksCalc .bot .mb{background:#fff;color:var(--ink);border:1px solid var(--cream-line);border-top-left-radius:3px}
#ksCalc .user .mb{background:var(--ink);color:#fff;border-top-right-radius:3px;font-weight:700}
#ksCalc .bot .mb b{font-weight:800}
#ksCalc .typing{display:inline-flex;gap:4px;padding:14px 15px;background:#fff;border-radius:12px;border-top-left-radius:3px;border:1px solid var(--cream-line)}
#ksCalc .typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-mute);animation:kszblink 1.2s infinite}
#ksCalc .typing i:nth-child(2){animation-delay:.2s}
#ksCalc .typing i:nth-child(3){animation-delay:.4s}
@keyframes kszblink{0%,60%,100%{opacity:.25}30%{opacity:1}}
#ksCalc .answers{padding:12px 16px 16px;background:var(--cream-2);border-top:1px solid var(--cream-line)}
#ksCalc .opts{display:flex;flex-direction:column;gap:8px}
#ksCalc .opt{border:1px solid var(--cream-line);background:#fff;border-radius:10px;padding:11px 14px;font-weight:700;font-size:.88rem;color:var(--ink);cursor:pointer;font-family:inherit;transition:.12s;display:inline-flex;align-items:center;gap:11px;text-align:left}
#ksCalc .opt:hover{border-color:var(--orange);background:var(--orange-soft)}
#ksCalc .opt:hover .ico{color:var(--orange);border-color:var(--orange)}
#ksCalc .opt.full{width:100%}
#ksCalc .opt.full>span:not(.ico){flex:1}
#ksCalc .opt small{display:block;font-weight:600;font-size:.71rem;color:var(--ink-mute)}
#ksCalc .inrow{display:flex;gap:8px}
#ksCalc .inrow input{flex:1;padding:12px 14px;border:1px solid var(--cream-line);border-radius:10px;font-size:1.02rem;font-weight:800;font-family:inherit;color:var(--ink);background:#fff}
#ksCalc .inrow input:focus,#ksCalc .inrow select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
#ksCalc .inrow select{flex:1;height:50px;box-sizing:border-box;padding:0 40px 0 14px;border:1px solid var(--cream-line);border-radius:10px;font-size:1.02rem;font-weight:800;font-family:inherit;color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2142' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
#ksCalc .send{border:none;border-radius:10px;padding:0 16px;background:var(--ink);color:#fff;font-weight:800;cursor:pointer;font-family:inherit;display:grid;place-items:center}
#ksCalc .send:hover{background:var(--bg-3)}
#ksCalc .send svg{width:19px;height:19px}
#ksCalc .skip{background:none;border:none;color:var(--ink-mute);font-weight:700;font-size:.78rem;cursor:pointer;font-family:inherit;margin-top:9px}
#ksCalc .backbar{margin-bottom:9px}
#ksCalc .backbar button{background:none;border:none;color:var(--ink-soft);font-weight:700;font-size:.8rem;cursor:pointer;font-family:inherit}
#ksCalc .rescard{border-radius:12px;padding:17px;background:#fff;border:1px solid var(--cream-line);border-left:4px solid var(--orange)}
#ksCalc .rescard.green{border-left-color:var(--green)}
#ksCalc .rescard .kick{font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:.62rem;color:var(--orange);margin-bottom:9px}
#ksCalc .rescard.green .kick{color:var(--green-700)}
#ksCalc .rescard .tag{display:inline-block;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.62rem;padding:5px 10px;border-radius:5px;margin-bottom:10px}
#ksCalc .rescard.green .tag{background:var(--green-soft);color:var(--green-700)}
#ksCalc .rescard.neutral .tag{background:var(--orange-soft);color:var(--orange)}
#ksCalc .rescard .big{font-weight:900;font-size:2.05rem;letter-spacing:-.035em;color:var(--ink);line-height:1}
#ksCalc .rescard .big small{font-size:.95rem;font-weight:800;color:var(--ink-soft)}
#ksCalc .rescard .cap{font-weight:800;font-size:.9rem;color:var(--ink);margin-bottom:9px;line-height:1.35}
#ksCalc .rescard .brk{margin-top:13px;border-top:1px solid var(--cream-line);padding-top:11px;display:flex;flex-direction:column;gap:7px}
#ksCalc .rescard .brk div{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-soft);font-weight:600}
#ksCalc .rescard .brk div b{color:var(--ink);font-weight:800}
#ksCalc .rescard .disc{font-size:.71rem;color:var(--ink-mute);font-weight:500;line-height:1.5;margin-top:11px}

/* --- Galaz NIERUCHOMOSCI: ekran wyniku (rownanie kwot + 3 modele wspolpracy) --- */
#ksCalc .nres{border:1px solid var(--cream-line);border-left:4px solid var(--green);border-radius:12px;padding:17px;background:#fff;margin-bottom:14px}
#ksCalc .nres .kick{font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:.62rem;color:var(--green-700);margin-bottom:9px}
#ksCalc .nres__amt{font-weight:900;font-size:1.8rem;letter-spacing:-.03em;color:var(--green);line-height:1.05}
#ksCalc .nres__lab{font-weight:700;font-size:.82rem;color:var(--ink-soft);margin-top:4px}
#ksCalc .nres__eq{margin-top:13px;border-top:1px solid var(--cream-line);padding-top:11px;display:flex;flex-direction:column;gap:7px}
#ksCalc .nres__row{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;color:var(--ink-soft);font-weight:600}
#ksCalc .nres__row b{color:var(--ink);font-weight:800;white-space:nowrap}
#ksCalc .nres__row--sum{border-top:1px dashed var(--cream-line);padding-top:8px;margin-top:1px}
#ksCalc .nres__row--sum span{color:var(--ink);font-weight:800}
#ksCalc .nres__row--sum b{color:var(--green-700)}
#ksCalc .nres__disc{font-size:.71rem;color:var(--ink-mute);font-weight:500;line-height:1.5;margin-top:11px}

#ksCalc .nres__ptitle{font-weight:800;font-size:.9rem;color:var(--ink);margin:2px 0 9px}
#ksCalc .nres__models{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:8px}
#ksCalc .nmodel{border:1px solid var(--cream-line);border-radius:11px;padding:12px;background:var(--cream-2)}
#ksCalc .nmodel--hi{background:#fff;border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
#ksCalc .nmodel__badge{display:inline-block;font-weight:800;font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green-700);background:var(--green-soft);border-radius:4px;padding:2px 6px;margin-bottom:6px}
#ksCalc .nmodel__t{font-weight:800;font-size:.82rem;color:var(--ink);margin-bottom:4px}
#ksCalc .nmodel--hi .nmodel__t{color:var(--green-700)}
#ksCalc .nmodel__p{font-weight:600;font-size:.74rem;color:var(--ink-soft);line-height:1.4}
#ksCalc .nres__pick{font-size:.75rem;color:var(--ink-mute);font-weight:600;margin:0 0 14px;line-height:1.45}

#ksCalc .ndrop{display:block;border:1.5px dashed var(--cream-line);border-radius:10px;padding:11px 13px;font-size:.76rem;font-weight:600;color:var(--ink-soft);background:var(--cream-2);cursor:pointer;line-height:1.4;margin:2px 0}
#ksCalc .ndrop b{color:var(--ink);font-weight:800}
#ksCalc .ndrop input{display:none}
#ksCalc .ndrop__files{font-size:.72rem;color:var(--green-700);font-weight:700;margin-top:7px}
@media(max-width:520px){#ksCalc .nres__models{grid-template-columns:1fr}}
@media(max-width:420px){#ksCalc .nres__amt{font-size:1.45rem}}

/* toast (globalny, poza kalkulatorem) */
.ksz-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-weight:700;font-size:.86rem;opacity:0;transition:.25s;z-index:9999;box-shadow:0 12px 30px -12px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);max-width:calc(100% - 32px)}
.ksz-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   Pasek "Ostatnie sprawy" (rotujace przypadki doplat) - identyfikacja KS.
   Dyskretny pasek na glebszym granacie, miedzy hero a paskiem 3 akcji.
   ============================================================ */
/* Ukrycie wizualne z zachowaniem elementu w drzewie dostępności.
   width/height MUSZĄ mieć !important: od kiedy klasa trafiła na pola formularza,
   konkuruje z .field input{width:100%} (0,1,1 bije 0,1,0) - schowany input brał
   pełną szerokość rodzica, a że jest pozycjonowany absolutnie i bez offsetów,
   rozpychał dokument do 2590 px przy oknie 1440 i robił poziomy scroll.
   clip-path obok przestarzałego clip - razem działa wszędzie. */
.ks-visually-hidden{ position:absolute!important; width:1px!important; height:1px!important; min-height:0!important; padding:0!important; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0!important; }
/* "Ostatnie doplaty" - D4: ring z % + duza kwota, BEZ kafelka.
   Na desktopie plywa OBOK - miedzy tekstem a Bartkiem (pozycja absolutna nizej). */

/* ============================================================
   OPINIE GOOGLE (profil XALTUM)
   Karty na kremie, bo Ksiega wiaze krem z dokumentem - a cytat jest
   dokumentem, nie ozdoba. Na telefonie jada poziomo z podgladem nastepnej.
   ============================================================ */
.greviews__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; }
.greviews__head h2{ margin-bottom:.4rem; }
.greviews__head .lead{ margin:0; }
.greviews__score{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.greviews__num{ font-size:2.4rem; color:var(--ink); line-height:1; }
.greviews__stars{ color:#F5B300; font-size:1.1rem; letter-spacing:.08em; }
.greviews__meta{ font-weight:600; font-size:.86rem; color:var(--ink-soft); }

/* Slider: jedna scieżka przewijana poziomo, z zatrzaskiem na karcie.
   Ta sama mechanika na kazdym ekranie - zmienia sie tylko, ile kart widac. */
.greviews__slider{ position:relative; }
.greviews__list{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * var(--gap)) / 3);
  gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-width:none; scroll-padding-inline:0;
  /* Miejsce na cien i obrys kart, zeby nie byly przycinane przy przewijaniu. */
  padding-block:4px;
}
.greviews__list::-webkit-scrollbar{ display:none; }
.greview{ scroll-snap-align:start; }

/* Strzalki poza kolumna tresci - nie zaslaniaja kart. */
.greviews__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:var(--tap); height:var(--tap); border-radius:50%;
  background:#fff; border:1px solid var(--cream-line); color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(20,34,74,.12); transition:background .15s, opacity .15s;
}
.greviews__arrow:hover{ background:var(--cream-2); }
.greviews__arrow:disabled{ opacity:.35; cursor:default; }
.greviews__arrow--prev{ left:calc(var(--tap) / -2); }
.greviews__arrow--next{ right:calc(var(--tap) / -2); }
@media (max-width:1180px){
  /* Ponizej tej szerokosci nie ma marginesu na strzalki obok kolumny tresci. */
  .greviews__arrow--prev{ left:4px; }
  .greviews__arrow--next{ right:4px; }
}

.greviews__dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.2rem; }
.greviews__dot{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:var(--ink-mute); opacity:.4; cursor:pointer; transition:opacity .15s, background .15s;
  /* Kropka jest mala, ale cel dotykowy ma 44 px (Ksiega + WCAG). */
  position:relative;
}
.greviews__dot::after{ content:""; position:absolute; inset:-18px; }
.greviews__dot[aria-current="true"]{ background:var(--orange); opacity:1; }
.greview{
  background:#fff; border:1px solid var(--cream-line); border-radius:var(--r-lg);
  padding:clamp(1.1rem,2.2vw,1.5rem); display:flex; flex-direction:column; gap:.9rem;
}
.greview__head{ display:flex; align-items:center; gap:.7rem; }
/* Inicjal pod spodem: gdy Google odda 403 na awatarze, karta nie zostaje z dziura. */
.greview__avatar{
  position:relative; width:44px; height:44px; flex:0 0 auto; border-radius:50%;
  background:var(--cream-2); display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-head); font-weight:800; color:var(--ink-soft);
}
.greview__avatar::before{ content:attr(data-inicjal); }
/* Cztery tony kółka z inicjałem - z palety marki, każdy z kontrastem tekstu
   powyżej 4.5:1. Wariant wybiera PHP na podstawie imienia, więc ta sama osoba
   ma zawsze ten sam kolor. */
.greview__avatar--t0{ background:rgba(217,126,39,.16); color:#8A4E12; }
.greview__avatar--t1{ background:rgba(20,34,74,.10);  color:#14224A; }
.greview__avatar--t2{ background:rgba(53,194,110,.16); color:#12693A; }
.greview__avatar--t3{ background:rgba(90,101,128,.14); color:#3D465C; }
.greview__kto{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.greview__kto strong{ font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:.95rem; }
.greview__kto span{ font-size:.78rem; color:var(--ink-mute); font-weight:600; }
.greview__g{ flex:0 0 auto; }
.greview__tekst{ margin:0; font-size:.92rem; line-height:1.6; color:var(--ink-soft); }
.greviews__cta{ margin:1.8rem 0 0; text-align:center; }

@media (max-width:980px){
  .greviews__list{ grid-auto-columns:calc((100% - var(--gap)) / 2); }
}
@media (max-width:640px){
  /* Peek 28 px na nastepnej karcie - najmocniejszy sygnal "jest wiecej". */
  .greviews__list{ grid-auto-columns:calc(100% - 28px); }
  .greviews__head{ gap:1rem; }
  /* Na telefonie prowadzi kciuk, nie strzalki - te zabralyby miejsce karcie. */
  .greviews__arrow{ display:none; }
}

/* ============================================================
   RÓWNANIE MARKI (Księga marki 1.0, rozdz. 04)
   WYPŁACONO / WARTOŚĆ SZKODY / BRAKUJE / = DO ODZYSKANIA.

   Trzy rzeczy są tu systemem, nie stylem:
   1. BRAKUJE to JEDYNY pomarańczowy składnik (reguła "jeden akcent").
   2. = DO ODZYSKANIA jest największe, minimum 2x składniki, w zieleni.
   3. Etykiety stoją NAD liczbą albo z lewej, nigdy pod nią.
   ============================================================ */
.eq{ display:grid; gap:.55rem; }
/* Własna klasa, nie .eyebrow: kickery sekcji są w motywie wyłączone decyzją
   klienta, a ten identyfikuje sprawę, z której pochodzą liczby. */
.eq__kicker{
  display:block; margin-bottom:.4rem;
  font-family:var(--font-head); font-weight:700; font-size:.68rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--orange);
}
.eq__kicker::before{ content:"/ "; }
.eq--on-dark .eq__kicker{ color:var(--orange-2); }
.eq__row{ display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem; }
.eq__label{
  font-family:var(--font-head); font-weight:700; font-size:.68rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute);
  white-space:nowrap;
}
.eq__val{ font-size:1.35rem; color:var(--ink); white-space:nowrap; }

/* BRAKUJE: napięcie. Jedyne miejsce na pomarańcz w całym komponencie. */
.eq__row--brakuje .eq__label,
.eq__row--brakuje .eq__val{ color:var(--orange); }

/* = DO ODZYSKANIA: rozwiązanie. Linia 2px oddziela wynik od składników. */
.eq__row--wynik{
  margin-top:.35rem; padding-top:.7rem; border-top:2px solid var(--cream-line);
  align-items:center;
}
.eq__row--wynik .eq__label{ color:var(--green-700); }
.eq__row--wynik .eq__val{ color:var(--green-700); font-size:2.7rem; line-height:1; }

.eq__note{ margin:.5rem 0 0; font-size:.78rem; font-weight:500; color:var(--ink-mute); line-height:1.45; }

/* Wariant na granacie (hero, sekcje ciemne). */
.eq--on-dark .eq__label{ color:var(--text-muted); }
.eq--on-dark .eq__val{ color:var(--cream); }
.eq--on-dark .eq__row--brakuje .eq__label,
.eq--on-dark .eq__row--brakuje .eq__val{ color:var(--orange-2); }
.eq--on-dark .eq__row--wynik{ border-top-color:rgba(227,220,200,.35); }
.eq--on-dark .eq__row--wynik .eq__label,
.eq--on-dark .eq__row--wynik .eq__val{ color:var(--green); }
.eq--on-dark .eq__note{ color:var(--text-muted); }

/* Prezentacja równania na stronie kalkulatora: tekst z lewej, liczby z prawej.
   Na kremie, bo Księga wiąże kremową kartę z "dokumentem" - a to jest właśnie
   wyciąg z zakończonej sprawy, nie ozdoba sekcji. */
.eq-showcase{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  background:var(--cream-2); border:1px solid var(--cream-line);
  border-radius:var(--r-lg); padding:clamp(1.4rem,3.5vw,2.6rem);
}
.eq-showcase__intro h2{ margin-bottom:.6rem; }
.eq-showcase__intro p{ color:var(--ink-soft); margin:0; max-width:38ch; }
@media (max-width: 860px){
  .eq-showcase{ grid-template-columns:1fr; gap:1.6rem; }
}

/* Mobile: kwota wyniku minimum 40 px (Księga, rozdz. 06 - typografia mobilna).
   Wiersz wyniku łamie się na dwie linie: etykieta NAD kwotą. Księga dopuszcza
   etykietę nad liczbą albo z lewej (nigdy pod), a przy 40 px i kwotach
   pięciocyfrowych układ w jednej linii nie mieści się w 362 px kolumny. */
@media (max-width: 640px){
  .eq__val{ font-size:1.2rem; }
  .eq__label{ font-size:.62rem; }
  .eq__row--wynik{ display:block; }
  .eq__row--wynik .eq__label{ display:block; margin-bottom:.15rem; }
  .eq__row--wynik .eq__val{ font-size:2.5rem; display:block; }
}

.ks-cases{ text-align:left; }
.ks-cases__kicker{ display:block; font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.64rem; color:var(--orange-2); }
/* Rodzaj szkody i miasto: dwa rownorzedne wymiary tej samej sprawy, oddzielone
   kropka srodkowa. Etykieta "Ostatnia doplata" stoi nad nimi jako osobny wiersz. */
.ks-cases__where{ display:block; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.68rem; color:var(--text-muted); margin-top:2px; }
.ks-cases__d4{ display:flex; align-items:center; gap:18px; margin-top:9px; }
/* --pct rejestrowany jako <percentage>, zeby dalo sie go ANIMOWAC (dopelnianie ringu).
   JS (cases-ticker.js) ustawia 0% -> wartosc, a transition wypelnia zielony luk. */
@property --pct{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
.ks-cases__ring{ width:104px; height:104px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--green) var(--pct,60%), rgba(255,255,255,.14) 0); position:relative;
  filter:drop-shadow(0 8px 20px rgba(53,194,110,.25)); transition:opacity .3s ease, --pct 2.7s cubic-bezier(.22,.8,.2,1); }
.ks-cases__ring::after{ content:""; position:absolute; inset:10px; border-radius:50%; background:var(--bg); }
.ks-cases__ring b{ position:relative; z-index:1; font-weight:900; font-size:1.25rem; color:var(--green); }
.ks-cases__amt{ font-weight:900; letter-spacing:-.03em; color:var(--green); line-height:1; font-size:2.3rem; white-space:nowrap; transition:opacity .3s ease; }
.ks-cases__sub{ margin-top:5px; font-weight:700; font-size:.88rem; color:rgba(255,255,255,.62); transition:opacity .3s ease; }
[data-cases-where]{ transition:opacity .3s ease; }

/* DESKTOP 981-1279 px: dowod (ostatnia doplata) stoi w gornym pasie po prawej,
   nad Bartkiem. Od 1280 px wchodzi uklad trzykolumnowy (patrz sekcja hero--figure
   wyzej): haslo | doplata | Bartek. */
@media (min-width:981px){
  /* Na desktopie jest miejsce - kicker i podpis w JEDNEJ linii (bez zawijania). */
  .hero__proof .ks-cases{ text-align:left; max-width:none; }
  .hero__proof .ks-cases__kicker{ white-space:nowrap; }
  /* Podpis "o X% więcej niż wypłacił ubezpieczyciel" jest za długi na jedną
     linię przy stałej szerokości bloku, więc łamie się na dwie. Rezerwa
     wysokości (min-height) jest po to, żeby przy rotacji spraw nic nie
     podskakiwało, gdy raz wypadnie jedna linia, a raz dwie. */
  .hero__proof .ks-cases__sub{
    white-space:normal; max-width:24ch; min-height:2.7em; text-wrap:balance;
  }
  /* Blok ma STALA szerokosc i tresc do lewej -> pierscien i kwota stoja w miejscu
     przy rotacji (nie skacza prawo/lewo). Zmienny zolty kicker rozszerza sie w prawo
     w ramach tej szerokosci - jako jedyny sie przesuwa, jesli tekst jest dluzszy. */
  .hero--figure .hero__proof{ width:360px; }
  .hero__proof .ks-cases__d4{ justify-content:flex-start; }
}
@media (max-width:980px){
  .ks-cases__d4{ justify-content:flex-start; }   /* mobile: przyklejone do lewej, nie wysrodkowane */
  .ks-cases__amt{ font-size:2rem; }
  .ks-cases__ring{ width:88px; height:88px; }
}
/* Telefon: "ostatnia doplata" nie moze przytlaczac naglowka - mniejszy pierscien i kwota.
   MUSI byc PO bloku 980 (ta sama specyficznosc - wygrywa kolejnosc w zrodle). */
@media (max-width:640px){
  .ks-cases__kicker{ font-size:.6rem; }
  .ks-cases__d4{ gap:12px; margin-top:6px; }
  .ks-cases__ring{ width:58px; height:58px; }
  .ks-cases__ring::after{ inset:7px; }
  .ks-cases__ring b{ font-size:.82rem; }
  .ks-cases__amt{ font-size:1.45rem; }
  .ks-cases__sub{ font-size:.76rem; margin-top:2px; min-height:2.7em; }
}
@media (prefers-reduced-motion: reduce){
  .ks-cases__ring, .ks-cases__amt, .ks-cases__sub, [data-cases-where]{ transition:none; }
}

/* Czat (mobile): zamiast "logo" - trust: bezplatna analiza / wyplata w 3 dni */
#ksCalc .chat__trust{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
#ksCalc .chat__trust span{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; color:rgba(255,255,255,.9); }
#ksCalc .chat__trust svg{ width:14px; height:14px; color:var(--green); flex:none; }

/* ============================================================
   MOTYW JASNY  [data-theme="light"]  - odwrocenie: bez/krem prowadzi.
   Wg Ksiegi marki, dobor per miejsce:
   - strona / hero / sekcje  -> bez, tekst granatowy
   - karty (kalkulator, opinie, trust, poradnik, kroki) -> biale na bezu
   - GRANATOWE ELEMENTY (kontrast): pasek 3 akcji + stopka + akcenty w karcie
     kalkulatora (naglowek/panel/dymki - te uzywaja --bg-3, ktory ZOSTAJE granatowy)
   Domyslny motyw ustawia admin (data-theme na <html>), gosc przelacza (localStorage).
   Zrodlo prawdy = tokeny: flipujemy powierzchnie strony + tekst; --bg-3/--card granat.
   ============================================================ */
[data-theme="light"]{
  --bg:          #EFE8D9;   /* strona: bez */
  --bg-2:        #E7DFCC;   /* pasy jasne / section--alt: glebszy bez */
  /* --bg-3 (#14224A) i --card ZOSTAJA granatowe - to celowe akcenty */
  --card-line:   rgba(20,34,74,.13);   /* hairline kart na jasnym = granat alfa */
  --cream:       #FBF8F2;   /* karty / section--light / calc: cieply bialy (nad bezem) */
  --text:        #46506A;   /* tekst na jasnej stronie: przygaszony granat */
  --text-strong: #14224A;   /* naglowki: granat */
  --text-muted:  #6E7893;
  --shadow-card: 0 18px 44px rgba(20,34,74,.12);
}

/* --- Logo: wariant per motyw (obwodka kola = tlo naglowka danego motywu) --- */
.site-logo__light{ display:none; }
[data-theme="light"] .site-logo__dark{ display:none; }
[data-theme="light"] .site-logo__light{ display:inline-flex; }

/* --- Przelacznik motywu (slonce w ciemnym = idz w jasny; ksiezyc w jasnym = idz w ciemny) --- */
.theme-toggle{ display:inline-grid; place-items:center; width:40px; height:40px; border:0; background:transparent; color:#fff; cursor:pointer; border-radius:10px; transition:background .15s, color .15s; flex:0 0 auto; }
.theme-toggle:hover{ color:var(--orange-2); background:rgba(255,255,255,.08); }
.theme-toggle svg{ display:block; }
.theme-toggle__moon{ display:none; }
[data-theme="light"] .theme-toggle{ color:var(--ink); }
[data-theme="light"] .theme-toggle:hover{ color:var(--orange); background:rgba(20,34,74,.06); }
[data-theme="light"] .theme-toggle__sun{ display:none; }
[data-theme="light"] .theme-toggle__moon{ display:block; }

/* --- Naglowek + pasek gorny -> jasne --- */
[data-theme="light"] .site-header{ background:rgba(250,247,240,.92); border-bottom-color:rgba(20,34,74,.10); }
[data-theme="light"] .nav a{ color:var(--ink); }
[data-theme="light"] .nav a:hover{ color:var(--orange); }
[data-theme="light"] .header-phone{ color:var(--ink); }
[data-theme="light"] .header-phone span{ color:var(--orange); }
[data-theme="light"] .nav-toggle span{ background:var(--ink); }
[data-theme="light"] .nav.is-open{ background:var(--cream); border-bottom-color:var(--card-line); }
[data-theme="light"] .topbar{ background:var(--bg-2); color:var(--ink-soft); border-bottom-color:rgba(20,34,74,.08); }
[data-theme="light"] .topbar__phone{ color:var(--ink); }

/* --- Hero: tekst granatowy; akcent H1 jako marker (na jasnym pomarancz = marker, nie tekst) --- */
[data-theme="light"] .hero{ color:var(--ink); }
[data-theme="light"] .hero .txt-orange{ color:var(--ink); background:var(--orange-2); box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:.02em .22em; border-radius:4px; }
[data-theme="light"] .hero__figure img{ filter:none; }

/* --- "Ostatnia doplata": tor ringu granat-alfa; dziura w kolor strony (var(--bg) sam flipuje) --- */
[data-theme="light"] .ks-cases__ring{ background:conic-gradient(var(--green) var(--pct,60%), rgba(20,34,74,.12) 0); }
[data-theme="light"] .ks-cases__kicker{ color:var(--orange); }
[data-theme="light"] .ks-cases__sub{ color:var(--ink-soft); }

/* --- Karty na jasnym: biale + granatowy tekst (byly bialy-alfa na granacie) --- */
[data-theme="light"] .step,
[data-theme="light"] .review,
[data-theme="light"] .post-card,
[data-theme="light"] .tile{ background:var(--cream); border-color:var(--card-line); box-shadow:0 8px 24px rgba(20,34,74,.07); }
[data-theme="light"] .step h3,
[data-theme="light"] .tile h3{ color:var(--ink); }
[data-theme="light"] .step p,
[data-theme="light"] .tile p{ color:var(--ink-soft); }
[data-theme="light"] .post-card h3{ color:var(--ink); }
[data-theme="light"] .post-card__img{ background:var(--bg-2); }
[data-theme="light"] .review__name{ color:var(--ink); }
[data-theme="light"] .review__name span{ color:var(--ink-mute); }
[data-theme="light"] .review p{ color:var(--ink-soft); }
[data-theme="light"] .review .stars,
[data-theme="light"] .stars{ color:var(--orange); }

/* --- Badge zaufania: ikona wyrazna na jasnym --- */
[data-theme="light"] .trust__ico{ background:rgba(217,126,39,.14); color:var(--orange); border:1px solid rgba(217,126,39,.28); }
[data-theme="light"] .trust__item h3{ color:var(--ink); }
[data-theme="light"] .trust__item p{ color:var(--ink-soft); }
[data-theme="light"] .trust__item:hover .trust__ico{ background:var(--orange); color:#fff; }

/* --- Sekcje: naglowki granat (juz z --text-strong), lead przygaszony granat --- */
[data-theme="light"] .lead{ color:var(--ink-soft); }

/* ============ ELEMENTY, KTORE ZOSTAJA GRANATOWE (akcenty na bezu) ============ */
/* Pasek 3 akcji: granatowy pas, biala tresc */
[data-theme="light"] .action-bar,
[data-theme="light"] .action-bar a{ background:#14224A; color:#fff; }
[data-theme="light"] .action-bar a:hover{ background:#0F2142; color:#fff; }
[data-theme="light"] .action-bar strong{ color:#fff; }
[data-theme="light"] .action-bar span{ color:rgba(255,255,255,.6); }
[data-theme="light"] .action-bar__grid{ background:rgba(255,255,255,.12); }

/* Stopka: granatowa, biala tresc */
[data-theme="light"] .site-footer{ background:#14224A; color:rgba(255,255,255,.55); }
[data-theme="light"] .site-footer h3{ color:#fff; }
[data-theme="light"] .site-footer a{ color:rgba(255,255,255,.55); }
[data-theme="light"] .site-footer a:hover{ color:var(--orange-2); }
[data-theme="light"] .footer-bottom{ border-top-color:rgba(255,255,255,.1); color:rgba(255,255,255,.5); }
[data-theme="light"] .footer-disclaimer{ color:rgba(255,255,255,.5); }

/* Toast social-proof: zostaje granatowy (uzywa --bg-3), przywroc bialy tekst */
[data-theme="light"] .live-toast{ border-color:rgba(255,255,255,.1); }
[data-theme="light"] .live-toast__txt{ color:rgba(255,255,255,.85); }
[data-theme="light"] .live-toast__txt span{ color:rgba(255,255,255,.6); }

/* ============================================================
   Case study - historie klientow (/case-study/)
   ============================================================ */
.cs-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.2rem,4vw,3rem); margin:1.8rem 0 0; padding:0; list-style:none; }
.cs-stats li{ display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.cs-stats strong{ font-family:var(--font-head); font-weight:900; font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--orange); line-height:1.1; }
.cs-stats span{ font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.72; }

.cs-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.8rem; }
.cs-filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cs-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border:2px solid var(--cream-line); border-radius:999px; background:transparent; color:inherit; font:inherit; font-weight:700; font-size:.85rem; cursor:pointer; transition:border-color .18s, background .18s, color .18s; }
.cs-chip:hover{ border-color:var(--orange); }
.cs-chip.is-active{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.cs-chip__cnt{ padding:.1rem .5rem; border-radius:999px; background:rgba(0,0,0,.14); font-size:.72rem; font-weight:800; }
.cs-sort{ display:flex; align-items:center; gap:.6rem; }
.cs-sort label{ font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.72; }
.cs-sort select{ padding:.55rem 1rem; border:2px solid var(--cream-line); border-radius:var(--r-md); background:#fff; color:var(--ink); font:inherit; font-weight:700; font-size:.85rem; cursor:pointer; }
.cs-sort select:focus{ border-color:var(--orange); outline:none; }

.cs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr)); gap:1.2rem; align-items:start; }
.cs-card{ display:flex; flex-direction:column; gap:.9rem; padding:clamp(1.2rem,2.6vw,1.6rem); border:1px solid var(--cream-line); border-radius:var(--r-lg); background:var(--cream); }
.cs-card[hidden]{ display:none; }
.cs-card__title{ margin:0; font-size:1.12rem; font-weight:800; color:var(--ink); }
.cs-card__meta{ display:flex; flex-wrap:wrap; gap:.4rem .7rem; margin:.3rem 0 0; font-size:.78rem; font-weight:600; color:var(--ink-mute); }
.cs-card__insurer{ font-weight:800; color:var(--ink-soft); }
.cs-card__kat{ padding:.1rem .55rem; border-radius:999px; background:var(--orange-soft); color:var(--orange-700); font-weight:700; }

.cs-card__money{ display:flex; align-items:center; gap:.8rem; padding:.9rem 0; border-block:1px solid var(--cream-line); }
.cs-money{ display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:0; }
.cs-money__label{ font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); }
.cs-money__val{ font-family:var(--font-head); font-weight:900; font-size:1.02rem; white-space:nowrap; }
.cs-money__val--before{ color:var(--ink-mute); text-decoration:line-through; text-decoration-thickness:1px; }
.cs-money__val--after{ color:var(--ink); }
.cs-money__arrow{ flex:0 0 auto; color:var(--orange); font-size:1.15rem; font-weight:800; }

.cs-card__gain{ display:flex; flex-direction:column; gap:.1rem; margin:0; }
.cs-card__gain strong{ font-family:var(--font-head); font-weight:900; font-size:1.35rem; color:var(--green); line-height:1.1; }
.cs-card__gain span{ font-size:.74rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-mute); }
.cs-card__desc{ margin:0; font-size:.92rem; line-height:1.6; color:var(--ink-soft); }
.cs-card__quote{ margin:0; padding-left:.9rem; border-left:3px solid var(--orange); font-style:italic; color:var(--ink-soft); }
.cs-card__quote p{ margin:0 0 .3rem; }
.cs-card__quote cite{ font-size:.8rem; font-weight:700; font-style:normal; color:var(--ink-mute); }
.cs-note{ margin-top:1.6rem; font-size:.8rem; color:var(--ink-mute); text-align:center; }

@media (max-width:640px){
	.cs-toolbar{ flex-direction:column; align-items:stretch; }
	.cs-sort{ justify-content:space-between; }
	.cs-card__money{ flex-direction:column; align-items:stretch; gap:.5rem; }
	.cs-money__arrow{ transform:rotate(90deg); align-self:center; }
}

/* Katalog wzorow pism - grupy tematyczne */
.pisma__grupa{ margin:2.4rem 0 .3rem; font-size:clamp(1.2rem,2.4vw,1.5rem); }
.pisma__grupa:first-of-type{ margin-top:0; }
.pisma__grupa-opis{ margin:0 0 1.2rem; color:var(--text-muted); font-size:.92rem; }
.tile__fmt{ margin-left:.45rem; padding:.1rem .4rem; border-radius:4px; background:rgba(0,0,0,.16); font-size:.68rem; font-weight:800; letter-spacing:.04em; }

/* ============================================================
   Landingi z formularzem (ekspercka, szkoda rolnicza)
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,4vw,3rem); align-items:start; }
@media (min-width:900px){ .split{ grid-template-columns:1fr minmax(360px,.85fr); } }
.split__text h2{ margin-top:0; }
.split__note{ margin-top:1.4rem; padding:1rem 1.1rem; border-left:3px solid var(--orange); background:rgba(255,255,255,.04); font-size:.9rem; line-height:1.65; color:var(--text-muted); }
.split__form{ position:sticky; top:1.5rem; }
/* Formularz eksperckiej jest wyższy niż treść obok (pięć pól, załączniki, trzy
   zgody), więc pod lewą kolumną zostawało pół ekranu pustego granatu. Ta sama
   metoda co w kolumnie kontaktu: nadmiar rozdzielają auto-marginesy, dzięki
   czemu odstępy między grupami rosną równo, a żaden blok nie jest rozciągany.
   Tylko od 900 px, bo niżej kolumny stoją jedna pod drugą i nie ma czego dzielić. */
/* Kolumna z checklistą trzyma się góry i ma zwarte odstępy - NIE rozciąga się
   do wysokości formularza.
   Wcześniej nadmiar rozdzielały auto-marginesy (jak w kolumnie kontaktu), ale
   tam wysokość jest stała, a tutaj formularz rośnie z każdym zaznaczonym
   dokumentem: każde kliknięcie rozsuwało kafle po lewej i lista "skakała"
   w trakcie wypełniania. Grupa ma wyglądać jak jedna lista, nie jak elementy
   rozrzucone po kolumnie.
   Pustkę pod spodem zjada sticky na formularzu: przy przewijaniu to on jedzie
   za wzrokiem, a checklista zostaje na swoim miejscu u góry. */
@media (min-width:900px){
  .split__text:has(.cklista){ align-self:start; }
}
.form-title{ margin:0 0 .9rem; font-size:1.25rem; }

.steps-list{ counter-reset:krok; list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.steps-list li{ counter-increment:krok; display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; align-items:baseline; }
.steps-list li::before{ content:counter(krok); grid-row:1 / span 2; display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--orange); color:var(--ink); font-family:var(--font-head); font-weight:900; font-size:1rem; }
.steps-list strong{ font-family:var(--font-head); font-weight:800; font-size:1.02rem; }
.steps-list span{ color:var(--text-muted); font-size:.92rem; line-height:1.6; }

/* ---------- Ekspercka weryfikacja: lista dokumentów i zakres spraw ----------
   Żadnego nowego komponentu - listy dokumentów jadą na istniejącej .check-list,
   kafle zakresu na .tile. Poniżej tylko to, czego te dwa nie mają: podtytuły
   grup i lista pozycji wewnątrz kafla. */
.split__wstep{ margin:0 0 1.6rem; color:var(--text-muted); font-size:.96rem; line-height:1.7; }

/* ---------- Interaktywna checklista dokumentów ----------
   Pozycja to <label> z ukrytym checkboxem: cały wiersz jest celem kliknięcia,
   a stan niesie rysowany kwadrat (tak samo jak zgoda w formularzu - ten sam
   wzorzec, nie drugi mechanizm). */
.ckpostep{ margin:0 0 1.6rem; }
.ckpostep__tor{ height:6px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; }
.ckpostep__fill{
  display:block; height:100%; width:0; border-radius:99px;
  background:var(--grad-cta); transition:width .35s var(--ease-ios);
}
.ckpostep__opis{ margin:.7rem 0 0; font-size:.88rem; font-weight:600; line-height:1.5; color:var(--text-muted); }
.cklista--komplet .ckpostep__fill{ background:var(--green); }
.cklista--komplet .ckpostep__opis{ color:var(--green); }

.cklista__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.ck{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  padding:.85rem 1rem; min-height:var(--tap); cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--card-line); border-radius:var(--r-md);
  transition:border-color .18s, background .18s;
}
.ck:hover{ border-color:rgba(240,156,51,.45); }
.ck__box{
  width:22px; height:22px; margin-top:.1rem; flex:0 0 auto; display:grid; place-items:center;
  border:2px solid var(--card-line); border-radius:6px; background:rgba(255,255,255,.05);
  color:transparent; transition:background .15s, border-color .15s, color .15s;
}
.ck:has(input:checked){ border-color:rgba(53,194,110,.5); background:rgba(53,194,110,.07); }
.ck:has(input:checked) .ck__box{ background:var(--green); border-color:var(--green); color:#0F2142; }
.ck:has(input:focus-visible){ outline:3px solid var(--orange-2); outline-offset:2px; }
.ck__tresc{ display:grid; gap:.15rem; min-width:0; }
.ck__tresc strong{ font-family:var(--font-head); font-weight:800; font-size:.98rem; color:var(--text-strong); }
.ck__tresc > span{ font-size:.86rem; line-height:1.55; color:var(--text-muted); }
.dok-grupa__opis{
  display:block; margin-top:.2rem; font-size:.72rem; font-weight:600;
  letter-spacing:.02em; text-transform:none; color:var(--text-muted);
}

/* Blok o upoważnieniu. Pojawia się dopiero, gdy czegoś brakuje - i mówi wprost,
   czy to my to zdobędziemy, czy nie da się tego zdobyć za klienta. */
.upowaznienie{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  margin-top:1.2rem; padding:1.1rem 1.2rem;
  background:rgba(255,255,255,.04); border:1px solid var(--card-line);
  border-left:3px solid var(--orange); border-radius:var(--r-md);
}
.upowaznienie[hidden]{ display:none; }
.upowaznienie__ikona{ color:var(--orange-2); margin-top:.1rem; }
.upowaznienie__tresc strong{ display:block; font-family:var(--font-head); font-weight:800; font-size:.98rem; color:var(--text-strong); margin-bottom:.25rem; }
.upowaznienie__tresc p{ margin:0; font-size:.86rem; line-height:1.6; color:var(--text-muted); }

/* Pola dokładane przez checklistę. Węższy odstęp niż zwykłe .field, bo tworzą
   jedną grupę, a nie osobne pytania formularza. */
.sloty{ display:grid; gap:.7rem; margin-bottom:1rem; }
.sloty .field{ margin-bottom:0; }
.slot label[for]{ font-size:.92rem; }

[data-theme="light"] .ck{ background:#fff; border-color:var(--cream-line); }
[data-theme="light"] .ck__tresc strong{ color:var(--ink); }
[data-theme="light"] .ck__tresc > span, [data-theme="light"] .ckpostep__opis,
[data-theme="light"] .dok-grupa__opis, [data-theme="light"] .upowaznienie__tresc p{ color:var(--ink-soft); }
[data-theme="light"] .ck__box{ background:#fff; border-color:var(--cream-line); }
[data-theme="light"] .ckpostep__tor{ background:var(--cream-2); }
[data-theme="light"] .upowaznienie{ background:#fff; border-color:var(--cream-line); border-left-color:var(--orange); }
[data-theme="light"] .upowaznienie__tresc strong{ color:var(--ink); }
[data-theme="light"] .cklista--komplet .ckpostep__opis{ color:var(--green-700); }
/* Podtytuł grupy dokumentów. Mniejszy od H2 i w wersalikach, żeby czytał się
   jako etykieta listy, a nie jako kolejna sekcja strony. */
.dok-grupa{
  margin:1.8rem 0 .9rem; font-size:.78rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--orange-2);
}
.dok-grupa:first-of-type{ margin-top:0; }
.zakres__pod{
  margin:-.35rem 0 .9rem; font-size:.8rem; font-weight:700;
  letter-spacing:.02em; color:var(--text-muted);
}
.zakres__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.42rem; }
.zakres__lista li{
  position:relative; padding-left:1rem; font-size:.9rem; line-height:1.5; color:var(--text);
}
/* Myślnik zamiast kropki listy: pozycje są krótkie i w kaflu, więc pełne
   punktory robiłyby z czterech kafli cztery gęste plamy. */
.zakres__lista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.45rem; height:2px; border-radius:2px; background:var(--orange);
}
.sek-nota{ margin:1.8rem auto 0; max-width:60ch; text-align:center; font-size:.86rem; line-height:1.6; color:var(--text-muted); }
[data-theme="light"] .split__wstep, [data-theme="light"] .sek-nota{ color:var(--ink-soft); }
[data-theme="light"] .dok-grupa{ color:var(--orange-700); }
[data-theme="light"] .zakres__pod{ color:var(--ink-soft); }
[data-theme="light"] .zakres__lista li{ color:var(--ink); }

.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.check-list li{ position:relative; padding-left:1.9rem; font-size:.94rem; line-height:1.65; color:var(--text-muted); }
.check-list li::before{ content:""; position:absolute; left:0; top:.42em; width:1.05rem; height:1.05rem; border-radius:50%; background:var(--orange-soft); box-shadow:inset 0 0 0 2px var(--orange); }
.check-list strong{ color:var(--text); font-weight:800; }

@media (max-width:899px){ .split__form{ position:static; } }

/* Formularz w siatce: pola z klasą .field--polowka stają obok siebie.
   Krótszy formularz to mniej pustego miejsca w kolumnie obok - stąd para
   e-mail + telefon w jednym rzędzie. */
.lead-form--siatka{ display:grid; grid-template-columns:1fr 1fr; column-gap:1rem; align-items:start; }
.lead-form--siatka > *{ grid-column:1 / -1; }
.lead-form--siatka > .field--polowka{ grid-column:span 1; }
@media (max-width:560px){
  /* Na telefonie dwa pola obok siebie zwezaja sie do ~150 px - numer i adres
     przestaja byc czytelne, wiec wracaja pod siebie. */
  .lead-form--siatka{ grid-template-columns:1fr; }
  .lead-form--siatka > .field--polowka{ grid-column:1 / -1; }
}

/* ============================================================
   Zespół obsługi (/o-nas/)
   ============================================================
   Wersja LEKKA. Kalkulator jest wejściem do XALTUM, nie drugą stroną
   firmową - zespół pokazujemy dyskretnie: okrągły portret 64 px obok
   danych, a nie galeria portretów na całą szerokość.
   Kontakt zostaje klikalny: link wygląda drobno, ale ma pod spodem
   cel dotykowy 44 px (WCAG 2.5.8) dorobiony przez ::after. */
.team__head{ max-width:52ch; margin-bottom:clamp(1.2rem,2.4vw,1.8rem); }
.team__head h2{ margin-bottom:.4rem; font-size:clamp(1.5rem,3vw,2rem); }
.team__head .lead{ font-size:.95rem; }

.team__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }

.team-card{
  display:flex; gap:.9rem; align-items:center;
  background:#fff; border:1px solid var(--cream-line); border-radius:var(--r-md);
  padding:.85rem .95rem; transition:border-color .18s;
}
@media (hover:hover){ .team-card:hover{ border-color:rgba(217,126,39,.45); } }

.team-card__foto{
  width:64px; height:64px; flex:none; border-radius:50%; overflow:hidden;
  background:var(--cream); display:grid; place-items:center;
}
.team-card__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-card__ini{ font-family:var(--font-head); font-weight:900; font-size:1.15rem; color:var(--ink-mute); }

.team-card__body{ min-width:0; }
.team-card__imie{ font-size:.95rem; margin:0; color:var(--ink); line-height:1.25; }
.team-card__rola{ font-size:.78rem; color:var(--ink-mute); margin:.1rem 0 .4rem; line-height:1.35; }

.team-card__kontakt{ display:flex; flex-wrap:wrap; gap:.15rem .9rem; }
.team-card__link{
  position:relative; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.82rem; font-weight:700; color:var(--ink); text-decoration:none;
}
/* Powiększenie samego celu dotykowego - wygląd zostaje drobny. */
.team-card__link::after{ content:""; position:absolute; inset:-12px -6px; }
.team-card__link svg{ width:14px; height:14px; color:var(--orange); flex:none; }
.team-card__link span{ overflow-wrap:anywhere; }
.team-card__link:hover{ color:var(--orange); }
.team-card__link:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:6px; }

@media (max-width:1100px){ .team__grid{ grid-template-columns:repeat(2,1fr); } }
/* Na węższych ekranach telefon i mail nie mieszczą się w jednej linii i
   zawijają. Powiększone przez ::after obszary trafień zaczynały wtedy na
   siebie nachodzić - kliknięcie pod numerem lądowało w mailu. Dlatego niżej
   idą w kolumnę, każdy z własnymi 44 px wysokości. */
@media (max-width:980px){
  .team-card__kontakt{ flex-direction:column; gap:0; }
  .team-card__link{ min-height:var(--tap); }
  .team-card__link::after{ content:none; }
}
@media (max-width:560px){
  .team__grid{ grid-template-columns:1fr; }
  .team-card__foto{ width:56px; height:56px; }
}

/* ============================================================
   Strona "O nas" - wersja lekka
   ============================================================ */
/* Krótki tekst + cytat obok. Bez czterech sekcji jedna pod drugą:
   ta strona ma być wejściem, nie opowieścią o firmie. */
.onas-intro{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:start; }
.onas-intro__tekst p{ color:var(--text); font-size:1rem; line-height:1.7; margin:0 0 1rem; }
.onas-intro__tekst p:last-child{ margin-bottom:0; }
.onas-intro__tekst strong{ color:var(--text-strong); }

.onas-cytat{
  margin:0; padding:clamp(1.2rem,2.6vw,1.6rem);
  background:rgba(255,255,255,.04); border:1px solid var(--card-line);
  border-radius:var(--r-lg);
}
.onas-cytat blockquote{
  margin:0 0 1.1rem; font-size:.98rem; line-height:1.6; font-style:italic; color:var(--text-strong);
}
.onas-cytat figcaption{ display:flex; align-items:center; gap:.75rem; }
.onas-cytat figcaption img{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
.onas-cytat figcaption span{ display:grid; font-size:.8rem; color:var(--text-muted); line-height:1.4; }
.onas-cytat figcaption strong{ font-family:var(--font-head); font-weight:800; font-size:.92rem; color:var(--text-strong); }

/* Miejsce kalkulatora w marce: tekst + jeden przycisk wyjścia na xaltum.pl. */
.onas-marka{ display:grid; grid-template-columns:1.6fr auto; gap:clamp(1.4rem,3vw,2.5rem); align-items:center; }
.onas-marka h2{ margin-top:0; font-size:clamp(1.5rem,3vw,2rem); }
.onas-marka p{ color:var(--text-muted); line-height:1.7; margin:0 0 .8rem; max-width:62ch; }
.onas-marka strong{ color:var(--text-strong); }
.onas-marka__cta{ margin:0; }

@media (max-width:980px){
  .onas-intro,.onas-marka{ grid-template-columns:1fr; }
}

/* Marker w nagłówku zespołu ma zostać w jednym kawałku - rozbity na dwa
   wiersze wygląda jak dwa przypadkowe prostokąty, nie jak akcent. */
@media (min-width:601px){
  .team__head h2 .txt-orange{ white-space:nowrap; }
}