/* ==========================================================================
   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. Jedyna barwa wpisana wprost to złoto marki
   (`--brand`, ADR-121); 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);

  /* ZŁOTO MARKI (ADR-119) — jedyna barwa wpisana tu wprost (ADR-121). Surowe
     ma 3,2:1 na jasnym tle, więc tekst stoi na wersji przyciemnionej, a surowe
     zostaje dla rysunków i dużych cyfr. */
  --brand: #aa8800;
  --brand-strong: color-mix(in srgb, var(--brand) 70%, var(--ink));
  --brand-soft: color-mix(in srgb, var(--brand) 14%, var(--surface-card));

  /* Ramka telefonu na zrzutach — czerń urządzenia, nie atrament palety:
     telefon ma wyglądać jak telefon niezależnie od tła, na którym leży. */
  --phone-bezel: #121417;
}

/* 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(--brand-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));
  --brand-strong: color-mix(in srgb, var(--brand) 75%, 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(--brand);
  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;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--surface-page) 96%, transparent) 0%,
      color-mix(in srgb, var(--surface-page) 88%, transparent) 34%,
      color-mix(in srgb, var(--surface-page) 42%, transparent) 70%,
      color-mix(in srgb, var(--surface-page) 20%, transparent) 100%
    ),
    url("../img/landing/hero-events.d14e6e42f914.webp") center / cover no-repeat;
}

/* 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);
  }
}

.landing-hero__grid {
  position: relative;
  display: grid;
  /* `minmax(0, …)` także w jednej kolumnie: bez niego kolumnę rozpycha
     makieta (etykiety `nowrap`) i scena wychodzi poza ekran telefonu. */
  grid-template-columns: minmax(0, 1fr);
  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;
}

/* --------------------------------------------------------------------------
   Hero — fotografia i dwa prawdziwe zaproszenia (#351, ADR-121)
   -------------------------------------------------------------------------- */

.landing-hero__shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  width: min(100%, 34rem);
  margin-inline: auto;
  align-items: center;
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-shot--phone {
  width: 100%;
  max-width: 15rem;
  margin-inline: auto;
  padding: 0.35rem;
  border-radius: 1.6rem;
  background: var(--phone-bezel);
  box-shadow: var(--lift-high);
}

@media (max-width: 59.99rem) {
  .landing-hero {
    background:
      linear-gradient(
        color-mix(in srgb, var(--surface-page) 90%, transparent),
        color-mix(in srgb, var(--surface-page) 56%, transparent)
      ),
      url("../img/landing/hero-events.d14e6e42f914.webp") 42% center / cover no-repeat;
  }
}

/* PEŁNY EKRAN 390 × 844, bez przycinania — przycięty kadr ma proporcje
   tabletu i telefon przestaje wyglądać jak telefon. */
.hero-shot--phone img {
  border-radius: 1.35rem;
}

.hero-shot--wedding {
  rotate: -5deg;
}

.hero-shot--corporate {
  rotate: 5deg;
}

/* --------------------------------------------------------------------------
   Moduły — jeden przełącznik i pas w barwach modułu (#286, ADR-121)

   Pola `radio` stoją przed paskiem i pasami, więc arkusz sięga do nich
   selektorem `~` — bez `:has()` i bez skryptu. Nazwy w selektorach to nazwy
   dwóch MODUŁÓW, nie palet.
   -------------------------------------------------------------------------- */

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

.landing-head--center {
  margin-inline: auto;
  text-align: center;
}

/* POLE PRZYKLEJONE DO OKNA. Kliknięcie etykiety przenosi fokus na pole,
   a przeglądarka przewija do fokusu — pole w stałym miejscu okna jest zawsze
   widoczne, więc strona nie skacze do góry sekcji. */
.landing .module-switch {
  position: fixed;
  top: 50%;
  left: 0;
}

/* Pasek przełącznika przyklejony pod paskiem strony — tylko w obrębie sekcji,
   bo to ona jest jego rodzicem. Zachodzi na górną krawędź pasa modułu. */
.showcase-switch {
  position: sticky;
  top: 4.75rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  margin-bottom: -2.25rem;
  padding: 0 var(--space-4);
  pointer-events: none;
}

