/* ═══════════════════════════════════════════════════════════════
   Grynd — warstwa obrazu i ruchu (06.10.2026)
   Strona z 24.09 zostaje (style.css bez zmian); tu dochodzą urządzenia, ekrany apki i ruch.
   Układ: urządzenia w oficjalnych płaskich ramkach Apple stoją prosto na poświacie w kolorze
   rozdziału (ta sama logika co poświata ekranów w apce); kafelki mają różne rozmiary;
   ruch tylko tam, gdzie coś tłumaczy, i tylko przez transform/opacity.
   Kolory wyłącznie z tokenów style.css (paleta apki).
   ═══════════════════════════════════════════════════════════════ */

:root {
    color-scheme: dark;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);          /* wejścia i wyjścia */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);      /* ruch po ekranie */
    --text-muted: #78787D;                                /* przygaszony tekst z palety apki (4,8:1 na czerni; #6E6E73 dawał 4,1:1) */
    --c-share: #F5F5F7;                                   /* rozdział bez własnego koloru — biel tekstu */
    --ekran-tlo: #000000;                                 /* tło ekranu urządzenia (bgPrimary apki) */
    --status: #FFFFFF;                                    /* pasek stanu telefonu */
    --zaslona-gora: rgba(0, 0, 0, 0.22);                  /* przyciemnienie zdjęcia pod kartą */
    --zaslona-dol: rgba(0, 0, 0, 0.38);
    --scena-top: 96px;                                    /* gdzie zatrzymuje się para urządzeń (tuż pod menu) */
    --okno: 100vh;                                        /* wysokość okna; nowsze przeglądarki dostają niżej dokładniejszą (svh) */
    --droga: calc(var(--okno) * 0.68);                    /* ile przewijania trwa scena u góry */
}

@supports (height: 100svh) {
    :root { --okno: 100svh; }
}

/* ── Bez JS wszystko widać od razu (wejścia przy przewijaniu włącza dopiero skrypt) ── */
html:not(.js) .reveal { opacity: 1; transform: none; filter: none; }

/* ── Skład tekstu: równe wiersze nagłówków, bez samotnych końcówek ── */
.hero-tagline, .chapter-title, .tile h3, .statement p { text-wrap: balance; }
.tile p, .chapter-lead, .hero-desc, .more-opis { text-wrap: pretty; }

/* ── Poświata w tle idąca za rozdziałem (warstwy przenikają się przez opacity) ── */
.poswiata { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.poswiata span {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(120% 52% at 50% 0%, color-mix(in srgb, var(--k) 30%, transparent), color-mix(in srgb, var(--k) 8%, transparent) 46%, transparent 76%);
    transition: opacity 1s ease;
}

.poswiata span.is-on { opacity: 1; }
.poswiata .k-trening { --k: var(--c-training); }
.poswiata .k-dieta { --k: var(--c-diet); }
.poswiata .k-zdrowie { --k: var(--c-health); }
.poswiata .k-ai { --k: var(--c-ai); }
.poswiata .k-wiecej { --k: var(--accent-light); }

/* ── Przycisk zatrzymania ruchu (każdy ruch dłuższy niż 5 s da się zatrzymać) ── */
/* Ukryty atrybutem hidden; skrypt odsłania go tylko tam, gdzie ruch naprawdę działa. */
.pauza {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 36px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 160ms var(--ease-out), color 0.2s ease;
}

.pauza[hidden] { display: none; }                       /* strona na serwerze nie ma resetu [hidden] */
.pauza:active { transform: scale(0.97); }
.pauza .i-start { display: none; }
.pauza[aria-pressed="true"] .i-start { display: inline; }
.pauza[aria-pressed="true"] .i-pauza { display: none; }
.pauza:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
    .pauza:hover { color: var(--text-primary); }
}

@media (pointer: coarse), (max-width: 680px) {
    .pauza { min-height: 44px; }
}

.tile-copy .pauza { margin-top: 6px; }

/* Większe pole dotyku bez zmiany wyglądu — elementy strony z 24.09 (przełącznik planów 29 px, odnośniki stopki 16 px) */
.pw-switch button::after { content: ''; position: absolute; inset: -8px 0; }
.footer-links a { position: relative; }
.footer-links a::after { content: ''; position: absolute; inset: -14px -8px; }

