/* ==========================================================================
   WIZYTÓWKA  —  warstwa wejściowa (#156, ADR-092).
   ==========================================================================

   Trzecia warstwa prezentacji obok panelu Organizatora i zaproszenia Gościa.
   Wchodzi WYŁĄCZNIE na stronie głównej i wyłącznie PO `app.css` — z którego
   bierze wszystko, co już istnieje: skalę typograficzną, przyciski, karty,
   ikony i cztery kolory palety. Ani jednej wartości barwnej wpisanej wprost;
   ani jednego `font-size` spoza skali `--text-*`.

   CO TEN ARKUSZ DOKŁADA, a czego w warstwie wspólnej nie ma i mieć nie ma:

     * KOMPOZYCJĘ PEŁNOEKRANOWĄ — pasy sekcji na całą szerokość okna, z kolumną
       treści wyśrodkowaną w środku. Panel jest jedną kolumną o stałej
       szerokości i takiej kompozycji nie potrzebuje;
     * CIEŃ. `app.css` zabrania go kartom świadomie („cień na jasnym tle albo
       nie jest widoczny, albo brudzi barwę palety") i ten zakaz zostaje
       w mocy dla panelu. Tutaj cień niesie GŁĘBIĘ makiety i ramek zrzutów,
       czyli jedyną rzecz, która odróżnia „obrazek ekranu" od „ekranu" —
       i jest liczony z `--ink`, więc nie wprowadza barwy spoza palety;
     * RUCH STEROWANY PRZEWIJANIEM. Ta sama mechanika co w warstwie Gościa
       (ADR-040): oś przewijania zamiast obserwatora, `@supports` zamiast
       założeń, stan spoczynkowy zawsze WIDOCZNY.

   STOPIEŃ `--text-display` MA TU TRZECIE UŻYCIE W PROJEKCIE i jest to
   świadome odstępstwo od notatki przy tym tokenie („trzeciego użycia w panelu
   Organizatora nie będzie"). Granica, o którą tam chodzi, przebiega między
   ekranem ROBOCZYM a ekranem, który ma przyciągać: panel ogląda jedna osoba
   przez godziny i nie ma prawa krzyczeć, zaproszenie i wizytówkę ogląda się
   raz i przez chwilę. Wizytówka stoi po tej samej stronie tej granicy co
   zaproszenie — i to jedyny powód, dla którego wolno jej sięgnąć po sufit
   skali. W panelu nadal nie wolno.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Szkielet i rytm strony
   -------------------------------------------------------------------------- */

.landing {
  /* Kolumna treści SZERSZA niż panel (`--panel-width`, 68rem): panel jest
     narzędziem pracy i czyta się go z bliska, wizytówkę ogląda się z odległości
     przeglądania. Wąska kolumna na szerokim ekranie wygląda tu na tymczasową. */
  --landing-width: 72rem;
  /* Kolumna dla sekcji, które są CZYTANE, a nie oglądane (pytania). Bliska
     `--measure`, ale liczona na kontener, nie na akapit. */
  --landing-narrow: 48rem;

  /* Oddech między sekcjami. Płynny, bo różnica między telefonem a monitorem
     jest tu największa ze wszystkich wymiarów na stronie: 3.5rem na 390 px
     to jeszcze oddech, 6rem to już połowa ekranu. */
  --section-y: clamp(3.5rem, 7vw, 6rem);

  /* Charakter ruchu — jedno miejsce dla całej warstwy, tak jak w `guest.css`.
     Bliżej profilu produktowego niż editorialowego: wizytówka ma prowadzić
     wzrok po treści, a nie odbierać jej uwagę. */
  --enter-shift: var(--space-4);
  --enter-dur: 460ms;
  --enter-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --enter-range: 30%;

  /* Cień w barwie atramentu palety, nie czerń. Dwa stopnie: unoszenie karty
     i uniesienie makiety, która ma wyglądać na leżącą NAD stroną. */
  --lift: 0 2px 10px color-mix(in srgb, var(--ink) 10%, transparent);
  --lift-high: 0 24px 60px color-mix(in srgb, var(--ink) 18%, transparent);
}

/* PRZEWIJANIE DO KOTWIC — reguła na `html`, bo to on jest elementem
   przewijanym; postawiona na `.landing` nie robiłaby nic. Wolno jej tu stać
   bez żadnego zawężenia, bo cały ten arkusz wchodzi na JEDNEJ stronie —
   zakres daje wpięcie, nie selektor.

   `scroll-padding-top` jest tu ważniejsze od płynności: bez niego kotwica
   ustawia sekcję pod przyklejonym paskiem, czyli chowa jej nagłówek. Wartość
   z zapasem ponad 4rem paska. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

/* Nadkreślnik sekcji. W panelu jest okruszkiem („Wydarzenia / Wesele") i ma
   być cichy; tutaj otwiera sekcję, więc dostaje akcent i wersaliki — to on
   niesie rytm strony złożonej z dziesięciu pasów. */
