/* =====================================================================
   ASSISTO — warstwa wspólna dla wszystkich stron w `hosting/`.

   Trzyma trzy rzeczy, które MUSZĄ być identyczne na każdej podstronie:
   zmienne kolorów, przyklejony nagłówek z menu i stopkę. Reszta wyglądu
   zostaje w <style> danej strony.

   ⚠️ STRONA JEST WYŁĄCZNIE JASNA (decyzja 2026-09-19). Ciemny motyw
   i przełącznik zostały usunięte: to witryna reklamowo-informacyjna,
   a nie narzędzie, z którego korzysta się godzinami po zmroku. Wszystko
   — rysunki produktów, kolorowe plamy, makieta telefonu — było dobierane
   pod jasne tło i tam wygląda lepiej. `color-scheme: light` na `:root`
   mówi przeglądarce, żeby nie przemalowywała formantów.
   Konsekwencja: NIE dokładać reguł `prefers-color-scheme` ani
   `[data-theme]` — jeśli motyw kiedyś wróci, wraca też cała trójka reguł
   i mikroskrypt w <head> każdej strony.
   ===================================================================== */

/* ---------------------------------------------------------------------
   FONT Z WŁASNEGO SERWERA, NIE Z GOOGLE FONTS.

   Wcześniej arkusz szedł z `fonts.googleapis.com`, a plik kroju z
   `fonts.gstatic.com` — czyli ADRES IP KAŻDEGO ODWIEDZAJĄCEGO trafiał do
   Google przy każdym wejściu. To nie ciasteczko, więc żaden baner by tego
   nie załatwił; sąd w Monachium zasądził już odszkodowanie dokładnie za
   taki przypadek (LG München I, 3 O 17493/20). Po przeniesieniu plików
   do `/fonts/` strona nie wysyła ani jednego żądania poza własną domenę.

   To jedna rodzina w wariancie ZMIENNYM (`font-weight: 400 900`), więc
   jeden plik na podzbiór obsługuje wszystkie grubości od 400 do 900 —
   zamiast pięciu osobnych plików na każdą.

   ⚠️ `latin-ext` JEST OBOWIĄZKOWY: polskie ą, ć, ę, ł, ń, ś, ź, ż leżą
   w zakresie U+0100–02BA, poza podstawowym `latin`. Bez tego pliku
   przeglądarka podstawi za nie krój systemowy i tekst będzie „skakał”
   na samych ogonkach.

   Licencja: SIL Open Font License 1.1, pełny tekst w `/fonts/OFL.txt`.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/nunito-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: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/nunito-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 {
  color-scheme: light;

  --bg: #faf9f6;          /* ciepła kość słoniowa — czysta biel na dużym
                             ekranie męczy przy dłuższym czytaniu          */
  --panel: #ffffff;       /* karty, sekcje przełamujące rytm               */
  --line: #e7e5e0;
  --ink: #1f2937;         /* nagłówki                                      */
  --body: #4b5563;        /* tekst                                         */
  --muted: #6b7280;       /* podpisy, stopka                               */
  --brand: #5b54e8;
  --brand-soft: #eef0ff;
  --brand-line: #d9d7ff;
  --code-bg: #f3f2ef;
  --shadow: rgba(49, 46, 129, 0.45);
  --head-bg: rgba(250, 249, 246, 0.9);
  /* Sekcje „przełamujące” są PÓŁPRZEZROCZYSTE, żeby rozsypane w tle
     rysunki produktów prześwitywały przez nie jak przez mleczne szkło.
     Kryjąca biel odcinałaby je równo przy każdej krawędzi sekcji. */
  --panel-glass: rgba(255, 255, 255, 0.84);
  --brand-solid: #5b54e8;
  --brand-solid-ink: #ffffff;

  /* ---- RUCH POD KURSOREM — JEDNA PARA LICZB NA CAŁĄ WITRYNĘ ----------
     Obowiązuje WSZYSTKO, co reaguje na kursor: pozycje menu i kreskę pod
     nimi, oba rodzaje przycisków, adres e-mail w stopce sekcji kontaktu,
     karty funkcji, plakietki na telefonie i rysunki w pasie katalogu.
     Rozjechane czasy czyta się jako niedbałość szybciej niż sam zły czas,
     więc NOWY ELEMENT Z `:hover` BIERZE TE ZMIENNE, nie własne liczby.

     ⚠️ UNIESIENIE JEST KRÓTSZE NIŻ OPADANIE i to nie pomyłka. Rzecz
     odrywa się od strony zdecydowanie, a wraca miękko — jakby miała masę
     i osiadała. Równe czasy w obie strony dają ruch mechaniczny,
     „przełączony”; to właśnie ta asymetria czyta się jako spokój.
     Technicznie: DŁUŻSZY czas stoi w regule BAZOWEJ (ona rządzi
     powrotem), krótszy dokłada `:hover` przez `transition-duration`.

     ⚠️ KRZYWA MA LEKKIE WEJŚCIE (0.32 0.08), nie czyste `ease-out`.
     Popularne `cubic-bezier(0.22, 1, 0.36, 1)` przy 0,2 s jest w
     porządku, ale rozciągnięte do sekundy rusza szarpnięciem i potem
     pełznie — cała prędkość siedzi w pierwszych 15% czasu. Przy wolnym
     ruchu trzeba rozbiegu na starcie.

     ⚠️ `:active` NIE BIERZE TYCH CZASÓW. Wciśnięcie musi odpowiadać
     natychmiast, inaczej przycisk sprawia wrażenie zepsutego. */
  --unies: 0.8s;    /* podnoszenie — kursor wchodzi */
  --osiad: 1.05s;   /* opadanie — kursor wychodzi   */
  --krzywa: cubic-bezier(0.32, 0.08, 0.24, 1);
}



* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------------
   PRZEJŚCIE MIĘDZY PODSTRONAMI. Natywne View Transitions — przeglądarka
   sama przenika stary widok w nowy zamiast mrugnąć bielą. Zero bibliotek;
   tam, gdzie API nie ma, strona przełącza się po staremu i nic nie traci.
   --------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.18s ease both; }
::view-transition-new(root) { animation: vt-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Pasek nagłówka NIE przenika razem z resztą — ma stać nieruchomo,
   bo jest identyczny na każdej stronie i migotałby przy każdym kliknięciu. */
header.top { view-transition-name: assisto-header; }

/* ---------------------------------------------------------------------
   ODSŁANIANIE PRZY PRZEWIJANIU. Klasę `is-in` dokłada `assisto.js`
   przez IntersectionObserver — działa w każdej przeglądarce, inaczej niż
   `animation-timeline`, które ma dziś tylko część z nich. Elementy bez
   JS-a zostają widoczne (klasa startowa dokładana jest skryptem).
   --------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

body {
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  /* Układ odniesienia dla `.scatter`, która rozciąga się na całą
     wysokość dokumentu. Bez tego warstwa zaczepiłaby się o okno. */
  position: relative;
}

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---------------------------------------------------------------------
   NAGŁÓWEK — menu w prawym górnym rogu, przyciski BEZ TŁA.
   --------------------------------------------------------------------- */
header.top {
  position: sticky; top: 0; z-index: 60;
  background: var(--head-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
header.top[data-stuck="true"] {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px var(--shadow);
}
header.top .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 82px; position: relative;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 38px; height: 38px; object-fit: contain; display: block; }
.brand span { font-size: 23px; font-weight: 900; color: var(--ink); letter-spacing: -0.02em; }

.right { display: flex; align-items: center; gap: 4px; }

nav.menu ul { list-style: none; display: flex; align-items: center; gap: 2px; }
nav.menu a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 15px;          /* 44 px = minimalny cel dotyku */
  background: none; border: 0; border-radius: 10px;
  color: var(--body); font-weight: 700; font-size: 16px;
  text-decoration: none; white-space: nowrap;
  transition: color var(--osiad) var(--krzywa);
}
nav.menu a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 8px;
  height: 2px; border-radius: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--osiad) var(--krzywa);
}
nav.menu a:hover { color: var(--ink); transition-duration: var(--unies); }
nav.menu a:hover::after { transform: scaleX(1); transition-duration: var(--unies); }

/* Bieżące miejsce. Pasek jest na każdej stronie taki sam, więc jedyną
   wskazówką „gdzie jestem” jest podświetlenie — kolor marki i kreska
   pokazana na stałe. Na podstronach ustawia je `aria-current="page"`
   wpisane w HTML, na stronie głównej dokłada je skrypt, śledząc, która
   sekcja jest akurat na ekranie. */
