/* pipeticket.com - verzia B „Cesta mailu".
   Paleta: sneh (stránka), obálka (pripnutý panel a zvýraznené bloky), atrament, tuha, signál, svetlo
   (len kužeľ za navigáciou a žiara karty AI). Space Grotesk 500 na nadpisy, Inter telo.
   Predvolený je statický stav (bez JS, reduced motion, pod 62 rem). Pohyb zapína b.js triedami
   na <html>: .je-cesta-pin (pripnutá Cesta mailu), .je-vybuch (výplň tlačidla od kurzora).
   Rozmery v rem, animuje sa len transform a opacity. Spoločné súbory sa nemenia - čo treba inak,
   je prepísané tu. */

/* =====================================================================
   Ladenie verzie
   ===================================================================== */
:root {
    --sneh: #FAFBFD;
    --obalka: #EEF2FF;
    --svetlo: var(--signal-svetly);
    --stranka: var(--sneh);
    --pismo-nadpis: 'Space Grotesk', var(--pismo);
    --nadpis-vaha: 500;
    --nadpis-tracking: -0.02em;
    --nadpis-riadkovanie: 1.05;
    --telo: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
    --telo-riadkovanie: 1.55;
    --h1: clamp(2.5rem, 1.5rem + 2.8vw, 4rem);
    --h2: clamp(2rem, 1.25rem + 1.85vw, 2.9rem);
    --h3: 1.375rem;
    --kontajner: 82rem;
    --hlavicka-pismo: 0.875rem;
    --sekcia: clamp(5rem, 10vw, 12rem);
    --krivka: cubic-bezier(0.65, 0, 0.35, 1);
}

/* sprite ikon a farba ikon cez currentColor */
.b-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ikona,
.ui-ikona {
    fill: currentColor;
}

.b-kurzor-vypln {
    fill: var(--papier);
}

/* =====================================================================
   Spoločné kúsky verzie
   ===================================================================== */
.sekcia {
    padding-top: var(--sekcia);
}

.sekcia-hd {
    max-width: 45rem;
    margin: 0 auto clamp(2.75rem, 2rem + 3vw, 4.5rem);
    text-align: center;
}

.sekcia-hd .uvod {
    max-width: 32rem;
    margin: 1.25rem auto 0;
}

.b-akcie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

@media (width < 30rem) {
    .b-akcie {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
}

/* nadtitul verzie B - Inter, signál, bez verzálok (zaklad .nadtitul je mono) */
.b-nadtitul {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--signal-tmavy);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
}

.b-nadtitul .ikona {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--signal);
}

/* Hlavná výzva: výplň kruhom od kurzora (naša obdoba „Explode"). Polohu dáva b.js do --vybuch-x/y,
   animuje sa len scale. Bez JS a pri dotyku ostáva hover zo základu. */
