/* ==========================================================================
   Najpierw Strona — arkusz strony sprzedażowej

   Baza jest achromatyczna: czerń, biel, szarości. Akcent ma dokładnie jednego
   właściciela — przycisk główny. Kiedy trzy rzeczy walczą o bycie
   najgłośniejszą, żadna nią nie jest, więc wszystko inne podnosi się
   odstępem, białą kartą i cieniem, nie kolorem.
   ========================================================================== */

:root {
  /* Kolory */
  --color-ink: #101010;
  --color-white: #ffffff;
  --color-paper: #f4f4f4;
  --color-graphite: #242424;
  --color-silver: #e5e7eb;

  /* Szarości tekstu trzymają próg 4.5:1 na papierze, nie tylko na bieli.
     Papier jest ciemniejszym tłem, więc to on wyznacza próg. */
  --color-slate: #626974;   /* 5.5:1 biel · 5.0:1 papier */
  --color-stone: #6e6e6e;   /* 5.1:1 biel · 4.6:1 papier */
  --color-mute: #c9ccd1;    /* wyłącznie dekoracja, nigdy tekst */

  /* Akcent. Jeden kolor, jedno miejsce: przycisk główny.
     Action Blue #0099ff daje z bielą 3.0:1, czyli za mało na tekst na
     przycisku. Ta wersja trzyma 5.6:1. */
  --color-accent: #0b63d6;
  --color-accent-dark: #0a55b8;

  /* Pasma sekcji. Łuk idzie WARTOŚCIĄ, nie temperaturą: blok problemu siada
     w chłodnej szarości (cofnięty, „tak jest teraz"), bloki rozwiązania
     i dowodu wychodzą na biel (uniesione, jaśniejsze niż papier strony).
     Żadnego beżu — paleta jest szaro-biała z jednym błękitem. */
  --color-band-cool: #eceef1;
  --color-band-lift: #ffffff;

  /* Dwa bardzo jasne błękity. Wash jest jedyną kolorową powierzchnią pod
     tekstem i trzyma 4.58:1 nawet dla najjaśniejszej szarości. Soft nigdy
     nie jest tłem tekstu — idzie pod zaznaczenie i pod tor paska postępu. */
  --color-accent-wash: #eef3fb;
  --color-accent-soft: #dbe6f8;

  --stickybar-height: 64px;

  /* Typografia */
  --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 20px;
  --text-heading-lg: 48px;
  --text-display: 64px;

  --weight-light: 300;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Odstępy */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 112px;
  --card-padding: 24px;
  --topbar-max-width: 1152px;
  --topbar-offset: 8px;

  /* Promienie */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Cienie — tylko dwa. Karta i element unoszący się nad stroną. */
  --shadow-card: rgba(36, 36, 36, 0.05) 0px 4px 8px 0px;
  --shadow-float: rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.08) 0px 12px 28px -6px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-graphite);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  line-height: 1.5;
  letter-spacing: -0.19px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-graphite);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* [hidden] pochodzi z arkusza przeglądarki i przegrywa z każdą autorską
   regułą display. Miejsca na telefon są ukryte właśnie tym atrybutem,
   więc bez tego pusty przycisk zabierałby połowę paska dolnego. */
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

/* Obrys fokusu, karetka i zaznaczenie to powierzchnie, których nikt nie
   projektuje — dlatego niosą akcent. Najtańszy sygnał, że strona została
   zbudowana, a nie złożona. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--spacing-12) var(--spacing-20);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-lg) 0;
  font-size: var(--text-body-sm);
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Powierzchnie przeglądarki
   Zaznaczenie, kursor, pasek przewijania i podkreślenia mają domyślne style
   systemu, które nie należą do żadnego projektu. Ustawiamy je z palety.
   -------------------------------------------------------------------------- */

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

html {
  caret-color: var(--color-accent);
  scrollbar-color: var(--color-mute) var(--color-paper);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-paper); }

