/* ============================================================
   Michał Mil — Landing Page
   Monochrome · czarne tło, białe zaokrąglone blaty (hero, kontakt)
   Inter + akcentowy krój display
   ============================================================ */

/* Kroje serwowane z własnego serwera (assets/fonts), a nie z Google Fonts —
   dzięki temu wyświetlenie strony nie wysyła adresu IP odwiedzającego do USA.
   Inter jest krojem zmiennym, jeden plik obsługuje wagi 400, 500 i 600.
   Podział latin / latin-ext jak u Google: przeglądarka pobiera drugi plik
   dopiero wtedy, gdy na stronie pojawią się polskie znaki. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ebgaramond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ebgaramond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Jedna neutralna skala achromatyczna, zestrojona z kadrem w hero:
     dominujący odcień nagrania to ok. #CFCFCE, więc cała paleta jest
     neutralna z ledwie ciepłym przechyłem — bez niebieskiego zimna. */
  --page:     #F8F8F7;
  --card:     #FFFFFF;
  /* Podświetlenie na blacie — tło strony wraca jako warstwa wewnątrz karty. */
  --card-2:   #F8F8F7;
  --ink:      #1A1A19;
  --ink-2:    #3A3A38;
  --muted:    #5E5E5B;
  --muted-2:  #656562;
  --line:     #D2D2D0;

  /* Kontekst kolorystyczny — jasny na całej stronie */
  --bg:        var(--page);
  --surface:   var(--card);
  --fg:        var(--ink);
  --fg-2:      var(--ink-2);
  --fg-muted:  var(--muted);
  --fg-faint:  var(--muted-2);
  --rule:      var(--line);

  /* Wideo hero — kadr ustalony ręcznie */
  --hero-v-scale: 1.05;
  --hero-v-x: 2.5;
  --hero-v-y: 2.5;

  /* Typografia */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Krój akcentowy: Apple Garamond. Font jest zastrzeżony przez Apple i nie ma go
     w żadnej publicznej bibliotece — jeśli plik trafi do systemu albo do assets/,
     pierwsza pozycja stacku podniesie go automatycznie. Do tego czasu rysuje
     EB Garamond (ta sama rodzina renesansowych garamondów, dostępna otwarcie).
     Apple Garamond to ITC Garamond skondensowany do ~80%, dlatego krój dostaje
     to samo zwężenie przez --display-squeeze. */
  --font-display: "Apple Garamond", "ITC Garamond", "EB Garamond", "Times New Roman", serif;
  --display-squeeze: 0.94;

  /* Skala typografii — skaluje się z wysokością okna, żeby sekcja
     mieściła się na jednym ekranie także na niskich laptopach */
  --t-xs:   clamp(11px, 1.35vh, 12px);
  --t-sm:   clamp(12px, 1.6vh, 14px);
  --t-md:   clamp(14px, 1.9vh, 17px);
  --t-lg:   clamp(16px, 2.1vh, 19px);
  /* Poziom pośredni: tytuł pozycji na liście — wyraźnie mniejszy
     od nagłówka sekcji, żeby hierarchia była czytelna. */
  --t-2xl:  clamp(20px, min(3.2vh, 2vw), 28px);
  /* Nagłówek sekcji patrzy i na wysokość, i na szerokość — na wąskim ekranie
     nie może przerosnąć tytułu hero, który skaluje się tylko szerokością. */
  --t-3xl:  clamp(24px, min(4.4vh, 2.8vw), 40px);
  --t-hero: clamp(2rem, 0.9rem + 4vw, 4.25rem);

  /* Rytm pionowy — siatka 8 pt, ściskana na niskich ekranach */
  --space-1: 8px;
  --space-2: clamp(12px, 1.8vh, 16px);
  --space-3: clamp(16px, 2.7vh, 24px);
  --space-4: clamp(24px, 4.4vh, 40px);
  --space-5: clamp(32px, 7vh, 64px);

  --nav-h: 72px;
  /* Czarna ramka wokół białych blatów — taka sama z każdej strony
     i równa wysokości górnej nawigacji. */
  --frame: var(--nav-h);

  --radius:    20px;
  --radius-sm: 12px;
  --radius-xs: 6px;
  --radius-panel: 32px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Ruch: wyjście wykładnicze — szybki start, długie dochodzenie do celu.
     Stąd wrażenie, że element sam się wytraca, a nie zatrzymuje. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-2: 900ms;
  --dur-3: 1200ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sekcje mają własny górny odstęp pod nawigację (`.section` padding-block),
     więc dokładanie tu drugiego offsetu odsuwałoby kadr o kolejne 88px. */
  scroll-padding-top: 0;
  background: var(--page);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--card);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: var(--t-sm);
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* Jedna linia wyrównania na całej stronie: wszystko odsunięte od krawędzi
   o --frame, więc czarna ramka wokół blatów jest równa z każdej strony. */
