/* ─────────────────────────────────────────────────────────────
   skup-auta.pl — arkusz główny

   Kierunek: warsztat i tabliczka znamionowa.
   Chłodna szarość lakieru, grafit, żółć sygnałowa z lawety.
   Dane techniczne zawsze monospace — liczba ma wyglądać jak odczyt,
   nie jak zdanie.

   Bez frameworka CSS. Ruch wyłącznie tam, gdzie coś komunikuje,
   i wyłącznie na mechanizmach przeglądarki (view-timeline,
   view-transition) — zero JavaScriptu na potrzeby wyglądu.
   ───────────────────────────────────────────────────────────── */

/* ── Motywy ───────────────────────────────────────────────────
   Dwa zestawy zmiennych. Jasny to warsztat w dzień: chłodna szarość
   lakieru. Ciemny to warsztat wieczorem: grafit, żółć sygnałowa
   świeci mocniej. Wybór zapamiętuje przeglądarka, a przy pierwszej
   wizycie decyduje ustawienie systemu.
   ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --ink: #0e1a20;
  --ink-2: #24343b;
  --ink-soft: #33474f;
  --ink-mute: #6b7f88;
  /* Jasny motyw: ciepła kość słoniowa zamiast szpitalnej bieli.
     Papier ma odcień, karty są czysto białe — dzięki temu treść
     odcina się od tła zamiast zlewać w jedną płaszczyznę. */
  --paper: #f4f2ec;
  --paper-2: #ebe9e1;
  --surface: #ffffff;
  --surface-2: #faf9f5;
  --line: #ddd9cd;
  --line-strong: #b3ac99;

  /* Barwa wiodąca — żółć sygnałowa z lawety. */
  --signal: #f5b301;
  --signal-hi: #ffc633;
  --signal-deep: #a87700;

  /* Barwa towarzysząca — morska zieleń. Chłodna przeciwwaga dla żółci,
     używana przy danych technicznych i stanach "w porządku". */
  --teal: #0f9b8e;
  --teal-hi: #14b8a8;
  --teal-deep: #0a6f66;

  /* Akcent ciepły — do wyróżnień i podkreśleń w nagłówkach. */
  --ember: #e2603c;

  --go: #0c7a4d;
  --alert: #b3261e;

  /* Sekcje odwrócone (stopka, pasy CTA, taśma) są ciemne w OBU motywach,
     więc ich kolory nie mogą pochodzić ze zmiennych motywu — inaczej
     w trybie ciemnym tekst znika w tle. */
  --on-dark: #eef3f2;
  --on-dark-soft: #b6c6c4;
  --on-dark-mute: #8ba09e;
  --dark-bg: #0e1a20;
  --dark-bg-2: #16242b;

  --glow-1: color-mix(in srgb, var(--signal) 34%, transparent);
  --glow-2: color-mix(in srgb, var(--teal) 24%, transparent);
  --glow-3: color-mix(in srgb, var(--ember) 20%, transparent);
  --grid-line: color-mix(in srgb, var(--ink) 5%, transparent);

  /* Kolory ilustracji w hero — muszą reagować na motyw,
     inaczej w ciemnym trybie sylwetka auta zlewa się z tłem. */
  --art-line: #0e1a20;
  --art-hub: #eef1f0;
  --art-road: #b4bcb9;
  --art-body-1: #ffc94d;
  --art-body-2: #f5b301;
  --art-body-3: #d99f00;
  --art-glass-1: #2b4650;
  --art-glass-2: #16262c;
  --art-lamp: #fff3cf;

  --mark-body: #f5b301;
  --mark-line: #0e1a20;
  --mark-glass: #16262c;
  --mark-hub: #ffffff;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4: clamp(2.3rem, 1.6rem + 3.4vw, 4.1rem);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgb(14 26 32 / 0.05);
  --shadow: 0 1px 2px rgb(14 26 32 / 0.05), 0 12px 28px -18px rgb(14 26 32 / 0.35);
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --wrap: 1180px;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* W ciemnym motywie sekcje odwrócone są odrobinę jaśniejsze niż tło
     strony — inaczej stopka zlewałaby się z resztą w jedną plamę. */
  --dark-bg: #16242b;
  --dark-bg-2: #1d2f37;

  --ink: #eef3f2;
  --ink-2: #cdd8d6;
  --ink-soft: #a8b8b6;
  --ink-mute: #7f9290;
  --paper: #0c1418;
  --paper-2: #101b20;
  --surface: #141f25;
  --surface-2: #1a272e;
  --line: #22333a;
  --line-strong: #35494f;

  --signal: #ffc21f;
  --signal-hi: #ffd24d;
  --signal-deep: #ffc21f;

  --teal: #2ad4c0;
  --teal-hi: #4ee5d3;
  --teal-deep: #2ad4c0;

  --ember: #ff7d57;

  --go: #34d399;
  --alert: #ff6b5e;

  --glow-1: color-mix(in srgb, var(--signal) 15%, transparent);
  --glow-2: color-mix(in srgb, var(--teal) 14%, transparent);
  --glow-3: color-mix(in srgb, var(--ember) 10%, transparent);
  --grid-line: color-mix(in srgb, #ffffff 5%, transparent);

  --art-line: #0a1216;
  --art-hub: #cfe0dd;
  --art-road: #3d545c;
  --art-body-1: #ffd76b;
  --art-body-2: #ffc21f;
  --art-body-3: #d9a300;
  --art-glass-1: #385a66;
  --art-glass-2: #16262c;
  --art-lamp: #fff8e2;

  --mark-body: #ffc21f;
  --mark-line: #0a1216;
  --mark-glass: #16262c;
  --mark-hub: #cfe0dd;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 34px -20px rgb(0 0 0 / 0.9);
}

/* Zmiana motywu nie może migać kolorami przy każdym elemencie —
   przejście dotyczy tylko warstw tła i krawędzi. */
