/* BBMG v2: komponenty tylko strony głównej (ładowany po bloki.css wyłącznie w index.html).
   Kolory i fonty z tokens.css, zmienne serwisu z shared.css. Wspólne komponenty (sekcje, hero podstron,
   cytaty, kropka .kd) stoją w bloki.css. */

/* ---------- Hero strony głównej (ciemne, z wykresem) ---------- */
.hero-home {
  position: relative; color: var(--cream); background-color: var(--dark-teal);
  background-image: radial-gradient(rgba(250,245,239,.07) 1.1px, transparent 1.3px),
    radial-gradient(120% 90% at 78% 40%, var(--teal-glow) 0%, var(--deep-teal) 45%, var(--dark-teal) 100%);
  background-size: 32px 32px, auto; padding-top: var(--nav-height);
}

/* Hero ma własny, szerszy kontener (1360 px zamiast 1200 px czytelniczych): nagłówek to główny element
   typograficzny marki, a w kolumnie 553 px musiał się kurczyć do 76 px, żeby „na twardych danych.” nie
   łamało się na czwartą linię. Kolumna tekstu ma teraz ok. 660 px (proporcje 1,15 : 1), więc fraza
   (ok. 7 px szerokości na 1 px fontu) mieści się w jednej linii przy fontcie 90 px. Pozostałe sekcje
   zostają w kontenerze 1200 px, stąd lewa krawędź hero jest na dużych oknach 80 px bliżej brzegu. */
.hero-home > .container { max-width: 1360px; }
.hero-home__grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 24px; min-height: min(78vh, 760px); }
/* v3 (runda 1): zamiast napisu wersalikami nad H1 zwykłe zdanie „Maciej Gawlik, dyrektor finansowy na część etatu.” */
.hero-v3__napis { font: 500 clamp(16px, 1.2vw, 18px)/1.4 var(--font-body); color: rgba(250,245,239,.8); max-width: 40ch; text-wrap: balance; }
.hero-v3__napis b { font-weight: 600; color: var(--cream); }

/* H1 hero: 6,3vw z sufitem 90 px. Przy szerszej kolumnie (patrz .hero-home > .container) „na twardych
   danych.” zostaje w jednej linii od 901 px do 1920 px i więcej, a „Architektura finansowa” zawsze
   zawija się na dwie, czyli 3 linie jak w makiecie. Na telefonie działa dolny próg 48 px, bez zmian. */
.hero-home h1 { font: 400 clamp(48px, 6.3vw, 90px)/.94 var(--font-display); letter-spacing: -.025em; margin-top: 22px; }
.hero-home h1 em { display: block; font-style: italic; color: var(--amber); }
.hero-home__lead { font: 400 clamp(18px, 1.45vw, 21px)/1.55 var(--font-body); color: rgba(250,245,239,.88); max-width: 36ch; margin-top: 28px; }
/* v3 (runda 1): wykres z kropek w <figure> z podpisem (słupki są kształtem, nie liczbą; hero-wykres.js). */
.hero-v3__graf { margin: 0; position: relative; }
.wykres__plotno { display: block; width: 100%; height: clamp(280px, 34vw, 440px); touch-action: pan-y; }
.hero-v3__podpis { margin-top: 12px; font: 400 13px/1.45 var(--font-body); color: rgba(250,245,239,.78); max-width: 46ch; }
.hero-v3__podpis b { color: rgba(250,245,239,.92); font-weight: 500; }
.hero-home__dowod { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 26px 0 30px; margin-top: 20px; border-top: 1px solid rgba(250,245,239,.14); font: 400 15px/1.4 var(--font-body); color: rgba(250,245,239,.74); }
.hero-home__dowod b { color: var(--cream); font-weight: 500; letter-spacing: .02em; }

/* Separatory „·” między nazwami klientów (aria-hidden w HTML). Na wąskich ekranach nazwy łamią się
   do kolejnych wierszy i separator wylądowałby na początku wiersza, więc go tam chowamy. */
