/*
 * [2026-09-13] Strona główna `/` (strona marketingowa) - `views/index/index.php`,
 * wrapper `views/home_wrapper.php`. Układ ze szkiców Marcina
 * (`CLAUDE/marketing-page/`). Ładowany WYŁĄCZNIE na stronie głównej.
 *
 * Kolory tylko ze zmiennych Bootstrapa 5.3.8 - warianty jasny/ciemny Marcin
 * dostraja w `custom-bootstrap-5.3.8/bootstrap.css` (w ciemnym: tło strony
 * `--bs-body-bg` #242424, karta dropzone `--bs-main-bg` #141414, pigułka
 * "Sign in" `--bs-quaternary-bg` - dokładnie jak na szkicu).
 * Wygląd samego uploadera (dropzone, lista plików) - `uploader-bs5.css`.
 */

/* [2026-09-19] Blok transitions.dev (tokeny ruchu + snippety `t-*`) przeniesiony
   do `transitions.css` - wspólny ze oknem "New transfer" w panelu, bo uploader
   jest jednym partialem dla obu. Ładowany PRZED tym plikiem. */

/* ======================================================= strona główna === */

.home {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bs-body-bg);
  --home-gutter: 1.5rem;
  --home-header-height: 4.35rem;
  --home-dock-height: 4.5rem;
  /* [2026-09-23] Miejsce, które ma zostać wolne na dole: pasek + bezpieczny
     obszar (pasek gestów iPhone'a). Bez tego stopka wchodziła pod nawigację
     przeglądarki na telefonie. */
  --home-dock-space: calc(var(--home-dock-height) + env(safe-area-inset-bottom, 0px));
  --home-header-space: calc(var(--home-header-height) + env(safe-area-inset-top, 0px));
}

/* ------------------------------------------------------------ nagłówek */

