/* ===========================================================================
   Simonet — „Digitální továrna“
   Design systém vytěžený z grafické předlohy (_plan/predloha/).

   ⛔ Modul na míru `web-vzhled` (`moduly-webu.php`). Do balíčku jádra se
      nedostane a aktualizace na něj nesahá.

   🔴 ŽÁDNÉ INLINE STYLY. Sekce Stavebnice vypisují jen třídy.
   🔴 Barvy jsou NAMĚŘENÉ z předlohy histogramem (`_plan/nastroje/paleta.php`),
      ne odhadnuté. Kdo je mění, ať nejdřív změří znovu.

   Prefix `sim-` má KAŽDÁ třída. Bez něj by `.card`, `.hero`, `.stat`
   a `.grid` kolidovaly se styly jádra.
   =========================================================================== */

:root {
    /* ── Barvy (naměřeno z předlohy) ───────────────────────────────────── */
    --sim-accent:         #FBED37;   /* „DIGITÁLNÍ SVĚTY.“, „je originál.“ */
    --sim-accent-bright:  #FDF039;   /* plocha žlutého tlačítka */
    --sim-accent-deep:    #D9C910;   /* stisknuto */
    --sim-accent-glow:    rgba(251, 237, 55, .45);

    --sim-bg:             #04070D;   /* základ stránky */
    --sim-bg-deep:        #000205;   /* nejtmavší pruhy */
    --sim-bg-hero:        #040E19;   /* okolí scény */
    --sim-surface:        #0A121C;   /* karty, nádrže */
    --sim-surface-2:      #0E1925;   /* vyvýšená plocha */

    --sim-text:           #FFFFFF;
    --sim-muted:          #D2D5D7;   /* perex pod nadpisem */
    --sim-dim:            rgba(255, 255, 255, .66);  /* popisy karet */
    --sim-faint:          rgba(255, 255, 255, .50);  /* drobné popisky */

    --sim-line:           rgba(255, 255, 255, .12);
    --sim-line-strong:    rgba(255, 255, 255, .22);
    --sim-line-accent:    rgba(251, 237, 55, .38);

    /* Světla scény — jantarové z žárovky, modré z hologramů. */
    --sim-amber:          #FF9B2E;
    --sim-amber-soft:     rgba(255, 155, 46, .30);
    --sim-blue:           #3D8BFF;
    --sim-blue-soft:      rgba(61, 139, 255, .28);

    /* ── Písmo ─────────────────────────────────────────────────────────── */
    --sim-font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
    --sim-font-body:    "Inter", system-ui, -apple-system, sans-serif;
    --sim-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
    /* Úzký řez nadpisů (osa `wdth` z `pisma.css`) — hero i sekce, viz typografie. */
    --sim-display-stretch: 62%;

    /* ── Rozměry ───────────────────────────────────────────────────────── */
    --sim-container: 1440px;
    --sim-gutter: 24px;

    --sim-space-1: 4px;   --sim-space-2: 8px;   --sim-space-3: 12px;
    --sim-space-4: 16px;  --sim-space-5: 24px;  --sim-space-6: 32px;
    --sim-space-7: 48px;  --sim-space-8: 64px;  --sim-space-9: 80px;
    --sim-space-10: 64px;

    --sim-radius-sm: 4px;
    --sim-radius-md: 8px;
    --sim-radius-lg: 14px;
    --sim-radius-xl: 22px;
    --sim-radius-pill: 999px;

    /* Předloha má tlačítko 40 px (při 1536 px); 44 px je dotykové minimum. */
    --sim-ctl-h: 44px;
    --sim-ctl-h-sm: 40px;
    /* Výška hlavičky — odsazuje od ní hero, mobilní nabídka i 3D scéna. */
    --sim-hlavicka-h: 76px;
    /* Výška obrázku loga (nápis ~27 px). Patička ho má o stupeň větší. */
    --sim-logo-h: 30px;

    --sim-shadow-card: 0 24px 60px rgba(0, 0, 0, .55);
    --sim-shadow-glow: 0 0 40px var(--sim-accent-glow);

    /* Matné sklo štítků a panelů (štítek výtvoru, panely programu). Sklo je
       husté už od horní hrany — žlutý text na rozmazaném světle haly měl
       jinak kontrast 2,6 : 1 (zkouska-citelnost, C79); lesk nese horní vrstva. */
    --sim-sklo: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 45%), rgba(8, 13, 22, .8);
    --sim-sklo-rozmazani: blur(10px);
    /* Zlatavý svit skla — světlo haly v hraně vitríny (jako karty „Proč"). */
    --sim-sklo-svit: inset 0 0 28px rgba(255, 155, 46, .10);

    /* ── Pohyb ─────────────────────────────────────────────────────────── */
    --sim-ease: cubic-bezier(.2, .6, .2, 1);
    --sim-t-hover: 200ms;
    --sim-t-panel: 300ms;
    --sim-t-reveal: 600ms;
}

/* Odstup mezi sekcemi se na menší obrazovce krátí.
   ----------------------------------------------------------------------------
   `--sim-space-10` neslouží k ničemu jinému než k `padding-block` sekcí
   (ověřeno: 8 užití, všechna odsazení sekcí), takže se dá zmenšit tady
   a projeví se to všude stejně.

   🔴 Naměřeno 26. 10. 2026 na telefonu 390×844: mezi nadpisem „Naše výtvory"
      a prvním odstavcem zelo **120 px prázdna**, tedy sedmina výšky obrazovky,
      než návštěvník uviděl první slovo. Na ploše je týž odstup v pořádku —
      tam je obrazovka širší a sekce vedle sebe potřebují nadechnutí.

   🔴 C68: ani na ploše ne 120 px. Předloha (`cela-stranka.png`) má mezi
      obsahem dvou sekcí 76–105 px CELKEM, u nás bylo 240 (120 + 120)
      a stránka vyšla o 30 % delší než návrh. Plocha 64, menší okna méně.

   ⚠️ Přepis musí stát NÍŽ než blok `:root` výš, ne v něm: `:root` uvnitř
      `@media` má stejnou specifičnost, takže rozhoduje pořadí v souboru.
      Tatáž past je popsaná u `.sim-komnata` o pár set řádků níž. */
@media (max-width: 1024px) {
    :root { --sim-space-10: 56px; }
}
@media (max-width: 640px) {
    :root { --sim-space-10: 48px; }
}

/* ===========================================================================
   Základ
   =========================================================================== */

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

html { scroll-behavior: smooth; }

/* Cíl odkazu `#…` se musí zastavit POD přilepenou hlavičkou.
   🔴 Hlavička je `position: fixed`, takže nadělený cíl skočí přesně na horní
      hranu okna a hlavička mu zakryje prvních ~80 px — u sekce to znamená
      schovaný nadpis, u nádrže schované číslo. `scroll-margin-top` je jediný
      způsob, jak to řešit bez JavaScriptu.
   Kotvu sekce kreslí Stavebnice (`.builder-anchor`), kotvu nádrže dává
   `SimonetSections::linka()` přímo na `<li>`. */
.builder-anchor { display: block; scroll-margin-top: 96px; }
.sim-nadrz[id]  { scroll-margin-top: 112px; }

/* ── Podstránka ───────────────────────────────────────────
   🔴 Hlavička je `position: fixed`, takže NEZABÍRÁ místo. Úvodce to nevadí
      (začíná celoobrazovkovým hero), ale podstránka začne rovnou textem
      a ten se hlavičce škrábe přes logo. Odstup musí dát obsah sám. */
.sim-podstranka { padding-top: clamp(104px, 12vw, 148px); padding-bottom: clamp(64px, 8vw, 112px); }
/* 🔴 ZÁHLAVÍ I OBSAH LÍCUJÍ VLEVO, NE NA STŘED.
      Dřív se to řešilo obráceně: záhlaví se zúžilo na šířku textu a oboje
      se vycentrovalo doprostřed. To sedělo na čistě textové stránce, ale
      ne tam, kde pod nadpisem stojí široká vlastní sekce — na `/co-vyrabime`
      a `/vytvory` pak nadpis plaval **302 px** od logiky zbytku webu
      (naměřeno v C43: logo i patička na 24 px, nadpis na 326 px).

      Celý web je zarovnaný doleva — hero, logo, patička i karty. Úzký
      sloupec uprostřed proto vybočoval tak jako tak. Teď lícuje všechno
      na stejné svislici a čitelnou délku řádku si hlídá jen text, ne
      nadpis, který je krátký. Záhlaví je od C80 hlavička podstránky
      (`.sim-hlava` níž), drobečky nad ní lícují s ní. */

/* Obecný obsah ze Stavebnice (textové sekce). Vlastní `sim_*` sekce si
   šířku řeší samy, tyhle ne — bez toho se text táhne přes celou šířku
   okna a na širokém displeji se čte velmi špatně. */
.sim-podstranka .builder-text,
.sim-vytvor-popis-text,
.sim-clanek .jta-article__cover,
.sim-clanek .jta-article__lead,
.sim-clanek .jta-article__body,
.sim-clanek .jta-news-source,
.sim-clanek .jta-share,
.sim-clanek .jta-article__nav,
.sim-clanek .jta-article__back {
    max-width: 72ch;
    /* ⚠ `margin-inline: 0`, ne `auto` — text má začínat na stejné svislici
         jako nadpis, logo a patička. S `auto` se sloupec vystředil a na
         stránce se širokou sekcí vedle něj to vypadalo jako dva weby. */
    margin-inline: 0;
    /* ⚠ ŽÁDNÝ vlastní `padding-inline`. Sekce stavebnice už leží
         v `.section-inner.container`, který gutter má — druhý odstup
         tady odsunul text o 24 px dál než nadpis (naměřeno 48 vs. 24). */
}
/* Popis výtvoru (C79) je text z editoru jako textová sekce — tytéž pravidla.
   Text článku blogu (C80, `news/_clanek.php` jádra) taky. */
.sim-podstranka .builder-text h2,
.sim-vytvor-popis-text h2,
.sim-popis-obsah h2,
.sim-clanek .jta-article__body h2 { font-family: var(--sim-font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 2.4rem 0 .8rem; }
/* Text technického popisu služby (C81, `sim_popis`) — mezititulky jsou `h3`. */
.sim-podstranka .builder-text h3,
.sim-vytvor-popis-text h3,
.sim-popis-obsah h3,
.sim-clanek .jta-article__body h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 1.6rem 0 .5rem; color: var(--sim-text); }
.sim-podstranka .builder-text p,
.sim-podstranka .builder-text li,
.sim-vytvor-popis-text p,
.sim-vytvor-popis-text li,
.sim-popis-obsah p,
.sim-popis-obsah li,
.sim-clanek .jta-article__body p,
.sim-clanek .jta-article__body li { color: var(--sim-muted); line-height: 1.75; }
.sim-podstranka .builder-text ul,
.sim-vytvor-popis-text ul,
.sim-popis-obsah ul,
.sim-popis-obsah ol,
.sim-clanek .jta-article__body ul,
.sim-clanek .jta-article__body ol { margin: .6rem 0 1.2rem 1.2rem; }
.sim-podstranka .builder-text li,
.sim-vytvor-popis-text li,
.sim-popis-obsah li,
.sim-clanek .jta-article__body li { margin-bottom: .35rem; }
.sim-podstranka .builder-text a,
.sim-vytvor-popis-text a,
.sim-popis-obsah a,
.sim-clanek .jta-article__body a { color: var(--sim-accent); }
.sim-vytvor-popis-text strong,
.sim-popis-obsah strong,
.sim-clanek .jta-article__body strong { color: var(--sim-text); }

body.sim-body {
    margin: 0;
    background: var(--sim-bg);
    color: var(--sim-text);
    font-family: var(--sim-font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* `.container` je dohodnutá obalová třída VIEWS JÁDRA (modul `aplikace`,
   katalog, aktuality). Jádro nemá veřejný stylopis — ten patří webu — takže
   bez téhle definice by každá stránka z modulu ztratila šířku a odsazení.
   Je to tentýž selektor, ne kopie pravidel.

   ⚠️ `.sim-podstranka .section-inner` je tu kvůli CHYBOVÉ STRÁNCE. Její view
      patří jádru a obaluje obsah jen do `.section-inner`, bez `container` —
      nadpis 404 proto stál na x = 0, zatímco logo v hlavičce na 257 (naměřeno
      26. 10. 2026). Selektor je zúžený na podstránku, aby nepřebral sekce
      stavebnice, které mohou chtít plnou šířku.
   ⚠️ `.sim-clanek .jta-project__inner` je obal těla článku blogu (C80) — view
      jádra `news/_clanek.php` nese vlastní jméno obalu, ne `container`. */
.sim-container,
.container,
.sim-podstranka .section-inner,
.sim-clanek .jta-project__inner {
    width: 100%;
    max-width: var(--sim-container);
    margin-inline: auto;
    padding-inline: var(--sim-gutter);
}

/* Obsah drží kontejner, i když pozadí běží přes celou šířku. */
.sim-section { position: relative; width: 100%; }

a { color: inherit; }

img, svg, canvas { max-width: 100%; }

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

/* Čtečka ano, oko ne. */
.sim-jen-pro-ctecku {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ===========================================================================
   Typografie — škála z předlohy
   =========================================================================== */

/* Nadpis častých dotazů kreslí jádro (`faq_dynamic`, C81) bez třídy webu — dostane
   tutéž kostru jako nadpis sekce. */
.sim-h1, .sim-h2, .sim-h3,
.builder-faq-section .section-header h2 {
    font-family: var(--sim-font-display);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.02;
    margin: 0;
    text-transform: uppercase;
}

/* 🔴 NADPIS JE KONDENZOVANÝ — to je ta hlavní odchylka od předlohy, kvůli
   které se dlouho nedařilo hero srovnat. V předloze zabírá nejdelší řádek
   („DIGITÁLNÍ SVĚTY.“) 418 z 1536 px při výšce verzálek asi 46 px; běžný řez
   Archiva je při stejné výšce o 38 % širší, takže se řádek lámal a nadpis
   rostl na čtyři řádky. Hero se tím protáhlo a scéna pod ním neměla místo.

   ⚠️ `font-stretch` funguje jen proto, že `pisma.css` nese osu šířky
      (`font-stretch: 62% 125%` v `@font-face`). Bez ní prohlížeč písmo
      nezúží a tenhle řádek tiše neudělá nic — stažené písmo musí mít
      v adrese `Archivo:wdth,wght@62..125,400..900`.

   Měřeno v prohlížeči, ne odhadem: 62 % / 65 px dá 412 px, tedy předlohu
   na pixel. */
.sim-h1 {
    font-size: clamp(2.4rem, 4.8vw, 4.5rem);
    font-stretch: var(--sim-display-stretch);
    /* Rozteč řádků 65,5 px při verzálkách 51 px (předloha 1536 px, C57).
       S 1.02 vycházelo 73,5 px a třířádkový nadpis byl o 16 px vyšší. */
    line-height: .91;
}

/* Ruční zalomení nadpisu platí jen tam, kde je na něj místo. Na telefonu
   by „Z nápadů / děláme / digitální světy." rozházelo sloupec, takže text
   teče sám.

   🔴 V OBSAHU MUSÍ BÝT PŘED KAŽDÝM `<br>` MEZERA. Bez ní se po skrytí
      zalomení slova slepí — na telefonu stálo „Z NÁPADŮDĚLÁMEDIGITÁLNÍ
      SVĚTY." a vypadalo to jako chyba písma. `br` se v CSS nedá nahradit
      mezerou (`content` na něm nefunguje spolehlivě), takže to musí řešit
      text sám. */
@media (max-width: 720px) {
    .sim-h1 br { display: none; }
}
/* Nadpisy sekcí jsou v předloze taky úzké, jen o stupeň méně než hero
   (C54, změřeno z celostránkové předlohy přepočtené na 1440 px): verzálky
   ~27 px vysoké, „CO VYRÁBÍME“ ~210 px, „PROCES NA MÍRU“ ~228 px — vše na
   jeden řádek. Běžným řezem v 52,8 px se každý lámal na dva až čtyři řádky
   a sekce vedle sebe vypadaly jako jiný web než hero. */
.sim-h2,
.builder-faq-section .section-header h2 { font-size: clamp(2rem, 3.1vw, 2.8rem); font-stretch: var(--sim-display-stretch); }
.sim-h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.01em; }

/* Nadpis v předloze má žluté poslední slovo — `<em>` bez kurzívy. */
.sim-h1 em, .sim-h2 em, .sim-h3 em {
    font-style: normal;
    color: var(--sim-accent);
}

/* Nadpisy psané normálně („Každý projekt je originál.“) */
.sim-h2--veta { text-transform: none; letter-spacing: -.025em; }

.sim-eyebrow {
    font-family: var(--sim-font-mono);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sim-dim);
    margin: 0 0 var(--sim-space-5);
}

/* Perex sekcí je v celostránkové předloze drobný (~15 px na řádcích po
   24 px), větší je jen v hero — u nás měl všude 18 px a sloupec vedle
   ilustrací přerůstal (C71). */
.sim-perex {
    font-size: .975rem;
    line-height: 1.6;
    color: var(--sim-muted);
    margin: 0;
    max-width: 46ch;
}

/* ===========================================================================
   Tlačítka
   =========================================================================== */

.sim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sim-space-3);
    min-height: var(--sim-ctl-h);
    padding: 0 var(--sim-space-5);
    border: 1px solid transparent;
    border-radius: var(--sim-radius-pill);
    /* Popisek je tučný úzký grotesk z rodiny nadpisů, ne mono (C55).
       🔴 Velikost písmen podle CELOSTRÁNKOVÉ předlohy (C71): „Spustit svůj
       projekt“, „Podívat se na proces“, „Všechny služby“ — normálně, ne
       verzálkami. Detail hera má verzálky, ale zadavatel poslal 27. 10.
       znovu celou stránku jako závaznou. Verzálky chce-li správce, napíše je. */
    font-family: var(--sim-font-display);
    font-stretch: var(--sim-display-stretch);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: background var(--sim-t-hover) var(--sim-ease),
                color var(--sim-t-hover) var(--sim-ease),
                border-color var(--sim-t-hover) var(--sim-ease),
                box-shadow var(--sim-t-hover) var(--sim-ease),
                transform var(--sim-t-hover) var(--sim-ease);
}

.sim-btn svg { width: 18px; height: 18px; display: block; flex: none; }

.sim-btn--primarni {
    background: var(--sim-accent-bright);
    color: #0A0A05;
    box-shadow: 0 0 0 rgba(251, 237, 55, 0);
}
.sim-btn--primarni:hover,
.sim-btn--primarni:focus-visible {
    background: var(--sim-accent);
    box-shadow: var(--sim-shadow-glow);
    transform: translateY(-2px);
}
.sim-btn--primarni:active { background: var(--sim-accent-deep); transform: translateY(0); }

.sim-btn--obrys {
    background: transparent;
    color: var(--sim-text);
    border-color: var(--sim-line-strong);
}
.sim-btn--obrys:hover,
.sim-btn--obrys:focus-visible {
    border-color: var(--sim-accent);
    color: var(--sim-accent);
    transform: translateY(-2px);
}

/* Tlačítko s kolečkem „přehrát“ z předlohy. */
.sim-btn--text {
    background: transparent;
    color: var(--sim-text);
    padding-inline: 0;
    text-transform: none;
    font-family: var(--sim-font-body);
    font-stretch: normal;
    font-weight: 500;
    letter-spacing: 0;
    font-size: .875rem;
}
.sim-btn-kolecko {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--sim-line-strong);
    border-radius: 50%;
    transition: border-color var(--sim-t-hover) var(--sim-ease),
                background var(--sim-t-hover) var(--sim-ease);
}
.sim-btn--text:hover .sim-btn-kolecko,
.sim-btn--text:focus-visible .sim-btn-kolecko {
    border-color: var(--sim-accent);
    background: rgba(251, 237, 55, .10);
}
.sim-btn--text .sim-btn-popis { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 480px) {
    .sim-btn { width: 100%; }
    .sim-btn--text { width: auto; }
}

/* ===========================================================================
   Štítek „01 / NÁPAD“ — technický popisek ze scény
   =========================================================================== */

.sim-stitek {
    display: inline-flex;
    align-items: center;
    gap: var(--sim-space-2);
    padding: 6px var(--sim-space-4);
    border: 1px solid var(--sim-accent);
    /* C77: v předloze je štítek obdélník se zaoblenými rohy a výrazným
       úzkým tučným písmem („01 / NÁPAD" ~19 px), ne drobná strojopisná
       pilulka — ta se v rozsvícené scéně ztrácela. */
    border-radius: var(--sim-radius-sm);
    background: rgba(4, 7, 13, .78);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 18px rgba(255, 155, 46, .18);
    font-family: var(--sim-font-display);
    font-stretch: var(--sim-display-stretch);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sim-stitek b { color: var(--sim-accent); font-weight: 700; }
.sim-stitek i { font-style: normal; color: var(--sim-accent); }

/* ===========================================================================
   Hlavička
   =========================================================================== */

.sim-hlavicka {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    transition: background var(--sim-t-panel) var(--sim-ease),
                border-color var(--sim-t-panel) var(--sim-ease);
    border-bottom: 1px solid transparent;
}
.sim-hlavicka.je-prilepena {
    background: rgba(4, 7, 13, .86);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--sim-line);
}

.sim-hlavicka-radek {
    display: flex;
    align-items: center;
    gap: var(--sim-space-6);
    min-height: var(--sim-hlavicka-h);
}

/* Logo je od 28. 10. 2026 obrázek od zadavatele — chromový nápis se svítícím
   „O" (`public/assets/sim/znacka/simonet-logo.webp`, výřez bez podtitulu,
   černá převedená na průhlednost). Do té doby text „SIM◯NET" s „O"
   kresleným rámečkem (C57).
   Odkaz drží výšku terčíku pro prst (`--sim-ctl-h-sm`), obrázek je menší
   a stojí uprostřed — výška obrázku sama by terčík zmenšila pod 32 px. */
.sim-logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--sim-ctl-h-sm);
    flex: none;
    text-decoration: none;
}
.sim-logo-obr {
    display: block;
    width: auto;
    height: var(--sim-logo-h);
    transition: filter var(--sim-t-hover) var(--sim-ease);
}
.sim-logo:hover .sim-logo-obr,
.sim-logo:focus-visible .sim-logo-obr {
    filter: drop-shadow(0 0 10px var(--sim-accent-glow));
}

.sim-nav { display: flex; gap: var(--sim-space-6); margin-inline: auto; }
.sim-nav a {
    position: relative;
    font-size: .94rem;
    text-decoration: none;
    color: var(--sim-muted);
    padding-block: var(--sim-space-2);
    transition: color var(--sim-t-hover) var(--sim-ease);
}
.sim-nav a::after {
    content: "";
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--sim-accent);
    transition: right var(--sim-t-hover) var(--sim-ease);
}
.sim-nav a:hover, .sim-nav a:focus-visible, .sim-nav a.je-aktivni { color: var(--sim-text); }
.sim-nav a:hover::after, .sim-nav a:focus-visible::after, .sim-nav a.je-aktivni::after { right: 0; }

.sim-hlavicka-heslo {
    font-family: var(--sim-font-mono);
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sim-faint);
    /* ⚠️ Heslo se standardně NEVYKRESLUJE (předloha 2 ho nemá), takže odsazení
       doprava nesmí viset na něm — drží ho `.sim-hlavicka-cta` níž. Tahle
       pravidla platí jen tehdy, když si ho někdo v nastavení zapne. */
    margin: 0 0 0 auto;
    white-space: nowrap;
}

/* 🔴 Výzva v hlavičce je ŠIROKÉ ŽLUTÉ TLAČÍTKO podle `predloha-2-strana.png`.
   Mezitím tu byla kruhová ikona z `predloha-1-hero.png` — obě předlohy si
   v tomhle rohu odporují a zadavatel 25. 10. 2026 rozhodl pro tu druhou,
   protože nenápadná výzva se hůř všimne i klikne.
   Vzhled dělá `.sim-btn--primarni`, tady zbývá jen to, co je v hlavičce
   navíc: nesmí se smrštit, když je nabídka dlouhá. */