::-webkit-scrollbar-thumb {
  background: var(--color-mute);
  border: 3px solid var(--color-paper);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover { background: var(--color-stone); }

/* Podkreślenie nie może przecinać polskich znaków diakrytycznych */
a[href^="mailto:"] {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
a[href^="mailto:"]:hover { color: var(--color-stone); }

/* Cyfry o równej szerokości — ceny mają się zgadzać w pionie między kolumnami */
.plan__price,
.step__num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Typografia
   -------------------------------------------------------------------------- */

.display {
  font-size: clamp(38px, 6.2vw, var(--text-display));
  line-height: 1.1;
  letter-spacing: 0.64px;
}

.heading-lg {
  font-size: clamp(30px, 4.4vw, var(--text-heading-lg));
  line-height: 1.1;
  letter-spacing: 0.48px;
}

.heading-sm {
  font-size: var(--text-heading-sm);
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.lead {
  font-size: var(--text-subheading);
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-inline: var(--spacing-24);
}

.section { padding-block: var(--section-gap); }

.section-head {
  max-width: 640px;
  margin: 0 auto var(--spacing-64);
  text-align: center;
}

.section-head .lead { margin-top: var(--spacing-16); }

/* --------------------------------------------------------------------------
   Przyciski
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

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

.btn--primary {
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-white);
}
.btn--primary:hover { background: #000000; }

.btn--ghost {
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-graphite);
  border: 1px solid var(--color-silver);
}
.btn--ghost:hover { background: var(--color-white); border-color: var(--color-stone); }

.btn--lg { font-size: var(--text-body); padding: 14px var(--spacing-32); }

.btn--header {
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-white);
}
.btn--header:hover { background: #000000; }

/* --------------------------------------------------------------------------
   Nagłówek — pasek pływający, przyklejony 8 px od góry
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: var(--topbar-offset);
  z-index: 100;
  margin-top: var(--topbar-offset);
  padding-inline: var(--spacing-24);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-32);
  width: 100%;
  max-width: var(--topbar-max-width);
  min-height: 62px;
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow 220ms ease;
}

.topbar.is-stuck .topbar__inner { box-shadow: var(--shadow-float); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-subheading);
  letter-spacing: 0.2px;
  color: var(--color-graphite);
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 15px;
  line-height: 1;
  padding-bottom: 1px;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.mainnav__link {
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-lg);
  font-size: var(--text-body-sm);
  letter-spacing: -0.2px;
  color: var(--color-graphite);
  transition: background-color 160ms ease;
}
.mainnav__link:hover { background: var(--color-paper); }

.topbar__actions { margin-left: auto; }

.nav-toggle {
  display: none;
  flex: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-silver);
  background: var(--color-white);
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 16px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--color-graphite);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 160ms ease;
}

.nav-toggle span { position: relative; }
.nav-toggle span::before { content: ""; position: absolute; top: -5px; }
.nav-toggle span::after { content: ""; position: absolute; top: 5px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  width: 100%;
  max-width: var(--topbar-max-width);
  margin: var(--spacing-8) auto 0;
  padding: var(--spacing-8) var(--spacing-20) var(--spacing-20);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-float);
}

.mobile-nav.is-open { display: block; }
.mobile-nav ul { display: grid; gap: var(--spacing-4); }

.mobile-nav a {
  display: block;
  padding: var(--spacing-12) 0;
  border-bottom: 1px solid var(--color-silver);
  font-size: var(--text-body);
}

.mobile-nav .btn { margin-top: var(--spacing-20); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: 80px 96px; }

/* Jedna kolumna, wyśrodkowana. Bez makiety i bez drugiej kolumny —
   pusta ramka obok nagłówka to zmarnowane miejsce, a przestrzeń wokół
   jednego przycisku czyta się jako spokój, nie jako brak treści. */
.hero__single {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

/* Nagłówek ma się łamać na trzy wiersze, nie na cztery — czwarty wiersz
   przy 64 px spycha przycisk poza pierwszy ekran na 13-calowym laptopie. */
.hero__title { text-wrap: balance; }

.hero__title { margin-bottom: var(--spacing-24); }
.hero__title em { font-style: normal; color: var(--color-stone); }

.hero__lead { max-width: 56ch; margin: 0 auto var(--spacing-32); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-24);
}

/* --------------------------------------------------------------------------
   Wiersze treści — nagłówek i tekst kroku w sekcji „Proces".
   Kontenery .rows/.row zniknęły razem z sekcją zakresu usług.
   -------------------------------------------------------------------------- */

.row__title { margin-bottom: var(--spacing-8); font-size: var(--text-heading-sm); line-height: 1.3; letter-spacing: 0.2px; }
.row__text { color: var(--color-slate); }

/* Proces — numer niesie kolejność, więc musi być czytelny */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-32);
}

.step { border-top: 1px solid var(--color-silver); padding-top: var(--spacing-20); }

.step__num {
  display: block;
  margin-bottom: var(--spacing-12);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
}

.step .row__text { font-size: var(--text-body-sm); }

/* --------------------------------------------------------------------------
   Cennik
   -------------------------------------------------------------------------- */

.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-20);
  align-items: stretch;
}

