/* ===========================================================================
   SOMIG — stylopis veřejného webu
   ---------------------------------------------------------------------------
   Jediný zdroj pravdy pro vzhled. Členěno po sekcích, uvnitř sekce nejdřív
   desktop, pak breakpointy (1024 → 768 → 480).

   ⛔ Žádné `!important`, žádné inline styly v šablonách, žádná hodnota mimo
      škálu tokenů. Odsazení sekcí ze Stavebnice zapisuje `BuilderRenderer`
      do `<style data-builder-dynamic>` — tenhle soubor s ním nesoupeří.

   OBSAH
     1  Tokeny
     2  Písmo (self-hosted Inter — žádné volání na Google)
     3  Základ a reset
     4  Rozvržení a sekce
     5  Typografie a .prose
     6  Tlačítka
     7  Formuláře
     8  Hlavička
     9  Patička
    10  Sekce: hero
    11  Sekce: běžící pruh
    12  Sekce: překážky (číslované karty)
    13  Sekce: postup (kroky s ikonami)
    14  Sekce: velká výzva
    15  Sekce: řešení (jednotná osnova)
    16  Sekce: ukázky a reference
    17  Sekce: plán změn
    18  Sekce: kroky spolupráce
    19  Sekce: úrovně nabídky
    20  Sjednocení sekcí ze Stavebnice jádra (+ Aktuality, modul jádra)
    21  Cookie lišta (vzhled si drží web — viz Analytics::vlastniStylListy)
    22  Hlášky a stavy
    23  Pomocné třídy
    24  Pohyb a tisk (průřezové bloky — patří NA KONEC souboru)
   ========================================================================= */


/* ── 1 · TOKENY ─────────────────────────────────────────────────────────── */

:root {
    /* Plochy a linky. Podklad je téměř černý s modrým nádechem — na čistě
       černé by magenta zářila nepříjemně a karty by nešly odlišit. */
    --c-bg:            #07070E;
    --c-bg-raised:     #0C0C16;
    --c-surface:       #111120;
    --c-surface-2:     #171729;
    --c-line:          rgba(255, 255, 255, .09);
    --c-line-strong:   rgba(255, 255, 255, .18);

    /* Text */
    --c-text:          #FFFFFF;
    --c-text-2:        #B4B4C6;
    --c-text-3:        #7C7C92;

    /* Akcent — magenta ze značky */
    --c-accent:        #FF2E9A;
    --c-accent-hover:  #FF5CB0;
    --c-accent-active: #D1127A;
    --c-accent-soft:   rgba(255, 46, 154, .14);
    --c-accent-line:   rgba(255, 46, 154, .38);
    --c-accent-glow:   rgba(255, 46, 154, .45);

    /* Doplňkový akcent — chladná modrá v ukázkách rozhraní */
    --c-cool:          #4DD4F7;
    --c-violet:        #7B2FF7;

    /* Stavy */
    --c-ok:            #3DDC97;
    --c-warn:          #FFB020;
    --c-err:           #FF5C72;
    --c-ok-soft:       rgba(61, 220, 151, .10);
    --c-warn-soft:     rgba(255, 176, 32, .10);
    --c-err-soft:      rgba(255, 92, 114, .10);
    --c-err-line:      rgba(255, 92, 114, .45);
    --c-disabled:      #2A2A3A;

    /* Odkazy */
    --c-link:          var(--c-accent);
    --c-link-hover:    var(--c-accent-hover);

    /* Rozvržení */
    --container:       1340px;
    --container-uzky:  880px;
    --gutter:          24px;
    --header-h:        84px;

    /* Odstupy — jediná škála, nic mimo ni */
    --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:  80px;
    --space-10: 120px;

    /* Písmo */
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Zaoblení */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Stíny */
    --shadow-card:  0 20px 60px rgba(0, 0, 0, .45);
    --shadow-float: 0 32px 90px rgba(0, 0, 0, .6);
    --shadow-glow:  0 0 40px var(--c-accent-glow);

    /* Výšky ovládacích prvků */
    --ctl-h:    44px;
    --ctl-h-sm: 36px;
    --ctl-h-lg: 54px;

    /* Pohyb */
    --ease: cubic-bezier(.2, .6, .2, 1);
    --t-hover:  200ms;
    --t-expand: 300ms;
    --t-slow: 500ms;
    /* Sinusový průběh pro dlouhé smyčky kulisy. Oproti `--ease` nemá
       prudký náběh, takže se pohyb na krajích smyčky nezadrhává. */
    --ease-vlna: cubic-bezier(.37, 0, .63, 1);
    --t-reveal: 600ms;

    /* Náklon dlaždic a panelů ve 3D. Výchozí nula znamená „rovně" — hodnotu
       dosazuje `site.js` podle polohy kurzoru, takže bez skriptu se nic
       nerozbije, jen se nic nenaklání. */
    --som-naklon-x: 0deg;
    --som-naklon-y: 0deg;
}


/* ── 2 · PÍSMO ──────────────────────────────────────────────────────────── */
/* Self-hosted: web nesmí při načtení volat cizí doménu (GDPR i rychlost).
   `font-display: swap` — text je čitelný dřív, než dojede řez.
   Řezy jsou SKUTEČNÉ, žádný faux bold. */

@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-400.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: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/inter/inter-latin-400.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: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-500.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: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/inter/inter-latin-500.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: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-600.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: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/inter/inter-latin-600.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: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-700.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: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/inter/inter-latin-700.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: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-800.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: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("../fonts/inter/inter-latin-800.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;
}


/* ── 3 · ZÁKLAD A RESET ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    /* `clip` místo `hidden`: `overflow-x: hidden` na předkovi vyřadí
       `position: sticky` v celém dokumentu a lepivá hlavička by přestala
       fungovat. Daň je, že přetečení nevyrobí posuvník — proto se
       responzivita ověřuje měřením, ne okem. */
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font: 400 17px/1.65 var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Dlouhá adresa nebo e-mail jinak probublá do min-content mřížky
       a roztáhne celou stránku. `anywhere`, ne `break-word`. */
    overflow-wrap: anywhere;
}

/* Barevná mlha pod celou stránkou.
   🔴 PROČ NA `body::before` A NE DO KAŽDÉ SEKCE. Podstránky skládá redaktor
      ze sekcí jádra (`heading`, `text`), do kterých žádnou dekoraci dostat
      nejde. Vrstva pod celým dokumentem se naopak ukáže všude, kde sekce
      nemá vlastní podklad — a tam, kde ho má (hero, výzva, pruh), zůstane
      schovaná za ním. Stránka tím přestala být plochá černá plocha.
   ⚠️ `fixed` dělá z mlhy kulisu, pod kterou obsah projíždí; `scroll` by ji
      táhl s sebou a efekt by zmizel.
   ⚠️ Bez `pointer-events: none` by vrstva spolkla kliknutí na celé stránce. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    /* 🔴 `-1`, ne `0`. Při `z-index: 0` se polohovaná vrstva vykresluje AŽ
       ZA textem v neposicovaných sekcích — mlha by ležela přes písmo a
       odstavce by dostaly fialový nádech. Záporná hodnota ji posadí hned
       nad podklad stránky a pod všechno ostatní. */
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(44% 38% at 84% 14%, rgba(255, 46, 154, .11), transparent 68%),
        radial-gradient(40% 36% at 10% 46%, rgba(123, 47, 247, .10), transparent 68%),
        radial-gradient(48% 40% at 70% 88%, rgba(255, 46, 154, .08), transparent 70%),
        radial-gradient(34% 30% at 26% 92%, rgba(77, 212, 247, .05), transparent 70%);
    animation: som-mlha-pozadi 32s var(--ease) infinite alternate;
    will-change: transform;
}

/* Plošná pojistka proti roztažení stránky jedním velkým obrázkem. */
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

a { color: var(--c-link); text-decoration: none; transition: color var(--t-hover) var(--ease); }
a:hover { color: var(--c-link-hover); }

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection { background: var(--c-accent); color: #fff; }

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

/* Čtečkám viditelné, očím ne. */
.u-skryte-vizualne {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Přeskočit na obsah — první prvek v DOM, viditelný až po zaostření. */
.som-preskocit {
    position: absolute; top: var(--space-2); left: var(--space-2); z-index: 200;
    padding: var(--space-3) var(--space-5);
    background: var(--c-accent); color: #fff; border-radius: var(--radius-md);
    transform: translateY(-200%);
    transition: transform var(--t-hover) var(--ease);
}
.som-preskocit:focus { transform: translateY(0); color: #fff; }


/* ── 4 · ROZVRŽENÍ A SEKCE ──────────────────────────────────────────────── */

.som-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.som-container--uzky { max-width: var(--container-uzky); }

.som-section {
    position: relative;
    padding-block: var(--space-10);
}
.som-section--tesna  { padding-block: var(--space-8); }
.som-section--raised { background: var(--c-bg-raised); }

/* Vodorovná linka mezi sekcemi na stejném podkladu. Kreslí ji sekce sama,
   ne mezera — dvě výplně vedle sebe dají díru, ne vzduch. */
.som-section--lemovana { border-top: 1px solid var(--c-line); }

/* Dvousloupcová hlavička sekce: vlevo nadpis, vpravo odstavec (viz předloha
   „Co dnes brzdí vaši firmu?"). */
.som-sekce-hlava {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--space-7);
    align-items: end;
    margin-bottom: var(--space-8);
}
.som-sekce-hlava > * { min-width: 0; }
.som-sekce-hlava__text {
    margin: 0;
    color: var(--c-text-2);
    font-size: 19px;
    line-height: 1.6;
    max-width: 52ch;
}
.som-sekce-hlava--stred {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}


/* ── 5 · TYPOGRAFIE ─────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--c-text);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.som-h1, h1 { font-size: clamp(40px, 6.1vw, 88px); line-height: 1.02; letter-spacing: -.035em; }
.som-h2, h2 { font-size: clamp(30px, 4.1vw, 60px); line-height: 1.06; letter-spacing: -.03em; }
.som-h3, h3 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.som-h4, h4 { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
h5 { font-size: 18px; font-weight: 700; }
h6 { font-size: 16px; font-weight: 700; }

/* Zvýrazněné slovo v nadpisu — v šabloně `<em>`, propustí ho `e_inline()`. */
h1 em, h2 em, h3 em, .som-akcent {
    color: var(--c-accent);
    font-style: normal;
}

.som-eyebrow {
    display: block;
    margin: 0 0 var(--space-4);
    color: var(--c-text-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
}

.som-lead {
    margin: 0;
    color: var(--c-text-2);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    max-width: 48ch;
}

.som-text-2 { color: var(--c-text-2); }
.som-text-3 { color: var(--c-text-3); }
.som-maly   { font-size: 15px; line-height: 1.6; }

/* Rytmus textových bloků. JEDNO pravidlo „každý blok kromě prvního má nahoře
   mezeru"; nulovat se smí jen spodní okraj, nikdy `margin: 0` — to by mělo
   vyšší specificitu a mezery by tiše zmizely. */
.prose { color: var(--c-text-2); font-size: 17px; line-height: 1.75; }
.prose > * + * { margin-top: var(--space-5); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose table, .prose blockquote, .prose figure { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { color: var(--c-text); }
.prose > h2 + *, .prose > h3 + *, .prose > h4 + * { margin-top: var(--space-4); }
.prose > * + :is(h2, h3, h4) { margin-top: var(--space-7); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose a.som-btn { text-decoration: none; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose strong { color: var(--c-text); font-weight: 600; }
.prose blockquote {
    padding-left: var(--space-5);
    border-left: 2px solid var(--c-accent);
    color: var(--c-text-2);
    font-size: 19px;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-line); text-align: left; }
.prose th { color: var(--c-text); font-weight: 600; }


/* ── 6 · TLAČÍTKA ───────────────────────────────────────────────────────── */

.som-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--ctl-h);
    padding-inline: var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: 600 15px/1 var(--font-body);
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--t-hover) var(--ease),
                border-color var(--t-hover) var(--ease),
                color var(--t-hover) var(--ease),
                transform var(--t-hover) var(--ease),
                box-shadow var(--t-hover) var(--ease);
}
.som-btn svg { display: block; width: 16px; height: 16px; flex: none; }

.som-btn--lg { height: var(--ctl-h-lg); padding-inline: var(--space-6); font-size: 16px; }
.som-btn--sm { height: var(--ctl-h-sm); padding-inline: var(--space-4); font-size: 14px; }
.som-btn--blok { width: 100%; }

/* Hlavní akce: bílá pilulka na tmavém podkladu (předloha). */
.som-btn--primarni {
    background: #fff;
    color: #07070E;
}
.som-btn--primarni:hover {
    background: #fff;
    color: #07070E;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, .16);
}
.som-btn--primarni:active { transform: translateY(0); background: #E9E9F2; }

/* Vedlejší akce: jen okraj. */
.som-btn--obrys {
    background: transparent;
    border-color: var(--c-line-strong);
    color: var(--c-text);
}
.som-btn--obrys:hover {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .05);
    color: var(--c-text);
}
.som-btn--obrys:active { background: rgba(255, 255, 255, .1); }

/* Akcentní akce: magenta. */
.som-btn--akcent {
    background: var(--c-accent);
    color: #fff;
}
.som-btn--akcent:hover {
    background: var(--c-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 34px var(--c-accent-glow);
}
.som-btn--akcent:active { transform: translateY(0); background: var(--c-accent-active); }

/* Textová akce. */
.som-btn--text {
    height: auto;
    padding: 0;
    background: none;
    color: var(--c-accent);
    border-radius: var(--radius-sm);
}
.som-btn--text:hover { color: var(--c-accent-hover); }

.som-btn[disabled], .som-btn[aria-disabled="true"] {
    background: var(--c-disabled);
    border-color: transparent;
    color: var(--c-text-3);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Kulaté tlačítko se šipkou na kartách (předloha). Pevná šířka = výška,
   SVG vycentrované flexem — žádná dorovnávací konstanta. */
.som-sipka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--c-line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--c-text);
    transition: background-color var(--t-hover) var(--ease),
                border-color var(--t-hover) var(--ease),
                color var(--t-hover) var(--ease);
}
.som-sipka svg { display: block; width: 18px; height: 18px; }
.som-sipka:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.som-akce {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}


/* ── 7 · FORMULÁŘE ──────────────────────────────────────────────────────── */

.som-pole + .som-pole { margin-top: var(--space-5); }

.som-pole label,
.som-form label,
.form-group > label:not(.form-checkbox) {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--c-text);
    font-size: 15px;
    font-weight: 600;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], input[type="password"],
textarea, select {
    width: 100%;
    min-height: var(--ctl-h-lg);
    padding: var(--space-3) var(--space-4);
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-md);
    color: var(--c-text);
    /* 16px povinně — na iOS se jinak formulář při zaostření přiblíží. */
    font: 400 16px/1.5 var(--font-body);
    transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
textarea { min-height: 150px; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--c-text-3); }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--c-surface-2);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

select {
    appearance: none;
    padding-right: var(--space-8);
    /* Šipka jako ikona v pozadí. ⚠️ Nikdy shorthand `background:` níž v souboru
       — smazal by ji. Barva plochy se přepisuje jen `background-color`. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B4B4C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
}

/* `<fieldset>` má implicitní `min-inline-size: min-content` → v mřížce
   by ho roztáhl nejdelší vnitřní prvek. */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

/* Zaškrtávátka (souhlas GDPR). Ikona a text zarovnané na první řádek,
   ne na střed celého odstavce. */
.som-check,
.form-check,
.form-checkbox,
.builder-form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 15px;
    line-height: 1.55;
    color: var(--c-text-2);
    cursor: pointer;
}
/* Políčko si kreslí web, ne prohlížeč: výchozí bílý čtverec na tmavé kartě
   svítil víc než samotné tlačítko. */