.sim-hlavicka-cta { flex: 0 0 auto; }

/* Hamburger — na desktopu schovaný. */
.sim-hamburger { display: none; }

/* 🔴 Mezipásmo 1025–1440 px: plná nabídka se vejde, heslo už ne.
      Naměřeno snímkem na 1100 px — navigace se zalomila na DVA ŘÁDKY
      a tlačítko „Spustit projekt" vyjelo za pravý okraj okna. Hamburger
      sem dávat nechci (místo na odkazy je), takže se obětuje heslo
      a zúží mezery. */
/* ⚠️ Hranice byla nejdřív 1280 px — naměřeno snímkem, že na 1320 px se
      navigace LÁME POŘÁD. Odhad podle počtu znaků nestačí: rozhoduje
      skutečná šířka písma, mezery i tlačítko. Hranici posouvat jen podle
      snímku, ne podle citu. */
@media (min-width: 1025px) and (max-width: 1440px) {
    .sim-hlavicka-heslo { display: none; }
    .sim-nav { gap: var(--sim-space-5); }
}

@media (max-width: 1024px) {
    .sim-nav, .sim-hlavicka-heslo { display: none; }
    .sim-hamburger {
        display: inline-flex; align-items: center; justify-content: center;
        /* 🔴 `flex-shrink: 0` je nutné. Bez něj se tlačítko nabídky při
           nedostatku místa smrští — naměřeno na šířce 390 px: zbylo z něj
           14 px odsunutých přesně na pravou hranu okna, takže se na web
           nedalo z telefonu vůbec navigovat. Přetékající řádek se přitom
           nijak neprojeví, jen tiše vytlačí poslední prvek ven. */
        flex: 0 0 auto;
        /* ⚠️ Odsazení drží VÝZVA, ne tlačítko nabídky. Když mizí heslo
           (to jinak odsouvá pravou skupinu doprava), zůstalo kruhové tlačítko
           nalepené na logu uprostřed hlavičky a vypadalo jako součást značky.
           `margin-left` tu proto být nesmí — jinak by si obě tlačítka
           odsazení přetahovala a mezi nimi vznikla mezera přes půl hlavičky. */
        width: 44px; height: 44px;
        background: none; border: 1px solid var(--sim-line-strong);
        border-radius: var(--sim-radius-md); color: var(--sim-text); cursor: pointer;
    }
    .sim-hamburger svg { width: 20px; height: 20px; display: block; }
}

/* ⚠️ Kruhová výzva na telefonu ZŮSTÁVÁ. Vypouštěla se, dokud byla široká —
   dnes má 46 px a vejde se vedle tlačítka nabídky, takže není důvod brát
   člověku na telefonu jedinou výzvu z hlavičky. Mizí jen heslo. */
/* Výzva drží pravou stranu hlavičky: na širokém displeji ji odsouvá od
   nabídky, na úzkém od loga. Tlačítko nabídky proto `margin-left` nemá —
   jinak by si obě odsazení přetahovala. */
.sim-hlavicka-cta { margin-left: auto; }

/* Na úzkém displeji se široká výzva vypouští — vedle loga a tlačítka nabídky
   se nevejde a tatáž akce je hned pod ní v úvodním bloku i v nabídce. */
@media (max-width: 640px) {
    .sim-hlavicka-heslo { display: none; }
    .sim-hlavicka-cta { display: none; }
    /* 🔴 Bez výzvy nemá pravou stranu kdo držet (C57): tlačítko nabídky
       zůstalo na 390 px uprostřed hlavičky, 32 px za logem. Tady si
       odsazení může vzít samo — výzva, se kterou by se o ně přetahovalo,
       v tomhle pásmu není. */
    .sim-hamburger { margin-left: auto; }
}

/* ===========================================================================
   Patička
   =========================================================================== */

.sim-paticka {
    /* C77: v předloze za patičkou tlumeně prosvítá hala (modrošedá, teplé
       odlesky) — ne plošná čerň. Stejný render jako pozadí sekcí, jen
       pod hustou vrstvou, aby text zůstal čitelný. */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--sim-bg-deep);
    border-top: 1px solid var(--sim-line);
    /* C69: předloha má patičku zhruba 285 px vysokou, u nás bylo 450 —
       odkazy po 40 px a velká odsazení. Rozměry níž jsou z ní naměřené. */
    padding-block: var(--sim-space-7) var(--sim-space-5);
    margin-top: var(--sim-space-10);
    font-size: .86rem;
}
/* Hala jako ROZMAZANÁ vrstva: ostrý pás světel vedl přímo přes heslo
   značky. Rozpitá zůstane jen modrošedá a teplé skvrny jako v předloze. */
.sim-paticka::before {
    content: '';
    position: absolute;
    inset: -20px;
    z-index: -1;
    background: url('../sim/pozadi/hala-linka.webp?v=c77') center 70% / cover no-repeat;
    filter: blur(10px);
    opacity: .32;
    pointer-events: none;
}
/* Heslo je v předloze šedé, obyčejné, na dva řádky. */
.sim-paticka-heslo { color: var(--sim-muted); font-size: .92rem; line-height: 1.6; max-width: 30ch; }
.sim-paticka-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--sim-space-8);
    align-items: start;
}
/* 🔴 PĚT SLOUPCŮ SE S `auto-fit` NESEŠLO.
   `minmax(220px, 1fr)` vyrobí z dostupné šířky nejvýš pět stop, jenže
   sloupců je šest (novinky zabírají dvě) — novinky proto padaly na druhý
   řádek pod logo, zatímco předloha je má vpravo vedle kontaktu. Na širokém
   displeji se tedy sloupce vyjmenují a poměry odpovídají předloze. */
@media (min-width: 1100px) {
    .sim-paticka-mrizka { grid-template-columns: 1.5fr .85fr .9fr 1fr 1.3fr; }
    .sim-paticka-novinky { grid-column: auto; }
}
/* ── Novinky v patičce ─────────────────────────────────────────────────
   Sloupec je širší než ostatní — do 220 px se pole na e-mail i s tlačítkem
   nevejde a vstup by se zmáčkl na pár znaků.
   🔴 Dvojnásobná šířka platí JEN v pásmu, kde se sloupce skládají samy
      (`auto-fit`). Od 1100 px je jich pět vyjmenovaných a `span 2` by z nich
      udělal šest — novinky by spadly na druhý řádek pod logo, přesně jak se
      to dělo do 26. 10. 2026. Pravidlo bez omezení navíc přebíjelo opravu
      v pozdějším `@media`, protože mělo stejnou specifičnost a stálo níž. */
@media (min-width: 1025px) and (max-width: 1099px) {
    .sim-paticka-novinky { grid-column: span 2; }
}

.sim-novinky-form { margin-top: var(--sim-space-4); }

/* 🔴 Past se ODSUNUJE, neskrývá. `display: none` část vyplňovačů
   přeskočí, kdežto odsunuté pole vyplní — a právě o to tady jde.
   `aria-hidden` na obalu drží pole mimo čtečky obrazovky. */
/* Past na roboty — jedno pravidlo pro všechny formuláře webu.
   ⚠ Je to `.sim-past`, ne `.sim-novinky-past`: používá ji i kontaktní
     formulář a dvě stejná pravidla pod různými jmény se dřív nebo později
     rozešlou. Není `display: none` ani `hidden` schválně — to robot pozná
     a pole nevyplní; takhle ho vyplní a prozradí se. */
.sim-past {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.sim-novinky-radek {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--sim-line-strong);
    border-radius: var(--sim-radius-md);
    background: rgba(255, 255, 255, .03);
    overflow: hidden;
    transition: border-color var(--sim-t-hover) var(--sim-ease),
                box-shadow var(--sim-t-hover) var(--sim-ease);
}
.sim-novinky-radek:focus-within {
    border-color: var(--sim-accent);
    box-shadow: 0 0 0 3px var(--sim-accent-glow);
}

.sim-novinky-pole {
    flex: 1 1 auto;
    min-width: 0;                /* bez tohohle pružné pole přeteče obal */
    padding: .7rem .9rem;
    background: none;
    border: 0;
    color: var(--sim-text);
    font: inherit;
    font-size: .92rem;
}
.sim-novinky-pole::placeholder { color: var(--sim-faint); }
.sim-novinky-pole:focus { outline: none; }

.sim-novinky-odeslat {
    flex: 0 0 auto;              /* ať se tlačítko nikdy nesmrskne */
    width: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sim-accent);
    border: 0;
    color: #0B0B0F;
    cursor: pointer;
    transition: filter var(--sim-t-hover) var(--sim-ease);
}
.sim-novinky-odeslat:hover, .sim-novinky-odeslat:focus-visible { filter: brightness(1.12); }
.sim-novinky-odeslat svg { width: 18px; height: 18px; display: block; }
.sim-novinky-form.je-odesilani .sim-novinky-odeslat { opacity: .5; pointer-events: none; }

.sim-novinky-poznamka {
    font-size: .78rem;
    color: var(--sim-faint);
    margin: var(--sim-space-3) 0 0;
}
.sim-novinky-poznamka.je-hotovo { color: var(--sim-success, #3DFFA0); }
.sim-novinky-poznamka.je-chyba  { color: var(--sim-danger, #FF6B6B); }



/* V předloze jsou nadpisy sloupců běžný bílý text, ne prostrkaná kapitálka.
   Šedá verze se ztrácela a sloupce vypadaly bez hlaviček. */
.sim-paticka-nadpis {
    font-size: .9rem;
    color: var(--sim-text);
    margin: 0 0 var(--sim-space-4);
    font-weight: 600;
    letter-spacing: 0;
}
/* Odkazy jsou v předloze hustě pod sebou (~25 px na řádek při 1536 px). */
.sim-paticka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sim-paticka-kontakt > li { display: flex; align-items: center; gap: var(--sim-space-3); }
.sim-paticka-kontakt .sim-paticka-ikona {
    /* Specifičtěji než obecné `.sim-ikona` (28 px), které stojí níž a
       drobnou ikonku v patičce přebíjelo. */
    flex: 0 0 auto;
    width: 17px; height: 17px;
    color: var(--sim-accent);
}
.sim-paticka a { color: var(--sim-muted); text-decoration: none; transition: color var(--sim-t-hover) var(--sim-ease); }
.sim-paticka a:hover, .sim-paticka a:focus-visible { color: var(--sim-accent); }
/* Na dotyk je každý odkaz terčík — řádek na výšku ovládacího prvku. Hustá předloha
   (~25 px na řádek) platí pro myš; do C81 měl „Blog“ na telefonu 29 × 16 px.
   Ikony sítí mají vlastní kruhový rozměr. */
@media (max-width: 768px) {
    .sim-paticka ul:not(.sim-paticka-site) { gap: 0; }
    .sim-paticka ul:not(.sim-paticka-site) a { display: inline-flex; align-items: center; min-height: var(--sim-ctl-h); }
}
.sim-paticka-spodek {
    display: flex; flex-wrap: wrap; gap: var(--sim-space-5);
    justify-content: space-between;
    margin-top: var(--sim-space-6);
    padding-top: var(--sim-space-4);
    border-top: 1px solid var(--sim-line);
    font-size: .78rem;
    color: var(--sim-faint);
}
.sim-paticka-pravni { display: flex; flex-wrap: wrap; gap: var(--sim-space-5); }

/* ===========================================================================
   Hlášky
   =========================================================================== */

.sim-hlaska {
    margin: var(--sim-space-5) 0 0;
    padding: var(--sim-space-4) var(--sim-space-5);
    border-radius: var(--sim-radius-md);
    border: 1px solid var(--sim-line);
    background: var(--sim-surface);
}
.sim-hlaska--ok { border-color: rgba(61, 255, 160, .4); }
.sim-hlaska--chyba { border-color: rgba(255, 92, 92, .5); }

/* ===========================================================================
   Nabídka pro mobil
   =========================================================================== */

/* 🔴 Guard je povinný: `[hidden]` prohrává s `display` z vlastní třídy,
   takže bez něj by zavřená nabídka zůstala přes celou obrazovku a neviditelně
   blokovala všechny kliky. Přesně to se stalo exit-intent popupu na starém
   webu — uživatel hlásil „nejde nic kliknout“. */
.sim-menu-mobil[hidden] { display: none; }

.sim-menu-mobil {
    position: fixed;
    inset: var(--sim-hlavicka-h) 0 0 0;
    z-index: 890;
    background: rgba(4, 7, 13, .97);
    backdrop-filter: blur(16px);
    padding-block: var(--sim-space-7);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sim-t-panel) var(--sim-ease);
}
.sim-menu-mobil.je-otevrena { opacity: 1; pointer-events: auto; }
.sim-menu-mobil nav { display: grid; gap: var(--sim-space-2); }
.sim-menu-mobil a {
    font-family: var(--sim-font-display);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sim-text);
    padding-block: var(--sim-space-3);
    border-bottom: 1px solid var(--sim-line);
}
.sim-menu-mobil a.je-aktivni { color: var(--sim-accent); }

/* ===========================================================================
   Nástup sekcí při scrollu
   =========================================================================== */

[data-sim-odhal] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--sim-t-reveal) var(--sim-ease),
                transform var(--sim-t-reveal) var(--sim-ease);
}
[data-sim-odhal].je-videt > * { opacity: 1; transform: none; }
/* Postupný nástup — pátá a další položka už nečeká, aby se to nevleklo. */
[data-sim-odhal] > *:nth-child(2) { transition-delay: 80ms; }
[data-sim-odhal] > *:nth-child(3) { transition-delay: 160ms; }
[data-sim-odhal] > *:nth-child(4) { transition-delay: 240ms; }
[data-sim-odhal] > *:nth-child(5) { transition-delay: 300ms; }
[data-sim-odhal] > *:nth-child(n+6) { transition-delay: 340ms; }

/* ===========================================================================
   Ikony
   =========================================================================== */

.sim-ikona { width: 28px; height: 28px; display: block; }

/* ===========================================================================
   HERO — úvodní plocha s továrnou
   =========================================================================== */

.sim-hero {
    position: relative;
    /* 🔴 Výška je odvozená z POMĚRU STRAN PŘEDLOHY, ne z výšky okna.
       Hero tam zabírá 1536×680, tedy poměr asi 2,26 : 1. S plnou výškou okna
       (poměr 1,6) zbývala pod strojem třetina plochy prázdná — scéna je široká,
       ne vysoká, a doplnit se tam nedá nic, co by v předloze bylo.
       `min-height` zůstává kvůli delším textům; `svh` drží sekci rozumnou
       i na nízkém okně. */
    min-height: min(82svh, 780px);
    display: flex;
    align-items: center;
    /* Pod hlavičkou (76 px) jen úzký pruh: nadtitulek stojí v předloze
       ~55 px pod spodní hranou hlavičky (C57; dřív o 37 px níž). */
    padding-block: calc(var(--sim-hlavicka-h) + var(--sim-space-3)) var(--sim-space-7);
    background:
        radial-gradient(120% 90% at 72% 42%, rgba(255, 155, 46, .10) 0%, transparent 58%),
        radial-gradient(90% 70% at 20% 12%, rgba(61, 139, 255, .08) 0%, transparent 60%),
        linear-gradient(180deg, var(--sim-bg-hero) 0%, var(--sim-bg) 62%, var(--sim-bg-deep) 100%);
    overflow: hidden;
}

/* Zář za scénou — jantarové světlo žárovky. Mění ji `tovarna.js`. */
.sim-hero-zar {
    position: absolute;
    top: 18%; right: 6%;
    width: min(760px, 62vw); aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sim-amber-soft) 0%, transparent 64%);
    filter: blur(40px);
    opacity: var(--sim-zar, .85);
    transition: opacity 420ms var(--sim-ease);
    pointer-events: none;
}

.sim-hero-mrizka {
    position: relative;
    z-index: 2;              /* nad plátnem, které leží přes celé hero */
    /* 🔴 PRÁZDNÁ MÍSTA MŘÍŽKY MUSÍ PROPUSTIT MYŠ I PRST DO SCÉNY (C56).
       Klik a najetí poslouchá `[data-sim-tovarna]`, a ten je sourozenec
       mřížky, ne její rodič — co zachytí mřížka, ke scéně nedorazí.
       Naměřeno: na 1440 px kryla `.sim-hero-scena` střed scény včetně
       robotické ruky (y 152–636), na telefonu zbyl pro dotyk jediný pruh
       u hlavičky. Ukazatel chytají jen skutečné prvky — text, tlačítka,
       štítky (ty si `auto` vracejí samy). */
    pointer-events: none;
    width: 100%;
    display: grid;
    /* 🔴 Sloupec je ZÁMĚRNĚ užší, než je celý nadpis. V předloze se „Z NÁPADŮ
       DĚLÁME“ láme na dva řádky a „DIGITÁLNÍ SVĚTY.“ zůstává vcelku — přesně
       to dělá tahle šířka ve spojení s kondenzovaným řezem. Širší sloupec by
       nadpis srazil na dva řádky a nadpis by přestal odpovídat předloze. */
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: var(--sim-space-8);
    /* Text stojí v předloze NAHOŘE pod hlavičkou (nadtitulek ~115 px při
       1536 px), ne uprostřed sloupce se štítky. Vystředěný začínal nadpis
       o 64 px níž než v předloze (C57). */
    align-items: start;
}

/* 🔴 ZTMAVENÍ ZLEVA — bez něj by nadpis ležel přímo na rozsvícené hale
   a nepřečetl by se. V předloze je levá třetina haly zatažená do tmy
   přesně z tohohle důvodu; není to dekorace, je to podmínka čitelnosti.
   Měří ji zkouška čitelnosti (práh 4,5:1 pro text). */
.sim-hero.ma-scenu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* ⚠️ Zatemňuje se jen tolik, kolik potřebuje text. Plné zatemnění levé
       třetiny bylo bezpečné, ale předloze se vzdalovalo: v ní je hala
       s náčrtky vidět i za nadpisem. Změřeno zkouškou čitelnosti — nadpis
       má poměr 19,5 : 1 proti prahu 3, takže rezerva na prosvítající halu
       tu je. Po každé změně těchhle čísel tu zkoušku pustit znovu. */
    background: linear-gradient(
        to right,
        rgba(5, 8, 16, .97) 0%,
        rgba(5, 8, 16, .82) 26%,
        rgba(5, 8, 16, .42) 40%,
        transparent 54%
    );
    pointer-events: none;
}

/* 🔴 Na úzkém displeji musí ztmavení jít ODSHORA DOLŮ, ne zleva doprava.
   Text tam leží přes celou šířku, takže vodorovný přechod zakryl i scénu
   a z továrny zůstal tmavý flek — přesně to, co zadavatel na webu nechce.
   Svisle se zatemní jen pruh pod strojem, kde text skutečně je. */
@media (max-width: 980px) {
    .sim-hero.ma-scenu::before {
        /* Zatemňuje se HORNÍ pruh, kde leží text; stroj dole zůstává vidět. */
        background: linear-gradient(
            to bottom,
            var(--sim-bg-hero) 0%,
            rgba(5, 8, 16, .88) 30%,
            rgba(5, 8, 16, .42) 46%,
            transparent 62%
        );
    }
}

.sim-hero-text { position: relative; z-index: 2; }
.sim-hero-text > * { pointer-events: auto; }
/* Mezery z předlohy (C57): verzálky nadpisu → perex 23 px, perex →
   tlačítko 33 px. Dřív 45 a 55 px — hero se tím rozjíždělo do výšky. */
.sim-hero-text .sim-eyebrow { margin-bottom: var(--sim-space-3); }
.sim-hero-text .sim-h1 { margin-bottom: var(--sim-space-2); }
.sim-hero-text .sim-perex { font-size: clamp(1rem, 1.2vw, 1.12rem); margin-bottom: var(--sim-space-5); }

.sim-hero-tlacitka {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--sim-space-5);
}

/* V předloze stojí tlačítko a odkaz „Prozkoumat továrnu" VEDLE SEBE na jednom
   řádku. Textový sloupec je kvůli nadpisu užší, než je ten řádek široký, takže
   se bez tohohle láme pod sebe a hero naroste o další řádek.
   ⚠️ Přesah jde jen doprava do scény, kde pod ním nic není — proto `max-content`
      a ne zmenšení tlačítka, které by přestalo odpovídat předloze. */
@media (min-width: 981px) {
    .sim-hero-text .sim-hero-tlacitka {
        flex-wrap: nowrap;
        width: max-content;
        max-width: 560px;
    }
}

/* ── Statistiky ───────────────────────────────────────────────────────── */

.sim-cisla {
    display: flex; flex-wrap: wrap;
    gap: var(--sim-space-7);
    margin: var(--sim-space-8) 0 0;
}
.sim-cislo { margin: 0; }
.sim-cislo-hodnota {
    font-family: var(--sim-font-display);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 800;
    color: var(--sim-accent);
    line-height: 1;
    margin: 0;
}
.sim-cislo-popis {
    font-family: var(--sim-font-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    /* Plná bílá, ne průhledná ani šedá: popisky leží nad živou scénou
       a jas pod nimi se mění s kamerou. `--sim-faint` (50 %) měl 4,33 : 1,
       `--sim-dim` (66 %) po posunu kamery v C65 4,11 : 1 nad šedou stěnou
       haly a ani `--sim-muted` nevydržel: v C80 nad pozadím 95/255 jen
       4,34–4,40 : 1 („let zkušeností“) — práh je 4,5. Bílá tam má 6,4 : 1. */
    color: var(--sim-text);
    margin: var(--sim-space-2) 0 0;
    max-width: 14ch;
}

/* ── Scéna ────────────────────────────────────────────────────────────── */

/* Scéna potřebuje VÝŠKU. S nízkým plátnem se vysoký stroj nevešel a výstupní
   zařízení zůstala uříznutá pod hranou. */
/* 🔴 TENHLE SLOUPEC URČUJE VÝŠKU CELÉHO HERO — ne text vlevo (ten má 445 px)
   a ne plátno (to leží přes celou sekci absolutně). Drží jen popisné štítky,
   takže je to jediné místo, kde se poměr stran hero reguluje. Cíl je poměr
   předlohy asi 2,2 : 1; s 760 px vycházelo hero 909 px a pod strojem zbývala
   třetina plochy prázdná. */
.sim-hero-scena { position: relative; min-height: min(58svh, 560px); }

/* Leží přes CELÉ hero (je sourozencem mřížky, ne jejím potomkem).
   ⚠️ `z-index: 0` ho drží pod ztmavením i pod textem, ale nad pozadím
      sekce — jinak by ho `.sim-hero.ma-scenu::before` překrylo celé. */
/* 🔴 SCÉNA ZAČÍNÁ 50 PX POD HLAVIČKOU (C65). Ležela přes celé hero
   a trubky nad nádrží zajížděly pod průhlednou hlavičku — nabídka přes ně
   nešla přečíst (zadavatel). Nižší plátno navíc stroj zmenší. */
.sim-tovarna {
    position: absolute;
    inset: calc(var(--sim-hlavicka-h) + 50px) 0 0 0;
    z-index: 0;
    overflow: hidden;
}
.sim-tovarna-plocha { position: absolute; inset: 0; }

/* 🔴 Plátno musí splynout s pozadím. Bez masky končí scéna ostrou hranou
   obdélníku a je na první pohled vidět „okno s 3D“ — v předloze hala plynule
   přechází do tmy. Maska se počítá ve dvou směrech zvlášť. */
.sim-tovarna canvas {
    display: block;
    width: 100%; height: 100%;
    /* ⚠️ Zleva se scéna NEOŘEZÁVÁ — hala má podle předlohy pokračovat až
          za nadpis a do tmy ji převádí ztmavení, ne maska. Ořez by udělal
          svislou hranu uprostřed stránky. */
    -webkit-mask-image:
        linear-gradient(to right, #000 0, #000 95%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 6%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, #000 0, #000 95%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 6%, #000 88%, transparent 100%);
    mask-composite: intersect;
}

/* Dokud scéna nenaběhne (nebo když WebGL není), drží místo jemná zář —
   ne prázdná díra. */
.sim-tovarna::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 155, 46, .14) 0%, transparent 66%);
    filter: blur(30px);
    transition: opacity 600ms var(--sim-ease);
}
.sim-tovarna.je-zivy::before { opacity: 0; }

