/* pipeticket.com - verzia D „Z noci do vyriešeného" (redizajn 7. 10. 2026, návrh docs/2026-10-07-redizajn.md).
   Tma = požiadavka, ktorú ešte nikto nerieši (hero, záver), svetlo = má stav a riešiteľa (cesta, moduly,
   cenník). Tmavé bloky majú triedu .tma (premenné z tmavých tokenov appky, ako verzia C), ukážky appky
   ostávajú svetlé („svetlé ostrovy"). Prechody: svetlá karta nad hero, panel Pipe sa roztiahne,
   svetlá karta na konci odíde z tmavej výzvy.
   Predvolený je statický stav (bez JS, reduced motion). Pohyb zapína d.js triedami a GSAP.
   Spoločné súbory (zaklad.css, mockup.css) sa nemenia. Rozmery v rem, animuje sa len transform a opacity.
   Kontrast na tme (noc / noc-2): text 17,0 / 15,6, tlmené #98A5C0 7,4 / 6,8, svetlý signál 7,1 / 6,5. */

/* =====================================================================
   Ladenie verzie
   ===================================================================== */
:root {
    --noc-2: #151D2E;
    --noc-3: #1C2539;
    --signal-plocha: #2F5BFF;               /* plocha tlačidla s bielym textom (aj na tme) */
    --signal-plocha-hover: #2449D8;
    --stranka: var(--noc);                  /* stránka začína aj končí v tme (aj prescrollovanie) */
    --pismo-nadpis: 'Space Grotesk', var(--pismo);
    --nadpis-vaha: 500;
    --nadpis-tracking: -0.03em;
    --nadpis-riadkovanie: 1.02;
    --telo: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
    --telo-riadkovanie: 1.6;
    --h1: clamp(3rem, 1.2rem + 6.4vw, 7.25rem);
    --h2: clamp(2.25rem, 1.25rem + 3.4vw, 4.5rem);
    --h3: clamp(1.5rem, 1.15rem + 1.2vw, 2.375rem);
    --kontajner: 84rem;
    --hlavicka-pismo: 0.875rem;
    --sekcia: clamp(5rem, 3rem + 8vw, 10rem);
    --karta-r: clamp(1.75rem, 1rem + 2.5vw, 3rem);   /* zaoblenie kariet sekcií (prechody tma/svetlo) */
    --krivka: cubic-bezier(0.65, 0, 0.35, 1);
}

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

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

/* =====================================================================
   Tmavá téma bloku (.tma) - premenné z tmavých tokenov appky
   ===================================================================== */
.tma {
    color-scheme: dark;
    --papier: var(--noc-2);
    --hmla: var(--noc-3);
    --linka: #27314C;
    --linka-silna: #3A4666;
    --text: #F4F6FA;
    --tlmene: #98A5C0;
    --signal: #7E9CFF;                      /* akcent v texte na tme */
    --signal-tmavy: #A9BCFF;                /* hover */
    --paticka-pozadie: var(--noc);
    --ui-tien: 0 2rem 4rem -1.25rem rgb(0 0 0 / 0.6), 0 0.375rem 1rem -0.25rem rgb(0 0 0 / 0.35);
    --ui-tien-maly: 0 0.875rem 2rem -0.5rem rgb(0 0 0 / 0.55), 0 0.125rem 0.375rem rgb(0 0 0 / 0.3);
    color: var(--text);
}

/* svetlé ostrovy - ukážky appky v tme ostávajú v svetlých tokenoch */
.tma :is(.ui, [class^="ui-"], [class*=" ui-"]) {
    --papier: #FFFFFF;
    --hmla: #F4F6FA;
    --linka: #E3E8F0;
    --linka-silna: #C5CDDB;
    --text: #141B2B;
    --tlmene: #5B6780;
    --signal: #2F5BFF;
    --signal-tmavy: #2449D8;
    --ui-tien: 0 1.75rem 3.5rem -1.25rem rgb(20 27 43 / 0.2), 0 0.375rem 1rem -0.25rem rgb(20 27 43 / 0.06);
    --ui-tien-maly: 0 0.75rem 1.75rem -0.5rem rgb(20 27 43 / 0.18), 0 0.125rem 0.375rem rgb(20 27 43 / 0.05);
}

.tma .ui {
    color: var(--text);
}

.tma ::selection {
    background: rgb(126 156 255 / 0.38);
    color: #FFFFFF;
}

/* fokus na tme: svetlý signál s tmavým lemom (viditeľný aj na svetlom ostrove) */
.tma :focus-visible {
    outline-color: #7E9CFF;
    box-shadow: 0 0 0 0.3125rem var(--noc);
}

/* primárne tlačidlo je všade signál s bielym textom (na tme je --papier tmavý) */
.tlacidlo--primarne,
.tma .tlacidlo--primarne {
    background: var(--signal-plocha);
    color: #FFFFFF;
}

.tlacidlo--primarne:hover,
.tlacidlo--primarne:active,
.tma .tlacidlo--primarne:hover,
.tma .tlacidlo--primarne:active {
    background: var(--signal-plocha-hover);
    color: #FFFFFF;
}

.tma .tlacidlo--sekundarne {
    background: rgb(255 255 255 / 0.04);
}

.tma .tlacidlo--sekundarne:hover,
.tma .tlacidlo--sekundarne:active {
    border-color: var(--signal);
    color: var(--text);
}

