/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * Hallmark · genre: modern-minimal (dialekt NGP Workbench) · macrostructure: Split Studio
 * theme: system NGP (/assets/css/tokens.css) + rozszerzenie marki AUTOSHOW (amber #d4a017)
 * nav: N5 floating pill · footer: statement · enrichment: suwak before/after (CSS+SVG, sygnatura)
 * ----------------------------------------------------------------------
 * AUTOSHOW — prezentacja produktu SaaS. Tokeny globalne linkowane WCZEŚNIEJ.
 * Ta strona NIE linkuje style.css strony głównej — jest samowystarczalna:
 * własne komponenty zbudowane na wspólnych tokenach, żeby grać z serwisem,
 * ale mieć własny rytm (dyptyk) i własny akcent (amber).
 */

/* =====================================================================
   Rozszerzenie marki AUTOSHOW — amber. Reszta kolorów z tokens.css.
   Amber jako akcent: na ciemnym świeci (wysoki kontrast), na jasnym żyje
   jako wypełnienia / obrysy / washe / duży display; tekst-amber na jasnym
   tylko przez --autoshow-deep (kontrast AA). Przycisk amber = CIEMNY tekst.
   ===================================================================== */
:root {
  --autoshow:        #d4a017;   /* ochrowy amber — sygnatura (akcent główny) */
  --autoshow-bright: #ecb838;   /* poświata / hover */
  --autoshow-deep:   #8a6410;   /* amber-tekst na jasnym tle (AA) */
  --autoshow-wash:   rgba(212, 160, 23, 0.10);  /* tint tła na jasnym */
  --autoshow-line:   rgba(212, 160, 23, 0.34);  /* obrys akcentu */
  --autoshow-glow:   rgba(212, 160, 23, 0.26);  /* aura na ciemnej scenie */
  --autoshow-pulse:  rgba(236, 184, 56, 0.50);  /* puls „najpopularniejszy" */
  --autoshow-haze:   rgba(212, 160, 23, 0.16);  /* mgła amber na ciemnym */

  --shadow-autoshow: 0 20px 64px -24px rgba(212, 160, 23, 0.45);
  --on-amber:        var(--carbon);             /* tekst na wypełnieniu amber */

  /* Tony ilustracji „z placu" (surowy plac) - bespoke art suwaka, nie paleta systemu */
  --lot-amber:     #3a2f1a;
  --lot-mid:       #2b2415;
  --lot-dark:      #1c1810;
  --car-raw-body:  #6f5a32;
  --car-raw-win:   #9a854f;
  --car-raw-wheel: #15110a;
  --car-raw-hub:   #b8902f;

  --header-h: 96px;   /* offset kotwic pod stałym navem */
}

/* Kotwice pod stałym navem */
[id] { scroll-margin-top: var(--header-h); }

/* =====================================================================
   Layout — kontener / sekcje (te same nazwy co serwis, własne definicje)
   ===================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--section-y); }
.section--sunken { background: var(--paper-sunken); }
.section--raised { background: var(--paper-raised); }
.section--grid {
  background-image:
    linear-gradient(var(--paper-grid) var(--rule-hair), transparent var(--rule-hair)),
    linear-gradient(90deg, var(--paper-grid) var(--rule-hair), transparent var(--rule-hair));
  background-size: 46px 46px;
  background-position: center top;
}

/* Nadtytuł mono — akcent amber (na jasnym: tekst deep; bar pełny amber) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--autoshow-deep);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: var(--rule-bold);
  background: var(--autoshow);
}

/* Głowa sekcji — tag STACKED nad nagłówkiem */
.section-head {
  display: grid;
  gap: var(--space-md);
  max-width: 32ch;
  margin-bottom: var(--space-2xl);
}
.section-head h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}
.section-head--wide { max-width: 40ch; }
.section-head__lead {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* =====================================================================
   Przyciski — primary AUTOSHOW = amber z CIEMNYM tekstem (własna twarz,
   inna niż niebieski przycisk serwisu, ta sama rodzina komponentu)
   ===================================================================== */
.btn {
  --_bg: var(--autoshow);
  --_fg: var(--on-amber);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  white-space: nowrap;
  padding: 0.85em 1.4em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--_fg);
  background: var(--_bg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-autoshow); background: var(--autoshow-bright); }
