/* -------------------------------------------------- čo strácate -- */
/* ------------------------------------------------- anatómia karty -- */
/* Záložky typov programu, v strede iPhone (ten istý CSS telefón ako
   scroll scéna, .ph-*) s obrazovkami (--anat-n) a popisky s linkou až
   k prvku (top: --y = % výšky telefónu, --x = koľko px linka zájde do
   telefónu). Obrazovka kopíruje stránku stáleho hosťa (review.html
   .regular-card): Manrope, banner z galérie cez celú šírku s názvom
   a logom, kartička bez rámika, guličky alebo pruh a hodnotenie (každý
   program iným štýlom). Farby značky sú premenné --b-* z inline štýlu.
   Prepínanie len kliknutím na záložku: modul „anatómia karty“ v
   js/site/sections.js. */
.anat {
    padding: 72px 0 56px;
    background: hsl(var(--ink));
    color: hsl(var(--white));
    --anat-w: 380px;
}
/* Tmavý pás (za scroll scénou, pred krémovými #funkcie). */
.anat .section-head h2 { color: hsl(var(--white)); }
.anat .section-head p { color: hsl(var(--white) / .62); }
.anat .gold { color: hsl(var(--gold)); }

.anat-tabs-wrap { display: flex; justify-content: center; margin-bottom: 40px; }
/* Malá časová čiarka v bielej bubline aktívnej záložky, pod slovom —
   left/width nastaví JS spolu s pilulkou, pri prepnutí plynulo prejde. */