nav.menu a[aria-current] { color: var(--brand); }
nav.menu a[aria-current]::after { transform: scaleX(1); }

/* „Hamburger” — też bez tła. */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  background: none; border: 0; border-radius: 12px;
  color: var(--body); cursor: pointer;
  transition: color var(--osiad) var(--krzywa);
}
.iconbtn:hover { color: var(--brand); transition-duration: var(--unies); }
.iconbtn svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Widoczna jest zawsze TA ikona, na którą przełącznik przestawi stronę,
   a nie ta opisująca stan bieżący — inaczej przycisk czyta się odwrotnie. */

.burger { display: none; }
.burger svg { width: 26px; height: 26px; stroke-width: 2.2; }
.burger .close { display: none; }
.burger[aria-expanded="true"] .open { display: none; }
.burger[aria-expanded="true"] .close { display: block; }

/* ---------------------------------------------------------------------
   PRZYCISKI BEZ TŁA — sama etykieta ze strzałką, która odjeżdża.
   --------------------------------------------------------------------- */
a.ghost {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 16px; border-radius: 12px;
  background: none; border: 0;
  color: var(--ink); font-weight: 800; font-size: 17px; text-decoration: none;
  /* 🚨 PRZYCISKI SĄ WYJĄTKIEM OD WSPÓLNEGO `--unies`/`--osiad` (2026-09-19).
     Wolny ruch działa na rzeczach, które się UNOSZĄ — kafelek odrywa się
     od strony i ma prawo robić to dostojnie. Tutaj rusza się ODSTĘP przed
     strzałką, a rozjeżdżanie się napisu przez sekundę wygląda po prostu
     na zacinanie, nie na spokój. Ten sam powód dotyczy `a.solid`
     i adresu e-mail w sekcji kontaktu (`index.html`). */
  transition: color 0.15s ease, gap 0.15s ease;
}
a.ghost svg {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
a.ghost:hover { color: var(--brand); gap: 15px; }
a.ghost.muted { color: var(--muted); font-weight: 700; }
a.ghost.muted:hover { color: var(--ink); }

/* Jeden przycisk na stronę ma PEŁNE tło — ten główny w hero. Bez niego
   wszystkie wezwania do działania ważyły tyle samo i wzrok nie wiedział,
   od czego zacząć. Menu i przyciski poboczne zostają bez tła.
   ⚠️ Kolor z osobnego tokena, nie z `--brand`: w motywie ciemnym `--brand`
   to blady lawendowy i biały napis na nim byłby nieczytelny. */
a.solid {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 14px;
  background: var(--brand-solid); color: var(--brand-solid-ink);
  border: 0; font-weight: 800; font-size: 17px; text-decoration: none;
  box-shadow: 0 14px 28px -14px var(--shadow);
  /* Szybko, jak `a.ghost` wyżej — tu też rusza się odstęp przed strzałką. */
  transition: transform 0.16s ease, box-shadow 0.16s ease, gap 0.16s ease;
}
a.solid svg {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
a.solid:hover { transform: translateY(-2px); gap: 15px; box-shadow: 0 20px 34px -16px var(--shadow); }
a.solid:active { transform: translateY(0); }

/* ---------------------------------------------------------------------
   STOPKA
   --------------------------------------------------------------------- */
footer.site { border-top: 1px solid var(--line); padding: 34px 0 46px; background: var(--panel); }
footer.site .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
footer.site .links { display: flex; flex-wrap: wrap; gap: 2px; }
footer.site a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--muted); font-weight: 700; font-size: 15px; text-decoration: none; border-radius: 10px;
  transition: color var(--osiad) var(--krzywa);
}
footer.site a:hover { color: var(--brand); transition-duration: var(--unies); }
footer.site small { color: var(--muted); opacity: 0.8; font-size: 14px; padding-left: 14px; }

/* ---------------------------------------------------------------------
   TELEFON — menu chowa się pod przycisk w prawym górnym rogu.
   --------------------------------------------------------------------- */
