/* ============================================================
   DAPLO AI — "Living Spec Sheet"
   Monochrom (grafit · porcelana) zgodny z brandem (biało-na-czarnym /
   czarno-na-białym). Ciemne klamry (nav / case / kontakt / stopka)
   obejmują jasny korpus. Akcent (petrol-teal) tylko szeptem — w warstwie
   żywego systemu (dashboard, dane, aktywne stany).
   Display: Newsreader · Body: Hanken Grotesk · Dane: IBM Plex Mono
   Signature: strona jako arkusz specyfikacji — włosowe linie, mono
   współrzędne, znaczniki. Dashboard = figura, którą specyfikujemy.
============================================================ */
:root {
  --papier:   #ECEAE3;   /* ciepła porcelana — korpus */
  --papier-2: #E4E1D8;   /* alternatywna sekcja */
  --bialy:    #F7F6F1;   /* ciepła biel — karty, dash */
  --bialy-2:  #FBFAF6;
  --tusz:     #16181A;   /* grafit — tekst, ciemne klamry */
  --tusz-2:   #1D1F22;
  --stal:     #54575A;   /* tekst drugorzędny */
  --slaby:    #646560;   /* tekst trzeciorzędny — 4.5:1 na każdym z czterech teł (audyt mobilny 2026-08-24) */
  --linia:    #D3D0C6;   /* włosowa na porcelanie */
  --linia-2:  #DEDBD1;
  --linia-d:  rgba(236,234,227,0.12);
  --kosc:     #F0EEE7;   /* jasny tekst na ciemnych klamrach */

  --cyjan:    #17ABAF;   /* akcent-2: dane / live (warstwa systemu) */
  --cyjan-t:  #0B6C73;   /* akcent: tekst/linki/znaczniki na jasnym — 4.7:1 wzwyż (audyt mobilny 2026-08-24) */
  --burszty:  #17ABAF;   /* zunifikowane do akcentu (koniec 2 akcentów) */
  --ok:       #3A7145;   /* 4.07:1 -> 4.60:1 na tle plakietki (audyt mobilny) */
  --warn:     #855819;   /* 4.37:1 -> 4.74:1 na tle plakietki (audyt mobilny) */
  --err:      #9B362F;

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --max-w: 1240px;
  --pad: clamp(20px, 5vw, 88px);
  --r: 7px;                       /* spec-sheet = ciasny promień */
  --r-sm: 5px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-dash: 0 1px 2px rgba(16,18,20,.04), 0 18px 44px -14px rgba(16,18,20,.16), 0 40px 90px -30px rgba(16,18,20,.14);
  --shadow-card: 0 1px 2px rgba(16,18,20,.03), 0 14px 34px -18px rgba(16,18,20,.14);

  /* strona jest monochromatyczna z założenia — blokujemy automatyczne
     przyciemnianie treści przez przeglądarkę (Chrome/Opera auto dark) */
  color-scheme: only light;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background: var(--papier);
  color: var(--tusz);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* width/height w HTML to wskazówki prezentacyjne: gdy CSS ustawia tylko JEDEN
   wymiar (np. `.logo img { height: 23px }`), drugi bierze się wtedy z atrybutu
   i obraz zostaje rozciągnięty — logo w stopce robiło się szersze o 775%.
   `auto` na obu osiach przywraca liczenie z proporcji; reguły klasowe, które
   celowo ustawiają oba wymiary z object-fit, i tak wygrywają specyficznością. */
img { display:block; max-width:100%; width: auto; height: auto; }
/* elementy, które silniki auto-dark lubią podmalowywać na własną rękę */
blockquote, figure, figcaption { background: transparent; color: inherit; }
a { color: var(--cyjan-t); text-decoration: none; }
button { font: inherit; background:none; border:none; cursor:pointer; color:inherit; }
::selection { background: rgba(14,125,133,.16); }
:focus-visible { outline: 2px solid var(--cyjan-t); outline-offset: 2px; border-radius: 3px; }
/* na ciemnych klamrach ciemny petrol outline'u ginie */
#nav :focus-visible, .sec-dark :focus-visible, .contact :focus-visible, footer :focus-visible { outline-color: #4FD0D2; }
.wrap { max-width: var(--max-w); margin:0 auto; padding-inline: var(--pad); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- typografia ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--tusz);
}
h1 { font-size: clamp(34px, 4.05vw, 54px); font-weight: 460; letter-spacing:-0.021em; }
h2 { font-size: clamp(29px, 3.6vw, 50px); }
h3 { font-family: var(--body); font-size: 19px; line-height:1.25; font-weight: 600; letter-spacing:-0.01em; }
/* em = powaga w tuszu, nie trik "kursywa w kolorze". Cienki podkreślnik akcentu. */
h1 em, h2 em {
  font-style: italic; font-weight: 420; color: var(--tusz);
}

/* kicker / eyebrow = współrzędna arkusza specyfikacji */
.kicker, .eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stal);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.kicker::before, .eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--cyjan-t);
  flex-shrink: 0;
}
/* tick rysuje się dopiero, gdy sekcja wchodzi w kadr */
.kicker.reveal::before, .eyebrow.reveal::before { width: 0; transition: width .75s var(--ease) .08s; }
.kicker.reveal.in::before, .eyebrow.reveal.in::before { width: 26px; }
.kicker .idx, .eyebrow .idx { color: var(--cyjan-t); font-weight: 600; letter-spacing:.1em; }
.kicker-dark { color: #9A9C97; }
.kicker-dark::before { background: var(--cyjan); }
.kicker-dark .idx { color: var(--cyjan); }

/* wejście hero — sekwencja rise */
.rise { opacity: 0; animation: rise .9s var(--ease) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .27s; }
.d4 { animation-delay: .39s; } .d5 { animation-delay: .52s; }
@keyframes rise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform:none; } }