.landing .eyebrow {
  color: var(--accent-strong);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Kolumna treści. Nazwa mówi, co robi: trzyma zawartość w środku i odsuwa ją
   od krawędzi telefonu — pas sekcji idzie na pełną szerokość okna, treść nie. */
.landing-shell {
  width: 100%;
  max-width: var(--landing-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.landing-shell--narrow {
  max-width: var(--landing-narrow);
}

.landing-section {
  padding: var(--section-y) 0;
}

/* Pas WYRÓŻNIONY. `--surface-alt` ma w `app.css` dokładnie tę rolę („pasy
   sekcji, nagłówek nawigacji, naprzemienne wiersze tabel — NIGDY wypełnienie
   karty"), więc karty stojące na tym pasie zostają na `--surface-card`
   i odcinają się od niego same, bez ani jednej dodatkowej deklaracji. */
.landing-section--alt {
  background: var(--surface-alt);
}

/* Pas CIEMNY — jeden na całą stronę, przy danych osobowych.

   TOKENY POCHODNE PRZELICZAMY TUTAJ i to jest cała trudność tej reguły.
   Wszystkie pochodne w `app.css` mieszają się KU `--surface-card`, bo zakładają
   jasne tło; na atramencie tekst pomocniczy wyszedłby ciemny na ciemnym,
   a łącze — niewidoczne. Kierunek mieszania odwracamy więc tak samo, jak robi
   to `app.css` dla powierzchni hero: ku `--surface`.

   Udziały są przepisane z reguł źródłowych (84 % dla tekstu pomocniczego,
   28 % dla obramowania), więc rozjazd wizualny między pasem ciemnym a resztą
   strony jest niemożliwy dopóty, dopóki nikt nie zmieni jednej z tych liczb
   w oderwaniu od drugiej. Akcent na atramencie liczymy tak jak `--accent-on-hero`
   w `app.css` — 55 % w stronę jasnego tekstu; przy palecie `slate` daje to
   4.87:1 na tym tle, czyli powyżej progu AA. */
.landing-section--dark {
  background: var(--ink);
  color: var(--surface);
  --muted: color-mix(in srgb, var(--surface) 84%, var(--ink));
  --border: color-mix(in srgb, var(--surface) 28%, var(--ink));
  --accent-strong: color-mix(in srgb, var(--accent) 55%, var(--surface));
  --accent-hover: color-mix(in srgb, var(--accent) 70%, var(--surface));
}

/* Nagłówek sekcji: nadkreślnik, tytuł, jeden akapit wprowadzenia. */
.landing-head {
  max-width: var(--measure);
  margin: 0 0 var(--space-7);
}

.landing-head__title {
  font-size: var(--text-page);
  margin: var(--space-2) 0 var(--space-4);
  overflow-wrap: anywhere;
}

.landing-head__lead {
  color: var(--muted);
  font-size: var(--text-lead);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Pasek górny

   PRZYKLEJONY, bo wizytówka jest długa: akcja („Załóż konto") ma być pod ręką
   także wtedy, gdy ktoś doczytał do pytań. Tło jest półprzezroczyste i dostaje
   rozmycie tam, gdzie przeglądarka je zna — bez tego pasek zasłaniałby treść
   twardą płytą, a z pełnym kryciem tracimy wrażenie warstwy nad stroną.
   -------------------------------------------------------------------------- */

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  border-bottom: 1px solid transparent;
}

@supports (backdrop-filter: blur(1px)) {
  .landing-nav {
    backdrop-filter: blur(10px);
  }
}

.landing-nav__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4rem;
}

.landing-nav__brand {
  color: inherit;
  text-decoration: none;
}

.landing-nav__links {
  display: flex;
  gap: var(--space-5);
  margin-left: auto;
}

.landing-nav__links a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
}

/* Podkreślenie ROŚNIE OD LEWEJ, zamiast pojawiać się w całości. Element
   dekoracyjny, więc pseudoelement — a nie `text-decoration`, której nie da się
   animować w szerokości. */
.landing-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35em;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) ease-out;
}

.landing-nav__links a:hover::after,
.landing-nav__links a:focus-visible::after {
  transform: scaleX(1);
}

.landing-nav__actions {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
}

/* Skróty do sekcji znikają na telefonie — uzasadnienie w `_nav.html`.
   Marginesu `auto` pilnuje wtedy blok akcji, więc pasek nie rozjeżdża się na
   dwa wiersze. */
@media (max-width: 52rem) {
  .landing-nav__links {
    display: none;
  }
}

/* Na telefonie lockup schodzi do progu czytelności (2,5rem, ADR-119) — przy
   44 px zabiera przyciskowi „Załóż konto" miejsce i łamie go na dwa wiersze. */