.anat-timer {
    position: absolute;
    z-index: 2;
    bottom: 11px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: hsl(var(--ink) / .12);
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease, left .35s var(--ease-out), width .35s var(--ease-out);
}
.anat-timer.is-on { opacity: 1; }
.anat-timer-fill {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: hsl(var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
    transition: opacity .2s ease;
}
/* koniec kola: plná výplň krátko zmizne, kým čiarka prejde pod ďalšie tlačidlo */
.anat-timer.is-swap .anat-timer-fill { opacity: 0; }
.anat-timer.is-run .anat-timer-fill { animation: anat-timer 6s linear forwards; }
.anat-timer.is-paused .anat-timer-fill { animation-play-state: paused; }
@keyframes anat-timer { to { transform: scaleX(1); } }
.anat-tabs {
    position: relative;
    display: inline-flex;
    gap: 2px;
    padding: 5px;
    border-radius: 999px;
    background: hsl(var(--white) / .08);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.anat-tabs::-webkit-scrollbar { display: none; }
.anat-tabs-thumb {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: hsl(var(--white));
    box-shadow: 0 1px 3px hsl(var(--ink) / .12);
}
/* Prechod až po prvom umiestnení — inak by pilulka pri načítaní priletela zľava. */
.anat-tabs.is-ready .anat-tabs-thumb { transition: left .35s var(--ease-out), width .35s var(--ease-out); }
.anat-tabs button {
    position: relative;
    z-index: 1;
    flex: none;
    padding: 9px 20px 14px;
    border: 0;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    font: 600 14px/1 var(--font-body);
    color: hsl(var(--white) / .6);
    transition: color .2s ease, transform 160ms var(--ease-out);
}
.anat-tabs button:hover { color: hsl(var(--white)); }
.anat-tabs button:active { transform: scale(.97); }
.anat-tabs button[aria-selected="true"] { color: hsl(var(--ink)); }
.anat-tabs button:focus-visible { outline: 2px solid hsl(var(--white)); outline-offset: 2px; }
/* Bez JS (thumb nemá šírku) aktívnu záložku podfarbí samo tlačidlo. */
html:not(.js) .anat-tabs button[aria-selected="true"] { background: hsl(var(--white)); }


/* ---- scéna: telefón + popisky ---- */
.anat-stage {
    position: relative;
    width: min(100%, 940px);
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
/* Jemná žiara vo farbe aktívnej značky (--b-accent nastaví JS). Mäkký
   radiálny prechod namiesto filter: blur — rozmazávanie veľkej plochy v každej
   snímke prechodu farby zasekávalo animáciu.
   Prelína sa len --glow na samotnej žiare (nededí sa) — prelínanie
   --b-accent by v každej snímke prepočítalo štýly celého telefónu. */
@property --glow { syntax: '<color>'; inherits: false; initial-value: transparent; }
.anat-stage::before {
    content: "";
    position: absolute;
    top: -4%;
    left: 50%;
    width: 760px;
    height: 104%;
    --glow: var(--b-accent);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 30%, transparent),
                                color-mix(in srgb, var(--glow) 12%, transparent) 55%, transparent);
    transform: translateX(-50%);
    transition: --glow .6s ease;
    pointer-events: none;
}

.anat-phone {
    position: relative;
    width: var(--anat-w);
    aspect-ratio: 71.6 / 146.6;
}
/* Tieň telefónu na ráme (box-shadow sa kreslí raz) — filter: drop-shadow
   na celom telefóne sa prepočítaval pri každom prelínaní obrazoviek. */
.anat-phone .ph-frame {
    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),
        0 34px 44px hsl(0 0% 0% / .55);
}
/* Stavový riadok nad fotkou banneru biely. */
.anat-phone .ph-status { color: #fff; --knock: #111; }

/* Obrazovka v ráme — rozmery ako .ph-screen, obsah pod stavovým riadkom. */
.anat-screen {
    position: absolute;
    z-index: 1;
    inset: 1.76% 3.6%;
    border-radius: 13.4% / 6.26%;
    overflow: hidden;
    padding: 0;
    background: var(--b-bg);
    color: var(--b-ink);
    font-family: 'Manrope', var(--font-body);
    text-align: center;
    opacity: 0;
    transform: scale(.985);
    transition: opacity .45s ease, transform .55s var(--ease-out);
    /* vlastná vrstva — prelínanie obrazoviek robí GPU bez prekresľovania */
    will-change: opacity, transform;
}
.anat-phone[data-active="stamps"] [data-tab="stamps"],
.anat-phone[data-active="points"] [data-tab="points"],
.anat-phone[data-active="cashback"] [data-tab="cashback"],
.anat-phone[data-active="tiers"] [data-tab="tiers"],
.anat-phone[data-active="coupons"] [data-tab="coupons"] { opacity: 1; transform: none; pointer-events: auto; }
/* Neaktívne obrazovky sú len priehľadné — kliky nesmú chytať. */
.anat-screen { pointer-events: none; }

/* Banner cez celú šírku až pod stavový riadok, názov a logo na ňom
   (review.html .hero-banner .cover-brand). */
.anat-hero { position: relative; height: 172px; overflow: hidden; }
.anat-banner { display: block; width: 100%; height: 100%; object-fit: cover; }
.anat-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / .08) 58%, rgb(0 0 0 / .28));
}
.anat-hero-brand {
    position: absolute;
    z-index: 1;
    left: 16px;
    right: 16px;
    bottom: 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-align: left;
    text-shadow: 0 1px 8px rgb(0 0 0 / .35);
}
.anat-logo-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--b-accent);
    color: var(--b-on);
}
.anat-logo-mark svg { width: 60%; height: 60%; }
/* Vlastný dizajn (static/img/dizajny/): logo namiesto ikonky a názvu,
   bez tmavého prechodu (tmavé logo by v ňom zaniklo), pečiatky z obrázka
   a obrázok na pozadí kartičky. */
.anat-hero-logo { display: block; height: 55px; width: auto; max-width: 80%; object-fit: contain; }
.anat-hero.no-shade::after { display: none; }
.anat-hero.no-shade .anat-hero-brand { text-shadow: none; }
.anat-dots.has-img .anat-dot:not(.gift) { border-color: transparent; background: transparent; }
.anat-dot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.anat-dot:not(.on) img:not(.is-off) { filter: grayscale(1); opacity: .4; }
.anat-box.has-bg { background: var(--b-box) var(--box-img) center / cover no-repeat; }

/* Wallet karta v telefóne (dizajn styl: apple / google) — ako .style-wallet
   v appke (review.css), zmenšená na telefón. Bez banneru: obsah začína pod
   stavovým riadkom, ten je v tónoch textu (nie biely na svetlom pozadí). */