.card {
  padding: var(--card-padding);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.plan { display: flex; flex-direction: column; height: 100%; }

.plan--featured {
  background: var(--color-ink);
  color: var(--color-white);
  box-shadow: var(--shadow-float);
}

.plan--featured .heading-sm,
.plan--featured .plan__price { color: var(--color-white); }
.plan--featured .plan__freq,
.plan--featured .plan__desc { color: rgba(255, 255, 255, 0.66); }
.plan--featured .plan__features li { color: rgba(255, 255, 255, 0.88); }
.plan--featured .plan__divider { background: rgba(255, 255, 255, 0.14); }

.plan__pricerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  margin-top: var(--spacing-16);
}

.plan__price {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: 0.48px;
}

.plan__freq {
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
  color: var(--color-slate);
}

.plan__desc {
  margin-top: var(--spacing-10);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: var(--color-slate);
}

.plan__divider { height: 1px; background: var(--color-silver); margin: var(--spacing-20) 0; }

.plan__features { display: grid; gap: var(--spacing-10); margin-bottom: var(--spacing-24); }

.plan__features li {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: var(--color-graphite);
}

.plan__features li.is-off { color: var(--color-stone); }
.plan--featured .plan__features li.is-off { color: rgba(255, 255, 255, 0.5); }

.plan__cta { margin-top: auto; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 760px; margin: 0 auto; }

.faq__item { border-top: 1px solid var(--color-silver); }
.faq__item:last-child { border-bottom: 1px solid var(--color-silver); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  width: 100%;
  padding: var(--spacing-24) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2px;
  color: var(--color-graphite);
}

.faq__icon {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--color-graphite);
  transform: translate(-50%, -50%);
  transition: transform 220ms ease, opacity 220ms ease;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

/* Rozwijanie przez grid-template-rows — bez animowania wysokości */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; min-height: 0; color: var(--color-slate); }
.faq__a > div > p { padding-bottom: var(--spacing-24); max-width: 64ch; }

@media (prefers-reduced-motion: reduce) {
  .faq__a { transition: none; }
}

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--spacing-64);
  align-items: start;
}

.contact__aside .lead { margin-top: var(--spacing-20); }

.contact__meta {
  margin-top: var(--spacing-32);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  letter-spacing: -0.2px;
  color: var(--color-slate);
}

.form {
  padding: var(--spacing-32);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); }

.field { display: block; margin-bottom: var(--spacing-16); }

.field__label {
  display: block;
  margin-bottom: var(--spacing-6);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
  color: var(--color-graphite);
}

.input {
  width: 100%;
  padding: var(--spacing-10) var(--spacing-12);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light);
  letter-spacing: -0.2px;
  color: var(--color-graphite);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.input::placeholder { color: var(--color-stone); }

.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: rgba(11, 99, 214, 0.14) 0px 0px 0px 3px;
}

/* Błąd — paleta jest monochromatyczna, więc sens musi nieść treść
   komunikatu i obrys, nie kolor. */
.input[aria-invalid="true"] {
  border-color: var(--color-ink);
  border-width: 1.5px;
}

