/* -------------------------------------------- ako to funguje: scroll scéna -- */
/* Pódium (.scrolly-stage) drží banner, mobil a popisky. Priebeh riadi
   site.js: nastavuje premenné --zoom/--px/--py/--pr/--ps/--dim na
   .scrolly-view a data-step / data-screen / data-nfc na pódiu.
   Predvolené hodnoty nižšie = statická verzia (bez JS, reduced motion):
   mobil stojí vedľa karty a ukazuje vernostnú kartu.

   .scrolly-view je size container — banner, karta aj mobil sa merajú
   v cqw/cqh, takže pózy z JS sedia pri každej veľkosti okna aj pri
   zoom na <html>. Geometria fotky: 3168×1344 (pomer 2,357), stred
   karty je na 50 % / 56 %, karta má 24,5 % šírky a 62 % výšky fotky. */
.scrolly {
    padding: 0;
    position: relative;
    background: hsl(var(--cream));
}

.scrolly-stage { position: relative; }

/* Čierna vlna z predošlej sekcie ležiaca cez fotku (pozri landing.html). */
.scrolly-wave {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    line-height: 0;
    pointer-events: none;
}
.scrolly-wave svg { display: block; width: 100%; height: 80px; }
/* Spodná vlna do čiernej „čo strácate“: na konci scrollu je pódium
   prilepené k spodku sekcie, takže vlna leží práve cez spodok fotky. */
.scrolly-wave-bottom { top: auto; bottom: -1px; }

.scrolly-view {
    position: relative;
    height: clamp(560px, 92svh, 880px);
    overflow: hidden;
    container-type: size;
    background: hsl(30 12% 90%);

    --cy: 54%;                          /* stred karty vo výške pódia */
    --bw: 100cqw;                       /* banner na plnú šírku      */
    --ph: min(77cqh, 720px);            /* výška mobilu              */
    --zoom: 1; --sy: 0; --px: 28; --py: 0; --pr: 0; --ps: 1; --dim: 0;
}

/* Scroll verzia: sekcia dáva dĺžku scrollu, pódium sa prilepí.
   Výška sa delí zoomom stránky (html { zoom }), inak by pódium
   prečnievalo cez spodok okna. */
.scrolly-on { height: 720svh; }   /* dĺžka scrollu = rýchlosť animácie */
.scrolly:not(.scrolly-on) .scrolly-view { --sy: -8; }   /* statická verzia: miesto pre výzvu pod kartou */
.scrolly-on .scrolly-stage {
    position: sticky;
    top: 0;
    height: calc(100svh / var(--page-zoom, 1));
}
.scrolly-on .scrolly-view { position: absolute; inset: 0; height: auto; }

.scrolly-scene {
    position: absolute;
    inset: 0;
    transform: translateY(calc(var(--sy) * 1cqh)) scale(var(--zoom));
    transform-origin: 50% var(--cy);
    will-change: transform;
}

.scrolly-bg {
    position: absolute;
    left: 50%;
    top: var(--cy);
    width: var(--bw);
    max-width: none;
    height: auto;
    transform: translate(-50%, -56%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

/* Banner je na plnú šírku, takže býva nižší než pódium — plochu nad
   a pod ním vyplní rozmazaná kópia a maska na .scrolly-bg ich zleje. */
.scrolly-bg-blur {
    position: absolute;
    inset: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    object-fit: cover;
    object-position: 50% 56%;
    filter: blur(22px) saturate(.85);
}

/* Karta na fotke je natočená o −4,5°. Namerané z banneru (3168×1344):
   stred 50,56 % / 56 %, rozmer 23,7 % šírky × 57,7 % výšky fotky. */
.scrolly-card-glow {
    position: absolute;
    left: calc(50% + var(--bw) * .0057);
    top: var(--cy);
    width: calc(var(--bw) * .237);
    height: calc(var(--bw) / 2.357 * .577);
    border-radius: calc(var(--bw) * .014);
    transform: translate(-50%, -50%) rotate(-4.5deg);
    box-shadow: 0 0 0 2px hsl(var(--gold)), 0 0 70px 14px hsl(var(--gold) / .55);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

/* NFC vlny vychádzajú z ikonky „Priložte telefón“ na karte. */
.scrolly-nfc {
    position: absolute;
    left: calc(50% - var(--bw) * .0404);
    top: calc(var(--cy) + var(--bw) / 2.357 * .193);
    width: 0;
    height: 0;
}
.scrolly-nfc i {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--bw) * .14);
    aspect-ratio: 1;
    border: 2px solid hsl(var(--gold));
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
}
[data-nfc="1"] .scrolly-card-glow { opacity: 1; }
[data-nfc="1"] .scrolly-nfc i { animation: nfcRing 1.5s var(--ease-out) infinite; }
[data-nfc="1"] .scrolly-nfc i:nth-child(2) { animation-delay: .5s; }
[data-nfc="1"] .scrolly-nfc i:nth-child(3) { animation-delay: 1s; }

@keyframes nfcRing {
    0%   { opacity: .95; transform: translate(-50%, -50%) scale(.4); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.1); }
}