/* ── Urządzenia ─────────────────────────────────────────────── */
/* Wymiary wycięcia ekranu zmierzone na ramkach Apple:
   iPhone 18 (1350×2760): ekran 1206×2622 od (72, 69); Apple Watch S11 46 mm (560×880): ekran 416×496 od (72, 192). */
.phone {
    position: relative;
    width: var(--w, 300px);
    max-width: 100%;
    aspect-ratio: 1350 / 2760;
    margin: 0;
    flex-shrink: 0;
}

.phone-screen {
    position: absolute;
    left: 5.333%;
    top: 2.5%;
    width: 89.334%;
    height: 95%;
    border-radius: 14.4% / 6.65%;
    overflow: hidden;
    background: var(--ekran-tlo);
    container-type: inline-size;
}

.phone-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.phone-frame, .watch-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Pasek stanu: godzina po lewej, zasięg/Wi-Fi/bateria po prawej; skaluje się z ekranem (100cqw = 390 pt). */
.phone-status {
    position: absolute;
    top: 4.9cqw;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8.4cqw 0 13.2cqw;
    color: var(--status);
    font-size: 4.1cqw;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.phone-status svg { width: 17.4cqw; height: 3.6cqw; }

@supports not (width: 1cqw) {
    .phone-status { display: none; }
}

.watch {
    position: relative;
    width: var(--w, 170px);
    max-width: 100%;
    aspect-ratio: 560 / 880;
    margin: 0;
    flex-shrink: 0;
}

.watch-screen {
    position: absolute;
    left: 12.857%;
    top: 21.818%;
    width: 74.286%;
    height: 56.364%;
    border-radius: 25% / 21%;
    overflow: hidden;
    background: var(--ekran-tlo);
}

.watch-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* ── Żywy ekran: makieta apki wstawiona jako kod (390 pt szerokości), skalowana do ekranu telefonu ── */
/* Pod spodem zawsze leży obraz tego samego ekranu: widzi go czytnik ekranu, tryb „mniej ruchu" i strona bez skryptów. */
.zywy { position: absolute; left: 0; top: 0; width: 390px; height: 848px; transform-origin: 0 0; overflow: hidden; background: var(--ekran-tlo); display: none; }
.zywy-gotowy > .zywy { display: block; }
.zywy-gotowy > img.plakat { opacity: 0; }
.zywy a { pointer-events: none; }
.zywy nav[aria-label="Nawigacja"] { position: absolute; left: 16px; right: 16px; bottom: 30px; margin: 0 !important; z-index: 5; }

/* Krój w żywych ekranach: San Francisco na urządzeniach Apple, Inter gdzie indziej (jak reszta strony); tytuły marki zostają w Poppins */
.zywy, .zywy *:not([style*="Poppins"]) { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif !important; }
.zywy [style*="Poppins"] * { font-family: inherit !important; }

/* Telefon z żywym ekranem ma własną warstwę: wjazd kafelka i budowanie ekranu nie każą wtedy przeglądarce malować ekranu
   od nowa (pomiar plynnosc.mjs, rozdziały, 574 klatki: bez warstwy 11 zgubionych, z warstwą 3). */
.phone.warstwa { will-change: transform; }

/* Budowanie ekranu. Przed startem (klasa .spi) ekran jest zasłonięty — czarny, jak wygaszony. Na starcie skrypt kładzie
   na każdej sekcji zasłonę (jednolity prostokąt) i zasłony znikają jedna po drugiej od góry; potem wypełniają się paski,
   kółka i linie. Treść pod spodem stoi — przesuwanie samych sekcji gubiło klatki (24 zamiast 3 na 574). Liczby stoją. */
.zywy.spi::after { content: ''; position: absolute; inset: 0; z-index: 4; background: var(--ekran-tlo); }
.zaslony { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.zaslony > i { position: absolute; left: 0; right: 0; background: var(--ekran-tlo); transition: opacity 0.55s ease; transition-delay: calc(var(--i, 0) * 70ms + 80ms); }
.zaslony.odslon > i { opacity: 0; }
.zywy.spi .pas { transform: scaleX(0); }
.zywy .pas { transform-origin: 0 50%; transition: transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 420ms); }
.zywy .luk, .zywy .linia { transition: stroke-dashoffset 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 420ms); }
.zywy .linia { transition-duration: 1.5s; }

/* Zatrzymanie pętli (rozmowa i kalendarz): poza kadrem albo na życzenie */
.stoi .zywy, .stoi .zywy *, .zatrzymane .zywy, .zatrzymane .zywy * { animation-play-state: paused !important; }