.home-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .75rem;
  height: var(--home-header-space);
  padding: env(safe-area-inset-top, 0px) calc(var(--home-gutter) + env(safe-area-inset-right, 0px)) 0 calc(var(--home-gutter) + env(safe-area-inset-left, 0px));
  background-color: rgba(var(--bs-body-bg-rgb), 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (min-width: 1400px) {
  .home-header  {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.home-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.home-logo {
  display: block;
  height: 1.9rem;
  width: auto;
}

/* Logo ↔ znak (Icon swap). Ukryte pełne logo wychodzi z przepływu, żeby slot
   zwęził się do znaku i "+ New transfer" stanęło tuż obok (jak na szkicu). */
.home-logo-swap[data-state="b"] .t-icon[data-icon="a"] {
  position: absolute;
  top: 0;
  left: 0;
}

.home-header__account {
  margin-left: auto;
  padding-inline: 1.1rem;
  background-color: var(--bs-quaternary-bg);
  color: var(--bs-body-color);
}

.home-header__account:hover,
.home-header__account:focus-visible {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* "+ New transfer" w nagłówku - wejście jak otwarcie dropdownu (tokeny:
   fast + smooth-out, skala medium, rozmycie small), wyjście krócej (quick).
   Poza stanem About slot ma zerową szerokość (`0fr`), więc przycisk nie zajmuje
   miejsca obok logo na telefonie, a przy znikaniu zostaje DOKŁADNIE tam, gdzie
   był (w przeciwieństwie do `position: absolute` w kontenerze flex). Szerokość
   slotu i sam przycisk animują się razem. */
.home-header__new-slot {
  display: grid;
  grid-template-columns: 0fr;
  margin-left: -.75rem;
  transition:
    grid-template-columns var(--duration-quick) var(--ease-smooth-out),
    margin-left var(--duration-quick) var(--ease-smooth-out);
}

.home-header__new-clip {
  min-width: 0;
  overflow: hidden;
  /* miejsce na cień/ring fokusu, żeby `overflow` ich nie przycinał */
  padding: .25rem;
  margin: -.25rem;
}

.home-header__new {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transform: scale(var(--scale-medium));
  filter: blur(var(--blur-small));
  transition:
    opacity var(--duration-quick) var(--ease-smooth-out),
    transform var(--duration-quick) var(--ease-smooth-out),
    filter var(--duration-quick) var(--ease-smooth-out),
    visibility 0s linear var(--duration-quick);
}

.home.is-about .home-header__new-slot {
  grid-template-columns: 1fr;
  margin-left: 0;
  transition:
    grid-template-columns var(--duration-fast) var(--ease-smooth-out),
    margin-left var(--duration-fast) var(--ease-smooth-out);
}

.home.is-about .home-header__new {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity var(--duration-fast) var(--ease-smooth-out),
    transform var(--duration-fast) var(--ease-smooth-out),
    filter var(--duration-fast) var(--ease-smooth-out),
    visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .home-header__new-slot,
  .home-header__new { transition: none !important; }
}

/* ---------------------------------------------------------- ekran 1: hero */

.home-hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--home-header-space) var(--home-gutter) var(--home-dock-space);
}

.home-hero__inner {
  width: 100%;
  max-width: 40rem;
}

/* [2026-09-23] Profil `@nick` - ta sama szerokość kolumny co hero strony głównej,
   żeby karta uploadera miała identyczne proporcje w obu miejscach. */
.profile-page {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

/* `isolation` jest load-bearing: tło karty to `.uploader-base::before` z
   `z-index: -1` (`uploader-bs5.css`). W panelu okno ma własny kontekst
   nakładania, tutaj bez tego tło karty malowałoby się POD tłem `.home`. */
.home-uploader {
  --border-radius: .5rem;
  position: relative;
  isolation: isolate;
}

/* [2026-09-22] Marcin: "niech będzie ładny jak w panelu" - karta jak dropzone
   okna "New transfer": powierzchnia i obrys z `uploader-bs5.css` (bez dawnego
   czarnego tła i przezroczystego obrysu), promienie 16 px (`--border-radius`
   wyżej, ×2; na hover ×3.5), animowany gradient.
   Poprawka tego samego dnia: pierwsza wersja miała dookoła STAŁĄ obudowę z
   cieni (pas + pierścień + cień jak okno panelu) - przy najechaniu karta
   "wsuwa się" o 10 px (`::after`), a obudowa zostawała na miejscu: pusty pas,
   dwa obrysy i rogi o różnych promieniach. Strona sama jest tu "oknem", więc
   obudowy nie ma. */
/* [2026-09-23] NIE ZMIENIAĆ proporcji tej karty. Przy przeglądzie kompozycji
   podniosłem jej wysokość (pierwszy ekran jest w ~55% pusty) - Marcin: *„nie ruszaj
   proporcji uploadera, w ogóle go nie dotykaj, on jako jedyny jest piękny"*.
   Wróciło 22rem. Jeśli hero ma kiedyś mniej ziać pustką, to przez wysokość samej
   sekcji albo treść wokół, nie przez kartę. */
.home-uploader .uploader-base {
  min-height: 22rem;
}

/* Etykiety panelu (ikona strzałki, napisy pojawiające się na hover) zastąpione
   napisami ze szkicu - `.home-dropzone-label`. */
.home-uploader .upload-icon,
.home-uploader .upload-desc,
.home-uploader .upload-drop,
.home-uploader .upload-desc-mobile {
  display: none;
}

.home-dropzone-label {
  position: relative;
  z-index: 1;
  text-align: center;
  pointer-events: none;
}

/* Napisy zależą od faktycznego urządzenia, nie od szerokości ekranu:
   `[agent=mobile]` na <html> ustawia `syg/assets/helpers/agent-mobile-helper.js`
   (ładowany w <head> `home_wrapper.php`) - ta sama metoda co w starym
   uploaderze (`.upload-desc-mobile`). Wąskie okno na komputerze dalej ma
   "Click to add files", telefon zawsze "Tap to add files". */
.home-dropzone-label--mobile,
[agent=mobile] .home-dropzone-label--desktop {
  display: none;
}

[agent=mobile] .home-dropzone-label--mobile {
  display: block;
}

.home-dropzone-label__title {
  font-size: 1.1rem;
  color: var(--bs-body-color);
}

.home-dropzone-label__hint {
  font-size: .85rem;
  color: var(--bs-secondary-color);
  opacity: .5;
  transition:
    opacity var(--duration-slow) var(--ease-in-out),
    filter var(--duration-slow) var(--ease-in-out),
    transform var(--duration-slow) var(--ease-in-out);
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap !important;
}

/* Przy przeciąganiu tytuł zamienia się (Text states swap, JS), a podpowiedź
   "(or drag and drop)" gaśnie tym samym ruchem, zamiast wisieć pod nowym napisem. */
.home-uploader .upload-drag-over-active .home-dropzone-label__hint {
  opacity: 0;
  filter: blur(var(--blur-small));
}

/* Hover/przeciąganie: karta "wsuwa się" w tło (wewnętrzny pierścień koloru
   strony z `uploader-bs5.css`) i zaokrąla - czasy z tokenów zamiast wspólnych
   `.3s`, wejście wolniej (slow), wyjście szybciej (medium). */
/* [2026-09-22] Canvas gradientu w tym samym ruchu co powierzchnia i obrys -
   inaczej jego rogi (wspólne `.3s` z `uploader-bs5.css`) zaokrąglały się w
   innym tempie niż karta. `opacity` bez zmian: canvas ma własne wejście
   (`uploader-gradient-in`). */
/* [2026-09-23] Wyliczone właściwości, nigdy skrót "wszystkie": `opacity`
   canvasa należy do animacji pojawienia (`uploader-gradient-in`), więc nie ma
   go na tej liście - inaczej obie rzeczy sterowały tą samą wartością i przy
   najechaniu widać było migotanie. */
.home-uploader .uploader-base::before,
.home-uploader .uploader-base::after {
  transition:
    border-radius var(--duration-medium) var(--ease-smooth-out),
    inset var(--duration-medium) var(--ease-smooth-out),
    box-shadow var(--duration-medium) var(--ease-smooth-out),
    background-color var(--duration-medium) var(--ease-smooth-out);
}

.home-uploader .gradient-container > canvas {
  transition: clip-path var(--duration-medium) var(--ease-smooth-out);
}

.home-uploader .uploader-base.init:hover::before,
.home-uploader .uploader-base.init:hover::after,
.home-uploader .uploader-base.init:hover .gradient-container > canvas,
.home-uploader .upload-drag-over-active.uploader-base::before,
.home-uploader .upload-drag-over-active.uploader-base::after,
.home-uploader .upload-drag-over-active.uploader-base .gradient-container > canvas {
  transition-duration: var(--duration-slow);
}

@media (prefers-reduced-motion: reduce) {
  .home-dropzone-label__hint,
  .home-uploader .uploader-base::before,
  .home-uploader .uploader-base::after,
  .home-uploader .gradient-container > canvas {
    transition: none !important;
  }
}

/* [2026-09-22] Kręgi na wodzie (`kregi-woda.html`) zastąpione animowanym
   gradientem jak w panelu - reguły `.home-ripples`/`.home-ripple` usunięte
   (są w historii gita). */

.home-hero__tagline {
  margin: 2rem 0 0;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--bs-secondary-color);
}

/* Po dodaniu plików (krok 2/3) karta rośnie w formularz - zdanie o limitach
   znika, żeby nie wisiało pod/na formularzu. */
.home-uploader:has(#upload_stage_init.d-none) .home-hero__tagline {
  display: none;
}

/* ------------------------------------------------------- ekran 2: about */
/* [2026-09-13] Wzorzec growstones.app (Marcin: "bardzo przyjemny i schludny
   wygląd", ale "niekoniecznie w tak wąskim containerze"): sekcje rozdzielone
   włosową linią na całą szerokość, mała etykieta wersalikami, dwutonowy
   nagłówek (druga część przygaszona), wiersze nazwa/opis z liniami, podgląd UI. */

.home-about {
  padding-top: var(--home-header-space);
  padding-bottom: var(--home-dock-space);
}

.home-about {
}

.home-section {
  --home-section-width: 60rem;
  padding: 7rem max(var(--home-gutter), calc((100% - var(--home-section-width)) / 2));
  border-top: 1px solid var(--bs-border-color-translucent);
}

.home-section:first-child {
  border-top: 0;
}


/* [2026-09-19] Etykieta sekcji: numer + kreska + nazwa, monospace - rytm
   nawigacyjny wzięty ze strony transitions.dev. Numer z licznika CSS, więc
   dodanie/usunięcie sekcji nie wymaga poprawiania treści. */
/* [2026-09-22] Numerowane etykiety sekcji ("01 / RECEIVING") usunięte na
   prośbę Marcina - zostają same duże nagłówki. */

.home-section__header {
  max-width: 17em;
  margin-bottom: 1.75rem;
  font-size: clamp(1.8rem, 3.2vw, 2.55rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--bs-emphasis-color);
}

.home-section__header span {
  color: var(--bs-secondary-color);
}

.home-section__lead {
  max-width: 36rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--bs-secondary-color);
}

.home-section__lead p:last-child {
  margin-bottom: 0;
}

.home-section__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2.5rem;
}

.home-section__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: 1.75rem;
  color: var(--bs-body-color);
  text-decoration: none;
}

.home-section__link:hover {
  color: var(--bs-emphasis-color);
}

/* Wiersze nazwa/opis */
.home-rows {
  border-top: 1px solid var(--bs-border-color-translucent);
}

.home-row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 2.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.home-row__title {
  margin: 0;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bs-secondary-color);
}

.home-row__text {
  margin: 0;
  max-width: 34rem;
  line-height: 1.65;
  color: var(--bs-body-color);
}

/* Lista z myślnikami (bezpieczeństwo) */
/* [2026-09-23] Bez `max-width`: lista kończyła się 256 px przed prawą krawędzią
   karty, która stoi nad nią (zmierzone: karta 240-1200, lista 240-944), przez co
   tylko w tym miejscu prawa krawędź „uciekała". Czytelność trzyma teraz miara
   samych wierszy, nie przycięta szerokość bloku. */
.home-list {
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--bs-body-color);
}

.home-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .85rem;
  line-height: 1.6;
}

.home-list li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--bs-secondary-color);
}

/* FAQ */
.home-faq {
  border-top: 1px solid var(--bs-border-color-translucent);
}

.home-faq__item {
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.home-faq__question {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}

.home-faq .t-acc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0;
  border: 0;
  background: none;
  color: var(--bs-body-color);
  font: inherit;
  text-align: left;
}