.wrap {
  width: 100%;
  max-width: calc(1200px + 2 * var(--frame));
  margin-inline: auto;
  padding-inline: var(--frame);
}
.wrap--narrow { max-width: calc(820px + 2 * var(--frame)); margin-inline: auto; }

/* Zaokrąglony blat leżący na tle strony — hero i sekcja kontaktowa.
   Biel odcina go od szarości tła, a włos obrysu domyka krawędź także tam,
   gdzie blat wypełnia wideo w niemal tym samym odcieniu co tło.
   `outline` zamiast `border` — nie dokłada się do wymiarów. */
.panel {
  --bg:        var(--card);
  --surface:   var(--card-2);

  background: var(--card);
  border-radius: var(--radius-panel);
  outline: 1px solid var(--rule);
  outline-offset: -1px;
  padding: var(--space-4);
}

/* Każda sekcja wypełnia jeden ekran; rośnie tylko, gdy treść tego wymaga. */
.section {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + var(--space-4)) var(--space-4);
  background: var(--bg);
  color: var(--fg);
}

/* Naprowadzanie na sekcje: przewijanie zawsze domyka kadr do sekcji, nie da się
   stanąć w pół drogi (Michał: „nie ma być opcji zatrzymywania się pomiędzy sekcjami").
   Wyłączone przy `prefers-reduced-motion` i na niskich oknach, gdzie prawie każda
   sekcja jest wyższa od ekranu i snap tylko by przeszkadzał. */
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) {
  /* Naprowadzanie działa tylko tam, gdzie strona jest zbudowana z ekranów,
     czyli na stronie głównej. Podstrony prawne to ciągły tekst. */
  html:has(.hero) { scroll-snap-type: y mandatory; }
  .hero,
  .section { scroll-snap-align: start; }

  /* Sekcja wyższa od ekranu (#problemy) musi dać się doczytać do końca. Bez tego
     `mandatory` przeskakiwałby z jej góry wprost do następnej sekcji i dolne
     pozycje listy nigdy nie byłyby widoczne. Zerowej wysokości znacznik przy dolnej
     krawędzi daje drugi punkt zaczepienia; w sekcjach równych ekranowi pokrywa się
     z pierwszym, więc niczego nie zmienia. */
  .section { position: relative; }
  .section::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    pointer-events: none;
    scroll-snap-align: end;
  }

  /* Stopka jest niższa od ekranu i nie ma własnego punktu — bez tego `mandatory`
     trzymałby kadr na ostatniej sekcji i nie dałoby się jej zobaczyć. */
  .footer { scroll-snap-align: end; }
}
.section > .wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section__head {
  margin-bottom: var(--space-4);
}

/* ---------- Ekran z jednym zdaniem ---------- */

/* Wniosek z poprzedniej sekcji dostaje własny ekran: nic poza jednym zdaniem,
   więc czytelnik musi się przy nim zatrzymać. Padding jest równy z góry i z dołu
   (`.section` daje u góry dodatkowo wysokość nawigacji), bo przy jednym elemencie
   każde przesunięcie względem środka ekranu od razu widać. */
.section--statement {
  padding-block: calc(var(--nav-h) + var(--space-4));
}

/* Stopień pisma między tytułem hero (68px) a nagłówkiem sekcji (40px), bliżej hero.
   Nie może być równy hero: tytuł hero jest szeryfowy, o niskiej wysokości x, a to
   zdanie jest w Interze, który przy tym samym stopniu rysuje się optycznie większy
   i zaczyna konkurować z tytułem strony. 48px daje 1,2 nagłówka sekcji, więc ekran
   czyta się jak wyższy poziom niż sekcja, ale nie jak drugi tytuł strony.
   Miary nie ograniczam — pilnują jej wpisane w treść podziały linii. */
.statement {
  font-size: clamp(26px, min(5.4vh, 3.4vw), 48px);
}

.statement__text {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: balance;
}

/* Podział linii wpisany w treść, nie zostawiony przeglądarce: każda linia to osobna
   część zdania (przecinek, dwukropek, zdanie podrzędne). Na telefonie wyłączony,
   bo najdłuższa linia nie mieści się w kolumnie i łamałaby się po raz drugi —
   tekst strzępiłby się na urywki po dwa słowa. */