/* ---------- przyciski: tuszowy prostokąt (koniec pigułek/cyjanu) ---------- */
.btn {
  --bg: var(--tusz);
  --fg: var(--kosc);
  display:inline-flex; align-items:center; gap:11px;
  background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: 15px; letter-spacing: .005em;
  padding: 14px 24px; border-radius: var(--r-sm);
  border: 1px solid var(--bg);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease);
}
.btn svg { transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(16,18,20,.5); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
/* primary = grafit z akcentem teal (black + teal, jak case study / booking) */
.btn-cyan {
  --bg: var(--tusz); --fg: var(--kosc);
  border-color: rgba(23,171,175,.5);
  box-shadow: 0 0 0 1px rgba(23,171,175,.08), 0 10px 26px -14px rgba(23,171,175,.4);
}
.btn-cyan svg { color: #4FD0D2; }
.btn-cyan:hover {
  border-color: rgba(79,208,210,.7);
  box-shadow: 0 0 0 1px rgba(23,171,175,.16), 0 16px 38px -12px rgba(23,171,175,.5);
}
.btn-amber { --bg: var(--kosc); --fg: var(--tusz); border-color: rgba(255,255,255,.14); }  /* nav CTA na ciemnym */
.btn-amber svg { color: var(--cyjan-t); }
.btn-amber:hover { border-color: rgba(79,208,210,.45); box-shadow: 0 0 0 1px rgba(23,171,175,.1), 0 12px 30px -12px rgba(23,171,175,.35); }
.btn-sm { padding: 11px 18px; font-size: 14px; }
.btn-lg { padding: 16px 30px; font-size: 16px; }

.ghost-link {
  display:inline-flex; align-items:center; gap: 10px;
  font-weight:600; font-size:15px; color: var(--stal);
  letter-spacing: .01em;
  transition: color .25s var(--ease), gap .3s var(--ease);
}
.ghost-link:hover { color: var(--tusz); gap: 15px; }
.ghost-link .ic {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--linia); border-radius: 50%;
  display: grid; place-items: center;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.ghost-link:hover .ic { border-color: var(--cyjan-t); background: rgba(14,125,133,.07); transform: translateY(-1px); }
.ghost-link .ic svg { transition: transform .3s var(--ease); }
.ghost-link:hover .ic svg { transform: translateX(1px); }

/* ============================================================
   NAV — płaska, precyzyjna ciemna klamra (koniec szklanej pigułki)
============================================================ */
#nav {
  position: sticky; top: 0; z-index: 100;
  width: 100%; margin: 0; border-radius: 0;
  background: rgba(10,11,12,.9);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
#nav .wrap { position:relative; z-index:1; }
/* grid 1fr/auto/1fr: zakładki idealnie na środku niezależnie od szerokości logo i CTA */
.nav-row { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; height:68px; }
.logo { display:flex; align-items:center; justify-self:start; }
.logo img { height: 23px; }
.nav-links { display:flex; gap: 4px; list-style:none; justify-self:center; }
.nav-links a {
  display:inline-flex; align-items:center;
  color:#B9BCB7; font-size:14px; font-weight:500; letter-spacing:.005em;
  padding: 8px 14px; border-radius: 6px; position: relative;
  transition: color .2s var(--ease);
}
.nav-links a::after {
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1px;
  background: var(--cyjan); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-links a:hover { color:#fff; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { display:flex; align-items:center; gap:16px; justify-self:end; }
.hamburger { display:none; flex-direction:column; gap:5px; padding:8px; }
.hamburger span { width:20px; height:1.5px; background:#fff; border-radius:2px; transition: transform .25s var(--ease); }
/* Panel menu jest NAKŁADKĄ, nie elementem układu: leży absolutnie pod paskiem
   nawigacji, więc jego rozwinięcie nie zmienia wysokości #nav i strona pod
   spodem nie podskakuje. Własne tło + backdrop-filter powtarzają przezroczystość
   paska — gdy panel siedział wewnątrz #nav, jego tło nakładało się samo na
   siebie i całość robiła się czarna. */
.mob { display:none; }
@media (max-width: 720px) {
  .mob {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    padding: 8px var(--pad) 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.07);
    /* .94 — pasek ma .9. Panel leży NA treści strony, więc rozmycie tła robi
       tu całą robotę; przy .9 bez rozmycia nagłówek hero prześwitywał spod
       pozycji menu. UWAGA: headless nie renderuje backdrop-filter, więc na
       zrzutach z audytu prześwit widać mocniej niż na telefonie. */
    background: rgba(10,11,12,.94);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    max-height: 0; overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: max-height .34s var(--ease), opacity .2s var(--ease),
                transform .28s var(--ease), visibility 0s linear .34s;
  }
  #nav.mob-open .mob {
    max-height: calc(100dvh - 68px - 8px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 1; visibility: visible; transform: none;
    transition: max-height .34s var(--ease), opacity .22s var(--ease),
                transform .28s var(--ease), visibility 0s;
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .mob { background: rgba(10,11,12,.97); }
}
.mob a { color:#DCE0DB; font-size:16px; font-weight:500; padding:11px 0; }
/* `.mob a` bije specyficznością `color: var(--fg)` z `.btn` — bez tej linii CTA
   „Porozmawiajmy" to jasny tekst na jasnym przycisku (kontrast 1.15:1). */
.mob a.btn { color: var(--fg); }
.mob .btn { margin-top:12px; justify-content:center; }
.mob-offers { display:flex; flex-direction:column; gap:0; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.07); }
.mob-cap {
  font-family: var(--mono); font-size: 10px; letter-spacing:.16em;
  text-transform: uppercase; color:#83847F; padding: 8px 0 4px;
}

/* --- dropdown Oferta (precyzyjny, ciemny) --- */
.has-drop { position: relative; }
.drop-trigger { display: inline-flex; align-items: center; gap: 6px; }
.drop-trigger svg { transition: transform .3s var(--ease); }
.has-drop:hover .drop-trigger svg { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding-top: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
  z-index: 600;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown, .has-drop.force-open .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* most nad przerwą między zakładką a panelem — bez niego kursor po drodze
   opuszcza obszar hovera i menu zamyka się w połowie ruchu */
.dropdown::before { content: ""; position: absolute; inset: 0 0 auto; height: 18px; }
.dropdown-inner {
  min-width: 320px;
  background: rgba(20,22,24,.97);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 7px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.drop-item {
  display: block; cursor: pointer; position: relative;
  padding: 12px 14px; border-radius: 7px;
  transition: background .2s var(--ease);
}
.drop-item:hover { background: rgba(255,255,255,.05); }
/* `.nav-links a` (inline-flex + podkreślenie) jest bardziej specyficzne niż
   `.drop-item` i rozkładało nazwę oraz opis obok siebie — tu to resetujemy */
.nav-links a.drop-item { display: block; padding: 12px 14px; cursor: pointer; }
.nav-links a.drop-item::after { display: none; }
/* nazwa zawsze w jednej linii, opis pod nią w drugiej */
.di-name {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  color: #ECEFEA; font-weight: 600; font-size: 14.5px;
  transition: color .2s var(--ease);
}
.di-tag {
  font-family: var(--mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: #4FD0D2; background: rgba(79,208,210,.1);
  border: 1px solid rgba(79,208,210,.32); border-radius: 4px;
  padding: 3px 7px; line-height: 1;
}
.di-desc { display: block; color: #8B8C87; font-size: 12.5px; margin-top: 5px; }
.drop-item:hover .di-name { color: #4FD0D2; }

/* hovery linków */
.mob a:not(.btn), .foot-nav a, .foot-brand a { transition: color .18s var(--ease); }
.mob a:not(.btn):hover, .foot-nav a:hover, .foot-brand a:hover { color:#fff; }
.contact-alt a { border-bottom: 1px solid transparent; transition: color .18s var(--ease), border-color .2s var(--ease); }
.contact-alt a:hover { color:#4FD0D2; border-bottom-color: rgba(79,208,210,.55); }

@supports not (backdrop-filter: blur(1px)) {
  #nav { background: rgba(10,11,12,.97); }
}
@media (prefers-reduced-transparency: reduce) {
  #nav { background: rgba(10,11,12,.98); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ============================================================
   TOUR — hero + sceny (jedna orkiestracja) + rama spec-sheet
============================================================ */
.tour { height: 720vh; position: relative; }
.tour-sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; align-items: center; overflow: hidden;
}
/* faint spec grid — cieńszy, cieplejszy, sparse */
.tour-sticky::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--linia) 1px, transparent 1px) 0 0 / 100% 84px,
    linear-gradient(90deg, var(--linia) 1px, transparent 1px) 0 0 / 84px 100%;
  opacity:.4;
  mask-image: radial-gradient(ellipse 95% 85% at 62% 45%, black 20%, transparent 78%);
  transition: opacity .8s var(--ease);
}
.tour-sticky[data-scene="5"]::before { opacity: 0; }  /* finał: zero linii */
/* poświata podążająca za kursorem (akcent, ledwie widoczna) */
.tour-sticky::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(340px circle at var(--gx, -600px) var(--gy, -600px), rgba(14,125,133,.07), transparent 70%);
}
.tour-grid {
  display: grid;
  /* minmax(0,…): kolumna dashboardu nie może się rozpychać min-contentem
     (różne tabele/wiersze branż zmieniałyby szerokość kolumn => całe hero skakało) */
  grid-template-columns: minmax(360px, 5.1fr) minmax(0, 5.9fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
  width: 100%;
  position: relative;
}
/* rama rysunku technicznego: cienki inset-frame + znaczniki narożne */
.tour-grid::before {
  content:""; position:absolute; inset: clamp(-24px, -2vw, -40px) 0;
  pointer-events:none; z-index:0;
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
  opacity: .8;
  transition: opacity .5s var(--ease);
}
.tour-sticky:not([data-scene="0"]) .tour-grid::before { opacity: 0; }
/* znaczniki narożne + współrzędna FIG. */
.tour-grid::after {
  content:"FIG. 01 — DAPLER / SYSTEM OPERACYJNY";
  position:absolute; left:0; top: clamp(-38px, -3vw, -54px);
  font-family: var(--mono); font-size: 10px; letter-spacing:.2em;
  color: var(--slaby); text-transform: uppercase;
  transition: opacity .5s var(--ease);
}
.tour-sticky:not([data-scene="0"]) .tour-grid::after { opacity: 0; }

.hero-copy, .scene-copy { grid-area: 1 / 1; position: relative; z-index: 1; }

.hero-sub { color: var(--stal); font-size: 18px; max-width: 46ch; margin: 26px 0 32px; }
.hero-sub b { color: var(--tusz); font-weight: 600; box-shadow: inset 0 -0.4em rgba(14,125,133,.14); }
.hero-cta { display:flex; align-items:center; gap: 26px; flex-wrap:wrap; }
.hero-note { font-size: 13.5px; color: var(--slaby); margin-top: 28px; max-width: 44ch; line-height:1.55; }
.hero-note b { color: var(--stal); font-weight:600; }

.hero-copy { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tour-sticky:not([data-scene="0"]) .hero-copy {
  opacity: 0; transform: translateY(-26px); pointer-events: none;
}

/* kontener scen leży NAD hero-copy w tej samej komórce gridu — sam nie może
   łapać kliknięć (blokował CTA hero); aktywna .scene-txt dostaje auto z powrotem */
.scene-copy { min-height: 300px; pointer-events: none; }
.scene-txt {
  position: absolute; inset: 0; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; gap: 16px;
  opacity: 0; transform: translateY(28px); pointer-events:none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.scene-txt p { color: var(--stal); font-size: 17px; max-width: 40ch; }
.scene-txt .btn { margin-top: 8px; }
.scene-idx {
  font-family: var(--mono); font-size: 12px; font-weight:600;
  color: var(--cyjan-t); letter-spacing:.16em;
}
.scene-idx::after { content:" / 04"; color: var(--slaby); }
.tour-sticky[data-scene="1"] .scene-txt[data-s="1"],
.tour-sticky[data-scene="2"] .scene-txt[data-s="2"],
.tour-sticky[data-scene="3"] .scene-txt[data-s="3"],
.tour-sticky[data-scene="4"] .scene-txt[data-s="4"] {
  opacity: 1; transform: none; pointer-events: auto;
}

/* --- finał (scena 5): przekaz nad kartą z logo --- */
.finale {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  /* centrowanie całej kompozycji (tekst ~140px + odstęp + karta ~325px ≈ 520px)
     w pionie viewportu; max() gwarantuje prześwit pod sticky nav */
  padding-top: max(84px, calc(50vh - 260px));
  visibility:hidden;
  transition: visibility 0s .8s;
}
.tour-sticky[data-scene="5"] .finale { visibility:visible; transition-delay: 0s; }
.f-item {
  opacity:0; transform:translateY(26px); filter:blur(10px);
  transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
}
.finale h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; }
.finale h2 em { box-shadow: inset 0 -0.09em rgba(23,171,175,.2); }
.f-sub {
  font-family: var(--mono); font-size: 12.5px; letter-spacing:.1em;
  text-transform: uppercase; color: var(--stal); margin-top: 20px;
}
.tour-sticky[data-scene="5"] .f-item { opacity:1; transform:none; filter:none; }
.tour-sticky[data-scene="5"] .f-item:nth-child(1) { transition-delay: .2s; }
.tour-sticky[data-scene="5"] .f-item:nth-child(2) { transition-delay: .4s; }

/* --- rail scen: pionowy indeks specyfikacji --- */
.tour-rail {
  position:absolute; left: 6px; top: 50%; transform: translateY(-50%);
  list-style:none; display:flex; flex-direction:column; gap:20px;
  opacity: 0; transition: opacity .4s; z-index: 2; pointer-events: none;
}
.tour-sticky:not([data-scene="0"]) .tour-rail { opacity:1; }
.tour-rail li {
  font-family: var(--mono); font-size: 10px; letter-spacing:.14em;
  text-transform: uppercase; color: var(--slaby);
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding-right: 9px; border-right: 1.5px solid var(--linia);
  transition: color .3s, border-color .3s;
}
.tour-sticky[data-scene="1"] .tour-rail li[data-r="1"],
.tour-sticky[data-scene="2"] .tour-rail li[data-r="2"],
.tour-sticky[data-scene="3"] .tour-rail li[data-r="3"],
.tour-sticky[data-scene="4"] .tour-rail li[data-r="4"] {
  color: var(--tusz); border-color: var(--cyjan-t);
}

/* ============================================================
   DASHBOARD — figura specyfikacji
============================================================ */
.dash-col {
  position: relative; perspective: 1400px;
  transition: transform 1.05s var(--ease);
  transform-origin: top center;
}
/* finał: dashboard sunie na środek sceny (dokładny offset liczy JS: --fin-x);
   grid centruje kolumnę w pionie — stałe +105px robi miejsce na tekst nad kartą,
   przez co cała kompozycja (tekst + karta) jest wyśrodkowana na ekranie */
.tour-sticky[data-scene="5"] .dash-col {
  transform: translateX(var(--fin-x, -47%)) translateY(105px);
}
/* poświata za kartą w finale */
.dash-col::before {
  content:""; position:absolute; inset: -12% -18%; z-index:-1; pointer-events:none;
  background: radial-gradient(closest-side, rgba(23,171,175,.16), rgba(23,171,175,.05) 55%, transparent 78%);
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.tour-sticky[data-scene="5"] .dash-col::before { opacity: 1; }
.tour-sticky[data-scene="5"] .pills { opacity: 0; pointer-events: none; }
.tour-sticky[data-scene="5"] .dash-cap { opacity: 0; }

.pills { display:flex; gap:7px; margin-bottom:18px; flex-wrap:wrap; transition: opacity .5s var(--ease); }
.pill {
  position:relative; overflow:hidden;
  font-family: var(--mono); font-size: 11.5px; font-weight:500; letter-spacing:.02em;
  color: var(--stal);
  background: var(--bialy-2);
  border: 1px solid var(--linia); border-radius: var(--r-sm);
  padding: 7px 14px 8px;
  transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease);
}
.pill:hover { transform: translateY(-1px); border-color: var(--stal); color: var(--tusz); }
.pill.is-on { color: var(--tusz); border-color: var(--tusz); background: var(--bialy-2); }
.pill-bar {
  position:absolute; left:0; bottom:0; height:2px; width:0;
  background: var(--cyjan); border-radius:2px;
}

.dash {
  position: relative;
  background: var(--bialy);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  box-shadow: var(--shadow-dash);
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(var(--dsc, .985));
  transition: transform .4s var(--ease), box-shadow 1.1s var(--ease);
}
.tour-sticky[data-scene="5"] .dash {
  box-shadow: var(--shadow-dash), 0 40px 120px -30px rgba(23,171,175,.3);
}
/* finał: czysta karta z logo przykrywa cały dashboard */
.dash-logo {
  position:absolute; inset:0; z-index:8;
  border-radius: inherit; background: var(--bialy);
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition: opacity .8s var(--ease) 0s, visibility 0s .8s;
}
.dash-logo img { width: 92px; display:block; }
/* wejście (rise+scale) na wrapperze, obrót na samym logo — bez konfliktu transformów */
.dl-spin {
  display:block;
  transform: scale(.92) translateY(8px);
  transition: transform .9s var(--ease);
}
.tour-sticky[data-scene="5"] .dash-logo {
  opacity:1; visibility:visible;
  transition: opacity .8s var(--ease) .45s, visibility 0s .45s;
}
.tour-sticky[data-scene="5"] .dl-spin { transform: none; transition-delay: .45s; }
.tour-sticky[data-scene="5"] .dash-logo img { animation: logoSpin 26s linear infinite; }
@keyframes logoSpin { to { transform: rotate(360deg); } }
/* hover na karcie finału: lekkie uniesienie + mocniejsza teal poświata */
.tour-sticky[data-scene="5"] .dash {
  transition: transform .45s var(--ease), box-shadow .55s var(--ease), border-color .45s var(--ease);
}
.tour-sticky[data-scene="5"] .dash:hover {
  transform: translateY(-6px);
  border-color: rgba(23,171,175,.4);
  box-shadow: var(--shadow-dash), 0 30px 70px -24px rgba(23,171,175,.34), 0 54px 140px -30px rgba(23,171,175,.45);
}
.tour-sticky:not([data-scene="0"]) .dash { --dsc: 1; --tx: 0deg; --ty: 0deg; }

.dash-chrome {
  display:flex; align-items:center; gap:14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linia);
  /* flex bez zawijania: na wąskim ekranie nazwa nie może rozpychać karty */
  overflow: hidden;
}
.dots { display:flex; gap:6px; }
.dots i { width:8px; height:8px; border-radius:50%; background: var(--linia); }
.dash-brand {
  font-family: var(--mono); font-size: 11px; letter-spacing:.04em; color: var(--stal);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-live {
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-family: var(--mono); font-size: 10px; color: var(--slaby);
  text-transform: uppercase; letter-spacing:.12em;
}
.live-dot { width:6px; height:6px; border-radius:50%; background: var(--cyjan); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(23,171,175,.5);} 55%{ box-shadow:0 0 0 6px rgba(23,171,175,0);} }

.dash-body {
  display:flex; height: 430px;
  border-radius: 0 0 var(--r) var(--r); overflow:hidden;
  transition: height 1.05s var(--ease);
}
/* finał: karta spłaszcza się do niskiej plakietki pod logo */
.tour-sticky[data-scene="5"] .dash-body { height: 280px; }

/* sidebar — ciemna klamra DNA marki */
.dash-side {
  width: 140px; flex-shrink:0;
  background: var(--tusz);
  padding: 16px 10px;
  display:flex; flex-direction:column; gap:14px;
}
.side-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: #fff; display: grid; place-items: center;
  margin: 2px 0 6px 6px;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.4);
}
.side-mark img { width: 17px; }
.side-nav { list-style:none; display:flex; flex-direction:column; gap:1px; }
.side-item {
  display:flex; align-items:center; gap:10px;
  font-size: 12px; font-weight:500; color:#93948F;
  padding: 8px 9px; border-radius: 5px;
  transition: opacity .3s var(--ease), transform .3s var(--ease), color .2s, background .2s;
}
.side-item svg { width:14px; height:14px; flex-shrink:0; }
.side-item.on { background: rgba(23,171,175,.12); color: #6FD9DC; }
.side-item.morphing { opacity:.28; transform: translateX(-6px); }

/* main */
.dash-main {
  flex:1; min-width:0; padding: 18px 16px;
  container-type: inline-size;
  background: #EFEDE6;
  display:flex; flex-direction:column; gap:14px;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.dash-main.switching { opacity:.32; transform: translateY(6px); }
.view-head { display:flex; align-items:baseline; gap:10px; }
.view-title { font-size: 14.5px; font-weight: 700; letter-spacing:-.01em; }
.view-date { margin-left:auto; font-family: var(--mono); font-size: 10px; letter-spacing:.05em; color: var(--slaby); }

/* pulpit */
/* minmax(0,…): karty nie mogą wypychać się poza dash swoim min-contentem */
.stat-row { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:9px; }
.stat {
  background: var(--bialy); border:1px solid var(--linia); border-radius:var(--r-sm);
  padding: 12px 14px;
  transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.stat:hover { border-color: var(--accent-line, rgba(14,125,133,.3)); box-shadow: 0 8px 20px -12px rgba(16,18,20,.2); transform: translateY(-1px); }
/* rezerwa na 2 linie: liczby stoją na tej samej wysokości i rząd statystyk
   nie zmienia wysokości między branżami (wykres pod spodem nie skacze) */
.stat-label { font-size: 10.5px; color: var(--stal); margin-bottom:7px; letter-spacing:.01em; min-height: 3.2em; }
.stat-num { font-family: var(--mono); font-size: 21px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.stat-sub { font-size: 10.5px; margin-top:7px; font-weight:600; }
.stat-sub.ok { color: var(--ok); } .stat-sub.warn { color: var(--warn); } .stat-sub.err { color: var(--err); }

.panel-row { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:9px; flex:1; }
.card { background: var(--bialy); border:1px solid var(--linia); border-radius:var(--r-sm); padding: 13px 14px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); display:flex; flex-direction:column; }
.card:hover { border-color: rgba(14,125,133,.26); box-shadow: 0 8px 22px -14px rgba(16,18,20,.18); }
.card-title { font-size: 11px; font-weight:600; color: var(--stal); margin-bottom: 13px; letter-spacing:.01em; }
/* margin-top:auto: słupki przypięte do dołu karty — tytuł na 1 czy 2 linie
   nie zmienia pozycji wykresu między branżami */
.bars { display:flex; align-items:flex-end; gap:8px; height: 108px; margin-top:auto; }
.bar {
  flex:1; border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, var(--cyjan), #0E7D85);
  transform-origin: bottom center;
  animation: barGrow .7s var(--ease) both;
}
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bar:nth-child(odd) { opacity:.5; }
.bars-cap { display:flex; gap:8px; margin-top:8px; }
.bars-cap span { flex:1; text-align:center; font-family:var(--mono); font-size: 9px; letter-spacing:.05em; color: var(--slaby); }

.minitable { display:flex; flex-direction:column; gap:8px; }
.mini-row { display:flex; align-items:center; gap:8px; font-size: 12px; padding: 6px 2px; border-bottom: 1px solid var(--linia); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.mini-row:last-child { border-bottom:none; }
.mini-row b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-row > span { white-space:nowrap; color: var(--stal); font-size: 11px; }
.mini-row .chip { margin-left:auto; }
/* ciasny dash (dwukolumnowy hero): środkowa kolumna mini-tabeli schodzi,
   nazwa i chip zostają w całości — zero ucinania do pojedynczych liter */
@container (max-width: 430px) {
  .mini-row > span:not(.chip) { display:none; }
}

/* chips — stonowane, premium */
.chip {
  font-family: var(--mono); font-size: 9.5px; font-weight:500; letter-spacing:.02em;
  padding: 3px 8px; border-radius: 4px; white-space:nowrap;
}
/* kolory z tokenów, nie wpisane na sztywno — inaczej podniesienie kontrastu
   w :root omija plakietki (tak było do audytu 2026-08-24) */
.chip.ok   { background: rgba(58,113,69,.12);  color: var(--ok); }
.chip.warn { background: rgba(133,88,25,.14);  color: var(--warn); }
.chip.err  { background: rgba(155,54,47,.10);  color: var(--err); }
.chip.info { background: rgba(14,125,133,.10); color: var(--cyjan-t); }
.chip.mut  { background: rgba(84,87,90,.09);   color: var(--stal); }

/* tabela */
.tbl { width:100%; border-collapse:collapse; font-size: 12px; background:var(--bialy); border:1px solid var(--linia); border-radius:var(--r-sm); overflow:hidden; }
.tbl-wrap { border-radius: var(--r-sm); overflow:hidden; border:1px solid var(--linia); background:var(--bialy); }
.tbl-wrap .tbl { border:none; }
.tbl th {
  text-align:left; font-family: var(--mono); font-size: 9px; font-weight:500;
  text-transform:uppercase; letter-spacing:.07em; color: var(--slaby); white-space:nowrap;
  padding: 9px 9px; border-bottom: 1px solid var(--linia); background:var(--bialy-2);
}
/* stała wysokość wiersza: 1- i 2-liniowe komórki dają identyczną tabelę
   w każdej branży (zero skakania stopki listy przy morphie) */
.tbl td { padding: 5px 9px; height: 44px; line-height: 1.3; border-bottom: 1px solid var(--linia-2); transition: background .2s var(--ease); }
.tbl tr:last-child td { border-bottom:none; }
.tbl td b { font-weight:600; }
.tbl td.num { font-family: var(--mono); font-size: 11px; }
.tbl tbody tr:hover td { background: rgba(14,125,133,.045); }
.tbl tr { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.tbl tr.morph-out { opacity:0; transform: translateY(6px); }
.tbl tr.is-new td { animation: rowNew 1.6s var(--ease); }
@keyframes rowNew { 0% { background: rgba(23,171,175,.15); } 100% { background: transparent; } }
.list-foot {
  font-family: var(--mono); font-size: 9.5px; letter-spacing:.04em; color: var(--slaby);
  display:flex; justify-content:space-between; padding: 4px 2px 0;
}

/* obieg */
.flow-list { display:flex; flex-direction:column; gap:8px; }
.flow-item {
  display:flex; align-items:center; gap:12px;
  background: var(--bialy); border:1px solid var(--linia); border-radius:var(--r-sm);
  padding: 11px 14px; font-size: 12.5px;
  transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.flow-item:hover { border-color: rgba(14,125,133,.28); box-shadow: 0 8px 22px -14px rgba(16,18,20,.18); transform: translateY(-1px); }
.flow-item.morph-out { opacity:0; transform: translateY(6px); }
.flow-ava {
  width:26px; height:26px; border-radius:6px; flex-shrink:0;
  background: var(--tusz); color:#fff;
  font-family: var(--mono); font-size: 9px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.flow-body { min-width:0; }
.flow-body b { display:block; font-weight:600; }
.flow-body span { font-size: 11px; color: var(--slaby); }
.flow-item .chip { margin-left:auto; }

/* dokument */
.doc-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; flex:1; }
.doc-fields { display:flex; flex-direction:column; gap:0; }
.doc-field { display:flex; justify-content:space-between; gap:10px; font-size:12px; padding: 8.5px 2px; border-bottom:1px solid var(--linia); }
.doc-field span { color: var(--stal); }
.doc-field b { font-family: var(--mono); font-size: 11px; font-weight:500; text-align:right; }
/* prawa kolumna = strefa akcji */
.doc-side {
  display:flex; flex-direction:column; gap:12px; justify-content:center; align-items:center;
  background: var(--bialy);
  border: 1px solid var(--linia);
  border-radius: var(--r-sm); padding: 20px 16px;
}
/* przycisk premium: ciemny tuszowy z akcentem */
.btn-gen {
  position: relative; overflow: hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--tusz);
  color:#fff; font-size: 12.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  border: 1px solid var(--tusz); border-radius: var(--r-sm);
  padding: 12px 20px;
  box-shadow: 0 10px 26px -12px rgba(16,18,20,.5);
  transition: transform .18s var(--ease), box-shadow .3s var(--ease);
}
.btn-gen svg { width:14px; height:14px; flex-shrink:0; color:#4FD0D2; }
.btn-gen::before {
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transition: left .7s var(--ease);
}
.btn-gen:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(16,18,20,.6); }
.btn-gen:hover::before { left: 150%; }
.btn-gen.pressed { transform: scale(.97); }

.doc-progress { width: 170px; max-width: 100%; height: 4px; border-radius:3px; background: rgba(16,18,20,.09); overflow:hidden; }
.doc-progress i { display:block; height:100%; width:0; background: linear-gradient(90deg, #0E7D85, var(--cyjan)); border-radius:3px; transition: width 1.1s var(--ease); }
.doc-progress.run i { width: 100%; }
.doc-file {
  display:flex; align-items:center; gap:10px; align-self: stretch;
  background: var(--bialy-2); border:1px solid var(--linia); border-radius:var(--r-sm);
  padding: 10px 13px; font-family: var(--mono); font-size: 11px;
  box-shadow: 0 6px 18px -10px rgba(16,18,20,.22);
  opacity:0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.doc-file svg { width:14px; height:14px; flex-shrink:0; color: var(--cyjan-t); }
.doc-file.show { opacity:1; transform:none; }
.doc-file .fi-ok { color: var(--ok); margin-left:auto; font-weight:700; }

/* --- callouty (adnotacje spec-sheet) --- */
.callout {
  position:absolute; right: 14px; bottom: -30px; z-index: 6; pointer-events:none;
  opacity:0; transition: opacity .3s var(--ease);
}
.tour-sticky[data-scene="1"] .callout[data-c="1"],
.tour-sticky[data-scene="2"] .callout[data-c="2"],
.tour-sticky[data-scene="3"] .callout[data-c="3"] { opacity:1; }
.callout.leaving { opacity: 0 !important; transition: opacity .24s var(--ease); }
.co-tip {
  position:absolute; left:var(--tipx,0); top:var(--tipy,0);
  width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background: var(--cyjan); outline: 3px solid rgba(23,171,175,.2); z-index:2;
}
.co-lead {
  position:absolute; left:var(--tipx,0); top:var(--tipy,0);
  height:1.4px; width:var(--len,0); background: var(--cyjan);
  transform-origin:0 50%; transform: rotate(var(--ang,0));
  border-radius: 2px; opacity:.85;
}
.co-box {
  position:relative; display:block; width:max-content; max-width: 240px;
  background: rgba(18,20,22,.94); color: #ECEFEA;
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 14px 34px -12px rgba(16,18,20,.6);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5; letter-spacing:.01em;
  padding: 9px 13px; border-radius: 7px;
}
.co-box::before {
  content:""; position:absolute; top:-4px; right: 27px;
  width:9px; height:9px; border-radius:2px;
  background: rgba(18,20,22,.94);
  transform: rotate(45deg);
}
.callout.pulse .co-box  { animation: coPop .5s var(--ease) both; }
.callout.pulse .co-tip  { animation: coTip .45s var(--ease); }
.callout.pulse .co-lead { animation: coLead .5s var(--ease); }
@keyframes coPop  { 0% { opacity:0; transform: translateY(10px) scale(.96); } 100% { opacity:1; transform:none; } }
@keyframes coTip  { 0% { opacity:0; transform: scale(0); } 60% { transform: scale(1.35); } 100% { opacity:1; transform: scale(1); } }
@keyframes coLead { 0% { width:0; opacity:0; } 100% { width:var(--len,0); opacity:.85; } }

.dash-cap { font-family: var(--mono); font-size: 10.5px; line-height: 1.6; letter-spacing:.02em; color: var(--slaby); margin-top: 16px; max-width: 52ch; min-height: 34px; }

/* ============================================================
   SEKCJE
============================================================ */
.section { padding: clamp(80px, 9vw, 132px) 0; border-top: 1px solid var(--linia); background: var(--papier); position:relative; z-index:2; }
.sec-alt { background: var(--papier-2); }

/* ciemna klamra — case studies */
.sec-dark { background: #0C0E10; border-top: 1px solid rgba(255,255,255,.06); }
.sec-dark .kicker { color: #8B8C87; }
.sec-dark .kicker::before { background: var(--cyjan); }
.sec-dark .kicker .idx { color: #4FD0D2; }
.sec-dark .sec-head h2 { color: #F0EEE7; }
.sec-dark .sec-head h2 em { color: #F0EEE7; }
.sec-dark .sec-head p { color: #93948F; }
.sec-dark .cs-card {
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.75);
}
.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }
.sec-head p { color: var(--stal); margin-top: 18px; font-size: 17.5px; max-width: 56ch; }

.steps { display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top:1px solid var(--linia); }
.step {
  position: relative;
  background: transparent; border-right:1px solid var(--linia);
  padding: 32px 30px 30px 0;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
/* odstęp między kolumnami z paddingu (nie marginesu) — komórki stykają się
   krawędziami, więc hover-hairline zaczyna się dokładnie od dividera */
.step + .step { padding-left: 30px; }
.steps .step:last-child { border-right:none; padding-right:0; }
/* hover: teal hairline rośnie po górnej linii kolumny — bez unoszenia kroku,
   żeby linia nie odklejała się od krawędzi */
.step::before {
  content:""; position:absolute; top:-1px; left:0; height:1px; width:0;
  background: var(--cyjan-t); transition: width .55s var(--ease);
}
.step:hover::before { width:100%; }
.sec-dark .step::before { background: #4FD0D2; }
.step-idx { font-family: var(--mono); font-size: 12px; color: var(--cyjan-t); font-weight:600; letter-spacing:.14em; }
.step h3 { margin-top: 4px; }
.step p { color: var(--stal); font-size: 15px; flex:1; }
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing:.06em;
  color: var(--stal); background: transparent;
  border:1px solid var(--linia); border-radius:var(--r-sm); padding: 5px 11px;
}
/* proces na ciemnym pasie — kroki jako kolumny z jasnymi hairline'ami */
.sec-dark .steps { border-top-color: rgba(240,238,231,.12); }
.sec-dark .step { border-right-color: rgba(240,238,231,.1); }
.sec-dark .step h3 { color: var(--kosc); }
.sec-dark .step p { color: #93948F; }
.sec-dark .step-idx { color: #4FD0D2; }
.sec-dark .tag { color: #A9AAA4; border-color: rgba(240,238,231,.16); }

/* spotlight kart */
.spot { position: relative; }
.spot::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition: opacity .35s var(--ease); border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(14,125,133,.09), transparent 65%);
}
.spot:hover::after { opacity:1; }

/* audyt — ledger kart */
.gets { display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border:1px solid var(--linia); border-radius: var(--r); overflow:hidden; background: var(--bialy); }
.get-card {
  padding: 26px 24px; overflow:hidden;
  border-right:1px solid var(--linia);
  transition: background .35s var(--ease);
}
.get-card:last-child { border-right:none; }
.get-card:hover { background: var(--bialy-2); }
.gi {
  width: 40px; height: 40px; border-radius: 8px;
  display:grid; place-items:center; margin-bottom: 18px;
  color: var(--cyjan-t); background: rgba(14,125,133,.07);
  border: 1px solid rgba(14,125,133,.18);
}
.get-card h4 { font-family: var(--body); font-size: 16px; font-weight: 600; margin-bottom: 9px; letter-spacing:-.005em; }
.get-card p { color: var(--stal); font-size: 14px; line-height: 1.55; }
.risk-note {
  display:flex; align-items:flex-start; gap: 16px;
  margin-top: 28px; padding: 22px 26px;
  background: transparent;
  border: 1px solid var(--linia); border-radius: var(--r); border-left: 2px solid var(--cyjan-t);
}
.risk-note .ri { color: var(--cyjan-t); flex-shrink:0; margin-top: 2px; }
.risk-note p { color: var(--stal); font-size: 15px; }
.risk-note b { color: var(--tusz); }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-right:none; padding: 26px 0; border-bottom:1px solid var(--linia); }
  .step + .step { padding-left: 0; }
  .sec-dark .step { border-bottom-color: rgba(240,238,231,.1); }
  .steps .step:last-child { border-bottom:none; }
  .gets { grid-template-columns: repeat(2, 1fr); }
  .get-card:nth-child(2) { border-right:none; }
  .get-card:nth-child(1), .get-card:nth-child(2) { border-bottom:1px solid var(--linia); }
}

/* ============================================================
   CASE STUDIES — sticky stacking deck (ciemna klamra)
   + BOOKING MODAL — wspólny scope ciemnych tokenów
============================================================ */
.cs-stack, .modal-overlay {
  --surface:   #16181B;
  --surface-2: #1D2023;
  --ink:       #0A0C0E;
  --ink-2:     #0E1012;
  --bone:      #F0EEE7;
  --bone-dim:  #C3C1BA;
  --muted:     #8B8C87;
  --faint:     #52555A;
  --line:      rgba(240,238,231,0.11);
  --line-2:    rgba(240,238,231,0.05);
  --gold:      #17ABAF;
  --gold-lt:   #4FD0D2;
  --gold-glow: rgba(23,171,175,0.16);
  --t-xs: 12.5px; --t-sm: 15px; --t-base: 17.5px;
}

.cs-stack { position: relative; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }

.cs-card {
  position: sticky;
  top: calc(96px + var(--i) * 26px);
  border: 1px solid rgba(240,238,231,0.13);
  border-radius: var(--r);
  padding: clamp(28px, 3.6vw, 48px);
  background: #131518;
  box-shadow: 0 20px 60px -30px rgba(0,0,0,0.7);
  overflow: hidden;
  transform-origin: 50% 0;
  isolation: isolate;
  color: var(--bone-dim);
}
.cs-card:nth-child(1) { z-index: 1; }
.cs-card:nth-child(2) { z-index: 2; }
.cs-card:nth-child(3) { z-index: 3; }

@supports (animation-timeline: view()) {
  .cs-card {
    animation: cs-recede linear both;
    animation-timeline: view();
    animation-range: exit-crossing 0% exit-crossing 60%;
  }
  .cs-card:last-child { animation: none; }
}
@keyframes cs-recede {
  to { transform: scale(0.93); filter: brightness(0.72) saturate(0.9); }
}

/* poświata zdjęta — nic innego na stronie nie świeci kolorem;
   .cs-glow zostaje w HTML jako pusty węzeł, nie renderuje się */
.cs-glow { display: none; }

.cs-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px;
  padding-bottom: clamp(22px, 2.6vw, 32px);
  margin-bottom: clamp(24px, 2.8vw, 36px);
  border-bottom: 1px solid var(--line);
}
.cs-logo {
  flex-shrink: 0; width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 500; font-size: 23px; color: var(--gold-lt);
  overflow: hidden;
}
.cs-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cs-logo-img { padding: 0; border-color: rgba(240,238,231,0.14); background: #1b1b1b; }
.cs-logo-img img { object-fit: cover; padding: 0; display: block; }
.cs-name {
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 480; font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -0.02em; line-height: 1; color: var(--bone);
}
.cs-status {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  padding: 5px 11px; border-radius: 5px; white-space: nowrap;
}
.cs-status.is-proto { color: var(--gold-lt); background: var(--gold-glow); border: 1px solid rgba(23,171,175,0.3); }
/* wdrożenie na produkcji — status z żywą kropką, mocniejszy niż prototyp */
.cs-status.is-live {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-lt); background: transparent; border: 1px solid rgba(23,171,175,0.35);
}
.cs-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  animation: cs-pulse 2.4s var(--ease) infinite;
}
@keyframes cs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cs-status.is-example { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.cs-sector {
  margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500; color: var(--muted); text-align: right;
}

.cs-body { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.cs-lede { font-size: var(--t-base); line-height: 1.6; color: var(--bone-dim); margin-bottom: 28px; max-width: 44ch; }
.cs-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.cs-list li { display: flex; align-items: flex-start; gap: 13px; font-size: var(--t-sm); line-height: 1.45; color: var(--bone-dim); font-weight: 500; }
.cs-check {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: transparent; border: 1px solid rgba(23,171,175,0.35); color: var(--gold-lt);
}
/* pozycja z roadmapy, jeszcze nie dowieziona — znacznik inny niż odhaczenie */
.cs-check.is-next { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.cs-soon {
  margin-left: 8px; white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px;
  vertical-align: middle;
}
.cs-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cs-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--bone-dim);
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 5px;
  background: rgba(240,238,231,0.02);
}
/* wejście w case study: cel kliknięcia wielkości przycisku, nie linijki tekstu */
.cs-more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  padding: 11px 18px; border-radius: var(--r-sm);
  border: 1px solid rgba(23,171,175,0.35);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; color: var(--gold-lt);
  transition: border-color .3s var(--ease), background .3s var(--ease), gap .3s var(--ease);
}
.cs-more:hover, .cs-more:focus-visible {
  border-color: var(--gold-lt); background: rgba(23,171,175,0.08); gap: 15px;
}

.cs-right {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.cs-metric {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: clamp(20px, 2.6vw, 32px);
  background: #131518;
  transition: box-shadow 0.4s var(--ease);
}
.cs-metric::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(23,171,175,0.12) 0%, transparent 100%);
  opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.cs-metric > * { position: relative; z-index: 1; }
.cs-metric:hover::before { opacity: 1; }
.cs-metric:hover { box-shadow: inset 0 0 0 1px rgba(23,171,175,0.22); }
.cs-num {
  font-family: var(--display); font-optical-sizing: auto;
  font-style: normal; font-weight: 400;
  font-size: clamp(34px, 4vw, 52px); line-height: 0.95;
  color: var(--bone); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}
.cs-metric:hover .cs-num { color: var(--gold-lt); }
.cs-unit {
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--muted); margin-left: 6px;
}
.cs-unit.is-sym { font-size: 17px; letter-spacing: 0; margin-left: 3px; }
.cs-metric:hover .cs-unit { color: var(--bone-dim); }
.cs-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; line-height: 1.4;
}
/* karta bez publicznego opisu — w miejscu, gdzie normalnie stoi link */
.cs-hold {
  margin-top: 28px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.cs-foot { text-align: center; margin-top: clamp(48px, 6vw, 80px); font-size: var(--t-sm); color: #93948F; }
.cs-foot a { color: var(--gold-lt); border-bottom: 1px solid rgba(79,208,210,0.4); transition: border-color .3s var(--ease); cursor: pointer; }
.cs-foot a:hover { border-color: var(--gold-lt); }

@media (max-width: 820px) {
  .cs-body { grid-template-columns: 1fr; gap: 28px; }
  .cs-card { top: calc(80px + var(--i) * 20px); }
  /* branża schodzi pod nazwę, zamiast walczyć o miejsce w jednym wierszu */
  .cs-sector { margin-left: 0; width: 100%; text-align: left; }
}

/* --- pusty stan sekcji case studies („Wkrótce") --- */
.soon-box {
  position: relative; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  min-height: clamp(280px, 34vw, 420px);
  padding: clamp(40px, 6vw, 76px) var(--pad);
  border: 1px solid rgba(240,238,231,.13);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent);
}
/* ta sama siatka arkusza co w tourze, tylko na ciemnym */
.soon-box::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(240,238,231,.07) 1px, transparent 1px) 0 0 / 100% 76px,
    linear-gradient(90deg, rgba(240,238,231,.07) 1px, transparent 1px) 0 0 / 76px 100%;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 8%, transparent 72%);
}
.soon-box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(23,171,175,.13), transparent 74%);
}
.soon-box > * { position: relative; z-index: 1; }
.soon-cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--slaby);
}
.soon-word {
  font-family: var(--display); font-optical-sizing: auto;
  font-style: italic; font-weight: 420;
  font-size: clamp(44px, 6.4vw, 92px); line-height: 1;
  letter-spacing: -.02em; color: var(--kosc);
  margin-top: clamp(18px, 2.4vw, 30px);
}
.soon-sub {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #93948F;
  margin-top: clamp(16px, 2vw, 24px);
}

/* ============================================================
   BOOKING MODAL (port z live, ciemny)
============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8,10,12,0.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
  position: relative; width: 100%;
  max-width: 560px; max-height: 90vh; max-height: 90dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #16181B 0%, #101214 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: clamp(28px, 3.4vw, 48px);
  color: var(--bone-dim);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.6);
  transform: translateY(22px) scale(0.985);
  transition: transform 0.45s var(--ease), max-width 0.4s var(--ease);
}
.modal-overlay.open .modal { transform: none; }
.modal[data-step="cal"] { max-width: 1040px; }
.modal[data-step="form"] { max-width: 900px; }
.modal[data-step="done"] { max-width: 520px; }

.modal .btn {
  background: var(--gold); color: var(--ink);
  border: none; border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--body);
}
.modal .btn:hover { background: var(--gold-lt); box-shadow: 0 8px 26px -8px rgba(23,171,175,0.55); }
.modal .h2 { font-family: var(--display); font-optical-sizing: auto; font-weight: 500; color: var(--bone); letter-spacing: -0.018em; }
.modal .h2 em { font-style: italic; color: var(--gold-lt); }

.modal-close {
  position: absolute; top: 22px; right: 22px; z-index: 3;
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  color: var(--bone-dim); font-size: 18px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.modal-close:hover { background: rgba(255,255,255,0.08); color: var(--bone); transform: rotate(90deg); }

.bk-step { display: none; }
.bk-step.active { display: block; animation: bkfade 0.4s var(--ease); }
@keyframes bkfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.bk-head { text-align: center; margin-bottom: 36px; }
.bk-badge {
  width: 64px; height: 64px; border-radius: 14px; margin: 0 auto 22px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 32% 26%, rgba(23,171,175,0.22), transparent 68%), var(--ink);
  border: 1px solid rgba(23,171,175,0.34);
  color: var(--gold-lt);
}
.bk-title { font-family: var(--display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; color: var(--bone); }
.bk-title em { font-style: italic; color: var(--gold-lt); }
.bk-sub { margin-top: 12px; color: var(--muted); font-size: var(--t-sm); }

.person-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.person-card {
  position: relative; text-align: left;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 24px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.person-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: rgba(23,171,175,0.05); opacity: 0;
  transition: opacity 0.35s var(--ease); pointer-events: none;
}
.person-card > * { position: relative; z-index: 1; }
.person-card:hover::after { opacity: 1; }
.person-card:hover { border-color: rgba(23,171,175,0.45); transform: translateY(-4px); }
.person-card.recommended {
  border-color: rgba(23,171,175,0.4);
  background: linear-gradient(180deg, rgba(23,171,175,0.07), rgba(23,171,175,0.01));
  box-shadow: 0 0 0 1px rgba(23,171,175,0.12), 0 22px 60px -30px var(--gold-glow);
}
.person-card.recommended:hover {
  border-color: rgba(23,171,175,0.65);
  box-shadow: 0 0 0 1px rgba(23,171,175,0.22), 0 26px 64px -28px var(--gold-glow);
}
.pbadge {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
  background: var(--gold-lt);
  padding: 5px 10px 5px 8px; border-radius: 5px;
}
.pbadge svg { display: block; }
.person-card .av, .cal-side .av, .bk-summary .av {
  width: 56px; height: 56px; border-radius: 10px; margin-bottom: 18px;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--display); font-style: italic; font-size: 22px; color: var(--gold-lt);
  background: radial-gradient(circle at 30% 25%, rgba(23,171,175,0.18), transparent 70%);
  border: 1px solid rgba(23,171,175,0.3);
}
.person-card .av img, .cal-side .av img, .bk-summary .av img { width: 100%; height: 100%; object-fit: cover; }
.cal-side .av, .bk-summary .av { width: 46px; height: 46px; font-size: 18px; margin-bottom: 16px; }
.person-card .pname { font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--bone); }
.person-card .prole { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 6px 0 0; }

.bk-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-sm); color: var(--muted); cursor: pointer;
  background: none; border: none; font-family: var(--body); font-weight: 500;
  margin-bottom: 24px; transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.bk-back:hover { color: var(--bone); gap: 12px; }

.bk-cal { display: grid; grid-template-columns: 220px 1fr 250px; gap: 0; }
.bk-cal > div { padding: 8px 28px; }
.cal-side { border-right: 1px solid var(--line-2); padding-left: 8px !important; }
.cal-side .who { font-size: var(--t-sm); color: var(--muted); }
.cal-side .what { font-family: var(--display); font-weight: 500; font-size: 28px; color: var(--bone); margin: 4px 0 6px; }
.cal-side .desc { font-size: var(--t-sm); color: var(--muted); margin-bottom: 28px; }
.cal-side .meta { display: flex; align-items: center; gap: 11px; font-size: var(--t-sm); color: var(--bone-dim); margin-bottom: 14px; }
.cal-side .meta svg { color: var(--muted); flex-shrink: 0; }

.cal-grid-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.cal-grid-head .mon { font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--bone); }
.cal-grid-head .mon span { color: var(--muted); }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); color: var(--bone-dim);
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s;
}
.cal-nav button:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: var(--bone); }
.cal-nav button:disabled { opacity: 0.3; cursor: not-allowed; }

.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.cal-dow span { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day {
  aspect-ratio: 1 / 1;
  border: none; border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--bone); font-family: var(--body); font-weight: 500; font-size: 15px;
  cursor: pointer; position: relative;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.cal-day:hover:not(.disabled):not(.selected) { background: rgba(23,171,175,0.14); transform: translateY(-2px); }
.cal-day.empty { background: none; cursor: default; }
.cal-day.disabled { color: var(--faint); background: none; cursor: not-allowed; }
.cal-day.selected { background: var(--bone); color: var(--ink); font-weight: 700; }
.cal-day.today::after {
  content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}
.cal-day.selected.today::after { background: var(--ink); }

.cal-slots { border-left: 1px solid var(--line-2); display: flex; flex-direction: column; }
.cal-slots-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-slots-head .sel-day { font-weight: 600; color: var(--bone); font-size: var(--t-base); }
.cal-slots-head .sel-day span { color: var(--muted); font-weight: 400; }
.fmt-toggle { display: flex; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.fmt-toggle button {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-family: var(--body); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 5px;
  transition: background 0.2s, color 0.2s;
}
.fmt-toggle button.on { background: rgba(255,255,255,0.1); color: var(--bone); }
.slots-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 360px; padding-right: 4px; }
.slot {
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255,255,255,0.02); color: var(--bone);
  font-family: var(--body); font-weight: 600; font-size: var(--t-sm);
  padding: 14px; text-align: center; cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.slot:hover { border-color: var(--gold); background: rgba(23,171,175,0.08); color: var(--gold-lt); }
.slots-empty { color: var(--muted); font-size: var(--t-sm); padding: 20px 4px; }

.slot.taken {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: not-allowed; color: var(--faint);
  background: rgba(255,255,255,0.012); border-color: var(--line-2);
}
.slot.taken:hover { border-color: var(--line-2); background: rgba(255,255,255,0.012); color: var(--faint); }
.slot.taken .slot-t {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 1px;
}
.slot.taken .slot-tag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 7px;
}
.slot.loading { cursor: progress; color: var(--faint); position: relative; overflow: hidden; }
.slot.loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(240,238,231,0.06), transparent);
  transform: translateX(-100%); animation: slotShimmer 1.1s var(--ease) infinite;
}
@keyframes slotShimmer { to { transform: translateX(100%); } }

.bk-form { display: grid; grid-template-columns: 0.85fr 1fr; gap: 0; }
.bk-summary { border-right: 1px solid var(--line-2); padding-right: 36px; }
.bk-summary .who { font-size: var(--t-sm); color: var(--muted); }
.bk-summary .what { font-family: var(--display); font-weight: 500; font-size: 28px; color: var(--bone); margin: 4px 0 24px; }
.bk-summary .meta { display: flex; align-items: flex-start; gap: 11px; font-size: var(--t-sm); color: var(--bone-dim); margin-bottom: 14px; line-height: 1.4; }
.bk-summary .meta svg { color: var(--muted); flex-shrink: 0; margin-top: 2px; }
.bk-form-fields { padding-left: 36px; }
.bk-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 8px; }
.btn-ghost {
  background: none; border: 1px solid var(--line); color: var(--bone-dim);
  border-radius: var(--r-sm); padding: 12px 22px; font-family: var(--body); font-weight: 600;
  font-size: var(--t-sm); cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn-ghost:hover { border-color: var(--bone-dim); color: var(--bone); }

.field { margin-bottom: 15px; }
.field label {
  display: block; font-size: var(--t-xs); letter-spacing: 0.02em;
  color: var(--bone-dim); margin-bottom: 7px; font-weight: 600;
}
.field label .req { color: var(--gold); }
.input, .textarea {
  width: 100%;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 15px;
  color: var(--bone);
  font-family: var(--body);
  font-size: var(--t-sm);
  line-height: 1.5;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .textarea:focus { border-color: var(--gold); background: rgba(23,171,175,0.04); }
/* ring tylko dla klawiatury; sam kolor obramowania to za slaby sygnal fokusu */
.input:focus-visible, .textarea:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
.textarea { resize: vertical; min-height: 96px; }
.field-error { display: none; margin-top: 8px; font-size: var(--t-xs); color: #E07A72; letter-spacing: 0.02em; }
.field.invalid .field-error { display: block; }
.field.invalid .input, .field.invalid .textarea { border-color: #E07A72; }
/* blad zapisu rezerwacji: role="alert" zostaje w DOM, :empty chowa pusty element */
.bk-fail { margin-top: 14px; font-size: var(--t-xs); line-height: 1.6; color: #E07A72; letter-spacing: 0.02em; }
.bk-fail:empty { display: none; }
.bk-fail a { color: var(--gold-lt); border-bottom: 1px solid rgba(79,208,210,0.4); }
.bk-fail a:hover { border-bottom-color: var(--gold-lt); }

.bk-done { text-align: center; padding: 12px 0 8px; }
.bk-done .check {
  width: 72px; height: 72px; border-radius: 16px; margin: 0 auto 26px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(23,171,175,0.25), transparent 68%), var(--ink);
  border: 1px solid rgba(23,171,175,0.4); color: var(--gold-lt);
}
.bk-done .h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 16px; }
.bk-done p { color: var(--muted); font-size: var(--t-base); margin-bottom: 8px; }
.bk-done .recap { color: var(--bone); font-weight: 600; }
.bk-done .btn { margin: 30px auto 0; }

@media (max-width: 920px) {
  .modal[data-step="cal"], .modal[data-step="form"] { max-width: 560px; }
  .bk-cal { grid-template-columns: 1fr; }
  .bk-cal > div { padding: 0; }
  .cal-side { border-right: none; border-bottom: 1px solid var(--line-2); padding-bottom: 24px !important; margin-bottom: 24px; }
  .cal-side .meta { display: inline-flex; margin-right: 18px; }
  .cal-slots { border-left: none; border-top: 1px solid var(--line-2); padding-top: 24px; margin-top: 24px; }
  .slots-list { max-height: 260px; }
  .bk-form { grid-template-columns: 1fr; }
  .bk-summary { border-right: none; padding-right: 0; border-bottom: 1px solid var(--line-2); padding-bottom: 24px; margin-bottom: 24px; }
  .bk-form-fields { padding-left: 0; }
  .person-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-transparency: reduce) {
  .co-box { background: var(--tusz); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ============================================================
   ZAŁOŻYCIELE
============================================================ */
.founders-grid { display:grid; grid-template-columns: 5.2fr 6fr; gap: clamp(32px, 5vw, 76px); align-items:center; }
.founders-copy p:not(.kicker) { color: var(--stal); margin: 18px 0 26px; max-width: 50ch; }
.founders-copy .reveal:nth-child(1) { animation-delay: .04s; }
.founders-copy .reveal:nth-child(2) { animation-delay: .12s; }
.founders-copy .reveal:nth-child(3) { animation-delay: .20s; }
.founders-copy .reveal:nth-child(4) { animation-delay: .28s; }
.founders { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.founder {
  text-align:left; color: var(--tusz);
  transition: transform .45s var(--ease);
}
.founder img {
  width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: var(--r);
  filter: grayscale(100%) contrast(1.02); transition: filter .5s var(--ease);
  border: 1px solid var(--linia);
}
.founder:hover img { filter: grayscale(0%); }
.founder b { display:block; margin-top: 14px; font-family: var(--display); font-size: 19px; font-weight: 500; transition: color .3s var(--ease); }
.founder:hover b { color: var(--cyjan-t); }
.founder b { display:flex; align-items:baseline; gap:9px; }
.founder span { display:block; font-family: var(--mono); font-size: 10px; letter-spacing:.08em; text-transform: uppercase; color: var(--slaby); margin-top: 5px; }
/* funkcja w firmie — ten sam znacznik co na /o-nas (.t-tag), tu przy imieniu.
   Jako <i> wewnątrz <b>, bo selektor `.founder span` przejąłby typografię mono.
   align-items:baseline w .founder b sadza dopisek na linii pisma imienia,
   a display:block + margin-top na roli trzyma ją równo pod imieniem. */
.founder b .f-tag {
  font-family: var(--mono); font-style: normal; font-size: 9px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--slaby); border: 1px solid var(--linia);
  border-radius: var(--r-sm); padding: 4px 7px; line-height: 1;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.founder:hover b .f-tag { color: var(--cyjan-t); border-color: var(--cyjan-t); }

/* pasek zespołu pod trójką założycieli — założyciele zostają siatką 3 kolumn,
   reszta zespołu wchodzi jako lista wierszy pod włosową linią. Oba bloki muszą
   siedzieć w jednym .founders-col, bo .founders-grid to siatka DWÓCH kolumn:
   trzecie dziecko zjechałoby pod kolumnę z tekstem. */
.founders-col { display: grid; gap: 0; min-width: 0; }
.team-strip { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linia); }
.team-cap { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--slaby); margin-bottom: 14px; }
.team-row { display: flex; align-items: center; gap: 14px; color: var(--tusz); }
.team-av {
  width: 54px; height: 54px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--linia); border-radius: var(--r-sm);
}
.team-av img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.02); transition: filter .5s var(--ease); }
.team-row:hover .team-av img { filter: grayscale(0%); }
/* baseline + flex jak w .founder b — dopisek „· Team Member” siada na linii pisma imienia */
.team-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.2; transition: color .3s var(--ease); }
.team-row:hover .team-n { color: var(--cyjan-t); }
.team-note { font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--slaby); }
.team-r { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--slaby); margin-top: 6px; }

/* Bez tego bloku siatka trzyma dwie kolumny na każdej szerokości. Jej min-content
   to 142 + 32 + 213 = 407 px, więc na telefonie przeglądarka rozszerza layout
   viewport do 407 px i POMNIEJSZA CAŁĄ STRONĘ GŁÓWNĄ (88,5% na 360 px).
   min-width:0 jest konieczne: domyślne minmax(auto, Xfr) nie pozwala kolumnom
   zejść poniżej min-content i pomniejszenie wróciłoby mimo jednej kolumny.
   Audyt mobilny 2026-08-24, ustalenie 01. */
@media (max-width: 820px) {
  .founders-grid { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); }
  .founders-copy, .founders { min-width: 0; }
}

/* ---------- kontakt (ciemna klamra) ---------- */
.contact {
  background: var(--tusz); color:#ECEFEA;
  padding: clamp(80px, 8vw, 124px) 0; text-align:center;
  position: relative; overflow: hidden;
}
.contact::before {
  content:""; position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  /* min(): na telefonie poświata nie może być szersza od ekranu — mimo
     overflow:hidden powiększałaby mierzoną szerokość dokumentu */
  width: min(680px, 100%); height: 460px; pointer-events:none;
  background: radial-gradient(closest-side, rgba(23,171,175,.09), transparent 72%);
}
.contact .wrap { position: relative; z-index: 1; }
.contact .kicker { justify-content:center; }
.contact h2 { color:#fff; }
.contact h2 em { color: #fff; font-weight: 420; }
.contact-sub { color:#93948F; margin: 18px auto 34px; max-width: 46ch; }
.contact .btn { --bg: var(--kosc); --fg: var(--tusz); border-color: var(--kosc); }
.contact .btn svg { color: var(--cyjan-t); }  /* jasny teal ginie na kremowym — strzałka w ciemnym petrolu */
.contact .btn:hover {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(23,171,175,.22), 0 16px 44px -12px rgba(23,171,175,.4);
}
.contact-alt { margin-top: 26px; font-family: var(--mono); font-size: 12.5px; letter-spacing:.04em; color:#83847F; }
.contact-alt a { color: var(--cyjan); }

footer { background: var(--tusz); border-top:1px solid rgba(255,255,255,.06); padding: 38px 0; }
.foot { display:flex; align-items:center; gap: 28px; flex-wrap:wrap; }
.foot-brand { display:flex; align-items:center; gap:18px; }
.foot-brand img { height: 19px; }
.foot-brand a { color:#8B8C87; font-size:13px; }
.foot-nav { display:flex; gap: 20px; list-style:none; margin-left:auto; flex-wrap:wrap; }
.foot-nav a { color:#8B8C87; font-size: 13px; }
.foot-nav a:hover { color:#fff; }
.foot-copy { font-family: var(--mono); color:#9A9C97; font-size: 11.5px; letter-spacing:.04em; width:100%; }

/* ============================================================
   PODSTRONY — hero strony + zespół (o-nas)
============================================================ */
/* aktywna pozycja nav na podstronie */
.nav-links a[aria-current="page"] { color: #fff; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* pełny pierwszy ekran: hero zajmuje viewport minus nav (68px), treść
   wyśrodkowana — kolejna sekcja zaczyna się dopiero pod foldem */
.page-hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px);
  display: flex; align-items: center;
  padding: clamp(48px, 6vw, 88px) 0;
}
.page-hero > .wrap { width: 100%; }
/* pełnoekranowy hero uzasadnia większą skalę typografii niż sekcyjne h1 */
.page-hero h1 { font-size: clamp(40px, 5vw, 72px); }
.page-lead { font-size: clamp(18px, 1.5vw, 21.5px); }
/* link pod leadem w blokowym wrapperze (nie inline) — margines zawsze
   respektowany, zero nachodzenia na tekst niezależnie od przeglądarki */
.hero-more { display: flex; margin-top: clamp(36px, 4vw, 52px); }
.page-hero .ghost-link { font-size: 17px; gap: 12px; }
.page-hero .ghost-link:hover { gap: 17px; }
.page-hero .ghost-link .ic { width: 38px; height: 38px; }
.page-hero .ghost-link .ic svg { width: 13px; height: 13px; }
/* faint spec grid jak w tourze — podstrona to kolejny arkusz tej samej specyfikacji */
.page-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--linia) 1px, transparent 1px) 0 0 / 100% 84px,
    linear-gradient(90deg, var(--linia) 1px, transparent 1px) 0 0 / 84px 100%;
  opacity:.35;
  mask-image: radial-gradient(ellipse 90% 95% at 32% 18%, black 12%, transparent 74%);
}
.page-hero .wrap { position: relative; }
.page-hero h1 { max-width: 17ch; }
.page-lead { color: var(--stal); font-size: 18px; max-width: 50ch; margin-top: 26px; }
.page-lead b { color: var(--tusz); font-weight: 600; box-shadow: inset 0 -0.4em rgba(14,125,133,.14); }
.fig-mark {
  position: absolute; right: var(--pad); top: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--slaby); text-transform: uppercase;
}

/* --- zespół: karty w rombie, rama jak w kartach case study --- */
.team { --gap: clamp(18px, 2.2vw, 30px); }
.team-diamond {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap); max-width: 1000px; margin-inline: auto;
}

.t-card {
  position: relative;
  border: 1px solid var(--linia); border-radius: var(--r);
  background: var(--bialy); box-shadow: var(--shadow-card);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: border-color .35s var(--ease);
}
.sec-dark .t-card {
  border-color: rgba(240,238,231,.13); background: #131518;
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.7);
}
.t-card:hover, .t-card:focus-within { border-color: rgba(14,125,133,.42); }
.sec-dark .t-card:hover, .sec-dark .t-card:focus-within { border-color: rgba(79,208,210,.34); }
/* romb: CEO sam u góry, COO i CTO w środkowym rzędzie, na dole współpracownik */
.t-card.is-solo {
  grid-column: 1 / -1;
  width: min(100%, calc(50% - var(--gap) / 2)); justify-self: center;
}

.t-top { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 18px); width: 100%; }
.t-photo { flex: 0 0 clamp(78px, 8vw, 92px); }
.t-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--linia);
}
.sec-dark .t-photo img { border-color: rgba(240,238,231,.14); }
.t-photo img { filter: grayscale(100%) contrast(1.02); transition: filter .5s var(--ease); }
.t-card:hover .t-photo img, .t-card:focus-within .t-photo img { filter: grayscale(0%); }

.t-head { display: flex; flex-direction: column; min-width: 0; }
.t-name {
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 480; font-size: clamp(24px, 2.4vw, 31px);
  letter-spacing: -.02em; line-height: 1.04; color: var(--tusz);
}
.sec-dark .t-name { color: var(--kosc); }
.t-role {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; color: var(--cyjan-t);
  margin-top: 8px;
}
/* przypisek pod rolą — cichszy od niej o jeden stopień */
.t-note {
  margin-top: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slaby);
}
.sec-dark .t-role { color: #4FD0D2; }
/* funkcja w firmie — znacznik w rogu karty (jak status na karcie case study).
   Poza układem .t-top, żeby długa etykieta nie ściskała imienia i roli. */
.t-tag {
  position: absolute; top: clamp(19px, 2.3vw, 26px); right: clamp(19px, 2.3vw, 26px);
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--slaby); border: 1px solid var(--linia);
  border-radius: var(--r-sm); padding: 5px 10px;
}
.sec-dark .t-tag { color: #8B8C87; border-color: rgba(240,238,231,.14); }

.t-bio { color: var(--stal); font-size: 15.5px; line-height: 1.62; margin-top: 22px; }
.sec-dark .t-bio { color: #A9A7A0; }
/* LinkedIn równo przy dolnej krawędzi wszystkich kart w rzędzie */
.t-card .ghost-link { margin-top: auto; padding-top: 22px; }
/* klikalna cała karta — jeden link, bez dublowania celu dla czytnika ekranu */
.t-card .ghost-link::after { content:""; position: absolute; inset: 0; border-radius: var(--r); }

/* ghost-link na ciemnej klamrze */
.sec-dark .ghost-link { color: #93948F; }
.sec-dark .ghost-link:hover { color: var(--kosc); }
.sec-dark .ghost-link .ic { border-color: rgba(240,238,231,.18); }
.sec-dark .ghost-link:hover .ic { border-color: #4FD0D2; background: rgba(79,208,210,.08); }

@media (max-width: 860px) {
  .fig-mark { display: none; }
}
@media (max-width: 700px) {
  .team-diamond { grid-template-columns: 1fr; }
  .t-card.is-solo { grid-column: auto; width: 100%; }
}
/* wąski telefon: znacznik funkcji wraca do układu i bierze własny wiersz,
   inaczej długa etykieta („Współpracownik") wchodzi pod imię */
@media (max-width: 480px) {
  .t-top { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
  .t-tag { position: static; grid-area: 1 / 1 / 2 / 3; justify-self: start; margin-bottom: 16px; }
  .t-photo { grid-area: 2 / 1 / 3 / 2; width: 82px; flex: none; }
  .t-head { grid-area: 2 / 2 / 3 / 3; }
}

/* --- hero podstrony: warianty --- */
/* krótki hero — dokumenty prawne, gdzie pełny ekran to strata miejsca */
.page-hero.is-short {
  min-height: 0;
  padding: clamp(72px, 9vw, 118px) 0 clamp(44px, 5vw, 70px);
}
.wrap-narrow { max-width: 880px; }
.section.is-tight { padding: clamp(56px, 6vw, 92px) 0; }

/* okruszek powrotu (case study, artykuł) */
.crumb {
  display: flex; align-items: center; gap: 9px; width: max-content;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slaby); margin-bottom: 26px;
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.crumb:hover { color: var(--cyjan-t); gap: 14px; }

/* pola specyfikacji pod leadem (czas / format / cena) */
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 3vw, 38px); }
.meta-chip {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slaby);
  background: var(--bialy-2); border: 1px solid var(--linia);
  border-radius: var(--r-sm); padding: 9px 14px;
  transition: border-color .3s var(--ease);
}
.meta-chip b {
  font-size: 12.5px; letter-spacing: .01em; text-transform: none;
  font-weight: 600; color: var(--tusz);
}
.meta-chip:hover { border-color: var(--cyjan-t); }

/* ============================================================
   OFERTA — karty punktów wejścia
============================================================ */
.offer-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--linia); border-radius: var(--r);
  overflow: hidden; background: var(--bialy);
}
.offer-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 46px);
  border-right: 1px solid var(--linia); color: var(--tusz);
  transition: background .35s var(--ease);
}
.offer-card:last-child { border-right: none; }
.offer-card:hover { background: var(--bialy-2); }
.offer-card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--cyjan-t); transition: width .55s var(--ease);
}
.offer-card:hover::before { width: 100%; }
.oc-idx { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; color: var(--cyjan-t); }
.oc-name {
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 480; font-size: clamp(26px, 2.8vw, 36px);
  letter-spacing: -.02em; line-height: 1.05; margin-top: 16px;
}
.oc-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slaby); margin-top: 12px;
}
.oc-desc { color: var(--stal); font-size: 15.5px; margin-top: 20px; max-width: 42ch; }
.oc-go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  font-size: 14.5px; font-weight: 600; color: var(--cyjan-t);
  transition: gap .3s var(--ease);
}
.offer-card:hover .oc-go { gap: 15px; }