/* Telefon živou továrnu nestaví (`spoustec-3d.js`): stojí nejvíc práce a je
   vidět jen pod textem. Tohle je její fotka (`_plan/nastroje/glb/plakat.mjs`).
   Hranici 900 px sdílí se skripty. */
@media (max-width: 899px) {
    .sim-tovarna { background: url('../sim/hero-mobil.webp?v=c80') center bottom / 100% auto no-repeat; }
}

/* Kurzor nad dílem, který něco umí.
   🔴 Bez tohohle pravidla nebylo na scéně poznat, že se dá kliknout — paprsek
      zvýraznění počítal, třída se nasazovala, ale návštěvník viděl pořád
      stejnou šipku. Třídu `je-nad-prvkem` nasazuje `obnovZvyrazneniMysi()`
      jednou za snímek, ne na každý pohyb myši. */
.sim-tovarna.je-nad-prvkem { cursor: pointer; }

/* Štítky kolem stroje. Nejsou v mřížce — leží nad scénou podle předlohy.
   🔴 `inset: 0`, NE `height: 100%`. Rodič `.sim-hero-scena` má jen
      `min-height`, a výška v procentech se vůči rodiči bez `height`
      počítá jako `auto` — seznam byl tedy vysoký nula a štítek s `bottom`
      skončil NAD scénou, odtržený kdesi u hlavičky. Vypadalo to jako
      chyba sazby stránky, přitom to bylo o jeden chybějící rozměr. */
.sim-stitky {
    position: absolute;
    inset: 0;
    z-index: 3;
    list-style: none;
    margin: 0; padding: 0;
    pointer-events: none;
}
.sim-stitky-polozka { position: absolute; max-width: 200px; pointer-events: auto; }
/* 🔴 Pozice jsou ověřené SNÍMKEM, ne odhadem z kódu. Štítek 01 měl
      `top: 14%` a jeho popisek padal PŘES náčrtky u žárovky — text na
      kresbě splýval a nešel přečíst. */
.sim-stitky-polozka--1 { top: 3%;   left: 1%; }
/* Štítek 02 stojí VPRAVO nad hlavou nádrže (C62): na 38 % ležel přesně
   přes nápis SIMONET na pásu hlavy, který je v předloze vidět celý. */
.sim-stitky-polozka--2 { top: 0;    left: 53%; }
.sim-stitky-polozka--3 { top: 11%;  right: 1%; }
/* 🔴 Čtvrtý štítek měl `bottom: 9%` a komentář tvrdil „nad dopravník".
   Snímek ukázal opak: padal POD plátno scény, do prázdné tmavé plochy,
   odtržený od stroje, ke kterému patří. Plátno totiž končí dřív než
   kontejner štítků, takže `bottom` měří od jiné hrany, než se zdá.
   Nově leží u výstupu vpravo, kde v záběru volno doopravdy je.
   ⚠️ V předloze čtvrtý štítek v úvodní ploše NENÍ (jsou tam tři) — je tu
      proto, že scéna má čtvrtý uzel a ten musí jít vybrat i štítkem. */
.sim-stitky-polozka--4 { top: 49%;  right: 1%; }

/* 🔴 Mezipásmo 1025–1340 px: procenta se s poměrem stran rozcházejí.
      Naměřeno na 1100 px — štítky 02, 03 a 04 se nahustily k sobě u pravého
      okraje, protože text má pevnou šířku v pixelech a v užším okně zabírá
      relativně víc. Na 1600 px přitom tytéž hodnoty sedí.
   ⚠️ Nejde o scénu, ale o rozestupy: štítky se rozprostřou do výšky
      místo do šířky, které tu tolik není. */
@media (min-width: 1025px) and (max-width: 1340px) {
    .sim-stitky-polozka--1 { top: 2%;  left: 0; }
    .sim-stitky-polozka--2 { top: 0;   left: 46%; }
    /* ⚠️ Štítek 03 musí zůstat NAD monitorem. Při `top: 26%` ležel přes
          obrazovku a zakrýval nápis „Vaše vize online." — tedy přesně to,
          co na monitoru má být vidět. */
    /* C77: štítky jsou vyšší (výrazné písmo) — na 14 % ležel štítek 03
       přes popis štítku 02. 22 % je pod ním a stále nad monitorem (~47 %). */
    .sim-stitky-polozka--3 { top: 22%; right: 0; }
    .sim-stitky-polozka--4 { top: 58%; right: 0; }
}

.sim-stitek {
    cursor: pointer;
    font-family: inherit;
    /* 🔴 `<button>` NEDĚDÍ barvu písma — prohlížeč mu dá svou vlastní tmavou.
       Na tmavém podkladu je pak název fáze prakticky neviditelný; chytil to
       až snímek, v HTML text samozřejmě byl. */
    color: var(--sim-text);
    transition: border-color var(--sim-t-hover) var(--sim-ease),
                box-shadow var(--sim-t-hover) var(--sim-ease),
                transform var(--sim-t-hover) var(--sim-ease);
}
.sim-stitek:hover, .sim-stitek:focus-visible, .sim-stitek.je-aktivni {
    border-color: var(--sim-accent);
    box-shadow: 0 0 24px var(--sim-accent-glow);
    transform: translateY(-2px);
}
/* 🔴 Popisek leží nad ŽIVOU scénou — kamera se pohupuje, takže pod ním
      jednou je tma a podruhé rozsvícený panel nebo displej telefonu.
      Snímek to ukázal doslova: „MÉNĚ RUTINY / VÍCE MOŽNOSTÍ" splynulo
      s barevnými dlaždicemi na telefonu. Hledat pozici, kde to nikdy
      nevadí, nejde — pod textem proto musí být vlastní podklad, stejně
      jako ho má samotný štítek. */
.sim-stitek-popis {
    display: inline-block;
    padding: 5px 10px;
    background: rgba(4, 7, 13, .68);
    backdrop-filter: blur(5px);
    border-radius: var(--sim-radius-sm);
    font-family: var(--sim-font-mono);
    /* .66rem = 10,6 px. Pri .62rem (9,9 px) hlasila zkouska mobilu popisek
       jako prilis maly i na verzalkovou mez 10 px -- stitek je jediny text
       ve scene, ktery navstevnik na telefonu cte, takze patri nad mez,
       ne tesne pod ni. */
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.7;
    color: var(--sim-faint);
    margin: var(--sim-space-3) 0 0 var(--sim-space-4);
}

@media (max-width: 1024px) {
    .sim-hero-mrizka { grid-template-columns: minmax(0, 1fr); }
    .sim-hero-scena { min-height: 360px; }
    /* 🔴 Sloupec musí být aspoň tak široký jako nejširší štítek, protože
          `.sim-stitek` má `white-space: nowrap` a zúžit se neumí. Při
          `min(150px, …)` vycházely na telefonu 390 px dva sloupce po 163 px,
          do nichž se pilulka široká 192 px nevešla — vyčuhovala 3 px za
          pravý okraj obrazovky a `overflow-x: hidden` ji tiše uřízl
          (naměřeno 26. 10. 2026 zkouškou mobilu).
       ⚠️ `max-width: 100%` na tlačítku je pojistka pro delší text
          z administrace: radši zalomený štítek než uříznutý. */
    .sim-stitky { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
                  gap: var(--sim-space-4); height: auto; margin-top: var(--sim-space-6); }
    .sim-stitky-polozka { position: static; max-width: none; }
    .sim-stitek { max-width: 100%; white-space: normal; }
}

/* ===========================================================================
   VÝROBNÍ LINKA — skleněné nádrže na dopravníku
   =========================================================================== */

.sim-linka { padding-block: var(--sim-space-10); position: relative; }
/* Plátna živých skříní přesahují vitríny do stran (natočená skříň se
   nesmí zaříznout). Na úzkém displeji by přesah krajní vitríny vyčníval
   za okraj a telefon by stránku rozšířil — naměřeno 390 → 407 px, šlo
   s ní posouvat do strany. Sekce přesah ořízne: `clip` nevytvoří posuvný
   kontejner a svislý směr nechá být; `hidden` je záloha pro prohlížeče,
   které `clip` neznají.
   C79: totéž platí pro každou sekci s vitrínami živého 3D — výpis výtvorů
   na telefonu rozšířil stránku o 17 px (karta na celou šířku, plátno o 12 %
   do stran). Jedno pravidlo pro všechny, ať se na novou sekci nezapomene. */
.sim-linka,
.sim-duvody,
.sim-proces,
.sim-vytvory,
.sim-programy,
.sim-hlava,
.sim-sluzba,
.sim-balicky,
.sim-skupiny,
.sim-kontakt { overflow-x: hidden; overflow-x: clip; }

.sim-linka-mrizka { display: grid; gap: var(--sim-space-8); align-items: center; }
.sim-linka.je-vedle .sim-linka-mrizka { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }

.sim-linka-hlava .sim-h2 { margin-bottom: var(--sim-space-5); }
.sim-linka-tlacitko { margin-top: var(--sim-space-6); }

.sim-nadrze {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    /* 🔴 PEVNĚ DANÝ POČET SLOUPCŮ, ne `auto-fit`. Předloha má všechny
       položky v JEDNÉ řadě. `auto-fit` s `minmax(190px, 1fr)` se rozhoduje
       podle toho, kolik se jich větších než 190 px vešle — a jakmile mezery
       přetečou o jediný pixel, utořížkne jednu položku na další řádek.
       Při šířce 1200 px takhle čtyři nádrže vyšly jako 3 + 1 a sekce
       vypadala rozsypaně. Počet řídí výhradně mediální dotazy níž. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sim-space-5);
    position: relative;
}


.sim-nadrz { position: relative; }

/* Šipka mezi nádržemi — jen u postupu a jen na širokém displeji. */
.sim-linka.ma-sipky .sim-nadrz + .sim-nadrz::before {
    content: "";
    position: absolute;
    /* Šipka v předloze je výrazná žlutá krokev (~22 × 40 px) se září,
       uprostřed výšky kapsle — drobná šedá se mezi rendery ztrácela. */
    left: calc(var(--sim-space-5) / -2 - 13px); top: 30%;
    width: 22px; height: 22px;
    border-top: 3px solid var(--sim-accent-bright);
    border-right: 3px solid var(--sim-accent-bright);
    transform: rotate(45deg);
    filter: drop-shadow(0 0 6px var(--sim-accent-glow));
    z-index: 1;
}
@media (max-width: 760px) {
    .sim-linka.ma-sipky .sim-nadrz + .sim-nadrz::before { display: none; }
}

.sim-nadrz-odkaz {
    display: grid;
    gap: var(--sim-space-4);
    /* ⚠️ `start`, ne výchozí roztažení: položky v řadě jsou stejně vysoké
       a mřížka by zbylé místo kratších rozdala řádkům — štítky pod vitrínou
       pak seděly níž než u položky s delším popisem (C77, „02 DESIGN"). */
    align-content: start;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* 🔴 SKLENĚNÁ SKŘÍŇ, NE VÁLEC (C59). Obě předlohy — detail i celá
   stránka — mají nádrže jako vitríny ŠIRŠÍ NEŽ VYSOKÉ (~1,3 : 1) se
   zaoblenými rohy, kovovým víkem, zlatě svítící hranou a podstavcem se
   světlem. Elipsa hladiny a víka, podle které se dřív usuzovalo na válec,
   v nich není; s poměrem 4 : 5 a elipsami vycházely úzké sklenice.
   ⚠️ Poloměr `14% / 11%` zaobluje rohy, ne celé hrany. */
.sim-nadrz-sklo {
    position: relative;
    display: block;
    aspect-ratio: 13 / 10;
    border-radius: 14% / 11%;
    border: 1px solid rgba(255, 180, 80, .42);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 40%,
                        rgba(10, 18, 28, .85) 100%);
    /* Zlatá hrana skla a teplý svit zespodu — v předloze nejnápadnější
       rys vitríny. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
                inset 0 0 22px rgba(255, 155, 46, .16),
                var(--sim-shadow-card);
    overflow: hidden;
    transition: border-color var(--sim-t-hover) var(--sim-ease),
                box-shadow var(--sim-t-hover) var(--sim-ease);
}
/* Odlesk na skle. Úzký a rozmazaný — širší vypadal jako šedý pruh přes
   celou nádrž, ne jako světlo na zaobleném povrchu. */
.sim-nadrz-sklo::before {
    content: "";
    position: absolute;
    top: 14%; left: 7%;
    width: 4%; height: 58%;
    border-radius: var(--sim-radius-pill);
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .04) 70%, transparent);
    filter: blur(3px);
}