.statement__line {
  display: block;
}

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

.h2 {
  margin: 0;
  font-size: var(--t-3xl);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: pretty;
}
.h2:not(:last-child) { margin-bottom: var(--space-3); }

.lead {
  font-size: var(--t-lg);
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
  max-width: 46ch;
}

/* Nagłówki sekcji jednym krojem — wyróżnienie zostaje tylko w znaczeniu,
   nie w typografii. */
.accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ---------- Przycisk ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font: inherit;
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { background: transparent; color: var(--fg); }
.btn:active { transform: scale(0.98); }

.btn--sm { min-height: 40px; padding: 8px 20px; font-size: var(--t-sm); }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: var(--t-md); }
.btn--block { width: 100%; }

/* ---------- Nawigacja ---------- */

/* Pasek w kolorze tła strony — bez blur-u i bez linii pod spodem. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--page);
  color: var(--ink);
}
/* Ta sama mechanika co `.wrap` — sygnatura i przycisk stają w linii treści
   sekcji, zamiast wisieć przy samej krawędzi okna. */
.nav__inner {
  height: 100%;
  width: 100%;
  max-width: calc(1200px + 2 * var(--frame));
  margin-inline: auto;
  padding-inline: var(--frame);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sygnatura tym samym krojem co tytuł hero — nazwisko ma brzmieć jednym głosem
   w obu miejscach. Instrument Serif ma niską wysokość x i cienkie kreski, więc
   przy stopniu Intera wyglądał jak przypis; własny, wyraźnie większy rozmiar
   przywraca mu wagę wobec przycisku po drugiej stronie paska. */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  font-family: var(--font-display);
  font-size: clamp(23px, 3.3vh, 30px);
  /* Zwężenie do 80% — `scale`, a nie `transform`, bo ten drugi jest zajęty
     przez animację wejścia. Origin po lewej, żeby sygnatura została w rogu. */
  scale: var(--display-squeeze) 1;
  transform-origin: left center;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  /* Body wygładza tekst na szaro (`antialiased`), co na jasnym tle dodatkowo
     ścieńcza szeryfowe włosy. Subpikselowe wygładzanie oddaje im grubość. */
  -webkit-font-smoothing: auto;
}

/* Prawa strona paska: wybór języka i przycisk stoją w jednej grupie, żeby
   `space-between` rozsuwał je razem od sygnatury. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Wybór języka: na pasku widać tylko język, w którym stoi strona. Kliknięcie
   rozwija listę i dopiero z niej wybiera się wersję. */
.lang {
  position: relative;
  display: inline-flex;
}

.lang__toggle {
  /* Bez domyślnego trójkącika `summary`. */
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Ta sama pigułka co `.btn--sm`, tylko pusta w środku — para do ciemnego
     przycisku obok: jedna waga wizualna niżej, ten sam kształt i wysokość. */
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.lang__toggle::-webkit-details-marker { display: none; }
.lang__toggle:hover { background: var(--fg); color: var(--bg); }

.lang__caret {
  width: 9px;
  height: 6px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 180ms var(--ease);
}
.lang[open] .lang__caret { rotate: 180deg; }

.lang__menu {
  position: absolute;
  /* Prawa krawędź listy równo z prawą krawędzią przycisku. */
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 100%;
  padding: 6px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
}
@media (prefers-reduced-motion: no-preference) {
  .lang[open] .lang__menu { animation: lang-in 180ms var(--ease-out) both; }
}

@keyframes lang-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}

.lang__option {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--fg-muted);
  font-size: var(--t-sm);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.lang__option:hover { background: var(--fg); color: var(--bg); }
.lang__option[aria-current] { color: var(--fg); font-weight: 500; }

/* Sygnet: mała czarna kropka. Wymiar w `em`, więc skaluje się z sygnaturą. */
.nav__mark {
  flex: none;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--ink);
  /* Sygnatura jest zwężona do 80%; kropka odrabia to z powrotem, żeby
     została kołem, a nie elipsą. */
  scale: calc(1 / var(--display-squeeze)) 1;
  transform-origin: left center;
}

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

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding: var(--nav-h) var(--frame) var(--frame);
  background: var(--bg);
}

.hero__panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--space-5);
}