/* hlavička: tmavá pilulka, o chlp priesvitná */
@media (width >= 64rem) {
    .hlavicka.tma .hlavicka-pozadie {
        filter:
            drop-shadow(var(--vlas) 0 0 var(--linka))
            drop-shadow(calc(-1 * var(--vlas)) 0 0 var(--linka))
            drop-shadow(0 var(--vlas) 0 var(--linka))
            drop-shadow(0 calc(-1 * var(--vlas)) 0 var(--linka))
            drop-shadow(0 0.75rem 1.5rem rgb(0 0 0 / 0.35));
    }

    .hlavicka.tma .hlavicka-pozadie > span {
        background: rgb(21 29 46 / 0.92);
    }
}

@media (width < 64rem) {
    .tma.je-js .hlavicka-menu,
    .je-js .hlavicka.tma .hlavicka-menu {
        background: var(--noc);
    }
}

/* =====================================================================
   Spoločné kúsky verzie
   ===================================================================== */
.d-h1,
.d-h2 {
    font-family: var(--pismo-nadpis);
    font-weight: 500;
    text-wrap: balance;
}

.d-h1 {
    font-size: var(--h1);
    letter-spacing: -0.045em;
    line-height: 0.95;
}

.d-h2 {
    font-size: var(--h2);
    letter-spacing: -0.04em;
    line-height: 1;
}

.d-h3 {
    font-family: var(--pismo-nadpis);
    font-size: var(--h3);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.d-uvod {
    max-width: 34rem;
    color: var(--tlmene);
    font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
    line-height: 1.5;
    text-wrap: pretty;
}

/* štítok nad nadpisom - pilulka s ikonou (téma bloku, nie verzálky) */
.d-stitok {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0 0.875rem 0 0.75rem;
    border: var(--vlas) solid var(--linka);
    border-radius: 999rem;
    background: var(--papier);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
}

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

.d-akcie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.d-demo .ikona {
    width: 1.125rem;
    height: 1.125rem;
    /* opticky vyrovnané - šípka hore vpravo pôsobí vyššie */
    margin-right: -0.25rem;
    transform: translateY(0.0625rem);
}

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

.d-sekcia {
    padding-block: var(--sekcia);
}

.d-sekcia-hd {
    display: grid;
    gap: 1.25rem 3rem;
    align-items: end;
    margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

@media (width >= 64rem) {
    .d-sekcia-hd {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.ui-kbd {
    --u: 0.875rem;
}

/* =====================================================================
   1. Hero (tma)
   ===================================================================== */
.d-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--noc);
    padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
    /* spodok zakryje svetlá karta cesty (záporný okraj --karta-r) */
    padding-bottom: calc(var(--karta-r) + clamp(4rem, 2.5rem + 6vw, 9rem));
}

/* jemná mriežka, ktorá sa stráca, a žiara signálu za schránkou */
.d-hero-pozadie {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 40% 45% at 76% 48%, rgb(47 91 255 / 0.3), transparent 70%),
        linear-gradient(rgb(255 255 255 / 0.045) var(--vlas), transparent var(--vlas)) 50% 0 / 4rem 4rem,
        linear-gradient(90deg, rgb(255 255 255 / 0.045) var(--vlas), transparent var(--vlas)) 50% 0 / 4rem 4rem;
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 55% 40%, #000 30%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 75% at 55% 40%, #000 30%, transparent 85%);
}

.d-hero-mriezka {
    display: grid;
    gap: clamp(3rem, 2rem + 4vw, 5rem);
    align-items: center;
}

@media (width >= 64rem) {
    .d-hero-mriezka {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        min-height: min(46rem, calc(100svh - var(--hlavicka-vyska) - 9rem));
    }
}

.d-hero-text .d-h1 {
    max-width: 11ch;
    margin-top: 1.75rem;
}

.d-hero-text .d-uvod {
    margin-top: 1.75rem;
}

.d-hero-text .d-akcie {
    margin-top: 2.5rem;
}

.d-hero-drobne {
    max-width: 30rem;
    margin-top: 1.25rem;
}

/* schránka - svetlý ostrov s mailami, prvý dostane pečiatku tiketu */
.d-hero-schranka {
    --u: clamp(0.8125rem, 0.62rem + 0.42vw, 1rem);
    position: relative;
    width: 100%;
    max-width: 34rem;
    justify-self: center;
}

@media (width >= 64rem) {
    .d-hero-schranka {
        justify-self: end;
    }
}

.d-schranka-ziara {
    position: absolute;
    inset: -18% -12%;
    z-index: -1;
    background: radial-gradient(closest-side, rgb(47 91 255 / 0.32), transparent);
}

.d-schranka {
    display: grid;
    gap: calc(0.875 * var(--u));
    padding: calc(1.25 * var(--u));
    border-radius: calc(1.25 * var(--u));
    background: var(--papier);
    box-shadow: 0 0 0 var(--vlas) rgb(255 255 255 / 0.1), 0 2rem 5rem -1.5rem rgb(47 91 255 / 0.55), 0 0.5rem 1.25rem -0.5rem rgb(0 0 0 / 0.5);
}

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

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

.d-schranka-riadky .ui-riadok:last-child {
    border-bottom: 0;
}

.d-peciatka {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: calc(0.5 * var(--u));
}

/* =====================================================================
   2. Cesta požiadavky - svetlá karta nad hero
   Statický stav: zastávky pod sebou (maketa, text). html.je-cesta-sticky (d.js, desktop s pohybom):
   vľavo pripnutá scéna s maketami (prelínajú sa podľa aktívneho kroku), vpravo kroky pod sebou.
   ===================================================================== */
.d-karta {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--karta-r));
    border-radius: var(--karta-r) var(--karta-r) 0 0;
    background: var(--papier);
    box-shadow: 0 -1.5rem 4rem rgb(0 0 0 / 0.3);
}