.btn:active { transform: translateY(0); background: var(--autoshow-deep); color: var(--white); }
.btn:focus-visible { outline: var(--rule-bold) solid var(--autoshow); outline-offset: 3px; }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--ink);
  border-color: var(--hairline-strong);
}
.btn--ghost:hover { box-shadow: none; background: var(--paper-raised); border-color: var(--autoshow); transform: translateY(-2px); }
.btn--ghost:active { background: var(--paper-sunken); }

.btn--on-dark { --_fg: var(--on-dark); border-color: var(--on-dark-line); }
.btn--on-dark.btn--ghost:hover { background: var(--glass-hi); border-color: var(--autoshow-bright); box-shadow: none; }

.btn--full { width: 100%; }

.btn .arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* Link tekstowy z rysowanym podkreśleniem (amber) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: var(--autoshow-deep);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--autoshow), var(--autoshow));
  background-size: 0% var(--rule-bold);
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-2) var(--ease-out);
}
.link-arrow:hover { background-size: 100% var(--rule-bold); }
.link-arrow .arrow { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(3px); }
.link-arrow--on-dark { color: var(--on-dark); }

/* =====================================================================
   Nawigacja — N5 floating pill (chrome marki serwisu — świadomie wspólne)
   ===================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 1.6vw, 16px) var(--gutter);
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--maxw);
  padding: 8px 8px 8px 14px;
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  transform: translateZ(0);
  transition: box-shadow var(--dur-3) var(--ease-out);
}
.site-header.is-scrolled .nav { box-shadow: var(--shadow-2); }

.brand { display: inline-flex; align-items: center; gap: 0.6em; }
.brand__logo { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); }
.brand__lockup { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.brand__by {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 3px;
}

.nav__links {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  margin-left: auto;
  list-style: none;
  padding: 0; margin-block: 0;
}
.nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
  transition: color var(--dur-2) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: var(--rule-bold);
  background: var(--autoshow);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { margin-left: clamp(8px, 1.4vw, 18px); }
.nav__toggle { display: none; }

/* =====================================================================
   HERO — jedyna ciemna scena AUTOSHOW: „studio fotograficzne".
   Dyptyk Split Studio: copy | dowód (suwak before/after).
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(120% 100% at 18% 0%, var(--carbon-hi) 0%, var(--carbon) 44%, var(--abyss) 100%);
  color: var(--on-dark);
  overflow: clip;
}
/* poświata amber — reflektor studyjny od strony dowodu */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(48% 60% at 86% 30%, var(--autoshow-haze) 0%, transparent 62%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.hero__grid {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  width: 100%;
  padding-block: clamp(120px, 17vh, 200px) clamp(48px, 8vh, 90px);
}
.hero__copy { min-width: 0; }
.hero .eyebrow { color: var(--on-dark-dim); }
.hero .eyebrow::before { background: var(--autoshow-bright); }

.hero h1 {
  color: var(--white);
  font-weight: 500;
  font-size: var(--text-display-s);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  max-width: 15ch;
  margin-block: var(--space-lg) var(--space-lg);
}
.accent-word {
  position: relative;
  color: var(--autoshow-bright);
  font-weight: 600;
  white-space: nowrap;
}
.accent-word::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.04em;
  height: 0.07em;
  background: var(--autoshow-bright);
  transform: scaleX(0); transform-origin: left;
  animation: draw var(--dur-4) var(--ease-out) 0.95s forwards;
}
@keyframes draw { to { transform: scaleX(1); } }

