/* Strona główna — scoped .hds-home. Kafel filmu i odtwarzacz w main.css. */

/*--------------------------------------------------------------
# Pierwszy ekran: obietnica + ściana filmów w perspektywie
# Desktop: tekst z lewej (wyśrodkowany w pionie względem ściany), dowód pod nim,
# ściana z prawej na całą wysokość sekcji i do prawej krawędzi ekranu.
# Telefon: tekst, przekrzywiony pas filmów na pełną szerokość, dowód pod pasem.
--------------------------------------------------------------*/
/* Ściana wychodzi za prawą krawędź ekranu: clip (nie hidden) ucina ją bez przewijania w bok
   i bez tworzenia kontenera przewijania, który fokus mógłby przesunąć. hidden to zapas dla
   przeglądarki bez clip (Safari przed 16): tam sekcja jest kontenerem przewijania, ale strona
   nie przewija się w bok. */
/* Hero stoi na czerni warstwy kinowej (--cine, ta sama co odtwarzacz: kadr leci z kafla do
   odtwarzacza bez zmiany tła). Ze skryptem wchodzi pod nagłówek (--hh-top), który nad nim jest
   przezroczysty (main.css, .is-ink), więc ściana sięga górnej krawędzi okna. Bez skryptu
   nagłówek zostaje jasny i hero zaczyna się pod nim. */
.hds-home .hh {
	--hh-pt: clamp(2rem, 4vw, 3.5rem); --hh-pb: clamp(1.5rem, 3vw, 2.5rem); --hh-top: 0px;
	--focus: var(--white);
	margin-top: calc(-1 * var(--hh-top));
	padding-block: calc(var(--hh-top) + var(--hh-pt)) var(--hh-pb); overflow-x: hidden; overflow-x: clip;
	background: var(--cine); color: var(--white);
}
/* +1 px: ramka nagłówka (przezroczysta, ale w jego wysokości). Bez niej nad hero zostawał biały wiersz tła strony. */
.js .hds-home .hh { --hh-top: calc(var(--header-h) + 1px); }
.hds-home .hh ::selection { background: var(--white); color: var(--cine); }
.hds-home .hh__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(400px, 44vw, 540px));
	grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(2rem, 5vw, 5rem);
}
.hds-home .hh__text { position: relative; z-index: 1; grid-column: 1; grid-row: 2; max-width: 600px; }
.hds-home .hh__cam { grid-column: 2; grid-row: 1 / -1; }
.hds-home .hh__proof { position: relative; z-index: 1; grid-column: 1; grid-row: 3; justify-self: start; }

.hds-home .hh h1 { font-size: var(--fs-900); letter-spacing: -.038em; line-height: 1.02; color: var(--white); }
.hds-home .hh .eyebrow { color: var(--cine-t2); }
.hds-home .hh__lead { margin-top: var(--sp-6); max-width: 520px; font-size: 1.1875rem; line-height: 1.55; color: var(--cine-t2); }
.hds-home .hh__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hds-home .hh__proof {
	display: inline-flex; align-items: center; flex-wrap: wrap; gap: .1rem .45rem; margin-top: var(--sp-5);
	min-height: var(--tap); font-size: var(--fs-300); color: var(--cine-t2);
}
.hds-home .hh__proof-n { font-weight: 500; color: var(--white); }
.hds-home .hh__proof-go { white-space: nowrap; }
.hds-home .hh__proof-go::after { content: '→'; display: inline-block; margin-left: .4rem; transition: transform .16s var(--ease); }
.hds-home .hh__proof:hover { color: var(--white); }
.hds-home .hh__proof:hover .hh__proof-go::after { transform: translateX(2px); }

/* „zwrot z reklamy." zawsze w osobnej linii: h1 ma text-wrap: balance, które na telefonie
   ściągało „liczą" do tej frazy. Reszta H1 balansuje się w dwóch liniach. */
.hds-home .hh__focus { display: block; width: fit-content; white-space: nowrap; }

/* Scena (.hh__cam): okno na ścianę od górnej krawędzi okna (pod przezroczystym nagłówkiem) do
   dołu sekcji (ujemne marginesy zjadają padding sekcji i --hh-top), od kolumny do prawej
   krawędzi ekranu. Na czerni pole wokół ściany jest tłem, a nie dziurą, więc scena nie ma
   limitu szerokości ani osobnego wygaszenia z prawej. Na szerokim ekranie wchodzi do 48 px
   w odstęp od tekstu, przy 1024 px i węższym już nie (kolumna tekstu jest wtedy ciasna).
   Wygaszenie ma dwa piętra: tory (.hh__lane, niżej) gaszą kolumny schodkowo w układzie
   płaszczyzny, a maska sceny (warstwy --hh-mx i --hh-my) tylko dociąga do zera przy krawędziach:
   szeroko z lewej pod tekstem, wąsko u góry i u dołu. Rampy to smoothstep w 9 punktach, więc
   krawędź nie ma progu, który oko czyta jako linię. Granice to zmienne --hh-m*, które czyta
   c-hero.js (fokus). clip-path ucina trafienia kursora w skrajnych 10% rampy (krycie do 3%). */
