/* ⚠️ @font-face bloky jsou tady, ne ve zvláštním souboru. Dřív byly
   ve `/fonts/fonts.css`, což znamenalo DVA render-blocking styly v hlavičce
   místo jednoho — audit to hlásil jako „render blocking resources".
   Cesty k souborům jsou absolutní, takže se sloučením nic nerozbilo. */
/* Fonty hostované u nás, ne z fonts.gstatic.com.
   Důvod: rychlost (odpadá připojení k cizí doméně i blokující externí
   CSS) a soukromí — Google Fonts posílá IP návštěvníka třetí straně,
   což se pere se stránkou o ochraně údajů.
   Jen latin + latin-ext; cyrilici, řečtinu a vietnamštinu web nepoužívá,
   vynechání ušetřilo 12 souborů, které by nikdo nestáhl.
   `font-display:swap` (z Googlu) zůstává: text je vidět hned ve
   fallbacku a přepne se, až se font stáhne. */
/* latin-ext */
/* ══ Písma ════════════════════════════════════════════════════════════
   Manrope je PROMĚNNÉ písmo s osou 500–800 v jednom souboru a Sora jedna
   statická instance. Obě oříznutá přesně na znaky, které weby používají
   (čeština, slovenština, němčina, francouzština, interpunkce, symboly).

   ⚠️ Bylo to 10 souborů a 192 kB na každé stránce, teď jsou 2 a 28 kB.
   Ořez vznikl z plných proměnných písem z repozitáře Google Fonts, NE
   z dřívějších podmnožin `latin`/`latin-ext` — ani jedna z nich sama
   neobsahuje celou českou diakritiku (č, ě, ř, ů jsou jen v latin-ext,
   á, é, í jen v latin), takže ořez z jedné by tiše zabil půlku háčků.

   ⚠️ Znaky ↗ ⚠ ✓ v písmech nejsou a nikdy nebyly — kreslí je systémový
   font, stejně jako dosud.

   Postup pro zopakování (např. po přibytí nového jazyka) je v komentáři
   u `scripts/vydani.py`. */
@font-face{
  font-family:Manrope;font-style:normal;font-weight:500 800;font-display:swap;
  src:url(/fonts/manrope.woff2) format("woff2");
}
@font-face{
  font-family:Sora;font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/sora.woff2) format("woff2");
}

/* latin-ext */
/* latin */

/* ── tokeny ─────────────────────────────────────────────────────────── */
:root{
  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --ink:#0b1220;
  --muted:#5b6472;
  --accent:#105df0;
  --accent-down:#0c4bd1;
  --accent-soft:#eef3fe;
  --line:#e7e9ef;
  --sand:#b69584;
  --pos:#1e8a4c;
  --neg:#d1473d;
  --wrap:1120px;
  --straddle:clamp(48px,9vw,130px);
}

/* ── reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  overflow-x:clip;
  background:var(--bg);
  color:var(--ink);
  font:500 17px/1.65 "Manrope",system-ui,sans-serif;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}

/* Jemné zrno přes celou stránku — bílé pozadí nepůsobí prázdně, ale
   nepřidává žádný tvar ani text. `z-index:-1` (ne 0), ať sedí pod
   normálním obsahem `<main>`/`<header>` — ty nejsou pozicované, takže by
   je `z-index:0` na `position:fixed` prvku přebilo. Neviditelné na
   screenshotu ve zmenšení, ale na ostré obrazovce je cítit jako textura,
   ne jako plochá bílá. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}

/* Nadpis, který je jen pro čtečky a vyhledávače. Používá se tam, kde návrh
   viditelný nadpis nemá, ale stránka ho mít musí — bez `h1` neví crawler ani
   odečítač obrazovky, o čem stránka je. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── typografie ─────────────────────────────────────────────────────── */
h1{
  font-size:clamp(2.4rem,6.2vw + .8rem,4.6rem);
  line-height:1.06;font-weight:800;text-wrap:balance;
}
h2{
  font-size:clamp(1.7rem,2.8vw + .5rem,2.6rem);
  line-height:1.15;font-weight:800;text-wrap:balance;
}
.accent{color:var(--accent)}

/* ── nav ────────────────────────────────────────────────────────────── */
/* lišta má vlastní vlasovou linku pořád, ne až po scrollu — má být
   jasně oddělená od obsahu pod ní hned od začátku */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s;
}
.nav.is-scrolled{
  box-shadow:0 1px 14px rgb(11 18 32 / .05);
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;
  height:80px;gap:16px;
}
.nav-logo{display:inline-flex;align-items:center;min-height:44px}
.nav-logo img{height:48px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px}
/* :not(.btn) je nutnost: `.nav-links a` má vyšší specificitu než `.btn-solid`,
   takže by tlačítku přepsalo bílou barvu textu na šedou */
.nav-links a:not(.btn){
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 14px;border-radius:10px;
  font-family:"Sora",sans-serif;font-weight:600;font-size:15.5px;
  text-decoration:none;color:var(--muted);
  transition:color .15s,background-color .15s;
}
.nav-links a:not(.btn):hover{color:var(--ink);background:var(--bg-soft)}
.nav-links a.is-active{color:var(--ink)}
/* Kontakt je `.btn`, ten má vlastní `font` shorthand (Manrope) — přebít
   jen rodinu písma, ať zůstane stejná napříč všemi třemi položkami lišty */
.nav-links .btn{font-family:"Sora",sans-serif}

/* ── tlačítka ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 24px;border-radius:10px;
  font:600 16.5px/1 "Manrope",sans-serif;text-decoration:none;
  transition:background-color .15s,border-color .15s,transform .15s;
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-down)}
.btn-ghost{background:#fff;border:1px solid #c9ceda;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* ── hero (homepage) ────────────────────────────────────────────────── */
.hero{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(64px,8vw,104px);text-align:center}
.hero p{
  max-width:34em;margin:26px auto 0;
  font-size:clamp(17px,1.4vw,19px);color:var(--muted);
  text-wrap:balance;
}
.cta-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:clamp(32px,4vw,44px);
}
/* Obrázek je MacBook mockup s průhledným pozadím — vlastní perspektiva
   a stín z toho mockupu, takže tu žádný vlastní rám/stín/border nechceme
   (zdvojilo by to stín a přebilo tenký rám displeje). */
.shot{
  margin-top:clamp(52px,7vw,84px);
  transition:transform .5s cubic-bezier(.16,.9,.24,1);
  will-change:transform;
}
/* náklon za kurzorem (site.js) sedí na `.shot`, pomalé vznášení na `img` —
   dvě různé vrstvy, ať si transformy jednoho prvku nepřepisují navzájem */
.shot img{
  width:100%;height:auto;display:block;
  animation:shot-float 6.5s ease-in-out infinite;
}
@keyframes shot-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
@media (prefers-reduced-motion:reduce){
  .shot img{animation:none}
  .shot{transition:none}
}
/* na dotykových zařízeních není kurzor — náklon se v site.js vůbec
   neregistruje, tahle pojistka jen kryje starší prohlížeče */
@media (hover:none){
  .shot{transform:none!important}
}