.b-vybuch {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.b-vybuch::before {
    content: "";
    position: absolute;
    top: var(--vybuch-y, 50%);
    left: var(--vybuch-x, 50%);
    z-index: -1;
    width: 260%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--signal-tmavy);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.je-vybuch .b-vybuch:hover {
    background: var(--signal);
}

.b-vybuch.is-vybuch::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Sekundárne tlačidlo: text sa vymení zdola */
.b-vymena-okno {
    display: inline-grid;
    overflow: hidden;
    line-height: 1.45;
}

.b-vymena-a,
.b-vymena-b {
    grid-area: 1 / 1;
    transition: transform 0.45s var(--krivka);
}

.b-vymena-b {
    transform: translateY(110%);
}

@media (hover: hover) {
    .b-vymena:hover .b-vymena-a {
        transform: translateY(-110%);
    }

    .b-vymena:hover .b-vymena-b {
        transform: none;
    }
}

/* Šípka, ktorá odíde a príde nová (odkaz Preskočiť na cenník) */
.b-sipka {
    display: inline-grid;
    overflow: hidden;
}

.b-sipka > .ikona {
    grid-area: 1 / 1;
    width: 1rem;
    height: 1rem;
    transition: transform 0.45s var(--krivka);
}

.b-sipka > .ikona:last-child {
    transform: translateY(-130%);
}

a:hover > .b-sipka > .ikona:first-child {
    transform: translateY(130%);
}

a:hover > .b-sipka > .ikona:last-child {
    transform: none;
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
    position: relative;
    padding-top: clamp(2.75rem, 1rem + 5vw, 6rem);
    overflow-x: clip;
    text-align: center;
}

/* Hero sa podsunie pod hlavičku len tam, kde je hlavička plávajúca pilulka (od 64 rem ako v zaklad.css),
   aby kužeľ svietil aj za ňou. Pod 64 rem je hlavička plná lišta - hero začína pod ňou ako vo verzii A.
   (Záporný okraj pod plnou sticky lištou rozbíjal lištu v Safari na iPhone - zabiehala pod stavový riadok.) */
@media (width >= 64rem) {
    .hero {
        margin-top: calc(-1 * var(--hlavicka-vyska));
        padding-top: calc(var(--hlavicka-vyska) + clamp(2.75rem, 1rem + 5vw, 6rem));
    }
}

/* svetelný kužeľ signálu zhora za pilulkou - jediné miesto, kde svieti „svetlo" */
.hero-kuzel {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(110rem, 220vw);
    height: min(58rem, 120vh);
    pointer-events: none;
    background:
        radial-gradient(ellipse 24rem 6.5rem at 50% 0%, rgb(126 156 255 / 0.3), transparent 72%),
        conic-gradient(from 152deg at 50% 0%, transparent 0deg, rgb(126 156 255 / 0.1) 12deg, rgb(126 156 255 / 0.17) 28deg, rgb(126 156 255 / 0.1) 44deg, transparent 56deg);
    -webkit-mask-image: radial-gradient(ellipse 58% 100% at 50% 0%, #000 22%, transparent 88%);
    mask-image: radial-gradient(ellipse 58% 100% at 50% 0%, #000 22%, transparent 88%);
    transform: translateX(-50%);
}

.hero-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-stitok {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    margin-bottom: 1.75rem;
    padding: 0 1rem 0 0.875rem;
    border: var(--vlas) solid var(--linka);
    border-radius: 999rem;
    background: var(--papier);
    box-shadow: 0 0.25rem 1rem rgb(20 27 43 / 0.05);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
}

.hero-stitok .ikona {
    width: 1rem;
    height: 1rem;
    color: var(--signal);
}

.hero-h1 {
    max-width: 11.5em;
}

.hero-uvod {
    max-width: 34rem;
    margin-top: 1.5rem;
}

.hero-text .b-akcie {
    margin-top: 2.25rem;
}

.hero-drobne {
    margin-top: 1rem;
}

/* scéna: okno s Poštou a kartičky okolo */
.hero-scena {
    position: relative;
    width: min(100%, 68rem);
    margin: clamp(3.5rem, 2rem + 4vw, 6rem) auto 0;
    text-align: left;
}

.hero-okno {
    --u: clamp(0.75rem, 0.5rem + 0.55vw, 1rem);
    position: relative;
    z-index: 1;
    padding: calc(2.375 * var(--u)) calc(0.375 * var(--u)) calc(0.375 * var(--u));
    transform-origin: 50% 0;
}

/* rám prehliadača je samostatná vrstva - pri scrolle zhasne a okno ostane „appkou" */
.hero-ram {
    position: absolute;
    inset: 0;
    border: var(--vlas) solid var(--linka);
    border-radius: calc(1.125 * var(--u));
    background: color-mix(in srgb, var(--hmla) 70%, var(--papier));
    box-shadow: var(--ui-tien);
}

.hero-ram .ui-okno-lista {
    border-bottom: 0;
    background: none;
}

.hero-app {
    position: relative;
    overflow: hidden;
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.75 * var(--u));
    background: var(--papier);
}

.hero-karta {
    position: absolute;
    z-index: 2;
}

/* kartičky zdieľané hero a záverečnou výzvou */
.b-stav-karta {
    display: inline-flex;
}

.b-stav-karta .ui-stav {
    box-shadow: var(--ui-tien-maly);
}

.b-riesitel {
    display: flex;
    align-items: center;
    gap: calc(0.75 * var(--u));
    padding: calc(0.75 * var(--u)) calc(0.75 * var(--u)) calc(0.75 * var(--u)) calc(0.875 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(1 * var(--u));
    background: var(--papier);
    box-shadow: var(--ui-tien-maly);
    white-space: nowrap;
}

.b-riesitel-text {
    display: grid;
    font-size: calc(0.875 * var(--u));
    line-height: 1.3;
}

.b-riesitel-text strong {
    font-weight: 600;
}

.b-riesitel-text span {
    color: var(--tlmene);
    font-size: calc(0.8125 * var(--u));
}

/* karta AI návrh s obiehajúcim svetlom (jediná na stránke) */
.b-obeh {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--vlas);
    border-radius: calc(0.875 * var(--u) + var(--vlas));
    background: color-mix(in srgb, var(--signal) 20%, var(--papier));
    box-shadow: var(--ui-tien);
}

.b-obeh::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 160%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg, transparent 0turn, transparent 0.68turn, var(--signal-svetly) 0.84turn, var(--signal) 0.92turn, transparent 1turn);
    transform: translate(-50%, -50%) rotate(0turn);
    animation: b-obeh 5.5s linear infinite;
}

.b-obeh > .ui-pipe {
    position: relative;
    box-shadow: none;
}