body,
.site-header,
.card,
.section-contrast,
.page-head,
.hero {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Przejście między stronami.
   Włączone tylko od 900 px wzwyż: na telefonach przeglądarka musi zrobić
   zrzut całej strony przed nawigacją, co na słabszym sprzęcie objawia się
   zacięciem przy każdym kliknięciu w menu. Na desktopie kosztuje tyle co nic. */
@media (min-width: 900px) {
  @view-transition {
    navigation: auto;
  }
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(60rem 40rem at 12% -8%, var(--glow-1), transparent 62%),
    radial-gradient(46rem 34rem at 92% 6%, var(--glow-2), transparent 60%),
    radial-gradient(52rem 38rem at 50% 108%, var(--glow-3), transparent 58%);
  /* background-attachment: fixed wymusza przemalowanie tła przy każdym
     przewinięciu. Na desktopie niezauważalne, na telefonie szarpie —
     dlatego włączamy je dopiero na szerokich ekranach (niżej). */
  background-attachment: scroll;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.02em; }

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

a:hover {
  text-decoration-color: var(--signal-deep);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--signal-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection {
  background: var(--signal);
  color: var(--ink);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 60;
  background: var(--dark-bg);
  color: var(--on-dark);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.wrap-narrow { max-width: 760px; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-mute); }

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Ujawnianie przy przewijaniu ───────────────────────────────
   Realizowane osią widoku, nie skryptem. Bez wsparcia elementy są
   po prostu widoczne od razu — żadnej pustej strony. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Elementy sygnaturowe ──────────────────────────────────── */

/* Pas ostrzegawczy z lawety. Dwa razy na stronę: krawędź hero
   i krawędź stopki. Więcej byłoby ozdobnikiem. */
.hazard-strip {
  height: 5px;
  background: repeating-linear-gradient(-45deg, var(--signal) 0 12px, var(--ink) 12px 24px);
}

/* Tabliczka znamionowa. Nosi realne dane: kod strony, rocznik,
   przebieg. Nigdy pustą dekorację. */
.plate {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: linear-gradient(180deg, #fdfdfd, #e6eae8);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-sm);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Pasek danych technicznych — wiersz odczytów pod nagłówkiem strony
   lokalnej. Wzmocniona tabliczka: same fakty, żadnych obietnic. */
.spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 1.5rem 0 1.75rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.spec-strip div { min-width: 92px; }

.spec-key {
  display: block;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.spec-val {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── Przyciski ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease,
    border-color 0.14s ease, box-shadow 0.14s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--signal);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 6px 18px -8px rgb(168 119 0 / 0.7);
}

.btn-primary:hover {
  background: var(--signal-hi);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 10px 22px -10px rgb(168 119 0 / 0.8);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
}

.btn-ghost:hover { border-color: var(--ink); }

.btn-sm {
  min-height: 42px;
  padding: 0 1.05rem;
  font-size: var(--step--1);
}

.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  font-weight: 700;
  text-decoration-color: var(--signal);
}

.link-more::after {
  content: "→";
  transition: transform 0.15s ease;
}

.link-more:hover::after { transform: translateX(3px); }

.link-back {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--ink-mute);
  text-decoration: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── Nagłówek ──────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.04em;
  text-decoration: none;
}

/* Znak firmowy — sylwetka auta, ta sama w logo, czacie i tle sekcji. */
.car-mark {
  flex: none;
  display: block;
  overflow: visible;
}

.logo .car-mark { width: 34px; height: 20px; }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.footer-logo .car-mark { width: 30px; height: 18px; }

/* W sekcjach odwróconych znak musi mieć własne kolory —
   zmienne motywu dałyby tam ciemne auto na ciemnym tle. */
.site-footer .car-mark,
.panel-top .car-mark {
  --mark-line: #0b1418;
  --mark-glass: #0b1418;
  --mark-hub: #eef3f2;
  --mark-body: #f5b301;
}

.logo-tld { color: var(--ink-mute); }

.nav-desktop {
  display: none;
  gap: 1.75rem;
  font-size: var(--step--1);
  font-weight: 500;
}

.nav-desktop a {
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.nav-desktop a:hover { border-bottom-color: var(--signal); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-phone {
  display: none;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
}

.header-cta { display: none; }

.nav-mobile { position: relative; }

.nav-mobile summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  list-style: none;
  cursor: pointer;
}

.nav-mobile summary::-webkit-details-marker { display: none; }

.nav-mobile-panel {
  position: absolute;
  right: 0;
  top: 50px;
  width: 220px;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.nav-mobile-panel a {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.nav-mobile-panel a:hover { background: var(--paper); }

/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  background:
    radial-gradient(38rem 26rem at 78% 12%, var(--glow-2), transparent 62%),
    radial-gradient(34rem 24rem at 8% 88%, var(--glow-1), transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Siatka rysunku technicznego. Czysty gradient, zero obrazów —
   nawiązanie do dokumentacji warsztatowej. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  pointer-events: none;
}

.hero > * { position: relative; }

.hero .hazard-strip { margin-bottom: clamp(2rem, 5vw, 3.25rem); }

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.hero-lead {
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
  padding: 1.35rem 0;
  border-block: 1px solid var(--line);
}

.fact-value {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.fact-label {
  margin: 0.2rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.crumbs {
  margin-bottom: 1rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* ── Sekcje ────────────────────────────────────────────────── */

.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(2rem, 4vw, 3rem); }

.section-contrast {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section-lead {
  max-width: 60ch;
  font-size: var(--step-1);
  color: var(--ink-soft);
}

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.page-head-tight { padding-bottom: 1.5rem; }

.page-lead {
  max-width: 60ch;
  font-size: var(--step-1);
  color: var(--ink-soft);
}

.two-col {
  display: grid;
  gap: 2rem;
  margin-top: 1.75rem;
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.7rem;
  color: var(--ink-soft);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent);
}

/* Numeracja jest tu uzasadniona: to realna sekwencja zdarzeń. */
.steps {
  display: grid;
  gap: 1.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
}

.step-num {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--signal-deep);
}

.steps h3 { margin-bottom: 0.35rem; }

.steps p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.purchase-grid {
  display: grid;
  /* Zdjęcia zawierają dane auta wpisane w kadr — przy wąskich kafelkach
     tekst robił się nieczytelny, więc dajemy im dwa razy więcej miejsca. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.purchase {
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.purchase:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgb(14 26 32 / 0.05), 0 18px 34px -20px rgb(14 26 32 / 0.45);
}

.purchase-photo {
  display: block;
  position: relative;
  overflow: hidden;
}

.purchase img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.purchase-photo:hover img { transform: scale(1.02); }

/* Podpowiedź, że zdjęcie da się powiększyć. */
.purchase-photo::after {
  content: "Powiększ";
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dark-bg) 82%, transparent);
  color: var(--on-dark);
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.purchase-photo:hover::after { opacity: 1; }

.purchase-body { padding: 1.35rem 1.4rem 1.5rem; }
.purchase-body h3 { margin-bottom: 0.45rem; }

.purchase-fault {
  margin: 0.5rem 0 0.85rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.purchase-price {
  margin: 0;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--teal-deep);
}

[data-theme="dark"] .purchase-price { color: var(--teal); }

.faq {
  margin-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  padding: 1.15rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 0.4em;
  border-right: 2px solid var(--signal-deep);
  border-bottom: 2px solid var(--signal-deep);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.faq details[open] summary::after { transform: rotate(-135deg); }

.faq p {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  max-width: 68ch;
}

.city-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.city-list a {
  display: inline-block;
  padding: 0.48rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  text-decoration: none;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.city-list a:hover {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--signal) 12%, var(--surface));
}

.city-list-dense a { border-radius: var(--radius-sm); }
.city-list-inline { margin-top: 0.75rem; }

.powiat-block { margin-bottom: 2.75rem; }

.powiat-block h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: var(--step-2);
}

.powiat-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-mute);
}

.cta-band {
  background: linear-gradient(160deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%);
  color: var(--on-dark);
  border-block: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
}

.cta-band h2 { color: var(--on-dark); }

.cta-band h2 { margin-bottom: 0.4rem; }

.cta-band p {
  margin: 0;
  color: var(--on-dark-soft);
}

.cta-inner { display: grid; gap: 1.5rem; }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta-band .btn-ghost {
  color: var(--on-dark);
  border-color: color-mix(in srgb, var(--on-dark) 38%, transparent);
}

.cta-band .btn-ghost:hover {
  border-color: var(--on-dark);
  background: color-mix(in srgb, var(--on-dark) 8%, transparent);
}

.prose-local h2 { margin-top: 2.5rem; }
.prose-local h3 { margin-top: 1.75rem; }

.prose-local p,
.prose-local li { color: var(--ink-soft); }

.prose-local ul {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.prose-local li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose-local li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--signal);
}

.contact-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.contact-card { padding: 1.6rem; }

.contact-phone,
.contact-mail {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.contact-mail { font-size: 1.05rem; }

.contact-city {
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

/* ── Stopka ────────────────────────────────────────────────── */

.site-footer {
  margin-top: var(--section-y);
  background: var(--dark-bg);
  color: var(--on-dark);
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 3.5rem;
}

.footer-logo {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.footer-lead {
  max-width: 42ch;
  color: var(--on-dark-soft);
  font-size: var(--step--1);
}

.footer-phone {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--signal);
  text-decoration: none;
}

.footer-hours {
  margin: 0.25rem 0 0;
  color: var(--on-dark-mute);
  font-size: var(--step--1);
}

.site-footer .eyebrow { color: var(--signal); }

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li { margin-bottom: 0.55rem; }

.site-footer nav a {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: var(--step--1);
}

.site-footer nav a:hover { color: var(--signal); }

.footer-legal {
  padding-block: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  color: var(--on-dark-mute);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* ── Pasek mobilny ─────────────────────────────────────────── */

.sticky-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}

.sticky-bar .btn {
  min-height: 48px;
  font-size: var(--step--1);
}

body { padding-bottom: 76px; }

/* ── Breakpointy ───────────────────────────────────────────── */

@media (min-width: 640px) {
  .sticky-bar { display: none; }
  body { padding-bottom: 0; }

  .header-phone,
  .header-cta { display: inline-flex; }

  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

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

  .cta-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (min-width: 900px) {
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }

  .hero-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 3.5rem;
  }

  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .option-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Asystent w rogu ekranu ────────────────────────────────────
   Zwinięty to jeden przycisk. Rozwinięty nie zasłania paska
   telefonu na mobile — bo telefon nadal jest szybszą drogą
   do wyceny niż rozmowa z asystentem. */

.chat {
  position: fixed;
  right: 1rem;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.chat-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.15rem 0.6rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--dark-bg);
  color: var(--on-dark);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgb(14 26 32 / 0.9);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.chat-toggle:hover {
  transform: translateY(-2px);
  background: var(--dark-bg-2);
}

.chat-toggle-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.chat-toggle-text b {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.chat-toggle-text small {
  font-size: 0.72rem;
  color: var(--on-dark-mute);
}

/* Sylwetka auta w kółku — ten sam znak, co w logo. */
.chat-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--dark-bg);
}

.chat-avatar-sm { width: 34px; height: 34px; }

/* Zielona kropka „jestem" — sygnał, że po drugiej stronie ktoś odpowie. */
.chat-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2fd07a;
  border: 2px solid var(--dark-bg);
}

.chat-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #2fd07a;
  animation: chat-ring 2.6s ease-out infinite;
}

@keyframes chat-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

.chat-panel {
  display: none;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(560px, calc(100vh - 12rem));
  overflow: hidden;
  flex-direction: column;
}

.chat.is-open .chat-panel { display: flex; }
.chat.is-open .chat-toggle { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--dark-bg);
  color: var(--on-dark);
  border-radius: var(--radius) var(--radius) 0 0;
}

.chat-head-text { flex: 1; }

.chat-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.chat-sub {
  margin: 0.1rem 0 0;
  font-size: 0.76rem;
  color: var(--on-dark-mute);
}

.chat-close {
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
}

.chat-log {
  flex: 1;
  /* Bez min-height: 0 element w kolumnie elastycznej nie kurczy się poniżej
     swojej zawartości — lista rozpycha okno, a pole do pisania wypada poza
     ekran. To dlatego trzeba było przewijać stronę zamiast rozmowy. */
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scrollbar-width: thin;
}

.chat-msg {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  border-radius: 14px;
  font-size: var(--step--1);
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-msg-assistant {
  align-self: flex-start;
  background: var(--paper);
  border-bottom-left-radius: 4px;
}

.chat-msg-user {
  align-self: flex-end;
  background: var(--dark-bg-2);
  color: var(--on-dark);
  border-bottom-right-radius: 4px;
}

.chat-msg.is-error {
  background: color-mix(in srgb, var(--alert) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--alert) 25%, transparent);
  color: var(--alert);
}