/* Podstavec — kovová lišta, na které skříň stojí; svítí do skla. */
.sim-nadrz-dno {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 11%;
    background: linear-gradient(180deg, #2A3341 0%, #161D27 100%);
    border-top: 1px solid rgba(255, 190, 100, .55);
    box-shadow: 0 -1px 14px rgba(255, 170, 70, .45);
}

/* Víko — kovový pás přes horní hranu. Leží UVNITŘ skla, protože to má
   `overflow: hidden` — cokoli vyčnívá ven, se neviditelně ořízne. */
.sim-nadrz-viko {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 9%;
    background: linear-gradient(180deg, #4C5768 0%, #313B49 48%, #232C38 100%);
    border-bottom: 1px solid rgba(255, 180, 80, .45);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, .18), 0 4px 12px rgba(0, 0, 0, .45);
}
/* Světlo uprostřed víka — v předloze malá lampa nad každou vitrínou. */
.sim-nadrz-viko::after {
    content: "";
    position: absolute;
    left: 44%; right: 44%; top: 30%; bottom: 30%;
    border-radius: 2px;
    background: rgba(255, 200, 120, .85);
    box-shadow: 0 0 10px rgba(255, 170, 70, .8);
}

/* Obruč — tenká kovová lišta nad podstavcem. */
.sim-nadrz-obruc {
    position: absolute;
    left: 0; right: 0;
    height: 3%;
    background: linear-gradient(180deg, rgba(180, 192, 210, .34) 0%,
                rgba(60, 70, 86, .5) 46%, rgba(30, 38, 50, .6) 100%);
    border-top: 1px solid rgba(200, 212, 228, .28);
    border-bottom: 1px solid rgba(0, 0, 0, .4);
}
.sim-nadrz-obruc--dole { bottom: 11%; }

/* Světlo u dna — teplá zář nad podstavcem, dýchá. Plochá, ne elipsa:
   skříň se vidí zepředu. */
.sim-nadrz-kapalina {
    position: absolute;
    left: 0; right: 0; bottom: 11%;
    height: 18%;
    background: linear-gradient(0deg, rgba(255, 155, 46, .30), rgba(255, 130, 20, 0));
    animation: sim-hladina 5.5s ease-in-out infinite;
}
@keyframes sim-hladina {
    0%, 100% { height: 16%; opacity: .8; }
    50%      { height: 22%; opacity: 1; }
}

/* Bubliny. Jeden prvek, tři bubliny přes vrstvy pozadí — levnější než tři uzly. */
.sim-nadrz-bubliny {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 215, 130, .55) 38%, transparent 42%),
        radial-gradient(circle, rgba(255, 215, 130, .38) 38%, transparent 42%),
        radial-gradient(circle, rgba(255, 215, 130, .30) 38%, transparent 42%);
    background-size: 7px 7px, 5px 5px, 4px 4px;
    background-position: 34% 92%, 58% 96%, 46% 88%;
    background-repeat: no-repeat;
    animation: sim-bubliny 6s linear infinite;
}
@keyframes sim-bubliny {
    0%   { background-position: 34% 96%, 58% 100%, 46% 92%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { background-position: 30% 22%, 62% 16%, 50% 10%; opacity: 0; }
}

/* Najetí nádrž zrychlí, klik ji na chvíli rozproudí naplno. Třídu sundává
   skript po 2,4 s — trvale zrychlené bubliny by efekt zahodily. */
.sim-nadrz-odkaz:hover .sim-nadrz-bubliny,
.sim-nadrz-odkaz:focus-visible .sim-nadrz-bubliny { animation-duration: 3.4s; }
.sim-nadrz.je-rozproudena .sim-nadrz-bubliny { animation-duration: 1.1s; }
.sim-nadrz.je-rozproudena .sim-nadrz-kapalina { animation-duration: 1.6s; }
.sim-nadrz.je-rozproudena .sim-nadrz-sklo {
    border-color: var(--sim-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 60px var(--sim-accent-glow);
}
.sim-nadrz.je-rozproudena .sim-nadrz-ikona {
    transform: scale(1.14) translateY(-5px);
    filter: drop-shadow(0 0 26px var(--sim-accent-glow));
}

/* Obsah nádrže leží NAD sklem. */
.sim-nadrz-vnitrek {
    position: absolute;
    /* Obsah vitríny je v předloze velký — skoro celá plocha mezi víkem
       a podstavcem. */
    inset: 14% 10% 17%;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.sim-nadrz-ikona {
    width: auto; height: 78%;
    color: var(--sim-accent);
    filter: drop-shadow(0 0 16px var(--sim-accent-glow));
    transition: transform var(--sim-t-panel) var(--sim-ease),
                filter var(--sim-t-panel) var(--sim-ease);
}
/* Vykreslená vitrína (C71) — obrázek je celá kapsle včetně skla a záře,
   proto žádné ořezy ani rámečky; stojí patou na pásu. */
.sim-nadrz-render {
    display: block;
    width: 100%; height: auto;
    position: relative;
    transition: transform var(--sim-t-panel) var(--sim-ease),
                filter var(--sim-t-panel) var(--sim-ease);
}
.sim-nadrz-odkaz:hover .sim-nadrz-render,
.sim-nadrz-odkaz:focus-visible .sim-nadrz-render {
    transform: translateY(-4px);
    filter: drop-shadow(0 0 22px var(--sim-accent-glow));
}
.sim-nadrz.je-rozproudena .sim-nadrz-render {
    filter: brightness(1.22) drop-shadow(0 0 30px var(--sim-accent-glow));
}

.sim-nadrz-odkaz:hover .sim-nadrz-sklo,
.sim-nadrz-odkaz:focus-visible .sim-nadrz-sklo {
    border-color: var(--sim-line-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 44px var(--sim-accent-glow);
}
.sim-nadrz-odkaz:hover .sim-nadrz-ikona,
.sim-nadrz-odkaz:focus-visible .sim-nadrz-ikona { transform: scale(1.08) translateY(-3px); }

/* Kotva pro `.sim-nadrz-vnitrek`, který je uvnitř umístěn absolutně. */
.sim-nadrz-vitrina { position: relative; display: block; }

/* 🔴 DOPRAVNÍK JE POD VITRÍNAMI, NE POD SEZNAMEM (C60).
   Dřív to byla jedna čára pod celým `.sim-nadrze` — od chvíle, kdy jsou
   v „Jak funguje“ štítky pod vitrínami (C59), ležela pod textem. Každá
   vitrína proto nese svůj úsek pásu a ten přesahuje o půl mezery na obě
   strany, takže úseky na sebe navazují. Pás má kladky (opakovaný přechod)
   a zlatou hranu jako v předloze. */
.sim-nadrz-vitrina::after {
    content: "";
    position: absolute;
    left: calc(var(--sim-space-5) / -2);
    right: calc(var(--sim-space-5) / -2);
    bottom: -14px;
    height: 10px;
    background:
        linear-gradient(180deg, rgba(255, 190, 100, .55) 0 1px, transparent 1px),
        repeating-linear-gradient(90deg, #2A3341 0 6px, #141A23 6px 14px);
    border-bottom: 1px solid rgba(0, 0, 0, .5);
    pointer-events: none;
}
/* U vykreslené kapsle je pás silnější a leží POD ní: kapsle na něm stojí
   podstavcem (v obrázku je kolem ní záře, proto pás zajede pod spodní
   okraj obrázku). Kladky jsou kruhy po 26 px, nad nimi zlatá hrana. */
.sim-nadrz-vitrina.je-render { isolation: isolate; }
.sim-nadrz-vitrina.je-render::after {
    z-index: -1;
    bottom: 1%;
    height: 22px;
    background:
        linear-gradient(180deg, rgba(255, 180, 80, .75) 0 1px, rgba(255, 160, 60, .18) 1px 3px, transparent 3px),
        radial-gradient(circle at 13px 13px, #3A4556 0 5px, #10151D 5.5px 7px, transparent 7.5px) 0 0 / 26px 22px repeat-x,
        linear-gradient(180deg, #1B222D, #0B0F15);
    border-bottom: 1px solid rgba(255, 170, 70, .3);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .6);
}
/* Krajní úseky se k okraji ztrácejí, aby pás nebyl useknutý. */
.sim-nadrz:first-child .sim-nadrz-vitrina::after {
    left: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
    mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.sim-nadrz:last-child .sim-nadrz-vitrina::after {
    right: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
    mask-image: linear-gradient(90deg, #000 70%, transparent);
}

/* 🔴 ŽIVÁ 3D SKŘÍŇ (C78) — `public/assets/js/skrine.js`.
   Vitrína drží poměr stran skříně z knihovny, aby se po načtení 3D nic
   neposunulo: obrázek (náhrada) i plátno vyplní totéž místo. Plátno
   přesahuje vitrínu do stran a nahoru, aby se natočená skříň nezařízla
   o okraj — široká je na šikmo o šestinu širší než zepředu. Skript měří
   okno vitríny uvnitř plátna, takže přesah se mění jen tady.
   ⚠️ Plátno je nahrazovaný prvek: `inset` ho NEROZTÁHNE, potřebuje
      výslovnou šířku a výšku. */
.sim-nadrz-vitrina.je-skrin { aspect-ratio: 1 / 1; }
.sim-nadrz-vitrina.je-skrin--siroka { aspect-ratio: 3 / 2; }
.sim-nadrz-vitrina.je-skrin .sim-nadrz-render { height: 100%; object-fit: contain; }
.sim-skrin-platno {
    position: absolute;
    left: -12%; top: -10%;
    width: 124%; height: 118%;   /* dole +8 %: natočený sokl se blíží kameře a klesá */
    max-width: none;   /* obecné `canvas { max-width: 100% }` by přesah usekl */
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--sim-t-panel) var(--sim-ease);
}
/* Totéž platí pro každou vitrínu živého 3D (C79: karty „Proč", kroky procesu,
   stroj ve výzvě, výtvory) — `.sim-3d` je vitrína, ať je v kterékoli sekci. */
.sim-3d { position: relative; display: block; }
.sim-3d.je-ziva .sim-skrin-platno { opacity: 1; }
.sim-3d.je-ziva > :not(.sim-skrin-platno) {
    opacity: 0;
    transition: opacity var(--sim-t-panel) var(--sim-ease);
}
/* Vodorovný tah prstem otáčí skříní, svislý dál posouvá stránku. */
.sim-3d.je-ziva { cursor: grab; touch-action: pan-y; }
.sim-3d.je-ziva.je-tazena { cursor: grabbing; }
/* Ve slideru tah patří slideru — vitrína se netáhne (`data-sim-tah="ne"`). */
.sim-3d.je-ziva[data-sim-tah="ne"] { cursor: inherit; touch-action: auto; }

/* 🔴 ČÍSLO JE SAMOSTATNÝ SLOUPEC (C71). V předloze stojí rámeček s číslem
   vlevo a název i popis začínají na stejné svislici vpravo od něj — popis
   nepodtéká pod číslo. Hlavička je `display: contents`, takže číslo, název
   i popis jsou přímo buňky mřížky a HTML se měnit nemusí. */
.sim-nadrz-text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sim-space-3);
    align-items: start;
}
.sim-nadrz-text .sim-nadrz-hlavicka { display: contents; }
.sim-nadrz-text .sim-nadrz-cislo { grid-row: 1 / span 2; }
.sim-nadrz-text .sim-nadrz-nazev,
.sim-nadrz-text .sim-nadrz-popis { grid-column: 2; }
.sim-nadrz-text .sim-nadrz-nazev { margin-bottom: var(--sim-space-1); }
/* V nabídce („Co vyrábíme“, bez šipek) je popis v předloze drobné
   prostrkané verzálkové písmo s tenkou linkou pod sebou. */
.sim-linka:not(.ma-sipky) .sim-nadrz-popis {
    font-family: var(--sim-font-mono);
    font-size: .68rem;
    line-height: 1.6;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding-bottom: var(--sim-space-2);
    border-bottom: 1px solid var(--sim-line);
    justify-self: start;
}
/* V postupu („Jak funguje“) stojí štítky v předloze POD vitrínami, v nabídce
   („Co vyrábíme“) nad nimi. Pořadí v HTML zůstává (text první — čtečka
   čte název dřív než obrázek), mění se jen vizuálně. */
.sim-linka.ma-sipky .sim-nadrz-text { order: 2; }
/* Pod vitrínou běží pás (14 px) — štítek pod ním potřebuje odstup. */
.sim-linka.ma-sipky .sim-nadrz-odkaz { gap: var(--sim-space-6); }
/* Štítky leží přímo na hale — tmavý závoj kolem písmen je oddělí od
   rozostřených lamp za nimi (žluté skvrny „podsvítily" jednotlivá slova). */
.sim-pozadi .sim-nadrz-text { text-shadow: 0 1px 10px rgba(3, 5, 10, .95), 0 0 3px rgba(3, 5, 10, .8); }
/* Popis kroku je v předloze drobný, na dva řádky. */
.sim-linka.ma-sipky .sim-nadrz-popis { font-size: .8rem; line-height: 1.5; }
/* Číslo a název na jednom řádku, jako v předloze. */
.sim-nadrz-hlavicka {
    display: flex; align-items: center; gap: var(--sim-space-3);
    margin-bottom: var(--sim-space-2);
}
/* Číslo je v drobném rámečku — v předloze je to štítek, ne jen text. */
.sim-nadrz-cislo {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    /* Předloha: čtvercový štítek ~30 px se žlutým číslem (C71). */
    min-width: 34px; height: 34px; padding: 0 6px;
    border: 1px solid var(--sim-line-accent);
    border-radius: 6px;
    font-family: var(--sim-font-mono);
    font-size: .74rem;
    letter-spacing: .12em;
    color: var(--sim-accent);
}
/* Název kroku je v předloze úzký tučný grotesk jako nadpisy sekcí
   (~19 px), ne široké prostrkané verzálky (C71). */
.sim-nadrz-nazev {
    font-family: var(--sim-font-display);
    font-stretch: var(--sim-display-stretch);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0;
}
.sim-nadrz-popis {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--sim-dim);
    margin: 0;
}

@media (max-width: 1024px) {
    .sim-linka.je-vedle .sim-linka-mrizka { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   VÝTVORY — 3D rámy se snímky webů (C79)

   Výtvory jsou záznamy modulu `web-vytvory`. Každý stojí v rámu FRAME 03
   na podstavci PLATFORM BASE se snímkem webu jako svítící obrazovkou
   (`skrine.js`); na úvodce ve slideru, na stránce Výtvory všechny vedle
   sebe, klik vede na stránku výtvoru.

   ⛔ Do 28. 10. 2026 tu byly ukázky na notebooku, monitoru a telefonu
      (tři položky opakovače). Jejich pravidla jsou pryč i s markupem.
   =========================================================================== */

.sim-vytvory { padding-block: var(--sim-space-10); }
.sim-vytvory-mrizka {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--sim-space-8);
    align-items: start;
}
.sim-vytvory-tlacitko { margin-top: var(--sim-space-6); }
.sim-vytvory-hlava .sim-h2,
.sim-clanky-hlava .sim-h2,
.sim-clanky--dalsi .sim-h2 { margin-bottom: var(--sim-space-5); }
/* Výpis (stránka Výtvory): hlavička nad mřížkou, výtvory na celou šířku. */
.sim-vytvory--vypis .sim-vytvory-mrizka { grid-template-columns: minmax(0, 1fr); }

.sim-vytvory-vypis {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sim-space-7) var(--sim-space-5);
}

/* ── Karta: 3D rám nahoře, štítek pod ním ─────────────────────────────────
   🔴 Štítek je POD rámem, ne přes něj. Ve staré podobě ležela ikona druhu
      v pruhu s názvem a na užší kartě se s ním překrývala. */
.sim-vytvor { min-width: 0; }
.sim-vytvor-karta {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.sim-vytvor-karta:focus-visible { outline: none; }

/* Vitrína drží poměr sestavy (široký rám na nízkém podstavci), aby se po
   načtení 3D nic neposunulo. */
.sim-vytvor-vystava { display: block; position: relative; aspect-ratio: 5 / 4; }
/* Náhrada, dokud se 3D nenačte (a podoba bez 3D): snímek jako obrazovka
   v tmavém lemu, zarovnaný k hlavičce webu. Stránka výtvoru má v hlavičce
   tutéž sestavu (široký rám na plochém podstavci), proto i tutéž náhradu. */
.sim-vytvor-nahled,
.sim-vytvor-detail .sim-hlava-nahled {
    position: absolute;
    left: 6%; right: 6%; top: 10%;
    width: 88%; height: 62%;
    object-fit: cover;
    object-position: center top;
    border: 6px solid #0C1118;
    border-radius: var(--sim-radius-md);
    box-shadow: 0 0 0 1px var(--sim-line-strong), 0 18px 40px rgba(0, 0, 0, .55);
}

.sim-vytvor-stitek {
    display: flex;
    flex-direction: column;
    gap: var(--sim-space-2);
    flex: 1;
    margin-top: var(--sim-space-3);
    padding: var(--sim-space-4) var(--sim-space-5) var(--sim-space-5);
    border: 1px solid var(--sim-line-accent);
    border-radius: var(--sim-radius-lg);
    background: var(--sim-sklo);
    /* Matné sklo jako karty „Proč": bez něj prosvítala světla haly za štítkem
       ostrými žlutými obdélníky přímo přes text. */
    -webkit-backdrop-filter: var(--sim-sklo-rozmazani);
            backdrop-filter: var(--sim-sklo-rozmazani);
    box-shadow: var(--sim-sklo-svit), var(--sim-shadow-card);
    transition: background var(--sim-t-hover) var(--sim-ease),
                border-color var(--sim-t-hover) var(--sim-ease);
}
.sim-vytvor-karta:hover .sim-vytvor-stitek,
.sim-vytvor-karta:focus-visible .sim-vytvor-stitek,
.sim-clanek .jta-article__nav-item:hover,
.sim-clanek .jta-article__nav-item:focus-visible {
    background: linear-gradient(180deg, rgba(251, 237, 55, .10), transparent 60%), rgba(8, 13, 22, .8);
    border-color: var(--sim-accent);
}
.sim-vytvor-meta,
.sim-clanek .jta-share__label,
.sim-clanek .jta-article__nav-label {
    font-family: var(--sim-font-mono);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sim-accent);
}
/* Název je věta („Studio Upgrade"), ne verzálky — méně stažený než nadpisy
   sekcí, malá písmena v 62 % se slévala. */
.sim-vytvor-nazev,
.sim-clanek .jta-article__nav-title {
    margin: 0;
    font-family: var(--sim-font-display);
    font-stretch: 75%;
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    font-weight: 700;
    line-height: 1.15;
}
.sim-vytvor-perex {
    font-size: .86rem;
    line-height: 1.5;
    color: var(--sim-dim);
    /* Tři řádky — karty ve slideru drží jednu výšku i u delšího popisu. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sim-vytvor-vice,
.sim-skupina-odkaz,
.sim-clanek .jta-project__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sim-space-2);
    margin-top: auto;
    padding-top: var(--sim-space-2);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--sim-accent);
}
.sim-vytvor-vice svg,
.sim-skupina-odkaz svg,
.sim-clanek .jta-project__back-link svg { display: block; width: 16px; height: 16px; transition: transform var(--sim-t-hover) var(--sim-ease); }
.sim-vytvor-karta:hover .sim-vytvor-vice svg,
.sim-vytvor-karta:focus-visible .sim-vytvor-vice svg,
.sim-skupina-odkaz:hover svg,
.sim-skupina-odkaz:focus-visible svg { transform: translateX(3px); }

/* ── Programy — modul `aplikace` ve vzhledu továrny (C80) ──────────────────
   Karta programu JE karta výtvoru (`sim-vytvor-*`): program je výrobek
   továrny jako web. Liší se sestava 3D (široká skříň se snímkem okna nebo
   s předmětem) a pilulky licence ve štítku. Hlavičky jsou `sim-hlava`. */
.sim-programy,
.sim-clanky { padding-block: 0 var(--sim-space-10); }
.sim-programy-vypis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Široká skříň je nižší než rám výtvoru na podstavci — nižší vitrína,
   jinak by nad skříní a pod ní zůstal prázdný pruh. */
.sim-programy-vypis .sim-vytvor-vystava { aspect-ratio: 4 / 3; }
/* Dvě pilulky vedle sebe v úzké kartě — menší než v hlavičce, ale ne pod
   12 px (mez čitelnosti na telefonu, `zkouska-mobil`). */
.sim-vytvor-stitek .sim-udaje-stitky li { font-size: .75rem; }
/* Tělo detailu, pokladny a stránky po nákupu kreslí modul (`.prg-detail`,
   níž) s odsazením pevné stránky pod hlavičkou webu. Pod hlavičkou
   podstránky by mezi nimi zůstala díra; dole drží rytmus sekcí webu
   (ostatní podstránky končí sekcí s 64 px). */
.sim-hlava + .prg-detail { padding-top: 0; padding-bottom: var(--sim-space-10); }
/* Hlavička programu nese širokou skříň — vitrína širší než 5 : 4. */
.sim-program-detail .sim-hlava-vitrina { aspect-ratio: 16 / 11; }

/* ── Tělo stránky programu pod 3D hlavičkou ───────────────────────────────
   Markup kreslí modul (`views/aplikace/_detail.php`): popis, licence, verze,
   historie — tvrzení o licenci žijí jen tam. Tady dostane sazbu továrny:
   popis jako vedoucí text vlevo, licence a verze jako skleněné panely vpravo,
   historie přes celou šířku jako časová osa. Bez hlavičky webu (pevná adresa
   modulu, když šablona ve Stavebnici chybí) platí obecná pravidla `.prg-*`. */
.sim-program-detail + .prg-detail .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sim-space-6);
    align-items: start;
}
.sim-program-detail + .prg-detail .prg-detail-popis,
.sim-program-detail + .prg-detail .prg-licence,
.sim-program-detail + .prg-detail .prg-verze,
.sim-program-detail + .prg-detail .prg-historie { max-width: none; margin: 0; }

.sim-program-detail + .prg-detail .prg-detail-popis p {
    max-width: 62ch;
    margin: 0 0 var(--sim-space-4);
    font-size: clamp(1.0625rem, .95rem + .35vw, 1.1875rem);
    line-height: 1.7;
    color: var(--sim-muted);
}

/* Matné sklo panelů — panely programu, článku a stránek služeb (C81: balíček,
   provoz, srovnávací tabulka, skupina, technický list). Jedno pravidlo. */
.sim-program-detail + .prg-detail .prg-licence,
.sim-program-detail + .prg-detail .prg-verze,
.sim-clanek .jta-news-source,
.sim-clanek .jta-article__nav-item,
.sim-balicek,
.sim-balicky-provoz,
.sim-srovnani-tabulka,
.sim-skupina,
.sim-popis-list {
    padding: var(--sim-space-6);
    border: 1px solid var(--sim-line-accent);
    border-radius: var(--sim-radius-lg);
    background: var(--sim-sklo);
    -webkit-backdrop-filter: var(--sim-sklo-rozmazani);
            backdrop-filter: var(--sim-sklo-rozmazani);
    box-shadow: var(--sim-sklo-svit), var(--sim-shadow-card);
}

/* Nadpisy panelů jako štítky údajů v hlavičce (`.sim-udaje dt`) — panel
   je technický list programu, ne další kapitola. */
.sim-program-detail + .prg-detail .prg-licence h2,
.sim-program-detail + .prg-detail .prg-verze h2,
.sim-program-detail + .prg-detail .prg-historie h2,
.sim-popis-list-nadpis {
    margin: 0 0 var(--sim-space-4);
    font-family: var(--sim-font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sim-accent);
}

/* Odrážky podmínek nesou informaci — místo puntíku svítící kosočtverec. */
.sim-program-detail + .prg-detail .prg-licence-seznam {
    display: grid;
    gap: var(--sim-space-3);
    padding: 0;
    list-style: none;
    color: var(--sim-text);
}
.sim-program-detail + .prg-detail .prg-licence-seznam li {
    position: relative;
    margin: 0;
    padding-left: var(--sim-space-5);
    line-height: 1.55;
}
.sim-program-detail + .prg-detail .prg-licence-seznam li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .55em;
    width: 7px;
    height: 7px;
    background: var(--sim-accent);
    box-shadow: 0 0 10px var(--sim-accent-glow);
    transform: rotate(45deg);
}

.sim-program-detail + .prg-detail .prg-verze-udaje { gap: var(--sim-space-3) var(--sim-space-5); }
.sim-program-detail + .prg-detail .prg-verze-udaje dt {
    align-self: center;
    font-family: var(--sim-font-mono);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.sim-program-detail + .prg-detail .prg-verze-udaje dd { font-size: .95rem; color: var(--sim-text); }

/* Historie verzí jako časová osa — tečka na svislé lince u každé verze. */
.sim-program-detail + .prg-detail .prg-historie-seznam li {
    position: relative;
    padding: var(--sim-space-4) 0 var(--sim-space-4) var(--sim-space-6);
    border-top: 0;
    border-left: 1px solid var(--sim-line-strong);
}
.sim-program-detail + .prg-detail .prg-historie-seznam li::before {
    content: '';
    position: absolute;
    left: -5px;
    top: calc(var(--sim-space-4) + .45em);
    width: 9px;
    height: 9px;
    border: 1px solid var(--sim-accent);
    border-radius: 50%;
    background: var(--sim-bg);
}

@media (min-width: 1025px) {
    /* `auto 1fr`: dlouhý popis přes oba řádky natáhne jen druhý řádek, takže
       mezi panelem licence a verze nevznikne díra. */
    .sim-program-detail + .prg-detail .container {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-rows: auto 1fr;
        column-gap: var(--sim-space-8);
    }
    .sim-program-detail + .prg-detail .prg-detail-popis { grid-column: 1; grid-row: 1 / span 2; }
    /* Bez popisu (nevyplněný v administraci) stojí panely vedle sebe. */
    .sim-program-detail + .prg-detail .prg-detail-popis ~ .prg-licence,
    .sim-program-detail + .prg-detail .prg-detail-popis ~ .prg-verze { grid-column: 2; }
    .sim-program-detail + .prg-detail .prg-historie { grid-column: 1 / -1; }
}

/* ── Pokladna a stránka po zaplacení pod 3D hlavičkou ─────────────────────
   Formulář pokladny stojí v panelu jako formulář kontaktu (pravidla
   `.sim-kontakt-panel` a polí platí pro oba). Kroky po zaplacení jsou tři
   skleněné panely vedle sebe; číslo kroku nese pořadí, proto čítač. */
.sim-hlava + .prg-po-nakupu .prg-kroky {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sim-space-5);
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: prg-krok;
}
.sim-hlava + .prg-po-nakupu .prg-kroky > li {
    min-width: 0;
    margin: 0;
    padding: var(--sim-space-6);
    border: 1px solid var(--sim-line-accent);
    border-radius: var(--sim-radius-lg);
    background: var(--sim-sklo);
    -webkit-backdrop-filter: var(--sim-sklo-rozmazani);
            backdrop-filter: var(--sim-sklo-rozmazani);
    box-shadow: var(--sim-sklo-svit), var(--sim-shadow-card);
    counter-increment: prg-krok;
}
.sim-hlava + .prg-po-nakupu .prg-kroky > li::before {
    content: counter(prg-krok, decimal-leading-zero);
    display: block;
    margin-bottom: var(--sim-space-4);
    font-family: var(--sim-font-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    color: var(--sim-accent);
}
@media (max-width: 1024px) {
    .sim-hlava + .prg-po-nakupu .prg-kroky { grid-template-columns: minmax(0, 1fr); }
}

/* ── Slider (Swiper) ───────────────────────────────────────────────────────
   ⚠️ Pravidla nad třídami Swiperu mají o třídu víc (`.sim-slider …`) —
      pořadí načtení stylopisů pak nerozhoduje (`web-slidery-carousel`). */
.sim-vytvory-slider { min-width: 0; }
/* Swiper ořezává (`overflow: hidden`) a plátno 3D rámu přesahuje vitrínu
   nahoru (záře LED, natočený rám) — rezerva nahoře, jinak by se záře
   uřízla rovnou čarou. */
.sim-vytvory-slider .sim-slider { padding-top: var(--sim-space-6); }
.sim-slider .sim-vytvory-pas { margin: 0; padding: 0; list-style: none; }
/* Karty jedné řady stejně vysoké (štítek se natáhne). */
.sim-slider .swiper-slide { height: auto; }
/* Bez JavaScriptu (Swiper se nespustil) se pás posouvá jako přetékající řádek. */
.sim-slider:not(.swiper-initialized) { overflow-x: auto; }
.sim-slider:not(.swiper-initialized) .swiper-slide { width: min(80%, 340px); margin-right: var(--sim-space-4); }

/* Šipky a tečky — bez spuštěného slideru by nic nedělaly. */
.sim-slider-ovladani { display: none; }
.je-slider > .sim-slider-ovladani {
    display: flex;
    align-items: center;
    gap: var(--sim-space-4);
    margin-top: var(--sim-space-5);
}
.sim-slider-sipka,
.sim-clanek .jta-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    padding: 0;
    border: 1px solid var(--sim-line-accent);
    border-radius: 50%;
    background: rgba(4, 7, 13, .6);
    color: var(--sim-accent);
    cursor: pointer;
    transition: background var(--sim-t-hover) var(--sim-ease),
                color var(--sim-t-hover) var(--sim-ease),
                opacity var(--sim-t-hover) var(--sim-ease);
}
.sim-slider-sipka .sim-ikona { display: block; width: 18px; height: 18px; }
.sim-slider-sipka--zpet .sim-ikona { transform: scaleX(-1); }
.sim-slider-sipka:hover,
.sim-slider-sipka:focus-visible,
.sim-clanek .jta-share__btn:hover,
.sim-clanek .jta-share__btn:focus-visible { background: var(--sim-accent); color: #0A0A05; }
.sim-slider-sipka.swiper-button-disabled { opacity: .35; cursor: default; }
/* Tečky: barvy a rozměry přes proměnné Swiperu, aktivní je pilulka. */
.sim-slider-ovladani .sim-slider-tecky {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    --swiper-pagination-color: var(--sim-accent);
    --swiper-pagination-bullet-inactive-color: var(--sim-line-strong);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
}
.sim-slider-tecky .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: var(--sim-radius-pill);
    transition: width var(--sim-t-hover) var(--sim-ease);
}

/* ── Hlavička podstránky (C80) ─────────────────────────────────────────────
   Sekce `sim_hlava`, stránka výtvoru, stránka programu i nadpis, který šablona
   webu kreslí stránce bez vlastní hlavičky — jedna kostra, jedny třídy
   (`SimonetSections::hlava()`). Rozměry převzaté z hlavičky výtvoru (C79),
   kterou zadavatel schválil: text 5 dílů, vitrína 7, vitrína 5 : 4. */
.sim-hlava { padding-block: 0 var(--sim-space-8); }
.sim-hlava-mrizka {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sim-space-8);
    align-items: center;
}
.sim-hlava--bez-vitriny .sim-hlava-mrizka { grid-template-columns: minmax(0, 1fr); }
.sim-hlava-text { min-width: 0; }
.sim-hlava-text .sim-perex { max-width: 52ch; }
.sim-hlava--bez-vitriny .sim-perex { max-width: 72ch; }
.sim-hlava-tlacitka { display: flex; flex-wrap: wrap; gap: var(--sim-space-4); margin-top: var(--sim-space-7); }

/* Vitrína drží poměr, aby se po načtení 3D nic neposunulo; kamera prvek
   do ní usadí sama (`skrine.js`, `zaber()`), ať je široký nebo vysoký. */
.sim-hlava-vitrina { display: block; position: relative; aspect-ratio: 5 / 4; min-width: 0; }
/* Náhrada, dokud se 3D nenačte (a podoba bez 3D): svítící ikona předmětu… */
.sim-hlava-ikona {
    position: absolute;
    left: 50%; top: 50%;
    width: 38%; height: 38%;
    transform: translate(-50%, -50%);
    color: var(--sim-accent);
    filter: drop-shadow(0 0 22px var(--sim-accent-glow));
}
/* …nebo obrázek jako obrazovka v tmavém lemu. */
.sim-hlava-nahled {
    position: absolute;
    left: 8%; top: 12%;
    width: 84%; height: 66%;
    object-fit: cover;
    object-position: center top;
    border: 6px solid #0C1118;
    border-radius: var(--sim-radius-md);
    box-shadow: 0 0 0 1px var(--sim-line-strong), var(--sim-shadow-card);
}

.sim-udaje {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sim-space-5) var(--sim-space-7);
    margin: var(--sim-space-6) 0 0;
}
.sim-udaje dt {
    margin-bottom: var(--sim-space-2);
    font-family: var(--sim-font-mono);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sim-accent);
}
.sim-udaje dd { margin: 0; }
/* ⚠️ Ne `.sim-stitky` — tak se jmenují štítky ve scéně továrny na úvodce
   (absolutně umístěné). Se stejným názvem se technologie výtvoru roztáhly
   do svislých pilulek přes celou výšku hlavičky (naměřeno C80). */
.sim-udaje-stitky { display: flex; flex-wrap: wrap; gap: var(--sim-space-2); margin: 0; padding: 0; list-style: none; }
.sim-udaje-stitky li {
    padding: 4px var(--sim-space-3);
    border: 1px solid var(--sim-line-strong);
    border-radius: var(--sim-radius-pill);
    font-size: .8rem;
    line-height: 1.4;
}

/* ── Drobečková navigace ───────────────────────────────────────────────────
   Kreslí ji šablona webu nad každou podstránkou (`SimonetStranka`). */
.sim-drobecky ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sim-space-2);
    margin: 0 0 var(--sim-space-5);
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--sim-dim);
}
.sim-drobecky li + li::before { content: "/"; margin-right: var(--sim-space-2); color: var(--sim-line-strong); }
/* Terčík pro prst: odkaz drobečků měřil 15 px na výšku (zkouska-mobil, C79).
   Odsazení zvětší plochu pro klepnutí, záporný okraj ho vrátí — řádek
   drobečků zůstane stejně vysoký a nic pod ním se neposune. */
.sim-drobecky a {
    display: inline-block;
    padding-block: var(--sim-space-3);
    margin-block: calc(-1 * var(--sim-space-3));
    color: var(--sim-muted);
    text-decoration: none;
}
.sim-drobecky a:hover,
.sim-drobecky a:focus-visible { color: var(--sim-accent); }

/* ── Stránka výtvoru (`/vytvory/{slug}`) ──────────────────────────────── */
.sim-vytvor-popis,
.sim-clanek { padding-block: 0 var(--sim-space-8); }
/* Další výtvory pod stránkou výtvoru: navazují na popis, který má vlastní
   spodní odsazení — plná horní mezera sekce by mezi nimi nechala díru.
   Další články pod článkem blogu (C80) stejně (`.sim-clanky` nahoře 0 má). */
