/* =================================================================
   ISKRA — wspólny arkusz stylów PODSTRON (system B):
   o-nas.html + oferta-*.html (port z „Generalnego podejścia").
   NIE MYLIĆ z src/styles.css (landing React — osobny system!).
   Paleta obowiązuje ta sama: krem #FFFFEB · czerń · zieleń #034F46
   (CLAUDE.md §5). Logika podstron: assets/main.js.
   ================================================================= */

/* ---------- 0. Zmienne, reset ---------- */
:root {
  /* Marka — głęboka morska zieleń */
  --brand: #034F46;
  --brand-dark: #013A34;
  --brand-mint: #74D3BE;
  --brand-mint-h: #8FE0CC;
  /* Czerń */
  --black: #1A1B1B;
  /* Tło jasne (krem) — jeden, jedyny odcień na całej stronie */
  --bg-light: #FFFFEB;
  /* Sekcje ciemne (zieleń marki) */
  --bg-dark: var(--brand);
  --card-dark: #0A5A50;
  /* Akcent — zieleń na jasnym tle, mięta na ciemnym */
  --accent: var(--brand);
  --accent-hover: var(--brand-dark);
  --accent-on-dark: var(--brand-mint);
  --accent-on-dark-h: var(--brand-mint-h);
  /* Tekst na jasnym */
  --text: #1A1B1B;
  --text-muted: rgba(26, 27, 27, .74); /* muted = alpha paletowej czerni (było #666666) */
  /* Tekst na ciemnym */
  --text-on-dark: #FFFFEB;
  --muted-on-dark: rgba(255, 255, 235, .72); /* krem-alpha, czytelny na zieleni (było #A6C3BB) */
  /* Linie */
  --line-light: rgba(0, 0, 0, 0.12);
  --line-dark: rgba(254, 255, 234, 0.14);
  /* Wymiary */
  --maxw: 1240px;   /* 1:1 z landingiem (src/styles.css --maxw) — spójna szerokość treści */
  --radius: 18px;
  --radius-lg: 28px;
  --radius-cap: 72px;   /* zaokrąglona „czapka" sekcji na zmianie koloru tła (1:1 z landingiem; wzór Wispr Flow — większy łuk) */
  --nav-h: 72px;
  --eyebrow-gap: 20px;  /* JEDEN odstęp pigułka (eyebrow) → nagłówek w całej witrynie */
  /* Czcionki — typografia jak Wispr Flow:
     display = EB Garamond (serif, redakcyjny charakter),
     tekst   = Figtree (neutralny, czytelny grotesk),
     akcent  = Figtree z uppercase + letter-spacing (etykiety, indeksy, UI-chrome, liczby). */
  --font-display: "EB Garamond", Georgia, serif;
  --font-text: "Figtree", system-ui, sans-serif;
  --font-accent: "Figtree", system-ui, sans-serif; /* 2 fonty max — Geist Mono usuniety */
  /* Skala typograficzna — JEDEN zestaw rozmiarów nagłówków w całej witrynie
     (te same tokeny w src/styles.css — zmieniać w obu plikach naraz!) */
  --fs-h1: calc(clamp(3.4rem, 6.1vw, 5.6rem) + 2px);  /* hero H1 podstron */
  --fs-h2: clamp(2.4rem, 5.4vw, 4.4rem);              /* nagłówek sekcji (.section-title) */
  --fs-h2-xl: clamp(2.4rem, 6.6vw, 5.2rem);           /* sekcja „duża" (#anatomia, #porownanie…) */
  --fs-h2-sm: clamp(2rem, 3.8vw, 3.2rem);             /* sekcja mniejsza / karty formularza */
  --fs-h3: clamp(1.35rem, 1.9vw, 1.7rem);             /* tytuły kart */
  --fs-h3-lg: clamp(1.7rem, 3vw, 2.5rem);             /* duże tytuły paneli */
  --fs-lead: clamp(1.08rem, 1.4vw, 1.3rem);           /* lead / .section-sub */
  --fs-eyebrow: 0.8rem;
  /* Animacja */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Aliasy pod port navbara z landingu (src/styles.css używa tych nazw) */
  --bg: var(--bg-light);
  --border: var(--line-light);
  --border-light: var(--line-dark);
  --text-invert: var(--text-on-dark);
  --font-body: var(--font-text);
}

/* Mobile: H1 pozostaje NAJWIĘKSZYM nagłówkiem strony (min tokenów H2 = 2.4rem < 2.45rem) */
@media (max-width: 760px) {
  :root { --fs-h1: clamp(2.45rem, 10vw, 2.75rem); }
}

/* ── DUŻE MONITORY — skalowanie szerokości treści (1:1 z src/styles.css) ─────
   Bez tego podstrony capują kolumnę na 1240px i na 2560px treść ginie na środku
   (~655px pustego z każdej strony). Te same breakpointy co landing. */
@media (min-width: 1600px) { :root { --maxw: 1400px; } }
@media (min-width: 2100px) { :root { --maxw: 1520px; } }
@media (min-width: 2400px) { :root { --maxw: 1640px; } }

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  color: var(--text);
  background: var(--bg-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip (nie hidden) — przycina poziomo bez robienia z body scrollera,
     dzięki czemu position: sticky w hero działa pewnie. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---------- Dostępność: widoczny focus dla klawiatury ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.section--dark :focus-visible, .footer :focus-visible { outline-color: var(--accent-on-dark); }
.nav :focus-visible, .mobile-menu :focus-visible { outline-color: currentColor; } /* adaptuje się do koloru tekstu nav (mięta na ciemnym / ciemny na jasnym) */
:focus:not(:focus-visible) { outline: none; } /* mysz — bez ramki, klawiatura — z ramką */

/* ---------- Typografia bazowa ---------- */
/* Nagłówki = EB Garamond REGULAR (400), jak na landingu (zasada Wispr Flow: „nie pogrubiony").
   UI-chrome, który jawnie ustawia 700 (makiety, liczby .stat__num, pigułki, nazwiska), zostaje bold. */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.025em; }
/* Emfaza w nagłówku = jak na landingu (.sg-accent): TEN SAM krój i waga (EB Garamond 400),
   wyróżnienie NIESIE TYLKO KOLOR (zasada §8) — zieleń var(--accent), a na .section--dark/--black
   zmienna --accent sama przełącza się na miętę. Nigdy pogrubienie/kursywa/inny font. */
.h-italic { font-family: inherit; font-style: normal; font-weight: 400; letter-spacing: inherit; color: var(--accent); }
/* Sygnaturowy gradient-ink — wlej w JEDNO słowo nagłówka (max 1/sekcja). Akcent zamiast koloru tła. */
:root { --ink-grad: linear-gradient(105deg, var(--brand) 4%, #2E7A6E 34%, #6FBFA9 66%, var(--brand-mint) 102%); }
.section--dark, .footer { --ink-grad: linear-gradient(105deg, var(--brand-mint) 0%, #BFEFE0 48%, #FFFFFF 82%, var(--brand-mint-h) 104%); }


/* Eyebrow = PIGUŁKA (wzór .awf__eyebrow) — kreska/myślnik usunięta, zamiast niej
   zaokrąglona plakietka. Domyślnie wariant na jasnym tle (krem); na .section--dark
   / .footer tło i ramka przełączają się na przezroczystą biel, a --accent sam
   przechodzi na miętę. */
.eyebrow {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(26, 27, 27, .04); border: 1px solid rgba(26, 27, 27, .13);
  font-family: var(--font-accent); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.section--dark .eyebrow, .footer .eyebrow {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .13);
}

/* ---------- Layout pomocnicze ---------- */
.wrap { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 130px) 0; position: relative; }
.section--light { background: var(--bg-light); color: var(--text); }
.section--soft  { background: var(--bg-light);  color: var(--text); }
.section--dark  { background: var(--bg-dark);  color: var(--text-on-dark); }
/* Na ciemnych sekcjach akcent przechodzi w jaśniejszą miętę dla czytelności */
.section--dark, .footer { --accent: var(--accent-on-dark); --accent-hover: var(--accent-on-dark-h); }
/* Czarny wariant ciemnej sekcji — zachowuje CAŁĄ semantykę .section--dark (jasny tekst, miętowy akcent,
   ciemny ink-grad), nadpisuje tylko tło na czerń. Stosuj jako: class="section section--dark section--black". */
.section--black { background: var(--black); }

/* ---------- Zaokrąglone „czapki" sekcji (motyw z landingu, src/styles.css .sg-cap) ----------
   Sekcja otwierająca NOWY blok koloru tła nachodzi na poprzednią zaokrąglonym górnym
   brzegiem (ujemny margines + radius). Dostają ją TYLKO sekcje na ZMIANIE koloru
   (krem↔czerń) — na styku krem–krem byłaby niewidoczna (ten sam kolor po obu stronach).
   Finał (.cta-final) i stopka (.footer) niosą ten sam motyw własnymi regułami. */
.sg-cap {
  border-top-left-radius: var(--radius-cap);
  border-top-right-radius: var(--radius-cap);
  margin-top: calc(-1 * var(--radius-cap));
  position: relative; z-index: 1;
}
/* Górny hairline „Dlaczego my" (.about-dark::before) zbędny pod czapką — rozcinałby
   zaokrąglone rogi prostą linią; rolę separatora przejmuje sam zaokrąglony brzeg. */

/* Odwrotność czapki (1:1 z landingiem, src/styles.css .sg-cap-bottom): sekcja WYŻSZA
   kończy się zaokrąglonym dolnym brzegiem i nachodzi (ujemny margines + z-index) na
   sekcję pod sobą — ta pod spodem wygląda na „przyczepioną" do góry. Używane na styku
   z kinowym finałem: kremowy dół schodzi zaokrąglony NA prostokątne zdjęcie. */
.sg-cap-bottom {
  border-bottom-left-radius: var(--radius-cap);
  border-bottom-right-radius: var(--radius-cap);
  margin-bottom: calc(-1 * var(--radius-cap));
  position: relative; z-index: 2;
}
/* MOBILE: łuk czapki = 72px na ekranie ~390px jest nieproporcjonalnie duży, a co
   gorsza zjada treść — strefa nachodzenia (margin: -radius-cap) bywa większa niż
   padding sekcji (clamp dół = 64px, a niektóre over// hero/podgląd jeszcze mniej),
   więc baner/karta przy krawędzi wpadała pod sąsiednią sekcję. Mniejszy łuk zmniejsza
   KAŻDĄ strefę nachodzenia → treść mieści się z zapasem (hero 20px, podgląd 12px,
   aiw 4px, soft 24px). Monotonicznie bezpieczne: nic, co teraz się mieści, nie zepsuje. */
@media (max-width: 760px) {
  :root { --radius-cap: 36px; }
  /* CRM „Każda firma sprzedaje inaczej." — zmieść pierwsze zdanie w jednym
     wierszu (nagłówek w 2 liniach, nie 3) na wąskim ekranie. */
  #proces .section-title { font-size: clamp(1.6rem, 8vw, 2rem); }
}

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section--black .section-head { margin-bottom: 100px; }
.section-head.center { margin-inline: auto; text-align: center; }
/* Rozmiar tytułu sekcji 1:1 z landingiem (src/styles.css — generyczny tytuł sekcji). */
.section-title { font-size: var(--fs-h2); margin: var(--eyebrow-gap) 0 14px; letter-spacing: -.02em; line-height: 1.1; }
/* o-nas: H2 sekcji odrobinę większe na wąskich ekranach (min 2.4→2.6rem) — pod H1
   hero, nad H3 .wf-feat. Zakotwiczone pod .about-page, by nie ruszać innych podstron. */
.about-page .section-title { font-size: var(--fs-h2); }
/* Podtytuł/lead = token 1:1 z landingiem (.sg-lead): clamp + line-height 1.6 (skaluje na szerokich ekranach). */
.section-sub { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-muted); max-width: 56ch; }
.section--dark .section-sub { color: var(--muted-on-dark); }
/* Cyfry stałej szerokości — stabilny layout podczas data-count */
.stat__num, [data-count] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
/* Redakcyjne łamanie linii (współgra z reveal-mask — mierzy wrapper po złamaniu) */
.section-title, .cta__title, .manifest { text-wrap: balance; }
.section-sub, .page-hero p { text-wrap: pretty; }

/* ---------- oferta-ai.html — nagłówki 1:1 z landingiem (React, src/styles.css) ----------
   Scoped do body.ai-page, by NIE ruszać pozostałych podstron (wspólny arkusz).
   Eyebrow, podtytuł (.section-sub) i waga (400) JUŻ są identyczne — niżej dostrajamy
   tylko skalę/line-height/letter-spacing tytułów. */
/* Tytuły sekcji = sekcyjny tytuł landingu (.sg-spec__title) —
   mikro-wyrównanie line-height (1.1→1.05) i letter-spacing (−.02→−.022em). */
body.ai-page .section-title {
  line-height: 1.05;
  letter-spacing: -.022em;
}
/* H1 hero AI dzieli klasę .section-title z H2 sekcji → na telefonie wszystkie miały
   równe 38.4px. Podbite minimum daje H1 prymat na mobile; desktop (5.4vw) bez zmian. */
.ai-demo .section-title { font-size: var(--fs-h1); }

/* ---------- Przyciski ---------- */
/* Geometria/typografia 1:1 z landingiem (src/styles.css .sg-btn):
   padding 15/28, radius 13, font-size calc(1.3rem - 3px), letter-spacing .01em.
   Zachowanie hover też jak na landingu: okienko kurczy się o 2% (scale .98),
   strzałka przesuwa się o 5px, litery robią falę (.is-waving, dodaje main.js). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 13px; font-weight: 600; font-size: calc(1.3rem - 3px);
  letter-spacing: 0.01em; border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap; cursor: pointer;
}
/* CTA: okienko kurczy się o 2% na hover (jak .sg-btn na landingu) — fala + strzałka bez zmian. */
.btn:hover { transform: scale(0.98); }
/* Primary CTA = zielone wypełnienie + kremowy tekst, 1:1 z landingiem (.sg-btn--primary). */
.btn--primary {
  color: var(--bg-light);
  background: var(--brand);
  border: 1px solid transparent;
}
/* CTA: bez cienia i bez zmiany koloru na hover — reaguje tylko falą + strzałką. */
/* Na ciemnych sekcjach krem kontrastuje sam — ramka delikatnie miętowa */
.section--dark .btn--primary, .footer .btn--primary { border-color: rgba(254, 255, 234, 0.28); }
.btn--ghost {
  border: 1px solid transparent; color: var(--text);
  background: linear-gradient(var(--bg-light), var(--bg-light)) padding-box,
              linear-gradient(120deg, var(--accent), var(--brand-mint)) border-box;
  transition: transform .25s var(--ease), color .25s var(--ease);
}
/* ghost CTA: też bez zmiany koloru na hover (spójnie z resztą przycisków). */
.section--soft .btn--ghost { background: linear-gradient(var(--bg-light), var(--bg-light)) padding-box, linear-gradient(120deg, var(--accent), var(--brand-mint)) border-box; }
.section--dark .btn--ghost { color: #fff; background: linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box, linear-gradient(120deg, var(--accent-on-dark), var(--brand-mint-h)) border-box; }
.section--dark .btn--ghost:hover { color: #fff; }
/* Zielony przycisk-CTA (nasz podstawowy) — zieleń marki + kremowy tekst,
   spójnie z finałowym CTA na landingu (sg-btn--primary). */
.btn--cream { color: var(--bg-light); background: var(--brand); }
/* cream CTA: bez cienia i bez zmiany koloru na hover. */
/* Strzałka w CTA na stronie = goła „→" jak na landingu (.sg-arr) — bez kółka/tła.
   (Pasek nawigacji zachowuje kółko własną regułą .nav .btn .arr poniżej.) */
.btn .arr {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1em; flex: none;
  transition: transform .25s var(--ease);
}
.btn:hover .arr { transform: translateX(5px); }

/* =================================================================
   1. NAWIGACJA
   ================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0;                                    /* GÓRA: pasek pełnej szerokości, przy krawędzi */
  background: transparent; pointer-events: none;
  transition: padding .5s var(--ease), transform .55s var(--ease);
}
/* PO SCROLLU: wcięcie z boków + odklejenie od góry — animowany padding daje morf szerokości */
.nav.scrolled {
  padding: 14px clamp(16px, calc((100vw - 1084px) / 2), 46vw) 0;  /* szerokość kapsuły 1084 */
}
.nav--hidden { transform: translateY(calc(-100% - 24px)); }
.nav__inner {
  pointer-events: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;  /* środkowa kolumna (linki) wyśrodkowana względem okna */
  gap: clamp(14px, 3vw, 28px);
  width: 100%;
  padding: 9.4px clamp(18px, 3vw, 24px);          /* GÓRA: góra==dół → treść wyśrodkowana w pionie */
  background: var(--bg);
  border: 2px solid transparent;                 /* GÓRA: bez widocznej ramki bocznej/górnej */
  border-bottom-color: var(--border);            /* GÓRA: cienka linia dołem, jak klasyczny header */
  border-radius: 0;                              /* GÓRA: proste rogi */
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.03);
  transition: border-radius .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease), padding .5s var(--ease),
              background .4s var(--ease);
}
/* PO SCROLLU: pełna ramka + zaokrąglenie + cień — odklejona, pływająca kapsuła */
.nav.scrolled .nav__inner {
  padding: 11.5px;                               /* jednolity inset kapsuły */
  border-color: var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.10);
}
.nav__logo { color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 1.82rem; letter-spacing: -0.03em; display: flex; align-items: center; gap: 12px; transition: color .35s var(--ease); }
/* Znak marki = świecowy znak ze stopki (5 rosnących słupków), tu mały i statyczny. currentColor → podąża za kolorem logo. */
.nav__logo .nav__mark { height: 0.86em; width: auto; display: block; flex: none; }
.nav__logo .nav__mark rect { fill: currentColor; }

.nav__links {
  grid-column: 2; justify-self: center;
  display: flex; align-items: center; gap: clamp(2px, 1vw, 10px);
}
.nav__links a {
  font-size: calc(1.3rem - 3px); font-weight: 600; color: var(--text);
  position: relative; padding: 8px 14px; border-radius: 12px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__links a:hover { background: rgba(26, 27, 27, 0.05); }
.nav__links a.active { color: var(--brand); }

.nav__cta { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; flex-direction: column; gap: 6.5px; width: 39px; height: 31px; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; }
.nav__burger span { display: block; height: 2.6px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease), background .35s var(--ease); }
.nav__burger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Fala liter — wyzwalana :hover (linki/dropdown) oraz klasą .is-waving (przyciski; dodaje JS) */
.nav-char { display: inline-block; }
.nav__links a:hover .nav-char,
.nav__dropdown-menu li a:hover .nav-char,
.is-waving .nav-char {
  animation: navLetterWave .6s var(--ease) both;
  animation-delay: calc(var(--i) * 50ms);
}
@keyframes navLetterWave { 0% { transform: translateY(0); } 40% { transform: translateY(-5px); } 100% { transform: translateY(0); } }

/* Przycisk CTA w nav/menu — zielone wypełnienie z kremową etykietą */
.nav .btn, .mobile-menu .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 9px 28px; border-radius: 14px; font-weight: 600; font-size: 1.27rem;
  white-space: nowrap; cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav .btn--primary, .mobile-menu .btn--primary {
  color: var(--bg); background: var(--brand);
  border: 1px solid transparent;
}
.nav.scrolled .btn--primary { border-color: transparent; }
/* Przycisk „Kontakt" w navbarze — o ~8% mniejszy niż pozostałe CTA */
.nav__cta .btn--primary {
  padding: 8.3px 25.8px; font-size: calc(1.168rem - 1px); gap: 10px; border-radius: 12.9px;
}
.nav .btn .arr, .mobile-menu .btn .arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55em; height: 1.55em; border-radius: 50%;
  background: rgba(0, 0, 0, 0.10); font-size: 0.88em; flex: none;
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav .btn:hover .arr, .mobile-menu .btn:hover .arr { transform: translateX(3px); }
.nav .btn:hover, .mobile-menu .btn:hover { transform: scale(0.98); }

/* ADAPTACYJNY MOTYW PASKA (.nav--dark) — pasek nad CIEMNĄ sekcją (hero section--black,
   finale, film CRM, stopka). Zmienia się TYLKO treść paska: kapsuła ciemnieje
   (przezroczysta czerń + blur), tekst/logo/burger kremowe, akcent/hover = mięta.
   Przełącza JS (sonda pod paskiem). Paleta = 3 kolory marki. */
.nav--dark .nav__inner {
  background: rgba(26, 27, 27, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--border-light);
}
.nav--dark.scrolled .nav__inner {
  background: rgba(26, 27, 27, 0.62);
  border-color: var(--border-light);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.nav--dark .nav__logo,
.nav--dark .nav__links a,
.nav--dark .nav__dropdown-toggle { color: var(--text-invert); }
.nav--dark .nav__links a:hover,
.nav--dark .nav__dropdown.open .nav__dropdown-toggle,
.nav--dark .nav__dropdown-toggle:hover { background: rgba(244, 244, 227, 0.10); }
.nav--dark .nav__links a.active { color: var(--brand-mint); }
.nav--dark .nav__burger span { background: var(--text-invert); }
/* Karta dropdownu zostaje jasna także nad ciemną sekcją — pozycje muszą mieć CIEMNY tekst. */
.nav--dark .nav__dropdown-menu li a { color: var(--text); }
.nav--dark .nav__dropdown-menu li a:hover { background: rgba(26, 27, 27, 0.05); color: var(--brand); }

/* Dropdown „Oferta" */
.nav__dropdown { position: relative; }
.nav__dropdown-toggle {
  font-size: calc(1.3rem - 3px); font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 12px; position: relative;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__dropdown.open .nav__dropdown-toggle,
.nav__dropdown-toggle:hover { background: rgba(26, 27, 27, 0.05); }
.nav__chevron {
  display: inline-block; font-size: 0.65em; line-height: 1; margin-top: 1px;
  transition: transform .3s var(--ease);
}
.nav__dropdown.open .nav__chevron { transform: rotate(180deg); }

.nav__dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.8);
  transform-origin: top center;
  background: var(--bg);
  border: 2px solid var(--border);
  box-shadow: 0 16px 44px rgba(26,26,26,0.12);
  border-radius: 14px; padding: 8px; min-width: 364px;
  list-style: none; margin: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .3s var(--ease);
  z-index: 200;
}
.nav__dropdown.open .nav__dropdown-menu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(0.8);
}
.nav__dropdown-menu li a {
  display: block; padding: 14px 21px;
  border-radius: 12px;
  font-size: 1.24rem; font-weight: 600; color: var(--text);
  transition: background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.nav__dropdown-menu li a:hover { background: rgba(26,27,27,0.05); color: var(--brand); }

/* Menu mobilne */
/* Menu mobilne 1:1 z landingiem (src/styles.css, Nav.jsx) — synchronizacja 2026-06-30,
   żeby podstrony miały DOKŁADNIE ten sam navbar co strona główna. Pełnoekranowa kremowa
   nakładka z kurtyną clip-path i kaskadowym wjazdem pozycji (poprzednio: mały panel pod
   paskiem z translateY, bez staggeru). */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(255,255,235,0.98);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  display: flex; flex-direction: column; gap: 6px;
  padding: 96px 24px max(32px, env(safe-area-inset-bottom)); /* góra: pod kapsułą paska */
  clip-path: inset(0 0 100% 0);                  /* zamknięte: widoczna tylko górna krawędź */
  opacity: 0; pointer-events: none;
  transition: clip-path .5s var(--ease), opacity .3s var(--ease);
}
.mobile-menu.open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }

/* Kaskada pozycji. Delaye tylko przy OTWIERANIU; po zdjęciu .open znikają →
   wszystko gaśnie razem (bez „lagującego" zwijania). */
.mobile-menu > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.mobile-menu.open > * { opacity: 1; transform: none; }
.mobile-menu.open > *:nth-child(1) { transition-delay: .12s; }
.mobile-menu.open > *:nth-child(2) { transition-delay: .17s; }
.mobile-menu.open > *:nth-child(3) { transition-delay: .22s; }
.mobile-menu.open > *:nth-child(4) { transition-delay: .27s; }
.mobile-menu.open > *:nth-child(5) { transition-delay: .32s; }
.mobile-menu.open > *:nth-child(6) { transition-delay: .37s; }
.mobile-menu.open > *:nth-child(7) { transition-delay: .42s; }
.mobile-menu.open > *:nth-child(8) { transition-delay: .47s; }
.mobile-menu a { padding: 14px 6px; font-size: 1.2rem; font-weight: 600; border-bottom: 1px solid var(--border); color: var(--text); }
.mobile-menu a.active { color: var(--brand); }
.mobile-menu .btn { margin-top: 16px; border-bottom: none; }
.mobile-menu .mob-oferta-label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); padding: 8px 0 4px;
}
.mobile-menu .mob-oferta { padding-left: 10px; }

/* Menu mobilne nad CIEMNĄ sekcją — przejmuje motyw paska (.nav--dark): rozwinięte menu
   ciemnieje razem z kapsułą, tekst kremowy, akcent mięta. Klasę ustawia JS w chwili
   otwarcia (stan sondy pod paskiem), więc menu pasuje do koloru aktualnej sekcji.
   Paleta = 3 kolory marki (czerń-alpha + krem + mięta). */
.mobile-menu--dark { background: rgba(26, 27, 27, 0.98); }
.mobile-menu--dark a { color: var(--text-invert); border-bottom-color: var(--border-light); }
.mobile-menu--dark a.active { color: var(--brand-mint); }
.mobile-menu--dark .mob-oferta-label { color: var(--muted-on-dark); }

/* =================================================================
   ANIMACJE — Reveal / stagger
   ================================================================= */
[data-reveal] { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease), filter .7s var(--ease); will-change: opacity, transform, filter; }
[data-reveal]:not([data-reveal="clip"]) { filter: blur(2px); }
[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="down"]  { transform: translateY(-40px); }
[data-reveal="left"]  { transform: translateX(-52px); }
[data-reveal="right"] { transform: translateX(52px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="clip"]  { clip-path: inset(0 100% 0 0); transform: none; }
[data-reveal].in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: blur(0); }

/* Stagger — opóźnienia dzieci */
[data-stagger] > * { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(1px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .6s var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; filter: blur(0); }
[data-stagger].in > *:nth-child(1) { transition-delay: .04s; }
[data-stagger].in > *:nth-child(2) { transition-delay: .10s; }
[data-stagger].in > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].in > *:nth-child(4) { transition-delay: .22s; }
[data-stagger].in > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].in > *:nth-child(6) { transition-delay: .34s; }
[data-stagger].in > *:nth-child(7) { transition-delay: .40s; }
[data-stagger].in > *:nth-child(8) { transition-delay: .46s; }

/* =================================================================
   HERO (sekcja 1)
   ================================================================= */
.hero { padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 100px)); overflow: hidden; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px);} to { opacity: 1; transform: none; } }

/* =================================================================
   HERO — strona główna: tekst + dekoracyjny gradient (model 3D wyłączony)
   ================================================================= */


/* Dekoracyjna poświata — „grafika/gradient" w miejsce dawnej dioramy 3D */


/* =================================================================
   HERO — BUDYNEK FUNDAMENTÓW (wariant .hero--build)
   ================================================================= */
/* Sekcja = wysoka „ścieżka scrolla". Kamera 3D podróżuje przez tę długość.
   overflow musi być widoczny, inaczej sticky scena się nie przypnie. */

/* Przypięta scena — wypełnia cały ekran i zostaje, gdy przewijasz przez sekcję */


/* =================================================================
   HERO 3D — izometryczna diorama magazynu (Three.js, assets/scene.js)
   ================================================================= */
/* Pełnoekranowe tło hero — scena 3D wypełnia cały pierwszy ekran (efekt „wow") */


/* Atmosferyczne zbielenie dolnej krawędzi sceny — plac „rozpływa się" w tło jak na emons.de */


/* =================================================================
   STATYSTYKI (liczniki)
   ================================================================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { border-left: 2px solid var(--line-dark); padding-left: 22px; }


.stat__lbl { color: var(--muted-on-dark); margin-top: 10px; font-size: .98rem; }
.section--light .stat { border-color: var(--line-light); }
.section--light .stat__lbl { color: var(--text-muted); }

/* =================================================================
   ZAKŁADKI „dla kogo"
   ================================================================= */


@keyframes panelIn { from { opacity: 0; transform: translateY(18px);} to { opacity: 1; transform: none; } }


/* =================================================================
   PROCES — oś czasu zigzag
   ================================================================= */
.timeline { position: relative; max-width: 920px; margin-inline: auto; }


/* =================================================================
   CASE STUDY — split + clip reveal
   ================================================================= */


/* Mini-makieta zrzutu po lewej (reużywa .mockup) */


/* =================================================================
   PORÓWNANIE przed/po — rosnące paski
   ================================================================= */


.bar { margin-bottom: 22px; }


/* =================================================================
   WARTOŚCI — flip 3D
   ================================================================= */

.flip { perspective: 1200px; height: 320px; }


.flip .ico { font-size: 2.4rem; }
.flip h3 { font-size: 1.6rem; }
.flip .hint { font-size: .8rem; color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase; }

/* =================================================================
   FAQ — akordeon
   ================================================================= */
.faq { max-width: 760px; margin-inline: auto; }
.acc { border-bottom: 1px solid var(--line-light); }
/* color JAWNIE: nieostylowany <button> na iOS Safari dziedziczy systemowy NIEBIESKI
   (control tint) — łamało paletę na telefonie (na desktopie button jest czarny, więc
   bug niewidoczny w podglądzie). Wymuszamy czerń marki; warianty open/dark nadpisują niżej. */
.acc__q { width: 100%; text-align: left; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text); }
.acc__q .pm { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-light); display: grid; place-items: center; transition: .3s var(--ease); position: relative; }
.acc__q .pm::before, .acc__q .pm::after { content: ""; position: absolute; background: var(--text); }
.acc__q .pm::before { width: 12px; height: 2px; }
.acc__q .pm::after { width: 2px; height: 12px; transition: transform .3s var(--ease); }
.acc.open .pm { background: var(--accent); border-color: var(--accent); }
.acc.open .pm::before, .acc.open .pm::after { background: #fff; }
.acc.open .pm::after { transform: scaleY(0); }
.acc__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.acc__a p { padding: 0 0 24px; color: var(--text-muted); max-width: 60ch; }

/* FAQ kartowy 2-kolumnowy (styl Wispr) — np. oferta-ai.
   Szerokość = pełna szerokość treści (--maxw 1240px, tak jak FAQ w Wispr Flow),
   karty większe i z większym powietrzem, by sekcja proporcjami trzymała się wzorca. */
.faq--cards { max-width: var(--maxw); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
/* Każda kolumna płynie niezależnie (masonry à la Wispr) — otwarcie karty pcha tylko jej kolumnę, nie wyrównuje wierszy. */
.faq--cards .faq__col { display: flex; flex-direction: column; gap: 24px; align-self: start; }
.faq--cards .acc { border: 1px solid var(--line-light); border-radius: var(--radius); padding: 0 34px; transition: border-color .3s var(--ease); }
.faq--cards .acc:hover { border-color: rgba(3,79,70,.32); }
.faq--cards .acc.open { border-color: var(--accent); }
.faq--cards .acc__q { font-size: 1.2rem; padding: 30px 0; align-items: flex-start; }
.faq--cards .acc__a p { padding: 0 0 30px; max-width: none; }
.faq--cards .acc__chev { flex: 0 0 auto; width: 12px; height: 12px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease); margin-top: 9px; }
.faq--cards .acc.open .acc__chev { transform: rotate(-135deg) translateY(2px); border-color: var(--accent); }
.faq--cards .acc.open .acc__q { color: var(--accent); }
/* Górna/dolna krawędź sekcji + odstęp tytuł→karty zgodne z FAQ w Wispr Flow (więcej powietrza, sekcja wyższa). */
.faq-sec { padding-block: clamp(88px, 11vw, 156px); }
.faq-sec .section-head { margin-bottom: clamp(48px, 6vw, 76px); }
@media (max-width: 760px) { .faq--cards { grid-template-columns: 1fr; max-width: 560px; } }

/* =================================================================
   CTA — dryfujące plamy światła
   ================================================================= */
.cta { text-align: center; position: relative; overflow: hidden; }


.cta__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }
.cta__title { font-size: clamp(2.4rem, 6vw, 4.6rem); }

.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* CTA nad footerem: monochrom jak stopka — przyciski kremowe + ciemny tekst, bez mięty */
.cta .btn--primary { background: var(--bg-light); color: var(--black); }
.cta .btn--ghost {
  color: var(--text-on-dark);
  background: linear-gradient(var(--black), var(--black)) padding-box,
              linear-gradient(120deg, rgba(254, 255, 234, .45), rgba(254, 255, 234, .85)) border-box;
}
/* ghost CTA nad footerem: bez zmiany koloru na hover (spójnie z resztą). */

/* =================================================================
   FINALE — kinowe CTA ze zdjęciem nad stopką (port z landinga #finale).
   Full-bleed: zdjęcie od krawędzi do krawędzi, tekst na środku. Górne rogi
   zaokrąglone (clip-path „round") na kremowym tle sekcji = „czapka" od góry;
   od dołu na zdjęcie wjeżdża kremowa stopka swoją zaokrągloną górą (margin
   ujemny). Tło „przyklejone" = PRAWDZIWA warstwa position:fixed przycięta
   clip-path karty (ta sama technika co landing — NIE background-attachment:
   fixed, które drży). Świadome złamanie zasad: tło = zdjęcie (decyzja
   właściciela), to samo co na #finale landinga (public/img → dev i build).
   ================================================================= */
.cta-final { position: relative; padding: 0; background: var(--bg-light); }
.page-crm .cta-final { background: var(--black); }
.cta-final__card {
  position: relative; overflow: hidden; isolation: isolate;
  /* „round" na clip-path = zaokrąglone górne rogi; clip tnie też potomka
     position:fixed (tło), a w odróżnieniu od transform/filter NIE zmienia mu
     containing blocku — dzięki temu obraz zostaje „przyklejony" do okna. */
  clip-path: inset(0 round var(--radius-cap) var(--radius-cap) 0 0);
  width: 100%;
  /* +radius-cap: tyle dołu zdjęcia chowa się pod czapką stopki */
  min-height: calc(clamp(540px, 82vh, 880px) + var(--radius-cap));
  display: flex; align-items: center; justify-content: center;
  background: var(--black); color: var(--text-on-dark);
}
.cta-final__bg {
  position: fixed; inset: 0; z-index: -2;
  background: url("/img/Gemini_Generated_Image_jdipnnjdipnnjdip.webp") center/cover no-repeat;
  background-image: image-set(
    url("/img/Gemini_Generated_Image_jdipnnjdipnnjdip.avif") type("image/avif"),
    url("/img/Gemini_Generated_Image_jdipnnjdipnnjdip.webp") type("image/webp")
  );
}
/* bez animacji: obraz jedzie razem z kartą (brak efektu fixed) */
@media (prefers-reduced-motion: reduce) { .cta-final__bg { position: absolute; height: 100%; } }
/* scrim dla czytelności tekstu — wyłącznie czerń palety (rgba 26,27,27) */
.cta-final__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(26,27,27,.82) 0%, rgba(26,27,27,.26) 40%, rgba(26,27,27,.14) 66%, rgba(26,27,27,.42) 100%),
    radial-gradient(92% 74% at 50% 50%, rgba(26,27,27,.12) 0%, rgba(26,27,27,.56) 100%);
}
.cta-final__inner {
  position: relative; z-index: 2;
  width: min(var(--maxw), 100% - 56px); margin-inline: auto; text-align: center;
}
.cta-final__copy { max-width: 860px; margin-inline: auto; }
.cta-final__title {
  font-family: var(--font-display); font-weight: 400; /* jak landingowe finale (.sg-cta-final__title = EB Garamond 400) */
  font-size: clamp(2.9rem, 7vw, 5.6rem); line-height: 1.0; letter-spacing: -.022em;
  margin: 0 0 36px; text-wrap: balance; color: var(--text-on-dark);
}
.cta-final__title .accent { color: var(--brand-mint); }  /* akcent = mięta na ciemnym (tylko kolor) */
.cta-final__lead { color: #fff; max-width: 54ch; margin: 0 auto; font-size: 1.13rem; line-height: 1.6; }
.cta-final__actions { margin-top: 38px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .cta-final__card { min-height: calc(78vh + 44px); }
  /* Hierarchia H1>H2 na telefonie: desktopowe minimum 2.9rem (46px) przerastało
     H1 KAŻDEJ podstrony — finale nie może być większe od tytułu strony. */
  .cta-final__title { font-size: clamp(2.1rem, 7vw, 2.5rem); }
  .cta-final__inner { width: calc(100% - 32px); }
  .cta-final__lead { font-size: 1.02rem; }
  .cta-final__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Wariant „seam" — finał DOKŁADNIE jak na landingu (src .sg-cta-final): zdjęcie to
   PROSTOKĄT (clip-path:inset(0), bez własnych rogów), a zaokrąglenia robią czapki
   sekcji wokół — sekcja nad nim z .sg-cap-bottom schodzi kremowym, zaokrąglonym
   dołem NA zdjęcie, stopka swoją .sg-cap wchodzi zaokrąglonym szczytem od dołu.
   Zdjęcie chowa po 44px pod każdą czapką → +2×--radius-cap do wysokości. */
.cta-final--seam .cta-final__card {
  clip-path: inset(0);
  min-height: calc(clamp(540px, 82vh, 880px) + 2 * var(--radius-cap));
}
@media (max-width: 760px) {
  .cta-final--seam .cta-final__card { min-height: calc(78vh + 2 * var(--radius-cap)); }
}

/* =================================================================
   STOPKA — wariant KREMOWY (decyzja użytkownika 2026-06-12), spójny ze
   stopką landinga. Redefinicja zmiennych „*-on-dark"/„line-dark" LOKALNIE
   przełącza całość naraz: kolumny, świece SVG, wordmark, dolny pas; akcent/
   hover = zieleń. Stopka dostaje też zaokrągloną „czapkę" wjeżdżającą na
   zdjęcie sekcji #finale nad nią (margin ujemny — wzór Wispr Flow).
   ================================================================= */
.footer {
  background: var(--bg-light); color: var(--text-muted); padding: 80px 0 36px;
  --text-on-dark: var(--text);          /* ciemny ink: wordmark, świece, hover social */
  --muted-on-dark: var(--text-muted);   /* przygaszony ciemny: nagłówki kolumn, dolny pas */
  --line-dark: var(--line-light);       /* ciemna linia 0.12 na kremie */
  --accent-on-dark: var(--brand);       /* akcent/focus = zieleń #034F46 */
  position: relative; z-index: 2;
  border-top-left-radius: var(--radius-cap); border-top-right-radius: var(--radius-cap);
  margin-top: calc(-1 * var(--radius-cap));
}
/* Kolumny linków — rozsunięte z dużym powietrzem (wzór: Wispr Flow).
   Wartości 1:1 ze stopką landingu (.sg-footer .sgf-col): nagłówki serif EB Garamond,
   linki pełnym ciemnym inkiem + hover z przesuwem. */
.footer .wrap { container-type: inline-size; } /* baza dla cqw wordmarku (wypełnia szerokość kontenera) */
.footer__cols { display: flex; justify-content: space-between; gap: clamp(40px, 6vw, 96px); flex-wrap: wrap; }
.footer h4 { font-family: var(--font-display); font-size: calc(1.5rem + 4px); letter-spacing: -.01em; color: var(--muted-on-dark); margin-bottom: 22px; font-weight: 600; }
.footer ul { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.footer li { color: var(--text-on-dark); font-size: .95rem; line-height: 1.5; font-weight: 500; }
/* linki KOLUMN — pełny ciemny ink + przesuw na hover (jak .sg-footer .sgf-col a) */
.footer__col a { color: var(--text-on-dark); transition: color .2s, padding-left .2s; }
.footer__col a:hover { color: var(--brand); padding-left: 4px; }
/* linki dolnego paska (legal) — przygaszone, bez przesuwu (jak .sg-footer .sgf-legal a) */
.footer__legal a { color: var(--muted-on-dark); transition: color .2s; }
.footer__legal a:hover { color: var(--brand); }
/* Social — spłaszczone, monochromatyczne (dolny rząd, jak Flow) */


.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-dark); color: var(--muted-on-dark); font-size: .9rem; }
.footer__legal { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }

/* ---------- Wielki wordmark marki na dole (wzór: Wispr Flow) ---------- */
.footer__wordmark {
  --sgf-fs: clamp(3rem, 24cqw, 30rem); /* cqw względem .footer .wrap → lockup dotyka obu krawędzi na każdej szerokości (Climbly = 7 znaków) */
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: 2cqw; margin-top: clamp(48px, 7vw, 104px);
  color: var(--text-on-dark); line-height: .78; text-align: left;
}
.footer__bigname {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.05em;
  font-size: var(--sgf-fs); color: var(--text-on-dark);
}
/* Znak marki — 5 rosnących słupków (inline SVG).
   Monochrom: jeden kremowy ton (--text-on-dark) — spójne z wordmarkiem. */
.footer__mark {
  display: flex; align-items: flex-end;
  /* Wysokość = wysokość napisu „Climbly" obok (ten sam rozmiar pisma cqw × line-height .78) */
  font-size: var(--sgf-fs); height: .78em;
}
.footer__mark .mark-svg { height: 100%; width: auto; display: block; overflow: visible; }

/* Korpusy świec — PEŁNY, jednolity ink (1:1 ze stopką landinga, `.sgf-mark
   .cndl rect { fill: var(--text-invert) }`). Wcześniejszy gradient zanikający
   u dołu (url(#cndlBody), opacity .95→.12) na kremie czytał się jak „cień"
   pod słupkami — dlatego solid. Gradient `#cndlBody` w SVG zostaje nieużywany. */
.footer__mark .cndl rect { fill: var(--text-on-dark); }

/* --- Build-in po wejściu w widok: słupki wyrastają --- */
.footer__mark .cndlA { transform-box: fill-box; transform-origin: 50% 100%; }

.footer__mark.is-anim .cndlA { animation: cndl-rise .7s var(--ease) backwards; }
.footer__mark.is-anim .cndl:nth-child(1) .cndlA { animation-delay: 0s;   }
.footer__mark.is-anim .cndl:nth-child(2) .cndlA { animation-delay: .12s; }
.footer__mark.is-anim .cndl:nth-child(3) .cndlA { animation-delay: .24s; }
.footer__mark.is-anim .cndl:nth-child(4) .cndlA { animation-delay: .36s; }
.footer__mark.is-anim .cndl:nth-child(5) .cndlA { animation-delay: .48s; }

@keyframes cndl-rise {
  0%   { opacity: 0; transform: scaleY(.03); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scaleY(1);   }
}

/* =================================================================
   O NAS — manifest, zespół
   ================================================================= */


.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }


/* Dwóch founderów — wyśrodkowane, powiększone karty */


/* Zespół — duże portrety obok siebie; opis nasuwa się od dołu przy scrollu */

/* Zespół — duże portrety obok siebie. Domyślnie: zdjęcie + opis pod nim (fallback / mobile).
   Z klasą .is-team-scrub (dodaje ją initTeamReveal na desktopie z GSAP): sekcja pinuje się,
   a opis nasuwa się PO KOLEI na każdy kadr, aż go zakryje (efekt jak novobudowa.pl). */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); margin-top: clamp(36px, 5vw, 60px); }
.tmate__photo { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--bg-light); }
.tmate__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tmate__photo::after { content: attr(data-ph); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 7vw, 6rem); color: rgba(2,78,70,.16); }
.tmate__name { font-family: var(--font-display); font-weight: 700; line-height: .98; letter-spacing: -.015em; font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin: clamp(20px, 2.6vw, 30px) 0 0; }
.tmate__role { color: var(--accent); font-weight: 600; font-size: 1.02rem; margin-top: 10px; }
.tmate__bio { color: var(--text-muted); line-height: 1.62; font-size: 1rem; margin-top: 14px; max-width: 46ch; }
/* blok opisu — „nasuwanie" jak novobudowa: maska overflow:hidden + dziecko translateY(110%)→0, wyzwalane RAZ przez initMaskReveal() */
.reveal-mask { display: block; overflow: hidden; position: relative; padding-bottom: .12em; margin-bottom: -.12em; }
.reveal-inner { display: block; opacity: 0; transform: translateY(var(--rev-offset, 110%)); transition: transform .62s var(--ease) calc(var(--d, 0) * 90ms), opacity .45s var(--ease) calc(var(--d, 0) * 90ms); will-change: transform; }
/* warianty osi/kierunku (domyślnie y-forward = z dołu) */


/* stan po wejściu w ekran — klasę „in" dodaje IntersectionObserver raz */
[data-mask-reveal].in .reveal-inner { transform: translate(0, 0); opacity: 1; }

/* ---- Zespół: tryb pin + scrub („opis nasuwa się na zdjęcie", po kolei) ----
   Aktywny TYLKO gdy initTeamReveal() doda .is-team-scrub (GSAP obecny, desktop ≥981px, brak reduce-motion).
   Bez tej klasy .tmate zostaje w zwykłym przepływie (zdjęcie + opis pod nim) = pełny fallback. */
/* sekcja wypełnia ekran i wyśrodkowuje treść — pin sekcji ~100vh jest najmniej podatny na
   szarpnięcia, a brak „dziury" pod krótszą sekcją daje czysty efekt „strona staje w miejscu" */
.is-team-scrub.section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-block: clamp(24px, 4vh, 56px); }
.is-team-scrub .team-grid { margin-top: clamp(14px, 2.4vh, 30px); align-items: stretch; }
/* zdjęcia możliwie duże, ale tak, by cała przypięta sekcja zmieściła się w ekranie (zapas 280px na nagłówek+padding) */
/* KARTA = KWADRATOWY box przycinający (overflow:hidden tylko po to, by schować zsuwający się
   w dół panel). NIE zaokrąglamy samej karty: zaokrąglony klip krem-na-kremie zostawiał cienki
   szary zarys (antyaliasing krawędzi klipu, a clip-path obrysowywał wręcz cały obwód). Zamiast
   tego zaokrąglenie niosą DZIECI: zdjęcie (ramka) i górna krawędź panelu (styk). Proste,
   kwadratowe krawędzie krem-na-kremie są niewidoczne — żaden zarys nie powstaje. */
.is-team-scrub .tmate { position: relative; height: max(360px, min(72vh, calc(100vh - 280px))); border-radius: 0; overflow: hidden; }
.is-team-scrub .tmate__photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: var(--radius); }
/* Panel NIE zakrywa całego kadru — u góry zostaje pasek zdjęcia (czubek głowy + miejsce na badge),
   tak jak w referencji. top!=0 zmienia tylko wysokość panelu; GSAP nadal liczy yPercent względem
   własnej wysokości, więc yPercent:100 chowa go w całości pod dolną krawędzią .tmate (overflow:hidden). */
.is-team-scrub .tmate__body {
  position: absolute; left: 0; right: 0; bottom: 0; top: clamp(46px, 8vh, 92px); margin: 0;
  display: flex; flex-direction: column; justify-content: flex-start;   /* treść u GÓRY, nie na środku */
  padding: clamp(30px, 5vh, 60px) clamp(26px, 3vw, 52px) clamp(24px, 3vw, 46px);
  background: var(--bg-light); color: var(--text);
  border-radius: var(--radius) var(--radius) 0 0;   /* zaokrąglona GÓRNA krawędź wysuwanego panelu */
  /* stan startowy (schowany pod kadrem) ustawia GSAP: gsap.set(yPercent:100) w tym samym ticku,
     co dodanie .is-team-scrub. CELOWO bez CSS-owego transform — inaczej GSAP czyta go jako bazę
     i dodaje swój yPercent (panel jechałby 200%→100% i nigdy nie zakrył kadru). */
  will-change: transform; backface-visibility: hidden;
}
/* cień TYLKO nad wysuwającą się krawędzią panelu (na pasku zdjęcia) — zamiast box-shadow,
   który rozmytą poświatą obrysowywał też DÓŁ karty. Pseudo siedzi nad górną krawędzią panelu
   i jedzie razem z nim, więc na dole nie ma już żadnego zarysu. */
.is-team-scrub .tmate__body::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(24px, 3.5vh, 40px);
  background: linear-gradient(to top, rgba(2,78,70,.20), rgba(2,78,70,0));
  pointer-events: none;
}
/* imię/nazwisko DUŻE (jak w referencji); min. 2 linie, by rola i bio w OBU kartach
   startowały na tej samej wysokości niezależnie od tego, czy nazwisko się zawija */
.is-team-scrub .tmate__name { color: var(--text); margin: 0; font-size: clamp(2.2rem, 4.05vw, 3.6rem); line-height: .96; min-height: 1.92em; white-space: nowrap; }
/* rola: drobna, szara, pod nazwiskiem */
.is-team-scrub .tmate__role { color: var(--text-muted); font-weight: 500; margin-top: clamp(8px, 1.2vh, 14px); font-size: 1rem; }
/* bio: większe, wypełnia kolumnę, duży odstęp od roli. Bez text-align:justify —
   przy tej szerokości kolumny justowanie rozciągało spacje między słowami do absurdu. */
.is-team-scrub .tmate__bio  {
  color: var(--text-muted); margin-top: clamp(26px, 5vh, 54px); max-width: none;
  text-align: left; font-size: clamp(1rem, 1.05vw, 1.1rem); line-height: 1.72;
}
/* ikonka „dymka" przed bio — maska SVG przebarwiona na kolor tekstu (czarny dymek jak w referencji) */
.is-team-scrub .tmate__bio::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .5em; vertical-align: -.16em;
  background: var(--text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8l-6 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8l-6 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* układ LUSTRZANY: lewa kolumna wyrównana do PRAWEJ (nazwiska spotykają się w środku) */
.is-team-scrub .tmate:first-child .tmate__name,
.is-team-scrub .tmate:first-child .tmate__role { text-align: right; }

/* Lenis smooth-scroll — bazowe reguły wymagane przez bibliotekę (CDN) */
html.lenis, html.lenis body { height: auto; }


/* =================================================================
   PROCES (strona) — pigułki, split
   ================================================================= */
.pills { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pill { padding: 16px 28px; border-radius: 999px; border: 1px solid var(--line-light); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; transition: .3s var(--ease); display: flex; align-items: center; gap: 12px; }
.pill .idx { font-family: var(--font-accent); font-style: normal; color: var(--accent); }
.pill:hover { background: var(--bg-dark); color: #fff; transform: translateY(-3px); }
.pill:hover .idx { color: var(--accent-on-dark); }

/* #przeglad — całość powiększona o 15% (eyebrow / tytuł / pigułki) */
#przeglad .eyebrow { font-size: var(--fs-eyebrow); }
#przeglad .section-title { font-size: var(--fs-h2-xl); } /* min 2.4rem: H2 nie może przerastać H1 strony na telefonie */
#przeglad .pills { gap: 16px; }
#przeglad .pill { padding: 18px 32px; font-size: 1.21rem; gap: 14px; }

/* Pigułki podświetlają się SAME, po kolei (niezależnie od myszki).
   4 pigułki × okno świecenia ≈ ¼ cyklu, przesunięte ujemnym delayem → fala 1→2→3→4. */
#przeglad .pill { animation: pillAuto 6.4s var(--ease) infinite; }
#przeglad .pill:nth-child(1) { animation-delay: 0s; }
#przeglad .pill:nth-child(2) { animation-delay: 1.6s; }
#przeglad .pill:nth-child(3) { animation-delay: 3.2s; }
#przeglad .pill:nth-child(4) { animation-delay: 4.8s; }
#przeglad .pill .idx { animation: pillAutoIdx 6.4s var(--ease) infinite; animation-delay: inherit; }

@keyframes pillAuto {
  0%      { background: transparent; color: inherit; transform: none; box-shadow: none; }
  6%, 22% { background: var(--bg-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 26px -16px rgba(26,27,27,.6); }
  28%, 100% { background: transparent; color: inherit; transform: none; box-shadow: none; }
}
@keyframes pillAutoIdx {
  0%      { color: var(--accent); }
  6%, 22% { color: var(--accent-on-dark); }
  28%, 100% { color: var(--accent); }
}
/* Najedziesz myszką → pauza fali (i klasyczny hover przejmuje) */
#przeglad .pills:hover .pill,
#przeglad .pills:hover .pill .idx { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #przeglad .pill, #przeglad .pill .idx { animation: none; }
}
.phase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.phase__media { aspect-ratio: 1/1; border-radius: var(--radius-lg); background: var(--brand); display: grid; place-items: stretch; padding: 18px; position: relative; overflow: hidden; box-shadow: none; }
/* makiety = szczegółowy UI: ZERO rozmycia z systemu reveal. `filter: blur(2px/0)`
   tworzy warstwę GPU, która mydli tekst i cienkie elementy (efekt „rozmazane");
   `will-change: filter` trzyma tę warstwę na stałe. Tu wymuszamy ostre renderowanie —
   reveal nadal działa przez opacity + translateX, tylko bez filtra. */
.phase__media[data-reveal] { filter: none !important; will-change: auto; }
.phase__media[data-reveal]:not(.in) { filter: none !important; }
/* Ramka kafla = płaski markowy zielony (#034F46); dawne dekoracje (poświata + kropki)
   wyłączone, bo po wypełnieniu karty widać je tylko w ramce i psują jednolity kolor. */
.phase__media::before, .phase__media::after { display: none; }
.section--dark .phase__media { background: linear-gradient(150deg, #0A5A50, #04766A); }
/* numer kroku — miętowa pastylka w rogu kafla */


/* makiety rezultatu — wspólna „kartka ekranu" */
.mock { position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; display: flex; flex-direction: column; background: #fff; color: var(--brand); border-radius: 14px; box-shadow: none; overflow: hidden; font-size: clamp(9px, 1.5vw, 13px); line-height: 1.3; }
.mock .ln { display: block; height: .55em; border-radius: 99px; background: rgba(2,78,70,.16); }


.mock__btn { display: inline-block; background: var(--brand); color: var(--bg-light); font-weight: 600; padding: .5em .9em; border-radius: 8px; }

/* 01 — strona w przeglądarce (premium makieta prowadząca do zapytania) */
.mock--site { width: 100%; max-width: none; font-size: clamp(8px, 0.95vw, 12px); }

/* pasek przeglądarki: kropki + pole adresu */
.mock--site .mock__bar { display: flex; gap: .45em; align-items: center; padding: .7em .9em; background: rgba(2,78,70,.05); border-bottom: 1px solid rgba(2,78,70,.09); }
.mock--site .mock__bar > span { width: .55em; height: .55em; border-radius: 50%; background: rgba(2,78,70,.22); flex: none; }
.mock--site .mock__url { display: inline-flex; align-items: center; gap: .45em; flex: 1; margin-left: .6em; padding: .42em .7em; border-radius: 99px; background: rgba(2,78,70,.06); color: rgba(2,78,70,.55); font-size: .82em; letter-spacing: .01em; }
.mock--site .mock__url svg { width: 1.05em; height: 1.05em; flex: none; opacity: .8; }

.mock--site .mock__body { position: relative; padding: 1.05em 1.1em 1.15em; display: flex; flex-direction: column; justify-content: space-between; gap: .7em; flex: 1; min-height: 0;
  /* subtelne światło z góry — ekran łapie światło zamiast być matowy (warstwa A: materiał) */
  background: linear-gradient(180deg, rgba(2,78,70,.035), rgba(2,78,70,0) 38%), #fff; }

/* mini-navbar strony */
.mock--site .site__nav { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.mock--site .site__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.04em; color: var(--brand); }
.mock--site .site__links { display: flex; align-items: center; gap: .85em; font-weight: 500; font-size: .82em; color: rgba(2,78,70,.6); }
.mock--site .site__navcta { padding: .34em .72em; border-radius: 7px; background: var(--brand); color: var(--bg-light); font-weight: 600; }

/* hero: nagłówek + linie + miniatura */
.mock--site .site__hero { display: grid; grid-template-columns: 1fr .62fr; gap: .9em; align-items: center; }
.mock--site .site__h { font-family: var(--font-display); font-weight: 600; line-height: 1.08; font-size: 1.5em; color: var(--brand); margin: 0 0 .4em; }
/* realny mikro-copy zamiast szarych „skeleton barów" (warstwa B) */
.mock--site .site__sub { margin: 0; font-size: .9em; line-height: 1.4; color: rgba(2,78,70,.62); max-width: 24ch; }
/* hero makiety: realne zdjęcie okna zamiast pustego placeholdera (warstwa B),
   z głębią ekranu i delikatną miętowo-zieloną nakładką, by spoiło się z monochromem makiety */
/* zdjęcie WYPEŁNIA swoją kolumnę; aspect 4/3 = naturalny format pliku (1000×750),
   więc okno widać w całości, nie jako wąski pasek; bez max-height (capowanie
   wysokości ścinało też SZEROKOŚĆ → miniaturka pływała mała w kolumnie) */
.mock--site .site__shot { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 9px; overflow: hidden; border: 1px solid rgba(2,78,70,.14);
  background: linear-gradient(135deg, rgba(2,78,70,.07), rgba(2,78,70,.02)); color: rgba(2,78,70,.34);
  box-shadow: 0 1px 2px rgba(3,79,70,.06), 0 16px 30px -20px rgba(3,79,70,.45); }
.mock--site .site__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* delikatniejsza nakładka — tylko muśnięcie w narożniku, żeby zdjęcie było WYRAŹNE */
.mock--site .site__shot::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(2,78,70,.08), rgba(2,78,70,0) 42%); mix-blend-mode: multiply; }
.mock--site .site__shot svg { width: 38%; height: auto; }

/* kategorie produktów — 3 karty wypełniające stronę treścią */
.mock--site .site__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
/* kafle produktów: realna elewacja (gradient + miękki cień) zamiast płaskiej naklejki (warstwa A) */
.mock--site .site__feat { display: grid; gap: .42em; padding: .85em .9em; border: 1px solid rgba(2,78,70,.10); border-radius: 9px;
  background: linear-gradient(180deg, rgba(2,78,70,.055), rgba(2,78,70,.018));
  box-shadow: 0 1px 2px rgba(3,79,70,.05), 0 12px 24px -18px rgba(3,79,70,.32); }
.mock--site .site__fic { width: 2.1em; height: 2.1em; border-radius: 7px; display: grid; place-items: center; background: rgba(2,78,70,.09); color: var(--brand);
  box-shadow: inset 0 1px 0 rgba(255,255,235,.4); }
.mock--site .site__fic svg { width: 1.2em; height: 1.2em; }
.mock--site .site__flabel { font-family: var(--font-display); font-weight: 700; font-size: .98em; color: var(--brand); }
/* podpis branżowy zamiast szarego baru (warstwa B) */
.mock--site .site__fsub { font-size: .74em; letter-spacing: .01em; color: rgba(2,78,70,.5); }

/* ścieżka 3 kroków — pozioma oś z łączącą linią */
.mock--site .site__path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin: .1em 0 .15em; }
.mock--site .site__path::before { content: ""; position: absolute; top: 1.25em; left: 16.6%; right: 16.6%; height: 1.5px; background: rgba(2,78,70,.18); z-index: 0; }
.mock--site .site__step { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: .3em; }
.mock--site .site__node { width: 2.5em; height: 2.5em; border-radius: 50%; display: grid; place-items: center; background: var(--bg-light); border: 1.5px solid rgba(2,78,70,.3); color: var(--brand); box-shadow: 0 1px 2px rgba(3,79,70,.08); }
.mock--site .site__node svg { width: 1.25em; height: 1.25em; }
/* węzeł „Wycena" = cel ścieżki: lekki cień wyciąga go do przodu (warstwa A) */
.mock--site .site__node--done { background: var(--brand); border-color: var(--brand); color: var(--bg-light); box-shadow: 0 3px 10px -2px rgba(3,79,70,.55); }
.mock--site .site__slabel { font-weight: 600; font-size: .82em; color: var(--brand); }
.mock--site .site__scap { font-size: .72em; line-height: 1.25; color: rgba(2,78,70,.55); }

/* stopka: CTA + plakietka „Nowe zapytanie" */
.mock--site .site__foot { display: flex; align-items: center; justify-content: space-between; gap: .7em; margin-top: .15em; }
.mock--site .mock__btn { display: inline-flex; align-items: center; gap: .5em; padding: .6em 1em; border-radius: 9px; font-size: .92em; }
.mock--site .mock__btn .arr { font-size: .95em; }
.mock--site .site__badge { display: inline-flex; align-items: center; gap: .45em; padding: .42em .75em; border-radius: 99px; border: 1px solid rgba(2,78,70,.16); background: rgba(2,78,70,.05); color: rgba(2,78,70,.7); font-weight: 500; font-size: .8em; white-space: nowrap; }
.mock--site .site__badge i { width: .5em; height: .5em; border-radius: 50%; background: var(--brand-mint); flex: none; }

/* ---- Warstwa C: „życie" makiety 01 — kursor dojeżdża do CTA, po „kliknięciu"
   pojawia się plakietka „Nowe zapytanie" (objaśnienie: strona zbiera leady).
   Stan domyślny (bez JS / reduced-motion) = plakietka widoczna; JS dokłada .proc-live. ---- */
.mock--site.proc-live .site__badge { opacity: 0; transform: translateY(5px) scale(.96); }
.mock--site.proc-live.lead-in .site__badge { opacity: 1; transform: none;
  transition: opacity .34s cubic-bezier(.23,1,.32,1), transform .34s cubic-bezier(.23,1,.32,1); }
.mock--site.proc-live.lead-in .site__badge i { animation: siteBadgePing 1.6s ease-out .1s 2; }
@keyframes siteBadgePing { 0%,100% { box-shadow: 0 0 0 0 rgba(116,211,190,0); } 18% { box-shadow: 0 0 0 .28em rgba(116,211,190,.32); } }
/* press przycisku przy „kliknięciu" kursora (feedback ~150ms) */
.mock--site .site__foot .mock__btn { transition: transform .15s cubic-bezier(.23,1,.32,1); }
.mock--site .site__foot .mock__btn.is-press { transform: scale(.97); }
/* kursor wstrzykiwany przez JS — fill zieleń + obrys krem (paleta) */
.mock--site .site__cursor { position: absolute; left: 0; top: 0; width: 18px; height: 18px; z-index: 5; pointer-events: none; opacity: 0; will-change: transform; filter: drop-shadow(0 2px 4px rgba(3,79,70,.4)); }
.mock--site .site__cursor svg { width: 100%; height: 100%; display: block; }

/* ---- Rozbudowa makiety 01: pasek zaufania + realizacje + narracja ścieżki ----
   Treść (pasek zaufania, mini-realizacje) i animacja opowiadają jedną historię:
   „od wejścia do decyzji". Kursor obchodzi stronę, zapala kolejne etapy ścieżki,
   linia postępu rośnie, a na końcu pojawia się lead. Wszystko w palecie marki. */


/* pasek zaufania pod hero — branżowe obietnice (jakościowe, bez wymyślonych liczb) */
.mock--site .site__trust { display: flex; flex-wrap: wrap; align-items: center; gap: .42em 1.1em; padding: .05em 0; }
.mock--site .site__titem { display: inline-flex; align-items: center; gap: .4em; font-size: .8em; font-weight: 600; color: rgba(2,78,70,.72); white-space: nowrap; }
.mock--site .site__titem svg { width: 1.18em; height: 1.18em; flex: none; color: var(--brand); opacity: .9; }

/* mini-sekcja realizacji — 3 schematyczne podglądy (język CAD marki) */
.mock--site .site__work { display: grid; gap: .5em; }
.mock--site .site__wlabel { font-family: var(--font-display); font-weight: 700; font-size: .92em; color: var(--brand); }
.mock--site .site__wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.mock--site .site__wtile { display: grid; gap: .4em; }
.mock--site .site__wart { height: 3.4em; border-radius: 7px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(2,78,70,.12); color: var(--brand);
  background: linear-gradient(160deg, rgba(2,78,70,.085), rgba(2,78,70,.02));
  box-shadow: 0 1px 2px rgba(3,79,70,.05), 0 10px 20px -16px rgba(3,79,70,.4);
  transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1); }
.mock--site .site__wart svg { height: 58%; width: auto; }
.mock--site .site__wtile b { font-weight: 600; font-size: .72em; letter-spacing: .01em; color: rgba(2,78,70,.6); }
.mock--site .site__wtile.is-hover .site__wart { transform: translateY(-3px); box-shadow: 0 3px 6px rgba(3,79,70,.08), 0 16px 26px -16px rgba(3,79,70,.5); }

/* hover-lift kafli produktów (kursor je „dotyka" w sekwencji) */
.mock--site .site__feat { transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1); }
.mock--site .site__feat.is-hover { transform: translateY(-3px); box-shadow: 0 3px 6px rgba(3,79,70,.08), 0 18px 30px -18px rgba(3,79,70,.5); }

/* ścieżka klienta = serce: linia postępu rośnie, węzły zapalają się 1→2→3 */
.mock--site .site__node { position: relative; transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; }
.mock--site .site__progress { position: absolute; top: 1.25em; left: 16.6%; right: 16.6%; height: 1.5px; background: var(--brand); transform-origin: left center; transform: scaleX(0); z-index: 0; transition: transform .42s cubic-bezier(.5,0,.2,1); }
.mock--site .site__node.is-lit { background: var(--brand); border-color: var(--brand); color: var(--bg-light); box-shadow: 0 3px 10px -2px rgba(3,79,70,.5); }
.mock--site .site__node.is-ping::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--brand-mint); animation: siteNodePing .7s cubic-bezier(.23,1,.32,1) forwards; pointer-events: none; }
@keyframes siteNodePing { from { opacity: .78; transform: scale(.82); } to { opacity: 0; transform: scale(1.7); } }

/* 02 — lista kontaktów CRM */
.mock--crm { padding: 1.2em 1.2em 1.3em; justify-content: center; }

.mock--crm .row { display: flex; align-items: center; gap: .6em; padding: .5em 0; border-top: 1px solid rgba(2,78,70,.08); }
.mock--crm .ava { width: 1.7em; height: 1.7em; border-radius: 50%; background: linear-gradient(135deg, var(--brand-mint), var(--brand)); flex: none; }
.mock--crm .row .ln { flex: 1; }
.mock--crm .tag { flex: none; font-size: .82em; font-weight: 600; padding: .22em .6em; border-radius: 99px; background: rgba(2,78,70,.1); color: var(--brand); }


/* 04 — lejek „Wartościowe leady": kremowy kafel z zieloną ramką, wyśrodkowany
   lejek z trapezowych segmentów (miękkie zielone wypełnienia) + plakietki ikon
   po lewej. Modyfikator scopuje styl TYLKO do kroku 04 — kafle 01–03 zielone. */
/* Ramka spójna z kaflami 01–03: zielone tło bazowe (.phase__media) + 18px = ramka.
   Lejek ląduje na białej karcie w środku — tak jak makiety .mock w pozostałych okienkach
   (wcześniej kafel 04 był kremowy z cienką ramką 3px → wyłamywał się z reszty). */
.phase__media--funnel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fn {
  /* Rozmiar/pozycję (absolute + inset:18px = ramka) ustawia reguła `.fn` w bloku
     animacji niżej — tu tylko wygląd karty i układ treści. */
  background: #fff;
  border-radius: 14px;
  /* +2px góra / -2px dół: drobne zejście treści w dół, by lejek siedział idealnie w ramce */
  --fn-pad: clamp(20px, 3vw, 40px);
  padding: calc(var(--fn-pad) + 2px) var(--fn-pad) calc(var(--fn-pad) - 2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.1vw, 13px);
}
.fn__seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 16px);
  padding: clamp(13px, 1.9vw, 19px) clamp(20px, 2.8vw, 30px);
  color: var(--brand);
}
.fn__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.fn__seg > .fn__ic, .fn__seg > .fn__txt { position: relative; z-index: 1; }
/* trapez zwęża się ku dołowi — każdy segment węższy od poprzedniego */
.fn__seg--1 { width: 100%; }
.fn__seg--2 { width: 87%; }
.fn__seg--3 { width: 74%; }
.fn__seg--res { width: 80%; }
/* miękkie zielone wypełnienia — coraz mocniejsze w dół, rezultat znów jaśniejszy */
.fn__seg--1 .fn__bg path { fill: rgba(3, 79, 70, .06); }
.fn__seg--2 .fn__bg path { fill: rgba(3, 79, 70, .10); }
.fn__seg--3 .fn__bg path { fill: rgba(3, 79, 70, .17); }
/* rezultat = zaokrąglona pastylka (bez trapezu) */
.fn__seg--res { border-radius: 999px; background: rgba(3, 79, 70, .06); }
.fn__ic {
  flex: none;
  width: clamp(34px, 4.4vw, 46px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  color: var(--bg-light);
  display: grid;
  place-items: center;
}
.fn__ic svg { width: 54%; height: 54%; }
.fn__ic--ghost { background: transparent; color: var(--brand); }
.fn__txt { width: 9.5em; font-family: var(--font-text); font-weight: 600; font-size: clamp(.8rem, 1.55vw, 1.05rem); line-height: 1.22; color: var(--brand); }
.fn__arrow { color: rgba(3, 79, 70, .55); display: grid; place-items: center; }
.fn__arrow svg { width: clamp(18px, 2.2vw, 24px); height: clamp(18px, 2.2vw, 24px); }
.fn__cap { margin-top: clamp(4px, .7vw, 8px); font-family: var(--font-text); font-weight: 500; font-size: clamp(.72rem, 1.25vw, .92rem); color: rgba(3, 79, 70, .62); text-align: center; }
/* caption to ostatni element kolumny — zerujemy dolny margines z `.phase p`,
   inaczej 28px „niewidocznej" przestrzeni psuje wyśrodkowanie lejka (więcej luzu u dołu) */
.fn .fn__cap { margin-bottom: 0; }

/* ===== 04 — ŻYCIE LEJKA: build (fn-live → is-built) + pętla „odsiewu" (is-running) =====
   Wzór bliźniaczy do .mock--hub: bez JS / reduced-motion lejek jest statyczny i złożony.
   .fn-live (dokłada JS) chowa segmenty; JS dokłada .is-built kolejnym krokom (BUDOWA), a po
   złożeniu .is-running uruchamia perpetualną pętlę: kropki-zapytania spływają z góry, masowy
   ruch odpada na zwężeniach, dopasowane przechodzą do rezultatu (puls mięty). Okres 2.6s — jak hub. */
/* .fn wypełnia okienko przez ABSOLUTNY inset:18px (= równa zielona ramka), NIE width/height:100%.
   Safari/Mac źle liczył %-rozmiar dziecka (parent = flex + aspect-ratio) → .fn wylewał się poza
   ramkę, był przycinany do zielonego zaokrąglenia i ramka robiła się nierówna (gruba w narożnikach,
   cienka na środku boków). inset:18px (px) jest jednoznaczny; absolute nadal jest kontekstem
   pozycjonowania dla .fn__rain/.fn__drop (procenty liczone tak samo). */
.fn { position: absolute; inset: 18px; }

/* BUDOWA: segmenty / strzałka / podpis wjeżdżają po kolei */
.fn.fn-live .fn__seg,
.fn.fn-live .fn__arrow,
.fn.fn-live .fn__cap {
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s cubic-bezier(.23,1,.32,1), transform .55s cubic-bezier(.23,1,.32,1);
}
.fn.fn-live .fn__seg.is-built,
.fn.fn-live .fn__arrow.is-built,
.fn.fn-live .fn__cap.is-built { opacity: 1; transform: none; }

/* STRUMIEŃ „ODSIEWU" — overlay nad stosem segmentów (ukryty póki lejek nie „pracuje") */
.fn__rain { position: absolute; left: 0; right: 0; top: 7%; bottom: 12%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.fn.is-running .fn__rain { opacity: 1; }
.fn__drop { position: absolute; top: 0; width: clamp(5px, .85vw, 8px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, 0); opacity: 0; will-change: top, transform, opacity; }
/* dopasowani = mięta z obwódką (jak hub__bdot); masowy ruch = wyblakła zieleń */
.fn__drop--pass { background: var(--brand-mint); border: 1.5px solid var(--brand); }
.fn__drop--rej  { background: rgba(3, 79, 70, .32); }

.fn.is-running .fn__drop--pass { animation: fnPass 2.6s linear infinite; }
.fn.is-running .fn__drop--rej  { animation: fnReject 2.6s ease-in infinite; }
/* delaye rozkładają krople w równy strumień (kolejność w HTML) */
.fn.is-running .fn__drop:nth-of-type(1) { animation-delay: 0s; }
.fn.is-running .fn__drop:nth-of-type(2) { animation-delay: .45s; }
.fn.is-running .fn__drop:nth-of-type(3) { animation-delay: .9s; }
.fn.is-running .fn__drop:nth-of-type(4) { animation-delay: 1.35s; }
.fn.is-running .fn__drop:nth-of-type(5) { animation-delay: 1.8s; }
.fn.is-running .fn__drop:nth-of-type(6) { animation-delay: 2.2s; }

/* dopasowany: spływa do końca i gaśnie przy rezultacie */
@keyframes fnPass {
  0%   { top: 0%;   opacity: 0; transform: translate(-50%, 0) scale(.6); }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; transform: translate(-50%, 0) scale(1); }
}
/* masowy ruch: odpada na zwężeniu — znosi w bok i gaśnie w połowie drogi */
@keyframes fnReject {
  0%   { top: 0%;  opacity: 0; transform: translate(-50%, 0); }
  12%  { opacity: 1; }
  46%  { top: 44%; opacity: .9; transform: translate(-50%, 0); }
  64%  { top: 52%; opacity: 0; transform: translate(-50%, 0) translateX(var(--drift, 1.4em)); }
  100% { opacity: 0; }
}
/* rezultat błyska miętą, gdy dopasowany dolatuje (fazy 17%/69% = lądowania kropli --pass) */
.fn.is-running .fn__seg--res { animation: fnResPulse 2.6s ease-in-out infinite; }
@keyframes fnResPulse {
  0%, 12%, 24%, 64%, 76%, 100% { box-shadow: 0 0 0 0 rgba(116, 211, 190, 0); }
  17%, 69% { box-shadow: 0 0 0 2px rgba(116, 211, 190, .5); }
}

@media (prefers-reduced-motion: reduce) {
  .fn.is-running .fn__drop, .fn.is-running .fn__seg--res { animation: none; }
  .fn__rain { display: none; }
}

/* 02b — pełna makieta aplikacji CRM (krem + zieleń, wzór z arkusza CRM) */
/* okno wyśrodkowane w karcie z gwarantowanym oddechem ≥40px ze wszystkich stron */
.mock--crmapp { width: 100%; max-width: none; font-size: clamp(8px, 1.25vw, 12px); --crm-cols: 1.5fr .82fr 1.2fr 1.5fr 1.35fr; box-shadow: none; }
.mock--crmapp .crm__bar { display: flex; gap: .55em; align-items: center; padding: .85em 1em; background: rgba(2,78,70,.05); border-bottom: 1px solid rgba(2,78,70,.08); }
.mock--crmapp .crm__bar span { width: .62em; height: .62em; border-radius: 50%; background: rgba(2,78,70,.2); flex: none; }

/* pasek narzędzi */
.mock--crmapp .crm__tools { display: flex; align-items: center; gap: .55em; padding: .8em 1em; border-bottom: 1px solid rgba(2,78,70,.08); }
.mock--crmapp .crm__tools svg { width: 1.25em; height: 1.25em; flex: none; }
.mock--crmapp .crm__btn { display: inline-flex; align-items: center; gap: .4em; padding: .5em .8em; border-radius: 7px; background: var(--brand); color: var(--bg-light); font-weight: 600; }
.mock--crmapp .crm__field { display: inline-flex; align-items: center; gap: .45em; padding: .5em .8em; border-radius: 7px; border: 1px solid rgba(2,78,70,.16); color: rgba(2,78,70,.55); min-width: 8em; }
.mock--crmapp .crm__chip { display: inline-flex; align-items: center; gap: .42em; padding: .5em .7em; border-radius: 7px; border: 1px solid rgba(2,78,70,.16); color: rgba(2,78,70,.7); font-weight: 500; }
.mock--crmapp .crm__chev { width: 1em !important; height: 1em !important; opacity: .7; }
.mock--crmapp .crm__more { margin-left: auto; color: rgba(2,78,70,.5); font-weight: 700; letter-spacing: .05em; }

/* arkusz */
.mock--crmapp .crm__sheet { padding: .7em 1em 1em; display: grid; gap: .85em; flex: 1; align-content: space-between; }
.mock--crmapp .crm__group { display: grid; }
.mock--crmapp .crm__ghead { display: flex; align-items: center; gap: .35em; font-family: var(--font-display); font-weight: 700; font-size: 1.18em; color: var(--brand); margin-bottom: .55em; }
.mock--crmapp .crm__ghead .crm__chev { width: 1.1em !important; height: 1.1em !important; opacity: .85; }

/* wiersze tabeli */
.mock--crmapp .crm__row { display: grid; grid-template-columns: var(--crm-cols); align-items: center; gap: .6em; padding: .98em .2em; border-top: 1px solid rgba(2,78,70,.07); }
.mock--crmapp .crm__row--head { border-top: 0; border-bottom: 1px solid rgba(2,78,70,.12); padding-bottom: .45em; }
.mock--crmapp .crm__row--head .crm__c { color: rgba(2,78,70,.5); font-weight: 600; }

.mock--crmapp .crm__c { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(2,78,70,.78); }
.mock--crmapp .crm__c--mut { color: rgba(2,78,70,.5); }


.mock--crmapp .crm__c--name { display: flex; align-items: center; gap: .5em; color: var(--brand); font-weight: 600; }
.mock--crmapp .crm__chk { width: 1.05em; height: 1.05em; border-radius: 3px; border: 1.4px solid rgba(2,78,70,.3); flex: none; }

.mock--crmapp .crm__add { font-size: .95em; color: rgba(2,78,70,.42); padding: .55em .2em .1em; }

/* pigułki statusów — wyłącznie odcienie zieleni/mięty */
.mock--crmapp .crm__pill { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .26em .55em; border-radius: 99px; font-weight: 600; background: rgba(2,78,70,.08); color: var(--brand); }
.mock--crmapp .crm__pill--stage { background: rgba(2,78,70,.07); }
.mock--crmapp .crm__pill--on { background: rgba(116,211,190,.28); }
.mock--crmapp .crm__pill--act { background: var(--brand); color: var(--bg-light); }

/* kolumna „Powiadomienia": typ powiadomienia z ikoną (zadzwoń / przypomnienie / mail) */
.mock--crmapp .crm__note { display: inline-flex; align-items: center; gap: .42em; max-width: 100%; overflow: hidden; color: rgba(2,78,70,.55); font-weight: 500; transition: transform .15s cubic-bezier(.23,1,.32,1), color .3s ease; }
.mock--crmapp .crm__note svg { width: 1.15em; height: 1.15em; flex: none; color: var(--brand); opacity: .82; }
/* kursor „klika" powiadomienie (press) → po wykonaniu zostaje odhaczone (is-done) */
.mock--crmapp .crm__note.is-press { transform: scale(.96); }
.mock--crmapp .crm__note.is-done { color: var(--brand); font-weight: 600; }
.mock--crmapp .crm__note.is-done svg { opacity: 1; }

/* ---- „życie" makiety 02 (CRM): kursor klika „Wyślij Ofertę" → oferta wychodzi ----
   Analogicznie do makiety 01 (.proc-live): kursor wstrzykiwany przez JS (initProcCrmLife),
   dojeżdża do zielonego przycisku na wierszu Marii, „klika", a po wysyłce pill morphuje
   w „Wysłano", etap przechodzi w „Oferta Wstępna" i wsuwa się toast „Oferta wysłana". */
.mock--crmapp .crm__pill--act { transition: transform .15s cubic-bezier(.23,1,.32,1), background .3s ease, color .3s ease; }
.mock--crmapp .crm__pill--act.is-press { transform: scale(.95); }
.mock--crmapp .crm__pill--act.is-sent { background: rgba(116,211,190,.28); color: var(--brand); }
.mock--crmapp .crm__pill--act .crm__act-ic { width: 1.05em; height: 1.05em; margin-right: .28em; vertical-align: -.18em; display: inline-block; }
.mock--crmapp .crm__pill--act .crm__act-ic svg { width: 100%; height: 100%; display: block; }
.mock--crmapp .crm__pill--stage { transition: background .35s ease, color .35s ease; }
.mock--crmapp .crm__row { transition: background .4s cubic-bezier(.23,1,.32,1); }
.mock--crmapp .crm__row.is-hover { background: rgba(116,211,190,.16); border-radius: 6px; }
/* kursor (JS) — fill zieleń + obrys krem (paleta), jak w makiecie 01 */
.mock--crmapp .crm__cursor { position: absolute; left: 0; top: 0; width: 18px; height: 18px; z-index: 6; pointer-events: none; opacity: 0; will-change: transform; filter: drop-shadow(0 2px 4px rgba(3,79,70,.4)); }
.mock--crmapp .crm__cursor svg { width: 100%; height: 100%; display: block; }
/* toast „Oferta wysłana" (JS) — prawy dolny róg okna */
.mock--crmapp .crm__toast { position: absolute; right: 1em; bottom: 1em; z-index: 7; display: inline-flex; align-items: center; gap: .5em; padding: .6em .85em; border-radius: 10px; background: var(--brand); color: var(--bg-light); font-weight: 600; font-size: .92em; box-shadow: 0 12px 28px -12px rgba(3,79,70,.6); opacity: 0; transform: translateY(8px) scale(.97); pointer-events: none; }
.mock--crmapp .crm__toast.is-in { opacity: 1; transform: none; transition: opacity .34s cubic-bezier(.23,1,.32,1), transform .34s cubic-bezier(.23,1,.32,1); }
.mock--crmapp .crm__toast svg { width: 1.2em; height: 1.2em; flex: none; }

/* na małych ekranach przerzedzamy tabelę, by zmieściła się w kwadratowej karcie */
@media (max-width: 600px) {
  /* Okno wypełnia kremową kartę (przedtem -80px → okno zwężone i dosunięte w lewo,
     przez co zielona ramka z prawej robiła się gruba). 100% = równa, cienka ramka
     ze wszystkich stron + szersze, czytelniejsze okno CRM. */
  .mock--crmapp { width: 100%; --crm-cols: 1.4fr .85fr 1.5fr 1.05fr; font-size: clamp(7px, 2.3vw, 10px); }
  .mock--crmapp .crm__c:nth-child(3) { display: none; }
  .mock--crmapp .crm__tools .crm__field { min-width: 0; }
  .mock--crmapp .crm__chip:nth-child(4) { display: none; }
  .mock--crmapp .crm__group:last-child .crm__row:nth-child(n+5) { display: none; }
  .mock--crmapp .crm__sheet { gap: .55em; padding-top: .5em; }
  .mock--crmapp .crm__row { padding: .42em .2em; }
}

/* 03 — przepływ automatyzacji */


/* 03 — pionowy diagram procesu automatyzacji w kremowym panelu zielonej karty
   phase__media: wejscie (Nowy lead) -> poziomy blok "AI automatyzacja" ->
   3 rowne wyjscia -> pigulka statusu. Cienkie connectory, spokojny uklad. */
.mock--hub { width: 100%; max-width: none; aspect-ratio: auto; display: flex; flex-direction: column; padding: clamp(15px, 3.6%, 24px); border-radius: 20px; box-shadow: none; font-size: clamp(9px, 1.55vw, 13px); }
.mock--hub .hub__flow { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; }

/* karty wejscia/wyjscia + ikony + teksty */
.mock--hub .hub__node { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6em; padding: .68em .9em; background: var(--bg-light); border: 1px solid rgba(3,79,70,.14); border-radius: 12px; box-shadow: 0 8px 18px -12px rgba(1,40,36,.45); }
.mock--hub .hub__ic { display: grid; place-items: center; width: 2.1em; height: 2.1em; flex: none; border-radius: 8px; background: rgba(3,79,70,.07); color: var(--brand); }
.mock--hub .hub__ic svg { width: 1.2em; height: 1.2em; }
.mock--hub .hub__tx { display: grid; gap: .1em; min-width: 0; }
.mock--hub .hub__tx b { font-weight: 700; color: var(--brand); line-height: 1.12; }
.mock--hub .hub__tx i { font-style: normal; font-size: .82em; color: rgba(3,79,70,.55); line-height: 1.2; }

/* pionowe connectory (rozciagaja sie, by spokojnie wypelnic panel) */
.mock--hub .hub__link { flex: 1 1 auto; width: 2px; min-height: 1.4em; background: rgba(3,79,70,.28); border-radius: 2px; }

/* glowny poziomy blok automatyzacji */
.mock--hub .hub__core { width: 70%; margin-inline: auto; display: flex; align-items: center; gap: .8em; padding: .95em 1.05em; border-radius: 15px; background: linear-gradient(150deg, var(--brand) 0%, var(--brand-dark) 100%); color: var(--bg-light); box-shadow: 0 20px 40px -16px rgba(1,40,36,.75); }
.mock--hub .hub__spark { display: grid; place-items: center; width: 2.4em; height: 2.4em; flex: none; border-radius: 10px; background: rgba(116,211,190,.16); color: var(--brand-mint); }
.mock--hub .hub__spark svg { width: 1.45em; height: 1.45em; }
.mock--hub .hub__coretx { display: grid; gap: .14em; margin-right: auto; min-width: 0; }
.mock--hub .hub__corename { font-family: var(--font-display); font-weight: 700; font-size: 1.34em; line-height: 1; letter-spacing: -.01em; }
.mock--hub .hub__coresub { font-size: .8em; color: rgba(255,255,235,.72); }
.mock--hub .hub__pill { display: inline-flex; align-items: center; gap: .35em; padding: .26em .66em; border-radius: 99px; background: rgba(116,211,190,.16); border: 1px solid rgba(116,211,190,.4); color: var(--brand-mint); font-weight: 600; font-size: .76em; flex: none; }
.mock--hub .hub__pill i { width: .42em; height: .42em; border-radius: 50%; background: var(--brand-mint); flex: none; }

/* connector rozgaleziajacy blok AI do 3 wyjsc */
.mock--hub .hub__branch { position: relative; width: 100%; flex: 1 1 auto; min-height: 2.4em; }
.mock--hub .hub__branch svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mock--hub .hub__branch line { stroke: rgba(3,79,70,.28); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mock--hub .hub__bdot { position: absolute; bottom: 0; width: .55em; height: .55em; border-radius: 50%; background: var(--brand-mint); border: 1.5px solid var(--brand); transform: translate(-50%, 50%); }
.mock--hub .hub__bdot--l { left: 16.67%; }
.mock--hub .hub__bdot--m { left: 50%; }
.mock--hub .hub__bdot--r { left: 83.33%; }

/* trzy rowne karty wyjsciowe */
.mock--hub .hub__outs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .55em; }
.mock--hub .hub__out { display: grid; justify-items: center; text-align: center; align-content: start; gap: .45em; padding: .8em .5em; background: var(--bg-light); border: 1px solid rgba(3,79,70,.14); border-radius: 12px; box-shadow: 0 8px 18px -12px rgba(1,40,36,.45); }
.mock--hub .hub__out b { font-weight: 700; font-size: .9em; color: var(--brand); line-height: 1.15; }

/* pigulka statusu u dolu panelu */
.mock--hub .hub__status { align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: .5em; width: 12.1em; min-height: 3.7em; padding: 0 1.1em; border-radius: 99px; background: rgba(3,79,70,.06); border: 1px solid rgba(3,79,70,.14); color: var(--brand); font-weight: 600; font-size: 1em; }
.mock--hub .hub__status svg { width: 1.25em; height: 1.25em; flex: none; color: var(--brand); }

/* ---- 03 „życie" makiety (hub): składa się sama, potem pracuje (BEZ kursora) ----
   Automatyzacja działa autonomicznie, więc nie ma kursora ani klikania. Stan domyślny
   (bez JS / reduced-motion) = diagram statyczny, w pełni złożony. .hub-live (dokłada JS)
   chowa elementy; JS dokłada .is-built kolejnym krokom (BUDOWA), a po złożeniu .is-running
   uruchamia perpetualną PĘTLĘ przepływu — wszystko w CSS (off-main-thread). */

/* tranzycje „budowy" */
.mock--hub .hub__node, .mock--hub .hub__core, .mock--hub .hub__out, .mock--hub .hub__status { transition: opacity .55s cubic-bezier(.23,1,.32,1), transform .55s cubic-bezier(.23,1,.32,1), box-shadow .55s ease; }
.mock--hub .hub__link { transition: transform .45s cubic-bezier(.5,0,.2,1); }
.mock--hub .hub__bdot { transition: opacity .4s ease, transform .4s cubic-bezier(.23,1,.32,1); }
.mock--hub .hub__pill { transition: opacity .45s ease; }
.mock--hub .hub__branch svg { transition: opacity .5s ease; }

/* stan „przed budową": elementy schowane */
.mock--hub.hub-live .hub__node, .mock--hub.hub-live .hub__core, .mock--hub.hub-live .hub__out, .mock--hub.hub-live .hub__status { opacity: 0; transform: translateY(10px); }
.mock--hub.hub-live .hub__link { transform: scaleY(0); transform-origin: top; }
.mock--hub.hub-live .hub__branch svg { opacity: 0; }
.mock--hub.hub-live .hub__bdot { opacity: 0; transform: translate(-50%, 50%) scale(.4); }
.mock--hub.hub-live .hub__pill { opacity: 0; }

/* kolejne kroki „składania" diagramu (JS dokłada .is-built) */
.mock--hub.hub-live .hub__node.is-built, .mock--hub.hub-live .hub__core.is-built, .mock--hub.hub-live .hub__out.is-built, .mock--hub.hub-live .hub__status.is-built { opacity: 1; transform: none; }
.mock--hub.hub-live .hub__link.is-built { transform: scaleY(1); }
.mock--hub.hub-live .hub__branch.is-built svg { opacity: 1; }
.mock--hub.hub-live .hub__bdot.is-built { opacity: 1; transform: translate(-50%, 50%) scale(1); }
.mock--hub.hub-live .hub__core.is-on .hub__pill { opacity: 1; }

/* rdzeń „włącza się": iskra rozbłyska raz przy złożeniu */
.mock--hub .hub__core.is-on .hub__spark { animation: hubSparkPulse .8s cubic-bezier(.23,1,.32,1); }
@keyframes hubSparkPulse { 0% { transform: scale(.8); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ===== PĘTLA „PRACY" (.is-running): automatyzacja działa sama ===== */
/* sygnał spływa łączami w dół (świetlisty pas mięty) */
.mock--hub.is-running .hub__link { position: relative; overflow: hidden; }
.mock--hub.is-running .hub__link::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%; background: linear-gradient(to bottom, transparent, var(--brand-mint), transparent); animation: hubLinkFlow 2.6s linear infinite; }
@keyframes hubLinkFlow { 0% { transform: translateY(-120%); } 100% { transform: translateY(320%); } }

/* iskra rdzenia spokojnie oddycha, plakietka „Aktywna" pulsuje */
.mock--hub.is-running .hub__core.is-on .hub__spark { animation: hubSparkBreathe 2.6s ease-in-out infinite; }
@keyframes hubSparkBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.mock--hub.is-running .hub__pill i { animation: hubPillBlink 2.6s ease-in-out infinite; }
@keyframes hubPillBlink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(116,211,190,0); } 50% { opacity: .6; box-shadow: 0 0 0 .28em rgba(116,211,190,.3); } }

/* wyjścia odbierają sygnał kaskadą w dół (mięta), kropki rozgałęzienia pulsują w rytm */
.mock--hub.is-running .hub__out { animation: hubOutPulse 2.6s ease-in-out infinite; }
.mock--hub.is-running .hub__out:nth-child(1) { animation-delay: 1.10s; }
.mock--hub.is-running .hub__out:nth-child(2) { animation-delay: 1.28s; }
.mock--hub.is-running .hub__out:nth-child(3) { animation-delay: 1.46s; }
@keyframes hubOutPulse { 0%, 64%, 100% { border-color: rgba(3,79,70,.14); box-shadow: 0 8px 18px -12px rgba(1,40,36,.45); } 18% { border-color: rgba(116,211,190,.7); box-shadow: 0 6px 14px -8px rgba(3,79,70,.4), 0 0 0 2px rgba(116,211,190,.45); } }
.mock--hub.is-running .hub__bdot { animation: hubDotPulse 2.6s ease-in-out infinite; }
.mock--hub.is-running .hub__bdot--l { animation-delay: 1.00s; }
.mock--hub.is-running .hub__bdot--m { animation-delay: 1.12s; }
.mock--hub.is-running .hub__bdot--r { animation-delay: 1.24s; }
@keyframes hubDotPulse { 0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(116,211,190,0); } 16% { box-shadow: 0 0 0 .32em rgba(116,211,190,.4); } }

/* status migocze „Proces zakończony" pod koniec cyklu */
.mock--hub.is-running .hub__status { animation: hubStatusPulse 2.6s ease-in-out infinite; animation-delay: 1.70s; }
@keyframes hubStatusPulse { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(3,79,70,0); } 22% { box-shadow: 0 0 0 2px rgba(116,211,190,.4); } }

/* 04 — karta reklamy IG */


.phase__num { display: inline-flex; align-items: center; gap: 0.75em; font-family: var(--font-accent); font-style: normal; color: var(--accent); font-size: 1.2rem; }
.phase__num::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.8; }
.phase h2 { font-size: var(--fs-h2-sm); margin: 8px 0 24px; }
/* Dolny próg zjechany 1.1rem→0.92rem: w wąskim układzie 2-kol (≈980px → kolumna ~442px)
   font stał na 17.6px i najdłuższy akapit łamał się na 5 linii. ~14.7px mieści 4 linie
   (treść bez zmian); na szerokich ekranach 1.3vw nadal rośnie do 1.28rem. */
.phase p { color: var(--text-muted); margin-bottom: 28px; font-size: clamp(0.92rem, 1.3vw, 1.28rem); line-height: 1.55; }
.section--dark .phase p { color: var(--muted-on-dark); }
.phase ul { display: grid; gap: 18px; }
.phase li { padding-left: 1.75em; position: relative; font-size: 1.2em; }
.phase li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.phase__cta { margin-top: 40px; }
/* CTA faz: pełne ZIELONE wypełnienie — krem btn--primary zlewałby się z kremowym tłem sekcji */
.phase__cta .btn { background: var(--brand); color: var(--bg-light); border-color: var(--brand); }
/* Goła strzałka jak na landingu (.sg-arr) — bez miętowego kółka; przesuw 5px z reguł bazowych .btn. */
.phase__cta .btn .arr { display: inline-flex; align-items: center; justify-content: center; font-size: 1em; line-height: 1; transition: transform .25s var(--ease); }

/* ---------- „Koszt zwlekania" (proces.html §7): suwak scroll-scrubbed — kopia 1:1 animativ.pl ----------
   Plakietka (−X%) jedzie wzdłuż toru w rytm scrolla: pozycja = calc(--rest * --p), gdzie
   --p (0→1) ustawia initLossSliders w main.js z pozycji sekcji w viewporcie. --rest (per wiersz)
   = punkt spoczynkowy plakietki (= 100 − strata). Paleta marki zamiast pomarańczu animativ. */
/* tytuł wypełniający się scrollem — LITERY startują jasnoszare (alfa paletowej czerni), JS dociąga do pełnej czerni znak po znaku */
.pbuild-title .tw { color: rgba(26,27,27,.2); }
/* maksymalnie 2 linijki (jak w inspiracji): mniejszy stopień, by dłuższy segment mieścił się w jednej linii */
.pbuild-title { font-size: calc(clamp(1.9rem, 4.2vw, 3.5rem) + 20px); text-wrap: balance; }
/* ≤767px: wymuszony <br> robił z linii 1 dwa wiersze → łącznie 3 linijki (ZAKAZ: nagłówek max 2 linie).
   Chowamy <br> i pozwalamy text-wrap:balance rozłożyć tekst na 2 równe linie przy mniejszym stopniu. */
@media (max-width: 767px) {
  .pbuild-title { font-size: clamp(1.75rem, 6.4vw, 3rem); }
  .pbuild-title br { display: none; }
}
/* Powiększony nagłówek (+20px) nie mieścił linii 1 w domyślnym max-width:720px .section-head
   → zawijał się na 3 linijki. Zdejmujemy limit szerokości, by zmieścił się w 2 wierszach (br) bez zmiany stopnia. */
#koszt-zwlekania .section-head { max-width: none; }
/* Skala +~30% względem wersji bazowej (prośba: „grubsze, nie takie cienkie/małe"). */
.pbuild { list-style: none; margin: clamp(40px, 6vw, 76px) 0 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 20px); --p: 0; }
/* WIERSZ = slim pasek (jak inspiracja): etykieta z LEWEJ, opis przy prawej krawędzi,
   a CZARNA PLAKIETKA jeździ NAD wierszem (absolutnie) — wlatuje z PRAWEJ krawędzi i
   przemierza CAŁĄ SZEROKOŚĆ, zatrzymując się w lewym-środku na pozycji --rest (per-wiersz).
   pr=0 → przy prawej krawędzi (zza maski), pr=1 → na --rest. Bez paska wypełnienia. */
.pbuild__row {
  position: relative;
  display: flex; align-items: center;
  padding: clamp(18.5px, 1.83vw, 23.6px) clamp(20px, 2vw, 30px);  /* +15% +15% wysokości wiersza/plakietki */
  border: 1px solid var(--line-light);
  border-radius: 7px;
  overflow: hidden;                 /* plakietka wsuwa się zza prawej krawędzi */
  background: rgba(26,27,27,.04);
}
/* WYPEŁNIENIE „ładującego się paska": jasny (krem = brandowa biel, paleta §5) obszar od
   LEWEJ krawędzi wiersza do LEWEJ krawędzi plakietki — czyli dokładnie ta część toru, którą
   plakietka już „przejechała". Szerokość = pozycja `left` plakietki (ten sam wzór co .pbuild__pill),
   więc fill i plakietka jadą sklejone. z-index 0: nad tłem wiersza, pod tekstem (z-index 1) i pod
   plakietką (z-index 3). */
.pbuild__row::before {
  content: ""; position: absolute; z-index: 0; left: 0; top: 0; bottom: 0;
  width: calc(var(--from, 86%) - (var(--from, 86%) - var(--rest, 35%)) * var(--pr, 0));
  background: #fff;   /* zwykła biel (decyzja użytkownika — świadome odstępstwo od palety §5, NIE krem) */
}
.pbuild__label { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 11px; flex: none; }
.pbuild__num { font-family: var(--font-accent); font-weight: 600; font-size: .85rem; letter-spacing: .12em; color: rgba(26,27,27,.4); flex: none; }
.pbuild__num::after { content: "/"; margin-left: .15em; }
.pbuild__name { font-family: var(--font-accent); font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.15; }
.pbuild__say { position: relative; z-index: 1; flex: none; margin: 0 0 0 auto; color: var(--text-muted); font-family: var(--font-accent); font-size: .78rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; text-align: right; white-space: nowrap; }
/* PLAKIETKA — absolutnie nad wierszem, wypełnia CAŁĄ jego WYSOKOŚĆ (top/bottom: 0); jeździ po --left */
.pbuild__pill {
  position: absolute; z-index: 3; top: 0; bottom: 0;
  /* pr=0 → --from (tuż PRZED opisem po prawej, liczone per-wiersz w JS) → pr=1 → --rest (lewy-środek).
     Każdy wiersz jedzie własnym tempem (--dur w JS). BEZ transition (scrub w rAF). */
  left: calc(var(--from, 86%) - (var(--from, 86%) - var(--rest, 35%)) * var(--pr, 0));
  display: inline-flex; align-items: center; justify-content: center;
  min-width: clamp(90px, 7.4vw, 116px);
  padding: 0 20px; border-radius: 5px;
  background: var(--black); color: var(--bg-light);
  font-family: var(--font-accent); font-weight: 700; font-size: clamp(1.08rem, 1.45vw, 1.34rem); letter-spacing: .01em; white-space: nowrap;
}

@media (max-width: 940px) {
  /* mobile: plakietka wraca do flow (statyczna, dosunięta w prawo); wiersz się zawija, opis pod spodem */
  .pbuild__row { flex-wrap: wrap; row-gap: 10px; }
  .pbuild__row::before { display: none; }   /* fill „paska" bez sensu, gdy plakietka nie jeździ */
  .pbuild__pill { position: static; top: auto; bottom: auto; left: auto; margin-left: auto; min-height: clamp(38px, 9vw, 46px); }
  .pbuild__say { white-space: normal; text-align: left; flex-basis: 100%; margin-left: 0; }
}

/* =================================================================
   KONSULTACJA — karty, kroki, formularz
   ================================================================= */

.perk { background: var(--bg-light); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 26px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.perk:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(20,20,30,.1); }
.perk .ico { font-size: 2rem; margin-bottom: 14px; }
.perk h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.perk p { color: var(--text-muted); font-size: .95rem; }

/* =================================================================
   WISPR-STYLE — sekcja „Nasza przewaga" (o-nas.html)
   Edytorskie nagłówki serif (Fraunces prosty) + ciemne karty-makiety
   z mini-UI, asymetryczny „floating" układ. Tekst wjeżdża RAZ na scroll
   ([data-reveal] na .wf-feat__text). Grafiki w kartach są OD RAZU widoczne
   i animują się CIĄGLE (pętle @keyframes, niezależne od scrolla): ambient
   (unoszenie kart + oddech poświaty) + 1 akcent/kartę (wędrujące
   podświetlenie: pigułki / słupki / wiersze). RM-safe: stany bazowe są
   spoczynkowe i widoczne, a globalny blok reduced-motion gasi pętle.
   ================================================================= */
.wf { display: flex; flex-direction: column; gap: clamp(101px, 12.7vw, 163px); }

.wf-feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* równe kolumny: tekst dość szeroki, by heading mieścił się w jednej linii */
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
}
.wf-feat:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wf-feat:nth-child(even) .wf-feat__text { order: 2; }
.wf-feat:nth-child(odd)  .wf-feat__media { transform: none; }
.wf-feat:nth-child(even) .wf-feat__media { transform: none; }

.wf-feat__title {
  font-family: var(--font-display); font-style: normal; font-weight: 400; /* nagłówek = EB Garamond 400 jak na landingu (nie Figtree) */
  font-size: clamp(2.54rem, 4.42vw, 3.9rem); line-height: 1.04; letter-spacing: -.015em; /* +30% */
  white-space: nowrap; /* heading zawsze w jednej linii (resetowane przy kolapsie do 1 kolumny) */
  color: var(--brand);
}
.wf-feat__lead { margin-top: 41px; max-width: 44ch; color: var(--text-muted); font-size: 1.38rem; line-height: 1.62; } /* lead +30% */
/* Gdy sekcja „Nasza przewaga" siedzi na ciemnym/czarnym tle — nagłówek i lead lewej kolumny dostają jasne
   odcienie (same karty .wf-card są ciemne z założenia i nie wymagają zmian). */
.section--dark .wf-feat__title { color: var(--text-on-dark); }
.section--dark .wf-feat__lead { color: var(--muted-on-dark); }

/* --- karta: ciemna makieta + AMBIENT (ciągłe, delikatne unoszenie) --- */
.wf-card {
  --accent: var(--accent-on-dark);
  position: relative; overflow: hidden;
  /* Wszystkie karty sekcji 3 = jedna wysokość (wzorzec: karta 2 „Status systemów").
     Karta 1 rośnie do tej wysokości, karta 3 przycięta treściowo, by się zmieścić.
     Poniżej 980px (kolaps do 1 kolumny) wracamy do height:auto. */
  height: 360px;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, #073A33 0%, #04231F 72%);
  color: var(--text-on-dark);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 30px;
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 34px 64px -28px rgba(2, 22, 18, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: wfFloat 7s ease-in-out infinite;
  transition: box-shadow .5s var(--ease);
  /* PERF: każda karta = własna warstwa GPU + izolacja przemalowań, żeby
     ciągłe pętle animacji (poświata/słupki/pigułki) nie wymuszały
     repaintu całej strony przy przewijaniu (Lenis). */
  contain: content;
  will-change: transform;
}
.wf-feat:nth-child(2) .wf-card { animation-duration: 7.6s; animation-delay: -2.4s; }
.wf-feat:nth-child(3) .wf-card { animation-duration: 6.6s; animation-delay: -4.6s; }
.wf-card:hover { box-shadow: 0 44px 80px -30px rgba(2, 22, 18, .82), inset 0 1px 0 rgba(255, 255, 255, .07); }
@keyframes wfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ambient: oddychająca poświata w rogu karty */
.wf-card::before {
  content: ""; position: absolute; right: -38%; bottom: 48%; width: 68%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(116, 211, 190, .2), transparent 62%);
  pointer-events: none;
  animation: wfGlow 8s ease-in-out infinite;
}
.wf-feat:nth-child(2) .wf-card::before { animation-delay: -3s; }
.wf-feat:nth-child(3) .wf-card::before { animation-delay: -5.5s; }
@keyframes wfGlow { 0%, 100% { opacity: .4; transform: translate(0, 0) scale(1); } 50% { opacity: .92; transform: translate(-5%, 5%) scale(1.14); } }

.wf-win { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; position: relative; }
.wf-win__title { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.01em; }
.wf-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: rgba(116, 211, 190, .16); color: var(--accent); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.wf-badge .tri { font-size: .7em; transform: translateY(-1px); }
.wf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-mint); animation: wfPulse 2.4s var(--ease) infinite; }
@keyframes wfPulse { 0% { box-shadow: 0 0 0 0 rgba(116, 211, 190, .5); } 70% { box-shadow: 0 0 0 7px rgba(116, 211, 190, 0); } 100% { box-shadow: 0 0 0 0 rgba(116, 211, 190, 0); } }

/* === Karta 1 — DWIE PIONOWE TAŚMY marek: lewa kolumna płynie w GÓRĘ,
   prawa w DÓŁ (przeciwbieżnie). Mechanizm jak pas narzędzi z landingu:
   tor = 2 identyczne kopie listy, translateY(-50%) = dokładnie jedna kopia
   → bezszwowa pętla. Maska wygasza górę i dół. Odstęp robi margin-bottom
   pigułki (NIE gap), żeby obie kopie miały równą wysokość i pętla nie
   „skakała" o jeden odstęp. === */
.wf-stack {
  flex: 1; min-height: 0; /* wypełnij wysokość karty i pozwól się kurczyć w flexie */
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
}
.wf-stack__col { overflow: hidden; }
.wf-stack__track {
  list-style: none; display: flex; flex-direction: column; align-items: center;
  animation: wfStackUp 19s linear infinite;
  will-change: transform;
}
.wf-stack__col--down .wf-stack__track { animation-name: wfStackDown; }
/* pauza, gdy ktoś najedzie na kartę — żeby dało się przeczytać marki */
.wf-card--tools:hover .wf-stack__track { animation-play-state: paused; }
.wf-stack__track li {
  margin-bottom: 11px; /* odstęp = część bloku pigułki (nie gap) → równe kopie */
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; max-width: 192px; /* JEDNAKOWY rozmiar wszystkich pigułek (+20% z 160) — logo wyśrodkowane */
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .98rem;
  color: #EAFBF4; white-space: nowrap;
  background: linear-gradient(180deg, #0A6A5C, #034B43);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px -8px rgba(0, 0, 0, .5);
}
/* Logo = kremowa maska (shape z SVG, kolor z currentColor) → jedna barwa, w palecie.
   Wysokość stała + aspect-ratio(--ar) = jeden optyczny rozmiar dla wszystkich. */
.wf-stack__logo {
  display: block; height: 22px; aspect-ratio: var(--ar, 2); flex: none;
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}
.wf-stack__name { line-height: 1; }
@keyframes wfStackUp   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes wfStackDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* === Karta 2 — wzrost: siatka + AKCENT = skanujące podświetlenie słupków === */
/* Wykres ELASTYCZNY: karta ma sztywne 330px, więc gdy KPI/padding urosną (szersze
   ekrany, inne metryki fontu), wykres się kurczy i POCHŁANIA nadmiar zamiast wypychać
   oś miesięcy poza kadr (overflow:hidden ją ucinał). min-height:0 pozwala kurczyć się
   poniżej treści; floor utrzymuje czytelność słupków. Słupki = % wysokości wykresu, więc
   skalują się z dowolną wysokością. */
.wf-chart { display: flex; align-items: flex-end; gap: clamp(8px, 1.4vw, 16px); flex: 1 1 auto; min-height: 90px; padding-top: 6px; border-bottom: 1px solid rgba(255, 255, 255, .14); background-image: repeating-linear-gradient(to top, rgba(255, 255, 255, .055) 0 1px, transparent 1px 33.34%); }
.wf-bar { position: relative; flex: 1; height: var(--h); transform-origin: bottom; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, rgba(116, 211, 190, .5), rgba(116, 211, 190, .08)); animation: wfBarScan 5.4s var(--ease) infinite; }
/* PERF: „skan" przez opacity (kompozytowane na GPU) zamiast filter:brightness
   (wymuszał repaint każdego słupka co klatkę → zacinanie przy scrollu). */
@keyframes wfBarScan { 0%, 17%, 100% { opacity: .82; transform: scaleY(1); } 6% { opacity: 1; transform: scaleY(1.04); } }
.wf-bar:nth-child(1) { animation-delay: 0s; }
.wf-bar:nth-child(2) { animation-delay: .6s; }
.wf-bar:nth-child(3) { animation-delay: 1.2s; }
.wf-bar:nth-child(4) { animation-delay: 1.8s; }
.wf-bar:nth-child(5) { animation-delay: 2.4s; }
.wf-bar:nth-child(6) { animation-delay: 3s; }
.wf-bar--hot { background: linear-gradient(180deg, var(--brand-mint), #2E7A6E); }
.wf-bar--hot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 26px rgba(116, 211, 190, .55); animation: wfHotGlow 2.8s ease-in-out infinite; }
@keyframes wfHotGlow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.wf-xaxis { display: flex; gap: clamp(8px, 1.4vw, 16px); margin-top: 10px; }
.wf-xaxis span { flex: 1; text-align: center; font-size: .72rem; letter-spacing: .02em; color: var(--muted-on-dark); }

/* KPI nad wykresem — wynik miesiąca jako punkt skupienia raportu */
.wf-kpi { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.wf-kpi__main { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.wf-kpi__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 4.6vw, 3.2rem); line-height: .9; letter-spacing: -.02em; color: var(--text-on-dark); }
.wf-kpi__unit { font-size: .98rem; color: var(--muted-on-dark); }
.wf-kpi__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.wf-kpi__delta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(116, 211, 190, .16); color: var(--accent); font-weight: 700; font-size: .92rem; }
.wf-kpi__delta .tri { font-size: .64em; transform: translateY(-1px); }
.wf-kpi__cap { font-size: .76rem; letter-spacing: .01em; color: var(--muted-on-dark); }

/* wartość na bieżącym słupku — wykres = dane, nie ozdoba */
.wf-bar__v { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); font-style: normal; font-size: .72rem; font-weight: 700; color: #04231F; background: var(--brand-mint); padding: 2px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }

/* źródła zapytań — domyka obietnicę „skąd biorą się zapytania" */
.wf-src { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.wf-src__head { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-on-dark); margin-bottom: 13px; }
.wf-src__list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.wf-src__row { display: flex; align-items: center; gap: 13px; }
.wf-src__label { flex: 0 0 auto; width: clamp(6.5rem, 30%, 9rem); font-size: .9rem; color: var(--text-on-dark); }
.wf-src__track { flex: 1; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.wf-src__fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #2E7A6E, var(--brand-mint)); transform-origin: left; }
.wf-src__pct { flex: 0 0 auto; min-width: 2.6em; text-align: right; font-size: .86rem; font-weight: 700; color: var(--accent); }

/* === Karta 3 — status: AKCENT = monitorujący skan w dół wierszy === */
.wf-rows { display: flex; flex-direction: column; }
.wf-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; border-top: 1px solid rgba(255, 255, 255, .08); }
.wf-row:first-child { border-top: 0; padding-top: 4px; }
.wf-row::before { content: ""; position: absolute; inset: 3px -10px; border-radius: 11px; background: rgba(116, 211, 190, .12); opacity: 0; animation: wfRowGlow 6s var(--ease) infinite; }
@keyframes wfRowGlow { 0%, 20%, 100% { opacity: 0; } 7% { opacity: 1; } }
.wf-row:nth-child(1)::before { animation-delay: 0s; }
.wf-row:nth-child(2)::before { animation-delay: 1s; }
.wf-row:nth-child(3)::before { animation-delay: 2s; }
.wf-row:nth-child(4)::before { animation-delay: 3s; }
.wf-row__label { position: relative; font-weight: 500; color: #EAFBF4; }
.wf-row__status { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-size: .92rem; font-weight: 600; }
.wf-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-mint); color: #04231F; font-size: .76rem; font-weight: 700; animation: wfCheckBeat 6s var(--ease) infinite; }
@keyframes wfCheckBeat { 0%, 20%, 100% { transform: scale(1); } 7% { transform: scale(1.2); } 13% { transform: scale(1); } }
.wf-row:nth-child(1) .wf-check { animation-delay: 0s; }
.wf-row:nth-child(2) .wf-check { animation-delay: 1s; }
.wf-row:nth-child(3) .wf-check { animation-delay: 2s; }
.wf-row:nth-child(4) .wf-check { animation-delay: 3s; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.step { position: relative; padding-top: 18px; }
.step .n { font-family: var(--font-display); font-weight: 700; font-size: 3.2rem; color: var(--accent); line-height: 1; }
.step h3 { font-size: 1.3rem; margin: 10px 0 8px; }
.step p { color: var(--text-muted); }

/* O nas — układ „novobudowa": lewy stack (nagłówek + lista wersalikami + CTA) + duży wizjual po prawej.
   Sekcja przeniesiona na JASNĄ (soft) tonację w rytmie jasny→soft→czerń; klasa .about-dark została jako hook stylów.
   Reguły .section--dark.about-dark poniżej zostają na wypadek użycia tego układu na ciemnym tle gdzie indziej. */


/* Gdy „Dlaczego my" siedzi na jasnej (soft) sekcji — teksty pierwotnie „pod ciemne" wracają do ciemnych
   odcieni, a górny hairline staje się ciemną linią. */


/* nadtytuł z ukośną kreską po tekście (jak „O NAS \" na novobudowie) */
/* .eyebrow--slash::after — dawna ukośna kreska; w pigułce zbędna (patrz §eyebrow). */

/* lista: kreska-leader (gradient) + tytuł WERSALIKAMI + opis */


/* kreski „rysują się" razem z resztą — w jednym momencie, bez kaskady */


/* CTA z gradientowym podkreśleniem (rośnie po wejściu i na hover) */
.novo-cta { display: inline-flex; align-items: center; gap: 12px; width: max-content; margin-top: clamp(30px, 4vw, 46px); font-family: var(--font-display); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-on-dark); }
.novo-cta__line { display: block; width: 0; height: 3px; border-radius: 2px; background: var(--ink-grad); transition: width .55s var(--ease) .1s; }


/* WSZYSTKO NASUWA SIĘ W JEDNYM MOMENCIE — jeden trigger .about-novo[data-mask-reveal].in
   steruje nagłówkiem (maski), listą, CTA i wizualem; zero opóźnień między elementami. */
.novo-item, .novo-cta, .about-novo__media { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease); }


.novo-cta__arrow { transition: transform .3s var(--ease); }
.novo-cta:hover .novo-cta__line { width: clamp(56px, 7vw, 96px); }
.novo-cta:hover .novo-cta__arrow { transform: translateX(6px); }

/* wizjual po prawej + premium placeholder na zdjęcie (łatwy do podmiany na <img>) */


/* =================================================================
   SEKCJA „Dlaczego my" — układ Wispr (o-nas.html, CIEMNA).
   Góra: nagłówek (plakietka-eyebrow + tytuł z akcentem KOLOREM + lead) po lewej,
   brandowy rysunek techniczny okna po prawej. Dół: rząd 3 kart (ikona → tytuł →
   opis). Mięta = akcent na czerni (§8). Karty = subtelne ramki na czarnym tle.
   ================================================================= */
.awf { padding-block: clamp(44px, 5vw, 72px); }   /* mniej powietrza nad/pod treścią niż domyślna .section */
.awf__top { display: grid; grid-template-columns: 1fr minmax(280px, .8fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: clamp(36px, 4vw, 56px); }
.awf__eyebrow {
  display: inline-block; margin-bottom: 22px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  font-family: var(--font-text); font-weight: 600; font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
}
.awf__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.02em; color: var(--text-on-dark); max-width: 17ch; }
.awf__title .accent { color: var(--accent); }   /* mięta na czerni — akcent kolorem (§8) */
.awf__lead { margin-top: 22px; max-width: 50ch; color: var(--muted-on-dark); font-size: var(--fs-lead); line-height: 1.6; }   /* = .section-sub (spójność bliźniaczych sekcji) */

.awf__art { position: relative; color: var(--accent); }   /* currentColor = mięta dla rysunku okna */
.awf__art svg, .awf__art img { width: 100%; height: auto; display: block; }
/* aspect-ratio rezerwuje wysokość boxu PRZED załadowaniem obrazu (loading="lazy"):
   bez tego doczytanie obrazu zmieniało wysokość strony i wyzwalało ScrollTrigger.refresh()
   na pinie sekcji zespołu niżej → skok scrolla (pin-spacer odsłaniał pustkę). */
.awf__art img { transform: scale(1.05); transform-origin: center; aspect-ratio: 1600 / 773; }
/* proces.html („Na czym to stoi"): KADR ilustracji = dokładnie ten sam box co na
   o-nas (1600/773) → cały pion sekcji (pozycja plakietki, nagłówka, odstęp do kart,
   długość sekcji) wychodzi 1:1 z „Dlaczego my". Sama grafika (plik 4:3) jest
   pozycjonowana ABSOLUTNIE i większa niż kadr — wystaje symetrycznie górą/dołem
   w pustą przestrzeń (line-art z wyciętym tłem), nie zmieniając geometrii układu. */
.awf__art--proc { aspect-ratio: 1600 / 773; }
.awf__art--proc img {
  position: absolute; left: 50%; top: 50%;
  width: auto; height: 145%;
  aspect-ratio: 1000 / 750;   /* proporcja PLIKU — nadpisuje 1600/773 z reguły bazowej (tam width:auto dawało zniekształcenie) */
  transform: translate(-50%, -50%);
}
/* Mobile: kolumny stackują się — wystający absolutny obraz nachodziłby na tekst,
   więc wraca do naturalnego przepływu (pełna szerokość, 4:3), jak obraz na o-nas. */
@media (max-width: 920px) {
  .awf__art--proc { aspect-ratio: auto; }
  .awf__art--proc img { position: static; width: 100%; height: auto; transform: none; }
}
/* Opisy kart na proces mają zbliżoną długość (~3–4 linie) i same wypełniają
   kartę; niska rezerwa tylko domyka drobne różnice w zawijaniu między kartami. */
.proc-creed .awf__card-text { min-height: 4.8em; }

.awf__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.5vw, 22px); }
.awf__card {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px;
  padding: clamp(22px, 2vw, 30px);
}
/* Karty statyczne — bez reakcji na hover (jak u Wispr; decyzja właściciela 07-02) */
/* Ikona u góry + DUŻY odstęp do tytułu (sygnatura układu Wispr) */
.awf__icon { color: var(--accent); margin-bottom: clamp(30px, 4.5vw, 64px); }
.awf__icon svg { width: 30px; height: 30px; display: block; }
/* Skala kart ujednolicona ze wszystkimi bliźniaczymi sekcjami (.aiw .perk, .sg-mk-take__body) */
.awf__card-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: -.01em; color: var(--text-on-dark); margin: 0 0 12px; }
.awf__card-text { font-family: var(--font-text); color: var(--muted-on-dark); font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.6; margin: 0; }

/* CTA pod rzędem kart — wyśrodkowane (reużyty styl .novo-cta, jasny na czerni) */
.awf__cta { display: inline-flex; margin: clamp(36px, 4vw, 54px) auto 0; color: var(--text-on-dark); }

@media (max-width: 920px) {
  .awf__top { grid-template-columns: 1fr; }
  .awf__art { max-width: 440px; }
  .awf__grid { grid-template-columns: 1fr; }
}

/* Formularz */
.form-wrap { display: grid; grid-template-columns: 0.94fr 1.06fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.form-aside h2 { font-size: var(--fs-h2-sm); margin-bottom: 20px; }
/* zwiększone odstępy — treść przejęła miejsce po usuniętym bloku „Wolisz bezpośrednio",
   by lewa kolumna zachowała tę samą wysokość co wcześniej */
.form-aside p { color: var(--text-muted); margin-bottom: 34px; line-height: 1.7; }
/* eyebrow to też <p> — nadpisz dziedziczony margines reguły `.form-aside p`, by gap pigułka→nagłówek był spójny */
.form-aside .eyebrow { margin-bottom: var(--eyebrow-gap); }
.form-aside ul { display: grid; gap: 30px; }
.form-aside li { padding-left: 30px; position: relative; line-height: 1.75; }
.form-aside li::before { content: "✦"; position: absolute; left: 0; color: var(--accent); }
.form { background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px); box-shadow: 0 20px 50px rgba(20,20,30,.06); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-light);
  font-family: inherit; font-size: .98rem; color: var(--text); background: var(--bg-light); transition: border .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: #fff; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 0 4px rgba(2,78,70,.18); }
.field textarea { resize: vertical; min-height: 110px; }
/* Telefon — prefiks kraju „+48" pojawia się dopiero, gdy w polu jest numer (puste pole bez prefiksu) */
.tel { position: relative; }
.tel__cc {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-family: inherit; font-size: .98rem; font-weight: 600; color: var(--accent);
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .2s var(--ease);
}
.tel.has-cc .tel__cc { opacity: 1; }
.tel.has-cc input { padding-left: 52px; }
/* Autouzupełnianie Chrome maluje pola swoim błękitem (warstwa user-agent, !important) —
   nadpisujemy trikiem box-shadow inset (samego background przeglądarka nie odda) na paletę marki. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--bg-light) inset;
  box-shadow: 0 0 0 100px var(--bg-light) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}
.field input:-webkit-autofill:focus, .field textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #fff inset;
  box-shadow: 0 0 0 100px #fff inset;
}
.field.error input, .field.error select, .field.error textarea { border-color: #e5484d; background: #fff5f5; }
.field__err { color: #e5484d; font-size: .82rem; display: block; max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transition: max-height .3s var(--ease), opacity .25s var(--ease), margin-top .3s var(--ease); }
.field.error .field__err { max-height: 2.5em; opacity: 1; margin-top: 6px; }
/* Pole poprawnie wypełnione → potwierdzenie na zielono (akcent §5, tylko obwódka + delikatny pierścień) */
.field.valid input, .field.valid select, .field.valid textarea { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(3,79,70,.12); }
.field.valid .msel__trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(3,79,70,.12); }
/* Autofill + stan pola (valid/error): .field.valid/.error nadpisuje box-shadow autofilla przy
   RÓWNEJ specyficzności (późniejsza reguła wygrywa) → wraca tło z Chrome. Te reguły są BARDZIEJ
   szczegółowe (dodatkowa klasa stanu), więc wygrywają — i łączą kremowe wypełnienie z pierścieniem stanu. */
.field.valid input:-webkit-autofill,
.field.valid input:-webkit-autofill:hover,
.field.valid input:-webkit-autofill:focus,
.field.valid select:-webkit-autofill,
.field.valid textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 3px rgba(3,79,70,.12), 0 0 0 100px var(--bg-light) inset;
  box-shadow: 0 0 0 3px rgba(3,79,70,.12), 0 0 0 100px var(--bg-light) inset;
}
.field.error input:-webkit-autofill,
.field.error input:-webkit-autofill:hover,
.field.error input:-webkit-autofill:focus,
.field.error select:-webkit-autofill,
.field.error textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #fff5f5 inset;
  box-shadow: 0 0 0 100px #fff5f5 inset;
}

/* Rozwijana lista z checkboxami (multiselect) — wygląd 1:1 z polami formularza */
/* min-width:0 — długa etykieta z `nowrap` nie może rozpychać kolumny grida (poziomy overflow strony) */
.form-wrap > *, .form-col, .form { min-width: 0; }
.msel { position: relative; }
.msel__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-light);
  font-family: inherit; font-size: .98rem; color: var(--text); background: var(--bg-light);
  text-align: left; cursor: pointer; transition: border .25s, box-shadow .25s, background .25s;
}
.msel__trigger:hover { border-color: var(--accent); }
.msel__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 0 4px rgba(2,78,70,.18); }
.msel.is-open .msel__trigger { border-color: var(--accent); background: #fff; }
.msel__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel__value.is-empty { color: var(--text-muted); }
.msel__chev { flex: none; color: var(--accent); transition: transform .25s var(--ease); font-size: .85em; }
.msel.is-open .msel__chev { transform: rotate(180deg); }

.msel__panel {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--line-light); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(20,20,30,.12); padding: 6px; max-height: 280px; overflow-y: auto;
}
.msel__panel[hidden] { display: none; }
.msel .msel__opt {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 8px;
  font-size: .95rem; cursor: pointer; transition: background .18s var(--ease);
}
.msel__opt:hover { background: color-mix(in srgb, var(--accent) 8%, #fff); }
.msel__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.msel__box {
  flex: none; width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid var(--line-light);
  background: var(--bg-light); display: grid; place-items: center; transition: border-color .18s, background .18s;
}
.msel__box::after {
  content: ""; width: 11px; height: 11px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
  background: #fff; transform: scale(0); transition: transform .18s var(--ease);
}
.msel__opt input:checked + .msel__box { background: var(--accent); border-color: var(--accent); }
.msel__opt input:checked + .msel__box::after { transform: scale(1); }
.msel__opt input:focus-visible + .msel__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.msel__txt { flex: 1 1 auto; }
.field.error .msel__trigger { border-color: #e5484d; background: #fff5f5; }

/* Zgoda na politykę prywatności — checkbox w wzorze .msel__box */
.field--consent { margin-bottom: 18px; }
.field--consent .consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0; font-weight: 400; cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__box {
  flex: none; margin-top: 1px; width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid var(--line-light);
  background: var(--bg-light); display: grid; place-items: center; transition: border-color .18s, background .18s;
}
.consent__box::after {
  content: ""; width: 11px; height: 11px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
  background: #fff; transform: scale(0); transition: transform .18s var(--ease);
}
.consent input:checked + .consent__box { background: var(--accent); border-color: var(--accent); }
.consent input:checked + .consent__box::after { transform: scale(1); }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent__txt { font-size: .88rem; font-weight: 400; line-height: 1.45; color: var(--text); }
.consent__txt a { color: var(--accent); text-decoration: underline; }
.field.error .consent__box { border-color: #e5484d; background: #fff5f5; }

/* reCAPTCHA v2 CHECKBOX w modalu — okno „Nie jestem robotem" otwiera się po kliknięciu „Wyślij".
   #recaptcha-holder jest teraz WEWNĄTRZ modala (checkbox widoczny), więc nic nie ukrywamy. */
.rc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rc-modal[hidden] { display: none; }
.rc-modal__backdrop { position: absolute; inset: 0; background: rgba(26,27,27,.55); opacity: 0; transition: opacity .25s var(--ease); }
.rc-modal.is-open .rc-modal__backdrop { opacity: 1; }
.rc-modal__box {
  position: relative; z-index: 1; width: 100%; max-width: 400px; text-align: center;
  background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 40px); box-shadow: 0 30px 80px rgba(20,20,30,.28);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.rc-modal.is-open .rc-modal__box { opacity: 1; transform: none; }
.rc-modal__close {
  position: absolute; top: 8px; right: 12px; width: 34px; height: 34px;
  background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--text); opacity: .5; transition: opacity .2s;
}
.rc-modal__close:hover { opacity: 1; }
.rc-modal__eyebrow { justify-content: center; margin-bottom: 12px; }
.rc-modal__box h3 { margin: 0 0 8px; }
.rc-modal__lead { font-size: .92rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 22px; }
.rc-modal__widget { display: flex; justify-content: center; }
@media (max-width: 360px) {
  .rc-modal__widget { transform: scale(.85); transform-origin: center top; }
}

.form .btn { width: 100%; margin-top: 6px; }
.form__note { font-size: .82rem; color: var(--text-muted); text-align: center; margin-top: 14px; }
/* Link do polityki — zieleń akcentu + podkreślenie, żeby bylo widać, ze klikalny (jak .consent__txt a) */
.form__note a { color: var(--accent); text-decoration: underline; }
.form__note a:hover { text-decoration: none; }
.form__note--error { color: #e5484d; }
/* Ekran dziękujemy */
.thanks { display: none; text-align: center; padding: 30px 10px; }
.thanks.show { display: block; animation: panelIn .5s var(--ease); }
.thanks .check { width: 80px; height: 80px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; margin: 0 auto 22px; color: #fff; font-size: 2.2rem; animation: pop .5s var(--ease); }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.15);} 100% { transform: scale(1);} }
.thanks h3 { font-size: 1.9rem; margin-bottom: 10px; }
.thanks p { color: var(--text-muted); max-width: 40ch; margin: 0 auto 22px; }
/* Press: przycisk formularza reaguje na dotknięcie (detal — responsywność dotyku) */
.form .btn:active { transform: scale(0.97); }
/* Bezpośrednie dane kontaktowe pod listą w asajdzie (konsultacja.html) */
.contact-direct { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-light); display: grid; gap: 10px; }
.contact-direct__lead { font-weight: 600; color: var(--text); margin: 0 0 4px; }
.contact-direct__row { display: flex; align-items: baseline; gap: 12px; }
.contact-direct__k { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; color: var(--text-muted); min-width: 62px; }
.contact-direct__v { font-weight: 600; color: var(--text); }

/* Wielki cytat */


/* „Sygnały, że potrzebujesz AI" (oferta-ai §3) — używa stosu kart .sg-mk-take
   (Wispr sticky-stack); tu tylko CTA-pasek pod nagłówkiem w lepkiej kolumnie. */
.foreyou__cta { margin-top: 28px; display: flex; align-items: center; gap: 16px 18px; flex-wrap: wrap; }
.foreyou__cta > span { font-family: var(--font-display); font-size: 1.05rem; }
.section--dark .foreyou__cta > span { color: var(--muted-on-dark); }

/* Page hero (podstrony) */
.page-hero { padding-top: calc(var(--nav-h) + clamp(60px, 9vw, 120px)); padding-bottom: clamp(50px, 7vw, 90px); }
.page-hero h1 { font-size: var(--fs-h1); line-height: 1.0; margin-top: var(--eyebrow-gap); }
.page-hero .word { display: inline-block; opacity: 0; transform: translateY(40px); animation: wordIn .8s var(--ease) forwards; }
@keyframes wordIn { to { opacity: 1; transform: none; } }
/* Lead w hero = token .sg-lead (clamp), ale NIE dotykaj eyebrow — wcześniej `.page-hero p`
   nadpisywał `.eyebrow` (rozdmuchany rozmiar 1.2rem + barwa muted zamiast akcentu). */
.page-hero p:not(.eyebrow) { font-size: var(--fs-lead); color: var(--muted-on-dark); max-width: 52ch; margin-top: 24px; opacity: 0; animation: fadeUp 1s var(--ease) .5s forwards; }
/* eyebrow w hero zachowuje swój token (.eyebrow: 0.78rem, akcent) + intro fade jak na landingu */
.page-hero .eyebrow { opacity: 0; animation: fadeUp 1s var(--ease) .35s forwards; }

/* ---------- Hero „Kontakt" (konsultacja.html): tekst LEWA + ilustracja rozmowy PRAWA.
   Grafika przekolorowana do palety (tło ilustracji = --black) → siedzi na czerni hero
   bez widocznej ramki. Dekoracyjna (aria-hidden), wjazd fade jak lead. ---------- */
.contact-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: clamp(32px, 5vw, 72px); }
.contact-hero__copy { min-width: 0; margin-bottom: 30px; }
/* Sama grafika podniesiona o 30px (grid ma align-items:end → margines dolny ją unosi). */
.contact-hero__art { margin: 0 0 30px; opacity: 0; animation: fadeUp 1s var(--ease) .6s forwards; }
.contact-hero__art img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .contact-hero__grid { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 36px); }
  .contact-hero__art { max-width: 440px; }
}

/* =================================================================
   HERO „Nasz proces" (proces.html) — pełnoekranowy, ciemny, spokojny.
   Jedna szeroka fala procesu z 4 kamieniami milowymi. DESKTOP-ONLY.
   Animacja niezależna od scrolla: rysowanie toru + powolny impuls
   światła w pętli (assets/main.js → initProcWave).
   ================================================================= */
.proc-hero {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + clamp(32px, 4vw, 60px)) 0 0;
  background: var(--bg-light);
}
/* Jasny motyw — winieta zbędna na kremie (płaskie tło jak reszta strony) */
.proc-hero::after { display: none; }

/* Lewy blok: nagłówek + CTA — wyrównany do lewej krawędzi siatki (.wrap zostaje
   wyśrodkowanym kontenerem 1200px; treść ograniczamy szerokością dzieci) */
.proc-hero__lead { position: relative; z-index: 2; max-width: none; }
.proc-hero__lead h1 {
  /* Brak pigułki w tym hero — 124px to STRUKTURALNY odstęp od góry pełnoekranowego
     hero (pod navbarem), nie gap eyebrow→nagłówek. NIE podpinać pod --eyebrow-gap. */
  /* 1000px, nie 960 — przy suficie clampa (~91.6px na Full HD) druga linia
     „Potem wartościowe zapytania." potrzebuje 969px; 960 łamało ją na 3 wiersze. */
  max-width: 1000px; margin-top: 124px;
  font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.03em;
  color: var(--text);
}
.proc-hero__lead h1 .accent { color: var(--brand); }   /* firmowa zieleń #034F46 — decyzja właściciela mimo niższego kontrastu na ciemnym tle */


/* Płaski zielony CTA jak na landingu (.sg-btn--primary) — bez cienia/lift/brightness,
   goła strzałka, hover = scale(.98) + przesuw strzałki 5px (z reguł bazowych .btn). */


/* Mapa SVG — wpisana w sekcję, zakotwiczona do dołu (xMidYMax). Lekko podniesiona,
   by kompozycja siadła bliżej nagłówka/CTA (hero spójny, nie rozjechany na dwie strefy). */
/* transform-origin: 50% 50% — skala 1.15 zakotwiczona w ŚRODKU (nie w prawej krawędzi).
   Wraz z preserveAspectRatio="xMid…" (centrowanie poziome) daje marginesy symetryczne na KAŻDEJ
   szerokości BEZ magicznego translateX: odstęp 01 od lewej = odstęp 04 od prawej. Zmierzone
   diff ≤8 px na całym zakresie 390–3440 px (telefon → ultrawide, wszystkie proporcje). */
.proc-hero__map { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; transform-origin: 50% 50%; transform: translateY(calc(-4.5% + 40px)) scale(1.15); }

/* Tor — trzy warstwy. Stonowane: cieńsza linia + miększa poświata, by nie konkurować z nagłówkiem */
/* Warstwa poświaty wyłączona: po zdjęciu feGaussianBlur (dla płynności na Safari/Mac)
   szeroki stroke czytał się jak ostra obramówka wokół linii — niechciana (decyzja właściciela). */
.proc-hero__map .pm-glow { display: none; }
.proc-hero__map .pm-base { fill: none; stroke: var(--brand); stroke-width: 14; stroke-opacity: 1; stroke-linecap: round; }
.proc-hero__map .pm-hi   { fill: none; stroke: rgba(143,224,204,.5); stroke-width: .7; stroke-linecap: round; }

/* Znaczniki kamieni — drobne, przygaszone; rozjaśniają się (--hl 0→1), gdy mija je impuls (sterowane JS) */
.proc-hero__map .pm-ms { --hl: 0; opacity: 0; transition: opacity .65s ease; }   /* startują ukryte → JS odsłania, gdy rysujący się tor je mija */

.proc-hero__map .pm-ring { fill: none; stroke: rgba(26,27,27,.32); stroke-width: 2.5; r: 12; stroke-opacity: calc(.4 + .6 * var(--hl)); transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + .12 * var(--hl))); }
.proc-hero__map .pm-dot  { fill: var(--bg-light); r: 5; fill-opacity: calc(.72 + .28 * var(--hl)); }
.proc-hero__map .pm-conn { stroke: rgba(26,27,27,.28); stroke-width: 2; stroke-opacity: calc(.5 + .5 * var(--hl)); }
.proc-hero__map .pm-mglow { fill: url(#pmGlow); r: 22; opacity: 0; }   /* glow przez gradient (nie filtr) — JS podnosi opacity przy przejściu impulsu */

/* Impuls światła — mniejszy i precyzyjny, znacznik postępu (NIE dodatkowy krok); JS ustawia cx/cy wzdłuż toru */
.proc-hero__map .pm-comet { fill: var(--bg-light); r: 5; opacity: 0; }   /* kremowa, by była widoczna na zielonym pasie */
.proc-hero__map .pm-comet-halo { fill: url(#pmGlow); r: 13; opacity: 0; }

/* Typografia kamieni — bazowo lekko przygaszona, rozjaśnia się przy muśnięciu impulsu (--hl) */
/* Bez animowanego drop-shadow — filtr przeliczany w każdej klatce (4× tekst, var(--hl)) dławił
   Safari/Mac; jaśnienie aktywnej cyfry niesie samo fill-opacity. */
.proc-hero__map .pm-num   { fill: var(--text); fill-opacity: calc(.82 + .18 * var(--hl)); font-family: var(--font-display); font-weight: 500; font-size: 56px; letter-spacing: .01em; }
.proc-hero__map .pm-title { fill: var(--text); fill-opacity: calc(.86 + .14 * var(--hl)); font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.proc-hero__map .pm-cap   { fill: var(--text-muted); fill-opacity: calc(.78 + .22 * var(--hl)); font-family: var(--font-text); font-size: 14px; }

/* Szanuj „mniej ruchu": pokaż tor narysowany, bez impulsu (JS też to respektuje) */
@media (prefers-reduced-motion: reduce) {
  .proc-hero__map .pm-glow, .proc-hero__map .pm-base, .proc-hero__map .pm-hi { stroke-dashoffset: 0 !important; }
  .proc-hero__map .pm-ms { opacity: 1 !important; }
}

/* ---------- Hover-podgląd kamieni: najazd na kamień 01–04 → pływająca miniatura
   okienka z dołu (1:1 klon .phase__media), klik → scroll do danego kroku.
   Logika: assets/main.js → initProcHeroPeek. DESKTOP-ONLY. ---------- */
/* Hit-area wstrzykiwana przez JS — przezroczysta, ŁAPIE hover/klik mimo
   pointer-events:none na całej mapie (pointer-events:auto na potomku znosi blokadę rodzica) */
.proc-hero__map .pm-hit { fill: transparent; pointer-events: auto; cursor: pointer; }

/* Podświetlenie kamienia na hover — STAŁE wartości (nie var(--hl)) + wyższa specyficzność
   (.pm-ms--peek …) niż reguły bazowe, więc pętla komety ustawiająca --hl ich NIE nadpisuje. */
.proc-hero__map .pm-ms--peek .pm-ring  { stroke: var(--brand); stroke-opacity: 1; transform: scale(1.22); }
.proc-hero__map .pm-ms--peek .pm-dot   { fill: var(--brand); fill-opacity: 1; }
.proc-hero__map .pm-ms--peek .pm-conn  { stroke-opacity: 1; }
.proc-hero__map .pm-ms--peek .pm-num,
.proc-hero__map .pm-ms--peek .pm-title { fill-opacity: 1; }
.proc-hero__map .pm-ms--peek .pm-cap   { fill-opacity: 1; }

/* Pływająca miniatura okienka (dymek przy kursorze) — nigdy nie blokuje wskaźnika */
.proc-peek {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  border-radius: 16px; overflow: hidden; background: var(--bg-light);
  box-shadow: 0 26px 64px -20px rgba(26,27,27,.50), 0 0 0 1px rgba(26,27,27,.08);
  /* Wejście „rozkwit": dymek startuje mniejszy, uniesiony i lekko ROZMYTY, po czym
     miękko dochodzi do ostrego 1:1 (focus-in). Rozmycie + dłuższe czasy z wyhamowaniem
     (--ease/--ease-out) gaszą gwałtowny „pop"; transform finiszuje po opacity →
     spokojne „osiadanie", nie szarpnięcie. */
  opacity: 0; transform: translateY(16px) scale(.9); transform-origin: center top;
  filter: blur(8px);
  transition: opacity .5s var(--ease-out), transform .66s var(--ease), filter .5s var(--ease-out);
  will-change: left, top, opacity, transform, filter;
}
.proc-peek.is-on { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.proc-peek__scaler { transform-origin: top left; }
.proc-peek__clone { margin: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .proc-peek { transition: opacity .12s linear; transform: none; filter: none; }
  .proc-peek.is-on { transform: none; filter: none; }
}

/* ---------- Mobile-only: „DROGA PRZEZ OKNO" (.proc-okno) — line-artowe okno 2×2
   (kwatery = kroki, czytane jak piętra: dół 01–02, góra 03–04), przez które serpentyną
   wspina się zielona ścieżka procesu z desktopu: wejście z lewej, nawrót przy prawej
   ramie, wyjście strzałką górą. Okno = produkt odbiorcy (stolarka otworowa), rama
   wypełnia całą szerokość kadru — stąd zero pustki po bokach. Ukryty na desktopie. */
.proc-okno { display: none; }

/* ---------- Mobile/tablet (≤860px) — chowamy szeroką mapę desktopową, pokazujemy stromy
   tor POD nagłówkiem, w normalnym przepływie. Hero KOMPAKTOWE (bez 100vh): nagłówek
   u góry, linia zaraz pod nim, sekcja kończy się za etykietami — zero martwej
   przestrzeni (decyzja właściciela: wyciąć pustkę, nie rozpychać na cały ekran). ---------- */
@media (max-width: 860px) {
  /* padding-bottom 72px, nie mniej: czapka następnej czarnej sekcji (.sg-cap) nachodzi
     ~36px na hero — przy 34px czerń podchodziła na 4px pod podpis kamienia 01. */
  .proc-hero { min-height: 0; padding-bottom: 72px; }
  .proc-hero__map { display: none; }
  .proc-hero__lead { text-align: center; }
  .proc-hero__lead h1 {
    max-width: none;
    /* DOKŁADNIE 2 wiersze (łamanie po <br>) — decyzja usera 07-04. Fizyka: „Potem
       wartościowe zapytania." = 10.58× rozmiar fontu (EB Garamond 400, zmierzone),
       szerokość .wrap = 100vw−32px → font ≤ 9.45vw−3px; 9.2vw daje ~2.5% zapasu.
       UWAGA: to jest MNIEJ niż minima H2 (38.4px) — user świadomie zostawił „na razie"
       (cofnięta próba skalowania H2 strony w dół, 07-04). */
    font-size: clamp(1.65rem, 9.2vw - 3px, 3.6rem); line-height: 1.1;
    /* bazowe 124px (strukturalny odstęp desktopu) robiło pustą górę na telefonie */
    margin-top: clamp(10px, 3vh, 28px);
  }

  /* Serpentyna w przepływie pod nagłówkiem — skaluje się z .wrap (viewBox 343 = szerokość
     wrap przy 375px, więc na typowym telefonie rysuje się 1:1). Ograniczenie 30rem,
     by na tablecie serpentyna nie urosła do absurdu. */
  .proc-okno {
    display: block; position: relative; z-index: 1;
    width: 100%; max-width: 30rem; height: auto;
    /* margin-top zwiększany etapami (decyzja usera 07-04: „linia trochę niżej", 3×) — całość opada od nagłówka */
    margin: clamp(76px, 16vw, 108px) auto 0;
    pointer-events: none; overflow: visible;
  }

  /* Ścieżka procesu — rysuje się po wejściu (dasharray ~ długość toru; patrz komentarz
     przy weryfikacji: getTotalLength ≈ 900). Grot #poTip zdefiniowany we WŁASNYM defs
     (referencje do defs ukrytej mapy desktopowej bywają zawodne — wzór o-nas). */
  .proc-okno .po-line {
    fill: none; stroke: var(--brand); stroke-width: 3.97; stroke-linecap: round;  /* 2× +15% (3 → 3.45 → 3.97), decyzja usera 07-04 */
    /* dasharray z zapasem > długości ścieżki (wydłużone końce wychodzą poza ekran) — patrz weryf. */
    stroke-dasharray: 1300; stroke-dashoffset: 1300;
    animation: poDraw 2s var(--ease-out) .2s forwards;
  }

  /* Kamienie — słownik znaczników z desktopu (pierścień/kropka/kreska); kwatera daje
     tekstowi ~130px szerokości, foreignObject zawija tytuł i podpis (tekst ostry,
     skaluje się razem z oknem jak jedna kompozycja). */
  /* Odsłanianie kolejno 01→04. UWAGA: NIE :nth-of-type — SVG ma inne <g> (m.in. okno),
     więc numeracja typu przesuwa się i 04 wypadał z sekwencji (startował z delay 0).
     Klasy indeksowe .po-ms--N są jednoznaczne i odporne na kolejne <g>. */
  .proc-okno .po-ms { opacity: 0; animation: poIn .5s var(--ease-out) forwards; }
  .proc-okno .po-ms--1 { animation-delay: .45s; }
  .proc-okno .po-ms--2 { animation-delay: .85s; }
  .proc-okno .po-ms--3 { animation-delay: 1.45s; }
  .proc-okno .po-ms--4 { animation-delay: 1.85s; }
  .proc-okno .po-ring { fill: var(--bg-light); stroke: rgba(26,27,27,.34); stroke-width: 1.4; }
  .proc-okno .po-dot  { fill: var(--brand); }
  .proc-okno .po-conn { stroke: rgba(26,27,27,.30); stroke-width: 1.1; }

  /* Puls halo w pętli, kolejno 01→04 — odpowiednik desktopowej komety muskającej
     znaczniki; animowana sama opacity małego kółka (tani repaint). */
  .proc-okno .po-halo { fill: var(--brand); opacity: 0; animation: poBeat 5.6s linear infinite; }
  .proc-okno .po-ms--1 .po-halo { animation-delay: 2.4s; }
  .proc-okno .po-ms--2 .po-halo { animation-delay: 3.5s; }
  .proc-okno .po-ms--3 .po-halo { animation-delay: 4.6s; }
  .proc-okno .po-ms--4 .po-halo { animation-delay: 5.7s; }

  /* Typografia kamieni — hierarchia jak na desktopie: duży numer → tytuł → podpis */
  .proc-okno .po-lab { text-align: center; }
  .proc-okno .po-num, .proc-okno .po-title, .proc-okno .po-cap { display: block; }
  .proc-okno .po-num {
    font-family: var(--font-display); font-weight: 500;
    font-size: 27px; line-height: 1; color: var(--text); letter-spacing: .01em;
  }
  .proc-okno .po-title {
    margin-top: 3px; font-family: var(--font-display);
    font-weight: 700; font-size: 15px; line-height: 1.15; color: var(--text);
  }
  .proc-okno .po-cap {
    margin-top: 3px; font-family: var(--font-text);
    font-size: 11.5px; line-height: 1.3; color: var(--text-muted);
  }

  /* Kamień 04 = cel — akcent zielenią tylko na pierścieniu; numer w czerni jak reszta
     (decyzja usera 07-04: „04 taki sam jak reszta numerków"). */
  .proc-okno .po-goal .po-ring { stroke: var(--brand); }
}

@keyframes poDraw { to { stroke-dashoffset: 0; } }
@keyframes poIn   { to { opacity: 1; } }
@keyframes poBeat {
  0%, 14%, 100% { opacity: 0; }
  6%            { opacity: .14; }
}

/* Szanuj „mniej ruchu": ścieżka narysowana, kamienie widoczne, bez pulsu */
@media (prefers-reduced-motion: reduce) {
  .proc-okno .po-line { animation: none; stroke-dashoffset: 0; }
  .proc-okno .po-ms { animation: none; opacity: 1; }
  .proc-okno .po-halo { animation: none; }
}

/* =================================================================
   HERO „O nas" (o-nas.html) — baza page-hero (CZARNE tło) + SYGNATURA line-art.
   DWIE PODPISANE kompetencje („Znajomość branży" + „Technologia") zbiegają się
   w JEDEN miętowy tor = „Climbly, partner technologiczny". To wprost przewaga
   zespołu z §3 (wiedza branżowa + nowoczesna technologia) — nie losowe kreski.
   Idiom z proc-hero, ale na czerni → MIĘTA zamiast zieleni (§8). Rysowanie
   linii: CSS (@keyframes ahDraw). Powolny impuls światła: main.js → initAboutHero.
   ================================================================= */
.about-hero { position: relative; overflow: hidden; min-height: 100vh; }   /* równa wysokość z hero landingu (.sg-hero) */
/* H1 = największy nagłówek strony (reguła usera). Podniesione MINIMUM clampa
   (2.6→2.85rem) powiększa H1 tylko na wąskich ekranach; desktop dalej prowadzi 7vw. */
.about-hero h1 { font-size: var(--fs-h1); }
.about-hero__lead { position: relative; z-index: 2; text-align: center; }
.about-hero__lead p:not(.eyebrow) { max-width: 56ch; margin-inline: auto; }
/* SVG full-bleed, zakotwiczone do DOŁU (xMidYMax) — kompozycja siada pod
   nagłówkiem (tekst u góry), nie nachodzi na niego. */
.about-hero__map { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

@keyframes ahDraw { to { stroke-dashoffset: 0; } }
@keyframes ahFade { to { opacity: 1; } }

/* Sekwencja zapłonu węzła „dwa → jedno": światło dosuwa się liniami do środka,
   węzeł rozbłyska (pop rdzenia + fala pierścienia + poświata), potem rusza tor. */
@keyframes ahFlowIn {                                  /* bieżąca iskra wzdłuż linii kompetencji do węzła */
  0%   { offset-distance: 0%;   opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ahPop {                                     /* rdzeń węzła „strzela" z lekkim przeskoczeniem */
  0%   { opacity: 0; transform: scale(0); }
  55%  { opacity: 1; transform: scale(1.28); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ahBurst {                                   /* jednorazowa fala uderzeniowa pierścienia */
  0%   { opacity: 0;   transform: scale(.25); }
  16%  { opacity: .55; }
  100% { opacity: 0;   transform: scale(2.7); }
}
@keyframes ahGlowIn { to { opacity: .5; } }            /* poświata rozkwita po zapłonie */
@keyframes ahRingIn {                                  /* stały pierścień: pop + osiada na .55 */
  0%   { opacity: 0;   transform: scale(0); }
  55%  { opacity: .55; transform: scale(1.28); }
  100% { opacity: .55; transform: scale(1); }
}

/* Dwie linie wejściowe (kompetencje) + scalony tor rysują się od startu.
   dasharray 2200 > długości każdej ścieżki, więc kreskowanie nigdy nie przycina
   linii (pełna mimo animacji offsetu). */
.about-hero__map .ah-feed,
.about-hero__map .ah-main,
.about-hero__map .ah-main-glow {
  fill: none; stroke-linecap: round;
  stroke-dasharray: 2200; stroke-dashoffset: 2200;
  animation: ahDraw 1.5s var(--ease) forwards;
}
/* HERO NA KREMIE (inwersja): wejścia = przygaszona czerń, scalony tor = ZIELEŃ
   marki (na kremie zieleń, nie mięta — §8). Tekst hero też ciemny (niżej). */
.about-hero__map .ah-feed { stroke: rgba(26, 27, 27, .3); stroke-width: 1.8; }
.about-hero__map .ah-main { stroke: var(--brand); stroke-width: 4.2; }
/* Szeroka, przygaszona poświata pod scalonym torem — zieleń, bez filtra blur. */
.about-hero__map .ah-main-glow { stroke: var(--brand); stroke-width: 13; opacity: .12; }

/* Iskry zasilające — bieg światła wzdłuż każdej linii kompetencji do węzła.
   offset-path = ta sama ścieżka co .ah-feed (ustawiana inline), jeden przejazd. */
.about-hero__map .ah-bead {
  fill: var(--brand);
  offset-rotate: 0deg; opacity: 0;
  animation: ahFlowIn 1.4s var(--ease) forwards;
}

/* Węzeł scalenia — zapala się dopiero gdy iskry dobiegną (delay inline ~1.7s).
   transform-box/-origin: skala liczona względem własnego środka kółka. */
.about-hero__map .ah-knot-glow,
.about-hero__map .ah-knot-ring,
.about-hero__map .ah-knot,
.about-hero__map .ah-knot-burst { transform-box: fill-box; transform-origin: center; }
.about-hero__map .ah-knot-glow  { fill: url(#ahGlow); opacity: 0; animation: ahGlowIn .9s var(--ease) forwards; }
.about-hero__map .ah-knot-burst { fill: none; stroke: var(--brand); stroke-width: 2; opacity: 0; animation: ahBurst 1.1s var(--ease) forwards; }
.about-hero__map .ah-knot-ring  { fill: none; stroke: var(--brand); stroke-width: 2; opacity: 0; animation: ahRingIn .7s var(--ease) forwards; }
.about-hero__map .ah-knot       { fill: var(--brand); opacity: 0; animation: ahPop .7s var(--ease) forwards; }

/* Podpisy kompetencji i węzła — wjeżdżają opacity po dorysowaniu swojej linii.
   Na kremie: tytuł ciemny, podtytuł przygaszony, węzeł = zieleń marki. */
.about-hero__map .ah-cap { opacity: 0; animation: ahFade .9s var(--ease) forwards; }
.about-hero__map .ah-cap-title { fill: var(--text); font-family: var(--font-text); font-weight: 600; font-size: 21px; letter-spacing: .005em; }
.about-hero__map .ah-cap-sub   { fill: var(--text-muted); font-family: var(--font-text); font-size: 14.5px; }
.about-hero__map .ah-node-title { fill: var(--brand); font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.01em; }

/* Impuls światła wzdłuż scalonego toru — kremowy rdzeń (widoczny na zielonym torze) + zielone halo */
.about-hero__map .ah-comet      { fill: var(--bg-light); opacity: 0; }
.about-hero__map .ah-comet-halo { fill: url(#ahGlow); opacity: 0; }

/* PĘTLA NARRACJI (sterowana z JS — initAboutHero): iskry karmiące, pierścień
   zapłonu i ogon smugi. Tu tylko kolory/stan spoczynku; ruch liczy rAF. */
.about-hero__map .ah-feed-spark { fill: var(--brand); opacity: 0; }
.about-hero__map .ah-emit-ring  { fill: none; stroke: var(--brand); stroke-width: 2; opacity: 0; }

/* Tekst hero na kremie: lead ciemny-przygaszony (nadpisuje .page-hero p domyślnie kremowy) */
.about-hero p:not(.eyebrow) { color: var(--text-muted); }

/* Mniej ruchu: pokaż tor narysowany + podpisy, bez impulsu (JS też pomija kometę) */
@media (prefers-reduced-motion: reduce) {
  .about-hero__map .ah-feed, .about-hero__map .ah-main, .about-hero__map .ah-main-glow { animation: none; stroke-dashoffset: 0; }
  .about-hero__map .ah-cap { animation: none; opacity: 1; }
  /* Węzeł od razu w stanie spoczynku; iskry i fala uderzeniowa wyłączone. */
  .about-hero__map .ah-knot      { animation: none; opacity: 1; }
  .about-hero__map .ah-knot-ring { animation: none; opacity: .55; }
  .about-hero__map .ah-knot-glow { animation: none; opacity: .5; }
  .about-hero__map .ah-bead, .about-hero__map .ah-knot-burst { display: none; }
  /* Pętla narracji wyłączona — zostaje statyczna, dorysowana sygnatura. */
  .about-hero__map .ah-feed-spark, .about-hero__map .ah-emit-ring { display: none; }
}

/* MOBILE (≤760px): pełnoekranowy line-art robi się zbyt drobny → zamiast niego
   MINI-SYGNATURA (.about-hero__map--m): ten sam idiom w kompaktowym viewBoxie
   390×250, w PRZEPŁYWIE pod leadem (nie absolute full-bleed). Typografia mapy
   zmniejszona do skali telefonu. Desktop widzi tylko dużą mapę, mobile tylko mini. */
.about-hero__map--m { display: none; position: static; inset: auto; width: 100%; height: auto; margin-top: clamp(2rem, 9vw, 3.25rem); }
.about-hero__map--m .ah-cap-title  { font-size: 16px; }
.about-hero__map--m .ah-cap-sub    { font-size: 12.5px; }
.about-hero__map--m .ah-node-title { font-size: 19px; }
.about-hero__map--m .ah-main       { stroke-width: 3.4; }
.about-hero__map--m .ah-main-glow  { stroke-width: 10; }

/* Lead o-nas ma dwa warianty tekstu (pełny/skrócony) — jeden zawsze widoczny. */
.about-hero__lead .u-mob { display: none; }

@media (max-width: 760px) {
  .about-hero { min-height: 0; }
  .about-hero__map { display: none; }
  .about-hero__map--m { display: block; }
  .about-hero__lead .u-desk { display: none; }
  .about-hero__lead .u-mob  { display: block; }
}

/* =================================================================
   1b. „NA CZYM TO STOI" (proces.html) — ciemny band POD hero, układ i odstępy
   1:1 z sekcją „Dlaczego my" (.awf, o-nas). Tu tylko stacking: czapka .sg-cap
   niesie czarne tło zaokrąglonym brzegiem NA kremowy hero (styk krem→czerń),
   a #przeglad.sg-cap zamyka styk czerń→krem od dołu. */
.proc-creed { position: relative; z-index: 1; }

/* Kremowa „czapka" pod hero (#przeglad): dopracowany, intencjonalny styk z czernią.
   Miękki cień nad brzegiem + cienki jaśniejszy rant = brzeg czytelny i premium, nie „doklejony".
   Subtelny, elegancki uchwyt na środku zamiast surowej krawędzi. */
#przeglad.sg-cap { box-shadow: 0 -26px 60px -34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,235,.55); }
#przeglad.sg-cap::before {
  content: ""; position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 99px;
  background: rgba(26,27,27,.12);
}

/* =================================================================
   OFERTA CRM — hero z makietą realizacji (zrzut jako gwiazda strony)
   ================================================================= */


/* Wariant „centrowany showcase" — nagłówek na górze, ogromna makieta pod spodem */


/* Makieta okna przeglądarki — miejsce na zrzut realizacji */


.mockup {
  position: relative; z-index: 1;
  border-radius: 16px; overflow: hidden;
  background: #0c1a18; border: 1px solid rgba(254,255,234,.16);
  box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3);
  transform: perspective(1500px) rotateY(-6deg) rotateX(2deg);
  transition: transform .6s var(--ease);
}
.mockup:hover { transform: perspective(1500px) rotateY(0) rotateX(0); }

/* Wariant szeroki (centrowany showcase) — lekkie pochylenie do przodu */


/* Pływająca plakietka „realizacja dla klienta" */


/* ---------- Lightbox: powiększenie zrzutu po kliknięciu (start wyśrodkowany, pan w lewo/prawo) ---------- */
/* (kursor zoom-in scalony z regułą .mockup__screen img w sekcji makiety) */


/* =================================================================
   RESPONSYWNOŚĆ
   ================================================================= */
@media (max-width: 980px) {
  .nav__links, .nav__cta .btn { display: none; }
  /* po ukryciu środkowej kolumny: logo lewo, burger prawo */
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__burger { display: flex; }
  .tabs, .case, .compare, .flips, .phase, .form-wrap, .foreyou { grid-template-columns: 1fr; }
  .phase--rev .phase__media { order: -1; } /* na mobile obraz zawsze na górze, mimo odwrócenia na desktopie */
  /* REVEAL POZIOMY → PIONOWY na wąskich ekranach. Na desktopie translateX(±52px)
     mieści się w szerokich marginesach; na mobile (margines 16px) wypycha element
     poza prawą krawędź. body{overflow-x:clip} go przycina, ale PRZED odsłonięciem
     element siedzi jako „pasek doklejony do prawej krawędzi", a 36-px nadmiar
     odsłania tła sąsiednich sekcji (zielona/czarna krawędź na proces.html — hero,
     makieta CRM, lejek 04). Zamiana na pionowy reveal (jak data-reveal="up")
     usuwa przesuw w bok u źródła, dla wszystkich podstron. */
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(40px); }
  /* Jedna kolumna: kafel = wysokość treści (nie wymuszony wielki kwadrat) → brak pustki,
     zieleń tylko jako ramka 18px wokół karty; działa dla wszystkich 4 makiet bez przycinania */
  .phase__media { aspect-ratio: auto; }
  .phase__media .mock { height: auto; }
  .mockup, .mockup--wide { transform: none; }
  .mockup:hover, .mockup--wide:hover { transform: none; }
  .bento, .stats, .team, .perks, .testi { grid-template-columns: 1fr 1fr; }


  .steps { grid-template-columns: 1fr; }


  .footer__cols { justify-content: flex-start; gap: clamp(32px, 6vw, 64px); }
  /* Oś czasu do lewej */


}
@media (max-width: 600px) {
  .wrap { width: min(100% - 32px, var(--maxw)); }
  .bento, .stats, .team, .perks, .testi, .form__row, .team-grid { grid-template-columns: 1fr; }


  /* ── MOBILE: układ stopki wg Wispr Flow — 1:1 ze stopką landingu (2026-06-30).
     Grupy linków w SIATCE 2-kolumnowej (Nawigacja | Usługi, Kontakt poniżej),
     pogrubione większe linki, wielki wordmark (zostaje — już jest), social jako
     WYPEŁNIONE kafelki NAD linią prawną, linia prawna zawijana. Treść = prawdziwa
     Climbly. Wspólny CSS → dotyczy WSZYSTKICH podstron. Desktop nietknięty. */
  .footer__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px 28px; align-items: start; }
  /* Kontakt (3. kolumna) na własny, PEŁEN wiersz — długi, niełamliwy e-mail
     nie może wpaść do wąskiego traku 1fr i rozepchać siatki (przez to „Usługi”
     wychodziło poza prawą krawędź ekranu). „Nawigacja | Usługi” w rzędzie, Kontakt pod. */
  .footer__cols .footer__col:nth-child(3) { grid-column: 1 / -1; }
  .footer h4 { margin-bottom: 18px; }
  .footer ul { gap: 9px; }
  .footer__col li,
  .footer__col a { font-size: 1.18rem; font-weight: 700; line-height: 1.3; }
  /* zabezpieczenie: długi e-mail łamie się, zamiast rozpychać kolumnę */
  .footer__col a { overflow-wrap: anywhere; }
  /* placeholdery kontaktu (nie-linki) czytelne, ale nie krzyczą jak linki */
  .footer__col li:not(:has(a)) { font-weight: 600; font-size: 1.02rem; color: var(--muted-on-dark); }

  /* dolny pas: social NAD linią prawną (jak Wispr) */
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 22px; }
  .footer__legal { gap: 14px 18px; font-size: .92rem; }

  /* social = wypełnione kafelki (ciemny ink na kremie, zieleń na hover) */


  /* ── proces.html (TELEFON): spójny rozmiar makiet 01–04.
     Blok ≤980 dawał każdemu kaflowi wysokość TREŚCI (aspect-ratio:auto + mock
     height:auto) → kafle 02/03 były niższe od 01, a lejek 04 (.fn = absolute)
     w ogóle się zwijał. Tu wszystkim czterem nadajemy JEDNĄ wysokość = naturalna
     wysokość kafla 01. calc(29vw + 270px) odwzorowuje tę krzywą w całym zakresie
     telefonów (zmierzone 360–600px: 374/378/390/409/443 vs formuła 374/379/390/409/444).
     Mock znów wypełnia kartę (height:100% znosi height:auto z ≤980), więc lejek 04
     dostaje wreszcie wysokość i wraca na ekran.
     Podłoga 396px: lejek 04 ma stałą treść ~358px na CAŁYM zakresie telefonów
     (jego clamp-y siedzą na minimach ≤600px), więc to on jest realnie najwyższy.
     396 = 358 treści + 36 ramki + 2 zapas → lejek mieści się wszędzie bez
     przycięcia, a gdy krzywa kafla 01 jest wyższa (≥~480px) prowadzi już ona. */
  .phase__media { min-height: max(384px, calc(29vw + 270px)); }
  .phase__media .mock { height: 100%; }
  /* Lejek 04 ma najwięcej treści (4 segmenty + strzałka + zawijany podpis) i sam
     z siebie byłby wyższy od kafla 01. Lekko zaciskamy odstępy/padding na telefonie,
     by zmieścił się w tej samej wysokości co reszta — bez przycinania. */
  .phase__media--funnel .fn { gap: 5px; --fn-pad: 14px; }
}

/* Lead sekcji „Nasza przewaga": dwie wersje treści. Domyślnie (desktop/tablet)
   widoczna pełna, skrócona ukryta; ≤600px (telefon) zamiana — krótszy tekst,
   mniej wierszy pod nagłówkiem. */
.wf-intro--short { display: none; }
@media (max-width: 600px) {
  .wf-intro--full  { display: none; }
  .wf-intro--short { display: block; }
}

/* Wispr-style „Nasza przewaga": kolaps do jednej kolumny, bez przesunięć */
@media (max-width: 980px) {
  .wf { gap: clamp(83px, 12.7vw, 133px); }
  .wf-feat, .wf-feat:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .wf-feat:nth-child(even) .wf-feat__text { order: 0; }
  .wf-feat:nth-child(odd) .wf-feat__media,
  .wf-feat:nth-child(even) .wf-feat__media { transform: none; }
  .wf-feat__lead { max-width: 58ch; font-size: 1.15rem; margin-top: 18px; }
  /* 1 kolumna: pełna szerokość, heading może się zawijać. Rozmiar ZMNIEJSZONY poniżej
     .section-title (min 2.4rem) — desktopowe minimum 2.54rem odwracało hierarchię:
     H3 podsekcji był większy od H2 sekcji (i niemal równy H1 strony). */
  .wf-feat__title { white-space: normal; font-size: clamp(1.95rem, 7vw, 2.4rem); }
  /* 1 kolumna → karty pełnej szerokości; równa wysokość niepotrzebna i szkodliwa
     (treść inaczej się zawija) → naturalna wysokość. */
  .wf-card { height: auto; }
  /* Karta z TAŚMAMI marek = okno marquee, nie treść do dopasowania. Przy height:auto
     kolumny rozwijają się na pełną długość listy (16 pigułek) → karta absurdalnie długa.
     Przywracamy sztywną wysokość okna, żeby taśma przewijała się w kadrze jak na desktopie. */
  .wf-card--tools { height: 340px; }
  /* Karta auto = brak zdefiniowanej wysokości → elastyczny wykres nie ma od czego liczyć
     %-owych słupków. Przywracamy sztywną wysokość, żeby słupki się renderowały. */
  .wf-chart { flex: none; height: 150px; }
}

/* ---------- Respektuj prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  /* Mask reveal: bez maski i bez ukrytego stanu — treść zawsze widoczna */
  .reveal-mask { overflow: visible !important; }
  .reveal-inner { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Znak na dole: statyczny kształt fali, bez pulsowania */
  .footer__mark .cndlA { animation: none !important; }
}

/* =================================================================
   LANDING 2026 — strona główna (układ wg referencji, paleta marki).
   Nawigacja i stopka BEZ ZMIAN. Sekcje: .lp-hero, .lp-intro,
   .lp-pillars, .lp-gains, .lp-cta, .lp-photoband.
   ================================================================= */

/* --- HERO z fotografią --- */


/* --- KIM JESTEŚMY (zieleń) — wyśrodkowany intro + miętowa poświata --- */


/* --- CZTERY FILARY (czerń) — karty: foto + opis (cała karta = link) --- */


/* przycisk „więcej" pod siatką / ikonami */


/* --- CO ZYSKUJESZ (zieleń) — 3 ikony liniowe --- */


/* --- GOTÓW NA ZMIANĘ (czerń) + pełnoekranowy pas zdjęcia --- */


/* CTA na czerni: monochromatyczne przyciski (spójne z .cta nad stopką) */


/* =================================================================
   DEMO „AI ODPOWIADA ZA CIEBIE" (oferta-ai.html)
   Łuk kanałów-placeholderów (bead-on-arc) za treścią + telefon z czatem.
   Łuk = trik rotate(a) → translateY(-promień) → rotate(-a): kafelek ląduje
   pod kątem --a na okręgu o promieniu --cr, ustawiony pionowo.
   ================================================================= */
/* Pierwsza sekcja podstrony = pełnoekranowy „hero" 1:1 z landingiem (.sg-hero min-height:100vh) */
.ai-demo { position: relative; min-height: 100vh; display: flex; align-items: center; }
.ai-demo__inner {
  position: relative; z-index: 2;
  max-width: 1240px; margin-inline: auto;   /* szersza ramka → kolumna tekstu mieści H1 w 2 liniach bez zmiany fontu */
  display: grid; grid-template-columns: 1fr clamp(270px, 28vw, 344px);  /* tekst bierze resztę → nagłówek mieści się w 2 liniach; telefon = swoja naturalna szerokość */
  gap: clamp(24px, 3vw, 40px); align-items: center;  /* węższy gap = więcej miejsca na nagłówek; treść i telefon wyśrodkowane względem siebie */
}

/* --- Łuk kanałów --- */
.ai-demo__arc { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ai-demo__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 78% at 22% 30%, var(--black) 24%, rgba(27,27,26,.74) 46%, rgba(27,27,26,0) 70%),
    linear-gradient(0deg, var(--black) 4%, rgba(27,27,26,0) 26%);
}
.ai-demo__orbit { position: absolute; inset: 0; --cs: 74px; --belt-dur: 90s; }
/* Pas kanałów = FALA jak we wzorcu Wispr. Krzywą offset-path liczy JS z żywych wymiarów
   sekcji (bez skalowania → brak deformacji), szczyt przy telefonie. Ikony są POCHYLONE
   wzdłuż stycznej (offset-rotate:auto). offset-distance rozkłada je równo po długości
   łuku (równe odstępy), a ch-flow przesuwa wzdłuż = przepływ. Pętla bezszwowa (krańce
   krzywej poza ekranem). */
.ch {
  position: absolute; top: 0; left: 0; width: var(--cs); height: var(--cs);
  offset-rotate: auto; offset-anchor: 50% 50%;            /* pochylenie wzdłuż toru */
  animation: ch-flow var(--belt-dur) linear infinite;
  animation-delay: var(--delay, 0s);
}
.ch__face {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--c, #2a2a2a); border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), inset 0 0 0 1.5px rgba(255,255,255,.28), inset 0 2px 7px rgba(255,255,255,.22);
}
.ch__face img { width: 54%; height: 54%; object-fit: contain; pointer-events: none; }
@keyframes ch-flow { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .ch { animation: none; } }

/* --- Kolumna z tekstem --- */
/* Nagłówek H1 (2 wiersze) jest szeroki, a pas ikon zwęża się przy telefonie po prawej.
   Korytarz wolny od ikon ma na desktopie stały środek ~620px od lewej, ale wyśrodkowana
   treść wędruje w prawo wraz ze wzrostem okna → wchodziła na ikonki po prawej. `left`
   przesuwa blok w lewo proporcjonalnie do szerokości okna (calc 865px − 50vw), tak by
   środek nagłówka trzymał się korytarza z lekkim (kilkupikselowym) luzem od ikon —
   celowo NIE za mocno w lewo. clamp() ogranicza: max +24px (żeby na wąskich ekranach
   nie wjechać w telefon), min −160px (dla szerokich). ≤980px nadpisuje media query. */
.ai-demo__copy { max-width: 54rem; text-align: center; margin-inline: auto; position: relative; left: clamp(-160px, calc(865px - 50vw), 24px); }
.ai-demo__proofs {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 2.6vw, 32px); justify-content: center;
  margin: clamp(22px, 3vw, 32px) 0 clamp(26px, 3.4vw, 36px);
}
.ai-demo__proofs li { display: flex; flex-direction: column; gap: 2px; }
.ai-demo__proofs strong { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent); line-height: 1; }
.ai-demo__proofs span { font-size: .86rem; color: var(--muted-on-dark); }
.ai-demo__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --- Telefon z czatem --- */
.ai-demo__phone { display: flex; justify-content: center; }
.phone {
  position: relative; width: clamp(270px, 28vw, 344px); aspect-ratio: 330 / 660;
  background: #0c0c0b; border-radius: 40px; padding: 12px;
  box-shadow: 0 50px 90px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05), 0 30px 100px -30px rgba(116,211,190,.26);
}
.phone__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 38%; height: 7px; border-radius: 6px; background: #000; z-index: 3; }
.phone__screen {
  position: relative; height: 100%; border-radius: 30px; overflow: hidden;
  background: radial-gradient(120% 55% at 50% -8%, rgba(116,211,190,.07), transparent 70%), #0e1411;
  display: flex; flex-direction: column;
}
.chat__head { display: flex; align-items: center; gap: 10px; padding: 26px 16px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.chat__avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, var(--brand-mint), var(--brand)); display: grid; place-items: center; font-weight: 700; color: #06251f; font-size: .9rem; flex: none; }
.chat__who { display: flex; flex-direction: column; line-height: 1.2; }
.chat__who b { font-size: .92rem; color: #fff; font-family: var(--font-display); }
.chat__who i { font-style: normal; font-size: .72rem; color: var(--muted-on-dark); display: inline-flex; align-items: center; gap: 5px; }
.chat__body {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
  padding: 14px 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%); mask-image: linear-gradient(180deg, transparent 0, #000 9%);
}
.msg { max-width: 84%; }
.msg p { margin: 0; padding: 9px 12px; font-size: .8rem; line-height: 1.4; border-radius: 15px; }
.msg time { display: block; font-size: .6rem; color: var(--muted-on-dark); margin-top: 3px; padding: 0 4px; }
.msg--in { align-self: flex-start; }
.msg--in p { background: rgba(255,255,255,.09); color: #eef3f1; border-bottom-left-radius: 5px; }
.msg--out { align-self: flex-end; }
.msg--out p { background: linear-gradient(135deg, var(--brand-mint), #9fe7d5); color: #06251f; border-bottom-right-radius: 5px; }
.msg--out time { text-align: right; }
.chat__status { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 12px; font-size: .68rem; color: var(--muted-on-dark); background: rgba(116,211,190,.08); border-top: 1px solid rgba(116,211,190,.16); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-mint); box-shadow: 0 0 0 0 rgba(116,211,190,.6); animation: live-pulse 1.8s ease-out infinite; flex: none; }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(116,211,190,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(116,211,190,0); }
  100% { box-shadow: 0 0 0 0 rgba(116,211,190,0); }
}

/* --- „Pisanie się" czatu po wejściu w kadr (initChatPlay) ---
   Domyślnie (bez JS / reduce-motion) nic nie chowamy — wszystko widoczne.
   Klasę .is-playable dokłada JS dopiero, gdy zamierza animować. */
/* chowamy tylko właściwe wiadomości — dymek „pisze…" (.chat__typing) ma zostać widoczny */
.chat__body.is-playable .msg:not(.chat__typing) { display: none; }
.chat__body.is-playable .msg.is-shown { display: block; animation: msg-pop .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes msg-pop {
  from { opacity: 0; transform: translateY(9px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Dymek „pisze…" (tworzony w JS, dziedziczy wyrównanie z .msg--in / .msg--out) */
.chat__typing { animation: msg-pop .26s ease both; }
.chat__typing .bubble {
  display: inline-flex; align-items: center; gap: 4px; padding: 11px 13px;
  border-radius: 15px; background: rgba(255,255,255,.09); color: #eef3f1;
  border-bottom-left-radius: 5px;
}
.chat__typing.msg--out .bubble {
  background: linear-gradient(135deg, var(--brand-mint), #9fe7d5); color: #06251f;
  border-bottom-left-radius: 15px; border-bottom-right-radius: 5px;
}
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; animation: type-dot 1.15s ease-in-out infinite; }
.chat__typing i:nth-child(2) { animation-delay: .16s; }
.chat__typing i:nth-child(3) { animation-delay: .32s; }
@keyframes type-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* BARDZO niski desktop (małe laptopy, ~≤820px wys.): przy tak niskim viewportcie treść
   hero (eyebrow→CTA) nie mieści się wyśrodkowana bez ucięcia przycisku pod krawędzią,
   więc dosuwamy CAŁĄ treść do góry, pod navbar (górna strefa hero jest wolna od ikon).
   Telefon i tor lotu ikon zostają nietknięte — przesuwamy WYŁĄCZNIE kolumnę tekstu.
   Powyżej 820px (monitory i normalne laptopy) treść zostaje pionowo wyśrodkowana —
   ewentualne muśnięcie końca „Ciebie" przez ikonę jest kosmetyczne (tekst ma z-index nad łukiem). */
@media (min-width: 981px) and (max-height: 820px) {
  .ai-demo { align-items: flex-start; padding-top: calc(var(--nav-h) + clamp(14px, 3vh, 44px)); }
  .ai-demo__copy { align-self: start; }
}

/* --- Responsywność demo --- */
@media (max-width: 980px) {
  /* W 1 kolumnie treść hero jest wysoka i (mimo align-items:center) zaczyna się
     przy górnej krawędzi — a bazowy padding sekcji (~64px) jest niższy niż stały
     navbar (--nav-h 72px), więc eyebrow wchodził pod pasek. Offset = navbar +
     oddech, jak w bazowej klasie .hero. */
  .ai-demo { padding-top: calc(var(--nav-h) + clamp(24px, 6vw, 48px)); }
  .ai-demo__inner { grid-template-columns: 1fr; gap: clamp(36px, 7vw, 56px); justify-items: center; text-align: center; }
  /* left:0 — desktopowe dosunięcie treści w lewo (−50px z reguły bazowej)
     w układzie 1-kolumnowym wypychało nagłówek i tekst poza lewą krawędź
     (ucięte „K"/„O"). W pionie treść ma być wyśrodkowana. */
  .ai-demo__copy { max-width: 40rem; left: 0; }
  .ai-demo__proofs, .ai-demo__actions { justify-content: center; }
  /* Mobile (1 kolumna): pas biegnie ZA telefonem falą „S", łuki widać w rynnach.
     Ikony większe niż wcześniej (44→58); ścieżkę liczy JS z pozycji telefonu.
     offset-rotate:0 — ikony NIE obracają się wzdłuż stycznej (na bazie jest auto),
     więc są PIONOWO (upright) na całej trasie, też przy wlocie/wylocie poza ekran. */
  .ai-demo__orbit { --cs: 58px; }
  .ch { offset-rotate: 0deg; offset-path: path("M 432 1320 C 450 1060 450 770 436 580 C 426 532 360 548 250 548 C 150 548 46 532 36 580 C 24 770 24 1060 42 1320"); }
  .ai-demo__scrim { background: linear-gradient(0deg, var(--black) 6%, rgba(27,27,26,0) 26%), linear-gradient(180deg, rgba(27,27,26,.5), rgba(27,27,26,0) 24%); }
}
@media (max-width: 600px) {
  .ai-demo__orbit { --cs: 50px; }   /* większe ikony na telefonie (38→50) */
  .phone { width: min(78vw, 300px); }
  .ai-demo__proofs strong { font-size: 1.3rem; }
}

/* =================================================================
   LANDING „KINOWY" (cine-*) — mrok: czerń/zieleń, ikony, animacje
   Dopisane na końcu: klasy cine-* są unikalne, nie kolidują z bazą.
   ================================================================= */

/* --- Ikony (sprite + bazowy stroke) --- */

.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* --- Efekty globalne: pasek postępu / ziarno --- */


/* --- Wspólny „kafel" na ciemnym + poświaty sekcji --- */


/* --- HERO --- */


/* cine-hero__cue removed — scroll cues are banned per design guidelines */

/* --- MARQUEE branż --- */


/* --- LICZBY --- */


/* --- KIM JESTEŚMY --- */


/* miętowy tint scalający zdjęcie z paletą marki (de-stock) */


/* --- FILARY --- */


/* --- FILARY: lewa kolumna (opis) + prawa kolumna (pas kart 3D) --- */


/* lewa kolumna: nagłówek + zsynchronizowany opis aktywnego filaru */


/* DUŻY nagłówek sekcji „Możliwości" (przyciąga wzrok) + podtytuł „Cztery filary naszej agencji" */


/* lewa kolumna: statyczna lista 4 usług */


/* element AKTYWNY w eksploratorze (sterowanym hover/klikiem) — trwałe podświetlenie */


/* === EKSPLORATOR USŁUG (#oferta, prawa kolumna): okno aplikacji z podglądem AKTYWNEJ usługi === */


/* panel: Agenci AI — czat */


/* panel: Systemy CRM — lejek leadów */


/* panel: Strony internetowe — makieta strony */


/* panel: Marketing interaktywny — zasięg + kanały */


/* === ROZWINIĘCIE EKSPLORATORA: pasek postępu + blok sprzedażowy + mikro-animacje + klamra === */
/* pasek postępu auto-przewijania (timer „stories") */


   /* = AUTO w initPillarExplorer */


/* blok info sprzedażowego pod podglądem (nagłówek + korzyść + CTA) */


/* CTA pełny ZIELONY fill (krem zlewałby się z kremową sekcją) — wzorzec jak .phase__cta */


/* mikro-animacje WEJŚCIA paneli (odpalają się przy każdej aktywacji panelu) */


/* czat AI: nagłówek + dymki wjeżdżają, „pisanie" przechodzi w odpowiedź, potem szybkie akcje */


/* CRM: nagłówek + statystyki + rzędy leadów (head=1, stats=2, więc rzędy to nth-child 3..6) */


/* strony: nav + hero + karty usług kaskadą */


/* marketing: nagłówek + statystyki + rysowanie wykresu + oś + kanały */


/* KLAMRA: 4 filary = jeden system + przepływ + CTA do konsultacji */


/* === KORZYŚCI → pinned horizontal scroll (wierne odwzorowanie Buzzworthy „Attitude")
   Scena CIEMNA (.section--dark → tło = brand green, akcent = mięta, ink-grad = jasny).
   3 warstwy sterowane scrollem (GSAP, tryb .is-ga-scrub):
     • słowo: .ga-word__ghost (bez koloru) + .ga-word__fill (kolor, odsłaniany clip-path --ga-wipe),
     • pas .ga-track jedzie poziomo (transform x),
     • karty .ga-card wlatują pojedynczo (GSAP from: autoAlpha+yPercent), rozrzucone (top nth-child).
   Fallback (mobile / brak GSAP / reduce-motion): siatka kart, słowo w pełni pokolorowane. === */


/* nagłówek sekcji tylko dla SEO/czytników (wizualny tytuł = wielkie słowo „KORZYŚCI") */


/* gigantyczne słowo w tle (odpowiednik „attitude") — dwie nałożone warstwy */


/* pojedyncze litery (rozbite przez JS) — inline-block, by działał transform kaskadowego wjazdu */

/* warstwa „bez koloru" — odrobinę jaśniejsza od czarnego tła, ledwo czytelna (jak navy-on-navy w oryginale) */

/* warstwa koloru — ink-grad (na ciemnym: mięta→biel), odsłaniana od PRAWEJ w lewo przez --ga-wipe */

/* Po rozbiciu na litery glify są w .ga-l (nie w rodzicu), więc background-clip:text rodzica nie ma
   czego pokolorować → słowo się nie malowało. Gradient kładziemy na KAŻDEJ literze warstwy koloru. */


/* pas kart */


/* eyebrow+tytuł zostają zgrupowane u góry; opis wyśrodkowany w przestrzeni pod tytułem
   (margin: auto 0 → równa przerwa nad i pod tekstem), więc siada bliżej środka, nie na dnie. */


/* ---- TRYB SCRUB: pin + poziome przesuwanie + wlatujące karty + kolor słowa (desktop + GSAP) ---- */


/* naprzemienny rozrzut: nieparzyste wyżej, parzyste niżej (shingle góra/dół) */


/* --- EFEKTY (paski) --- */


/* --- OPINIE — kremowe karty (marquee) + duże zielone kafelki --- */
/* górny rząd: przewijane kremowe karty */


/* dolna siatka: duże kafelki z efektami */


/* --- FAQ --- */


/* --- CTA finałowe: makieta nowej strony klienta --- */


/* Scrim: lekki, lewa strona ciemniejsza pod tekst */


/* Treść: 2 kolumny (tekst lewo / makieta prawo), wjeżdża po scrollu ([data-reveal]) */


/* Prawa kolumna: makieta urządzeń + kafelki */


/* Mini-strona (jasna) w przeglądarce */


/* Mini-strona na telefonie */


/* --- Warianty treści za bramą na PODSTRONACH (jasny ekran w .reveal-browser) --- */


/* o-nas: zespół */


/* proces: kroki */


/* konsultacja: kalendarz */


/* oferta-crm: lista leadów */


/* oferta-marketing: kampanie + słupki (bez liczb) */


/* Mobil/tablet: 1 kolumna (tekst nad makietą), laptop bez 3D, telefon ukryty */


/* --- tilt (bazowo) --- */


/* --- ZIELONE SEKCJE → KREM: warianty jasne komponentów cine-* ---
   cine-stats / cine-pillars / cine-gains przeniesione na .section--light.
   Poniżej nadpisania kolorów pisanych pierwotnie pod ciemne tło
   (obwódki --line-dark, tła rgba(255,255,255), teksty --muted-on-dark, color:#fff). */


/* FILARY — lewa kolumna (pas kart 3D po prawej jest kremowo-biały, działa bez zmian) */


/* === DLACZEGO MY: porównanie agencji (cine-vs, scena czarna) === */


.vs__head { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin-bottom: 18px; }


/* === REALIZACJA: case study (cine-case, scena kremowa) === */


/* ikony SVG w kafelkach .perk (zastąpiły emoji na oferta-strony) */
.perk .ico .ic { color: var(--accent); }

@media (max-width: 820px) {
  .vs, .case { grid-template-columns: 1fr; }
}


/* ============ oferta-strony: HERO + interaktywne demo (.rsite na żywo) ============ */


/* przycisk CTA na makiecie pulsuje, by przyciągnąć wzrok */


/* faux-kursor: dojeżdża do CTA, „klika", odjeżdża (pętla) */


/* toast „nowe zapytanie" wpada po kliknięciu (zsynchronizowany z kursorem) */


/* ════════════════════════════════════════════════════════════════════════
   OFERTA-STRONY — przebudowa 2026-06-25 (od zera, v2).
   Sekcje własne (nie kopia „O nas"): .shero (hero edytorialny) ·
   .anat/.brow/.asite (interaktywna anatomia strony) · .cases (realizacje) ·
   .start (jak zaczynamy). Paleta: krem/czerń/zieleń + mięta na czerni.
   ════════════════════════════════════════════════════════════════════════ */

/* --- HERO (układ Wispr Flow: tekst-lewo / urządzenia-prawo, krem) --- */
.shero { position: relative; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; --dev-s: .86; --dev-bleed: 0px; --shero-padv: clamp(28px, 5vh, 70px); padding-top: calc(var(--nav-h) + var(--shero-padv)); /* +radius-cap = kompensacja czapki czarnej sekcji (.sg-cap margin-top:-radius-cap), żeby blok tekst+laptop był równo oddalony od nawigacji i czarnego paska */ padding-bottom: calc(var(--shero-padv) + var(--radius-cap)); }
.shero::before { content: ""; position: absolute; right: -4%; top: 32%; width: min(760px, 64%); aspect-ratio: 1 / .8; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(3,79,70,.07), transparent 72%); pointer-events: none; }
/* Lewa krawędź treści hero = lewa krawędź kolumny .wrap (--maxw, wyśrodkowana) — spójny „kręgosłup" strony; laptop celowo wystaje w prawo poza kolumnę (decyzja właściciela) */
.shero__inner { position: relative; z-index: 1; flex: 0 0 auto; width: 100%; margin: 0; padding-left: max(24px, (100% - var(--maxw)) / 2); padding-right: clamp(24px, 5vw, 116px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 3.2vw, 76px); }
.shero__text { max-width: 47rem; }
/* Stopień zrównany z hero proces.html (ten sam wzór clamp), żeby nagłówek hero oferty był
   równie okazały. Warunek: każda z dwóch grup („Miałeś już stronę" / „Ta umawia pomiary")
   mieści się w JEDNEJ linii (łącznie 2 linie). Kolumna tekstu bywa najwęższa na monitorach
   ≥1800px (laptop „CAŁOŚĆ") — tam poszerzona przez większy --dev-bleed (reguły poniżej), by
   większy stopień nie łamał się na 4 linie. */
.shero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.025em; margin-top: var(--eyebrow-gap); color: var(--text); }
.shero__brk { display: block; height: 0; }
.shero .word { display: inline-block; opacity: 0; transform: translateY(34px); animation: wordIn .8s var(--ease) forwards; }
.shero__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 46ch; margin: 22px 0 0; line-height: 1.6; opacity: 0; animation: fadeUp 1s var(--ease) .5s forwards; }
.shero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; opacity: 0; animation: fadeUp 1s var(--ease) .64s forwards; }


.shero__kicker { position: absolute; left: 0; right: 0; bottom: calc(var(--radius-cap) + 8px); z-index: 1; /* zakotwiczone POWYŻEJ czarnej czapki #porownanie (margin-top:-radius-cap), inaczej dolna linijka chowa się pod nią na niskich ekranach (MacBook) */ max-width: 50ch; margin-inline: auto; padding-inline: 24px; text-align: center; font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.5; color: var(--text-muted); opacity: 0; animation: fadeUp 1s var(--ease) .95s forwards; }

/* --- Urządzenia: skala + kompozycja (sam laptop, wyśrodkowany z tekstem) --- */
/* margin-right ujemny (--dev-bleed): pozwala powiększonemu laptopowi „wystawać" i ścinać się
   prawą krawędzią sekcji (overflow:hidden) — wzór Wispr Flow — zamiast rosnąć w lewo, w nagłówek.
   Zwęża też kolumnę auto w gridzie, więc kolumna tekstu nie jest miażdżona. */
.shero__devices { display: flex; justify-content: center; margin-right: calc(-1 * var(--dev-bleed, 0px)); }
.shero__scaler { position: relative; flex: 0 0 auto; width: calc(744px * var(--dev-s, .78) * var(--dev-mult, 1)); height: calc(450px * var(--dev-s, .78) * var(--dev-mult, 1)); opacity: 0; animation: fadeUp 1.1s var(--ease) .3s forwards; }
.shero__stage { position: absolute; top: 0; left: 0; width: 744px; height: 450px; transform: scale(calc(var(--dev-s, .78) * var(--dev-mult, 1))); transform-origin: top left; }
.shero__laptop { position: absolute; top: 0; left: 2px; }
.shero__laptop .device-frame { box-shadow: inset 0 0 0 2px #767a7d, 0 50px 90px -40px rgba(2,22,18,.5); }

/*! Devices.css v0.2.0 | MIT License | github.com/picturepan2/devices.css — wycinek: macbook-pro (spacegray) + google-pixel-6-pro (black), ostylowany do palety Climbly */
.shero .device, .shero .device::before, .shero .device::after,
.shero .device *, .shero .device *::before, .shero .device *::after { box-sizing: border-box; }
.shero .device { position: relative; transform: scale(1); z-index: 1; }
.shero .device .device-frame { z-index: 1; }
.shero .device .device-screen { background-color: #000; background-position: center center; background-size: cover; position: relative; overflow: hidden; }
/* MacBook Pro */
.device-macbook-pro { height: 434px; width: 740px; }
.device-macbook-pro .device-frame { background: #0d0d0d; border-radius: 20px; box-shadow: inset 0 0 0 2px #767a7d; height: 418px; margin: 0 auto; padding: 9px 9px 23px 9px; position: relative; width: 618px; }
.device-macbook-pro .device-frame::after { background: linear-gradient(to bottom, #272727, #0d0d0d); border-radius: 0 0 20px 20px; bottom: 2px; content: ""; height: 24px; left: 2px; position: absolute; width: 614px; }
.device-macbook-pro .device-header { background: #0d0d0d; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; height: 12px; left: 50%; margin-left: -32px; position: absolute; top: 11px; width: 64px; z-index: 2; }
.device-macbook-pro .device-screen { border: 2px solid #121212; border-radius: 10px 10px 0 0; height: 375px; width: 600px; }
.device-macbook-pro .device-power { background: radial-gradient(circle at center, #83878a 85%, #767a7d 100%); border: solid #454749; border-radius: 2px 2px 12px 12px; border-width: 1px 2px 0 2px; box-shadow: inset 0 -2px 8px 0 #202121; height: 24px; margin-top: -10px; position: relative; width: 740px; z-index: 9; }
.device-macbook-pro .device-power::after { background: #b7babc; border-radius: 0 0 10px 10px; box-shadow: inset 0 0 4px 2px #6a6d70; content: ""; height: 10px; left: 50%; margin-left: -60px; position: absolute; top: 0; width: 120px; }
.device-macbook-pro .device-power::before { background: transparent; border-radius: 0 0 3px 3px; bottom: -2px; box-shadow: -300px 0 #272727, 300px 0 #272727; content: ""; height: 2px; left: 50%; margin-left: -20px; position: absolute; width: 40px; }
/* Google Pixel 6 Pro (black) */


/* --- DEMO „strona stolarki" w ekranie laptopa (600×375) --- */
.demosite { width: 100%; height: 100%; background: #FFFFEB; color: #1A1B1B; display: flex; flex-direction: column; font-family: var(--font-sans, "Figtree", sans-serif); }
.ds__nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid rgba(3,79,70,.10); flex: 0 0 auto; }
.ds__logo { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--brand); letter-spacing: -.02em; }
.ds__logo b { color: #1A1B1B; }
.ds__links { display: inline-flex; gap: 14px; margin-left: auto; margin-right: 18px; }
.ds__links i { width: 30px; height: 7px; border-radius: 99px; background: rgba(26,27,27,.16); display: block; }
.ds__cta { display: inline-block; background: var(--brand); color: #FFFFEB; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 99px; }
.ds__hero { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; background: linear-gradient(90deg, rgba(8,18,15,.78), rgba(8,18,15,.30) 70%, rgba(8,18,15,.12)), url(/img/proces-okno.webp) center/cover; }
.ds__hero-copy { padding: 0 26px; max-width: 70%; }
.ds__eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-mint); }
.ds__h { display: block; font-family: var(--font-display); font-weight: 600; font-size: 31px; line-height: 1.04; color: #FFFFEB; margin: 7px 0 0; letter-spacing: -.01em; }
.ds__sub { display: block; font-size: 13px; color: rgba(255,255,235,.85); margin: 8px 0 0; }
.ds__btn { display: inline-block; margin-top: 15px; background: var(--brand); color: #FFFFEB; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 99px; }
.ds__cards { display: flex; gap: 10px; padding: 12px 22px 16px; flex: 0 0 auto; }
.ds__card { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; border: 1px solid rgba(3,79,70,.14); border-radius: 12px; font-size: 13px; font-weight: 600; background: rgba(3,79,70,.03); }
.ds__card .ic { width: 16px; height: 16px; color: var(--brand); }

/* --- DEMO mobilne w ekranie telefonu (376×816) — formularz wyceny --- */


/* --- HERO responsywność (laptop ≈ obecność jak na Wispr Flow).
   UCIĘCIE ~28% szer. (makieta WYCHODZI za prawą krawędź) TYLKO na ekranach laptopowych
   (≈1024–1799px) — większy --dev-bleed pcha laptop w prawo, overflow:hidden ścina nadmiar.
   Na DUŻYCH monitorach (≥1800px: 27"/1920/2560) laptop widoczny W CAŁOŚCI — bleed wraca do
   małych wartości (decyzja właściciela 2026-06-25). Skala --dev-s bez zmian; ucięcie ~16%
   (łagodne — laptop nie „ucieka" za daleko w prawo przy zwężaniu), dobrane pomiarowo per próg. --- */
@media (min-width: 1440px) { .shero { --dev-s: 1.12; --dev-bleed: 265px; } } /* laptop 16" → ucina ~16% */
/* ≥1600px: laptop nieco mniejszy + głębszy --dev-bleed niż wcześniej, by kolumna tekstu
   pomieściła powiększony nagłówek (clamp jak proces) w 2 liniach — bez tego „Ta umawia
   pomiary" przy ~500px kolumny łamało się na 4 linie. */
@media (min-width: 1600px) { .shero { --dev-s: 1.18; --dev-bleed: 300px; } } /* duży laptop → ucina ~ćwierć */
@media (min-width: 1800px) { .shero { --dev-s: 1.20; --dev-bleed: 210px; } } /* monitor → laptop duży, ale nagłówek dostaje szerszą kolumnę */
@media (min-width: 2000px) { .shero { --dev-s: 1.30; --dev-bleed: 210px; } }
@media (max-width: 1439px) { .shero { --dev-s: 1.00; --dev-bleed: 255px; } }
@media (max-width: 1320px) { .shero { --dev-s: .94; --dev-bleed: 245px; } }
@media (max-width: 1200px) { .shero { --dev-s: .86; --dev-bleed: 245px; } }
/* TABLET: laptop hero +5% (życzenie właściciela 2026-07-06). Osobny mnożnik --dev-mult,
   nie dubluje wartości --dev-s w każdym progu; skaluje i box .shero__scaler, i transform
   .shero__stage razem, więc layout zostaje spójny. Zakres = tablety (601–1439px): landscape
   dwukolumnowo i portrait stacked; telefony (≤600) i desktop (≥1440) bez zmian. */
@media (min-width: 601px) and (max-width: 1439px) { .shero { --dev-mult: 1.05; } }
/* Zakres laptopowy (1025–1439px): nagłówek prowadzi bazowy clamp (6.1vw, jak proces.html);
   makieta laptopa głębiej schodzi za prawą krawędź (większy --dev-bleed wyżej), więc kolumna
   tekstu mieści okazały stopień bez łamania na 4 linie. Osobny override font-size usunięty. */
@media (max-width: 1024px) {
  .shero { --dev-s: .64; --dev-bleed: 0px; min-height: auto; }
  /* Jedna kolumna: ten sam kontener co .wrap (równa szerokość treści na całej stronie) */
  .shero__inner { grid-template-columns: 1fr; text-align: center; width: min(100% - 48px, var(--maxw)); margin-inline: auto; padding-left: 0; padding-right: 0; gap: clamp(28px, 6vw, 48px); }
  .shero__text { max-width: 40rem; margin-inline: auto; }
  .shero__lead { margin-inline: auto; }
  .shero__actions { justify-content: center; }
  .shero__kicker { position: static; margin: clamp(26px, 5vw, 44px) auto 0; }
}
/* ≤600px: hero zwęża się tak samo jak .wrap (16px marginesy) — musi być PO bloku ≤1024px, by wygrać kolejnością */
@media (max-width: 600px) { .shero__inner { width: min(100% - 32px, var(--maxw)); } }
/* ≤600px: nagłówek skaluje się z szerokością okna, żeby każda z dwóch grup („Miałeś już stronę" / „Ta umawia pomiary") mieściła się w jednej linii — bez tego min 2.6rem łamie tekst na 4 linie na wąskich telefonach */
/* Hierarchia H1>H2: poprzednie 1.9–2.6rem (~32px) przegrywało z .section-title (38.4px) */
@media (max-width: 620px) { .shero { --dev-s: .54; } }
@media (max-width: 430px) { .shero { --dev-s: .46; } }
/* Niskie okna (desktop): laptop maleje, żeby laptop + kicker zmieściły się bez ucinania.
   UWAGA: tylko od ≥1440px, gdzie baza --dev-s jest duża (.96–1.30). Poniżej baza to
   .76/.82 i wymuszanie .9 POWIĘKSZAŁOby makiety, miażdżąc kolumnę nagłówka (4 linie). */
@media (min-width: 1440px) and (max-height: 880px) { .shero { --dev-s: 1.06; } }
@media (min-width: 1440px) and (max-height: 780px) { .shero { --dev-s: .96; } }
@media (min-width: 1440px) and (max-height: 690px) { .shero { --dev-s: .86; } }
/* Cut bleed na niskich oknach TYLKO w zakresie laptopowym (<1800px); ≥1800px = monitor,
   laptop ma być w całości, więc bleed zostaje mały z reguły min-1800/2000 powyżej. */
@media (min-width: 1440px) and (max-width: 1799px) and (max-height: 880px) { .shero { --dev-bleed: 250px; } }
@media (min-width: 1440px) and (max-width: 1799px) and (max-height: 780px) { .shero { --dev-bleed: 235px; } }
@media (min-width: 1440px) and (max-width: 1799px) and (max-height: 690px) { .shero { --dev-bleed: 220px; } }

/* --- ANATOMIA: layout makieta + legenda --- */
/* Nagłówek bez podtytułu → większy stopień i szersza głowa, żeby krótki tytuł
   „Rozkładamy naszą stronę na części" trzymał się dwóch linii (akcent „części" w 2. linii). */
#anatomia .section-head { max-width: 880px; }
#anatomia .section-title { font-size: var(--fs-h2-xl); margin-bottom: 0; } /* min 2.4rem: H2 nie może przerastać H1 strony na telefonie */
/* SCROLL-SPY (rebuild 2026-06-26 v2, wzór Framer AI): dwie kolumny. LEWA szeroka
   .anat__panels = 5 paneli-okien jeden pod drugim; PRAWA wąska .anat__toc = sticky
   lista tytułów, aktywny rośnie + zmienia kolor (JS initWebAnatomy, IntersectionObserver
   na linii środka ekranu). Pin/scrub usunięty. ≤1040px: toc nie-sticky, 1 kolumna. */
.anat { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 420px); gap: clamp(28px, 4vw, 72px); align-items: start; }
.anat__panels { display: flex; flex-direction: column; gap: clamp(48px, 9vh, 120px); min-width: 0; padding: 8vh 0; }
.anat__panel { position: relative; }
/* Cała siatka anatomii WYCHODZI lewą krawędzią do brzegu ekranu (desktop): ujemny margines
   = odległość od lewej krawędzi .wrap do krawędzi viewportu (50vw − 50% szer. .wrap). Prawa
   krawędź zostaje na linii .wrap (toc trzyma pion z resztą treści). overflow-x:clip na sekcji
   pochłania ~kilkupikselowy zapas (vw liczy pasek przewijania). ≤1040px = 1 kolumna, bez bleedu. */
@media (min-width: 1041px) {
  #anatomia { overflow-x: clip; }
  /* +inset = odsunięcie lewej krawędzi okien od brzegu ekranu (lewa krawędź siatki = inset px).
     margin-right ujemny = siatka wychodzi prawą krawędzią o 180px w prawy gutter; te +180px trafiają
     do toru 1fr (LEWE OKNA / mini-strona stają się szersze o 180px). TOC zamrożony na vw (nie zjada
     szerokości). overflow-x:clip pochłania nadmiar, gdy w gutterze nie ma 180px (wąskie ekrany). */
  #anatomia .anat { margin-left: calc(50% - 50vw + clamp(40px, 4vw, 80px)); margin-right: -180px; }
}
/* TABLET (≤1439px): przytnij prawy bleed, żeby ciemna karta TOC NIGDY nie wychodziła
   poza viewport. Stałe −180px wystawało ~110px poza ekran na iPadzie (landscape
   1194–1366) i było chowane tylko przez overflow-x:clip — a clip bywa zawodny w iOS
   Safari, więc karta wystawała poza prawą krawędź. clamp() ogranicza ujemny margines
   do faktycznego gutteru (50vw−50% = połowa różnicy viewport/.wrap) z 20px zapasem.
   Zakres 1041–1439px pokrywa WSZYSTKIE iPady (max 1366px); desktop ≥1440px zostaje
   z oryginalnym −180px bez zmian (życzenie właściciela 2026-07-06). */
@media (min-width: 1041px) and (max-width: 1439px) {
  #anatomia .anat { margin-right: clamp(-180px, calc(50% - 50vw + 20px), 0px); }
}

/* PRAWA kolumna = ciemna karta-„okienko" (wzór Framer chat panel), przyklejona i
   wyśrodkowana w pionie. Na ciemnym tle akcent = MIĘTA (§8). Stała min-height →
   rozwijanie opisu aktywnego nie zmienia rozmiaru karty (brak skoku re-centrowania). */
/* GÓRA karty równo z GÓRĄ pierwszego okienka (nie z nagłówkiem): brak centrowania
   translateY; margin-top = górny padding .anat__panels (8vh), bo o tyle pierwszy
   panel jest zepchnięty od góry siatki. Przy scrollu przykleja się pod nawigacją. */
.anat__toc { position: sticky; top: clamp(90px, 12vh, 132px); align-self: start; margin-top: 8vh;
  /* +10% rozmiaru; origin top-right zachowuje wyrównanie górą z 1. okienkiem (rośnie w lewo/dół) */
  transform: scale(1.1); transform-origin: top right;
  background: #1A1B1B; color: var(--bg-light, #FFFFEB);
  border: 1px solid rgba(255,255,235,.10); border-radius: 20px;
  padding: clamp(26px, 2.4vw, 38px); min-height: 480px;
  box-shadow: 0 44px 90px -50px rgba(2,22,18,.6), 0 3px 10px rgba(2,22,18,.18);
  display: flex; flex-direction: column; }
.anat__tochead { margin: 0 0 clamp(16px, 1.8vw, 24px); font-family: var(--font-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--brand-mint, #74D3BE); }
.anat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.anat__tocitem { display: flex; gap: 15px; padding: clamp(13px, 1.7vh, 18px) 0; border-top: 1px solid rgba(255,255,235,.09); }
.anat__tocitem:first-child { border-top: 0; padding-top: 0; }
.anat__tocno { flex: 0 0 auto; padding-top: 3px; font-family: var(--font-accent); font-weight: 700; font-size: .78rem; letter-spacing: .06em; color: rgba(255,255,235,.4); transition: color .4s var(--ease); }
.anat__toccol { min-width: 0; display: block; }
.anat__toctitle { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.22; letter-spacing: -.01em; color: rgba(255,255,235,.55); transition: font-size .45s var(--ease), color .45s var(--ease); }
/* opis zwinięty; rozwija się TYLKO na aktywnej pozycji (akordeon, max 1) */
.anat__tocdesc { display: block; margin: 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-4px); color: rgba(255,255,235,.62); font-size: 1rem; line-height: 1.5; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease), transform .5s var(--ease); }
/* AKTYWNY = tytuł większy + miętowy akcent (§8 ciemne tło) + rozwinięty opis */
.anat__tocitem.is-active .anat__toctitle { font-size: 1.38rem; color: var(--brand-mint, #74D3BE); }
.anat__tocitem.is-active .anat__tocno { color: var(--brand-mint, #74D3BE); }
.anat__tocitem.is-active .anat__tocdesc { max-height: 180px; opacity: 1; margin-top: 7px; transform: none; }

/* przeglądarka — okno wypełnia szeroką lewą kolumnę */
.brow { margin: 0; width: 100%; border-radius: 16px; overflow: hidden; background: #fbfdf4; border: 1px solid var(--line-light); box-shadow: 0 40px 80px -40px rgba(2,22,18,.35), 0 2px 6px rgba(2,22,18,.06); transition: box-shadow .5s var(--ease); }
.anat__panel.is-active .brow { box-shadow: 0 54px 100px -44px rgba(2,22,18,.46), 0 3px 10px rgba(2,22,18,.08); }
.brow__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #eef1e3; border-bottom: 1px solid var(--line-light); }
.brow__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(12,26,23,.2); }
.brow__url { margin-left: 10px; flex: 1; font-size: .72rem; color: #5d6b63; background: #fbfdf4; border-radius: 7px; padding: 5px 12px; }

/* Kadr okna: statyczny zrzut <img> sekcji landingu. aspect-ratio ustawiany inline
   per panel (nav 900/73 — pasek nawigacji; reszta 1280/700). Obrazek wypełnia kadr
   (object-fit: cover; proporcja img = proporcja kadru → bez deformacji). */
.anat__frame { position: relative; width: 100%; aspect-ratio: var(--anat-ar, 1280 / 700); overflow: hidden; background: var(--bg, #FFFFEB); }
.anat__frame-doc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; border: 0; pointer-events: none; background: var(--bg, #FFFFEB); }

/* makieta serwisu (jasna, krem/zieleń) — font-em skaluje całość */


/* podświetlanie stref */


/* telefon-„dopisek" obok przeglądarki */


/* === 2. PORÓWNANIE „Climbly vs. generalna agencja" (czerń) — wzór Wispr Flow ===
   Dwie karty obok siebie (dobra = miętowy akcent, słaba = neutralna z przekreśleniami)
   + pasek statystyk z placeholderami. Akcent na czerni = mięta (--accent przełączony). */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); align-items: stretch; margin-top: clamp(36px, 5vw, 60px); }
/* Karty jak Wispr Flow: pełne, JASNE bloki kremowe „świecące” na czerni.
   Wewnątrz akcent wraca do zieleni (mięta tylko poza kartami, na ciemnym tle); tekst ciemny. */
.vs__card { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 36px); border-radius: var(--radius-lg); border: 1px solid rgba(0, 0, 0, .06);
  --accent: var(--brand); color: var(--text);
  background: linear-gradient(rgba(26, 27, 27, .04), rgba(26, 27, 27, .04)), var(--bg-light);
  box-shadow: 0 28px 64px -36px rgba(0, 0, 0, .75); }
.vs__card--good { border-color: rgba(3, 79, 70, .16);
  background: linear-gradient(rgba(3, 79, 70, .07), rgba(3, 79, 70, .07)), var(--bg-light);
  box-shadow: 0 28px 64px -34px rgba(0, 0, 0, .6); }

.vs__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-right: 92px; }
.vs__badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; flex: none; background: var(--accent); color: var(--black); }
.vs__badge .ic { stroke-width: 2.2; }
.vs__badge--bad { background: transparent; border: 1px solid var(--line-light); color: var(--text-muted); }
.vs__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.95rem); letter-spacing: -.01em; line-height: 1; }
/* karta Climbly = nazwa jak wordmark (Figtree, wzór logo Wispr Flow); konkurent zostaje serif */
.vs__card--good .vs__name { font-family: var(--font-accent); font-weight: 800; font-size: clamp(1.4rem, 2.1vw, 1.74rem); letter-spacing: -.02em; }
/* logo Climbly (słupki jak w nawigacji) obok nazwy — lockup „znak + Climbly", mięta na czerni.
   font-size na nagłówku = rozmiar wordmarku, żeby wysokość znaku w em pasowała do napisu. */
.vs__card--good .vs__head { gap: 11px; font-size: clamp(1.4rem, 2.1vw, 1.74rem); }
.vs__logo { height: 0.92em; width: auto; flex: none; color: var(--brand); }
.vs__logo rect { fill: currentColor; }

/* narożny szkic-naklejka (wzór Wispr): obramowanie karty „podnosi się" wokół szkicu.
   .vs__deco-base = pełna czerń (kryje obramowanie pod naklejką), .vs__deco-sil = przezroczysty
   akcent (= powierzchnia karty) + linia obrysu; nad kartą sylwetka wystaje jak naklejka. */
/* narożna naklejka (wzór Wispr): kremowa „karteczka” z cieniem rzuca się na czerni,
   szkic = zieleń (dobra) / przygaszona czerń (słaba). */
.vs__deco { position: absolute; top: -42px; right: clamp(14px, 2vw, 22px); width: clamp(88px, 9.4vw, 118px); height: auto; pointer-events: none; filter: drop-shadow(0 9px 13px rgba(0, 0, 0, .5)); }
.vs__card--good .vs__deco { color: var(--brand); }
.vs__card--bad .vs__deco { color: var(--text-muted); }
.vs__deco-base { fill: var(--bg-light); stroke: none; }
.vs__deco-sil { fill: var(--bg-light); stroke-width: 1.8; }
.vs__card--good .vs__deco-sil { stroke: rgba(3, 79, 70, .55); }
.vs__card--bad .vs__deco-sil { stroke: rgba(26, 27, 27, .4); }

/* „dymek" wiadomości — wewnętrzna powierzchnia jak na wzorze */
/* „dymek” = czystszy/jaśniejszy niż powierzchnia karty → warstwa (karta → dymek), jak u Wispr */
.vs__msg { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 1.8vw, 24px); border-radius: var(--radius); background: var(--bg-light); border: 1px solid rgba(0, 0, 0, .07); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); font-size: 1rem; line-height: 1.6; color: var(--text); }
.vs__card--good .vs__msg { color: var(--text); }
.vs__msg b { font-weight: 700; }
.vs__msg s { color: var(--brand); opacity: 1; font-weight: 600; text-decoration-line: line-through; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.vs__card--bad .vs__msg { color: var(--text-muted); }

.vs__chk { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 7px; counter-reset: vschk; }
.vs__chk li { position: relative; padding-left: 26px; counter-increment: vschk; }
.vs__chk li::before { content: counter(vschk); position: absolute; left: 0; top: .05em; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-family: var(--font-accent); font-weight: 700; font-size: .7rem; color: var(--accent); background: rgba(3, 79, 70, .1); }

.vs__verdict { display: flex; align-items: center; gap: 9px; margin-top: 22px; font-family: var(--font-accent); font-weight: 600; font-size: .92rem; letter-spacing: -.005em; }
.vs__verdict .ic { width: 17px; height: 17px; flex: none; }
.vs__verdict--good { color: var(--accent); }
.vs__verdict--bad { color: var(--text-muted); }

/* --- Pasek statystyk (placeholdery — liczby [do uzupełnienia], §6) --- */
.vstat { margin-top: clamp(40px, 5vw, 68px); padding-top: clamp(28px, 3.4vw, 40px); border-top: 1px solid var(--line-dark); }
.vstat__cap { text-align: center; font-family: var(--font-accent); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: clamp(22px, 2.6vw, 32px); }
.vstat__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 3.4vw, 42px); align-items: center; max-width: 600px; margin: 0 auto; }
.vstat__hero { text-align: center; }
/* wielka liczba = Figtree (sans, jak grube „90%" w Wispr), mięta na czerni */
.vstat__big { display: block; font-family: var(--font-accent); font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 3.1rem); line-height: .9; color: var(--accent-on-dark-h); letter-spacing: -.03em; }
.vstat__sign { font-size: .46em; font-weight: 700; }
.vstat__bigsub { display: block; margin-top: 6px; font-family: var(--font-accent); font-weight: 700; font-size: .92rem; color: var(--text-on-dark); }
/* pionowa linia działowa między liczbą a słupkami (wzór Wispr) */
.vstat__rows { list-style: none; display: flex; flex-direction: column; gap: clamp(13px, 1.6vw, 18px); margin: 0; padding: 0 0 0 clamp(24px, 4vw, 52px); border-left: 1px solid var(--line-dark); }
.vstat__row { display: grid; grid-template-columns: 120px 1fr 44px; gap: 16px; align-items: center; }
.vstat__lbl { font-family: var(--font-accent); font-weight: 500; font-size: .95rem; color: var(--muted-on-dark); white-space: nowrap; }
/* cienka linia-słupek jak na wzorze */
.vstat__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 235, .14); overflow: hidden; }
.vstat__bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent-on-dark-h); }
.vstat__pct { font-family: var(--font-accent); font-weight: 700; font-size: .95rem; color: var(--text-on-dark); text-align: right; }
/* podpis źródła (wzór „Source: …") */


/* Ciemna sekcja porównania zajmuje ~jeden ekran. Po wyjęciu paska statystyk
   do osobnego zielonego pasa (#porownanie-stat) karty ROZCIĄGAJĄ się na pełną
   wysokość sekcji (flex), a cała treść jest POWIĘKSZONA — odzyskane miejsce
   po statystykach (2026-06-26). Nadpisuje duży padding .section i 100px
   .section--black .section-head. */
#porownanie.section { padding-block: clamp(44px, 5vw, 76px); min-height: 88svh; display: flex; flex-direction: column; }
#porownanie .wrap { display: flex; flex-direction: column; flex: 1; }
#porownanie .section-head { margin-bottom: clamp(24px, 3vw, 40px); max-width: 900px; }
#porownanie .section-title { font-size: var(--fs-h2-xl); margin-top: 14px; } /* min 2.4rem: H2 nie może przerastać H1 strony na telefonie */
#porownanie .section-sub { margin-top: 12px; font-size: var(--fs-lead); max-width: 64ch; }
/* karty wypełniają odzyskane miejsce po pasku statystyk */
#porownanie .vs { margin-top: 0; flex: 1; }
#porownanie .vs__card { padding: clamp(28px, 2.8vw, 44px); }
#porownanie .vs__deco { width: clamp(100px, 10.4vw, 132px); top: -46px; }
#porownanie .vs__name { font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
#porownanie .vs__card--good .vs__name,
#porownanie .vs__card--good .vs__head { font-size: clamp(1.55rem, 2.3vw, 2rem); }
#porownanie .vs__head { margin-bottom: clamp(22px, 2.4vw, 30px); padding-right: 104px; }
#porownanie .vs__msg { padding: clamp(22px, 2.2vw, 32px); gap: clamp(13px, 1.4vw, 18px); font-size: clamp(1.05rem, 1.2vw, 1.22rem); line-height: 1.62; }
#porownanie .vs__chk { gap: clamp(9px, 1vw, 13px); }
#porownanie .vs__chk li { padding-left: 30px; }
#porownanie .vs__chk li::before { width: 21px; height: 21px; font-size: .76rem; }
#porownanie .vs__verdict { margin-top: clamp(18px, 2vw, 28px); font-size: clamp(.98rem, 1.05vw, 1.12rem); }
#porownanie .vs__verdict .ic { width: 19px; height: 19px; }

/* === 2b. Zielony pas ze statystyką (akcent, wzór .sg-narzedzia z landingu) ===
   Wąski pas-akcent na zieleni (NIE pełnoekranowa sekcja). .vstat przełączony na
   warianty na zieleni: krem zamiast mięty. Górna krawędź 1:1 z landingiem
   (.sg-narzedzia): pas ma PŁASKĄ górę (sg-cap-bottom), a czarna #porownanie
   nachodzi na nią zaokrąglonym DOŁEM (jej sg-cap-bottom + wyższy z-index), tak jak
   .sg-market kapie na pas narzędzi. Sam pas zaokrąglonym dołem nachodzi na #anatomia
   → +radius-cap po obu stronach, żeby treść nie chowała się pod zaokrągleniem. */
/* Czarna sekcja MUSI malować się NAD zielonym pasem (jak .sg-market z-index:3),
   inaczej płaska góra pasa (późniejszy DOM, z-index:2) zakryłaby zaokrąglony dół czerni. */
#porownanie.sg-cap-bottom { z-index: 3; }
.vstat-band { background: var(--brand); color: var(--text-invert);
  padding-block: calc(clamp(20px, 2.6vw, 34px) + var(--radius-cap)) calc(clamp(20px, 2.6vw, 34px) + var(--radius-cap)); }
.vstat-band .vstat { margin-top: 0; padding-top: 0; border-top: none; }
/* pas szerszy o 25% niż domyślne 600px (.vstat__grid) — prośba właściciela 2026-06-26 */
.vstat-band .vstat__grid { max-width: 750px; }
/* Pas = jeden obraz (chłopak | puste okno | pulpit), tło wtopione w zieleń pasa;
   wykres 94% wpasowany ABSOLUTNIE w środkowe, puste okno obrazu. */
.vstat-band__stage { position: relative; }
.vstat-band__pas { display: block; width: 100%; height: auto; }
.vstat-band__stage .vstat { position: absolute; top: 50%; left: 51.2%; transform: translate(-50%, -50%); width: min(40%, 500px); }
.vstat-band__stage .vstat__grid { max-width: none; }
.vstat-band .vstat__cap { color: rgba(255, 255, 235, .8); font-size: 1.12rem; }
.vstat-band .vstat__big { color: var(--text-invert); font-size: clamp(3.6rem, 5.6vw, 5.2rem); }
.vstat-band .vstat__bigsub { color: var(--text-invert); font-size: 1.05rem; margin-top: 8px; }
.vstat-band .vstat__rows { border-left-color: rgba(255, 255, 235, .24); }
.vstat-band .vstat__lbl { color: rgba(255, 255, 235, .85); }
.vstat-band .vstat__bar { background: rgba(255, 255, 235, .18); }
.vstat-band .vstat__bar i { background: var(--text-invert); }
.vstat-band .vstat__pct { color: var(--text-invert); }


@media (max-width: 760px) {
  .vs { grid-template-columns: 1fr; }
  .vstat__grid { grid-template-columns: 1fr; gap: 26px; }
  .vstat__rows { border-left: none; padding-left: 0; }
  /* MOBILE (2026-06-30): długie etykiety („Strona z kreatora", „Stara wizytówka")
     z white-space:nowrap nie mieściły się w wąskiej kolumnie 92px i WYLEWAŁY się NA
     słupek (nieczytelne). Układ rzędu pionowy: etykieta + % na górze, słupek pełnej
     szerokości pod spodem — zero nachodzenia, dłuższe słupki = łatwiej porównać. */
  .vstat__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "lbl pct" "bar bar";
    column-gap: 12px; row-gap: 9px; align-items: baseline;
  }
  .vstat__lbl { grid-area: lbl; white-space: normal; }
  .vstat__pct { grid-area: pct; }
  .vstat__bar { grid-area: bar; align-self: center; }
  /* pas na mobile: obraz za mały na nakładkę → chowamy go, wykres na samej zieleni */
  .vstat-band__pas { display: none; }
  .vstat-band__stage .vstat { position: static; transform: none; width: 100%; }
  .vstat-band__stage .vstat__grid { max-width: 600px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .vs__deco { display: none; }
  .vs__head { padding-right: 0; } /* brak naklejki → tytuł odzyskuje pełną szerokość */
}

/* --- PO CO CI TAKA STRONA (#po-co) — sekcja informacyjna, sama typografia ---
   Dużo tekstu (życzenie właściciela 2026-07-02): 6 argumentów „dlaczego strona
   od Climbly, a nie od korpo". Krem, bez makiet; siatka 2 kolumny, numery Figtree. */
.why__head { max-width: 640px; margin-inline: auto; text-align: center; }
.why__head .eyebrow { justify-content: center; }
.why__head .section-title { margin-bottom: 0; font-size: var(--fs-h2); line-height: 1.02; }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 2.6vw, 40px) clamp(24px, 2.8vw, 44px); margin-top: clamp(44px, 5.4vw, 76px); }
.why__item {
  padding: clamp(30px, 2.76vw, 44px);
  border: 1.5px solid var(--accent);
  border-radius: 20px;
  background: var(--accent);
}
.why__num { display: block; font-family: var(--font-accent); font-weight: 700; font-size: .85rem; letter-spacing: .14em; color: rgba(255, 255, 235, .6); }
.why__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.72rem, 2.53vw, 2.24rem); line-height: 1.15; letter-spacing: -.01em; color: var(--text-on-dark); margin: 14px 0; }
.why__item p { margin: 0; font-size: 1.15rem; line-height: 1.68; color: var(--muted-on-dark); }
/* Naprzemienność (szachownica przy 2 kolumnach): 01, 04, 05… = kremowe okienka */
.why__item:nth-child(4n+1),
.why__item:nth-child(4n) {
  background: var(--bg-light);
  border-width: 2px;
  box-shadow: 0 16px 40px -24px rgba(2, 22, 18, .55), inset 0 0 0 1px rgba(3, 79, 70, .1);
}
.why__item:nth-child(4n+1) .why__num,
.why__item:nth-child(4n) .why__num { color: var(--accent); }
.why__item:nth-child(4n+1) .why__t,
.why__item:nth-child(4n) .why__t { color: var(--text); }
.why__item:nth-child(4n+1) p,
.why__item:nth-child(4n) p { color: rgba(26, 27, 27, .86); }
@media (max-width: 760px) {
  .why__grid { grid-template-columns: 1fr; gap: 34px; }
  .why__item { max-width: none; }
  /* 1 kolumna → prosta naprzemienność krem/zieleń */
  .why__item:nth-child(even) { background: var(--accent); }
  .why__item:nth-child(even) .why__num { color: rgba(255, 255, 235, .6); }
  .why__item:nth-child(even) .why__t { color: var(--text-on-dark); }
  .why__item:nth-child(even) p { color: var(--muted-on-dark); }
  .why__item:nth-child(odd) { background: var(--bg-light); }
  .why__item:nth-child(odd) .why__num { color: var(--accent); }
  .why__item:nth-child(odd) .why__t { color: var(--text); }
  .why__item:nth-child(odd) p { color: rgba(26, 27, 27, .86); }
}

/* --- REALIZACJE: nagłówek własny (krem) --- */


/* --- REALIZACJE: siatka kart --- */


/* --- CO DOSTAJESZ — układ Wispr Flow (lewa adnotowana makieta + prawy akordeon) ---
   Wzór „Refine / Flow edits while you speak". Paleta zaadaptowana do Climbly (zieleń
   zamiast pomarańczu, akcent kolorem zamiast kursywy, krem zamiast zdjęcia AI). */
.refine__grid { display: grid; grid-template-columns: 0.96fr 1.04fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

/* LEWA — adnotowana karta (makieta wyniku Google / wizytówki lokalnej) */
/* align-self:start + STAŁA min-wysokość = MAKS. wysokość prawego panelu z otwartym
   punktem (zamknięty 602 → otwarty maks. 677 @desktop). Dzięki temu makieta jest OD
   RAZU dość wysoka, więc rozwinięty akordeon nigdy nie wychodzi poza jej krawędź,
   a sama makieta się nie rusza ani nie „rozwija". Karta+adnotacje to zwarty klaster
   (`.refine__card`) wyśrodkowany w tej wysokości — nadmiar to symetryczny oddech. */
.refine__visual {
  position: relative; align-self: start; min-height: 782px;
  display: grid; place-items: center;
  padding: clamp(30px, 3.6vw, 50px) clamp(22px, 3.4vw, 48px);
  border-radius: var(--radius-lg); border: 1px solid var(--line-light);
  background: radial-gradient(125% 120% at 28% 16%, rgba(3,79,70,.12), rgba(3,79,70,.02) 58%, transparent 100%), var(--bg-light);
  overflow: hidden;
}
/* zwarty klaster: karta + 4 adnotacje przypięte do JEJ rogów (nie do krawędzi
   panelu) — odstęp pigułka↔karta stały niezależnie od wysokości panelu. */
.refine__card { position: relative; width: min(414px, 100%); transform: scale(1.2); transform-origin: center; }
.glist {
  width: 100%; display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: var(--radius);
  background: var(--bg-light); border: 1px solid var(--line-light);
  box-shadow: 0 30px 60px -34px rgba(2,22,18,.4);
}
/* pasek wyszukiwarki — pełna pigułka jak w Google */
.glist__bar {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 15px; border-radius: 999px;
  background: var(--bg-light); border: 1px solid var(--line-light);
  box-shadow: 0 2px 8px -4px rgba(2,22,18,.28);
  font-size: .9rem; color: var(--text);
}
.glist__q { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glist__tools { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--text-muted); }
.glist__clear { font-size: 1.05rem; line-height: 1; color: var(--text-muted); }
.glist__div { width: 1px; height: 18px; background: var(--line-light); }
.glist__ti { width: 17px; height: 17px; color: var(--text-muted); }
.glist__go { width: 19px; height: 19px; color: var(--accent); }
/* zakładki rodzajów wyników (Wszystko · Mapy · …) */
.glist__tabs {
  display: flex; gap: 18px; padding: 0 2px;
  border-bottom: 1px solid var(--line-light);
  font-family: var(--font-accent); font-size: .78rem;
}
.glist__tab { position: relative; padding-bottom: 9px; color: var(--text-muted); white-space: nowrap; }
.glist__tab.is-active { color: var(--accent); font-weight: 700; }
.glist__tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.glist__stats { font-size: .72rem; color: var(--text-muted); margin-top: -2px; }
/* local pack */
.glist__local { display: flex; flex-direction: column; gap: 11px; }
.glist__map { position: relative; height: 92px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-light); background: rgba(3,79,70,.05); }
.glist__map svg { display: block; width: 100%; height: 100%; }
.glist__mapcred { position: absolute; right: 6px; bottom: 5px; font-size: .56rem; line-height: 1; color: var(--text-muted); background: rgba(255,255,235,.72); padding: 2px 5px; border-radius: 4px; }
/* wiersz wizytówki: treść + miniatura (jak wynik lokalny Google) */
.glist__row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.glist__rowmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.glist__name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; line-height: 1.18; color: var(--text); }
.glist__meta { font-size: .8rem; color: var(--text-muted); line-height: 1.35; }
.glist__thumb { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 12px; border: 1px solid var(--line-light); background: rgba(3,79,70,.06); display: grid; place-items: center; }
.glist__thumb .ic { width: 30px; height: 30px; color: var(--accent); }
.glist__act { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.glist__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-family: var(--font-accent); font-weight: 700; font-size: .76rem; background: transparent; border: 1px solid var(--line-light); color: var(--text); }
.glist__btn .ic { width: 14px; height: 14px; }
.glist__btn--call { background: rgba(26,27,27,.05); }
.glist__btn--cta { background: var(--accent); border-color: var(--accent); color: var(--bg-light); }
.glist__fresh { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .74rem; color: var(--text-muted); }
.glist__fresh .ic { width: 13px; height: 13px; color: var(--accent); }
/* wynik organiczny — link Google (breadcrumb → tytuł-link → snippet) */


/* adnotacje (zielony marker + pigułka) — pozycjonowane absolutnie nad makietą */
.rnote { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 3; pointer-events: none; }
.rnote__lbl {
  font-family: var(--font-accent); font-weight: 700; font-size: .92rem; line-height: 1;
  white-space: nowrap; display: block; width: 182px; text-align: center;
  padding: 9px 16px; border-radius: 999px;
  background: var(--bg-light); border: 1.6px solid var(--accent); color: var(--accent);
  box-shadow: 0 8px 20px -10px rgba(3,79,70,.55);
}
.rnote__mark { width: 84px; height: auto; opacity: .9; overflow: visible; }
/* 4 rogi karty: górne pigułki NAD kartą (strzałka w dół-do-środka), dolne POD
   kartą (w górę-do-środka). Wypchnięte symetrycznie w rogi (-12px poza krawędź)
   i zsunięte o ~10px w dół (góra: bliżej karty, dół: dalej). */
.rnote--seo   { bottom: calc(100% + 14px); left: -12px;  align-items: flex-end; }
.rnote--care  { bottom: calc(100% + 14px); right: -12px; align-items: flex-start; }
.rnote--phone { top: calc(100% - 25px); left: -12px;  flex-direction: column-reverse; align-items: flex-start; }
.rnote--form  { top: calc(100% - 25px); right: -12px; flex-direction: column-reverse; align-items: flex-start; }

/* PRAWA — eyebrow → nagłówek → akapit → akordeon */
.refine__title { font-size: var(--fs-h2-sm); line-height: 1.02; letter-spacing: -.025em; margin-top: var(--eyebrow-gap); }
.refine__lead { margin-top: 18px; max-width: 46ch; font-size: 1.06rem; line-height: 1.6; color: var(--text-muted); }
.refine__acc { margin-top: clamp(22px, 3vw, 36px); }
/* chevron zamiast +/- (bliżej oryginału Wispr) */
.refine__acc .acc__q .acc__chev { flex: 0 0 auto; width: 11px; height: 11px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.refine__acc .acc.open .acc__q .acc__chev { transform: rotate(-135deg) translateY(-2px); border-color: var(--accent); }
.refine__acc .acc.open .acc__q { color: var(--accent); }

/* --- RWD nowych komponentów --- */
@media (max-width: 1040px) {
  /* 1 kolumna: ciemna karta-toc ląduje NAD panelami jako kompaktowy pasek sticky-top
     (tylko tytuły w rzędzie; nagłówek i opisy schowane). Aktywny tytuł koloruje/rośnie. */
  .anat { grid-template-columns: 1fr; gap: 0; }
  .anat__toc { position: sticky; top: 56px; transform: none; order: -1; z-index: 2; min-height: 0; display: block;
    margin-top: 0; margin-bottom: clamp(20px, 4vw, 32px); padding: 12px 16px; border-radius: 14px; }
  .anat__tochead, .anat__tocdesc { display: none; }
  .anat__list { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
  .anat__tocitem { border-top: 0; padding: 0; gap: 7px; }
  .anat__tocno { padding-top: 1px; }
  .anat__toctitle { font-size: .92rem; }
  .anat__tocitem.is-active .anat__toctitle { font-size: 1.02rem; }
  /* width:100% — bez tego margin-inline:auto na grid-itemie wyłącza stretch i panele
     zapadają się do min-content paska przeglądarki (~153px). */
  .anat__panels { padding: 0; gap: clamp(36px, 7vw, 64px); width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 880px) {


  .refine__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  /* 1 kolumna: makieta niezależna od akordeonu; min-height mieści klaster z pigułkami */
  .refine__visual { min-height: 760px; order: 2; }
  .refine__panel { order: 1; }
}
@media (max-width: 560px) {

  /* na wąskim ekranie adnotacje schodzą z makiety (jak w oryginale Wispr — uproszczenie) */
  .rnote { display: none; }
  /* bez pigułek klaster = sama karta → panel może się skurczyć */
  .refine__visual { min-height: 0; padding: 24px 16px; display: block; }
  /* Karta WYŚRODKOWANA w panelu. Grid place-items:center przy paddingu źle liczył
     szerokość karty (min(414px,100%)) → karta zbijała się w prawo i muskała ramkę.
     display:block na panelu + margin auto na karcie = pewne, symetryczne centrowanie. */
  .refine__card { margin-inline: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shero h1 .word, .shero__lead, .shero__actions, .shero__proofs, .shero__kicker, .shero__scaler { opacity: 1; animation: none; transform: none; }

}

/* =================================================================
   oferta-marketing.html — Interaktywny marketing (wartościowe leady)
   Klasy sg-mk-*. Paleta: krem #FFFFEB / czerń #1A1B1B / zieleń #034F46.
   ================================================================= */

/* ---------- 1. HERO — radar lokalny (pełny ekran + peek nastepnej sekcji) ---------- */
.sg-mk-hero {
  position: relative; overflow: hidden; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + clamp(28px, 5vh, 70px));
  /* +radius-cap = kompensacja czapki (.sg-cap margin-top:-radius-cap) sekcji 02, ktora wystaje u dolu */
  padding-bottom: calc(clamp(28px, 5vh, 70px) + var(--radius-cap));
}
.sg-mk-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  align-items: center; gap: clamp(28px, 3.4vw, 60px);
}
.sg-mk-hero__text { max-width: 53rem; }
.sg-mk-hero .eyebrow { font-size: var(--fs-eyebrow); padding: 9px 19px; letter-spacing: .13em; }
.sg-mk-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  /* nowrap + rozmiar dobrany tak, by najdłuższa linia mieściła się w kolumnie
     → nagłówek zawsze ma DOKŁADNIE 2 linie (łamie tylko .sg-mk-hero__brk) */
  white-space: nowrap;
  font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.025em;
  margin-top: var(--eyebrow-gap); color: var(--text);
}
.sg-mk-hero__brk { display: block; height: 0; }
.sg-mk-hero .word { display: inline-block; opacity: 0; transform: translateY(34px); animation: wordIn .8s var(--ease) forwards; }
.sg-mk-hero__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 42ch; margin-top: 22px; line-height: 1.58; opacity: 0; animation: fadeUp 1s var(--ease) .85s forwards; }
/* Krótszy lead — tylko na telefonie (≤900). Domyślnie pełny widoczny, skrót ukryty. */
.sg-mk-hero__lead--sm { display: none; }


.sg-mk-hero__actions { margin-top: 30px; opacity: 0; animation: fadeUp 1s var(--ease) 1.1s forwards; }

/* MarketingFunnelVisual — lejek weryfikacji 3D (SVG; paleta: krem/czerń/zieleń) */
/* Lejek dominuje prawą stronę jak laptop na „strony": prawa krawędź wizualu
   dosunięta do krawędzi viewportu (ujemny margines = wyjście z kolumny .wrap),
   a szerokość rośnie z viewportem — ograniczona wysokością okna (svh), by lejek
   nigdy się nie ucinał (jest niemal kwadratowy, więc szer.≈wys.). */
.sg-mk-hero__visual { display: flex; justify-content: flex-end; margin-right: min(0px, calc((var(--maxw) - 100vw) / 2)); }
.sg-mk-funnel { position: relative; width: min(calc(50vw - 130px), 70svh); opacity: 0; animation: fadeUp 1.1s var(--ease) .4s forwards; }
/* right: 80px = przesunięcie lejka o 80px w lewo bez zmiany rozmiaru (offset
   pozycyjny nie rusza flex-shrink). Tylko ≥1280px: na węższym desktopie kolumny
   stoją zbyt blisko i lejek wszedłby na nagłówek. */
@media (min-width: 1280px) { .sg-mk-funnel { right: 80px; } }
.sg-mk-fn__svg { position: relative; width: 100%; height: auto; display: block; overflow: visible; }

/* bryła lejka — baza + żebra konturowe (efekt 3D) */
.sg-mk-fn__body { fill: rgba(3, 79, 70, .13); stroke: rgba(3, 79, 70, .26); stroke-width: 1.25; stroke-linejoin: round; }
.sg-mk-fn__bands ellipse { stroke: none; }
.sg-mk-fn__ribs ellipse { fill: none; stroke: rgba(3, 79, 70, .4); stroke-width: 1.5; }
.sg-mk-fn__ribs ellipse.is-top { stroke: rgba(3, 79, 70, .52); stroke-width: 2.2; }
.sg-mk-fn__rim { fill: none; stroke: rgba(3, 79, 70, .3); stroke-width: 1.2; }

/* szum / odrzucony ruch */
.sg-mk-fn__noise circle { fill: rgba(26, 27, 27, .2); }

/* awatary */
.mka--ok { color: var(--brand); }
.mka--no { color: rgba(26, 27, 27, .34); }

/* etykiety pierścieni — kremowa poświata (paint-order) dla czytelności na zielonych pasach */
.sg-mk-fn__ring-label {
  fill: var(--brand); font-family: var(--font-accent); font-size: 13px; font-weight: 700;
  letter-spacing: .01em; text-anchor: middle;
  paint-order: stroke; stroke: #FFFFEB; stroke-width: 4.2px; stroke-linejoin: round; stroke-linecap: round;
}
.sg-mk-fn__ring-label--sm { font-size: 12px; font-weight: 700; fill: var(--brand); stroke-width: 3.6px; }

/* kwalifikacja — żetony produktów wtopione w pierścień (kremowy krążek = czytelność na zieleni) */
.sg-mk-fn__tok-bg { fill: rgba(255, 255, 235, .94); stroke: rgba(3, 79, 70, .34); stroke-width: 1.25; }
.sg-mk-fn__pic { color: var(--brand); }
.sg-mk-fn__city {
  fill: var(--brand); font-family: var(--font-accent); font-size: 9px; font-weight: 600; text-anchor: middle;
  paint-order: stroke; stroke: #FFFFEB; stroke-width: 2.6px; stroke-linejoin: round; stroke-linecap: round;
}

/* linie spływu leadów (spokojne, ciągłe) */
.sg-mk-fn__flow path { fill: none; stroke: rgba(3, 79, 70, .3); stroke-width: 1.5; stroke-linecap: round; }

/* karty leadów — ciemne, premium */
.sg-mk-fn__card { fill: var(--brand); }
.sg-mk-fn__lead-ic { color: #FFFFEB; }
.sg-mk-fn__lead-t { fill: #FFFFEB; font-family: var(--font-accent); font-size: 13.5px; font-weight: 700; }
.sg-mk-fn__lead-s { fill: rgba(255, 255, 235, .72); font-family: var(--font-accent); font-size: 10.5px; font-weight: 500; }

/* legenda */
.sg-mk-fn__legend { display: flex; justify-content: center; gap: 20px; margin-top: 18px; font-family: var(--font-accent); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sg-mk-fn__legend span { display: inline-flex; align-items: center; gap: 7px; }
.sg-mk-fn__legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.sg-mk-fn__legend .is-ok::before { background: var(--brand); }
.sg-mk-fn__legend .is-no::before { background: rgba(26, 27, 27, .3); }

/* ---------- ruch: subtelne ożywienie lejka (CSS, bez JS) ---------- */
/* awatary nad kołnierzem delikatnie unoszą się (translate składa się z transform-atrybutu pozycji) */
.sg-mk-fn__avatars use { animation: mkAvaFloat 4.6s ease-in-out infinite; }
.sg-mk-fn__avatars use:nth-child(2) { animation-delay: .35s; }
.sg-mk-fn__avatars use:nth-child(3) { animation-delay: .7s; }
.sg-mk-fn__avatars use:nth-child(4) { animation-delay: 1.05s; }
.sg-mk-fn__avatars use:nth-child(5) { animation-delay: .5s; }
.sg-mk-fn__avatars use:nth-child(6) { animation-delay: .9s; }
.sg-mk-fn__avatars use:nth-child(7) { animation-delay: .2s; }
@keyframes mkAvaFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.6px; } }

/* górny pierścień + kołnierz subtelnie „oddychają" */
.sg-mk-fn__ribs ellipse.is-top, .sg-mk-fn__rim { animation: mkRingBreath 5.4s ease-in-out infinite; }
@keyframes mkRingBreath { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .58; } }

/* miętowy impuls wędruje z gardła linią spływu do karty leada */
.sg-mk-fn__flow-anim path {
  fill: none; stroke: var(--brand); stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 9 200; stroke-dashoffset: 9; opacity: .92;
  animation: mkFlowPulse 2.7s var(--ease) infinite;
}
.sg-mk-fn__flow-anim .mkfl--2 { animation-delay: .55s; }
.sg-mk-fn__flow-anim .mkfl--3 { animation-delay: 1.1s; }
@keyframes mkFlowPulse { 0% { stroke-dashoffset: 9; } 58%, 100% { stroke-dashoffset: -100; } }

@media (max-width: 900px) {
  .sg-mk-hero { min-height: auto; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 84px; }
  .sg-mk-hero__inner { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 48px); }
  /* 1 kolumna: tekst pełnej szerokości → nagłówek może zawijać się naturalnie
     (nowrap z desktopu wypchnąłby h1 poza wąski ekran).
     Min 2.6rem: H1 strony musi być większy od wszystkich .section-title (38.4px). */
  .sg-mk-hero h1 { white-space: normal; }
  /* Telefon: cały blok tekstu wyśrodkowany (eyebrow-badge to inline-flex → text-align centruje). */
  .sg-mk-hero__text { text-align: center; }
  .sg-mk-hero__lead { margin-left: auto; margin-right: auto; }
  /* Zamiana leadów: pełny znika, krótki (skrócony pod telefon) wchodzi. */
  .sg-mk-hero__lead--lg { display: none; }
  .sg-mk-hero__lead--sm { display: block; }
  .sg-mk-hero__actions { text-align: center; }
  .sg-mk-hero__visual { order: 2; margin-right: 0; justify-content: center; }
  .sg-mk-funnel { width: min(90%, 460px); }
  /* Legenda pod lejkiem: wpisy NIE ściskają się (ściśnięte łamały się do 2 wierszy
     i dosuwały do krawędzi = pozornie „do lewej"). Zamiast tego łamie się cały RZĄD:
     każdy wpis w jednej linii, a wiersze pozostają wyśrodkowane (justify-content:center). */
  .sg-mk-fn__legend { flex-wrap: wrap; gap: 8px 20px; }
  .sg-mk-fn__legend span { flex: 0 0 auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-mk-hero .word, .sg-mk-hero__lead, .sg-mk-hero__proofs, .sg-mk-hero__actions, .sg-mk-funnel,
  .sg-mk-fn__avatars use, .sg-mk-fn__ribs ellipse.is-top, .sg-mk-fn__rim, .sg-mk-fn__flow-anim path {
    opacity: 1; animation: none; transform: none; translate: none;
  }
  .sg-mk-fn__flow-anim path { opacity: 0; }
}

/* ====== 2. ETAPY LEADA — interaktywne plakietki (wzór Wispr „Made for the way you work") ======
   Układ 2×2: LEWA-góra intro / PRAWA-góra grafika (4 stany) / LEWA-dół plakietki / PRAWA-dół detal.
   Plakietka steruje grafiką i detalem (JS initMkStage toggluje .is-shown). Akcent = mięta na czerni. */
/* wysokość dostrojona do sekcji Wispr „Made for the way you work" — niższe pady niż globalne
   .section (treść tu gęstsza: eyebrow + 3-wierszowy sub + detal), żeby total ≈ wysokość Wispr.
   KARTA jak Wispr: PEŁNA szerokość (dotyka krawędzi, BEZ bocznych rynien), zaokrąglone
   WSZYSTKIE 4 rogi, krem TYLKO nad/pod (margin-block); zamiast „czapki" sg-cap (zaokrąglała
   tylko górę na sekcję nad). Tło body = krem, więc odstępy góra/dół są kremowe i odsłaniają rogi. */
.sg-mk-stage {
  /* GÓRA mała — treść (eyebrow) ma sięgać maks. do paska, bez martwego czarnego pola.
     DÓŁ jak dotąd. */
  padding-top: clamp(26px, 2.2vw, 32px);
  padding-bottom: clamp(42px, 3.5vw, 66px);
  /* TOP = ujemny --radius-cap: czarna karta wystaje 44px w dół hero (peek 1:1 z landingiem,
     hero rezerwuje +44px padding-bottom). DÓŁ = kremowy odstęp jak dotąd. */
  margin-top: calc(-1 * var(--radius-cap));
  margin-bottom: clamp(10px, 1.3vw, 18px);
  border-radius: clamp(36px, 5.4vw, 92px);   /* duży, łagodny łuk jak Wispr (było 50px — za ciasno) */
}
.sg-mk-stage__inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  grid-template-areas: "intro art" "tabs detail";
  gap: clamp(20px, 2.2vw, 34px) clamp(40px, 6vw, 96px);
  align-items: start;
}
.sg-mk-stage__intro { grid-area: intro; }
/* DUŻY nagłówek jak Wispr „Made for the way you work" — wypełnia lewą stronę (było za pusto).
   EB Garamond, akcent dalej tylko kolorem (mięta), nie kursywą/innym krojem (§8). */
.sg-mk-stage__intro .section-title {
  margin-top: var(--eyebrow-gap);
  font-size: var(--fs-h2-xl);
  line-height: 1.0;
  letter-spacing: -.03em;
}
.sg-mk-stage__intro .section-sub { margin-top: clamp(20px, 2.6vw, 30px); max-width: 42ch; }

/* PRAWA-GÓRA: grafika — WOLNOSTOJĄCA ilustracja jak Wispr (bez ramki/tła), wyrównana
   do prawej-góry; 4 figury grid-stack, jedna widoczna (.is-shown). */
.sg-mk-stage__art { grid-area: art; display: grid; justify-items: end; align-content: start; }
.sg-mk-stage__fig {
  grid-area: 1 / 1; margin: 0;
  display: flex; align-items: flex-start; justify-content: flex-end;
  color: var(--accent-on-dark);
  opacity: 0; visibility: hidden; transform: scale(.98);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.sg-mk-stage__fig.is-shown { opacity: 1; visibility: visible; transform: none; }
.sg-mk-stage__fig svg { width: clamp(240px, 28vw, 380px); height: auto; }
/* Etap 01 = zdjęcie zamiast rysunku. Sterujemy WYSOKOŚCIĄ (nie szerokością): kadr jest
   ~kwadratowy, więc gdyby rządziła szerokość, figura byłaby wyższa od kolumny intro
   i WYDŁUŻAŁABY sekcję. Wysokość ≤ intro → o wysokości wiersza decyduje intro,
   a długość strony zostaje taka jak wcześniej. Szerokość auto = proporcje zachowane. */
.sg-mk-stage__fig--photo { display: block; }
.sg-mk-stage__fig--photo img {
  height: clamp(220px, 26vw, 300px); width: auto; max-width: 100%;
  display: block;
}

/* Etap 01 (Zapytanie) — ręcznie dostrojona pozycja/skala grafiki (zatwierdzone).
   Bez clipu na .art, by przesunięta grafika nie była ucinana; z-index trzyma ją
   nad sąsiednimi elementami (jak w trybie edycji). Wartości w px = tylko desktop. */
.sg-mk-stage__art,
.sg-mk-stage__art.in { overflow: visible; clip-path: none; }
@media (min-width: 901px) {
  .sg-mk-stage__fig[data-art="0"] :is(img, svg) {
    transform: translate(-270px, 43px) scale(1.25);
    transform-origin: center center;
    position: relative; z-index: 2;
  }
  .sg-mk-stage__fig[data-art="1"] :is(img, svg) {
    transform: translate(-342px, 57px) scale(1.55);
    transform-origin: center center;
    position: relative; z-index: 2;
  }
  .sg-mk-stage__fig[data-art="2"] :is(img, svg) {
    transform: translate(-336px, 66px) scale(1.45);
    transform-origin: center center;
    position: relative; z-index: 2;
  }
  .sg-mk-stage__fig[data-art="3"] :is(img, svg) {
    transform: translate(-340px, 70px) scale(1.4);
    transform-origin: center center;
    position: relative; z-index: 2;
  }
}

/* LEWA-DÓŁ: plakietki etapów (mniejsze i ciaśniejsze jak Wispr; AKTYWNA przekrzywia się) */
.sg-mk-stage__tabs { grid-area: tabs; display: flex; flex-wrap: wrap; gap: 12px 12px; align-content: start; align-self: center; }
/* wymusza złamanie po 3. plakietce: „04 Montaż" spada do dolnego rzędu */
.sg-mk-stage__tbreak { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
.sg-mk-stage__tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(116, 211, 190, .4); background: rgba(116, 211, 190, .06);
  font-family: var(--font-accent); font-size: 1.06rem; font-weight: 600; color: var(--text-on-dark);
  cursor: pointer; transform: rotate(0deg);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.sg-mk-stage__tnum { font-size: .82rem; letter-spacing: .08em; color: var(--accent-on-dark); transition: color .3s var(--ease); }
/* Cała LEWA kolumna (intro + plakietki) zsunięta w dół o (padding-bottom − padding-top),
   żeby odstęp NAD treścią równał się odstępowi POD przyciskiem „Zapytaj o wycenę"
   (przycisk leży równo z dolną krawędzią inner = padding-bottom). Tylko 2-kolumnowy desktop;
   ≤900px layout jest 1-kolumnowy, więc zsuw nie obowiązuje. translateY = bez wpływu na wysokość karty. */
@media (min-width: 901px) {
  .sg-mk-stage__intro,
  .sg-mk-stage__tabs {
    transform: translateY(calc(clamp(42px, 3.5vw, 66px) - clamp(26px, 2.2vw, 32px)));
  }
}
@media (hover: hover) {
  .sg-mk-stage__tab:not(.is-on):hover { border-color: var(--accent-on-dark); transform: translateY(-1px); }
}
/* aktywna plakietka = pełna mięta + obrót (signature Wispr „tilt") */
.sg-mk-stage__tab.is-on {
  background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--black);
  transform: rotate(-3deg) scale(1.05);
}
.sg-mk-stage__tab.is-on .sg-mk-stage__tnum { color: rgba(26, 27, 27, .6); }

/* PRAWA-DÓŁ: detal — 4 panele grid-stack (wysokość = najwyższy panel) + stałe CTA */
.sg-mk-stage__detail { grid-area: detail; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 3vw, 30px); align-self: center; }
.sg-mk-stage__panels { display: grid; width: 100%; }
.sg-mk-stage__panel {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.sg-mk-stage__panel.is-shown { opacity: 1; visibility: visible; transform: none; }
.sg-mk-stage__panel h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h3-lg); line-height: 1.1; letter-spacing: -.02em;
  color: var(--text-on-dark);
}
.sg-mk-stage__panel p {
  margin-top: clamp(12px, 1.6vw, 18px); max-width: 46ch;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.62; color: var(--muted-on-dark);
}
.sg-mk-stage__cta { margin-top: 2px; }

/* ---------- mobile: jedna kolumna, kolejność intro → grafika → plakietki → detal ---------- */
@media (max-width: 900px) {
  .sg-mk-stage__inner { grid-template-columns: 1fr; grid-template-areas: "intro" "art" "tabs" "detail"; }
  /* Intro etapów („Od reklamy do montażu") miało min 3rem (48px) > H1 hero — odwrócona
     hierarchia; na mobile schodzimy do skali zwykłego tytułu sekcji. Ten override musi
     siedzieć TUTAJ (po regule bazowej ~4472) — blok ≤900 hero leży PRZED nią i przegrywa
     kolejnością w pliku przy równej specyficzności. */
  .sg-mk-stage__intro .section-title { font-size: clamp(2.4rem, 6vw, 3.1rem); }
  .sg-mk-stage__intro .section-sub { max-width: 56ch; }
  /* Plakietki etapów: czysta siatka 2×2 (01|02 / 03|04). Na desktopie
     flex-wrap + __tbreak daje układ 3+1; na telefonie ten sam break wypychał
     „04 Montaż" do trzeciego rzędu (01 02 / 03 / 04). Grid 2-kol = 04 ląduje
     pod 02. max-width trzyma plakietki w rozsądnej szerokości na tablecie. */
  .sg-mk-stage__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 480px; }
  .sg-mk-stage__tbreak { display: none; }
  .sg-mk-stage__fig { max-width: 480px; margin-inline: auto; width: 100%; }
  .sg-mk-stage__fig--photo img { height: auto; width: 100%; }   /* mobile: pełna szerokość, bez limitu wys. */
  /* #4 (2026-06-30): 4 figury leżą w jednej komórce grida (grid-area:1/1) → kontener
     ma wysokość NAJWYŻSZEJ (wysokie zdjęcia), a widoczne ~kwadratowe „Zapytanie"
     zostawia pod sobą pustkę → grafika odjeżdża od taba/tekstu pod spodem. Na mobile
     tylko aktywna figura zajmuje miejsce → wysokość = aktywna grafika, pustka znika.
     .art jako blok (nie grid) — inaczej align-content/justify-items + overflow:visible
     spychały figurę w dół i nachodziła na taby. */
  .sg-mk-stage__art { display: block; }
  .sg-mk-stage__fig { display: none; }
  .sg-mk-stage__fig.is-shown { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-mk-stage__fig, .sg-mk-stage__panel { transition: opacity .2s linear, visibility .2s; transform: none; }
  .sg-mk-stage__tab.is-on { transform: none; }
}

/* ---------- 3. CO PRZEJMUJEMY OD CIEBIE (krem; klient nic nie dostarcza) ---------- */
.sg-mk-take__inner { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 90px); align-items: start; }
.sg-mk-take__head { position: sticky; top: calc(var(--nav-h) + 30px); }
.sg-mk-take__split { display: flex; flex-direction: column; gap: 7px; margin-top: clamp(24px, 3vw, 32px); }
.sg-mk-take__split span { position: relative; padding-left: 20px; font-family: var(--font-accent); font-size: .9rem; font-weight: 600; letter-spacing: .01em; color: var(--text-muted); }
.sg-mk-take__split span::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; }
.sg-mk-take__split span:nth-child(1)::before { background: rgba(26, 27, 27, .25); }
.sg-mk-take__split span:nth-child(2)::before { background: var(--accent); }

.sg-mk-take__cta { margin-top: clamp(26px, 3.2vw, 36px); }

/* Stos kart „akordeon" jak Wispr /why-flow: każda karta przykleja się do góry,
   następna (pełne zielone tło) nasuwa się od dołu i ją zakrywa — czysty CSS sticky. */
.sg-mk-take__list { display: block; }
.sg-mk-take__row { display: flex; flex-direction: column; gap: clamp(15px, 1.7vw, 20px); padding: clamp(24px, 2.5vw, 32px); border-radius: clamp(18px, 1.6vw, 24px); background: var(--accent); color: var(--text-on-dark);
  /* TALIA KART (Wispr): każda kolejna karta przykleja się o --peek niżej, więc spod
     spodu wystaje pasek poprzedniej — widać cały stos, a nie jeden punkt.
     --i = indeks karty (ustawiany per nth-child poniżej). */
  --stack-top: calc(var(--nav-h) + clamp(40px, 7vh, 80px));
  --peek: 12px; --i: 0;
  position: sticky; top: calc(var(--stack-top) + var(--peek) * var(--i));
  margin-bottom: clamp(16px, 1.8vw, 22px);
  /* Brak rozmytej poświaty — przy nasuwaniu kart liczy się tylko czysta, WYRAŹNA
     czarna kreska na styku (jak talia kart Wispr Flow): mocna czerń u góry karty
     + cienki rozjaśniony kant pod nią, żeby krawędź czytała się jak rant talii. */
  box-shadow: inset 0 1.5px 0 rgba(26, 27, 27, .85), inset 0 2.5px 0 rgba(255, 255, 235, .10); }
.sg-mk-take__row:nth-child(2) { --i: 1; }
.sg-mk-take__row:nth-child(3) { --i: 2; }
.sg-mk-take__row:nth-child(4) { --i: 3; }
.sg-mk-take__row:nth-child(5) { --i: 4; }
.sg-mk-take__row:nth-child(6) { --i: 5; }
.sg-mk-take__row:nth-child(7) { --i: 6; }
.sg-mk-take__row:nth-child(8) { --i: 7; }
.sg-mk-take__row:last-child { margin-bottom: 0; }
/* ikona: doodle „od ręki", cienka zaokrąglona kreska, bez ramki — jak line-art Wispr */
.sg-mk-take__ico { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; color: var(--accent-on-dark); }
.sg-mk-take__ico svg { width: 34px; height: 34px; }
.sg-mk-take__body h3 { font-size: var(--fs-h3); line-height: 1.16; margin-bottom: clamp(10px, 1vw, 13px); color: var(--text-on-dark); }
.sg-mk-take__body p { font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.5; color: rgba(255, 255, 235, .78); max-width: 44ch; }

@media (max-width: 860px) {
  .sg-mk-take__inner { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 44px); }
  .sg-mk-take__head { position: static; }
  /* na wąskim ekranie karta bywa wyższa niż ekran — sticky-stos się rwie; lista płynie normalnie */
  .sg-mk-take__row { position: static; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-mk-take__row { position: static; box-shadow: none; }
}

/* ---------- 3a. JAK TO SPINAMY — ciemna karta 1:1 wg sekcji „Collaborate" Wispr Flow ----------
   Kształt karty jak .sg-mk-stage (czarna, WSZYSTKIE 4 rogi zaokrąglone, krem tylko
   nad/pod przez margin-block — tło body odsłania rogi). Układ: GÓRA = intro (pigułka,
   nagłówek, sub, przycisk) + miejsce na grafikę po prawej; DÓŁ = 3 karty z ikonami.
   Paleta: czerń + krem + mięta (akcent na ciemnym) — reszta 1:1 z Wispr. */
.sg-mk-flow {
  margin-block: clamp(10px, 1.3vw, 18px);
  border-radius: clamp(36px, 5.4vw, 92px);
  padding-block: clamp(56px, 6.5vw, 96px) clamp(48px, 5vw, 80px);
}
.sg-mk-flow__top {
  display: grid;
  /* kolumna grafiki poszerzona (+20% wielkości schematu wobec poprzedniej
     wersji) — tekst ma max-width: 38ch (patrz niżej), więc bezpiecznie
     znosi węższą kolumnę bez zawijania w niekorzystnym miejscu */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.62fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 76px);
}
/* Nagłówek jak u Wispr „Work better together…" — 2 wiersze, akcent TYLKO kolorem (mięta, §8).
   min-width 6.9em = szerokość najdłuższego wiersza 2-liniowego łamania („z całą Twoją firmą.")
   — nagłówek może wejść w gap siatki (28–80px), żeby NIGDY nie łamał się na 3 wiersze;
   em skaluje się z fontem, więc trzyma na każdej szerokości dwukolumnowej */
.sg-mk-flow__intro .section-title { margin: var(--eyebrow-gap) 0 0; font-size: var(--fs-h2); line-height: 1.08; min-width: 6.9em; }
.sg-mk-flow__intro .section-sub { margin-top: clamp(16px, 1.8vw, 24px); max-width: 38ch; }
/* Przycisk pod tekstem — odpowiednik „Learn more" */
.sg-mk-flow__cta { margin-top: clamp(26px, 3.2vw, 46px); }
/* PRAWA: zarezerwowane miejsce na grafikę (placeholder [do uzupełnienia]) —
   proporcje jak ilustracja Wispr (szeroka, wyrównana do prawej-góry) */
.sg-mk-flow__art { display: flex; justify-content: flex-end; align-self: center; }
/* schemat bez ramki — tło grafiki wypalone na var(--black) = tło sekcji,
   więc wtapia się bezszwowo (brak prostokąta/obwódki); szerokość = pełna
   kolumna siatki, żeby wielkościowo równoważył blok tekstu po lewej */
.sg-mk-flow__art-img {
  width: 100%; height: auto; display: block;
}
/* 3 karty jak u Wispr: cienka ramka, duży promień, ikona u góry, DUŻA przerwa,
   serifowy tytuł, mniejszy opis */
.sg-mk-flow__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 28px); }
.sg-mk-flow__item {
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.8vw, 42px) clamp(24px, 2.6vw, 36px) clamp(30px, 3.2vw, 46px);
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  background: rgba(255, 255, 235, .02);
  /* kontener zapytań — tytuł karty skaluje się od SZEROKOŚCI KARTY (cqw),
     więc najdłuższy nagłówek zawsze mieści się w JEDNEJ linii */
  container-type: inline-size;
}
.sg-mk-flow__ico { color: var(--accent); }
.sg-mk-flow__ico svg { width: 44px; height: 44px; }
.sg-mk-flow__item h3 {
  margin-top: clamp(48px, 5.4vw, 92px);
  font-family: var(--font-display); font-weight: 400;
  /* wyraźnie większe niż karty „Dlaczego my"; tytuł może zawijać się w 2 linie */
  font-size: var(--fs-h3-lg);
  line-height: 1.1; letter-spacing: -.01em;
  color: var(--text-on-dark);
}
.sg-mk-flow__item p { margin-top: clamp(16px, 2vw, 28px); font-size: 1.22rem; line-height: 1.55; color: rgba(255, 255, 235, .78); }
@media (max-width: 860px) {
  .sg-mk-flow__top { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); margin-bottom: clamp(32px, 7vw, 48px); }
  .sg-mk-flow__art { justify-content: stretch; }
  .sg-mk-flow__art-img { width: 100%; }
  .sg-mk-flow__grid { grid-template-columns: 1fr; }
  /* na wąskim ekranie duża pauza ikona→tytuł traci sens — skracamy */
  .sg-mk-flow__item h3 { margin-top: clamp(22px, 6vw, 36px); }
}


/* =================================================================
   INWERSJA oferta-ai (2026-06-27): hero ai-demo = KREM, sekcja
   „Co automatyzujemy" = CIEMNA. Adaptacja elementów hero dostrojonych
   wcześniej pod czerń + ciemny wariant kafelków .perk.
   ================================================================= */

/* Hero na kremie: bez winiety — pas kanałów pozostaje w pełni widoczny
   (właściciel nie chce, by ikony zanikały). */
.section--light.ai-demo .ai-demo__scrim {
  background: none;
}
/* proofs: podpisy z muted-on-dark → przygaszony tekst na kremie. */
.section--light.ai-demo .ai-demo__proofs span { color: var(--text-muted); }

/* Cień telefonu na kremie: bazowy cień był projektowany pod ciemne hero
   (ogromny rozrzut + miętowa poświata). Tu pod telefonem jest tylko niewielki
   luz do ciemnej sekcji (cap -36px), która zachodzi na hero i ZAKRYWA dolną
   część każdego rzucanego cienia → twarda krawędź 90°. Dlatego ZERO rzucanego
   cienia — tylko 1px obrys przy samej krawędzi (offset 0, blur 0), który nie
   ma jak sięgnąć w dół i czegokolwiek przyciąć. */
.section--light.ai-demo .phone {
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* Sekcja „Co automatyzujemy" na ciemnym: kafelki .perk w wariancie
   ciemnym (szklane tło zamiast kremowych kart). */
.section--dark .perk {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.10);
}
.section--dark .perk:hover { box-shadow: 0 20px 40px rgba(0,0,0,.32); border-color: var(--accent); }
.section--dark .perk p { color: var(--muted-on-dark); }

/* Układ Wispr „Speak naturally" dla sekcji „Co automatyzujemy":
   góra = nagłówek po lewej + ilustracja po prawej, dół = rząd 4 kart outline.
   Padding zwężony vs globalny .section — blok ciaśniejszy, bliżej Wispr. */
.aiw { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(88px, 7vw, 104px); }
.aiw__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 44px);
}
.aiw__head { max-width: 620px; }
.aiw__head .section-title { margin-bottom: 0; }
.aiw__head .section-sub { margin-top: 20px; }
/* Miejsce na ilustrację (właściciel podmieni na własną grafikę w palecie). */
.aiw__art {
  align-self: stretch;
  min-height: clamp(220px, 22vw, 300px);
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}

/* Wariant z prawdziwą grafiką: bez ramki-kreski, sterowanie zmiennymi.
   --ai-box-h = wysokość okna (kadru) · --ai-img-w = rozmiar grafiki · --ai-x/--ai-y = pozycja.
   Wartości dobrane ręcznie. Uwaga: realna wysokość kadru = min(--ai-box-h, min-height .aiw__art ≈300px);
   przy 120px box zostaje przy 300px, więc wysokość sekcji jest taka jak zawsze (NIE zmienia się). */
/* Wariant „CRM": szeroka grafika (16:9, tło w palecie) wypełnia prawą kolumnę.
   Tło grafiki jest pełne (#1B1B1B ≈ czerń marki), więc traktujemy ją jak świadomy
   ciemny panel: zaokrąglone rogi przycinają obraz, a delikatny cień odrywa kartę
   od kremu. Bez maski wtapiającej w krem (dawała brudną szarą obwódkę). */
.aiw__art--crm {
  display: block;
  border: none;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #1A1B1B;
  box-shadow: 0 18px 50px -28px rgba(26, 27, 27, .45);
}
.aiw__art--crm img {
  display: block;
  width: 100%;
  height: auto;
}
/* Grafika ~12% większa: szersza kolumna obrazu w siatce (cały kadr widoczny,
   nic nie ucinane — w przeciwieństwie do transform:scale, który wychodził poza
   overflow-x:clip na .page-crm i przycinał krawędzie). Tylko podstrona CRM,
   tylko desktop — na mobile siatka i tak zwija się do 1 kolumny. */
@media (min-width: 1025px) {
  .page-crm .aiw__top {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 48px;   /* węższy odstęp → te ~16px idą w obraz, nie kosztem nagłówka (zostaje w 2 liniach) */
  }
}
.aiw__art--img {
  --ai-box-h: 120px;
  --ai-img-w: 526px;
  --ai-x: -26px;
  --ai-y: 7px;
  display: block;            /* nadpisuje grid z .aiw__art — inaczej img zostaje kwadratem i jest przycinany */
  position: relative;
  border: none;
  padding: 0;
  overflow: hidden;
  height: var(--ai-box-h, clamp(220px, 22vw, 300px));
}
.aiw__art--img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ai-img-w, clamp(220px, 22vw, 300px));
  height: auto;              /* grafika kwadratowa → wysokość podąża za szerokością */
  transform: translate(calc(-50% + var(--ai-x, 0px)), calc(-50% + var(--ai-y, 0px)));
  display: block;
}
/* Rząd kart — 4 w jednym wierszu, styl outline (jak Wispr): ikona u góry,
   tekst doklejony do dołu (wszystkie opisy wyrównane do dolnej krawędzi). */
.aiw__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.aiw__grid .perk {
  background: rgba(255,255,255,.022);
  border-color: rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  min-height: clamp(290px, 21vw, 320px); /* wysokość ~jak Wispr (proporcja ≈0.88), treść top-align */
}
/* Ikona u góry; treść top-align (jak Wispr) — pusta przestrzeń zostaje na DOLE,
   nie dokleja opisów do dołu (to psuło wspólną linię nagłówków). */
.aiw__grid .perk .ico { margin-bottom: 0; font-size: 1.65rem; /* ikona ~26px (bliżej Wispr, mniej „masy" u góry) */ }
/* Skala kart ujednolicona ze wszystkimi bliźniaczymi sekcjami (.awf__card, .sg-mk-take__body) */
.aiw__grid .perk p { font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.45; /* ciaśniejszy blok opisu, jak u Wispr */ }
.aiw__grid .perk h3 {
  margin-top: clamp(30px, 3vw, 40px); /* oddech ikona→nagłówek (umiarkowany — opisy dłuższe niż u Wispr) */
  margin-bottom: 14px;
  font-size: var(--fs-h3);
  line-height: 1.18;
  min-height: 2.36em; /* rezerwa na 2 linie → akapity startują równo we wszystkich kartach */
}
/* Bez reakcji na hover — karty statyczne (jak u Wispr). Neutralizuje też
   odziedziczone .perk:hover (transform/cień) i .section--dark .perk:hover. */
.aiw__grid .perk:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255,255,255,.022);
  border-color: rgba(255,255,255,.16);
}

@media (max-width: 1024px) {
  .aiw__top { grid-template-columns: 1fr; }
  .aiw__head { max-width: 620px; margin-inline: auto; text-align: center; }
  .aiw__art { order: 2; min-height: 200px; }
  .aiw__grid { grid-template-columns: repeat(2, 1fr); }
  .aiw__grid .perk { min-height: clamp(260px, 38vw, 300px); }
  .aiw__grid .perk h3 { margin-top: 36px; }
}
@media (max-width: 560px) {
  .aiw__grid { grid-template-columns: 1fr; }
}

/* =================================================================
   MINI-SEKCJA „Twoje dane zostają Twoje" (.priv) — układ Wispr
   „Privacy built-in": copy + 2 przyciski po lewej, line-art suwaków
   z dłonią po prawej. CZARNE tło (section--black — nie nawarstwiać
   zieleni z sekcją wyżej), mniejsza wysokość (mini). Akcent = mięta
   (h-italic), tekst kremowy, ilustracja kremowa + miętowy aktywny suwak.
   ================================================================= */
/* Ghost-CTA na czarnym wariancie: padding-box = czerń. Na samym .section--dark
   ghost wlewa do środka zieleń (--bg-dark) — na czerni byłaby zielona pigułka;
   tu padding-box przestawiamy na czerń, miętowa ramka zostaje. */
.section--black .btn--ghost {
  background: linear-gradient(var(--black), var(--black)) padding-box,
              linear-gradient(120deg, var(--accent-on-dark), var(--brand-mint-h)) border-box;
}
.priv { padding: clamp(48px, 6.5vw, 88px) 0; }
/* Mocniej zaokrąglone rogi 1:1 z Wispr „Privacy built-in" — tylko ta sekcja.
   Redefinicja tokena na .priv kaskaduje do .sg-cap / .sg-cap-bottom (i ich
   ujemnych marginesów), więc łuk ORAZ głębokość nachodzenia rosną razem.
   Globalny --radius-cap (44px) nietknięty — reszta witryny bez zmian. */
.priv { --radius-cap: 56px; }
/* Mini-sekcja niesie OBA brzegi czapki (sg-cap u góry + sg-cap-bottom
   u dołu) = samodzielny zaokrąglony pas, jak pas narzędzi na landingu.
   Musi malować NAD sąsiadami w obu stykach: sg-cap-bottom daje z-index:2, ale
   FAQ pod spodem jest PÓŹNIEJ w DOM (też z:2) i zamalowałby zaokrąglony dół —
   stąd jawny z-index wyższy niż czapki sąsiadów. */
.priv.sg-cap-bottom { z-index: 3; }
.priv__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
.priv__copy { max-width: 30rem; }
.priv__title {
  font-size: var(--fs-h2-sm);
  line-height: 1.06; letter-spacing: -.022em;
  margin: var(--eyebrow-gap) 0 16px;
  text-wrap: balance;
}
.priv__lead {
  color: var(--muted-on-dark);
  font-size: var(--fs-lead);
  line-height: 1.6; max-width: 44ch;
  text-wrap: pretty;
}
.priv__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.priv__actions .btn { font-size: 1rem; padding: 12px 22px; }
/* Ilustracja: line-art kremowy, aktywny suwak miętą; nie rozdmuchana */
.priv__art { color: var(--text-on-dark); }
.priv__art svg { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
.priv__art img { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; }


@media (max-width: 820px) {
  .priv__inner { grid-template-columns: 1fr; gap: 32px; }
  .priv__copy { max-width: none; }
  .priv__art { order: -1; }
  .priv__art svg { max-width: 320px; }
  .priv__art img { max-width: 320px; }
}


/* =================================================================
   PODSTRONA „SYSTEMY CRM" (oferta-crm.html) — przebudowa OD ZERA 2026-06-27
   Spokojna, sekcyjna wersja vanilla (kinowy film React odrzucony przez
   właściciela). Wszystko scopowane pod .page-crm, namespace .cx-*; kolory
   wyłącznie z tokenów marki (krem/czerń/zieleń + mięta na ciemnym).
   Mikrointerakcje w duchu Emila: krótkie ease-out, hover gated, press scale,
   zero scroll-scrubu. Makieta lejka = CSS-only (radio + label).
   ================================================================= */

/* ---------- 1. HERO (krem) — wyśrodkowana góra (wzór „O nas") + WIELKA makieta „hub zapytań" pod spodem ---------- */
.cx-hero { overflow: hidden; padding-top: 0; padding-bottom: clamp(56px, 8vw, 120px); }
/* GÓRA — pigułka → h1 → lead, wyśrodkowane, wypełnia pierwszy ekran;
   makieta CRM startuje pod nim, więc trzeba przewinąć, by zobaczyć ją w całości. */
.cx-hero__head {
  min-height: 71vh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center;
  width: min(100% - 48px, 1280px); margin-inline: auto;
  padding-top: calc(var(--nav-h) + clamp(72px, 8vw, 124px));
}
/* Nagłówek DUŻY i szeroki — dokładnie 2 linie (zdanie 1 / akcent przez <br>),
   rozmiar bez zmian; szeroki kontener mieści całe pierwsze zdanie w jednej linii. */
.cx-hero__title {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.022em;
  font-size: var(--fs-h1); line-height: 1.06;
  margin: var(--eyebrow-gap) 0 0;
}
/* Lead krótszy, obniżony (większy odstęp nad), wyśrodkowany w węższej kolumnie. */
.cx-hero__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-muted); max-width: 48ch; margin: clamp(34px, 4.5vw, 60px) auto 0; }


/* ---------- HUB ZAPYTAŃ — makieta (źródła → cienkie łącza → panel) ---------- */
.cx-hub {
  --cx-gap: clamp(64px, 5.4vw, 104px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: var(--cx-gap); row-gap: clamp(16px, 2vw, 30px); align-items: center;
}
/* Wariant WIELKI — makieta na pełnej szerokości pod wyśrodkowaną górą hero. */
.cx-hub--big {
  width: min(100% - 40px, 1560px); margin-inline: auto;
  margin-top: clamp(-40px, -3vw, -16px);
  column-gap: var(--cx-gap); row-gap: clamp(20px, 2.4vw, 44px);
}
/* Gęstszy, WYŻSZY panel (≥+50% wysokości vs domyślny hub): proporcjonalnie
   większe fonty, odstępy i karty — całość czytelniejsza jako bohater sekcji. */
.cx-hub--big .cx-cz__bar { padding: 17px 24px; }
.cx-hub--big .cx-cz__dots span { width: 10px; height: 10px; }
.cx-hub--big .cx-cz__title { font-size: .82rem; }
.cx-hub--big .cx-cz__user { width: 36px; height: 36px; font-size: .78rem; }

.cx-hub--big .cx-cz__body { padding: clamp(20px, 2.1vw, 30px); gap: clamp(18px, 2vw, 28px); }

.cx-hub--big .cx-cz__lead { padding: 22px; gap: 18px; border-radius: 18px; }
.cx-hub--big .cx-cz__leadhead { gap: 15px; }
.cx-hub--big .cx-ava { width: 50px; height: 50px; font-size: 1.05rem; }
.cx-hub--big .cx-cz__who b { font-size: 1.12rem; }
.cx-hub--big .cx-cz__who i { font-size: .9rem; line-height: 1.45; }
.cx-hub--big .cx-cz__tags { gap: 8px; }
.cx-hub--big .cx-tag { font-size: .82rem; padding: 7px 13px; }
.cx-hub--big .cx-cz__sub { font-size: .76rem; }
.cx-hub--big .cx-cz__row { padding: 17px 0; }
.cx-hub--big .cx-cz__row dt { font-size: .85rem; gap: 8px; margin-bottom: 5px; }
.cx-hub--big .cx-cz__row dt .ic { width: 16px; height: 16px; }
.cx-hub--big .cx-cz__row dd { font-size: .98rem; }

.cx-hub--big .cx-cz__board { gap: 12px; align-items: start; }
.cx-hub--big .cx-stcol { padding: 15px 13px; gap: 11px; border-radius: 15px; }
.cx-hub--big .cx-stcol__head span { font-size: .68rem; }
.cx-hub--big .cx-stcol__head b { font-size: .92rem; }
.cx-hub--big .cx-stcard { padding: 12px 13px; border-radius: 11px; gap: 3px; }
.cx-hub--big .cx-stcard b { font-size: .84rem; }
.cx-hub--big .cx-stcard i { font-size: .76rem; }
.cx-hub--big .cx-stcard > span { font-size: .71rem; }
.cx-hub--big .cx-stcol__more { font-size: .74rem; padding: 4px 2px; }

.cx-hub--big .cx-src { width: clamp(122px, 9vw, 152px); padding: 16px 17px; border-radius: 18px; }
.cx-hub--big .cx-src__ico { width: 42px; height: 42px; border-radius: 12px; }
.cx-hub--big .cx-src__ico .ic { width: 21px; height: 21px; }
.cx-hub--big .cx-src__txt b { font-size: .98rem; }
.cx-hub--big .cx-src__txt i { font-size: .8rem; }

.cx-hub--big .cx-hub__banner { padding: 19px 26px; font-size: clamp(.96rem, 1.1vw, 1.06rem); border-radius: 18px; }
.cx-hub--big .cx-banner__ico { width: 31px; height: 31px; }
.cx-hub--big .cx-banner__ico .ic { width: 17px; height: 17px; }
.cx-hub__rail { grid-column: 1; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.cx-hub__panel { grid-column: 2; grid-row: 1; min-width: 0; }
.cx-hub__aside { grid-column: 3; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.cx-hub__banner { grid-column: 2; grid-row: 2; }

/* karty źródeł */
.cx-src {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  width: clamp(98px, 7.1vw, 116px); padding: 11px 12px;
  background: #fff; border: 1px solid var(--line-light); border-radius: 15px;
  box-shadow: 0 14px 30px -22px rgba(2,78,70,.42);
}
.cx-src__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex: none; background: rgba(2,78,70,.06); border: 1px solid rgba(2,78,70,.14); }
.cx-src__ico .ic { width: 16px; height: 16px; color: var(--brand); }
.cx-src__txt { display: grid; gap: 1px; min-width: 0; }
.cx-src__txt b { font-size: .84rem; color: var(--text); line-height: 1.15; }
.cx-src__txt i { font-style: normal; font-size: .71rem; color: var(--text-muted); line-height: 1.18; }

/* łącza = wijące się łuki SVG (źródło → panel); na .is-firing puls leci po torze */
.cx-wire { position: absolute; top: 50%; height: 84px; width: var(--cx-gap, 30px); transform: translateY(-50%); overflow: visible; }
.cx-wire--out { left: 100%; }
.cx-wire--in  { right: 100%; }
.cx-wire__bed   { fill: none; stroke: rgba(2,78,70,.24); stroke-width: 1.4; }
.cx-wire__node  { fill: var(--brand); }
.cx-wire__pulse {
  fill: none; stroke: var(--brand-mint); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 13 100; stroke-dashoffset: 22; opacity: 0;
  filter: drop-shadow(0 0 3px rgba(116,211,190,.75));
}
.cx-src.is-firing .cx-wire__pulse { animation: cxPulse .64s var(--ease-out); }
.cx-src.is-firing .cx-wire--in .cx-wire__pulse { animation-name: cxPulseRev; }
@keyframes cxPulse    { 0% { stroke-dashoffset: 22; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes cxPulseRev { 0% { stroke-dashoffset: -100; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { stroke-dashoffset: 22; opacity: 0; } }

/* panel — Centrum zapytań */
.cx-cz {
  background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 40px 80px -44px rgba(2,78,70,.34), 0 14px 34px -22px rgba(20,20,30,.14);
}
.cx-cz__bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line-light); background: rgba(2,78,70,.03); }
.cx-cz__dots { display: flex; gap: 6px; }
.cx-cz__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(2,78,70,.22); }
.cx-cz__title { font-family: var(--font-accent); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(2,78,70,.62); }
.cx-cz__user { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-accent); font-weight: 700; font-size: .64rem; color: var(--bg-light); background: linear-gradient(140deg, var(--brand-mint), var(--brand)); }
.cx-cz__body { display: grid; grid-template-columns: minmax(0, .64fr) minmax(0, 1.78fr); gap: clamp(10px, 1.2vw, 16px); padding: clamp(12px, 1.4vw, 18px); align-items: start; }

/* karta klienta (lewa kolumna panelu) */
.cx-cz__lead { border: 1px solid var(--line-light); border-radius: 14px; padding: 13px; display: grid; gap: 11px; align-content: start; background: rgba(2,78,70,.018); }
.cx-cz__leadhead { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.cx-cz__who { display: grid; gap: 0; min-width: 0; }
.cx-cz__who b { font-size: .9rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cz__who i { font-style: normal; font-size: .73rem; color: var(--text-muted); line-height: 1.32; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cz__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-tag { font-family: var(--font-accent); font-size: .68rem; font-weight: 600; padding: 4px 9px; border-radius: 99px; color: var(--brand); background: rgba(2,78,70,.07); border: 1px solid rgba(2,78,70,.14); white-space: nowrap; }
.cx-cz__sub { font-family: var(--font-accent); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 1px; }
.cx-cz__rows { display: grid; gap: 0; }
.cx-cz__row { padding: 7px 0; border-top: 1px solid rgba(2,78,70,.08); }
.cx-cz__row:first-child { border-top: 0; padding-top: 0; }
.cx-cz__row dt { display: flex; align-items: center; gap: 6px; font-size: .69rem; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.cx-cz__row dt .ic { width: 13px; height: 13px; color: var(--brand); opacity: .8; flex: none; }
.cx-cz__row dd { font-size: .79rem; color: var(--text); font-weight: 600; }

/* kolumny statusów (prawa kolumna panelu) */
.cx-cz__board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.cx-stcol { background: rgba(2,78,70,.025); border: 1px solid var(--line-light); border-radius: 12px; padding: 9px 8px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.cx-stcol__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 1px; }
.cx-stcol__head span { font-family: var(--font-accent); font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); line-height: 1.2; }
.cx-stcol__head b { font-family: var(--font-accent); font-size: .76rem; color: var(--brand); flex: none; }
.cx-stcard { background: #fff; border: 1px solid var(--line-light); border-radius: 9px; padding: 7px 8px; display: grid; gap: 1px; min-width: 0; box-shadow: 0 5px 12px -10px rgba(2,78,70,.4); }
.cx-stcard b { font-size: .7rem; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-stcard i { font-style: normal; font-size: .64rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-stcard > span { font-size: .6rem; color: rgba(2,78,70,.55); font-weight: 500; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-stcol__more { font-family: var(--font-accent); font-size: .62rem; font-weight: 600; color: var(--text-muted); padding: 1px 2px; }

/* baner domknięcia + pionowe łącze panel → baner */
.cx-hub__banner {
  position: relative; justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px; border-radius: 16px; background: rgba(2,78,70,.05); border: 1px solid rgba(2,78,70,.16);
  font-family: var(--font-accent); font-weight: 600; font-size: clamp(.86rem, 1vw, .95rem); color: var(--brand); text-align: center;
}
.cx-hub__banner::before { content: ""; position: absolute; left: 50%; top: calc(-1 * clamp(16px, 2vw, 30px)); transform: translateX(-50%); width: 2px; height: clamp(16px, 2vw, 30px); background: linear-gradient(180deg, rgba(2,78,70,.12), rgba(2,78,70,.34)); }
.cx-banner__ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--brand); }
.cx-banner__ico .ic { width: 14px; height: 14px; color: var(--bg-light); }

/* żywy strumień — hub „Centrum zapytań" pracuje (JS: initCrmHubLife).
   Nowe zapytanie spływa łączem od źródła i ląduje na górze kolumny „Nowe zapytanie",
   licznik tyka. Tylko warstwa ruchu — bez JS kadr zostaje sensowny i statyczny. */
.cx-src { transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.cx-src.is-firing { border-color: rgba(2,78,70,.4); box-shadow: 0 14px 30px -20px rgba(2,78,70,.5), 0 0 0 2px rgba(2,78,70,.28); }
.cx-src.is-firing .cx-src__ico { background: rgba(2,78,70,.12); border-color: rgba(2,78,70,.3); }
/* (puls biegnący po torze SVG — reguły przy .cx-wire wyżej) */
/* nowa karta na górze kolumny „Nowe zapytanie" */
@keyframes cxLeadIn { from { opacity: 0; transform: translateY(-7px) scale(.96); } to { opacity: 1; transform: none; } }
.cx-stcard--fresh { animation: cxLeadIn .42s cubic-bezier(.2,.7,.2,1); }

/* ---------- 1b. PODGLĄD SYSTEMU (wzór Attio: 4 zakładki + makieta) ---------- */
.cx-demo { width: min(100%, 1120px); margin: clamp(32px, 4vw, 52px) auto 0; }
/* Sekcja „System od środka" SPORO niższa (decyzja właściciela): tniemy białe odstępy
   wokół makiety — padding sekcji (z domyślnych do 130px), odstęp nagłówka (ze 100px
   wymuszanych przez .section--black) i margines nad makietą. Sama makieta nietknięta.
   Treść jest wyśrodkowana, więc mimo padding < --radius-cap nie wchodzi w zaokrąglone
   rogi czapki sg-cap (krzywizna tylko przy lewej/prawej krawędzi). */
.cx-demo-sec { padding-block: clamp(48px, 4.4vw, 74px); }
.cx-demo-sec .section-head { margin-bottom: clamp(22px, 2.6vw, 34px); }
.cx-demo-sec .cx-demo { margin-top: clamp(16px, 1.8vw, 26px); }
/* radio = stan; ukryte, ale focusowalne (klawiatura: strzalki przelaczaja zakladke) */
.cx-demo__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* 4 PRZEŁĄCZNIKI */
.cx-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.cx-tab {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 18px; border-radius: 99px; border: 1px solid var(--line-light); background: #fff;
  font-family: var(--font-accent); font-size: .95rem; font-weight: 600; color: var(--text-muted);
  transition: color .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out), transform .12s var(--ease-out);
}
.cx-tab .ic { width: 17px; height: 17px; opacity: .7; }
.cx-tab:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cx-tab:hover { border-color: rgba(2,78,70,.4); color: var(--brand); }
}
#cx-vw-1:checked ~ .cx-tabs label[for="cx-vw-1"],
#cx-vw-2:checked ~ .cx-tabs label[for="cx-vw-2"],
#cx-vw-3:checked ~ .cx-tabs label[for="cx-vw-3"],
#cx-vw-4:checked ~ .cx-tabs label[for="cx-vw-4"] {
  background: var(--brand); border-color: var(--brand); color: var(--bg-light);
  box-shadow: 0 12px 26px -16px rgba(2,78,70,.6);
}
#cx-vw-1:checked ~ .cx-tabs label[for="cx-vw-1"] .ic,
#cx-vw-2:checked ~ .cx-tabs label[for="cx-vw-2"] .ic,
#cx-vw-3:checked ~ .cx-tabs label[for="cx-vw-3"] .ic,
#cx-vw-4:checked ~ .cx-tabs label[for="cx-vw-4"] .ic { opacity: 1; }
#cx-vw-1:focus-visible ~ .cx-tabs label[for="cx-vw-1"],
#cx-vw-2:focus-visible ~ .cx-tabs label[for="cx-vw-2"],
#cx-vw-3:focus-visible ~ .cx-tabs label[for="cx-vw-3"],
#cx-vw-4:focus-visible ~ .cx-tabs label[for="cx-vw-4"] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* RAMKA APLIKACJI — sidebar + obszar widoków */
.cx-screen {
  display: grid; grid-template-columns: 232px 1fr;
  background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 40px 80px -44px rgba(2,78,70,.34), 0 14px 34px -22px rgba(20,20,30,.16);
}
/* sidebar */
.cx-sb { border-right: 1px solid var(--line-light); background: rgba(2,78,70,.025); padding: 18px 14px; display: grid; align-content: start; gap: 18px; }
.cx-sb__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.cx-sb__logo { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; color: var(--bg-light); font-family: var(--font-accent); font-weight: 800; background: linear-gradient(140deg, var(--brand-mint), var(--brand)); }
.cx-sb__brand b { font-family: var(--font-accent); font-weight: 700; font-size: .98rem; color: var(--text); }
.cx-sb__nav { display: grid; gap: 3px; }
.cx-sb__item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; font-family: var(--font-accent); font-size: .9rem; font-weight: 500; color: var(--text-muted); }
.cx-sb__item .ic { width: 17px; height: 17px; opacity: .65; flex: none; }
/* pozycje-przyciski sidebaru (przelaczaja widok jak gorne plakietki) */
.cx-sb__item--btn { cursor: pointer; -webkit-user-select: none; user-select: none; transition: background .15s var(--ease-out), color .15s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cx-sb__item--btn:hover { background: rgba(2,78,70,.06); color: var(--text); }
  .cx-sb__item--btn:hover .ic { opacity: 1; }
}
.cx-sb__item--btn:active { transform: scale(.985); }
#cx-vw-1:focus-visible ~ .cx-screen .cx-sb__item--1,
#cx-vw-2:focus-visible ~ .cx-screen .cx-sb__item--2,
#cx-vw-3:focus-visible ~ .cx-screen .cx-sb__item--3,
#cx-vw-4:focus-visible ~ .cx-screen .cx-sb__item--4 { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-sb__sep { height: 1px; background: var(--line-light); margin: 8px 4px; }
#cx-vw-1:checked ~ .cx-screen .cx-sb__item--1,
#cx-vw-2:checked ~ .cx-screen .cx-sb__item--2,
#cx-vw-3:checked ~ .cx-screen .cx-sb__item--3,
#cx-vw-4:checked ~ .cx-screen .cx-sb__item--4 { background: rgba(2,78,70,.1); color: var(--brand); font-weight: 700; }
#cx-vw-1:checked ~ .cx-screen .cx-sb__item--1 .ic,
#cx-vw-2:checked ~ .cx-screen .cx-sb__item--2 .ic,
#cx-vw-3:checked ~ .cx-screen .cx-sb__item--3 .ic,
#cx-vw-4:checked ~ .cx-screen .cx-sb__item--4 .ic { opacity: 1; color: var(--brand); }

/* obszar widoków — stos w jednej komorce grida (wysokosc = najwyzszy widok, brak skoku) */
.cx-views { display: grid; min-width: 0; }
.cx-view {
  grid-area: 1 / 1; min-width: 0; padding: clamp(18px, 2vw, 26px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
#cx-vw-1:checked ~ .cx-screen .cx-view--1,
#cx-vw-2:checked ~ .cx-screen .cx-view--2,
#cx-vw-3:checked ~ .cx-screen .cx-view--3,
#cx-vw-4:checked ~ .cx-screen .cx-view--4 { opacity: 1; visibility: visible; transform: none; position: relative; z-index: 1; }
.cx-view__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cx-view__top h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -.012em; color: var(--text); }
.cx-pill { margin-left: auto; font-family: var(--font-accent); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; color: var(--brand); background: rgba(2,78,70,.1); white-space: nowrap; }


/* avatar (inbox/kanban) */
.cx-ava { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-accent); font-weight: 700; font-size: .82rem; color: var(--bg-light); background: linear-gradient(140deg, var(--brand-mint), var(--brand)); }

/* VIEW 1 — skrzynka leadów */
.cx-inbox { list-style: none; display: grid; gap: 2px; }
.cx-inbox__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; transition: background .15s var(--ease-out); }
.cx-inbox__row.is-unread { background: rgba(2,78,70,.04); }
@media (hover: hover) and (pointer: fine) { .cx-inbox__row:hover { background: rgba(2,78,70,.07); } }
.cx-inbox__who { display: grid; gap: 2px; min-width: 0; }
.cx-inbox__who b { font-size: .98rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-inbox__who i { font-style: normal; font-size: .84rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-inbox__time { font-family: var(--font-accent); font-size: .8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* VIEW 2 — lejek (tabela, wzor Attio „Companies", paleta marki) */
/* pasek widoku */
.cx-tbl__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.cx-tbl__view { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-accent); font-weight: 700; font-size: .96rem; color: var(--text); }
.cx-tbl__view .ic { width: 16px; height: 16px; color: var(--brand); }
.cx-tbl__chev { width: 14px !important; height: 14px !important; color: var(--text-muted) !important; }
.cx-tbl__count { font-family: var(--font-accent); font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.cx-tbl__acts { margin-left: auto; display: inline-flex; gap: 6px; }
.cx-tbl__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line-light); background: #fff; font-family: var(--font-accent); font-size: .78rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.cx-tbl__btn .ic { width: 14px; height: 14px; color: var(--text-muted); }
/* filtry */
.cx-tbl__filters { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.cx-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(0,0,0,.045); font-family: var(--font-accent); font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.cx-fchip .ic { width: 14px; height: 14px; }
.cx-fchip b { color: var(--brand); }
.cx-fchip--add { padding: 5px 8px; }
.cx-fchip--add .ic { color: var(--brand); }
/* tabela */
.cx-tbl__scroll { overflow-x: auto; border: 1px solid var(--line-light); border-radius: 14px; }
.cx-tbl { width: 100%; border-collapse: collapse; min-width: 760px; font-family: var(--font-accent); }
.cx-tbl th, .cx-tbl td { text-align: left; padding: 0 14px; white-space: nowrap; border-bottom: 1px solid var(--line-light); }
.cx-tbl thead th { height: 34px; font-size: .74rem; font-weight: 600; color: var(--text-muted); background: rgba(0,0,0,.02); }
.cx-tbl tbody td { height: 40px; font-size: .86rem; color: var(--text); }
.cx-tbl tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .cx-tbl tbody tr:hover td { background: rgba(2,78,70,.035); } }
.cx-tbl__chk { width: 40px; padding-right: 0; }
.cx-tbl__name { font-weight: 600; }
.cx-tbl__name .cx-mava { margin-right: 9px; }
.cx-tbl__num { text-align: right; }
.cx-box { display: inline-block; width: 15px; height: 15px; border: 1.5px solid var(--line-light); border-radius: 4px; vertical-align: middle; }
.cx-mava { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; font-size: .64rem; font-weight: 700; color: var(--bg-light); background: linear-gradient(140deg, var(--brand-mint), var(--brand)); }
/* tagi (zakres / zrodlo) */
.cx-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; margin-right: 5px; border: 1px solid var(--line-light); border-radius: 7px; font-size: .76rem; font-weight: 600; color: var(--text); background: #fff; }
.cx-tag .ic { width: 12px; height: 12px; color: var(--text-muted); }
.cx-tag--src { background: rgba(0,0,0,.025); }
/* etap — badge w skali zieleni (odpowiednik Attio ICP Fit) */
.cx-stg { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: .76rem; font-weight: 700; }
.cx-stg--new { background: rgba(0,0,0,.06); color: var(--text-muted); }
.cx-stg--mea { background: rgba(2,78,70,.1); color: var(--brand); }
.cx-stg--quo { background: rgba(2,78,70,.18); color: var(--brand); }
.cx-stg--won { background: var(--brand); color: var(--bg-light); }
/* wartosc szac. */
.cx-val { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(2,78,70,.06); font-weight: 600; color: var(--text); }
.cx-aitag { margin-left: 5px; padding: 1px 5px; border-radius: 5px; background: rgba(2,78,70,.1); color: var(--brand); font-size: .6rem; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }
/* priorytet — kropka + etykieta */
.cx-pri { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--text); }
.cx-pri::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.cx-pri--hi::before { background: var(--brand); }
.cx-pri--mid::before { background: var(--brand-mint); }
.cx-pri--lo::before { background: rgba(26,27,27,.28); }
.cx-pri--lo { color: var(--text-muted); }

/* VIEW 3 — automatyzacje (wzor Attio „Workflows", paleta marki) */
/* sub-pasek */
.cx-wf__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cx-wf__tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.04); }
.cx-wf__tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; font-family: var(--font-accent); font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.cx-wf__tab .ic { width: 14px; height: 14px; }
.cx-wf__tab b { color: var(--brand); }
.cx-wf__tab.is-on { background: #fff; color: var(--text); box-shadow: 0 2px 6px -3px rgba(20,20,30,.25); }
.cx-wf__live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-accent); font-size: .8rem; font-weight: 700; color: var(--brand); }
.cx-wf__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-mint); box-shadow: 0 0 0 3px rgba(116,211,190,.3); }
.cx-switch { position: relative; width: 30px; height: 17px; border-radius: 99px; background: var(--brand); }
.cx-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }

/* uklad 2-kolumnowy */
.cx-wf { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }

/* LEWA — graf */
.cx-wf__canvas { position: relative; display: grid; justify-items: stretch; padding: 30px 16px 12px; border: 1px solid var(--line-light); border-radius: 14px; background: rgba(2,78,70,.018) radial-gradient(rgba(2,78,70,.07) 1px, transparent 1px) 0 0 / 18px 18px; }
.cx-wf__run { position: absolute; top: 9px; left: 12px; padding: 2px 9px; border-radius: 99px; background: rgba(2,78,70,.1); color: var(--brand); font-family: var(--font-accent); font-size: .7rem; font-weight: 700; }

/* krok = wezel + zarezerwowane miejsce na badge statusu nad nim */
.cx-wstep { position: relative; padding-top: 19px; }
.cx-wstate { position: absolute; top: -2px; right: 4px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-family: var(--font-accent); font-size: .68rem; font-weight: 700; }
.cx-wstate .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.cx-wstate--done { background: rgba(2,78,70,.1); color: var(--brand); }
.cx-wstate--run { background: rgba(0,0,0,.05); color: var(--text-muted); }

.cx-wnode { position: relative; background: #fff; border: 1px solid var(--line-light); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 24px -18px rgba(2,78,70,.5); }
.cx-wnode__kind { position: absolute; top: -9px; left: 12px; padding: 2px 8px; border-radius: 6px; background: var(--brand); color: var(--bg-light); font-family: var(--font-accent); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cx-wnode--trigger { border-color: rgba(2,78,70,.35); }
.cx-wnode--active { border-color: rgba(2,78,70,.5); animation: cxpulse 2.2s ease-in-out infinite; }
@keyframes cxpulse { 0%, 100% { box-shadow: 0 10px 24px -18px rgba(2,78,70,.5), 0 0 0 0 rgba(2,78,70,.22); } 55% { box-shadow: 0 10px 24px -18px rgba(2,78,70,.5), 0 0 0 6px rgba(2,78,70,0); } }
.cx-wnode__head { display: flex; align-items: center; gap: 9px; }
.cx-wnode__ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; flex: none; background: rgba(0,0,0,.05); color: var(--text); }
.cx-wnode__ico .ic { width: 15px; height: 15px; }
.cx-wnode__ico--ai { background: rgba(2,78,70,.12); color: var(--brand); }
.cx-wnode__head b { font-family: var(--font-accent); font-size: .9rem; font-weight: 700; color: var(--text); }
.cx-wnode__tag { margin-left: auto; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.05); font-family: var(--font-accent); font-size: .68rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.cx-wnode__tag--ai { background: rgba(2,78,70,.12); color: var(--brand); }
.cx-wnode i { display: block; margin-top: 7px; font-style: normal; font-size: .8rem; color: var(--text-muted); }
.cx-wbranch { display: flex; gap: 6px; margin-top: 9px; }
.cx-wbranch span { flex: 1; text-align: center; padding: 5px 4px; border-radius: 7px; border: 1px dashed var(--line-light); font-family: var(--font-accent); font-size: .74rem; font-weight: 600; color: var(--text-muted); }
/* port — kolko na dole wezla (start lacznika) */
.cx-wport { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); }
/* lacznik */
.cx-wlink { width: 3px; height: 22px; justify-self: center; position: relative; background: var(--line-light); }
.cx-wlink::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 7px; height: 7px; border-right: 2px solid var(--line-light); border-bottom: 2px solid var(--line-light); transform: translateX(-50%) rotate(45deg); }
/* lacznik aktywny/zakonczony — zielony z przeplywem (marszujace miętowe kreski) */
.cx-wlink--done, .cx-wlink--active { background-color: var(--brand); background-image: linear-gradient(var(--brand-mint) 0 38%, transparent 38%); background-size: 100% 14px; animation: cxflow .85s linear infinite; }
.cx-wlink--done::after, .cx-wlink--active::after { border-right-color: var(--brand); border-bottom-color: var(--brand); }
@keyframes cxflow { from { background-position-y: 0; } to { background-position-y: 14px; } }
.cx-spin { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 2px solid rgba(26,27,27,.18); border-top-color: var(--text-muted); animation: cxspin .9s linear infinite; }

/* PRAWA — uruchomienia + Overview */
.cx-side__head { font-family: var(--font-accent); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.cx-side__head--ov { margin-top: 16px; }
.cx-runs { list-style: none; display: grid; gap: 1px; }
.cx-run { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: 9px; font-family: var(--font-accent); font-size: .82rem; }
@media (hover: hover) and (pointer: fine) { .cx-run:hover { background: rgba(2,78,70,.035); } }
.cx-run b { color: var(--text); font-weight: 700; }
.cx-run__ok { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none; background: rgba(2,78,70,.12); color: var(--brand); }
.cx-run__ok .ic { width: 11px; height: 11px; stroke-width: 2.4; }
.cx-run__live { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid rgba(2,78,70,.25); border-top-color: var(--brand); animation: cxspin 1s linear infinite; }
@keyframes cxspin { to { transform: rotate(360deg); } }
.cx-run__dur { padding: 1px 7px; border-radius: 99px; background: rgba(0,0,0,.05); font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.cx-run__st { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.cx-ov { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-ov__t { border: 1px solid var(--line-light); border-radius: 11px; padding: 10px 12px; display: grid; gap: 2px; }
.cx-ov__t b { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--text); line-height: 1; }
.cx-ov__t span { font-family: var(--font-accent); font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.cx-ov__t--ok { background: rgba(2,78,70,.05); border-color: rgba(2,78,70,.2); }
.cx-ov__t--ok b { color: var(--brand); }

/* VIEW 4 — raporty (wzor Attio „Business Metrics", paleta marki) */
.cx-rep__top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.cx-rep__intro h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -.012em; color: var(--text); }
.cx-rep__intro p { margin-top: 4px; font-size: .9rem; line-height: 1.45; color: var(--text-muted); max-width: 44ch; }
.cx-rep__tools { margin-left: auto; display: flex; gap: 8px; flex: none; }
.cx-rep__btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; border: 1px solid var(--line-light); background: #fff; font-family: var(--font-accent); font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.cx-rep__btn .ic { width: 15px; height: 15px; color: var(--text-muted); }
.cx-rep__btn--primary { background: var(--brand); border-color: var(--brand); color: var(--bg-light); box-shadow: 0 12px 24px -16px rgba(2,78,70,.6); }
.cx-rep__btn--primary .ic { color: var(--bg-light); }

.cx-rep__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: stretch; }
.cx-rc { position: relative; border: 1px solid var(--line-light); border-radius: 16px; background: #fff; padding: 16px 18px 14px; box-shadow: 0 18px 40px -30px rgba(2,78,70,.4); min-width: 0; }
.cx-rc__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.cx-rc__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-accent); font-weight: 700; font-size: .96rem; color: var(--text); }
.cx-rc__chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; background: rgba(2,78,70,.08); color: var(--brand); font-size: .72rem; font-weight: 600; }
.cx-rc__chip .ic { width: 13px; height: 13px; }

/* legenda pigulkowa */
.cx-leg { display: flex; flex-wrap: wrap; gap: 5px 13px; width: 100%; }
.cx-leg__i { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-accent); font-size: .76rem; font-weight: 600; color: var(--text); }
.cx-leg__i::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.cx-leg__i--mut { color: rgba(26,27,27,.42); }
.cx-leg__i--mut::before { background: rgba(26,27,27,.22); }
.cx-leg__i--a::before { background: var(--brand); }
.cx-leg__i--b::before { background: var(--brand-mint); }
.cx-leg__i--c::before { background: rgba(2,78,70,.38); }
.cx-leg__i--d1::before { background: var(--brand); }
.cx-leg__i--d2::before { background: var(--brand-mint); }
.cx-leg__i--d3::before { background: rgba(2,78,70,.55); }
.cx-leg__i--d4::before { background: rgba(2,78,70,.3); }

/* wykres slupkowy grupowany */
.cx-chart { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 208px auto; gap: 6px 10px; }
.cx-chart__y { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-accent); font-size: .68rem; font-weight: 600; color: rgba(26,27,27,.45); text-align: right; }
.cx-chart__plot { grid-column: 2; grid-row: 1; position: relative; min-width: 0; }
.cx-chart__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cx-chart__grid i { height: 1px; background: rgba(0,0,0,.07); }
.cx-chart__bars { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 8px; }
.cx-grp { display: flex; align-items: flex-end; gap: 6px; height: 100%; }
.cx-cb { width: 16px; align-self: flex-end; height: var(--h); border-radius: 5px 5px 0 0; }
.cx-cb--a { background: linear-gradient(180deg, var(--brand-mint), var(--brand)); }
.cx-cb--b { background: var(--brand-mint); }
.cx-cb--c { background: rgba(2,78,70,.32); }
.cx-chart__x { grid-column: 2; grid-row: 2; display: flex; justify-content: space-around; padding: 0 8px; font-family: var(--font-accent); font-size: .74rem; font-weight: 600; color: var(--text-muted); }

/* pierscien (donut) */
.cx-donut { position: relative; display: grid; place-items: center; min-height: 188px; }
.cx-donut__ring {
  width: 176px; height: 176px; border-radius: 50%;
  background: conic-gradient(var(--brand) 0 30%, var(--brand-mint) 30% 52%, rgba(2,78,70,.55) 52% 70%, rgba(2,78,70,.32) 70% 84%, rgba(2,78,70,.2) 84% 93%, rgba(2,78,70,.12) 93% 100%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 54px, #000 55px);
  mask: radial-gradient(circle at 50% 50%, transparent 54px, #000 55px);
}
.cx-donut__hole { position: absolute; display: grid; place-items: center; text-align: center; line-height: 1; }
.cx-donut__hole b { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--text); }
.cx-donut__hole i { font-style: normal; font-family: var(--font-accent); font-size: .72rem; font-weight: 600; color: var(--text-muted); margin-top: 3px; }

/* plywajaca etykieta szczegolow */
.cx-tip { position: absolute; top: 86px; right: 16px; width: 224px; background: #fff; border: 1px solid var(--line-light); border-radius: 12px; padding: 11px 13px; box-shadow: 0 24px 50px -22px rgba(2,78,70,.42), 0 6px 16px -10px rgba(20,20,30,.18); }
.cx-tip__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-accent); font-size: .82rem; font-weight: 700; color: var(--text); padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line-light); }
.cx-tip__delta { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; background: rgba(2,78,70,.1); color: var(--brand); font-size: .72rem; font-weight: 700; }
.cx-tip__delta .ic { width: 12px; height: 12px; }
.cx-tip__row { display: grid; gap: 2px; font-size: .76rem; }
.cx-tip__row + .cx-tip__row { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-light); }
.cx-tip__when { font-family: var(--font-accent); font-weight: 700; color: var(--text); }
.cx-tip__what { color: var(--text-muted); }
.cx-tip__what b { color: var(--text); font-weight: 600; }
.cx-tip__val { font-family: var(--font-accent); font-weight: 700; color: var(--brand); }
.cx-tip__row--mut { opacity: .6; }

/* ============ ŻYCIE RAPORTÓW — wykres „ładuje się" przy wejściu na zakładkę ============
   Sekwencja startuje, gdy #cx-vw-4 staje się :checked (CSS odpala animację od nowa, gdy
   reguła zaczyna pasować) — więc każde kliknięcie zakładki „Raporty" odgrywa ją od zera:
   siatka wjeżdża → słupki rosną kaskadą → pierścień zatacza koło jak zegar → liczba i
   pływająca etykieta dosiadają na końcu. Zero JS, w palecie marki. */
@property --cx-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* linie siatki — wjeżdżają od lewej, jedna po drugiej */
#cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-chart__grid i {
  transform-origin: left; animation: cxGridIn .42s var(--ease-out) both;
}
#cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-chart__grid i:nth-child(2) { animation-delay: .04s; }
#cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-chart__grid i:nth-child(3) { animation-delay: .08s; }
#cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-chart__grid i:nth-child(4) { animation-delay: .12s; }
#cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-chart__grid i:nth-child(5) { animation-delay: .16s; }
@keyframes cxGridIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* słupki — wyrastają z dołu; kaskada lewo→prawo (grupa) + wewnątrz grupy (a→b→c) */
#cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-cb {
  transform-origin: bottom;
  animation: cxBarGrow .6s var(--ease-out) both;
  animation-delay: calc(.22s + var(--gd, 0s) + var(--bd, 0s));
}
.cx-view--4 .cx-grp { --gd: 0s; }
.cx-view--4 .cx-grp:nth-child(2) { --gd: .11s; }
.cx-view--4 .cx-grp:nth-child(3) { --gd: .22s; }
.cx-view--4 .cx-cb:nth-child(1) { --bd: 0s; }
.cx-view--4 .cx-cb:nth-child(2) { --bd: .05s; }
.cx-view--4 .cx-cb:nth-child(3) { --bd: .1s; }
@keyframes cxBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* pierścień — odsłania się obrotem wskazówki (maska stożkowa sterowana --cx-sweep);
   fallback 360deg, gdy @property niedostępne → pełny pierścień, bez animacji, nie znika */
#cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-donut__ring {
  -webkit-mask:
    radial-gradient(circle at 50% 50%, transparent 54px, #000 55px),
    conic-gradient(from -90deg, #000 var(--cx-sweep, 360deg), transparent 0);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 50% 50%, transparent 54px, #000 55px),
    conic-gradient(from -90deg, #000 var(--cx-sweep, 360deg), transparent 0);
  mask-composite: intersect;
  animation: cxDonutSweep .8s var(--ease-out) .2s both;
}
@keyframes cxDonutSweep { from { --cx-sweep: 0deg; } to { --cx-sweep: 360deg; } }

/* liczba w środku i pływająca etykieta — dosiadają na końcu sekwencji */
#cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-donut__hole {
  animation: cxPop .42s var(--ease-out) .82s both;
}
#cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-tip {
  animation: cxTipIn .5s var(--ease-out) .62s both;
}
@keyframes cxPop { from { opacity: 0; transform: translateY(7px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes cxTipIn { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }

/* makieta — responsywnosc */
@media (max-width: 920px) {
  .cx-screen { grid-template-columns: 1fr; }
  .cx-sb { display: none; }
  .cx-rep__grid { grid-template-columns: 1fr; }
  .cx-tip { position: static; width: auto; margin-top: 14px; }
  .cx-wf { grid-template-columns: 1fr; }
  /* #6 (2026-06-30): wysokość ramki = AKTYWNY widok, nie najwyższy. Domyślnie 4 widoki
     są ułożone w jednej komórce grida (grid-area:1/1) → ramka jest tak wysoka jak
     najwyższy widok („Raporty"), więc krótka „Skrzynka" zostawia pustkę. Na mobile
     pokazujemy tylko aktywny widok (display) → ramka kurczy się do treści. Świadomy
     kompromis: lekki skok wysokości przy przełączaniu zakładek. */
  .cx-views { display: block; }
  .cx-view { display: none; grid-area: auto; }
  #cx-vw-1:checked ~ .cx-screen .cx-view--1,
  #cx-vw-2:checked ~ .cx-screen .cx-view--2,
  #cx-vw-3:checked ~ .cx-screen .cx-view--3,
  #cx-vw-4:checked ~ .cx-screen .cx-view--4 { display: block; }

  /* #5 (2026-06-30): makieta HUB (źródła | panel | źródła + kable) była 3-kolumnową
     siatką bez reguły mobilnej → na telefonie źródła nachodziły na środek i tekst się
     przycinał. Stack pionowy: źródła jako rzędy pigułek nad i pod panelem, panel pełnej
     szerokości, kable ukryte (mają sens tylko w układzie poziomym). */
  .cx-hub, .cx-hub--big { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .cx-hub__rail, .cx-hub__aside { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .cx-hub--big .cx-src, .cx-src { width: auto; flex: 1 1 130px; min-width: 130px; max-width: 220px; }
  .cx-hub .cx-wire { display: none; }

  /* #7 (2026-06-30): ciemna sekcja demo (sg-cap-bottom, margin-bottom:-radius-cap)
     nachodzi zaokrąglonym dołem na nagłówek cx-flow. padding-top sekcji (56px na mobile)
     < radius-cap (72px) → eyebrow chowa się pod czapką. Dokładamy radius-cap.
     #proces (id) podbija specyficzność, bo bazowa .cx-flow.section jest NIŻEJ w pliku. */
  #proces.cx-flow.section { padding-top: calc(clamp(56px, 7vw, 100px) + var(--radius-cap)); }

  /* MOBILE (2026-06-30): symetria do reguły wyżej — sekcje, które POPRZEDZAJĄ czapkę
     (ciemna .sg-cap z margin-top:-radius-cap nachodzi na nie od dołu), muszą doliczyć
     radius-cap do padding-bottom. Inaczej najgłębsza treść (baner makiety w hero,
     panel w cx-flow — oba wystają ~40px poniżej kontenera przez ujemne marginesy)
     wpada pod zaokrąglony szczyt następnej, ciemnej sekcji. Konwencja jak w #proces pt. */
  .cx-hero { padding-bottom: calc(clamp(56px, 8vw, 120px) + var(--radius-cap)); }
  #proces.cx-flow.section { padding-bottom: calc(clamp(56px, 7vw, 100px) + var(--radius-cap) + 14px); }
}
@media (max-width: 600px) {
  .cx-inbox__row { grid-template-columns: auto 1fr auto; }
  .cx-inbox__row .cx-chip { display: none; }
  .cx-rep__top { flex-wrap: wrap; }
  .cx-rep__tools { margin-left: 0; }
  .cx-chart { grid-template-rows: 150px auto; }
  .cx-tbl__count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-view { transition: opacity .01ms linear; transform: none; }
  .cx-run__live, .cx-wnode--active, .cx-wlink--done, .cx-wlink--active, .cx-spin { animation: none; }
  /* raporty: bez sekwencji „ładowania" — pełny wykres od razu */
  #cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-chart__grid i,
  #cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-cb,
  #cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-donut__ring,
  #cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-donut__hole,
  #cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-tip { animation: none; }
  #cx-vw-4:checked ~ .cx-screen .cx-view--4 .cx-donut__ring { --cx-sweep: 360deg; }
}

/* Karta klienta (lead) */
.cx-lead { display: grid; gap: 14px; }
.cx-lead__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.cx-lead__ava {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--font-accent); font-weight: 700; font-size: .92rem; letter-spacing: .02em;
  color: var(--bg-light); background: linear-gradient(140deg, var(--brand-mint), var(--brand));
}
.cx-lead__who { display: grid; gap: 2px; min-width: 0; }
.cx-lead__who b { font-size: 1.04rem; color: var(--text); }
.cx-lead__who i { font-style: normal; font-size: .85rem; color: var(--text-muted); }
.cx-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px;
  font-size: .78rem; font-weight: 700; white-space: nowrap; flex: none;
  border: 1px solid rgba(2,78,70,.18); color: var(--brand); background: rgba(2,78,70,.06);
}
.cx-chip .ic { width: 14px; height: 14px; }
.cx-chip--ok { color: var(--bg-light); background: var(--brand); border-color: var(--brand); }

/* kropki postępu w karcie lejka */
.cx-dots { display: flex; align-items: center; gap: 7px; }
.cx-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(2,78,70,.16); flex: none; transition: background .18s var(--ease-out), transform .18s var(--ease-out); }
.cx-dots span.is-done { background: rgba(2,78,70,.5); }
.cx-dots span.is-now { background: var(--brand); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(2,78,70,.12); }

.cx-lead__rows { display: grid; gap: 0; }
.cx-lead__row { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(2,78,70,.09); }
.cx-lead__row dt { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.cx-lead__row dt .ic { width: 15px; height: 15px; color: var(--brand); opacity: .8; }
.cx-lead__row dd { font-size: .92rem; color: var(--text); font-weight: 500; }
.cx-lead__row--next { margin-top: 4px; padding: 12px 14px; border-top: 0; border-radius: 10px; background: rgba(116,211,190,.14); }
.cx-lead__row--next dt { color: var(--brand); }
.cx-lead__row--next dd { color: var(--brand); font-weight: 700; }

/* ---------- 2. INTERAKTYWNY LEJEK ---------- */
/* Nagłówek = 2 linie (font bez zmian): przy domyślnym 720px text-wrap:balance łamał
   1. zdanie na 2 wiersze. Poszerzam główkę tylko tyle, by zdanie (~750px @ max font)
   zmieściło się w jednej linii — wąsko, więc blok zostaje zwarty i wyśrodkowany. */
.cx-flow .section-head { max-width: 880px; margin-bottom: clamp(24px, 3vw, 36px); }
/* Podtytuł (max-width:56ch) bez auto-marginesów lgnął do lewej w szerszej główce. */
.cx-flow .section-sub { margin-inline: auto; max-width: 46ch; }
/* mini-sekcja: niższy padding pionowy niż domyślna .section (ale z oddechem od krawędzi) */
.cx-flow.section { padding: clamp(56px, 7vw, 100px) 0; }
.cx-flow__demo { position: relative; max-width: 1040px; margin-inline: auto; }
/* radio = stan; wizualnie ukryte, ale FOCUSOWALNE (klawiatura: strzalki przelaczaja etap) */
.cx-flow__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* szyna etapow */
.cx-pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.cx-pipe__step {
  position: relative; cursor: pointer; display: grid; gap: 5px; justify-items: start;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-light); background: #fff;
  transition: border-color .16s var(--ease-out), background .16s var(--ease-out), transform .12s var(--ease-out), box-shadow .16s var(--ease-out);
}
.cx-pipe__no { font-family: var(--font-accent); font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: rgba(2,78,70,.5); }
.cx-pipe__name { font-size: .98rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.cx-pipe__step:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .cx-pipe__step:hover { border-color: rgba(2,78,70,.4); box-shadow: 0 10px 24px -16px rgba(2,78,70,.4); }
}
/* polaczenie etapow: pozioma kreska miedzy kafelkami (na desktopie) */
.cx-pipe__step + .cx-pipe__step::before {
  content: ""; position: absolute; left: -11px; top: 50%; width: 12px; height: 2px; transform: translateY(-50%);
  background: var(--line-light);
}

/* aktywny etap — sterowany przez :checked (po id) */
#cx-st-1:checked ~ .cx-pipe label[for="cx-st-1"],
#cx-st-2:checked ~ .cx-pipe label[for="cx-st-2"],
#cx-st-3:checked ~ .cx-pipe label[for="cx-st-3"],
#cx-st-4:checked ~ .cx-pipe label[for="cx-st-4"],
#cx-st-5:checked ~ .cx-pipe label[for="cx-st-5"] {
  background: var(--brand); border-color: var(--brand);
  box-shadow: 0 14px 30px -16px rgba(2,78,70,.55);
}
#cx-st-1:checked ~ .cx-pipe label[for="cx-st-1"] .cx-pipe__no, #cx-st-1:checked ~ .cx-pipe label[for="cx-st-1"] .cx-pipe__name,
#cx-st-2:checked ~ .cx-pipe label[for="cx-st-2"] .cx-pipe__no, #cx-st-2:checked ~ .cx-pipe label[for="cx-st-2"] .cx-pipe__name,
#cx-st-3:checked ~ .cx-pipe label[for="cx-st-3"] .cx-pipe__no, #cx-st-3:checked ~ .cx-pipe label[for="cx-st-3"] .cx-pipe__name,
#cx-st-4:checked ~ .cx-pipe label[for="cx-st-4"] .cx-pipe__no, #cx-st-4:checked ~ .cx-pipe label[for="cx-st-4"] .cx-pipe__name,
#cx-st-5:checked ~ .cx-pipe label[for="cx-st-5"] .cx-pipe__no, #cx-st-5:checked ~ .cx-pipe label[for="cx-st-5"] .cx-pipe__name {
  color: var(--bg-light);
}
/* focus klawiatura — pierscien na etykiecie odpowiadajacej zaznaczonemu radio */
#cx-st-1:focus-visible ~ .cx-pipe label[for="cx-st-1"],
#cx-st-2:focus-visible ~ .cx-pipe label[for="cx-st-2"],
#cx-st-3:focus-visible ~ .cx-pipe label[for="cx-st-3"],
#cx-st-4:focus-visible ~ .cx-pipe label[for="cx-st-4"],
#cx-st-5:focus-visible ~ .cx-pipe label[for="cx-st-5"] {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* panele — stos w jednej komorce grida (stala wysokosc = brak skoku przy zmianie etapu) */
.cx-panels { display: grid; }
.cx-panel {
  grid-area: 1 / 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(18px, 2.4vw, 32px);
  align-items: start; padding: clamp(20px, 2.4vw, 30px);
  background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  box-shadow: 0 30px 64px -40px rgba(2,78,70,.28);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
#cx-st-1:checked ~ .cx-panels .cx-panel--1,
#cx-st-2:checked ~ .cx-panels .cx-panel--2,
#cx-st-3:checked ~ .cx-panels .cx-panel--3,
#cx-st-4:checked ~ .cx-panels .cx-panel--4,
#cx-st-5:checked ~ .cx-panels .cx-panel--5 {
  opacity: 1; visibility: visible; transform: translateY(0); position: relative; z-index: 1;
}
.cx-lead--lg .cx-lead__who b { font-size: 1.1rem; }

/* prawa kolumna panelu — co robi CRM */
.cx-note { padding-top: 4px; }
.cx-note h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.015em; margin: var(--eyebrow-gap) 0 14px; }
.cx-note__list { display: grid; gap: 11px; list-style: none; }
.cx-note__list li { position: relative; padding-left: 28px; font-size: .96rem; line-height: 1.5; color: var(--text-muted); }
.cx-note__list li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand);
}
.cx-note__list li::after {
  content: ""; position: absolute; left: 4px; top: calc(.12em + 4px); width: 10px; height: 10px;
  border-left: 2px solid var(--bg-light); border-bottom: 2px solid var(--bg-light);
  transform: rotate(-45deg); border-bottom-left-radius: 1px;
}

/* ---------- 3. CO ZYSKUJESZ (czarny pas) ---------- */


/* ---------- 4. JAK WDRAZAMY (stepper) ---------- */


/* ---------- Responsywnosc ---------- */
@media (max-width: 980px) {
  .cx-hero__head { min-height: auto; padding-top: calc(var(--nav-h) + 48px); padding-bottom: 24px; }
  .cx-hub--big { width: min(100% - 40px, 860px); }

  .cx-panel { grid-template-columns: 1fr; gap: 22px; }
  .cx-note { border-top: 1px solid var(--line-light); padding-top: 22px; }
}
/* HUB — reflow na wąsko: źródła w rzędzie, panel pod spodem, łącza znikają */
@media (max-width: 760px) {
  .cx-hub { grid-template-columns: 1fr; grid-template-rows: none; align-items: stretch; row-gap: 16px; }
  .cx-hub__rail, .cx-hub__panel, .cx-hub__aside, .cx-hub__banner { grid-column: 1; }
  .cx-hub__rail, .cx-hub__aside { flex-direction: row; flex-wrap: wrap; align-self: auto; }
  .cx-src, .cx-hub__aside .cx-src { width: auto; flex: 1 1 150px; }
  .cx-wire { display: none; }
  .cx-hub__banner::before { display: none; }
}
@media (max-width: 680px) {
  .cx-pipe { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(132px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .cx-pipe__step { scroll-snap-align: start; }
  .cx-pipe__step + .cx-pipe__step::before { display: none; }

  .cx-cz__body { grid-template-columns: 1fr; }
  .cx-cz__board { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   TELEFON (≤600px) — zwarty „mini-CRM" w hero.
   Domyślna makieta (karta leada ~600px + tablica 20 kart ~1034px)
   rozciągała hero do ~2760px. Na telefonie tniemy do zwartej karty:
   - źródła = kompaktowe chipy (ikona + nazwa, bez podpisu),
   - karta leada = krótsza (2 najważniejsze wiersze szczegółów),
   - tablica = 4 kafelki etapów (nazwa + licznik + 1 nazwisko)
     zamiast 20 rozwiniętych kart.
   Tylko warstwa mobilna — układ desktop/tablet nietknięty.
   ============================================================ */
@media (max-width: 600px) {
  /* mniej powietrza nad makietą */
  .cx-hero__lead { margin-top: 22px; }
  .cx-hub--big { gap: 12px; }

  /* ŹRÓDŁA → kompaktowe chipy w jednym rzędzie (ikona + nazwa) */
  .cx-hub__rail, .cx-hub__aside { gap: 8px; }
  .cx-hub--big .cx-src, .cx-src { flex: 0 1 auto; min-width: 0; max-width: none; padding: 8px 13px; gap: 9px; border-radius: 99px; }
  .cx-hub--big .cx-src__ico { width: 30px; height: 30px; border-radius: 9px; }
  .cx-hub--big .cx-src__ico .ic { width: 16px; height: 16px; }
  .cx-hub--big .cx-src__txt b { font-size: .84rem; }
  .cx-src__txt i { display: none; }

  /* PANEL — zwarte wnętrze */
  .cx-hub--big .cx-cz__bar { padding: 13px 16px; }
  .cx-hub--big .cx-cz__body { padding: 14px; gap: 14px; }
  .cx-hub--big .cx-cz__lead { padding: 14px; gap: 11px; border-radius: 14px; }
  .cx-hub--big .cx-ava { width: 42px; height: 42px; font-size: .92rem; }
  .cx-hub--big .cx-cz__who b { font-size: 1rem; }
  .cx-hub--big .cx-cz__row { padding: 9px 0; }
  /* skróć szczegóły leada do 2 najważniejszych wierszy (Lokalizacja + Termin) */
  .cx-cz__rows .cx-cz__row:nth-child(n+3) { display: none; }

  /* TABLICA → 4 kafelki etapów 2×2: nagłówek (nazwa + licznik) + 1 nazwisko */
  .cx-hub--big .cx-cz__board { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cx-hub--big .cx-stcol { padding: 11px 11px; gap: 8px; }
  .cx-hub--big .cx-stcard { padding: 9px 10px; }
  .cx-hub--big .cx-stcol .cx-stcard ~ .cx-stcard { display: none; }
  .cx-hub--big .cx-stcol__more { display: none; }

  /* baner domknięcia — niższy */
  .cx-hub--big .cx-hub__banner { padding: 14px 18px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cx-panel { transition: opacity .01ms linear; transform: none; }
  .cx-dots span.is-now { transition: none; }
}


/* Ukryty pasek przewijania glownego okna (Climbly 2026-07-14) */
html{scrollbar-width:none}html{-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0;display:none}