.hds-home .hh__cam {
	--hh-h: clamp(540px, calc(100svh - var(--header-h) - 100px), 760px);
	--hh-tile: calc(var(--hh-h) * .235);
	--hh-gap: 24px;
	/* Perspektywa w kaflach, nie w px: scena wygląda tak samo na każdym ekranie, a dolny koniec
	   kolumny (kopie pod oknem toru) nigdy nie wychodzi za kamerę. Przy stałych 1300 px na 2560
	   i przy stromszym wejściu kopie rzutowały się na całe okno i wychodziły na LCP. */
	--hh-p: calc(var(--hh-tile) * 7.5); --hh-rx: 34deg; --hh-ry: -9deg; --hh-rz: -19deg;
	--hh-ml: 28%; --hh-mr: 100%; --hh-mt: 10%; --hh-mb: 90%;
	/* overflow-anchor: przestawienie toru kopii przy fokusie (c-hero.js) nie może przewinąć strony. */
	position: relative; overflow: hidden; overflow: clip; overflow-anchor: none;
	height: calc(var(--hh-h) + var(--hh-top) + var(--hh-pt) + var(--hh-pb));
	margin-block: calc(-1 * (var(--hh-top) + var(--hh-pt))) calc(-1 * var(--hh-pb));
	margin-inline: clamp(-3rem, calc((1024px - 100vw) * .1875), 0px) calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 100vw) / 2);
	--hh-mx: linear-gradient(to right, transparent 0,
		rgba(0,0,0,.043) calc(var(--hh-ml) * .125), rgba(0,0,0,.156) calc(var(--hh-ml) * .25), rgba(0,0,0,.326) calc(var(--hh-ml) * .375),
		rgba(0,0,0,.5) calc(var(--hh-ml) * .5), rgba(0,0,0,.674) calc(var(--hh-ml) * .625), rgba(0,0,0,.844) calc(var(--hh-ml) * .75),
		rgba(0,0,0,.957) calc(var(--hh-ml) * .875), #000 var(--hh-ml),
		#000 var(--hh-mr), rgba(0,0,0,.844) calc(var(--hh-mr) + (100% - var(--hh-mr)) * .25), rgba(0,0,0,.5) calc(var(--hh-mr) + (100% - var(--hh-mr)) * .5),
		rgba(0,0,0,.156) calc(var(--hh-mr) + (100% - var(--hh-mr)) * .75), transparent 100%);
	--hh-my: linear-gradient(to bottom, transparent 0,
		rgba(0,0,0,.156) calc(var(--hh-mt) * .25), rgba(0,0,0,.5) calc(var(--hh-mt) * .5), rgba(0,0,0,.844) calc(var(--hh-mt) * .75),
		#000 var(--hh-mt), #000 var(--hh-mb),
		rgba(0,0,0,.844) calc(var(--hh-mb) + (100% - var(--hh-mb)) * .25), rgba(0,0,0,.5) calc(var(--hh-mb) + (100% - var(--hh-mb)) * .5),
		rgba(0,0,0,.156) calc(var(--hh-mb) + (100% - var(--hh-mb)) * .75), transparent 100%);
	-webkit-mask-image: var(--hh-mx), var(--hh-my);
	-webkit-mask-composite: source-in;
	mask-image: var(--hh-mx), var(--hh-my);
	mask-composite: intersect;
	clip-path: inset(calc(var(--hh-mt) * .1) calc((100% - var(--hh-mr)) * .1) calc((100% - var(--hh-mb)) * .1) calc(var(--hh-ml) * .1));
}
/* Niskie, szerokie okno (np. 1920 x 700): kafel liczony od wysokości byłby mały wobec szerokiej
   sceny, więc rośnie też z jej szerokością (cqw: scena jest kontenerem). */
@supports (width: 1cqw) {
	.hds-home .hh__cam { container-type: size; --hh-tile: max(var(--hh-h) * .235, 21.5cqw); }
}
/* Fokus z klawiatury na kaflu, który mimo przeskoku fazy kolumny stoi w wygaszeniu (skrajne
   kolumny): maska zwęża się tylko wokół niego. c-hero.js dokłada .is-spot i położenie kafla
   (--hh-sx, --hh-sy, promienie --hh-sw, --hh-sh), a maska dostaje trzecią warstwę: elipsę,
   w której kafel z obrysem jest w pełni widoczny. Reszta sceny gaśnie jak zwykle, więc nie
   wychodzą jej puste rogi, a płaszczyzna stoi (przesunięta odsłaniała puste pole). Elipsa
   dodaje się do gradientów (add), gradienty przecinają się ze sobą (intersect). clip-path
   schodzi, bo kafel w reflektorze może stać w uciętym pasie wygaszenia. */