/* Trzy kropki, dopóki nie przyjdzie pierwszy fragment odpowiedzi. */
.chat-msg.is-typing::after {
  content: "···";
  letter-spacing: 0.15em;
  color: var(--ink-mute);
}

.chat-phone {
  align-self: flex-start;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
}

.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--line);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: var(--step--1);
  border: 1.5px solid var(--line);
  border-radius: 10px;
}

.chat-form input:focus { border-color: var(--ink); }

/* Przycisk wysyłki: stała szerokość, nigdy nie zwęża pola tekstowego. */
.chat-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--signal);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.14s ease, transform 0.14s ease;
}

.chat-send:hover { background: var(--signal-hi); transform: translateY(-1px); }
.chat-send:disabled { opacity: 0.5; cursor: default; transform: none; }
[data-theme="dark"] .chat-send { color: #131b1e; }

.chat-legal {
  margin: 0;
  padding: 0 0.75rem 0.75rem;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--ink-mute);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 640px) {
  .chat { bottom: 1.25rem; }
}

/* ═════════════════════════════════════════════════════════════
   FORMULARZ WYCENY

   Wszystko na jednej stronie, w czterech blokach z numeracją.
   Numery są tu funkcjonalne: pokazują, ile jeszcze przed Tobą,
   co przy długim formularzu ma znaczenie dla ukończenia.
   ═════════════════════════════════════════════════════════════ */

.quote {
  padding: clamp(1.25rem, 3vw, 2rem);
  scroll-margin-top: 5rem;
}

.quote-head {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

.quote-title {
  font-size: var(--step-2);
  margin-bottom: 0.35rem;
}

.quote-sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.quote-block {
  border: 0;
  padding: 0;
  margin: 0 0 2rem;
}

.quote-block legend {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding: 0;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.quote-block legend i {
  font-style: normal;
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.quote-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--dark-bg);
  color: var(--signal);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.field-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.field {
  display: block;
  margin-bottom: 1rem;
}

.field > span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--step--1);
  font-weight: 600;
}

.field > span b {
  color: var(--signal-deep);
}

.field > span i {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-mute);
}

.field input[type="text"],
.field input[type="tel"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.field select {
  /* Własna strzałka — natywna wygląda inaczej w każdej przeglądarce. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 30%, transparent);
}

.field-note {
  margin: 0.5rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

/* Pigułki — wielokrotny i pojedynczy wybór. Znacznik jest ukryty,
   klikalna jest cała etykieta: większy cel na ekranie dotykowym. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill span {
  display: inline-block;
  padding: 0.55rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color 0.13s ease, background-color 0.13s ease, transform 0.13s ease;
}

.pill span:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.pill input:checked + span {
  background: var(--signal);
  border-color: var(--signal-deep);
  font-weight: 600;
}

.pill input:focus-visible + span {
  outline: 3px solid var(--signal-deep);
  outline-offset: 2px;
}

/* Kafle stanu technicznego — trzy opcje, wybór najważniejszy w formularzu. */
.tiles {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  align-items: stretch;
}

/* Etykieta jest elementem siatki, a kafel jej wypełnieniem — bez
   wymuszenia pełnej wysokości trzy kafle miały różną długość,
   zależnie od liczby wierszy w opisie. */
.tile {
  display: flex;
}

.tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tile-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

.tile-body:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.tile-body b {
  display: block;
  letter-spacing: -0.02em;
}

.tile-body small {
  display: block;
  margin-top: auto;
  padding-top: 0.35rem;
  color: var(--ink-mute);
  font-size: 0.83rem;
  line-height: 1.35;
}

/* Nazwa stanu nie może się łamać w połowie na wąskim kaflu. */
.tile-body b {
  display: block;
  margin-bottom: 0.2rem;
  text-wrap: balance;
}

.tile input:checked + .tile-body {
  border-color: var(--signal-deep);
  background: color-mix(in srgb, var(--signal) 12%, var(--surface));
}

.tile input:focus-visible + .tile-body {
  outline: 3px solid var(--signal-deep);
  outline-offset: 2px;
}

.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.consent input {
  margin-top: 0.15rem;
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--signal-deep);
}

.quote-error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--alert) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--alert) 28%, transparent);
  color: var(--alert);
  font-size: var(--step--1);
}

.btn-lg {
  width: 100%;
  min-height: 58px;
  font-size: 1.05rem;
}

.quote-help {
  margin: 1rem 0 0;
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.quote-help a {
  font-weight: 700;
  color: var(--ink);
}

.quote-done {
  text-align: center;
  padding: 2rem 1rem;
}

.quote-done h3 {
  font-size: var(--step-2);
}

/* Znacznik potwierdzenia — rysowany, nie obrazkiem. */
.quote-done-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--signal);
  position: relative;
  animation: mark-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.quote-done-mark::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 16px;
  width: 16px;
  height: 28px;
  border-right: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  transform: rotate(45deg);
}

@keyframes mark-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.photo-input {
  display: block;
  padding: 1.6rem;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.photo-input strong {
  display: block;
  margin-bottom: 0.25rem;
}

.photo-input span {
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.photo-input:hover {
  border-color: var(--signal-deep);
  background: color-mix(in srgb, var(--signal) 6%, transparent);
}

.photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.photo-preview img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Pole-pułapka na boty. Ukryte tak, żeby czytniki ekranu też je pominęły. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wrap-form { max-width: 860px; }
.center { text-align: center; }
.center-actions { justify-content: center; }

/* ═════════════════════════════════════════════════════════════
   WARSTWA DEKORACYJNA

   Wszystko poniżej to CSS i SVG — zero obrazów do pobrania.
   Ruch jest podporządkowany treści: pas z ofertą się przewija,
   liczby odliczają, sekcje wjeżdżają przy przewijaniu. Nic nie
   miga bez powodu i wszystko wyłącza się przy prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════ */

/* ── Pas przewijany ───────────────────────────────────────────
   Odpowiednik taśmy informacyjnej z warsztatu. Niesie realną
   ofertę, nie ozdobne hasła. */

.ticker {
  overflow: hidden;
  background: var(--dark-bg);
  color: var(--on-dark);
  border-block: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  padding-block: 0.75rem;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.ticker-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: ticker 38s linear infinite;
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

.ticker span {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  flex: none;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-dark-soft);
}

.ticker span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--signal);
  flex: none;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Ilustracja w hero ────────────────────────────────────────
   Sylwetka auta rysowana w SVG. Koła kręcą się powoli, linia
   podłoża przesuwa — tyle ruchu, żeby strona żyła, nie rozpraszając. */

.hero-art {
  position: relative;
  margin-top: 2rem;
}

.hero-art svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.art-wheel {
  transform-origin: center;
  animation: wheel-spin 4s linear infinite;
}

@keyframes wheel-spin {
  to { transform: rotate(360deg); }
}

.art-road {
  stroke-dasharray: 22 18;
  animation: road-move 1.4s linear infinite;
}

@keyframes road-move {
  to { stroke-dashoffset: -40; }
}

/* Impuls przy elemencie usterki — sygnalizuje, że to auto ma problem. */
.art-pulse {
  transform-origin: center;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.35); }
}

/* ── Karty numerowane ─────────────────────────────────────────
   Numeracja pokazuje zakres oferty jednym rzutem oka. */

.numbered {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  counter-reset: item;
}

.numbered li {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.numbered li::before {
  counter-increment: item;
  content: "0" counter(item);
  position: absolute;
  right: 0.9rem;
  top: 0.5rem;
  font-family: var(--mono);
  font-size: 2.6rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 7%, transparent);
  transition: color 0.18s ease;
}

.numbered li:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgb(14 26 32 / 0.05), 0 20px 40px -24px rgb(14 26 32 / 0.5);
}

.numbered li:hover::before {
  color: color-mix(in srgb, var(--signal) 55%, transparent);
}

.numbered h3 {
  margin-bottom: 0.4rem;
  padding-right: 3rem;
}

.numbered p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* ── Liczby ───────────────────────────────────────────────────
   Odliczają w górę przy wejściu w widok (app.js). Cyfry mają
   stałą szerokość, żeby nie skakały w trakcie liczenia. */

.figures {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 2rem 0;
  border-block: 2px solid var(--ink);
}

.figure-value {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.figure-value small {
  font-size: 0.45em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-mute);
}

.figure-label {
  margin: 0.5rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-mute);
  max-width: 22ch;
}

/* ── Pas ostrzegawczy w ruchu ─────────────────────────────── */

.hazard-strip {
  background-size: 34px 34px;
  animation: hazard-slide 2.4s linear infinite;
}

@keyframes hazard-slide {
  to { background-position: 34px 0; }
}

/* ── Ujawnianie z opóźnieniem ─────────────────────────────────
   Elementy w siatce wjeżdżają jeden po drugim, a nie wszystkie naraz. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .numbered li,
    .purchase,
    .figures > div {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
  }
}

/* ── Nagłówek sekcji z linią ──────────────────────────────── */

.section-title {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.section-title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--line-strong), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track,
  .art-wheel,
  .art-road,
  .art-pulse,
  .hazard-strip {
    animation: none !important;
  }
}

@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .numbered { grid-template-columns: repeat(2, 1fr); }
  .figures { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .numbered { grid-template-columns: repeat(3, 1fr); }
}