.hero-home__dowod span { color: rgba(250,245,239,.5); }
@media (max-width: 760px) { .hero-home__dowod { gap: 10px 24px; } .hero-home__dowod span { display: none; } }
/* Telefon (runda 1): grafika stoi między nagłówkiem a leadem, a cały pierwszy ekran (zdanie, H1, wykres 190 px
   z podpisem, lead, oba przyciski w jednym wierszu) mieści się w 844 px. Kolejność przez order w siatce (display:
   contents na kolumnie tekstu), HTML zostaje w kolejności czytania. */
@media (max-width: 900px) {
  .hero-home__grid { grid-template-columns: 1fr; min-height: 0; padding-top: 22px; gap: 0; }
  .hero-v3__tekst { display: contents; }
  .hero-v3__napis { order: 1; }
  .hero-home h1 { order: 2; margin-top: 16px; }
  .hero-v3__graf { order: 3; margin-top: 20px; }
  .hero-home__lead { order: 4; margin-top: 18px; font-size: 17px; }
  .hero-home .btns { order: 5; margin-top: 18px; }
  .hero-v3 .btns .btn-lg { padding: 18px 22px; }
  .hero-v3__podpis { margin-top: 8px; font-size: 12.5px; max-width: none; }
  .wykres__plotno { height: 190px; }
}

/* ---------- Pas cen (strona główna) ---------- */
/* Trzy kolumny rozdzielone cienką linią. Każda kwota (.kwota) zajmuje cztery wiersze siatki i bierze je
   przez subgrid z listy, więc tytuły, liczby, okres i opis stoją w tych samych wierszach we wszystkich
   kolumnach, niezależnie od tego, ile linii zajmuje opis (zasada ogólna z §6.4 speca). Tytuł ma
   align-self: end, żeby przy dłuższym tytule wiersz rósł w górę, a nie rozjeżdżał liczby. */
.liczby-pas { background: var(--cream); padding: clamp(56px, 6vw, 96px) 0 clamp(56px, 5vw, 88px); }
.liczby-pas__gora { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 32px; flex-wrap: wrap; border-bottom: 1px solid rgba(14,83,74,.22); padding-bottom: 16px; }
.liczby-pas__gora .kicker { margin: 0; }
.liczby-pas__uwaga { font: 400 15px/1.4 var(--font-body); color: var(--ink-60); }
.liczby-pas__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); }
.kwota { padding: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 40px) 0; border-left: 1px solid rgba(14,83,74,.16); display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.kwota:first-child { border-left: 0; padding-left: 0; }
.kwota__tytul { align-self: end; font: 400 clamp(24px, 2.4vw, 34px)/1.05 var(--font-display); color: var(--deep-teal); white-space: nowrap; }
.kwota__tytul::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-right: 12px; vertical-align: middle; }

/* Kwota i „zł” leżą w osobnych znacznikach, a spacja stoi w źródle na początku <small> (agent AI musi dostać
   „5 000 zł”, nie „5 000zł”). To ona robi odstęp przed „zł”, dlatego small nie ma własnego marginesu.
   Nie używamy flexa: Chrome liczy wtedy szerokość kwoty bez ujemnego letter-spacing i odstęp rośnie o ok.
   20 px. Cyfry tabelaryczne, żeby odliczanie z interactions.js nie szarpało szerokością. */
.kwota__liczba { font: 500 clamp(56px, 7.2vw, 104px)/.92 var(--font-display); letter-spacing: -.035em; color: var(--deep-teal); margin-top: 18px; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }

/* Ciemny bursztyn ma ok. 3,5:1 na kremie, więc przechodzi tylko jako duży napis (≥ 24 px). Przy
   .36em z 56 px wychodziłoby 20 px, dlatego dolny próg 24 px. */
.kwota__liczba small { font: italic 400 .36em/1 var(--font-display); font-size: max(24px, .36em); color: var(--amber-deep); letter-spacing: 0; }
.kwota__kiedy { margin-top: 14px; font: 600 15px/1.3 var(--font-body); color: var(--deep-teal); }
.kwota__opis { margin-top: 8px; font: 400 16px/1.5 var(--font-body); color: var(--ink-60); max-width: 30ch; }
@media (max-width: 900px) {
  .liczby-pas__grid { grid-template-columns: 1fr; }
  .kwota, .kwota:first-child { border-left: 0; padding: 26px 0; border-bottom: 1px solid rgba(14,83,74,.16); }
}