/* Kalendarz obok rozmowy: zaplanowana sesja „wpada" w chwili, gdy trener kończy odpowiedź (ta sama pętla 14 s co rozmowa) */
.zywy .kal-nowy { overflow: hidden; animation: kal-wpada 14s infinite var(--ease-out); }

@keyframes kal-wpada {
    0%, 61% { max-height: 0; opacity: 0; transform: translateY(-8px); }
    66%, 94.29% { max-height: 110px; opacity: 1; transform: none; }
    97.86%, 100% { max-height: 0; opacity: 0; transform: none; }
}

/* ── Menu: przycisk sklepu zawsze pod ręką (komputer) ───────── */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--text-primary);
    color: var(--bg);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 160ms var(--ease-out);
}

.nav-cta:active { transform: scale(0.97); }
.nav-cta:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

/* ── Góra strony: tekst jak 24.09 + scena z urządzeniami ────── */
.hero {
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    padding: 124px 0 0;
}

/* Sekcja jest teraz dużo wyższa niż okno — poświata tła wygasa przed jej dolną krawędzią, żeby nie było widać cięcia */
.hero::before { -webkit-mask-image: linear-gradient(#000 calc(100% - 420px), transparent); mask-image: linear-gradient(#000 calc(100% - 420px), transparent); }

.hero-logo { width: clamp(92px, 10vw, 124px); margin-bottom: 22px; }
.hero-roles { margin-bottom: 14px; }
.hero-tagline { font-size: clamp(2.75rem, 6.6vw, 5rem); margin-bottom: 18px; }
.hero .store-buttons { margin-top: 28px; }
.hero-proof { margin-top: 24px; }

/* Scena: przy przewijaniu para urządzeń zatrzymuje się pod menu, a w telefonie przewija się cały ekran Dziś;
   zegarek zmienia ekrany razem z nim. Włącza ją skrypt (klasa .scena-gra) — bez niego to zwykły, nieruchomy blok. */
.scena {
    width: 100%;
    margin-top: 52px;
    /* szerokość telefonu i zegarka: wysokość urządzeń nie może przekroczyć okna — inaczej zatrzymany telefon nie mieściłby się na ekranie */
    --tel: min(clamp(210px, 23vw, 320px), calc((var(--okno) - var(--scena-top) - 28px) * 0.489));
    --zeg: min(clamp(110px, 12vw, 168px), calc((var(--okno) - var(--scena-top) - 28px) * 0.257));
    /* gdzie para się zatrzymuje: środek okna (telefon ma wysokość 2,0444 × szerokość), ale nigdy wyżej niż tuż pod menu */
    --pin: max(var(--scena-top), calc((var(--okno) - var(--tel) * 2.0444) / 2));
}

.scena-gra body { overflow-x: clip; }                    /* „hidden" na body i sekcji wyłączałby przyklejanie */
.scena-gra .hero { overflow: clip; }
/* Droga sceny to osobny blok pod kadrem: przyklejony element jeździ tylko po treści rodzica (odstęp wewnętrzny się nie liczy). */
.scena-gra .scena::after { content: ''; display: block; height: var(--droga); }
.scena-gra .scena-kadr { position: sticky; top: var(--pin); }

/* Treść ekranu Dziś jedzie razem z przewijaniem. Tam, gdzie przeglądarka to umie (Chrome, Edge, Safari 26+), robi to sama
   — ruch jest wtedy przypięty do przewijania klatka w klatkę i nie zależy od tego, czy strona jest akurat zajęta.
   Oś liczy się od chwili, gdy góra sceny dochodzi do miejsca zatrzymania, do chwili, gdy jej dół dochodzi do dołu pary.
   W pozostałych przeglądarkach treść przesuwa skrypt (projekt.js). */
@supports (animation-timeline: view()) {
    .scena-gra .scena { view-timeline: --scena block; view-timeline-inset: var(--pin) calc(var(--okno) - var(--pin) - var(--tel) * 2.0444); }
    .scena-gra .scena-tresc { animation: scena-jazda auto linear both; animation-timeline: --scena; animation-range: contain; }
}

/* koniec drogi: dół treści równo z dołem okna pod nagłówkiem (okno ma 750 z 390 pt szerokości = 192,31cqw) */
@keyframes scena-jazda { to { transform: translate3d(0, calc(192.31cqw - 100%), 0); } }

/* Telefon i zegarek stoją obok siebie jako jedna, wyśrodkowana para: całe, środki na jednej wysokości. */
.hero-devices {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 3.2vw, 52px);
    width: 100%;
    padding: 0 24px;
}

/* Poświata za urządzeniami — kobalt marki, jak u góry ekranu Trening w apce (kończy się równo z dołem pary: nic jej nie ucina) */
.hero-devices::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 4%;
    width: min(1100px, 130%);
    height: 96%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
    pointer-events: none;
}