.home-faq .t-acc-chevron svg {
  fill: none;
  stroke: var(--bs-secondary-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Odstęp pod odpowiedzią WEWNĄTRZ `.t-acc-panel-inner` (zasada skilla: nigdy
   padding na ścieżce siatki `.t-acc-panel`, bo panel nie domknąłby się do zera). */
.home-faq__answer {
  max-width: 44rem;
  margin: 0;
  padding-bottom: 1.35rem;
  line-height: 1.6;
  color: var(--bs-secondary-color);
}

/* Stopka strony (koniec treści, nad stałym dolnym paskiem) */
/* Stopka strony (linki + copyright). Dolny odstęp = własny 2rem PLUS miejsce
   na stały pasek (`.home-dock`), który pływa nad treścią - inaczej ostatni
   wiersz stopki chował się pod nim (zgłoszone przez Marcina). */
.home-page-footer {
  padding: 3rem max(var(--home-gutter), calc((100% - 60rem) / 2)) calc(2rem + var(--home-dock-space));
  border-top: 1px solid var(--bs-border-color-translucent);
  font-size: .875rem;
  color: var(--bs-secondary-color);
  margin-top: 1rem;
}

/* [2026-09-28] Nagłówek kolumny linków - jak w przykładzie Marcina (`footer.png`). */
.home-page-footer__heading {
  margin-bottom: .75rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.home-page-footer__links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
}

.home-page-footer__links a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.home-page-footer__links a:hover {
  color: var(--bs-body-color);
}

/* ------------------------------------------ podgląd panelu (sekcja "Your panel") */
/* [2026-09-13] Odwzorowanie makiety `CLAUDE/marketing-page/App-1.png`: pasek
   kontaktów u góry, szyna | Resources | wątki + otwarty wątek | szyna. Kolory
   tylko ze zmiennych BS5 (w ciemnym: tło #242424, Resources #141414, kolumna
   wątków #303030, karty/aktywne #3F3F3F). */

.home-preview {
  margin-top: 3rem;
  overflow: hidden;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 1.25rem;
  background-color: var(--bs-body-bg);
  font-size: .8rem;
  line-height: 1.25;
  color: var(--bs-body-color);
  user-select: none;
}

.home-preview__muted {
  color: var(--bs-secondary-color);
}

.home-preview__strong {
  color: var(--bs-emphasis-color);
  font-size: .9rem;
}

.home-preview__stack {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.home-preview__stack > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* pasek kontaktów */
.home-preview__contacts {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem .6rem 2.75rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.home-preview__contacts-list,
.home-preview__contacts-actions {
  display: flex;
  gap: 1.35rem;
}

.home-preview__contacts-actions {
  padding-left: 1.35rem;
  border-left: 1px solid var(--bs-border-color-translucent);
}

.home-preview__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.home-preview__contact-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: var(--bs-quaternary-bg);
  color: var(--bs-secondary-color);
}

.home-preview__contact-avatar.is-group {
  border-radius: .7rem;
}

.home-preview__contact-avatar.is-add {
  background-color: transparent;
  border: 1px solid var(--bs-border-color-translucent);
}

/* ciało: szyna | resources | wątki+szczegół | szyna */
.home-preview__body {
  display: grid;
  grid-template-columns: 3.25rem 15rem minmax(0, 1fr) minmax(0, 1.15fr) 3.25rem;
  height: 34rem;
  padding: .5rem 0;
}

.home-preview__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0 .6rem;
}

.home-preview__rail-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .65rem;
  background-color: var(--bs-primary);
  color: #fff;
  font-size: 1rem;
}

.home-preview__rail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .65rem;
  color: var(--bs-secondary-color);
}

.home-preview__rail-icon.is-active {
  background-color: var(--bs-main-bg);
  color: var(--bs-body-color);
}

.home-preview__rail-icon.is-round {
  border-radius: 50%;
}

.home-preview__rail-bottom {
  margin-top: auto;
}

.home-preview__user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background-color: var(--bs-quaternary-bg);
}

/* Resources */
.home-preview__resources {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  padding: .9rem .8rem;
  overflow: hidden;
  border-radius: 1rem;
  background-color: var(--bs-main-bg);
}

.home-preview__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
  font-size: .9rem;
  color: var(--bs-emphasis-color);
}

.home-preview__mini-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: .3rem;
  border-radius: 50%;
  background-color: var(--bs-quaternary-bg);
  font-size: .55rem;
  vertical-align: middle;
}

.home-preview__search-row {
  display: flex;
  gap: .4rem;
  margin-bottom: .45rem;
}

.home-preview__search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 999px;
  color: var(--bs-secondary-color);
}

.home-preview__search--full {
  flex: 0 0 auto;
  margin-bottom: .45rem;
}

.home-preview__square-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  border-radius: 999px;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.home-preview__resource {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .1rem;
}

.home-preview__folder {
  font-size: 1.35rem;
}

.home-preview__folder.is-grey {
  color: var(--bs-quaternary-bg);
}

.home-preview__folder.is-purple {
  color: #c9a6f5;
}

/* wątki + otwarty wątek - jedna wspólna "karta" jak w makiecie */
.home-preview__threads {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  padding: .6rem .5rem;
  overflow: hidden;
  border-radius: 1rem 0 0 1rem;
  background-color: var(--bs-secondary-bg);
}


.home-preview__toolbar {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .25rem;
  margin-bottom: .45rem;
  border-radius: 999px;
  background-color: var(--bs-tertiary-bg);
}

/* [2026-09-29] Po polsku („Wątki / Odebrane / Bezpośrednie ▾”) pasek nie mieścił się
   w kolumnie: filtr łamał się na dwie linie, a „×” był zgniatany (zgłoszenie Marcina).
   Wszystko w jednej linii; ustępuje tylko etykieta filtra (wielokropek), krzyżyk
   i przełącznik zostają w całości. */
.home-preview__segment {
  display: flex;
  flex: 1 0 auto;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.home-preview__segment span {
  padding: .35rem .45rem;
  border-radius: 999px;
}

.home-preview__segment .is-active {
  background-color: var(--bs-main-bg);
  color: var(--bs-emphasis-color);
}

.home-preview__filter {
  min-width: 0;
  overflow: hidden;
  padding: .35rem .5rem;
  border-radius: 999px;
  background-color: var(--bs-main-bg);
  color: var(--bs-emphasis-color);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-preview__clear {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--bs-quaternary-bg);
  color: var(--bs-secondary-color);
}

.home-preview__thread {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .5rem;
  border-radius: .9rem;
}

.home-preview__thread.is-active {
  background-color: var(--bs-tertiary-bg);
}

.home-preview__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background-color: var(--bs-quaternary-bg);
  color: var(--bs-body-color);
}

.home-preview__time {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  padding-top: .1rem;
}

/* otwarty wątek - dosunięty do kolumny wątków (wspólne tło), z pionową linią */
.home-preview__detail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
  padding: .6rem .6rem 0;
  overflow: hidden;
  border-left: 1px solid var(--bs-border-color-translucent);
  border-radius: 0 1rem 1rem 0;
  background-color: var(--bs-secondary-bg);
}



.home-preview__resources {
  margin-right: .5rem;
}


.home-preview__detail-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .1rem .1rem .3rem;
}

.home-preview__detail-more {
  margin-left: auto;
  color: var(--bs-secondary-color);
}

.home-preview__card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .7rem;
  border-radius: .9rem;
  background-color: var(--bs-tertiary-bg);
}

.home-preview__card.is-faded {
  opacity: .45;
}

.home-preview__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--bs-emphasis-color);
}

