/* BBMG v2: wspólne komponenty sekcji (ładowane na każdej stronie v2). Kolory i fonty z tokens.css, zmienne
   serwisu z shared.css. Skala z makiety kierunku A (docs/specs/2026-10-10-strona-v2-makiety/), przeliczona
   z jednostek kontenera na clamp() względem szerokości okna.

   Komponenty jednej strony mieszkają w jej arkuszu, ładowanym po tym pliku: strona-glowna.css (hero z wykresem,
   pas cen, marża, filary, oś, karty, wyniki klientów, Kim jestem), oferta.css (W skrócie, etapy
   transformacji, Sprint z kalendarzem, rytm, wywiady, szkolenia, narzędzia, pytania), o-mnie.css (fakty i zdjęcie w hero, światy, kariera rok po roku, zasady, projekty) i
   kontakt.css (formularz, kanały, dane formalne, mapa). Komponent zostaje tu, gdy używają go co najmniej dwie strony.

   Kolory tekstu w komponentach są dobrane pod JASNE tło. Komponenty O mnie (o-mnie.css) mają
   być w sekcjach kremowych albo jasnozielonych; w sekcjach ciemnych (`.sekcja--ciemna`) używamy tylko `.kicker`,
   `.h2`, `.lead`, `.blok-h3`, `.uwaga-zgody`, `.link-strzalka`, `.btns`, `.dzial` oraz komponentów, które mają własny wariant na ciemne
   tło (w arkuszach stron), bo reszta go nie ma. */

/* ---------- Sekcje i nagłówki ---------- */
.sekcja { padding: clamp(72px, 9vw, 128px) 0; }
.sekcja--krem { background: var(--cream); }
.sekcja--jasna { background: var(--teal-soft); }
.sekcja--ciemna { background: var(--dark-teal); color: var(--cream); }
.kicker { font: 600 13px/1.3 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--deep-teal); margin: 0 0 18px; }
.sekcja--ciemna .kicker { color: var(--amber); }
/* v3 (runda 4): H2 odrobinę większe (komputer 69 px, telefon 44 px), żeby na telefonie wyraźnie górowało nad
   podrzędnymi nagłówkami ozdobnymi (26 px, proporcja 1,7 jak na komputerze). Kursywa w wadze 500: cienka 400
   była słabo czytelna. */
.h2 { font: 400 clamp(44px, 4.8vw, 70px)/1.02 var(--font-display); letter-spacing: -.02em; color: var(--deep-teal); max-width: 22ch; text-wrap: balance; }
.h2 em { font-style: italic; font-weight: 500; color: var(--amber-deep); }
@media (max-width: 900px) { .h2 { font-size: clamp(44px, 11.3vw, 52px); } }
.sekcja--ciemna .h2 { color: var(--cream); }
.sekcja--ciemna .h2 em { color: var(--amber); }

/* Ciemny bursztyn daje tylko ok. 2,95:1 na --teal-soft (poniżej 3:1 dla dużych napisów),
   więc wolno go używać wyłącznie na kremie; na jasnej zieleni akcent przejmuje ciemna zieleń. */