/* ---------- Problem: zdania i karta marży ---------- */
/* Zdania po lewej, karta z liczbą po prawej. Karta jest białą wyspą na kremie; siatka kropek marży
   (niżej) odgrywa wypełnianie przy pierwszym wejściu w widok, a bez JS stoi w stanie końcowym. Duża liczba
   i siatka kropek są aria-hidden w HTML: to samo zdanie stoi pod nimi tekstem. */
.problem-v2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(32px, 3.4vw, 52px); }
.sytuacje-duze { list-style: none; }
.sytuacje-duze li { position: relative; padding: 18px 0 18px 30px; border-top: 1px solid rgba(14,83,74,.16); font: 500 clamp(19px, 1.6vw, 22px)/1.4 var(--font-body); color: var(--deep-teal); }
.sytuacje-duze li:last-child { border-bottom: 1px solid rgba(14,83,74,.16); }
.sytuacje-duze li::before { content: ''; position: absolute; left: 0; top: calc(18px + .7em - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
.marza { background: #fff; border-radius: var(--radius-xl); padding: clamp(28px, 3vw, 44px); box-shadow: var(--shadow-card); }
.marza__liczba { font: 500 clamp(96px, 11vw, 168px)/.85 var(--font-display); letter-spacing: -.04em; color: var(--deep-teal); }
.marza__liczba small { font-size: .42em; font-style: italic; color: var(--amber-deep); }
.marza__zamiast { margin-top: 12px; font: 500 18px/1.4 var(--font-body); color: var(--deep-teal); }

/* Siatka 30 kropek: jedna kropka to jeden punkt procentowy. 27 zapalonych (.on, ciemna zieleń) i 3 puste z bursztynowym
   obrysem (.brak). Wszystko stoi w HTML w stanie końcowym; kropki.js odgrywa wypełnianie przy pierwszym wejściu
   w widok, a puste kropki pulsują (.puls) tylko, gdy karta jest w widoku (pulsowanie jest nieskończone). Siatka i podpis
   są aria-hidden: pełne zdanie o marży stoi wyżej tekstem. */
.marza__kropki { display: grid; grid-template-columns: repeat(10, 16px); gap: 10px; margin-top: 22px; }
.marza__kropki i { width: 16px; height: 16px; border-radius: 50%; background: var(--teal-soft); transition: background .25s ease, transform .25s ease; }
.marza__kropki i.on { background: var(--deep-teal); }
.marza__kropki i.brak { background: transparent; box-shadow: inset 0 0 0 2px var(--amber); }
@media (prefers-reduced-motion: no-preference) { .marza__kropki i.brak.puls { animation: marza-brak 1.8s ease-in-out infinite; animation-delay: var(--d); } }
@keyframes marza-brak { 0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 2px var(--amber); } 50% { transform: scale(1.25); box-shadow: inset 0 0 0 2px var(--amber), 0 0 0 5px rgba(255,176,55,.22); } }
.marza__legenda { margin-top: 12px; font: 400 14px/1.4 var(--font-body); color: var(--ink-60); }

/* „Brakuje trzech.” pokazuje się przy najechaniu na kartę. Reguły :hover stoją w @media (hover: hover), żeby na
   dotyku nie zostawał „przyklejony” hover po tapnięciu (tam zdanie zostaje ukryte). */
.marza__legenda b { font-weight: 600; color: var(--deep-teal); opacity: 0; transition: opacity .3s ease; }
@media (hover: hover) { .marza:hover .marza__legenda b { opacity: 1; } }
/* v3: bez myszy nie ma najechania, więc zdanie jest widoczne od razu po wypełnieniu siatki. */
@media (hover: none) { .marza__legenda b { opacity: 1; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .marza:hover .marza__kropki i.brak.puls { animation-duration: .9s; } }
.marza__pytanie { margin-top: 22px; font: 500 clamp(17px, 1.4vw, 19px)/1.45 var(--font-body); color: var(--deep-teal); }
.domkniecie { margin-top: 28px; font: 500 clamp(19px, 1.6vw, 22px)/1.45 var(--font-body); color: var(--deep-teal); }
@media (max-width: 900px) { .problem-v2 { grid-template-columns: 1fr; } .marza__kropki { grid-template-columns: repeat(10, 14px); gap: 8px; } }

/* ---------- Filary: lista w stylu B ---------- */
.filary { margin-top: 0; list-style: none; }
.filar { display: grid; grid-template-columns: 72px 1.05fr 1.5fr 190px 44px; gap: clamp(16px, 2vw, 32px); align-items: center; padding: clamp(22px, 2.4vw, 34px) 0; border-bottom: 1px solid rgba(14,83,74,.16); color: inherit; text-decoration: none; }
.filar__nr { font: 700 15px/1 var(--font-body); letter-spacing: .08em; color: var(--deep-teal); }
.filar__nr::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-right: 10px; vertical-align: middle; }
.filar__tytul { font: 400 clamp(30px, 3.4vw, 48px)/1 var(--font-display); color: var(--deep-teal); }
.filar__opis { font: 400 17px/1.55 var(--font-body); color: var(--ink-60); }
.filar__opis span { display: block; margin-top: 6px; color: var(--deep-teal); font-weight: 500; }
.filar__cena { font: 400 15px/1.4 var(--font-body); color: var(--ink-60); }
.filar__cena b { display: block; color: var(--deep-teal); font-weight: 600; font-size: 16px; }
.filar__strzalka { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(14,83,74,.35); display: grid; place-items: center; color: var(--deep-teal); justify-self: end; transition: background .2s ease, color .2s ease; }
.filar:hover .filar__strzalka, .filar:focus-visible .filar__strzalka { background: var(--deep-teal); color: var(--cream); }
@media (max-width: 900px) { .filar { grid-template-columns: 1fr; gap: 10px; } .filar__strzalka { display: none; } }

/* Wariant strony głównej: duże cyfry 01-03 z bursztynową kropką po cyfrze (zamiast kropki przed nią)
   i dwie kwoty w Filarze 1. Kwoty są w osobnych blokach, żeby każda miała własną linię z opisem. */
.filary--v2 .filar { grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1.4fr) 200px 44px; }
.filary--v2 .filar__nr { font: 400 clamp(52px, 5vw, 76px)/.9 var(--font-display); letter-spacing: -.03em; color: var(--deep-teal); }
.filary--v2 .filar__nr::before { display: none; }
.filary--v2 .filar__nr::after { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); margin-left: 4px; vertical-align: top; margin-top: .12em; }