/* ============================================================
   LISTA KROKÓW — wiersze specyfikacji (przebieg audytu, obieg)
============================================================ */
.spec-list { border-top: 1px solid var(--linia); }
.spec-row {
  position: relative;
  display: grid; grid-template-columns: 68px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px); align-items: start;
  padding: clamp(24px, 2.8vw, 36px) 0;
  border-bottom: 1px solid var(--linia);
}
.spec-row::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--cyjan-t); transition: width .6s var(--ease);
}
.spec-row:hover::before { width: 100%; }
.sr-idx { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--cyjan-t); padding-top: 3px; }
.spec-row h3 { font-size: 20px; }
.spec-row p { color: var(--stal); font-size: 15.5px; margin-top: 11px; max-width: 62ch; }
.sec-dark .spec-list { border-top-color: rgba(240,238,231,.12); }
.sec-dark .spec-row { border-bottom-color: rgba(240,238,231,.1); }
.sec-dark .spec-row::before { background: #4FD0D2; }
.sec-dark .spec-row h3 { color: var(--kosc); }
.sec-dark .spec-row p { color: #93948F; }
.sec-dark .sr-idx { color: #4FD0D2; }

/* ============================================================
   FAQ — akordeon arkusza specyfikacji
============================================================ */
.faq { border-top: 1px solid var(--linia); }
.faq-item { position: relative; border-bottom: 1px solid var(--linia); }
.faq-item::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--cyjan-t); transition: width .6s var(--ease);
}
.faq-item:hover::before, .faq-item[open]::before { width: 100%; }
.faq-item summary {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 24px);
  padding: clamp(20px, 2.2vw, 28px) 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 500; font-size: clamp(19px, 1.9vw, 25px);
  letter-spacing: -.015em; line-height: 1.25; color: var(--tusz);
}
.faq-item summary::-webkit-details-marker { display: none; }
.fq-idx { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--cyjan-t); flex-shrink: 0; }
.fq-chev {
  margin-left: auto; flex-shrink: 0;
  width: 34px; height: 34px; border: 1px solid var(--linia); border-radius: 50%;
  display: grid; place-items: center; color: var(--stal);
  transition: transform .4s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.faq-item[open] .fq-chev { transform: rotate(135deg); border-color: var(--cyjan-t); background: rgba(14,125,133,.07); color: var(--cyjan-t); }
/* rozwijanie: animowany wiersz gridu 0fr -> 1fr (płynne, bez znajomości
   docelowej wysokości). JS trzyma atrybut `open` i klasę .is-open w parze */
.faq-a-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .48s var(--ease);
}
.faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a {
  min-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.faq-item.is-open .faq-a { opacity: 1; transform: none; transition-delay: .1s; }
.faq-a > p { padding: 0 0 clamp(22px, 2.4vw, 30px) clamp(30px, 4vw, 56px); max-width: 76ch; color: var(--stal); font-size: 16px; }
.faq-a a { border-bottom: 1px solid rgba(14,125,133,.3); }
/* bez JS zostaje natywne <details>, więc sam atrybut `open` musi odsłonić treść.
   Gdy JS przejmie akordeon (klasa js-faq), sterowanie oddajemy klasie .is-open —
   `open` żyje wtedy dłużej niż animacja zwijania */
html:not(.js-faq) .faq-item[open] .faq-a-wrap { grid-template-rows: 1fr; }
html:not(.js-faq) .faq-item[open] .faq-a { opacity: 1; transform: none; }

/* ============================================================
   FORMULARZ na jasnym korpusie (kontakt)
============================================================ */
.cform-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr);
  gap: clamp(22px, 2.8vw, 44px); align-items: start;
}
.panel-l {
  background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--r); padding: clamp(24px, 2.8vw, 38px);
}
.panel-cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slaby);
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--linia);
}
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.f-field { margin-bottom: 16px; }
.f-field > label {
  display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--stal); margin-bottom: 8px;
}
.f-field .req { color: var(--cyjan-t); }
.f-input, .f-select, .f-textarea {
  width: 100%; font-family: var(--body); font-size: 15px; color: var(--tusz);
  background: var(--bialy-2); border: 1px solid var(--linia);
  border-radius: var(--r-sm); padding: 12px 14px; line-height: 1.5;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
/* natywna strzałka selecta wypada z arkusza — własna, w kolorze akcentu */
.f-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230B6C73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.f-input::placeholder, .f-textarea::placeholder { color: var(--slaby); }
.f-input:focus, .f-select:focus, .f-textarea:focus { border-color: var(--cyjan-t); background: #fff; }
.f-input:focus-visible, .f-select:focus-visible, .f-textarea:focus-visible { outline: 2px solid var(--cyjan-t); outline-offset: 2px; }
.f-textarea { min-height: 128px; resize: vertical; }
.f-err { display: none; margin-top: 8px; font-size: 12.5px; color: var(--err); }
.f-field.invalid .f-err { display: block; }
.f-field.invalid .f-input, .f-field.invalid .f-select, .f-field.invalid .f-textarea { border-color: var(--err); }
.f-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; margin-bottom: 24px; }
.f-consent input { margin-top: 3px; accent-color: var(--cyjan-t); width: 16px; height: 16px; }
.f-consent label { font-size: 13.5px; color: var(--stal); line-height: 1.5; }
.f-consent .f-err { grid-column: 1 / -1; margin-top: 0; }
.form-done { display: none; text-align: center; padding: clamp(20px, 3vw, 40px) 0; }
.form-done.show { display: block; }
.form-done h2 { font-size: clamp(26px, 2.6vw, 34px); }
.form-done p { color: var(--stal); margin-top: 14px; }
.form-fail { display: none; margin-top: 16px; font-size: 14px; color: var(--err); }

/* boczna kolumna kontaktu */
.who-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--linia); color: var(--tusz);
}
.who-row:last-child { border-bottom: none; padding-bottom: 0; }
.who-av {
  width: 44px; height: 44px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--linia); border-radius: 8px;
}
.who-av img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter .4s var(--ease); }
.who-row:hover .who-av img { filter: none; }
/* spany muszą być blokowe, inaczej imię i rola sklejają się w jednej linii */
.who-n { display: block; font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.2; }
.who-r { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slaby); margin-top: 8px; }
.who-go { margin-left: auto; color: var(--slaby); transition: color .25s var(--ease), transform .25s var(--ease); }
.who-row:hover .who-go { color: var(--cyjan-t); transform: translate(2px, -2px); }
/* ikona wyśrodkowana względem całego bloku tekstu, nie przyklejona do jego góry */
.info-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--linia); }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 7px;
  display: grid; place-items: center; color: var(--cyjan-t);
  background: rgba(14,125,133,.07); border: 1px solid rgba(14,125,133,.18);
}
.info-t { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slaby); line-height: 1.4; }
.info-v { display: block; font-size: 15px; font-weight: 600; color: var(--tusz); margin-top: 4px; line-height: 1.3; }