@keyframes b-obeh {
    to {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

/* žiara karty AI - svetlo do 10 % */
.hero-karta--pipe::before {
    content: "";
    position: absolute;
    inset: -2.5rem;
    z-index: -1;
    background: radial-gradient(closest-side, rgb(126 156 255 / 0.18), transparent);
}

/* rozloženie kartičiek - desktop */
@media (width >= 62rem) {
    .hero-karta--stav {
        --u: 1.25rem;
        top: -2.5%;
        left: max(-4%, calc((100% - 100vw) / 2 + 1rem));
    }

    .hero-karta--riesitel {
        --u: 0.875rem;
        top: 2%;
        right: max(-6%, calc((100% - 100vw) / 2 + 1rem));
    }

    .hero-karta--pipe {
        --u: 0.875rem;
        top: 30%;
        right: max(-8%, calc((100% - 100vw) / 2 + 1rem));
        width: calc(20 * var(--u));
    }

    .hero-karta--toast {
        --u: 0.9375rem;
        top: 76%;
        left: 34%;
    }

    .hero-karta--telefon {
        --u: 0.58rem;
        top: 30%;
        left: max(-6%, calc((100% - 100vw) / 2 + 1rem));
    }
}

/* tablet a mobil - statická kompozícia, menej kartičiek */
@media (width < 62rem) {
    .hero-scena {
        margin-bottom: 2.5rem;
    }

    .hero-karta--riesitel,
    .hero-karta--telefon {
        display: none;
    }

    .hero-karta--stav {
        --u: 1rem;
        top: calc(-1 * 0.875rem);
        right: 0.75rem;
    }

    .hero-karta--pipe {
        --u: 0.75rem;
        bottom: -2.25rem;
        left: -0.25rem;
        width: calc(19 * var(--u));
    }

    .hero-karta--toast {
        --u: 0.8125rem;
        right: -0.25rem;
        bottom: -1.25rem;
    }
}

@media (width < 40rem) {
    .hero-karta--pipe {
        display: none;
    }

    .hero-karta--toast {
        right: 0.5rem;
        bottom: -1.5rem;
    }
}

/* =====================================================================
   Tvrdenie jednou vetou
   ===================================================================== */
.tvrdenie {
    padding-top: var(--sekcia);
    padding-bottom: var(--sekcia);
    text-align: center;
}

.tvrdenie-veta {
    max-width: 13em;
    margin-inline: auto;
    font-family: var(--pismo-nadpis);
    font-size: clamp(2.125rem, 1rem + 2.9vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-wrap: balance;
}

/* =====================================================================
   Cesta mailu - statický stav (mobil, reduced motion, bez JS): 5 krokov pod sebou
   ===================================================================== */
.cesta-panel {
    width: 100%;
    max-width: calc(var(--kontajner) + 2 * var(--okraj));
    margin-inline: auto;
    padding-inline: var(--okraj);
}

.cesta-hd {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.cesta-preskocit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border: var(--vlas) solid var(--linka);
    border-radius: 999rem;
    background: var(--papier);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.cesta-preskocit:hover {
    border-color: var(--signal-tmavy);
    color: var(--signal-tmavy);
}

.cesta-nav,
.cesta-vpravo,
.cesta-slovo {
    display: none;
}

.cesta-kroky {
    display: grid;
    gap: clamp(4.5rem, 3rem + 5vw, 8rem);
    max-width: 46rem;
    margin-inline: auto;
}

.cesta-krok-stitok {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-family: var(--pismo-nadpis);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.cesta-bod {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--signal);
    color: var(--papier);
    font-family: var(--pismo);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.cesta-krok-ukazka {
    margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

/* plocha so statickou ukážkou stavu - malá obálka */
.cesta-plocha {
    --u: clamp(0.75rem, 0.62rem + 0.45vw, 0.9375rem);
    --stlpec-tint: color-mix(in srgb, var(--papier) 60%, transparent);
    display: grid;
    gap: calc(1 * var(--u));
    padding: calc(1.25 * var(--u));
    border-radius: 1.25rem;
    background: var(--obalka);
}

.cesta-plocha-hd {
    display: grid;
    gap: calc(0.125 * var(--u));
}

.cesta-plocha .ui-riadky {
    overflow: hidden;
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.75 * var(--u));
}

.cesta-plocha .ui-riadok:last-child {
    border-bottom: 0;
}

.cesta-plocha-rad {
    display: flex;
    align-items: center;
}

.cesta-plocha-kurzor {
    flex: none;
    width: calc(1.75 * var(--u));
    height: calc(1.75 * var(--u));
    margin: calc(1.75 * var(--u)) 0 0 calc(-1.5 * var(--u));
    color: var(--text);
    filter: drop-shadow(0 0.125rem 0.25rem rgb(20 27 43 / 0.25));
}

.cesta-plocha .ui-karta,
.cesta-plocha .ui-sprava {
    box-shadow: 0 0.125rem 0.5rem rgb(20 27 43 / 0.04);
}

.cesta-plocha .ui-zalozky {
    border-bottom-color: color-mix(in srgb, var(--signal) 14%, var(--linka));
}

.cesta-plocha .ui-toast {
    justify-self: start;
}

.cesta-krok-text h3 {
    font-size: var(--h2);
    letter-spacing: var(--nadpis-tracking);
    line-height: var(--nadpis-riadkovanie);
}

.cesta-krok-text p {
    max-width: 34rem;
    margin-top: 1rem;
    color: var(--tlmene);
}

.cesta-krok-text p + p {
    margin-top: 0.75rem;
}

.cesta-krok-text .ui-kbd,
.funkcia .ui-kbd {
    --u: 0.875rem;
    color: var(--text);
}

/* =====================================================================
   Cesta mailu - pripnutá scéna (od 62 rem s pohybom; html.je-cesta-pin pridáva b.js)
   ===================================================================== */
.je-cesta-pin .cesta-scena {
    height: 100vh;
    padding: calc(var(--hlavicka-vyska) + 0.25rem) var(--okraj) 1rem;
}

.je-cesta-pin .cesta-panel {
    --p: clamp(2rem, 1rem + 2vw, 3.5rem);
    --g: clamp(2rem, 4vw, 4.5rem);
    /* šírka živej ukážky: ~7/12 panelu, ale nie vyššia, než dovolí výška okna (pomer 46 : 33) */
    --cm-w: min(
        calc((min(var(--kontajner), 100vw - 2 * var(--okraj)) - 2 * var(--p) - var(--g)) * 0.58),
        calc((100vh - var(--hlavicka-vyska) - 1.25rem - 2 * var(--p)) * 46 / 33 * 0.92)
    );
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cm-w);
    column-gap: var(--g);
    align-items: center;
    max-width: var(--kontajner);
    height: 100%;
    padding: var(--p);
    overflow: hidden;
    border-radius: 2rem;
    background: var(--obalka);
}

.je-cesta-pin .cesta-vlavo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vh, 2.75rem);
    min-width: 0;
}

.je-cesta-pin .cesta-hd {
    justify-content: flex-start;
    margin: 0;
}

.je-cesta-pin .cesta-nav {
    position: relative;
    display: block;
}

.cesta-nav-zoznam {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cesta-nav-krok {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.75rem 0 0;
    border: 0;
    border-radius: 0.875rem;
    background: none;
    color: var(--tlmene);
    font-family: var(--pismo-nadpis);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.cesta-nav-krok:hover,
.cesta-nav-krok[aria-current="step"] {
    color: var(--text);
}

.cesta-nav .cesta-bod {
    position: relative;
    z-index: 1;
    background: var(--obalka);
    box-shadow: inset 0 0 0 0.125rem color-mix(in srgb, var(--signal) 30%, var(--obalka));
    color: var(--tlmene);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.cesta-nav-krok.je-presiel .cesta-bod,
.cesta-nav-krok[aria-current="step"] .cesta-bod {
    background: var(--signal);
    box-shadow: inset 0 0 0 0.125rem var(--signal);
    color: var(--papier);
}

.cesta-nav-krok[aria-current="step"] .cesta-bod {
    box-shadow: 0 0 0 0.3125rem color-mix(in srgb, var(--signal) 16%, transparent);
}

/* čiara cesty - koľaj a výplň signálom (scaleY so scrollom) */
.cesta-nav-ciara {
    position: absolute;
    top: 1.375rem;
    bottom: 1.375rem;
    left: calc(0.875rem - 0.0625rem);
    width: 0.125rem;
    border-radius: 999rem;
    background: color-mix(in srgb, var(--signal) 18%, var(--obalka));
}

.cesta-nav-ciara > span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--signal);
    transform-origin: 50% 0;
}

.je-cesta-pin .cesta-kroky {
    display: grid;
    gap: 0;
    max-width: none;
    margin: 0;
}

.je-cesta-pin .cesta-krok {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.75rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.je-cesta-pin .cesta-krok.is-aktivny {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.4s ease 0.14s, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.14s;
}

.je-cesta-pin .cesta-krok-stitok,
.je-cesta-pin .cesta-krok-ukazka {
    display: none;
}

.je-cesta-pin .cesta-krok-text h3 {
    max-width: 13em;
    font-size: clamp(1.75rem, 0.9rem + 1.45vw, 2.5rem);
}

.je-cesta-pin .cesta-krok-text p {
    max-width: 30rem;
    font-size: 1.0625rem;
}

.je-cesta-pin .cesta-vpravo {
    position: relative;
    z-index: 1;
    display: block;
}

/* obrie slovo vytlačené na spodnej hrane obálky */
.je-cesta-pin .cesta-slovo {
    position: absolute;
    bottom: 0;
    left: calc(var(--p) - 0.06em);
    display: block;
    margin: 0;
    color: color-mix(in srgb, var(--signal) 9%, var(--obalka));
    font-family: var(--pismo-nadpis);
    font-size: clamp(5rem, 10vw, 9rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1;
    pointer-events: none;
    transform: translateY(30%);
    user-select: none;
}

@media (height < 46rem) {
    .je-cesta-pin .cesta-krok-text p + p {
        display: none;
    }
}

/* =====================================================================
   Cesta mailu v mobile s pohybom (pod 62 rem; html.je-cesta-mobil pridáva b.js)
   Živá ukážka je sticky pod lištou (~45svh), 5 krokov textu pod ňou prechádza scrollom,
   aktívny krok prepne stav ukážky. Statické ukážky krokov sa skryjú.
   ===================================================================== */
.cesta-ukazovatel {
    display: none;
}

.je-cesta-mobil .cesta-panel {
    display: flex;
    flex-direction: column;
}

.je-cesta-mobil .cesta-vlavo {
    display: contents;
}

.je-cesta-mobil .cesta-hd {
    order: 0;
    margin-bottom: 1.25rem;
}

.je-cesta-mobil .cesta-vpravo {
    /* šírka podľa obrazovky, výška ukážky + ukazovateľ najviac ~45svh (pomer 46 : 33) */
    --cm-w: min(100vw - 2 * var(--okraj), 40rem, (45svh - 3rem) * 46 / 33);
    position: sticky;
    top: var(--hlavicka-vyska);
    z-index: 2;
    order: 1;
    display: block;
    margin-inline: calc(-1 * var(--okraj));
    padding: 0.75rem var(--okraj) 0.875rem;
    background: var(--stranka);
}

/* text krokov pod ukážkou zmizne do stratena, nie o hranu */
.je-cesta-mobil .cesta-vpravo::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 2.5rem;
    background: linear-gradient(var(--stranka), color-mix(in srgb, var(--stranka) 0%, transparent));
    pointer-events: none;
}

.je-cesta-mobil .cm {
    margin-inline: auto;
}

/* ukazovateľ krokov - 5 dielikov, aktívny a prejdené sa vyplnia signálom */
.je-cesta-mobil .cesta-ukazovatel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.375rem;
    width: var(--cm-w);
    margin: 0.75rem auto 0;
}

.cesta-ukazovatel > span {
    position: relative;
    height: 0.25rem;
    overflow: hidden;
    border-radius: 999rem;
    background: color-mix(in srgb, var(--signal) 16%, var(--stranka));
}

.cesta-ukazovatel > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.5s var(--krivka);
}

.cesta-ukazovatel > .je-presiel::after,
.cesta-ukazovatel > .is-aktivny::after {
    transform: none;
}

.je-cesta-mobil .cesta-kroky {
    order: 2;
    gap: 0;
    padding: 1.5rem 0 22svh;
}

.je-cesta-mobil .cesta-krok {
    padding-block: 2.25rem;
    opacity: 0.32;
    transition: opacity 0.45s ease;
}

.je-cesta-mobil .cesta-krok.is-aktivny {
    opacity: 1;
}

.je-cesta-mobil .cesta-krok-ukazka {
    display: none;
}

/* =====================================================================
   Živá ukážka v pripnutej scéne (.cm) - jedno okno appky, celé v jednotkách --u (46 x 33)
   ===================================================================== */
.cm {
    --u: calc(var(--cm-w) / 46);
    position: relative;
    isolation: isolate;
    width: var(--cm-w);
    aspect-ratio: 46 / 33;
    overflow: hidden;
    border: var(--vlas) solid var(--linka);
    border-radius: calc(1 * var(--u));
    background: var(--papier);
    box-shadow: 0 2rem 4rem -1.5rem rgb(36 73 216 / 0.22), 0 0.5rem 1.25rem -0.5rem rgb(20 27 43 / 0.08);
}

.cm-hd {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: calc(1.75 * var(--u));
    height: calc(3.25 * var(--u));
    padding: 0 calc(1.25 * var(--u));
    border-bottom: var(--vlas) solid var(--linka);
    background: var(--papier);
}

.cm-logo {
    flex: none;
    width: auto;
    height: calc(1 * var(--u));
}

.cm-nav {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: calc(1.25 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.875 * var(--u));
}

.cm-nav-polozka.is-aktivna {
    color: var(--text);
}

.cm-nav-ciara {
    position: absolute;
    bottom: calc(-1 * var(--vlas));
    left: 0;
    width: calc(4 * var(--u));
    height: calc(0.125 * var(--u));
    background: var(--signal);
    transform-origin: 0 50%;
}

.cm-hd-vpravo {
    display: flex;
    align-items: center;
    gap: calc(0.875 * var(--u));
    margin-left: auto;
    color: var(--tlmene);
}

.cm-hd-vpravo .ui-ikona {
    width: calc(1.25 * var(--u));
    height: calc(1.25 * var(--u));
}

.cm-telo {
    position: absolute;
    top: calc(3.25 * var(--u));
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

/* svet = všetko, čo vidí „kamera" (scale 1 -> .7 pri nástenke) */
.cm-svet {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(46 * var(--u));
    height: calc(29.75 * var(--u));
    transform-origin: 0 0;
}

.cm-vymena {
    display: inline-grid;
}

.cm-vymena > * {
    grid-area: 1 / 1;
    justify-self: start;
}

.cm-vymena b {
    font-weight: inherit;
}

/* ---- Pošta ---- */
.cm-posta {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: calc(19 * var(--u)) minmax(0, 1fr);
    background: var(--papier);
}

.cm-zoznam {
    position: relative;
    min-width: 0;
    border-right: var(--vlas) solid var(--linka);
}

.cm-zoznam-hd {
    display: grid;
    align-content: center;
    gap: calc(0.125 * var(--u));
    height: calc(5 * var(--u));
    padding: 0 calc(1 * var(--u));
}

.cm-zoznam-nadpis {
    display: flex;
    align-items: center;
    gap: calc(0.5 * var(--u));
    font-size: calc(1.25 * var(--u));
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.cm-zoznam-podnadpis {
    color: var(--tlmene);
    font-size: calc(0.8125 * var(--u));
}

.cm-odznak {
    min-width: calc(1.375 * var(--u));
    padding: 0 calc(0.375 * var(--u));
    border-radius: 999rem;
    background: var(--signal);
    color: var(--papier);
    font-size: calc(0.75 * var(--u));
    font-weight: 600;
    letter-spacing: 0;
    line-height: calc(1.375 * var(--u));
    text-align: center;
}

.cm-riadky {
    border-top: var(--vlas) solid var(--linka);
}

.cm-slot {
    height: calc(4 * var(--u));
}

.cm-posta .ui-riadok,
.cm-hrdina .ui-riadok {
    justify-content: center;
    height: calc(4 * var(--u));
}

.cm-ostatne {
    position: relative;
}

/* hrdina - riadok mailu s rubom (tiket) */
.cm-hrdina {
    position: absolute;
    top: calc(5 * var(--u) + var(--vlas));
    left: 0;
    z-index: 2;
    width: calc(19 * var(--u));
    height: calc(4 * var(--u));
    transform-origin: 0 0;
}

.cm-lic,
.cm-rub {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cm-rub {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(0.375 * var(--u));
    padding: 0 calc(0.875 * var(--u));
    border: var(--vlas) solid color-mix(in srgb, var(--signal) 40%, var(--linka));
    border-radius: calc(0.625 * var(--u));
    background: var(--papier);
    box-shadow: var(--ui-tien-maly);
}

.cm-rub-hore {
    display: flex;
    align-items: baseline;
    gap: calc(0.5 * var(--u));
    min-width: 0;
}

.cm-rub-predmet {
    overflow: hidden;
    font-size: calc(0.875 * var(--u));
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-rub-dole {
    display: flex;
    align-items: center;
    gap: calc(0.5 * var(--u));
}

.cm-rub-avatar {
    margin-left: auto;
}

/* čítanie */
.cm-citanie {
    display: flex;
    flex-direction: column;
    gap: calc(0.875 * var(--u));
    min-width: 0;
    padding: calc(1.25 * var(--u)) calc(1.5 * var(--u));
}

.cm-akcie {
    display: flex;
    gap: calc(0.375 * var(--u));
}

.cm-akcie .is-ikona {
    margin-left: auto;
}

.cm-stlacitelne {
    position: relative;
    overflow: hidden;
}

.cm-stlacenie {
    position: absolute;
    inset: 0;
    background: rgb(14 20 32 / 0.24);
}

.cm-citanie-obsah {
    display: flex;
    flex-direction: column;
    gap: calc(0.875 * var(--u));
}

.cm-predmet {
    font-size: calc(1.25 * var(--u));
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cm-pruh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.375 * var(--u)) calc(1 * var(--u));
    padding: calc(0.5 * var(--u)) calc(0.75 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.625 * var(--u));
    background: var(--hmla);
    font-size: calc(0.875 * var(--u));
}

.cm-pruh-cislo {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cm-kto {
    display: inline-flex;
    align-items: center;
    gap: calc(0.375 * var(--u));
    white-space: nowrap;
}

/* ---- Tikety: nástenka v rozmere obrazovky / .7 ---- */
.cm-tikety {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--u));
    width: calc(46 * var(--u) / 0.7);
    height: calc(29.75 * var(--u) / 0.7);
    padding: calc(1.5 * var(--u));
    background: var(--papier);
}

.cm-tikety-nadpis {
    font-size: calc(1.375 * var(--u));
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.cm-tikety .ui-zalozky {
    flex: none;
}

.cm-stlpce {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(0.75 * var(--u));
    min-height: 0;
}

.cm-stlpce .ui-karta,
.cm-miesto {
    flex: none;
    height: calc(7.75 * var(--u));
}

.cm-stlpce .ui-karta-dole {
    margin-top: auto;
}

.cm-karta {
    position: relative;
    z-index: 1;
}

/* ---- detail tiketu ---- */
.cm-tlmenie {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgb(20 27 43 / 0.07);
}

.cm-detail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: calc(0.75 * var(--u));
    width: calc(25 * var(--u));
    padding: calc(1.25 * var(--u));
    border-left: var(--vlas) solid var(--linka);
    background: var(--papier);
    box-shadow: -1.5rem 0 3rem -1.5rem rgb(20 27 43 / 0.18);
}

.cm-detail .ui-sprava {
    padding-block: calc(0.625 * var(--u));
}

.cm-detail .ui-sprava-hd {
    margin-bottom: calc(0.25 * var(--u));
}

.cm-detail .ui-text {
    padding-block: calc(0.25 * var(--u));
}

.cm-ai-box {
    display: grid;
    overflow: hidden;
    border-radius: calc(0.875 * var(--u));
}

.cm-ai-box > * {
    grid-area: 1 / 1;
    align-self: start;
}

.cm-ai .ui-pipe-pole {
    min-height: 0;
}

.cm-toast {
    position: absolute;
    bottom: calc(1.25 * var(--u));
    left: calc(1.25 * var(--u));
    z-index: 6;
}

.cm-letec {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    box-shadow: 0 0.25rem 0.75rem rgb(20 27 43 / 0.2);
}

.cm-kurzor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: calc(1.75 * var(--u));
    height: calc(1.75 * var(--u));
    color: var(--text);
    filter: drop-shadow(0 0.125rem 0.25rem rgb(20 27 43 / 0.3));
}

/* =====================================================================
   Funkcie - karty v 2 stĺpcoch rôznej výšky
   ===================================================================== */
.funkcie-zoznam {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    columns: 2 22rem;
    column-gap: 1.25rem;
}

.funkcia {
    margin-bottom: 1.25rem;
    padding: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem);
    border: var(--vlas) solid var(--linka);
    border-radius: 1.5rem;
    background: var(--papier);
    break-inside: avoid;
}

.funkcia-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.5rem;
    border-radius: 0.875rem;
    background: var(--obalka);
    color: var(--signal);
}

.funkcia-ikona .ikona {
    width: 1.375rem;
    height: 1.375rem;
}

.funkcia h3 {
    margin-bottom: 0.5rem;
}

.funkcia p {
    color: var(--tlmene);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.funkcia-ukazka {
    --u: 0.875rem;
    display: block;
    max-width: 18rem;
    margin-top: 1.5rem;
}

/* =====================================================================
   Pipe - jeden veľký blok s kartou AI návrh
   ===================================================================== */
.pipe-blok {
    display: grid;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    overflow: clip;
    padding: clamp(2rem, 1rem + 4vw, 5rem);
    border: var(--vlas) solid var(--linka);
    border-radius: 2rem;
    background: var(--papier);
}

@media (width >= 62rem) {
    .pipe-blok {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.pipe-text h2 {
    max-width: 12em;
}

.pipe-zoznam {
    display: grid;
    gap: 1rem;
    margin: 2.25rem 0 0;
}

.pipe-zoznam > div {
    padding-top: 1rem;
    border-top: var(--vlas) solid var(--linka);
}

.pipe-zoznam dt,
.pipe-zoznam dd {
    display: inline;
}

.pipe-zoznam dt {
    font-weight: 600;
}

.pipe-zoznam dd {
    margin: 0;
    color: var(--tlmene);
}

.pipe-ukazka {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 1.75rem;
    justify-items: center;
}

.pipe-karta {
    --u: clamp(0.875rem, 0.7rem + 0.4vw, 1.0625rem);
    position: relative;
    width: min(100%, calc(26 * var(--u)));
}

.pipe-karta::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background: radial-gradient(closest-side, rgb(126 156 255 / 0.16), transparent);
}

.pipe-karta .ui-pipe {
    box-shadow: inset 0 0 0 var(--vlas) color-mix(in srgb, var(--signal) 22%, transparent), var(--ui-tien);
}

.pipe-pravidlo {
    display: flex;
    gap: 0.75rem;
    max-width: 26rem;
    padding: 1.125rem 1.25rem;
    border-radius: 1rem;
    background: var(--obalka);
    font-size: 1rem;
    line-height: 1.5;
}

.pipe-pravidlo .ikona {
    margin-top: 0.125rem;
    color: var(--signal);
}

/* =====================================================================
   Mobil
   ===================================================================== */
.mobil-vnutro {
    display: grid;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
}

@media (width >= 62rem) {
    .mobil-vnutro {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }
}

.mobil-text {
    max-width: 30rem;
}

.mobil-text .uvod {
    margin-top: 1.25rem;
}

.mobil-ukazka {
    --u: clamp(0.8125rem, 0.7rem + 0.35vw, 0.9375rem);
    position: relative;
    justify-self: center;
}

.mobil-upozornenie {
    position: absolute;
    top: calc(6 * var(--u));
    left: max(calc(-6 * var(--u)), calc((100% - 100vw) / 2 + 1rem));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: calc(0.75 * var(--u));
    width: calc(21 * var(--u));
    max-width: calc(100vw - 2rem);
    padding: calc(0.75 * var(--u)) calc(1 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(1.125 * var(--u));
    background: var(--papier);
    box-shadow: var(--ui-tien);
}

.mobil-upozornenie-ikona {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(2.25 * var(--u));
    height: calc(2.25 * var(--u));
    border-radius: calc(0.625 * var(--u));
    background: var(--noc);
    color: var(--papier);
}

.mobil-upozornenie-text {
    display: grid;
    min-width: 0;
    font-size: calc(0.875 * var(--u));
    line-height: 1.3;
}

.mobil-upozornenie-text strong {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobil-upozornenie-text span {
    color: var(--tlmene);
}

.mobil-upozornenie-cas {
    align-self: flex-start;
    margin-left: auto;
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
}

/* =====================================================================
   Cenník
   ===================================================================== */
.cennik-prepinac-obal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

html:not(.je-js) .cennik-prepinac-obal {
    display: none;
}

.cennik-prepinac {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.3125rem;
    border: var(--vlas) solid var(--linka);
    border-radius: 999rem;
    background: var(--papier);
}

.cennik-prepinac-pozadie {
    position: absolute;
    top: 0.3125rem;
    bottom: 0.3125rem;
    left: 0.3125rem;
    width: calc(50% - 0.3125rem);
    border-radius: 999rem;
    background: var(--text);
    transition: transform 0.45s var(--krivka);
}

.cennik-prepinac[data-obdobie="r"] .cennik-prepinac-pozadie {
    transform: translateX(100%);
}

.cennik-moznost {
    position: relative;
    z-index: 1;
    min-width: 7.5rem;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 999rem;
    background: none;
    color: var(--tlmene);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.cennik-moznost[aria-pressed="true"] {
    color: var(--papier);
}

.cennik-bonus {
    color: var(--signal-tmavy);
    font-size: 0.875rem;
    font-weight: 500;
}

.cennik-karty {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (width >= 62rem) {
    .cennik-karty {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cennik-karta {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem);
    border: var(--vlas) solid var(--linka);
    border-radius: 1.75rem;
    background: var(--papier);
}

.cennik-karta.is-hlavna {
    border-color: color-mix(in srgb, var(--signal) 45%, var(--linka));
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--signal) 9%, transparent), var(--ui-tien-maly);
}

.cennik-stitok {
    position: absolute;
    top: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
    right: clamp(1.25rem, 1rem + 1vw, 2rem);
    padding: 0.3125rem 0.75rem;
    border-radius: 999rem;
    background: var(--obalka);
    color: var(--signal-tmavy);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.cennik-nazov {
    font-size: 1.5rem;
}

.cennik-pre {
    margin-top: 0.375rem;
    color: var(--tlmene);
    font-size: 1rem;
}

.cennik-povodna {
    min-height: 1.5rem;
    margin-top: 1.75rem;
    color: var(--tlmene);
    font-size: 1rem;
}

.cennik-cena {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-top: 0.25rem;
    font-family: var(--pismo-nadpis);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
}

.cennik-karta:not(:has(.cennik-povodna)) .cennik-cena {
    margin-top: 3.5rem;
}

.cennik-suma {
    font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
    font-variant-numeric: tabular-nums;
}

.cennik-mena {
    font-size: 1.75rem;
}

.cennik-jednotka {
    min-height: 1.5rem;
    margin-top: 0.75rem;
    color: var(--tlmene);
    font-size: 0.9375rem;
}

.cennik-rocne {
    display: none;
}

html:not(.je-js) .cennik-rocne {
    display: block;
    margin-top: 0.5rem;
    color: var(--tlmene);
    font-size: 0.9375rem;
}

.cennik-zoznam {
    display: grid;
    gap: 0.75rem;
    margin: 1.75rem 0 0;
    padding: 1.75rem 0 0;
    border-top: var(--vlas) solid var(--linka);
    font-size: 1rem;
    line-height: 1.45;
    list-style: none;
}

.cennik-zoznam li {
    display: flex;
    gap: 0.625rem;
}

.cennik-zoznam .ikona {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    color: var(--signal);
}

.cennik-vyzva {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    text-align: center;
}

.cennik-vyzva .drobne {
    max-width: 40rem;
}

/* =====================================================================
   FAQ - jeden stĺpec, „+" sa otočí
   ===================================================================== */
.faq-vnutro {
    max-width: calc(38rem + 2 * var(--okraj));
}

.faq h2 {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
    text-align: center;
}

.faq-zoznam {
    border-top: var(--vlas) solid var(--linka);
}

.faq-polozka {
    border-bottom: var(--vlas) solid var(--linka);
}

.faq-polozka summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.5rem;
    padding: 1.125rem 0;
    border-radius: 0.375rem;
    cursor: pointer;
    font-family: var(--pismo-nadpis);
    font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    list-style: none;
}

.faq-polozka summary::-webkit-details-marker {
    display: none;
}

.faq-plus {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--signal);
    transition: transform 0.4s var(--krivka);
}

.faq-polozka[open] .faq-plus {
    transform: rotate(45deg);
}

.faq-odpoved {
    padding: 0 3rem 1.5rem 0;
    color: var(--tlmene);
}

.faq-polozka[open] .faq-odpoved {
    animation: b-faq 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes b-faq {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

/* =====================================================================
   Záverečná výzva - veľká obálka s kartičkami z hero
   ===================================================================== */
.vyzva {
    padding-bottom: var(--sekcia);
}

.vyzva-karta {
    position: relative;
    overflow: clip;
    padding: clamp(5rem, 3rem + 7vw, 10rem) clamp(1.5rem, 4vw, 4rem);
    border-radius: clamp(1.75rem, 1rem + 2vw, 2.75rem);
    background: var(--obalka);
    text-align: center;
}

.vyzva-obsah {
    position: relative;
    z-index: 2;
    max-width: 34rem;
    margin-inline: auto;
}

.vyzva-obsah h2 {
    font-size: clamp(2.25rem, 1.25rem + 2.8vw, 3.75rem);
}

.vyzva-obsah .b-akcie {
    margin-top: 2.25rem;
}

.vyzva-obsah .drobne {
    margin-top: 1rem;
}

.vyzva-k {
    position: absolute;
    z-index: 1;
    text-align: left;
}

.vyzva-k--pipe {
    --u: 0.8125rem;
    top: 13%;
    left: 4%;
    width: calc(19 * var(--u));
}

.vyzva-k--stav {
    --u: 1.125rem;
    top: 12%;
    right: 9%;
}

.vyzva-k--riesitel {
    --u: 0.875rem;
    right: 4%;
    bottom: 26%;
}

.vyzva-k--toast {
    --u: 0.9375rem;
    bottom: 13%;
    left: 6%;
}

.vyzva-k--telefon {
    --u: 0.5rem;
    right: 19%;
    bottom: -12rem;
}

@media (width < 75rem) {
    .vyzva-k--riesitel,
    .vyzva-k--telefon {
        display: none;
    }

    .vyzva-k--pipe {
        top: 6%;
        left: 3%;
    }

    .vyzva-k--stav {
        top: 7%;
        right: 4%;
    }

    .vyzva-k--toast {
        bottom: 6%;
        left: auto;
        right: 4%;
    }
}

@media (width < 62rem) {
    .vyzva-karta {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }

    .vyzva-k--pipe {
        display: none;
    }

    .vyzva-k--stav {
        --u: 0.9375rem;
        top: 2rem;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .vyzva-k--toast {
        --u: 0.8125rem;
        right: auto;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }
}

/* =====================================================================
   Nadpisy po riadkoch (mobil, b.js + SplitText): maska riadku má rezervu hore a dole,
   aby neodrezala diakritiku (Č, Ž) ani dotiahnutia (j, p) pri tesnom riadkovaní
   ===================================================================== */
.b-riadok-mask {
    margin-block: -0.12em;
    padding-block: 0.12em;
}

/* =====================================================================
   Reduced motion - žiadny kužeľ ani obiehajúce svetlo
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hero-kuzel,
    .b-obeh::before {
        display: none;
    }
}