.d-cesta {
    padding-top: var(--sekcia);
}

.d-cesta-hd {
    display: grid;
    gap: 1.25rem 3rem;
    align-items: end;
}

@media (width >= 64rem) {
    .d-cesta-hd {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .d-cesta-hd .d-preskocit {
        grid-column: 2;
    }
}

.d-preskocit {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--linka-silna);
    text-underline-offset: 0.3em;
}

.d-preskocit:hover {
    color: var(--signal);
    text-decoration-color: currentColor;
}

.d-preskocit .ikona {
    width: 1rem;
    height: 1rem;
}

/* lišta zastávok - ukazovateľ cesty (desktop) */
.d-cesta-lista-obal {
    display: none;
}

@media (width >= 64rem) {
    .d-cesta-lista-obal {
        display: block;
        margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
    }
}

.d-cesta-lista {
    position: relative;
}

.d-cesta-ciara {
    position: absolute;
    top: 1.375rem;
    right: 10%;
    left: 10%;
    height: 0.125rem;
    border-radius: 999rem;
    background: var(--linka);
}

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

.d-cesta-kroky {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.d-cesta-krok {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 0.5rem 0.5rem;
    border-radius: 0.75rem;
    color: var(--tlmene);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

.d-cesta-krok:hover {
    color: var(--text);
}

.d-cesta-bod {
    width: 1rem;
    height: 1rem;
    border: 0.125rem solid var(--linka-silna);
    border-radius: 50%;
    background: var(--papier);
    transition: transform 0.3s var(--krivka);
}

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

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

/* bez pohybu je celá cesta „prejdená" - aktívny vzhľad majú všetky body */
html:not(.je-cesta-sticky) .d-cesta-bod {
    border-color: var(--signal);
    background: var(--signal);
}

/* zastávky */
.d-cesta-draha {
    display: grid;
    gap: clamp(4.5rem, 3rem + 5vw, 8rem);
    padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    padding-bottom: var(--sekcia);
}

.d-zastavka {
    display: grid;
    gap: clamp(2rem, 1.5rem + 2vw, 3rem);
    align-items: center;
    width: 100%;
    max-width: calc(var(--kontajner) + 2 * var(--okraj));
    margin-inline: auto;
    padding-inline: var(--okraj);
}

@media (width >= 64rem) {
    .d-zastavka {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: clamp(3rem, 1rem + 4vw, 6rem);
    }
}

.d-zastavka-poradie {
    color: var(--signal);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.d-zastavka-text .d-h3 {
    margin-top: 0.875rem;
}

.d-zastavka-text p:not(.d-zastavka-poradie) {
    max-width: 32rem;
    margin-top: 1.125rem;
    color: var(--tlmene);
}

.d-zastavka-text p + p:not(.d-zastavka-poradie) {
    margin-top: 0.75rem;
}

.d-zastavka-ukazka {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
}

/* plocha so statickou ukážkou stavu */
.d-plocha {
    --u: clamp(0.8125rem, 0.68rem + 0.42vw, 1rem);
    --stlpec-tint: color-mix(in srgb, var(--papier) 60%, transparent);
    display: grid;
    gap: calc(1 * var(--u));
    width: 100%;
    max-width: 38rem;
    padding: calc(1.5 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--hmla) 85%, transparent);
    box-shadow: var(--ui-tien);
}

.d-plocha--nastenka {
    container-type: inline-size;
    max-width: 52rem;
}

/* v úzkej nástenke sa 4 záložky nezmestia - Sledujem vynecháme */
@container (width < 24rem) {
    .d-plocha--nastenka .ui-zalozka:nth-child(2) {
        display: none;
    }
}

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

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

.d-plocha-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.75 * var(--u));
}

.d-plocha-sipka {
    display: inline-flex;
    color: var(--tlmene);
}

.d-riesitel {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: calc(0.75 * var(--u));
    max-width: 100%;
    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(0.875 * var(--u));
    background: var(--papier);
    box-shadow: var(--ui-tien-maly);
}

.d-riesitel-text {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.d-riesitel-text strong {
    font-size: calc(0.875 * var(--u));
    font-weight: 600;
}

.d-riesitel-text span {
    overflow: hidden;
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d-pruh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.75 * var(--u));
}

.d-pruh-cislo {
    color: var(--tlmene);
    font-family: var(--pismo-mono);
    font-size: calc(0.8125 * var(--u));
    font-weight: 500;
}

.d-pruh-kto,
.d-kto-potvrdil {
    display: inline-flex;
    align-items: center;
    gap: calc(0.5 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.8125 * var(--u));
    font-weight: 500;
}

.d-pruh-kto {
    margin-left: auto;
    color: var(--text);
}

.d-okno {
    --u: clamp(0.6875rem, 0.52rem + 0.38vw, 0.875rem);
    position: relative;
    max-width: 52rem;
}