/* ============================================================
   BLOG — siatka wpisów + artykuł
============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.article {
  display: flex; flex-direction: column; color: var(--tusz);
  background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--r); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.article:hover { transform: translateY(-4px); border-color: rgba(14,125,133,.3); box-shadow: var(--shadow-card); }
.thumb {
  aspect-ratio: 16 / 10; background: var(--papier-2);
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--linia);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.ghost-num { font-family: var(--display); font-size: 58px; font-weight: 400; color: var(--linia); }
.art-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.art-meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slaby); }
.art-meta .sep { width: 14px; height: 1px; background: var(--linia); }
.article h3 { font-family: var(--display); font-optical-sizing: auto; font-weight: 500; font-size: 21px; letter-spacing: -.015em; line-height: 1.22; margin-top: 13px; }
.excerpt { flex: 1; color: var(--stal); font-size: 14.5px; margin-top: 11px; }
.read { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--cyjan-t); transition: gap .3s var(--ease); }
.article:hover .read { gap: 14px; }
.state { grid-column: 1 / -1; padding: 36px 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--stal); }
.blog-note { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slaby); margin-bottom: 30px; }

.post { max-width: 760px; margin: 0 auto; }
.post-meta { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slaby); }
.post-meta .cat { color: var(--cyjan-t); }
.post-meta .sep { width: 16px; height: 1px; background: var(--linia); }
.post h1 { font-size: clamp(32px, 4.2vw, 54px); margin-top: 18px; }
.post-author { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
.post-author img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--linia); }
.pa-name { display: block; font-size: 15px; font-weight: 600; }
.pa-role { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slaby); margin-top: 3px; }
.post-cover { margin: 36px 0; border: 1px solid var(--linia); border-radius: var(--r); overflow: hidden; }
.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-body { font-size: 17.5px; color: var(--stal); }
.post-body h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 40px 0 14px; }
.post-body h3 { margin: 28px 0 10px; font-size: 19px; }
.post-body p { margin-bottom: 18px; }
.post-body ul, .post-body ol { margin: 0 0 18px 22px; }
.post-body li { margin-bottom: 8px; }
.post-body a { border-bottom: 1px solid rgba(14,125,133,.32); }
.post-body b, .post-body strong { color: var(--tusz); font-weight: 600; }
.post-body blockquote {
  margin: 26px 0; padding-left: 22px; border-left: 2px solid var(--cyjan-t);
  font-family: var(--display); font-size: 21px; font-style: italic; color: var(--tusz);
}
.post-body code { font-family: var(--mono); font-size: 14px; background: var(--bialy); border: 1px solid var(--linia); border-radius: 4px; padding: 2px 6px; }
.post-body pre { background: var(--tusz); color: var(--kosc); padding: 18px 20px; border-radius: var(--r); overflow-x: auto; margin-bottom: 18px; }
.post-body pre code { background: none; border: none; color: inherit; padding: 0; }
.post-body img { margin: 26px 0; border: 1px solid var(--linia); border-radius: var(--r); }

/* ============================================================
   CASE STUDY — strona wdrożenia
============================================================ */
.study-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.study-copy p { color: var(--stal); margin-top: 18px; max-width: 52ch; }
.study-fig {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--r); box-shadow: var(--shadow-card);
}
.study-fig::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--linia) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, var(--linia) 1px, transparent 1px) 0 0 / 56px 100%;
  opacity: .5;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 10%, transparent 76%);
}
.study-fig::after {
  content: attr(data-fig); position: absolute; left: 16px; bottom: 14px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slaby);
}
.study-prose { max-width: 74ch; }
.study-prose p { color: var(--stal); margin-bottom: 18px; }
.study-prose b { color: var(--tusz); font-weight: 600; }
.study-prose h3 { margin: 32px 0 10px; }
.sec-dark .study-prose p { color: #93948F; }
.sec-dark .study-prose b { color: var(--kosc); }
.sec-dark .study-prose h3 { color: var(--kosc); }
.sec-dark .study-copy p { color: #93948F; }
/* --- odczyty: cztery pola pomiarowe, wartość wyśrodkowana nad opisem ---
   wartość składa się z liczby (Newsreader) i jednostki (mono), wyrównanych
   do wspólnej linii bazowej — jak odczyt na przyrządzie, nie jak kafelek KPI */
.study-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--r); overflow: hidden;
}
.study-stat {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 16px; text-align: center;
  padding: clamp(30px, 3.4vw, 46px) clamp(16px, 1.8vw, 26px);
  transition: background .35s var(--ease);
}
.study-stat:hover { background: var(--bialy-2); }
/* pionowa włosowa jako element, nie border — dzięki temu może się rysować */
.study-stat + .study-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--linia); transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform .8s var(--ease);
}
.study-stats.in .study-stat + .study-stat::before { transform: scaleY(1); }
.study-stat .sv { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.study-stat .n {
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 400; font-size: clamp(40px, 4.6vw, 62px); line-height: .9;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums lining-nums;
  color: var(--tusz);
}
.study-stat .u {
  font-family: var(--mono); font-size: clamp(12px, 1vw, 14px); font-weight: 500;
  letter-spacing: .04em; color: var(--slaby);
}
/* jednostka bedaca pojedynczym znakiem (%) nie ma ksztaltu slowa i optycznie
   ginie obok "szt." czy "sek." — dostaje wiekszy stopien i ciasniejszy odstep */
.study-stat .u.is-sym { font-size: clamp(17px, 1.5vw, 22px); letter-spacing: 0; }
.study-stat .sv:has(.is-sym) { gap: 3px; }
.study-stat .l {
  display: block; max-width: 22ch;
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--slaby); line-height: 1.6;
}
/* wejście: pola zapalają się po kolei, blok jako całość nie faduje */
.study-stats.reveal { opacity: 1; }
.study-stats.reveal.in { animation: none; }
.study-stats .study-stat {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), background .35s var(--ease);
}
.study-stats.in .study-stat { opacity: 1; transform: none; }
.study-stats.in .study-stat:nth-child(2) { transition-delay: .09s; }
.study-stats.in .study-stat:nth-child(2)::before { transition-delay: .09s; }
.study-stats.in .study-stat:nth-child(3) { transition-delay: .18s; }
.study-stats.in .study-stat:nth-child(3)::before { transition-delay: .18s; }
.study-stats.in .study-stat:nth-child(4) { transition-delay: .27s; }
.study-stats.in .study-stat:nth-child(4)::before { transition-delay: .27s; }
.client-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--r); padding: clamp(20px, 2.4vw, 30px);
}
.client-mark {
  width: 54px; height: 54px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center;
  background: var(--bialy-2); border: 1px solid var(--linia); border-radius: 10px;
  font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--cyjan-t);
}
.client-mark img { width: 100%; height: 100%; object-fit: cover; }
.client-id { display: block; }
.client-t { display: block; font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.1; color: var(--tusz); }
.client-s { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--slaby); margin-top: 6px; }
.client-note { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--slaby); }
.client-row .btn { margin-left: auto; }