.anat-phone[data-dark-status~="stamps"][data-active="stamps"] .ph-status,
.anat-phone[data-dark-status~="points"][data-active="points"] .ph-status,
.anat-phone[data-dark-status~="cashback"][data-active="cashback"] .ph-status,
.anat-phone[data-dark-status~="tiers"][data-active="tiers"] .ph-status,
.anat-phone[data-dark-status~="coupons"][data-active="coupons"] .ph-status { color: #1c1c1e; }
.anat-body.is-wallet { padding-top: 58px; }
.anat-pass {
    margin-top: 14px;
    padding: 12px 12px 14px;
    border-radius: 16px;
    text-align: left;
    background: var(--b-box);
    color: var(--b-ink);
    box-shadow: 0 2px 6px rgb(0 0 0 / .08), 0 16px 34px -14px rgb(0 0 0 / .4);
    overflow: hidden;
}
.anat-pass.has-bg { background: var(--b-box) var(--box-img) center / cover no-repeat; }
.anat-pass-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 40px; }
.anat-pass-logo { min-width: 0; }
.anat-pass-logo img { display: block; height: 43px; width: auto; max-width: 173px; object-fit: contain; }
.anat-pass-logo b { font-size: 16px; font-weight: 800; }
.anat-pass-field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.anat-pass-field.r { align-items: flex-end; text-align: right; }
.anat-pass-field i {
    font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--b-accent) 60%, var(--b-ink));
}
.anat-pass-field b { font-size: 15px; font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; }
.anat-pass-head .anat-pass-field b { font-size: 16px; }
.anat-pass-strip {
    position: relative;
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 104px;
    margin: 10px -12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--b-accent) 14%, var(--b-box));
}
.anat-pass-strip.has-img { background: var(--strip-img) center / cover no-repeat; }
/* hodnota a pruh na fotke pásu: biele s tieňom, aby boli čitateľné */
.anat-pass-strip.has-img .anat-pass-big { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .55), 0 0 14px rgb(0 0 0 / .35); }
.anat-pass-strip.has-img .anat-meter { box-shadow: 0 2px 8px -2px rgb(0 0 0 / .45); }
.anat-pass-strip .anat-dots { grid-template-columns: repeat(var(--per-row, 5), 30px); gap: 8px 10px; }
.anat-pass-strip .anat-meter { width: 80%; margin: 0; }
.anat-pass-big { font-size: 26px; font-weight: 800; color: var(--b-accent); }
.anat-pass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 10px; }
.anat-pass-grid .anat-pass-field b { font-size: 13.5px; }
/* Google Wallet: logo v kruhu hore, názov, polia v dvoch stĺpcoch, pás dole */
.anat-pass.is-google { padding: 16px 14px 0; text-align: center; border-radius: 22px; }
.anat-pass-glogo {
    display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto; border-radius: 50%;
    background: #fff; overflow: hidden; box-shadow: 0 2px 8px -3px rgb(0 0 0 / .35);
}
.anat-pass-glogo img { width: 80%; height: 80%; object-fit: contain; }
.anat-pass-glogo span { font-size: 28px; font-weight: 800; color: #1f1f1f; }
.anat-pass-gname { margin: 8px 0 0; font-size: 17px; font-weight: 800; }
.is-google .anat-pass-grid { grid-template-columns: 1fr 1fr; margin-top: 14px; text-align: left; }
.is-google .anat-pass-field i { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--b-muted); }
.is-google .anat-pass-field b { font-weight: 800; }
.is-google .anat-pass-strip { margin: 14px -14px 0; }
.anat-body { padding: 14px 14px 12px; }

.anat-hello { margin: 6px 0 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.anat-sub { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--b-muted); }

/* Kartička bez rámika (klasický štýl), guličky 36 px ako v appke. */
.anat-box {
    margin-top: 12px;
    padding: 16px 12px 14px;
    border-radius: 18px;
    background: var(--b-box);
    box-shadow: 0 6px 22px rgb(0 0 0 / .08);
}
.is-dark .anat-box { box-shadow: 0 6px 22px rgb(0 0 0 / .35); }
.anat-dots {
    display: grid;
    grid-template-columns: repeat(var(--per-row, 5), 36px);
    gap: 10px 12px;
    justify-content: center;
}
.anat-dot {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 2px solid var(--b-line);
    border-radius: 50%;
    color: var(--b-muted);
}
.anat-dot svg { width: 68%; height: 68%; }
.anat-dot:not(.on):not(.gift) svg { opacity: .5; }
.anat-dot.on { border-color: var(--b-accent); background: var(--b-accent); color: var(--b-on); }
.anat-dot.gift { border-style: dashed; }
.anat-dot.gift svg { width: 78%; height: 78%; }