/* ---- scrollytelling (desktop s pohybom): lišta a scéna s maketou sú sticky, kroky idú normálne ---- */
/* (len od 64 rem - keby JS pri zmene šírky triedu neodstránil, mobil ostane pod sebou) */
@media (width >= 64rem) {
    .je-cesta-sticky .d-cesta-lista-obal {
        position: sticky;
        top: var(--hlavicka-vyska);
        z-index: 3;
        margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
        padding-block: 0.5rem 0.75rem;
        background: var(--papier);
    }

    /* pozadie lišty siaha až po vrch okna - pod pilulkou hlavičky nepresvitá text krokov; len keď je lišta
       prilepená (trieda z d.js), inak by zakrylo odkaz „Preskočiť na funkcie" nad ňou */
    .je-cesta-sticky .d-cesta-lista-obal.je-prilepena::before {
        content: "";
        position: absolute;
        inset: calc(-1 * var(--hlavicka-vyska)) 0 100%;
        background: var(--papier);
    }

    .je-cesta-sticky .d-cesta-draha {
        --lista-vyska: 5.75rem;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 0 clamp(3rem, 1rem + 4vw, 6rem);
        width: 100%;
        max-width: calc(var(--kontajner) + 2 * var(--okraj));
        margin-inline: auto;
        padding: 0 var(--okraj) var(--sekcia);
    }

    .je-cesta-sticky .d-zastavka {
        grid-column: 2;
        display: flex;
        align-items: center;
        min-height: calc(100svh - var(--hlavicka-vyska) - var(--lista-vyska));
        max-width: none;
        padding: 0;
    }

    .d-cesta-scena-makety {
        position: sticky;
        top: calc(var(--hlavicka-vyska) + var(--lista-vyska));
        grid-column: 1;
        grid-row: 1 / span 5;
        align-self: start;
        display: grid;
        place-items: center;
        height: calc(100svh - var(--hlavicka-vyska) - var(--lista-vyska));
        padding-block: 1.5rem;
    }

    .d-cesta-scena-makety > .d-zastavka-ukazka {
        grid-area: 1 / 1;
        width: 100%;
    }

    /* v scéne sú makety podľa výšky obrazovky, nech sa zmestí aj nástenka */
    .je-cesta-sticky .d-plocha {
        --u: clamp(0.75rem, 0.15rem + 1.5svh, 1.0625rem);
    }

    .je-cesta-sticky .d-okno {
        --u: clamp(0.6875rem, 0.1rem + 1.4svh, 0.9375rem);
    }
}

/* =====================================================================
   3. Moduly (svetlo)
   ===================================================================== */
.d-moduly {
    background: var(--hmla);
}

.d-bento {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (width >= 44rem) {
    .d-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .d-modul--mobil {
        grid-column: 1 / -1;
    }
}

@media (width >= 64rem) {
    .d-bento {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .d-modul--klienti { grid-column: span 7; }
    .d-modul--dotazniky { grid-column: span 5; }
    .d-modul--chat { grid-column: span 5; }
    .d-modul--cas { grid-column: span 7; }
    .d-modul--mobil { grid-column: 1 / -1; }
}

.d-modul {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    min-width: 0;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    border: var(--vlas) solid var(--linka);
    border-radius: 1.75rem;
    background: var(--papier);
}

.d-modul .d-h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
}

.d-modul .d-h3 .ikona {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--signal);
}

.d-modul-text p {
    max-width: 34rem;
    margin-top: 0.75rem;
    color: var(--tlmene);
}

/* ukážka v module - malá plocha appky */
.d-ukazka {
    --u: clamp(0.75rem, 0.66rem + 0.28vw, 0.875rem);
    container-type: inline-size;
    align-self: end;
    padding: calc(1.25 * var(--u));
    border-radius: 1.125rem;
    background: var(--hmla);
}

/* klienti */
.d-klient {
    display: grid;
    gap: calc(0.875 * var(--u));
}

.d-klient-hd {
    display: flex;
    align-items: center;
    gap: calc(0.75 * var(--u));
}

.d-klient-znak {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: calc(2.5 * var(--u));
    height: calc(2.5 * var(--u));
    border-radius: calc(0.625 * var(--u));
    background: var(--noc);
    color: #FFFFFF;
    font-size: calc(0.8125 * var(--u));
    font-weight: 600;
}

.d-klient-meno {
    display: grid;
    line-height: 1.3;
}

.d-klient-meno strong {
    font-size: calc(1 * var(--u));
    font-weight: 600;
}

.d-klient-meno span,
.d-klient-riadok span span {
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
}

.d-klient-riadok {
    display: flex;
    align-items: center;
    gap: calc(0.75 * var(--u));
    min-width: 0;
    padding: calc(0.75 * var(--u)) calc(0.875 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.75 * var(--u));
    background: var(--papier);
}