/* Tło hero — wideo bez żadnej nakładki. Kadr ustawiają zmienne --hero-v-*. */
.hero__bg {
  position: absolute;
  inset: 0;
  background-color: var(--card);
}
/* Dwie warstwy wideo — pętla robiona przenikaniem, żeby nie było czarnej klatki. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(calc(var(--hero-v-x) * 1%), calc(var(--hero-v-y) * 1%))
    scale(var(--hero-v-scale));
}
.hero__video:first-of-type { z-index: 1; }

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__content { max-width: 640px; }

/* Podpis autora — przyklejony do tytułu, żeby czytało się jako jedna grupa. */
.hero__name {
  margin: 0 0 var(--space-1);
  /* ten sam stopień pisma co podtytuł */
  font-size: var(--t-md);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--fg);
}

/* Cały tytuł krojem akcentowym — jedna linia, nigdy się nie łamie. */
.hero__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.05;
  letter-spacing: 0.005em;
  white-space: nowrap;
  scale: var(--display-squeeze) 1;
  transform-origin: left center;
}

/* Trzy równe linie: `balance` wyrównuje długości, a max-width trzyma tekst
   z dala od portretu w wideo. */
.hero__sub {
  margin: 0 0 var(--space-4);
  max-width: 58ch;
  font-size: var(--t-md);
  line-height: 1.6;
  letter-spacing: -0.015em;
  /* Michał chce podtytuł w pełnym kontraście, nie w szarości drugiego planu. */
  color: var(--fg);
  text-wrap: balance;
}

/* ---------- Dla kogo ---------- */

/* Trzy kwadratowe kafle z głównymi klientami. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

/* Zdjęcie wypełnia kafel, podpis leży na jego dolnej krawędzi. Przyciemnienie
   pod tekstem jest funkcjonalne — bez niego biały napis ginie na jasnym kadrze. */
.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  isolation: isolate;
}

.tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-4) var(--space-2) var(--space-2);
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.78) 0%,
    rgb(0 0 0 / 0.45) 45%,
    rgb(0 0 0 / 0) 100%
  );
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

/* Zdanie schowane pod znakiem zapytania przy prawej krawędzi siatki.
   Dymek otwiera się po najechaniu, po kliknięciu i po dojściu klawiaturą. */
.hint-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hint {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--t-md);
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hint:hover,
.hint:focus {
  color: var(--fg);
  border-color: var(--fg);
}

/* Gwiazda rysowana kształtem, nie znakiem z fontu — dzięki temu wygląda tak samo
   niezależnie od kroju i siada dokładnie w środku koła. */
.hint__star {
  display: block;
  width: 15px;
  height: 15px;
}

.hint__bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 2;
  width: min(46ch, 100%);
  padding: var(--space-2);
  border-radius: 20px;
  background: var(--surface);
  outline: 1px solid var(--rule);
  outline-offset: -1px;
  color: var(--fg);
  font-size: var(--t-md);
  line-height: 1.5;
  letter-spacing: -0.015em;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0.2s;
}

.hint:hover + .hint__bubble,
.hint:focus + .hint__bubble {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* ---------- Problemy — spis ---------- */

/* Sześć problemów jako spis treści: numer w stałej kolumnie, obok tytuł
   i jedno zdanie, między pozycjami włos linii. Wprost na czarnym tle —
   bez blatu, tak jak zastrzeżenie pod kaflami w sekcji „Dla kogo". */
.probs {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: prob;
}

.prob {
  /* Numer trzyma stałą kolumnę, więc wszystkie tytuły stoją w jednej osi. */
  --num-w: clamp(72px, 12vh, 132px);
  display: grid;
  grid-template-columns: var(--num-w) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-3);
}

.prob + .prob { border-top: 1px solid var(--rule); }

/* Liczba jest elementem graficznym, nie treścią — stąd licznik, a nie tekst
   w znaczniku. Krój akcentowy, ten sam co w tytule hero. */
.prob::before {
  counter-increment: prob;
  content: counter(prob, decimal-leading-zero);
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 10.2vh, 102px);
  scale: var(--display-squeeze) 1;
  transform-origin: left center;
  line-height: 0.85;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.prob__title {
  grid-column: 2;
  margin: 0 0 8px;
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.prob__text {
  grid-column: 2;
  margin: 0;
  /* Dwie linie: miara ograniczona, a `balance` wyrównuje ich długość,
     żeby druga nie zostawała krótkim ogonem. */
  max-width: 72ch;
  font-size: var(--t-lg);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--fg-2);
  text-wrap: balance;
}

/* ---------- Rozwiązanie ---------- */

/* Sześć kroków w tej samej formie co kafle „Dla kogo": zdjęcie wypełnia kafel,
   podpis leży na jego dolnej krawędzi. Siatka nierówna — pierwszy i ostatni krok
   (początek i efekt) dostają podwójną szerokość. */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.step {
  position: relative;
  height: clamp(180px, 30vh, 268px);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  isolation: isolate;
}