.anat-count { margin: 9px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--b-muted); }
.anat-count b { font-size: 15px; color: var(--b-ink); }
.anat-status { margin: 6px 0 0; font-size: 12px; font-weight: 700; line-height: 1.45; }

.anat-meter {
    max-width: 240px;
    height: 8px;
    margin: 2px auto 0;
    border-radius: 999px;
    background: var(--b-line);
    overflow: hidden;
}
.anat-meter span { display: block; height: 100%; border-radius: inherit; background: var(--b-accent); }

.anat-credit { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; }
.anat-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--b-muted);
}
.anat-value { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--b-accent); }
.anat-off { font-size: 13px; font-weight: 700; }


.anat-ticket { display: grid; justify-items: center; gap: 4px; padding: 22px 14px; }
.anat-ticket .anat-value { font-size: 42px; }
.anat-ticket .anat-count { margin: 0; }
.anat-valid { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--b-muted); }

/* Hodnotenie: každý program iným štýlom, aby bolo vidieť možnosti —
   smajlíky (.quick-faces v review.html), hviezdičky (rating_style
   „stars“) a doplňujúca otázka s čipmi (.quick-chips). */
.anat-rate { margin-top: 12px; }
.anat-rate-title { margin: 0; font-size: 15px; font-weight: 800; }
.anat-faces { display: flex; justify-content: space-between; gap: 4px; margin-top: 9px; }
.anat-face { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--b-muted); }
/* Hodnotenie sa dá naklikať (sections.js): tlačidlá bez vzhľadu prehliadača. */
.anat-face, .anat-star, .anat-chip { font: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.anat-face-emoji { transition: transform 160ms var(--ease-out), background .2s ease, box-shadow .2s ease; }
.anat-face:hover .anat-face-emoji { transform: scale(1.08); }
.anat-face:active .anat-face-emoji { transform: scale(.94); }
.anat-star { display: block; color: inherit; transition: transform 160ms var(--ease-out), color .15s ease; }
.anat-star svg { display: block; width: 100%; height: 100%; }
.anat-star:hover { transform: scale(1.1); }
.anat-star:active { transform: scale(.92); }
.is-pop { animation: anat-pop .38s var(--ease-out); }
@keyframes anat-pop { 40% { transform: scale(1.22); } }
.anat-face-emoji {
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--b-face);
}
.anat-face-emoji img { width: 26px; height: 26px; }
.anat-face-label { font-size: 10.5px; font-weight: 700; }
.anat-face.is-pick .anat-face-emoji { background: var(--b-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-accent) 25%, transparent); }
.anat-face.is-pick { color: var(--b-ink); }
.anat-stars { display: flex; justify-content: center; gap: 6px; margin-top: 10px; color: var(--b-accent); }
.anat-star { width: 38px; height: 38px; }
.anat-star path { fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.anat-star.off { color: var(--b-line); }
.anat-stars-label { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--b-muted); }
.anat-chips-title { margin: 12px 0 0; font-size: 13px; font-weight: 800; }
.anat-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.anat-chip {
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform 160ms var(--ease-out);
    padding: 6px 11px;
    border: 1.5px solid var(--b-line);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--b-ink);
}
.anat-chip.on { border-color: var(--b-accent); background: var(--b-accent); color: var(--b-on); }
.anat-chip:active { transform: scale(.95); }
/* Pod smajlíkmi ako v appke (.quick-detail, .quick-done). */
.anat-detail {
    display: block;
    margin-top: 12px;
    padding: 9px;
    border: 1.5px solid var(--b-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.anat-done {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--b-muted);
    text-decoration: underline;
}

/* ---- popisky ---- */
/* Panel (role=tabpanel) leží cez celú scénu; popisky v ňom absolútne.
   Linka: 64 px mimo telefónu + --x px do neho, končí bodkou pri prvku.
   Zlatá, aby bola vidieť na svetlej aj tmavej obrazovke. */
.anat-panel { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.anat-panel[hidden] { display: none; }
.anat-notes { list-style: none; margin: 0; padding: 0; }
.anat-note {
    position: absolute;
    top: var(--y);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: hsl(var(--white));
    white-space: nowrap;
    transform: translateY(-50%);
    animation: anat-note-in .45s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}
@keyframes anat-note-in { from { opacity: 0; } }
.anat-note::after {
    content: "";
    width: calc(64px + var(--x, 0px));
    height: 1.5px;
    background: hsl(var(--gold) / .7);
}
.anat-note::before {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: hsl(var(--gold));
    box-shadow: 0 0 0 2px hsl(var(--ink));
}
.anat-note-l { right: calc(50% + var(--anat-w) / 2 - var(--x, 0px)); }
.anat-note-l::before { right: -4px; }
.anat-note-r { left: calc(50% + var(--anat-w) / 2 - var(--x, 0px)); flex-direction: row-reverse; }
.anat-note-r::before { left: -4px; }

/* Výzva pod telefónom (ako .scrolly-cta, biele tlačidlo na tmavom). */
.anat-cta {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    text-align: center;
}
.anat-cta p { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: hsl(var(--white) / .75); }


@media (max-width: 760px) {
    .anat { padding-top: 56px; }
    .anat-tabs-wrap { margin: 0 -12px 32px; }
    .anat-tabs { padding: 4px; }
    .anat-tabs-thumb { top: 4px; bottom: 4px; }
    .anat-tabs button { padding: 9px 9px; font-size: 13px; }
    .anat-stage { flex-direction: column; align-items: center; gap: 22px; }
    .anat-stage::before { width: 300px; }
    /* Celý telefón (aj obsah v px) zmenšený naraz. */
    .anat-phone { zoom: .82; }
    .anat-panel { position: static; }
    .anat-notes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-width: 340px;
    }
    .anat-note {
        position: static;
        transform: none;
        padding: 7px 12px;
        border-radius: 999px;
        background: hsl(var(--white) / .08);
        font-size: 13px;
    }
    .anat-note::after, .anat-note::before { display: none; }
}
/* Úzke telefóny: menší zoom, inak by telefón (380 px) pretiekol. */
@media (max-width: 400px) {
    .anat-phone { zoom: .74; }
}
@media (max-width: 350px) {
    .anat-phone { zoom: .66; }
}

@media (prefers-reduced-motion: reduce) {
    .anat-note { animation: none; }
    .anat-timer { display: none; }
    .is-pop { animation: none; }
    .anat-star, .anat-face-emoji, .anat-chip { transition: none; }
    .anat-screen { transition: none; }
    .anat-tabs.is-ready .anat-tabs-thumb { transition: none; }
    .anat-tabs button:active { transform: none; }
}

/* ------------------------------------------ funkcie (akordeón + mobil) -- */
/* Vľavo akordeón, vpravo rozmazaná fotka s mobilom zo scroll scény
   (.ph-*). Prepínanie a auto-posun: modul „funkcie“ v site.js. Auto-posun
   riadi animácia .feat-progress — keď dobehne, JS otvorí ďalší panel,
   takže pauza (mimo obrazovky, pod myšou) je len animation-play-state. */
.features { padding: 72px 0 24px; }

.features-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-radius: 24px;
    overflow: hidden;
    background: hsl(var(--white));
    box-shadow: 0 1px 2px hsl(var(--ink) / .04), 0 30px 60px -40px hsl(var(--ink) / .3);
}