.som-check input[type="checkbox"],
.form-check input[type="checkbox"],
.form-checkbox input[type="checkbox"],
.builder-form-check input[type="checkbox"] {
    appearance: none;
    width: 20px; height: 20px; min-height: 0; flex: none;
    margin: 2px 0 0;
    background-color: var(--c-surface-2);
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.som-check input[type="checkbox"]:checked,
.form-check input[type="checkbox"]:checked,
.form-checkbox input[type="checkbox"]:checked,
.builder-form-check input[type="checkbox"]:checked {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E");
}
.som-check input[type="checkbox"]:focus-visible,
.form-check input[type="checkbox"]:focus-visible,
.form-checkbox input[type="checkbox"]:focus-visible,
.builder-form-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.som-hint, .form-hint, .form-help {
    margin: var(--space-2) 0 0;
    color: var(--c-text-2);
    font-size: 14px;
    line-height: 1.5;
}

.som-chyba, .form-error, .field-error {
    margin: var(--space-2) 0 0;
    color: var(--c-err);
    font-size: 14px;
}

/* Medová past — pole, které člověk nevidí a robot vyplní. Nesmí být
   `display:none` (část robotů skrytá pole přeskakuje). */
.som-pastička, .u-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/* ── 8 · HLAVIČKA ───────────────────────────────────────────────────────── */

/* 🔴 NAD HERO JE HLAVIČKA ZÁVOJ, NE LIŠTA. Plná výplň `rgba(7,7,14,.72)`
   s rozostřením pozadí usekla pruhy světla u horní hrany vodorovnou
   hranou — v předloze přitom hlavička žádnou hranu nemá a světlo pod ní
   prosvítá. Závoj proto kreslí pseudoprvek s přechodem do nuly.
   ⚠️ Gradient se CSS přechodem vyhladit nedá, proto se mezi stavy
      nepřelévá pozadí, ale `opacity` závoje. Po odrolování se závoj
      schová a nastoupí plná barva s rozostřením, aby menu zůstalo
      čitelné i nad světlou fotkou v obsahu. */
.som-hlavicka {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(7, 7, 14, 0);
    border-bottom: 1px solid transparent;
    transition: background-color var(--t-hover) var(--ease),
                border-color var(--t-hover) var(--ease);
}
.som-hlavicka::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Za obsah hlavičky, ale pořád uvnitř ní — `.som-hlavicka` má vlastní
       `z-index`, takže je to vlastní vrstvicí kontext a závoj nemůže
       propadnout pod stránku. */
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(5, 5, 10, .78), rgba(5, 5, 10, 0));
    transition: opacity var(--t-hover) var(--ease);
}
.som-hlavicka.je-odrolovana {
    background-color: rgba(7, 7, 14, .95);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--c-line);
}
.som-hlavicka.je-odrolovana::before { opacity: 0; }
/* Otevřené menu dosedá na hlavičku zespodu. Kdyby hlavička zůstala
   závojem, byl by mezi nimi světlý šev z prosvítajícího pozadí. */
.som-hlavicka:has(.som-nav.je-otevrena) {
    background-color: var(--c-bg-raised);
    border-bottom-color: var(--c-line);
}
.som-hlavicka:has(.som-nav.je-otevrena)::before { opacity: 0; }

.som-hlavicka__in {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--header-h);
}

/* Ve flexu se smí zmenšovat JEN navigace. Ikony a tlačítka mají `flex: none`,
   jinak se při zúžení scvrknou ony a menu se zalomí. */
.som-znacka {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
    color: var(--c-text);
}
.som-znacka:hover { color: var(--c-text); }
.som-znacka__mark { display: block; width: 34px; height: 34px; flex: none; }
.som-znacka__text {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
}

.som-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-6);
}
.som-nav__odkaz {
    position: relative;
    color: var(--c-text-2);
    font-size: 16px;
    font-weight: 500;
    padding-block: var(--space-2);
    white-space: nowrap;
}
.som-nav__odkaz:hover { color: var(--c-text); }
.som-nav__odkaz.je-aktivni { color: var(--c-text); }
.som-nav__odkaz.je-aktivni::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--c-accent);
    border-radius: var(--radius-pill);
}

.som-hlavicka__akce { display: flex; align-items: center; gap: var(--space-3); flex: none; }

.som-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex: none;
    /* ⚠️ NE `transparent`. Hlavička nad hero je jen přechodový závoj,
       takže pod burgerem může svítit pruh světla a z ikony by zbyl
       obrys. Vlastní podklad ji udrží čitelnou nad čímkoli. */
    background: rgba(7, 7, 14, .55);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-md);
    color: var(--c-text);
    cursor: pointer;
}
/* 🔴 Obě ikony musí mít stejnou specifičnost jako pravidlo, které je
   skrývá. `.som-burger svg` je (0,1,1), `.som-burger__zavrit` jen (0,1,0) —
   křížek se proto kreslil i při zavřeném menu a v hlavičce byly vidět
   obě najednou. Žádné `!important`; stačí přidat rodiče. */
.som-burger svg { width: 20px; height: 20px; }
.som-burger .som-burger__otevrit { display: block; }
.som-burger .som-burger__zavrit { display: none; }
.som-burger[aria-expanded="true"] .som-burger__otevrit { display: none; }
.som-burger[aria-expanded="true"] .som-burger__zavrit { display: block; }


/* ── 9 · PATIČKA ────────────────────────────────────────────────────────── */

.som-paticka {
    position: relative;
    border-top: 1px solid var(--c-line);
    background: var(--c-bg);
    padding-block: var(--space-8) var(--space-6);
}

.som-paticka__hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-bottom: var(--space-6);
}
.som-paticka__tagline {
    margin: 0;
    color: var(--c-text-2);
    font-size: 17px;
}
.som-paticka__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}
.som-paticka__nav a { color: var(--c-text-2); font-size: 16px; }
.som-paticka__nav a:hover { color: var(--c-text); }

.som-paticka__mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-7);
    padding-block: var(--space-7);
    border-top: 1px solid var(--c-line);
}
.som-paticka__sloupec > h2,
.som-paticka__sloupec > h3 {
    margin: 0 0 var(--space-4);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-text-3);
}
.som-paticka__seznam { list-style: none; margin: 0; padding: 0; }
.som-paticka__seznam li + li { margin-top: var(--space-3); }
.som-paticka__seznam a { color: var(--c-text-2); font-size: 16px; }
.som-paticka__seznam a:hover { color: var(--c-text); }

.som-paticka__kontakt { color: var(--c-text-2); font-size: 16px; }
.som-paticka__kontakt p { margin: 0 0 var(--space-3); }
.som-paticka__kontakt p:last-child { margin-bottom: 0; }

.som-paticka__site { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.som-paticka__site a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--c-line); border-radius: 50%;
    color: var(--c-text-2);
}
.som-paticka__site a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.som-paticka__site svg { display: block; width: 18px; height: 18px; }

.som-paticka__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--c-line);
    color: var(--c-text-3);
    font-size: 14px;
}
.som-paticka__pravni { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.som-paticka__pravni a { color: var(--c-text-3); }
.som-paticka__pravni a:hover { color: var(--c-text-2); }


/* ── 10 · SEKCE: HERO ───────────────────────────────────────────────────── */

/* 🔴 HERO ZACINA NAHORE, NE POD HLAVICKOU. Hlavicka je `sticky`, takze
   v toku zabira svou vysku a scena pod ni zacinala az na y = 84 px.
   Pruhy svetla tim dostaly ostrou vodorovnou hranu pres celou sirku,
   kterou predloha nema — tam svetlo prochazi az za logo a menu.
   Zaporny horni okraj scenu vytahne pod hlavicku a stejne velke vnitrni
   odsazeni vrati obsahu jeho puvodni misto, takze se nic neposune. */
.som-hero {
    position: relative;
    overflow: hidden;
    /* 🔴 OBSAH SE CENTRUJE, NEODSAZUJE. Dřív drželo hero výšku jen
       odsazením (nahoře 120 px, dole 80) a text proto seděl viditelně
       výš než uprostřed. Flex s `center` rozdělí zbylé místo sám
       a zůstane to vycentrované při každé výšce okna.
       ⚠️ Horní odsazení je o výšku hlavičky větší než spodní — hero
          sahá POD hlavičku, takže se musí centrovat jen to, co je
          pod ní vidět. */
    display: flex;
    align-items: center;
    /* Výška obrazovky, ale nejvýš 940 px. `svh` místo `vh` kvůli
       mobilu — `vh` počítá se schovanou lištou prohlížeče, takže by
       hero bylo vždycky o kus vyšší než obrazovka. Strop je kvůli
       velkým monitorům: na 1440p by z hero byla prázdná hala. */
    min-height: min(100svh, 940px);
    margin-top: calc(var(--header-h) * -1);
    padding-block: calc(var(--header-h) + var(--space-7)) var(--space-7);
    background: var(--c-bg);
}
/* Flexový potomek by se scvrkl na obsah a kontejner by ztratil střed. */
.som-hero > .som-hero__in { width: 100%; }

/* Světlo v hero je ve TŘECH vrstvách, protože každá se chová jinak: mlha
   pomalu dýchá, paprsky putují vzhůru, mřížka stojí. Jediná vrstva by
   musela dělat všechno naráz a nešla by vypnout zvlášť. */
.som-hero__zare {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        /* studený přísvit v levém horním rohu */
        radial-gradient(40% 44% at 6% 0%, rgba(77, 212, 247, .13), transparent 62%),
        /* spodní nános pod nadpisem — předloha ho má od 44 % dál */
        radial-gradient(34% 46% at 40% 86%, rgba(255, 46, 154, .30), transparent 72%),
        /* souvislý pás sílící k pravému okraji; vrchol na 90 %,
           na 98 % už zase skoro nic */
        linear-gradient(90deg,
            transparent 62%,
            rgba(255, 46, 154, .11) 72%,
            rgba(255, 46, 154, .20) 86%,
            rgba(255, 46, 154, .30) 91%,
            rgba(255, 46, 154, .24) 94%,
            rgba(255, 46, 154, .15) 96%,
            rgba(255, 46, 154, .06) 98%,
            transparent);
}
/* Dvě barevné mlhoviny, které se přes sebe přelévají. Pseudoprvky, ne další
   `<div>` — je to dekorace a do šablony nepatří značka, kterou nikdo nečte. */
.som-hero__zare::before,
.som-hero__zare::after {
    content: '';
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    will-change: transform;
}
.som-hero__zare::before {
    top: -26%;
    right: -10%;
    background: radial-gradient(circle, rgba(255, 46, 154, .52), rgba(255, 46, 154, .14) 46%, transparent 68%);
    animation: som-mlha-a 19s var(--ease) infinite alternate;
}
.som-hero__zare::after {
    bottom: -34%;
    right: 0;
    width: 56%;
    background: radial-gradient(circle, rgba(123, 47, 247, .26), rgba(159, 86, 255, .08) 46%, transparent 68%);
    animation: som-mlha-b 25s var(--ease) infinite alternate;
}

/* ── Světelná kulisa: svislé pruhy ─────────────────────────────────────
   🔴 KAŽDÝ PRUH JE VLASTNÍ UZEL. První verze měla všechny paprsky jako
      gradienty jediného prvku — a taková vrstva se dá animovat jen jako
      celek. Všechny pruhy se hýbaly svorně stejným směrem a výsledek byl
      na první pohled tapeta, ne světlo. Teď má každý vlastní šířku,
      barvu, tempo i zpoždění, takže se navzájem prolínají a potkávají
      pokaždé jinak.
   🔴 Třída je OBECNÁ (`som-paprsky`), protože tentýž pruh světla má
      v předloze i velká výzva na konci stránky. */

.som-paprsky {
    position: absolute;
    inset: -14% 0 -6% 0;
    pointer-events: none;
    overflow: hidden;
    /* 🔴 NAHOŘE SE NEMASKUJE. V předloze je nejvíc světla právě u horní
       hrany; dřívější `transparent → #000 9%` ho spolu s plnou výplní
       hlavičky useklo dvakrát a z pruhů zbyla mlha v prostřední třetině. */
    mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent);
}

.som-paprsek {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--pruh-sirka, 40px);
    left: var(--pruh-x, 50%);
    /* 🔴 HRANA JE SKUTEČNÝ `border`, NE KONEC GRADIENTU. Dokud tvar pruhu
       vykrajovala maska, neměl pruh kde mít hranu — okraj se vždycky
       rozplynul do nuly a z neonové trubice byl obláček. Dvě svislé
       linky po stranách dělají přesně to, co dělá sklo na neonu:
       ohraničí světlo. */
    border-left: var(--pruh-hrana-sirka, 2px) solid var(--pruh-hrana, rgba(255, 255, 255, .55));
    border-right: var(--pruh-hrana-sirka, 2px) solid var(--pruh-hrana, rgba(255, 255, 255, .55));
    /* 🔴 PŘECHOD JDE SVISLE A MUSÍ BÝT VIDĚT. Předchozí rozsah krytí
       (.10 → .40 → .06) byl tak plochý, že přechod nahoře dole nikdo
       nerozeznal. Teď začíná pruh nahoře skoro bílý a dole končí
       v temné fialové — rozdíl je přes půl stupnice. */
    background: linear-gradient(to bottom,
        var(--pruh-horni, rgba(255, 255, 255, .62)) 0%,
        var(--pruh-stredni, rgba(255, 46, 154, .44)) 36%,
        var(--pruh-dolni, rgba(86, 18, 140, .10)) 100%);
    /* Neonová svatozář. 🔴 Vědomě `box-shadow`, a ne maska s rozostřením:
       stín se nekreslí do rámečku prvku, takže není čím ho oříznout,
       a `filter: blur()` na devíti pruzích přes celou výšku sekce by
       prohlížeč překresloval v každém snímku animace. */
    box-shadow: 0 0 var(--pruh-zare-r, 34px) var(--pruh-zare, rgba(255, 46, 154, .32));
    /* `screen` dá přesně to prolínání, o které v předloze jde: dva pruhy přes
       sebe se SEČTOU do světlejšího místa, místo aby se jeden schoval
       za druhý. */
    mix-blend-mode: screen;
    transform-origin: center;
    animation: som-pruh var(--pruh-cas, 30s) var(--ease-vlna) var(--pruh-zpozdeni, 0s) infinite;
    will-change: transform, opacity;
}

/* Rozmístění. Devět hodnot, žádná dvakrát stejná — jakmile se dvě tempa
   potkají, pruhy začnou chodit v páru a je to zase vidět jako vzorek.
   🔴 ŽÁDNÝ TMAVÝ PRUH. Dřív dva paprsky mísily `multiply` černou, aby
      světlo krájely. Vypadalo to jako černý flek přes scénu — tma mezi
      pruhy musí vzniknout tím, že tam žádný pruh NENÍ, ne tím, že se
      přes ně přetáhne černá.
   🔴 ŽÁDNÁ SYTÁ FIALOVÁ SAMA O SOBĚ. Fialová je v každém pruhu jen jako
      spodní, nejtmavší konec přechodu — široký sytě fialový pás vedle
      růžového rozbíjel barevnou souhru.
   ⚠️ Nejužší pruh má 18 px. Při 14 px zabraly dvě hrany po 2 px skoro
      třetinu šířky a uvnitř nezbylo místo na přechod. */
.som-paprsek--1 { --pruh-x: 60%; --pruh-sirka: 70px; --pruh-cas: 34s; --pruh-zpozdeni: 0s;
    --pruh-horni: rgba(255, 210, 238, .62); --pruh-stredni: rgba(255, 46, 154, .22); --pruh-dolni: rgba(86, 18, 140, .05);
    --pruh-hrana: rgba(255, 92, 176, .40); --pruh-hrana-sirka: 1px; --pruh-zare: rgba(255, 46, 154, .22); }
.som-paprsek--2 { --pruh-x: 66%; --pruh-sirka: 26px; --pruh-cas: 29s; --pruh-zpozdeni: -8s;
    --pruh-horni: rgba(255, 255, 255, .84); --pruh-stredni: rgba(255, 130, 196, .28); --pruh-dolni: rgba(86, 18, 140, .06);
    --pruh-hrana: rgba(255, 255, 255, .62); --pruh-zare: rgba(255, 120, 190, .26); }
.som-paprsek--3 { --pruh-x: 70%; --pruh-sirka: 54px; --pruh-cas: 38s; --pruh-zpozdeni: -17s;
    --pruh-horni: rgba(255, 196, 230, .74); --pruh-stredni: rgba(255, 46, 154, .28); --pruh-dolni: rgba(72, 14, 128, .08);
    --pruh-hrana: rgba(255, 92, 176, .56); --pruh-zare: rgba(255, 46, 154, .30); }
.som-paprsek--4 { --pruh-x: 75%; --pruh-sirka: 20px; --pruh-cas: 25s; --pruh-zpozdeni: -5s;
    --pruh-horni: rgba(255, 255, 255, .96); --pruh-stredni: rgba(255, 180, 220, .32); --pruh-dolni: rgba(86, 18, 140, .06);
    --pruh-hrana: rgba(255, 255, 255, .82); --pruh-hrana-sirka: 1.5px; --pruh-zare: rgba(255, 190, 228, .34); }
.som-paprsek--5 { --pruh-x: 79%; --pruh-sirka: 62px; --pruh-cas: 31s; --pruh-zpozdeni: -22s;
    --pruh-horni: rgba(255, 186, 226, .78); --pruh-stredni: rgba(255, 46, 154, .30); --pruh-dolni: rgba(72, 14, 128, .07);
    --pruh-hrana: rgba(255, 92, 176, .60); --pruh-zare: rgba(255, 46, 154, .32); }