@media (max-width: 30rem) {
  .landing-nav__actions .btn--ghost {
    display: none;
  }

  .landing-nav__brand .brand__lockup {
    height: 2.5rem;
  }
}

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

.landing-hero {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
}

/* HERO ZAJMUJE PIERWSZY EKRAN W CAŁOŚCI i to jest wymaganie, nie efekt.
   Pierwszy ekran ma nieść obietnicę, jedną akcję i dowód — czyli tytuł,
   przycisk i makietę. Ikony filarów widoczne pod nimi zabierały uwagę
   dokładnie w tym miejscu, w którym ma jej nie dzielić nic.

   `min-height`, a nie `height`: hero MA prawo urosnąć, gdy tytuł złamie się
   na cztery wiersze albo ktoś powiększy pismo w przeglądarce. Odejmujemy
   wysokość przyklejonego paska, bo hero zaczyna się pod nim.

   TYLKO NA SZEROKIM EKRANIE. Na telefonie `100vh` to wysokość, która ZMIENIA
   SIĘ przy zwijaniu paska adresu, a treść i tak nie mieści się tam obok
   siebie — hero układa się wtedy w kolumnę i kończy tam, gdzie kończy się
   makieta. */
@media (min-width: 60rem) {
  .landing-hero {
    display: grid;
    align-items: center;
    min-height: calc(100vh - 4rem);
  }
}

/* Poświata za makietą. Plama w kolorze akcentu, wygaszona do zera — jedyny
   element dekoracyjny na tej stronie i jedyne miejsce, w którym surowy
   `--accent` niesie coś, co nie jest tekstem (wolno: nic tu nie musi
   przechodzić progu kontrastu). */
.landing-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 62%
  );
  pointer-events: none;
}

.landing-hero__grid {
  position: relative;
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 60rem) {
  .landing-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-6);
  }
}

.landing-hero__title {
  font-size: var(--text-display);
  margin: var(--space-3) 0 var(--space-4);
}

.landing-hero__lead {
  font-size: var(--text-lead);
  color: var(--muted);
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
}

.landing-hero__note {
  color: var(--muted);
  font-size: var(--text-caption);
  max-width: 28rem;
}

/* --------------------------------------------------------------------------
   Makieta produktu — panel z telefonem

   ZBUDOWANA Z HTML-A, nie z obrazka (ADR-092): skaluje się bez rozmycia, waży
   tyle co nic i nie starzeje się w dniu, w którym ktoś przesunie przycisk
   w panelu. Dowodem produktu są zrzuty niżej.

   Wszystkie stopnie pisma w makiecie to `--text-caption`: makieta ma być
   ROZPOZNAWALNA, nie czytelna. Tekst większy niż podpis kradłby uwagę
   obietnicy stojącej obok.
   -------------------------------------------------------------------------- */

.landing-hero__stage {
  position: relative;
}

.mockup {
  position: relative;
  padding-bottom: var(--space-6);
}

.mockup__panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-card);
  box-shadow: var(--lift-high);
  overflow: hidden;
}

.mockup__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

.mockup__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 25%, var(--surface-alt));
}

.mockup__address {
  margin: 0 0 0 var(--space-3);
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.7;
  flex: 1;
}

.mockup__screen {
  padding: var(--space-4);
}

.mockup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mockup__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
}

.mockup__badge {
  margin: 0;
  padding: 0.15rem var(--space-3);
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.mockup__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.mockup__stat {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--muted);
  font-size: var(--text-caption);
}

.mockup__stat strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-lead);
  line-height: var(--leading-tight);
}

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

.mockup__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  font-size: var(--text-caption);
}

.mockup__avatar {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.mockup__name {
  flex: 1;
  font-weight: 700;
}

.mockup__state {
  padding: 0.1rem var(--space-2);
  border-radius: 999px;
  color: var(--muted);
}

.mockup__state--yes {
  background: var(--success-bg);
  color: var(--success);
}

.mockup__state--waiting {
  background: var(--attention-bg);
  color: var(--attention);
}

.mockup__state--no {
  background: var(--danger-bg);
  color: var(--danger);
}

/* TELEFON zachodzi NA panel i to jest jedyny sposób, żeby dwa urządzenia
   czytały się jako jedna scena, a nie jako dwie ilustracje obok siebie.

   ZACHODZI DOKŁADNIE O WEWNĘTRZNY MARGINES PANELU (1rem) i ani o piksel
   więcej. Pierwsza wersja kładła telefon na środku lewej kolumny i zasłaniała
   nim liczniki oraz inicjały gości — czyli dokładnie to, co makieta ma
   pokazać. Panel dostaje więc lewy odstęp na telefon, a nakładka zjada
   wyłącznie pusty margines. Ramka jest atramentem palety, więc telefon
   zostaje ciemny także wtedy, gdy w środku stoi paleta jasna (a stoi:
   `data-theme="blush"`). */
.mockup__phone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10.5rem;
  padding: var(--space-2);
  border-radius: 1.75rem;
  background: var(--ink);
  box-shadow: var(--lift-high);
}