/* ── statistika (jedno velké číslo, nic víc) ────────────────────────── */
.stat{
  background:var(--bg-soft);
  border-block:1px solid var(--line);
  padding-block:clamp(72px,9vw,120px);
  text-align:center;
}
.stat-num{
  font-size:clamp(4.6rem,11vw,8.5rem);
  font-weight:800;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
/* ⚠️ Musí být `.stat p.stat-big`, ne jen `.stat-big` — pravidlo `.stat p`
   má vyšší specificitu a velikost písma tichounce přebíjelo (28 px místo
   86 px). Chytilo se to až měřením computed stylu, na screenshotu to
   vypadalo, že se změna „neprojevila". */
.stat p.stat-big{
  margin-inline:auto;max-width:20ch;
  font-size:clamp(2.1rem,5vw,4.1rem);
  font-weight:800;line-height:1.1;text-wrap:balance;
  font-variant-numeric:tabular-nums;
}
.stat p{
  margin:18px auto 0;max-width:21em;
  font-size:clamp(20px,2.4vw,28px);font-weight:700;line-height:1.3;
  text-wrap:balance;
}
.stat-src{margin-top:22px;font-size:15px;color:var(--muted);font-weight:500}

/* ── sekce obecně ───────────────────────────────────────────────────── */
.sec{padding-block:clamp(72px,9vw,128px)}
.sec[id]{scroll-margin-top:84px}
.sec-soft{background:var(--bg-soft);border-block:1px solid var(--line)}

/* ── stránkový header (co-delame, soukromi) ───────────────────────────── */
.page-head{padding-top:clamp(48px,7vw,88px);text-align:center}
.page-head p{
  margin:18px auto 0;max-width:30em;
  color:var(--muted);font-size:clamp(17px,1.4vw,19px);text-wrap:balance;
}

/* ── zásady ochrany osobních údajů ────────────────────────────────────
   Právní registr, ne krátké lidské věty jako zbytek webu — u téhle
   stránky je odbornost důvěryhodnost, ne balast (stejné zdůvodnění jako
   u `/soukromi` na hlavním webu). */
.privacy{max-width:740px;margin-inline:auto}
.privacy-intro{color:var(--muted);font-size:17px;line-height:1.7}
.privacy-updated{margin-top:10px;color:var(--muted);font-size:15px}
.privacy-sec{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.privacy-sec h2{font-size:19px;font-weight:700;margin-bottom:8px}
.privacy-sec p{color:var(--muted);font-size:16.5px;line-height:1.7}

/* ── velké bloky metod (co-delame) ──────────────────────────────────── */
.method{
  display:grid;grid-template-columns:5fr 7fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.method.flip .method-txt{order:2}
.method.flip .panel{order:1}
.method-txt h2{margin-bottom:14px}
.method-txt p{color:var(--muted);font-size:17.5px;max-width:30em}
.method-kicker{
  display:block;font-weight:800;font-size:16px;color:var(--accent);
  margin-bottom:12px;font-variant-numeric:tabular-nums;
}

/* panel = velká světlá ukázka, žádné dekorace navíc */
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 24px 56px -32px rgb(11 18 32 / .18);
  padding:clamp(24px,3vw,40px);
  min-width:0;
}

/* Externí: otázka + žebříček */
.q-label{font-size:15px;color:var(--muted);font-weight:600}
.q-text{font-size:clamp(19px,2vw,23px);font-weight:800;margin-top:6px}
.rank{margin-top:22px}
.rank-row{
  display:flex;align-items:center;gap:14px;
  padding:15px 14px;border-radius:10px;
  font-size:17.5px;font-weight:600;
}
.rank-row + .rank-row{margin-top:6px}
.rank-row em{
  font-style:normal;font-weight:700;color:var(--muted);
  width:1.4em;flex-shrink:0;font-variant-numeric:tabular-nums;
}
.rank-row.you{background:var(--accent-soft);color:var(--accent)}
.rank-row.you em{color:var(--accent)}

/* Interní: skóre + kontrolní řádky */
.score{display:flex;align-items:baseline;gap:8px}
.score strong{font-size:clamp(2.6rem,4vw,3.6rem);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.score span{font-size:19px;font-weight:700;color:var(--muted)}
.score-bar{
  height:10px;border-radius:99px;background:var(--line);
  margin-top:18px;overflow:hidden;
}
.score-bar i{display:block;height:100%;width:61%;border-radius:99px;background:var(--accent)}
.check{margin-top:10px}
.check-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-top:1px solid var(--line);
  font-size:16.5px;font-weight:600;
}
.check-row:first-child{border-top:0;margin-top:8px}
.check-row b{font-weight:700;flex-shrink:0}
.st-neg{color:var(--neg)}
.st-mid{color:var(--sand)}
.st-pos{color:var(--pos)}

/* Simulace: dva návrhy, pruhy */
.sim-row{padding:16px 0}
.sim-row + .sim-row{border-top:1px solid var(--line)}
.sim-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sim-top span{font-size:17.5px;font-weight:700}
.sim-top strong{font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:800;font-variant-numeric:tabular-nums}
.sim-bar{height:10px;border-radius:99px;background:var(--line);margin-top:12px;overflow:hidden}
.sim-bar i{display:block;height:100%;border-radius:99px}
.sim-row.win .sim-bar i{background:var(--accent)}
.sim-row:not(.win) .sim-bar i{background:#c3c9d4}
.sim-row:not(.win) .sim-top{color:var(--muted)}
.sim-note{margin-top:18px;font-size:16px;color:var(--muted);font-weight:500}

.tag{
  font-size:13.5px;font-weight:800;color:var(--sand);
  border:1px solid currentColor;border-radius:99px;
  padding:2.5px 10px;line-height:1.4;vertical-align:4px;
  margin-left:10px;white-space:nowrap;
}

/* ── teaser na homepage ─────────────────────────────────────────────── */
.teaser{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(28px,4vw,48px)}
.teaser a{
  display:block;min-width:0;text-decoration:none;
  border-top:2px solid var(--ink);
  padding:22px 0 26px;
  transition:border-color .15s;
}
.teaser a:hover{border-top-color:var(--accent)}
.teaser a:hover h3{color:var(--accent)}
.teaser h3{font-size:19px;font-weight:800;transition:color .15s}
.teaser p{margin-top:8px;color:var(--muted);font-size:16.5px}
.teaser-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px 32px;margin-bottom:clamp(36px,5vw,52px);
}

/* ── poctivě ────────────────────────────────────────────────────────── */
.honest-in{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,64px);align-items:start;
}
.honest-in p{color:var(--muted);font-size:17.5px;max-width:32em}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding-block:36px}
.foot-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 28px;
}
.foot-top img{height:38px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 8px}
/* .foot-links má odkazy i tlačítko „Cookies" (znovu otevře lištu) —
   sdílený vzhled, tlačítko potřebuje reset defaultního stylu prohlížeče */
.foot-links a,.foot-links button{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
  color:var(--muted);font-size:16px;text-decoration:none;
  background:none;border:0;font:inherit;cursor:pointer;
}
.foot-links a:hover,.foot-links button:hover{color:var(--ink)}
.foot-legal{margin-top:10px;color:var(--muted);font-size:15px}