.scrolly-dim {
    position: absolute;
    inset: 0;
    background: hsl(var(--ink));
    opacity: var(--dim);
    pointer-events: none;
}

/* ---- mobil ---- */
.scrolly-phone {
    position: absolute;
    left: 50%;
    top: var(--cy);
    height: var(--ph);
    aspect-ratio: 71.6 / 146.6;          /* iPhone 15 Pro */
    transform:
        translate(-50%, -50%)
        translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqh))
        rotate(calc(var(--pr) * 1deg))
        scale(var(--ps));
    will-change: transform;
    filter: drop-shadow(0 30px 40px hsl(var(--ink) / .35));
}

/* iPhone 15 Pro v CSS: titánový rám, čierny lem, displej, Dynamic
   Island a bočné tlačidlá. Percentá sú z rozmerov skutočného telefónu
   (71,6 × 146,6 mm, island 126 × 37 pt na displeji 393 × 852 pt).
   Rám je inline-size container: písmo a ikony na displeji sa merajú
   v cqi, takže sa škálujú spolu s mobilom. */
.ph-frame {
    position: absolute;
    inset: 0;
    border-radius: 16% / 7.8%;
    background: linear-gradient(135deg,
        #8d8983 0%, #d9d5cf 14%, #77736e 32%, #c7c3bd 55%, #6e6a65 78%, #b9b5af 100%);
    box-shadow:
        inset 0 0 0 1px hsl(0 0% 100% / .35),
        inset 0 0 0 2.5px hsl(0 0% 0% / .25),
        0 0 0 .5px hsl(0 0% 0% / .5);
    container-type: inline-size;
}
/* čierny lem okolo displeja */
.ph-frame::before {
    content: "";
    position: absolute;
    inset: .5% 1.1%;
    border-radius: 15.2% / 7.35%;
    background: #050505;
    box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .06);
}
/* odlesk skla nad displejom */
.ph-frame::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 1.76% 3.6%;
    border-radius: 13.4% / 6.26%;
    background: linear-gradient(115deg, hsl(0 0% 100% / .14) 0%, hsl(0 0% 100% / 0) 34%);
    pointer-events: none;
}

.ph-island {
    position: absolute;
    z-index: 3;
    top: 3%;
    left: 50%;
    width: 30%;
    height: 4.1%;
    border-radius: 999px;
    background: #000;
    transform: translateX(-50%);
}