.som-paprsek--6 { --pruh-x: 84%; --pruh-sirka: 30px; --pruh-cas: 27s; --pruh-zpozdeni: -11s;
    --pruh-horni: rgba(255, 255, 255, .98); --pruh-stredni: rgba(255, 120, 190, .34); --pruh-dolni: rgba(86, 18, 140, .08);
    --pruh-hrana: rgba(255, 255, 255, .88); --pruh-zare: rgba(255, 150, 210, .38); }
.som-paprsek--7 { --pruh-x: 87%; --pruh-sirka: 46px; --pruh-cas: 36s; --pruh-zpozdeni: -29s;
    --pruh-horni: rgba(255, 176, 220, .80); --pruh-stredni: rgba(255, 46, 154, .32); --pruh-dolni: rgba(72, 14, 128, .07);
    --pruh-hrana: rgba(255, 92, 176, .62); --pruh-zare: rgba(255, 46, 154, .34); }
/* Osmička je vrchol scény — předloha má nejsvětlejší místo na 90–92 %. */
.som-paprsek--8 { --pruh-x: 90%; --pruh-sirka: 70px; --pruh-cas: 23s; --pruh-zpozdeni: -14s;
    --pruh-horni: rgba(255, 255, 255, 1); --pruh-stredni: rgba(255, 92, 176, .38); --pruh-dolni: rgba(86, 18, 140, .10);
    --pruh-hrana: rgba(255, 255, 255, .90); --pruh-hrana-sirka: 2.5px; --pruh-zare: rgba(255, 92, 176, .44); --pruh-zare-r: 46px; }
.som-paprsek--9 { --pruh-x: 94%; --pruh-sirka: 34px; --pruh-cas: 33s; --pruh-zpozdeni: -7s;
    --pruh-horni: rgba(255, 220, 242, .82); --pruh-stredni: rgba(255, 92, 176, .30); --pruh-dolni: rgba(72, 14, 128, .06);
    --pruh-hrana: rgba(255, 150, 210, .58); --pruh-zare: rgba(255, 92, 176, .28); }


/* ── Světelná kulisa: podlaha pod kartami ──────────────────────────────
   🔴 PAPRSKY SE SBÍHAJÍ V OBZORU, NE U SPODNÍ HRANY. Předchozí verze je
      otáčela kolem bodu DOLE, takže se rozbíhaly ze středu doleva
      a doprava a scéna vypadala jako hvězda nebo rozsypané jehly.
      Podlaha vzniká přesně opačně: všechny paprsky vyrůstají z jednoho
      úběžníku nahoře a směrem k divákovi se rozestupují. Teprve tím
      vznikne plocha, na které karty stojí.
   🔴 Po paprscích jezdí rozsvícené diody od obzoru k divákovi. To je ten
      pohyb, který z podlahy udělá živou scénu — samotné blikání čar
      vypadá jako porucha. */

.som-podlaha {
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    pointer-events: none;
    overflow: hidden;
    /* U obzoru se plocha ztrácí do tmy, u spodní hrany je nejblíž. */
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .38) 0, #000 16%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .38) 0, #000 16%, #000 94%, transparent);
}

/* 🔴 PODLAHU NEDĚLAJÍ PAPRSKY, ALE STÍN. Samotný vějíř čar je kresba
   na pozadí — plocha z něj vznikne teprve tím, že má odlesk tam, kam
   světlo dopadá, a TMAVÝ PÁS tam, kde ho karty zaclánějí. Ten pás je
   kontaktní stín: bez něj karty nad scénou plavou, s ním na ní stojí.
   ⚠️ Stín je `::before`, tedy první potomek — kreslí se POD paprsky
      i pod mřížkou. Jako poslední vrstva by je přemazal. */
.som-podlaha::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* odlesk plochy před kartami */
        radial-gradient(64% 76% at 56% 2%, rgba(255, 46, 154, .26), transparent 70%),
        /* kontaktní stín pod spodní hranou karet */
        radial-gradient(46% 48% at 56% -8%, rgba(3, 3, 8, .95), transparent 74%);
}

.som-podlaha__mrizka {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(to right, var(--c-accent-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--c-accent-line) 1px, transparent 1px);
    background-size: 90px 90px;
    /* Perspektiva dělá z mřížky zem; `rotateX` bez ní by byl jen zploštělý
       obdélník. */
    transform: perspective(520px) rotateX(72deg);
    transform-origin: bottom center;
    animation: som-mrizka 26s linear infinite;
}

/* Jeden paprsek podlahy. Základní natočení je v `--cara-uhel`, klíčové
   snímky k němu jen přidávají — jinak by se při animaci ztratilo. */
.som-podlaha__cara {
    position: absolute;
    left: var(--ubeznik, 54%);
    top: 0;
    width: var(--cara-sirka, 2px);
    height: 215%;
    transform-origin: top center;
    transform: rotate(var(--cara-uhel, 0deg));
    /* U obzoru paprsek mizí, u diváka je nejsilnější — tím vzniká hloubka. */
    background: linear-gradient(to bottom,
        transparent,
        var(--cara-barva, rgba(255, 46, 154, .50)) 38%,
        var(--cara-barva, rgba(255, 46, 154, .50)));
    mix-blend-mode: screen;
    animation: som-cara var(--cara-cas, 18s) var(--ease-vlna) var(--cara-zpozdeni, 0s) infinite;
    will-change: opacity;
}

/* Dioda. Je to `::after` paprsku, takže se natočí spolu s ním a do
   šablony nepřibude žádná další značka. Posouvá se po jeho délce, ne po
   obrazovce — proto `translate3d` ve směru Y uvnitř už otočeného prvku. */
.som-podlaha__cara::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: radial-gradient(circle,
        #fff 0%,
        var(--cara-barva, rgba(255, 46, 154, .9)) 36%,
        transparent 72%);
    animation: som-dioda var(--dioda-cas, 11s) linear var(--dioda-zpozdeni, 0s) infinite;
    will-change: transform, opacity;
}

/* Osm paprsků symetricky kolem úběžníku. Úhly se zvětšují ven, takže
   rozestup u spodní hrany roste — to je ta perspektiva. */
.som-podlaha__cara--1 { --cara-uhel: -87deg; --cara-sirka: 3px; --cara-cas: 21s; --cara-zpozdeni: 0s;     --dioda-cas: 13s;  --dioda-zpozdeni: -2s; }
.som-podlaha__cara--2 { --cara-uhel: -79deg; --cara-sirka: 2px; --cara-cas: 26s; --cara-zpozdeni: -6s;    --dioda-cas: 9.5s; --dioda-zpozdeni: -7s;  --cara-barva: rgba(255, 170, 215, .46); }
.som-podlaha__cara--3 { --cara-uhel: -70deg; --cara-sirka: 3px; --cara-cas: 18s; --cara-zpozdeni: -12s;   --dioda-cas: 15s;  --dioda-zpozdeni: -4s;  --cara-barva: rgba(77, 212, 247, .50); }
.som-podlaha__cara--4 { --cara-uhel: -60deg; --cara-sirka: 2px; --cara-cas: 29s; --cara-zpozdeni: -3s;    --dioda-cas: 11s;  --dioda-zpozdeni: -9s; }
.som-podlaha__cara--5 { --cara-uhel:  60deg; --cara-sirka: 2px; --cara-cas: 24s; --cara-zpozdeni: -15s;   --dioda-cas: 12.5s; --dioda-zpozdeni: -1s; }
.som-podlaha__cara--6 { --cara-uhel:  70deg; --cara-sirka: 3px; --cara-cas: 20s; --cara-zpozdeni: -8s;    --dioda-cas: 10s;  --dioda-zpozdeni: -6s;  --cara-barva: rgba(255, 92, 176, .56); }
.som-podlaha__cara--7 { --cara-uhel:  79deg; --cara-sirka: 2px; --cara-cas: 27s; --cara-zpozdeni: -19s;   --dioda-cas: 14s;  --dioda-zpozdeni: -11s; --cara-barva: rgba(77, 212, 247, .42); }
.som-podlaha__cara--8 { --cara-uhel:  87deg; --cara-sirka: 3px; --cara-cas: 23s; --cara-zpozdeni: -5s;    --dioda-cas: 8.5s; --dioda-zpozdeni: -3s; }

/* Vodorovný světelný práh na spodní hraně — v předloze odděluje hero od
   pruhu s obory ostrou čárou světla, ne linkou. Dýchá spolu se zbytkem. */
.som-hero__prah {
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--c-accent) 38%, rgba(255, 255, 255, .85) 56%, var(--c-violet) 72%, transparent);
    filter: blur(.5px);
    animation: som-prah 6.5s var(--ease) infinite;
}


.som-hero__in {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: var(--space-8);
    align-items: center;
}
.som-hero__in > * { min-width: 0; }


/* ── Záhlaví podstránky ────────────────────────────────────────────────
   Tatáž sekce, jen nižší, bez panelů a s fotkou. Podstránky do téhle
   změny začínaly holým nadpisem na černé a vypadaly jako rozestavěné. */
.som-hero--zahlavi {
    min-height: 0;
    padding-block: calc(var(--header-h) + var(--space-9)) var(--space-8);
}
/* 🔴 Omezuje se ŠÍŘKA TEXTU, ne kontejneru. Užší kontejner by se vystředil
   a nadpis podstránky by začínal jinde než obsah pod ním. */
.som-hero--zahlavi .som-hero__in {
    grid-template-columns: minmax(0, 1fr);
}
.som-hero--zahlavi .som-hero__text { max-width: 700px; }
.som-hero--zahlavi .som-hero__perex { max-width: 46ch; margin-bottom: var(--space-5); }
/* Podlaha je ozdoba hluboké scény s panely — v záhlaví podstránky se
   vůbec nevykresluje (`svetla(false)`), takže ji netřeba skrývat.
   Pruhy zůstávají, jen tišší: pod fotkou by jinak soupeřily s nadpisem. */
.som-hero--zahlavi .som-paprsky { opacity: .32; }

.som-hero__foto {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.som-hero__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% center;
    opacity: .5;
}
/* 🔴 Čitelnost textu nesmí viset na tom, jak světlá fotka zrovna je.
   Přechod zleva drží kontrast nadpisu i nad tou nejsvětlejší. */
.som-hero__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--c-bg) 16%, rgba(7, 7, 14, .88) 48%, rgba(7, 7, 14, .30) 82%),
        linear-gradient(to bottom, rgba(7, 7, 14, .72), transparent 38%, var(--c-bg));
}

.som-hero__text { max-width: 620px; }
.som-hero__nadpis { margin-bottom: var(--space-5); }
.som-hero__perex {
    margin: 0 0 var(--space-7);
    color: var(--c-text-2);
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.5;
    max-width: 30ch;
}

/* Ukázka rozhraní: vrstva s překrývajícími panely + štítek POD nimi
   v běžném toku. Štítek přeložený přes panely zakrýval zrovna to, co
   popisuje (naměřeno na prvním snímku). */
.som-hero__vizual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}
.som-hero__panely {
    position: relative;
    width: 100%;
    /* Výška musí pojmout nejvyšší panel i s překryvem. Při 460 px si panely
       zakrývaly obsah navzájem — konfigurátor nebyl vidět vůbec. */
    min-height: 660px;
    /* Perspektiva patří RODIČI. Kdyby ji měl každý panel sám (`transform:
       perspective(...)`), mizel by úběžník a panely by se každý klonily
       k jinému bodu — vypadalo by to jako slepená koláž, ne jako scéna. */
    perspective: 1500px;
    /* Úběžník se posouvá za kurzorem, takže se panely vůči sobě přesouvají
       jako skutečná scéna. Je to levnější než naklánět každý panel zvlášť:
       prohlížeč přepočítá jeden úběžník, ne čtyři matice.
       Hodnoty dosazuje `site.js`; bez něj platí výchozí 62 % / 38 %. */
    perspective-origin: var(--som-odlesk-x, 62%) var(--som-odlesk-y, 38%);
}
/* Na širokém displeji scéna lehce přeteče kontejner doprava, jak ji drží
   předloha. Je to bezpečné: `.som-hero` má `overflow: hidden`, takže se
   z přetečení nestane vodorovný posuv stránky (ověřeno měřením na
   320–1920 px). Do 1200 px zůstává scéna uvnitř — tam už by se o kraj
   opřely samotné panely. */
@media (min-width: 1200px) {
    .som-hero__panely { width: 107%; margin-right: -7%; }
}

.som-panel {
    position: absolute;
    background: linear-gradient(160deg, rgba(23, 23, 41, .97), rgba(10, 10, 20, .97));
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-lg);
    --panel-zare: rgba(255, 46, 154, .42);
    box-shadow: var(--shadow-float),
                0 0 0 1px rgba(255, 255, 255, .06),
                0 0 var(--panel-rozptyl, 54px) -10px var(--panel-zare);
    backdrop-filter: blur(6px);
    transform-style: preserve-3d;
    /* Panely se stáčejí od diváka doprava, přesně jak je drží předloha.
       `--som-z` dává každému jinou hloubku, takže se překrývají plasticky. */
    transform: rotateY(-11deg) rotateX(3.5deg) translateZ(var(--som-z, 0px));
    transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
/* Světelný lem na horní hraně — bez něj panel na tmavém pozadí splývá. */
.som-panel::before {
    content: '';
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--c-accent-line) 30%, rgba(255, 255, 255, .35) 50%, var(--c-accent-line) 70%, transparent);
    pointer-events: none;
}

.som-panel__lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-2);
}
.som-panel__nazev { display: inline-flex; align-items: center; gap: var(--space-2); }
.som-panel__nazev svg { display: block; width: 14px; height: 14px; flex: none; color: var(--c-accent); }
.som-panel__telo { padding: var(--space-4); }

.som-stitek {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border: 1px solid var(--c-accent-line);
    border-radius: var(--radius-pill);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.som-stitek--tichy {
    border-color: var(--c-line-strong);
    background: rgba(255, 255, 255, .05);
    color: var(--c-text-3);
}

/* Rozmístění panelů. Procenta, ne pixely — plocha se mění s šířkou.
   Pořadí překryvu je dané: konfigurátor vzadu nahoře, přes něj zleva
   aplikace, vpravo automatizace a úplně vpředu portál. Každý panel musí
   mít svou lištu i kus těla viditelný — jinak je to jen tmavý obdélník. */
/* ⚠️ Horní hrana „aplikace" MUSÍ ležet pod spodní hranou „konfigurátoru".
   Při 31 % mu ukrojila poslední řádek výběru povrchu a vypadalo to, že se
   panel nedokreslil. Ověřuje se snímkem, ne odhadem. */
.som-panel--konfigurator { top: 0;    right: 4%; width: 54%; z-index: 2; --som-z: -70px; }
.som-panel--aplikace     { top: 38%;  left: 0;   width: 62%; z-index: 3; --som-z: 0px; }
/* ⚠️ A horní hrana „portálu" zase pod spodní hranou „automatizace" — jinak
   portál zakryje tlačítko spuštění, tedy jediné barevné místo panelu. */
.som-panel--automat      { top: 34%;  right: 0;  width: 33%; z-index: 4; --som-z: 40px; }
.som-panel--portal       { bottom: 0; right: 3%; width: 45%; z-index: 5; --som-z: 80px; }

/* Jemné plavání. Každý panel má jiné zpoždění, jinak by se celá skupina
   houpala jako jeden kus a vypadalo by to jako chyba vykreslování. */
/* ⚠️ Tempa musí být NESOUDĚLNÁ. Při 12/16/8/14 s se panely každých 48 s
   potkají ve stejné fázi a na chvíli se houpou svorně jako jeden kus;
   13 / 17 / 11 / 19 se takhle nepotká prakticky nikdy.
   Záporné zpoždění rozhodí start, aby nezačaly všechny v nule. */
/* Studeny lem u aplikace a fialovy u portalu — predloha nema vsechny ctyri
   panely stejne, prave tim scena ziskava hloubku. */
.som-panel--aplikace { --panel-zare: rgba(77, 212, 247, .62); --panel-rozptyl: 100px; }
.som-panel--portal   { --panel-zare: rgba(123, 47, 247, .46); }

.som-panel--konfigurator { animation: som-plavani 38s var(--ease-vlna)  -2.5s infinite; }
.som-panel--aplikace     { animation: som-plavani 46s var(--ease-vlna)  -7.2s infinite; }
.som-panel--automat      { animation: som-plavani 34s var(--ease-vlna)  -4.8s infinite; }
.som-panel--portal       { animation: som-plavani 52s var(--ease-vlna) -11.3s infinite; }


/* ── Vnitřek ukázek ─────────────────────────────────────────────────────
   Naznačené rozhraní, ne vymyšlená data o firmě. Čísla smí být jen tam,
   kde lišta panelu nese štítek „Demo". */

/* Konfigurátor: produkt vlevo, volba povrchu vpravo. */
.som-panel__telo--konfigurator {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 78px);
    gap: var(--space-3);
    align-items: start;
}
.som-ukazka-plocha {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 46, 154, .22), transparent 55%),
        linear-gradient(0deg, var(--c-surface-2), var(--c-surface));
    border: 1px solid var(--c-line);
}
.som-ukazka-plocha img { display: block; width: 100%; height: 100%; object-fit: cover; }