.home-preview__dot {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: .35rem;
  border-radius: 50%;
  background-color: var(--bs-quaternary-bg);
  vertical-align: middle;
}

.home-preview__player {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 7.5;
  border-radius: .75rem;
  background-color: #000;
}

.home-preview__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding-left: .2rem;
  border-radius: 50%;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
  font-size: 1.1rem;
}

.home-preview__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* [2026-09-22] "Download" i pole komentarza jak w prawdziwej karcie wątku
   (`thread_detail.php`): jasna pigułka `.btn-light` i pole `rounded-pill`. */
.home-preview__button {
  flex: 0 0 auto;
  padding: .35rem .8rem;
  border-radius: 999px;
  background-color: var(--bs-emphasis-color);
  color: var(--bs-body-bg);
}

.home-preview__comment {
  padding: .45rem .85rem;
  border-radius: 999px;
  background-color: var(--bs-main-bg);
  color: var(--bs-secondary-color);
}

.home-preview__new-for {
  position: absolute;
  left: 50%;
  bottom: .9rem;
  transform: translateX(-50%);
  padding: .4rem .9rem;
  border: 1px solid var(--bs-primary);
  border-radius: 999px;
  background-color: var(--bs-body-bg);
  color: var(--bs-emphasis-color);
  white-space: nowrap;
}

/* Węższe ekrany: najpierw znika Resources, potem szyny i szczegół - zostaje
   to, co najważniejsze w danej szerokości (jak w samym panelu). */
@media (max-width: 1099.98px) {
  .home-preview__body {
    grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.15fr);
    padding-right: .5rem;
  }

  .home-preview__resources,
  .home-preview__rail--right {
    display: none;
  }
}

/* ------------------------------------------------- strony publiczne (poza główną) */
/* [2026-09-13] Features, Pricing, Support, strony CMS (Terms/Privacy), branże,
   video-to-link - na wspólnym `home_wrapper.php`. Kolumna treści tej samej
   szerokości co sekcje strony głównej (60rem), odstęp od stałego nagłówka i
   dolnego paska. Klasy starego motywu używane przez te widoki przeniesione
   RĘCZNIE i zawężone do `.site-main` (zasada: nie importować `custom.css` ani
   `styles.min.css` - patrz `CLAUDE/patterns/2026-09-12_foreign-stylesheet-bare-element-selector.md`). */

/* [2026-09-23] Kolumna treści rośnie do wolnej wysokości, ale jej NIE narzuca.
   Wcześniej `.site-main` miało `min-height: 100dvh - pasek dolny`, więc na krótkiej
   stronie (np. `/t/{url}` z jednym plikiem) sama treść zajmowała cały ekran, a
   stopka lądowała POD nim - Marcin: *„ucina footer mimo że mamy masę pustego
   miejsca"*. Zmierzone przed poprawką przy oknie 1400x757: `.site-main` 685 px,
   stopka 709-865 px, dokument 865 px, czyli 108 px poza ekranem, dodatkowo pod
   przyklejonym paskiem dolnym.

   Teraz układ trzyma flex: `.home.site-page` jest kolumną na całą wysokość, a
   `.site-main` bierze resztę (`flex: 1`). Stopka mieści się na ekranie sama z
   siebie, bez liczenia wysokości którejkolwiek z części (miejsce na pasek dolny
   rezerwuje `.home-page-footer` swoim `padding-bottom`). */
.home.site-page {
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: calc(60rem + var(--home-gutter) * 2);
  min-height: 0;
  margin: 0 auto;
  padding: calc(var(--home-header-space) + 1rem) var(--home-gutter) 4rem;
}

/* [2026-09-29] Strony złożone z sekcji strony głównej (`.home-about` > `.home-section`,
   dziś `/creators`): sekcja sama liczy odstęp od krawędzi i szerokość treści (60rem),
   więc kolumna nie dokłada drugiego odstępu ani limitu szerokości - Marcin: na telefonie
   treść miała 29 px od krawędzi zamiast 14 px jak na stronie głównej. */
.site-main:has(> .home-about) {
  max-width: none;
  padding-inline: 0;
}

/* Strony z jedną krótką kartą (pobieranie, bramka hasła) - karta na środku
   wolnej przestrzeni, a nie przyklejona do nagłówka. Środek robią automatyczne
   marginesy pierwszego dziecka, nie `justify-content`: dzięki temu ostatnie
   dziecko kolumny (podpis transferu) zostaje przy dolnej krawędzi, tuż nad
   stopką, zamiast jechać do środka razem z kartą. */
.site-main--center {
  display: flex;
  flex-direction: column;
  /* Bez dodatkowego 1rem u góry i 4rem u dołu: kolumna ma się pokrywać DOKŁADNIE
     z wolną przestrzenią między nagłówkiem a stopką, inaczej środek wypada wyżej
     (zmierzone: karta na 299 px przy środku wolnego pola 335 px). */
  padding-top: var(--home-header-space);
  padding-bottom: 0;
}

.site-main--center > :first-child {
  margin-block: auto;
}

/* Widoki mają własne `.container` z Bootstrapa 4 - w kolumnie `.site-main`
   szerokość już jest ustalona, więc bez podwójnych marginesów. */
.site-main > .container,
.site-main > .container > .container {
  max-width: none;
  padding-inline: 0;
}

.site-main .card {
  --bs-card-bg: var(--bs-secondary-bg);
  --bs-card-border-color: var(--bs-border-color-translucent);
  border-radius: 1rem;
}

.site-main .custom-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin-bottom: 1.25rem;
  list-style: none;
  color: var(--bs-secondary-color);
}

.site-main .custom-breadcrumbs > li > a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.site-main .custom-breadcrumbs > li > a:hover {
  color: var(--bs-body-color);
}

.site-main .custom-breadcrumbs svg {
  margin-left: .5rem;
  opacity: .5;
}

.site-main .custom-breadcrumbs .active {
  color: var(--bs-body-color);
}

/* Formularz kontaktu - wyśrodkowany w pionie jak w starym motywie. */
.site-main .focus-center {
  max-width: 40rem;
  margin: 0 auto;
}

/* ------------------------------------------------------- strony „Features" */
/* [2026-09-23] Dwie kolumny: przyklejona nawigacja i kolumna treści o szerokości
   do czytania. Zastąpiło `<select>` jako jedyną nawigację i kartę na całą
   szerokość - patrz komentarz w `views/features/index.php`. */

.features-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.features-nav {
  position: sticky;
  /* Pod stałym paskiem strony, z oddechem - ta sama zmienna, której używa
     przyklejony nagłówek tabeli planów. */
  top: calc(var(--home-header-space) + 1rem);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.features-nav__label {
  margin: 1.25rem 0 .35rem;
  padding-inline: .75rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.features-nav__label:first-child {
  margin-top: 0;
}

.features-nav__link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  border-radius: .6rem;
  font-size: .9rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}

.features-nav__link:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.features-nav__link.is-active {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
}

.features-nav__link i {
  opacity: .6;
}

.features-nav__link.is-active i {
  opacity: 1;
}

/* Pasek pigułek - tylko na telefonie (patrz media query niżej). */
.features-tabs {
  display: none;
  gap: .4rem;
  margin-bottom: 1.5rem;
  padding-bottom: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.features-tabs::-webkit-scrollbar {
  display: none;
}

.features-tabs__link {
  flex: 0 0 auto;
  padding: .4rem .85rem;
  border-radius: 999px;
  background-color: var(--bs-secondary-bg);
  font-size: .85rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  white-space: nowrap;
}

.features-tabs__link.is-active {
  background-color: var(--bs-emphasis-color);
  color: var(--bs-body-bg);
}

/* Kolumna treści: miara do czytania, nagłówki oddzielone światłem, a nie ramką
   karty (karta na całą szerokość dawała wiersze po 100+ znaków). */
.features-content {
  max-width: 44rem;
}

.features-content h1 {
  margin-bottom: 1.25rem;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--bs-emphasis-color);
}

.features-content h2 {
  margin-top: 2.5rem;
  margin-bottom: .6rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--bs-emphasis-color);
}