.field__error {
  display: none;
  margin-top: var(--spacing-6);
  font-size: var(--text-caption);
  line-height: 1.4;
  letter-spacing: -0.24px;
  color: var(--color-graphite);
}

.field.has-error .field__error { display: block; }

/* Nawigacja krokami. „Wstecz" jest cichy i po lewej, akcja główna zawsze
   po prawej — kiedy „Wstecz" jest ukryty, margin-left trzyma ją na miejscu. */
.form__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-top: var(--spacing-32);
}

.form__nav [data-next],
.form__nav [data-submit] { margin-left: auto; }

.btn--quiet {
  padding: var(--spacing-12) var(--spacing-20);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-slate);
}
.btn--quiet:hover { background: var(--color-paper); color: var(--color-graphite); }

/* Krok widoczny jest tylko jeden, więc kreska rozdzielająca grupy znika —
   inaczej krok 2 i 3 otwierałyby się linią zawieszoną nad niczym. */
.is-stepped .step-group + .step-group {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Kontener kroku dostaje fokus po przejściu dalej, żeby czytnik ekranu
   przeczytał legendę. Obrysu tu nie ma — niesie go pole niżej. */
.step-group:focus { outline: none; }

.form__status {
  margin-top: var(--spacing-16);
  font-size: var(--text-body-sm);
  letter-spacing: -0.2px;
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   Stopka
   -------------------------------------------------------------------------- */

.footer {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.66);
  padding-block: var(--spacing-40);
  margin-top: var(--section-gap);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-20) var(--spacing-32);
}

.footer__nav { display: flex; flex-wrap: wrap; gap: var(--spacing-24); font-size: var(--text-body-sm); }
.footer__nav a:hover { color: var(--color-white); }
.footer__legal { font-size: var(--text-caption); letter-spacing: -0.24px; }

/* --------------------------------------------------------------------------
   Pasma sekcji i kolumna wąska
   -------------------------------------------------------------------------- */

.band { background: var(--color-white); }
.band--cool { background: var(--color-band-cool); }
.band--lift { background: var(--color-band-lift); }

/* Na chłodnym paśmie --color-stone spada do 4.39:1. Tekst drugorzędny
   bierze tam ciemniejszą szarość, żeby nie zejść poniżej progu. */
.band--cool .lead,
.band--cool .row__text { color: var(--color-slate); }

.container.narrow { max-width: 760px; }

/* Kotwica ceny musi mieć pełny ekran na osiadanie, zanim spadnie pierwsza
   liczba. Cena postawiona tuż pod kotwicą trafia na zimny brzuch i wtedy
   kotwica pracuje przeciwko niej, nie dla niej. */
#zanim-cena {
  display: grid;
  align-items: center;
  min-height: 100svh;
}

/* Kotwice pod przyklejony nagłówek */
section[id] { scroll-margin-top: 84px; }

.narrow .heading-lg { margin-bottom: var(--spacing-24); }

.body-lg {
  font-size: var(--text-subheading);
  line-height: 1.6;
  letter-spacing: -0.2px;
  color: var(--color-graphite);
  max-width: 60ch;
}

.body-lg + .body-lg { margin-top: var(--spacing-20); }

/* --------------------------------------------------------------------------
   Widoczna robota — co dokładnie siedzi pod linkiem z podglądem.
   Lista jest policzona, bo liczba ma podpierać cenę, która przyjdzie niżej.
   -------------------------------------------------------------------------- */

.labour {
  margin-top: var(--spacing-48);
  padding-top: var(--spacing-32);
  border-top: 1px solid var(--color-silver);
}

.labour__title {
  margin-bottom: var(--spacing-20);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-heading-sm);
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.labour__list { counter-reset: labour; display: grid; gap: var(--spacing-16); }

.labour__list li {
  counter-increment: labour;
  position: relative;
  padding-left: 38px;
  color: var(--color-slate);
  line-height: 1.6;
}