.som-ukazka-povrchy { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.som-ukazka-povrch {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 10px;
    color: var(--c-text-3);
}
.som-ukazka-povrch.je-vybrany {
    border-color: var(--c-accent-line);
    background: var(--c-accent-soft);
    color: var(--c-text);
}
.som-ukazka-vzorek {
    width: 12px; height: 12px; flex: none;
    border: 1px solid var(--c-line-strong);
    border-radius: 50%;
}
.som-ukazka-vzorek--antracit { background: #35353F; }
.som-ukazka-vzorek--dub      { background: linear-gradient(140deg, #C59355, #8A5E2E); }
.som-ukazka-vzorek--bila     { background: #EDEDF2; }
.som-ukazka-vzorek--cerna    { background: #0B0B12; }

/* Aplikace: bočnice s menu a hlavní plocha. */
.som-panel__aplikace {
    display: grid;
    /* 🔴 Bočnice musí být širší než nejdelší položka menu. Při 96 px se
       „Automatizace" zalomila na dva řádky a menu přestalo být sloupcem
       stejně vysokých položek. */
    grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
    min-height: 0;
}
.som-ukazka-bocnice {
    padding: var(--space-3);
    border-right: 1px solid var(--c-line);
    background: rgba(255, 255, 255, .02);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.som-ukazka-znacka {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-4);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c-text);
}
.som-ukazka-znacka svg { display: block; width: 16px; height: 16px; flex: none; color: var(--c-accent); }

.som-ukazka-nabidka { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.som-ukazka-nabidka__polozka {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    color: var(--c-text-3);
    /* Ukázkové menu se nelámе — raději ořez než dvouřádková položka
       uprostřed jinak jednořádkového sloupce. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.som-ukazka-nabidka__polozka.je-aktivni {
    background: var(--c-accent-soft);
    color: var(--c-text);
}

.som-ukazka-tecka {
    width: 6px; height: 6px; flex: none;
    border-radius: 50%;
    background: var(--c-text-3);
}
.som-ukazka-tecka--akcent { background: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.som-ukazka-tecka--ok     { background: var(--c-ok); box-shadow: 0 0 0 3px rgba(61, 220, 151, .14); }
.som-ukazka-nabidka__polozka.je-aktivni .som-ukazka-tecka { background: var(--c-accent); }

.som-ukazka-plocha-app { padding: var(--space-3) var(--space-4) var(--space-4); min-width: 0; }
.som-ukazka-uvitani { margin-bottom: var(--space-3); }
.som-ukazka-uvitani strong { display: block; font-size: 15px; font-weight: 700; }
.som-ukazka-uvitani span { display: block; margin-top: 2px; font-size: 10px; color: var(--c-text-3); }

.som-ukazka-dlazdice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}
.som-ukazka-dlazdice > div {
    padding: var(--space-2);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .03);
}
.som-ukazka-cislo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 2px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
}
.som-ukazka-cislo svg { display: block; width: 10px; height: 10px; flex: none; color: var(--c-text-3); }
.som-ukazka-popis { font-size: 9px; letter-spacing: .04em; color: var(--c-text-3); }

.som-ukazka-aktivita {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--c-line);
    display: grid;
    gap: 7px;
}
.som-ukazka-aktivita__nadpis { font-size: 10px; font-weight: 700; color: var(--c-text-2); }
.som-ukazka-aktivita__radek {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 9px;
    color: var(--c-text-3);
}
.som-ukazka-aktivita__radek span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.som-ukazka-aktivita__radek em { flex: none; font-style: normal; opacity: .7; }

/* Automatizace: uzly spojené křivkami + tlačítko spuštění. */
.som-ukazka-schema {
    position: relative;
    aspect-ratio: 200 / 120;
}
.som-ukazka-schema__spoje {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--c-accent-line);
    stroke-width: 1.4;
    /* `vector-effect` drží čáru stejně tenkou i při nerovnoměrném roztažení
       viewBoxu — bez něj by svislé úseky byly jinak silné než vodorovné. */
    vector-effect: non-scaling-stroke;
}
.som-ukazka-uzel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26%;
    max-width: 38px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    color: var(--c-text-3);
}
.som-ukazka-uzel svg { display: block; width: 45%; height: 45%; }
.som-ukazka-uzel--akcent {
    border-color: var(--c-accent-line);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    box-shadow: 0 0 20px rgba(255, 46, 154, .35);
}
.som-ukazka-uzel--a { left: 16%; top: 25%; }
.som-ukazka-uzel--b { left: 84%; top: 25%; }
.som-ukazka-uzel--c { left: 50%; top: 60%; }
.som-ukazka-uzel--d { left: 16%; top: 80%; }

.som-ukazka-spust {
    position: absolute;
    left: 84%;
    top: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    max-width: 44px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(140deg, var(--c-accent), var(--c-violet));
    color: #fff;
    box-shadow: 0 0 0 6px rgba(255, 46, 154, .10), 0 10px 30px rgba(255, 46, 154, .45);
    animation: som-tep 3.2s var(--ease) infinite;
}
.som-ukazka-spust svg { display: block; width: 46%; height: 46%; }

/* Portál: kroky s ikonou a ukazatelem postupu. */
.som-ukazka-kroky { display: grid; gap: var(--space-3); }
.som-ukazka-krok { display: flex; align-items: center; gap: var(--space-3); }
.som-ukazka-krok__bod {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px; flex: none;
    border: 1.5px solid var(--c-line-strong);
    border-radius: 50%;
    color: var(--c-text-3);
}
.som-ukazka-krok__bod svg { display: block; width: 11px; height: 11px; }
.som-ukazka-krok__bod--hotovo { border-color: var(--c-ok); background: rgba(61, 220, 151, .16); color: var(--c-ok); }
.som-ukazka-krok__bod--bezi   { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); }
.som-ukazka-krok__text { font-size: 11px; color: var(--c-text-2); flex: none; min-width: 72px; }
.som-ukazka-krok__pruh {
    flex: 1 1 auto;
    height: 5px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
/* Míra postupu je VZHLED ukázky, ne data — proto třída, ne inline šířka.
   Inline `style` je v tomhle projektu zakázaný bez výjimky. */
.som-ukazka-krok__vypln {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--c-violet), var(--c-accent));
}
.som-ukazka-krok__vypln--plna    { width: 100%; }
.som-ukazka-krok__vypln--vetsina { width: 64%; }
.som-ukazka-krok__vypln--zacatek { width: 18%; }

/* 🔴 `.som-stitek` má `white-space: nowrap`, protože odznak se lámat nemá.
   Tenhle popisek ale žádný odznak není — je to celá věta a na telefonu se
   uřízla na obou stranách. Pravidlo stojí až za `.som-stitek`, takže ho při
   stejné specifičnosti přebíjí pořadím — žádné `!important`. */
.som-hero__popisek {
    margin: 0;
    max-width: 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.5;
}


/* ── 11 · SEKCE: BĚŽÍCÍ PRUH ────────────────────────────────────────────── */

.som-pruh {
    position: relative;
    border-block: 1px solid var(--c-line);
    background: var(--c-bg-raised);
    padding-block: var(--space-6);
    overflow: hidden;
}
/* Nádech akcentu zespodu, aby pruh nebyl jen šedý mezičlánek mezi dvěma
   tmavými sekcemi. */
.som-pruh::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 70%;
    pointer-events: none;
    background: radial-gradient(60% 100% at 50% 100%, rgba(255, 46, 154, .14), transparent 72%);
}

/* 🔴 Okno musí mít `overflow: hidden` a stopa `width: max-content`. Bez toho
   by se stopa zalomila na šířku stránky a z posuvu by zbylo cukání. */
.som-pruh__okno { position: relative; overflow: hidden; }
.som-pruh__stopa {
    display: flex;
    width: max-content;
    /* 114 s = 38 s na sadu × tři sady, o které se stopa posune. */
    animation: som-posun-pasu 114s linear infinite;
    will-change: transform;
}
.som-pruh__sada {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-right: var(--space-5);
    font-size: clamp(19px, 2.1vw, 32px);
    font-weight: 500;
    letter-spacing: -.02em;
}
.som-pruh__polozka {
    color: var(--c-text);
    white-space: nowrap;
    transition: color var(--t-hover) var(--ease);
}
a.som-pruh__polozka:hover { color: var(--c-accent); }
.som-pruh__delic { color: var(--c-accent); flex: none; }

/* Pás se zastaví, když na něj někdo najede — jinak se nedá kliknout na
   odkaz, který zrovna ujíždí pod kurzorem. */
.som-pruh__okno:hover .som-pruh__stopa,
.som-pruh__okno:focus-within .som-pruh__stopa { animation-play-state: paused; }


/* ── 12 · SEKCE: PŘEKÁŽKY (číslované karty) ─────────────────────────────── */

.som-karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-5);
    /* Perspektiva patří MŘÍŽCE, ne kartě. Kdyby ji měla karta sama, měla by
       každá vlastní úběžník uprostřed sebe a tři karty vedle sebe by se
       klonily každá jinam. Takhle se scéna chová jako jedna. */
    perspective: 1600px;
}
.som-karta {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Jednosloupcová mřížka uvnitř karty by měla implicitní sloupec `auto`
       (min-content = šířka obrázku) — flex sloupec tuhle past nemá. */
    min-width: 0;
    padding: var(--space-5);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    transform-style: preserve-3d;
    /* Úhly dosazuje `site.js` podle polohy kurzoru. Bez skriptu zůstanou
       nulové a karta je prostě rovná — nic se nerozbije. */
    transform: rotateX(var(--som-naklon-x)) rotateY(var(--som-naklon-y));
    /* 🔴 `transform` tu PŘECHOD NEMÁ. Úhel dojíždí k cíli už v `site.js`
       (snímek po snímku), takže druhé vyhlazování přes `transition` by se
       s ním sčítalo — karta by se za kurzorem táhla se zpožděním a při
       odjetí by dobíhala dvakrát. Ostatní vlastnosti přechod mají, protože
       se mění skokem na `:hover`. */
    transition: border-color var(--t-hover) var(--ease),
                background-color var(--t-hover) var(--ease),
                box-shadow var(--t-slow) var(--ease);
}
.som-karta:hover {
    border-color: var(--c-accent-line);
    background: var(--c-surface-2);
    box-shadow: var(--shadow-card), 0 0 60px -20px var(--c-accent-glow);
}
/* Odlesk, který putuje za kurzorem. Je to pseudoprvek nad celou kartou,
   takže nesmí brát kliknutí — jinak by přestalo fungovat tlačítko v patě. */
.som-karta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(28% 40% at var(--som-odlesk-x, 50%) var(--som-odlesk-y, 0%),
                rgba(255, 255, 255, .14), transparent 70%);
    transition: opacity var(--t-slow) var(--ease);
}
.som-karta:hover::after { opacity: 1; }
/* Náhled se při náklonu zvedne nad kartu — teprve tím to vypadá jako
   vrstvy, a ne jako obrázek nalepený na nakloněné ploše. */
.som-karta__plocha { transition: transform var(--t-slow) var(--ease); }
.som-karta:hover .som-karta__plocha { transform: translateZ(34px) scale(1.015); }
.som-karta:hover .som-karta__nadpis { transform: translateZ(18px); }
.som-karta__nadpis { transition: transform var(--t-slow) var(--ease); }

/* Na dotykových zařízeních kurzor neexistuje — náklon by se zasekl na
   hodnotě posledního doteku a karta by zůstala nakřivo. */
@media (hover: none), (pointer: coarse) {
    .som-karta { transform: none; }
    .som-karta:hover .som-karta__plocha,
    .som-karta:hover .som-karta__nadpis { transform: none; }
}
.som-karta__cislo {
    color: var(--c-text-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
}
.som-karta__plocha {
    margin: var(--space-4) 0 var(--space-5);
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    background:
        radial-gradient(70% 70% at 70% 20%, rgba(255, 46, 154, .22), transparent 70%),
        linear-gradient(160deg, var(--c-surface-2), #0A0A14);
    border: 1px solid var(--c-line);
}
.som-karta__plocha img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Bez nahraného obrázku — viz `SomigSections::plocha()`. */
.som-karta__plocha--prazdna { aspect-ratio: 16 / 4; margin-bottom: var(--space-4); }
.som-karta__nadpis { margin: 0 0 var(--space-3); font-size: 21px; font-weight: 700; }
.som-karta__text { margin: 0; color: var(--c-text-2); font-size: 16px; line-height: 1.6; }
.som-karta__pata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    /* Patička karty dolů jen tehdy, když nad ní něco je. Dva prvky
       s `margin-top:auto` ve flexu by si prostor rozdělily. */
    margin-top: auto;
    padding-top: var(--space-5);
}


/* ── 13 · SEKCE: POSTUP (kroky s ikonami) ───────────────────────────────── */

.som-postup {
    position: relative;
    overflow: hidden;
}
.som-postup__in {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: var(--space-8);
    align-items: center;
}
.som-postup__in > * { min-width: 0; }

.som-postup__kroky {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-5);
}
.som-krok { position: relative; min-width: 0; }

/* Hlava kroku má PEVNOU výšku, aby spojnice mezi kroky vycházela u všech
   ze stejné osy. Bez toho by si každý krok určil výšku sám podle obsahu. */
.som-krok__hlava {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 54px;
    margin-bottom: var(--space-4);
}
.som-krok__cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px; flex: none;
    border: 1px solid var(--c-line-strong);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-3);
}
.som-krok__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px; flex: none;
    border: 1px solid var(--c-accent-line);
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    box-shadow: 0 0 0 6px rgba(255, 46, 154, .05), 0 0 30px -6px var(--c-accent-glow);
}
.som-krok__ikona svg { display: block; width: 22px; height: 22px; }

/* Šipka mezi kroky — přesně přes mezeru mřížky, takže se trefí do dalšího
   kroku bez ohledu na šířku sloupce. Vodorovná čára a hrot jsou dva
   pseudoprvky téhož rodiče; třetí prvek by si značka nezasloužila.
   ⚠️ Zapíná se až od šířky, kde kroky jistě stojí v jedné řadě. */
@media (min-width: 1025px) {
    .som-krok:not(:last-child) .som-krok__hlava::after {
        content: '';
        position: absolute;
        left: calc(100% + var(--space-2));
        top: 50%;
        width: calc(var(--space-5) - var(--space-2) * 2);
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 46, 154, .15), var(--c-accent));
    }
    .som-krok:not(:last-child) .som-krok__hlava::before {
        content: '';
        position: absolute;
        left: calc(100% + var(--space-5) - var(--space-2) - 6px);
        top: 50%;
        width: 6px; height: 6px;
        transform: translateY(-50%) rotate(45deg);
        border-top: 1.5px solid var(--c-accent);
        border-right: 1.5px solid var(--c-accent);
    }
}
.som-krok__nadpis { margin: 0 0 var(--space-2); font-size: 19px; font-weight: 700; }
.som-krok__text { margin: 0; color: var(--c-text-2); font-size: 15px; line-height: 1.6; }

/* Světelný obrys pod kroky — dekorace z předlohy. */
.som-postup__zare {
    position: absolute;
    inset: auto 0 0 0;
    height: 220px;
    pointer-events: none;
    background: radial-gradient(60% 120% at 50% 100%, rgba(255, 46, 154, .22), transparent 70%);
}

/* Terén se světelnou stopou — v předloze nese celou spodní půlku sekce.
   Je to ryzí dekorace: `aria-hidden`, prázdný `alt`, bez odkazu. */
.som-postup__teren {
    position: absolute;
    inset: auto 0 0 0;
    height: 78%;
    pointer-events: none;
    /* 🔴 Maska, ne průhlednost. Rovnoměrně ztmavený obrázek by měl ostrou
       horní hranu přes celou šířku sekce; maska ho nechá vyrůst ze tmy. */
    mask-image: linear-gradient(to bottom, transparent, #000 52%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 52%);
}
.som-postup__teren img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: .72;
}