@media (min-width: 60rem) {
  .mockup {
    padding-left: 9.5rem;
  }
}

.mockup__invite {
  border-radius: 1.25rem;
  background: var(--surface-card);
  padding: var(--space-4) var(--space-3);
  overflow: hidden;
}

.mockup__invite-eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mockup__invite-title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.mockup__invite-meta {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--muted);
  font-size: var(--text-caption);
}

.mockup__invite-cta {
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent-strong);
  color: var(--surface-card);
  font-size: var(--text-caption);
  font-weight: 700;
  text-align: center;
}

.mockup__invite-plan {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-caption);
}

.mockup__invite-plan li {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--border);
}

.mockup__invite-plan span {
  color: var(--accent-strong);
  font-weight: 700;
}

/* Poniżej 60rem hero jest jednokolumnowe, a telefon nie ma już na czym leżeć:
   panel zajmuje całą szerokość, więc telefon albo wyszedłby poza ekran, albo
   przykryłby połowę makiety. Znika w całości — jest ilustracją, nie treścią. */
@media (max-width: 60rem) {
  .mockup__phone {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Filary — trzy zdania pod hero
   -------------------------------------------------------------------------- */

/* ANI `margin`, ANI `padding` W SKRÓCIE — element niesie ZARAZEM klasę
   `.landing-shell`, a ta ustawia `margin: 0 auto` i `padding: 0 var(--space-4)`.
   Skrót zeruje obie własności w całości: lista przestaje być wyśrodkowana
   i przykleja się do lewej krawędzi okna. Wyzerowanie wypunktowania załatwia
   samo `list-style`, bo odstępy listy przykrywa już `.landing-shell`. */
.landing-pillars__list {
  display: grid;
  gap: var(--space-6);
  list-style: none;
}

@media (min-width: 48rem) {
  .landing-pillars__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
  }
}

.landing-pillar__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent-strong);
}

.landing-pillar__title {
  font-size: var(--text-lead);
  margin: var(--space-3) 0 var(--space-2);
}

.landing-pillar p {
  color: var(--muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Możliwości — siatka kart
   -------------------------------------------------------------------------- */

.landing-features {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-feature {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-card);
  transition:
    border-color var(--dur) ease-out,
    box-shadow var(--dur) ease-out;
}

.landing-feature h3 {
  font-size: var(--text-lead);
  margin: var(--space-3) 0 var(--space-2);
}

.landing-feature p {
  color: var(--muted);
  margin: 0;
}

.landing-feature__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-strong);
}

/* Reakcja na kursor WYŁĄCZNIE tam, gdzie kursor istnieje. Na dotyku `:hover`
   zostaje po dotknięciu i karta wygląda na zaznaczoną bez powodu. */
@media (hover: hover) {
  .landing-feature:hover {
    border-color: var(--accent);
    box-shadow: var(--lift);
  }
}

/* --------------------------------------------------------------------------
   Ekrany — prawdziwe zrzuty w ramkach

   Ramka jest RYSOWANA, a nie wpalona w plik graficzny: zrzut przegenerowany po
   zmianie w panelu wchodzi wtedy w to samo miejsce bez retuszu, a ramka
   dziedziczy barwy palety.
   -------------------------------------------------------------------------- */

.landing-screens {
  display: grid;
  gap: var(--space-7);
}

/* KOLUMNA TELEFONU MA STAŁĄ SZEROKOŚĆ, a nie ułamek — i to jest jedyny powód
   tej reguły. Przy podziale na ułamki (3fr/2fr) telefon i tak stawał w środku
   swojej kolumny przy 15 rem, a reszta miejsca zostawała pusta; zrzut panelu
   schodził wtedy do ~660 px, czyli był pomniejszony ponad dwukrotnie i nie dało
   się na nim niczego przeczytać. Stała kolumna oddaje tę różnicę zrzutowi
   szerokiemu, bo to on niesie gęstość ekranu roboczego. */
@media (min-width: 60rem) {
  .landing-screens {
    grid-template-columns: minmax(0, 1fr) 16rem;
    align-items: center;
    gap: var(--space-7) var(--space-6);
  }
}

.landing-screen {
  margin: 0;
}

.landing-screen figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-caption);
}

.landing-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.landing-screen__frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: var(--lift-high);
  transition: transform var(--dur) ease-out;
}

/* Pasek okna nad zrzutem z panelu — trzy kropki i nic więcej. Adres w tym
   pasku byłby domeną, której jeszcze nie ogłosiliśmy. */
.landing-screen__chrome {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

.landing-screen__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 25%, var(--surface-alt));
}