.hero__lead {
  font-size: var(--text-lg);
  color: var(--on-dark-dim);
  max-width: 44ch;
  line-height: 1.55;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Wskaźnik scrolla */
.scroll-cue {
  position: absolute;
  left: var(--gutter); bottom: clamp(16px, 3.6vh, 30px);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.scroll-cue span:last-child {
  width: 1px; height: 26px;
  background: linear-gradient(var(--autoshow-bright), transparent);
  animation: cue 1.8s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes cue { 0%,100%{ transform: scaleY(0.4); opacity:.4 } 50%{ transform: scaleY(1); opacity:1 } }

/* Wejście hero — stagger */
.rise { opacity: 0; }
.no-reduce .rise { animation: rise var(--dur-4) var(--ease-out) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.rise.d1 { animation-delay: 0.10s; }
.rise.d2 { animation-delay: 0.22s; }
.rise.d3 { animation-delay: 0.36s; }
.rise.d4 { animation-delay: 0.52s; }
.reduce .rise { opacity: 1; }

/* =====================================================================
   SUWAK BEFORE/AFTER — sygnatura. „z placu" (amber, surowy) | „studio".
   Podgląd poglądowy (SVG) z miejscem na podmianę na realne foto.
   ===================================================================== */
.ba-wrap { margin: 0; display: grid; gap: var(--space-sm); --pos: 46%; }
.ba {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-lg);
  overflow: clip;
  isolation: isolate;
  border: var(--rule-hair) solid var(--on-dark-line);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.ba:focus-visible { outline: var(--rule-bold) solid var(--autoshow-bright); outline-offset: 3px; }
.ba__layer { position: absolute; inset: 0; }

/* DÓŁ: studio (pełna baza, czyste / chłodne) */
.ba__after {
  background:
    url("../img/hero-po.webp") center / cover no-repeat,
    radial-gradient(120% 95% at 50% 12%, var(--white) 0%, var(--mist) 48%, var(--paper-sunken) 100%);
}
.ba__sweep { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 8%, rgba(255,255,255,0.9), transparent 70%); }
.ba__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--slate) 22%, transparent)); }

/* GÓRA: z placu (przycinana suwakiem, ciepła / surowa / amber) */
.ba__before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  background:
    url("../img/hero-przed.webp") center / cover no-repeat,
    radial-gradient(90% 80% at 30% 20%, color-mix(in srgb, var(--autoshow) 22%, var(--lot-amber)) 0%, var(--lot-mid) 60%, var(--lot-dark) 100%);
}
.ba__lot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 38px),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.42));
}

.ba__car { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); width: 76%; height: auto; }
.ba__after .car__body { fill: var(--ink-2); }
.ba__after .car__win  { fill: var(--mist); }
.ba__after .car__wheel{ fill: var(--carbon); }
.ba__after .car__hub  { fill: var(--slate-2); }
.ba__before .car__body { fill: var(--car-raw-body); }
.ba__before .car__win  { fill: var(--car-raw-win); }
.ba__before .car__wheel{ fill: var(--car-raw-wheel); }
.ba__before .car__hub  { fill: var(--car-raw-hub); }

/* Realne zdjęcia hero (przed/po) zastępują schematy - chowamy nakładki
   (schemat auta, gradient placu/studia), żeby nie kładły się na fotografii.
   Zakres ograniczony do #ba - sekcja „Co dostajesz" używa .ba__car/.ba__floor
   niezależnie i ma zostać nietknięta. */
#ba .ba__sweep,
#ba .ba__floor,
#ba .ba__lot,
#ba .ba__car { display: none; }

/* Prowadnica kątów (narożniki) na warstwie „z placu" */
.ba__corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--autoshow-bright); opacity: 0.85; }
.ba__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.ba__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.ba__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.ba__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.ba__stamp {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--autoshow-bright); background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Linia podziału + uchwyt */
.ba__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--autoshow-bright); transform: translateX(-1px); z-index: 3; box-shadow: 0 0 18px var(--autoshow-glow); }
.ba__handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--autoshow); color: var(--carbon);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.ba__handle::before, .ba__handle::after {
  content: ""; position: absolute; width: 0; height: 0;
  border-block: 5px solid transparent;
}
.ba__handle::before { left: 8px; border-right: 7px solid var(--carbon); }
.ba__handle::after  { right: 8px; border-left: 7px solid var(--carbon); }
.ba__hint {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark-dim); white-space: nowrap;
  animation: handleHint 2.4s var(--ease-in-out) infinite;
}
.ba.is-touched .ba__hint { display: none; }
@keyframes handleHint { 0%,100% { opacity: .4; transform: translateX(-50%); } 50% { opacity: 1; transform: translateX(calc(-50% + 3px)); } }