.features-content p,
.features-content li {
  line-height: 1.7;
  color: var(--bs-secondary-color);
}

.features-content ul {
  padding-left: 1.1rem;
}

.features-content a:not(.btn) {
  color: var(--bs-body-color);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: var(--bs-border-color);
}

.features-content a:not(.btn):hover {
  text-decoration-color: currentColor;
}

/* Odnośnik „następna strona" na dole każdej strony - w widokach jest jako
   `btn btn-sm btn-primary` (niebieski przycisk starego motywu). Strony publiczne
   na BS5 nie używają nigdzie niebieskiego przycisku, więc tutaj dostaje ten sam
   język co przyciski strony głównej: jasna pigułka na ciemnym tle. Markupu
   jedenastu widoków nie ruszam - to jedna reguła zamiast jedenastu zmian. */
.features-content .btn-primary {
  --bs-btn-bg: var(--bs-emphasis-color);
  --bs-btn-border-color: var(--bs-emphasis-color);
  --bs-btn-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-emphasis-color);
  --bs-btn-hover-border-color: var(--bs-emphasis-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-emphasis-color);
  --bs-btn-active-border-color: var(--bs-emphasis-color);
  border-radius: .6rem;
  padding: .5rem 1rem;
  font-weight: 500;
}

.features-content .btn-primary:hover {
  opacity: .88;
}

@media (max-width: 991.98px) {
  .features-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .features-nav {
    display: none;
  }

  .features-tabs {
    display: flex;
  }

  .features-content {
    max-width: none;
  }
}

/* Treść stron CMS i bloga */
.site-main .blog-post-content {
  line-height: 1.75;
  word-break: break-word;
}

.site-main .blog-post-content p {
  margin-bottom: 1.5rem;
}

/* FAQ z Bootstrap collapse (video-to-link) - obrót chevronu, jak w `custom.css`. */
.site-main .faq-accordion .card {
  border: 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  border-radius: 0;
}

.site-main .faq-accordion a {
  color: var(--bs-body-color);
}

.site-main .faq-accordion .fa-chevron-right,
.site-main .faq-accordion svg {
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}

.site-main .faq-accordion a[aria-expanded="true"] .fa-chevron-right,
.site-main .faq-accordion a[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* Pricing (`partials/plans.php`) */
.site-main .card-no-bg {
  --bs-card-bg: transparent;
  border: 0;
}

.site-main .overcontainer {
  margin-inline: calc(var(--home-gutter) * -1);
}

.site-main .plans-split-table {
  --bs-table-bg: transparent;
  color: var(--bs-body-color);
}

/* Bootstrap 5 pogrubia `th` - w starym motywie nagłówki planów były normalne. */
.site-main .plans-split-table th {
  font-weight: 400;
}

.site-main .btn-group-custom {
  gap: .25rem;
  padding: .25rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 999px;
}

.site-main .btn-group-custom .btn {
  border: 0;
  border-radius: 999px !important;
  color: var(--bs-secondary-color);
}

.site-main .btn-group-custom .btn.active {
  background-color: var(--bs-quaternary-bg);
  color: var(--bs-emphasis-color);
}

/* Radio w etykietach przełącznika okresu płatności - w Bootstrapie 4 chował je
   `btn-group-toggle`, w 5 go nie ma. */
.site-main .btn-group-custom input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------- stały dolny pasek */
/* [2026-09-23] To NIE jest stopka (ta jest niżej: `.home-page-footer`), tylko
   przyklejony do dołu pasek z hamburgerem i skrótem "About ↓" / "Create
   transfer ↑" - stąd nazwa `.home-dock` (wcześniej `.home-footer`, co myliło
   się ze stopką i zasłaniało ją, bo pasek jest `position: fixed`). Miejsce dla
   paska rezerwuje `--home-dock-space` wszędzie, gdzie coś kończy się u dołu
   ekranu - w tym w samej stopce. */

.home-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--home-dock-space);
  padding: 0 calc(var(--home-gutter) + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) calc(var(--home-gutter) + env(safe-area-inset-left, 0px));
  pointer-events: none;
}

.home-dock > * {
  pointer-events: auto;
}

.home-dock__menu {
  padding: .25rem .5rem;
  font-size: 1.4rem;
  color: var(--bs-secondary-color);
}

.home-dock__link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.1rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.home-dock__link:hover {
  color: var(--bs-body-color);
}

.home-dock__arrow {
  display: inline-grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: .85rem;
  background-color: var(--bs-secondary-color);
  color: var(--bs-body-bg);
}

.t-learn-chevron svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* ------------------------------------------------------------------ telefon */
/* Szkic mobilny: karta wypełnia ekran między nagłówkiem a dolnym paskiem,
   zdanie o limitach siedzi W karcie, u dołu, wyrównane do lewej. Po przewinięciu
   do "About" nagłówek ma sam znak zamiast pełnego logo. */