/* wiersz klienta jako wejście na jego stronę — podsumowanie i link w jednym */
.client-row.is-link {
  position: relative; overflow: hidden; color: var(--tusz);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.client-row.is-link::before {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 0;
  background: var(--cyjan-t); transition: width .6s var(--ease);
}
.client-row.is-link:hover { background: var(--bialy-2); border-color: var(--linia-2); }
.client-row.is-link:hover::before { width: 100%; }
.client-go {
  display: inline-flex; align-items: center; gap: 9px; margin-left: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyjan-t);
  transition: gap .25s var(--ease);
}
.client-row.is-link:hover .client-go { gap: 14px; }
.client-go svg { flex-shrink: 0; }
@media (max-width: 720px) {
  .client-go { margin-left: 0; }
}
/* przypis pod tabelą liczb — skąd wzięte, żeby liczba nie wisiała bez źródła */
.stat-note {
  margin-top: 22px; max-width: 78ch;
  font-size: 14.5px; line-height: 1.6; color: var(--slaby);
}

/* --- hero case study: kolumna narracji + kolumna dowodu --- */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(280px, .68fr);
  gap: clamp(30px, 4vw, 64px); align-items: center;
}
.hero-main { min-width: 0; }

/* --- slot na zrzut opinii z Google / Trustpilot ---
   placeholder trzyma miejsce w karcie, dopóki nie ma realnej opinii;
   po wstawieniu zrzutu cały .shot-slot podmienia się na <img class="hero-shot"> */