.sim-vytvory--dalsi { padding-top: 0; }
.sim-vytvory--dalsi .sim-vytvory-mrizka,
.sim-clanky--dalsi .sim-container { padding-top: var(--sim-space-8); border-top: 1px solid var(--sim-line); }

@media (max-width: 1024px) {
    .sim-vytvory-mrizka,
    .sim-hlava-mrizka { grid-template-columns: minmax(0, 1fr); }
    /* Na telefonu napřed vitrína — je to obraz stránky, text navazuje pod ní.
       Nižší poměr, ať nadpis nezajede pod ohyb obrazovky. */
    .sim-hlava-vitrina { order: -1; aspect-ratio: 16 / 10; }
}

/* ===========================================================================
   BLOG (C80) — modul `aktuality` ve vzhledu továrny

   Výpis: stránka Blog = hlavička `sim_hlava` + sekce `sim_clanky`; karta je
   karta výtvoru (`sim-vytvor-*`) se čtvercovým rámem a předmětem rubriky.
   Článek: hlavička `sim-hlava` (rubrika, datum, doba čtení, 3D vitrína),
   pod ní tělo z view jádra `news/_clanek.php` (třídy `jta-*`) v obalu
   `.sim-clanek`. Sloupec textu, sazba, skleněné panely, kulatá tlačítka
   a štítky jsou pravidla výš (text podstránky, karta výtvoru, panely
   programu, šipky slideru) — tady jen to, co článek má navíc.
   =========================================================================== */

.sim-clanek .jta-article__cover { margin: 0 0 var(--sim-space-6); }
.sim-clanek .jta-article__cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--sim-line-strong);
    border-radius: var(--sim-radius-lg);
}
/* Perex je první odstavec článku — větší a jasnější než text pod ním. */
.sim-clanek .jta-article__lead {
    margin: 0 0 var(--sim-space-6);
    font-size: clamp(1.0625rem, .95rem + .35vw, 1.1875rem);
    line-height: 1.7;
    color: var(--sim-text);
}
.sim-clanek .jta-article__body > :first-child { margin-top: 0; }
.sim-clanek .jta-article__body code {
    padding: 1px 6px;
    border: 1px solid var(--sim-line-strong);
    border-radius: var(--sim-radius-sm);
    background: var(--sim-surface);
    font-family: var(--sim-font-mono);
    font-size: .88em;
    color: var(--sim-text);
}
.sim-clanek .jta-article__body pre {
    overflow-x: auto;
    margin: var(--sim-space-5) 0;
    padding: var(--sim-space-4) var(--sim-space-5);
    border: 1px solid var(--sim-line-strong);
    border-radius: var(--sim-radius-md);
    background: var(--sim-surface);
}
.sim-clanek .jta-article__body pre code { padding: 0; border: 0; background: none; }
.sim-clanek .jta-article__body blockquote {
    margin: var(--sim-space-6) 0;
    padding: var(--sim-space-1) 0 var(--sim-space-1) var(--sim-space-5);
    border-left: 2px solid var(--sim-accent);
}
.sim-clanek .jta-article__body blockquote p { color: var(--sim-text); }

/* Sdílení: štítek a kulatá tlačítka (pravidla šipek slideru); kopírování
   odkazu je pilulka s textem (obsluha v `simonet.js`). */
.sim-clanek .jta-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sim-space-4);
    margin-top: var(--sim-space-7);
    padding-top: var(--sim-space-6);
    border-top: 1px solid var(--sim-line);
}
.sim-clanek .jta-share__label { margin: 0; }
.sim-clanek .jta-share__list { display: flex; flex-wrap: wrap; gap: var(--sim-space-2); }
.sim-clanek .jta-share__btn { text-decoration: none; }
.sim-clanek .jta-share__btn svg { display: block; flex: 0 0 auto; }
.sim-clanek .jta-share__btn--copy {
    width: auto;
    gap: var(--sim-space-2);
    padding-inline: var(--sim-space-4);
    border-radius: var(--sim-radius-pill);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
}

/* Předchozí a další článek: dva skleněné panely vedle sebe (pravidla panelů
   programu); další stojí vpravo, i když předchozí chybí. */
.sim-clanek .jta-article__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sim-space-4);
    margin-top: var(--sim-space-6);
}
.sim-clanek .jta-article__nav-item {
    display: flex;
    flex-direction: column;
    gap: var(--sim-space-2);
    min-width: 0;
    color: inherit;
    text-decoration: none;
    transition: background var(--sim-t-hover) var(--sim-ease),
                border-color var(--sim-t-hover) var(--sim-ease);
}
.sim-clanek .jta-article__nav-item:focus-visible { outline: none; }
.sim-clanek .jta-article__nav-item--next { grid-column: 2; text-align: right; }
.sim-clanek .jta-article__back { margin: var(--sim-space-6) 0 0; }
.sim-clanek .jta-project__back-link { text-decoration: none; }
.sim-clanek .jta-project__back-link:hover svg,
.sim-clanek .jta-project__back-link:focus-visible svg { transform: translateX(-3px); }

@media (max-width: 680px) {
    .sim-clanek .jta-article__nav { grid-template-columns: minmax(0, 1fr); }
    .sim-clanek .jta-article__nav-item--next { grid-column: auto; }
}

/* ===========================================================================
   SLUŽBA V DETAILU (C80) — stránka „Co vyrábíme“

   Text s výčtem vedle 3D vitríny (táž vitrína jako v hlavičce podstránky,
   `.sim-hlava-vitrina`), pod nimi ukázky — tentýž výpis výtvorů jako na
   stránce Výtvory (`.sim-vytvory-vypis`). Bloky pod sebou se střídají:
   vitrína vpravo, vlevo, vpravo… (`.sim-sluzba--vlevo`).
   =========================================================================== */

.sim-sluzba { padding-block: var(--sim-space-10); }
.sim-sluzba-mrizka {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--sim-space-8);
    align-items: center;
}
.sim-sluzba--vlevo .sim-sluzba-mrizka { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.sim-sluzba--vlevo .sim-hlava-vitrina { order: -1; }
.sim-sluzba-text { min-width: 0; }
.sim-sluzba-text .sim-h2 { margin-bottom: var(--sim-space-5); }
.sim-sluzba-text .sim-perex { max-width: 60ch; }
.sim-sluzba-stitek { display: flex; align-items: center; gap: var(--sim-space-3); }
/* Nadpisek výčtu a ukázek je popisek, ne nadpis — pod nadpisem služby (h2)
   jsou nadpisy až názvy výtvorů v kartách (h3). */
.sim-sluzba-nadpisek {
    margin: var(--sim-space-6) 0 var(--sim-space-4);
    font-family: var(--sim-font-mono);
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sim-accent);
}
/* Body výčtu mají víc řádků než sliby výzvy: fajfka sedí u prvního řádku.
   Totéž body balíčků a skupin na stránkách služeb (C81).
   🔴 `.sim-sliby` v selektoru: seznam nese obě třídy (`seznamFajfek()`) a základ
      `.sim-sliby li` stojí v souboru níž — při stejné specificitě vyhrával a fajfka
      seděla uprostřed víceřádkového bodu (C80, plán na landingu rešerše). */
.sim-sliby.sim-sluzba-vycet li,
.sim-sliby.sim-balicek-obsah li,
.sim-sliby.sim-skupina-body li { align-items: flex-start; line-height: 1.5; color: var(--sim-text); }
.sim-sluzba-vycet .sim-ikona,
.sim-balicek-obsah .sim-ikona,
.sim-skupina-body .sim-ikona { margin-top: 1px; }
.sim-sluzba-tlacitka,
.sim-sekce-tlacitka { display: flex; flex-wrap: wrap; gap: var(--sim-space-4); margin-top: var(--sim-space-7); }
.sim-sluzba-ukazky { margin-top: var(--sim-space-8); }

/* Na telefonu napřed vitrína s nižším poměrem — platí pro `.sim-hlava-vitrina`
   všude (hlavička podstránky), tady jen jeden sloupec. */
@media (max-width: 1024px) {
    .sim-sluzba-mrizka,
    .sim-sluzba--vlevo .sim-sluzba-mrizka { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   DŮVODY — prosklené karty
   =========================================================================== */

.sim-duvody { padding-block: var(--sim-space-10); }
.sim-duvody-mrizka {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--sim-space-8);
}
.sim-duvody-hlava .sim-h2 { margin-bottom: var(--sim-space-5); }

.sim-duvody-seznam {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sim-space-5);
    /* 🔴 Bez perspektivy na RODIČI je `rotateX`/`rotateY` jen plochá deformace
       — karta se zkosí místo aby se naklonila. Perspektiva patří sem, ne na
       kartu samotnou: na každé kartě zvlášť by měla každá vlastní úběžník
       a řada by se naklápěla rozbíhavě. */
    perspective: 1100px;
}
.sim-duvod {
    /* Karty musí být stejně vysoké bez ohledu na délku textu — jinak spodní
       hrany poskakují a řada vypadá rozsypaně. */
    height: 100%;
    /* Svítící objekt leží uvnitř karty a vyčnívá za její okraj — proto
       `relative` (kotva) a `hidden` (ořez). */
    position: relative;
    overflow: hidden;
    padding: var(--sim-space-6);
    border: 1px solid var(--sim-line);
    border-radius: var(--sim-radius-lg);
    /* C77: hustší spodek — za kartou teď svítí pás strojů haly. */
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(8, 13, 22, .88) 45%);
    /* Matné sklo jako v předloze: světla haly za kartou se rozpijí do
       teplé mlhy místo ostrých čárek přes text (C77). */
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transform: rotateX(var(--sim-naklon-x, 0deg)) rotateY(var(--sim-naklon-y, 0deg));
    transition: transform 240ms var(--sim-ease),
                border-color var(--sim-t-hover) var(--sim-ease),
                box-shadow var(--sim-t-hover) var(--sim-ease);
}
.sim-duvod:hover {
    border-color: var(--sim-line-accent);
    box-shadow: 0 0 40px rgba(251, 237, 55, .14);
}
/* Ikona v kruhovém obrysu — v předloze ji má každá karta vlevo nahoře
   a bez obrysu splývala s textem pod sebou. */
/* Ikona skupiny na stránce služby (C81) bez 3D je tentýž kroužek. */
.sim-duvod-ikona,
.sim-skupina-ikona {
    display: inline-flex; align-items: center; justify-content: center;
    /* C77: v předloze je kroužek větší, se zlatou hranou a jemnou září
       dovnitř i ven; ikona v něm zabírá víc než polovinu. */
    width: 52px; height: 52px;
    border: 1.5px solid var(--sim-accent);
    border-radius: 50%;
    color: var(--sim-accent);
    box-shadow: 0 0 14px var(--sim-accent-glow), inset 0 0 10px var(--sim-accent-glow);
    margin-bottom: var(--sim-space-4);
    transition: box-shadow var(--sim-t-hover) var(--sim-ease);
}
.sim-duvod:hover .sim-duvod-ikona,
.sim-skupina:hover .sim-skupina-ikona { box-shadow: 0 0 24px var(--sim-accent-glow), inset 0 0 12px var(--sim-accent-glow); }
.sim-duvod-ikona .sim-ikona,
.sim-skupina-ikona .sim-ikona { width: 28px; height: 28px; filter: drop-shadow(0 0 12px var(--sim-accent-glow)); }

/* ── Svítící objekt v kartě ───────────────────────────────────────────
   V předloze stojí v pravé části karty prosvícený drátěný předmět. Je to
   TÁŽ ikona, jen velká a rozzářená — druhá sada obrázků by znamenala druhé
   místo, kde se obsah udržuje.
   ⚠️ Leží POD textem (`z-index: 0` proti `1` u nadpisu a popisu) a nesmí
      brát kliky; text karty je přes něj čitelný díky nízké průhlednosti. */
.sim-duvod-objekt {
    position: absolute;
    /* Vysunutý za pravý dolní roh, aby ležel co nejmíň přes popis.
       Čitelnost textu nad ním měří zkouška kontrastu — proto je průhlednost
       nízká a nezvyšuje se „od oka". */
    right: -26px; bottom: -22px;
    display: block;
    color: var(--sim-accent);
    opacity: .2;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-8deg);
    transition: opacity var(--sim-t-hover) var(--sim-ease),
                transform 420ms var(--sim-ease);
}
.sim-duvod-objekt .sim-ikona {
    width: 126px; height: 126px;
    stroke-width: 1;
    filter: drop-shadow(0 0 26px var(--sim-accent-glow));
}
.sim-duvod:hover .sim-duvod-objekt {
    opacity: .4;
    transform: rotate(0deg) scale(1.06);
}
/* Vykreslený předmět (C71): v předloze stojí na podstavci v pravé
   polovině karty, celý viditelný a plně svítící — text drží levou část,
   proto se o čitelnost nepřetahují. */
.sim-duvod-objekt.je-render {
    /* C77: v předloze zabírá předmět skoro polovinu karty a sahá k nadpisu. */
    right: 1%; bottom: 2%;
    width: 44%;
    opacity: 1;
    transform: none;
}
.sim-duvod-render { display: block; width: 100%; height: auto; }
.sim-duvod:hover .sim-duvod-objekt.je-render {
    opacity: 1;
    transform: translateY(-4px);
    filter: drop-shadow(0 0 18px var(--sim-accent-glow));
}
.sim-duvod.ma-render .sim-duvod-nazev { max-width: 68%; }
.sim-duvod.ma-render .sim-duvod-popis { max-width: 54%; font-size: .8rem; line-height: 1.55; }
/* Předloha: tenký zlatý rám, tmavé sklo, menší vnitřní okraj. */
.sim-duvod.ma-render {
    border-color: var(--sim-line-accent);
    min-height: 230px;
    padding: var(--sim-space-5);
}
/* 🔴 ŽIVÉ 3D (C79): předmět na kotouči je HLAVNÍ OBRAZ karty, jako skříně
   v „Jak funguje" — stojí nahoře přes celou šířku karty, text pod ním.
   Vpravo vedle textu (jako `.ma-render`) by na kartě široké ~215 px měl
   necelých sto pixelů a 3D by v něm nebylo poznat. */
.sim-duvod.ma-3d {
    border-color: var(--sim-line-accent);
    padding: 0 var(--sim-space-5) var(--sim-space-5);
}
.sim-duvod-vystava {
    margin: 0 calc(-1 * var(--sim-space-5)) var(--sim-space-3);
    aspect-ratio: 1 / 1;
}
/* Náhrada, dokud se 3D nenačte (nebo když WebGL není): vykreslený předmět,
   jinak velká rozzářená ikona. */
.sim-duvod-vystava .sim-duvod-render { height: 100%; object-fit: contain; }
.sim-duvod-nahrada {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 46%; height: 46%;
    color: var(--sim-accent);
    stroke-width: 1;
    filter: drop-shadow(0 0 22px var(--sim-accent-glow));
}

.sim-duvod-nazev, .sim-duvod-popis, .sim-duvod-ikona { position: relative; z-index: 1; }
/* Nadpis karty je v předloze úzký tučný grotesk jako nadpisy sekcí (C71).
   Názvy a popisy balíčků a skupin na stránkách služeb (C81) jsou tytéž. */
.sim-duvod-nazev,
.sim-balicek-nazev,
.sim-skupina-nazev {
    font-family: var(--sim-font-display);
    font-stretch: var(--sim-display-stretch);
    font-size: 1.22rem; font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    margin: 0 0 var(--sim-space-3);
}
.sim-duvod-popis,
.sim-balicek-popis,
.sim-skupina-popis { font-size: .89rem; line-height: 1.6; color: var(--sim-dim); margin: 0; }

@media (max-width: 1024px) {
    .sim-duvody-mrizka { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   PROCES — číslované kroky
   =========================================================================== */

.sim-proces { padding-block: var(--sim-space-10); }
.sim-proces-mrizka {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--sim-space-8);
    /* Kroky bez popisu jsou nižší než hlava s delším perexem — natažené na její
       výšku by měly pod názvem prázdnou půlku karty (C80, síťový efekt). */
    align-items: start;
}
.sim-proces-hlava .sim-h2 { margin-bottom: var(--sim-space-5); }

.sim-kroky {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* C77: v předloze jsou karty těsně vedle sebe — širší karta = popis
       na dva řádky a nižší řada. */
    gap: var(--sim-space-3);
    position: relative;
    /* Svislá osa linky = střed dlaždice s ikonou (top 14 + 60 / 2). Čtou ji
       linka, naplněná linka i šipky — jediné místo, kde se mění. */
    --sim-krok-osa: 44px;
}
/* Linka dopravníku za kroky. */
.sim-kroky::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: var(--sim-krok-osa);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sim-line-accent) 10%, var(--sim-line-accent) 90%, transparent);
}
/* 🔴 KROK JE PROSKLENÁ KARTA (C76). V předloze stojí každý krok ve vlastní
   tmavé skleněné kartě s tenkým rámem; ikona je velká a bílá v horní části
   karty, pod ní číslo, název a popis. Holé sloupce textu pod malou dlaždicí
   vypadaly jako časová osa z článku, ne jako stanoviště linky. */
.sim-krok {
    position: relative;
    padding: 86px var(--sim-space-3) var(--sim-space-4);
    border: 1px solid var(--sim-line);
    border-radius: var(--sim-radius-md);
    /* Karta leží nad linkou (`z-index`) a je z MATNÉHO skla (C77): hala
       za ní prosvítá jako v předloze, linka se v ní rozpije, přes ikonu
       ostře nevede. */
    background: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(7, 11, 18, .74) 55%);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    z-index: 1;
    transition: border-color var(--sim-t-hover) var(--sim-ease),
                box-shadow var(--sim-t-hover) var(--sim-ease);
}

/* Šipka na lince mezi dvěma kroky — v předloze ukazuje směr výroby.
   Leží v mezeře za dlaždicí, takže nic nepřekrývá; u posledního kroku
   není, jinak by linka ukazovala ven ze sekce. */
.sim-krok:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--sim-krok-osa) - 5px);
    right: calc(-1 * var(--sim-space-3) / 2 - 4px);
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--sim-accent);
    pointer-events: none;
    transition: border-left-color var(--sim-t-hover) var(--sim-ease);
}
.sim-krok.je-dosazen:not(:last-child)::before { border-left-color: var(--sim-accent); }
/* Ani u posledního kroku ŘADY — deset kroků landingu jde ve dvou řadách po šesti
   a šest kroků úvodu na tabletu po třech (C80); řada pod 1 241 px je níž. */
@media (min-width: 1241px) {
    .sim-krok:nth-child(6n)::before { display: none; }
}
/* V předloze je ikona kroku v prosklené ZAOBLENÉ DLAŽDICI, ne v kroužku —
   stejný tvar jako nádrže v hale a jako značky projektů. Kroužek ze sekce
   dělal časovou osu z článku, ne výrobní linku. */
.sim-krok-ikona {
    position: absolute; top: 14px; left: var(--sim-space-3);
    display: inline-flex; align-items: center; justify-content: center;
    /* C77: v předloze má ikona vlastní prosklenou dlaždici nad kartou. */
    width: 68px; height: 60px;
    border: 1px solid var(--sim-line-strong);
    border-radius: var(--sim-radius-md);
    background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
    color: var(--sim-text);
    transition: border-color var(--sim-t-hover) var(--sim-ease),
                color var(--sim-t-hover) var(--sim-ease),
                box-shadow var(--sim-t-hover) var(--sim-ease);
}
/* Ikona v předloze ~40 px, bílá, tenká čára. */
.sim-krok-ikona .sim-ikona { width: 38px; height: 38px; stroke-width: 1.6; }
.sim-krok:hover .sim-krok-ikona,
.sim-krok:focus-within .sim-krok-ikona {
    border-color: var(--sim-accent);
    color: var(--sim-accent);
    box-shadow: 0 0 22px var(--sim-accent-glow);
}
/* Čísla kroků jsou v předloze velká a žlutá — nesou pořadí, které je
   v šestikrokové lince hlavní informací. Drobná prostrkaná verze se
   ztrácela a kroky vypadaly jako nesouvisející dlaždice. */
.sim-krok-cislo {
    display: block;
    font-family: var(--sim-font-display);
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    color: var(--sim-accent);
    margin-bottom: var(--sim-space-2);
}
.sim-krok-nazev {
    font-family: var(--sim-font-display);
    font-stretch: var(--sim-display-stretch);
    font-size: 1.22rem; font-weight: 700;
    margin: 0 0 var(--sim-space-2);
}
.sim-krok-popis { font-size: .8rem; line-height: 1.5; color: var(--sim-dim); margin: 0; }

/* 🔴 ŽIVÉ 3D (C79): ikona kroku svítí neonem v rámu FRAME 01 nad kartou.
   Vitrína je v toku karty a má PEVNOU výšku — osa linky (`--sim-krok-osa`)
   je pak jedno číslo a nezávisí na šířce sloupce. Rám se do ní vejde
   výškou, takže je stejně velký při šesti i při třech krocích v řadě. */
.sim-kroky.je-3d {
    --sim-krok-vystava: 132px;
    --sim-krok-osa: calc(var(--sim-space-3) + var(--sim-krok-vystava) / 2);
}
.sim-kroky.je-3d .sim-krok { padding-top: var(--sim-space-3); }
.sim-krok-vystava {
    height: var(--sim-krok-vystava);
    margin-bottom: var(--sim-space-3);
}
/* Náhrada: dlaždice s ikonou uprostřed místa, kde bude rám. */
.sim-krok-vystava .sim-krok-ikona { top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

@media (max-width: 1024px) {
    .sim-proces-mrizka { grid-template-columns: minmax(0, 1fr); }
    .sim-kroky::before { display: none; }
}

/* ===========================================================================
   Zalomení mřížek na užších displejích

   Počty sloupců drží pevně (viz `.sim-nadrze`), takže zalomení musí být
   napsané — jinak by se na telefonu šest kroků vedle sebe zmáčklo na
   šedesát pixelů a text by byl po jednom písmenu na řádek.
   =========================================================================== */

@media (max-width: 1240px) {
    .sim-kroky { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sim-krok:nth-child(3n)::before { display: none; }
    .sim-programy-vypis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .sim-nadrze,
    .sim-duvody-seznam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sim-vytvory-vypis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .sim-nadrze,
    .sim-duvody-seznam,
    .sim-vytvory-vypis,
    .sim-kroky { grid-template-columns: minmax(0, 1fr); }
    /* Kroky pod sebou: šipka doprava na hraně karty by ukazovala ven. */
    .sim-krok:not(:last-child)::before { display: none; }
}

/* ===========================================================================
   VÝZVA — hoďte nápad do stroje
   =========================================================================== */

.sim-vyzva {
    position: relative;
    padding-block: var(--sim-space-10);
    overflow: hidden;
}
.sim-vyzva-zar {
    position: absolute;
    top: 50%; left: 50%;
    width: min(900px, 86vw); aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 155, 46, .22) 0%, transparent 62%);
    filter: blur(46px);
    pointer-events: none;
    animation: sim-dych 7s ease-in-out infinite;
}
@keyframes sim-dych {
    0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

.sim-vyzva-mrizka {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px) minmax(0, 1fr);
    gap: var(--sim-space-7);
    align-items: center;
}
/* Výzva je v předloze věta („Máte nápad? Hoďte ho do stroje.“), ne verzálky,
   a jako jediný nadpis v plném řezu: rozteč řádků ~52 px, řádek ~500 px
   (předloha přepočtená na 1440 px). Úzkým řezem vyšel řádek o třetinu kratší. */
.sim-vyzva-text .sim-h2 {
    margin-bottom: var(--sim-space-5);
    font-size: clamp(2.2rem, 3.6vw, 3.25rem);
    font-stretch: 100%;
}
.sim-vyzva-tlacitka { display: flex; flex-wrap: wrap; gap: var(--sim-space-4); margin-top: var(--sim-space-7); }