/* Przesunięcie tytułu przy najechaniu i przy fokusie z klawiatury (:focus-visible na linku wiersza);
   tylko bez preferencji ograniczonego ruchu. */
@media (prefers-reduced-motion: no-preference) {
  .filary--v2 .filar__tytul { transition: transform .25s ease; }
  .filary--v2 .filar:hover .filar__tytul, .filary--v2 .filar:focus-visible .filar__tytul { transform: translateX(6px); }
}
.filary--v2 .filar__cena b { font: 500 26px/1.05 var(--font-display); letter-spacing: -.01em; }
.filary--v2 .filar__cena b + span { display: block; margin-bottom: 8px; }
@media (max-width: 900px) { .filary--v2 .filar { grid-template-columns: 1fr; } }

/* ---------- Oś „Jak pracuję” (v3, runda 2): cztery kolumny, każda z własnym zdaniem „jedna kropka to …” ---------- */
/* Rozmowa: jedna bursztynowa kropka z falą (30 minut). Sprint: 10 kropek = 10 dni roboczych (dwa tygodnie po pięć).
   Roadmapa: 9 kropek po 10 dni w trzech grupach (30, 60, 90). Współpraca: kropka = miesiąc, trzy pełne i trzy
   wygaszone (od trzech miesięcy, dalej według potrzeb). Stan końcowy stoi w HTML (.on, .gotowe); os-kropki.js zeruje
   tuż przed wejściem i odgrywa napełnianie raz, kolumna po kolumnie; najechanie (mysz) albo dotknięcie kolumny
   odtwarza jej animację. W spoczynku rusza się tylko fala przy kropce rozmowy, i to tylko w widoku (.os3--gra). */