/* bočné tlačidlá: vľavo Action a hlasitosť, vpravo bočné */
.ph-btn {
    position: absolute;
    width: 1.6%;
    border-radius: 2px;
    background: linear-gradient(90deg, #5d5955, #bdb9b3 55%, #7d7974);
}
.ph-btn-action  { left: -1.1%;  top: 17%;   height: 4.2%; }
.ph-btn-vol-up  { left: -1.1%;  top: 24.5%; height: 7.6%; }
.ph-btn-vol-down{ left: -1.1%;  top: 34%;   height: 7.6%; }
.ph-btn-power   { right: -1.1%; top: 27%;   height: 11%; background: linear-gradient(270deg, #5d5955, #bdb9b3 55%, #7d7974); }

/* stavový riadok: čas vľavo, signál / Wi-Fi / batéria vpravo,
   zarovnaný s Dynamic Islandom ako na iPhone */
.ph-status {
    position: absolute;
    z-index: 3;
    top: 3%;
    left: 3.6%;
    right: 3.6%;
    height: 4.1%;
    display: grid;
    grid-template-columns: 1fr 32.3% 1fr;
    align-items: center;
    color: #1a1a1a;
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    transition: color .3s ease;
    --knock: #fff;
}
.ph-status-time {
    justify-self: center;
    font-size: 4cqi;
    font-weight: 600;
    letter-spacing: -.01em;
}
.ph-status-icons {
    grid-column: 3;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 1.2cqi;
}
.ph-status-icons svg { height: 2.9cqi; width: auto; display: block; }
.ph-status-icons .ph-battery { height: 3.3cqi; }
/* Číslo batérie je „vyrazené“ z výplne — farba podľa pozadia displeja. */
.ph-battery text { fill: var(--knock); font-family: inherit; }
[data-screen="off"] .ph-status { color: #fff; --knock: #111; }
[data-screen="off"] .ph-status-time { visibility: hidden; }

/* Displej kopíruje skutočnú appku (review.html, reward.html): jej písmo
   Manrope a jej hex paletu, nie HSL tokeny webu — má vyzerať presne ako
   to, čo hosť uvidí. Rozmery v cqi rámu ≈ px zo snímky appky × 0,2. */
.ph-frame {
    --app-bg: #FCF9F2;
    --app-ink: #342D2D;
    --app-muted: #7a7a7a;
    --app-line: #e4e1dc;
    --app-accent: #111;
    --app-ok: #1e9e5a;
    --app-face: #f3eee5;
}

.ph-screen {
    position: absolute;
    z-index: 1;
    inset: 1.76% 3.6%;
    border-radius: 13.4% / 6.26%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15cqi 4.6cqi 5cqi;
    background: var(--app-bg);
    color: var(--app-ink);
    font-family: 'Manrope', var(--font-body);
    text-align: center;
    opacity: 0;
    transform: scale(.97);
    transition: opacity .3s ease, transform .4s var(--ease-out);
}

[data-screen="off"] .ph-screen-off,
[data-screen="card"] .ph-screen-card,
[data-screen="done"] .ph-screen-done { opacity: 1; transform: none; }

/* Zamknutá obrazovka ako na iPhone: tapeta v teplých tónoch značky
   (vrstvené gradienty namiesto obrázka — ostrá v každej veľkosti),
   zámok, dátum nad veľkým časom, baterka a fotoaparát dole. */
.ph-screen-off {
    padding-top: 13cqi;
    background:
        radial-gradient(70% 45% at 18% 22%, hsl(38 85% 62% / .95), transparent 70%),
        radial-gradient(60% 40% at 88% 38%, hsl(18 75% 48% / .9), transparent 72%),
        radial-gradient(80% 50% at 30% 70%, hsl(340 45% 30% / .95), transparent 70%),
        radial-gradient(90% 55% at 85% 95%, hsl(225 45% 18%), transparent 70%),
        linear-gradient(170deg, hsl(32 70% 45%), hsl(350 40% 22%) 55%, hsl(228 40% 12%));
    color: hsl(var(--white));
}
/* jemný lesk a „zrno“ tapety */
.ph-screen-off::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 60% at 50% -10%, hsl(0 0% 100% / .22), transparent 60%),
        repeating-linear-gradient(115deg, hsl(0 0% 100% / .015) 0 2px, transparent 2px 7px);
    pointer-events: none;
}
.ph-screen-off > * { position: relative; }
.ph-lock { width: 4.6cqi; height: 4.6cqi; margin-bottom: 2.4cqi; opacity: .9; }
.ph-date {
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    font-size: 4.4cqi;
    font-weight: 600;
    color: hsl(var(--white) / .85);
    text-shadow: 0 1px 6px hsl(0 0% 0% / .2);
}
.ph-time {
    margin-top: .4cqi;
    font-family: -apple-system, 'SF Pro Display', system-ui, sans-serif;
    font-size: 23cqi;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    text-shadow: 0 2px 16px hsl(0 0% 0% / .18);
}
.ph-lock-btn {
    position: absolute;
    bottom: 9cqi;
    display: grid;
    place-items: center;
    width: 12cqi;
    height: 12cqi;
    border-radius: 50%;
    background: hsl(0 0% 100% / .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ph-lock-btn svg { width: 5.4cqi; height: 5.4cqi; }
.ph-lock-btn-left { left: 9cqi; }
.ph-lock-btn-right { right: 9cqi; }
.ph-home-bar {
    position: absolute;
    bottom: 2.4cqi;
    left: 50%;
    width: 34%;
    height: 1.2cqi;
    border-radius: 999px;
    background: hsl(0 0% 100% / .85);
    transform: translateX(-50%);
}

/* ---- vernostná karta + hodnotenie (review.html .regular-card, .quick-rate) ---- */
.ph-biz {
    align-self: stretch;
    padding-bottom: 4cqi;
    border-bottom: 1px solid var(--app-line);
    font-size: 4.8cqi;
    font-weight: 600;
    text-align: left;
}
.ph-hello {
    margin-top: 6.5cqi;
    font-size: 6.4cqi;
    font-weight: 800;
    line-height: 1.2;
}
.ph-sub {
    margin-top: 1.2cqi;
    font-size: 3.3cqi;
    font-weight: 600;
    line-height: 1.45;
    color: var(--app-muted);
}

/* Box bodov a odmena: obe strany v jednej bunke gridu (výška sa
   pri preklopení nemení), zadná strana otočená o 180°. */
.ph-flip {
    display: grid;
    width: 100%;
    margin-top: 6cqi;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.ph-flip > * {
    grid-area: 1 / 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5cqi 4cqi 4.4cqi;
    border: .6cqi dashed var(--app-accent);
    border-radius: 5cqi;
    background: var(--app-bg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.ph-won { transform: rotateY(180deg); gap: .6cqi; }
[data-won="1"] .ph-flip { transform: rotateY(180deg); }

.ph-stamps {
    display: grid;
    grid-template-columns: repeat(5, 7.6cqi);
    gap: 2.4cqi 2.8cqi;
    justify-content: center;
}
.ph-stamp {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: .45cqi solid var(--app-line);
    border-radius: 50%;
    color: var(--app-muted);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ph-stamp svg { width: 68%; height: 68%; }
.ph-stamp:not(.on):not(.ph-stamp-gift) svg { opacity: .5; }
.ph-stamp.on {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-bg);
    animation: stampPop .42s var(--ease-out);
}
.ph-stamp-gift { border-style: dashed; }
.ph-stamp-gift svg { width: 78%; height: 78%; }
.ph-stamp-gift.on { border-style: solid; }

@keyframes stampPop {
    0%   { transform: scale(.6); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.ph-count { margin-top: 3.4cqi; font-size: 3.2cqi; font-weight: 600; color: var(--app-muted); }
.ph-count strong { font-size: 4cqi; font-weight: 800; color: var(--app-ink); }
.ph-wait {
    margin-top: 1.6cqi;
    font-size: 3.1cqi;
    font-weight: 700;
    line-height: 1.4;
    opacity: 0;
    transition: opacity .3s ease;
}
[data-wait="1"] .ph-wait { opacity: 1; }

.ph-won-gift { width: 12cqi; height: 12cqi; color: var(--app-accent); }
.ph-won-gift svg { width: 100%; height: 100%; overflow: visible; }
.ph-won-gift .g-lid,
.ph-won-gift .g-bow { transform-box: fill-box; transform-origin: center; }
[data-won="1"] .ph-won-gift .g-lid { animation: phGiftLid 1s ease .6s 2; }
[data-won="1"] .ph-won-gift .g-bow { animation: phGiftBow 1s ease .6s 2; }

@keyframes phGiftLid {
    0%, 100% { transform: none; }
    35% { transform: translateY(-2.5px) rotate(-7deg); }
    70% { transform: translateY(-1px) rotate(3deg); }
}
@keyframes phGiftBow {
    0%, 100% { transform: none; }
    40% { transform: translateY(-1.5px) scale(1.18); }
}

.ph-won-title { margin-top: 1cqi; font-size: 4.8cqi; font-weight: 800; }
.ph-won-value { font-size: 4cqi; font-weight: 800; }
.ph-won-note { font-size: 2.9cqi; font-weight: 600; line-height: 1.45; color: var(--app-muted); }

/* Hodnotenie: „pred“ a „po“ v jednom riadku gridu, nech sa nič neposúva. */
.ph-rate { display: grid; width: 100%; margin-top: 7cqi; }
.ph-rate > * { grid-column: 1; }
.ph-rate-title { font-size: 4.2cqi; font-weight: 800; }
.ph-faces {
    display: flex;
    justify-content: space-between;
    margin-top: 3.4cqi;
}
.ph-face {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6cqi;
}
.ph-face-emoji {
    display: grid;
    place-items: center;
    width: 10.4cqi;
    height: 10.4cqi;
    border-radius: 50%;
    background: var(--app-face);
    transition: background .3s ease, transform .4s var(--ease-out), opacity .3s ease;
}
.ph-face-emoji .fe { width: 66%; height: 66%; }
.ph-face-label { font-size: 2.6cqi; font-weight: 700; color: var(--app-muted); white-space: nowrap; }

[data-rate="1"] .ph-face:not(.ph-face-pick) .ph-face-emoji,
[data-rate="2"] .ph-face:not(.ph-face-pick) .ph-face-emoji { opacity: .45; }
[data-rate="1"] .ph-face-pick .ph-face-emoji,
[data-rate="2"] .ph-face-pick .ph-face-emoji { background: var(--app-accent); transform: scale(1.25); }
[data-rate="1"] .ph-face-pick .ph-face-label,
[data-rate="2"] .ph-face-pick .ph-face-label { color: var(--app-ink); }

.ph-rate-before,
.ph-rate-after {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5cqi;
    transition: opacity .3s ease;
}
.ph-rate-after { opacity: 0; }
[data-rate="2"] .ph-rate-before { opacity: 0; }
[data-rate="2"] .ph-rate-after { opacity: 1; }

.ph-outline-btn {
    align-self: stretch;
    padding: 3.2cqi 2cqi;
    border: .45cqi solid var(--app-line);
    border-radius: 999px;
    font-size: 3.3cqi;
    font-weight: 700;
}
.ph-link {
    margin-top: 3.4cqi;
    font-size: 3cqi;
    font-weight: 700;
    color: var(--app-muted);
    text-decoration: underline;
    text-underline-offset: .2em;
}
.ph-thanks {
    font-size: 3.3cqi;
    font-weight: 800;
    line-height: 1.4;
    color: var(--app-ok);
}
.ph-member {
    margin-top: 5cqi;
    font-size: 2.9cqi;
    font-weight: 600;
    color: var(--app-muted);
}
.ph-member .ph-link { margin: 0 0 0 2cqi; }

/* ---- potvrdenie uplatnenej odmeny (reward.html) ---- */
.ph-biz-center { font-size: 4.4cqi; font-weight: 700; }
.ph-foot {
    margin-top: 4cqi;
    font-size: 3cqi;
    font-weight: 600;
    line-height: 1.45;
    color: var(--app-muted);
}

.ph-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 5cqi;
    padding: 6cqi 4cqi;
    border: .45cqi solid var(--app-ok);
    border-radius: 5cqi;
    background: #fff;
}
.ph-done-mark {
    display: grid;
    place-items: center;
    width: 13cqi;
    height: 13cqi;
    border-radius: 50%;
    background: var(--app-ok);
    color: var(--app-bg);
    font-size: 7cqi;
    font-weight: 800;
    line-height: 1;
}
[data-screen="done"] .ph-done-mark { animation: stampPop .5s var(--ease-out) .15s both; }
.ph-done-title { margin-top: 3.4cqi; font-size: 4.8cqi; font-weight: 800; }
.ph-done-meta { margin-top: .8cqi; font-size: 3.1cqi; font-weight: 600; color: var(--app-muted); }

/* ---- režim Recenzie: formulár, poďakovanie, Google ---- */
[data-screen="rform"] .ph-screen-rform,
[data-screen="rthanks"] .ph-screen-rthanks,
[data-screen="google"] .ph-screen-google { opacity: 1; transform: none; }

/* Text, ktorý sa „píše“ (site.js skracuje obsah .ph-typed podľa scrollu);
   kým je prázdny, ukáže sa placeholder ako v skutočnom poli. */
.ph-typed { color: var(--app-ink); }
.ph-typed:not(:empty) + .ph-placeholder { display: none; }
.ph-placeholder { color: var(--app-muted); }
.ph-typed.typing::after {
    content: "";
    display: inline-block;
    width: .09em;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: -.15em;
    background: currentColor;
    animation: phCaret 1s steps(1) infinite;
}
@keyframes phCaret { 50% { opacity: 0; } }

.ph-screen-rform { align-items: stretch; text-align: left; }
.r-title { margin-top: 7cqi; font-size: 6cqi; font-weight: 800; line-height: 1.2; }
.r-sub { margin-top: 1.4cqi; font-size: 3.4cqi; font-weight: 700; color: #5b5353; }
.r-panel {
    margin-top: 5cqi;
    padding: 4.6cqi 4cqi 3.4cqi;
    border-radius: 5cqi;
    background: #fffdf8;
    box-shadow: 0 .4cqi 2cqi rgb(0 0 0 / .04);
}
.r-text {
    min-height: 9.6cqi;
    margin-top: 4cqi;
    font-size: 3.3cqi;
    font-weight: 600;
    line-height: 1.45;
}
.r-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3.4cqi;
    padding-top: 3.4cqi;
    border-top: 1px solid var(--app-line);
    font-size: 3.4cqi;
    font-weight: 600;
}
.r-vis {
    display: inline-flex;
    align-items: center;
    gap: 1.6cqi;
    padding: 1.6cqi 3.2cqi;
    border: 1px solid var(--app-line);
    border-radius: 999px;
    font-size: 3.5cqi;
    font-weight: 500;
}
.r-vis svg { width: 2.4cqi; height: auto; }
.r-photos {
    display: flex;
    align-items: center;
    gap: 4cqi;
    margin-top: 5cqi;
    padding: 4.6cqi;
    border: .5cqi dashed #cfcac3;
    border-radius: 5cqi;
}
.r-plus {
    display: grid;
    place-items: center;
    flex: none;
    width: 9cqi;
    height: 9cqi;
    border: .4cqi solid #bdb8b1;
    border-radius: 50%;
    font-size: 5cqi;
    line-height: 1;
    color: var(--app-muted);
}
.r-photos-t1 { font-size: 3.5cqi; font-weight: 700; }
.r-photos-t2 { margin-top: .6cqi; font-size: 2.9cqi; font-weight: 600; line-height: 1.4; color: var(--app-muted); }
.r-send {
    margin-top: auto;
    padding: 3.6cqi;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: 3.6cqi;
    font-weight: 800;
    text-align: center;
    transition: transform .15s var(--ease-out), background .15s ease;
}
[data-rsend="1"] .r-send { transform: scale(.96); background: #3a3a3a; }

/* vybraný smajlík vo formulári — ostatné ostávajú farebné (ako v appke) */
[data-rpick="1"] .ph-screen-rform .ph-face-pick .ph-face-emoji { background: var(--app-accent); transform: scale(1.25); }
[data-rpick="1"] .ph-screen-rform .ph-face-pick .ph-face-label { color: var(--app-ink); }

.ph-screen-rthanks { justify-content: center; padding-top: 0; }
.ph-screen-rthanks .ph-done-mark { width: 16cqi; height: 16cqi; font-size: 8.5cqi; }
[data-screen="rthanks"] .ph-screen-rthanks .ph-done-mark { animation: stampPop .5s var(--ease-out) .15s both; }
.r-thanks-title { margin-top: 5cqi; font-size: 4.8cqi; font-weight: 800; }
.r-public {
    margin-top: 5cqi;
    padding: 2.8cqi 5cqi;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: 3.4cqi;
    font-weight: 700;
    transition: transform .15s var(--ease-out), background .15s ease;
}
[data-rpub="1"] .r-public { transform: scale(.94); background: #3a3a3a; }

/* Formulár verejnej recenzie v službách Googlu — napodobnený, bez loga. */
.ph-screen-google {
    align-items: stretch;
    background: #fff;
    color: #1f1f1f;
    font-family: Roboto, Arial, system-ui, sans-serif;
    text-align: left;
}
.g-top {
    position: relative;
    text-align: center;
    font-size: 4.2cqi;
    font-weight: 500;
}
.g-back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 5.2cqi; }
.g-user { display: flex; align-items: center; gap: 3.6cqi; margin-top: 6cqi; }
.g-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 10cqi;
    height: 10cqi;
    border-radius: 50%;
    background: #8d6e63;
    color: #fff;
    font-size: 4.6cqi;
    font-weight: 500;
}
.g-name { font-size: 3.6cqi; font-weight: 500; }
.g-note { margin-top: .4cqi; font-size: 2.8cqi; color: #5f6368; }
.g-stars { display: flex; gap: 2.6cqi; }
.g-stars-main { justify-content: center; gap: 4.4cqi; margin-top: 5cqi; }
.g-star { display: block; width: 6.6cqi; height: 6.6cqi; }
.g-stars-main .g-star { width: 8.6cqi; height: 8.6cqi; }
.g-star svg { display: block; width: 100%; height: 100%; overflow: visible; }
.g-star path { fill: none; stroke: #5f6368; stroke-width: 1.3; transition: fill .2s ease, stroke .2s ease; }
.g-star.on path { fill: #fbbc04; stroke: #fbbc04; }
.g-star.on { animation: stampPop .35s var(--ease-out); }
.g-aspects { display: grid; gap: 3.4cqi; margin-top: 5cqi; }
.g-aspect { display: flex; align-items: center; justify-content: space-between; font-size: 3.5cqi; }
.g-text {
    min-height: 17cqi;
    margin-top: 5cqi;
    padding: 3cqi 3.4cqi;
    border: .3cqi solid #747775;
    border-radius: 1.4cqi;
    font-size: 3.3cqi;
    line-height: 1.45;
}
.g-text .ph-typed { color: #1f1f1f; }
.g-text .ph-placeholder { color: #5f6368; }
.g-photos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2cqi;
    margin-top: 3.6cqi;
    padding: 2.8cqi;
    border-radius: 999px;
    background: #e9eef6;
    font-size: 3.4cqi;
    font-weight: 500;
}
.g-photos svg { width: 4.2cqi; height: 4.2cqi; color: #0b57d0; }
.g-meal {
    margin-top: 4cqi;
    padding: 3.6cqi;
    border-radius: 3cqi;
    background: #f3f6fc;
    font-size: 3.4cqi;
    font-weight: 500;
}
.g-chips { display: flex; flex-wrap: wrap; gap: 2cqi; margin-top: 3cqi; }
.g-chips span {
    padding: 1.4cqi 3cqi;
    border: .3cqi solid #747775;
    border-radius: 1.6cqi;
    background: #fff;
    font-size: 3cqi;
}
.g-send {
    margin-top: auto;
    padding: 3cqi;
    border-radius: 999px;
    background: #e3e3e3;
    color: #8f8f8f;
    font-size: 3.4cqi;
    font-weight: 500;
    text-align: center;
    transition: background .3s ease, color .3s ease;
}
[data-gsend="1"] .g-send { background: #0b57d0; color: #fff; }

/* ---- popisky ---- */
/* Obsah podľa režimu ukážky (data-mode na pódiu). */
.scrolly-stage[data-mode="review"] [data-for="loyalty"],
.scrolly-stage[data-mode="loyalty"] [data-for="review"] { display: none; }

/* Prepínač Recenzie / Vernostný program. Bez JS nefunguje — skrytý. */
html:not(.js) .scrolly-toggle { display: none; }
.scrolly-toggle {
    position: relative;
    display: inline-flex;
    gap: 2px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 999px;
    background: hsl(var(--ink) / .07);
    pointer-events: auto;
}
.scrolly-toggle button {
    padding: 8px 15px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: hsl(var(--ink-soft));
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: color .25s ease;
}
.scrolly-toggle button:hover { color: hsl(var(--ink)); }
.scrolly-toggle button[aria-pressed="true"] { color: hsl(var(--white)); }
/* Čierna pilulka pod aktívnym tlačidlom — site.js jej nastaví polohu
   a šírku, prechod ju posunie k druhej možnosti. Bez JS ostane pod
   prvým tlačidlom (predvolený režim). */
.scrolly-toggle-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 0;
    border-radius: 999px;
    background: hsl(var(--ink));
    box-shadow: 0 4px 10px -4px hsl(var(--ink) / .5);
    transition: left .35s var(--ease-out), width .35s var(--ease-out);
}
.scrolly-toggle.no-anim .scrolly-toggle-thumb { transition: none; }

/* Obsah nového režimu nabehne (prepína sa cez display, takže sa
   animácia spustí pri každom zobrazení). */
.scrolly-stage[data-mode] .scrolly-head h2,
.scrolly-stage[data-mode] .scrolly-steps { animation: modeIn .35s var(--ease-out) both; }
@keyframes modeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.scrolly-toggle button:focus-visible { outline: 2px solid hsl(var(--gold-deep)); outline-offset: 2px; }
.scrolly-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    /* Čo najďalej vpravo (najviac po okraj obsahu stránky), ale tak, aby
       pri tappnutí priblížená karta (1,16×, ľavý okraj ≈ 36 % šírky)
       nezašla pod panel široký 360 px. */
    left: max(24px, min(calc((100% - 1180px) / 2 + 24px), calc(36% - 392px)));
    width: min(360px, 30%);
    padding: 28px 26px 18px;
    border: 1px solid hsl(var(--white) / .6);
    border-radius: 24px;
    background: hsl(var(--white) / .84);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 50px -20px hsl(var(--ink) / .3);
    transform: translateY(-44%);
}

.scrolly-head h2 {
    margin: 12px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-transform: uppercase;
    text-wrap: balance;
}

.scrolly-steps { list-style: none; }

.scrolly-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid hsl(var(--ink) / .08);
    transition: opacity .3s ease;
}

.scrolly-step-no {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    color: hsl(var(--ink-soft) / .7);
    padding-top: 3px;
    transition: color .3s ease;
}

.scrolly-steps h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.scrolly-steps p {
    margin-top: 3px;
    font-size: 13.5px;
    line-height: 1.5;
    color: hsl(var(--ink-soft));
}

.scrolly-on .scrolly-steps li { opacity: .38; }
.scrolly-on .scrolly-stage[data-step="1"] li[data-step="1"],
.scrolly-on .scrolly-stage[data-step="2"] li[data-step="2"],
.scrolly-on .scrolly-stage[data-step="3"] li[data-step="3"],
.scrolly-on .scrolly-stage[data-step="4"] li[data-step="4"],
.scrolly-on .scrolly-stage[data-step="5"] li[data-step="5"] { opacity: 1; }
.scrolly-on .scrolly-stage[data-step="1"] li[data-step="1"] .scrolly-step-no,
.scrolly-on .scrolly-stage[data-step="2"] li[data-step="2"] .scrolly-step-no,
.scrolly-on .scrolly-stage[data-step="3"] li[data-step="3"] .scrolly-step-no,
.scrolly-on .scrolly-stage[data-step="4"] li[data-step="4"] .scrolly-step-no,
.scrolly-on .scrolly-stage[data-step="5"] li[data-step="5"] .scrolly-step-no { color: hsl(var(--gold-deep)); }

/* ---- výzva na konci animácie ----
   Skrytá, kým scéna nedobehne; potom príde zdola pod kartu nad spodnú
   vlnu (karta sa vtedy posunie hore, --sy v site.js). Na desktope bez
   bubliny, priamo na fotke — pod kartou je svetlý kameň, text je tmavý
   so svetlým tieňom. Bez JS (bez .scrolly-on) je viditeľná hneď. */
.scrolly-cta {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 104px;
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    transform: translateX(-50%);
}
.scrolly-cta p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: hsl(var(--ink));
    text-shadow: 0 1px 12px hsl(var(--white) / .9), 0 0 2px hsl(var(--white) / .8);
    white-space: nowrap;
}
.scrolly-cta .btn-primary { flex: none; }

/* Vjazd zdola; tlačidlo dobehne o chvíľu neskôr ako text. */
.scrolly-on .scrolly-cta {
    opacity: 0;
    transform: translateX(-50%) translateY(80px);
    pointer-events: none;
    transition: opacity .4s ease, transform .6s var(--ease-out);
}
.scrolly-on .scrolly-cta .btn-primary {
    transform: translateY(16px);
    transition: transform .6s var(--ease-out) 80ms, background .18s ease;
}
.scrolly-on [data-cta="1"] .scrolly-cta {
    opacity: 1;
    transform: translateX(-50%);
    pointer-events: auto;
}
.scrolly-on [data-cta="1"] .scrolly-cta .btn-primary { transform: none; }
.scrolly-on [data-cta="1"] .scrolly-cta .btn-primary:active { transform: scale(.97); }

/* ---- úzke a na výšku orientované obrazovky ----
   Rovnaký dotaz je v site.js (NARROW) — pózy mobilu sa podľa neho
   prepočítavajú. Karta má mať ~65 % šírky, mobil zakryje stred. */
@media (max-width: 1100px), (max-aspect-ratio: 1/1) {
    .scrolly-view {
        --cy: 47%;
        --bw: max(100cqw, min(235.7cqh, 265cqw));
        /* menší mobil — nad ním prepínač, pod ním karta kroku / výzva;
           rovnaký vzorec je v site.js (buildKeys, ph pre narrow) */
        --ph: min(52cqh, 108cqw);
        --px: 0; --py: -1; --dim: .45;
    }

    .scrolly-wave-bottom svg { height: 50px; }

    /* Výzva: na úzkom zaujme miesto popisku kroku, text nad tlačidlom. */
    .scrolly-cta {
        left: 16px;
        right: 16px;
        bottom: 64px;
        width: auto;
        max-width: none;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
        /* Tu leží cez stmavenú scénu s mobilom — bez bubliny by text
           nebol čitateľný. */
        border: 1px solid hsl(var(--white) / .6);
        border-radius: 22px;
        background: hsl(var(--white) / .9);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 24px 50px -20px hsl(var(--ink) / .35);
        transform: none;
    }
    .scrolly-cta p {
        font-size: 13px;
        font-weight: 400;
        color: hsl(var(--ink-soft));
        text-shadow: none;
        white-space: normal;
    }
    .scrolly-cta .btn-primary { justify-content: center; padding: 14px 20px; font-size: 13px; }
    .scrolly-on .scrolly-cta { transform: translateY(80px); }
    .scrolly-on [data-cta="1"] .scrolly-cta { transform: none; }
    .scrolly-on .scrolly-stage[data-cta="1"] .scrolly-steps li[data-step] { opacity: 0; transform: translateY(12px); }

    /* Statická verzia: výzva pod popiskami ako bežný blok a miesto
       pre spodnú vlnu. */
    .scrolly:not(.scrolly-on) { padding-bottom: 60px; }
    .scrolly:not(.scrolly-on) .scrolly-cta {
        position: static;
        width: calc(100% - 32px);
        max-width: 560px;
        margin: 24px auto 0;
    }

    /* Statická verzia: popisky pod obrázkom ako obyčajný zoznam. */
    .scrolly-copy {
        position: static;
        width: auto;
        max-width: 560px;
        margin: 0 auto;
        padding: 36px 16px 8px;
        border: 0;
        border-radius: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        transform: none;
    }

    /* Scroll verzia: nadpis hore (len pri 1. kroku), aktívny krok
       dole ako jedna karta. */
    .scrolly-on .scrolly-copy {
        position: absolute;
        inset: 0;
        max-width: none;
        padding: 0;
        pointer-events: none;
    }
    /* Kroky sú tu absolútne v rámci popiskov — transform na zozname by
       z neho počas animácie spravil ich kontajner a skočili by hore.
       Nový krok nabehne vlastným prechodom. */
    .scrolly-on .scrolly-stage[data-mode] .scrolly-steps { animation: none; }
    .scrolly-on .scrolly-toggle {
        position: absolute;
        z-index: 1;
        top: calc(4.5rem + 10px);
        left: 50%;
        margin: 0;
        background: hsl(var(--white) / .88);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 10px 24px -14px hsl(var(--ink) / .45);
        transform: translateX(-50%);
        white-space: nowrap;
    }
    .scrolly-on .scrolly-head {
        position: absolute;
        top: calc(4.5rem + 64px);
        left: 16px;
        right: 16px;
        padding: 14px 18px;
        border-radius: 18px;
        background: hsl(var(--white) / .84);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        text-align: center;
        transition: opacity .3s ease, transform .4s var(--ease-out);
    }
    .scrolly-on .scrolly-head .kicker { justify-content: center; }
    .scrolly-on .scrolly-head h2 { margin: 8px 0 0; font-size: clamp(20px, 6vw, 26px); }
    .scrolly-on .scrolly-stage:not([data-step="1"]) .scrolly-head {
        opacity: 0;
        transform: translateY(-10px);
    }

    .scrolly-on .scrolly-steps li {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 16px 18px;
        border: 0;
        border-radius: 18px;
        background: hsl(var(--white) / .9);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 16px 36px -18px hsl(var(--ink) / .4);
        opacity: 0;
        transform: translateY(12px);
        transition: opacity .3s ease, transform .4s var(--ease-out);
    }
    .scrolly-on .scrolly-stage[data-step="1"] li[data-step="1"],
    .scrolly-on .scrolly-stage[data-step="2"] li[data-step="2"],
    .scrolly-on .scrolly-stage[data-step="3"] li[data-step="3"],
    .scrolly-on .scrolly-stage[data-step="4"] li[data-step="4"],
    .scrolly-on .scrolly-stage[data-step="5"] li[data-step="5"] { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-stamp.on,
    [data-nfc="1"] .scrolly-nfc i,
    [data-won="1"] .ph-won-gift .g-lid,
    [data-won="1"] .ph-won-gift .g-bow,
    [data-screen="done"] .ph-done-mark,
    [data-screen="rthanks"] .ph-screen-rthanks .ph-done-mark,
    .g-star.on,
    .ph-typed.typing::after,
    .scrolly-stage[data-mode] .scrolly-head h2,
    .scrolly-stage[data-mode] .scrolly-steps { animation: none; }
    .scrolly-toggle-thumb { transition: none; }
}