.d-klient-riadok > span:not([class]) {
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.d-klient-riadok strong {
    overflow: hidden;
    font-size: calc(0.8125 * var(--u));
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d-klient-riadok .ui-stav {
    margin-left: auto;
}

/* názov karty v detaile klienta (karty sú v appke pod sebou) */
.d-klient-karta {
    margin: calc(0.25 * var(--u)) 0 calc(-0.375 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
    font-weight: 600;
}

/* dotazník */
.d-dotaznik {
    display: grid;
    gap: calc(0.75 * var(--u));
}

.d-dotaznik-nazov {
    font-family: var(--pismo-nadpis);
    font-size: calc(1.125 * var(--u));
    font-weight: 600;
    letter-spacing: -0.01em;
}

.d-dotaznik-otazka {
    display: flex;
    align-items: center;
    gap: calc(0.625 * var(--u));
}

.d-dotaznik-otazka .ui-text {
    flex: 1;
}

.d-dotaznik-cislo {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: calc(1.5 * var(--u));
    height: calc(1.5 * var(--u));
    border-radius: 50%;
    background: var(--odpoved-plocha);
    color: var(--signal);
    font-size: calc(0.75 * var(--u));
    font-weight: 600;
}

.d-dotaznik-volby {
    display: flex;
    gap: calc(0.5 * var(--u));
    padding-left: calc(2.125 * var(--u));
}

.d-dotaznik-volba {
    width: calc(4.5 * var(--u));
    height: calc(1.75 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: 999rem;
    background: var(--papier);
}

.d-dotaznik-volba.is-vybrana {
    border-color: var(--signal);
    background: var(--odpoved-plocha);
}

.d-dotaznik-pole {
    height: calc(3 * var(--u));
    margin-left: calc(2.125 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.5 * var(--u));
    background: var(--papier);
}

.d-dotaznik-akcie {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.5 * var(--u));
    margin-top: calc(0.25 * var(--u));
}

/* chat */
.d-chat {
    display: grid;
    grid-template-columns: calc(9.5 * var(--u)) minmax(0, 1fr);
    gap: calc(1 * var(--u));
}

.d-chat-zoznam {
    display: grid;
    align-content: start;
    gap: calc(0.25 * var(--u));
}

.d-chat-sekcia {
    margin: calc(0.375 * var(--u)) 0 calc(0.125 * var(--u)) calc(0.5 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.6875 * var(--u));
    font-weight: 600;
}

.d-chat-sekcia:first-child {
    margin-top: 0;
}

.d-chat-polozka {
    display: flex;
    align-items: center;
    gap: calc(0.375 * var(--u));
    padding: calc(0.375 * var(--u)) calc(0.5 * var(--u));
    border-radius: calc(0.5 * var(--u));
    font-size: calc(0.8125 * var(--u));
    font-weight: 500;
}

.d-chat-polozka .ui-ikona {
    width: calc(0.875 * var(--u));
    height: calc(0.875 * var(--u));
    color: var(--tlmene);
}

.d-chat-polozka.is-aktivna {
    background: var(--odpoved-plocha);
    color: var(--signal);
}

.d-chat-polozka.is-aktivna .ui-ikona {
    color: currentColor;
}

.d-chat-rozhovor {
    display: grid;
    align-content: start;
    gap: calc(0.625 * var(--u));
    min-width: 0;
    padding: calc(1 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.875 * var(--u));
    background: var(--papier);
}

.d-chat-tiket {
    display: flex;
    align-items: center;
    gap: calc(0.5 * var(--u));
    min-width: 0;
    padding-bottom: calc(0.5 * var(--u));
    border-bottom: var(--vlas) solid var(--linka);
    overflow: hidden;
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
    white-space: nowrap;
}

.d-chat-sprava {
    display: flex;
    align-items: flex-end;
    gap: calc(0.5 * var(--u));
}

.d-chat-sprava.is-moja {
    justify-content: flex-end;
}

.d-chat-bublina {
    display: grid;
    gap: calc(0.25 * var(--u));
    width: 72%;
    padding: calc(0.5 * var(--u)) calc(0.75 * var(--u));
    border-radius: calc(0.875 * var(--u));
    background: var(--hmla);
}

.d-chat-sprava.is-moja .d-chat-bublina {
    width: 60%;
    background: var(--odpoved-plocha);
}

.d-chat-bublina .ui-zmienka {
    justify-self: start;
}

.d-chat-zapisat {
    justify-self: start;
}

@container (width < 24rem) {
    .d-chat {
        grid-template-columns: minmax(0, 1fr);
    }

    .d-chat-zoznam {
        display: none;
    }
}

/* meranie času */
.d-cas {
    display: grid;
    gap: calc(0.625 * var(--u));
}

.d-cas-riadok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.5 * var(--u)) calc(0.875 * var(--u));
    padding: calc(0.75 * var(--u)) calc(0.75 * var(--u)) calc(0.75 * var(--u)) calc(1 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.75 * var(--u));
    background: var(--papier);
}

.d-cas-riadok.is-bezi {
    border-color: color-mix(in srgb, var(--signal) 45%, var(--linka));
    box-shadow: 0 0 0 calc(0.1875 * var(--u)) color-mix(in srgb, var(--signal) 10%, transparent);
}

.d-cas-tiket {
    display: grid;
    flex: 1 1 calc(10 * var(--u));
    min-width: 0;
    line-height: 1.3;
}

.d-cas-tiket .ui-karta-predmet {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d-cas-hodiny {
    display: inline-flex;
    align-items: center;
    gap: calc(0.375 * var(--u));
    font-family: var(--pismo-mono);
    font-size: calc(0.9375 * var(--u));
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.d-cas-hodiny.is-ticho {
    color: var(--tlmene);
}

.d-cas-bodka {
    width: calc(0.5 * var(--u));
    height: calc(0.5 * var(--u));
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 calc(0.1875 * var(--u)) color-mix(in srgb, var(--signal) 18%, transparent);
}

.d-cas-poznamka {
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
}

/* mobil (široká dlaždica) */
@media (width >= 44rem) {
    .d-modul--mobil {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-rows: none;
        align-items: center;
    }
}

.d-mobil {
    --u: clamp(0.75rem, 0.66rem + 0.3vw, 0.9375rem);
    position: relative;
    display: grid;
    place-items: center;
    padding: calc(2 * var(--u)) calc(1 * var(--u)) 0;
    overflow: hidden;
}

.d-mobil .ui-telefon {
    margin-bottom: calc(-9 * var(--u));
}

.d-mobil-upozornenie {
    position: absolute;
    top: calc(5.5 * var(--u));
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: calc(0.75 * var(--u));
    width: min(calc(21 * var(--u)), calc(100% - 2 * var(--u)));
    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);
    transform: translateX(-72%);
}

@container (width < 30rem) {
    .d-mobil-upozornenie {
        transform: translateX(-50%);
    }
}

.d-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: #FFFFFF;
}

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

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

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

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

/* drobnosti - zoznam s vláskovými linkami, nie karty */
.d-drobnosti {
    display: grid;
    gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
    margin: clamp(3.5rem, 2.5rem + 3vw, 5rem) 0 0;
    padding: 0;
    list-style: none;
}

@media (width >= 44rem) {
    .d-drobnosti {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.d-drobnosti li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.375rem 0.875rem;
    padding: 1.5rem 0 1.75rem;
    border-top: var(--vlas) solid var(--linka-silna);
}

.d-drobnosti .ikona {
    grid-row: span 2;
    margin-top: 0.1875rem;
    color: var(--signal);
}

.d-drobnosti h3 {
    font-family: var(--pismo-nadpis);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.d-drobnosti p {
    color: var(--tlmene);
    font-size: 1rem;
    line-height: 1.55;
}

/* =====================================================================
   4. Pipe - tmavý panel na svetlej stránke (pri vstupe sa roztiahne, d.js)
   ===================================================================== */
.d-pipe {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding-block: calc(var(--sekcia) * 0.9);
    background: var(--hmla);
}

.d-pipe-pozadie {
    position: absolute;
    inset: 0 clamp(0rem, -1rem + 1.5vw, 1rem);
    z-index: -1;
    border-radius: var(--karta-r);
    background:
        radial-gradient(ellipse 45% 60% at 78% 50%, rgb(47 91 255 / 0.3), transparent 70%),
        radial-gradient(ellipse 60% 40% at 20% 0%, rgb(126 156 255 / 0.12), transparent 70%),
        var(--noc);
    box-shadow: 0 2rem 5rem -2rem rgb(14 20 32 / 0.5);
}

.d-pipe-vnutro {
    /* obsah odsadený od okraja tmavého panelu */
    padding-inline: calc(var(--okraj) + clamp(0.5rem, -1rem + 3vw, 3rem));
    display: grid;
    gap: clamp(3rem, 2rem + 3vw, 5rem);
    align-items: center;
}

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

.d-pipe-text .d-h2 {
    margin-top: 1.5rem;
}

.d-pipe-zoznam {
    display: grid;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.d-pipe-zoznam > div {
    display: grid;
    gap: 0.25rem 1.5rem;
    padding: 1.125rem 0;
    border-top: var(--vlas) solid var(--linka);
}

@media (width >= 44rem) {
    .d-pipe-zoznam > div {
        grid-template-columns: 11rem minmax(0, 1fr);
        align-items: baseline;
    }
}

.d-pipe-zoznam dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--pismo-nadpis);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

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

.d-pipe-ukazka {
    display: grid;
    justify-items: center;
    gap: 1.75rem;
}

.d-pipe-karta {
    --u: clamp(0.875rem, 0.74rem + 0.42vw, 1.0625rem);
    position: relative;
    width: 100%;
    max-width: 30rem;
}

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

.d-pipe-karta .ui-pipe {
    box-shadow: 0 0 0 var(--vlas) rgb(255 255 255 / 0.1), 0 2rem 5rem -1.5rem rgb(47 91 255 / 0.55);
}

.d-navrh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(0.5 * var(--u)) calc(0.75 * var(--u));
    padding: calc(0.75 * var(--u)) 0;
    border-top: var(--vlas) solid var(--linka);
}

.d-navrh-co {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.5 * var(--u));
    font-size: calc(0.875 * var(--u));
}

.d-navrh-co strong {
    font-weight: 600;
}

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

.d-pipe-pravidlo {
    display: flex;
    gap: 0.75rem;
    max-width: 30rem;
    color: var(--tlmene);
    font-size: 1rem;
    line-height: 1.55;
}

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

/* =====================================================================
   5. Cenník a FAQ - svetlá karta, ktorá na konci odíde z tmavej výzvy
   ===================================================================== */
.d-koniec-svetla {
    position: relative;
    z-index: 2;
    border-radius: 0 0 var(--karta-r) var(--karta-r);
    background: var(--hmla);
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.35);
}