.step:first-child,
.step:last-child {
  grid-column: span 2;
}

.step__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Szerokie kafle kadrują zdjęcie mocniej niż wysokie — przy wyśrodkowanym
   kadrze ostatniemu zdjęciu ucinało czubek głowy. */
.step:last-child .step__img {
  object-position: 50% 15%;
}

/* Widać sam tytuł; opis rozwija się pod kursorem. Przyciemnienie jest
   funkcjonalne — bez niego biały tekst ginie na jasnym kadrze. */
.step__label {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  grid-template-rows: auto 0fr;
  padding: var(--space-4) var(--space-2) var(--space-2);
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.78) 0%,
    rgb(0 0 0 / 0.45) 45%,
    rgb(0 0 0 / 0) 100%
  );
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  transition: grid-template-rows 350ms var(--ease);
}

.step:hover .step__label,
.step:focus-within .step__label {
  grid-template-rows: auto 1fr;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.88) 0%,
    rgb(0 0 0 / 0.7) 55%,
    rgb(0 0 0 / 0) 100%
  );
}

/* Bez kursora (dotyk) nie ma czym najechać — opisy zostają odsłonięte. */
@media (hover: none) {
  .step__label {
    grid-template-rows: auto 1fr;
    background: linear-gradient(
      to top,
      rgb(0 0 0 / 0.88) 0%,
      rgb(0 0 0 / 0.7) 55%,
      rgb(0 0 0 / 0) 100%
    );
  }
}

.step__title {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

.step__text {
  margin: 0;
  padding-top: var(--space-1);
  overflow: hidden;
  font-size: var(--t-md);
  line-height: 1.5;
}

/* ---------- O mnie ---------- */

.about {
  display: grid;
  /* Kolumna tekstu szersza niż akapity (te trzyma `max-width: 50ch`) —
     tyle miejsca potrzebuje nagłówek na jedną linię. */
  grid-template-columns: minmax(0, 380px) minmax(0, 680px);
  justify-content: center;
  gap: var(--space-5);
  align-items: center;
}

.about__media { margin: 0; }
.about__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface);
  border-radius: var(--radius);
}
/* Nagłówek pyta, imię pod nim odpowiada — dlatego stoi blisko tytułu
   i w pełnym kontraście, a dopiero pod nim zaczyna się opis. */
.about__title {
  margin-bottom: var(--space-1);
  white-space: nowrap;
}
.about__name {
  margin: 0 0 var(--space-3);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg);
}
/* Cały blok o mnie jednym krojem, jednym stopniem i w pełnym kontraście —
   podpis i opis mają czytać się jako jedna wypowiedź (Michał wprost tego chciał). */
.about__text {
  max-width: 50ch;
  color: var(--fg);
  text-wrap: balance;
}
.about__text:last-child { margin-bottom: 0; }

/* ---------- Formularz ---------- */

/* Blat kontaktowy trzyma tę samą ramkę co hero. */
#kontakt { padding-block: calc(var(--nav-h) + var(--space-2)) var(--frame); }
/* Równa ramka wewnętrzna: góra = dół = boki. Blat wypełnia ekran tak jak hero. */
/* Blat trzyma tylko wstęp, formularz i notę — tytuł sekcji stoi nad nim
   na czarnym tle, tak jak w pozostałych sekcjach. */
.contact.panel {
  flex: 0 1 auto;
  padding: clamp(20px, 3.6vh, 32px);
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  grid-template-rows: 1fr auto;
  gap: var(--space-5);
  align-items: stretch;
}
.contact__intro { grid-column: 1; grid-row: 1; }
.contact__legal { grid-column: 1; grid-row: 2; }
.form { grid-column: 2; grid-row: 1 / -1; }

/* Wstęp startuje równo z pierwszym polem formularza, nota prawna siada
   na dole blatu — tekst nie wisi w środku pustej kolumny. */
.contact__intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Nota o dostępności terminów. Ten sam stopień pisma i ta sama miara co wstęp
   nad nią — obie mają czytać się jako jedna wypowiedź. Bez ramek i wyróżnień,
   informacja ma brzmieć rzeczowo, a nie jak nalepka „ostatnie miejsca". */
.contact__note {
  margin: 0;
  max-width: 46ch;
  font-size: var(--t-lg);
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: var(--fg-2);
}

/* Podział linii wpisany w treść, nie zostawiony przeglądarce: każda linia kończy
   się na kropce, przecinku albo końcu frazy, więc oko wraca do lewej krawędzi
   w miejscu pauzy w zdaniu. Na telefonie wyłączony — kolumna jest węższa niż
   te linie, więc łamałyby się po raz drugi i tekst strzępiłby się na urywki. */