.labour__list li::before {
  content: counter(labour);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.labour__list b { font-weight: var(--weight-medium); color: var(--color-graphite); }

/* --------------------------------------------------------------------------
   Przyciski — wariant akcentowy i pełna szerokość
   Jedyne miejsce na stronie, w którym pojawia się kolor akcentu.
   -------------------------------------------------------------------------- */

.btn--cta {
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--cta:hover { background: var(--color-accent-dark); }

.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   Hero — slot na dowód i linia gwarancji
   -------------------------------------------------------------------------- */

.hero__guarantee {
  max-width: 44ch;
  margin: 0 auto var(--spacing-20);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  letter-spacing: -0.2px;
  color: var(--color-slate);
}

/* Druga droga na cennik — link tekstowy, nie drugi przycisk.
   Dwa przyciski nad zgięciem to dwie decyzje. */
.hero__link { font-size: var(--text-body-sm); letter-spacing: -0.2px; }
.hero__link a { color: var(--color-slate); text-decoration: underline; text-underline-offset: 3px; }
.hero__link a:hover { color: var(--color-graphite); }

/* --------------------------------------------------------------------------
   Cennik — plakietka, gwarancja w punkcie zawahania, rama straty
   -------------------------------------------------------------------------- */

.plan__badge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: var(--spacing-16);
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: -0.1px;
}

/* Gwarancja #2 z trzech. Nie stoi obok ceny, tylko pod nią — dwie rzeczy
   w kształcie pieniędzy w jednym kadrze robią cenę głośniejszą.

   Bez kolorowej szarfy z boku. Cały arkusz niesie strukturę włosową kreską
   i odstępem, więc gruby pasek akcentu na jednej krawędzi byłby jedynym
   takim elementem na stronie — wypadał z systemu, a nie wyróżniał się w nim.
   Podnosi ją biała karta na papierze, własny cień i odstęp nad nią.
   Akcent zostaje wyłącznie na przycisku, dzięki czemu ma jednego właściciela. */
.guarantee {
  max-width: 760px;
  margin: var(--spacing-48) auto 0;
  padding: var(--spacing-32);
  border-radius: var(--radius-xl);
  background: var(--color-accent-wash);
  line-height: 1.65;
  color: var(--color-graphite);
}

/* Rama straty celuje w bezczynność, nigdy w ofertę. */
.loss {
  max-width: 620px;
  margin: var(--spacing-24) auto 0;
  font-size: var(--text-body-sm);
  line-height: 1.6;
  letter-spacing: -0.2px;
  color: var(--color-slate);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Kontakt — sufit mocy przerobowej, kwalifikator, potwierdzenie
   -------------------------------------------------------------------------- */

.scarcity {
  margin-top: var(--spacing-24);
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--color-silver);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  letter-spacing: -0.2px;
  color: var(--color-slate);
}

/* Pasek postępu startuje wypełniony, nigdy od zera — ciąg do końca
   jest najsilniejszy blisko kreski. */
.progress { margin-bottom: var(--spacing-32); }

.progress__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  overflow: hidden;
}

/* Wypełnienie skaluje się transformą, nie szerokością: width przelicza
   layout przy każdej klatce, scaleX idzie po kompozytorze. Wartość ustawia
   JS, a atrybut style w HTML trzyma stan startowy dla wyłączonego JS. */
.progress__bar i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.progress__label {
  display: block;
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
  letter-spacing: -0.24px;
  color: var(--color-slate);
}

/* Trzy widoczne grupy zamiast ściany pól — mózg wycenia wysiłek,
   którego się spodziewa, nie ten, który dostaje. */
.step-group { border: 0; margin: 0; padding: 0; min-width: 0; }

.step-group + .step-group {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-32);
  border-top: 1px solid var(--color-silver);
}

.step-group__legend {
  padding: 0;
  margin-bottom: var(--spacing-16);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-stone);
}

.field__opt { font-weight: var(--weight-light); color: var(--color-stone); }

.form__legal {
  margin-top: var(--spacing-16);
  font-size: var(--text-caption);
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-stone);
}