/* ═════════════════════════════════════════════════════════════
   TŁO, KOLOR I RUCH
   ═════════════════════════════════════════════════════════════ */

/* ── Świetlne plamy w tle ─────────────────────────────────────
   Trzy rozmyte kręgi dryfujące bardzo powoli. Ruch jest na granicy
   dostrzegalności — ma sprawiać, że strona „oddycha", a nie zwracać
   na siebie uwagę. Warstwa jest pod treścią i nie łapie kliknięć. */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  /* Bez will-change: transform przeglądarka i tak wypycha te warstwy na GPU,
     a deklaracja rezerwuje pamięć, której na telefonie brakuje. */
  transform: translateZ(0);
}

.aurora span:nth-child(1) {
  width: 34rem;
  height: 34rem;
  left: -8rem;
  top: -6rem;
  background: var(--signal);
  animation: drift-a 26s ease-in-out infinite alternate;
}

.aurora span:nth-child(2) {
  width: 28rem;
  height: 28rem;
  right: -6rem;
  top: 20%;
  background: var(--teal);
  animation: drift-b 32s ease-in-out infinite alternate;
}

.aurora span:nth-child(3) {
  width: 30rem;
  height: 30rem;
  left: 30%;
  bottom: -10rem;
  background: var(--ember);
  opacity: 0.35;
  animation: drift-c 38s ease-in-out infinite alternate;
}

[data-theme="dark"] .aurora span { opacity: 0.22; }
[data-theme="dark"] .aurora span:nth-child(3) { opacity: 0.16; }

@keyframes drift-a {
  to { transform: translate(6rem, 4rem) scale(1.15); }
}

@keyframes drift-b {
  to { transform: translate(-5rem, 6rem) scale(0.9); }
}

@keyframes drift-c {
  to { transform: translate(4rem, -5rem) scale(1.1); }
}

/* Delikatne ziarno — zdejmuje z gradientów plastikową gładkość.
   Generowane przez SVG w adresie danych, bez pobierania pliku. */
.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Pasek postępu czytania ─────────────────────────────────── */

.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(to right, var(--signal), var(--teal));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-grow linear;
    animation-timeline: scroll(root block);
  }
}

@keyframes progress-grow {
  to { transform: scaleX(1); }
}

/* ── Przełącznik motywu ───────────────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.theme-toggle svg { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ── Wyróżnienie w nagłówku ───────────────────────────────────
   Podkreślenie rysowane gradientem, wjeżdżające po wczytaniu strony.
   Zwraca uwagę na jedno słowo, zamiast krzyczeć całym nagłówkiem. */

.mark {
  position: relative;
  white-space: nowrap;
}

.mark::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  bottom: 0.06em;
  height: 0.34em;
  z-index: -1;
  border-radius: 3px;
  background: linear-gradient(100deg, var(--signal), var(--signal-hi));
  transform-origin: left center;
  animation: mark-draw 0.7s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mark-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── Błysk na przycisku ───────────────────────────────────────
   Jednorazowy przy najechaniu, nie w pętli. */

.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.btn-primary:hover::after { transform: translateX(120%); }

/* ── Kolor w elementach technicznych ──────────────────────── */

.spec-val { color: var(--teal-deep); }
.plate { border-left: 3px solid var(--teal); }
.step-num { color: var(--teal-deep); }

.figure-value {
  background: linear-gradient(120deg, var(--ink), var(--teal-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.figures > div {
  position: relative;
  padding-left: 1.1rem;
}

.figures > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--signal), var(--teal));
}

.numbered li:nth-child(3n + 2)::before { color: color-mix(in srgb, var(--teal) 22%, transparent); }
.numbered li:nth-child(3n + 2):hover::before { color: color-mix(in srgb, var(--teal) 65%, transparent); }
.numbered li:nth-child(3n)::before { color: color-mix(in srgb, var(--ember) 18%, transparent); }
.numbered li:nth-child(3n):hover::before { color: color-mix(in srgb, var(--ember) 60%, transparent); }

.check-list li:nth-child(even)::before {
  background: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}

/* ── Karty reagujące na kursor ────────────────────────────── */

.purchase:hover,
.contact-card:hover {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line));
}

.contact-card {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgb(14 26 32 / 0.05), 0 20px 40px -24px rgb(14 26 32 / 0.5);
}

/* ── Pasy oddzielające sekcje ─────────────────────────────── */

.section-contrast {
  position: relative;
}

.section-contrast::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--signal), var(--teal), transparent);
  opacity: 0.6;
}

/* ── Ciemny motyw: drobne korekty ─────────────────────────── */

[data-theme="dark"] .plate {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}



[data-theme="dark"] .btn-primary { color: #131b1e; }
[data-theme="dark"] .pill input:checked + span { color: #131b1e; }
[data-theme="dark"] .figure-value {
  background: linear-gradient(120deg, var(--ink), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
  .aurora span,
  .mark::after,
  .progress {
    animation: none !important;
  }
  .mark::after { transform: none; }
}

/* ═════════════════════════════════════════════════════════════
   CZYTELNOŚĆ NA MAŁYCH EKRANACH I W CIEMNYM MOTYWIE
   ═════════════════════════════════════════════════════════════ */

/* Stopka: trzy kolumny na desktopie robiły się na telefonie jednym
   ciągiem tekstu bez podziału. Sekcje dostają wyraźne krawędzie. */
@media (max-width: 639px) {
  .footer-grid {
    gap: 1.75rem;
    padding-block: 2.5rem;
  }

  .footer-grid > nav {
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  }

  .site-footer li { margin-bottom: 0.75rem; }

  /* Cel dotykowy w stopce był za mały — teraz pełna wysokość palca. */
  .site-footer nav a {
    display: inline-block;
    padding-block: 0.25rem;
    font-size: 0.95rem;
  }

  .footer-phone { font-size: 1.9rem; }

  .cta-inner { text-align: left; }
  .cta-actions .btn { flex: 1 1 100%; }

  .hero-actions .btn,
  .contact-card { width: 100%; }

  .quote { padding: 1.1rem; }
  .quote-block { margin-bottom: 1.5rem; }

  /* Pigułki: większy odstęp, żeby nie klikać sąsiedniej. */
  .pills { gap: 0.55rem; }
  .pill span { padding: 0.65rem 1.05rem; }

  .figures { padding: 1.5rem 0; }
  .section-title::after { display: none; }
}

/* Tekst pomocniczy był zbyt jasny w ciemnym motywie — kontrast poniżej
   progu czytelności przy słabym świetle. */
[data-theme="dark"] .muted,
[data-theme="dark"] .field-note,
[data-theme="dark"] .quote-sub,
[data-theme="dark"] .fact-label,
[data-theme="dark"] .figure-label,
[data-theme="dark"] .purchase-fault,
[data-theme="dark"] .tile-body small {
  color: #93a8a6;
}

[data-theme="dark"] .eyebrow { color: var(--teal); }

/* Karty w ciemnym motywie potrzebują wyraźniejszej krawędzi,
   bo cień na ciemnym tle prawie nie pracuje. */
[data-theme="dark"] .card,
[data-theme="dark"] .numbered li,
[data-theme="dark"] .city-list a,
[data-theme="dark"] .pill span,
[data-theme="dark"] .tile-body {
  border-color: #2a3d45;
}

[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  background: var(--surface-2);
  border-color: #2a3d45;
  color: var(--ink);
}

[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field textarea::placeholder {
  color: #6f8583;
}

[data-theme="dark"] .field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

[data-theme="dark"] .photo-input { border-color: #35494f; }
[data-theme="dark"] .steps li { border-top-color: var(--teal); }
[data-theme="dark"] .figures { border-block-color: var(--teal-deep); }

/* Sekcja tuż nad stopką bywała ciemniejsza niż sama stopka —
   przez plamę światła wypadającą akurat w tym miejscu. */
.site-footer { position: relative; z-index: 1; }

/* ── Pasek zaufania pod ilustracją ────────────────────────────
   Wypełnia pustkę po lewej stronie hero i niesie trzy konkrety,
   o które klienci pytają najczęściej. */

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.trust-row div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.trust-row b {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.trust-row span {
  font-size: 0.8rem;
  color: var(--ink-mute);
}

.trust-row b::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.5rem;
  border-radius: 2px;
  background: var(--teal);
  vertical-align: middle;
}

.trust-row div:nth-child(2) b::before { background: var(--signal); }
.trust-row div:nth-child(3) b::before { background: var(--ember); }

@media (max-width: 480px) {
  .trust-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .trust-row div { flex-direction: row; align-items: baseline; gap: 0.5rem; }
}

/* ═════════════════════════════════════════════════════════════
   SEKCJA Z FORMULARZEM

   Formularz stoi pod hero, na pełnej szerokości. Boczne marginesy
   wypełniają dekoracje: siatka rysunku technicznego, tabliczki
   z konkretami i strzałki prowadzące wzrok do środka. Poniżej
   1180 px dekoracje znikają — na telefonie liczy się formularz.
   ═════════════════════════════════════════════════════════════ */

.form-band {
  position: relative;
  scroll-margin-top: 4.5rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(40rem 28rem at 50% 0%, var(--glow-1), transparent 60%),
    var(--paper-2);
  border-block: 1px solid var(--line);
  overflow: hidden;
}

.form-band-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(60% 60% at 50% 40%, transparent 30%, #000 85%);
  pointer-events: none;
}

.form-band-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ── Dekoracje boczne ─────────────────────────────────────── */

/* Dekoracje boczne pokazujemy dopiero wtedy, gdy realnie jest na nie
   miejsce. Formularz ma 940 px, czyli 470 px od środka; tabliczki mają
   180 px i startują 700 px od środka, więc między nimi a kartą zostaje
   50 px odstępu. Poniżej 1400 px szerokości okna znikają całkowicie —
   lepiej brak ozdób niż ozdoby na treści. */
.form-deco {
  display: none;
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  max-height: 100%;
  flex-direction: column;
  gap: 1.1rem;
  pointer-events: none;
}

.form-deco-left {
  left: calc(50% - 700px);
  align-items: flex-end;
  text-align: right;
}

.form-deco-right {
  right: calc(50% - 700px);
  align-items: flex-start;
}

.deco-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  writing-mode: vertical-rl;
  opacity: 0.75;
}

.form-deco-left .deco-label { transform: rotate(180deg); }

/* Tabliczka z konkretem. Unosi się bardzo powoli, w przeciwfazie
   do sąsiedniej — dwa elementy nigdy nie idą równo. */
.deco-plate {
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  border-radius: 10px;
  box-shadow: var(--shadow);
  animation: float-plate 7s ease-in-out infinite;
}

.form-deco-right .deco-plate {
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--teal);
  animation-delay: -3.5s;
}

.deco-plate b {
  display: block;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.deco-plate span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--ink-mute);
}

@keyframes float-plate {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Strzałki prowadzące wzrok do formularza. */
.deco-chevrons {
  width: 100%;
  height: 74px;
  flex: none;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--line-strong) 0 3px,
    transparent 3px 13px
  );
  mask-image: linear-gradient(to bottom, transparent, #000, transparent);
  opacity: 0.7;
}

@media (min-width: 1400px) {
  .form-deco { display: flex; }
}

/* Na bardzo szerokich ekranach tabliczki mogą odsunąć się dalej,
   żeby nie tłoczyły się przy krawędzi formularza. */
@media (min-width: 1700px) {
  .form-deco-left { left: calc(50% - 760px); }
  .form-deco-right { right: calc(50% - 760px); }
  .form-deco { width: 210px; }
}

/* Formularz idzie jedną kolumną — cztery bloki jeden pod drugim.
   Układ dwukolumnowy mieścił więcej na ekranie, ale rozbijał kolejność
   czytania: wzrok skakał w bok w połowie wypełniania. */
@media (min-width: 900px) {
  .quote {
    padding: clamp(1.75rem, 3vw, 2.5rem);
  }

  .btn-lg { width: auto; min-width: 300px; }
}

/* ═════════════════════════════════════════════════════════════
   JASNY MOTYW — CHARAKTER

   Sam biały prostokąt z szarym tekstem wygląda jak niedokończony
   szkic. Poniżej rzeczy, które w ciemnym motywie robi za nas
   kontrast, a w jasnym trzeba dołożyć: barwione tła sekcji,
   kolorowe krawędzie kart i mocniejsze akcenty.
   ═════════════════════════════════════════════════════════════ */

:root:not([data-theme="dark"]) {
  --shadow: 0 1px 2px rgb(60 50 30 / 0.06), 0 14px 30px -18px rgb(60 50 30 / 0.35);
}

/* Sekcje na przemian: biała i barwiona. Rytm prowadzi wzrok w dół. */
:root:not([data-theme="dark"]) .section-contrast {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--teal) 6%, var(--surface)), var(--surface));
}