/* Readout pod suwakiem */
.ba__readout {
  display: flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-dim);
}
.ba__rdlabel--plac { color: var(--autoshow-bright); }
.ba__bar { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--on-dark-line); overflow: hidden; }
.ba__bar i { display: block; height: 100%; width: var(--pos); background: linear-gradient(90deg, var(--autoshow-bright), var(--signal-bright)); }
.ba__chip { color: var(--carbon); background: var(--autoshow); padding: 2px 9px; border-radius: var(--radius-pill); font-weight: 600; }

/* =====================================================================
   HOOK — pomost dark → light (jedno zdanie + meta)
   ===================================================================== */
.hook { padding-block: clamp(80px, 11vw, 150px); }
.hook__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: 1.16;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  max-width: 24ch;
}
.hook__line b { font-weight: 600; color: var(--autoshow-deep); }
.hook__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--hairline);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate);
}
.hook__meta span { display: inline-flex; align-items: center; gap: 0.6em; }
.hook__meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--autoshow); }

/* =====================================================================
   JAK ZACZĄĆ — onboarding (3 kroki, numer + kreska u góry)
   ===================================================================== */
.onboard {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) clamp(var(--space-lg), 3vw, var(--space-2xl));
}
.ob-step {
  display: grid; gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: var(--rule-bold) solid var(--hairline);
  transition: border-color var(--dur-3) var(--ease-out);
}
.ob-step:hover { border-top-color: var(--autoshow); }
.ob-step__n {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.03em;
  color: var(--autoshow-deep);
  font-variant-numeric: tabular-nums;
}
@supports ((-webkit-text-stroke: 1px red)) {
  .ob-step__n { color: transparent; -webkit-text-stroke: 1.5px var(--autoshow); }
}
.ob-step h3 { font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); }
.ob-step p { font-size: var(--text-sm); color: var(--ink-soft); }

/* =====================================================================
   SPLIT STUDIO — dyptyk. Tekst | dowód, kierunek naprzemienny.
   ===================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 80px);
  align-items: center;
}
.split + .split { margin-top: clamp(64px, 9vw, 130px); }
.split__proof { min-width: 0; }
.split__text { min-width: 0; }
/* Sekcja "jak to działa" - kadry wyśrodkowane w pionie względem etapów */
#jak .split { align-items: center; }
/* odwrócenie kierunku: dowód po lewej, tekst po prawej */
.split--reverse .split__text { order: 2; }
.split--reverse .split__proof { order: 1; }

/* Etapy „jak to działa" (energia narrative-workflow w splicie).
   Numeracja należy do sekcji 01 „Jak zacząć" - dwie sekcje z tymi samymi wielkimi
   cyframi biły się ze sobą. Tutaj etapy prowadzi pionowa włosowa prowadnica z amber
   wcięciem przy każdym punkcie: ten sam słownik, co reszta strony (hairline + pasek
   amber jak w .eyebrow i .shots__cap), a sekwencja czyta się z ciągłości linii. */
.stages { display: grid; gap: var(--space-xl); margin-top: var(--space-lg); }
.stage { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.stage__mark { position: relative; align-self: stretch; }
/* prowadnica - biegnie przez odstęp do kolejnego etapu; przy ostatnim urywa się pod wcięciem */
.stage__mark::before {
  content: ""; position: absolute; left: 0; top: 0;
  bottom: calc(var(--space-xl) * -1);
  width: var(--rule-hair); background: var(--hairline);
}
.stage:last-child .stage__mark::before { bottom: auto; height: 0.72em; }
/* wcięcie - prowadzi wzrok od linii do nagłówka etapu (wysokość dopasowana do h3) */
.stage__mark::after {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 100%;
  height: var(--rule-bold); background: var(--autoshow);
}
.stage__body h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-xs);
}
.stage__body p { font-size: var(--text-sm); color: var(--ink-soft); max-width: 46ch; }

