/* =========================================================
   Mystery Coders — design system
   Špecifikácia: docs/MYSTERYCODERS-DESIGN.md
   Bez buildu. Poradie vrstiev určuje prioritu, nie poradie v súbore.
========================================================= */
@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------
   fonty: Geist + Geist Mono (OFL), variabilné, self-hosted
--------------------------------------------------------- */
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/geist-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/geist-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/geist-mono-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/geist-mono-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------
   reset
--------------------------------------------------------- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
    ul[class], ol[class] { padding: 0; list-style: none; }
    img, svg, video { display: block; max-width: 100%; height: auto; }
    input, button, select, textarea { font: inherit; color: inherit; }
    button { cursor: pointer; }
    [hidden] { display: none !important; }
    :target { scroll-margin-top: calc(var(--header-h) + 16px); }
}

/* ---------------------------------------------------------
   tokens (§18)
--------------------------------------------------------- */
@layer tokens {
    :root {
        /* brand */
        --color-primary: #533AFD;
        --color-primary-hover: #624CFF;
        --color-primary-active: #4328E8;
        --color-primary-soft: #EEEBFF;
        --color-primary-on-dark: #A596FF;
        /* Hlbší odtieň primary – rám a text sekundárneho tlačidla na svetlej
           ploche. Na bielej drží 8,37 : 1, na lavender 7,15 : 1. */
        --color-primary-deep: #4032C8;

        /* light */
        --light-canvas: #F8F7FB;
        --light-surface: #FFFFFF;
        --light-sunken: #F1EFF6;
        --light-border: #E4E1EC;
        --light-border-strong: #8F88A0;
        --light-text: #17131F;
        --light-text-muted: #5B5468;
        --light-text-subtle: #6E6780;

        /* dark */
        --dark-canvas: #100C1A;
        --dark-surface: #181225;
        --dark-elevated: #211733;
        --dark-border: #302548;
        --dark-border-strong: #7A6C9A;
        --dark-text: #F8F7FC;
        --dark-text-muted: #B7AFC6;
        --dark-text-subtle: #958CA6;

        /* deep violet – brandová plocha homepage (odvodená z primary #533AFD,
           rovnaký odtieň, výrazne tmavšia a menej sýta) */
        --violet-canvas: #221750;
        --violet-surface: #1B1142;
        --violet-elevated: #2C1F63;
        --violet-border: #3A2A78;
        --violet-border-strong: #8C7DC9;
        --violet-text: #F7F5FF;
        --violet-text-muted: #C3B9E6;
        --violet-text-subtle: #A79BD4;

        /* light lavender – svetlá brandová plocha, nie sterilná biela */
        --lavender-canvas: #EFEBF9;
        --lavender-sunken: #E4DEF3;
        --lavender-border: #DDD6EE;

        /* akčná modrá – primárne CTA mimo hero (action ≠ brand).
           Odtieň leží medzi primary #533AFD a cyanom #4EC4FF. */
        /* Svetlosť je zvolená tak, aby biely text na tlačidle držal 5,1 : 1
           a zároveň hranica tlačidla mala 3 : 1 voči violet aj navy ploche. */
        --action-primary: #2563F2;
        --action-primary-hover: #3569F5;
        --action-primary-active: #1A4FD0;
        --action-on-dark: #8FB4FF;

        /* type */
        --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

        --text-display: clamp(2.5rem, 1.83rem + 2.96vw, 4.25rem);
        --text-display-hero: clamp(2.125rem, 1.2rem + 3.94vw, 4.75rem);
        --text-hero-lead: clamp(1.1875rem, 1.05rem + 0.68vw, 1.5rem);
        --text-h1: clamp(2.25rem, 1.83rem + 1.85vw, 3.5rem);
        --text-h2: clamp(1.875rem, 1.58rem + 1.3vw, 2.75rem);
        --text-h3: clamp(1.25rem, 1.17rem + 0.37vw, 1.5rem);
        --text-h4: 1.125rem;
        --text-lead: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
        --text-body-lg: 1.0625rem;
        --text-body: 1rem;
        --text-small: 0.875rem;
        --text-meta: 0.75rem;

        /* spacing */
        --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
        --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
        --space-9: 96px; --space-10: 128px;
        --section-y: clamp(4.5rem, 3.2rem + 5.8vw, 8rem);
        --section-y-dense: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);
        --hero-y: clamp(3.5rem, 2.4rem + 4.7vw, 6.5rem);
        --hero-y-home: clamp(4rem, 2.5rem + 6vw, 9rem);

        /* layout */
        --container: 1240px;
        --container-wide: 1440px;
        --container-narrow: 760px;
        --container-form: 560px;
        --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
        --header-h: 64px;

        /* radius */
        --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
        --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;

        --shadow-overlay: 0 1px 2px rgb(23 19 31 / .06), 0 12px 32px -8px rgb(23 19 31 / .18);

        /* motion */
        --dur-instant: 100ms; --dur-fast: 180ms; --dur-base: 260ms; --dur-slow: 400ms;
        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
        --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    }

    @media (min-width: 1024px) {
        :root { --header-h: 72px; }
    }

    /* Polarita: komponenty používajú iba tieto aliasy (§18) */
    :root,
    .band--light,
    .band--white,
    .band--lavender {
        --bg: var(--light-canvas);
        --surface: var(--light-surface);
        --sunken: var(--light-sunken);
        --border: var(--light-border);
        --border-strong: var(--light-border-strong);
        --text: var(--light-text);
        --text-muted: var(--light-text-muted);
        --text-subtle: var(--light-text-subtle);
        --link: var(--color-primary);
        --link-hover: var(--color-primary-active);
        --focus: var(--color-primary);
        /* Akcent pre rám a text akčného prvku (sekundárne tlačidlo).
           Na rozdiel od `--action-bg` musí byť čitateľný na ploche, nie pod
           bielym textom, preto má vlastnú hodnotu pre každú polaritu. */
        --action-fg: var(--color-primary-deep);
        --danger: #B42318;
        --success: #157347;
        --warning: #8A5300;
        color-scheme: light;
    }
    .band--white { --bg: var(--light-surface); }
    /* Svetlá plocha s violet nádychom. Karty na nej zostávajú biele. */
    .band--lavender {
        --bg: var(--lavender-canvas);
        --sunken: var(--lavender-sunken);
        --border: var(--lavender-border);
        /* Plocha je tmavšia než --light-canvas, drobný text preto potrebuje
           tmavší odtieň (inak klesne na 4,58 : 1). */
        --text-subtle: #625B75;
    }

    .band--dark,
    .card--featured,
    .site-header--dark,
    .site-footer {
        --bg: var(--dark-canvas);
        --surface: var(--dark-surface);
        --sunken: var(--dark-elevated);
        --border: var(--dark-border);
        --border-strong: var(--dark-border-strong);
        --text: var(--dark-text);
        --text-muted: var(--dark-text-muted);
        --text-subtle: var(--dark-text-subtle);
        --link: var(--color-primary-on-dark);
        --link-hover: var(--dark-text);
        --focus: var(--color-primary-on-dark);
        --action-fg: var(--color-primary-on-dark);
        --danger: #FF8A8A;
        --success: #5FD39A;
        --warning: #E0A43A;
        color-scheme: dark;
    }
    .card--featured { --bg: var(--dark-surface); --surface: var(--dark-surface); }

    /* Deep violet: tretia polarita. Komponenty sa nemenia, mení sa iba paleta. */
    .band--violet {
        --bg: var(--violet-canvas);
        --surface: var(--violet-surface);
        --sunken: var(--violet-elevated);
        --border: var(--violet-border);
        --border-strong: var(--violet-border-strong);
        --text: var(--violet-text);
        --text-muted: var(--violet-text-muted);
        --text-subtle: var(--violet-text-subtle);
        --link: var(--action-on-dark);
        --link-hover: var(--violet-text);
        --focus: var(--action-on-dark);
        --action-fg: var(--action-on-dark);
        --danger: #FF8A8A;
        --success: #5FD39A;
        --warning: #E0A43A;
        color-scheme: dark;
    }

    /* Akčná modrá platí iba na dvoch nových plochách, ktoré dnes používa
       výhradne homepage. `.band--white` a `.band--light` sú zdieľané so
       stránkami služieb, preto sa ich to nedotýka. Hero je `.band--dark`,
       kde `--action-bg` nie je definované, takže si drží pôvodnú primary. */
    .band--violet,
    .band--lavender {
        --action-bg: var(--action-primary);
        --action-bg-hover: var(--action-primary-hover);
        --action-bg-active: var(--action-primary-active);
    }

    /* Sekcia situácií je na bielej ploche, ktorú zdieľajú aj stránky služieb.
       Akčnú modrú preto nedefinujeme na `.band--white`, ale iba na tejto
       jednej sekcii homepage – inde zostáva pôvodná primary. */
    .scenario-band {
        --action-bg: var(--action-primary);
        --action-bg-hover: var(--action-primary-hover);
        --action-bg-active: var(--action-primary-active);
    }
}