.os3 { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 4vw, 56px); }
.os3 li { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; justify-items: center; text-align: center; padding: 0 12px; }
.os3__pole { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 112px; }
.os3__legenda { width: 100%; margin-top: 14px; padding-bottom: 14px; border-bottom: 2px solid rgba(14,83,74,.18); font: 400 12.5px/1.35 var(--font-body); color: var(--ink-60); }
.os-jak__etap { padding-top: 18px; font: 600 13px/1.3 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--deep-teal); }

/* Liczba i jednostka w osobnych znacznikach; spacja na początku <small> (tekst dla agentów: „30 minut”)
   robi odstęp. Jednostka w ciemnym bursztynie ma min. 24 px. */
.os-jak__liczba { margin-top: 10px; font: 500 clamp(56px, 6vw, 92px)/.9 var(--font-display); letter-spacing: -.035em; color: var(--deep-teal); white-space: nowrap; }
.os-jak__liczba small { font: italic 500 clamp(24px, 1.8vw, 28px)/1 var(--font-display); color: var(--amber-deep); letter-spacing: 0; line-height: 0; }
.os-jak__opis { margin: 14px auto 0; font: 400 16px/1.55 var(--font-body); color: var(--ink-60); max-width: 26ch; }
.os3__kropki { display: grid; gap: 10px; }
.os3__kropki i { display: block; width: 14px; height: 14px; border-radius: 50%; background: rgba(14,83,74,.14); transition: background .3s ease, transform .3s ease, box-shadow .3s ease, opacity .5s ease; }
.os3__kropki i.on { background: var(--deep-teal); }
.os3__kropki i.teraz { background: var(--amber); transform: scale(1.3); box-shadow: 0 0 0 5px rgba(255,176,55,.22); }
.os3__kropki i.cien { background: rgba(14,83,74,.14); }
.os3__kropki--sprint { grid-template-columns: repeat(5, 14px); }
.os3__kropki--rzad { grid-auto-flow: column; }
.os3__grupy { display: flex; gap: 22px; align-items: flex-end; }
.os3__grupa { display: grid; gap: 8px; justify-items: center; }
.os3__etykieta { font: 600 11px/1 var(--font-body); letter-spacing: .08em; color: rgba(79,88,86,.6); transition: color .3s ease; }
.os3__etykieta.on { color: var(--deep-teal); }
/* Rozmowa: jedna bursztynowa kropka z falą (fala tylko w widoku i bez ograniczonego ruchu). */
.os3__rozmowa { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.os3__rozmowa::before, .os3__rozmowa::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .os3--gra .gotowe .os3__rozmowa::before { animation: os-fala 3s ease-out infinite; }
  .os3--gra .gotowe .os3__rozmowa::after { animation: os-fala 3s ease-out infinite 1.5s; }
}
@keyframes os-fala { 0% { transform: scale(.6); opacity: .85; } 100% { transform: scale(2.6); opacity: 0; } }
.os3 li:not(.gotowe) .os3__rozmowa { transform: scale(0); }
/* Telefon: dwie kolumny; kolumna ma ok. 163 px przy 390 px, więc roadmapa (trzy grupy po trzy kropki) musi się
   zmieścić bez nachodzenia na sąsiada. Subgrid trzyma pole, legendę, etap, liczbę i opis w tych samych wierszach. */
@media (max-width: 900px) {
  .os3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os3 li { padding: 0 6px; }
  .os3 li:nth-child(n + 3) { margin-top: 36px; }
  .os3__pole { height: 92px; }
  .os3__kropki { gap: 6px; }
  .os3__kropki i { width: 11px; height: 11px; }
  .os3__grupy { gap: 10px; }
  .os3__kropki--sprint { grid-template-columns: repeat(5, 11px); }
}
@media (max-width: 380px) {
  /* Przy 320 px „10 dni roboczych” (liczba + długa jednostka w nowrap) nie mieści się w kolumnie 128 px, więc jednostka
     schodzi pod liczbę (ostatni <small>; „od” przed liczbą zostaje w linii). Kolumna ma 140 px: trzy grupy roadmapy
     po trzy kropki mieszczą się tylko z mniejszymi odstępami i kropkami 10 px (pomiar 320 px: 126 px). */
  .os-jak__liczba small:last-child { display: block; margin-top: 4px; line-height: 1.2; }
  .os3__grupy { gap: 6px; }
  .os3__kropki { gap: 4px; }
  .os3__kropki i { width: 10px; height: 10px; }
  .os3__kropki--sprint { grid-template-columns: repeat(5, 10px); }
}