/* Pasek 8 kadrów — prowadnica kątów (dowód) */
/* Kadry sesji - „contact sheet": prostokąty imitujące zdjęcia (studyjne tło +
   prowadnica kątów + sylwetka auta) z podpisem ujęcia. Bez numerów. */
.shots { display: grid; gap: var(--space-lg); }
.shots__cap {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate);
  margin: 0; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
}
.shots__cap::before, .shots__cap::after { content: ""; width: 22px; height: var(--rule-bold); background: var(--autoshow); }
.shots__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.shots__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.shot { display: grid; gap: var(--space-xs); }
.shot__frame {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--hairline);
  background: radial-gradient(120% 92% at 50% 16%, var(--white) 0%, var(--mist) 52%, var(--paper-sunken) 100%);
  box-shadow: var(--shadow-1);
  overflow: clip;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.shot:hover .shot__frame { border-color: var(--autoshow-line); transform: translateY(-2px); }
.shot__frame::before, .shot__frame::after {
  content: ""; position: absolute; width: 11px; height: 11px; border: 1.6px solid var(--autoshow-line); z-index: 1;
}
.shot__frame::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.shot__frame::after  { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.shot__car { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%; height: auto; fill: var(--slate-2); opacity: 0.5; }
/* Realne zdjęcie kadru kładzie się na sylwetce, ale POD narożnikami prowadnicy
   (::before/::after mają z-index:1) - motyw wizjera zostaje czytelny na foto.
   Kadrowanie cover, więc plik musi być 4:3, inaczej obetnie boki. */
.shot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot__a {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; color: var(--slate); text-align: center;
}

/* „Co dostajesz" — scena studyjna (dowód) + lista korzyści (tekst) */
.studio-stage {
  position: relative;
  aspect-ratio: 16 / 12;
  border-radius: var(--radius-lg);
  overflow: clip; isolation: isolate;
  background: radial-gradient(120% 95% at 50% 12%, var(--white) 0%, var(--mist) 48%, var(--paper-sunken) 100%);
  border: var(--rule-hair) solid var(--hairline);
  box-shadow: var(--shadow-2);
}
.studio-stage .ba__floor { height: 32%; }
.studio-stage .ba__car { width: 70%; }
.studio-stage .car__body { fill: var(--ink-2); }
.studio-stage .car__win  { fill: var(--mist); }
.studio-stage .car__wheel{ fill: var(--carbon); }
.studio-stage .car__hub  { fill: var(--slate-2); }
.studio-stage__brand {
  position: absolute; left: var(--space-md); bottom: var(--space-md);
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--carbon);
  padding: 0.4em 0.7em; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--autoshow) 92%, transparent);
}
.studio-stage__brand::before { content: ""; width: 14px; height: var(--rule-bold); background: var(--carbon); }
/* pierścień 360° */
.studio-stage__spin {
  position: absolute; top: var(--space-md); right: var(--space-md);
  width: 56px; height: 56px; border-radius: 50%;
  border: var(--rule-bold) dashed var(--signal-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; color: var(--signal-deep);
  background: rgba(255,255,255,0.7);
  animation: spin 9s linear infinite;
}
.studio-stage__spin span { animation: spin-rev 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }

.gets { display: grid; gap: var(--space-md); }
.get {
  display: grid; gap: var(--space-2xs);
  padding: clamp(20px, 2vw, 28px);
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.get:hover { border-color: var(--autoshow-line); transform: translateY(-2px); }
.get__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--autoshow-deep); }
.get h3 { font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); }
.get p { color: var(--ink-soft); font-size: var(--text-sm); max-width: 48ch; }
.get__spec { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.get__spec li { list-style: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate); padding: 3px 9px; border: var(--rule-hair) solid var(--hairline); border-radius: var(--radius-pill); }
.get__spec { padding: 0; margin-block: var(--space-2xs) 0; }