/* ── Světla putující po stopě v terénu ─────────────────────────────────
   Stopa je zapečená v obrázku; tohle po ní posílá světla. Vrstva má
   STEJNÝ ořez jako fotka (viz `SomigSections::drahaSvetel()`), takže
   sedí i po oříznutí na jiný poměr stran. */

.som-postup__draha {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Táž maska jako u fotky — bez ní by světla u horní hrany visela
       ve vzduchu, zatímco terén pod nimi se ztrácí do tmy. */
    mask-image: linear-gradient(to bottom, transparent, #000 52%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 52%);
}

/* Celá stopa dýchá a jen posiluje čáru z obrázku. */
.som-draha__stopa {
    fill: none;
    stroke: rgba(255, 92, 176, .5);
    stroke-width: 3;
    stroke-linecap: round;
    animation: som-stopa-dech 13s var(--ease-vlna) infinite;
}

/* Jedno světlo. 🔴 Krátká čárka s obrovskou mezerou je na dráze jediná,
   takže se chová jako tečka, která po ní jede — a jede po křivce sama,
   bez počítání souřadnic v skriptu.
   ⚠️ Animuje se jen `stroke-dashoffset` a `opacity`. Tloušťka zůstává
      pevná: měnit ji by znamenalo překreslovat tvar v každém snímku. */
.som-draha__svetlo {
    fill: none;
    stroke: var(--svetlo-barva, #fff);
    stroke-width: var(--svetlo-tloustka, 9);
    stroke-linecap: round;
    stroke-dasharray: 4 996;
    filter: drop-shadow(0 0 9px var(--svetlo-barva, #fff));
    animation: som-svetlo-jede var(--svetlo-cas, 34s) linear var(--svetlo-zpozdeni, 0s) infinite,
               som-svetlo-zari var(--svetlo-zar, 7s) var(--ease-vlna) var(--svetlo-zpozdeni, 0s) infinite;
}
.som-draha__svetlo--1 { --svetlo-barva: #fff;                   --svetlo-cas: 34s; --svetlo-zpozdeni: 0s;   --svetlo-zar: 7s;  --svetlo-tloustka: 10; }
.som-draha__svetlo--2 { --svetlo-barva: rgb(255, 120, 190);     --svetlo-cas: 41s; --svetlo-zpozdeni: -11s; --svetlo-zar: 9s;  --svetlo-tloustka: 8; }
.som-draha__svetlo--3 { --svetlo-barva: rgb(255, 46, 154);      --svetlo-cas: 29s; --svetlo-zpozdeni: -19s; --svetlo-zar: 6s;  --svetlo-tloustka: 12; }
.som-draha__svetlo--4 { --svetlo-barva: rgb(170, 120, 255);     --svetlo-cas: 47s; --svetlo-zpozdeni: -27s; --svetlo-zar: 11s; --svetlo-tloustka: 7; }


/* ── Dělicí paprsek mezi sekcemi ───────────────────────────────────────
   🔴 ŽÁDNÁ NOVÁ ZNAČKA. Selektor `#obsah > section + section` sedí i na
      sekce ze Stavebnice jádra, do kterých se zasahovat nesmí — a `+`
      sám zajistí, že úvodní plocha nahoře čáru nedostane. */

/* 🔴 SEKCE NENÍ PŘÍMÝ POTOMEK `#obsah`. Stavebnice jádra každou balí
   do `<div class="bldr-section-wrap">` a mezi obaly navíc sází
   `<style data-builder-dynamic>` s odsazením. Selektor `#obsah > section`
   proto nesedl na nic a paprsek tiše neexistoval — v HTML nic nechybělo,
   jen se nic nevykreslilo.
   ⚠️ A proto taky `:not(:first-of-type)` místo `+`: sourozenecký `+` by
      selhal pokaždé, když mezi dvěma obaly stojí `<style>`. `:first-of-type`
      počítá jen prvky téhož typu, takže `<style>` do pořadí nemluví. */
#obsah > .bldr-section-wrap {
    position: relative;
    /* 🔴 `clip`, ne `hidden`. Puls dojíždí AŽ ZA pravou hranu — bez ořezu
       by roztáhl stránku do šířky a vyrobil vodorovný posuvník. `hidden`
       by ale ze sekce udělalo posuvný kontejner a zabilo `position: sticky`
       uvnitř; `clip` jen ořízne vykreslení a svisle nechá `visible`. */
    overflow-x: clip;
}

#obsah > .bldr-section-wrap:not(:first-of-type)::before,
#obsah > .bldr-section-wrap:not(:first-of-type)::after {
    content: '';
    position: absolute;
    left: 0;
    pointer-events: none;
    z-index: 2;
}
/* Klidová linka. Sotva znatelná — ve stránce nemá dělat mříž. */
#obsah > .bldr-section-wrap:not(:first-of-type)::before {
    top: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, .09) 14%,
        rgba(255, 255, 255, .09) 86%,
        transparent);
}
/* Puls: široký, nízký, s bílým jádrem. */
#obsah > .bldr-section-wrap:not(:first-of-type)::after {
    top: -2px;
    width: 32%;
    height: 5px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg,
        transparent,
        var(--laser-barva, rgb(255, 46, 154)) 42%,
        #fff 50%,
        var(--laser-barva, rgb(255, 46, 154)) 58%,
        transparent);
    filter: blur(1.5px);
}
/* Třídu nasazuje `site.js`, jakmile sekce přijede do záběru. */
#obsah > .bldr-section-wrap.je-paprsek::after { animation: som-laser 2.6s var(--ease-vlna) 1; }

/* Pokaždé jiná barva — čtyři tóny dokola. Pravidelné střídání vypadá
   záměrně, náhodné by vypadalo jako chyba. */
#obsah > .bldr-section-wrap:nth-of-type(4n+2)::after { --laser-barva: rgb(255, 46, 154); }
#obsah > .bldr-section-wrap:nth-of-type(4n+3)::after { --laser-barva: rgb(123, 47, 247); }
#obsah > .bldr-section-wrap:nth-of-type(4n)::after   { --laser-barva: rgb(77, 212, 247); }
#obsah > .bldr-section-wrap:nth-of-type(4n+1)::after { --laser-barva: rgb(255, 170, 215); }

/* ── 14 · SEKCE: VELKÁ VÝZVA ────────────────────────────────────────────── */

.som-vyzva {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-10);
    background: var(--c-bg);
}
.som-vyzva__zare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(50% 80% at 88% 50%, rgba(255, 46, 154, .35), transparent 70%),
        radial-gradient(40% 70% at 70% 90%, rgba(123, 47, 247, .22), transparent 70%);
}
/* Výzva sdílí světelnou kulisu s hero sekcí — jen tišší, aby pruhy
   nepřekryly tlačítko, a s podlahou posunutou níž. */
.som-vyzva .som-paprsky { opacity: .6; }
.som-vyzva .som-podlaha { height: 40%; opacity: .7; }
/* Odlesk na podlaze pod výzvou — v předloze odděluje poslední sekci
   od patičky. */
.som-vyzva__prah {
    position: absolute;
    inset: auto 0 0 0;
    height: 160px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(255, 46, 154, .20), transparent 80%);
}

.som-vyzva__in {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: var(--space-7);
    align-items: center;
}
.som-vyzva__in > * { min-width: 0; }
.som-vyzva__nadpis { margin: 0; }
.som-vyzva__text { margin: var(--space-5) 0 0; color: var(--c-text-2); font-size: 19px; max-width: 52ch; }
.som-vyzva__akce { justify-content: flex-end; }


/* ── 15 · SEKCE: ŘEŠENÍ (jednotná osnova) ───────────────────────────────── */
/* Zadání § 5: „Každý typ řešení popsat ve stejném pořadí: pro koho je, jaký
   problém řeší, co může obsahovat, co musí dodat klient, ukázka, způsob
   realizace a výzva ke konzultaci."  Osnovu drží sekce, ne kázeň redaktora. */

.som-reseni { display: grid; gap: var(--space-6); }
.som-reseni__blok {
    padding: var(--space-7);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-xl);
}
.som-reseni__hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.som-reseni__nadpis { margin: 0; font-size: clamp(24px, 2.4vw, 34px); }
.som-reseni__mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-5);
}
.som-reseni__pol { min-width: 0; }
.som-reseni__pol dt {
    margin: 0 0 var(--space-2);
    color: var(--c-text-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.som-reseni__pol dd { margin: 0; color: var(--c-text-2); font-size: 16px; line-height: 1.6; }
.som-reseni__pata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--c-line);
}


/* ── 16 · SEKCE: UKÁZKY A REFERENCE ─────────────────────────────────────── */
/* Zadání § 5: demo musí být viditelně odlišené od skutečné reference
   a musí být popsané, co ukázka NEumí. Odznak proto kreslí sekce sama. */

.som-ukazky {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--space-5);
    perspective: 1600px;
}
.som-ukazka {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    /* 🔴 `overflow: hidden` tu MUSÍ zůstat — náhled je zarovnaný s horní
       hranou a bez ořezu by přerostl zaoblené rohy. Proto se tahle dlaždice
       naklání, ale nic z ní nevystupuje dopředu (žádné `translateZ`). */
    overflow: hidden;
    transform: rotateX(var(--som-naklon-x)) rotateY(var(--som-naklon-y));
    /* Bez přechodu na `transform` — ze stejného důvodu jako u `.som-karta`. */
    transition: border-color var(--t-hover) var(--ease),
                box-shadow var(--t-slow) var(--ease);
}
.som-ukazka:hover {
    border-color: var(--c-accent-line);
    box-shadow: var(--shadow-card), 0 0 60px -22px var(--c-accent-glow);
}
.som-ukazka__plocha {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(70% 80% at 30% 10%, rgba(123, 47, 247, .25), transparent 70%),
        linear-gradient(160deg, var(--c-surface-2), #090912);
    border-bottom: 1px solid var(--c-line);
    overflow: hidden;
}
.som-ukazka__plocha img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--t-slow) var(--ease);
}
.som-ukazka:hover .som-ukazka__plocha img { transform: scale(1.05); }
/* Náhled přechází do těla dlaždice, aby nad ním odznak „Demo" držel
   kontrast i na světlejším místě obrázku. */
.som-ukazka__plocha::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to bottom, transparent, rgba(17, 17, 32, .9));
    pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
    .som-ukazka { transform: none; }
}
.som-ukazka__plocha--prazdna { aspect-ratio: 16 / 4; }
.som-ukazka__telo { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1 1 auto; }
.som-ukazka__odznaky { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.som-ukazka__nadpis { margin: 0; font-size: 21px; font-weight: 700; }
.som-ukazka__text { margin: 0; color: var(--c-text-2); font-size: 16px; line-height: 1.6; }
.som-ukazka__meze {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, .03);
    border-left: 2px solid var(--c-warn);
    border-radius: var(--radius-sm);
    color: var(--c-text-3);
    font-size: 14px;
    line-height: 1.55;
}
.som-ukazka__pata { margin-top: auto; padding-top: var(--space-3); }

.som-stitek--demo      { border-color: var(--c-warn); background: rgba(255, 176, 32, .12); color: var(--c-warn); }
.som-stitek--reference { border-color: var(--c-ok);   background: rgba(61, 220, 151, .12); color: var(--c-ok); }


/* ── 17 · SEKCE: PLÁN ZMĚN ──────────────────────────────────────────────── */
/* Zadání § 5: „Stránka rozvoje ukáže vzor plánu změn: problém, navržená
   změna, očekávaný přínos, náročnost, priorita a stav schválení." */

.som-plan { width: 100%; }
.som-plan__obal {
    overflow-x: auto;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    /* Po dojetí na konec nesmí kolečko plynule pokračovat rolováním stránky. */
    overscroll-behavior-x: contain;
}
.som-plan table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.som-plan th, .som-plan td {
    padding: var(--space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-line);
}
.som-plan th {
    color: var(--c-text-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.som-plan td { color: var(--c-text-2); }
.som-plan tr:last-child td { border-bottom: 0; }
.som-plan__nazev { color: var(--c-text); font-weight: 600; }

/* Stav se nikdy nerozlišuje jen barvou — odznak nese i slovo. */
.som-odznak {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.som-odznak--schvaleno { border-color: var(--c-ok);   color: var(--c-ok); }
.som-odznak--ceka      { border-color: var(--c-warn); color: var(--c-warn); }
.som-odznak--navrh     { border-color: var(--c-line-strong); color: var(--c-text-3); }


/* ── 18 · SEKCE: KROKY SPOLUPRÁCE ───────────────────────────────────────── */
/* Zadání § 4/4: „U každého kroku návštěvník zjistí, co potřebujeme od něj
   a jaký výstup dostane."  Obě pole jsou v sekci povinná osnova. */

.som-kroky { display: grid; gap: var(--space-4); counter-reset: somkrok; }
.som-kroky__pol {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, .9fr);
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-5);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
/* Světelný pruh u levé hrany, který se při najetí roztáhne přes celý řádek.
   Čtyři identické tmavé obdélníky pod sebou byly to nejplošší místo webu. */
.som-kroky__pol::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--c-accent), var(--c-violet));
    opacity: .55;
    transition: opacity var(--t-hover) var(--ease);
}
.som-kroky__pol::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, rgba(255, 46, 154, .10), transparent 42%);
    transition: opacity var(--t-slow) var(--ease);
}
.som-kroky__pol:hover { border-color: var(--c-accent-line); background: var(--c-surface-2); }
.som-kroky__pol:hover::before { opacity: 1; }
.som-kroky__pol:hover::after { opacity: 1; }
.som-kroky__cislo {
    counter-increment: somkrok;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--c-accent-line);
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 15px;
    font-weight: 700;
}
.som-kroky__cislo::before { content: counter(somkrok, decimal-leading-zero); }
.som-kroky__nadpis { margin: 0 0 var(--space-2); font-size: 20px; font-weight: 700; }
.som-kroky__text { margin: 0; color: var(--c-text-2); font-size: 16px; line-height: 1.6; }
.som-kroky__vymena { display: grid; gap: var(--space-3); }
.som-kroky__vymena dt {
    margin: 0 0 var(--space-1);
    color: var(--c-text-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.som-kroky__vymena dd { margin: 0; color: var(--c-text-2); font-size: 15px; line-height: 1.55; }


/* ── 19 · SEKCE: ÚROVNĚ NABÍDKY ─────────────────────────────────────────── */

.som-urovne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-5);
}
.som-uroven {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-6);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-xl);
    transition: border-color var(--t-hover) var(--ease),
                box-shadow var(--t-slow) var(--ease),
                transform var(--t-hover) var(--ease);
}
/* Nádech barvy v rohu — tři stejné tmavé sloupce vedle sebe jinak vypadají
   jako tabulka, ne jako nabídka. Prostřední (zvýrazněná) ho má silnější,
   takže oko padne na ni. */
.som-uroven::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(62% 48% at 100% 0%, rgba(123, 47, 247, .16), transparent 70%);
}
.som-uroven:hover { border-color: var(--c-accent-line); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.som-uroven--zvyraznena { border-color: var(--c-accent-line); box-shadow: 0 0 50px rgba(255, 46, 154, .12); }
.som-uroven--zvyraznena::before {
    background: radial-gradient(62% 48% at 100% 0%, rgba(255, 46, 154, .22), transparent 70%);
}
/* Světelná hrana nahoře u zvýrazněné úrovně — stejný prvek jako u panelů
   v hero, aby web mluvil jedním jazykem. */
.som-uroven--zvyraznena::after {
    content: '';
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--c-accent) 50%, transparent);
}
/* Obsah musí ležet NAD barevným nádechem, jinak ho překryje. */
.som-uroven > * { position: relative; }
.som-uroven__nadpis { margin: 0 0 var(--space-3); font-size: 24px; font-weight: 700; }
.som-uroven__castka { margin: 0 0 var(--space-4); color: var(--c-text); font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.5px; }
.som-uroven__text { margin: 0 0 var(--space-5); color: var(--c-text-2); font-size: 16px; line-height: 1.6; }
.som-uroven__seznam { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.som-uroven__seznam li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--c-text-2);
    font-size: 16px;
    line-height: 1.55;
}
.som-uroven__seznam li + li { margin-top: var(--space-3); }
.som-uroven__seznam svg { display: block; width: 16px; height: 1.55em; flex: none; color: var(--c-accent); }
.som-uroven__pata { margin-top: auto; }
.som-uroven__cena { margin: 0 0 var(--space-4); color: var(--c-text-3); font-size: 14px; }