.hds-home .hh:not(.is-ptr) .hh__cam.is-spot {
	-webkit-mask-image: radial-gradient(var(--hh-sw) var(--hh-sh) at var(--hh-sx) var(--hh-sy), #000 78%, transparent), var(--hh-mx), var(--hh-my);
	-webkit-mask-composite: source-over, source-in, source-in;
	mask-image: radial-gradient(var(--hh-sw) var(--hh-sh) at var(--hh-sx) var(--hh-sy), #000 78%, transparent), var(--hh-mx), var(--hh-my);
	mask-composite: add, intersect, intersect;
	clip-path: none;
}
/* Płaszczyzna: stół z kadrami oglądany pod kątem. Sam obrót, bez ruchu: płyną kolumny w niej,
   więc idą wzdłuż skosu. Perspektywa w transformacji, nie na rodzicu (maska spłaszcza 3D).
   Środek lekko w prawo, bo lewą część sceny i tak wygasza maska. Centruje translate, nie
   transform, więc wejście (hh-settle) animuje sam obrót. --hh-tx i --hh-ty to przechył za
   kursorem (c-hero.js, tylko mysz): kilka stopni do kątów bazowych. Zarejestrowane bez
   dziedziczenia, więc zmiana w każdej klatce nie przelicza stylów kafli. */
@property --hh-tx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --hh-ty { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hds-home .hh__plane {
	position: absolute; left: 54%; top: 50%; translate: -50% -50%;
	transform: perspective(var(--hh-p)) rotateX(calc(var(--hh-rx) + var(--hh-tx, 0deg))) rotateY(calc(var(--hh-ry) + var(--hh-ty, 0deg))) rotateZ(var(--hh-rz));
}
.hds-home .hh__wall {
	position: relative; display: grid; grid-template-columns: repeat(4, var(--hh-tile)); grid-template-rows: minmax(0, 1fr); gap: var(--hh-gap);
	height: calc(var(--hh-h) * 1.1);
}
/* Tor wygaszenia (.hh__lane): nieruchome okno na płynącą kolumnę. Każdy tor gaśnie na innej
   wysokości (--hh-la: koniec wygaszenia u góry, --hh-lb: początek u dołu, --hh-lf: długość
   wygaszenia), więc kafle nikną w czerni schodkowo, każdy w innym miejscu, a nie na jednej
   linii. Maska leży w układzie płaszczyzny, więc wygaszenie idzie w perspektywie. Rampa to
   smoothstep (0, .16, .5, .84, 1), bez widocznego progu. */
.hds-home .hh__lane {
	--hh-la: 24%; --hh-lb: 80%; --hh-lf: 20%;
	--hh-lm: linear-gradient(to bottom,
		transparent calc(var(--hh-la) - var(--hh-lf)), rgba(0,0,0,.16) calc(var(--hh-la) - var(--hh-lf) * .75),
		rgba(0,0,0,.5) calc(var(--hh-la) - var(--hh-lf) * .5), rgba(0,0,0,.84) calc(var(--hh-la) - var(--hh-lf) * .25),
		#000 var(--hh-la), #000 var(--hh-lb),
		rgba(0,0,0,.84) calc(var(--hh-lb) + var(--hh-lf) * .25), rgba(0,0,0,.5) calc(var(--hh-lb) + var(--hh-lf) * .5),
		rgba(0,0,0,.16) calc(var(--hh-lb) + var(--hh-lf) * .75), transparent calc(var(--hh-lb) + var(--hh-lf)));
	position: relative; min-height: 0;
	-webkit-mask-image: var(--hh-lm); mask-image: var(--hh-lm);
	/* Przycięcie do okna (5% w głąb rampy, krycie ok. 3%): kafle poza oknem nie łapią kursora.
	   LCP go nie widzi (ani maski, w 3D liczy rzut kafla), dlatego kopie pod oknem trzyma
	   w ryzach perspektywa w kaflach (--hh-p wyżej). Z boków zapas 24 px na przybliżenie kafla
	   pod kursorem i obrys fokusu. */
	clip-path: inset(calc(var(--hh-la) - var(--hh-lf) * .95) -24px calc(100% - var(--hh-lb) - var(--hh-lf) * .95) -24px);
}
/* Reflektor w torze (c-hero.js, fokus z klawiatury na kaflu, który mimo przeskoku stoi
   w wygaszeniu toru): elipsa wokół kafla w układzie płaszczyzny (--hh-ly od góry toru, promienie
   --hh-lw, --hh-lh) dodana do maski toru. */
.hds-home .hh:not(.is-ptr) .hh__lane.is-spot {
	-webkit-mask-image: radial-gradient(var(--hh-lw) var(--hh-lh) at 50% var(--hh-ly), #000 78%, transparent), var(--hh-lm);
	-webkit-mask-composite: source-over;
	mask-image: radial-gradient(var(--hh-lw) var(--hh-lh) at 50% var(--hh-ly), #000 78%, transparent), var(--hh-lm);
	mask-composite: add;
	clip-path: none;
}
.hds-home .hh__lane:nth-child(1) { --hh-la: 36%; --hh-lb: 70%; }
.hds-home .hh__lane:nth-child(2) { --hh-la: 22%; --hh-lb: 78%; }
.hds-home .hh__lane:nth-child(3) { --hh-la: 20%; --hh-lb: 74%; }
.hds-home .hh__lane:nth-child(4) { --hh-la: 30%; --hh-lb: 80%; }
/* Kolumna = trzy identyczne tory (oryginał i dwie kopie, hero.php), a pętla przesuwa ją
   o jeden tor, od -1/3 do -2/3 wysokości (tor kończy się odstępem, więc trzecia część kolumny
   to dokładnie jeden tor). W każdej fazie kolumna kryje więc pas od toru nad jej miejscem
   wyjściowym do końca tego miejsca, a scena, także górne wygaszenie, mieści się w tym pasie:
   przy zawinięciu pętli nic nie pojawia się ani nie znika. Przy dwóch torach nad miejscem
   wyjściowym było w fazie 0 pusto i u góry kafel znikał przy każdym zawinięciu. Co druga
   kolumna płynie w dół (reverse, start od -2/3: oryginał jest tam trzecim torem). */
.hds-home .hh__col { position: relative; animation: hh-flow var(--hh-speed, 68s) linear infinite; }
.hds-home .hh__col--down { animation-direction: reverse; }
.hds-home .hh__lane:nth-child(2) > .hh__col { margin-top: calc(var(--hh-tile) * -.55); }
.hds-home .hh__lane:nth-child(3) > .hh__col { margin-top: calc(var(--hh-tile) * -.2); }
.hds-home .hh__lane:nth-child(4) > .hh__col { margin-top: calc(var(--hh-tile) * -.9); }
.hds-home .hh__track { display: flex; flex-direction: column; gap: var(--hh-gap); padding-bottom: var(--hh-gap); }
/* Poza kadrem albo na ukrytej karcie (.is-paused), pod przytrzymanym palcem (.is-hold, pauza
   z WCAG 2.2.2 na dotyku) i pod otwartym odtwarzaczem (.is-covered; wszystko c-hero.js) ruch stoi. */
.hds-home .hh:is(.is-paused, .is-hold, .is-covered) .hh__col { animation-play-state: paused; }
/* Kursor nad ścianą albo fokus z klawiatury: ruch staje, żeby dało się trafić w kafel.
   Tylko prawdziwa mysz: na dotyku :hover zostaje po stuknięciu i zatrzymałby pas na stałe.
   Z c-hero.js (.is-smooth) ściana nie staje w miejscu, tylko wyhamowuje w ok. 0,4 s i tak
   samo rusza po zejściu kursora (tempo pętli w skrypcie); ta reguła to zapas bez skryptu.
   Fokus: tylko widoczny (klawiatura) i nie po kliknięciu (.is-ptr, c-hero.js). Po zamknięciu
   odtwarzacza reels.js oddaje fokus kaflowi, a po Esc Chrome uznaje go za :focus-visible:
   bez tego warunku ściana stanęłaby na stałe. */
@media (hover: hover) and (pointer: fine) {
	.hds-home .hh:not(.is-smooth) .hh__wall:hover .hh__col { animation-play-state: paused; }
}
.hds-home .hh:not(.is-ptr) .hh__wall:has(:focus-visible) .hh__col { animation-play-state: paused; }
@supports not selector(:has(*)) {
	.hds-home .hh:not(.is-ptr) .hh__wall:focus-within .hh__col { animation-play-state: paused; }
}
@keyframes hh-flow { from { transform: translateY(calc(-100% / 3)); } to { transform: translateY(calc(-200% / 3)); } }

/* Kafel w ścianie to komponent .reel.reel--bare z main.css (sam kadr, jedno przybliżenie na
   najechanie myszą). Tu tylko układ: przewinięcie do kafla z fokusem zostawia miejsce na obrys.
   Po kliknięciu myszą albo stuknięciu (.is-ptr) reels.js oddaje fokus kaflowi po zamknięciu
   odtwarzacza, a przeglądarka uznaje go wtedy za :focus-visible (Chrome po Esc, WebKit po
   stuknięciu w kopię): obrys gaśnie. Tab zdejmuje .is-ptr, więc klawiatura obrys ma. */
/* Przytrzymanie palcem to pauza pasa (c-hero.js), więc bez systemowego podglądu linku na iOS. */
.hds-home .hh__wall .reel { scroll-margin: 8px; -webkit-touch-callout: none; }
.hds-home .hh.is-ptr .hh__wall .reel:focus-visible .reel__frame { outline: none; }
.hds-home .hh.is-ptr .hh__wall .reel:focus-visible:not(:hover) .reel__frame { transform: none; }

/* Skupienie: kafel pod kursorem albo z fokusem z klawiatury wychodzi naprzód (main.css), a reszta
   ściany przygasa, jak ostrość przeniesiona na jeden kadr. Przygaszenie rusza od razu, powrót
   ma 120 ms opóźnienia: przejście kursora przez odstęp między kaflami nie mruga całą ścianą.
   Sama przezroczystość (nie filtr): tanio także przy 36 kaflach w ruchu. */
.hds-home .hh__wall .reel { transition: opacity .5s var(--ease) .12s; }
.hds-home .hh__wall .reel:is(:hover, :focus-visible) { transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
	.hds-home .hh__wall:has(.reel:hover) .reel:not(:hover) { opacity: .4; transition-delay: 0s; }
}
.hds-home .hh:not(.is-ptr) .hh__wall:has(.reel:focus-visible) .reel:not(:focus-visible) { opacity: .4; transition-delay: 0s; }

/* Etykieta przy kursorze (c-hero.js, tylko mysz): marka i długość filmu na płytce atramentu,
   pozioma, więc czytelna mimo skosu ściany. Jedzie za kursorem z lekkim opóźnieniem (skrypt,
   transform na .hh-chip), pojawia się i znika na .hh-chip__in. */
.hds-home .hh-chip {
	position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
	will-change: transform;
}
.hds-home .hh-chip__in {
	display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px;
	border-radius: var(--radius-sm); background: var(--ink); color: var(--white);
	font-size: var(--fs-200); font-weight: 500; line-height: 1; letter-spacing: -.005em; white-space: nowrap;
	opacity: 0; transform: scale(.86); transform-origin: 0 0;
	transition: opacity .18s var(--ease), transform .45s var(--ease-spring);
}
.hds-home .hh-chip.is-on .hh-chip__in { opacity: 1; transform: none; }
.hds-home .hh-chip svg { width: 9px; height: 9px; fill: currentColor; }
.hds-home .hh-chip__d { color: var(--ink-t2); font-variant-numeric: tabular-nums; }

/* Wejście: pod animowanym H1 kaskadą wjeżdżają lead, przyciski i dowód, a ściana odchyla się
   w głąb z bardziej płaskiego ujęcia (hh-settle). Kolumny dojeżdżają na miejsce po kolei, każda
   od strony, w którą płynie (hh-rise na translate, więc nie gryzie się z pętlą na transform);
   na telefonie karuzela wsuwa się z prawej (hh-glide). Sam ruch: plakat bywa elementem LCP, więc
   bez przezroczystości. Wsunięcie najwyżej o 30vw: przy 60vw w pierwszym kadrze największy był
   kafel bez fetchpriority i LCP telefonu rosło o ok. 80 ms (pomiar 2026-09-24). hh-settle bez
   wypełnienia: po wejściu płaszczyzna wraca do stylu bazowego, w którym żyje przechył za kursorem. */
@media (prefers-reduced-motion: no-preference) {
	/* will-change tylko na tym, co się rusza: kolumny ściany poza pauzą (desktop). */
	.hds-home .hh:not(.is-paused) .hh__col { will-change: transform; }
	.js .hds-home .hh__text > .eyebrow { animation: hh-up .7s var(--ease-out) both; }
	.js .hds-home .hh__lead { animation: hh-up .8s var(--ease-out) .38s both; }
	.js .hds-home .hh__cta { animation: hh-up .8s var(--ease-out) .5s both; }
	.js .hds-home .hh__proof { animation: hh-up .8s var(--ease-out) .62s both; }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
	.js .hds-home .hh__plane { animation: hh-settle 1.8s var(--ease-out); }
	.js .hds-home .hh__col { animation: hh-flow var(--hh-speed, 68s) linear infinite, hh-rise 1.6s var(--ease-out) backwards; }
	.js .hds-home .hh__col--down { animation-direction: reverse, normal; --hh-rise: -1; }
	.js .hds-home .hh__lane:nth-child(2) > .hh__col { animation-delay: 0s, .07s; }
	.js .hds-home .hh__lane:nth-child(3) > .hh__col { animation-delay: 0s, .14s; }
	.js .hds-home .hh__lane:nth-child(4) > .hh__col { animation-delay: 0s, .21s; }
}
@keyframes hh-up { from { opacity: 0; transform: translateY(14px); } }
/* Wejście z bardziej płaskiego ujęcia (ściana prawie przodem do widza odchyla się w głąb).
   Nie ze stromszego: przy mocnej perspektywie dolny koniec kolumn szedł wtedy za kamerę. */
@keyframes hh-settle {
	from { transform: perspective(var(--hh-p)) rotateX(calc(var(--hh-rx) - 12deg)) rotateY(var(--hh-ry)) rotateZ(calc(var(--hh-rz) + 3deg)) scale(.96); }
}
@keyframes hh-rise { from { translate: 0 calc(var(--hh-rise, 1) * var(--hh-tile) * .8); } }
@keyframes hh-glide { from { translate: 30vw 0; } }

@media (max-width: 960px) {
	.hds-home .hh__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.hds-home .hh__text, .hds-home .hh__cam, .hds-home .hh__proof { grid-column: 1; grid-row: auto; }
	.hds-home .hh__text { max-width: 640px; }
	/* Dowód stoi w kolumnie tekstu, z oddechem od podpisu filmu (ten jest na osi karuzeli). */
	.hds-home .hh__proof { margin-top: var(--sp-5); }
	/* Telefon: karuzela kinowa (od 2026-09-26; wcześniej płynący pas, który przycinał pod palcem).
	   Natywne przewijanie z przyciąganiem do środka, więc palec, rzut i hamowanie robi sama
	   przeglądarka, na kompozytorze, bez skryptu. Kolumny i tory znikają z układu, kopie też:
	   karuzela to 12 oryginałów w kolejności z listy. Scena bez maski (maska na przodku
	   przewijanej treści z filmami to przerysowanie w każdej klatce), głębię daje sam ruch kafli
	   niżej. Padding po bokach stawia pierwszy i ostatni kafel na środku. */
	.hds-home .hh__cam {
		--hh-card: clamp(196px, 56vw, 272px);
		height: auto; margin: var(--sp-5) calc(-1 * var(--gutter)) 0;
		container-type: normal; -webkit-mask-image: none; mask-image: none; clip-path: none;
	}
	.hds-home .hh__plane { position: static; translate: none; transform: none; }
	.hds-home .hh__wall {
		position: relative; display: flex; gap: 10px; height: auto;
		padding: 8px calc(50% - var(--hh-card) / 2) 12px;
		overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	.hds-home .hh__wall::-webkit-scrollbar { display: none; }
	.hds-home .hh__lane, .hds-home .hh__col, .hds-home .hh__track { display: contents; }
	.hds-home .hh__col { animation: none; }
	.hds-home .hh__wall [data-dup] { display: none; }
	/* scroll-snap-stop: jeden film na gest, jak w aplikacji; szybki rzut nie przelatuje całej listy. */
	.hds-home .hh__wall .reel { flex: 0 0 var(--hh-card); width: var(--hh-card); scroll-snap-align: center; scroll-snap-stop: always; }
}
/* Głębia karuzeli: kafel w środku stoi płasko i w pełni, sąsiedzi odchodzą w głąb po łuku
   (jak zakrzywiony ekran kina: zewnętrzna krawędź bliżej widza), maleją i gasną w czerni.
   Postęp liczy przeglądarka z położenia kafla w karuzeli (view timeline), więc ruch idzie
   dokładnie za palcem, bez skryptu. Animowana jest ramka kadru, nie kafel: kafel to punkt
   przyciągania, a jego pudełko zostaje nieruchome. Perspektywa w każdej ramce osobno, bo
   karuzela jest kontenerem przewijania (spłaszcza 3D). Bez obsługi view timeline (Firefox,
   Safari przed 26) to samo robią klasy z c-hero.js (.is-center) z przejściem. */
@supports (animation-timeline: view()) {
	@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
		.hds-home .hh__wall .reel__frame { animation: hh-cf linear both; animation-timeline: view(inline); }
	}
}
@supports not (animation-timeline: view()) {
	@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
		.js .hds-home .hh__wall .reel__frame { transform: perspective(800px) scale(.84); opacity: .4; transition: transform .6s var(--ease-out), opacity .6s var(--ease-out), scale .25s var(--ease-out); }
		.js .hds-home .hh__wall .reel.is-center .reel__frame { transform: none; opacity: 1; }
	}
}
@keyframes hh-cf {
	0% { transform: perspective(800px) translateX(-24%) rotateY(-40deg) scale(.8); opacity: .28; }
	50% { transform: perspective(800px) translateX(0) rotateY(0deg) scale(1); opacity: 1; }
	100% { transform: perspective(800px) translateX(24%) rotateY(40deg) scale(.8); opacity: .28; }
}
/* Podpis filmu ze środka (c-hero.js, tylko telefon): marka i tytuł, zmiana przez krótkie
   przenikanie. Dekoracja (aria-hidden): kafel ma pełną nazwę w aria-label. */
.hds-home .hh__now { display: none; }
@media (max-width: 960px) {
	.hds-home .hh__now {
		display: grid; justify-items: center; gap: .15rem; min-height: 2.9rem; margin: var(--sp-2) var(--gutter) 0;
		text-align: center; transition: opacity .18s var(--ease), translate .3s var(--ease-out);
	}
	.hds-home .hh__now.is-swap { opacity: 0; translate: 0 4px; }
	.hds-home .hh__now-c { font-size: var(--fs-200); color: var(--cine-t2); line-height: 1.3; }
	.hds-home .hh__now-t { max-width: 32ch; font-size: var(--fs-300); font-weight: 500; color: var(--white); line-height: 1.35; text-wrap: balance; }
}
/* Wejście karuzeli: wsuwa się z prawej (translate na karuzeli, więc nie gryzie się z głębią
   kafli na transform). Wciśnięty kafel lekko się cofa (.is-press, c-hero.js, z opóźnieniem,
   żeby początek przewijania nie mrugał); scale, nie transform, bo transform ramki trzyma głębia. */
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
	.js .hds-home .hh__wall { animation: hh-glide 1.5s var(--ease-out) .1s backwards; }
}
@media (prefers-reduced-motion: no-preference) {
	.hds-home .hh__wall .reel.is-press .reel__frame { scale: .955; }
}
@media (prefers-reduced-motion: no-preference) and (hover: none), (prefers-reduced-motion: no-preference) and (pointer: coarse) {
	.hds-home .hh__wall .reel__frame { transition: scale .25s var(--ease-out), transform .6s var(--ease-out), opacity .6s var(--ease-out); }
}
@media (max-width: 600px) {
	.hds-home .hh h1 { font-size: clamp(2.25rem, 9.6vw, 2.75rem); letter-spacing: -.035em; }
	.hds-home .hh__lead { margin-top: var(--sp-4); font-size: 1.0625rem; }
	.hds-home .hh__cta { margin-top: var(--sp-5); gap: .625rem; }
	.hds-home .hh__cta .btn { flex: 1 1 100%; }
	.hds-home .hh__cam { margin-top: var(--sp-5); }
}
/* Bez ruchu: ta sama kompozycja pod kątem, bez kopii, bez płynięcia, bez will-change i bez
   przejścia przy najechaniu (main.css). Karuzela na telefonie przewija się palcem, ale płasko:
   bez głębi, wsunięcia i samoczynnego przewijania. */
@media (prefers-reduced-motion: reduce) {
	.hds-home .hh__col, .hds-home .hh__wall { animation: none; }
	.hds-home .hh__wall [data-dup] { display: none; }
}

/*--------------------------------------------------------------
# Dlaczego HDS
--------------------------------------------------------------*/
.hds-home .hw__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.hds-home .hw__lead { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
.hds-home .hw__lead h2 { font-size: var(--fs-800); }
.hds-home .hw__lead p:not(.eyebrow) { margin-top: var(--sp-4); color: var(--t2); font-size: var(--fs-400); }
/* Teza na telefonie: słowa rozjaśniają się po kolei, gdy nagłówek jedzie od dołu do środka
   ekranu (view timeline nagłówka, zakres przesunięty o 3% na słowo), więc zdanie „czyta się"
   w tempie przewijania. Bez obsługi (Firefox, Safari przed 26), bez JS i przy reduced motion
   teza stoi w pełnym kolorze. */
@supports (animation-timeline: view()) {
	@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
		.js .hds-home .hw__lead h2 { view-timeline-name: --hw; }
		.js .hds-home .hw__w { animation: hw-w linear both; animation-timeline: --hw; animation-range: cover calc(12% + var(--i, 0) * 3%) cover calc(24% + var(--i, 0) * 3%); }
	}
}
@keyframes hw-w { from { opacity: .14; } }
.hds-home .hw__list { border-top: 1px solid var(--line); }
.hds-home .hw__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-6); border-bottom: 1px solid var(--line); }
.hds-home .hw__num { padding-top: .2rem; font-size: var(--fs-200); font-weight: 500; color: var(--t3); }
.hds-home .hw__list h3 { font-size: var(--fs-600); font-weight: 500; letter-spacing: -.01em; }
.hds-home .hw__list p { margin-top: var(--sp-2); color: var(--t2); font-size: var(--fs-400); }
/* Linia pod punktem rysuje się przy wejściu w kadr. */
@media (prefers-reduced-motion: no-preference) {
	.js .hds-home .hw__list li.reveal { position: relative; border-bottom-color: transparent; }
	.js .hds-home .hw__list li.reveal::after {
		content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line);
		transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-out) .2s;
	}
	.js .hds-home .hw__list li.reveal.is-visible::after { transform: none; }
}
@media (max-width: 900px) {
	.hds-home .hw__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
	.hds-home .hw__lead { position: static; }
	.hds-home .hw__list li { grid-template-columns: 36px minmax(0, 1fr); }
}