.showcase-switch__track {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-card) 86%, transparent);
  box-shadow:
    var(--lift-high),
    inset 0 0 0 1px var(--border);
  pointer-events: auto;
}

@supports (backdrop-filter: blur(1px)) {
  .showcase-switch__track {
    backdrop-filter: blur(12px);
  }
}

/* Suwak — jedna plama pod wybraną etykietą, przesuwana, a nie dwie
   przełączane: ruch mówi „to jest jeden wybór z dwóch". */
.showcase-switch__track::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0.35rem;
  width: calc(50% - 0.35rem);
  border-radius: 999px;
  background: var(--ink);
  transition: translate 450ms var(--enter-ease);
}

#module-corporate:checked ~ .showcase-switch .showcase-switch__track::before {
  translate: 100% 0;
}

.showcase-switch__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 12rem;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--text-lead);
  font-weight: 700;
  cursor: pointer;
  transition: color 300ms ease-out;
}

.showcase-switch__option .icon {
  width: 1.25rem;
  height: 1.25rem;
}

#module-wedding:checked ~ .showcase-switch [for="module-wedding"],
#module-corporate:checked ~ .showcase-switch [for="module-corporate"] {
  color: var(--surface-card);
}

#module-wedding:focus-visible ~ .showcase-switch [for="module-wedding"],
#module-corporate:focus-visible ~ .showcase-switch [for="module-corporate"] {
  outline: 2px solid var(--brand-strong);
  outline-offset: 3px;
}

/* Na telefonie przełącznik traci ikony — z nimi „Eventy firmowe" łamie się
   na dwa wiersze i suwak przestaje leżeć pod napisem. */
@media (max-width: 30rem) {
  .showcase-switch__option {
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-body);
    white-space: nowrap;
  }

  .showcase-switch__option .icon {
    display: none;
  }
}

/* JEDYNE UKRYCIE MODUŁU i stoi pod `:checked`: bez arkusza oba pasy są
   widoczne jeden pod drugim. Pilnuje tego bramka w `tests/test_landing.py`. */
#module-wedding:checked ~ .showcase-stage [data-module="corporate"],
#module-corporate:checked ~ .showcase-stage [data-module="wedding"] {
  display: none;
}

/* SCENA — jedno tło pod oboma pasami, w barwach SPOZA palet: szałwia z kremem
   i złotem pod weselami, morski turkus pod eventami. Na tle w barwie palety
   specimeny palet się z nim zlewały (ADR-121).

   BARWY PRZECHODZĄ, bo scena jest jedna, a zmienne są zarejestrowane
   (`@property`) — przeglądarka umie wtedy interpolować kolor w gradiencie.
   Bez wsparcia `@property` barwa zmienia się od razu i nic więcej nie ginie.
   Plamy światła dryfują powoli w pseudoelemencie. */
@property --band-base {
  syntax: "<color>";
  inherits: true;
  initial-value: #eef2e8;
}

@property --band-glow-a {
  syntax: "<color>";
  inherits: true;
  initial-value: #d3e2c9;
}

@property --band-glow-b {
  syntax: "<color>";
  inherits: true;
  initial-value: #f2e1b3;
}

@property --band-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #1e2d24;
}

@property --band-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #6f5b17;
}

/* Kontrast policzony: tekst 12,8:1 na szałwii i 13,6:1 na turkusie; akcent
   5,8:1 i 8,4:1. */
.showcase-stage {
  --band-base: #eef2e8;
  --band-glow-a: #d3e2c9;
  --band-glow-b: #f2e1b3;
  --band-ink: #1e2d24;
  --band-accent: #6f5b17;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55rem 35rem at 88% 0%, var(--band-glow-b), transparent 70%),
    radial-gradient(50rem 40rem at 5% 100%, var(--band-glow-a), transparent 70%),
    var(--band-base);
  color: var(--band-ink);
  transition:
    --band-base 900ms var(--enter-ease),
    --band-glow-a 900ms var(--enter-ease),
    --band-glow-b 900ms var(--enter-ease),
    --band-ink 600ms ease-out,
    --band-accent 600ms ease-out;
}

#module-corporate:checked ~ .showcase-stage {
  --band-base: #0b2a2c;
  --band-glow-a: #13605b;
  --band-glow-b: #4a4118;
  --band-ink: #eaf4f1;
  --band-accent: #d9bf6a;
}