:root:not([data-theme="dark"]) .page-head {
  background:
    radial-gradient(30rem 20rem at 85% 0%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 65%),
    var(--surface);
}

/* Karty: kolorowy pasek u góry, inny co trzecią. Bez niego siatka
   sześciu białych prostokątów wygląda jak tabela. */
:root:not([data-theme="dark"]) .numbered li {
  border-top: 3px solid var(--signal);
}

:root:not([data-theme="dark"]) .numbered li:nth-child(3n + 2) { border-top-color: var(--teal); }
:root:not([data-theme="dark"]) .numbered li:nth-child(3n) { border-top-color: var(--ember); }

:root:not([data-theme="dark"]) .purchase { border-top: 3px solid var(--teal); }

:root:not([data-theme="dark"]) .contact-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 9%, var(--surface)), var(--surface));
}

:root:not([data-theme="dark"]) .contact-card:nth-child(2) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 9%, var(--surface)), var(--surface));
}

:root:not([data-theme="dark"]) .contact-card:nth-child(3) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ember) 9%, var(--surface)), var(--surface));
}

/* Kroki procesu: numer w kółku zamiast samej cyfry nad kreską. */
:root:not([data-theme="dark"]) .steps li {
  border-top-width: 3px;
  border-image: linear-gradient(to right, var(--signal), var(--teal)) 1;
}

/* Pigułki i kafle dostają cieplejsze tło, żeby nie ginęły na białym. */
:root:not([data-theme="dark"]) .pill span,
:root:not([data-theme="dark"]) .tile-body,
:root:not([data-theme="dark"]) .city-list a {
  background: var(--surface-2);
}

:root:not([data-theme="dark"]) .field input,
:root:not([data-theme="dark"]) .field select,
:root:not([data-theme="dark"]) .field textarea {
  background: var(--surface-2);
}

/* Nagłówek strony: cienka linia w barwach marki pod spodem. */
:root:not([data-theme="dark"]) .site-header {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--signal) 45%, transparent);
}

:root:not([data-theme="dark"]) .figure-value {
  background: linear-gradient(120deg, var(--ink), var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
}

:root:not([data-theme="dark"]) .form-band {
  background:
    radial-gradient(40rem 26rem at 50% 0%, color-mix(in srgb, var(--signal) 22%, transparent), transparent 62%),
    radial-gradient(30rem 22rem at 90% 90%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 60%),
    var(--paper-2);
}

/* Pole na model spoza listy — pokazuje się po wybraniu "Inny model". */
.model-other {
  margin-top: 0.5rem;
}

/* Ikony w kaflach stanu technicznego. Kreska dziedziczy kolor tekstu,
   więc kafel zaznaczony podświetla też ikonę. */
.tile-icon {
  display: block;
  margin-bottom: 0.55rem;
  flex: none;
  color: var(--ink-mute);
  transition: color 0.14s ease, transform 0.14s ease;
}

.tile-body:hover .tile-icon { transform: translateY(-2px); }

.tile input:checked + .tile-body .tile-icon { color: var(--signal-deep); }
[data-theme="dark"] .tile input:checked + .tile-body .tile-icon { color: var(--signal); }

/* Numer bloku był za mały, żeby go odczytać — powiększony i z mocniejszym
   kontrastem. */
.quote-step {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 35%, transparent);
}

[data-theme="dark"] .quote-step {
  background: color-mix(in srgb, var(--signal) 16%, transparent);
  color: var(--signal);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 45%, transparent);
}

/* ═════════════════════════════════════════════════════════════
   TELEFON — PRZEGLĄD CAŁOŚCI

   Większość ruchu przyjdzie z telefonu, więc to nie jest wersja
   „też obsługiwana", tylko podstawowa. Poniżej korekty, które
   wychodzą dopiero na wąskim ekranie.
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  /* Nagłówek strony był za wysoki — zjadał pierwszy ekran. */
  h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.06; }
  h2 { font-size: clamp(1.6rem, 6.5vw, 2rem); }

  .hero .hazard-strip { margin-bottom: 1.5rem; }
  .hero-grid { gap: 1.75rem; padding-bottom: 2rem; }
  .hero-lead { font-size: 1rem; }

  /* Przyciski w hero na pełną szerokość — kciukiem trudno trafić
     w wąski przycisk przy krawędzi. */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }

  .trust-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
  }

  .trust-row div {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }

  .trust-row b { font-size: 0.98rem; }

  /* Ilustracja auta zabierała pół ekranu, nie niosąc treści. */
  .hero-art { margin-top: 1.25rem; }
  .hero-art svg { max-height: 130px; }

  .section { padding-block: 2.75rem; }
  .section-lead { font-size: 1rem; }

  /* Formularz: mniej marginesu, więcej miejsca na treść. */
  .quote { padding: 1rem; border-radius: 10px; }
  .quote-title { font-size: 1.35rem; }
  .quote-block { margin-bottom: 1.75rem; }
  .quote-block legend { font-size: 1rem; }
  .quote-step { width: 30px; height: 30px; font-size: 0.75rem; }

  /* Kafle stanu jeden pod drugim — trzy w rzędzie były nieczytelne. */
  .tiles { grid-template-columns: 1fr; }
  .tile-body { flex-direction: row; align-items: flex-start; gap: 0.85rem; }
  .tile-icon { margin-bottom: 0; }
  .tile-body small { margin-top: 0.15rem; padding-top: 0; }
  .tile-body > span { flex: 1; }

  /* Pola formularza: 16 px to próg, poniżej którego iPhone
     samoczynnie przybliża stronę przy kliknięciu w pole. */
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
    padding: 0.9rem 1rem;
  }

  .field-row { gap: 0.5rem; }
  .pills { gap: 0.5rem; }
  .pill span { padding: 0.7rem 1.1rem; font-size: 0.92rem; }

  .consent { font-size: 0.88rem; }
  .btn-lg { min-height: 56px; }

  /* Numerowane karty: numer nie może nachodzić na nagłówek. */
  .numbered li { padding: 1.25rem 1.1rem; }
  .numbered li::before { font-size: 2rem; top: 0.35rem; right: 0.75rem; }
  .numbered h3 { padding-right: 2.5rem; font-size: 1.05rem; }

  .figures { gap: 1.25rem; }
  .figure-value { font-size: 2.1rem; }

  .steps { gap: 1.25rem; }
  .steps li { padding-top: 1rem; }

  .purchase-grid { gap: 1rem; }

  .faq summary { padding: 1rem 0; font-size: 0.98rem; }
  .faq p { font-size: 0.95rem; }

  .city-list { gap: 0.4rem; }
  .city-list a { padding: 0.55rem 0.85rem; font-size: 0.9rem; }

  .spec-strip { gap: 0 1.25rem; }
  .spec-strip div { min-width: 78px; }
  .spec-val { font-size: 0.98rem; }

  .cta-band h2 { font-size: 1.5rem; }

  /* Dymek czatu nie może zasłaniać paska z telefonem. */
  .chat { right: 0.75rem; bottom: calc(88px + env(safe-area-inset-bottom)); }
  .chat-toggle { padding: 0.7rem 1rem; font-size: 0.85rem; }
  .chat-panel { max-height: calc(100vh - 14rem); }

  /* Taśma z ofertą przewija się szybciej — na wąskim ekranie
     widać mniej haseł naraz. */
  .ticker-track { animation-duration: 26s; }
  .ticker span { font-size: 0.74rem; gap: 1.75rem; }
}