@media (max-width: 767.98px) {
  .home {
    --home-gutter: .9rem;
  }

  .home-hero {
    align-items: stretch;
  }

  .home-hero__inner,
  .home-uploader {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  /* [2026-09-23] Zawężone do hero strony głównej. Reguła jest z mobilnego szkicu
     „karta na cały ekran" i na profilu `@nick` robiła kartę wyższą niż ekran (nad
     nią jest jeszcze nagłówek profilu, pod nią zdanie dla gościa) - zmierzone:
     dokument 1216 px przy ekranie 844 px. */
  .home-hero .home-uploader .uploader-base {
    flex: 1 1 auto;
    min-height: calc(100dvh - var(--home-header-space) - var(--home-dock-space));
  }

  /* Profil: karta bierze to, co zostaje po nagłówku profilu i zdaniu pod spodem. */
  .site-main--center > .profile-page {
    margin-block: 0;
    flex: 1 1 auto;
    min-height: 0;
  }

  .profile-page,
  .profile-page .home-uploader {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .profile-page .home-uploader {
    flex: 1 1 auto;
  }

  /* Łańcuch flex musi przejść przez formularz - `.uploader-base` to jego dziecko,
     nie dziecko `.home-uploader` (strona główna nie potrzebuje tego kroku, bo tam
     kartę rozpycha `min-height` liczony z wysokości ekranu). */
  .profile-page .home-uploader > form,
  .profile-page .home-uploader > .uploader-base {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .profile-page .uploader-base {
    flex: 1 1 auto;
    min-height: 14rem;
  }

  .home-hero__tagline {
    position: absolute;
    left: 2.4rem;
    right: 2.4rem;
    bottom: 2.25rem;
    z-index: 1;
    margin: 0;
    font-size: .95rem;
    text-align: left;
    pointer-events: none;
  }

  .home-dock {
    background-color: var(--bs-body-bg);
    pointer-events: auto;
  }

  .home-section {
    padding-block: 3.75rem;
  }

  .home-row {
    grid-template-columns: 1fr;
    gap: .3rem;
  }

  /* Telefon: pasek kontaktów + sama lista wątków, jak ekran listy w panelu. */
  .home-preview__contacts {
    padding-left: 1rem;
    overflow: hidden;
  }

  .home-preview__contacts-actions {
    display: none;
  }

  .home-preview__body {
    grid-template-columns: 1fr;
    height: auto;
    padding: .5rem;
  }

  .home-preview__rail,
  .home-preview__detail {
    display: none;
  }

  .home-preview__threads {
    border-radius: 1rem;
  }

}

/* ------------------------------------ sekcje z ilustracjami (2026-09-18) --- */
/* [2026-09-18] Wątek jako rozmowa, strona odbiorcy, podgląd + statystyki -
   pomysły z konceptów `CLAUDE/koncepty/`, przeniesione w system tej strony
   (etykieta, dwutonowy nagłówek, wiersze z liniami) zamiast stylistyki
   konceptów. Ilustracje (`.home-mock*`) w tym samym języku co podgląd panelu
   (`.home-preview*`): tła `secondary`/`tertiary`, żadnych twardych kolorów
   poza awatarem przykładowej osoby. Partiale: `views/index/thread_preview.php`,
   `receive_preview.php`, `after_send_preview.php`. */

/* Tekst | ilustracja. Poniżej 992px jedna kolumna, ilustracja pod tekstem. */
/* [2026-09-23] `align-items: start`, nie `center`. Odkąd nagłówek sekcji stoi nad
   splitem, obie kolumny mają zaczynać się w tej samej linii - przy centrowaniu
   różniły się o 18 i 42 px (zmierzone), co przy sąsiadujących sekcjach czytało się
   jak przypadek. */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

.home-split + .home-split {
  margin-top: 3rem;
}

.home-split .home-section__header {
  margin-bottom: 1.5rem;
}

.home-split .home-section__lead + .home-rows {
  margin-top: 2.5rem;
}

/* Wiersze w połowie szerokości - tytuł nad opisem zamiast obok. */
.home-rows--stacked .home-row {
  grid-template-columns: 1fr;
  gap: .25rem;
}

.home-section__lead--spaced {
  margin-bottom: 2.25rem;
}

/* Liczba z podpisem ("0 accounts your client has to create") */
.home-stat {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-self: end;
  max-width: 17rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--bs-border-color-translucent);
}

/* [2026-09-23] Wariant w kolumnie treści (sekcja „Stop chasing people for files"):
   statystyka nie stoi już naprzeciw nagłówka przy prawej krawędzi, tylko nad
   wierszem, który ją tłumaczy - stąd bez `justify-self: end`. */
.home-stat--inline {
  justify-self: start;
  margin-bottom: 2rem;
}

.home-stat__number {
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--bs-emphasis-color);
}

.home-stat__text {
  line-height: 1.5;
  color: var(--bs-secondary-color);
}

/* Opcje wysyłki jako pigułki (sekcja bezpieczeństwa) */
.home-options {
  max-width: 44rem;
  margin-bottom: 2.25rem;
  padding: 1.25rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 1.25rem;
  background-color: var(--bs-secondary-bg);
}

.home-options__text {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: var(--bs-secondary-color);
}

/* [2026-09-19] Wiersze z działającymi przełącznikami (Toggle, transitions.dev
   27); zdanie obok podmienia się przez Text states swap (04). */
.home-options__list {
  display: flex;
  flex-direction: column;
}

.home-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--bs-border-color-translucent);
}

.home-option:first-child {
  border-top: 0;
  padding-top: .25rem;
}

.home-option__toggle {
  --toggle-travel: 16px;
  --toggle-track: 200ms;
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  margin-top: .15rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  /* Wyłączony tor musi odcinać się od tła karty (`--bs-secondary-bg`) - stąd
     jaśniejszy `tertiary` i włosowy obrys. */
  background-color: var(--bs-tertiary-bg);
  box-shadow: inset 0 0 0 1px var(--bs-border-color-translucent);
}

.home-option__toggle[data-on="true"] {
  background-color: var(--bs-emphasis-color);
  box-shadow: none;
}

.home-option__toggle .t-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--bs-secondary-color);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.home-option__toggle[data-on="true"] .t-toggle-thumb {
  background-color: var(--bs-body-bg);
}

.home-option__body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.home-option__label {
  font-size: .95rem;
  color: var(--bs-emphasis-color);
}

.home-option__text {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--bs-secondary-color);
}

/* ---- ilustracje */
.home-mock {
  overflow: hidden;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 1rem;
  background-color: var(--bs-secondary-bg);
  font-size: .8rem;
  line-height: 1.3;
  color: var(--bs-body-color);
  user-select: none;
}

.home-mock__muted {
  color: var(--bs-secondary-color);
}

.home-mock__strong {
  color: var(--bs-emphasis-color);
}

.home-mock__mono {
  font-family: var(--bs-font-monospace);
  font-size: .7rem;
}

.home-mock__stack {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.home-mock__avatar {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background-color: var(--bs-quaternary-bg);
}

/* [2026-09-23] Awatary z makiety (DiceBear "lorelei", kopie w
   `assets/img/avatars/`) - ta sama klasa działa na `<span>` (litera / ikona)
   i na `<img>`; obrazek ma tylko dostać kadrowanie i tło na czas ładowania. */
img.home-mock__avatar,
img.home-preview__avatar,
img.home-preview__contact-avatar {
  object-fit: cover;
}

.home-mock__avatar.is-large {
  width: 3rem;
  height: 3rem;
}

/* Awatar nadawcy w karcie transferu (`.avatar-sm` w panelu) - z literą, gdy
   nie ma obrazka. */
.home-mock__avatar.is-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: .7rem;
  color: var(--bs-secondary-color);
}

/* wątek - układ karty 1:1 z panelem (`app/partials/thread_detail.php`),
   patrz komentarz w `index/thread_preview.php`. */
.home-mock__header {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.home-mock__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem 1rem 1rem;
}

/* Karta transferu: jak `.card.bg-body-tertiary.rounded-4` w wątku - pełna
   szerokość kolumny (panel nie wyrównuje własnych kart do prawej). */
.home-mock__card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem;
  border-radius: .9rem;
  background-color: var(--bs-tertiary-bg);
}

.home-mock__card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.home-mock__who,
.home-mock__card-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}

/* Lista plików pod nazwą transferu - w karcie panelu pojawia się przy
   więcej niż jednym pliku. */
.home-mock__files {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .72rem;
  color: var(--bs-secondary-color);
}

.home-mock__files i {
  width: .75rem;
  margin-right: .3rem;
  font-size: .62rem;
}

.home-mock__button,
.home-mock__pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
}

/* "Download" - jasna pigułka na ciemnej karcie, jak `.btn-light` w wątku. */
.home-mock__button {
  background-color: var(--bs-emphasis-color);
  color: var(--bs-body-bg);
}