.contact__intro .line {
  display: block;
}

/* Sekcja z formularzem jest najgęstsza — tytuł stoi bliżej blatu niż gdzie indziej,
   żeby całość zmieściła się na jednym ekranie także na niskim laptopie. */
#kontakt .section__head { margin-bottom: var(--space-3); }

/* Jedna kolumna — pola rozkładają się na całą wysokość blatu. */
.form {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Na niskim oknie oddech przy krawędzi blatu ma pierwszeństwo — miejsce
   dokłada ciaśniejszy formularz, nie węższy margines. */
@media (max-height: 780px) {
  .form { padding: var(--space-2); }
}

/* Etykieta należy do pola pod nią, więc odstęp nad polem musi być wyraźnie
   mniejszy niż odstęp między polami — inaczej wszystko zlewa się w jeden pas. */
.field { margin-bottom: var(--space-2); }

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}
.req { color: var(--fg); }

.field__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: var(--t-md);
  letter-spacing: -0.015em;
  transition: border-color 180ms var(--ease);
}
.field__input:hover { border-color: var(--fg-faint); }
.field__input:focus { outline: none; border-color: var(--fg); }

/* Telefon — kierunkowy jest stały, więc zostaje etykietą, nie polem do wpisania. */
.phone { display: flex; }

/* Kierunkowy to lista wyboru z domyślnym +48. Natywny wygląd pola jest zdjęty
   (`appearance: none`), bo systemowy przycisk macOS ma własne tło i zaokrąglenia,
   które gryzą się z resztą formularza. Strzałka wjeżdża jako tło SVG — kolor
   wpisany na sztywno, bo w `url(data:...)` nie da się użyć zmiennej (to `--muted`). */
.phone__prefix {
  appearance: none;
  padding-inline: 14px 30px;
  border: 1px solid var(--rule);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235E5E5B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
      no-repeat right 12px center / 10px 6px,
    var(--bg);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: var(--t-md);
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: border-color 180ms var(--ease);
}
.phone__input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.phone:focus-within .phone__prefix { border-color: var(--fg); }

.field.is-invalid .field__input { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.field.is-invalid .phone__prefix { border-color: var(--fg); }
.field.is-invalid .checkbox__box { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }

.field--check { margin-bottom: 0; }
/* Zgody to osobna grupa — oddzielona od pól i od przycisku. */
.field:not(.field--check) + .field--check { margin-top: var(--space-1); }
.field--check + .field--check { margin-top: 6px; }
.form .btn { margin-top: var(--space-2); }

.checkbox {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 2px 0;
  cursor: pointer;
}
.checkbox input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
}
.checkbox__box {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--fg-faint);
  background: transparent;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.checkbox input:checked + .checkbox__box {
  background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
  border-color: var(--fg);
}
.checkbox input:focus-visible + .checkbox__box {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.checkbox__text { font-size: var(--t-sm); line-height: 1.5; color: var(--fg-2); }
.checkbox__text a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.form__status {
  margin: var(--space-2) 0 0;
  font-size: var(--t-sm);
}
.form__status:empty { margin: 0; }

.contact__legal {
  margin: 0;
  max-width: 46ch;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--fg);
}

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

.faq {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0 var(--space-4);
}
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 0; }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.35;
  transition: color 160ms var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { text-decoration: underline; text-underline-offset: 5px; }

.faq__q::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 8px;
  background: currentColor;
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
  transition: transform 260ms var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }

.faq__a { padding-bottom: var(--space-3); max-width: 64ch; }
.faq__a p {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--t-md);
  line-height: 1.6;
  /* Przeglądarka wyrównuje długość wierszy i nie zostawia pojedynczego słowa
     w ostatniej linii. Jednoliterowe „i", „w", „z" trzyma przy następnym słowie
     twarda spacja wpisana w treść. */
  text-wrap: pretty;
}
.faq__item[open] .faq__a { animation: reveal 300ms var(--ease); }

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

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

/* Jeden pasek na całą szerokość, jak nawigacja na górze. */
.footer {
  padding-block: var(--space-3);
  background: var(--bg);
  color: var(--fg);
}

.footer__inner {
  padding-inline: var(--frame);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.footer__link {
  font-size: var(--t-xs);
  color: var(--fg-2);
  text-decoration: none;
  text-underline-offset: 4px;
}
.footer__link:hover { color: var(--fg); text-decoration: underline; }

.footer__copy {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--fg-faint);
}