/* ── 20 · SJEDNOCENÍ SEKCÍ ZE STAVEBNICE JÁDRA ──────────────────────────── */
/* Stavebnice jádra kreslí vlastní třídy (`section`, `container`, `card`,
   `btn`…). Bez tohohle bloku by se univerzální sekce vykreslily jako holý
   text na tmavém podkladu. Hodnoty se berou z TÝCHŽ tokenů jako vlastní
   sekce — jeden design, ne dvě generace. */

.section { padding-block: var(--space-10); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.section-header { margin-bottom: var(--space-8); max-width: 60ch; }
.section-header-eyebrow {
    color: var(--c-text-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}
.section-header h1, .section-header h2 { margin: 0 0 var(--space-4); }
.section-header p { margin: 0; color: var(--c-text-2); font-size: 19px; line-height: 1.6; }

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card-body { padding: var(--space-6); }
.card-body > h2, .card-body > h3 { margin-top: 0; }

/* Tlačítka jádra dostanou vzhled značky. Pořadí: tenhle blok stojí za
   definicí `.som-btn`, takže `.btn.som-btn` nevzniká konflikt. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--ctl-h);
    padding-inline: var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: 600 15px/1 var(--font-body);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--t-hover) var(--ease),
                border-color var(--t-hover) var(--ease),
                color var(--t-hover) var(--ease),
                transform var(--t-hover) var(--ease);
}
.btn svg { display: block; width: 16px; height: 16px; flex: none; }
.btn-lg { height: var(--ctl-h-lg); padding-inline: var(--space-6); font-size: 16px; }
.btn-sm { height: var(--ctl-h-sm); padding-inline: var(--space-4); font-size: 14px; }

.btn-primary { background: var(--c-accent); color: #fff; }
.btn-primary:hover { background: var(--c-accent-hover); color: #fff; transform: translateY(-2px); }
.btn-primary:active { background: var(--c-accent-active); transform: translateY(0); }

.btn-secondary { background: #fff; color: #07070E; }
.btn-secondary:hover { background: #E9E9F2; color: #07070E; }

.btn-accent { background: var(--c-violet); color: #fff; }
.btn-accent:hover { background: #8F4BFF; color: #fff; }

.btn-ghost, .btn-outline {
    background: transparent;
    border-color: var(--c-line-strong);
    color: var(--c-text);
}
.btn-ghost:hover, .btn-outline:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .45);
    color: var(--c-text);
}

/* Formulářové třídy jádra. */
.form-input, .form-textarea, .form-select { /* zděděné názvy — vzhled drží selektory typů výš */ }
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-4);
}
.form-group { min-width: 0; }
.form-group + .form-group, .form-row + .form-group, .form-group + .form-row { margin-top: var(--space-4); }

/* 🔴 ODSAZENÍ SEKCÍ JÁDRA. Stavebnice vypisuje odsazení do
   `<style data-builder-dynamic>` jen u sekcí, kde ho redaktor nastavil —
   u ostatních nevypíše nic a sekce pak nemá ŽÁDNÉ. Na podstránkách
   (O Somig, Služby, zásady) tak texty lepily na záhlaví i na sebe
   navzájem a stránka vypadala jako nedodělaná. Tohle je výchozí hodnota,
   kterou nastavení v administraci kdykoli přebije (pravidlo s `#id`
   má vyšší specifičnost). */
.builder-section { padding-block: var(--space-8); }

/* Textová sekce zabírá jen levou polovinu (kvůli délce řádku), takže pravá
   zůstávala jako černá díra. Nádech fialové ji zaplní, aniž by soupeřil
   s textem — je to podklad, ne prvek. */
.section-text { position: relative; }
.section-text::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(40% 72% at 86% 50%, rgba(123, 47, 247, .11), transparent 72%);
}
.section-text > .section-inner { position: relative; }

/* Textová sekce. `text-width-narrow` je třída jádra, která do téhle chvíle
   nic nedělala — řádek dlouhý přes celý kontejner se nedá číst. */
.builder-text { max-width: 78ch; }
.builder-text.text-width-narrow { max-width: 68ch; }
.builder-text.text-width-wide { max-width: none; }
.builder-text > :first-child { margin-top: 0; }
.builder-text > :last-child { margin-bottom: 0; }
.builder-text h2 { margin: var(--space-7) 0 var(--space-4); }
.builder-text h3 { margin: var(--space-6) 0 var(--space-3); font-size: 21px; }
.builder-text p { margin: 0 0 var(--space-4); color: var(--c-text-2); font-size: 18px; line-height: 1.7; }
.builder-text ul, .builder-text ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--c-text-2); }
.builder-text li { margin-bottom: var(--space-2); line-height: 1.7; }
.builder-text strong { color: var(--c-text); }

/* Text s obrázkem (`text_image`) — jádro dává jen třídy, vzhled ne.
   Na webu ji používá stránka reference: o projektu vlevo, snímek webu vpravo. */
.text-image-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
}
.text-image-wrap > * { min-width: 0; }
.text-image-left .text-image-figure { order: -1; }
.text-image-text h2 { margin: 0 0 var(--space-5); }
.text-image-content > :last-child { margin-bottom: 0; }
.text-image-content p { margin: 0 0 var(--space-4); color: var(--c-text-2); font-size: 18px; line-height: 1.7; }
.text-image-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
@media (max-width: 1024px) {
    .text-image-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .text-image-wrap .text-image-figure { order: -1; }
}

/* Časté dotazy — `faq_dynamic` i sekce Akordeon (`accordion`, od 11. 11. 2026 na
   stránce Časté otázky) dávají jen `<details>` bez vzhledu. Obléká je JEDNA sada
   pravidel, ať dvě harmoniky nevypadají každá jinak.
   ⚠️ Výchozí BÍLÉ pozadí sekce dosazuje jádro přes `#bsw-…` (přebije třídu),
   proto ho seed vypíná nastavením sekce `background_color: transparent`. */
/* Sekce FAQ si kreslí vlastní `<section>` BEZ `.builder-section`, takže výchozí
   odsazení z téhle sekce stylopisu na ni nesedí — skupiny by na sebe lepily. */
.builder-faq-section { padding-block: var(--space-7); }
.builder-faq-section .section-header { margin-bottom: var(--space-5); }
/* Nadpis kategorie nad akordeonem je samostatná sekce Stavebnice — bez tohohle
   by mezi nadpisem a jeho otázkami zela mezera dvou sekcí (128 px). */
.section-heading:has(+ .section-accordion) { padding-bottom: var(--space-5); }
.section-heading + .section-accordion { padding-top: 0; }
.section-heading:has(+ .section-accordion) .section-header { margin-bottom: 0; }

.faq-accordion, .builder-accordion { display: grid; gap: var(--space-3); max-width: 78ch; }
.faq-item, .accordion-item {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    transition: border-color var(--t-hover) var(--ease);
}
.faq-item:hover, .faq-item[open], .accordion-item:hover, .accordion-item[open] { border-color: var(--c-accent-line); }
.faq-item summary, .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-4) var(--space-5);
    color: var(--c-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker, .accordion-header::-webkit-details-marker { display: none; }
/* Plus, které se po otevření otočí na křížek — čistě CSS, bez ikony v HTML jádra. */
.faq-item summary::after, .accordion-header::after {
    content: '+';
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    color: var(--c-accent);
    font-size: 18px;
    line-height: 1;
    transition: transform var(--t-expand) var(--ease);
}
.faq-item[open] summary::after, .accordion-item[open] > .accordion-header::after { transform: rotate(45deg); }
.faq-item summary:focus-visible, .accordion-header:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: var(--radius-lg); }
.faq-item-body, .accordion-body { padding: 0 var(--space-5) var(--space-5); }
.faq-item-body p, .accordion-body p { margin: 0 0 var(--space-3); color: var(--c-text-2); font-size: 17px; line-height: 1.7; }
.faq-item-body > :last-child, .accordion-body > :last-child { margin-bottom: 0; }

@media (max-width: 480px) {
    .faq-item summary, .accordion-header { padding: var(--space-4); font-size: 16px; }
    .faq-item-body, .accordion-body { padding: 0 var(--space-4) var(--space-4); }
}

/* Mřížky a obaly stavebnice. */
.bldr-section-wrap { position: relative; }
.builder-anchor {
    display: block;
    height: 0;
    /* Bez tohohle zakryje lepivá hlavička cíl odkazu a vypadá to,
       že kotva skočila vedle. */
    scroll-margin-top: calc(var(--header-h) + var(--space-5));
}
.builder-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-6);
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    /* Odsazení nese ŘÁDEK, sekce uvnitř ne — jinak se sčítá a obsah v řádku
       začíná o kus dál než obsah nad ním. */
    padding-inline: var(--gutter);
}
.builder-row > * { min-width: 0; }
.builder-row .container { max-width: none; padding-inline: 0; }

.apt-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-6);
}
.apt-detail-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.apt-detail-grid > * { min-width: 0; }

.contact-form-section { padding-block: var(--space-9); }

/* ── Kontaktní formulář ze Stavebnice jádra ────────────────────────────
   🔴 Jádro pro něj vlastní vzhled nemá — bez tohohle bloku se deset polí
      roztáhlo přes celou šířku kontejneru (vstup „Jméno" široký 860 px)
      a formulář začínal rovnou pod záhlavím bez jediné mezery. Na stránce,
      která má jako JEDINÝ cíl poptávku, to je ta nejdražší chyba.
   ⚠️ Třídy jsou jádrové, proto se tu jen oblékají — nic se nepřejmenovává.
      Kdyby je vydání změnilo, projeví se to ztrátou vzhledu, ne pádem. */
.section-contact_form { padding-block: var(--space-9) var(--space-10); }

.builder-contact-split {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
.builder-contact-split > * { min-width: 0; }
/* Bez postranního sloupce se formulář nesmí roztáhnout přes celý
   kontejner — řádek dlouhý 1300 px se nedá pohodlně vyplnit. */
.builder-contact-split:not(:has(.builder-contact-aside)) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 820px;
}

.builder-contact-form {
    position: relative;
    padding: var(--space-6);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}
/* Světelná hrana nahoře — stejný prvek jako u panelů a zvýrazněné úrovně. */
.builder-contact-form::before {
    content: '';
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--c-accent) 50%, transparent);
}
.builder-contact-form .form-heading { margin: 0 0 var(--space-2); font-size: 28px; font-weight: 800; }
.builder-contact-form .form-description { margin: 0 0 var(--space-6); color: var(--c-text-2); font-size: 16px; }

/* Krátká pole vedle sebe, dlouhá přes celou šířku — tak, jak to říkají
   třídy `--half` / `--full`, které jádro na pole už dává. */
.form-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
}
.form-fields-grid > .form-group { min-width: 0; }
.form-fields-grid > .form-field-width-full { grid-column: 1 / -1; }
/* `.form-group + .form-group` výš přidává horní mezeru — v mřížce ji dělá
   `gap` a sčítaly by se. */
.form-fields-grid > .form-group + .form-group { margin-top: 0; }

.builder-contact-aside {
    padding: var(--space-5);
    border: 1px solid var(--c-line);
    border-left: 2px solid var(--c-accent-line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .02);
    color: var(--c-text-2);
    font-size: 15px;
    line-height: 1.6;
}
.builder-contact-aside h2, .builder-contact-aside h3 { margin-top: 0; font-size: 19px; }

@media (max-width: 1024px) {
    .builder-contact-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .form-fields-grid { grid-template-columns: minmax(0, 1fr); }
    .builder-contact-form { padding: var(--space-5); }
}

/* Pomocné třídy jádra, aby sekce nespadly na výchozí hodnoty prohlížeče. */
.text-muted { color: var(--c-text-3); }
.text-sm { font-size: 15px; }
.m-0 { margin: 0; }
.mb-medium { margin-bottom: var(--space-5); }
.mt-medium { margin-top: var(--space-5); }


/* ── Aktuality (modul jádra `aktuality`) ───────────────────────────────
   Šablony modulu (`views/news/`) jsou JÁDROVÉ a kreslí třídy `jta-*`.
   Nepřejmenovávat a nenárokovat — vzhled se obléká tady, šablony dál
   dostávají opravy z vydání. Kdyby vydání třídy změnilo, projeví se to
   ztrátou vzhledu, ne pádem (stejně jako u `.builder-*` výš).
   Záhlaví = záhlaví podstránky (`.som-hero--zahlavi`), karty = dlaždice
   ukázek (`.som-ukazka`), text článku = `.prose`. Žádná třetí generace. */

/* Záhlaví výpisu i článku. Vytahuje se pod lepivou hlavičku stejně jako
   `.som-hero`: záporný okraj + stejně velké odsazení navíc. Mobilní hodnoty
   řeší tokeny (`--header-h`, `--space-9` se pod 1024 px samy zmenší),
   takže tu žádný mediální dotaz nepřepisuje `padding-block`. */
.jta-page-hero {
    position: relative;
    overflow: hidden;
    margin-top: calc(var(--header-h) * -1);
    padding-block: calc(var(--header-h) + var(--space-9)) var(--space-8);
    border-bottom: 1px solid var(--c-line);
    background:
        radial-gradient(40% 70% at 6% 0%, rgba(77, 212, 247, .10), transparent 62%),
        radial-gradient(46% 90% at 92% 10%, rgba(255, 46, 154, .22), transparent 70%),
        radial-gradient(40% 80% at 70% 110%, rgba(123, 47, 247, .18), transparent 72%),
        var(--c-bg);
}
.jta-page-hero__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.jta-page-hero__inner > * { max-width: 900px; }
/* U článku stojí nadpis nad TÝMŽ sloupcem jako text (`.jta-project__inner`),
   jinak by začínal o 230 px vlevo od prvního odstavce. */
.jta-page-hero:has(+ .jta-project__body) .jta-page-hero__inner { max-width: var(--container-uzky); }
/* Titulek článku bývá věta, ne slovo — ve velikosti výpisu šel na čtyři řádky. */
.jta-page-hero:has(+ .jta-project__body) .jta-page-hero__title { font-size: clamp(32px, 4vw, 56px); line-height: 1.08; }
.jta-page-hero__title { margin: 0; font-size: clamp(36px, 5vw, 72px); line-height: 1.04; letter-spacing: -.035em; }
.jta-page-hero__perex {
    margin: var(--space-5) 0 0;
    color: var(--c-text-2);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    max-width: 52ch;
}
.jta-page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-5) 0 0;
    color: var(--c-text-3);
    font-size: 15px;
    line-height: 1.5;
}
.jta-page-hero__meta-sep { color: var(--c-accent); }
.jta-page-hero .jta-news-source__badge { margin-bottom: var(--space-4); }

/* Drobečky — bez nich by se vykreslily jako očíslovaný seznam. */
.jta-crumbs { margin-bottom: var(--space-5); }
.jta-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
}
.jta-crumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.jta-crumbs__link { color: var(--c-text-2); text-decoration: none; }
.jta-crumbs__link:hover { color: var(--c-accent-hover); }
.jta-crumbs__sep { color: var(--c-text-3); }
.jta-crumbs__current { color: var(--c-text-3); overflow-wrap: anywhere; }

/* Výpis článků */
.jta-news { padding-block: var(--space-9); }
.jta-news__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.jta-news__heading { margin: 0 0 var(--space-7); font-size: clamp(26px, 3vw, 40px); }
.jta-news__empty { margin: 0; color: var(--c-text-2); font-size: 19px; }
.jta-news__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: var(--space-5);
}

/* Karta. Šablona nemá obal pro text, proto odsazuje každý prvek zvlášť
   a pořadí (datum NAD nadpisem) řídí `order` — markup patří jádru. */
.jta-news__item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-bottom: var(--space-5);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--t-hover) var(--ease),
                box-shadow var(--t-slow) var(--ease);
}
.jta-news__item:hover {
    border-color: var(--c-accent-line);
    box-shadow: var(--shadow-card), 0 0 60px -22px var(--c-accent-glow);
}
.jta-news__item > :not(.jta-news__media) { margin-inline: var(--space-5); }
.jta-news__media                         { order: 0; }
.jta-news__item > .jta-news-source__badge { order: 1; }
.jta-news__meta                          { order: 2; }
.jta-news__title                         { order: 3; }
.jta-news__excerpt                       { order: 4; }
.jta-news__link                          { order: 5; }

.jta-news__media {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--c-line);
    background:
        radial-gradient(70% 80% at 30% 10%, rgba(123, 47, 247, .25), transparent 70%),
        linear-gradient(160deg, var(--c-surface-2), #090912);
    overflow: hidden;
}
/* Bez obálky nízký pruh, ne plná prázdná plocha — viz `.som-ukazka__plocha--prazdna`. */
.jta-news__media--empty { aspect-ratio: 16 / 4; }
.jta-news__img,
.jta-news__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}
.jta-news__item:hover .jta-news__img { transform: scale(1.05); }