.showcase-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(28rem 28rem at 30% 35%, color-mix(in srgb, var(--band-glow-a) 75%, transparent), transparent 70%),
    radial-gradient(24rem 24rem at 72% 65%, color-mix(in srgb, var(--band-glow-b) 65%, transparent), transparent 70%);
  animation: landing-band-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

/* PAS MODUŁU — treść na scenie. `data-theme` na pasie daje krój i nic
   więcej: barwy tekstu idą ze sceny, a tokeny pochodne liczymy ku niej. Pas
   wjeżdża przy każdym pokazaniu, bo animacja startuje od nowa, gdy element
   wraca z `display: none`. */
.showcase-module {
  --muted: color-mix(in srgb, var(--band-ink) 78%, var(--band-base));
  --border: color-mix(in srgb, var(--band-ink) 18%, var(--band-base));
  position: relative;
  padding: calc(var(--section-y) + 2.25rem) 0 var(--section-y);
  color: var(--band-ink);
  animation: landing-band-in 700ms var(--enter-ease) both;
}

.showcase-intro {
  margin-bottom: var(--space-7);
}

.showcase-intro__kicker {
  margin: 0;
  color: var(--band-accent);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.showcase-intro__title {
  margin: var(--space-3) 0 var(--space-4);
  color: var(--band-ink);
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}

.showcase-intro__lead {
  margin: 0;
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--text-lead);
}

.showcase-visual__points {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--band-ink) 18%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--band-base) 84%, transparent);
  box-shadow: var(--lift);
  backdrop-filter: blur(0.65rem);
  list-style: none;
}

.showcase-visual__points li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.showcase-visual__points li::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--band-accent);
}

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

.showcase-palettes__title {
  margin: 0 0 var(--space-4);
  color: var(--band-ink);
  font-size: var(--text-lead);
}

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

.landing-features {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 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__badge {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.landing-feature__badge .icon {
  width: 1.35rem;
  height: 1.35rem;
}

/* 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(--brand);
    box-shadow: var(--lift);
  }
}

/* --------------------------------------------------------------------------
   Fotografia modułu, korzyści i prawdziwy ekran telefonu
   -------------------------------------------------------------------------- */

.showcase-visual {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 60rem) {
  .showcase-visual {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--space-7) var(--space-6);
  }
}

.showcase-visual__photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  box-shadow: var(--lift-high);
}

/* Zdjęcie buduje scenę, a nie konkuruje z treścią. Jasna warstwa uspokaja
   fotografię także poza kartą korzyści, ale nadal zostawia ją rozpoznawalną. */
.showcase-visual__photo::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: color-mix(in srgb, var(--band-base) 22%, transparent);
  content: "";
  pointer-events: none;
}

.showcase-visual__photo > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: inherit;
}

.showcase-visual__points {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 6%;
  left: 4%;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  border-color: color-mix(in srgb, var(--band-ink) 14%, transparent);
  background: color-mix(in srgb, var(--band-base) 64%, transparent);
  backdrop-filter: blur(0.9rem);
}

@media (max-width: 59.99rem) {
  .showcase-visual__photo > img {
    aspect-ratio: 4 / 5;
  }

  .showcase-visual__points {
    right: 4%;
    bottom: 4%;
    left: 4%;
  }
}

.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;
}

/* 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: 0.35rem;
  border-radius: 2rem;
  background: var(--phone-bezel);
}

@media (min-width: 60rem) {
  .showcase-visual__phone .landing-screen__frame {
    max-width: 20rem;
  }
}

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

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

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

/* --------------------------------------------------------------------------
   Palety — specimeny w pasie modułu

   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__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 — pięć kart w rzędzie

   Numer bierze się z `counter()`, a nie z treści: kolejność niesie `<ol>`,
   a cyfra w rogu jest wyłącznie jej rysunkiem. Cyfra stoi w surowym złocie —
   jest duża i dekoracyjna, więc wystarcza jej próg dla dużego tekstu.
   -------------------------------------------------------------------------- */

.landing-steps {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  counter-reset: landing-step;
  margin: 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .landing-steps {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
}

.landing-step {
  position: relative;
  counter-increment: landing-step;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-card);
}

.landing-step::before {
  content: counter(landing-step);
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--brand);
  font-size: var(--text-page);
  font-weight: 700;
  line-height: 1;
}

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