/* ---------- Podstrony prawne ---------- */

/* Dokument czyta się z góry na dół, więc nie obowiązuje go rytm ekranów:
   treść leży na jednym białym blacie, tak jak hero i sekcja kontaktowa. */
.legal {
  display: block;
  padding-block: calc(var(--nav-h) + var(--space-4)) var(--space-5);
}

.legal__panel { padding: clamp(24px, 4vh, 48px); }

.legal__meta {
  margin: 0 0 var(--space-1);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

.legal__title {
  margin: 0 0 var(--space-3);
  font-size: var(--t-3xl);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.legal__intro {
  margin: 0 0 var(--space-4);
  max-width: 68ch;
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--fg-2);
}

.legal__block + .legal__block { margin-top: var(--space-4); }

.legal__h {
  margin: 0 0 var(--space-2);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.3;
}

/* Numeracja ustępów idzie z licznika listy, więc dopisanie punktu nie wymaga
   przenumerowania treści. */
.legal ol,
.legal ul {
  margin: 0;
  padding-left: 1.6em;
  max-width: 78ch;
}
.legal li {
  margin-bottom: var(--space-1);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--fg-2);
}
.legal li:last-child { margin-bottom: 0; }
.legal li ol,
.legal li ul { margin-top: var(--space-1); }

.legal p {
  margin: 0 0 var(--space-2);
  max-width: 78ch;
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--fg-2);
}
.legal p:last-child { margin-bottom: 0; }

.legal strong { color: var(--fg); font-weight: 600; }
.legal a { color: var(--fg); text-underline-offset: 3px; }

/* Wyróżnienie prawa do sprzeciwu — art. 21 ust. 4 RODO wymaga, żeby ta
   informacja była podana wyraźnie i odrębnie od pozostałych. */
.legal__callout {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  max-width: 78ch;
  border-left: 2px solid var(--fg);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal__callout-h {
  margin: 0 0 var(--space-1);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--fg);
}

/* ============================================================
   Ruch
   Jedna zasada: kadr ma się wyostrzać przy wejściu i cofać w głąb
   przy wyjściu. Nic nie miga, nic nie blokuje przewijania.
   ============================================================ */

/* ---------- Wejście treści przy scrollu ---------- */

/* Rozmycie zamiast samego przesunięcia — element „dochodzi do ostrości",
   zamiast wjeżdżać. --i ustawia JS na rodzeństwie, stąd kaskada. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  filter: blur(6px);
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    filter var(--dur-2) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* Portret i tekst „O mnie" wchodzą po kolei, nie równocześnie. */
.about__body { --i: 1; }

/* Nagłówek sekcji odsłania maska, a nie przesunięcie — dlatego zdejmuję
   z niego bazowy reveal i przenoszę ruch na sam napis. Ujemne wartości
   inset trzymają ogonki liter (ą, ę) poza linią cięcia. */
.section__head.reveal,
.statement.reveal {
  opacity: 1;
  transform: none;
  filter: none;
}
.section__head.reveal .h2,
.statement.reveal .statement__text {
  clip-path: inset(-0.15em 0 105% 0);
  transform: translate3d(0, 0.22em, 0);
  transition:
    clip-path var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}
.section__head.reveal.is-visible .h2,
.statement.reveal.is-visible .statement__text {
  clip-path: inset(-0.15em 0 -0.25em 0);
  transform: none;
}

/* ---------- Sekwencja startowa ---------- */

@media (prefers-reduced-motion: no-preference) {
  .nav__brand { animation: intro-up 800ms var(--ease-out) 160ms both; }
  .lang       { animation: intro-up 800ms var(--ease-out) 200ms both; }
  .nav .btn   { animation: intro-up 800ms var(--ease-out) 240ms both; }

  .hero__bg    { animation: intro-bg 1600ms var(--ease-out) both; }
  .hero__name  { animation: intro-up 900ms var(--ease-out) 260ms both; }
  .hero__title { animation: intro-mask var(--dur-3) var(--ease-out) 360ms both; }
  .hero__sub   { animation: intro-up 900ms var(--ease-out) 540ms both; }
  .hero .btn--lg { animation: intro-up 900ms var(--ease-out) 660ms both; }
}