.d-cennik {
    padding-top: calc(var(--sekcia) * 0.9);
}

.cennik-prepinac-obal {
    display: flex;
    flex-wrap: wrap;
    align-items: 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.9375rem;
    font-weight: 500;
}

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

@media (width >= 64rem) {
    .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);
}

/* hlavná tarifa - tmavá karta (malý kúsok noci aj vo svetlej časti) */
.cennik-karta.is-hlavna {
    border-color: var(--noc);
    background: var(--noc);
    box-shadow: 0 1.5rem 3.5rem -1.5rem rgb(47 91 255 / 0.55);
    color: #F4F6FA;
    --text: #F4F6FA;
    --tlmene: #98A5C0;
    --linka: #27314C;
    --signal: #7E9CFF;
    --signal-tmavy: #A9BCFF;
}

.cennik-karta.is-hlavna .cennik-nazov {
    color: var(--text);
}

.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(--odpoved-plocha);
    color: var(--signal-tmavy);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.cennik-karta.is-hlavna .cennik-stitok {
    background: rgb(126 156 255 / 0.16);
    color: #C3D0FF;
}

.cennik-nazov {
    font-family: var(--pismo-nadpis);
    font-size: 1.625rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.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.04em;
    line-height: 1;
}

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

.cennik-suma {
    font-size: clamp(3rem, 2rem + 2.6vw, 4.25rem);
    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: start;
    gap: 1.25rem;
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

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

/* FAQ - nadpis vľavo, otázky vpravo */
.d-faq {
    padding-top: 0;
    padding-bottom: calc(var(--sekcia) * 0.9);
}

.d-faq-vnutro {
    display: grid;
    gap: 2rem 3rem;
    align-items: start;
    padding-top: calc(var(--sekcia) * 0.9);
    border-top: var(--vlas) solid var(--linka-silna);
}

@media (width >= 64rem) {
    .d-faq-vnutro {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

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

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

.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.015em;
    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: d-faq 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

/* =====================================================================
   6. Záverečná výzva (tma) - pod odchádzajúcou svetlou kartou
   ===================================================================== */
.d-vyzva {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: clip;
    margin-top: calc(-1 * var(--karta-r));
    padding: calc(var(--karta-r) + var(--sekcia)) 0 var(--sekcia);
    background: var(--noc);
}

.d-vyzva::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 45% 45% at 50% 30%, rgb(47 91 255 / 0.28), transparent 70%),
        linear-gradient(rgb(255 255 255 / 0.04) var(--vlas), transparent var(--vlas)) 50% 0 / 4rem 4rem,
        linear-gradient(90deg, rgb(255 255 255 / 0.04) var(--vlas), transparent var(--vlas)) 50% 0 / 4rem 4rem;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 30%, transparent 85%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 30%, transparent 85%);
}