.jta-news__meta { margin: 0 0 var(--space-2); color: var(--c-text-3); font-size: 14px; line-height: 1.5; }
.jta-news__title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.jta-news__excerpt { margin: var(--space-3) 0 0; color: var(--c-text-2); font-size: 16px; line-height: 1.6; }
.jta-news__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    margin-top: auto;
    padding-top: var(--space-4);
    color: var(--c-accent);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}
.jta-news__link:hover { color: var(--c-accent-hover); }
/* Klikací je celá karta, ne jen „Číst dál". Odkaz zůstává jediný
   (čtečka slyší jednu akci), jen jeho plocha se roztáhne přes kartu. */
.jta-news__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.jta-news__link:focus-visible { outline: none; }
.jta-news__item:has(.jta-news__link:focus-visible) {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}
.jta-arrow { display: block; width: 15px; height: 15px; flex: none; }
.jta-news__link .jta-arrow { transition: transform var(--t-hover) var(--ease); }
.jta-news__link:hover .jta-arrow { transform: translateX(3px); }

/* Štítek „Napsali o nás" = `.som-stitek`. */
.jta-news-source__badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin: 0 0 var(--space-3);
    padding: 3px var(--space-2);
    border: 1px solid var(--c-accent-line);
    border-radius: var(--radius-pill);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Obálka videem (YouTube se načte až po kliknutí) */
.jta-video-cover {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
}
.jta-video-cover__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jta-video-cover__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 40px var(--c-accent-glow);
}
.jta-video-cover__play svg { display: block; width: 24px; height: 24px; }
.jta-video-cover__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Článek. Sloupec textu má šířku `--container-uzky` (880 px) — na plné
   šířce by měl řádek přes sto znaků. Sekce ze Stavebnice článku stojí
   MIMO tenhle sloupec (`.jta-article__sections`) a mají šířku stránky. */
.jta-project__body { padding-block: var(--space-8) var(--space-9); }
.jta-project__inner {
    width: 100%;
    max-width: var(--container-uzky);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.jta-article__cover {
    margin: 0 0 var(--space-7);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--c-surface);
}
.jta-article__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jta-article__lead {
    margin: 0;
    color: var(--c-text);
    font-size: clamp(19px, 1.6vw, 23px);
    font-weight: 500;
    line-height: 1.55;
}
/* Tělo článku má tentýž rytmus jako `.prose` — jedno pravidlo „blok
   kromě prvního má nahoře mezeru", nulovat se smí jen spodní okraj. */
.jta-article__body { margin-top: var(--space-6); color: var(--c-text-2); font-size: 18px; line-height: 1.75; }
.jta-article__body > * + * { margin-top: var(--space-5); }
.jta-article__body > :first-child { margin-top: 0; }
.jta-article__body :is(p, ul, ol, table, blockquote, figure) { margin-bottom: 0; }
.jta-article__body :is(h2, h3, h4) { color: var(--c-text); }
.jta-article__body h2 { font-size: clamp(26px, 2.6vw, 36px); }
.jta-article__body h3 { font-size: clamp(21px, 2vw, 26px); }
.jta-article__body > :is(h2, h3, h4) + * { margin-top: var(--space-4); }
.jta-article__body > * + :is(h2, h3, h4) { margin-top: var(--space-7); }
.jta-article__body a { text-decoration: underline; text-underline-offset: 3px; }
.jta-article__body :is(ul, ol) { padding-left: 1.3em; }
.jta-article__body li + li { margin-top: var(--space-2); }
.jta-article__body strong { color: var(--c-text); font-weight: 600; }
.jta-article__body blockquote {
    margin-inline: 0;
    padding: var(--space-4) var(--space-5);
    border-left: 2px solid var(--c-accent);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .03);
    color: var(--c-text);
}
.jta-article__body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.jta-article__sections { margin-top: var(--space-7); }
/* Textové sekce Stavebnice uvnitř článku tvoří JEDEN plynulý text ve sloupci
   článku — ne samostatné plochy stránky. Bez tohohle stály u levého okraje
   kontejneru (o 230 px vlevo od perexu), každá měla 64 px nahoře i dole
   a nadpis velikosti stránky (60 px). Ostatní sekce (CTA, obrázky) zůstávají
   v šířce stránky. */
.jta-article__sections > .section-text { padding-block: 0; }
.jta-article__sections > .section-text + .section-text { margin-top: var(--space-7); }
.jta-article__sections > .section-text > .container { max-width: var(--container-uzky); }
.jta-article__sections .builder-text.text-width-narrow { max-width: none; }
.jta-article__sections .builder-text h2 { font-size: clamp(26px, 2.6vw, 36px); }
.jta-article__sections .builder-text :is(ul, ol) { margin: 0 0 var(--space-4); padding-left: 1.3em; color: var(--c-text-2); font-size: 18px; line-height: 1.7; }
.jta-article__sections .builder-text li + li { margin-top: var(--space-2); }
.jta-article__sections .builder-text strong { color: var(--c-text); font-weight: 600; }
.jta-article__sections .builder-text a { text-decoration: underline; text-underline-offset: 3px; }
.jta-article__sections + .jta-project__inner { margin-top: var(--space-7); }

/* Zdroj převzatého článku */
.jta-news-source {
    margin-top: var(--space-7);
    padding: var(--space-5);
    border: 1px solid var(--c-line);
    border-left: 2px solid var(--c-accent-line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .02);
}
.jta-news-source__label {
    margin: 0 0 var(--space-2);
    color: var(--c-text-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.jta-news-source__row { margin: 0; font-size: 17px; }
.jta-news-source__note { margin: var(--space-1) 0 0; color: var(--c-text-3); font-size: 14px; }

/* Sdílení — kulatá tlačítka jako `.som-sipka` */
.jta-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--c-line);
}
.jta-share__label {
    margin: 0;
    color: var(--c-text-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.jta-share__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.jta-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: var(--ctl-h);
    height: var(--ctl-h);
    flex: none;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    color: var(--c-text);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--t-hover) var(--ease),
                border-color var(--t-hover) var(--ease),
                color var(--t-hover) var(--ease);
}
.jta-share__btn svg { display: block; width: 18px; height: 18px; flex: none; }
.jta-share__btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.jta-share__btn--copy { width: auto; padding-inline: var(--space-4); font-size: 14px; font-weight: 600; }

/* Předchozí / další článek */
.jta-article__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-7);
}
.jta-article__nav-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-5);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    text-decoration: none;
    transition: border-color var(--t-hover) var(--ease);
}
.jta-article__nav-item:hover { border-color: var(--c-accent-line); }
.jta-article__nav-item--next { grid-column: 2; text-align: right; }
.jta-article__nav-label {
    color: var(--c-text-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.jta-article__nav-title { color: var(--c-text); font-size: 17px; font-weight: 600; line-height: 1.4; }

.jta-article__back { margin: var(--space-7) 0 0; }
.jta-project__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-accent);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}
.jta-project__back-link:hover { color: var(--c-accent-hover); }

/* Související články pod článkem leží na zvednutém podkladu. */
.jta-project__body + .jta-news { background: var(--c-bg-raised); border-top: 1px solid var(--c-line); }

@media (max-width: 768px) {
    .jta-article__nav { grid-template-columns: minmax(0, 1fr); }
    .jta-article__nav-item--next { grid-column: auto; text-align: left; }
    .jta-share__btn { width: 48px; height: 48px; }
    .jta-share__btn--copy { width: auto; }
    .jta-article__body { font-size: 17px; }
}


/* ── 21 · COOKIE LIŠTA ──────────────────────────────────────────────────── */
/* 🔴 Vzhled lišty si drží WEB, ne jádro. Jakmile je v CSS webu selektor
   `.jta-cookies__panel`, `Analytics::vlastniStylListy()` to pozná a jádro
   svůj `cookies.css` nevloží. Dvě poloviny vzhledu z různých zdrojů dají
   kříženec — na jiném webu téhle báze takhle zmizelo bílé písmo na bílém
   panelu. Buď celý jádru, nebo celý webu; nic mezi tím. */

.jta-cookies {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 150;
    padding: var(--space-4);
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.jta-cookies[hidden] { display: none; }

.jta-cookies__panel {
    pointer-events: auto;
    width: 100%;
    max-width: 880px;
    padding: var(--space-5);
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    /* Písmo `inherit` na každý vnitřní prvek — lišta má mluvit písmem webu,
       ale nesmí si ho brát z jeho nadpisových pravidel. */
    font-family: inherit;
    color: var(--c-text-2);
}
.jta-cookies__nadpis {
    margin: 0 0 var(--space-3);
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    color: var(--c-text);
}
.jta-cookies__text, .jta-cookies__popis {
    margin: 0 0 var(--space-4);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-text-2);
}
.jta-cookies__akce {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.jta-cookies__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ctl-h);
    padding-inline: var(--space-5);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--c-text);
    font: 600 15px/1 var(--font-body);
    cursor: pointer;
    transition: background-color var(--t-hover) var(--ease),
                border-color var(--t-hover) var(--ease),
                color var(--t-hover) var(--ease);
}
.jta-cookies__btn:hover { background: rgba(255, 255, 255, .07); color: var(--c-text); }
.jta-cookies__btn--hlavni { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.jta-cookies__btn--hlavni:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: #fff; }
.jta-cookies__btn--tichy { border-color: transparent; color: var(--c-text-3); }
.jta-cookies__btn--tichy:hover { color: var(--c-text-2); }
.jta-cookies__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.jta-cookies__podrobnosti { margin-top: var(--space-4); }
.jta-cookies__kategorie { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.jta-cookies__prepinac {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-family: inherit;
    font-size: 15px;
    color: var(--c-text-2);
}
.jta-cookies__prepinac input {
    width: 20px; height: 20px; min-height: 0; flex: none;
    margin: 2px 0 0;
    accent-color: var(--c-accent);
}
.jta-cookies__prepinac input:disabled { opacity: .5; }
.jta-cookies__prepinac-nazev { font-family: inherit; font-weight: 600; color: var(--c-text); }
.jta-cookies__vzdy { font-family: inherit; color: var(--c-text-3); font-size: 13px; }
.jta-cookies__odkaz-radek { margin-top: var(--space-4); font-size: 14px; }
.jta-cookies__odkaz { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.jta-cookies__odkaz:hover { color: var(--c-accent-hover); }

/* Zástupný blok místo zablokovaného externího obsahu (mapa, video). */
.souhlas-obsah {
    display: grid;
    place-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-5);
    background: var(--c-surface);
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--radius-lg);
    text-align: center;
}
.souhlas-obsah-text { margin: 0; color: var(--c-text-2); font-size: 15px; }


/* ── 22 · HLÁŠKY A STAVY ────────────────────────────────────────────────── */

.som-hlaska, .alert, .flash {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--c-line-strong);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-text-2);
    font-size: 16px;
}
.som-hlaska--ok,   .alert-success { border-left-color: var(--c-ok); }
.som-hlaska--chyba, .alert-error, .alert-danger { border-left-color: var(--c-err); }
.som-hlaska--pozor, .alert-warning { border-left-color: var(--c-warn); }
.som-hlaska + .som-hlaska { margin-top: var(--space-3); }

/* 🔴 HLÁŠKY FORMULÁŘŮ Z JÁDRA. `formular.css` má barvy pro světlý web a načítá
   se až po tomhle souboru. Proměnné se proto přepisují na `body` (bližší předek
   než `:root`) a pevné hodnoty jádra přebíjí prefix `body` nebo `.form-group`.
   Chybě patří jen ikona, rámeček a text u pole. Popisky zůstávají bílé. */
body {
    --form-barva-chyba: var(--c-err);
    --form-barva-chyba-plocha: var(--c-err-soft);
    --form-barva-chyba-linka: var(--c-err-line);
    --form-barva-ok: var(--c-ok);
    --form-barva-ok-plocha: var(--c-ok-soft);
    --form-barva-pozor-plocha: var(--c-warn-soft);
    --form-barva-pozor-linka: var(--c-warn);
}

.form-group.ma-chybu.ma-chybu > label { color: var(--c-text); }
.form-group.ma-chybu.ma-chybu > label.form-checkbox { color: var(--c-text-2); }

.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
    box-shadow: 0 0 0 3px var(--c-err-soft);
}
.form-group input.is-invalid:focus,
.form-group select.is-invalid:focus,
.form-group textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--c-err-line);
}
.form-group .form-checkbox input[type="checkbox"].is-invalid {
    border-color: var(--c-err);
    outline: none;
    box-shadow: 0 0 0 3px var(--c-err-soft);
}

.form-field-error.form-field-error { margin-top: var(--space-2); }

.form-fields-grid + .form-group { margin-top: var(--space-5); }

body .form-souhrn.form-souhrn {
    margin: var(--space-5) 0 var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--c-err-line);
    border-radius: var(--radius-md);
    color: var(--c-text-2);
}
body .form-souhrn__ikona { color: var(--c-err); }
body .form-souhrn__nadpis.form-souhrn__nadpis { color: var(--c-text); }
body .form-souhrn__seznam li { color: var(--c-text-2); }
body .form-souhrn__odkaz.form-souhrn__odkaz { color: var(--c-text); text-align: left; }
body .form-souhrn__veta.form-souhrn__veta { color: var(--c-text-2); }

.builder-contact-form .form-actions { margin-top: var(--space-6); }
/* Souhrn chyb stojí těsně před tlačítkem a odstup si nese sám. */
.builder-contact-form .form-souhrn + .form-actions { margin-top: 0; }

body .form-messages { border: 1px solid currentColor; border-radius: var(--radius-md); }
body .form-captcha-vypnuto.form-captcha-vypnuto {
    margin-top: var(--space-4);
    border: 1px solid var(--c-warn);
    border-radius: var(--radius-md);
    color: var(--c-text);
}

/* Prázdný stav — seznam bez položek nesmí vypadat jako rozbitá stránka. */
.som-prazdno {
    padding: var(--space-8);
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--c-text-3);
}


/* ── 23 · POMOCNÉ TŘÍDY ─────────────────────────────────────────────────── */

.som-stred { text-align: center; }
.som-nowrap { white-space: nowrap; }


/* ── RESPONZIVITA ───────────────────────────────────────────────────────── */
/* ⚠️ Mediální bloky stojí ZA základními pravidly všech komponent výš —
   jinak by při stejné specificitě prohrály pořadím a úzké šířky by
   dostaly desktopové hodnoty bez jediné chybové hlášky. */

@media (max-width: 1200px) {
    .som-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .som-kroky__pol { grid-template-columns: 56px minmax(0, 1fr); }
    .som-kroky__vymena { grid-column: 2; }
}

@media (max-width: 1024px) {
    :root { --space-10: 88px; --space-9: 64px; --header-h: 72px; }

    /* Navigace se při zúžení schová do výsuvného panelu. Panel JE
       implementovaný (viz `site.js` + blok níž) — skrytí bez náhrady
       by menu pod 1024 px úplně znepřístupnilo. */
    .som-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        z-index: 99;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        padding: var(--space-4) var(--gutter) var(--space-6);
        background: var(--c-bg-raised);
        border-bottom: 1px solid var(--c-line);
        box-shadow: var(--shadow-card);
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Zavřený panel nesmí blokovat kliky na stránce — `opacity: 0`
           sám o sobě prvek nezneviditelní pro ukazatel. */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity var(--t-expand) var(--ease),
                    transform var(--t-expand) var(--ease),
                    visibility var(--t-expand);
    }
    .som-nav.je-otevrena {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .som-nav__odkaz {
        display: flex;
        align-items: center;
        /* Dotykový cíl — Apple HIG minimum. */
        min-height: 48px;
        padding-block: var(--space-3);
        border-bottom: 1px solid var(--c-line);
        font-size: 18px;
    }
    .som-nav__odkaz.je-aktivni::after { display: none; }
    .som-nav__odkaz.je-aktivni { color: var(--c-accent); }

    .som-burger { display: inline-flex; }

    .som-hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .som-hero__text { max-width: none; }
    .som-hero__perex { max-width: 44ch; }
    .som-hero__panely { min-height: 480px; }

    .som-postup__in { grid-template-columns: minmax(0, 1fr); }
    .som-vyzva__in { grid-template-columns: minmax(0, 1fr); }
    .som-vyzva__akce { justify-content: flex-start; }
    .som-sekce-hlava { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }

    .builder-row { grid-template-columns: minmax(0, 1fr); }
    .apt-detail-grid--2-1 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    :root { --gutter: 20px; --space-10: 72px; --space-9: 56px; --space-8: 48px; }

    .som-hlavicka__in { gap: var(--space-3); }
    .som-znacka__text { font-size: 22px; }

    .som-hero { padding-block: calc(var(--header-h) + var(--space-7)) var(--space-8); }

    /* 🔴 PŘEKRYV PANELŮ POTŘEBUJE ŠÍŘKU. Pod 768 px si panely zakrývaly
       navzájem tolik, že z „Vítejte zpět" zbyl sloupec svislých písmen
       a z portálu jen odznak. Na úzké obrazovce proto stojí pod sebou
       v běžném toku: žádné absolutní umístění, žádná perspektiva,
       žádné plavání. Tohle není zmenšený desktop, je to jiné rozvržení. */
    .som-hero__panely {
        position: static;
        display: grid;
        gap: var(--space-4);
        min-height: 0;
        perspective: none;
    }
    .som-panel {
        position: static;
        width: auto;
        transform: none;
        animation: none;
    }
    .som-panel__telo { padding: var(--space-3); }
    .som-panel__lista { padding: var(--space-2) var(--space-3); font-size: 11px; }

    .som-reseni__blok { padding: var(--space-5); }
    .som-kroky__pol { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); }
    .som-kroky__cislo { width: 36px; height: 36px; font-size: 13px; }

    .som-paticka__hlava { flex-direction: column; align-items: flex-start; }
    .som-paticka__nav { gap: var(--space-4); }
    .som-paticka__lista { flex-direction: column; align-items: flex-start; }

    /* Dotykové cíle — 44 px minimum na všem, na co se klepe. */
    .som-btn, .btn, .jta-cookies__btn { min-height: 44px; }
    .som-sipka { width: 44px; height: 44px; }
}