/* =====================================================================
   W APLIKACJI — karty funkcji panelu (4-up)
   ===================================================================== */
.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.feat {
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.feat:hover { transform: translateY(-4px); border-color: var(--autoshow-line); }
.feat__icon {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--autoshow-deep);
  background: var(--autoshow-wash);
  border: var(--rule-hair) solid var(--autoshow-line);
  border-radius: var(--radius-md);
}
.feat__icon svg { width: 22px; height: 22px; }
.feat h3 { font-size: var(--text-lg); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); }
.feat p { font-size: var(--text-sm); color: var(--ink-soft); }

/* =====================================================================
   CENNIK — 4 plany (Pro = featured amber)
   ===================================================================== */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: clamp(20px, 1.8vw, 28px);
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--autoshow-line); }
.plan--featured {
  border-color: var(--autoshow);
  box-shadow: var(--shadow-autoshow);
}
.plan--featured:hover { box-shadow: var(--shadow-autoshow); }
.plan__popular {
  position: absolute; top: 0; right: var(--space-md); transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--carbon); background: var(--autoshow);
  padding: 0.35em 0.8em; border-radius: var(--radius-pill);
}
.plan__popular::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--carbon);
  box-shadow: 0 0 0 0 var(--autoshow-pulse); animation: live 2.4s var(--ease-in-out) infinite;
}
@keyframes live { 0%{ box-shadow:0 0 0 0 var(--autoshow-pulse);} 70%{ box-shadow:0 0 0 9px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.plan__head { display: grid; gap: var(--space-2xs); }
.plan__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--ink); letter-spacing: var(--tracking-snug); }
.plan__desc { font-size: var(--text-sm); color: var(--ink-soft); }
.plan__price { display: flex; align-items: baseline; gap: 0.15em; }
.plan__amt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl); line-height: 1; color: var(--ink); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.plan--featured .plan__amt { color: var(--autoshow-deep); }
.plan__cur { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--ink-soft); }
.plan__per { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate); margin-left: 0.2em; }
/* Blok kwotowy - kwota abonamentu, stawka za sesję i kotwica wartości trzymają się
   razem (4 px), żeby czytały się jako jedna informacja, a nie trzy osobne wiersze
   rozstrzelone gapem karty. Te same liczby co w aplikacji (pakiety.php). */
.plan__money { display: grid; gap: var(--space-2xs); }
.plan__rate { font-size: var(--text-sm); color: var(--ink-soft); }
.plan__rate b { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan--featured .plan__rate b { color: var(--autoshow-deep); }
.plan__value {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate);
}
.plan__value s { text-decoration-thickness: var(--rule-hair); color: var(--slate); }
.plan__save {
  font-weight: 600; white-space: nowrap;
  color: var(--autoshow-deep); background: var(--autoshow-wash);
  border: var(--rule-hair) solid var(--autoshow-line);
  padding: 2px 9px; border-radius: var(--radius-pill);
}
.plan__credits { font-size: var(--text-sm); color: var(--ink-soft); }
.plan__credits b { color: var(--ink); font-weight: 600; }
.plan__features { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.plan__features li { position: relative; padding-left: 1.7em; font-size: var(--text-sm); color: var(--ink-soft); }
.plan__features li::before { position: absolute; left: 0; top: 0.05em; font-family: var(--font-mono); font-weight: 600; }
.plan__features li.ok { color: var(--ink); }
.plan__features li.ok::before { content: "✓"; color: var(--signal-deep); }
.plan--featured .plan__features li.ok::before { color: var(--autoshow-deep); }
/* Najniższy poziom wyciszenia w karcie = --slate. NIE --slate-2: ten na białym
   daje 3,1:1, a to zwykły tekst listy (mały, 13 px), więc musi trzymać 4,5:1.
   --slate-2 zostaje do wypełnień SVG, gdzie kontrast tekstu nie obowiązuje. */
.plan__features li.no { color: var(--slate); }
.plan__features li.no::before { content: "×"; color: var(--slate); }
.plan .btn { margin-top: auto; }
.plan__extra { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate); text-align: center; }