/*--------------------------------------------------------------
# Formaty
--------------------------------------------------------------*/
.hds-home .hf__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: end; margin-bottom: var(--sp-8); }
.hds-home .hf__head .section__head { margin-bottom: 0; }
.hds-home .hf__sub { color: var(--t2); font-size: var(--fs-400); max-width: 520px; }
.hds-home .hf__card h3 { font-size: var(--fs-600); font-weight: 500; margin-bottom: var(--sp-2); }
@media (max-width: 900px) {
	.hds-home .hf__head { grid-template-columns: 1fr; gap: var(--sp-4); }
}
/* Telefon: jedna kolumna, ikona i nazwa w wierszu, opis pełną szerokością karty
   (w dwóch kolumnach opis miał ok. 15 znaków w linii). */
@media (max-width: 600px) {
	.hds-home .hf .grid--4 { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.hds-home .hf__card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-4); padding: var(--sp-5); }
	.hds-home .hf__card .ico-tile { margin-bottom: 0; }
	.hds-home .hf__card h3 { margin-bottom: 0; }
	.hds-home .hf__card p { grid-column: 1 / -1; margin-top: var(--sp-3); }
	/* Talia: każda karta przykleja się pod nagłówkiem 10 px niżej od poprzedniej, następna
	   wjeżdża na nią, a spod spodu wystają krawędzie, jak karty na stole. Samo sticky, bez
	   skryptu; talia rozjeżdża się razem z końcem siatki. */
	.hds-home .hf__card { position: sticky; top: calc(var(--header-h) + var(--sp-4) + var(--i, 0) * 10px); transform-origin: 50% 0; }
	/* Karta w talii jest kryjąca od pierwszej klatki: przenikanie wejścia (.reveal) pokazywało
	   przez wjeżdżającą kartę tekst karty pod nią. Ruchem jest tu samo układanie się talii. */
	.js .hds-home .hf__card.reveal { opacity: 1; transform: none; }
}
/* Karta przykryta przez następną cofa się o 6% (skala liczona z drogi następnej karty do jej
   miejsca w talii: view timeline tej karty, udostępniony talii przez timeline-scope). Własnej
   osi przyklejona karta nie ma: stoi, więc jej postęp stoi. Bez obsługi talia bez cofania. */