/* ── Vykreslený stroj (C71) ───────────────────────────────────────────
   V předloze je reaktor dominanta sekce — ~40 % šířky, víc než text po
   stranách. Kreslená žárovka měla sloupec 320 px; stroj ho potřebuje
   širší a nesmí se ořezat (obrázek má záři až k okraji). */
/* Nadpis i heslo jsou v celostránkové předloze úzkým groteskem jako ostatní
   nadpisy (C71) — široký řez z detailu lámal větu do tří řádků. */
.sim-vyzva.ma-stroj .sim-vyzva-text .sim-h2 {
    /* Věta malými písmeny je v předloze o stupeň širší než verzálkové
       nadpisy (62 % ji slévalo dohromady). */
    font-stretch: 76%;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 1.02;
}
.sim-vyzva.ma-stroj .sim-vyzva-heslo {
    font-stretch: 76%;
    font-size: clamp(1.5rem, 2.3vw, 2.1rem);
    line-height: 1.08;
}
/* „Vaše nápady“ je v předloze tmavá deska se žlutým nápisem verzálkami.
   Táž deska je od C80 cedulí pásů u stroje (`.sim-vyzva-cedule`). */
.sim-vyzva .sim-btn--obrys {
    background: var(--sim-bg);
    border-color: var(--sim-line-accent);
    color: var(--sim-accent);
    text-transform: uppercase;
    border-radius: var(--sim-radius-sm);
}
/* ⚠️ Jen na širokém displeji: tohle pravidlo je specifičtější než přepnutí
   výzvy na jeden sloupec níž, a bez mediálního dotazu by ho přebilo —
   na telefonu pak sekce přetékala o 84 px (zkouška mobil, C73). */
@media (min-width: 1025px) {
    .sim-vyzva.ma-stroj .sim-vyzva-mrizka {
        grid-template-columns: minmax(0, 1fr) minmax(0, 460px) minmax(0, 1fr);
        gap: var(--sim-space-5);
    }
    /* Stroj v předloze přesahuje sekci nahoru (trubky utíkají za horní hranu). */
    .sim-vyzva-zarovka.ma-stroj { margin-top: -72px; }
    /* C77: perex úzký na tři řádky jako v předloze. */
    .sim-vyzva.ma-stroj .sim-vyzva-text .sim-perex { max-width: 36ch; }

    /* 🔴 PÁSY U STROJE (C80) JSOU ŘÁDEK MŘÍŽKY, NE OBRÁZEK POD NÍ. Stroj stojí
          přes oba řádky, nápady k němu jedou pod textem a výrobky od něj pod
          sliby — všechno na jedné podlaze, spodní hraně mřížky. Do 29. 10. 2026
          tu ležel vykreslený obrázek pásů, usazený pevnými posuny v pixelech,
          a jeho cedule „DIGITÁLNÍ SVĚTY →“ nikam nevedla. */
    .sim-vyzva.ma-pasy .sim-vyzva-mrizka {
        grid-template-areas: "text stroj bok" "vstup stroj vystup";
        row-gap: var(--sim-space-7);
    }
    .sim-vyzva.ma-pasy .sim-vyzva-text { grid-area: text; }
    .sim-vyzva.ma-pasy .sim-vyzva-zarovka { grid-area: stroj; align-self: end; }
    .sim-vyzva.ma-pasy .sim-vyzva-bok { grid-area: bok; }
    .sim-vyzva-pas--vstup { grid-area: vstup; }
    .sim-vyzva-pas--vystup { grid-area: vystup; }
}
/* C77 podle předlohy: heslo na dva řádky zarovnané doprava a seznam slibů
   VEDLE něj, ne pod ním. Až od 1280 px — na 1100 px má boční sloupec
   ~300 px a obojí se lámalo po slovech; užší displej je má pod sebou. */
@media (min-width: 1280px) {
    .sim-vyzva.ma-stroj .sim-vyzva-bok {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--sim-space-5);
    }
    .sim-vyzva.ma-stroj .sim-vyzva-heslo {
        margin: var(--sim-space-7) 0 0;
        text-align: right;
    }
    .sim-vyzva.ma-stroj .sim-vyzva-heslo em { display: block; }
    .sim-vyzva.ma-stroj .sim-sliby li { font-size: .84rem; }
}

/* ── Pásy u stroje (C80) ──────────────────────────────────────────────────
   Celý pás je odkaz (`SimonetSections::pas()`): řada předmětů z 3D knihovny
   a pod ní cedule. Cedule stojí u vnější hrany — vlevo začíná cesta nápadu,
   vpravo končí výrobkem — a šipka ukazuje směr toku strojem. */
.sim-vyzva-pas {
    display: flex;
    flex-direction: column;
    gap: var(--sim-space-4);
    align-self: end;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: var(--sim-radius-md);
}
.sim-vyzva-pas:focus-visible { outline: 2px solid var(--sim-accent); outline-offset: 8px; }
.sim-vyzva-kusy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sim-space-4);
}
.sim-vyzva-kus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sim-space-2);
    min-width: 0;
}
/* Vitrína drží poměr sestavy (podstavec s předmětem, kostka), aby se po
   načtení 3D nic neposunulo; náhradou je svítící ikona (`.sim-hlava-ikona`). */
.sim-vyzva-kus-vitrina { width: 100%; aspect-ratio: 1 / 1; }
.sim-vyzva-kus-popis {
    font-family: var(--sim-font-mono);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sim-dim);
    transition: color var(--sim-t-hover) var(--sim-ease);
}
.sim-vyzva-cedule { align-self: flex-start; }
.sim-vyzva-pas--vystup .sim-vyzva-cedule { align-self: flex-end; }
/* Najetí na pás rozsvítí cedulu jako tlačítko (`.sim-btn--obrys:hover`). */
.sim-vyzva-pas:hover .sim-vyzva-cedule,
.sim-vyzva-pas:focus-visible .sim-vyzva-cedule {
    border-color: var(--sim-accent);
    transform: translateY(-2px);
}
.sim-vyzva-pas:hover .sim-vyzva-kus-popis,
.sim-vyzva-pas:focus-visible .sim-vyzva-kus-popis { color: var(--sim-accent); }
.sim-vyzva-zarovka.ma-stroj { width: min(100%, 460px); aspect-ratio: auto; }
.sim-vyzva-render {
    display: block;
    width: 100%; height: auto;
    position: relative;
    transition: filter 420ms var(--sim-ease);
}
.sim-vyzva-zarovka.ma-stroj .sim-vyzva-obruc { top: 37%; width: 66%; }
.sim-vyzva-zarovka.je-zhasnuta .sim-vyzva-render { filter: brightness(.38) saturate(.35); }
/* 🔴 ŽIVÝ STROJ (C79): vysoká skříň z knihovny na podstavci, uvnitř žárovka.
   Vitrína drží poměr sestavy (~3 : 5), aby se po načtení nic neposunulo;
   vykreslený stroj nebo kreslená žárovka v ní zůstávají jako náhrada.
   Užší než obrázek stroje — sestava je vysoká a v plné šířce sloupce
   (460 px) by měla skoro 800 px. */
.sim-vyzva-zarovka.ma-3d { width: min(100%, 340px); aspect-ratio: auto; }
.sim-vyzva-stroj { aspect-ratio: 3 / 5; }
.sim-vyzva-stroj .sim-vyzva-render { height: 100%; object-fit: contain; }

/* ── Žárovka ──────────────────────────────────────────────────────────── */

/* Žárovka je `<button>` — prohlížeč jí jinak dá vlastní pozadí, rámeček
   i odsazení a kresba by seděla nakřivo. */
.sim-vyzva-zarovka {
    position: relative;
    display: block;
    width: min(240px, 60vw);
    aspect-ratio: 3 / 4;
    margin-inline: auto;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
/* ── Žárovka ve výzvě ──────────────────────────────────────────────────
   🔴 Díly na sebe MUSÍ navazovat. Baňka původně končila v 54 % výšky
      a patice začínala v 74 %, takže mezi nimi zůstala mezera — patice
      vypadala jako samostatný pruhovaný obdélník plovoucí pod září a celek
      se vůbec nečetl jako žárovka. Pořadí zdola: patice → krček → baňka,
      s překryvem, ne s mezerou.
   ⚠️ Čísla jsou v procentech obalu s poměrem 3 : 4, takže drží při každé
      velikosti. Při přepočtu je potřeba hlídat ten překryv. */

/* 🔴 JMÉNO `.sim-vyzva-zar` UŽ PATŘÍ ZÁŘI CELÉ SEKCE (výš v souboru).
   Druhá třída téhož jména by stylovala obě — velká zář sekce by dostala
   rozměry téhle malé a naopak, podle pořadí v souboru. Zář uvnitř žárovky
   se proto jmenuje `svit`. */
.sim-vyzva-svit {
    position: absolute;
    top: -14%; left: 50%;
    width: 150%; aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 176, 70, .34) 0%,
                rgba(255, 150, 40, .12) 38%, transparent 68%);
    filter: blur(6px);
    pointer-events: none;
    transition: opacity 420ms var(--sim-ease);
}

/* Baňka. Hruška, ne koule — teprve zúžení dolů z kruhu udělá žárovku. */
.sim-vyzva-sklo {
    position: absolute;
    top: 2%; left: 50%;
    width: 72%; aspect-ratio: 1 / 1.06;
    transform: translateX(-50%);
    border-radius: 50% 50% 44% 44% / 50% 50% 56% 56%;
    border: 1px solid rgba(255, 215, 130, .45);
    /* Střed vychází do BÍLÉ, ne do oranžové. Rozsvícené vlákno je mnohem
       jasnější než sklo kolem — bez bílého jádra vypadá baňka jako jantarová
       koule, která je jen nasvícená odjinud. */
    background: radial-gradient(circle at 50% 44%, rgba(255, 248, 226, .92) 0%,
                rgba(255, 214, 134, .66) 22%, rgba(255, 165, 56, .3) 52%,
                rgba(255, 155, 46, .08) 78%);
    box-shadow: 0 0 84px rgba(255, 160, 50, .55), inset 0 0 44px rgba(255, 206, 120, .42);
    transition: box-shadow 420ms var(--sim-ease), background 420ms var(--sim-ease),
                border-color 420ms var(--sim-ease);
}

/* ── Světelná obruč ───────────────────────────────────────────────────
   V předloze obepíná baňku jasný kruh energie. Je to elipsa sklopená
   perspektivou, ne kruh — plochý kroužek by vypadal jako obrys měsíce.
   ⚠️ `pointer-events: none`: leží přes baňku a bez toho by kradla kliky
      tlačítku, kterým žárovka je. */
.sim-vyzva-obruc {
    position: absolute;
    top: 30%; left: 50%;
    width: 92%; aspect-ratio: 1;
    transform: translate(-50%, -50%) rotateX(74deg);
    border-radius: 50%;
    border: 2px solid rgba(255, 206, 120, .55);
    box-shadow: 0 0 26px rgba(255, 180, 70, .45),
                inset 0 0 26px rgba(255, 180, 70, .35);
    pointer-events: none;
    animation: sim-obruc 9s linear infinite;
    transition: opacity 420ms var(--sim-ease), border-color 420ms var(--sim-ease);
}
@keyframes sim-obruc {
    from { transform: translate(-50%, -50%) rotateX(74deg) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotateX(74deg) rotate(360deg); }
}

/* Vlákno — obloukem dolů, s dvěma přívody vzhůru ke krčku. */
.sim-vyzva-vlakno {
    position: absolute;
    top: 26%; left: 50%;
    width: 24%; height: 17%;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 228, 150, .95);
    border-top: 0;
    border-radius: 0 0 50% 50%;
    filter: drop-shadow(0 0 10px rgba(255, 210, 110, .9));
    animation: sim-vlakno 3.4s ease-in-out infinite;
}
.sim-vyzva-privod {
    position: absolute;
    top: 100%;
    width: 2px; height: 70%;
    background: rgba(255, 228, 150, .85);
}
.sim-vyzva-privod--l { left: -1px; }
.sim-vyzva-privod--p { right: -1px; }

@keyframes sim-vlakno {
    0%, 100% { opacity: .92; }
    43%      { opacity: 1; }
    47%      { opacity: .74; }
}

/* Krček — překrývá spodek baňky, aby mezi nimi nebyla spára. */
.sim-vyzva-krcek {
    position: absolute;
    top: 62%; left: 50%;
    width: 30%; height: 12%;
    transform: translateX(-50%);
    /* Krček navazuje na patici — musí být z téhož kovu, jinak vznikne šev. */
    background: linear-gradient(180deg, rgba(150, 134, 100, .55) 0%, #5E5340 55%, #403827 100%);
    border-radius: 0 0 6px 6px;
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

/* Patice se závitem. */
.sim-vyzva-patice {
    position: absolute;
    top: 73%; left: 50%;
    width: 34%; height: 19%;
    transform: translateX(-50%);
    border-radius: 2px 2px var(--sim-radius-sm) var(--sim-radius-sm);
    /* 🔴 Závit byl MODROŠEDÝ (#4A5564) a v záběru to vypadalo jako omyl
          v barvě: žárovka i celý web jsou zlaté, patice modrá. V předloze
          je kovová s teplým, mosazným nádechem. Chytil to až zoom na
          snímku — v kódu to byla jen jedna barva mezi ostatními. */
    background: repeating-linear-gradient(180deg, #8A7A5C 0 3px, #4A4132 3px 6px);
    border: 1px solid var(--sim-line-strong);
    border-top: 0;
}
/* Kontakt na špičce patice. */
.sim-vyzva-patice::after {
    content: "";
    position: absolute;
    bottom: -7%; left: 50%;
    width: 36%; height: 12%;
    transform: translateX(-50%);
    border-radius: 0 0 50% 50%;
    background: #2A2418;
}

/* Hover a stisk — žárovka reaguje, i když se na ni jen najede. */
.sim-vyzva-zarovka:hover .sim-vyzva-sklo,
.sim-vyzva-zarovka:focus-visible .sim-vyzva-sklo {
    box-shadow: 0 0 96px rgba(255, 165, 56, .62), inset 0 0 48px rgba(255, 206, 120, .45);
}
.sim-vyzva-zarovka:hover .sim-vyzva-svit,
.sim-vyzva-zarovka:focus-visible .sim-vyzva-svit { opacity: 1; }
.sim-vyzva-zarovka:active { transform: translateY(1px); }

/* Zhasnutá žárovka — přepíná `tovarna.js` i najetí na štítky.
   Musí zhasnout VŠECHNO: sklo, vlákno, přívody i zář kolem. Kdyby zůstala
   svítit jen zář, vypadalo by to jako vada, ne jako zhasnutá žárovka. */
.sim-vyzva-zarovka.je-zhasnuta .sim-vyzva-sklo {
    box-shadow: 0 0 0 rgba(255, 155, 46, 0), inset 0 0 20px rgba(120, 120, 120, .2);
    background: radial-gradient(circle at 50% 58%, rgba(180, 180, 180, .14) 0%, transparent 70%);
    border-color: rgba(190, 196, 206, .3);
}
.sim-vyzva-zarovka.je-zhasnuta .sim-vyzva-vlakno {
    opacity: .22; filter: none; animation: none;
    border-color: rgba(190, 196, 206, .7);
}
.sim-vyzva-zarovka.je-zhasnuta .sim-vyzva-privod { background: rgba(190, 196, 206, .5); }
.sim-vyzva-zarovka.je-zhasnuta .sim-vyzva-svit { opacity: 0; }
/* Zhasnutá žárovka nesmí mít svítící obruč — energie kolem ní je právě to,
   co se vypíná. */
.sim-vyzva-zarovka.je-zhasnuta .sim-vyzva-obruc {
    opacity: .18;
    border-color: rgba(190, 196, 206, .5);
    box-shadow: none;
}

/* Zhasnutí se promítne do nasvícení CELÉ sekce, ne jen do baňky — jinak by
   kolem zhasnuté žárovky dál svítilo oranžové světlo, které nemá odkud být.

   🔴 `animation: none` MUSÍ BÝT PRVNÍ. Zář sekce dýchá animací `sim-dych`,
      a ta má v klíčových snímcích `opacity` — běžící animace přebije i tuhle
      deklaraci, takže samotné `opacity: .18` neudělalo vůbec nic. Naměřeno:
      svítí 0,75 → zhasnuto 0,75. Snímek přitom vypadal správně, protože
      ztmavla sama žárovka; rozdíl ukázalo až měření spočtené hodnoty.
      Je to tatáž past jako „běžící přechod přebije i vložený styl“. */
.sim-vyzva:has(.sim-vyzva-zarovka.je-zhasnuta) .sim-vyzva-zar {
    animation: none;
    opacity: .16;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 420ms var(--sim-ease);
}

.sim-vyzva-heslo {
    font-family: var(--sim-font-display);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 var(--sim-space-6);
}
.sim-vyzva-heslo em { font-style: normal; color: var(--sim-accent); }

.sim-sliby { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sim-space-3); }
.sim-sliby li { display: flex; align-items: center; gap: var(--sim-space-3); font-size: .92rem; color: var(--sim-muted); }
.sim-sliby .sim-ikona { width: 20px; height: 20px; color: var(--sim-accent); flex: none; }

@media (max-width: 1024px) {
    .sim-vyzva-mrizka { grid-template-columns: minmax(0, 1fr); }
    .sim-vyzva-zarovka { order: -1; }
    /* Živý stroj nad textem: v plných 340 px by zabral skoro celou výšku
       telefonu a text výzvy by začínal až pod ohybem. */
    .sim-vyzva-zarovka.ma-3d { width: min(62vw, 260px); }
}

/* ===========================================================================
   Záložní úvodka
   =========================================================================== */

.sim-prazdno { padding-block: calc(var(--sim-hlavicka-h) + var(--sim-space-10)) var(--sim-space-10); }
.sim-prazdno .sim-h1 { margin-bottom: var(--sim-space-5); }
.sim-prazdno .sim-perex { margin-bottom: var(--sim-space-6); }

/* ===========================================================================
   Programy — modul `aplikace`

   🔴 Třídy `prg-*` vypisuje MODUL JÁDRA (`views/aplikace/`,
      `core/AplikaceSections.php`). Jádro veřejný stylopis nemá a nemá mít —
      vzhled patří webu. Přibude-li v modulu třída, musí sem přibýt styl;
      jinak se nový prvek vykreslí neupraveně. To je ta past, která se
      v tomhle projektu vrací: markup zná třídu, která v CSS neexistuje.
   =========================================================================== */

.prg-vypis,
.prg-detail {
    position: relative;
    isolation: isolate;
    padding-block: calc(var(--sim-hlavicka-h) + var(--sim-space-8)) var(--sim-space-9);
}

/* Hala i za podstránkami. Bez ní vypadala stránka programů jako cizí
   dokument vedle úvodky — černá plocha, na které leží pár karet.
   ⚠️ Nepoužívá se třída `.sim-pozadi`: tu nasazuje stavebnice podle volby
      sekce a tahle stránka žádnou sekci nemá (vykresluje ji modul jádra).
      Obrázek i útlum jsou proto stejné, ale pravidlo vlastní. */
.prg-vypis::before,
.prg-detail::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('../sim/pozadi/hala-regaly.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .46;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
}
.prg-vypis::after,
.prg-detail::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(3, 5, 10, .70), rgba(3, 5, 10, .90));
}

.prg-nadpis {
    font-family: var(--sim-font-display);
    font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0 0 var(--sim-space-5);
}

.prg-uvod,
.prg-detail-podtitul {
    max-width: 62ch;
    color: var(--sim-muted);
    font-size: 1.0625rem;
    margin: 0 0 var(--sim-space-6);
}

.prg-prazdno,
.sim-clanky-prazdno { color: var(--sim-dim); }

.prg-zpet { margin: 0 0 var(--sim-space-5); }
.prg-zpet a { color: var(--sim-dim); text-decoration: none; font-size: .9375rem; }
.prg-zpet a:hover, .prg-zpet a:focus-visible { color: var(--sim-accent); }

/* ── Mřížka karet ────────────────────────────────────── */

.prg-mrizka {
    display: grid;
    gap: var(--sim-space-5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.prg-karta {
    display: flex;
    flex-direction: column;
    gap: var(--sim-space-3);
    padding: var(--sim-space-5);
    background: var(--sim-surface);
    border: 1px solid var(--sim-line);
    border-radius: var(--sim-radius-lg);
    transition: border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}

.prg-karta:hover,
.prg-karta:focus-within {
    border-color: var(--sim-line-accent);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -24px var(--sim-accent-glow);
}

/* Náhled drží kontejner přes `aspect-ratio`, proto se do `<img>` nedávají
   atributy `width`/`height` — u produktu s jiným poměrem stran by lhaly. */
.prg-karta-nahled {
    display: block;
    aspect-ratio: 16 / 9;
    margin: calc(var(--sim-space-5) * -1) calc(var(--sim-space-5) * -1) 0;
    border-radius: var(--sim-radius-lg) var(--sim-radius-lg) 0 0;
    overflow: hidden;
    background: var(--sim-bg-deep);
}

.prg-karta-nahled img {
    width: 100%;
    height: 100%;
    /* `scale-down`, ne `contain`: drobné logo by `contain` roztahl přes celý
       pruh a rozmazal ho. Velký náhled se zmenší, malé logo zůstane v klidu. */
    object-fit: scale-down;
}

.prg-karta-ikona {
    width: 44px;
    height: 44px;
    color: var(--sim-accent);
}
.prg-karta-ikona svg { display: block; width: 100%; height: 100%; }

.prg-karta-nazev {
    font-family: var(--sim-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}
.prg-karta-nazev a { color: inherit; text-decoration: none; }
.prg-karta-nazev a:hover, .prg-karta-nazev a:focus-visible { color: var(--sim-accent); }

.prg-karta-popis {
    color: var(--sim-muted);
    font-size: .9375rem;
    margin: 0;
    flex: 1;
}

.prg-karta-udaje,
.prg-detail-znacky {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sim-space-2);
    margin: 0;
}

.prg-karta-akce { margin: 0; }

/* ── Značky ───────────────────────────────────────────── */

.prg-znacka {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--sim-line-strong);
    border-radius: 999px;
    font-family: var(--sim-font-mono);
    font-size: .75rem;
    letter-spacing: .02em;
    color: var(--sim-dim);
    white-space: nowrap;
}

.prg-znacka-cena,
.prg-znacka-model {
    border-color: var(--sim-line-accent);
    color: var(--sim-accent);
}

/* ── Tlačítka ───────────────────────────────────────── */

.prg-tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sim-space-2);
    min-height: 44px;             /* dotykový cíl */
    padding: 0 var(--sim-space-5);
    border: 1px solid var(--sim-line-strong);
    border-radius: var(--sim-radius-md);
    background: transparent;
    color: var(--sim-text);
    font-family: var(--sim-font-body);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.prg-tlacitko:hover,
.prg-tlacitko:focus-visible {
    border-color: var(--sim-accent);
    color: var(--sim-accent);
}

.prg-tlacitko-hlavni {
    background: var(--sim-accent-bright);
    border-color: var(--sim-accent-bright);
    color: #0A0A0A;
}
.prg-tlacitko-hlavni:hover,
.prg-tlacitko-hlavni:focus-visible {
    background: var(--sim-accent);
    border-color: var(--sim-accent);
    color: #0A0A0A;
}
.prg-tlacitko-hlavni:active { background: var(--sim-accent-deep); }

.prg-nedostupne {
    color: var(--sim-faint);
    font-size: .9375rem;
}

/* ── Detail programu ──────────────────────────────────── */

.prg-detail-hlava { margin-bottom: var(--sim-space-7); }
.prg-detail-znacky { margin-bottom: var(--sim-space-5); }

.prg-detail-akce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sim-space-4);
    margin: 0;
}

.prg-cena {
    font-family: var(--sim-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sim-accent);
}

.prg-detail-popis,
.prg-licence,
.prg-verze,
.prg-historie {
    max-width: 72ch;
    margin-bottom: var(--sim-space-7);
}

.prg-detail-popis p { color: var(--sim-muted); }