@media (max-width: 899px) {
  .burger { display: inline-flex; }
  nav.menu {
    /* PANEL WYSUWA SIĘ SPOD PRZYCISKU, czyli przy PRAWEJ krawędzi — nie
       na całą szerokość. Pozycje i tak są wyrównane do prawej, więc
       pasek na cały ekran zostawiał po lewej wielkie puste pole i czytał
       się jak zasłona, a nie jak lista rozwinięta z przycisku.
       ⚠️ `left: auto` jest konieczne: bez niego `left: 0` z reguły wyżej
       trzyma lewą krawędź przy zerze i `width` nie ma nic do roboty.
       ⚠️ `right: 0` to krawędź EKRANU, nie treści — pozycjonowanie
       bezwzględne liczy się od pudełka wyściółki paska, więc wyściółka
       `.wrap` jest już w tym zawarta. Ujemne wartości wypychały panel
       poza ekran i otwarcie menu dokładało poziomy pasek przewijania. */
    position: absolute; left: auto; right: 0; top: 100%;
    /* ⚠️ SZEROKOŚĆ Z TREŚCI (`max-content`), NIE UŁAMEK EKRANU. Każda
       liczba w procentach jest zgadywaniem: za mała ucina „Jak to
       działa”, za duża zostawia puste pole. `max-content` daje dokładnie
       najdłuższą pozycję plus wyściółkę, więc odstęp z lewej i z prawej
       strony napisów jest równy i zawsze się mieści — także gdyby doszła
       nowa pozycja menu. Ogranicznik jest tylko awaryjny, na wypadek
       bardzo długiej etykiety na wąskim telefonie. */
    width: max-content;
    max-width: min(76vw, 320px);
    /* Tło MUSI być kryjące. Półprzezroczyste prześwitywało treścią strony
       i pozycje menu robiły się nieczytelne — a to jedyna nawigacja,
       jaką ma użytkownik telefonu. */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
    /* Zaokrąglamy DOLNE rogi i lewy — panel czyta się jako karta
       wysunięta spod paska. Prawego górnego NIE: tam styka się
       z nagłówkiem i z krawędzią ekranu naraz, a łuk zrobiłby szparę.
       `overflow: hidden` przycina do łuku tło pozycji pod kursorem. */
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    /* ⚠️ Cień NEUTRALNY, nie ze wspólnego `--shadow` (indygo). Panel
       wisi nad kolorowymi plamami hero, gdzie fiolet przestaje czytać
       się jak cień, a zaczyna jak obwódka — ta sama sprawa co przy
       telefonie i plakietkach na stronie głównej. Dwie warstwy: wąska
       przy krawędzi odcina panel od treści pod nim, szeroka daje
       wrażenie, że wisi nad stroną. */
    box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.22),
      0 22px 38px -20px rgba(0, 0, 0, 0.3);
    display: none;
  }
  nav.menu[data-open="true"] { display: block; }
  /* Wyściółka RÓWNA po obu stronach — panel jest szerokości najdłuższej
     pozycji, więc to ona wyznacza odstęp z lewej i z prawej. */
  nav.menu ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 14px; }
  /* ⚠️ TEKST DO PRAWEJ, ale kafelek dotykowy zostaje NA CAŁĄ SZEROKOŚĆ.
     Przycisk otwierający stoi w prawym górnym rogu, więc lista wysuwa się
     spod niego i wzrok szuka pozycji po tej samej stronie — wyrównanie do
     lewej zmuszało do przeskoku przez cały ekran. Robi to
     `justify-content`, nie `text-align: right` na węższym elemencie:
     obszar do kliknięcia ma zostać szeroki (łatwiej trafić kciukiem). */
  /* ⚠️ `display: flex`, NIE `inline-flex` jak na szerokim ekranie.
     Element inline ma szerokość swojej treści, więc `justify-content`
     nie miał czego wyrównywać — napis siedział przy lewej krawędzi
     mimo reguły. Blokowy wypełnia szerokość pozycji listy i dopiero
     wtedy wyrównanie działa, a obszar do kliknięcia zostaje szeroki. */
  nav.menu a {
    display: flex; justify-content: flex-end;
    min-height: 52px; padding: 0; font-size: 17px;
  }
  /* W rozwiniętym menu kreska pod słowem gubi się w pionowej liście —
     bieżącą pozycję znaczy tu sam kolor. */
  nav.menu a::after { display: none; }
  header.top .bar { min-height: 68px; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 20px; }
}