/* =====================================================================
   FAQ — natywny <details> (jak /faq i landingi serwisu)
   ===================================================================== */
.faq { display: grid; gap: var(--space-sm); max-width: 820px; }
.faq__item {
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.faq__item:hover { border-color: var(--autoshow-line); }
.faq__item[open] { border-color: var(--autoshow-line); box-shadow: var(--shadow-2); }
.faq__q {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: clamp(var(--space-md), 2vw, var(--space-lg));
  cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); color: var(--ink);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-snug);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: var(--rule-bold) solid var(--autoshow); outline-offset: -3px; border-radius: var(--radius-md); }
.faq__icon {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--hairline-strong);
  display: inline-flex; align-items: center; justify-content: center; color: var(--slate);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.faq__icon svg { width: 12px; height: 12px; }
.faq__item:hover .faq__icon { color: var(--autoshow-deep); border-color: var(--autoshow-line); }
.faq__item[open] .faq__icon { transform: rotate(45deg); color: var(--autoshow); border-color: var(--autoshow); }
.faq__a { padding: 0 clamp(var(--space-md), 2vw, var(--space-lg)) clamp(var(--space-md), 2vw, var(--space-lg)); }
.faq__a p { color: var(--ink-soft); line-height: var(--leading-body); max-width: 66ch; }

/* =====================================================================
   CTA końcowe — jasne (bez drugiej ciemnej sceny)
   ===================================================================== */
.cta { text-align: center; }
.cta__inner { max-width: 34rem; margin-inline: auto; display: grid; gap: var(--space-lg); justify-items: center; }
.cta h2 { font-size: var(--text-display-xs); line-height: 1.06; letter-spacing: var(--tracking-tight); }
.cta h2 b { color: var(--autoshow-deep); font-weight: 600; }
.cta p { color: var(--ink-soft); font-size: var(--text-lg); max-width: 50ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.cta__mail { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--slate); }
.cta__mail a { color: var(--autoshow-deep); }

/* =====================================================================
   STOPKA — statement (wyrównana do nowszego wzorca NGP)
   ===================================================================== */
.footer { padding-block: clamp(64px, 8vw, 110px) var(--space-2xl); background: var(--paper-sunken); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xl) clamp(32px, 5vw, 80px); align-items: start; }
.footer__brand { max-width: 38ch; }
.footer__word { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 0.96; letter-spacing: -0.01em; color: var(--ink); }
.footer__word b { color: var(--autoshow); }
.footer__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--slate); margin-top: var(--space-md); }
.footer__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--slate); margin: 0 0 var(--space-md); }
.footer__nav { display: grid; gap: var(--space-sm); align-content: start; }
.footer__nav a { font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); width: fit-content; transition: color var(--dur-2) var(--ease-out); }
.footer__nav a:hover { color: var(--autoshow-deep); }
.footer__contact { display: grid; gap: var(--space-sm); align-content: start; }
.footer__contact-link { font-size: var(--text-base); font-weight: 500; color: var(--ink-soft); width: fit-content; transition: color var(--dur-2) var(--ease-out); }
.footer__contact-link:hover { color: var(--autoshow-deep); }
.footer__contact-link--lead { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-snug); color: var(--ink); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md);
  margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--hairline);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--slate);
}
.footer__bottom a { color: var(--slate); }
.footer__bottom a:hover { color: var(--autoshow-deep); }

/* =====================================================================
   Reveal-on-scroll
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(28px); }
.no-reduce .reveal { transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reduce .reveal { opacity: 1; transform: none; }
/* dyptyk — przeciwne połowy wchodzą z lekkim przesunięciem czasowym */
.split .split__proof.reveal { transition-delay: 0.08s; }