.hero-devices .phone { --w: var(--tel); }
.hero-devices .watch { --w: var(--zeg); }

/* Ekran Dziś w trzech warstwach, tak jak w apce: poświata i nagłówek „Dziś." stoją (obraz .scena-gora),
   treść przewija się w oknie pod nagłówkiem (98 z 848 pt wysokości ekranu = 11,557%), pasek zakładek leży na wierzchu. */
.scena-okno { position: absolute; top: 11.557%; right: 0; bottom: 0; left: 0; overflow: hidden; }
.scena-okno > img.scena-tresc { display: block; width: 100%; height: auto; will-change: transform; }
.phone-screen > img.scena-pasek { inset: auto 4.1% 3.54% 4.1%; width: 91.8%; height: auto; object-fit: fill; }

.scena .watch-screen > img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; }
.scena .watch-screen > img.is-on { opacity: 1; }

/* Wejście urządzeń po animacji logo (stan startowy nakłada skrypt — bez JS są widoczne od razu) */
.hero-devices.czeka .phone, .hero-devices.czeka .watch { opacity: 0; transform: translateY(48px); }
.hero-devices .phone, .hero-devices .watch { transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }
.hero-devices .watch { transition-delay: 80ms; }

/* ── Kafelki z ekranem ──────────────────────────────────────── */
/* Tekst u góry, urządzenie przyklejone do dołu kafelka: w jednym rzędzie telefony zaczynają się na tej samej wysokości. */
.tile.has-visual { padding: 0; gap: 0; }
.tile.has-visual .tile-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 40px 40px 0; }

.tile-visual {
    --w: min(264px, 74%);
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    height: 400px;                                        /* telefon ma 540 px — dół (26%) chowa krawędź kafelka */
    margin-top: 36px;
    padding: 0 24px;
}

/* Poświata w kolorze rozdziału pod urządzeniem */
.tile-visual::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 12%;
    width: 130%;
    height: 120%;
    transform: translateX(-50%);
    background: radial-gradient(42% 42% at 50% 50%, color-mix(in srgb, var(--tint) 30%, transparent), transparent);
    pointer-events: none;
}

.tile-visual > * { position: relative; }
.tile-visual .phone { width: var(--w); }

/* Szeroki kafelek: tekst | ekran */
.tile.wide.has-visual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: stretch; }
.tile.wide.has-visual .tile-copy { justify-content: center; padding: 56px 0 56px 56px; }
.tile.wide.has-visual .tile-copy p { max-width: 520px; }
.tile.wide.has-visual .tile-visual { --w: min(286px, 70%); height: auto; min-height: 470px; margin-top: 0; padding: 56px 32px 0; }

/* Szeroki kafelek z dwoma telefonami: węższy tekst, większe ekrany; pierwszy telefon w całości, drugi niżej i ucięty */
.tile.wide.duo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.tile.wide.duo .tile-visual { --w: min(272px, 46%); gap: clamp(14px, 2vw, 28px); height: auto; min-height: 0; padding: 48px 28px 28px; }
/* drugi telefon stoi 120 px niżej; ujemny margines sprawia, że nie podnosi kafelka — jego dół (ok. 1/6) chowa krawędź */
.tile.wide.duo .phone:nth-child(2) { margin-top: 120px; margin-bottom: -120px; }

/* Rozdział Trening: duży kafelek; pod nim po lewej dwa niższe (rower, zegarek), po prawej wysoki z ekranem biegu */
@media (min-width: 681px) {
    .tiles-trening .t-rower { grid-column: 1; grid-row: 2; }
    .tiles-trening .t-teren { grid-column: 2; grid-row: 2 / span 2; }
    .tiles-trening .t-zegarek { grid-column: 1; grid-row: 3; }
    .tiles-trening .t-teren .tile-visual { height: 470px; --w: min(290px, 74%); }
}