.landing-step__title {
  font-size: var(--text-lead);
  margin: var(--space-4) 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 — pakiety z `tenants/packages.py` i karta wyceny indywidualnej
   -------------------------------------------------------------------------- */

.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(--brand);
  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(--brand-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);
}

.landing-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-page);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.landing-plan__regular-price {
  color: var(--muted);
  font-size: var(--text-body);
  font-weight: 400;
}

.landing-plan__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.landing-plan__facts li + li {
  margin-top: var(--space-2);
}

.landing-plan--contact .landing-plan__price {
  font-size: var(--text-lead);
}

.landing-plan__action {
  margin: auto 0 0;
  padding-top: var(--space-4);
  font-weight: 700;
}

.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;
}

/* --------------------------------------------------------------------------
   Zamknięcie — ciemny pas z mottem marki
   -------------------------------------------------------------------------- */

/* Drugi ciemny pas na stronie, obok danych osobowych — zamyka stronę
   i oddaje ostatnie słowo marce, więc plama światła jest w jej złocie. Tokeny
   pochodne odwracamy tak samo jak w `.landing-section--dark`. */
.landing-cta {
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 55%),
    var(--ink);
  color: var(--surface);
  text-align: center;
  --muted: color-mix(in srgb, var(--surface) 84%, var(--ink));
}

.landing-cta__inner > * {
  margin-inline: auto;
}

/* MOTTO MARKI — wersaliki i szeroka spacja jak na bannerze Zamawiającej.
   Wielkie litery robi CSS, nie treść: napis kapitalikami czytnik literuje. */
.landing-cta__title {
  font-size: var(--text-page);
  margin-block: 0 var(--space-2);
  padding-left: 0.06em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-cta__motto {
  margin-block: 0 var(--space-4);
  padding-left: 0.16em;
  color: color-mix(in srgb, var(--brand) 75%, var(--surface));
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

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

/* Przycisk w złocie rozjaśnionym ku tłu: przy tekście w atramencie daje
   5,8:1, a surowe złoto — równo 4,5:1, czyli na samej granicy. */
.landing-cta .btn {
  background: color-mix(in srgb, var(--brand) 80%, var(--surface));
  color: var(--ink);
}

.landing-cta .btn:hover {
  background: color-mix(in srgb, var(--brand) 65%, var(--surface));
}

/* --------------------------------------------------------------------------
   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__reach {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.landing-footer__reach dt {
  color: var(--muted);
}

.landing-footer__reach dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* 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-nav-settle {
  to {
    border-bottom-color: var(--border);
    box-shadow: var(--lift);
  }
}

@keyframes landing-phone-drift {
  to {
    translate: 0 -2.5rem;
  }
}

@keyframes landing-band-in {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }

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

@keyframes landing-band-drift {
  to {
    translate: 6% -4%;
  }
}

/* --- 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__shots {
  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__shots {
  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,
  .showcase-intro,
  .landing-feature,
  .landing-screen,
  .landing-palette,
  .landing-step,
  .landing-privacy__item,
  .landing-plan,
  .landing-plans__common,
  .landing-faq__item,
  .landing-cta__inner {
    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);
  }

  /* 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ą. */
  .hero-shot--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, .showcase-intro, .landing-feature, .landing-screen, .landing-palette, .landing-step, .landing-privacy__item, .landing-plan, .landing-plans__common, .landing-faq__item, .landing-cta__inner) {
    opacity: 0;
  }

  .landing-section.js-reveal.is-in :is(.landing-head, .showcase-intro, .landing-feature, .landing-screen, .landing-palette, .landing-step, .landing-privacy__item, .landing-plan, .landing-plans__common, .landing-faq__item, .landing-cta__inner) {
    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__shots,
  .landing-head,
  .showcase-intro,
  .landing-feature,
  .landing-screen,
  .landing-palette,
  .landing-step,
  .landing-privacy__item,
  .landing-plan,
  .landing-plans__common,
  .landing-faq__item,
  .landing-faq__item[open] p,
  .landing-cta__inner,
  .landing-nav,
  .hero-shot--phone,
  .showcase-module,
  .showcase-stage::before {
    animation: none !important;
  }

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

  html {
    scroll-behavior: auto;
  }
}