/* ---------- Jak pracuję: dwie karty (wywiady VoiceAudit, AI pod kontrolą człowieka) ---------- */
/* Fala w karcie VoiceAudit to 16 pasków wpisanych w HTML (--h to wysokość, --d to opóźnienie animacji),
   nie generowanych w JS: bez JS fala też jest widoczna (stoi na wysokości --h). Animacja nieskończona
   z var() w klatkach kluczowych liczy styl na głównym wątku w każdej klatce, więc biegnie tylko pod
   prefers-reduced-motion: no-preference i tylko gdy karta jest w widoku: interactions.js dodaje klasę
   fala--gra przy wejściu i zdejmuje przy wyjściu (bez IntersectionObserver paski stoją w miejscu). */
.karty { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(48px, 5vw, 80px); }
.karta { border-radius: var(--radius-xl); padding: clamp(28px, 3vw, 44px); }
.karta h3 { font: 400 clamp(28px, 2.6vw, 38px)/1.05 var(--font-display); }
.karta--voice { background: var(--dark-teal); color: var(--cream); display: grid; grid-template-columns: 150px 1fr; gap: 32px; align-items: center; }
.fala { display: flex; align-items: center; justify-content: center; gap: 4px; height: 140px; }
.fala span { flex: 0 0 5px; height: 100%; border-radius: 3px; background: var(--amber); transform: scaleY(var(--h, .4)); }
@media (prefers-reduced-motion: no-preference) { .fala--gra span { animation: fala 1.4s ease-in-out infinite alternate; animation-delay: var(--d); } }
@keyframes fala { from { transform: scaleY(.15); } to { transform: scaleY(var(--h, .9)); } }
.karta__lista { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.karta__lista li { position: relative; padding-left: 22px; font: 400 17px/1.45 var(--font-body); }
.karta__lista li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.karta--voice .karta__lista li { color: rgba(250,245,239,.88); }
.karta--voice .link-strzalka { color: var(--cream); }
.karta--ai { background: #fff; box-shadow: var(--shadow-card); }
.karta--ai h3 { color: var(--deep-teal); }

/* Strzałki między kapsułami przepływu są aria-hidden w HTML (dekoracja). Spacje między znacznikami
   w źródle służą tekstowi dla agentów; w układzie flex ich nie ma. */
.przeplyw { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.przeplyw span { font: 600 13px/1 var(--font-body); padding: 9px 12px; white-space: nowrap; border-radius: 999px; background: var(--teal-soft); color: var(--deep-teal); }
.przeplyw span:last-child { background: var(--deep-teal); color: var(--cream); }
.przeplyw i { font-style: normal; color: var(--amber-deep); font-weight: 700; }
.karta--ai .karta__lista li { color: var(--ink-60); }
@media (max-width: 900px) {
  .karty { grid-template-columns: 1fr; }
  .karta--voice { grid-template-columns: 1fr; }
  .fala { height: 64px; }
}

/* Referencja na ciemnym tle: ten sam styl co karty .cytat (bloki.css), bez karty i większy. Znak nad tekstem,
   cytat zwykłą czcionką tekstu, efekt pogrubiony w kremie. Pudełko znaku liczone jak w .cytat::before:
   „ w Outfit leży od 0,69 do 1,04 em od góry linii, więc margines -0,69 em i wysokość 1,27 em. */
.cytat-duzy { max-width: 880px; margin: 0; }
.cytat-duzy__znak { font: 700 clamp(72px, 6vw, 88px)/1 var(--font-body); color: var(--amber); height: 1.27em; margin-top: -.69em; user-select: none; }
.cytat-duzy blockquote { margin: 0; }
.cytat-duzy blockquote p { font: 400 clamp(21px, 2vw, 27px)/1.5 var(--font-body); color: rgba(250,245,239,.82); }
.cytat-duzy blockquote strong { font-weight: 600; color: var(--cream); }
.cytat-duzy figcaption { margin-top: 22px; font: 400 15px/1.45 var(--font-body); color: rgba(250,245,239,.72); }
.cytat-duzy figcaption b { color: var(--cream); font-weight: 600; }

/* Wyniki klientów pod cytatem (ciemna sekcja Referencje; v3, runda 2): nagłówek w Cormorant, pod nim Smok Advisory
   w całym wierszu jako moduł „chaos w porządek” (600 kropek = 10 godzin ręcznej pracy w miesiącu, jedna kropka to
   minuta; suwak „ręcznie / z agentem AI” gasi kropki aż do kilku; kropki.js odgrywa wejście raz, potem suwak sam
   dojeżdża do końca, przeciągnięcie przejmuje sterowanie). Niżej para: CMB bez grafiki (referencja nie podaje liczby
   procesów, więc kropki nie miałyby logiki) i WSSE (pięć kropek = pięć spotkań, trzy bursztynowe = trzy własne
   narzędzia z cytatu wyżej). Nazwy klientów to małe etykiety, nie nagłówki. */
.zmiany-tytul { margin-top: clamp(56px, 6vw, 96px); padding-top: 22px; border-top: 1px solid rgba(250,245,239,.16); }
.zmiany-h { font: 400 clamp(32px, 3.4vw, 50px)/1.02 var(--font-display); letter-spacing: -.015em; color: var(--cream); }
.zmiany-h em { font-style: italic; color: var(--amber); }
.zmiana__kto { font: 600 13px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.zmiana__przed { margin-top: 12px; font: 400 clamp(16px, 1.3vw, 18px)/1.4 var(--font-body); color: rgba(250,245,239,.72); }
.zmiana__przed s { text-decoration-thickness: 1.5px; text-decoration-color: rgba(255,176,55,.8); }
.zmiana__po { margin-top: 8px; font: 500 clamp(26px, 2.5vw, 36px)/1.08 var(--font-display); color: var(--cream); }
.zmiana__po em { font-style: italic; color: var(--amber); }
.zmiana__co { margin-top: 14px; font: 400 15px/1.5 var(--font-body); color: rgba(250,245,239,.74); max-width: 32ch; }
.zmiany3 { margin-top: 20px; }
.smok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 3vw, 56px); align-items: center; padding: 26px 0 30px; border-top: 1px solid rgba(250,245,239,.16); }
.smok__graf { margin: 0; position: relative; }
.chaos__plotno { display: block; width: 100%; height: 180px; }
.chaos__odczyt-pole { position: relative; }
.chaos__suwak { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 24px; font: 500 13px/1 var(--font-body); letter-spacing: .04em; color: rgba(250,245,239,.7); }
.chaos__suwak input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.chaos__suwak input::-webkit-slider-runnable-track { height: 2px; background: rgba(250,245,239,.28); border-radius: 2px; }
.chaos__suwak input::-moz-range-track { height: 2px; background: rgba(250,245,239,.28); border-radius: 2px; }
.chaos__suwak input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--amber); border: 0; box-shadow: 0 0 0 6px rgba(255,176,55,.18); }
.chaos__suwak input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--amber); border: 0; box-shadow: 0 0 0 6px rgba(255,176,55,.18); }
.chaos__suwak input:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }
/* Odczyt nad suwakiem jedzie za uchwytem (--s z JS); liczba w Cormorant, jednostka w <small> ze spacją na początku. */
.chaos__liczba { position: absolute; bottom: 34px; left: calc(var(--s, 0) * (100% - 22px) + 11px); transform: translateX(calc(var(--s, 0) * -100%)); white-space: nowrap; pointer-events: none;
  font: 500 26px/1 var(--font-display); letter-spacing: -.02em; color: var(--amber); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
/* Jednostka w Outfit: Cormorant nie schodzi poniżej 26 px (zasada właściciela), a odczyt ma 26 px. */
.chaos__liczba small { font: 500 14px/1 var(--font-body); letter-spacing: .02em; }
/* Bez JS płótno byłoby puste, a suwak martwy: moduł znika, liczby „do 10 godzin” i „kilka minut” stoją w akapitach obok. */
html:not(.js) .smok__graf { display: none; }
.smok__legenda { margin-top: 10px; font: 400 13px/1.45 var(--font-body); color: rgba(250,245,239,.62); }
.zmiany3__para { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 36px); border-top: 1px solid rgba(250,245,239,.16); }
.zmiana3 { padding-top: 22px; display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
/* CMB nie ma grafiki (wiersz 2), więc „przed”, „po” i „co” dostają wiersze wprost; inaczej wjeżdżały o jeden wyżej niż u WSSE. */
.zmiana3 > .zmiana__kto { grid-row: 1; }
.zmiana3 > .zmiana__przed { grid-row: 3; }
.zmiana3 > .zmiana__po { grid-row: 4; }
.zmiana3 > .zmiana__co { grid-row: 5; }
.wsse { display: flex; align-items: center; gap: 9px; height: 36px; margin-top: 6px; }
.wsse i { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(250,245,239,.28); transition: background .3s ease, opacity .4s ease, transform .4s ease; }
.wsse i.on { background: var(--cream); }
.wsse i.narz { width: 14px; height: 14px; background: var(--amber); }
.wsse i.narz:not(.on) { opacity: 0; transform: scale(.4); }
.wsse .sep { width: 18px; height: 1px; background: rgba(250,245,239,.35); margin: 0 4px; }
.zmiana3__legenda { font: 400 13px/1.45 var(--font-body); color: rgba(250,245,239,.62); margin-top: 6px; }
@media (max-width: 900px) {
  .smok { grid-template-columns: 1fr; gap: 10px; }
  .chaos__plotno { height: 150px; }
  .zmiany3__para { grid-template-columns: 1fr; }
}

/* ---------- Kim jestem (zdjęcie + tekst) ---------- */
.kim { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.kim img { width: 100%; height: auto; border-radius: var(--radius-xl); display: block; }
@media (max-width: 760px) { .kim { grid-template-columns: 1fr; } .kim img { max-width: 360px; } }

/* Trzy fakty z O mnie jako liczby oraz najmocniejsze zdanie wyciągnięte na wierzch. Pole „b” jest
   blokiem (liczba nad opisem), spacja po nim w źródle służy tekstowi dla agentów. */
.kim__fakty { list-style: none; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px clamp(24px, 3vw, 48px); margin-top: 28px; }
.kim__fakty li { border-top: 2px solid var(--amber); padding-top: 10px; font: 400 15px/1.4 var(--font-body); color: var(--ink-60); max-width: 19ch; }
.kim__fakty b { display: block; font: 500 clamp(34px, 3.2vw, 48px)/1 var(--font-display); color: var(--deep-teal); margin-bottom: 6px; }
.kim__zdanie { margin-top: 28px; padding-left: 20px; border-left: 3px solid var(--amber); font: 500 clamp(19px, 1.6vw, 22px)/1.45 var(--font-body); color: var(--deep-teal); max-width: 36ch; }

/* Liczby komponentów strony głównej: ta sama reguła, w strona-glowna.css po definicjach komponentów. */
.marza__liczba, .filary--v2 .filar__nr, .filary--v2 .filar__cena b,
.os-jak__liczba, .kim__fakty b { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
@media (max-width: 900px) { .kim__fakty { grid-template-columns: 1fr 1fr; } }

/* ---------- v3 (20.10.2026, runda 4): typografia ---------- */
/* Kursywa Cormoranta w wadze 500 (cienka 400 była słabo czytelna). Na telefonie podrzędne nagłówki ozdobne 26 px
   (próg Cormoranta), tytuły filarów 28 px, żeby H2 44 px wyraźnie górowało (proporcja 1,7 jak na komputerze). */
.hero-home h1 em, .zmiany-h em, .zmiana__po em, .kwota__liczba small, .marza__liczba small { font-weight: 500; }
@media (max-width: 900px) {
  .kwota__tytul, .karta h3 { font-size: 26px; }
  .filar__tytul { font-size: 28px; }
}