.features-list { display: flex; flex-direction: column; }

.feat-item { position: relative; }
.feat-item + .feat-item { border-top: 1px solid hsl(var(--mint)); }

.feat-q { margin: 0; font: inherit; }

.feat-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 32px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: hsl(var(--ink));
    text-align: left;
}
.feat-trigger:focus-visible { outline: 2px solid hsl(var(--ink)); outline-offset: -4px; border-radius: 12px; }

.feat-icon { display: flex; flex: none; }
.feat-icon svg { width: 24px; height: 24px; }
.feat-title { flex: 1; }

.feat-chevron {
    flex: none;
    color: hsl(var(--ink-soft));
    transition: transform .28s var(--ease-out);
}
.feat-item.open .feat-chevron { transform: rotate(180deg); color: hsl(var(--ink)); }

/* 0fr → 1fr ako .faq-body; zatvorený obsah je aj visibility: hidden,
   aby sa na odkaz „Zistiť viac“ nedalo dostať tabulátorom. */
.feat-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--ease-out);
}
.feat-item.open .feat-body { grid-template-rows: 1fr; }
.feat-body-inner {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0s .4s;
}
.feat-item.open .feat-body-inner { visibility: visible; transition-delay: 0s; }

.feat-points {
    list-style: none;
    margin: 0;
    padding: 8px 32px 0;
    display: grid;
    gap: 18px;
}
.feat-points li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
}
.feat-tick { width: 17px; height: 17px; margin-top: 2px; color: hsl(var(--gold-deep)); }
.feat-points strong { font-size: 15.5px; font-weight: 600; color: hsl(var(--ink)); }
.feat-points p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: hsl(var(--ink-soft)); }