.done {
  padding: var(--spacing-32);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.done p { margin-top: var(--spacing-12); line-height: 1.65; color: var(--color-slate); }

/* --------------------------------------------------------------------------
   Telefon w nagłówku i pasek dolny na telefonie
   Brak numeru na stronie firmy lokalnej sam w sobie jest sygnałem oszustwa.
   -------------------------------------------------------------------------- */

.topbar__phone {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
  color: var(--color-graphite);
  white-space: nowrap;
}
.topbar__phone:hover { color: var(--color-ink); }

.stickybar { display: none; }

/* --------------------------------------------------------------------------
   Stopka
   -------------------------------------------------------------------------- */

.footer__brand {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-subheading);
  letter-spacing: 0.2px;
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Jedno autorskie wejście, na pierwszym ekranie.
   Poza hero nic się nie animuje przy przewijaniu.
   -------------------------------------------------------------------------- */

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

@keyframes settle {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.js .hero__title,
.js .hero__lead,
.js .hero__actions,
.js .hero__guarantee,
.js .hero__link {
  animation: rise 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.js .hero__lead      { animation-delay: 70ms; }
.js .hero__actions   { animation-delay: 140ms; }
.js .hero__guarantee { animation-delay: 200ms; }
.js .hero__link      { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .js .hero__title,
  .js .hero__lead,
  .js .hero__actions,
  .js .hero__guarantee,
  .js .hero__link { animation: none; }

  .progress__bar i,
  .btn,
  a { transition: none; }
}

/* --------------------------------------------------------------------------
   Responsywność
   -------------------------------------------------------------------------- */

@media (max-width: 1060px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-32) var(--spacing-40); }
  .contact { grid-template-columns: 1fr; gap: var(--spacing-32); }
}

@media (max-width: 900px) {
  :root { --section-gap: 80px; }
  .mainnav, .topbar__actions { display: none; }
  .nav-toggle { display: block; }
  .pricing { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --section-gap: 64px; --card-padding: 20px; }
  .container { padding-inline: var(--spacing-20); }
  .topbar { padding-inline: var(--spacing-12); }
  .topbar__inner { padding: var(--spacing-10) var(--spacing-12); min-height: 56px; }
  .hero { padding-block: 48px 64px; }
  .section-head { margin-bottom: var(--spacing-40); }
  .steps { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .form { padding: var(--spacing-20); }
  .form__row { grid-template-columns: 1fr; gap: 0; }

  /* 16 px to próg, poniżej którego iOS sam przybliża stronę przy wejściu
     w pole. Wysokość 44 px to minimalny sensowny cel dla kciuka. */
  .input { font-size: var(--text-body); min-height: 44px; }
  .form__nav { flex-direction: column-reverse; align-items: stretch; }
  .form__nav .btn { width: 100%; }
  .form__nav [data-next],
  .form__nav [data-submit] { margin-left: 0; }
  .hero__actions .btn { width: 100%; }
  .guarantee { padding: var(--spacing-20); }
  .done { padding: var(--spacing-20); }
}

/* --------------------------------------------------------------------------
   Pasek dolny na telefonie (P0.3)
   Dwa przyciski: zadzwoń i darmowy podgląd. Wysokość paska jest odejmowana
   od dołu strony, żeby nie zasłaniał ani jednego pola formularza.
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  body { padding-bottom: calc(var(--stickybar-height) + var(--spacing-8)); }
  html { scroll-padding-bottom: calc(var(--stickybar-height) + var(--spacing-16)); }

  .stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    gap: var(--spacing-8);
    min-height: var(--stickybar-height);
    padding: var(--spacing-10) var(--spacing-12);
    padding-bottom: calc(var(--spacing-10) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow-float);
  }

  .stickybar__call,
  .stickybar__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--spacing-10) var(--spacing-12);
    border-radius: var(--radius-full);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-medium);
    letter-spacing: -0.2px;
    text-align: center;
  }

  .stickybar__call {
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-silver);
    color: var(--color-graphite);
  }

  .stickybar__cta { flex: 1; background: var(--color-accent); color: var(--color-white); }
  .stickybar__call { flex: 1; }
}