/* Telefon: gruba ramka w atramencie i mocno zaokrąglone rogi. Obrazek jest
   węższy od kolumny, więc dostaje własną szerokość maksymalną — rozciągnięty
   na 2fr wyglądałby jak tablet. */
.landing-screen--phone .landing-screen__frame {
  max-width: 15rem;
  margin: 0 auto;
  padding: var(--space-2);
  border-radius: 2rem;
  background: var(--ink);
}

.landing-screen--phone img {
  border-radius: 1.5rem;
}

.landing-screen--phone figcaption {
  text-align: center;
}

@media (hover: hover) {
  .landing-screen:hover .landing-screen__frame {
    transform: translateY(-4px);
  }
}

/* --------------------------------------------------------------------------
   Palety — sześć specimenów

   Każda karta niesie `data-theme` i NIC poza tym: pole nagłówka, barwa
   przycisku, obramowanie i krój nagłówkowy wyliczają się z czterech kolorów
   palety w `app.css` i `themes.css`. Dlatego karta weselna ma pole JASNE,
   a firmowa ciemne — to schemat hero (ADR-068), nie reguła z tego pliku.
   -------------------------------------------------------------------------- */

.landing-palettes + .landing-palettes {
  margin-top: var(--space-7);
}

.landing-palettes__group {
  font-size: var(--text-lead);
  margin: 0 0 var(--space-4);
  color: var(--muted);
}

.landing-palettes__list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-palette {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-card);
  overflow: hidden;
  transition:
    transform var(--dur) ease-out,
    box-shadow var(--dur) ease-out;
}

.landing-palette__hero {
  padding: var(--space-5) var(--space-4);
  background: var(--hero-surface);
  color: var(--hero-ink);
}

.landing-palette__eyebrow {
  margin: 0;
  color: var(--on-hero-muted);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-palette__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.landing-palette__body {
  padding: var(--space-4);
}

.landing-palette__sample {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--text-caption);
}

.landing-palette__button {
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent-strong);
  color: var(--surface-card);
  font-size: var(--text-caption);
  font-weight: 700;
  text-align: center;
}

.landing-palette__swatches {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.landing-palette__swatch {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 50%;
}

.landing-palette__swatch--surface {
  background: var(--surface);
}

.landing-palette__swatch--alt {
  background: var(--surface-alt);
}

.landing-palette__swatch--accent {
  background: var(--accent);
}

.landing-palette__swatch--ink {
  background: var(--ink);
}

@media (hover: hover) {
  .landing-palette:hover {
    transform: translateY(-4px);
    box-shadow: var(--lift);
  }
}

/* --------------------------------------------------------------------------
   Kroki — lista uporządkowana z szyną

   Numer bierze się z `counter()`, a nie z treści: kolejność niesie `<ol>`,
   więc czytnik ekranu zapowiada „1 z 5" sam, a kółko z cyfrą jest wyłącznie
   rysunkiem tej informacji.
   -------------------------------------------------------------------------- */

/* Lista trzyma się LEWEJ, przy nagłówku sekcji — nie środka kolumny. Wyśrodkowana
   zostawiała pod nagłówkiem pustą kolumnę na 6 rem i wyglądała, jakby coś obok
   niej miało stać. */
/* SZYNA JEST JEDNA I CIĄGŁA, a numery leżą NA NIEJ. Pierwsza wersja rysowała
   osobny odcinek pod każdym krokiem: odcinki nie dobijały do następnego kółka,
   więc zamiast osi powstawał rząd kresek zawieszonych w powietrzu. Linia
   poprowadzona przez CAŁĄ listę i przykryta nieprzezroczystymi kółkami czyta
   się jako jedna droga — a przy okazji daje się „narysować" przewijaniem
   jedną animacją skali (patrz warstwa ruchu na końcu pliku). */
.landing-steps {
  position: relative;
  list-style: none;
  counter-reset: landing-step;
  margin: 0;
  padding: 0;
  max-width: var(--landing-narrow);
}

.landing-step {
  position: relative;
  counter-increment: landing-step;
  padding: 0 0 var(--space-6) 4rem;
}

.landing-step:last-child {
  padding-bottom: 0;
}

/* Kółko z numerem MUSI być nieprzezroczyste i wyśrodkowane na szynie — to ono
   przerywa linię w miejscu kroku. Pierścień w kolorze tła sekcji oddziela je
   od szyny bez rysowania drugiej krawędzi. */
.landing-step::before {
  content: counter(landing-step);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent-strong);
  color: var(--surface-card);
  font-weight: 700;
}

/* ODCINEK SZYNY DOCHODZI DO ŚRODKA NASTĘPNEGO KÓŁKA, a nie kończy się gdzieś
   pod krokiem — i to jest cała różnica między osią a rzędem kresek wiszących
   w powietrzu (pierwsza wersja robiła to drugie). Kroki stykają się bez
   marginesu, więc `bottom: -1.25rem` to dokładnie połowa wysokości kółka
   następnego kroku; kółko jest nieprzezroczyste i leży wyżej (`z-index`),
   więc przykrywa koniec odcinka. */