/* Bardzo wąskie ekrany (iPhone SE i podobne). */
@media (max-width: 380px) {
  .wrap { padding-inline: 1rem; }
  .quote { padding: 0.85rem; }
  .figure-value { font-size: 1.85rem; }
  .footer-phone { font-size: 1.6rem; }
}

/* Telefon w poziomie — niski ekran, hero musi się zmieścić. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-art { display: none; }
  .hero-grid { padding-bottom: 1.5rem; }
}

/* ═════════════════════════════════════════════════════════════
   NACISK NA SZYBKI KONTAKT

   Strona ma jedno zadanie: doprowadzić do telefonu albo do wysłania
   formularza. Poniżej elementy, które temu służą — przycisk z numerem
   przy każdym wezwaniu do działania i wyraźniejszy asystent.
   ═════════════════════════════════════════════════════════════ */

/* Przycisk telefonu z godzinami — sam numer bez kontekstu nie mówi,
   czy ktoś odbierze o 20:00. */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.5rem 1.4rem 0.5rem 1.1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.btn-call:hover {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  transform: translateY(-1px);
}

.btn-call b {
  display: block;
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.btn-call small {
  display: block;
  font-size: 0.74rem;
  color: var(--ink-mute);
}

/* Słuchawka rysowana obwódką, z delikatnym pulsem — sygnalizuje,
   że ktoś naprawdę odbiera. */
.btn-call-icon {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 16%, transparent);
}

.btn-call-icon::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid var(--teal-deep);
  border-radius: 3px 8px 3px 8px;
  border-left-width: 4px;
}

.btn-call-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--teal);
  animation: call-ring 2.6s ease-out infinite;
}

@keyframes call-ring {
  0% { transform: scale(1); opacity: 0.65; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

/* ── Wariant 2 strony głównej ─────────────────────────────── */

.hero-v2 .hero-v2-top { max-width: 44rem; }

.hero-v2-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.hero-steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

.hero-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  border-radius: 10px;
}

.hero-steps li:nth-child(2) { border-left-color: var(--teal); }
.hero-steps li:nth-child(3) { border-left-color: var(--ember); }

.hero-step-num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper-2);
  font-family: var(--mono);
  font-weight: 600;
}

.hero-steps b { letter-spacing: -0.02em; }

.hero-steps small {
  color: var(--ink-mute);
  font-size: 0.83rem;
}

.hero-call {
  padding: 1.5rem;
  text-align: center;
  border-top: 3px solid var(--signal);
}

.hero-call-number {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--mono);
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
  color: var(--ink);
}

.hero-call-hours {
  margin: 0 0 1.25rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.hero-call .btn { width: 100%; }

.hero-call-list {
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  text-align: left;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.hero-call-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
}

.hero-call-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--teal);
}

.hero-v2 .hero-art { max-width: 620px; margin-inline: auto; }

@media (min-width: 860px) {
  .hero-v2-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}

/* ── Asystent bardziej widoczny ───────────────────────────── */

.chat-toggle {
  padding: 0.85rem 1.35rem;
  font-size: 0.95rem;
  box-shadow: 0 12px 30px -12px rgb(14 26 32 / 0.85);
}

/* Pierścień pulsujący wokół dymka — zwraca uwagę bez migania. */
.chat-toggle::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--signal);
  opacity: 0;
  animation: chat-ring 3.2s ease-out infinite;
  pointer-events: none;
}

.chat-toggle { position: relative; }

@keyframes chat-ring {
  0% { transform: scale(0.96); opacity: 0.8; }
  60%, 100% { transform: scale(1.16); opacity: 0; }
}

.chat-toggle-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--signal);
  color: var(--ink);
}

/* Zaczepka pojawiająca się raz na sesję — pytanie zamiast zaproszenia,
   bo na pytanie łatwiej odpowiedzieć niż zacząć rozmowę od zera. */
.chat-teaser {
  position: relative;
  max-width: 250px;
  padding: 0.85rem 2rem 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px 14px 4px 14px;
  box-shadow: var(--shadow);
  font-size: var(--step--1);
  line-height: 1.45;
  animation: teaser-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chat-teaser b { display: block; margin-bottom: 0.15rem; }
.chat-teaser span { color: var(--ink-mute); }

.chat-teaser-close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  border: 0;
  background: none;
  color: var(--ink-mute);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem;
}

@keyframes teaser-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.chat.is-open .chat-teaser { display: none; }

@media (prefers-reduced-motion: reduce) {
  .chat-toggle::after,
  .btn-call-icon::after { animation: none; }
}

@media (max-width: 639px) {
  .btn-call { width: 100%; justify-content: center; }
  .hero-call-number { font-size: 2rem; }
  .chat-teaser { max-width: 210px; font-size: 0.82rem; }
}

/* ── Czat na telefonie: pełny ekran ───────────────────────────
   Okno przyklejone do rogu mieściło cztery wiadomości i chowało
   pole tekstowe pod klawiaturą. Na wąskim ekranie rozmowa zajmuje
   więc całą powierzchnię, jak w komunikatorze. */

@media (max-width: 639px) {
  .chat { right: 0.7rem; bottom: calc(88px + env(safe-area-inset-bottom)); }

  .chat-toggle {
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    gap: 0.55rem;
  }

  .chat-avatar { width: 38px; height: 38px; }
  .chat-toggle-text b { font-size: 0.88rem; }
  .chat-toggle-text small { font-size: 0.68rem; }

  .chat.is-open {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
  }

  /* Strona pod czatem nie może się przewijać razem z rozmową. */
  body:has(.chat.is-open) { overflow: hidden; }

  .chat.is-open .chat-panel {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    /* dvh, nie vh — pasek adresu w przeglądarce mobilnej zmienia wysokość
       okna, a przy vh dolna część czatu chowa się pod nim. */
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .chat-head {
    border-radius: 0;
    padding: 0.85rem 1rem calc(0.85rem);
    padding-top: calc(0.85rem + env(safe-area-inset-top));
  }

  .chat-close { font-size: 1.9rem; padding: 0 0.5rem; }

  .chat-log {
    padding: 1rem 0.9rem;
    gap: 0.7rem;
  }

  .chat-msg { max-width: 88%; font-size: 0.95rem; }

  /* Pasek wysyłki zawsze widoczny nad klawiaturą. */
  .chat-form {
    padding: 0.7rem 0.75rem calc(0.7rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  .chat-form input {
    font-size: 16px;
    padding: 0.8rem 0.9rem;
  }

  .chat-legal {
    padding: 0 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
    font-size: 0.64rem;
  }

  /* Zaczepka nie może zasłaniać treści strony. */
  .chat-teaser { max-width: 200px; padding: 0.7rem 1.7rem 0.7rem 0.85rem; }
}

/* Telefon w poziomie: klawiatura zjada połowę ekranu, więc stopka
   informacyjna znika, żeby zostało miejsce na rozmowę. */
@media (max-height: 520px) and (max-width: 900px) {
  .chat.is-open .chat-legal { display: none; }
}

/* ── Auta w tle sekcji ────────────────────────────────────────
   Powtarzalny wzór z sylwetką auta, ledwie widoczny. Wypełnia
   puste płaszczyzny bez dokładania obrazów do pobrania — cały
   wzór to jeden adres danych o długości kilkuset znaków. */

.cta-band,
.form-band {
  position: relative;
  isolation: isolate;
}

.cta-band::after,
.form-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='120' viewBox='0 0 210 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 70v-9l5-1.5 7-13c1-2 2.5-3 4.5-3h33c2.5 0 5 1 6.5 3l11 11 24 4c2.5.5 4 2.5 4 5v9'/%3E%3Ccircle cx='45' cy='70' r='7'/%3E%3Ccircle cx='105' cy='70' r='7'/%3E%3Cpath d='M20 70h100'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 210px 120px;
  opacity: 0.05;
}

.form-band::after {
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='120' viewBox='0 0 210 120'%3E%3Cg fill='none' stroke='%230e1a20' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 70v-9l5-1.5 7-13c1-2 2.5-3 4.5-3h33c2.5 0 5 1 6.5 3l11 11 24 4c2.5.5 4 2.5 4 5v9'/%3E%3Ccircle cx='45' cy='70' r='7'/%3E%3Ccircle cx='105' cy='70' r='7'/%3E%3Cpath d='M20 70h100'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: radial-gradient(70% 70% at 50% 45%, transparent 35%, #000 90%);
}

[data-theme="dark"] .form-band::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='120' viewBox='0 0 210 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 70v-9l5-1.5 7-13c1-2 2.5-3 4.5-3h33c2.5 0 5 1 6.5 3l11 11 24 4c2.5.5 4 2.5 4 5v9'/%3E%3Ccircle cx='45' cy='70' r='7'/%3E%3Ccircle cx='105' cy='70' r='7'/%3E%3Cpath d='M20 70h100'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.06;
}

/* Podpis wykonawcy w stopce — obok noty prawnej, nie pod nią,
   żeby nie wydłużać stopki o kolejny wiersz. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.footer-legal p { margin: 0; }
.footer-legal > p:first-child { max-width: 78ch; }

.footer-author { white-space: nowrap; }

.footer-author a {
  color: var(--on-dark-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-author a:hover { color: var(--signal); }

@media (max-width: 639px) {
  .footer-legal { flex-direction: column; }
}

/* ── Skrót do asystenta nad formularzem ───────────────────────
   Dla części osób napisanie dwóch zdań jest łatwiejsze niż wypełnienie
   nawet krótkiego formularza. Ten przycisk daje im drogę na skróty
   zamiast zamykania strony. */

.quote-shortcut {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--teal);
  border-radius: 12px;
  background: color-mix(in srgb, var(--teal) 9%, var(--surface));
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.quote-shortcut:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--teal) 15%, var(--surface));
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--teal) 80%, transparent);
}