.feat-more {
    display: inline-flex;
    gap: 6px;
    margin: 28px 32px 26px;
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--gold-deep));
    text-decoration: none;
}
.feat-more:hover { text-decoration: underline; text-underline-offset: 3px; }

.feat-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 1;
    width: 100%;
    height: 2px;
    background: hsl(var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
}
.features.is-auto .feat-item.open .feat-progress {
    opacity: 1;
    /* Rozpísané, nie skratka — tá by vrátila play-state na running
       a prebila pauzu nižšie (má vyššiu špecificitu). */
    animation-name: feat-progress;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.features.is-paused .feat-progress,
.features-box:hover .feat-progress,
.features-box:focus-within .feat-progress { animation-play-state: paused; }
@keyframes feat-progress { to { transform: scaleX(1); } }

/* ---- vizuál: fotka + mobil ---- */
/* Mobil je väčší ako box a absolútne umiestnený — výšku boxu dáva
   akordeón, z mobilu vidno len hornú polovicu (čas + upozornenia). */
.features-visual {
    position: relative;
    min-height: 580px;
    overflow: hidden;
    background: hsl(var(--ink));
}
.features-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) saturate(1.15) brightness(.85);
    transform: scale(1.2);
}

/* Rovnaké proporcie ako .scrolly-phone. */
.features-phone {
    position: absolute;
    top: 40px;
    left: 50%;
    width: min(72%, 380px);
    aspect-ratio: 71.6 / 146.6;
    transform: translateX(-50%);
    filter: drop-shadow(0 30px 40px hsl(var(--ink) / .4));
}

/* Upozornenia hneď pod veľkým časom, ako na zamknutom iPhone. */
.features-phone .feat-notes {
    position: absolute;
    top: 56cqi;
    left: 4cqi;
    right: 4cqi;
    display: flex;
    flex-direction: column;
    gap: 2.4cqi;
}
.feat-note {
    display: grid;
    grid-template-columns: 10cqi 1fr;
    align-items: center;
    gap: 3cqi;
    padding: 3.2cqi 3.8cqi;
    border-radius: 5.4cqi;
    background: hsl(0 0% 100% / .66);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 4px hsl(0 0% 0% / .1);
    color: #111;
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    text-align: left;
    opacity: 0;
    transform: translateY(5cqi) scale(.96);
    transition: opacity .3s ease, transform .5s var(--ease-out);
}
.feat-note-icon { position: relative; width: 10cqi; height: 10cqi; }
.feat-note-icon img { display: block; width: 100%; height: 100%; border-radius: 2.4cqi; }
.feat-note-badge {
    position: absolute;
    right: -1.1cqi;
    bottom: -.9cqi;
    width: 4.8cqi;
    height: auto;
    filter: drop-shadow(0 .3cqi .6cqi hsl(0 0% 0% / .3));
}
.feat-note-text { min-width: 0; }
.feat-note-top {
    display: flex;
    justify-content: space-between;
    gap: 2cqi;
    font-size: 3.7cqi;
}
.feat-note-top span { flex: none; font-size: 3.3cqi; color: hsl(0 0% 0% / .5); }
.feat-note-msg {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-top: .4cqi;
    font-size: 3.6cqi;
    line-height: 1.3;
}

/* Aktívna skupina podľa data-feat na mobile. */
.features-phone[data-feat="0"] [data-feat-for="0"] .feat-note,
.features-phone[data-feat="1"] [data-feat-for="1"] .feat-note,
.features-phone[data-feat="2"] [data-feat-for="2"] .feat-note {
    opacity: 1;
    transform: none;
}
.feat-note:nth-child(2) { transition-delay: .08s; }
.feat-note:nth-child(3) { transition-delay: .16s; }

.feat-short { display: none; }