.landing-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: -1.25rem;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--accent) 45%, var(--surface-page));
  transform-origin: top;
}

.landing-step__title {
  font-size: var(--text-lead);
  margin: var(--space-2) 0 var(--space-2);
}

.landing-step p {
  color: var(--muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Dane osobowe — pas ciemny
   -------------------------------------------------------------------------- */

.landing-privacy {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-privacy__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-strong);
}

.landing-privacy__item h3 {
  font-size: var(--text-lead);
  margin: var(--space-3) 0 var(--space-2);
}

.landing-privacy__item p {
  color: var(--muted);
  margin: 0;
}

.landing-privacy__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-7) 0 0;
}

/* --------------------------------------------------------------------------
   Cennik — szkielet z wypełniaczami (kwoty dochodzą w #174)
   -------------------------------------------------------------------------- */

.landing-plans {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-card);
}

/* Pakiet wyróżniony — obramowanie w akcencie, bez zmiany tła. Karta na innym
   tle wyglądałaby na wyłączoną, a nie na polecaną. */
.landing-plan--featured {
  border-color: var(--accent);
  box-shadow: var(--lift);
}

/* PLAKIETKA STOI NA KRAWĘDZI KARTY, POZA PRZEPŁYWEM. Jako zwykły akapit
   spychała nazwę i cenę o wiersz w dół — trzy karty obok siebie miały wtedy
   nazwy na trzech różnych wysokościach, a to widać na wizytówce od razu. */
.landing-plan__tag {
  position: absolute;
  top: 0;
  left: var(--space-5);
  transform: translateY(-50%);
  margin: 0;
  padding: 0.15rem var(--space-3);
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--surface-card);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-plan__name {
  font-size: var(--text-lead);
  margin: 0 0 var(--space-3);
}

/* WIERSZ CENY JEST WYPEŁNIACZEM i ma na wypełniacz wyglądać (kwoty dochodzą
   w #174). Kreska przerywana pod nim mówi „tu będzie liczba" bez ani jednego
   zdania więcej, a jeden wiersz w każdej karcie trzyma nazwy i opisy w tych
   samych liniach. Wcześniejsza wersja stawiała tu wielki znak zapytania —
   powtórzony trzy razy wyglądał jak brak grafiki, a nie jak zapowiedź. */
.landing-plan__price {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px dashed var(--border);
  color: var(--muted);
  font-size: var(--text-lead);
  font-weight: 700;
}

.landing-plan__for {
  margin: 0;
  color: var(--muted);
}

.landing-plans__common {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-card);
}

.landing-plans__common h3 {
  font-size: var(--text-lead);
  margin: 0 0 var(--space-4);
}

.landing-plans__list {
  display: grid;
  gap: var(--space-2) var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin: 0;
  padding: 0 0 0 var(--space-5);
  color: var(--muted);
}

.landing-plans__cta {
  margin: var(--space-5) 0 0;
}

/* --------------------------------------------------------------------------
   Pytania — `<details>` bez ani jednej linii skryptu
   -------------------------------------------------------------------------- */

.landing-faq {
  border-top: 1px solid var(--border);
}

.landing-faq__item {
  border-bottom: 1px solid var(--border);
}

.landing-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-weight: 700;
  cursor: pointer;
  /* Domyślny trójkąt znika DWIEMA drogami, bo przeglądarki chowają go różnie:
     `list-style` w silnikach nowszych, pseudoelement w WebKicie. */
  list-style: none;
}

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

.landing-faq__marker {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--accent-strong);
  transition: transform var(--dur) ease-out;
}

.landing-faq__item[open] .landing-faq__marker {
  transform: rotate(180deg);
}

.landing-faq__item p {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  max-width: var(--measure);
}

/* Treść odpowiedzi WCHODZI, zamiast wyskakiwać. Animacja jedzie na samym
   akapicie, a nie na wysokości bloku: wysokości `<details>` nie da się
   animować bez podpórek, a zmiana krycia i lekkie przesunięcie dają całą
   różnicę w odbiorze. */
.landing-faq__item[open] p {
  animation: landing-enter var(--enter-dur) var(--enter-ease) both;
}

/* --------------------------------------------------------------------------
   Wezwanie końcowe i kontakt
   -------------------------------------------------------------------------- */

.landing-cta__grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 60rem) {
  .landing-cta__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-7);
  }
}

/* MOTTO MARKI — złożone jak na bannerze Zamawiającej: wersaliki i szeroka
   spacja. Wielkie litery robi CSS, a nie treść w szablonie: napis wpisany
   kapitalikami czytnik ekranu potrafi przeliterować, a przy zmianie
   składu trzeba by go przepisywać w pliku. */