@media (max-width: 480px) {
    :root { --gutter: 16px; --space-10: 56px; --space-9: 48px; }

    /* Čtyři panely pod sebou znamenají na telefonu skoro tisíc pixelů
       rolování, než se návštěvník dostane pod hero. Schéma automatizace
       je z nich nejméně sdělné (samé ikony bez popisků), takže odpadá
       jako první. */
    .som-panel--automat { display: none; }
    /* Schéma a dlaždice v úzkém panelu: popisek se nesmí lámat po slabikách. */
    .som-ukazka-popis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Ve sloupci se `align-items: center` rodiče smrskne na šířku obsahu. */
    .som-akce { align-items: stretch; }
    .som-akce .som-btn { width: 100%; }

    /* 48 px dotykový cíl na nejmenších displejích. */
    .som-btn, .btn, .jta-cookies__btn { min-height: 48px; }
    .som-nav__odkaz { min-height: 52px; }

    .som-pruh__stopa { font-size: 18px; gap: var(--space-3); }
    .som-karta, .som-uroven, .som-kroky__pol { padding: var(--space-4); }

    /* 🔴 Hlavička na nejžšších displejích. Značka + trvalá akce + přepínač
       menu se na 360 px nevejdou vedle sebe v plné velikosti a přetečení
       hlavičky rozjede vodorovný posuv celé stránky.
       ⚠️ Akce se tu NESKRÝVÁ, jen změnší — je to jediná cesta k poptávce
          a v zasunutém menu by ji šlo přehlédnout. Dotykový cíl zůstává 44 px. */
    .som-hlavicka__in { gap: var(--space-2); }
    .som-hlavicka__akce { gap: var(--space-2); }
    .som-znacka { gap: var(--space-2); }
    .som-znacka__text { font-size: 19px; }
    .som-hlavicka__akce .som-btn {
        padding-inline: var(--space-3);
        font-size: 14px;
        min-height: 44px;
    }
    .som-hlavicka__akce .som-btn svg { width: 14px; height: 14px; }
    .som-burger { width: 44px; height: 44px; }

    /* Popisek pod ukázkou rozhraní je dlouhá verzálková věta — na 390 px
       se do jedné řádky nevejde a proložení ji ještě prodlužuje. */
    .som-hero__popisek { font-size: 10px; letter-spacing: .04em; padding-inline: var(--space-3); }

    /* V překryvu přebírá spodní panel skoro celou plochu toho horního,
       takže z „Konfigurátoru" zůstával vidět jen prázdný obdélník.
       Nižší náhledová plocha nechá vyniknout i řádky pod ní. */
    .som-ukazka-plocha { aspect-ratio: 16 / 7; }
    .som-ukazka-dlazdice > div { padding: var(--space-2); }
    .som-ukazka-popis { font-size: 10px; }
}


/* ── 24 · POHYB A TISK (průřezové bloky patří NA KONEC souboru) ─────────── */

/* Nástup sekce při odrolování. Výchozí stav je VIDITELNÝ a třídu doplní
   `site.js` — bez JavaScriptu tak obsah nikdy nezůstane neviditelný. */
.som-nastup {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.som-nastup.je-videt { opacity: 1; transform: none; }


/* ── Klíčové snímky ─────────────────────────────────────────────────────
   Všechny na jednom místě, aby se nestalo, že dvě sekce mají každá vlastní
   „plavání" s jiným názvem a jiným tempem. Pohyb je zdarma jen zdánlivě:
   animuje se výhradně `transform` a `opacity`, nikdy rozměr nebo barva —
   ty by nutily prohlížeč přepočítat rozvržení v každém snímku.
   ⚠️ Vypnutí při `prefers-reduced-motion` řeší blok níž, ne jednotlivé
      deklarace — jinak by se na nové animaci zapomnělo. */

/* Mlha pod celou stránkou. Posun je malý schválně — kulisa se má hýbat
   tak, že si toho nikdo nevšimne, dokud se nezastaví. */
@keyframes som-mlha-pozadi {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
}
@keyframes som-mlha-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-9%, 7%, 0) scale(1.14); }
}
@keyframes som-mlha-b {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(8%, -6%, 0) scale(.92); }
}
/* 🔴 Pruh se ROZŠIŘUJE A ZUŽUJE, ne jen posouvá. Šířka se animuje přes
   `scaleX`, ne přes `width` — měnit rozměr znamená přepočítat rozvržení
   v každém snímku a u devíti pruhů to je devět přepočtů na 60 Hz.
   ⚠️ Krajní snímky (0 % a 100 %) musí být shodné, jinak smyčka cukne. */
@keyframes som-pruh {
    /* ⚠️ Rozsah je .55–1.70, ne .28–1.95. Při 0.28 byl pruh užší než
       jeho vlastní náběh a rozpadl se na nic; při 1.95 se naopak
       rozteklo jádro a ostrá hrana zmizela. Dolů se taky nejde pod
       opacity .34 — pod ní pruh mezi dvěma nádechy úplně zhasl. */
    /* ⚠️ Rozsah je ÚZKÝ (.78–1.24) a smyčka dlouhá (23–38 s). Dřívější
       .55–1.70 na devíti vteřinách byl na pozadí textu neklid, který
       táhl oko od nadpisu. Pruh má dýchat, ne pulzovat. */
    0%   { transform: translate3d(0, 0, 0)     scaleX(.82); opacity: .58; }
    23%  { transform: translate3d(-16px, 0, 0) scaleX(1.24); opacity: .96; }
    47%  { transform: translate3d(12px, 0, 0)  scaleX(.78); opacity: .52; }
    71%  { transform: translate3d(-7px, 0, 0)  scaleX(1.12); opacity: .84; }
    100% { transform: translate3d(0, 0, 0)     scaleX(.82); opacity: .58; }
}
/* Šikmá čára podlahy: dýchá do délky a lehce se stáčí kolem svého úhlu.
   Základní natočení drží `--cara-uhel`; kdyby ho snímky neopakovaly,
   čára by na začátku animace skočila do svislé polohy. */
@keyframes som-cara {
    /* 🔴 ŽÁDNÉ `scaleY`. Natahování paprsku měnilo délku, a tím i rychlost
       diody, která po něm jede — dioda zrychlovala a zpomalovala bez
       příčiny. Perspektiva drží délku; animuje se jen svit a náklon
       o zlomek stupně, aby plocha nebyla mrtvá. */
    0%   { transform: rotate(var(--cara-uhel, 0deg)); opacity: .34; }
    29%  { transform: rotate(calc(var(--cara-uhel, 0deg) + .8deg)); opacity: .92; }
    55%  { transform: rotate(calc(var(--cara-uhel, 0deg) - .5deg)); opacity: .46; }
    78%  { transform: rotate(calc(var(--cara-uhel, 0deg) + .3deg)); opacity: .74; }
    100% { transform: rotate(var(--cara-uhel, 0deg)); opacity: .34; }
}
/* Dioda jede od obzoru k divákovi: roste, protože se přibližuje, a na
   obou koncích se vytrácí, aby nikde neproblikla zčistajasna.
   ⚠️ `--cara-delka` je v pixelech, ne v procentech — procenta
      v `translate` se počítají z rozměru DIODY (16 px), ne paprsku. */
@keyframes som-dioda {
    0%   { transform: translate3d(0, 0, 0) scale(.25); opacity: 0; }
    14%  { opacity: 1; }
    84%  { opacity: 1; }
    100% { transform: translate3d(0, var(--cara-delka, 700px), 0) scale(1.9); opacity: 0; }
}
/* Světelný práh na spodní hraně hero — tepe spolu se zbytkem kulisy. */
@keyframes som-prah {
    0%, 100% { opacity: .38; transform: scaleX(.82); }
    50%      { opacity: .95; transform: scaleX(1); }
}
/* Mřížka se posouvá přesně o jedno oko (72 px), takže smyčka nemá šev.
   🔴 Posouvá se `transform`em, ne `background-position`. Posun pozadí nutí
      prohlížeč překreslit celou plochu v každém snímku — a u prvku, který
      je navíc v perspektivě, to je ta nejdražší možná animace. `transform`
      zvládne skladač sám. (Vedlejší přínos: jde to změřit stejným měřidlem
      jako všechno ostatní, které čte `getComputedStyle().transform`.) */
@keyframes som-mrizka {
    from { transform: perspective(520px) rotateX(72deg) translate3d(0, 0, 0); }
    to   { transform: perspective(520px) rotateX(72deg) translate3d(0, 90px, 0); }
}
/* 🔴 Plavání panelů je SMYČKA O ČTYŘECH SNÍMCÍCH, ne `alternate` mezi dvěma.
   Dvousnímkový `alternate` se v obou krajních polohách na okamžik zastaví
   a čtyři panely vedle sebe se tím srovnají do jednoho rytmu — vypadá to
   jako houpání jednoho kusu, ne jako čtyři nezávislé panely.
   ⚠️ Krajní snímky musí být shodné, jinak smyčka cukne. */
@keyframes som-plavani {
    /* 🔴 PANEL SE NEHOUPE, JEN DÝCHÁ. Tahle hodnota se ladila třikrát
       a pokaždé špatným směrem, protože se měřila místo aby se na ni
       někdo podíval:
         · 15–18 px / 13–19 s … kontrola spočítala 1,6 px/s a prohlásila
           to za „pod rozlišovací schopností oka";
         · 24 px / 9–15 s … číslo vyšlo pěkně, ale scéna začala PLAVAT —
           čtyři panely vedle sebe, každý jinam, působí jako rozvázaná
           kompozice, ne jako živý obraz.
       Rozhodující není rychlost v px/s, ale jestli si pohybu všimneš
       DŘÍV než obsahu panelu. Smí si ho všimnout až po chvíli.
       ⚠️ Proto 7 px na 34–52 s, tedy kolem 0,4 px/s. Panel za celý
          cyklus urazí míň než výšku jednoho řádku textu.
       ⚠️ Krajní snímky (0 % a 100 %) musí být shodné, jinak smyčka
          cukne. */
    0%   { transform: rotateY(-11deg)    rotateX(3.5deg) translate3d(0, 0, var(--som-z, 0px)); }
    26%  { transform: rotateY(-10.4deg)  rotateX(3.1deg) translate3d(3px, -7px, var(--som-z, 0px)); }
    51%  { transform: rotateY(-11.6deg)  rotateX(3.9deg) translate3d(-2px, -3px, var(--som-z, 0px)); }
    77%  { transform: rotateY(-10.7deg)  rotateX(3.2deg) translate3d(2px, -6px, var(--som-z, 0px)); }
    100% { transform: rotateY(-11deg)    rotateX(3.5deg) translate3d(0, 0, var(--som-z, 0px)); }
}
/* Světlo urazí celou dráhu. `pathLength="1000"` délku normalizuje, takže
   -1000 je právě jeden průjezd bez ohledu na tvar křivky — po úpravě
   tvaru se tu nemusí nic přepočítávat. */
@keyframes som-svetlo-jede {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1000; }
}
/* Rozsvěcení a zhasínání jde VLASTNÍM tempem, nesoudělným s jízdou —
   světlo proto nezhasíná pokaždé na témže místě dráhy. */
@keyframes som-svetlo-zari {
    0%, 100% { opacity: .2; }
    50%      { opacity: 1; }
}
@keyframes som-stopa-dech {
    0%, 100% { opacity: .3; }
    50%      { opacity: .85; }
}
/* Puls projede celou šířkou sekce. Posun je v procentech ŠÍŘKY PULSU
   (32 % sekce), takže 248 % ≈ 79 % šířky sekce — plus jeho vlastních
   32 % to dá přesně celou cestu od levé hrany za pravou. */
@keyframes som-laser {
    0%   { transform: translate3d(-36%, 0, 0) scaleX(.45); opacity: 0; }
    16%  { opacity: 1; }
    84%  { opacity: 1; }
    100% { transform: translate3d(248%, 0, 0) scaleX(1.05); opacity: 0; }
}
@keyframes som-tep {
    0%, 100% { box-shadow: 0 0 0 6px rgba(255, 46, 154, .10), 0 10px 30px rgba(255, 46, 154, .45); }
    50%      { box-shadow: 0 0 0 14px rgba(255, 46, 154, 0), 0 10px 30px rgba(255, 46, 154, .55); }
}
/* Nekonečný pás s obory. Posun o polovinu stopy — druhá polovina je kopie
   první, takže se smyčka zavře bez skoku. */
@keyframes som-posun-pasu {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms;
        animation-iteration-count: 1;
        transition-duration: .001ms;
    }
    .som-nastup { opacity: 1; transform: none; }
    .som-btn:hover, .som-karta:hover, .som-uroven:hover { transform: none; }
    .jta-news__item:hover .jta-news__img, .jta-news__link:hover .jta-arrow { transform: none; }

    /* 🔴 Samotné zkrácení na .001 ms nestačí: animace s jedním průběhem
       skončí na posledním snímku, takže by panel zůstal nadzvednutý
       a pás s obory odjetý o půlku. Dekorace se proto vypíná úplně. */
    body::before,
    .som-hero__zare::before, .som-hero__zare::after,
    .som-draha__svetlo, .som-draha__stopa,
    .som-paprsek, .som-podlaha__cara, .som-podlaha__cara::after, .som-podlaha__mrizka,
    .som-hero__prah, .som-panel,
    .som-ukazka-spust, .som-pruh__stopa { animation: none; }
    .som-pruh__stopa { transform: none; }
    /* Bez animace zůstanou pruhy i čáry ve výchozím stavu klíčového snímku,
       tedy neviditelné. Ustálený vzhled jim proto nastaví tenhle blok. */
    .som-paprsek { opacity: .75; }
    .som-podlaha__cara { opacity: .5; }
    /* Dioda bez pohybu je jen tečka u obzoru — pryč s ní. */
    .som-podlaha__cara::after { opacity: 0; }
    /* Totéž světla na terénu: bez jízdy po dráze nemají smysl. */
    .som-draha__svetlo { opacity: 0; }
    .som-draha__stopa { opacity: .5; }
    /* Puls mezi sekcemi nasazuje skript, a ten se při tlumeném režimu
       vůbec nespustí. Pravidlo je pojistka pro případ, že by třída
       v značce zůstala z dřívějška. */
    #obsah > .bldr-section-wrap.je-paprsek::after { animation: none; opacity: 0; }
    .som-hero__prah { opacity: .7; }
    .som-karta, .som-hero__panely { --som-naklon-x: 0deg; --som-naklon-y: 0deg; }
}

@media print {
    .som-hlavicka, .som-burger, .jta-cookies, .som-hero__zare,
    .som-podlaha, .som-paprsky, .som-hero__prah, .som-vyzva__prah,
    .som-vyzva__zare, .som-postup__zare, .som-postup__teren, .som-postup__draha,
    .som-hero__vizual, .som-preskocit { display: none; }
    body { background: #fff; color: #000; }
    a { color: #000; }
    .som-section { padding-block: var(--space-5); }
}