.shot-slot {
  display: grid; place-items: center; align-content: center; gap: 10px;
  padding: clamp(24px, 3vw, 34px) 18px;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--linia); border-radius: var(--r-sm);
  background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(139,140,135,.05) 9px 18px);
  text-align: center;
}
.ss-stars { color: var(--linia); line-height: 0; }
.ss-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slaby);
}
.ss-hint { font-size: 12.5px; line-height: 1.45; color: var(--slaby); max-width: 24ch; }

/* wstawiony zrzut opinii — wchodzi dokładnie w miejsce placeholdera.
   Zrzut ma juz wlasna ramke i zaokraglone, przezroczyste rogi, wiec nie
   dokladamy drugiej: cien liczony z kanalu alfa obrysowuje luk, border by go sciął. */
.hero-proof { margin: 0; }
.hero-shot {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 40px rgba(22, 24, 26, .10));
}
.hero-proof-by {
  display: block; margin-top: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slaby); text-align: right;
}

/* --- ledger: nazwane elementy w siatce z włosowymi ---
   ta sama logika co .study-stats: jedna ramka, hairline'y w środku,
   podświetlenie komórki pod kursorem i teal linia rosnąca po górnej krawędzi */
.ledger {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(30px, 3.4vw, 44px);
  background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--r); overflow: hidden;
}
.ledger-item {
  position: relative; padding: clamp(26px, 2.8vw, 38px);
  border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia);
  transition: background .35s var(--ease);
}
.ledger-item:nth-child(2n) { border-right: none; }
.ledger-item:nth-last-child(-n+2) { border-bottom: none; }
.ledger-item:hover { background: var(--bialy-2); }
.ledger-item::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--cyjan-t); transition: width .6s var(--ease);
}
.ledger-item:hover::before { width: 100%; }
.ledger-item h3 {
  font-family: var(--body); font-size: 16.5px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.35; margin-bottom: 10px; color: var(--tusz);
}
.ledger-item p { color: var(--stal); font-size: 15px; line-height: 1.62; }
.ledger-item p b { color: var(--tusz); font-weight: 600; }