.tile-visual--zegarki { height: 232px; align-items: center; gap: 36px; margin-top: 20px; padding-bottom: 28px; }
.tile-visual--zegarki::before { top: -10%; height: 130%; }
.tile-visual--zegarki .watch { --w: 132px; }

/* ── Nowy rozdział: karty do udostępniania na zdjęciach ─────── */
.ch-share { --chapter: var(--c-share); }
.ch-share .eyebrow { color: var(--text-secondary); }

.strip {
    margin-top: 8px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.strip-track {
    display: flex;
    gap: 20px;
    width: max-content;
    margin: 0;
    padding: 0 20px;
    list-style: none;
}

/* Taśma jedzie o szerokość jednego kompletu kart (--zestaw liczy skrypt), więc pętla nie ma szwu na żadnym monitorze */
.strip.jedzie .strip-track { padding: 0; animation: tasma var(--czas, 80s) linear infinite; }
.strip.jedzie:hover .strip-track, .strip.stoi .strip-track, .strip.zatrzymana .strip-track { animation-play-state: paused; }

@keyframes tasma { to { transform: translateX(calc(-1 * var(--zestaw, 50%))); } }

.strip-ster { display: flex; justify-content: center; margin-top: 20px; }

.shot {
    position: relative;
    width: clamp(168px, 17vw, 236px);
    aspect-ratio: 200 / 356;
    flex-shrink: 0;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--zdjecie, var(--bg-tile));
}

.shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.shot > img.shot-zdjecie { object-fit: cover; }
.shot > img:not(.shot-zdjecie) { z-index: 2; }

/* Lekkie przyciemnienie zdjęcia pod białymi liczbami karty */
.shot:has(.shot-zdjecie)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(var(--zaslona-gora), var(--zaslona-dol));
    pointer-events: none;
}

/* ── Nowy rozdział: kolejne funkcje, ekran zmienia się sam ──── */
.ch-more { --chapter: var(--accent-light); }

.more { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }

.more-lista { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }

.more-poz {
    position: relative;
    display: grid;
    grid-template-rows: auto 0fr;
    gap: 0;
    width: 100%;
    padding: 18px 24px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.more-nazwa { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.more-opis { min-height: 0; overflow: hidden; font-size: 1rem; line-height: 1.5; color: var(--text-secondary); opacity: 0; transition: opacity 0.3s ease; }

/* Rozwinięty opis ma zawsze wysokość dwóch wierszy — lista nie zmienia długości przy przełączaniu */
.more-poz[aria-selected="true"] { grid-template-rows: auto 1fr; gap: 8px; background: var(--bg-tile); border-color: var(--border); color: var(--text-primary); }
.more-poz[aria-selected="true"] .more-opis { min-height: 3em; opacity: 1; }
.more-poz:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
    .more-poz:hover { color: var(--text-primary); }
}

/* Pasek czasu aktywnej pozycji — rośnie liniowo do zmiany ekranu */
.more-pasek { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent-light); transform: scaleX(0); transform-origin: 0 50%; }
.more.gra .more-poz[aria-selected="true"] .more-pasek { animation: pasek var(--takt, 5s) linear forwards; }

@keyframes pasek { to { transform: scaleX(1); } }

.more-pauza { margin: 10px 0 0 12px; }

.more-ekran { position: relative; display: flex; justify-content: center; --w: clamp(240px, 26vw, 310px); }
.more-ekran::before {
    content: '';
    position: absolute;
    inset: -8% -40%;
    background: radial-gradient(40% 40% at 50% 50%, color-mix(in srgb, var(--chapter) 26%, transparent), transparent);
    pointer-events: none;
}

.more-ekran .phone { width: var(--w); }
.more-ekran .phone-screen > img { opacity: 0; transition: opacity 0.5s ease, filter 0.5s ease; filter: blur(3px); }
.more-ekran .phone-screen > img.is-on { opacity: 1; filter: none; }

/* ── Telefon: stały przycisk pobrania u dołu ────────────────── */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: none;
    justify-content: center;
    padding: 28px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent) 62%);   /* treść strony wygasa pod przyciskiem */
    pointer-events: none;
    visibility: hidden;
    transform: translateY(120%);
    transition: transform 0.45s var(--ease-out), visibility 0s 0.45s;
}

.sticky-cta.widac { visibility: visible; transform: none; transition: transform 0.45s var(--ease-out), visibility 0s; }

.sticky-cta a {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--text-primary);
    color: var(--bg);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ── Stopka ─────────────────────────────────────────────────── */