@keyframes intro-up {
  from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Tytuł hero wyjeżdża spod własnej linii bazowej. */
@keyframes intro-mask {
  from {
    opacity: 0;
    clip-path: inset(-0.15em 0 105% 0);
    transform: translate3d(0, 0.2em, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(-0.15em 0 -0.25em 0);
    transform: none;
  }
}

/* Kadr wideo osiada, zamiast pojawić się gotowy. */
@keyframes intro-bg {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Przejścia między sekcjami ---------- */

/* Sekcja schodząca z ekranu cofa się w głąb i gaśnie — to jest cały efekt
   przejścia. Animacja jest przypięta do pozycji przewijania (view()),
   więc idzie dokładnie za palcem, w obie strony, bez skryptu i bez
   przejmowania scrolla. Przeglądarki bez obsługi po prostu tego nie widzą. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section > .wrap,
    .hero__panel {
      animation: sec-depth linear both;
      animation-timeline: view();
      /* Efekt rusza dopiero, gdy blisko połowa sekcji jest już za górną
         krawędzią — czytanie odbywa się w pełnym kontraście. */
      animation-range: exit 40% exit 90%;
      will-change: transform, opacity;
    }
  }
}

@keyframes sec-depth {
  to { opacity: 0.3; transform: translate3d(0, -24px, 0) scale(0.955); }
}

/* ---------- Mikrointerakcje ---------- */

@media (hover: hover) {
  .tile__img,
  .step__img {
    transition: transform 900ms var(--ease-out);
  }
  .tile:hover .tile__img,
  .step:hover .step__img { transform: scale(1.04); }
}

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

@media (max-width: 960px) {
  :root { --frame: 40px; }

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

  .about,
  .contact {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  /* Jedna kolumna: tekst → formularz → nota prawna na samym dole. */
  .contact { grid-template-rows: none; }
  .contact__intro,
  .contact__legal,
  .form { grid-column: 1; grid-row: auto; }
  .about__media { max-width: 340px; }
  /* W jednej kolumnie nagłówek musi móc się złamać. */
  .about__title { white-space: normal; }
}

@media (max-width: 640px) {
  /* Na telefonie 72 px ramki zjadłoby połowę ekranu — węższa, ale nadal równa. */
  :root { --frame: 16px; }

  .panel { border-radius: 24px; padding: var(--space-3); }
  .hero__panel { padding: var(--space-4) var(--space-3); }

  /* Wąski ekran wycina z kadru 16:9 tylko ok. 30% szerokości. Przy środkowym
     kadrowaniu wypada na to portret i czarny tekst hero leży na włosach —
     nieczytelnie. Kadr przesunięty w lewo pokazuje jasną ścianę, na której
     tekst zachowuje pełny kontrast. */
  .hero__video { object-position: 28% center; }
  .contact.panel { padding: var(--space-3); }
  .section__head { margin-bottom: var(--space-2); }

  /* Wymuszone podziały linii są tu szersze niż kolumna: zdanie zawija się samo,
     a `balance` wyrównuje długości linii. */
  .statement__line,
  .contact__intro .line { display: inline; }

  /* Na telefonie karty przewijają się w poziomie — sekcja zostaje na jednym
     ekranie, a tekst nie musi się kurczyć. Kolejna karta wystaje zza krawędzi,
     więc gest jest czytelny. */
  .steps,
  .tiles {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--frame));
    padding-inline: var(--frame);
  }
  .steps::-webkit-scrollbar,
  .tiles::-webkit-scrollbar { display: none; }

  .step,
  .tile {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  /* Pionowy kadr zamiast poziomego: karta wypełnia ekran telefonu tak, jak
     poziomy kafel wypełnia szeroki monitor, a opis kroku mieści się w całości. */
  .tile { aspect-ratio: 3 / 4; }
  .step { height: clamp(320px, 46vh, 440px); }

  /* Na telefonie kolumna z numerem zjadałaby połowę wiersza — liczba staje
     nad tytułem, a tekst dostaje całą szerokość. */
  .prob {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-2);
  }
  .prob::before {
    grid-row: auto;
    grid-column: 1;
    margin-bottom: 4px;
    font-size: 40px;
    line-height: 1;
  }
  .prob__title,
  .prob__text { grid-column: 1; }

  .about { gap: var(--space-1); }
  .about__media { max-width: 150px; }

  .contact { gap: var(--space-2); }
  /* Nota trzyma stopień wstępu także tam, gdzie wstęp schodzi o poziom niżej. */
  .contact__intro .lead,
  .contact__note { font-size: var(--t-md); }
  .form { padding: var(--space-2); }
  .field,
  .field--check { margin-bottom: 10px; }
  .field__label { margin-bottom: 4px; }
  .field__input { min-height: 44px; padding: 10px 14px; }
  .checkbox { min-height: 44px; }

  .faq { padding-inline: var(--space-3); }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .section__head.reveal .h2 { clip-path: none; transform: none; }
}