/* ── lišta se souhlasem ─────────────────────────────────────────────── */
.cookie-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:60;
  display:none;padding:14px;
}
.cookie-bar.is-open{display:flex}
.cookie-bar-in{
  margin-inline:auto;max-width:1120px;width:100%;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 40px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px -24px rgb(11 18 32/.22);
  padding:20px 24px;
}
.cookie-bar p{flex:1 1 320px;min-width:0;font-size:16px;line-height:1.55;color:var(--muted)}
.cookie-bar p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.cookie-bar p a:hover{text-decoration-color:var(--ink)}
.cookie-bar-actions{display:flex;gap:10px;flex:0 0 auto;width:100%}
@media (min-width:560px){.cookie-bar-actions{width:auto}}
.cookie-bar-actions button{
  flex:1;min-height:44px;padding:0 20px;border-radius:99px;
  font:600 15.5px/1 "Manrope",sans-serif;white-space:nowrap;
  transition:background-color .15s,border-color .15s;
}
.cookie-decline{background:#fff;border:1px solid #c9ceda;color:var(--ink)}
.cookie-decline:hover{border-color:var(--ink)}
.cookie-accept{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.cookie-accept:hover{background:var(--accent-down)}

/* ── reveal ─────────────────────────────────────────────────────────── */
.reveal{opacity:0;translate:0 16px;transition:opacity .55s ease,translate .55s ease}
.reveal.in{opacity:1;translate:0 0}

/* ── responsivita ───────────────────────────────────────────────────── */
@media (max-width:880px){
  .method{grid-template-columns:1fr}
  .method.flip .method-txt{order:1}
  .method.flip .panel{order:2}
  .teaser{grid-template-columns:1fr}
  .honest-in{grid-template-columns:1fr}
}
@media (max-width:620px){
  /* ⚠️ „Co děláme" zůstává v liště i na mobilu. Dřív se tu skrývalo
     (`display:none`) a na tu stránku se z telefonu nedalo dostat jinak
     než přes tlačítko v obsahu. Hamburger tu schválně není — u dvou
     položek by jen přidal klik navíc (stejné pravidlo jako hlavní web).

     Aby se obojí vešlo i na 320 px, je lišta na mobilu kompaktnější:
     nižší, menší logo a užší odsazení. Klikací plochy zůstávají 44 px. */
  .nav-in{height:64px;gap:10px}
  .nav-logo img{height:38px}
  .nav-links{gap:2px}
  .nav-links a:not(.btn){padding:0 10px;font-size:15px}
  .nav-links .btn{padding:0 16px;min-height:44px;font-size:15px}

  .cta-row .btn{flex:1 1 100%;min-height:52px}
}
@media (max-width:360px){
  .nav-logo img{height:34px}
  .nav-links a:not(.btn){padding:0 7px;font-size:14.5px}
  .nav-links .btn{padding:0 13px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;translate:0 0;transition:none}
  .btn,.nav{transition:none}
}

/* ── mřížka metod uvnitř sekcí (co-delame) ──────────────────────────── */
.sec-head-row{max-width:640px}
.sec-head-row p{margin-top:14px;color:var(--muted);font-size:17.5px}
.cards{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px;margin-top:clamp(32px,4vw,52px);
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,2.6vw,30px);min-width:0;
  box-shadow:0 18px 44px -32px rgb(11 18 32 / .16);
}
.card h3{font-size:18.5px;font-weight:800}
.card > p{margin-top:6px;color:var(--muted);font-size:16px;max-width:34em}
.viz{margin-top:20px}

/* otázky zákazníků */
.vz-q > div{
  background:var(--bg-soft);border-radius:9px;
  padding:11px 14px;font-size:15.5px;font-weight:600;
}
.vz-q > div + div{margin-top:8px}

/* vodorovné pruhy (viditelnost, co nás táhne) */
.vz-bar-row + .vz-bar-row{margin-top:14px}
.vz-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vz-bar-top span{font-size:15.5px;font-weight:600;color:var(--muted)}
.vz-bar-top strong{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.vz-bar{height:8px;border-radius:99px;background:var(--line);margin-top:7px;overflow:hidden}
.vz-bar i{display:block;height:100%;border-radius:99px;background:#c3c9d4}
.vz-bar-row.you .vz-bar i{background:var(--accent)}
.vz-bar-row.you .vz-bar-top span{color:var(--accent);font-weight:700}
.vz-bar-row.you .vz-bar-top strong{color:var(--accent)}

/* počty s tečkou (dohledatelnost, zabudované info) */
.vz-count{display:flex;align-items:baseline;gap:12px;padding:11px 0}
.vz-count + .vz-count{border-top:1px solid var(--line)}
.vz-count i{width:10px;height:10px;border-radius:99px;flex-shrink:0;align-self:center}
.vz-count strong{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;min-width:1.6em}
.vz-count span{font-size:15.5px;font-weight:600;color:var(--muted)}
.dot-pos{background:var(--pos)}
.dot-neu{background:#c3c9d4}
.dot-neg{background:var(--neg)}
.dot-sand{background:var(--sand)}

/* dělený pruh sentimentu */
.vz-strip{display:flex;height:10px;border-radius:99px;overflow:hidden}
.vz-strip i{height:100%}
.vz-strip .s-neg{background:var(--neg)}
.vz-strip .s-neu{background:#c3c9d4}
.vz-strip .s-pos{background:var(--pos)}
.vz-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.vz-legend span{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--muted)}
.vz-legend i{width:9px;height:9px;border-radius:99px}

/* seznam domén (krajina zdrojů) */
.vz-dom{display:flex;align-items:center;gap:12px;padding:10.5px 0;font-size:15.5px;font-weight:600}
.vz-dom + .vz-dom{border-top:1px solid var(--line)}
.vz-dom i{width:9px;height:9px;border-radius:99px;flex-shrink:0}
.vz-dom span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.vz-dom strong{font-weight:800;font-variant-numeric:tabular-nums}

/* štítky témat */
.vz-chips{display:flex;flex-wrap:wrap;gap:8px}
.vz-chips span{
  border:1px solid currentColor;border-radius:99px;
  padding:5px 13px;font-size:15px;font-weight:700;line-height:1.4;
}
.ch-pos{color:var(--pos)}
.ch-neu{color:#7b8494}
.ch-neg{color:var(--neg)}

/* fan-out */
.vz-fan-q{font-size:16.5px;font-weight:800}
.vz-fan-sub{margin-top:12px;color:var(--muted);font-size:15.5px;font-weight:600}
.vz-fan-sub > div{padding:7px 0;display:flex;gap:10px}
.vz-fan-sub b{color:var(--accent);font-weight:800;flex-shrink:0}

/* akční plán */
.vz-step{display:flex;align-items:baseline;gap:14px;padding:12px 0}
.vz-step + .vz-step{border-top:1px solid var(--line)}
.vz-step b{color:var(--accent);font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0}
.vz-step span{font-size:15.5px;font-weight:600;min-width:0;flex:1}
.vz-step em{font-style:normal;font-size:14px;font-weight:700;color:var(--sand);flex-shrink:0;white-space:nowrap}

@media (max-width:880px){
  .cards{grid-template-columns:1fr}
}

/* ── metody po jedné, velké (finální podoba co-delame) ──────────────── */
.m-block{
  display:grid;grid-template-columns:5fr 7fr;
  gap:clamp(32px,5vw,72px);align-items:center;
  margin-top:clamp(56px,7vw,104px);
}
.m-block.flip .m-txt{order:2}
.m-block.flip .panel{order:1}
.m-txt h2,.m-txt h3{font-size:clamp(1.55rem,2.4vw,2.15rem);line-height:1.15;font-weight:800}
.m-txt p{margin-top:12px;color:var(--muted);font-size:17.5px;max-width:26em}

/* velké počty v panelech */
.vz-count strong{font-size:clamp(1.9rem,2.8vw,2.5rem)}
.vz-count{gap:16px;padding:15px 0}
.vz-count span{font-size:16.5px}

/* větší pruhy */
.vz-bar-row + .vz-bar-row{margin-top:18px}
.vz-bar-top span{font-size:16.5px}
.vz-bar-top strong{font-size:18px}
.vz-bar{height:10px;margin-top:9px}

/* větší fronta otázek */
.vz-q > div{padding:14px 16px;font-size:16.5px}
.vz-q > div + div{margin-top:10px}

/* trend (výsledky měření, viditelnost v čase) */
.vz-trend-nums{display:flex;align-items:baseline;gap:12px}
.vz-trend-nums strong{font-size:clamp(2.1rem,3.2vw,2.9rem);font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
.vz-trend-nums span{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.vz-trend svg{display:block;width:100%;height:auto;margin-top:18px}

/* bodový graf (krajiny) — jen od 640 px, na mobilu ho střídá seznam */
.scatter{position:relative;height:300px}
.scatter-x{position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line)}
.scatter-y{position:absolute;inset-block:0;left:50%;width:1px;background:var(--line)}
.sc-dot{position:absolute;translate:-50% -50%;border-radius:99px;opacity:.9}
.sc-lab{
  position:absolute;translate:-50% 10px;
  font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap;
}
.scatter-cap{display:flex;justify-content:space-between;margin-top:16px;font-size:15.5px;font-weight:700}
.scatter-cap .cap-neg{color:var(--neg)}
.scatter-cap .cap-pos{color:var(--pos)}
.only-m{display:none}
@media (max-width:640px){
  .scatter,.scatter-cap{display:none}
  .only-m{display:block}
  /* ⚠️ `.only-m{display:block}` je v media query, takže přebíjí `.vz-chips
     {display:flex}` deklarovanou výš — štítky pak přestaly být flex položky,
     `gap` neplatil a řádky se o 5 px překrývaly. Vrátit flex zpět musí
     pravidlo s vyšší specificitou, ne pořadím. */
  .only-m.vz-chips{display:flex}
}

/* větší fan-out a kroky */
.vz-fan-q{font-size:18px}
.vz-fan-sub{font-size:16.5px}
.vz-fan-sub > div{padding:9px 0}
.vz-step{padding:15px 0}
.vz-step span{font-size:16.5px}
.vz-step b{font-size:17px}

/* dělený pruh větší */
.vz-strip{height:12px}
.vz-legend{margin-top:16px}
.vz-legend span{font-size:15.5px}

@media (max-width:880px){
  .m-block{grid-template-columns:1fr;gap:24px}
  .m-block.flip .m-txt{order:1}
  .m-block.flip .panel{order:2}
}

/* ── waffle (dohledatelnost): 1 čtvereček = 1 otázka ────────────────── */
.waffle{display:grid;grid-template-columns:repeat(11,1fr);gap:7px}
.waffle i{display:block;aspect-ratio:1;border-radius:7px}
.wf-pos{background:var(--pos)}
.wf-mid{background:var(--sand)}
.wf-neg{background:var(--neg)}
.waffle-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px}
.waffle-legend span{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;color:var(--muted)}
.waffle-legend b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.waffle-legend i{width:11px;height:11px;border-radius:4px}

/* ── tabulka sentimentu: zdroj + štítek ─────────────────────────────── */
.senti-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14.5px 0;font-size:16.5px;font-weight:600;
}
.senti-row + .senti-row{border-top:1px solid var(--line)}
.senti-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.pill{
  flex-shrink:0;border-radius:99px;padding:5px 14px;
  font-size:14.5px;font-weight:700;line-height:1.4;
  font-style:normal; /* pill je <em>, bez tohohle by byl kurzívou */
}
.pill-pos{background:#e7f4ec;color:var(--pos)}
.pill-neu{background:#eef0f4;color:#5b6472}
.pill-neg{background:#fbeae8;color:var(--neg)}

/* ── celoširoký blok pro krajiny (graf je dlouhý, ne čtverec) ───────── */
.m-full{margin-top:clamp(56px,7vw,104px)}
.m-full .m-txt{max-width:640px}
.m-full .panel{margin-top:clamp(24px,3vw,36px)}
.m-full .scatter{height:340px}
.axis-legend{
  display:flex;flex-wrap:wrap;gap:8px 28px;
  margin-top:14px;font-size:15px;font-weight:600;color:var(--muted);
}

/* catchphrase pod studií */
.stat-catch{
  margin-top:clamp(48px,6vw,72px);
  font-size:clamp(1.3rem,2.3vw,1.75rem);
  font-weight:800;line-height:1.2;text-wrap:balance;
}

/* ── odpověď AI uvnitř sekce se studií ──────────────────────────────── */
.answer{
  display:grid;grid-template-columns:5fr 6fr;
  gap:clamp(28px,5vw,72px);align-items:center;
  margin-top:clamp(56px,7vw,88px);
  text-align:left;
}
.answer-txt h3{
  font-size:clamp(1.35rem,2.3vw,1.85rem);
  line-height:1.25;font-weight:800;text-wrap:balance;max-width:16em;
}
.answer-txt p{margin-top:12px;color:var(--muted);font-size:18px;font-weight:600}
.ai-answer{margin-top:16px;font-size:17.5px;line-height:1.75;color:var(--ink)}
.hl{
  background:var(--accent-soft);color:var(--accent);
  border-radius:6px;padding:1.5px 7px;font-weight:700;white-space:nowrap;
}
@media (max-width:880px){
  .answer{grid-template-columns:1fr;gap:24px}
}

/* ── přepínač záložek (co-delame) ───────────────────────────────────── */
.tabs{
  display:flex;gap:5px;width:max-content;max-width:100%;
  margin:clamp(28px,4vw,44px) auto 0;
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:99px;padding:5px;
}
.tab{
  min-height:58px;padding:0 30px;border:0;border-radius:99px;
  background:none;cursor:pointer;
  font:700 19px/1 "Manrope",sans-serif;color:var(--muted);
  transition:color .15s;white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.is-on{
  background:#fff;color:var(--ink);
  box-shadow:0 1px 8px rgb(11 18 32 / .08);
}
.tab-sec{display:none}
.tab-sec.is-on{display:block}
@media (max-width:480px){
  .tab{padding:0 14px;font-size:15.5px}
}

/* jednoosý bublinový graf (sentiment zdrojů) — celoširoký, jen osa x */
.scatter-1d{height:260px}
.scatter-1d .scatter-y{display:none}

/* piktogram 6 z 10 (jediný vizuál sekce se studií) */
.picto{
  display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(8px,1.2vw,14px);
  max-width:760px;margin:clamp(48px,6vw,76px) auto 0;
}
.picto i{display:block;aspect-ratio:1;border-radius:12px;background:#e4e7ed}
.picto i.on{background:var(--accent)}
@media (max-width:560px){
  .picto{grid-template-columns:repeat(5,1fr);max-width:320px}
}

/* Simulace: věta, dva podřazené přepínače, pod nimi jedna věta. Vše na střed,
   žádný nadpis, žádné grafy. */
.sim-sec{text-align:center}
.sim-intro{
  max-width:26ch;margin-inline:auto;
  font-size:clamp(17px,1.5vw,19px);color:var(--muted);font-weight:600;
  text-wrap:balance;
}
.subtabs{
  display:flex;gap:5px;width:max-content;max-width:100%;
  margin:clamp(24px,3vw,36px) auto 0;
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:99px;padding:5px;
}
.sim-line{
  display:none;
  margin:clamp(44px,6vw,72px) auto 0;max-width:22ch;
  font-size:clamp(1.5rem,2.8vw,2.2rem);
  font-weight:800;line-height:1.25;text-wrap:balance;
}
.sim-line.is-on{display:block}

/* Simulace nemá nadpis sekce, takže horní odsazení sekce je zbytečné —
   přepínač záložek je hned nad ní a vznikala velká díra. */
.sim-sec{padding-top:clamp(28px,4vw,44px)}
.sim-sec .sim-intro{margin-top:0}

/* ── homepage: závěrečné řádky (texty přesně z hlavního webu) ────────── */
.end-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 40px;border-top:1px solid var(--line);padding-top:clamp(32px,4vw,48px);
}
.end-row h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.end-row p{margin-top:10px;color:var(--muted);font-size:18px}

/* ── kontakt ────────────────────────────────────────────────────────── */
.contact-page{padding-top:clamp(56px,8vw,104px)}
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact-in h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
.contact-mail{
  display:inline-block;font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:800;
  text-decoration:none;border-bottom:2px solid var(--accent);color:var(--accent);
  padding-bottom:3px;
}
.contact-mail:hover{color:var(--accent-down);border-color:var(--accent-down)}
.company{margin-top:clamp(36px,5vw,56px)}
.company > div{
  display:flex;flex-wrap:wrap;gap:6px 24px;
  padding:15px 0;border-top:1px solid var(--line);
}
.company dt{width:120px;flex:none;color:var(--muted);font-size:16.5px;font-weight:600}
.company dd{font-size:16.5px;font-weight:600}
@media (max-width:880px){
  .contact-in{grid-template-columns:1fr}
}

/* ── hero: obrázek UI výš, ať je nahoře vidět víc dashboardu ─────────── */
.hero{padding-top:clamp(28px,3.5vw,48px)}
.hero .cta-row{margin-top:clamp(26px,3vw,36px)}
/* posunuto níž schválně: na 900px výšce má být vidět nanejvýš po sekci
   Sentiment zdrojů (prstenec, červená/béžová/zelená), ne celý dashboard */
.hero .shot{margin-top:clamp(20px,5.5vw,80px)}

/* nad 640 px obrázek úmyslně přesahuje `.wrap` (1120 px) — na velkém
   monitoru byl v úzkém sloupci malý. Vlastní šířka až 1600 px,
   vycentrovaná zápornými marginy nezávisle na textovém sloupci nahoře. */
@media (min-width:641px){
  .hero .shot{
    width:min(90vw,1550px);
    margin-left:calc(50% - min(45vw,775px));
    margin-right:calc(50% - min(45vw,775px));
  }
}

/* ── MOBILNÍ HERO: stejná kompozice `ui.webp` jako na desktopu, jen
   zmenšená na šířku sloupce (pokyn majitele 2026-08-17 — „úplně stejně,
   akorát zmenšit"). Kompozice má průhledné pozadí a vlastní stíny,
   žádný rámeček. CSS kreslené rámy zařízení (`.devices`) tu krátce byly
   a majitel je vyměnil zpět za reálnou fotku; ukázka zůstává
   v /demo-mobil/. */
@media (max-width:640px){
  .hero .shot{margin-top:clamp(26px,7vw,44px)}
}

/* hlavní přepínač je velký, podřazený u Simulace zůstává menší */
.subtabs .tab{min-height:46px;padding:0 20px;font-size:16.5px;font-weight:600}

/* ⚠️ Přepínač záložek: tři dlouhé popisky se na mobil nevejdou a třetí
   („Simulace") přetékal mimo pilulku, takže byl nečitelný a nedostupný.
   Stejné řešení jako hlavní web: krátké varianty popisků. */
.tab .t-short{display:none}
@media (max-width:560px){
  .tabs .tab{padding:0 14px;font-size:15.5px;min-height:52px}
  .tab .t-full{display:none}
  .tab .t-short{display:inline}
}

/* první blok metody navazuje na přepínač, sekce už nemá nadpis */
.tab-sec > .wrap > .m-block:first-child,
.tab-sec > .wrap > .m-full:first-child{margin-top:0}
.tab-sec{padding-top:clamp(30px,4vw,52px)}

/* ── Sentiment zdrojů: stejný tvar jako hlavní web — vodorovná osa středem,
   svislá ryska uprostřed, popisky střídavě nad a pod ─────────────────── */
.scale{position:relative;height:200px;margin-top:26px}
.scale-x{position:absolute;inset-inline:0;top:50%;height:1px;background:var(--line)}
.scale-y{position:absolute;top:calc(50% - 15px);left:50%;width:1px;height:30px;background:#c9ceda}
.scale .sc-dot{
  position:absolute;top:50%;width:15px;height:15px;
  translate:-50% -50%;border-radius:99px;
}
.scale .sc-lab{
  position:absolute;left:0;translate:-50% 0;
  font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap;
}
.scale .sc-lab.below{top:calc(50% + 16px)}
.scale .sc-lab.above{top:calc(50% - 40px)}
@media (max-width:640px){
  .scale,.scatter-cap{display:none}
}

/* barvy stavů podle hlavního webu (svetlejsi vyplne, tmavsi text) */
.dot-pos{background:#77c98d}
.dot-neu{background:#c2a48f}
.dot-neg{background:#e07862}
.vz-strip .s-neu{background:#c2a48f}
.wf-pos{background:#77c98d}
.wf-mid{background:#c2a48f}
.wf-neg{background:#e07862}

/* Priority barevně podle závažnosti. ⚠️ Musí být `.vz-step em.pr-*` —
   `.vz-step em` má vyšší specificitu a barvu by přebilo zpět na béžovou.
   Je to ta samá past jako u `.stat p.stat-big`. */
.vz-step em.pr-hi{color:#c0492f}
.vz-step em.pr-mid{color:#a5764f}
.vz-step em.pr-low{color:#6b7482}

/* závěrečné sekce homepage nemusí být tak vysoké */
.end-row{padding-top:clamp(28px,3vw,40px)}
.sec:has(.end-row){padding-block:clamp(44px,5vw,72px)}

/* kontakt: patička drží spodek okna, ať linka nesedí v půlce stránky */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* ══════════════════════════════════════════════════════════════════════
   MOBILNÍ DOLADĚNÍ (≤640 px)

   Jeden blok na konci souboru schválně: pravidla tu musí přebít desktopové
   hodnoty deklarované výš, a držet je pohromadě je čitelnější než je
   rozsypat po celém souboru. Vzniklo z měřeného auditu (přetečení, velikost
   klikacích ploch, mrtvé mezery), ne z odhadu.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){

  /* ── rytmus stránky ────────────────────────────────────────────────
     Desktopové odsazení (72 px + 72 px) dělalo mezi sekcemi na mobilu
     přes půl obrazovky prázdna — člověk scrolloval bílým polem. */
  .sec{padding-block:clamp(48px,11vw,68px)}
  .hero{padding-top:22px;padding-bottom:clamp(40px,9vw,56px)}
  .page-head{padding-top:clamp(30px,7vw,44px)}
  .m-block,.m-full{margin-top:clamp(44px,10vw,64px)}
  .stat{padding-block:clamp(52px,12vw,72px)}
  .stat-catch{margin-top:clamp(34px,8vw,48px)}
  .picto{margin-top:clamp(32px,8vw,48px)}

  /* ── panely: víc obsahu, míň rámu ──────────────────────────────────
     Na 390 px ukrajovalo odsazení panelu z každé strany 24 px, tedy 14 %
     šířky. Grafy uvnitř tím ztrácely místo, kde se dá něco přečíst. */
  .panel{padding:20px 16px;border-radius:14px}
  .m-full .panel,.m-block .panel{margin-top:18px}

  /* ── typografie ────────────────────────────────────────────────────
     Nadpis metody byl skoro stejně velký jako h1 stránky; hierarchie se
     tím ztrácela. Odstavce pod ním se lámaly na moc krátké řádky. */
  .m-txt h2,.m-txt h3{font-size:clamp(1.42rem,6.2vw,1.75rem);line-height:1.2}
  .m-txt p{font-size:16.5px;margin-top:9px;max-width:none}
  .page-head h1{font-size:clamp(2.1rem,9.5vw,2.9rem)}

  /* ── závěrečné řádky homepage ──────────────────────────────────────
     `.end-row` je flex se `space-between`; na mobilu se zalomil a mezi
     nadpisem a tlačítkem zůstala díra. Tlačítko přes celou šířku je na
     dotyk i přirozenější cíl.
     ⚠️ Vlasová linka: na desktopu ji nese `.end-row` (border-top), ale
     na mobilu tím vznikaly DVĚ linky nad „Co děláme" (hrana šedé sekce
     + border o pár px níž) a prázdný bílý pruh mezi nimi. Na mobilu
     linku nese až hrana mezi oběma závěrečnými sekcemi. */
  .end-row{gap:14px;padding-top:0;border-top:0}
  .sec:has(.end-row){padding-block:34px}
  .sec:has(.end-row)+.sec:has(.end-row){border-top:1px solid var(--line)}
  .end-row .btn{width:100%}
  .end-row h2{font-size:clamp(1.7rem,7.5vw,2.1rem)}
  .end-row p{font-size:16.5px;margin-top:8px}

  /* ── vizualizace v panelech ────────────────────────────────────────
     `min-width:1.6em` na velkém čísle vytvářelo mezi číslem a popiskem
     prázdný sloupec přes půl panelu (9 ......... pozitivních zmínek). */
  .vz-count{gap:12px;padding:13px 0}
  .vz-count strong{min-width:0;font-size:clamp(1.7rem,7vw,2.1rem)}
  .vz-count span{font-size:15.5px;line-height:1.35}

  /* ⚠️ Legenda os musí zmizet spolu s grafem, který popisuje — jinak na
     mobilu zůstane věta „osa x = sentiment, osa y = autorita…" nad
     seznamem, kde žádné osy nejsou.
     Skrytí patří sem, na konec souboru: `.axis-legend{display:flex}` je
     deklarovaná až ZA blokem `@media` u `.only-m`, takže tam by ho
     stejná specificita nepřebila. Ta samá past jako u `.vz-chips`. */
  .axis-legend{display:none}

  /* seznam domén: doména se nesmí uřezat, hodnota musí zůstat vpravo */
  .vz-dom{gap:10px;font-size:15.5px;padding:12px 0}
  .vz-dom strong{flex-shrink:0}

  /* štítky témat: menší, ať se vejde víc na řádek bez osamělého zbytku */
  .vz-chips{gap:7px}
  .vz-chips span{padding:5px 11px;font-size:14.5px}

  /* waffle (dohledatelnost): pevných 11 sloupců drží mřížku 2×11 = 22 */
  .waffle{gap:6px}
  .waffle-legend{gap:7px 16px;font-size:15px}

  /* kontrolní řádky čitelnosti: dvě úrovně pod sebou místo natěsno vedle */
  .check-row{gap:12px;font-size:16px;padding:13px 0}

  /* akční plán: štítek priority pod text, ne do úzkého sloupce vedle */
  .vz-step{gap:10px}
  .vz-step span{font-size:16px}

  /* ── klikací plochy ────────────────────────────────────────────────
     E-mail na kontaktu měl 39 px výšky, tedy pod hranicí 44 px. */
  .contact-mail{
    display:inline-flex;align-items:center;min-height:48px;
    font-size:clamp(1.25rem,6vw,1.6rem);
  }

  /* ── firemní údaje na kontaktu ─────────────────────────────────────
     `dt` mělo pevných 120 px a dlouhá adresa se za něj nevešla, takže
     jeden řádek měl hodnotu vedle štítku a druhý pod ním — rozhozená
     sazba. Na mobilu je štítek vždy nad hodnotou, konzistentně. */
  .company > div{display:block;padding:13px 0}
  .company dt{width:auto;font-size:15px;margin-bottom:3px}
  .company dd{font-size:17px}

  /* ── patička ───────────────────────────────────────────────────────
     Čtyři odkazy se na 390 px nevejdou na řádek a „Cookies" padalo samo
     na druhý — nevyvážené. Na mobilu je patička sloupec: logo nahoře,
     pod ním odkazy v mřížce 2×2 zarovnané vlevo (žádný sirotek). */
  footer{padding-block:28px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-top img{height:32px}
  .foot-links{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:0 34px}
  .foot-links a,.foot-links button{font-size:15.5px;padding:0;justify-content:flex-start}
  .foot-legal{font-size:14.5px;margin-top:10px}

  /* ── zásady soukromí ───────────────────────────────────────────────
     Číslované sekce měly na mobilu stejné odsazení jako na desktopu,
     takže stránka byla přes 4 500 px dlouhá. */
  .privacy-sec{margin-top:22px;padding-top:22px}
  .privacy-sec h2{font-size:17.5px}
  .privacy-sec p,.privacy-intro{font-size:16px;line-height:1.65}

  /* ── lišta se souhlasem ────────────────────────────────────────────
     Na úzkém displeji potřebuje být kompaktní, ať nezakryje půl obsahu. */
  .cookie-bar{padding:10px}
  .cookie-bar-in{padding:16px 18px;gap:14px;border-radius:14px}
  .cookie-bar p{font-size:15px;line-height:1.5;flex-basis:100%}
}

/* ── velmi úzké displeje (≤360 px) ──────────────────────────────────── */
@media (max-width:360px){
  .wrap{padding-inline:16px}
  .panel{padding:18px 14px}
  .tabs .tab{padding:0 11px;font-size:15px}
  .vz-chips span{padding:4px 10px;font-size:14px}
  .foot-links a,.foot-links button{font-size:15px;padding:0 6px}
}

/* ══════════════════════════════════════════════════════════════════════
   Kolejnice sekcí pro „Co děláme" ve variantách (agentury / pr / firmy).
   Jen doplněk k `styles.css` — barvy, fonty ani komponenty se nemění,
   tenhle soubor přidává pouze rozvržení se sloupcem sekcí vlevo.

   Záložky Externí/Interní/Simulace jsou ve variantách nahrazené jedním
   souvislým seznamem sekcí v pořadí, které zadal Petr. Kolejnice říká,
   ve které sekci člověk je, kolik jich má za sebou a kolik zbývá.
   ══════════════════════════════════════════════════════════════════════ */

/* Mřížka nese celou stránku včetně titulku, takže je to jediná míra,
   která na stránce platí. Odstup je menší než dřív (64 → 52 px): kolejnice
   má krátké popisky, širší mezera z ní dělala prázdný pruh. */
/* ⚠️ Kolejnice sedí u LEVÉHO okraje okna, ne v centrovaném sloupci.
   Majitel ji chtěl „víc k levému rohu" — v centrovaném sloupci 1320 px
   začínala na širokém monitoru až 250 px od kraje a působila, že plave
   uprostřed prázdna. Mřížka je proto přes celou šířku s pevným odsazením
   od kraje; šířku drží jen sloupec s obsahem (`.cd-main`).
   Šířka obsahu 968 px (původně ~954; 1120 bylo moc). */
.cd-wrap{
  padding-inline:clamp(24px,3.2vw,56px);
  padding-top:clamp(40px,6vw,72px);
  display:grid;grid-template-columns:230px minmax(0,968px);
  /* ⚠️ Obsah sedí PEVNĚ od kolejnice, ne vycentrovaný ve zbytku: centrování
     ho na širokém monitoru poslalo na 535 px („moc vpravo"), nalepený na
     kolejnici byl na 338 („úplně doleva"). Tohle je mezi: 8 vw → ~426 px. */
  gap:clamp(48px,8vw,150px);
  align-items:start;
}

/* ── kolejnice (desktop) ───────────────────────────────────────────── */
/* Bez titulku stránky (majitel ho nechal odstranit) začíná kolejnice na
   stejné výšce jako nadpis první sekce; `top` drží odstup od lišty, až se
   kolejnice přilepí. */
.rail{position:sticky;top:104px}
.rail-count{
  display:flex;align-items:baseline;gap:6px;
  font-weight:800;font-size:15px;color:var(--ink);
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:14px;
}
.rail-count span{font-weight:600;color:var(--muted)}

.rail ol{list-style:none;margin:0;padding:0;position:relative}
/* svislá dráha za položkami; `.rail-fill` je její projetá část */
.rail ol::before{
  content:"";position:absolute;left:9px;top:6px;bottom:6px;
  width:2px;background:var(--line);border-radius:2px;
}
.rail-fill{
  position:absolute;left:9px;top:6px;width:2px;height:0;
  background:var(--accent);border-radius:2px;
  transition:height .25s ease;
}
.rail li{position:relative}
.rail li a{
  display:flex;align-items:center;gap:12px;
  padding:6px 0;text-decoration:none;
  font-size:14.5px;font-weight:600;color:var(--muted);
  transition:color .18s;
}
/* tečka na dráze */
.rail li a::before{
  content:"";flex:none;width:8px;height:8px;margin-left:6px;
  border-radius:50%;background:var(--line);
  outline:3px solid #fff;
  transition:background .18s,transform .18s;
}
.rail li a:hover{color:var(--ink)}
.rail li.done a{color:var(--ink)}
.rail li.done a::before{background:var(--accent)}
.rail li.on a{color:var(--accent);font-weight:800}
.rail li.on a::before{background:var(--accent);transform:scale(1.5)}

/* ── obsah ─────────────────────────────────────────────────────────── */

/* Titulek stránky je první položkou sloupce s obsahem, ne samostatný
   vycentrovaný blok nad mřížkou — díky tomu má stránka jednu levou hranu
   (titulek · nadpisy sekcí · panely) a kolejnice k ní sedí. */
.cd-head{padding-bottom:clamp(26px,3.4vw,42px)}
.cd-head h1{text-align:left;margin:0}

.cd-sec{scroll-margin-top:96px;padding-block:clamp(40px,6vw,72px)}
.cd-sec:first-child{padding-top:0}

/* ⚠️ Blok si nese `margin-top` z původního webu, kde stál sám v sekci.
   Tady k němu přibývá ještě odsazení `.cd-sec`, takže mezi hranou sekce
   a nadpisem bylo přes 170 px a kolejnice vypadala, že se vznáší vysoko
   nad obsahem. Odsazení řídí sekce, první blok si svoje nechává jen
   tehdy, když v sekci není první. */
.cd-sec > .m-block:first-child,
.cd-sec > .m-full:first-child{margin-top:0}

/* ⚠️ `align-items:center` centruje text proti panelu. U vysokého panelu
   (akční plán, fronta otázek) tím nadpis sekce spadl POD horní hranu
   panelu — sekce začínala vizuálem a nadpis se objevil až v jeho půlce.
   Kolejnice přitom ukazuje na začátek sekce, takže se rozešly. */
.cd-sec .m-block{align-items:start}
.cd-sec+.cd-sec{border-top:1px solid var(--line)}
.cd-main{max-width:968px;width:100%}

/* bloky uvnitř sloupce už mají vlastní `.wrap` v původním webu — tady
   sedí přímo v mřížce, takže se jim šířka nesmí omezovat podruhé */
.cd-sec .m-block,.cd-sec .m-full{max-width:none}

/* obrázek přehledu: reálný snímek produktu, ne kreslená napodobenina */
/* Snímek produktu vyplní panel a kolem něj zůstane jen tenký rámeček.
   ⚠️ `.panel` má odsazení clamp(18px…28px) pro vizuály kreslené z divů;
   u obrázku z toho byl široký bílý pruh dokola. */
.cd-shot{width:100%;height:auto;display:block;border-radius:9px}
.cd-sec .panel:has(> .cd-shot){padding:7px}

/* ── mobil: z kolejnice je pruh pod lištou ─────────────────────────── */
@media (max-width:960px){
  .cd-wrap{grid-template-columns:1fr;gap:0}
  .rail{
    position:sticky;top:64px;z-index:20;
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    margin-inline:calc(clamp(20px,4vw,32px) * -1);
    padding:10px clamp(20px,4vw,32px) 0;
  }
  .rail-count{border:0;padding:0 0 8px;margin:0;font-size:14.5px}
  /* seznam sekcí se na mobilu roluje vodorovně, ať je vidět, co je dál */
  .rail ol{
    display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;
    padding-bottom:8px;
  }
  .rail ol::-webkit-scrollbar{display:none}
  .rail ol::before{display:none}
  .rail-fill{display:none}
  /* ⚠️ 44 px klikací plocha i ve vodorovném pruhu — položky měly 23 px
     a na dotyk se do nich dalo trefit jen taktak. */
  .rail li a{padding:0 2px;white-space:nowrap;font-size:14px;min-height:44px}
  .rail li a::before{display:none}
  .cd-sec{scroll-margin-top:132px;padding-block:36px}
}

/* Jedna věta pod nadpisem hera — jediné místo na homepage, které říká,
   pro koho je varianta určená. Zbytek stránky zůstává shodný s originálem. */
.hero-sub{
  margin-top:clamp(14px,2vw,20px);
  font-size:clamp(1.05rem,1.1vw + .85rem,1.35rem);
  font-weight:600;color:var(--muted);
  max-width:34ch;margin-inline:auto;text-wrap:balance;
}

/* ── FAQ ────────────────────────────────────────────────────────────
   Vráceno z původního webu (stránka „Otázky" byla smazaná, styly s ní).
   Nativní <details>, takže to funguje i bez JavaScriptu. */
.faq-list{max-width:760px;margin-inline:auto}
.faq{border-top:1px solid var(--line)}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;min-height:44px;cursor:pointer;
  font-size:17.5px;font-weight:600;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex-shrink:0;
  font-size:22px;font-weight:500;color:var(--muted);
  transition:rotate .2s;
}
.faq[open] summary::after{rotate:45deg}
.faq div{padding:0 0 22px;color:var(--muted);font-size:16.5px;max-width:38em}

.sec-soft{background:var(--bg-soft);border-block:1px solid var(--line)}
.contact{text-align:center}
.contact p{margin:16px auto 0;color:var(--muted);max-width:30em}
.contact .btn{margin-top:32px}

/* Rozcestníkové stránky hlavního webu (Firmy / Agentury / PR):
   nadpis, jedna dvě věty a tlačítka. Menší horní odsazení, jinak mezi
   nadpisem a větou zůstane přes 150 px prázdna. */
.sec-router{padding-top:clamp(4px,1vw,12px)}
.sec-router .cta-row{margin-top:clamp(24px,3vw,36px)}

/* ══ GridMotion: nakloněná mřížka krabiček s logy ═════════════════════
   Nastavení pohybu je v grid.js (ROWS, COLS, ANGLE, MAX_MOVE, DRIFT).
   Tady jen vzhled krabiček a zastínění pod textem. */
.gm-hero{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;background:#0a1636}
.gm{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.gm-grid{
  width:180vw;height:170vh;flex:none;
  display:grid;grid-template-rows:repeat(var(--rows,6),1fr);gap:var(--gap,.9vw);
  transform:rotate(var(--angle,-15deg));transform-origin:center;will-change:transform;
}
.gm-row{display:grid;grid-template-columns:repeat(var(--cols,9),1fr);gap:var(--gap,.9vw);will-change:transform}
.gm-box{
  border-radius:14px;background:var(--box,#153277);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 50px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.gm-box svg{width:36%;height:36%;max-width:72px;opacity:.94}
/* zastínění: uprostřed tmavší, ať je text čitelný, po krajích krabičky vidět */
.gm-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(55% 50% at 50% 52%, rgba(10,22,54,.86) 0%, rgba(10,22,54,.60) 55%, rgba(10,22,54,.18) 100%),
    linear-gradient(180deg, rgba(10,22,54,.9) 0%, transparent 18%, transparent 84%, #0a1636 100%);
}
.gm-hero .ac-content{position:relative;z-index:2;text-align:center;width:100%}
@media (max-width:640px){ .gm-box svg{width:44%;height:44%} }

/* slogan na dvou řádcích (v case.css je to vázané na .ac-hero, tady chybělo) */
.gm-hero h1{font-weight:600;line-height:1.02;letter-spacing:0;max-width:none;font-size:clamp(2.4rem,5.6vw,5.1rem)}
.gm-hero h1 .thin{display:block;font-weight:300;color:rgba(255,255,255,.86)}
.gm-hero h1 .bold{display:block;font-weight:600;color:#fff}


/* ══ Světlá béžová varianta podle loga AuraCont ═══════════════════════
   Pozadí i krabičky v odstínech pískové/béžové, text tmavý, loga modelů
   v původních barvách značek (na světlé jsou čitelná bez úprav). */
html,body.mosaic-page{background:#f9f6f1}
.gm-hero{background:#f9f6f1}
.gm-box{
  background:var(--box,#f9f5f0);
  border:1px solid rgba(90,60,40,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 14px 34px rgba(90,60,40,.10);
}
.gm-box svg{opacity:1}
/* zastínění pod textem: světlý závoj v barvě pozadí, nahoře skoro bílý
   pruh, ať je logo AuraCont čitelné jako na bílém ostrém webu */
.gm-shade{
  background:
    radial-gradient(55% 50% at 50% 52%, rgba(239,230,220,.86) 0%, rgba(239,230,220,.6) 55%, rgba(239,230,220,.15) 100%),
    linear-gradient(180deg, rgba(250,246,241,.92) 0%, transparent 20%, transparent 84%, #efe6dc 100%);
}
.gm-hero h1 .thin{color:rgba(20,18,16,.72)}
.gm-hero h1 .bold{color:#141210}
.gm-hero .ac-lede{color:#5b4f45}
.gm-hero .ac-btn{background:#105df0;color:#fff;box-shadow:0 10px 30px rgba(16,93,240,.28)}
.gm-hero .ac-btn:hover{box-shadow:0 14px 34px rgba(16,93,240,.36)}
.gm-hero .ac-link{color:#141210}
.mosaic-page .nav-links a:not(.btn){color:#5b4f45}
.mosaic-page .nav-links a:not(.btn):hover{color:#141210}
/* lišta na světlé stránce: průhledná, pod ní je skoro bílý pruh ze zastínění */
.mosaic-page .nav{background:transparent;border-bottom:0}

/* ══ Celá stránka v béžové ═══════════════════════════════════════════
   case.css nastavuje tmavý motiv přes proměnné na :root; tady je
   přebíjíme na body, takže je zdědí všechno uvnitř (řádky rozcestníku,
   závěr, patička, lišta se souhlasem). */
body.mosaic-page{
  --bg:#f9f6f1;--ink:#141210;--muted:#5b4f45;
  --line:rgba(90,60,40,.16);--accent:#105df0;--sand:#b79785;
  background:#f9f6f1;color:#141210;
}
/* lišta: béžová se sklem, tmavé odkazy */
.mosaic-page .nav{background:rgba(249,246,241,.84);backdrop-filter:blur(10px);border-bottom:1px solid rgba(90,60,40,.10)}
/* tlačítka a odkazy ve zbytku stránky */
.mosaic-page .btn-ghost{background:transparent;border-color:rgba(20,18,16,.22);color:#141210}
.mosaic-page .btn-ghost:hover{background:rgba(20,18,16,.05);border-color:rgba(20,18,16,.4)}
.mosaic-page .end-row h2,.mosaic-page .cs-konec h2{color:#141210}
.mosaic-page .cs-konec p{color:#5b4f45}
.mosaic-page .cs-konec{background:#f2ece5;border-top:1px solid rgba(90,60,40,.12)}
/* patička a lišta se souhlasem zpět do světla */
.mosaic-page footer{background:#f9f6f1;border-top:1px solid rgba(90,60,40,.14)}
.mosaic-page .foot-links a,.mosaic-page .foot-links button{color:#5b4f45}
.mosaic-page .foot-legal{color:#7a6c60}
.mosaic-page .cookie-bar-in{background:#faf6f1;border-color:rgba(90,60,40,.16);color:#141210}
.mosaic-page .cookie-decline{color:#141210;border-color:rgba(20,18,16,.25);background:transparent}

/* Čitelnost: první řádek sloganu byl šedý a tenký a loga pod ním
   prosvítala. Teď je v plné barvě textu (rozdíl řádků dělá jen váha
   řezu) a závoj za textem je hustší. */
.gm-hero h1 .thin{color:#141210;font-weight:400}
.gm-hero .ac-lede{color:#3d342d}
.gm-shade{
  background:
    radial-gradient(58% 54% at 50% 52%, rgba(249,246,241,.96) 0%, rgba(249,246,241,.8) 50%, rgba(249,246,241,.2) 100%),
    linear-gradient(180deg, rgba(253,252,250,.94) 0%, transparent 20%, transparent 56%,
      rgba(249,246,241,.55) 78%, rgba(249,246,241,.9) 91%, #f9f6f1 100%);
}

/* ⚠️ Závoj nabíhá odspodu už od 56 % výšky hera, ne až od 84 %.
   Statistika leží na 84–95 % (změřeno na čtyřech velikostech okna), takže
   při náběhu od 84 % padal její první řádek přesně tam, kde mozaika svítí
   naplno — a jak se krabičky s logy posouvaly, text se v nich ztrácel.
   Kontrast byl přitom v pořádku (5,7:1); rušila kresba log za písmeny,
   takže se to muselo měřit jako NEKLID pozadí, ne jako kontrast.

   Statistika u spodní hrany hera. Na béžové je text tmavý, ne bílý jako
   na modré verzi hlavního webu. Selektor je o třídu delší, aby přebil
   `.gm-hero > :not(.gm)` v případě, že by se sem někdy dostalo pravidlo
   nastavující potomkům `position:relative` (past z hlavního webu). */
.mosaic-page .gm-hero .ac-stat{
  position:absolute;left:0;right:0;bottom:clamp(28px,5vh,56px);z-index:2;
  margin:0 auto;padding-inline:clamp(20px,4vw,32px);
  max-width:none;text-align:center;
  /* ⚠️ Velikost je laděná tak, aby věta držela JEDEN řádek. Změřeno: při
     2,7 vw zabere na 1280 px 890 px z 1216 dostupných, na 1440 px 1006
     z 1376. Kdo to bude zvětšovat, ať si to přeměří — nad ~3 vw se to
     na 1280 px zalomí. Na mobilu se zalomí tak jako tak, tam je to v pořádku. */
  font-size:clamp(1.12rem,2.7vw,3rem);
  line-height:1.3;font-weight:700;color:#141210;text-wrap:balance;
}
.mosaic-page .gm-hero .ac-stat em{font-style:normal;color:#105df0}
.mosaic-page .gm-hero .ac-stat span{
  display:block;margin-top:clamp(9px,1vw,14px);
  font-size:clamp(14.5px,.85vw,17px);font-weight:600;color:#6b5f53;
}
@media (max-height:680px){
  .mosaic-page .gm-hero .ac-stat{position:static;margin-top:clamp(26px,4vh,40px)}
}

/* ── FAQ na béžové ─────────────────────────────────────────────────── */
.faq-sec h2{
  font-size:clamp(1.7rem,2.6vw + .5rem,2.5rem);font-weight:800;
  color:#141210;margin-bottom:clamp(22px,3vw,34px);
}
.mosaic-page .faq summary{color:#141210}
.mosaic-page .faq summary::after{color:#6b5f53}
.mosaic-page .faq div{color:#4a4038}
.mosaic-page .faq{border-top-color:rgba(90,60,40,.18)}
.mosaic-page .faq:last-child{border-bottom-color:rgba(90,60,40,.18)}
/* odrážky u „Co konkrétně zjistíte?" */
.mosaic-page .faq div ul{margin:0;padding-left:1.15em}
.mosaic-page .faq div li{margin-bottom:7px}
.mosaic-page .faq div li:last-child{margin-bottom:0}

/* ⚠️ Pět položek v liště (Firmy · Agentury · PR · Otázky · Kontakt) se na
   390 px do jedné řádky nevejde — přetékalo o 10 px. Hamburger na tomhle
   projektu nechceme, takže se odkazy na mobilu zalomí pod logo a dostanou
   celou šířku. Klikací plochy zůstávají 44 px. */
@media (max-width:640px){
  .mosaic-page .nav-in{flex-wrap:wrap;height:auto;padding-block:10px;row-gap:4px}
  .mosaic-page .nav-logo{flex:0 0 auto}
  .mosaic-page .nav-links{flex:1 0 100%;justify-content:space-between;gap:2px}
  .mosaic-page .nav-links a:not(.btn){padding:0 4px;font-size:14.5px}
  .mosaic-page .nav-links .btn{padding:0 14px;font-size:14.5px}
}
@media (max-width:360px){
  .mosaic-page .nav-logo img{height:32px}
  /* 14 px, ne 13,5 — po přejmenování „Otázky" na „FAQ" se pět položek
     vejde i s větším písmem. Ověřeno měřením přetečení na 360 i 320 px. */
  .mosaic-page .nav-links a:not(.btn){padding:0 2px;font-size:14px}
  .mosaic-page .nav-links .btn{padding:0 10px;font-size:14px}
}


/* ── společné pro podstránky (hlavička, závěr) ─────────────────────── */
.mosaic-page .page-head{padding-top:clamp(96px,13vh,150px);padding-bottom:clamp(20px,3vw,32px)}
.mosaic-page .page-head h1{
  font-size:clamp(2.2rem,3.6vw + .8rem,3.6rem);font-weight:800;
  line-height:1.06;color:#141210;
}
.mosaic-page .faq-sec{padding-top:0}
.mosaic-page .cs-konec h2{font-size:clamp(1.6rem,2.4vw + .5rem,2.4rem);color:#141210}
/* ⚠️ Odsazení tlačítka viselo na `.ac-btn`, jenže závěr používá `.btn`
   (tlačítko se šipkou jako ve zbytku stránky) — pravidlo se tedy vůbec
   neuplatnilo a nadpis, věta a tlačítko byly namačkané na sobě. */
.mosaic-page .cs-konec p{color:#5b4f45;margin-top:14px}
.mosaic-page .cs-konec .ac-btn,
.mosaic-page .cs-konec .btn{margin-top:clamp(26px,3.4vw,36px)}

/* ══ Základ tříd .ac-* ═════════════════════════════════════════════════
   ⚠️ Tyhle třídy byly původně jen v `case.css` (tmavý motiv). Když jsem
   ho z gridmotionu odebral, zůstala tlačítka jako obyčejný inline text
   a závěrečné sekce se rozsypaly. Základ je proto tady, aby byl
   gridmotion na `case.css` nezávislý; barevné odchylky pro béžovou jsou
   výš u `.gm-hero` a `.cs-konec`. */
.ac-content{position:relative;z-index:2;text-align:center;width:100%}
.ac-lede{
  margin:clamp(18px,2.4vw,28px) auto 0;max-width:64ch;
  font-size:clamp(.95rem,.35vw + .85rem,1.08rem);line-height:1.65;
  color:#5b4f45;
}
.ac-cta{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(22px,3vw,40px);margin-top:clamp(28px,3.6vw,44px);
}
.ac-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:54px;padding:0 34px;border-radius:999px;text-decoration:none;
  background:#105df0;color:#fff;font-weight:600;font-size:15.5px;
  box-shadow:0 10px 30px rgba(16,93,240,.28);
  transition:transform .18s,box-shadow .18s;
}
.ac-btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(16,93,240,.36)}
.ac-link{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-weight:500;font-size:15.5px;color:#141210;
}
.ac-link span{font-size:14px;transform:translateY(-1px)}

/* Závěrečná sekce. `text-align:center` a odsazení byly jen v `case.css`,
   bez nich se obsah srovnal doleva. */
.cs-konec{text-align:center;padding-block:clamp(52px,8vw,104px);border-top:1px solid var(--line)}
.cs-konec h2{font-weight:800;line-height:1.1}
.cs-konec p{margin:16px auto 0;max-width:34ch}

/* ══ Pod herem: číslo beze slov, pak otázka ═══════════════════════════
   Zadání: po otevření webu má být vidět statistika a pod ní KUS další
   věci, ať je vidět, že se má scrollovat.

   ⚠️ Hero je proto o `--vykuk` nižší než okno. Dokud měl `min-height:100vh`,
   končila první obrazovka přesně na jeho hraně a vykukovat nemohlo nic,
   ať se se statistikou hýbalo jakkoli.

   ⚠️ Vykuk musí být MALÝ. Napoprvé měl přes 110 px, takže se vešel celý
   řádek dlaždic a statistika tím vyjela vysoko nad spodní hranu — to už
   není vykuk, to je hotová sekce. Laděno na ~40 % výšky piktogramu:
   vidět je horní kus dlaždic, zbytek si člověk musí odscrollovat.

   ⚠️ Lišta je `position:sticky`, takže ZABÍRÁ místo v toku a hero začíná
   až pod ní. Bez odečtení `--nav-h` skončí hero přesně o její výšku níž
   a vykuk spadne pod ohyb — první pokus takhle vyšel na 0 px vidět. */
.mosaic-page{--vykuk:clamp(48px,6vh,72px);--nav-h:80px}
.mosaic-page .gm-hero{min-height:calc(100vh - var(--nav-h) - var(--vykuk))}

/* ⚠️ Statistika je `position:absolute`, takže pro flex centrování obsahu
   neexistuje — nadpis s tlačítky se centruje do CELÉ výšky hera, tedy
   i do pásu, kde statistika leží. Po smazání věty pod nadpisem se to
   projevilo naplno: nad nadpisem zbylo 304 px volna a pod ním 157.
   Odsazení zdola ten pás vyřadí z centrování a nadpis se posune nahoru
   zhruba o jeho polovinu. Výšku hera to nemění (`box-sizing:border-box`),
   takže vykuk pod ohybem zůstává, jak byl. */
.mosaic-page .gm-hero{padding-bottom:clamp(110px,15vh,160px)}

/* Statistika o kousek výš. Zkrácení hera ji zvedlo samo, tohle je jen
   doladění, ať nesedí na hraně sekce pod ní. */
.mosaic-page .gm-hero .ac-stat{bottom:clamp(30px,4.6vh,52px)}

.gm-po-heru{
  text-align:center;
  padding-top:clamp(26px,3.2vh,40px);
  padding-bottom:clamp(56px,8vw,104px);
}
/* Vlastní odsazení nese sekce, ne piktogram — jinak se sečtou a vykuk
   se posune pod ohyb. */
.mosaic-page .gm-po-heru .picto{margin-top:0}
/* Na béžové je studená šedá `#e4e7ed` cizí těleso; nesvítící dlaždice
   jedou v odstínu pozadí, svítící ve značkové modré. */
.mosaic-page .picto i{background:#e6dccf}
.mosaic-page .picto i.on{background:#105df0}
.mosaic-page .stat-catch{color:#141210}

/* Nízké okno: statistika je tam `position:static` (viz pravidlo výš),
   takže hero drží obsah a vykuk by ho jen tlačil. */
@media (max-height:680px){
  .mosaic-page .gm-hero{min-height:auto;padding-bottom:0}
}

/* ⚠️ Zalomená lišta na mobilu je 113 px, ne 80 — a `--nav-h` se odečítá od
   výšky hera (blok o vykuku výš). S desktopovou hodnotou vyšel hero o 33 px
   vyšší a z piktogramu nevykukovalo nic. Změřeno na 360/390/430 px.
   ⚠️ Musí to stát AŽ TADY, za `.mosaic-page{--nav-h:80px}`. Specificita je
   stejná (0,1,0), takže rozhoduje pořadí v souboru — v původním mobilním
   bloku výš to pozdější deklarace tiše přebila a mobil zůstal na nule. */
@media (max-width:640px){
  .mosaic-page{--nav-h:113px}
}

/* ══ Barevné varianty homepage (návrhy, přepíná se `data-tema` na body) ══
   Majiteli se nelíbí béžová. Tři varianty k porovnání: bílá · šedá · černá.
   Loga modelů zůstávají ve svých skutečných barvách, modrá loga (#105df0)
   je druhotná — tlačítko, „60 %", svítící dlaždice. Krabičky mají vždy
   viditelný rám, jinak by na jednobarevném podkladu splynuly.
   ⚠️ Výchozí zůstává béžová, dokud si majitel nevybere — přepnutí je
   jeden atribut: <body class="mosaic-page" data-tema="bila|seda|cerna">. */

/* ── bílá ── */
[data-tema="bila"].mosaic-page,[data-tema="bila"].mosaic-page .gm-hero{background:#fff;--bg:#fff}
[data-tema="bila"] .gm-box{background:#fff;border:1.5px solid #d6dae2;box-shadow:0 12px 30px rgba(11,18,32,.06)}
[data-tema="bila"] .gm-shade{background:
  radial-gradient(58% 54% at 50% 52%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.12) 100%),
  linear-gradient(180deg, rgba(255,255,255,.92) 0%, transparent 20%, transparent 56%,
    rgba(255,255,255,.55) 78%, rgba(255,255,255,.9) 91%, #fff 100%)}
[data-tema="bila"] .nav{background:rgba(255,255,255,.86);border-bottom-color:#e5e7eb}
[data-tema="bila"] .gm-hero .ac-stat span{color:#5b6472}
[data-tema="bila"] .picto i{background:#e4e7ed}

/* ── šedá ── */
[data-tema="seda"].mosaic-page,[data-tema="seda"].mosaic-page .gm-hero{background:#eceef2;--bg:#eceef2}
[data-tema="seda"] .gm-box{background:#f7f8fa;border:1.5px solid #cfd4dc;box-shadow:0 12px 30px rgba(11,18,32,.07)}
[data-tema="seda"] .gm-shade{background:
  radial-gradient(58% 54% at 50% 52%, rgba(236,238,242,.96) 0%, rgba(236,238,242,.78) 50%, rgba(236,238,242,.12) 100%),
  linear-gradient(180deg, rgba(236,238,242,.92) 0%, transparent 20%, transparent 56%,
    rgba(236,238,242,.55) 78%, rgba(236,238,242,.9) 91%, #eceef2 100%)}
[data-tema="seda"] .nav{background:rgba(236,238,242,.86);border-bottom-color:#d6dae2}
[data-tema="seda"] .gm-hero .ac-stat span{color:#5b6472}
[data-tema="seda"] .picto i{background:#d6dae2}

/* ── černá ── */
[data-tema="cerna"].mosaic-page,[data-tema="cerna"].mosaic-page .gm-hero{background:#08080a;--bg:#08080a;--ink:#f5f4f1;--muted:#b8bcc2;color:#f5f4f1}
[data-tema="cerna"] .gm-box{background:#121216;border:1.5px solid #2c2c33;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.5)}
[data-tema="cerna"] .gm-shade{background:
  radial-gradient(58% 54% at 50% 52%, rgba(8,8,10,.94) 0%, rgba(8,8,10,.74) 50%, rgba(8,8,10,.1) 100%),
  linear-gradient(180deg, rgba(8,8,10,.9) 0%, transparent 20%, transparent 56%,
    rgba(8,8,10,.55) 78%, rgba(8,8,10,.9) 91%, #08080a 100%)}
[data-tema="cerna"] .nav{background:rgba(8,8,10,.82);border-bottom-color:#232328}
[data-tema="cerna"] .nav-links a:not(.btn){color:#b8bcc2}
[data-tema="cerna"] .nav-links a:not(.btn):hover{color:#fff}
[data-tema="cerna"] .gm-hero h1 .thin,[data-tema="cerna"] .gm-hero h1 .bold{color:#f5f4f1}
[data-tema="cerna"] .gm-hero .ac-stat{color:#f5f4f1}
[data-tema="cerna"] .gm-hero .ac-stat em{color:#7aa2ff}
[data-tema="cerna"] .gm-hero .ac-stat span{color:#a7adb5}
[data-tema="cerna"] .picto i{background:#232328}
[data-tema="cerna"] .end-row h2,[data-tema="cerna"] .cs-konec h2,[data-tema="cerna"] .stat-catch{color:#f5f4f1}
[data-tema="cerna"] .btn-ghost{border-color:#3a3a42;color:#f5f4f1}
[data-tema="cerna"] .cs-konec{background:#0e0e11;border-top-color:#232328}
[data-tema="cerna"] .cs-konec p{color:#b8bcc2}
[data-tema="cerna"] footer{background:#08080a;border-top-color:#232328}
[data-tema="cerna"] .foot-links a,[data-tema="cerna"] .foot-links button,[data-tema="cerna"] .foot-legal{color:#a7adb5}