/* ---------------------------------------------------------
   base
--------------------------------------------------------- */
@layer base {
    html { scroll-padding-top: calc(var(--header-h) + 16px); }
    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
    }

    body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-body);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4 {
        font-weight: 600;
        color: var(--text);
        text-wrap: balance;
    }
    h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -0.03em; }
    h2 { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.025em; }
    h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.015em; }
    h4 { font-size: var(--text-h4); line-height: 1.35; letter-spacing: -0.01em; }

    p { text-wrap: pretty; }
    strong, b { font-weight: 600; }
    code, kbd, samp { font-family: var(--font-mono); font-size: 0.875em; }

    /* Inline odkazy (§9): vždy podčiarknuté */
    a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
    a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

    :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
    main:focus { outline: none; }

    ::selection { background: var(--color-primary); color: #FFFFFF; }

    hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
}

/* ---------------------------------------------------------
   layout
--------------------------------------------------------- */
@layer layout {
    .container {
        width: 100%;
        max-width: calc(var(--container) + 2 * var(--gutter));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }
    .container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
    .container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

    /* Pásma (§13) */
    .band { background: var(--bg); color: var(--text); padding-block: var(--section-y); }
    .band--dense { padding-block: var(--section-y-dense); }
    .band--white + .band--white,
    .band--light + .band--light,
    .band--lavender + .band--lavender { border-top: 1px solid var(--border); }

    /* Violet pásmo má jednu veľmi jemnú svetelnú plochu, aby brandový moment
       nebol plochý. Je to background-image na samotnom pásme – bez pseudo-
       elementu, takže nemôže spôsobiť pretečenie ani medzeru medzi pásmami. */
    .band--violet {
        background-image: radial-gradient(120% 90% at 82% 8%,
            rgb(83 58 253 / .30) 0%, rgb(83 58 253 / .10) 42%, rgb(83 58 253 / 0) 72%);
        background-repeat: no-repeat;
    }

    /* Grid (§5): kanonické kompozície namiesto span utilít */
    .grid-3 { display: grid; gap: var(--space-5); }
    .grid-2 { display: grid; gap: var(--space-5); }
    .split { display: grid; gap: var(--space-7); align-items: center; }
    .split--head { display: grid; gap: var(--space-6) var(--space-7); align-items: start; }

    @media (min-width: 640px) {
        .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1024px) {
        .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
        .grid-2 { gap: var(--space-6); }
        .split { grid-template-columns: 7fr 5fr; gap: var(--space-8); }
        .split--head { grid-template-columns: 5fr 7fr; }
    }

    .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
}