.prg-licence h2,
.prg-verze h2,
.prg-historie h2 {
    font-family: var(--sim-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin: 0 0 var(--sim-space-4);
}

.prg-verze h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: var(--sim-space-5) 0 var(--sim-space-2);
}

/* Odrážky licenčních podmínek — obsah nese informaci, takže se značky
   vrací. Globální reset `ul { list-style: none }` by je jinak sebral. */
.prg-licence-seznam {
    list-style: disc;
    padding-left: 1.25em;
    margin: 0;
    color: var(--sim-muted);
}
.prg-licence-seznam li { margin-bottom: var(--sim-space-2); }

.prg-verze-udaje {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--sim-space-2) var(--sim-space-5);
    margin: 0;
}
.prg-verze-udaje dt { color: var(--sim-dim); font-size: .875rem; }
.prg-verze-udaje dd { margin: 0; font-family: var(--sim-font-mono); font-size: .875rem; }

.prg-historie-seznam {
    list-style: none;
    padding: 0;
    margin: 0;
}
.prg-historie-seznam li {
    padding: var(--sim-space-4) 0;
    border-top: 1px solid var(--sim-line);
}
.prg-historie-datum { color: var(--sim-dim); font-size: .875rem; margin-left: var(--sim-space-2); }
.prg-historie-zmeny { color: var(--sim-muted); font-size: .9375rem; margin-top: var(--sim-space-2); }

/* ── Pokladna ───────────────────────────────────────────── */

/* Panel a pole formuláře sdílí s kontaktem — viz `.sim-kontakt-panel`
   a `.sim-kontakt-pole` níž. Tady jen šířka. */
.prg-formular { max-width: 46rem; }

.prg-povinne { color: var(--sim-accent); }

.prg-napoveda {
    margin: var(--sim-space-2) 0 0;
    color: var(--sim-dim);
    font-size: .875rem;
}

/* 🔴 Honeypot se schovává POSUNEM MIMO OBRAZOVKU, ne `display:none`.
   Robot, který čte styly, skryté pole přeskočí — a past by nefungovala.
   `aria-hidden` na obalu drží stranou čtečky. */
.prg-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.prg-souhrn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sim-space-3);
    padding: var(--sim-space-4) var(--sim-space-5);
    margin-bottom: var(--sim-space-5);
    background: var(--sim-surface);
    border: 1px solid var(--sim-line-accent);
    border-radius: var(--sim-radius-md);
}

/* Podmínky licence pod souhrnem — zákazník je má vidět dřív, než zaplatí
   (délka a rozsah plnění). Text nese informaci, proto odrážky. */
.prg-souhrn-podminky {
    list-style: disc;
    margin: calc(var(--sim-space-2) * -1) 0 var(--sim-space-5);
    padding-left: 1.25em;
    color: var(--sim-muted);
    font-size: .9375rem;
}
.prg-souhrn-podminky li { margin-bottom: var(--sim-space-1); }

.prg-souhrn strong {
    font-family: var(--sim-font-display);
    font-size: 1.375rem;
    color: var(--sim-accent);
}

.prg-pole-souhlas > label {
    display: flex;
    align-items: flex-start;
    gap: var(--sim-space-3);
    font-weight: 400;
    font-size: .9375rem;
    color: var(--sim-muted);
    cursor: pointer;
}

.prg-pole-souhlas input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--sim-accent-bright);
}

.prg-pole-souhlas a { color: var(--sim-accent); }

/* ── Po zaplacení ───────────────────────────────────────── */

/* ⚠️ Čísla kroků nesou informaci (pořadí), takže se značky VRACEJÍ —
   globální reset `ul, ol { list-style: none }` by je jinak sebral a z návodu
   by zbyl seznam odstavců bez pořadí. */
.prg-kroky {
    list-style: decimal;
    padding-left: 1.5em;
    margin: var(--sim-space-7) 0 0;
    max-width: 46rem;
}

.prg-kroky > li {
    margin-bottom: var(--sim-space-7);
    padding-left: var(--sim-space-2);
}

.prg-kroky h2 {
    font-family: var(--sim-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin: 0 0 var(--sim-space-3);
}

.prg-kroky p { color: var(--sim-muted); }

.prg-klic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sim-space-3);
    margin: 0;
}

.prg-klic code {
    padding: var(--sim-space-3) var(--sim-space-4);
    background: var(--sim-bg-deep);
    border: 1px solid var(--sim-line-accent);
    border-radius: var(--sim-radius-md);
    font-family: var(--sim-font-mono);
    font-size: 1.0625rem;
    letter-spacing: .04em;
    color: var(--sim-accent);
    /* Klíč se přepisuje ručně — musí se dát označit a nesmí přetékat. */
    user-select: all;
    word-break: break-all;
}

@media (max-width: 640px) {
    .prg-vypis,
    .prg-detail { padding-block: calc(66px + var(--sim-space-6)) var(--sim-space-7); }
    .prg-verze-udaje { grid-template-columns: minmax(0, 1fr); gap: 2px var(--sim-space-4); }
    .prg-verze-udaje dd { margin-bottom: var(--sim-space-3); }
}

/* ===========================================================================
   Pohyb vypnutý v nastavení systému
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ── Kontakt ──────────────────────────────────────────────────────────────
   Dvousloupcová sazba: vlevo text a údaje, vpravo panel s formulářem.

   🔴 Zděděný formulář z klonu se vykresloval úplně nenastylovaný — bílá
      systémová pole uprostřed tmavého webu. Vzhled je proto náš, ale POST
      jde dál na `/kontakt`, takže zpracování i ochrany zůstaly jádru. */
.sim-kontakt-mrizka {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
    /* 3D vitrína (C80) stojí na ploše pod údaji a formulář vedle obou. */
    grid-template-areas: "text panel" "vitrina panel";
    grid-template-rows: auto 1fr;
    gap: var(--sim-space-6) clamp(32px, 5vw, 72px);
    align-items: start;
}
.sim-kontakt-text    { grid-area: text; }
.sim-kontakt-panel   { grid-area: panel; }
.sim-kontakt-vitrina { grid-area: vitrina; min-width: 0; max-width: 460px; }
/* 🔴 Na telefonu formulář PŘED vitrínou — kvůli němu sem člověk přišel. */
@media (max-width: 900px) {
    .sim-kontakt-mrizka {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "text" "panel" "vitrina";
        grid-template-rows: auto;
    }
}

.sim-kontakt-udaje {
    list-style: none;
    margin: clamp(24px, 4vw, 40px) 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.sim-kontakt-udaje li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sim-muted);
}
/* ⚠️ Ikona nesmí couvnout, když je text dlouhý — `flex` by jí jinak ubral
   šířku a z kolečka by byl ovál. */
.sim-kontakt-udaje .sim-ikona,
.sim-kontakt-udaje svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--sim-accent); }
.sim-kontakt-udaje a { color: var(--sim-text); text-decoration: none; border-bottom: 1px solid var(--sim-line-accent); }
.sim-kontakt-udaje a:hover, .sim-kontakt-udaje a:focus-visible { color: var(--sim-accent); }
.sim-kontakt-poznamka { margin-top: 20px; color: var(--sim-dim); font-size: .9rem; }

/* Levý sloupec: nadpis, perex, kontaktní údaje. Bez pravidla to byl jen
   blok, kterému šířku určovala mřížka — řádky textu se pak na širokém
   displeji natahovaly přes celý sloupec a špatně se četly. */
.sim-kontakt-text { max-width: 54ch; }
.sim-kontakt-text .sim-perex { margin-bottom: var(--sim-space-6); }

/* 🔴 Obal formuláře. Vykreslí se jen tehdy, když jsou vyplněné klíče
      reCAPTCHY (jinak je místo něj `--nahrada`), takže dokud chybí, není
      tahle třída na žádné stránce vidět — a přesto musí mít pravidlo
      připravené. Jinak se formulář v den, kdy klíče přibudou, objeví
      neupravený a nikdo nebude tušit proč. */
.sim-kontakt-form { display: grid; gap: var(--sim-space-4); }

/* Panel formuláře — kontakt i pokladna programu (`.prg-formular`, C80):
   dva formuláře webu, jeden vzhled. */
.sim-kontakt-panel,
.prg-formular {
    background: var(--sim-surface);
    border: 1px solid var(--sim-line);
    border-radius: var(--sim-radius-lg);
    padding: clamp(24px, 3.5vw, 40px);
}
.sim-kontakt-nadpis {
    font-family: var(--sim-font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    margin: 0 0 1.4rem;
    color: var(--sim-text);
}

.sim-kontakt-radek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) {
    .sim-kontakt-radek { grid-template-columns: minmax(0, 1fr); }
}

/* Pole kontaktu i pokladny (`.prg-pole`) — popisky, pole i stav fokusu
   jednou; souhlas s podmínkami v pokladně je věta, ne popisek. */
.sim-kontakt-pole,
.prg-pole { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sim-kontakt-pole label,
.prg-pole:not(.prg-pole-souhlas) > label {
    font-family: var(--sim-font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sim-dim);
}
.sim-kontakt-pole label span { color: var(--sim-accent); }

/* 🔴 Pole se stylují jmenovitě, ne přes `input` — stránka obsahuje i pole
      cizích komponent (lišta souhlasu, captcha) a globální pravidlo by jim
      přepsalo vzhled. */
.sim-kontakt-pole input,
.sim-kontakt-pole textarea,
.prg-pole input[type="email"],
.prg-pole input[type="text"] {
    width: 100%;
    font: inherit;
    color: var(--sim-text);
    background: var(--sim-bg);
    border: 1px solid var(--sim-line);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 160ms var(--sim-ease), box-shadow 160ms var(--sim-ease);
}
.sim-kontakt-pole textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.sim-kontakt-pole input::placeholder,
.sim-kontakt-pole textarea::placeholder { color: var(--sim-faint); }
.sim-kontakt-pole input:focus-visible,
.sim-kontakt-pole textarea:focus-visible,
.prg-pole input:focus-visible {
    outline: none;
    border-color: var(--sim-accent);
    box-shadow: 0 0 0 3px var(--sim-accent-glow);
}
/* Chyba se maluje na pole, ne jen hláškou pod ním — jinak není vidět,
   kterého pole se týká. */
.sim-kontakt-pole input[aria-invalid="true"],
.sim-kontakt-pole textarea[aria-invalid="true"] { border-color: #FF6B6B; }

.sim-kontakt-odeslat { margin-top: 8px; }

.sim-kontakt-panel--nahrada p { color: var(--sim-muted); line-height: 1.7; }
.sim-kontakt-panel--nahrada p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   POZADÍ SEKCÍ — fotografická hala z předlohy
   ══════════════════════════════════════════════════════════════════════

   🔴 V předloze NESTOJÍ ani jedna sekce na ploché barvě. Pod každou je
      tmavá industriální hala s regály, trubkami a teplými odlesky; právě
      ona drží celý web pohromadě. Nahradit ji přechodem nejde — je to
      render, ne barva.

   🔴 OBRÁZEK JDE DO PSEUDOELEMENTU, NE DO `background` SEKCE. Sekce samy
      mají uvnitř karty s `backdrop-filter`; kdyby obrázek nesla sekce,
      sklo karet by rozmazávalo rovnou jeho a vznikl by z toho šmouhovitý
      flek. Takhle je pozadí vlastní vrstva se svým `z-index` a obsah
      sekce leží nad ní.

   ⚠️ Horní a dolní okraj se VYTRÁCÍ do barvy stránky (maska). Bez toho má
      každá sekce ostrou vodorovnou hranu a web vypadá jako poskládaný
      z pruhů — v předloze přecházejí patra haly plynule.

   ⚠️ `background-attachment: fixed` se schválně NEPOUŽÍVÁ. Na mobilu nutí
      prohlížeč překreslovat pozadí při každém posunu a rolování se trhá.  */

.sim-pozadi { position: relative; isolation: isolate; }

.sim-pozadi::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* ⚠️ Původních .5 spolu se ztmavující vrstvou halu skoro ubilo — na
       snímku z ní zbýval jen náznak a sekce vypadala skoro stejně plochá
       jako předtím. V předloze je hala jasně čitelná včetně zlatých světel. */
    opacity: .78;
    /* Vytracení do stránky nahoře i dole. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* 🔴 Ztmavení JE SAMOSTATNÁ VRSTVA nad obrázkem, ne jeho nižší průhlednost.
      Snížit `opacity` obrázku znamená prosvítající barvu stránky i tam, kde
      jsou světlé odlesky — ty mají zůstat. Tahle vrstva je naopak nejhustší
      uprostřed, kde leží text. */
.sim-pozadi::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom,
            var(--sim-bg) 0%,
            rgba(4, 7, 13, .55) 22%,
            rgba(4, 7, 13, .62) 50%,
            rgba(4, 7, 13, .55) 78%,
            var(--sim-bg) 100%);
    pointer-events: none;
}

.sim-pozadi--regaly::before  { background-image: url('../sim/pozadi/hala-regaly.webp'); }
.sim-pozadi--hloubka::before { background-image: url('../sim/pozadi/hala-hloubka.webp'); }
.sim-pozadi--ochoz::before   { background-image: url('../sim/pozadi/hala-ochoz.webp'); }
/* Render z Blenderu (`_plan/blender/hala.py`, C75): modrošedá hala se sloupy,
   trubkami, ochozem a řadou strojů s jantarovými lampami — tón předlohy. */
/* C77: záběr je nízko nad podlahou — dole pás strojů s lampami a lesklá
   podlaha, nahoře ochoz. Sekce bývá nižší než obrázek, proto se kotví
   ke SPODNÍ hraně: pás a odlesky jsou to, co z předlohy musí zůstat. */
.sim-pozadi--linka::before   { background-image: url('../sim/pozadi/hala-linka.webp?v=c77'); background-position: center bottom; opacity: 1;
    /* Hloubka ostrosti jako v předloze: hala za obsahem je rozostřená,
       ostré lampy dělaly za textem žluté obdélníky (C77). */
    filter: blur(3px); }
/* Telefon: pozadí jsou největší obrázky podstránek (LCP), menší displej stačí
   poloviční šířka. Hranici 900 px sdílí se skripty. */
@media (max-width: 899px) {
    .sim-pozadi--regaly::before  { background-image: url('../sim/pozadi/hala-regaly-mobil.webp'); }
    .sim-pozadi--hloubka::before { background-image: url('../sim/pozadi/hala-hloubka-mobil.webp'); }
    .sim-pozadi--ochoz::before   { background-image: url('../sim/pozadi/hala-ochoz-mobil.webp'); }
    .sim-pozadi--linka::before   { background-image: url('../sim/pozadi/hala-linka-mobil.webp'); }
}
/* Ztmavení je u téhle haly slabší: pás a odlesky jsou v předloze jasné.
   Text leží v kartách s vlastním tmavým podkladem a nadpis vlevo nad
   tmavým horním patrem haly, kontrast hlídá `zkouska-kontrast.php`. */
.sim-pozadi--linka::after {
    background:
        /* Sloupec s nadpisem a perexem vlevo: pás světel by vedl přes text. */
        linear-gradient(90deg, rgba(4, 7, 13, .78) 0%, rgba(4, 7, 13, .6) 26%, rgba(4, 7, 13, 0) 40%),
        linear-gradient(to bottom,
            var(--sim-bg) 0%,
            rgba(4, 7, 13, .42) 20%,
            rgba(4, 7, 13, .3) 60%,
            rgba(4, 7, 13, .18) 85%,
            var(--sim-bg) 100%);
}

/* Záběr „regály" má prázdný střed a techniku u krajů — na úzkém displeji by
   `cover` ořízlo právě kraje a zbyla by černá plocha. Proto se tam drží
   celý a dolepí se barvou stránky. */
@media (max-width: 720px) {
    .sim-pozadi--regaly::before {
        background-size: contain;
        background-position: center top;
    }
}

/* Kontrast textu na pozadí hlídá ztmavující vrstva; na displeji s nastaveným
   vyšším kontrastem se pozadí raději schová úplně. */
@media (prefers-contrast: more) {
    .sim-pozadi::before,
    .sim-paticka::before { display: none; }
}

/* ── Odkazy na sociální sítě v patičce ────────────────────────────────
   V předloze stojí hned pod heslem značky. Vykreslí se jen ty, pro které
   je v nastavení vyplněná adresa, takže jich může být jedna i pět. */
/* C77: logo je v patičce předlohy o stupeň větší než v horní liště. */
.sim-paticka-znacka .sim-logo { --sim-logo-h: 38px; }
.sim-paticka-site {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    /* Ikona sedí uprostřed neviditelného 40px cíle — o polovinu rozdílu
       doleva, ať je na svislici s heslem nad sebou. */
    margin-left: -9px;
    padding: 0;
    list-style: none;
}

.sim-paticka-sit {
    display: grid;
    place-items: center;
    /* ⚠️ 40 px je spodní hranice pro cíl prstem; menší ikona v patičce
       vypadá elegantně a na telefonu se do ní nedá trefit. */
    width: 40px;
    height: 40px;
    /* C77: v předloze jsou ikony holé a bílé, bez rámečku; cíl pro prst
       zůstává 40 px, jen je neviditelný. */
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--sim-text);
    background: none;
    transition: color .22s var(--sim-ease), border-color .22s var(--sim-ease),
                background .22s var(--sim-ease), transform .22s var(--sim-ease);
}

.sim-paticka-sit:hover,
.sim-paticka-sit:focus-visible {
    color: var(--sim-bg);
    background: var(--sim-accent);
    border-color: var(--sim-accent);
    transform: translateY(-2px);
}

.sim-socialni-ikona { width: 22px; height: 22px; display: block; }

@media (prefers-reduced-motion: reduce) {
    .sim-paticka-sit { transition: none; }
    .sim-paticka-sit:hover { transform: none; }
}

/* ── Hero: hala se drží vzadu, scéna zůstává hlavní ───────────────────
   🔴 Plátno 3D scény je průhledné, takže hala prosvítá i ZA strojem —
      přesně jako v předloze. Právě proto musí být tady slabší než
      u ostatních sekcí: v plné síle soupeří se strojem o pozornost
      a scéna se v ní ztratí. */
.sim-hero.sim-pozadi::before {
    opacity: .4;
    /* Dole se vytrácí dřív — tam začíná první sekce a dva snímky haly
       nad sebou by daly viditelný šev. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
}

/* 🔴 Hero má VLASTNÍ gradientové pozadí (teplá záře u stroje, chladný
      nádech vlevo). To zůstává — ztmavující vrstva ostatních sekcí by
      ho přebila a z hera by zbyla placka. Proto jen jemné srovnání. */
.sim-hero.sim-pozadi::after {
    background: linear-gradient(to bottom,
        rgba(4, 7, 13, .55) 0%,
        rgba(4, 7, 13, .35) 40%,
        rgba(4, 7, 13, .55) 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   PROCES — živý dopravník
   ══════════════════════════════════════════════════════════════════════

   🔴 Do 25. 10. 2026 měla celá sekce jedinou interakci: odhalení při
      rolování. Šest kroků na dopravníku se tvářilo jako stroj, ale nedalo
      se na ně sáhnout. Teď linka ukazuje, kam výroba došla, a zastaví se
      na kroku, nad kterým je kurzor nebo který někdo vybral.

   🔴 Postup je JEDINÉ ČÍSLO v `--sim-postup` (0 až 1). Skript přepisuje
      jen tu proměnnou, zbytek je stylopis — jinak by se vzhled rozlezl do
      JavaScriptu a nedal se měnit beze změny skriptu.                    */

.sim-kroky { --sim-postup: 0; }

/* Naplněná část linky. Leží přesně na původní lince (`::before`). */
/* ⚠️ Svislá poloha MUSÍ odpovídat `.sim-kroky::before` (šedá linka).
      Když se rozejdou, vedou pod sebou dvě čáry o pixel od sebe a vypadá
      to jako chyba vykreslování — ne jako postup výroby. */
.sim-kroky::after {
    content: "";
    position: absolute;
    left: 0; top: var(--sim-krok-osa);
    height: 1px;
    width: calc(var(--sim-postup) * 100%);
    background: linear-gradient(90deg,
        transparent, var(--sim-accent) 8%, var(--sim-accent) 92%, var(--sim-amber-soft));
    box-shadow: 0 0 12px var(--sim-accent-glow);
    transition: width .45s var(--sim-ease);
    pointer-events: none;
}

/* 🔴 Klikací je CELÁ karta, ne jen název. Tlačítko sedí uvnitř nadpisu
      (kvůli validitě) a plochu roztahuje tahle vrstva.
   ⚠️ Vrstva leží NAD popisem, takže text kroku nejde označit myší. U šesti
      krátkých popisků je to přijatelná cena za velký cíl; u delšího textu
      by se to muselo řešit jinak. */
.sim-krok-spoust {
    position: static;
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sim-krok-spoust::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}
.sim-krok-spoust:focus-visible::after {
    outline: 2px solid var(--sim-accent);
    outline-offset: 4px;
}
/* Obrys kreslí ta roztažená vrstva, samotný text ho mít nemá — jinak jsou
   kolem kroku dva rámečky. */
.sim-krok-spoust:focus-visible { outline: none; }

/* Krok, kam výroba došla. Ikona zůstává bílá jako v předloze — postup
   nese žluté číslo a rám karty. */
.sim-krok.je-dosazen { border-color: var(--sim-line-accent); }
.sim-krok.je-dosazen .sim-krok-cislo { color: var(--sim-accent); }

/* Krok, na který se právě kouká nebo který někdo vybral: zlatý rám karty
   a rozzářená ikona (C76 — plná žlutá dlaždice v předloze není). */
.sim-krok.je-aktivni {
    border-color: var(--sim-accent);
    box-shadow: 0 0 28px var(--sim-accent-glow);
}
.sim-krok.je-aktivni .sim-krok-ikona {
    color: var(--sim-accent);
    filter: drop-shadow(0 0 10px var(--sim-accent-glow));
    transform: scale(1.06);
}
.sim-krok.je-aktivni .sim-krok-nazev { color: var(--sim-accent); }
.sim-krok.je-aktivni .sim-krok-popis { color: var(--sim-text); }

/* Vybraný krok drží i po odjetí myší — odtud ten plný kroužek pod číslem. */
.sim-krok.je-vybran .sim-krok-cislo::after {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: 7px;
    border-radius: 50%;
    background: var(--sim-accent);
    vertical-align: middle;
}

.sim-krok-ikona { transition: border-color var(--sim-t-hover) var(--sim-ease),
    color var(--sim-t-hover) var(--sim-ease), background var(--sim-t-hover) var(--sim-ease),
    box-shadow var(--sim-t-hover) var(--sim-ease), transform var(--sim-t-hover) var(--sim-ease); }
.sim-krok-nazev, .sim-krok-popis { transition: color var(--sim-t-hover) var(--sim-ease); }

/* Na úzkém displeji je linka svislá a schovaná (viz pravidlo výš), takže
   naplněná část by visela přes celou šířku bez vztahu k čemukoli. */
@media (max-width: 1024px) {
    .sim-kroky::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sim-kroky::after { transition: none; }
    .sim-krok.je-aktivni .sim-krok-ikona { transform: none; }
    /* Obruč se přestane otáčet, ale zůstane — je to součást kresby
       žárovky, ne jen pohyb. Sklopení perspektivou musí zůstat, jinak
       by se z obruče stal plochý kroužek. */
    .sim-vyzva-obruc { animation: none; }
}

/* ===========================================================================
   SLUŽBY (C81) — ceník, srovnání, skupiny, technický popis, časté dotazy

   Stránky služeb (`/sluzby`, `/sluzby/…`, `/marketing`, `/wordpress`). Sklo
   panelů je pravidlo panelů programu výš, názvy a popisy karet pravidla karet
   „Proč“, body s fajfkou pravidla výčtu služby, odkaz skupiny pravidlo odkazu
   výtvoru. Tady je rozložení a to, co sekce mají navíc.
   =========================================================================== */

.sim-balicky,
.sim-srovnani,
.sim-skupiny,
.sim-popis,
.builder-faq-section { padding-block: var(--sim-space-10); }

.sim-balicky-hlava,
.sim-srovnani-hlava,
.sim-skupiny-hlava,
.builder-faq-section .section-header { margin-bottom: var(--sim-space-7); }
.sim-balicky-hlava .sim-h2,
.sim-srovnani-hlava .sim-h2,
.sim-skupiny-hlava .sim-h2,
.sim-popis-hlava .sim-h2 { margin-bottom: var(--sim-space-5); }
.sim-balicky-hlava .sim-perex,
.sim-srovnani-hlava .sim-perex,
.sim-skupiny-hlava .sim-perex,
.sim-popis-hlava .sim-perex { max-width: 60ch; }
/* Hlavička bez perexu končí nadpisem — jeho spodní okraj by se sečetl s okrajem hlavičky. */
.sim-balicky-hlava > :last-child,
.sim-srovnani-hlava > :last-child,
.sim-skupiny-hlava > :last-child,
.sim-popis-hlava > :last-child { margin-bottom: 0; }

/* Poznámka pod obsahem sekce (cena po konzultaci, zdroj srovnání). */
.sim-sekce-poznamka {
    max-width: 72ch;
    margin: var(--sim-space-6) 0 0;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--sim-dim);
}
.sim-sekce-poznamka em { font-style: normal; color: var(--sim-accent); }
.sim-sekce-poznamka a { color: var(--sim-accent); }

/* ── Ceník balíčků ─────────────────────────────────────────────────────────
   🔴 Šířku obalu řídí POČET karet (`--1` až `--4` z `balicky()`), ne `auto-fit`:
      dvě karty přes 1 392 px by měly po 680 px a jedna celou stránku. Pruh
      provozu je v témž obalu, takže lícuje s kartami nad sebou. */
.sim-balicky-nabidka {
    --sim-balicky-sloupce: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sim-space-5);
}
.sim-balicky-nabidka--1 { --sim-balicky-sloupce: 1; max-width: 480px; }
.sim-balicky-nabidka--2 { --sim-balicky-sloupce: 2; max-width: 960px; }
.sim-balicky-nabidka--4 { --sim-balicky-sloupce: 4; }
/* Jedna nebo dvě karty na širokém displeji — vpravo od nich zůstávala prázdná třetina
   řady (snímek C81). Dvě karty berou pruh provozu jako třetí sloupec přesně o šířce
   karty (třetina řady bez dvou mezer); jediná karta se rozloží do šířky: vlevo předmět,
   název, cena a tlačítko, vpravo body. Pod 1025 px platí sloupec karet výš. */
@media (min-width: 1025px) {
    .sim-balicky-nabidka--2 {
        max-width: none;
        grid-template-columns: minmax(0, 1fr) calc((100% - 2 * var(--sim-space-5)) / 3);
    }
    .sim-balicky-nabidka--2 .sim-balicky-provoz { flex-direction: column; align-items: stretch; }
    .sim-balicky-nabidka--2 .sim-balicky-provoz-cena { align-items: flex-start; text-align: left; }

    .sim-balicky-nabidka--1 { max-width: none; }
    .sim-balicky-nabidka--1 .sim-balicek {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-rows: repeat(7, auto);   /* předmět, štítek, název, cena, popis, termín, tlačítko */
        column-gap: var(--sim-space-8);
    }
    .sim-balicky-nabidka--1 .sim-balicek > * { grid-column: 1; }
    .sim-balicky-nabidka--1 .sim-balicek > .sim-balicek-obsah { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}

.sim-balicky-seznam {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--sim-balicky-sloupce), minmax(0, 1fr));
    gap: var(--sim-space-5);
}
/* Karta je sloupec: seznam bodů roste, termín a tlačítko drží spodní hranu —
   v řadě karet pak lícují bez ohledu na počet bodů. */