.home-mock__pill {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.home-mock__comments {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-top: .5rem;
  border-top: 1px solid var(--bs-border-color-translucent);
}

/* Pole odpowiedzi pod komentarzami. */
.home-mock__reply {
  padding: .35rem .8rem;
  border-radius: 999px;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

/* Dół wątku: przyklejona pigułka "New transfer for ..." z obwódką w kolorze
   akcentu - dokładnie jak `.thread-new-transfer` w panelu. */
.home-mock__composer {
  display: flex;
  justify-content: center;
  padding: 0 1rem 1rem;
}

.home-mock__thread-button {
  padding: .35rem .9rem;
  border: 1px solid var(--bs-primary);
  border-radius: 999px;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* okno przeglądarki ze stroną @nickname */
.home-mock__chrome {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  background-color: var(--bs-tertiary-bg);
}

.home-mock__dots {
  display: flex;
  gap: .35rem;
}

.home-mock__dots span {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background-color: var(--bs-quaternary-bg);
}

.home-mock__address {
  flex: 1;
  padding: .3rem .75rem;
  border-radius: 999px;
  background-color: var(--bs-secondary-bg);
  font-family: var(--bs-font-monospace);
  font-size: .7rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.home-mock__address i {
  font-size: .6rem;
}

.home-mock__page {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  background-color: var(--bs-main-bg);
}

.home-mock__profile {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .25rem;
  font-size: .95rem;
}

.home-mock__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 2.25rem 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 1rem;
  text-align: center;
}

.home-mock__drop i {
  margin-bottom: .35rem;
  font-size: 1rem;
  color: var(--bs-secondary-color);
}

.home-mock__field {
  padding: .6rem .9rem;
  border-radius: 999px;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.home-mock__submit {
  padding: .65rem;
  border-radius: 999px;
  background-color: var(--bs-emphasis-color);
  text-align: center;
  color: var(--bs-body-bg);
}

/* odtwarzacz + statystyki */
.home-mock-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.25rem;
}

.home-mock-grid--captions {
  margin-top: 1.75rem;
}

.home-mock-caption__title {
  margin-bottom: .4rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--bs-emphasis-color);
}

.home-mock-caption__text {
  max-width: 34rem;
  margin: 0;
  line-height: 1.6;
  color: var(--bs-secondary-color);
}

.home-mock--player {
  display: flex;
  flex-direction: column;
}

.home-mock__video {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  background-color: var(--bs-main-bg);
}

.home-mock__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding-left: .15rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 50%;
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

.home-mock__timeline {
  height: 3px;
  margin: .9rem 1rem 0;
  border-radius: 999px;
  background-color: var(--bs-tertiary-bg);
}

.home-mock__timeline span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--bs-emphasis-color);
}

.home-mock__controls {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 1rem .9rem;
}

.home-mock--stats {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.home-mock__stats-head {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}

.home-mock__stats-head span:first-child {
  text-transform: uppercase;
}

.home-mock__numbers {
  display: flex;
  gap: 2.5rem;
  margin: 1rem 0 1.25rem;
}

.home-mock__numbers > span {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.home-mock__number {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  color: var(--bs-emphasis-color);
}

.home-mock__bars {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(7, 1fr);
  gap: .45rem;
  min-height: 8rem;
}

.home-mock__bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .4rem;
  text-align: center;
}

/* Słupek = wyświetlenia, jego dolna, jaśniejsza część = pobrania. [2026-09-23]
   Bez wyrastania po wejściu w kadr (było `scaleY` + `is-shown` z JS) - Marcin:
   *„to nie powinno być animowane"*. Karta pojawia się razem z sekcją. */
.home-mock__bar-fill {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(var(--views) * .85);
  overflow: hidden;
  border-radius: .4rem;
  background-color: var(--bs-quaternary-bg);
}

.home-mock__bar-fill span {
  height: var(--downloads);
  background-color: var(--bs-emphasis-color);
}

/* Przykładowe dane tygodnia: wyświetlenia (% najwyższego dnia) i udział pobrań. */
.home-mock__bar:nth-child(1) { --views: 28%;  --downloads: 29%; }
.home-mock__bar:nth-child(2) { --views: 46%;  --downloads: 30%; }
.home-mock__bar:nth-child(3) { --views: 74%;  --downloads: 30%; }
.home-mock__bar:nth-child(4) { --views: 58%;  --downloads: 29%; }
.home-mock__bar:nth-child(5) { --views: 100%; --downloads: 30%; }
.home-mock__bar:nth-child(6) { --views: 34%;  --downloads: 26%; }
.home-mock__bar:nth-child(7) { --views: 20%;  --downloads: 25%; }

@media (max-width: 991.98px) {
  .home-split,
  .home-mock-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .home-mock-grid--captions {
    gap: 1.5rem;
  }

  .home-stat {
    justify-self: start;
  }

  /* Na wąskim ekranie tekst przed ilustracją także w sekcji odbierania. */
  .home-split--visual-first > .home-mock {
    order: 2;
  }
}

@media (max-width: 767.98px) {
  .home-mock__card {
    width: 100%;
  }
}

/* ------------------------------------------ bramka regulaminu (2026-09-19) --- */
/* Modal `partials/terms_gate.php` (wspólny mechanizm, markup budowany w JS -
   nie ruszamy go) wyciszony WYŁĄCZNIE tu, na stronach `home_wrapper.php`:
   włosowa linia zamiast ciężkiej karty, mniejszy nagłówek, przycisk w kolorze
   tekstu jak "Create transfer" w uploaderze, nie w `primary`. */
#terms_gate_modal .modal-dialog {
  max-width: 26rem;
}

#terms_gate_modal .modal-content {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 1rem;
  background-color: var(--bs-body-bg);
  box-shadow: none;
}

#terms_gate_modal .modal-body {
  padding: 1.5rem;
}

#terms_gate_modal h4 {
  margin-bottom: .75rem !important;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--bs-emphasis-color);
}

#terms_gate_modal p {
  font-size: .85rem;
  line-height: 1.6;
}

#terms_gate_modal p a {
  font-weight: 400 !important;
  color: var(--bs-body-color);
  text-decoration: underline;
  text-underline-offset: .2em;
}

#terms_gate_modal #terms_accept_button {
  height: 2.75rem;
  border: 0;
  border-radius: .75rem;
  background-color: var(--bs-emphasis-color);
  font-weight: 500;
  color: var(--bs-body-bg);
}

#terms_gate_modal #terms_accept_button:hover {
  opacity: .88;
}

/* [2026-09-22] Hasło nad kartą usunięte (Marcin) - karta na telefonie znów
   "cały ekran minus paski" (reguła wyżej), bez odejmowania miejsca na hasło. */

/* ------------------------------------- demo udostępniania (2026-09-19) --- */
/* [2026-09-19] Trzy sposoby udostępniania jako żywe demo (`index/share_demo.php`):
   pigułka (Tabs sliding 16) + panele (Panel reveal 07) leżące w JEDNEJ komórce
   siatki, więc przełączanie nie zmienia wysokości sekcji. Krótki dojazd
   (`--panel-translate-y`), bo panel jedzie wewnątrz karty, nie przez ekran. */

.home-demo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.home-demo__tabs {
  align-self: flex-start;
}

.home-demo__tab {
  font-size: .85rem;
}

.home-demo__panels {
  display: grid;
  overflow: hidden;
}

.home-demo__panel {
  --panel-translate-y: 16px;
  grid-area: 1 / 1;
  align-self: start;
}

.home-demo__card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.35rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 1rem;
  background-color: var(--bs-secondary-bg);
}

.home-demo__note {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--bs-secondary-color);
}

/* Link + "Copy" (Icon swap 09 + Text states swap 04) */
.home-demo__linkrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .5rem .5rem 1rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: .8rem;
  background-color: var(--bs-body-bg);
}