@supports (animation-timeline: view()) {
	@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
		.hds-home .hf__deck { timeline-scope: --hf-1, --hf-2, --hf-3; }
		.hds-home .hf__card:nth-child(2) { view-timeline-name: --hf-1; }
		.hds-home .hf__card:nth-child(3) { view-timeline-name: --hf-2; }
		.hds-home .hf__card:nth-child(4) { view-timeline-name: --hf-3; }
		.hds-home .hf__card:nth-child(-n+3) { animation: hf-under linear both; animation-range: contain 15% contain 85%; }
		.hds-home .hf__card:nth-child(1) { animation-timeline: --hf-1; }
		.hds-home .hf__card:nth-child(2) { animation-timeline: --hf-2; }
		.hds-home .hf__card:nth-child(3) { animation-timeline: --hf-3; }
	}
}
@keyframes hf-under { to { scale: .94; } }

/*--------------------------------------------------------------
# Marki
--------------------------------------------------------------*/
/* Dwa pasy nazw płyną powoli w przeciwne strony; krawędzie wygasza maska (przezroczystość,
   nie kolor). Pas = dwie identyczne listy, przesunięcie o -50% daje pętlę bez szwu.
   Sam transform na jednym elemencie na pas: animacja idzie na kompozytorze. */
.hds-home .hm { border-top: 1px solid var(--line); }
.hds-home .hm__label { text-align: center; color: var(--t3); font-size: var(--fs-200); margin-bottom: var(--sp-5); }
.hds-home .hm__rows { display: grid; gap: var(--sp-1); }
.hds-home .hm__row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.hds-home .hm__track { display: flex; width: max-content; animation: hm-flow 80s linear infinite; }
.hds-home .hm__row--rev .hm__track { animation-direction: reverse; animation-duration: 92s; }
.hds-home .hm__row:hover .hm__track,
.hds-home .hm__row:focus-within .hm__track { animation-play-state: paused; }
.hds-home .hm__list { display: flex; flex: none; }
.hds-home .hm__list a {
	display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: clamp(1.25rem, 2.6vw, 2.25rem);
	font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; color: var(--t2);
	transition: color .16s var(--ease);
}
.hds-home .hm__list a:hover { color: var(--t1); }
.hds-home .hm__list a:focus-visible { outline: 2px solid var(--t1); outline-offset: -4px; border-radius: var(--radius-sm); color: var(--t1); }
@keyframes hm-flow { to { transform: translateX(-50%); } }
@media (max-width: 600px) {
	.hds-home .hm__list a { font-size: 1.0625rem; padding-inline: 1rem; }
}
/* Bez ruchu: jedna statyczna siatka wszystkich nazw, bez kopii i bez maski. */
@media (prefers-reduced-motion: reduce) {
	.hds-home .hm__label { text-align: left; }
	.hds-home .hm__rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 var(--sp-6); }
	.hds-home .hm__track { animation: none; }
	.hds-home .hm__row, .hds-home .hm__track, .hds-home .hm__list, .hds-home .hm__list li { display: contents; }
	.hds-home .hm__list[data-dup] { display: none; }
	.hds-home .hm__list a { padding: .5rem 0; font-size: 1.0625rem; letter-spacing: -.01em; white-space: normal; border-bottom: 1px solid var(--line); }
}