.quote-shortcut-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
}

.quote-shortcut-text { flex: 1; }

.quote-shortcut-text b {
  display: block;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.quote-shortcut-text small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
}

.quote-shortcut-arrow {
  flex: none;
  font-size: 1.2rem;
  color: var(--teal-deep);
  transition: transform 0.15s ease;
}

.quote-shortcut:hover .quote-shortcut-arrow { transform: translateX(4px); }

/* Rozdzielenie dwóch dróg — bez tego przycisk czatu wygląda jak
   część formularza. */
.quote-or {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
}

.quote-or::before,
.quote-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── Szczegóły opcjonalne ─────────────────────────────────── */

.quote-more {
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.quote-more summary {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}

.quote-more summary::-webkit-details-marker { display: none; }

.quote-more summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 1.35rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.quote-more[open] summary::after { transform: rotate(-135deg); }

.quote-more summary b { letter-spacing: -0.02em; }

.quote-more summary small {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
}

.quote-more-body {
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}

.quote-more-body .field:last-child { margin-bottom: 0; }

@media (max-width: 639px) {
  .quote-shortcut { padding: 0.8rem 0.9rem; gap: 0.7rem; }
  .quote-shortcut-icon { width: 38px; height: 38px; }
  .quote-shortcut-text b { font-size: 0.92rem; }
  .quote-shortcut-text small { font-size: 0.74rem; }
}

/* Dwie drogi kontaktu na stronie wyceny — telefon i asystent.
   Postawione nad formularzem, bo dla części osób formularz jest
   przeszkodą, a nie ułatwieniem. */
.quote-ways {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.quote-way {
  display: block;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.quote-way:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.quote-way-label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.quote-way b {
  display: block;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.quote-way small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--ink-mute);
}

.quote-way-call {
  border-color: var(--signal);
  background: color-mix(in srgb, var(--signal) 12%, var(--surface));
}

.quote-way-call b { font-family: var(--mono); }
.quote-way-call:hover { border-color: var(--signal-deep); }

.quote-way-chat {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, var(--surface));
}

.quote-way-chat:hover { border-color: var(--teal-deep); }

@media (min-width: 640px) {
  .quote-ways { grid-template-columns: 1fr 1fr; }
}

/* ── Pas z sylwetkami aut ─────────────────────────────────────
   Pięć różnych nadwozi na dole hero. Mówi wprost, że kupujemy
   każdy typ samochodu, a nie tylko ten z ilustracji. Rysowane
   w SVG, więc nie kosztuje ani jednego pobrania. */

.car-row {
  position: relative;
  margin-top: -1rem;
  color: var(--ink);
  opacity: 0.13;
  pointer-events: none;
  overflow: hidden;
}

.car-row svg {
  display: block;
  width: 100%;
  min-width: 900px;
  height: auto;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

[data-theme="dark"] .car-row { opacity: 0.16; }

/* W pasie CTA auta stoją na ciemnym tle, więc rysujemy je jasnym. */
.cta-band .car-row { color: var(--on-dark); opacity: 0.12; }

@media (max-width: 639px) {
  .car-row { margin-top: -0.5rem; opacity: 0.11; }
  .car-row svg { min-width: 620px; }
}

/* Wzór w tle sekcji — gęstszy i wyraźniejszy niż poprzednio. */
.cta-band::after { opacity: 0.09; background-size: 170px 100px; }
.form-band::after { opacity: 0.08; background-size: 170px 100px; }
[data-theme="dark"] .form-band::after { opacity: 0.1; }

/* ═════════════════════════════════════════════════════════════
   WYDAJNOŚĆ NA TELEFONIE

   Efekty, które na komputerze kosztują ułamek milisekundy, na starszym
   telefonie potrafią zacinać przewijanie i przechodzenie między stronami.
   Poniżej wyłączamy te najdroższe i włączamy je dopiero tam, gdzie jest
   moc obliczeniowa.
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
  /* Trzy rozmyte plamy o średnicy 30 rem to trzy duże warstwy do złożenia
     przy każdej klatce. Zastępujemy je statycznym gradientem — wygląda
     podobnie, kosztuje zero. */
  .aurora span { display: none; }

  .aurora {
    background:
      radial-gradient(30rem 22rem at 15% 0%, var(--glow-1), transparent 60%),
      radial-gradient(26rem 20rem at 90% 30%, var(--glow-2), transparent 58%);
  }

  /* Rozmycie tła pod nagłówkiem wymusza przeliczenie każdego piksela
     pod paskiem przy każdym przewinięciu. */
  .site-header {
    backdrop-filter: none;
    background: var(--paper);
  }

  .sticky-bar {
    backdrop-filter: none;
    background: var(--surface);
  }

  /* Ujawnianie sekcji przy przewijaniu zostawiamy, ale bez przesunięcia —
     sam zanik jest znacznie tańszy niż zanik z ruchem. */
  @supports (animation-timeline: view()) {
    @keyframes reveal-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  }

  /* Cienie pod kartami przy dziesiątkach elementów na stronie miejscowości
     sumują się w zauważalny koszt. */
  .numbered li,
  .purchase,
  .city-list a {
    box-shadow: none;
  }
}

/* Efekty kosztowne włączamy dopiero na szerokich ekranach. */
@media (min-width: 900px) {
  body { background-attachment: fixed; }
}

/* ═════════════════════════════════════════════════════════════
   ARTYKUŁ W PORADNIKU

   Tekst do czytania rządzi się innymi prawami niż strona sprzedażowa:
   węższa kolumna, większy odstęp między wierszami, wyraźna hierarchia
   nagłówków. Wcześniej artykuł dziedziczył style stron lokalnych,
   które są robione pod skanowanie wzrokiem, nie pod czytanie.
   ═════════════════════════════════════════════════════════════ */

.post-head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(34rem 22rem at 80% 0%, var(--glow-1), transparent 62%),
    var(--surface);
  border-bottom: 1px solid var(--line);
}

.post-head h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.08;
  margin-bottom: 0.75rem;
}

.post-lead {
  max-width: 58ch;
  margin-bottom: 1.25rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-mute);
}

.post-meta time { font-weight: 600; color: var(--ink-soft); }

/* ── Treść ─────────────────────────────────────────────────── */

.post-body {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  /* 65 znaków w wierszu to szerokość, przy której oko najłatwiej
     trafia z końca wiersza na początek następnego. */
  max-width: 68ch;
}

.post-body p {
  margin-bottom: 1.35rem;
  font-size: clamp(1.02rem, 1rem + 0.2vw, 1.12rem);
  line-height: 1.75;
  color: var(--ink-soft);
}

/* Pierwszy akapit większy — wprowadza w tekst. */
.post-body > p:first-child {
  font-size: clamp(1.1rem, 1.05rem + 0.35vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink);
}

.post-body h2 {
  margin: 2.75rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--line);
  font-size: clamp(1.35rem, 1.2rem + 0.9vw, 1.75rem);
  line-height: 1.2;
}

/* Żółty znacznik przy nagłówku — prowadzi wzrok przy przewijaniu. */
.post-body h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-bottom: 0.85rem;
  border-radius: 2px;
  background: var(--signal);
}

.post-body h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.15rem;
}

.post-body ul {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem;
  list-style: none;
  background: var(--surface-2);
  border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0;
}

.post-body li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 1.5rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.post-body li:last-child { margin-bottom: 0; }

.post-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

/* ── Wezwanie w treści ────────────────────────────────────── */