.d-vyzva-vnutro {
    display: grid;
    justify-items: center;
    text-align: center;
}

.d-vyzva-mail {
    --u: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    width: min(100%, 24rem);
    overflow: hidden;
    border-radius: calc(0.875 * var(--u));
    box-shadow: 0 0 0 var(--vlas) rgb(255 255 255 / 0.1), 0 1.5rem 3.5rem -1rem rgb(47 91 255 / 0.5);
}

.d-vyzva-mail .ui-riadok {
    border-bottom: 0;
}

.d-vyzva-h {
    max-width: 14ch;
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    font-size: clamp(2.75rem, 1.3rem + 5.2vw, 6.25rem);
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.d-vyzva .d-akcie {
    justify-content: center;
    margin-top: 2.5rem;
}

.d-vyzva .drobne {
    max-width: 32rem;
    margin-top: 1.25rem;
}

@media (width < 30rem) {
    .d-vyzva .d-akcie {
        width: 100%;
    }
}

/* päta pokračuje v tme */
.paticka.tma {
    border-top-color: var(--linka);
}

/* =====================================================================
   Na mieru a vo vlastnej inštancii (svetlo, pred cenníkom) - 3 úrovne vedľa seba, bez cien
   ===================================================================== */
.d-mieru {
    padding-bottom: 0;
}

.d-urovne {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.d-uroven {
    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);
}

.d-uroven > .ikona {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--signal);
}