/* ---------------------------------------------------------
   components
--------------------------------------------------------- */
@layer components {

    /* --- Typografické role ------------------------------ */
    .display { font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; }
    .display--hero { font-size: var(--text-display-hero); line-height: 1.02; letter-spacing: -0.04em; }
    .display .tone, h1 .tone, h2 .tone { color: var(--text-muted); }
    .lead { font-size: var(--text-lead); line-height: 1.55; color: var(--text-muted); max-width: 62ch; }
    .body-lg { font-size: var(--text-body-lg); line-height: 1.7; }
    .small { font-size: var(--text-small); line-height: 1.5; }
    .meta {
        font-family: var(--font-mono);
        font-size: var(--text-meta);
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .num { font-variant-numeric: tabular-nums; }
    .h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.015em; }
    .h4 { font-size: var(--text-h4); line-height: 1.35; letter-spacing: -0.01em; }

    /* --- Section head (§13.1) --------------------------- */
    .section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; margin-bottom: var(--space-7); }
    .section-head .meta { margin-bottom: 0; }
    .section-head h2 + .lead { margin-top: var(--space-1); }
    @media (max-width: 639px) { .section-head { margin-bottom: var(--space-6); } }

    /* --- Buttons (§8) ----------------------------------- */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: 48px;
        padding: 0 22px;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color var(--dur-instant) var(--ease-standard),
                    border-color var(--dur-instant) var(--ease-standard),
                    color var(--dur-instant) var(--ease-standard);
    }
    .btn:hover { text-decoration: none; }
    .btn--sm { min-height: 40px; padding: 0 16px; font-size: var(--text-small); }
    .btn--lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }

    /* Fallback = pôvodná primary, takže hero a stránky služieb sa nemenia. */
    .btn--primary { background: var(--action-bg, var(--color-primary)); color: #FFFFFF; }
    .btn--primary:hover { background: var(--action-bg-hover, var(--color-primary-hover)); color: #FFFFFF; }
    .btn--primary:active { background: var(--action-bg-active, var(--color-primary-active)); }

    /* Sekundárne tlačidlo: hover mení iba akcent rámu a textu. Výplň sa
       nepridáva – na tónovaných plochách pôsobila ako škvrna a tmavý rám
       (`--text`) bol na svetlej ploche zbytočne tvrdý. */
    .btn--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
    .btn--secondary:hover {
        color: var(--action-fg, var(--color-primary));
        border-color: var(--action-fg, var(--color-primary));
        background: transparent;
    }
    .btn--secondary:active {
        color: var(--action-fg, var(--color-primary));
        border-color: var(--action-fg, var(--color-primary));
        /* Stlačenie je cítiť iba veľmi jemným tónom akcentu. Prehliadač bez
           `color-mix` deklaráciu zahodí a tlačidlo zostane bez výplne. */
        background: color-mix(in srgb, var(--action-fg, var(--color-primary)) 8%, transparent);
    }

    .btn--text {
        min-height: 0; padding: 0; border: 0; background: none;
        color: var(--text); font-weight: 500;
        justify-content: flex-start; align-self: flex-start;
    }
    .btn--text:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }

    .btn .arrow { transition: transform var(--dur-fast) var(--ease-standard); }
    .btn:hover .arrow { transform: translateX(2px); }

    .btn:disabled,
    .btn[aria-disabled="true"] {
        background: var(--sunken); color: var(--text-subtle); border-color: var(--border);
        cursor: not-allowed;
    }
    .btn[aria-busy="true"] { cursor: progress; }

    .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
    .btn-row .btn--text { align-self: center; }
    @media (max-width: 639px) {
        .btn-row--stack { flex-direction: column; }
        .btn-row--stack .btn { width: 100%; }
    }

    /* --- Tag a status ----------------------------------- */
    .tag {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 3px 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius-xs);
        font-family: var(--font-mono); font-size: var(--text-meta); line-height: 1.4;
        color: var(--text-muted);
        white-space: nowrap;
    }
    .status::before {
        content: ""; width: 6px; height: 6px; border-radius: var(--radius-full);
        background: var(--text-subtle); flex-shrink: 0;
    }
    .status--ok::before { background: var(--success); }
    .status--warn::before { background: var(--warning); }
    .status--danger::before { background: var(--danger); }

    /* --- Cards (§10) ------------------------------------ */
    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        padding: var(--space-5);
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }
    @media (min-width: 1024px) { .card { padding: var(--space-6); } }

    .card--featured { border-color: var(--dark-border); }

    .card__title { font-size: var(--text-h3); }
    .card__text { color: var(--text-muted); }
    .card__foot { margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }

    .card__list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
    .card__list li { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--text-small); color: var(--text-muted); }

    .price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
    .price__prefix { font-size: var(--text-small); color: var(--text-muted); }
    .price__value { font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }

    /* Celá karta ako odkaz: jeden <a> v nadpise, hit area cez ::after */
    .card--link .card__link { color: inherit; text-decoration: none; }
    .card--link .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
    .card--link { transition: border-color var(--dur-instant) var(--ease-standard); }
    .card--link:hover { border-color: var(--border-strong); }
    .card--link:hover .card__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
    .card--link:has(.card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
    .card--link .card__link:focus-visible { outline: none; }

    /* Riadok (vstupný bod pre existujúce riešenie) */
    .row-cta {
        display: grid; gap: var(--space-4); align-items: center;
        padding: var(--space-5);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }
    * + .row-cta { margin-top: var(--space-5); }
    .vat-note { margin-top: var(--space-4); }
    .row-cta p { color: var(--text-muted); }
    .row-cta strong { color: var(--text); }
    @media (min-width: 1024px) {
        .row-cta { grid-template-columns: 1fr auto; gap: var(--space-7); padding: var(--space-5) var(--space-6); }
    }

    /* --- Spec panel (§10.1) ----------------------------- */
    .spec {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    .spec__head {
        display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
        padding: 14px var(--space-5);
        border-bottom: 1px solid var(--border);
    }
    .spec__title { font-size: var(--text-small); font-weight: 600; }
    .spec__rows { display: flex; flex-direction: column; }
    .spec__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-1) var(--space-4);
        align-items: center;
        padding: 14px var(--space-5);
        border-bottom: 1px solid var(--border);
    }
    .spec__row:last-child { border-bottom: 0; }
    .spec__label { font-size: var(--text-small); font-weight: 500; }
    .spec__value { grid-column: 1; font-size: var(--text-small); color: var(--text-muted); }
    .spec__row .tag { grid-column: 2; grid-row: 1 / span 2; }
    .spec__foot {
        padding: 12px var(--space-5);
        background: var(--sunken);
        border-top: 1px solid var(--border);
    }

    /* --- Forms (§11) ------------------------------------ */
    .field { display: flex; flex-direction: column; gap: var(--space-2); }
    .field__label { font-size: var(--text-small); font-weight: 500; color: var(--text); }
    .field__optional { font-weight: 400; color: var(--text-subtle); }
    .field__hint { font-size: var(--text-small); color: var(--text-subtle); }
    .field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-small); color: var(--danger); }

    .input {
        width: 100%;
        min-height: 48px;
        padding: 12px 14px;
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        font-size: 1rem;
        line-height: 1.4;
        transition: border-color var(--dur-instant) var(--ease-standard);
    }
    .input::placeholder { color: var(--text-subtle); opacity: 1; }
    .input:hover { border-color: var(--text-muted); }
    .input:focus-visible { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
    .input[aria-invalid="true"] { border-color: var(--danger); }
    .input:disabled { background: var(--sunken); color: var(--text-subtle); }
    textarea.input { min-height: 128px; resize: vertical; }
    select.input {
        appearance: none;
        padding-right: 40px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236E6780' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
    }

    /* Radio karty (voľba zámeru) */
    .choices { display: grid; gap: var(--space-3); border: 0; padding: 0; margin: 0; }
    .choices legend { padding: 0; margin-bottom: var(--space-2); }
    @media (min-width: 480px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .choice {
        position: relative;
        display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3);
        padding: 14px var(--space-4);
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: border-color var(--dur-instant) var(--ease-standard), background-color var(--dur-instant) var(--ease-standard);
    }
    .choice:hover { border-color: var(--text-muted); }
    .choice input { grid-row: 1 / span 2; margin: 3px 0 0; accent-color: var(--color-primary); width: 16px; height: 16px; }
    .choice__title { font-size: var(--text-small); font-weight: 600; }
    .choice__desc { grid-column: 2; font-size: var(--text-small); color: var(--text-muted); }
    .choice:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background: var(--color-primary-soft); }
    .choice:has(input:checked) .choice__title { color: var(--color-primary-active); }
    .choice:has(input:checked) .choice__desc { color: var(--light-text-muted); }
    .choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
    .choice input:focus-visible { outline: none; }

    .form-alert {
        padding: var(--space-4);
        border: 1px solid var(--danger);
        border-left-width: 4px;
        border-radius: var(--radius-sm);
        background: var(--surface);
        font-size: var(--text-small);
    }

    /* --- Header (§12) ----------------------------------- */
    .site-header {
        position: sticky; top: 0; z-index: 100;
        background: var(--bg);
        color: var(--text);
        border-bottom: 1px solid transparent;
    }
    .site-header.is-scrolled { border-bottom-color: var(--border); }
    .site-header__inner { display: flex; align-items: center; gap: var(--space-6); height: var(--header-h); }
    .logo { display: block; flex-shrink: 0; }
    .logo img { width: auto; height: 24px; }
    @media (min-width: 1024px) { .logo img { height: 28px; } }

    .nav { display: none; }
    .nav__list { display: flex; align-items: center; gap: var(--space-1); }
    .nav__link {
        display: inline-flex; align-items: center; gap: 6px;
        min-height: 40px; padding: 0 12px;
        background: none; border: 0;
        color: var(--text-muted);
        font-size: 0.9375rem; font-weight: 500;
        text-decoration: none;
        position: relative;
    }
    .nav__link:hover { color: var(--text); text-decoration: none; }
    .nav__link[aria-current="page"] { color: var(--text); }
    .nav__link[aria-current="page"]::after {
        content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px;
        background: var(--link);
    }
    .nav__caret { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease-standard); }
    [aria-expanded="true"] > .nav__caret { transform: rotate(180deg); }

    .site-header__actions { display: none; align-items: center; gap: var(--space-2); margin-left: auto; }
    .menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin-left: auto; margin-right: -10px;
        background: none; border: 0; color: var(--text);
    }
    @media (min-width: 1024px) {
        .nav { display: block; }
        .site-header__actions { display: flex; }
        .menu-toggle { display: none; }
    }

    /* --- Dropdown Služby (§12.2) ----------------------- */
    .nav__item { position: relative; }
    .nav__link.is-active { color: var(--text); }
    .dropdown {
        position: absolute; top: calc(100% + 12px); left: -8px; z-index: 10;
        width: min(440px, calc(100vw - 2 * var(--gutter)));
        padding: var(--space-3);
        background: var(--light-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-overlay);
    }
    .site-header--dark .dropdown { background: var(--dark-elevated); box-shadow: none; }
    .dropdown[hidden] { display: none; }
    .dropdown__grid { display: grid; gap: var(--space-1); }
    .dropdown__item {
        display: flex; flex-direction: column; gap: 2px;
        height: 100%;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        color: var(--text); text-decoration: none;
        transition: background-color var(--dur-instant) var(--ease-standard);
    }
    .dropdown__item:hover { background: var(--sunken); color: var(--text); text-decoration: none; }
    .site-header--dark .dropdown__item:hover { background: var(--dark-surface); }
    .dropdown__item[aria-current="page"] { background: var(--sunken); }
    .dropdown__title { font-size: 0.9375rem; font-weight: 600; }
    .dropdown__desc { font-size: var(--text-small); color: var(--text-muted); line-height: 1.45; }
    .dropdown__item .meta { margin-top: var(--space-2); }
    .dropdown__foot { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-1); border-top: 1px solid var(--border); }
    .dropdown__foot p a { color: var(--text); }

    /* --- Mobilné menu (§12.3) --------------------------- */
    .mobile-menu {
        position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
        display: flex; flex-direction: column;
        background: var(--bg);
        border-top: 1px solid var(--border);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .mobile-menu[hidden] { display: none; }
    .mobile-menu__nav { flex: 1; padding-block: var(--space-3); }
    .mobile-menu__list > li { border-bottom: 1px solid var(--border); }
    .mobile-menu__link {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        min-height: 56px; padding: 0;
        background: none; border: 0;
        color: var(--text); font-size: 1.125rem; font-weight: 500; text-align: left;
        text-decoration: none;
    }
    .mobile-menu__link:hover { color: var(--text); text-decoration: none; }
    .mobile-menu__link[aria-current="page"] { color: var(--link); }
    .mobile-menu__sub { padding: 0 0 var(--space-4); }
    .mobile-menu__sub[hidden] { display: none; }
    .mobile-menu__sub a {
        display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline;
        padding: 10px 0;
        color: var(--text-muted); text-decoration: none;
    }
    .mobile-menu__sub a:hover { color: var(--text); }
    .mobile-menu__sub .meta { white-space: nowrap; }
    .mobile-menu__cta {
        position: sticky; bottom: 0;
        padding-block: var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
        background: var(--bg);
        border-top: 1px solid var(--border);
    }
    .mobile-menu__cta .btn { width: 100%; }
    @media (min-width: 1024px) { .mobile-menu { display: none !important; } }
    .menu-open { overflow: hidden; }

    /* --- Footer (§12.5) --------------------------------- */
    .site-footer { background: var(--bg); color: var(--text); padding-block: var(--space-8) var(--space-6); border-top: 1px solid var(--border); }
    .site-footer__grid { display: grid; gap: var(--space-7) var(--space-6); }
    .site-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 34ch; }
    .site-footer__brand p { color: var(--text-muted); font-size: var(--text-small); }
    .site-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
    .site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; list-style: none; }
    .site-footer a:not(.logo) { color: var(--text-muted); text-decoration: none; font-size: var(--text-small); }
    .site-footer a:not(.logo):hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
    .site-footer__contact { display: flex; flex-direction: column; gap: var(--space-1); }
    .site-footer__bottom {
        display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
        margin-top: var(--space-8); padding-top: var(--space-5);
        border-top: 1px solid var(--border);
        font-size: var(--text-small); color: var(--text-subtle);
    }
    @media (min-width: 640px) {
        .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .site-footer__brand { grid-column: 1 / -1; }
    }
    @media (min-width: 1024px) {
        .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
        .site-footer__brand { grid-column: auto; }
    }

    /* --- Hero (§13) ------------------------------------- */
    .hero { padding-block: var(--hero-y); }
    .hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
    .hero__copy .display { margin-top: var(--space-1); }
    .hero__support { color: var(--text-muted); max-width: 56ch; }
    .hero__copy .btn-row { margin-top: var(--space-3); }

    /* --- Hero homepage ----------------------------------
       Jeden editoriálny stĺpec (bez pravého panelu) nad aurora pozadím.
       Pozadie je čisto CSS: tri radiálne plochy + závoj pre čitateľnosť. */
    .hero--home {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        overflow: clip;
        padding-block: var(--hero-y-home);
    }
    .hero--home > .container { position: relative; z-index: 1; }
    .hero--home .hero__copy { gap: var(--space-5); max-width: 40rem; }

    .hero__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        isolation: isolate;
        pointer-events: none;
    }
    /* Závoj: hore a vľavo plné plátno kvôli švíku pod hlavičkou a kontrastu textu,
       dole prechod do ďalšieho pásma. */
    .hero__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(104deg, var(--dark-canvas) 4%, rgb(16 12 26 / .86) 34%, rgb(16 12 26 / .52) 60%, rgb(16 12 26 / .16) 80%, rgb(16 12 26 / 0) 94%),
            linear-gradient(to bottom, var(--dark-canvas) 0%, rgb(16 12 26 / 0) 22%, rgb(16 12 26 / 0) 56%, var(--dark-canvas) 100%);
    }
    .hero__glow {
        position: absolute;
        display: block;
        border-radius: 50%;
        mix-blend-mode: screen;
    }
    /* Dominantná fialová plocha v pravom hornom rohu */
    .hero__glow--a {
        top: -34%; right: -22%;
        width: min(1120px, 88vw); aspect-ratio: 1.15;
        background: radial-gradient(closest-side, rgb(118 96 255 / .72), rgb(83 58 253 / .30) 44%, rgb(83 58 253 / 0) 76%);
    }
    /* Šikmý svetelný pruh – cyan, drží efekt „flowing light“ a nie „tri gule“ */
    .hero__glow--b {
        top: -6%; right: -26%;
        width: min(1040px, 86vw); aspect-ratio: 2.3;
        background: radial-gradient(closest-side, rgb(78 196 255 / .42), rgb(78 196 255 / .12) 50%, rgb(78 196 255 / 0) 78%);
        transform: rotate(-24deg);
    }
    /* Hlboká indigová hĺbka za nadpisom */
    .hero__glow--c {
        top: -30%; left: 0;
        width: min(820px, 78vw); aspect-ratio: 1.5;
        background: radial-gradient(closest-side, rgb(83 58 253 / .26), rgb(83 58 253 / 0) 72%);
    }

    /* WebGL gradientové pozadie (assets/js/hero-shader.js).
       Vypĺňa celé hero, leží nad aurorou a pod čitateľnostným závojom.
       Canvas vytvára JS – bez JS a bez WebGL zostáva samotná aurora. */
    .hero__shader {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1.2s var(--ease-standard);
    }
    .hero__shader.is-ready { opacity: 1; }
    .hero__shader canvas { display: block; width: 100%; height: 100%; }

    /* Maska nad shaderom: drží ťažisko efektu v pravej časti hero a chráni
       kontrast textu. Hodnoty sú namerané, nie odhadnuté – pozri
       docs/REDESIGN-STATUS.md. Na auroru sa nevzťahuje. */
    .hero__shader::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(104deg,
            rgb(16 12 26 / .88) 0%,
            rgb(16 12 26 / .60) 38%,
            rgb(16 12 26 / .18) 76%,
            rgb(16 12 26 / 0) 100%);
    }
    /* 640–1279 px: hero text je najširší voči viewportu a závoj má v strede
       priehľadné okno, preto shader dostane navyše vodorovný stmavujúci pás.
       Bez neho klesal kontrast drobného textu na 4,8 : 1. */
    @media (min-width: 640px) and (max-width: 1279px) {
        .hero__shader::after {
            background:
                linear-gradient(104deg, rgb(16 12 26 / .88) 0%, rgb(16 12 26 / .60) 38%, rgb(16 12 26 / .18) 76%, rgb(16 12 26 / 0) 100%),
                linear-gradient(to bottom, rgb(16 12 26 / 0) 0%, rgb(16 12 26 / .48) 28%, rgb(16 12 26 / .48) 74%, rgb(16 12 26 / 0) 100%);
        }
    }

    /* Keď shader beží, aurora sa skryje – inak by sa gradienty zdvojovali. */
    .hero--home.has-shader .hero__glow {
        animation: none;
        opacity: 0;
        transition: opacity 1.2s var(--ease-standard);
    }
    @media (prefers-reduced-motion: reduce) {
        .hero__shader,
        .hero--home.has-shader .hero__glow { transition: none; }
    }

    /* Pohyb len cez transform/opacity → bez layout shiftu a bez prekresľovania. */
    @media (prefers-reduced-motion: no-preference) {
        .hero__glow--a { animation: hero-drift-a 38s var(--ease-standard) infinite alternate; }
        .hero__glow--b { animation: hero-drift-b 52s var(--ease-standard) infinite alternate; }
        .hero__glow--c { animation: hero-drift-c 64s var(--ease-standard) infinite alternate; }
    }
    @keyframes hero-drift-a {
        from { transform: translate3d(0, 0, 0) scale(1); }
        to   { transform: translate3d(-5%, 6%, 0) scale(1.12); }
    }
    @keyframes hero-drift-b {
        from { transform: translate3d(0, 0, 0) rotate(-24deg) scale(1.06); }
        to   { transform: translate3d(-7%, -6%, 0) rotate(-16deg) scale(0.92); }
    }
    @keyframes hero-drift-c {
        from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
        to   { transform: translate3d(6%, 4%, 0) scale(1.1); opacity: 1; }
    }

    /* Rotácia nadpisu (assets/js/hero-title.js). Vrstvy ležia na sebe, výšku
       rezervuje JS podľa najvyššieho variantu, takže prepis neposunie layout.
       Bez JS sa nič z tohto neuplatní – v H1 zostane obyčajný text. */
    .hero__title-stage { position: relative; display: block; }
    /* Vrstvy sú vycentrované v rezervovanej výške. Kratší variant tak nenechá
       celú medzeru pod sebou, ale rozdelí ju nad a pod nadpis. */
    .hero__title-layer {
        display: block;
        position: absolute;
        left: 0; right: 0; top: 50%;
        transform: translateY(-50%);
    }
    .hero__title-layer.is-measuring { visibility: hidden; }
    .hero__word {
        display: inline-block;
        will-change: transform, opacity;
    }

    .hero__lead {
        font-size: var(--text-hero-lead);
        line-height: 1.4;
        letter-spacing: -0.015em;
        color: var(--text);
        max-width: 40ch;
    }
    .hero--home .hero__support { font-size: var(--text-body-lg); line-height: 1.7; max-width: 62ch; }
    .hero__claim {
        position: relative;
        padding-left: var(--space-4);
        margin-top: var(--space-1);
        font-size: var(--text-body-lg);
        font-weight: 500;
        line-height: 1.5;
        color: var(--text);
        max-width: 44ch;
    }
    .hero__claim::before {
        content: "";
        position: absolute;
        left: 0; top: 0.2em; bottom: 0.2em;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(to bottom, var(--color-primary-on-dark), rgb(165 150 255 / 0));
    }

    @media (min-width: 640px) {
        .hero--home .hero__copy { max-width: 46rem; }
        .hero__claim { padding-left: var(--space-5); }
    }
    @media (min-width: 1024px) {
        .hero--home .hero__copy { max-width: min(74%, 56rem); }
        .hero__lead { max-width: 44ch; }
    }

    /* Tablet a nižšie: efekt je menší a drží sa pri pravom hornom rohu. */
    @media (max-width: 1023px) {
        .hero__glow--a { top: -22%; right: -26%; width: min(760px, 108vw); }
        .hero__glow--b { top: 0; right: -34%; width: min(520px, 76vw); }
        .hero__glow--c { opacity: .6; }
        .hero__bg::after {
            background:
                linear-gradient(118deg, var(--dark-canvas) 12%, rgb(16 12 26 / .80) 52%, rgb(16 12 26 / .34) 82%),
                linear-gradient(to bottom, var(--dark-canvas) 0%, rgb(16 12 26 / 0) 20%, rgb(16 12 26 / 0) 60%, var(--dark-canvas) 100%);
        }
    }
    /* Mobil: jedna statická plocha, žiadna animácia. */
    @media (max-width: 639px) {
        .hero__shader::after {
            background: linear-gradient(104deg,
                rgb(16 12 26 / .80) 0%,
                rgb(16 12 26 / .52) 40%,
                rgb(16 12 26 / .20) 76%,
                rgb(16 12 26 / 0) 100%);
        }
        .hero__glow--a { top: -12%; right: -34%; width: 132vw; animation: none; }
        .hero__glow--b { width: 86vw; right: -40%; top: 2%; opacity: .7; animation: none; }
        .hero__glow--c { display: none; }
        .hero__bg::after {
            background:
                linear-gradient(to bottom, rgb(16 12 26 / .35) 0%, rgb(16 12 26 / .78) 46%, var(--dark-canvas) 96%);
        }
    }
    .proof {
        display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
        padding-top: var(--space-5);
        border-top: 1px solid var(--border);
        font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }
    .proof li + li::before { content: "·"; margin-right: var(--space-4); color: var(--text-subtle); }
    @media (max-width: 639px) {
        .proof { flex-direction: column; }
        .proof li + li::before { content: none; }
    }

    /* --- Referencie ------------------------------------ */
    .project__media {
        /* Screenshoty sú výrezy okna prehliadača, preto 16:9 – nič sa neoreže */
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: var(--sunken);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
    }
    .project__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .project__media .spec { height: 100%; border: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
    .project__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }


    /* --- Portfólio (squeeze carousel, iba homepage) ------
       Hlavička sekcie je štandardná `.section-head`. Z referencie
       (stripe.com → „What's happening“) je prevzatá iba kompozícia radu:
       jeden otvorený panel, kaskáda zmenšujúcich sa rámov a pod ňou blok
       textu so šírkou otvoreného panela.

       Ten istý markup má dve podoby:
       a) základná – scroll-snap carousel kariet (mobil a stav bez JS),
       b) `.folio--squeeze` – squeeze rad; zapína ho assets/js/folio.js
          od 640 px vyššie. Šírky a medzery počíta skript v px. */
    .folio-head {
        display: flex; align-items: flex-end; justify-content: space-between;
        gap: var(--space-5) var(--space-8);
        margin-bottom: var(--space-6);
    }
    .folio-head .section-head { margin-bottom: 0; }
    .folio-nav { display: flex; gap: var(--space-2); flex-shrink: 0; padding-bottom: 4px; }
    .folio-nav__btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        background: var(--color-primary-soft); color: var(--color-primary);
        border: 1px solid transparent; border-radius: var(--radius-xs);
        transition: background-color var(--dur-instant) var(--ease-standard),
                    color var(--dur-instant) var(--ease-standard);
    }
    .folio-nav__btn:hover { background: var(--color-primary); color: #FFFFFF; }
    .folio-nav__btn:active { background: var(--color-primary-active); color: #FFFFFF; }

    .folio__track {
        display: flex;
        gap: var(--space-4);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
    }
    .folio__item {
        /* 100 % = content box radu (bez gutterov), 16 px necháva náhľad ďalšej karty.
           Strop 34rem drží kartu čitateľnú aj v stave bez JS na širokej ploche. */
        flex: 0 0 min(100% - var(--space-4), 34rem);
        display: flex; flex-direction: column;
        scroll-snap-align: start;
    }
    /* Kópie radu existujú iba kvôli prstencovej rotácii v squeeze podobe. */
    .folio__item--clone { display: none; }
    .folio__media {
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--sunken);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }
    .folio__media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
    .folio__copy {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: var(--space-5);
        margin-top: var(--space-5);
    }
    .folio__text { font-size: var(--text-h3); line-height: 1.35; letter-spacing: -0.015em; color: var(--text-muted); }
    .folio__text h3 { display: inline; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--text); }
    .folio__text p { display: inline; }
    .folio__more { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); }

    @media (min-width: 640px) {
        /* Rad má pomer 1232 : 460 ako referencia a minimálnu šírku 870 px.
           Na užších plochách preto presahuje kontajner doprava – rovnako ako
           referencia. Sekcia presah oreže, takže stránka nepretečie vodorovne. */
        .folio-band { overflow-x: clip; }

        .folio--squeeze .folio__track {
            position: relative;
            display: block;
            min-width: 870px;
            aspect-ratio: 1232 / 460;
            margin-inline: 0; padding-inline: 0;
            overflow: visible;
            scroll-snap-type: none;
        }
        /* Rámy sú absolútne: posúvajú sa cez `transform` (beží na kompozitore)
           a mení sa im iba vlastná šírka. `contain: layout` drží prepočet vnútri
           rámu, takže zmena jedného rámu nepreskladá celý rad. */
        .folio--squeeze .folio__item,
        .folio--squeeze .folio__item--clone {
            display: block;
            position: absolute; top: 0; left: 0;
            height: 100%;
            contain: layout;
            scroll-snap-align: none;
            transition: width var(--folio-dur, 760ms) var(--ease-standard),
                        transform var(--folio-dur, 760ms) var(--ease-standard);
        }
        .folio--squeeze .folio__media {
            position: relative;
            aspect-ratio: auto; height: 100%; width: 100%;
            contain: paint;
            cursor: pointer;
        }
        /* Obrázok má konštantnú šírku otvoreného panela, je ukotvený vľavo hore
           a rám z neho ukazuje výsek. Počas prechodu sa tak nič neprevzorkúva
           ani neposúva – mení sa iba orez. Žiadny filter ani tieň, ktorý by
           vynucoval prekreslenie každú snímku. */
        .folio--squeeze .folio__media img {
            position: absolute; top: 0; left: 0;
            width: var(--folio-open-w, 100%); height: 100%;
            max-width: none;
            object-position: top left;
        }
        .folio--squeeze .folio__media:focus-visible { outline-offset: 3px; border-radius: var(--radius-sm); }
        .folio--squeeze [data-folio-active] .folio__media { cursor: default; }

        /* Hover: pružné natiahnutie rámu (šírky dopočítava skript). */
        .folio--hover .folio__item,
        .folio--hover .folio__item--clone {
            transition-duration: 560ms;
            transition-timing-function: cubic-bezier(0.22, 1.2, 0.36, 1);
        }
        /* Tiché preskupenie prstenca: rovnaký obraz, iné uzly. */
        .folio--instant .folio__item,
        .folio--instant .folio__item--clone,
        .folio--instant .folio__text { transition: none !important; }

        /* Text má šírku otvoreného panela, tlačidlo zostáva zarovnané na
           koniec radu. Texty všetkých projektov ležia v jednej bunke gridu,
           takže výška je daná najvyšším z nich a prepnutie nehýbe stránkou. */
        .folio--squeeze .folio__details { display: grid; margin-top: var(--space-6); }
        .folio--squeeze .folio__text {
            width: var(--folio-active-w, 100%); max-width: 100%;
            transition: width var(--folio-dur, 760ms) var(--ease-standard);
        }
        .folio--squeeze .folio__copy {
            grid-area: 1 / 1;
            display: grid; grid-template-columns: minmax(0, 1fr);
            align-items: start; gap: var(--space-6);
            justify-items: start;
            margin-top: 0;
            opacity: 0; visibility: hidden;
            transition: opacity var(--dur-fast) var(--ease-standard),
                        visibility 0s linear var(--dur-fast);
        }
        .folio--squeeze .folio__copy.is-active {
            opacity: 1; visibility: visible;
            transition: opacity var(--dur-fast) var(--ease-standard), visibility 0s;
        }
    }
    @media (min-width: 1024px) {
        .folio--squeeze .folio__copy { grid-template-columns: minmax(0, 1fr) auto; }
        .folio--squeeze .folio__copy .btn { justify-self: end; }
        .folio--squeeze .folio__copy .folio__text { grid-column: 1; }
    }

    /* --- Rozhodovacia os (docs/MESSAGING.md §5) ---------
       Biznis cieľ → Zákazník → Proces → UX → Technológia → Dodanie.
       Používa homepage aj stránky služieb (partials/decision-chain.php). */
    .chain__seq {
        display: flex; flex-wrap: wrap; align-items: baseline;
        gap: var(--space-2) var(--space-3);
        margin-bottom: var(--space-6);
        padding-bottom: var(--space-5);
        border-bottom: 1px solid var(--border);
        font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.015em;
    }
    .chain__seq li { display: flex; align-items: baseline; gap: var(--space-3); }
    .chain__seq li + li::before {
        content: "\2192"; font-weight: 400; color: var(--text-subtle);
    }

    .chain__list { display: flex; flex-direction: column; }
    .chain__item {
        display: grid; grid-template-columns: 3ch minmax(0, 1fr);
        gap: var(--space-1) var(--space-4);
        padding: var(--space-4) 0;
        border-bottom: 1px solid var(--border);
    }
    .chain__item .meta { grid-row: 1 / span 2; margin-bottom: 0; padding-top: 3px; }
    .chain__name { font-size: var(--text-body-lg); font-weight: 600; letter-spacing: -0.01em; }
    .chain__q { color: var(--text-muted); max-width: 72ch; }
    @media (min-width: 1024px) {
        .chain__item {
            grid-template-columns: 3ch minmax(0, 15ch) minmax(0, 1fr);
            align-items: baseline;
            gap: var(--space-6);
            padding: var(--space-5) 0;
        }
        .chain__item .meta { grid-row: auto; padding-top: 0; }
    }

    .chain__note { margin-top: var(--space-7); display: grid; gap: var(--space-5); align-items: start; }
    .chain__note p { font-size: var(--text-lead); line-height: 1.5; color: var(--text); max-width: 48ch; }
    .chain__note .chain__origin { font-size: var(--text-body-lg); line-height: 1.7; color: var(--text-muted); max-width: 64ch; }
    @media (min-width: 1024px) { .chain__note { grid-template-columns: 7fr 5fr; gap: var(--space-8); } }

    /* --- Postup ------------------------------------------ */
    .steps { display: grid; gap: var(--space-6); counter-reset: step; }
    @media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .step { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--text); }
    .step p { color: var(--text-muted); font-size: 0.9375rem; }
    .values { display: grid; gap: var(--space-5) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); }
    @media (min-width: 640px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .values li { display: flex; flex-direction: column; gap: var(--space-2); }
    .values p { color: var(--text-muted); font-size: 0.9375rem; }

    /* --- Technologické vrstvy ---------------------------- */
    .layers { border-top: 1px solid var(--border); }
    .layer { display: grid; gap: var(--space-3) var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--border); }
    .layer .meta { margin-top: var(--space-1); }
    .layer__body p { color: var(--text-muted); }
    @media (min-width: 1024px) { .layer { grid-template-columns: 4fr 8fr; } }

    /* --- Situácie zákazníka (homepage, priamo pod hero) ---
       Štyri plochy oddelené vlasovými linkami do kríža, bez kariet a ikon.
       Význam nesú nadpisy, preto sú o stupeň väčšie než .card__title. */
    .scenarios { display: grid; border-top: 1px solid var(--border); }
    .scenario {
        position: relative;
        isolation: isolate;
        display: grid;
        gap: var(--space-2);
        align-content: start;
        padding-block: var(--space-6);
        border-bottom: 1px solid var(--border);

        /* Statická aurora: tlmený odraz svetla na bielom povrchu.
           Jedna receptúra, štyri polohy. Svetlo sa zbiera pri vodorovných
           dolnej časti poľa a vodorovne dohorí ešte pred zvislými hranami,
           takže nikde nevznikne viditeľný obdĺžnikový zlom. Ťažisko je
           posunuté dovnútra poľa, aby vlasová linka pod ním nezostala
           v najsvetlejšom mieste a nestratila sa. Text zostáva na takmer
           čistej bielej.
           Farby sú brandové: primary #533AFD a jej svetlá poloha
           #A596FF (`--color-primary-on-dark`). Rovnaký zápis ako svetelná
           plocha na `.band--violet`.
           Je to background-image priamo na poli – bez pseudo-elementu,
           takže nemôže pretiecť ani prekryť vlasové linky mriežky. */
        background-image:
            radial-gradient(var(--aurora-size) at var(--aurora-pos),
                rgb(83 58 253 / .10) 0%,
                rgb(83 58 253 / .05) 34%,
                rgb(83 58 253 / 0) 70%),
            radial-gradient(var(--aurora-far-size) at var(--aurora-far-pos),
                rgb(165 150 255 / .09) 0%,
                rgb(165 150 255 / 0) 62%);
        background-repeat: no-repeat;
    }

    /* Rytmus štyroch polôh: spodná plocha svetla sa strieda vľavo a vpravo,
       horný závan vždy na opačnej strane. Štvorica tak drží jeden princíp,
       ale žiadne dve polia nie sú rovnaké. */
    .scenario:nth-child(1) {
        --aurora-size: 56% 62%;      --aurora-pos: 34% 88%;
        --aurora-far-size: 40% 58%;  --aurora-far-pos: 72% -10%;
    }
    .scenario:nth-child(2) {
        --aurora-size: 60% 58%;      --aurora-pos: 64% 90%;
        --aurora-far-size: 38% 56%;  --aurora-far-pos: 26% -8%;
    }
    .scenario:nth-child(3) {
        --aurora-size: 52% 66%;      --aurora-pos: 26% 86%;
        --aurora-far-size: 42% 60%;  --aurora-far-pos: 76% -6%;
    }
    .scenario:nth-child(4) {
        --aurora-size: 58% 60%;      --aurora-pos: 70% 89%;
        --aurora-far-size: 36% 54%;  --aurora-far-pos: 22% -10%;
    }

    /* Hover: druhé svetlo sa rozvinie od stredu do plnej šírky poľa.
       Je to vrstva pod obsahom (`z-index: -1` vo vlastnom stacking
       kontexte), takže nikdy neprekryje text ani vlasové linky.
       Pás dohorí ešte nad spodnou hranou – keby mal ťažisko priamo na nej,
       prekryl by vlasovú linku svojou svetlosťou a linka by zmizla.
       Animuje sa výhradne `transform` a `opacity` – rovnaké pravidlo ako
       v hero. Polia nie sú odkazy, preto efekt nemení kurzor, typografiu
       ani rám: je to odozva plochy, nie prísľub kliknutia. */
    .scenario::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: radial-gradient(82% 46% at 50% 74%,
            rgb(83 58 253 / .15) 0%,
            rgb(83 58 253 / .06) 34%,
            rgb(83 58 253 / 0) 72%);
        opacity: 0;
        transform: scale(.18, .9);
        transform-origin: 50% 100%;
        transition: opacity var(--dur-slow) var(--ease-standard),
                    transform var(--dur-slow) var(--ease-standard);
    }

    @media (hover: hover) and (pointer: fine) {
        .scenario:hover::after { opacity: 1; transform: scale(1, 1); }
        /* Odchod je rýchlejší než nástup, aby kurzor neťahal za sebou stopu. */
        .scenario::after { transition-duration: var(--dur-base); }
        .scenario:hover::after { transition-duration: var(--dur-slow); }
    }

    /* Vo vynútených farbách je aurora iba šum – systém si plochu kreslí sám. */
    @media (forced-colors: active) {
        .scenario { background-image: none; }
        .scenario::after { display: none; }
    }

    .scenario__title {
        font-size: clamp(1.25rem, 1.06rem + 0.8vw, 1.75rem);
        line-height: 1.2;
        letter-spacing: -0.02em;
        margin-top: var(--space-1);
    }
    .scenario__text { color: var(--text-muted); max-width: 48ch; }

    @media (max-width: 767px) {
        /* Jeden stĺpec: bloky sú široké a nízke, svetlo preto potrebuje
           vyšší a užší tvar, aby nezaplavilo celý blok. Vodorovné dohorenie
           pred zvislými hranami platí rovnako. */
        .scenario:nth-child(odd) {
            --aurora-size: 46% 86%;      --aurora-pos: 66% 88%;
            --aurora-far-size: 34% 78%;  --aurora-far-pos: 20% -12%;
        }
        .scenario:nth-child(even) {
            --aurora-size: 44% 82%;      --aurora-pos: 30% 90%;
            --aurora-far-size: 32% 74%;  --aurora-far-pos: 74% -10%;
        }
    }

    @media (min-width: 768px) {
        /* 2 × 2: zvislá vlasová linka je border-left pravého stĺpca,
           vodorovná je border-bottom všetkých štyroch plôch. */
        .scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .scenario { padding: var(--space-6) var(--space-6) var(--space-6) 0; }
        .scenario:nth-child(even) {
            padding-inline: var(--space-6) 0;
            border-left: 1px solid var(--border);
        }
    }
    @media (min-width: 1024px) {
        .scenario { padding: var(--space-8) var(--space-8) var(--space-8) 0; }
        .scenario:nth-child(even) { padding-inline: var(--space-8) 0; }
    }

    .scenarios__cta { margin-top: var(--space-7); }

    /* --- Stránky služieb (docs/INFORMATION-ARCHITECTURE.md §5)
       Spoločné komponenty pre /tvorba-webu, /tvorba-eshopu, /vyvoj-na-mieru. */

    /* Breadcrumb */
    .breadcrumb { display: flex; flex-wrap: wrap; font-size: var(--text-small); }
    .breadcrumb li { display: flex; align-items: baseline; }
    .breadcrumb li + li::before { content: "/"; margin-inline: var(--space-2); color: var(--text-subtle); }
    .breadcrumb a { color: var(--text-muted); text-decoration: none; }
    .breadcrumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
    .breadcrumb [aria-current="page"] { color: var(--text-subtle); }

    /* Hero stránky služby: jeden stĺpec, bez ukážkového panelu */
    .hero--page .hero__copy { max-width: 860px; }
    .hero__price {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
        padding-top: var(--space-5); border-top: 1px solid var(--border);
    }
    .hero__price .meta { margin-bottom: 0; }
    .hero__price .price__value { font-size: var(--text-h3); }

    /* Pre koho a kedy: situácia klienta + odpoveď */
    .situations { border-top: 1px solid var(--border); }
    .situations > li {
        display: grid; gap: var(--space-3) var(--space-7);
        padding-block: var(--space-6);
        border-bottom: 1px solid var(--border);
    }
    .situations__case { font-size: var(--text-lead); line-height: 1.45; color: var(--text); max-width: 34ch; }
    .situations__answer { color: var(--text-muted); max-width: 58ch; }
    @media (min-width: 1024px) { .situations > li { grid-template-columns: 5fr 7fr; align-items: start; } }

    /* Čo dodávame: editoriálne bloky, nie zoznam funkcií */
    .brief { display: grid; gap: var(--space-6); }
    .brief__aside { display: flex; flex-direction: column; gap: var(--space-4); }
    .brief__aside p { color: var(--text-muted); font-size: var(--text-small); max-width: 40ch; }
    .brief__group { padding-block: var(--space-6); border-top: 1px solid var(--border); }
    .brief__group:first-child { padding-top: 0; border-top: 0; }
    .brief__group:last-child { padding-bottom: 0; }
    .brief__group h3 { margin-bottom: var(--space-3); }
    .brief__group p { color: var(--text-muted); max-width: 66ch; }
    .brief__group p + p { margin-top: var(--space-3); }
    .brief__group strong { color: var(--text); }
    @media (min-width: 1024px) {
        .brief { grid-template-columns: 4fr 8fr; gap: var(--space-8); align-items: start; }
        .brief__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
    }

    /* Technológia ako spôsob realizácie: nasleduje po postupe */
    .tech-head { margin-top: var(--space-9); }
    .tech-head + .layers { margin-top: 0; }

    /* FAQ na stránke služby: pod blokom investície */
    .faq-block { margin-top: var(--space-9); }
    .faq-block .section-head { margin-bottom: 0; }

    /* E-commerce: čo vidí zákazník × čo sa musí stať v prevádzke */
    .ledger { border-top: 1px solid var(--border); }
    .ledger > li {
        display: grid; gap: var(--space-4) var(--space-7);
        padding-block: var(--space-5);
        border-bottom: 1px solid var(--border);
    }
    .ledger__stage { font-size: var(--text-body-lg); font-weight: 600; letter-spacing: -0.01em; }
    .ledger__side { display: flex; flex-direction: column; gap: var(--space-1); }
    .ledger__side .meta { margin-bottom: 0; }
    .ledger__side p { color: var(--text-muted); font-size: var(--text-small); max-width: 46ch; }
    .ledger__pair { display: grid; gap: var(--space-4) var(--space-6); }
    @media (min-width: 640px) { .ledger__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) {
        .ledger > li { grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); align-items: start; }
        .ledger__stage { padding-top: 2px; }
        /* Popisky stĺpcov stačia raz, pri prvom riadku. Na mobile ostávajú pri každom. */
        .ledger > li:not(:first-child) .ledger__side .meta { display: none; }
    }

    /* Vývoj na mieru: schopnosti ako editoriálny dvojstĺpec, nie mriežka kariet */
    .spread__item { padding-block: var(--space-5); border-top: 1px solid var(--border); break-inside: avoid; }
    .spread__item h3 { margin-bottom: var(--space-2); }
    .spread__item p { color: var(--text-muted); max-width: 52ch; }
    @media (min-width: 768px) { .spread { columns: 2; column-gap: var(--space-8); } }

    /* Formy spolupráce: tri riadky, nie tri balíky. Projekt je hlavný model. */
    .models { border-top: 1px solid var(--border); }
    .models > li {
        display: grid; gap: var(--space-3) var(--space-6);
        padding-block: var(--space-6);
        border-bottom: 1px solid var(--border);
    }
    .model__name { display: flex; flex-direction: column; gap: var(--space-1); }
    .model__name .meta { margin-bottom: 0; }
    .model__text { color: var(--text-muted); max-width: 54ch; }
    .model__text + .btn--text { margin-top: var(--space-3); }
    .model__price { display: flex; flex-direction: column; gap: var(--space-1); }
    .model__value { font-size: var(--text-h4); font-weight: 600; font-variant-numeric: tabular-nums; }
    .model--primary .model__value { font-size: var(--text-h3); letter-spacing: -0.015em; }
    .model__price .small { color: var(--text-subtle); }
    @media (min-width: 1024px) {
        .models > li { grid-template-columns: 4fr 5fr 3fr; align-items: start; }
        .model__price { align-items: flex-end; text-align: right; }
    }

    /* Referencia: jeden projekt na šírku pásma */
    .case { display: grid; gap: var(--space-6); align-items: center; }
    .case__body { display: flex; flex-direction: column; gap: var(--space-3); }
    .case__body p { color: var(--text-muted); max-width: 52ch; }
    .case__more { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); display: grid; gap: var(--space-3) var(--space-7); }
    .case__more p { color: var(--text-muted); max-width: 62ch; }
    @media (min-width: 1024px) {
        .case { grid-template-columns: 7fr 5fr; gap: var(--space-8); }
        .case--reverse { grid-template-columns: 5fr 7fr; }
        .case--reverse .project__media { order: 2; }
        .case__more { grid-template-columns: 5fr 7fr; align-items: start; }
    }

    /* Investícia: cena „od“ a čo ju ovplyvňuje */
    .invest { display: grid; gap: var(--space-6); align-items: start; }
    .invest__price { display: flex; flex-direction: column; gap: var(--space-2); }
    .invest__value { font-size: var(--text-h2); font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
    .invest__price p { color: var(--text-muted); max-width: 40ch; }
    .invest h2 + .invest__factors { margin-top: var(--space-5); }
    .invest__factors { border-top: 1px solid var(--border); }
    .invest__factors li {
        display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: var(--space-1) var(--space-4);
        padding-block: var(--space-4); border-bottom: 1px solid var(--border);
    }
    .invest__factors .meta { grid-row: 1 / span 2; margin-bottom: 0; padding-top: 3px; }
    .invest__factors strong { display: block; }
    .invest__factors span:last-child { color: var(--text-muted); font-size: var(--text-small); }
    @media (min-width: 1024px) { .invest { grid-template-columns: 5fr 7fr; gap: var(--space-8); } }

    /* --- Rozcestníky (/sluzby, /referencie) --------------
       Hub stránky: svetlá hlavička, editoriálne bloky namiesto mriežky kariet. */

    /* Hlavička rozcestníka */
    .page-head { display: flex; flex-direction: column; gap: var(--space-5); max-width: 820px; }
    .breadcrumb + .page-head { margin-top: var(--space-5); }
    .page-head .lead { max-width: 66ch; }

    /* Tri služby ako široké bloky, nie ako tri rovnaké karty */
    .offer { border-top: 1px solid var(--border); }
    .offer > li {
        display: grid; gap: var(--space-5) var(--space-8);
        padding-block: var(--space-7);
        border-bottom: 1px solid var(--border);
    }
    .offer__index { font-size: var(--text-meta); }
    .offer__name { font-size: var(--text-h3); line-height: 1.18; letter-spacing: -0.02em; margin-block: var(--space-2) var(--space-4); }
    .offer__name a { color: inherit; text-decoration: none; }
    .offer__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
    .offer__text { color: var(--text-muted); max-width: 52ch; }
    .offer__side { display: flex; flex-direction: column; gap: var(--space-4); }
    .offer__price { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--border); }
    .offer__price .price__value { font-size: var(--text-h4); }
    .offer__price .meta { margin-bottom: 0; }
    .offer__scope { display: flex; flex-direction: column; gap: var(--space-2); }
    .offer__scope li { color: var(--text-muted); font-size: var(--text-small); }
    @media (min-width: 1024px) {
        .offer > li { grid-template-columns: 7fr 5fr; align-items: start; }
        .offer__name { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.025em; }
    }

    /* Porovnanie situácií: tri stĺpce bez rámov */
    .compare { display: grid; gap: var(--space-6); }
    .compare__col { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--text); }
    .compare__col h3 { font-size: var(--text-h4); }
    .compare__col h3 a { color: inherit; text-decoration: none; }
    .compare__col h3 a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
    .compare__list { display: flex; flex-direction: column; gap: var(--space-2); }
    .compare__list li { position: relative; padding-left: 1.1em; color: var(--text-muted); font-size: var(--text-small); }
    .compare__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 4px; height: 1px; background: var(--border-strong); }
    @media (min-width: 768px) { .compare { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); } }

    /* Zhrnutie rozhodovacej osi na rozcestníku (bez celého komponentu) */
    .chain__seq--inline { justify-content: center; border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-2); font-size: var(--text-h4); }
    .cta-band .chain__seq--inline { color: var(--text-muted); }

    /* Referencie: veľké striedavé bloky */
    .work { display: flex; flex-direction: column; gap: var(--space-9); }
    .work__item { display: grid; gap: var(--space-5) var(--space-8); align-items: center; }
    .work__body { display: flex; flex-direction: column; gap: var(--space-3); }
    .work__body p { color: var(--text-muted); max-width: 54ch; }
    .work__body h3 { font-size: var(--text-h3); line-height: 1.18; letter-spacing: -0.02em; }
    @media (min-width: 1024px) {
        .work__item { grid-template-columns: 7fr 5fr; gap: var(--space-9); }
        .work__body h3 { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.025em; }
        .work__item--reverse { grid-template-columns: 5fr 7fr; }
        .work__item--reverse .work__media { order: 2; }
    }

    /* --- FAQ ------------------------------------------- */
    .faq { border-top: 1px solid var(--border); }
    .faq details { border-bottom: 1px solid var(--border); }
    .faq summary {
        display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
        min-height: 64px; padding: var(--space-4) 0;
        font-size: var(--text-h4); font-weight: 600; letter-spacing: -0.01em;
        cursor: pointer; list-style: none;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
        content: ""; flex-shrink: 0; width: 12px; height: 12px;
        border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
        transform: translateY(-3px) rotate(45deg);
        transition: transform var(--dur-fast) var(--ease-standard);
    }
    .faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
    .faq details p { padding-bottom: var(--space-5); color: var(--text-muted); max-width: 68ch; }

    /* --- Záverečná CTA ---------------------------------- */
    .cta-band { text-align: center; }
    .cta-band .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
    .cta-band h2 { max-width: 22ch; }
    .cta-band .lead { margin-inline: auto; }
    .cta-band + .site-footer { border-top-color: var(--dark-border); }

    /* --- Lead formulár (§11) ---------------------------- */
    .lead-form { display: flex; flex-direction: column; gap: var(--space-5); }
    .form-row { display: grid; gap: var(--space-5); align-items: start; }
    @media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .lead-form__submit { display: flex; flex-direction: column; gap: var(--space-3); }
    .lead-form__submit .btn { width: 100%; }
    .form-alert ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
    .form-alert a { color: var(--danger); }
    .choices[aria-invalid="true"] .choice { border-color: var(--danger); }
    .choices .field__error { grid-column: 1 / -1; }
    .lead-success { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) 0; }
    .lead-success:focus { outline: none; }

    /* Dialóg: bočný panel na desktope, celá obrazovka na mobile */
    .lead-dialog {
        width: 100%; max-width: 100%; height: 100%; max-height: 100%;
        margin: 0; padding: 0;
        border: 0;
        background: var(--light-canvas);
        color: var(--light-text);
    }
    .lead-dialog::backdrop { background: rgb(16 12 26 / .6); }
    .lead-dialog[open] { display: flex; flex-direction: column; animation: dialog-in var(--dur-slow) var(--ease-standard); }
    @media (min-width: 640px) {
        .lead-dialog { width: 560px; margin-left: auto; border-left: 1px solid var(--light-border); }
    }
    @keyframes dialog-in { from { opacity: 0; transform: translateX(24px); } }
    .lead-dialog__head {
        display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4);
        padding: var(--space-5) var(--space-5) var(--space-4);
        border-bottom: 1px solid var(--border);
    }
    .lead-dialog__head .meta { margin-bottom: var(--space-1); }
    .lead-dialog__close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin: -8px -10px 0 0;
        background: none; border: 0; color: var(--text-muted);
    }
    .lead-dialog__close:hover { color: var(--text); }
    .lead-dialog__body { flex: 1; overflow-y: auto; padding: var(--space-5); overscroll-behavior: contain; }
    @media (min-width: 640px) {
        .lead-dialog__head, .lead-dialog__body { padding-inline: var(--space-6); }
    }
    .dialog-open { overflow: hidden; }

    /* --- Kontakt ----------------------------------------- */
    .contact__grid { display: grid; gap: var(--space-8); }
    @media (min-width: 1024px) { .contact__grid { grid-template-columns: 7fr 4fr; gap: var(--space-9); align-items: start; } }
    .contact__form { max-width: var(--container-form); }
    .contact__aside { display: flex; flex-direction: column; gap: var(--space-6); }
    @media (min-width: 1024px) { .contact__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); padding-top: var(--space-2); } }
    .contact__block { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
    .contact__email { font-size: var(--text-h4); font-weight: 600; color: var(--text); }
    .contact__steps { display: flex; flex-direction: column; gap: var(--space-3); }
    .contact__steps li { display: grid; grid-template-columns: 2.5ch 1fr; gap: var(--space-2); font-size: var(--text-small); color: var(--text-muted); }
    .contact__steps .meta { padding-top: 2px; }
    .faq--compact summary { min-height: 48px; padding: var(--space-3) 0; font-size: 0.9375rem; }
    .faq--compact details p { padding-bottom: var(--space-3); font-size: var(--text-small); }

    /* --- Stavové stránky a próza ------------------------- */
    .status-page { min-height: 60vh; display: flex; align-items: center; }
    .prose { display: flex; flex-direction: column; gap: var(--space-4); }
    .prose h1 { margin-bottom: var(--space-2); }
    .prose h2 { font-size: var(--text-h3); margin-top: var(--space-6); }
    .prose p, .prose li { color: var(--text-muted); max-width: 68ch; }
    .prose ul { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.2em; }
    .prose strong { color: var(--text); }

    /* --- Reveal (§15) ----------------------------------- */
    @media (prefers-reduced-motion: no-preference) {
        .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
        .js .reveal.is-visible { opacity: 1; transform: none; }
    }
}

/* ---------------------------------------------------------
   utilities
--------------------------------------------------------- */
@layer utilities {
    .visually-hidden {
        position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .skip-link {
        position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
        padding: var(--space-3) var(--space-4);
        background: var(--light-surface); color: var(--light-text);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-overlay);
    }
    .skip-link:focus { top: var(--space-4); }
    .muted { color: var(--text-muted); }
    .subtle { color: var(--text-subtle); }

    @media (forced-colors: active) {
        .btn, .card, .spec, .choice, .input, .tag { border: 1px solid CanvasText; }
    }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    }
}