.post-cta {
  margin-top: 3rem;
  padding: 1.6rem;
  background: linear-gradient(160deg, var(--dark-bg), var(--dark-bg-2));
  border-radius: var(--radius);
  color: var(--on-dark);
}

.post-cta p { color: var(--on-dark-soft); margin-bottom: 1.1rem; }
.post-cta p b { color: var(--on-dark); }
.post-cta .eyebrow { color: var(--signal); margin-bottom: 0.4rem; }

.post-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.post-cta .btn-ghost {
  color: var(--on-dark);
  border-color: color-mix(in srgb, var(--on-dark) 35%, transparent);
}

/* ── Powiązane artykuły ───────────────────────────────────── */

.post-related {
  display: grid;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.post-related a {
  display: block;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  border-radius: 0 10px 10px 0;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.post-related a:hover {
  transform: translateX(3px);
  border-color: var(--line-strong);
  border-left-color: var(--teal);
}

.post-related b {
  display: block;
  letter-spacing: -0.02em;
}

.post-related span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* ── Lista artykułów ──────────────────────────────────────── */

.post-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2rem;
}

.post-card {
  overflow: hidden;
  border-top: 3px solid var(--signal);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.post-card:nth-child(3n + 2) { border-top-color: var(--teal); }
.post-card:nth-child(3n) { border-top-color: var(--ember); }

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgb(14 26 32 / 0.05), 0 20px 40px -24px rgb(14 26 32 / 0.5);
}

.post-card-body { padding: 1.35rem; }

.post-card h2 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.post-card h2 a { text-decoration: none; }

.post-card p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-mute);
}

.post-card .plate { margin-bottom: 0.85rem; }

@media (max-width: 639px) {
  .post-body { padding-block: 1.75rem; }
  .post-body h2 { margin-top: 2rem; padding-top: 1.25rem; }
  .post-cta { padding: 1.25rem; margin-top: 2rem; }
  .post-cta-actions .btn { flex: 1; }
}

/* ═════════════════════════════════════════════════════════════
   ZDJĘCIA W TLE

   Pojawiają się tylko wtedy, gdy pliki zostały wgrane — bez nich
   sekcje wyglądają jak dotąd. Zdjęcie zawsze pod przyciemnieniem,
   bo tekst musi pozostać czytelny niezależnie od tego, jak jasne
   jest konkretne ujęcie.
   ═════════════════════════════════════════════════════════════ */

.hero-photo,
.band-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-photo img,
.band-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* Warstwa przyciemniająca. Gradient, nie jednolita płachta —
   po lewej, gdzie stoi nagłówek, jest gęściej. */
.hero.has-photo::after,
.form-band.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero.has-photo::after {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--surface) 96%, transparent) 0%,
    color-mix(in srgb, var(--surface) 88%, transparent) 42%,
    color-mix(in srgb, var(--surface) 55%, transparent) 100%
  );
}

[data-theme="dark"] .hero.has-photo::after {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--paper) 95%, transparent) 0%,
    color-mix(in srgb, var(--paper) 86%, transparent) 42%,
    color-mix(in srgb, var(--paper) 55%, transparent) 100%
  );
}

.hero.has-photo > .wrap,
.hero.has-photo > .hazard-strip,
.hero.has-photo > .car-row {
  position: relative;
  z-index: 2;
}

/* Siatka rysunku technicznego przy zdjęciu byłaby szumem. */
.hero.has-photo::before { opacity: 0.25; }

/* Pas z formularzem: zdjęcie mocniej przyciemnione, bo pod spodem
   leży formularz, w którym trzeba czytać etykiety pól. */
.form-band.has-photo::after {
  background: color-mix(in srgb, var(--paper-2) 92%, transparent);
}

[data-theme="dark"] .form-band.has-photo::after {
  background: color-mix(in srgb, var(--paper) 93%, transparent);
}

.form-band.has-photo > .form-band-inner,
.form-band.has-photo > .form-deco,
.form-band.has-photo > .form-band-grid {
  position: relative;
  z-index: 2;
}

/* Na telefonie zdjęcie schodzi niżej: pierwszy ekran ma należeć
   do nagłówka i przycisków, nie do fotografii. */
@media (max-width: 639px) {
  .hero.has-photo::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 94%, transparent) 0%,
      color-mix(in srgb, var(--surface) 90%, transparent) 60%,
      color-mix(in srgb, var(--surface) 70%, transparent) 100%
    );
  }

  [data-theme="dark"] .hero.has-photo::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--paper) 94%, transparent) 0%,
      color-mix(in srgb, var(--paper) 90%, transparent) 60%,
      color-mix(in srgb, var(--paper) 68%, transparent) 100%
    );
  }
}

/* ── Opinie klientów ──────────────────────────────────────── */

.reviews {
  /* Siatka zostawiała czwartą opinię samotnie przy lewej krawędzi.
     Układ elastyczny domyka wiersz środkiem, więc niepełny rząd
     wygląda celowo, a nie jak brakująca kolumna. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.review {
  display: flex;
  flex-direction: column;
  flex: 1 1 280px;
  max-width: 420px;
  margin: 0;
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.review-stars {
  margin-bottom: 0.75rem;
  color: var(--signal);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
}

.review blockquote {
  flex: 1;
  margin: 0 0 1rem;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-soft);
}

.review blockquote::before { content: "„"; }
.review blockquote::after { content: "”"; }

.review figcaption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}

.review figcaption b { letter-spacing: -0.02em; }
.review figcaption span { color: var(--ink-mute); }

.review figcaption i {
  margin-left: auto;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Pasek zaufania nad opiniami — cztery obietnice, które klienci
   powtarzają najczęściej w samych opiniach. */
.reviews-section .promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.25rem 0;
  border-block: 1px solid var(--line);
  text-align: center;
}

.promise b {
  display: block;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.promise span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

/* ═════════════════════════════════════════════════════════════
   TELEFON

   Numer jest najważniejszym elementem tej strony — większość klientów
   skupu aut dzwoni, zamiast wypełniać formularz. Wszędzie, gdzie się
   pojawia, ma być czytelny z odległości ręki, nie szukany wzrokiem.
   ═════════════════════════════════════════════════════════════ */

.call-band {
  background: linear-gradient(120deg, var(--signal) 0%, var(--signal-hi) 100%);
  color: var(--ink);
  border-block: 1px solid var(--signal-deep);
}

.call-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-block: clamp(1.25rem, 3vw, 1.85rem);
}

.call-band-label {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.call-band-sub {
  margin: 0.2rem 0 0;
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.call-band-number {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  background: var(--ink);
  color: var(--signal);
  font-family: var(--mono);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgb(14 26 32 / 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.call-band-number:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgb(14 26 32 / 0.75);
}

.call-band-icon {
  display: grid;
  place-items: center;
  flex: none;
}

/* Numer w nagłówku: przycisk, nie zwykły odnośnik. */
.header-phone {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 0.14s ease, background-color 0.14s ease;
}

.header-phone::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0f9b4a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #0f9b4a 25%, transparent);
}

.header-phone:hover {
  transform: translateY(-1px);
  background: var(--signal-hi);
}

/* Pasek na dole telefonu — połowa ekranu na numer. */
.sticky-bar .btn-call-mobile {
  background: var(--signal);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.footer-phone { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.4rem); }

@media (min-width: 900px) {
  .header-phone { display: inline-flex; }
}

@media (max-width: 639px) {
  .call-band-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .call-band-number { justify-content: center; font-size: 1.75rem; }
}

.btn-call-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.sticky-icon { display: grid; place-items: center; }

/* ── Pas z telefonem w ciemnym motywie ────────────────────────
   Pełna żółć na ciemnym tle razi w oczy i wygląda jak ostrzeżenie
   systemowe. Zamiast niej ciemne tło z żółtą krawędzią i numerem —
   ten sam nacisk, inny sposób. */

[data-theme="dark"] .call-band {
  background:
    radial-gradient(40rem 20rem at 20% 0%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 65%),
    linear-gradient(120deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%);
  color: var(--on-dark);
  border-block-color: color-mix(in srgb, var(--signal) 40%, transparent);
  border-top-width: 2px;
}

[data-theme="dark"] .call-band-label { color: var(--on-dark); }
[data-theme="dark"] .call-band-sub { color: var(--on-dark-mute); }

[data-theme="dark"] .call-band-number {
  background: var(--signal);
  color: #131b1e;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--signal) 60%, transparent);
}

[data-theme="dark"] .call-band-number:hover {
  background: var(--signal-hi);
}

/* ── Daty i odnośniki w poradniku ─────────────────────────────
   Data w formacie 25.08.2026 wygląda jak numer faktury. Zapis słowny
   czyta się jak zdanie i lepiej pasuje do tekstu. */

.post-date {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
}

.post-date::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
}

/* Odnośnik „czytaj" jako strzałka z podkreśleniem rysowanym gradientem,
   nie systemowym podkreśleniem, które przy cienkiej czcionce ginie. */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-bottom: 2px;
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: background-size 0.25s ease, gap 0.15s ease;
}

.read-more::after { content: "→"; }

.read-more:hover {
  gap: 0.6rem;
  background-size: 100% 100%;
  background-image: linear-gradient(to right,
    color-mix(in srgb, var(--signal) 35%, transparent),
    color-mix(in srgb, var(--signal) 35%, transparent));
}

.post-card .read-more { margin-top: 0.9rem; }