.home-demo__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--bs-font-monospace);
  font-size: .8rem;
  color: var(--bs-body-color);
}

/* Atrapa, nie przycisk - stąd brak stanów :hover/:active. */
.home-demo__copy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: .6rem;
  background-color: var(--bs-emphasis-color);
  font-size: .8rem;
  color: var(--bs-body-bg);
}

.home-demo__copy-icon {
  font-size: .75rem;
}

/* [2026-09-23] Podgląd strony pobierania w panelu "Share by link" - sam wiersz
   z linkiem był pusty wizualnie (Marcin: "strasznie nudna sekcja"). Układ i
   hierarchia jak w `views/t/partials/download.php`: tytuł + "N files - rozmiar",
   lista plików, przycisk pobrania. */
.home-demo__result {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: .8rem;
  background-color: var(--bs-body-bg);
}

.home-demo__result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.home-demo__result-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .95rem;
  color: var(--bs-emphasis-color);
}

.home-demo__result-meta {
  color: var(--bs-secondary-color);
}

.home-demo__files {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.home-demo__file {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  color: var(--bs-body-color);
}

.home-demo__file i {
  font-size: .78rem;
  color: var(--bs-secondary-color);
}

.home-demo__file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-demo__file-size {
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
}

/* Atrapa przycisku - `<span>`, bo tu nie ma czego pobierać. */
.home-demo__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  align-self: flex-start;
  padding: .55rem 1.1rem;
  border-radius: .6rem;
  background-color: var(--bs-emphasis-color);
  font-size: .82rem;
  color: var(--bs-body-bg);
}

/* Wysyłka na e-mail: odbiorcy jako tagi */
.home-demo__field {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.home-demo__field-label {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.home-demo__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .5rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: .8rem;
  background-color: var(--bs-body-bg);
}

.home-demo__chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background-color: var(--bs-tertiary-bg);
  font-size: .8rem;
  color: var(--bs-body-color);
}

.home-demo__chip i {
  font-size: .6rem;
  opacity: .5;
}

.home-demo__chip-input {
  padding-left: .35rem;
  font-size: .8rem;
  color: var(--bs-secondary-color);
}

.home-demo__note-field {
  padding: .6rem .9rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: .8rem;
  background-color: var(--bs-body-bg);
  font-size: .85rem;
  color: var(--bs-body-color);
}

/* Portal */
.home-demo__browser {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem .7rem;
  border-radius: .8rem .8rem 0 0;
  background-color: var(--bs-tertiary-bg);
}

.home-demo__dots {
  display: flex;
  gap: .3rem;
}

.home-demo__dots span {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: var(--bs-quaternary-bg);
}

.home-demo__address {
  flex: 1;
  font-family: var(--bs-font-monospace);
  font-size: .7rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.home-demo__portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin-top: -1.1rem;
  padding: 2rem 1rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-top: 0;
  border-radius: 0 0 .8rem .8rem;
  background-color: var(--bs-body-bg);
}

.home-demo__portal-title {
  font-size: 1rem;
  color: var(--bs-emphasis-color);
}

.home-demo__portal-drop {
  padding: 1.25rem 2.5rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: .8rem;
  font-size: .85rem;
  color: var(--bs-secondary-color);
}

/* ------------------------------------------- domknięcie strony (CTA) --- */
.home-cta {
  text-align: center;
}

/* [2026-09-23] Nagłówek i lead w JEDNEJ kolumnie (40rem - tej samej co karta hero),
   zamiast dwóch wyśrodkowanych bloków o różnej szerokości (zmierzone: 694 i 576 px,
   lewe krawędzie 373 i 432 px). Domknięcie strony i jej otwarcie mają teraz tę samą
   miarę, więc wyśrodkowane są tylko te dwa bloki, a cała treść między nimi trzyma
   lewą oś. */
.home-cta .home-section__header,
.home-cta .home-section__lead {
  max-width: 40rem;
  margin-inline: auto;
}

.home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.home-cta__button {
  padding: .85rem 1.75rem;
  border: 0;
  border-radius: .75rem;
  background-color: var(--bs-emphasis-color);
  font-weight: 500;
  color: var(--bs-body-bg);
  transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out);
}

.home-cta__button:hover {
  opacity: .88;
}

.home-cta__button:active {
  transform: scale(.98);
}

.home-cta__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--bs-body-color);
  text-decoration: none;
}

.home-cta__link:hover {
  color: var(--bs-emphasis-color);
}

@media (max-width: 767.98px) {
  .home-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  /* Wąski ekran: etykiety nie łamią się na dwie linie (pigułka ma stałą
     wysokość, więc rozjechałaby się z przyciskiem) - pasek przewija się w
     poziomie, jeśli zabraknie miejsca. */
  .home-demo__tabs {
    align-self: stretch;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .home-demo__tabs::-webkit-scrollbar {
    display: none;
  }

  .home-demo__tab {
    flex: 0 0 auto;
    padding-inline: 10px;
    font-size: .78rem;
    white-space: nowrap;
  }
}

/* ------------------------------------------------ /creators: hero z tłem --- */
/* [2026-09-29] Marcin: górna część `/creators` „z jakimś zajebistym animowanym tłem”,
   potem „poszalej trochę” - Light Rays z reactbits.dev (`syg/assets/js/light-rays.js`).
   Pierwszy ekran strony: promienie od samej góry okna (pod przezroczystym nagłówkiem),
   na całą szerokość okna, wygaszane u dołu w kolor strony. */
/* [2026-09-29] Marcin: „ten hero jest chyba za nisko”. Sekcja stała pod `padding-top`
   `.site-main` (nagłówek + 1rem) i `.home-about` (nagłówek), czyli ~155 px od góry, i
   centrowała treść w pozostałej wysokości - środek treści wypadał ~77 px pod środkiem
   ekranu. Teraz sekcja zaczyna się od samej góry okna (ujemny margines o ten odstęp)
   i ma wysokość okna, więc treść stoi na jego środku; własny `padding` (7rem) i tak
   odsuwa ją od nagłówka. */
.creators-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: calc(var(--home-header-space) * -2 - 1rem);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Większy nagłówek niż w pozostałych sekcjach - to otwarcie strony. */
.creators-hero__header {
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  line-height: 1.04;
}

/* Na całą szerokość okna, nie kolumny treści (`.site-main` ma 1008 px). `100vw` liczy
   też pasek przewijania, dlatego `overflow-x: clip` na `.home` tej strony (bez kontenera
   przewijania - przyklejony nagłówek działa dalej). Góra = początek strony (sekcja
   zaczyna się od góry okna, patrz `.creators-hero`). */
.home:has(.creators-hero) {
  overflow-x: clip;
}

/* Bez `isolation`/`z-index: -1`: w jasnym motywie warstwa promieni miesza się
   (`multiply`) z tłem STRONY, więc nie może być zamknięta we własnej grupie sekcji -
   dlatego promienie mają `z-index: 0`, a treść hero stoi nad nimi. */
.creators-hero > :not(.creators-hero__rays) {
  position: relative;
  z-index: 1;
}

.creators-hero__rays {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

[data-bs-theme="light"] .creators-hero__rays {
  mix-blend-mode: multiply;
}

.creators-hero__rays > canvas {
  animation: uploader-gradient-in 2s var(--ease-out, ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .creators-hero__rays > canvas {
    animation: none;
  }
}