.d-uroven-nazov {
    margin-top: 1.25rem;
    font-family: var(--pismo-nadpis);
    font-size: 1.625rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.d-uroven p:not(.d-uroven-cena) {
    margin-top: 0.75rem;
    color: var(--tlmene);
}

/* cena / odkaz dole v karte - karty sú rovnako vysoké, riadok ceny lícuje */
.d-uroven-cena {
    margin-top: auto;
    padding-top: 1.5rem;
    color: var(--text);
    font-weight: 600;
}

.d-uroven-cena a,
.d-uvod a {
    color: var(--signal);
}

.d-mieru-vyzva {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

/* oddelenie od cenníka pod blokom */
.d-mieru + .d-cennik .d-sekcia-hd {
    padding-top: calc(var(--sekcia) * 0.9);
    border-top: var(--vlas) solid var(--linka-silna);
}

/* =====================================================================
   Podstránky v štýle D (/na-mieru/): krátky tmavý hero, svetlá karta, brief formulár
   ===================================================================== */
.d-podhero {
    position: relative;
    background: var(--noc);
    padding-top: clamp(3rem, 2rem + 4vw, 6rem);
    padding-bottom: calc(var(--karta-r) + clamp(3.5rem, 2.5rem + 4vw, 6.5rem));
}

.d-podhero-h1 {
    max-width: 14ch;
    margin-top: 1.75rem;
    font-size: clamp(2.75rem, 1.4rem + 4.8vw, 5.75rem);
}

.d-podhero .d-uvod {
    margin-top: 1.5rem;
}

.d-podhero .d-akcie {
    margin-top: 2.25rem;
}

.d-podhero--dakujeme {
    min-height: calc(100svh - var(--hlavicka-vyska) - 10rem);
    padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
}

/* podstránka: svetlá karta nad hero so zaobleným vrchom aj spodkom, pod ňou tmavá päta */
.d-podstranka {
    border-radius: var(--karta-r);
    background: var(--hmla);
}

.d-podstranka .d-sekcia + .d-sekcia {
    padding-top: 0;
}

/* vlastná inštancia - text vľavo, fakty vpravo */
.d-instancia-vnutro {
    display: grid;
    gap: 2rem 3rem;
    align-items: start;
}

@media (width >= 64rem) {
    .d-instancia-vnutro {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.d-instancia .d-uvod {
    margin-top: 1.25rem;
}

.d-fakty {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.d-fakty li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    border-top: var(--vlas) solid var(--linka-silna);
    font-weight: 500;
}

.d-fakty li:last-child {
    border-bottom: var(--vlas) solid var(--linka-silna);
}

.d-fakty .ikona {
    color: var(--signal);
}

/* postup spolupráce - skutočná postupnosť, preto čísla */
.d-postup {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (width >= 44rem) {
    .d-postup {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width >= 64rem) {
    .d-postup {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.d-postup li {
    padding: 1.5rem;
    border: var(--vlas) solid var(--linka);
    border-radius: 1.375rem;
    background: var(--papier);
}

.d-postup-cislo {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--odpoved-plocha);
    color: var(--signal);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.d-postup h3 {
    margin-top: 1rem;
    font-family: var(--pismo-nadpis);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.d-postup p {
    margin-top: 0.5rem;
    color: var(--tlmene);
    font-size: 1rem;
    line-height: 1.55;
}

/* brief formulár */
.d-brief-vnutro {
    display: grid;
    gap: 2rem 3rem;
    align-items: start;
    padding-top: calc(var(--sekcia) * 0.9);
    border-top: var(--vlas) solid var(--linka-silna);
}

@media (width >= 64rem) {
    .d-brief-vnutro {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

.d-brief-uvod .d-uvod {
    margin-top: 1.25rem;
}

.d-form {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    border: var(--vlas) solid var(--linka);
    border-radius: 1.75rem;
    background: var(--papier);
}

.d-form-chyba {
    padding: 0.875rem 1rem;
    border: var(--vlas) solid #E9B4C2;
    border-radius: 0.875rem;
    background: #FDF0F3;
    color: #AE2A4A;
    font-weight: 500;
}

.d-form-chyba[hidden] {
    display: none;
}

.d-form-rad {
    display: grid;
    gap: 1.25rem;
}

@media (width >= 44rem) {
    .d-form-rad {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.d-pole {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
}

.d-pole > label,
.d-volby legend {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.d-pole-volitelne {
    color: var(--tlmene);
    font-weight: 400;
}

.d-pole input,
.d-pole select,
.d-pole textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.875rem;
    border: var(--vlas) solid var(--linka-silna);
    border-radius: 0.75rem;
    background: var(--papier);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.4;
}

.d-pole textarea {
    resize: vertical;
}

.d-pole :is(input, select, textarea):focus-visible,
.d-volba input:focus-visible,
.d-suhlas-pole input:focus-visible {
    border-color: var(--signal);
    outline: 0.125rem solid var(--signal);
    outline-offset: 0.0625rem;
}

.d-volby {
    margin: 0;
    padding: 0;
    border: 0;
}

.d-volby legend {
    margin-bottom: 0.5rem;
    padding: 0;
}

.d-volby {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.d-volba {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1.125rem 0 0.875rem;
    border: var(--vlas) solid var(--linka-silna);
    border-radius: 999rem;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
}

.d-volba:has(input:checked) {
    border-color: var(--signal);
    background: var(--odpoved-plocha);
}

.d-volba input,
.d-suhlas-pole input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: #2F5BFF;
}

/* náš výber namiesto natívneho selectu (na-mieru.js) - tlačidlo ako pole, zoznam nadol alebo nahor (.je-hore) */
.d-vyber {
    position: relative;
}

.d-vyber-nativny {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

.d-vyber-tlacidlo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem 0.75rem 0.875rem;
    border: var(--vlas) solid var(--linka-silna);
    border-radius: 0.75rem;
    background: var(--papier);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.d-vyber.je-prazdny .d-vyber-hodnota {
    color: var(--tlmene);
}

.d-vyber-tlacidlo:focus-visible,
.d-vyber-tlacidlo[aria-expanded="true"] {
    border-color: var(--signal);
    outline: 0.125rem solid var(--signal);
    outline-offset: 0.0625rem;
}

.d-vyber-sipka {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--tlmene);
    transition: transform 0.15s ease;
}

.d-vyber-tlacidlo[aria-expanded="true"] .d-vyber-sipka {
    transform: rotate(180deg);
}

.d-vyber-zoznam {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    left: 0;
    z-index: 20;
    max-height: 16rem;
    margin: 0;
    padding: 0.375rem;
    overflow-y: auto;
    border: var(--vlas) solid var(--linka);
    border-radius: 0.75rem;
    background: var(--papier);
    box-shadow: 0 0.75rem 2rem rgb(11 16 32 / 0.14);
    list-style: none;
}

.d-vyber.je-hore .d-vyber-zoznam {
    top: auto;
    bottom: calc(100% + 0.375rem);
}

.d-vyber-zoznam:focus {
    outline: none;
}

.d-vyber-moznost {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
}

.d-vyber-moznost.je-prazdna {
    color: var(--tlmene);
}

.d-vyber-moznost.je-aktivna {
    background: var(--odpoved-plocha);
}

.d-vyber-moznost[aria-selected="true"]:not(.je-prazdna) {
    color: var(--signal);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .d-vyber-sipka {
        transition: none;
    }
}

/* pasca na roboty - mimo obrazovky (nie display: none, aby ju robot vyplnil) */
.d-pasca {
    position: absolute;
    left: -100rem;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
}

.d-suhlas-pole {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--tlmene);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.d-suhlas-pole input {
    flex: none;
    margin-top: 0.1875rem;
}

.d-form-akcie {
    display: flex;
}

@media (width < 30rem) {
    .d-form-akcie .tlacidlo {
        flex: 1;
    }
}