/* --- cytat klienta na pełnej szerokości --- */
.pullquote {
  position: relative;
  padding: clamp(30px, 4vw, 52px) 0;
}
.pullquote::before, .pullquote::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--linia); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
}
.pullquote::before { top: 0; }
.pullquote::after { bottom: 0; transition-delay: .12s; }
.pullquote.in::before, .pullquote.in::after { transform: scaleX(1); }
/* znak cytatu wisi w marginesie kolumny tekstu, nie wchodzi w pierwszą linię */
.pq-mark {
  position: absolute; left: -.62em; top: -.06em;
  font-family: var(--display); font-size: clamp(54px, 5.4vw, 86px);
  line-height: 1; color: var(--linia); pointer-events: none; user-select: none;
}
.pq-text {
  position: relative;
  font-family: var(--display); font-optical-sizing: auto; font-weight: 450;
  font-size: clamp(25px, 3vw, 40px); line-height: 1.26; letter-spacing: -.018em;
  max-width: 24ch; color: var(--tusz); text-wrap: pretty;
}
.pq-by {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slaby); margin-top: clamp(22px, 2.6vw, 34px);
}
.pq-second { display: grid; gap: 10px; margin-top: clamp(26px, 3vw, 36px); max-width: 62ch; }
.pq-second .cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slaby);
}
.pq-second q {
  font-family: var(--display); font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.45; color: var(--tusz); quotes: "\201E" "\201D";
}

@media (max-width: 860px) {
  .ledger { grid-template-columns: minmax(0, 1fr); }
  /* w jednej kolumnie kazda pozycja poza ostatnia potrzebuje wlosowej —
     regula bazowa :nth-last-child(-n+2) gasi ja tez przedostatniej */
  .ledger-item { border-right: none; border-bottom: 1px solid var(--linia); }
  .ledger-item:last-child { border-bottom: none; }
  .pq-mark { position: static; display: block; margin-bottom: -.28em; }
}

@media (max-width: 980px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .page-hero { min-height: 0; padding: clamp(56px, 8vw, 96px) 0; }
  .shot-slot, .hero-proof { max-width: 520px; }
}

/* ============================================================
   DOKUMENTY PRAWNE
============================================================ */
.legal-title { max-width: none; font-size: clamp(34px, 4vw, 58px); }
.legal-date { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slaby); margin-top: 20px; }
.legal-intro { font-size: 18px; color: var(--stal); max-width: 64ch; }
.toc { background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--r); padding: clamp(22px, 2.4vw, 32px); margin: 34px 0 12px; }
.toc ol { list-style: none; counter-reset: toc; columns: 2; column-gap: 36px; }
.toc li { counter-increment: toc; margin-bottom: 11px; break-inside: avoid; }
.toc a { display: flex; gap: 11px; font-size: 14.5px; color: var(--stal); transition: color .2s var(--ease); }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--cyjan-t); flex-shrink: 0; }
.toc a:hover { color: var(--tusz); }
.legal-sec { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--linia); scroll-margin-top: 92px; }
.legal-sec h2 { font-size: clamp(22px, 2.2vw, 29px); }
.legal-sec h3 { margin: 24px 0 8px; }
.legal-sec p { color: var(--stal); margin-top: 14px; }
.legal-sec ul { margin: 14px 0 0 21px; color: var(--stal); }
.legal-sec li { margin-bottom: 9px; }
.legal-sec b { color: var(--tusz); font-weight: 600; }
.legal-sec a { border-bottom: 1px solid rgba(14,125,133,.3); }
.lead-em { font-family: var(--display); font-size: 21px; color: var(--tusz) !important; }

/* ============================================================
   404
============================================================ */
.err-hero {
  position: relative; overflow: hidden; text-align: center;
  min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px);
  display: grid; place-items: center; padding: clamp(48px, 6vw, 88px) 0;
}
.err-bg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-weight: 400; line-height: 1;
  font-size: clamp(200px, 38vw, 540px); color: rgba(22,24,26,.045);
  pointer-events: none; user-select: none;
}
.err-hero .wrap { position: relative; }
.err-hero h1 { max-width: none; font-size: clamp(34px, 4.6vw, 62px); }
.err-sub { color: var(--stal); font-size: 18px; margin: 22px auto 0; max-width: 44ch; }
.err-cta { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 46px); }

@media (max-width: 980px) {
  .cform-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-split { grid-template-columns: minmax(0, 1fr); }
  .study-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-stat:nth-child(3), .study-stat:nth-child(4) { border-top: 1px solid var(--linia); }
  .study-stat:nth-child(3)::before { display: none; }
}
@media (max-width: 720px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
  .offer-card { border-right: none; border-bottom: 1px solid var(--linia); }
  .offer-card:last-child { border-bottom: none; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .f-row { grid-template-columns: minmax(0, 1fr); }
  .toc ol { columns: 1; }
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .faq-a { padding-left: 0; }
  .study-stats { grid-template-columns: minmax(0, 1fr); }
  .study-stat + .study-stat { border-top: 1px solid var(--linia); }
  .study-stat + .study-stat::before { display: none; }
  .client-row .btn, .client-note { margin-left: 0; }
}

/* QA (hash #scene-N / ?qa=1 na podstronach): natychmiastowy stan końcowy —
   zerujemy też animacje (virtual-time potrafi zamrozić .rise przed startem) */
.qa-jump *, .qa-jump *::before, .qa-jump *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/* ============================================================
   REVEAL
============================================================ */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: reveal-in .8s var(--ease) backwards; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ============================================================
   RESPONSYWNOŚĆ
============================================================ */
/* `(pointer: coarse)` obok progu szerokości: iPad w poziomie ma 1024 px, więc łapał
   się na desktopową wersję i dostawał 5530 px touru przechwytującego przewijanie
   pod kciukiem. Próg musi zostać zsynchronizowany ze STATIC_TOUR w app.js:10.
   Audyt mobilny 2026-08-24, ustalenie 16. */
@media (max-width: 1020px), (pointer: coarse) {
  /* poświata finału wystaje poza kolumnę (inset -18%) — bez sceny finałowej
     jest tylko niewidocznym balastem rozpychającym szerokość strony */
  .tour-rail, .callout, .finale, .dash-logo, .dash-col::before { display:none; }
  .tour { height: auto; }
  .tour-sticky { position: static; height: auto; padding: 56px 0 24px; overflow: visible; align-items: stretch; }
  .tour-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .tour-grid::before, .tour-grid::after { display:none; }
  .hero-copy { grid-area: auto; order: 1; }
  .dash-col { grid-area: auto; order: 2; }
  .scene-copy { order: 3; }
  .tour-sticky:not([data-scene="0"]) .hero-copy { opacity:1; transform:none; pointer-events:auto; }
  .tour-sticky .dash { transform:none; }

  .scene-copy { grid-area: auto; position: static; min-height: 0; display:flex; flex-direction:column; gap: 14px; }
  .scene-txt {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--r);
    padding: 20px; gap: 8px;
  }
  .scene-txt h2 { font-size: 22px; }
  .scene-txt p { font-size: 14.5px; }
  .scene-txt .btn { display:none; }

  h1 { font-size: clamp(34px, 7.6vw, 50px); }
  .hero-sub { font-size: 16px; margin: 18px 0 24px; }
  .dash-body { min-height: 360px; }
}
@media (max-width: 1200px) and (min-width: 1021px) {
  /* wąski desktop: dash-main ma ~320px — węższy sidebar i ciaśniejsze komórki */
  .dash-side { width: 118px; }
  .tbl th, .tbl td { padding-inline: 8px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-links { display:none; }
  .nav-right .btn { display:none; }
  .hamburger { display:flex; }
  .founders { grid-template-columns: 1fr 1fr; }
  .panel-row, .doc-grid { grid-template-columns: 1fr; }
  .dash-side { width: 46px; padding: 12px 6px; }
  .side-item { justify-content:center; padding: 9px 0; }
  .side-item .side-label { display:none; }
  .side-mark img { margin: 0 auto 4px; }
  .callout { display:none; }
  .dash-body { min-height: 330px; }
  .stat-row { grid-template-columns: repeat(3, 1fr); gap:7px; }
  .stat { padding: 9px 10px; }
  .stat-num { font-size: 17px; }
  .foot-nav { margin-left:0; }

  /* sztywne height:430px (linia ~529) bije min-height i ucinało makietę pulpitu
     o 156–172 px, bo .panel-row schodzi tu do jednej kolumny.
     Audyt mobilny 2026-08-24, ustalenie 04. */
  .dash-body { height: auto; }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity:1; transform:none; }
  .study-stats .study-stat { opacity:1 !important; transform:none !important; }
  .study-stat + .study-stat::before, .pullquote::before, .pullquote::after { transform: none !important; }
  .kicker.reveal::before, .eyebrow.reveal::before { width: 26px !important; }
  .callout, .finale, .dash-logo { display:none; }
  .tour { height:auto !important; }
  .tour-sticky { position:static; height:auto; padding: 48px 0 24px; overflow:visible; align-items:stretch; }
  .tour-grid { align-items:start; }
  .tour-grid::before, .tour-grid::after { display:none; }
  .tour-sticky .hero-copy { opacity:1 !important; transform:none !important; pointer-events:auto !important; }
  .scene-copy { position:static; min-height:0; display:flex; flex-direction:column; gap:14px; grid-area:auto; }
  .scene-txt {
    position:static; opacity:1; transform:none; pointer-events:auto;
    background: var(--bialy); border:1px solid var(--linia); border-radius: var(--r);
    padding: 20px; gap: 8px;
  }
  .scene-txt h2 { font-size: 22px; }
  .scene-txt .btn { display:none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1021px) {
  .tour-grid { grid-template-columns: minmax(360px, 4.9fr) minmax(0, 6.1fr); }
  .hero-copy { grid-area: 1 / 1; }
  .dash-col { grid-area: 1 / 2; }
  .scene-copy { grid-area: 2 / 1 / 3 / 3; flex-direction:row; flex-wrap:wrap; }
  .scene-copy .scene-txt { flex: 1 1 40%; }
}

/* ============================================================
   POPRAWKI MOBILNE — audyt 2026-08-24
   Blok celowo na końcu arkusza: same nadpisania punktowe, łatwe
   do przejrzenia i do cofnięcia w całości. Numery w komentarzach
   odsyłają do ustaleń z raportu.
============================================================ */

/* --- 03: pas bezpieczeństwa dla pułapki przy obrocie -----------------
   Gdyby JS nie dojechał (błąd, wolne łącze), menu mobilne i tak nie może
   zostać widoczne w układzie desktopowym — tam nie ma hamburgera, więc
   nie byłoby czym go zamknąć. */
@media (min-width: 721px) {
  #nav.mob-open .mob { display: none; }
}

/* --- 10: zasłona pod otwartym menu ----------------------------------
   .mob ma position:relative + z-index:1, więc zasłona z z-index:0 ląduje
   pod listą, a nad treścią strony. Zamknięcie obsługuje listener w JS. */
#nav.mob-open::after {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: transparent;   /* bez przyciemnienia i bez blura: pasek ma zostać
                                lekko przezroczysty, a nie zrobić się czarny.
                                Warstwa istnieje wyłącznie po to, żeby przejąć
                                dotknięcie obok menu i nie kliknąć treści pod spodem. */
}
@media (min-width: 721px) { #nav.mob-open::after { display: none; } }

/* --- 12: hamburger jako cel dotykowy 44x44 --------------------------
   Kreski zostają 20px — rośnie tylko obszar trafienia. */
.hamburger {
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center; padding: 10px;
}

/* --- 18: hamburger zmienia się w krzyżyk przy otwartym menu ---------
   Dwie kreski: górna w dół i w prawo, dolna w górę i w lewo. */
#nav.mob-open .hamburger span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
#nav.mob-open .hamburger span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* --- 12: linki stopki i spisu treści dokumentów prawnych ------------
   Na telefonie 17–23 px wysokości; padding-block podnosi je do ~40 px
   bez ruszania typografii. */
@media (max-width: 720px), (pointer: coarse) {
  .foot-nav { display: flex; flex-wrap: wrap; gap: 2px 18px; }
  .foot-nav a { display: inline-block; padding-block: 11px; }
  .foot-brand a { display: inline-block; padding-block: 8px; }
  .toc ol { columns: 1; }
  .toc a { padding-block: 9px; }
  .crumb { display: inline-flex; padding-block: 10px; }
}

/* --- 05: pola formularzy 16px, żeby iOS nie zoomował ----------------
   Safari przybliża stronę przy fokusie na polu <16px i NIE cofa tego
   po wyjściu z pola. Dotyczy też pól w modalu rezerwacji. */
@media (max-width: 720px), (pointer: coarse) {
  .f-input, .f-select, .f-textarea,
  .bk-field input, .bk-field textarea, .bk-form input, .bk-form textarea {
    font-size: 16px;
  }
}

/* --- 07: checkbox zgody RODO jako realny cel dotykowy --------------- */
.f-consent input { width: 22px; height: 22px; margin-top: 1px; cursor: pointer; }
.f-consent label { cursor: pointer; }

/* --- 08: kalendarz rezerwacji na wąskim telefonie -------------------
   aspect-ratio 1/1 przy siatce 7 kolumn dawało 31x31 px na 360 px. */
@media (max-width: 430px) {
  .cal-days { gap: 4px; }
  .cal-day { aspect-ratio: auto; min-height: 42px; }
  .slots-list { max-height: 46vh; }
  .slot { padding-block: 13px; }
}

/* --- 09: podmenu „Oferta” na dotyku ---------------------------------
   Bez tego rozwijane menu otwiera się wyłącznie na :hover, którego na
   dotyku nie ma — pierwsze dotknięcie od razu nawigowało na /oferta,
   a Bezpłatny Audyt i Szkolenie AI były z nawigacji nieosiągalne.
   Klasę `is-open` przełącza JS przy pierwszym dotknięciu. */
@media (pointer: coarse) {
  .has-drop:hover .dropdown { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); }
  .has-drop.is-open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .has-drop.is-open .drop-trigger svg { transform: rotate(180deg); }
}

/* --- 17: stany :hover nie mogą się zatrzaskiwać na dotyku -----------
   W arkuszu jest 73 reguł :hover i ani jednego zabezpieczenia. Po
   dotknięciu stan zostawał aż do dotknięcia gdzie indziej. Resetujemy
   wyłącznie to, co widocznie „zawisa”: przesunięcia i odbarwienia. */
@media (pointer: coarse) {
  .btn:hover, .btn-gen:hover, .pill:hover, .stat:hover, .flow-item:hover,
  .article:hover, .person-card:hover, .modal-close:hover,
  .cal-day:hover:not(.disabled):not(.selected) { transform: none; }
  .btn:hover svg { transform: none; }
  .ghost-link:hover .ic, .ghost-link:hover .ic svg, .who-row:hover .who-go { transform: none; }
  .article:hover { border-color: var(--linia); box-shadow: none; }
  .pill:hover { border-color: var(--linia); color: var(--stal); }
  .offer-card:hover { background: transparent; }
  .founder:hover img, .t-card:hover .t-photo img { filter: grayscale(100%) contrast(1.02); }
  .who-row:hover .who-av img { filter: grayscale(100%); }
  .founder:hover b { color: inherit; }
  .founder:hover b .f-tag { color: var(--slaby); border-color: var(--linia); }
  .team-row:hover .team-av img { filter: grayscale(100%) contrast(1.02); }
  .team-row:hover .team-n { color: inherit; }
}

/* --- 13: podłoga rozmiaru dla drobnych podpisów w treści ------------
   Tylko treść strony. Makieta pulpitu (.dash-*, .stat-*, .bars-cap,
   .chip, .side-label) celowo pominięta: to ilustracja interfejsu
   w skali, a powiększanie w niej tekstu wróciłoby do ucinania z 04. */