/* =====================================================================
   ┌── BLOK TYMCZASOWY: WIDEO 360° „wkrótce" ─────────────────────────┐
   Funkcji nie ma jeszcze w aplikacji, więc na stronie jest przekreślona
   i opatrzona plakietką „wkrótce".

   JAK TO USUNĄĆ, GDY WIDEO RUSZY (dwa kroki, nic więcej):
   1. Skasuj CAŁY ten blok CSS (do klamry zamykającej niżej).
   2. W index.html znajdź wszystkie wystąpienia „v360" (jest ich komplet,
      każde opatrzone komentarzem) i w każdym: usuń klasę .v360, zdejmij
      znaczniki <s>…</s> zostawiając tekst, skasuj <b class="v360-soon">.
      Komentarze „v360:" mówią wprost, co przywrócić w zdaniach i meta.
   ===================================================================== */
.v360 s { color: var(--slate); text-decoration-thickness: var(--rule-hair); }
.v360-soon {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none;
  color: var(--autoshow-deep); background: var(--autoshow-wash);
  border: var(--rule-hair) solid var(--autoshow-line);
  padding: 2px 8px; border-radius: var(--radius-pill);
}
/* tag w karcie „Co dostajesz" - przekreślona etykieta i plakietka w jednej linii */
.get__tag.v360 { display: inline-flex; align-items: center; gap: 0.6em; }
/* pozycja w cenniku - plan ją zawiera (✓ zostaje), ale funkcja jeszcze nie działa */
.plan__features li.ok.v360 { color: var(--slate); }
.plan__features li.ok.v360 .v360-soon { margin-left: 0.4em; }
/* └── KONIEC BLOKU TYMCZASOWEGO ────────────────────────────────────┘ */

/* =====================================================================
   Responsywność — 320 / 375 / 414 / 768 / 900
   ===================================================================== */
@media (max-width: 980px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .split, .split--reverse { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__text { order: 1; }
  .split--reverse .split__proof { order: 2; }
  .split + .split { margin-top: clamp(48px, 8vw, 90px); }
  /* Na wąskich ekranach treść zawsze widoczna (wzorzec podstron NGP: na mobile
     elementy bywały tuż pod zgięciem i observer nie odpalał - nie chowamy ich). */
  .reveal { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 720px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 42px; height: 42px;
    border: var(--rule-hair) solid var(--hairline);
    border-radius: var(--radius-pill); background: transparent; cursor: pointer;
  }
  .nav__toggle span { width: 16px; height: 2px; background: var(--ink); position: relative; }
  .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--ink); }
  .nav__toggle span::before { top: -5px; } .nav__toggle span::after { top: 5px; }
  .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
  .nav.is-open { flex-wrap: wrap; border-radius: var(--radius-lg); padding-inline: var(--space-md); }
  .nav.is-open .nav__toggle span { background: transparent; }
  .nav.is-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
  .nav.is-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }
  .nav.is-open .nav__links { display: grid; gap: var(--space-xs); width: 100%; order: 3; margin-left: 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--hairline); }
  .nav.is-open .nav__links a { font-size: var(--text-base); padding: 8px 0; }
  .nav.is-open .nav__cta { display: inline-flex; order: 4; width: 100%; margin-left: 0; }
  .nav.is-open .nav__cta .btn { width: 100%; }

  .hero { align-items: flex-start; min-height: 100lvh; }
  .hero__grid { padding-block: clamp(96px, 15vh, 120px) var(--space-xl); }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.9rem); max-width: 18ch; }
  .hero__actions .btn { flex: 1 1 auto; }
  .scroll-cue { display: none; }

  /* Na wąskim ekranie prowadnica traci sens (jedna kolumna) - wcięcie amber
     zostaje jako krótka kreska nad nagłówkiem etapu. */
  .stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .stage__mark { align-self: start; width: 26px; height: var(--rule-bold); background: var(--autoshow); }
  .stage__mark::before, .stage__mark::after { content: none; }
  .onboard { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .footer__top { gap: var(--space-xl); }
}

/* =====================================================================
   Reduced motion — przestrzenny ruch ścinamy do crossfade
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .accent-word::after { animation: none; transform: scaleX(1); }
  .scroll-cue span:last-child, .ba__hint, .studio-stage__spin, .studio-stage__spin span, .plan__popular::before { animation: none; }
  .studio-stage__spin { border-style: solid; }
}