/* Mobil: namiesto akordeónu (telefón by bol nad otvoreným panelom a človek
   by musel scrollovať) tri ZÁLOŽKY hore → výrez telefónu → body aktívnej
   záložky, všetko na jednu obrazovku. Bez zmeny markupu a JS: .features-list
   aj .feat-item sú display: contents, takže tlačidlá, telo panelov, linka
   postupu aj telefón sú priamo bunky mriežky .features-box. Auto-posun
   ďalej riadi linka .feat-progress (animationend), teraz pod záložkou. */
@media (max-width: 900px) {
    .features { padding-top: 56px; }
    .features-box { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .features-list, .feat-item { display: contents; }
    .feat-item:nth-child(1) > * { grid-column: 1; }
    .feat-item:nth-child(2) > * { grid-column: 2; }
    .feat-item:nth-child(3) > * { grid-column: 3; }

    .feat-q { grid-row: 1; }
    .feat-trigger {
        height: 100%;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 14px 6px 13px;
        border-bottom: 1px solid hsl(var(--mint));
        font-size: 13.5px;
        color: hsl(var(--ink-soft));
        text-align: center;
    }
    .feat-trigger:focus-visible { outline-offset: -3px; border-radius: 10px; }
    .feat-item.open .feat-trigger { color: hsl(var(--ink)); box-shadow: inset 0 -2px 0 hsl(var(--gold) / .35); }
    .feat-icon svg { width: 22px; height: 22px; }
    .feat-chevron { display: none; }
    .feat-title {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .feat-short { display: block; flex: none; }
    .feat-progress { position: static; grid-row: 1; align-self: end; z-index: 1; }

    /* výrez telefónu podľa výšky okna, aby sa celý box zmestil aj na 360×740 */
    .features-visual { grid-row: 2; grid-column: 1 / -1; min-height: 0; height: clamp(250px, 40vh, 350px); }
    .features-phone { top: 20px; width: min(78%, 300px); }

    /* všetky tri telá v jednej bunke, vždy rozbalené → výška podľa najdlhšieho
       a pri prepnutí záložky stránka neposkočí; neaktívne sú len skryté */
    .feat-item > .feat-body {
        grid-row: 3; grid-column: 1 / -1;
        grid-template-rows: 1fr;
        opacity: 0;
        transition: opacity .3s var(--ease-out);
    }
    .feat-item.open > .feat-body { opacity: 1; }
    .feat-points { padding: 20px 20px 0; gap: 14px; }
    .feat-more { margin: 18px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .feat-body, .feat-chevron, .feat-note { transition: none; }
    .feat-progress { display: none; }
}

.pricing-shot {
    max-width: 528px;
    margin: 36px auto 8px;
}

.pricing-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* Tlačidlo na tmavom pozadí. .plan.featured .btn-primary sa reusovať
   nedá — je viazané na cenníkovú kartu. Okrem farieb potrebuje aj
   box-shadow: none; základné .btn-primary má tmavý tieň, ktorý na
   čiernom pozadí vyzerá ako špinavá šmuha. */
.btn-invert {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 17px 34px;
    border-radius: 999px;
    background: hsl(var(--white));
    color: hsl(var(--ink));
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    border: 0;
    box-shadow: none;
}

.btn-invert:hover { background: hsl(var(--mint)); }
.btn-invert .btn-arrow { color: hsl(var(--gold-deep)); }

.showcase-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid hsl(var(--white) / .12);
}

.showcase-cta p {
    margin: 0;
    max-width: 46ch;
    color: hsl(var(--white) / .7);
    font-size: 15px;
}

@media (max-width: 700px) {
    .showcase-cta { flex-direction: column; align-items: flex-start; }
}

/* V tmavej karte sa polarita otáča — tlačidlo je biele. */
.plan.featured .btn-primary {
    background: hsl(var(--white));
    color: hsl(var(--ink));
    box-shadow: none;
    border-radius: 999px;
}

.plan.featured .btn-primary:hover { background: hsl(var(--mint)); }

.plan-note {
    font-size: 12.5px;
    color: hsl(var(--ink-soft));
    margin-top: 14px;
    text-align: center;
}

.plan.featured .plan-note { color: hsl(var(--white) / .45); }

.plan-note a { text-decoration: underline; text-underline-offset: 3px; }

.plan-note a:hover { color: hsl(var(--ink)); }
.plan.featured .plan-note a:hover { color: hsl(var(--white)); }