/* ---------------------------------------------------------------------
   ROZSYPANE RYSUNKI PRODUKTÓW W TLE.

   To jedyny element, którego nie da się podrobić szablonem — te rysunki
   powstały pod tę aplikację. Leżą przygaszone i rozmyte, więc czytają się
   jak faktura papieru, a nie jak treść.

   Warstwa jest `fixed`, więc nie rozciąga strony i nie wpływa na układ.
   Parallaksę robi jedna zmienna `--scroll` ustawiana przez `assisto.js`;
   każdy rysunek mnoży ją przez własną „głębokość” `--d`, co daje wrażenie
   kilku planów bez liczenia pozycji dla każdego z osobna.
   --------------------------------------------------------------------- */
/* ⚠️ Warstwa jest PRZYPIĘTA DO OKNA (`fixed`), nie do dokumentu — i to
   decyduje o KIERUNKU ruchu. Przy zaczepieniu o okno dodatnie `--d`
   przesuwa rysunek w DÓŁ ekranu przy przewijaniu. Przy zaczepieniu
   o dokument te same wartości dają wrażenie powolnego sunięcia w GÓRĘ,
   bo rysunek tylko zostaje w tyle za treścią.

   Cena: każdy rysunek jest widoczny przez cały czas, więc różnice
   prędkości muszą zmieścić się w budżecie „nie dogonić sąsiada”.
   Rozwiązane TOREM: rysunki leżą w czterech pionowych pasach (dwa przy
   lewej krawędzi, dwa przy prawej). Sąsiednie w pionie trafiają do
   różnych pasów, więc nigdy nie zachodzą na siebie poziomo — a to
   podwaja odstęp w obrębie pasa i pozwala na naprawdę szeroki zakres
   prędkości, od `0,04` do `0,46` (ponad dziesięciokrotna różnica).

   ⚠️ W obrębie JEDNEGO PASA `--d` MUSI rosnąć wraz z `--y`: rysunek
   niżej sunie szybciej, więc odstęp może się tylko powiększać.

   Część rysunków startuje NAD ekranem (`--y` ujemne) i wjeżdża w kadr
   przy przewijaniu — bez nich tło pustoszałoby, bo szybkie rysunki
   schodzą dołem i nie wracają. */
.scatter {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Bez tego rysunki przy krawędziach wchodzą pod pasek nagłówka
     i prześwitują przez jego rozmycie jak brud. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
}
.scatter img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s, 1) * 112px);
  height: auto;
  opacity: var(--o, 0.14);
  filter: blur(var(--b, 2px)) saturate(0.85);
  transform: translate3d(0, calc(var(--scroll, 0px) * var(--d, 0.05)), 0)
    rotate(var(--r, 0deg));
  will-change: transform;
}
/* Treść musi leżeć NAD warstwą tła — bez tego rysunki zasłaniałyby tekst.
   🚨 `header.top` NIE MOŻE TU BYĆ. Ta reguła ma tę samą wagę co
   `header.top { position: sticky; z-index: 60 }` wyżej, a stoi PÓŹNIEJ,
   więc wygrywała i po cichu robiła dwie szkody naraz:
     1. `sticky` → `relative`, czyli pasek przestawał się przyklejać
        i znikał przy przewijaniu,
     2. `z-index: 60` → `1`, czyli tyle samo co `main` — a `main` jest
        dalej w dokumencie, więc malował się NA nagłówku. Rozwinięte menu
        na telefonie miało przez to kryjące tło (`--bg`), a i tak
        prześwitywała przez nie treść strony, bo cała sekcja hero leżała
        NAD nim.
   Nagłówek ma własny `z-index: 60`, czyli i tak jest nad `.scatter` (0).
   Ta reguła jest tu wyłącznie dla `main` i stopki. */
main, footer.site { position: relative; z-index: 1; }

/* Pasy WEWNĘTRZNE (bliżej środka) znikają na wąskim ekranie. Odstęp
   między pasami jest podany w procentach szerokości okna, więc poniżej
   ~1200 px pas wewnętrzny zacząłby zachodzić na zewnętrzny — a wtedy
   rysunki o różnych prędkościach mogłyby się minąć w tym samym miejscu. */
@media (max-width: 1199px) {
  .scatter img.wewn { display: none; }
}
@media (max-width: 899px) {
  /* Na telefonie tekst zajmuje całą szerokość, więc rysunki i tak są
     pod nim — zostają, ale wyraźnie słabsze, jako sama faktura. */
  .scatter img { opacity: calc(var(--o, 0.14) * 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .scatter img { transform: rotate(var(--r, 0deg)); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}