.footer-brand img { height: 48px; }
p.footer-email { user-select: all; }

/* ── Wąski komputer i tablet ────────────────────────────────── */
@media (max-width: 940px) {
    .nav-inner { gap: 16px; }
    .nav-links { gap: 20px; }
}

@media (max-width: 860px) {
    .tile.wide.has-visual, .tile.wide.duo { display: flex; flex-direction: column; }
    .tile.wide.has-visual .tile-copy { flex: 0 0 auto; padding: 40px 40px 0; }
    .tile.wide.has-visual .tile-visual { min-height: 0; height: 420px; margin-top: 36px; padding: 0 24px; }
    .tile.wide.duo .tile-visual { --w: min(250px, 42%); height: auto; padding: 0 24px 28px; }
    .more { grid-template-columns: minmax(0, 1fr); }
    .more-ekran { order: -1; }
    .more-lista { max-width: none; }
}

@media (max-width: 780px) {
    .nav-cta { display: none; }                          /* poniżej tej szerokości menu z przyciskiem się nie mieści */
}

/* ── Telefon ────────────────────────────────────────────────── */
@media (max-width: 680px) {
    :root { --scena-top: 88px; --droga: calc(var(--okno) * 0.54); }

    /* Góra: przyciski sklepów w jednym rzędzie, żeby telefon mieścił się na pierwszym ekranie */
    .hero { padding: 104px 0 0; }
    .hero-logo { margin-bottom: 16px; }
    .hero .store-buttons { flex-direction: row; flex-wrap: nowrap; gap: 10px; margin-top: 24px; }
    .hero .store-btn { flex: 1 1 0; min-width: 0; width: auto; max-width: 176px; padding: 10px 12px; gap: 8px; }
    .hero .store-btn svg { width: 20px; height: 20px; }
    .hero .store-btn-name { font-size: 0.9375rem; }
    .hero-proof { margin-top: 20px; }
    .scena {
        margin-top: 28px;
        --tel: min(54vw, 220px, calc((var(--okno) - var(--scena-top) - 24px) * 0.489));
        --zeg: min(29vw, 118px, calc((var(--okno) - var(--scena-top) - 24px) * 0.257));
    }

    .hero-devices { gap: 14px; padding: 0 16px; }

    .tile.has-visual .tile-copy, .tile.wide.has-visual .tile-copy { padding: 28px 24px 0; }
    .tile-visual, .tile.wide.has-visual .tile-visual { --w: min(240px, 72%); height: 380px; margin-top: 28px; padding: 0 16px; }

    /* Dwa telefony: przesuwane palcem, jeden naraz na środku, sąsiedni wygląda zza krawędzi; ekrany w całości */
    .tile.wide.duo .tile-visual {
        --w: 68%;
        justify-content: flex-start;
        gap: 16px;
        height: auto;
        margin-top: 28px;
        padding: 0 16% 28px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .tile.wide.duo .tile-visual::-webkit-scrollbar { display: none; }
    .tile.wide.duo .tile-visual::before { display: none; }   /* poświata nie może jeździć razem z telefonami */
    .tile.wide.duo .phone { scroll-snap-align: center; }
    .tile.wide.duo .phone:nth-child(2) { margin-top: 0; margin-bottom: 0; }

    .tile-visual--zegarki, .tile.has-visual .tile-visual--zegarki { height: 216px; gap: 28px; margin-top: 16px; }

    .strip { margin-top: 0; }
    .strip-track { gap: 12px; }
    .shot { border-radius: 22px; }

    .more { gap: 28px; }
    .more-ekran { --w: min(60vw, 240px); height: 380px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
    .more-poz { padding: 16px 18px; border-radius: 18px; min-height: 44px; }

    .sticky-cta { display: flex; }
    .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
    .footer-links a::after { inset: -7px -24px; }      /* odnośniki stoją jeden pod drugim — pola nie mogą się nakładać */
}

/* ── Mniej ruchu: zostają przejścia przez przenikanie, znika przesuwanie ── */
@media (prefers-reduced-motion: reduce) {
    .hero-devices.czeka .phone, .hero-devices.czeka .watch { opacity: 1; transform: none; }
    .strip { overflow-x: auto; }
    .strip.jedzie .strip-track { animation: none; padding: 0 20px; }
    .more-ekran .phone-screen > img { filter: none; }
    .poswiata span { transition: none; }
}