.sim-balicek {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Plátno 3D přesahuje vitrínu do stran (natočený kotouč se nesmí uříznout
       vitrínou, karta ano). */
    overflow: hidden;
}
/* Zvýrazněná karta (vyplněný štítek): žlutá hrana a záře jako karta „Proč“ pod myší. */
.sim-balicek.je-zvyrazneny {
    border-color: var(--sim-accent);
    box-shadow: var(--sim-sklo-svit), 0 0 40px rgba(251, 237, 55, .14), var(--sim-shadow-card);
}
/* Předmět na kotouči nahoře přes celou šířku karty, jako karty „Proč“ s živým 3D —
   jen nižší: obrazem karty je cena, ne předmět. */
.sim-balicek.ma-3d { padding-top: 0; }
.sim-balicek-vystava {
    margin: 0 calc(-1 * var(--sim-space-6)) var(--sim-space-2);
    aspect-ratio: 2 / 1;
}
/* Štítek balíčku („Nejčastější volba“) a skupiny („od 14 900 Kč“, „Nové“) — tatáž
   pilulka; skupina ji má v řádku vedle čísla, balíček nad názvem. */
.sim-balicek-stitek { align-self: flex-start; margin: 0 0 var(--sim-space-3); }
.sim-balicek-stitek,
.sim-skupina-stitek {
    padding: 4px var(--sim-space-3);
    border: 1px solid var(--sim-line-accent);
    border-radius: var(--sim-radius-pill);
    font-family: var(--sim-font-mono);
    font-size: .64rem;
    letter-spacing: .18em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--sim-accent);
}
/* Název balíčku nese verzálky a víc místa než název karty „Proč“ — je to značka
   (Start, Profi, Obchod), ne věta. */
.sim-balicek-nazev { font-size: 1.5rem; text-transform: uppercase; }
.sim-balicek-cena {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sim-space-2);
    margin: 0 0 var(--sim-space-3);
    line-height: 1;
}
.sim-balicek-cena strong,
.sim-balicky-provoz-cena strong {
    font-family: var(--sim-font-display);
    font-stretch: 75%;
    font-size: clamp(2rem, 2.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--sim-text);
}
.sim-balicek-pred,
.sim-balicky-provoz-cena span {
    font-family: var(--sim-font-mono);
    font-size: .68rem;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--sim-dim);
}
.sim-balicek-popis { margin-bottom: var(--sim-space-5); }
/* `align-content: start` — rostoucí mřížka seznamu by jinak roztáhla řádky
   bodů po celé výšce (`normal` se u mřížky chová jako `stretch`). */
.sim-balicek-obsah { flex: 1 0 auto; align-content: start; margin-bottom: var(--sim-space-5); }
.sim-balicek-termin {
    margin: 0 0 var(--sim-space-4);
    padding-top: var(--sim-space-4);
    border-top: 1px solid var(--sim-line);
    font-family: var(--sim-font-mono);
    font-size: .68rem;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--sim-accent);
}
.sim-balicek .sim-btn { width: 100%; margin-top: auto; }

.sim-balicky-provoz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sim-space-5) var(--sim-space-7);
    padding: var(--sim-space-5) var(--sim-space-6);
}
.sim-balicky-provoz-text { min-width: 0; }
.sim-balicky-provoz-text .sim-balicek-nazev { margin-bottom: var(--sim-space-2); }
.sim-balicky-provoz-text .sim-perex { max-width: 64ch; }
.sim-balicky-provoz-cena {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sim-space-2);
    margin: 0;
    text-align: right;
}

@media (max-width: 1240px) {
    .sim-balicky-nabidka--4 { --sim-balicky-sloupce: 2; }
}
@media (max-width: 900px) {
    .sim-balicky-nabidka { --sim-balicky-sloupce: 1; max-width: 560px; }
    .sim-balicky-provoz { flex-direction: column; align-items: stretch; }
    .sim-balicky-provoz-cena { align-items: flex-start; text-align: left; }
}

/* ── Srovnávací tabulka ────────────────────────────────────────────────────
   Skutečná tabulka (`srovnani()`). Sklo má z pravidla panelů, výplň buňky. */
.sim-srovnani-tabulka {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    padding: 0;
}
.sim-srovnani-tabulka th,
.sim-srovnani-tabulka td {
    padding: var(--sim-space-4) var(--sim-space-5);
    border-top: 1px solid var(--sim-line);
    text-align: left;
    vertical-align: top;
}
.sim-srovnani-tabulka thead th {
    border-top: 0;
    font-family: var(--sim-font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .18em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--sim-dim);
}
.sim-srovnani-tabulka thead th:first-child { width: 22%; }
.sim-srovnani-tabulka tbody th {
    font-family: var(--sim-font-display);
    font-stretch: 75%;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sim-text);
}
.sim-srovnani-tabulka td { font-size: .92rem; line-height: 1.6; color: var(--sim-muted); }
/* Zvýrazněný sloupec: žlutý nádech přes celou výšku, záhlaví žluté. */
.sim-srovnani-tabulka .je-zvyrazneny { background: rgba(251, 237, 55, .05); color: var(--sim-text); }
.sim-srovnani-tabulka thead .je-zvyrazneny { color: var(--sim-accent); }
/* Nádech v rohu tabulky by vyčníval přes zaoblení rámu. */
.sim-srovnani-tabulka thead th:last-child { border-top-right-radius: calc(var(--sim-radius-lg) - 1px); }
.sim-srovnani-tabulka tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--sim-radius-lg) - 1px); }

/* Na telefonu řádek = blok: hledisko jako nadpis, pod ním obě možnosti s názvem
   z `data-sloupec`. Záhlaví zůstane čtečce — tytéž deklarace jako `.sim-jen-pro-ctecku`. */
@media (max-width: 768px) {
    .sim-srovnani-tabulka,
    .sim-srovnani-tabulka tbody,
    .sim-srovnani-tabulka tr,
    .sim-srovnani-tabulka th,
    .sim-srovnani-tabulka td { display: block; width: auto; }
    .sim-srovnani-tabulka thead {
        position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0;
        clip-path: inset(50%); overflow: hidden; white-space: nowrap;
    }
    .sim-srovnani-tabulka tr { padding: var(--sim-space-4) var(--sim-space-5); }
    .sim-srovnani-tabulka tbody tr + tr { border-top: 1px solid var(--sim-line); }
    .sim-srovnani-tabulka tbody th,
    .sim-srovnani-tabulka td { padding: 0; border-top: 0; }
    .sim-srovnani-tabulka td { margin-top: var(--sim-space-3); }
    .sim-srovnani-tabulka td::before {
        content: attr(data-sloupec);
        display: block;
        margin-bottom: var(--sim-space-1);
        font-family: var(--sim-font-mono);
        font-size: .64rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--sim-dim);
    }
    .sim-srovnani-tabulka td.je-zvyrazneny {
        padding-left: var(--sim-space-3);
        border-left: 2px solid var(--sim-accent);
        border-radius: 0;
        background: none;
    }
    .sim-srovnani-tabulka td.je-zvyrazneny::before { color: var(--sim-accent); }
}

/* ── Skupiny se seznamy ──────────────────────────────────────────────────── */
.sim-skupiny-seznam {
    --sim-skupiny-sloupce: 3;
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--sim-skupiny-sloupce), minmax(0, 1fr));
    gap: var(--sim-space-5);
    container-type: inline-size;   /* šířka sloupce pro vitrínu (`cqi`) */
}
.sim-skupiny-seznam--dve { --sim-skupiny-sloupce: 2; }
.sim-skupina {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;   /* plátno 3D rámu přesahuje vitrínu */
}
/* Neon v rámu nahoře jako u kroků procesu — pevná výška, rám se do ní vejde. */
.sim-skupina.ma-3d { padding-top: var(--sim-space-3); }
/* 🔴 Vitrína má v každém panelu šířku jednoho sloupce, i v posledním panelu přes zbytek
      řady: plátna jedné linky mají velikost podle první vitríny (`Linka.prepocitej()`),
      takže širší vitrína obraz roztáhla — rám i neon do šířky a rozmazaně (C80). */
.sim-skupina-vystava {
    width: min(100%, calc((100cqi - (var(--sim-skupiny-sloupce) - 1) * var(--sim-space-5)) / var(--sim-skupiny-sloupce) - 2 * var(--sim-space-6)));
    height: 132px;
    margin: 0 auto var(--sim-space-3);
}
.sim-skupina-vystava .sim-skupina-ikona { position: absolute; inset: 0; margin: auto; }
.sim-skupina-meta { display: flex; align-items: center; gap: var(--sim-space-3); margin-bottom: var(--sim-space-4); }
.sim-skupina-body { margin-top: var(--sim-space-4); }
/* Odkaz drží spodní hranu panelu; výška je terčík pro prst (44 px). */
.sim-skupina-odkaz {
    align-self: flex-start;
    min-height: var(--sim-ctl-h);
    padding-top: var(--sim-space-3);
    text-decoration: none;
}

/* Poslední panel neúplné řady dostane zbytek řady (pět skupin „Co systém umí“ by
   jinak skončilo 3 + 2 s dírou velikosti panelu) a body v něm jdou do dvou sloupců.
   Jen v mřížce o třech, resp. dvou sloupcích — proto ohraničené mediálními dotazy. */
@media (min-width: 1025px) {
    .sim-skupiny-seznam:not(.sim-skupiny-seznam--dve) > .sim-skupina:last-child:nth-child(3n + 2) { grid-column: span 2; }
    .sim-skupiny-seznam:not(.sim-skupiny-seznam--dve) > .sim-skupina:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
    .sim-skupiny-seznam:not(.sim-skupiny-seznam--dve) > .sim-skupina:last-child:not(:nth-child(3n)) .sim-skupina-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--sim-space-6);
    }
}
@media (min-width: 681px) and (max-width: 1024px) {
    .sim-skupiny-seznam { --sim-skupiny-sloupce: 2; }
    .sim-skupiny-seznam > .sim-skupina:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .sim-skupiny-seznam > .sim-skupina:last-child:nth-child(odd) .sim-skupina-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--sim-space-6);
    }
}
@media (max-width: 680px) {
    .sim-skupiny-seznam,
    .sim-skupiny-seznam--dve { --sim-skupiny-sloupce: 1; }
}

/* ── Technický popis ───────────────────────────────────────────────────────
   Text v čtecí míře na levé svislici, technický list vedle něj ve skle. */
.sim-popis-mrizka {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--sim-space-8);
    align-items: start;
}
.sim-popis-mrizka--bez-listu { grid-template-columns: minmax(0, 1fr); }
.sim-popis-text,
.sim-popis-list { min-width: 0; }
/* Popis bývá dvakrát delší než list — list proto jde s textem, jinak by vedle
   druhé půlky textu zůstalo prázdno. Pod 1025 px je pod textem. */
@media (min-width: 1025px) {
    .sim-popis-list { position: sticky; top: calc(var(--sim-hlavicka-h) + var(--sim-space-5)); }
}
.sim-popis-obsah { max-width: 72ch; margin-top: var(--sim-space-5); }
.sim-popis-obsah > :first-child { margin-top: 0; }
.sim-popis-obsah > :last-child { margin-bottom: 0; }
/* Údaje listu pod sebou s linkou mezi nimi — v hlavičce podstránky stojí vedle sebe. */
.sim-popis-list .sim-udaje { display: grid; gap: 0; margin: 0; }
.sim-popis-list .sim-udaje > div { padding-block: var(--sim-space-3); border-top: 1px solid var(--sim-line); }
.sim-popis-list .sim-udaje > div:first-child { padding-top: 0; border-top: 0; }
.sim-popis-list .sim-udaje dt { margin-bottom: var(--sim-space-1); }
.sim-popis-list .sim-udaje dd { font-size: .95rem; line-height: 1.5; color: var(--sim-text); }

@media (max-width: 1024px) {
    .sim-popis-mrizka { grid-template-columns: minmax(0, 1fr); }
    .sim-popis-list { max-width: 560px; }
}

/* ── Časté dotazy (sekce jádra `faq_dynamic`) ──────────────────────────────
   Markup kreslí jádro (`BuilderRenderer::renderFaqDynamic()`), vzhled je webu —
   jádro k častým dotazům stylopis nevozí. Otázka je `summary`, rozbalení řídí
   prohlížeč (`details`), takže funguje i bez JavaScriptu a s klávesnicí. */
.faq-accordion { display: grid; gap: var(--sim-space-3); max-width: 920px; }
.faq-item {
    border: 1px solid var(--sim-line);
    border-radius: var(--sim-radius-lg);
    background: var(--sim-sklo);
    -webkit-backdrop-filter: var(--sim-sklo-rozmazani);
            backdrop-filter: var(--sim-sklo-rozmazani);
    transition: border-color var(--sim-t-hover) var(--sim-ease);
}
.faq-item[open] { border-color: var(--sim-line-accent); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sim-space-4);
    min-height: 56px;
    padding: var(--sim-space-4) var(--sim-space-5);
    border-radius: inherit;
    font-family: var(--sim-font-display);
    font-stretch: 75%;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sim-text);
    list-style: none;
    cursor: pointer;
    transition: color var(--sim-t-hover) var(--sim-ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Šipka z rámečku, ne znak — písmo ji mít nemusí. Posun o čtvrtinu vlastní výšky
   srovná opticky „V“, jehož hmota leží ve spodní polovině čtverce. */
.faq-item summary::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: var(--sim-space-1);
    border-right: 2px solid var(--sim-accent);
    border-bottom: 2px solid var(--sim-accent);
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--sim-t-panel) var(--sim-ease);
}
.faq-item[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.faq-item summary:hover { color: var(--sim-accent); }
.faq-item-body {
    max-width: 72ch;
    padding: 0 var(--sim-space-5) var(--sim-space-5);
    font-size: .95rem;
    line-height: 1.7;
    color: var(--sim-muted);
}
/* Rytmus odpovědi jedním pravidlem; reset přes `:where()`, ať ho nepřebije. */
.faq-item-body :where(p, ul, ol) { margin: 0; }
.faq-item-body > * + * { margin-top: var(--sim-space-3); }
.faq-item-body :where(ul, ol) { padding-left: 1.2rem; }
.faq-item-body a { color: var(--sim-accent); }
.faq-item-body strong { color: var(--sim-text); }

/* ===========================================================================
   COOKIE LIŠTA

   🔴 PROČ JE TU A NE V JÁDŘE
   Lištu vykresluje jádro a přináší si k ní vlastní `cookies.css` se **světlým**
   panelem — vědomě, jako bezpečný výchozí stav pro weby, které si vzhled
   nenapsaly. Simonet je tmavý, takže tu bílá deska přes půl telefonu působila
   jako cizí prvek (naměřeno 26. 10. 2026 v C42; na desktopu to nebylo vidět,
   protože prohlížeč měl souhlas dávno uložený).

   Jádro s tím počítá: `Analytics::vlastniStylListy()` hledá v CSS webu selektor
   `.jta-cookies__panel` a když ho najde, svůj stylopis **vůbec nevloží**.
   Tenhle blok je tedy zároveň vzhled i vypínač — proto se ten selektor nesmí
   přejmenovat ani zrušit, i kdyby zůstal prázdný.

   ⚠️ Třídy mají cizí prefix `jta-`, protože pocházejí ze stavby, ze které jádro
      vzniklo. Přepsat se nedají: šablonu vykresluje jádro.
   =========================================================================== */

.jta-cookies {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1200;          /* nad hlavičkou (900) i nad scénou */
    display: flex;
    justify-content: center;
    padding: var(--sim-space-4);
    pointer-events: none;   /* klikat jde jen do panelu, ne do pruhu kolem */
}

/* 🔴 Bez tohohle guardu by lišta po zavření neviditelně blokovala kliky na celé
      spodní části stránky: vlastní `display: flex` přebíjí `[hidden]` z výchozího
      stylu prohlížeče. Přesně tahle past už jednou shodila ovladatelnost webu
      (exit-intent popup, 18. 7. 2026). */
.jta-cookies[hidden] { display: none; }

.jta-cookies__panel {
    pointer-events: auto;
    width: 100%;
    max-width: 780px;
    padding: var(--sim-space-5);
    background: var(--sim-surface);
    border: 1px solid var(--sim-line-strong);
    border-radius: var(--sim-radius-md);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
}

.jta-cookies__nadpis {
    margin: 0 0 var(--sim-space-2);
    font-family: var(--sim-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--sim-text);
}

.jta-cookies__text {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--sim-dim);
}

.jta-cookies__odkaz-radek { margin: var(--sim-space-2) 0 0; }

.jta-cookies__odkaz {
    font-family: var(--sim-font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sim-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--sim-line-accent);
    padding-bottom: 1px;
}

.jta-cookies__odkaz:hover,
.jta-cookies__odkaz:focus-visible { border-bottom-color: var(--sim-accent); }

/* ── Tlačítka ───────────────────────────────────────────────────────────────
   🔴 „Přijmout vše" a „Jen nezbytné" mají ZÁMĚRNĚ stejnou velikost i váhu.
      Souhlas, u kterého je odmítnutí nenápadnější, není svobodný, a tedy ani
      platný. Liší se jen barvou plochy, ne důrazem.
   ------------------------------------------------------------------------- */

.jta-cookies__akce {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sim-space-3);
    margin-top: var(--sim-space-4);
}

.jta-cookies__btn {
    flex: 1 1 180px;
    padding: 12px 20px;
    font-family: var(--sim-font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sim-text);
    background: transparent;
    border: 1px solid var(--sim-line-strong);
    border-radius: var(--sim-radius-sm);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.jta-cookies__btn:hover,
.jta-cookies__btn:focus-visible {
    background: var(--sim-surface-2);
    border-color: var(--sim-text);
}

.jta-cookies__btn--hlavni {
    color: var(--sim-bg);
    background: var(--sim-accent);
    border-color: var(--sim-accent);
    font-weight: 700;
}

.jta-cookies__btn--hlavni:hover,
.jta-cookies__btn--hlavni:focus-visible {
    background: var(--sim-accent-bright);
    border-color: var(--sim-accent-bright);
    color: var(--sim-bg);
}

/* 🔴 „Uložit výběr" má smysl, teprve až jsou podrobnosti rozbalené.
      Zavřená lišta ho nesmí nabízet — zákazník by ukládal volbu, kterou
      nevidí. Jádro to řeší stejným sourozeneckým selektorem; při psaní
      vlastního vzhledu se na to snadno zapomene, protože v šabloně to
      tlačítko vypadá jako kterékoli jiné. */
.jta-cookies__btn--vyber { display: none; }

.jta-cookies__podrobnosti:not([hidden]) ~ .jta-cookies__akce .jta-cookies__btn--vyber {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Třetí volba je vedlejší cesta, ne odmítnutí — smí být tišší. */
.jta-cookies__btn--tichy {
    flex: 0 0 auto;
    border-color: transparent;
    color: var(--sim-faint);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jta-cookies__btn--tichy:hover,
.jta-cookies__btn--tichy:focus-visible {
    background: transparent;
    border-color: transparent;
    color: var(--sim-text);
}

/* ── Podrobný výběr ─────────────────────────────────────────────────────── */

.jta-cookies__podrobnosti {
    margin-top: var(--sim-space-4);
    padding-top: var(--sim-space-4);
    border-top: 1px solid var(--sim-line);
    display: grid;
    gap: var(--sim-space-3);
}

.jta-cookies__podrobnosti[hidden] { display: none; }

.jta-cookies__prepinac {
    display: flex;
    align-items: center;
    gap: var(--sim-space-2);
    cursor: pointer;
}

.jta-cookies__prepinac input { accent-color: var(--sim-accent); }

.jta-cookies__prepinac-nazev {
    font-family: var(--sim-font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sim-text);
}

.jta-cookies__vzdy {
    font-size: .68rem;
    color: var(--sim-faint);
}

.jta-cookies__popis {
    margin: 4px 0 0 26px;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--sim-dim);
}

@media (max-width: 640px) {
    .jta-cookies { padding: var(--sim-space-3); }
    .jta-cookies__panel { padding: var(--sim-space-4); }
    /* Na telefonu stojí volby pod sebou — vedle sebe by se text nevešel. */
    .jta-cookies__btn { flex: 1 1 100%; }
}