.sekcja--jasna .h2 em { color: var(--deep-teal); }
.naglowek-rzad { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-bottom: 1px solid rgba(14,83,74,.28); padding-bottom: 18px; }
.naglowek-rzad .kicker { margin: 0; }
.lead { font: 400 clamp(18px, 1.45vw, 21px)/1.6 var(--font-body); color: var(--ink-60); max-width: 60ch; margin-top: 20px; }
.sekcja--ciemna .lead { color: rgba(250,245,239,.86); }
.link-strzalka { display: inline-flex; gap: 8px; align-items: center; margin-top: 20px; font: 600 16px/1.3 var(--font-body); color: var(--deep-teal); text-decoration: none; border-bottom: 2px solid var(--amber); padding-bottom: 2px; }
.sekcja--ciemna .link-strzalka { color: var(--cream); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.uwaga-zgody { margin-top: 28px; font: 400 15px/1.5 var(--font-body); color: var(--ink-60); }
.sekcja--ciemna .uwaga-zgody { color: rgba(250,245,239,.74); }

/* ---------- Hero podstron (jasne, niższe) ---------- */
.hero-sub { position: relative; background: var(--cream); color: var(--deep-teal); padding: calc(var(--nav-height) + 8px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.hero-sub::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 42%; background-image: radial-gradient(rgba(14,83,74,.16) 1.1px, transparent 1.3px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.hero-sub > .container { position: relative; z-index: 1; }
.hero-sub__idx { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); border-top: 1px solid rgba(14,83,74,.25); list-style: none; }
.hero-sub__idx a { display: flex; gap: 10px; align-items: center; /* v3: bez numerów 01–04, filary nie są kolejnością */ padding: 14px 12px 14px 0; font: 500 15px/1.3 var(--font-body); letter-spacing: .03em; color: var(--deep-teal); text-decoration: none; }
.hero-sub__idx a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; }
.hero-sub__body { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: end; padding-top: clamp(32px, 4vw, 56px); }
.hero-sub h1 { font: 400 clamp(46px, 8.6vw, 124px)/.88 var(--font-display); letter-spacing: -.035em; }
.hero-sub h1 .l2 { display: block; padding-left: .55em; }
.hero-sub h1 em { font-style: italic; font-weight: 500; color: var(--amber-deep); }
.hero-sub__lead { font: 400 clamp(18px, 1.4vw, 21px)/1.55 var(--font-body); color: var(--ink-60); margin-top: 24px; max-width: 40ch; }
@media (max-width: 900px) { .hero-sub__body { grid-template-columns: 1fr; align-items: start; } .hero-sub::after { width: 70%; opacity: .6; } }
/* Żywe kropki (hero-sub-kropki.js): canvas na tej samej powierzchni co ::after (prawe 42%, na telefonie 70% z kryciem .6),
   z maską zanikającą w lewo liczoną w samym canvasie. Klasa hero-sub--zywe dochodzi dopiero z pierwszą klatką i chowa ::after,
   więc bez JS, przy ograniczonym ruchu i bez IntersectionObserver zostaje dzisiejsze statyczne tło. Canvas jest elementem
   zastępowanym: wysokość 100% ustawia pudełko, a rozmiar bufora skrypt dopasowuje osobno (ResizeObserver). */
.hero-sub--zywe::after { display: none; }
.hero-sub__plotno { position: absolute; top: 0; right: 0; width: 42%; height: 100%; pointer-events: none; }
/* v3: płótno przesuwa się przy przewijaniu (translateY z hero-sub-kropki.js). */
.hero-sub canvas { will-change: transform; }
@media (max-width: 900px) { .hero-sub__plotno { width: 70%; opacity: .6; } }

/* Kropka dekoracyjna infografik (.kd): pozycja inline left/top w pikselach pola, rozmiar i przejścia ustala komponent. */
.kd { position: absolute; border-radius: 50%; }


/* ---------- Cytaty ---------- */
/* Siatki auto-fit w tym pliku mają minimum w postaci min(Xpx, 100%): sam minmax(300px, ...)
   przy oknie 320 px (kontener ma 20 px marginesu) wypychałby kolumnę poza ekran i dawał poziomy scroll. */
.cytaty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: 36px; }
/* Biała karta, nad tekstem duży bursztynowy cudzysłów, cytat zwykłą czcionką tekstu, efekt pogrubiony (<strong>
   w HTML; słowa bez zmian, bramka porównuje je z eksportem referencji). Ozdobna czcionka zostaje dla nagłówków.
   Cudzysłów „ w Outfit rysuje się przy linii bazowej: przy interlinii 1 zajmuje od 0,69 do 1,04 em od góry
   linii. Pudełko jest więc przesunięte o -0,69 em i ma 1,27 em wysokości, co daje znak na górze karty i stały
   odstęp pod nim. Przy mniejszej interlinii i stałej wysokości znak spadał na pierwszy wiersz cytatu. */
.cytat { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 30px 30px 26px; margin: 0; }
.cytat::before { content: '„'; content: '„' / ''; display: block; font: 700 64px/1 var(--font-body); color: var(--amber); height: 1.27em; margin-top: -.69em; user-select: none; }
.cytat blockquote p { font: 400 19px/1.6 var(--font-body); color: var(--ink-60); }
.cytat blockquote strong { font-weight: 600; color: var(--deep-teal); }
.cytat figcaption { margin-top: 18px; font: 400 14px/1.45 var(--font-body); color: var(--ink-60); }
.cytat figcaption b { color: var(--deep-teal); font-weight: 600; }

/* Cyfry nautyczne Cormorant (domyślne) mają „1” podobne do „I” i „0” niższe od „8”, więc liczby i duże cyfry
   dostają cyfry tytułowe (lining). Jedna reguła zamiast powtarzania w każdym komponencie; stoi PO regułach
   komponentów, bo skrót `font:` zeruje font-variant-*, a przy równej specyficzności wygrywa późniejsza.
   .kwota__liczba ma własny wariant tabelaryczny (lining + tnum), więc nie wchodzi do grupy. */
.liczby { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* Jasne hero i kremowa sekcja pod nim mają to samo tło; cienka linia domyka hero (bez niej oba bloki zlewają się w jedną plamę). */
.hero-sub + .sekcja--krem { border-top: 1px solid rgba(14,83,74,.14); }

/* Nagłówek bloku w sekcji (h3): większy odstęp od tego, co nad nim, mniejszy rozmiar niż h2. */
.blok-h3 { margin-top: clamp(44px, 4.4vw, 72px); max-width: 30ch; font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--deep-teal); text-wrap: balance; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.sekcja--ciemna .blok-h3 { color: var(--cream); }


/* ---------- Cały dział finansów (ciemna sekcja: strona główna i oferta) ---------- */
/* Trzy kolumny: lista siedmiu funkcji, linie SVG zbiegające się w jednym punkcie, kwota. Wiersz listy ma
   stałe 72 px, bo SVG ma viewBox 504 = 7 x 72: linia kończy się w środku wiersza tylko wtedy, gdy wiersze
   mają dokładnie tę wysokość (stąd też zakaz łamania tekstu w wierszu: patrz zakres 901-1100 px niżej).
   Linie rysują się przez stroke-dashoffset (pathLength="1") po wejściu sekcji w widok (.is-in z reveal);
   bez JS i przy ograniczonym ruchu stoją od razu narysowane. */
.dzial { display: grid; grid-template-columns: minmax(0, 1.3fr) 180px minmax(0, 1fr); align-items: center; margin-top: clamp(36px, 4vw, 60px); }
.dzial__lista { list-style: none; }
.dzial__lista li { height: 72px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; border-top: 1px solid rgba(250,245,239,.14); }
.dzial__lista li:last-child { border-bottom: 1px solid rgba(250,245,239,.14); }
.dzial__lista .nr { font: 600 13px/1 var(--font-body); letter-spacing: .08em; color: var(--amber); }
.dzial__lista .co { font: 400 clamp(22px, 2.1vw, 30px)/1.1 var(--font-display); color: var(--cream); }
.dzial__lista .kto { font: 400 14px/1.2 var(--font-body); color: rgba(250,245,239,.72); text-align: right; padding-right: 18px; }
.dzial__linie svg { display: block; width: 100%; height: 504px; overflow: visible; }
.dzial__linie path { fill: none; stroke: rgba(255,176,55,.55); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.6,.2,1), stroke .3s ease, stroke-width .3s ease; transition-delay: calc(var(--i) * 90ms), 0s, 0s; }
.is-in .dzial__linie path, html:not(.js) .dzial__linie path { stroke-dashoffset: 0; }

/* Dwie kropki na każdej linii (ellipse .dzial__kropka z animateMotion; elipsa, bo SVG jest rozciągnięty bez zachowania
   proporcji, a rx i ry z dzial-kropki.js równoważą skalę) tworzy dzial-kropki.js, tylko bez ograniczonego ruchu i z
   IntersectionObserver; poza widokiem animacje SVG są wstrzymane (pauseAnimations). Najechanie myszą na wiersz funkcji
   (.dzial__linie--fokus na wrapperze, .on na jej linii i kropkach) podświetla tę linię, resztę przygasza; klasy
   dodaje JS tylko przy (hover: hover) and (pointer: fine), a reguły stoją w @media (hover: hover). */
.dzial__kropka { fill: var(--amber); transition: opacity .3s ease; }
.dzial__lista .co { transition: color .3s ease; }
@media (hover: hover) {
  .dzial__linie--fokus path { stroke: rgba(255,176,55,.14); }
  .dzial__linie--fokus path.on { stroke: var(--amber); stroke-width: 2.5; }
  .dzial__linie--fokus .dzial__kropka { opacity: .2; }
  .dzial__linie--fokus .dzial__kropka.on { opacity: 1; }
  .dzial__lista li.on .co { color: var(--amber); }
}
.dzial__cel { padding-left: clamp(16px, 2vw, 32px); position: relative; }
.dzial__cel::before { content: ''; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 8px rgba(255,176,55,.18), 0 0 0 18px rgba(255,176,55,.07); }

/* Punkt docelowy lekko błyska (klasa .blysk dodawana co 700 ms przez dzial-kropki.js, tylko w widoku). */
@media (prefers-reduced-motion: no-preference) { .dzial__cel.blysk::before { animation: dzial-blysk .5s ease-out; } }
@keyframes dzial-blysk { 0% { box-shadow: 0 0 0 8px rgba(255,176,55,.18), 0 0 0 18px rgba(255,176,55,.07); } 40% { box-shadow: 0 0 0 12px rgba(255,176,55,.35), 0 0 0 26px rgba(255,176,55,.12); } 100% { box-shadow: 0 0 0 8px rgba(255,176,55,.18), 0 0 0 18px rgba(255,176,55,.07); } }

/* Kwota i „zł” w osobnych znacznikach; spacja na początku <small> (tekst dla agentów) robi odstęp, jak w pasie cen. */
.dzial__kwota { font: 500 clamp(64px, 6.6vw, 104px)/.9 var(--font-display); letter-spacing: -.035em; color: var(--amber); white-space: nowrap; }
.dzial__kwota small { font: italic 500 .36em/1 var(--font-display); letter-spacing: 0; }
.dzial__kiedy { margin-top: 12px; font: 600 16px/1.35 var(--font-body); color: var(--cream); }
.dzial__opis { margin-top: 10px; font: 400 16px/1.55 var(--font-body); color: rgba(250,245,239,.82); max-width: 34ch; }

/* Wiersz dopłaty (dyrektor finansowy): ramka z bursztynowym tłem, linia przerywana (to opcja, nie część
   działu) i mniejsza kwota. Wysokość 90 px zgrana z SVG tej linii. */
.dzial__plus { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; height: 90px; margin-top: 28px; padding: 0 18px 0 14px; border-radius: var(--radius-lg); background: rgba(255,176,55,.08); border: 1px solid rgba(255,176,55,.35); }
.dzial__plus .nr { font: 400 40px/1 var(--font-display); color: var(--amber); margin-top: -4px; }
.dzial__plus .co { font: 400 clamp(22px, 2.1vw, 30px)/1.1 var(--font-display); color: var(--cream); }
.dzial__plus .kto { font: 400 14px/1.2 var(--font-body); color: rgba(250,245,239,.72); }
.dzial__linie--plus { margin-top: 28px; }
.dzial__linie--plus svg { height: 90px; }
.dzial__linie--plus path { stroke-dasharray: .03 .02; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s ease 1s; }
.is-in .dzial__linie--plus path, html:not(.js) .dzial__linie--plus path { opacity: 1; stroke-dashoffset: 0; }
.dzial__cel--plus { margin-top: 28px; }
.dzial__cel--plus::before { width: 12px; height: 12px; margin-top: -6px; left: -6px; box-shadow: 0 0 0 6px rgba(255,176,55,.16); }
.dzial__dop { font: 500 clamp(40px, 3.8vw, 58px)/.9 var(--font-display); letter-spacing: -.03em; color: var(--amber); white-space: nowrap; }
.dzial__dop .znak { font-weight: 400; margin-right: .06em; }
.dzial__dop small { font: italic 500 .4em/1 var(--font-display); letter-spacing: 0; }
.dzial__cel--plus .dzial__kiedy { margin-top: 10px; }
.dzial__cel--plus .dzial__opis { margin-top: 6px; font-size: 15px; }
.dzial__uwaga { margin-top: 28px; font: 400 15px/1.5 var(--font-body); color: rgba(250,245,239,.74); }

/* 901-1100 px: przy 1,3fr / 180 px / 1fr kolumna listy ma tylko 350-500 px, więc „Planowanie i FP&A” i „Budżet
   i jego wykonanie” łamały się na dwie linie i wiersz przestawał pasować do 72 px z SVG. Węższy rysunek
   (120 px) oddaje miejsce liście, a font i prawy odstęp roli są mniejsze. */
@media (min-width: 901px) and (max-width: 1100px) {
  .dzial { grid-template-columns: minmax(0, 1.5fr) 120px minmax(0, 1fr); }
  /* 20 px, nie próg 26 px z v3: przy 26 px „Planowanie i FP&A” łamie się tu na dwie linie (pomiar 901 px). */
  .dzial__lista .co, .dzial__plus .co { font-size: 20px; }
  .dzial__lista .kto { font-size: 13px; padding-right: 10px; }
}
@media (max-width: 900px) {
  .dzial { grid-template-columns: 1fr; }
  /* v3: próg Cormoranta 26 px (clamp dawał 22 px). */
  .dzial__lista .co, .dzial__plus .co { font-size: 26px; }
  .dzial__lista li { height: auto; padding: 14px 0; grid-template-columns: 34px 1fr; }
  .dzial__lista .kto { grid-column: 2; text-align: left; }
  /* Na telefonie linie SVG zastępuje krótka pionowa kreska (dopłata) albo zbieg siedmiu linii (dział, v3 niżej). */
  .dzial__linie { height: 36px; border-left: 2px solid rgba(255,176,55,.55); margin: 14px 0 20px 8px; }
  .dzial__linie svg { display: none; }
  .dzial__linie:not(.dzial__linie--plus) { display: none; }
  .dzial__cel::before { display: none; }
  .dzial__cel { padding-left: 0; }
  .dzial__plus { height: auto; padding: 14px; grid-template-columns: 30px 1fr; }
  .dzial__plus .kto { grid-column: 2; }
  .dzial__linie--plus { margin-top: 14px; }
  .dzial__cel--plus { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dzial__linie path { stroke-dashoffset: 0; }
  .dzial__linie--plus path { opacity: 1; }
  .dzial__zbieg path { stroke-dashoffset: 0; }
}

/* v3 (runda 2): na telefonie zamiast pionowej kreski siedem linii zbiega się w jednej kropce nad kwotą. Linie rysują
   się po wejściu sekcji w widok (.is-in z reveal), kropki płyną raz po liniach (dzial-kropki.js) i zastygają w punkcie
   zbiegu; dotknięcie odtwarza. Na komputerze rysunek ukryty, działa pełny rysunek z liniami. */
.dzial__zbieg { display: none; }
@media (max-width: 900px) {
  .dzial__zbieg { display: block; margin: 10px 0 2px; }
  .dzial__zbieg svg { display: block; width: 100%; height: auto; overflow: visible; }
  .dzial__zbieg path { fill: none; stroke: rgba(255,176,55,.55); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.6,.2,1); transition-delay: calc(var(--i) * 90ms); }
  .is-in .dzial__zbieg path, html:not(.js) .dzial__zbieg path { stroke-dashoffset: 0; }
  .dzial__zbieg .cel { fill: var(--amber); }
  .dzial__zbieg .halo { fill: rgba(255,176,55,.18); }
  .dzial__zbieg .kropka { fill: var(--amber); }
  .dzial__cel { padding-top: 6px; }
}
.dzial__kwota, .dzial__dop { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* ---------- Blok zwijany na telefonie (v3, runda 3) ---------- */
/* Treść drugorzędna (.zwin > .zwin__tresc) na telefonie chowa się pod przyciskiem z nazwą bloku (data-tytul);
   przycisk wstawia interactions.js, więc bez JS wszystko widać, a treść zostaje w HTML dla wyszukiwarek i agentów.
   Na komputerze przycisk ukryty, treść zawsze widoczna. Oferta: rytm 30/60/90 i obszary celów, sześć obszarów,
   cztery kroki wywiadów, lista narzędzi. */
.zwin__btn { display: none; }
@media (max-width: 900px) {
  html.js .zwin__btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 18px; min-height: 44px; border-radius: 999px;
    border: 1.5px solid rgba(14,83,74,.45); background: transparent; color: var(--deep-teal); font: 600 15px/1 var(--font-body); cursor: pointer; }
  .sekcja--ciemna .zwin__btn { border-color: rgba(250,245,239,.4); color: var(--cream); }
  .zwin__btn::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
  .zwin.open .zwin__btn::after { transform: translateY(2px) rotate(-135deg); }
  html.js .zwin:not(.open) > .zwin__tresc { display: none; }
  .zwin.open > .zwin__tresc { animation: zwin-wejscie .35s ease-out; }
  .zwin__btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
}
@keyframes zwin-wejscie { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zwin.open > .zwin__tresc { animation: none; } }