.landing-cta__title {
  font-size: var(--text-page);
  margin: 0 0 var(--space-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-cta__motto {
  margin: 0 0 var(--space-4);
  color: var(--accent-strong);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.landing-cta__lead {
  color: var(--muted);
  font-size: var(--text-lead);
}

.landing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.landing-cta__card h3 {
  font-size: var(--text-lead);
  margin: 0;
}

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

.landing-footer {
  padding: var(--section-y) 0 var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}

.landing-footer__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .landing-footer__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

.landing-footer__claim {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  max-width: 22rem;
}

.landing-footer__heading {
  font-size: var(--text-caption);
  margin: 0 0 var(--space-3);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-footer__nav {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

/* Stopka dokumentów jest w `app.css` WYŚRODKOWANA — tam stoi jako jedyna
   treść pasa pod panelem. Tutaj jest jedną z trzech kolumn, więc wraca do
   lewej i układa się w pion, jak sąsiednia nawigacja. */
.landing-footer__legal .legal-links {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body);
}

/* WYŁĄCZNIE `margin-top` — skrót `margin: … 0 0` skasowałby `margin: 0 auto`
   z `.landing-shell` i wiersz z prawami autorskimi przykleiłby się do lewej
   krawędzi okna, podczas gdy cała reszta stopki stoi w kolumnie treści. */
.landing-footer__note {
  margin-top: var(--space-7);
  color: var(--muted);
  font-size: var(--text-caption);
}

/* ==========================================================================
   WARSTWA RUCHU

   Ta sama mechanika i ten sam status co w warstwie Gościa (ADR-040): CSS
   sterowany PRZEWIJANIEM, wszystko za `@supports`, stan spoczynkowy zawsze
   WIDOCZNY. Wizytówka otwiera się u kogoś, kto nas nie zna — strona, która
   przez sekundę jest pusta, bo efekt nie dojechał, kończy się zamknięciem
   karty.

   TRZY MECHANIZMY:
     1. wejście elementów przy przewijaniu (`view()`),
     2. reakcja paska i telefonu na przewijanie strony (`scroll()`),
     3. podstawka dla przeglądarek bez osi przewijania — `landing.js` dokłada
        klasę sekcji, a te same klatki jadą wtedy na zegarze.
   ========================================================================== */

@keyframes landing-enter {
  from {
    opacity: 0;
    transform: translateY(var(--enter-shift));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes landing-rail {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes landing-nav-settle {
  to {
    border-bottom-color: var(--border);
    box-shadow: var(--lift);
  }
}

@keyframes landing-phone-drift {
  to {
    transform: translateY(-2.5rem);
  }
}

/* --- Wejście hero: JEDYNY ruch na zegarze, i to z konieczności --------------

   Hero jest na ekranie od pierwszej klatki, więc oś przewijania nie ma czym
   go animować: jego zakres `entry` jest już przekroczony w chwili wczytania.
   Wejście na zegarze jest tu jedyną drogą — i jedynym miejscem w tym arkuszu,
   w którym opóźnienie buduje kolejność. */

.landing-hero__copy > *,
.landing-hero__stage {
  animation: landing-enter var(--enter-dur) var(--enter-ease) both;
}

.landing-hero__copy > :nth-child(2) {
  animation-delay: 60ms;
}

.landing-hero__copy > :nth-child(3) {
  animation-delay: 120ms;
}

.landing-hero__copy > :nth-child(4) {
  animation-delay: 180ms;
}

.landing-hero__copy > :nth-child(5) {
  animation-delay: 240ms;
}

.landing-hero__stage {
  animation-delay: 160ms;
  animation-duration: 700ms;
}

/* --- Wejście przy przewijaniu ---------------------------------------------

   Lista jest JAWNA i to jest decyzja: `.landing-section > * > *` objęłoby
   także pasy tła i kontenery, czyli elementy, których ruch nie ma opisywać.
   Nowa sekcja dopisuje tu swoją kartę — a sekcja, o której ktoś zapomni,
   po prostu stoi bez wejścia, zamiast zniknąć.

   ZAKRES `entry` JEST UŁAMKIEM WYSOKOŚCI ELEMENTU (30 %), z tego samego
   powodu co w `guest.css`: te same 70 % znaczą co innego przy karcie
   możliwości i przy zrzucie ekranu na całą szerokość. */

@supports (animation-timeline: view()) {
  .landing-head,
  .landing-pillar,
  .landing-feature,
  .landing-screen,
  .landing-palette,
  .landing-step,
  .landing-privacy__item,
  .landing-plan,
  .landing-plans__common,
  .landing-faq__item,
  .landing-cta__copy,
  .landing-cta__card {
    animation: landing-enter auto var(--enter-ease) both;
    animation-timeline: view();
    /* Na osi postępu czas trwania nie ma sensu — długość wyznacza zakres.
       `auto` mówi to wprost. */
    animation-range: entry 0% entry var(--enter-range);
  }

  /* Szyna rysuje się w takt przewijania, odcinek po odcinku. Zakres jest
     PEŁNY, a nie ułamkowy: odcinek ma dojechać do następnego kółka dokładnie
     wtedy, gdy krok wychodzi z pola widzenia. */
  .landing-step:not(:last-child)::after {
    animation: landing-rail auto linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }

  /* Pasek osiada po pierwszym ruchu strony: dostaje krawędź i cień, czyli
     dokładnie tyle, ile potrzeba, żeby treść pod nim nie wyglądała na
     doklejoną do niego. */
  .landing-nav {
    animation: landing-nav-settle linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 6rem;
  }

  /* Telefon podjeżdża wolniej niż strona — paralaksa liczona zakresem
     w `vh`, a nie procentem dokumentu: procent odnosi się do CAŁEJ długości
     strony, a ta zmienia się z każdą dopisaną sekcją. */
  .mockup__phone {
    animation: landing-phone-drift linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 90vh;
  }
}

/* --- Podstawka dla przeglądarek bez osi przewijania -------------------------

   `landing.js` zakłada `js-reveal` NA SEKCJI (i tylko na tej, która w chwili
   wczytania stoi pod krawędzią okna), a `is-in` — gdy ta sekcja wjedzie
   w pole widzenia.

   KLASA JEST WARUNKIEM UKRYCIA i to jest cała gwarancja tej warstwy: bez
   skryptu — wyłączonego, niedojechałego, wywróconego — reguła niżej nie ma
   do czego przylgnąć i strona zostaje w stanie spoczynkowym, czyli widoczna
   w całości. Ukrycie zapisane w arkuszu i zdejmowane skryptem działałoby
   odwrotnie: bez skryptu zostawałaby pusta strona.

   Bez staggera — kolejność wewnątrz sekcji niesie tu układ, a nie czas.
   Opóźnienia per karta wymagałyby dziewięciu reguł `nth-child` na sekcję
   i dałyby efekt, którego i tak nie widzi większość odwiedzających
   (przeglądarki z osią przewijania mają wersję wyżej). */

@supports not (animation-timeline: view()) {
  .landing-section.js-reveal :is(.landing-head, .landing-pillar, .landing-feature, .landing-screen, .landing-palette, .landing-step, .landing-privacy__item, .landing-plan, .landing-plans__common, .landing-faq__item, .landing-cta__copy, .landing-cta__card) {
    opacity: 0;
  }

  .landing-section.js-reveal.is-in :is(.landing-head, .landing-pillar, .landing-feature, .landing-screen, .landing-palette, .landing-step, .landing-privacy__item, .landing-plan, .landing-plans__common, .landing-faq__item, .landing-cta__copy, .landing-cta__card) {
    animation: landing-enter var(--enter-dur) var(--enter-ease) both;
  }
}

/* --------------------------------------------------------------------------
   OGRANICZENIE RUCHU — jeden blok, na końcu pliku.

   WYGASZAMY, A NIE SKRACAMY. Globalna reguła z `app.css` skraca czas trwania
   do 1 ms, co przy animacji na osi PRZEWIJANIA nie znaczy nic: tam czasu
   trwania nie ma. Deklaracja systemowa użytkownika wygrywa ze wszystkim
   (`!important`) — ruch potrafi wywołać zawroty głowy i mdłości u osób
   z wrażliwością przedsionkową.

   Stanem spoczynkowym KAŻDEGO elementu na tej liście jest stan KOŃCOWY jego
   animacji, więc wygaszenie nie zabiera z ekranu niczego poza ruchem. Jedyny
   wyjątek to podstawka skryptowa, która ukrywa element WŁASNĄ regułą, a nie
   animacją — dlatego dostaje jawne przywrócenie krycia. `landing.js` i tak
   nie uruchamia się przy tej preferencji; ta reguła jest drugą linią, na
   wypadek preferencji zmienionej przy otwartej stronie.

   NOWY EFEKT = NOWY WIERSZ TUTAJ.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .landing-hero__copy > *,
  .landing-hero__stage,
  .landing-head,
  .landing-pillar,
  .landing-feature,
  .landing-screen,
  .landing-palette,
  .landing-step,
  .landing-step::after,
  .landing-privacy__item,
  .landing-plan,
  .landing-plans__common,
  .landing-faq__item,
  .landing-faq__item[open] p,
  .landing-cta__copy,
  .landing-cta__card,
  .landing-nav,
  .mockup__phone {
    animation: none !important;
  }

  .landing-section.js-reveal :is(.landing-head, .landing-pillar, .landing-feature, .landing-screen, .landing-palette, .landing-step, .landing-privacy__item, .landing-plan, .landing-plans__common, .landing-faq__item, .landing-cta__copy, .landing-cta__card) {
    opacity: 1;
  }

  html {
    scroll-behavior: auto;
  }
}