@media (max-width: 720px) {
  .fig-mark, .founder span, .who-r, .info-t, .panel-cap,
  .t-role, .t-tag, .t-note, .pa-role, .oc-tag, .meta-chip,
  .post-meta span, .art-meta span, .study-stat .l, .pq-by,
  .client-s, .client-note, .cap, .legal-date, .mob-cap,
  .team-cap, .team-note, .team-r { font-size: 11px; }
  .founder b .f-tag { font-size: 10px; }
}

/* --- 19: kotwice nie chowają nagłówka pod przyklejoną nawigacją -----
   Dziś ratuje to padding sekcji (20 px zapasu). Ta linia zamyka temat
   niezależnie od tego, jak nawigacja urośnie. */
section[id], article[id], h2[id], h3[id] { scroll-margin-top: 84px; }

/* --- 11 (dopięcie): --slaby na ciemnych klamrach ---------------------
   Przyciemnienie tokena podniosło kontrast na porcelanie (2.81 -> 4.5+),
   ale na grafitowym tle zadziałało odwrotnie (3.11:1 na .t-note w sekcji
   zespołu). Ciemne sekcje dostają jaśniejszy odcień: #8B8C87 daje tam 5.25:1. */
.sec-dark, #nav, .contact, footer, .foot, .modal, .bk-overlay {
  --slaby: #8B8C87;
}

/* --- 20: strona 404 na niskim ekranie --------------------------------
   place-items:center przy overflow:hidden ucinał treść RÓWNO z obu stron,
   więc na 320x658 znikało 40 px — w tym górna część nagłówka. `safe`
   przestaje centrować, gdy treść jest wyższa od kontenera. */
.err-hero { align-items: safe center; justify-items: center; }

/* --- 12 (dopięcie): pozostałe małe cele dotykowe ---------------------
   Linki mailowe i logo miały 17–23 px wysokości. Linki w zdaniu zostają
   bez zmian — WCAG 2.2 wprost je z tego wymogu wyłącza (inline exception),
   a rozpychanie ich rozjechałoby interlinię akapitu. */
@media (max-width: 720px), (pointer: coarse) {
  .contact-alt a, .info-v, .foot-brand a { display: inline-block; padding-block: 12px; }
  .nav-row .logo { display: inline-flex; align-items: center; min-height: 44px; }
}
.f-consent input { width: 24px; height: 24px; }

/* Uwaga na przyszłość: warunkiem „urządzenie dotykowe” jest tu CELOWO
   `pointer: coarse`, a nie `hover: none`. Chrome w trybie headless (audyty,
   Lighthouse, zrzuty) nie ma żadnego wskaźnika i zawsze raportuje
   `hover: none` — na `hover` desktop w audycie wyglądałby jak telefon. */

/* ============================================================
   MOBILE: PRZYPIĘTY TOUR DASHBOARDU
   Włączany klasą z JS (html.tour-pin-mob), więc bez JS zostaje
   statyczny układ z bloku wyżej. Powód przypięcia: bez niego na
   scenę przypada ~230 px scrolla, a jeden ruch kciukiem to 600–1500 px
   — sceny przeskakiwały po kilkadziesiąt ms i morfy przerywały się
   nawzajem. Przypięcie kupuje ~690 px na scenę.
============================================================ */
html.tour-pin-mob .tour { height: 460vh; }
html.tour-pin-mob .tour-sticky {
  position: sticky; top: 0;
  /* svh, nie dvh: dvh żyje razem z paskiem adresu przeglądarki, więc przypięta
     scena zmieniała wysokość w TRAKCIE scrolla i wszystko na niej skakało.
     svh = wysokość z widocznym paskiem — stała przez cały przejazd; po schowaniu
     paska zostaje pod sceną pasek tła, co jest niewidoczne (scena centrowana).
     Para w JS: baseH w fitDash/pinScroll (app.js, blok tour-pin-mob). */
  height: 100vh; height: 100svh;
  padding: 0; overflow: hidden;
  display: flex; align-items: center;
}
html.tour-pin-mob .tour-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(10px, 2.2vh, 20px);
  align-content: center; align-items: center;
  padding-top: 68px;             /* prześwit pod przyklejoną nawigacją */
}
/* hero i podpisy scen dzielą ten sam wiersz — dokładnie jak na desktopie */
html.tour-pin-mob .hero-copy,
html.tour-pin-mob .scene-copy { grid-area: 1 / 1; order: 0; position: relative; }
html.tour-pin-mob .dash-col   { grid-area: 2 / 1; order: 0; }

html.tour-pin-mob .hero-copy { transition: opacity .45s var(--ease), transform .45s var(--ease); }
/* position:absolute, nie samo opacity: wygaszone hero nadal WYZNACZAŁO wysokość
   wiersza (372 px), przez co makieta była spychana poza dolną krawędź sceny.
   Wyjęte z układu oddaje te piksele dashboardowi. */
html.tour-pin-mob .tour-sticky:not([data-scene="0"]) .hero-copy {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(-18px); pointer-events: none;
}
html.tour-pin-mob .scene-copy {
  /* Grid-stack zamiast position:absolute na tekstach: teksty scen nakładają
     się w JEDNEJ komórce, ale SĄ w układzie, więc wiersz ma wysokość
     najdłuższego tekstu i fitDash liczy z niej dostępne miejsce dla makiety.
     Wcześniej (inset:0) wiersz miał sztywne 132 px i dłuższy tekst sceny 3
     wylewał się w dół NA pigułki branż („…jednego kliknięcia" nachodziło
     na „Nieruchomości" o ~5 px na 360–412 px szerokości). */
  display: grid; align-items: center; min-height: 132px; pointer-events: none;
  background: none; border: 0; padding: 0;
}
html.tour-pin-mob .scene-txt {
  position: static; grid-area: 1 / 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 8px; background: none; border: 0; padding: 0;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
html.tour-pin-mob .scene-txt h2 { font-size: clamp(21px, 5.4vw, 27px); line-height: 1.15; }
html.tour-pin-mob .scene-txt p  { font-size: 14.5px; line-height: 1.5; max-width: 42ch; }
html.tour-pin-mob .tour-sticky[data-scene="1"] .scene-txt[data-s="1"],
html.tour-pin-mob .tour-sticky[data-scene="2"] .scene-txt[data-s="2"],
html.tour-pin-mob .tour-sticky[data-scene="3"] .scene-txt[data-s="3"] {
  opacity: 1; transform: none; pointer-events: auto;
}
/* Skalowanie zamiast ucinania: makieta ma na telefonie ~665 px, a na scenę
   zostaje ~560 px. Współczynnik liczy JS pod realną wysokość ekranu, więc
   nic nie jest przycięte ani ukryte — zmienia się tylko skala rysunku. */
/* Skalujemy SAMĄ makietę (#dash), nie całą kolumnę: pigułki branż są klikalne,
   a przy skali 0.42 miałyby 15 px wysokości — cel nie do trafienia kciukiem.
   Poza skalowaniem zostaje też przypis pod makietą. */
html.tour-pin-mob .dash-col { align-self: start; }
html.tour-pin-mob #dash {
  width: 520px; max-width: none;
  /* margin:auto NIE centruje pudełka szerszego od kontenera (spec: nadmiar leci
     w prawo). Ujemny margines liczony z szerokości kolumny sadza ŚRODEK pudełka
     w środku ekranu, dzięki czemu skalowanie względem `top center` wypada równo. */
  margin-left: calc((100% - 520px) / 2); margin-right: 0;
  /* .dash ma już własny transform z pochyleniem (--tx/--ty) i skalą (--dsc);
     nadpisujemy go w całości, ale ZACHOWUJĄC oba pochylenia — inaczej zniknęłyby
     bez śladu przy pierwszej zmianie tej reguły. */
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(var(--dash-k, .985));
  transform-origin: top center;
  transition: transform .45s var(--ease);
}
html.tour-pin-mob #pills { justify-content: flex-start; }
html.tour-pin-mob .dash-body { height: auto; min-height: 0; }

/* Scena 0 na niskich ekranach: hero (372 px) i makieta nie mieszczą się razem
   w 740 px. Zamiast zmniejszać makietę do nieczytelnej skali, pokazujemy jej
   górę i wygaszamy dół — czyli „jest tego więcej, przewiń". Klasę nakłada JS
   tylko wtedy, gdy realnie brakuje miejsca; gdzie się mieści, nic nie fade'uje. */
html.tour-pin-mob .tour-sticky.dash-cropped[data-scene="0"] #dash {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
}
/* przypis pod makietą nie ma sensu, gdy makieta jest przycięta */
html.tour-pin-mob .tour-sticky.dash-cropped[data-scene="0"] #dashCap { opacity: 0; }
/* na przypiętej scenie hero-note to najmniej wartościowa linia — oddaje miejsce */
html.tour-pin-mob .hero-note { display: none; }

/* Makieta na przypiętej scenie renderuje się w szerokości desktopowej i dopiero
   jest skalowana do ekranu. Powód: widoki 1-3 (tabela, obieg, dokument) nigdy
   wcześniej nie pokazywały się na telefonie — w kolumnie 272 px tabela gubiła
   dwie ostatnie kolumny. Tu dostaje 520 px układu, więc wygląda jak produkt,
   a nie jak połamany fragment. Skalę liczy JS pod szerokość ORAZ wysokość. */
html.tour-pin-mob .dash-col { width: auto; }
html.tour-pin-mob .panel-row,
html.tour-pin-mob .doc-grid   { grid-template-columns: 1fr 1fr; }
html.tour-pin-mob .stat-row   { grid-template-columns: repeat(3, 1fr); gap: 9px; }
html.tour-pin-mob .dash-side  { width: 112px; padding: 12px 10px; }
html.tour-pin-mob .side-item  { justify-content: flex-start; padding: 9px 10px; }
html.tour-pin-mob .side-item .side-label { display: inline; }
html.tour-pin-mob .side-mark img { margin: 0 0 4px; }
html.tour-pin-mob .dash-body  { height: auto; min-height: 430px; }

/* ============================================================
   MOBILE — TOUR STATYCZNY (html.tour-fit-mob)
   Niski ekran (innerHeight < 620 przy load: iPhone SE/8, kompaktowe
   Androidy, duże paski przeglądarki) albo reduced motion: tour się nie
   przypina i sceny są kartami (blok max-width:1020 wyżej). Makieta
   dostaje jednak TEN SAM rendering co w trybie przypiętym: układ
   desktopowy 520 px przeskalowany do ekranu — zamiast wąskiej kolumny
   ~330 px, w której wyglądała jak połamany fragment (pusty sidebar,
   ucięty wykres). Wysokość wiersza makiety trzyma JS (fitStatic),
   żeby auto-cykl branż nie ruszał strony pod czytanym tekstem.
   Klasę nakłada app.js tylko przy szerokości <= 720 px. Lustro reguł
   `html.tour-pin-mob` z bloku wyżej — zmieniasz tam, zmień i tu.
============================================================ */
html.tour-fit-mob .dash-col { width: auto; }
html.tour-fit-mob #dash {
  width: 520px; max-width: none;
  /* margin:auto NIE centruje pudełka szerszego od kontenera — jak w pin */
  margin-left: calc((100% - 520px) / 2); margin-right: 0;
  transform: scale(var(--dash-k, .68));
  transform-origin: top center;
  /* BEZ transition (dziedziczonej z .dash): animacja none→scale zaczyna od
     scale(1), makieta jest przez ~pół sekundy szeroka na 520 px w układzie,
     mobilny viewport rozszerza się do niej (~448 px) i CAŁA strona się
     pomniejsza; fitStatic policzyłby wtedy skalę z zepsutej szerokości.
     W trybie pin ratuje to overflow:hidden na .tour-sticky — tu go nie ma. */
  transition: none;
}
html.tour-fit-mob .panel-row,
html.tour-fit-mob .doc-grid   { grid-template-columns: 1fr 1fr; }
html.tour-fit-mob .stat-row   { grid-template-columns: repeat(3, 1fr); gap: 9px; }
html.tour-fit-mob .dash-side  { width: 112px; padding: 12px 10px; }
html.tour-fit-mob .side-item  { justify-content: flex-start; padding: 9px 10px; }
html.tour-fit-mob .side-item .side-label { display: inline; }
html.tour-fit-mob .side-mark img { margin: 0 0 4px; }
html.tour-fit-mob .dash-body  { height: auto; min-height: 430px; }

/* Chrome (Android) koryguje scroll, żeby utrzymać „kotwicę" w miejscu, gdy
   zmienia się geometria w viewporcie (przeskalowanie makiety przy zmianie
   sceny, zmiana wysokości wiersza) — scroll skacze pod kciukiem i przewijanie
   „walczy" z użytkownikiem. W przypiętym tourze i trybie statycznym kotwiczenie
   wewnątrz sekcji jest zawsze błędne — wyłączamy je dla całego poddrzewa. */
html.tour-pin-mob .tour,
html.tour-fit-mob .tour { overflow-anchor: none; }

/* Przełącznik widoków pod makietą — tworzy go app.js TYLKO na telefonie
   (gałąź tour-fit-mob). Segmentowany pasek w języku pigułek branż: mono,
   ciasny promień, aktywny segment w graficie. Cele dotykowe ~42 px. */
html.tour-fit-mob .dash-views { margin: 12px 0 2px; }
html.tour-fit-mob .dv-cap {
  display: block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--slaby);
  margin: 0 2px 7px;
}
html.tour-fit-mob .dv-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 4px;
  background: var(--bialy-2);
  border: 1px solid var(--linia);
  border-radius: var(--r);
}
html.tour-fit-mob .dv-tab {
  -webkit-appearance: none; appearance: none;
  border: 0; background: none; margin: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .02em;
  color: var(--stal);
  padding: 12px 2px 13px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
html.tour-fit-mob .dv-tab.is-on {
  background: var(--tusz);
  color: var(--kosc);
}

/* Jedna karta sceny pod przełącznikiem widoków (klasa z app.js, tylko telefon).
   Widoczna karta = opis aktualnego widoku panelu. Numer sekwencji (01/04)
   schowany — karty nie są już sekwencją, tylko podpisami zakładek. */
html.tour-fit-cards .scene-txt { display: none; }
html.tour-fit-cards .scene-txt.is-current { display: flex; }
html.tour-fit-cards .scene-idx { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.tour-fit-cards .scene-txt.is-current { animation: dvCardIn .35s var(--ease); }
}
@keyframes dvCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Tabele w treści artykułów (markdown → marked): na telefonie tabela szersza
   od ekranu ma przewijać się we WŁASNEJ ramce. Bez tego rozpycha layout
   viewport (min-content > szerokość ekranu) i Chrome pomniejsza całą stronę
   — ten sam mechanizm, co landmine transition→viewport w hero. Desktop bez zmian. */
@media (max-width: 720px) {
  .post table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* ramka: przycięta kolumna wygląda jak celowe okno przewijania, nie defekt */
    border: 1px solid var(--linia);
    border-radius: var(--r);
    padding: 2px 10px;
    background: var(--bialy-2);
  }
}

/* FIG z wideo — case study */
.study-fig--video { aspect-ratio: 16 / 9; border-color: rgba(23,171,175,.35); box-shadow: 0 0 0 1px rgba(23,171,175,.12), 0 0 22px rgba(23,171,175,.16), 0 6px 56px -10px rgba(23,171,175,.30), var(--shadow-card); }
.study-fig--video video { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); object-fit: cover; display: block; outline: none; clip-path: inset(2px round 6px); pointer-events: none; background: var(--bialy); }
.study-fig--video::after { content: none; }

.fig-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--slaby); opacity: .65; margin: 10px 2px 0; }

.study-figwrap { min-width: 0; }