/* ═══════════════════════════════════════════════════════════════════════════
   THEIS — designový systém webu.  Směr C: světlá editorial + tmavé produktové
   pásy.  Tokeny a techniky odvozené z produkčního CSS Attio / Linear / Frame.io
   (průzkum 2026-07).

   PRAVIDLA (nepřekračovat):
   · žádné orby, žádné sklo, žádný duhový gradientní nadpis, žádná zrnitost
   · radius max 14 px, jedna hodnota na typ prvku
   · JEDEN akcent (--primary), používaný skoupě
   · hover PŘICHÁZÍ rychle (50 ms), ODCHÁZÍ pomalu (300 ms)  ← klíčový trik
   · stíny inkoustově tónované, nikdy černé; vrstvené, ne jeden velký
   · každá animace respektuje prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── plochy: teplá krémová → bílá.  Hloubka vzniká odstínem, ne stínem ── */
  --bg:#F9F6F3;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F2EEE9;
  --surface-3:#EAE5DE;

  /* ── linky: vlásková a silnější.  Kontrast ~1.2:1, sotva viditelné ── */
  --border:#E7E2DA;
  --border-2:#D6D0C6;

  /* ── text: čtyři stupně, primární NENÍ čistá černá.
        --text-3 je nejsvětlejší stupeň, který ještě smí nést OBSAH (4,7:1
        i na nejtmavší ploše --surface-2).  --text-4 je jen dekorace. ── */
  --text:#121715;
  --text-2:#5A615D;
  --text-3:#656C69;
  --text-4:#AAB0AC;

  /* ── akcent: jediný.  Všechny historické aliasy míří na stejnou barvu,
        takže staré „duhové" gradienty zdegenerují na plnou plochu.
        --primary je PLOCHA (tlačítko, proužek, ikona), --primary-text je
        TEXT: #0C8C5E má na krému jen 3,96:1, tmavší odstín 5,3:1. ── */
  --primary:#0A7550;
  --primary-2:#075A3D;
  --primary-text:var(--primary);
  --primary-on-dark:#16B87B;
  --accent:#0A7550;
  --accent-2:#0A7550;
  --primary-soft:#E4F5ED;
  --primary-line:#C6E9D9;

  /* ── série (kanály, štítky v mockách).  Tlumené, ladí s krémem — NEJSOU
        to akcenty, jen odlišení položek.  Nikdy neonové. ── */
  --s1:#0A7550; --s2:#2F6F8F; --s3:#8A6A3B; --s4:#6E5A8F;

  /* ── stavy: vždy dvojice plná barva + 15% podklad ── */
  --ok:var(--primary);    --ok-soft:#E4F5ED;
  --warn:#8F5600;  --warn-soft:#FBF0DF;
  --err:#B02A1C;   --err-soft:#FBEAE7;

  /* ── tmavý pás (produkt / video) ── */
  --dark-bg:#0F1211;
  --dark-2:#161A19;
  --dark-3:#1D2221;
  --dark-line:rgba(255,255,255,0.14);
  --dark-line-2:rgba(255,255,255,0.22);
  --dark-text:#EDEFEE;
  --dark-text-2:#9AA29E;
  --dark-text-3:#838B86;

  /* ── radius: strop 14 px ── */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --radius:12px; --r-xl:14px;

  /* ── stíny: inkoustově tónované (18,23,21), vrstvené po pěti ── */
  --sh-1:0 1px 2px rgba(18,23,21,0.05);
  --sh-2:0 0 0 1px rgba(18,23,21,0.045),
         0 1px 2px rgba(18,23,21,0.03),
         0 3px 6px rgba(18,23,21,0.03),
         0 8px 14px rgba(18,23,21,0.035);
  --sh-3:0 0 0 1px rgba(18,23,21,0.05),
         0 1px 2px rgba(18,23,21,0.03),
         0 3px 6px rgba(18,23,21,0.035),
         0 8px 14px rgba(18,23,21,0.04),
         0 16px 28px rgba(18,23,21,0.045),
         0 32px 56px rgba(18,23,21,0.05);
  --sh-dark:0 0 0 1px rgba(255,255,255,0.07),
            0 8px 18px rgba(0,0,0,0.45),
            0 26px 60px rgba(0,0,0,0.55);
  /* Focus ring musí mít 3:1 (WCAG 2.4.11).  Průhledná zelená se s krémem
     složí na 1,4:1 → neviditelná.  Dvouvrstvý plný prstenec: mezera v barvě
     podkladu, pak plná tmavá zelená (5,3:1). */
  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--primary);

  /* ── čas: PŘÍCHOD rychlý, ODCHOD pomalý ── */
  --in:50ms; --out:300ms; --mid:160ms; --rev:640ms;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);

  /* ── písmo: jeden systém.  Outfit odstraněn (dvě display písma = šablona) ── */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --display:var(--font);
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --quote:'Instrument Serif',Georgia,'Times New Roman',serif;

  --wrap:1180px;
  --gut:28px;
  /* vyska horni listy — pouzivaji ji .nav I odsazeni mobilniho menu,
     proto JEDNA hodnota, at se nemuzou rozejit */
  --nav-h:68px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.6; letter-spacing:-0.011em;
  font-feature-settings:"calt","kern","liga"; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::selection { background:var(--primary-soft); color:var(--text); }
/* outline:2px solid transparent (ne none) — ve Windows High Contrast se
   box-shadow nevykreslí, průhledný outline se tam přebarví na systémový. */
:focus-visible { outline:2px solid transparent; outline-offset:2px;
  box-shadow:var(--focus); border-radius:var(--r-sm); }

/* ═══ ambientní vrstvy starého designu — vypnuto ═══════════════════════════
   Orby, zrnitost, kurzorový glow a mřížka byly hlavní „šablonová" signatura.
   HTML je nechává v DOM, CSS je umlčí — žádná stránka se nemusí přepisovat.  */
.aura, .orb, .grain, .cursor-glow, .grid-overlay { display:none !important; }

/* běhový ukazatel scrollu — tenký, jednobarevný, bez záře */
.progress { position:fixed; top:0; left:0; height:2px; width:0; z-index:200;
  background:var(--primary); transition:width .1s linear; }

/* ═══ nosná konstrukce ═════════════════════════════════════════════════════
   Vlásková mřížka: svislé linky lemují obsah po celé výšce stránky, vodorovné
   oddělují sekce přes celou šířku.  Tohle je ta „jedna věc", která z hromady
   bloků udělá jeden zkonstruovaný objekt.                                  */
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  border-left:1px solid var(--border); border-right:1px solid var(--border); }
/* Užší sloupec textu (FAQ, stav služeb, kontakt) se dělá zúžením OBSAHU,
   nikdy zúžením .wrap — jinak se svislé linky uprostřed stránky zalomí. */
.wrap.narrow > * { max-width:var(--col,880px); margin-left:auto; margin-right:auto; }

section { padding:0; position:relative; border-top:1px solid var(--border); }
section > .wrap { padding-top:104px; padding-bottom:104px; }
.hero { border-top:none; }
/* Sekce, která přímo navazuje na nadpis stránky (článek pod .page-hero,
   rozcestník pod hero).  Odsazení nese .wrap, takže inline padding-top na
   <section> by byl no-op — tohle je jeho náhrada, i s vypnutou dělicí linkou. */
section.tight { border-top:none; }
section.tight > .wrap { padding-top:0; }

/* ═══ typografie ═══════════════════════════════════════════════════════════
   Prostrkání klesá s velikostí (-0.022em u velkých → 0 u nejmenších).
   Váhy 510 / 590 / 680 místo 500 / 600 / 700 — doladěná osa variabilního Interu. */
h1,h2,h3,h4,h5 { font-family:var(--display); font-weight:590; color:var(--text);
  text-wrap:balance; }
h2 { font-size:clamp(29px,3.7vw,44px); line-height:1.08; letter-spacing:-0.022em; }
h3 { font-size:20px; line-height:1.33; letter-spacing:-0.012em; }
h4 { font-size:17px; line-height:1.4; letter-spacing:-0.012em; }

.eyebrow {
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:18px;
}
.eyebrow::before { content:none; }

.sec-head { max-width:44ch; margin-bottom:52px; }
.sec-head.center { margin:0 auto 52px; text-align:center; }
.sec-head.center .eyebrow { justify-content:center; }
.sec-head p { color:var(--text-2); font-size:17px; line-height:1.6; margin-top:14px; letter-spacing:-0.006em; }
.sub { font-size:17px; line-height:1.6; color:var(--text-2); max-width:58ch; margin:0 auto 34px; letter-spacing:-0.006em; }

/* ═══ hlavička ═════════════════════════════════════════════════════════════ */
header { position:sticky; top:0; z-index:100; background:var(--bg);
  border-bottom:1px solid transparent; transition:border-color var(--out) var(--ease-io); }
header.scrolled { border-bottom-color:var(--border);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); }
.nav { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); }
.brand { display:flex; align-items:center; gap:9px; font-weight:590; font-size:16px;
  letter-spacing:-0.014em; color:var(--text); }
.brand img { height:22px; width:auto; }
/* Logo v hlavicce dvakrat vetsi (paticka zustava 22 px).  Lista se musi
   zvednout z 60 na 68 px, aby kolem 44px loga zbylo aspon 12 px vzduchu. */
header .brand img { height:44px; }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a.navlink { color:var(--text-2); font-size:14px; font-weight:450;
  letter-spacing:-0.008em; transition:color var(--out) var(--ease-io); }
.nav-links a.navlink:hover { color:var(--text); transition-duration:var(--in); }
.nav-links a.navlink::after { content:none; }
/* „jsi tady" — atribut active nesl starý design, tady mu vracíme význam:
   plná barva textu + tečka akcentu.  Bez podtržítka, aby menu zůstalo klidné. */
.nav-links a.navlink.active { color:var(--text); font-weight:510; }
.nav-links a.navlink.active::before { content:''; display:inline-block; width:4px; height:4px;
  border-radius:50%; background:var(--primary); margin-right:7px; vertical-align:1.5px; }

/* ═══ tlačítka ═════════════════════════════════════════════════════════════
   Výšky 32 / 36 / 42 px, radius 10 px, bez záře, bez lesklého přejezdu.      */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font); font-size:14px; font-weight:510; letter-spacing:-0.009em;
  height:36px; padding:0 15px; border-radius:var(--r-lg); cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:background-color var(--out) var(--ease-io),
             border-color var(--out) var(--ease-io),
             color var(--out) var(--ease-io); }
.btn:hover { transition-duration:var(--in); }
.btn:active { transition-duration:var(--in); }
.btn-primary { background:var(--primary); color:#fff; box-shadow:var(--sh-1); }
.btn-primary::before { content:none; }
.btn-primary:hover { background:var(--primary-2); }
.btn-ghost { background:transparent; border-color:var(--border-2); color:var(--text); }
.btn-ghost:hover { background:var(--surface-2); border-color:var(--text-4); }
.btn-lg { height:42px; padding:0 20px; font-size:15px; }
.nav-toggle { display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:6px; }

/* ═══ hero ═════════════════════════════════════════════════════════════════ */
.hero { text-align:center; }
.hero > .wrap { padding-top:92px; padding-bottom:0; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:5px 11px 5px 9px;
  border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--border);
  font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:28px;
  box-shadow:var(--sh-1); backdrop-filter:none; }
.pill .dot { width:6px; height:6px; border-radius:50%; background:var(--primary);
  box-shadow:none; animation:none; }
.hero-title { font-family:var(--display); font-weight:590;
  letter-spacing:-0.028em; line-height:1.04;
  font-size:clamp(40px,5.6vw,72px); margin:0 auto 20px; max-width:15ch; color:var(--text); }
/* náběh nadpisu: rozostření → ostrost (Attio), ne posun zdola */
.hero-title .w { display:inline-block; vertical-align:top; overflow:visible; }
.hero-title .w > b { display:inline-block; font-weight:inherit;
  filter:blur(6px); opacity:0; transform:none;
  transition:filter var(--rev) var(--ease), opacity var(--rev) var(--ease); }
.hero-title.in .w > b { filter:blur(0); opacity:1; }
/* duhový gradient v nadpisu zrušen — plná barva */
.grad { background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:var(--primary); animation:none; }
.hero-cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero-note { margin-top:18px; font-size:13px; color:var(--text-3); letter-spacing:-0.008em; }

/* ═══ rám produktu ═════════════════════════════════════════════════════════
   Reálný screenshot v 1:1 pixelech, 1px linka + vrstvený stín.  Žádný 3D náklon. */
.mock { max-width:1000px; margin:56px auto 0; position:relative; transform:none !important; }
.mock::before { content:none; }
.mock-frame { border-radius:var(--r-xl); border:1px solid var(--border);
  overflow:hidden; background:var(--surface); box-shadow:var(--sh-3); }
.mock-bar { display:flex; align-items:center; gap:7px; padding:0 13px; height:36px;
  border-bottom:1px solid var(--border); background:var(--surface-2); }
.mock-bar i { width:9px; height:9px; border-radius:50%; background:var(--border-2); }
.mock-bar i:nth-child(1),.mock-bar i:nth-child(2),.mock-bar i:nth-child(3) { background:var(--border-2); }
.mock-bar .url { margin-left:10px; font-family:var(--mono); font-size:11px; font-weight:500;
  color:var(--text-3); letter-spacing:-0.01em; }
/* min-height byla 344 px natvrdo, ale nejvyssi panel potrebuje 295 a vychozi
   („Plánovač") jen 216 → pod obsahem zustavalo 128 px prazdna.  Ted je to
   podlaha, ne pevna vyska: vychozi pohled je tesny a vyssi panel si misto
   vezme sam. */
.mock-body { display:grid; grid-template-columns:176px 1fr; min-height:240px; }
.mock-side { border-right:1px solid var(--border); padding:12px 9px;
  display:flex; flex-direction:column; gap:1px; background:var(--surface-2); }
.ms-item { display:flex; align-items:center; gap:8px; height:30px; padding:0 9px;
  border-radius:var(--r-sm); font-size:13px; color:var(--text-2); font-weight:400;
  letter-spacing:-0.008em; }
.ms-item.on { background:var(--surface-3); color:var(--text); font-weight:510; }
.ms-item svg { width:16px; height:16px; opacity:.75; stroke-width:1.5; }
.ms-item.on svg { color:var(--primary); opacity:1; }
.mock-main { padding:16px 18px; }
.mock-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.mcol-h { font-family:var(--mono); font-size:9.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); margin-bottom:9px; }
.mcard { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden; margin-bottom:8px; animation:none; }
.mcard .thumb { height:38px; background:var(--surface-3); }
.mcard .meta { padding:7px 8px; }
.mcard .t { height:5px; width:78%; background:var(--border-2); border-radius:3px; }
.mcard .t.s { width:52%; margin-top:5px; background:var(--border); }
.badge { display:inline-block; font-family:var(--mono); font-size:9px; font-weight:500;
  padding:2px 6px; border-radius:var(--r-xs); margin:7px 0 0 8px;
  background:var(--surface-2); color:var(--text-2); }
.badge.ok   { background:var(--ok-soft);   color:var(--primary-text); }
.badge.warn { background:var(--warn-soft); color:var(--warn); }
.badge.wait { background:var(--surface-3); color:var(--text-2); }
/* plovoucí chipy u mocku — bez skla, bez poletování */
.float-chip { position:absolute; z-index:5; pointer-events:none; display:flex;
  align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  font-size:13px; font-weight:510; letter-spacing:-0.009em;
  box-shadow:var(--sh-2); animation:none; }
.float-chip svg { width:17px; height:17px; stroke-width:1.5; color:var(--primary); }
.float-chip.fc1 { top:-16px; right:56px; }
.float-chip.fc2 { bottom:-14px; right:34px; }
@media (max-width:1080px){ .float-chip { display:none; } }

/* interaktivní mock */
.ms-item[data-tab] { cursor:pointer;
  transition:background-color var(--out) var(--ease-io), color var(--out) var(--ease-io); }
.ms-item[data-tab]:hover { background:var(--surface-3); color:var(--text); transition-duration:var(--in); }
.mpanel { display:none; }
.mpanel.on { display:block; animation:panelIn var(--mid) var(--ease); }
@keyframes panelIn { from { opacity:0; } to { opacity:1; } }

/* ═══ kalendář v mocku ═════════════════════════════════════════════════════ */
.cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:7px; }
.cal-days span { font-family:var(--mono); font-size:9.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); text-align:center; }
.cal-cols { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; position:relative; }
.cal-col { min-height:162px; border-radius:var(--r-md); background:var(--surface-2);
  border:1px solid var(--border); }
.cal-col.we { background:var(--surface-3); }
.ev { position:absolute; left:0; top:0; width:calc((100% - 36px) / 7);
  border-radius:var(--r-sm); padding:7px 8px 9px 10px; background:var(--surface);
  border:1px solid var(--border); overflow:hidden; box-shadow:var(--sh-1); }
.ev::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--ec,var(--text-4)); }
.ev .b1 { height:5px; width:74%; background:var(--border-2); border-radius:3px; }
.ev .b2 { height:4px; width:50%; background:var(--border); border-radius:3px; margin-top:5px; }
.ev.drag { z-index:4; box-shadow:var(--sh-2); }
.ev.d1 { animation:cdrag1 7.8s var(--ease-io) infinite; }
.ev.d2 { animation:cdrag2 7.8s var(--ease-io) infinite; }
.ev.d3 { animation:cdrag3 7.8s var(--ease-io) infinite; }
@keyframes cdrag1 {
  0%,2% { transform:translate(calc(100% + 6px),4px); opacity:0; }
  6% { transform:translate(calc(100% + 6px),4px); opacity:1; }
  13% { transform:translate(calc(100% + 6px),0); opacity:1; }
  28% { transform:translate(calc(400% + 24px),50px); opacity:1; }
  34% { transform:translate(calc(400% + 24px),50px); opacity:1; }
  40% { transform:translate(calc(400% + 24px),50px); opacity:0; }
  100% { transform:translate(calc(100% + 6px),4px); opacity:0; } }
@keyframes cdrag2 {
  0%,35% { transform:translate(calc(500% + 30px),4px); opacity:0; }
  39% { transform:translate(calc(500% + 30px),4px); opacity:1; }
  46% { transform:translate(calc(500% + 30px),0); opacity:1; }
  61% { transform:translate(calc(200% + 12px),4px); opacity:1; }
  67% { transform:translate(calc(200% + 12px),4px); opacity:1; }
  73% { transform:translate(calc(200% + 12px),4px); opacity:0; }
  100% { transform:translate(calc(500% + 30px),4px); opacity:0; } }
@keyframes cdrag3 {
  0%,66% { transform:translate(0,50px); opacity:0; }
  70% { transform:translate(0,50px); opacity:1; }
  77% { transform:translate(0,46px); opacity:1; }
  91% { transform:translate(calc(600% + 36px),50px); opacity:1; }
  96% { transform:translate(calc(600% + 36px),50px); opacity:1; }
  100% { transform:translate(calc(600% + 36px),50px); opacity:0; } }
@media (max-width:640px) { .cal-col { min-height:132px; } .ev { padding:6px 5px 7px 9px; } }

/* ═══ composer v mocku ═════════════════════════════════════════════════════ */
.cmp { display:grid; grid-template-columns:1fr 148px; gap:20px; }
.cmp-h { font-family:var(--mono); font-size:10px; font-weight:500; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-3); margin:0 0 8px; }
.cmp-lines + .cmp-h { margin-top:16px; }
.cmp-nets { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.cnet { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--r-md);
  border:1px solid var(--border); font-size:12px; font-weight:500; color:var(--text-2); }
.cnet::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--dotc,var(--text-4)); flex-shrink:0; }
.cnet.on { border-color:var(--border-2); color:var(--text); background:var(--surface-2); }
.cnet.yt{--dotc:#ff0000;} .cnet.ig{--dotc:#d63576;} .cnet.fb{--dotc:#1877f2;} .cnet.tt{--dotc:#111;}
.cmp-lines .ln { height:7px; background:var(--border-2); border-radius:3px; margin-bottom:8px; }
.cmp-lines .ln.s { width:58%; position:relative; }
.cmp-lines .ln.s::after { content:''; position:absolute; right:-6px; top:-1px; width:2px; height:9px;
  background:var(--primary); animation:blink 1.1s step-end infinite; }
@keyframes blink { 50%{opacity:0;} }
.cmp-phone { border:1px solid var(--border); border-radius:var(--r-xl); aspect-ratio:9/16;
  background:var(--surface-2); padding:10px; display:flex; flex-direction:column; }
/* Pozor na kolizi jmen: .pt je zároveň partnerská dlaždice v endkartě (níž),
   která má pevnou šířku a stín.  Tady je to jen placeholder náhledu → obojí
   se musí explicitně vynulovat, jinak se composer mock rozpadne. */
.cmp-phone .pt { flex:1; width:auto; height:auto; box-shadow:none;
  border-radius:var(--r-md); background:var(--surface-3); }
.cmp-phone .pc1 { height:5px; width:70%; background:var(--border-2); border-radius:3px; margin-top:8px; }
.cmp-phone .pc2 { height:4px; width:92%; background:var(--border); border-radius:3px; margin-top:6px; }

/* ═══ metriky v mocku ══════════════════════════════════════════════════════ */
.mx-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.mx-k { border:1px solid var(--border); border-radius:var(--r-lg); padding:13px;
  background:var(--surface); min-width:0; }
/* ctyri dlazdice se na telefon nevejdou — popisek „Zhlédnutí" si vynuti sirku */
@media (max-width:560px){ .mx-kpis { grid-template-columns:repeat(2,1fr); } }
.mx-k .kv { font-family:var(--display); font-weight:590; font-size:23px; letter-spacing:-0.022em;
  background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:var(--text); line-height:1; }
.mx-k .kl { font-size:11.5px; font-weight:500; color:var(--text-3); margin-top:5px; }
.mx-bars { display:flex; align-items:flex-end; gap:10px; height:112px; padding:0 2px;
  border-bottom:1px solid var(--border); }
.mx-bars .bar { flex:1; border-radius:var(--r-xs) var(--r-xs) 0 0;
  background:var(--primary); opacity:.85; transform-origin:bottom; animation:none; }
.mx-bars .bar:nth-child(even) { opacity:.6; }

/* ═══ flow checklist ═══════════════════════════════════════════════════════ */
.fl { display:flex; flex-direction:column; gap:8px; max-width:540px; }
.fl-row { display:flex; align-items:center; gap:12px; padding:11px 13px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.fl-box { width:19px; height:19px; border-radius:var(--r-xs); border:1.5px solid var(--border-2);
  display:grid; place-items:center; flex-shrink:0; }
.fl-row.done .fl-box { background:var(--primary); border-color:var(--primary); }
.fl-box svg { width:12px; height:12px; stroke:#fff; stroke-width:3; fill:none; opacity:0; }
.fl-row.done .fl-box svg { opacity:1; }
.fl-t { height:7px; border-radius:3px; background:var(--border-2); }
.fl-row.done .fl-t { background:var(--border); }

/* ═══ marquee ══════════════════════════════════════════════════════════════ */
.marquee { margin-top:0; overflow:hidden; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border); padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.mq-track { display:flex; gap:48px; width:max-content; animation:scrollx 34s linear infinite; }
.marquee:hover .mq-track { animation-play-state:paused; }
.mq-item { display:inline-flex; align-items:center; gap:10px; color:var(--text-3);
  font-family:var(--display); font-weight:510; font-size:17px; letter-spacing:-0.014em;
  white-space:nowrap; transition:color var(--out) var(--ease-io); }
.mq-item:hover { color:var(--text); transition-duration:var(--in); }
.mq-item .d { width:5px; height:5px; border-radius:50%; background:var(--border-2); }
@keyframes scrollx { to { transform:translateX(-50%); } }

/* ═══ statistiky ═══════════════════════════════════════════════════════════
   Vlásková mřížka místo karet: buňky oddělené linkami, žádné pozadí ani stín. */
/* ─ mřížky s vlásovými dělítky ─────────────────────────────────────────────
   Odsazení a linky NIKDY neřeš přes :first-child / :last-child — ty platí na
   celou mřížku, ne na řádek, takže druhý řádek dostane odsazení navíc (přesně
   tak „Metriky & analytika" odskočila o 26 px).  Místo toho: mřížka se
   zápornými okraji roztáhne až na rám .wrap a KAŽDÁ buňka má symetrický
   padding.  Krajní linky pak splynou s nosným rámem a na počtu sloupců ani
   na zalomení nezáleží.                                                     */
/* auto-fit: mřížka se sama přizpůsobí třem i čtyřem buňkám a na úzkém
   displeji se zalomí — proto na stránkách NEPŘEPISOVAT inline stylem. */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--border);
  margin-left:calc(var(--gut) * -1); margin-right:calc(var(--gut) * -1); }
.stat { text-align:left; padding:28px var(--gut);
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  background:none; border-radius:0; transition:none; }
.stat:last-child { border-right:none; }
.stat:hover { transform:none; }
/* varianta, kde buňka nenese číslo, ale krátkou větu — číselný stupeň by ji
   rozbil na tři řádky */
.stats.phrases .v { font-size:clamp(18px,2.1vw,24px); line-height:1.25; }
.stat .v { font-family:var(--display); font-weight:590; font-size:clamp(28px,3.6vw,40px);
  letter-spacing:-0.022em; background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:var(--text); line-height:1; }
.stat .l { color:var(--text-2); font-size:14px; margin-top:9px; letter-spacing:-0.009em; }

/* ═══ funkce ═══════════════════════════════════════════════════════════════ */
.features { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border);
  margin-left:calc(var(--gut) * -1); margin-right:calc(var(--gut) * -1); }
.feature { background:none; border:none;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  border-radius:0; padding:30px var(--gut); position:relative; overflow:visible;
  transition:none; }
.feature:last-child { border-right:none; }
.feature::after { content:none; }
.feature:hover { transform:none; background:none; }
/* .feature mimo vodorovnou mřížku (svislý sloupec na Kontaktu): svislé dělítko
   nedává smysl — nahradí ho vodorovné mezi kartami. */
.contact-grid .feature { border-right:none; padding:0 0 4px; }
.contact-grid .feature:not(:first-child) { padding-left:0; padding-top:24px;
  border-top:1px solid var(--border); }
.f-ico { width:26px; height:26px; border-radius:0; display:block; margin-bottom:16px;
  background:none; border:none; transition:none; }
.feature:hover .f-ico { transform:none; }
.f-ico svg { width:26px; height:26px; stroke:var(--primary); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.feature h3 { font-size:16px; font-weight:590; letter-spacing:-0.014em; margin-bottom:7px; color:var(--text); }
.feature p { color:var(--text-2); font-size:14.5px; line-height:1.58; letter-spacing:-0.009em; }
/* Jen zmena poctu sloupcu.  Odsazeni a linky resi zakladni pravidla vyse —
   drive tu byly paddingy s !important z puvodniho designu, ktere prebijely
   novy system a delaly ze sloupce cik-cak (liche bunky 0, sude 20 px). */
@media (max-width:860px){
  .features { grid-template-columns:1fr; }
  .feature { border-right:none; border-bottom:1px solid var(--border); }
  .feature:last-child { border-bottom:none; }
  .stats { grid-template-columns:1fr 1fr; }
}

/* ═══ pipeline ═════════════════════════════════════════════════════════════ */
.pipe { display:flex; align-items:stretch; flex-wrap:wrap; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; background:var(--surface); position:relative; }
.pipe::before { content:none; }
.pstep { flex:1; min-width:150px; padding:22px 20px; border-right:1px solid var(--border);
  position:relative; transition:background-color var(--out) var(--ease-io); }
.pstep:last-child { border-right:none; }
.pstep:hover { background:var(--surface-2); transition-duration:var(--in); }
.pstep .n { font-family:var(--mono); font-weight:500; font-size:10.5px; color:var(--primary-text);
  letter-spacing:.07em; }
.pstep h4 { font-size:15px; font-weight:590; margin:9px 0 5px; letter-spacing:-0.014em; }
.pstep p { font-size:13px; color:var(--text-2); line-height:1.5; }
.pstep .bar { display:none; }

/* ═══ tmavé produktové pásy ════════════════════════════════════════════════
   Světlý základ nese důvěryhodnost, tmavý pás dá videu vyniknout (Frame.io).
   Bez zásahu do HTML — cílíme sekci podle obsahu.                           */
section:has(.render-editor),
section:has(> .wrap > .render-row) {
  background:var(--dark-bg); color:var(--dark-text-2);
  border-top-color:var(--dark-bg);
  /* Tmavý akcent přepsaný na úrovni tokenu: cokoli uvnitř pásu, co používá
     --primary-text, se automaticky rozsvítí (#0A7550 by na tmavé mělo 1,3:1). */
  --primary-text:var(--primary-on-dark);
}
section:has(.render-editor) > .wrap,
section:has(> .wrap > .render-row) > .wrap { border-color:var(--dark-line); }
section:has(.render-editor) h2,
section:has(.render-editor) h3,
section:has(.render-editor) h4,
section:has(.render-editor) .re-end-h { color:var(--dark-text); }
section:has(.render-editor) .eyebrow { color:var(--dark-text-3); }
section:has(.render-editor) .sec-head p,
section:has(.render-editor) .sub,
section:has(.render-editor) p { color:var(--dark-text-2); }
section:has(.render-editor) .feature { border-color:var(--dark-line); }
section:has(.render-editor) .btn-ghost { border-color:var(--dark-line-2); color:var(--dark-text); }
section:has(.render-editor) .btn-ghost:hover { background:var(--dark-2); }

/* ═══ render editor ════════════════════════════════════════════════════════ */
.render-editor { border:1px solid var(--dark-line); border-radius:var(--r-xl); overflow:hidden;
  background:var(--dark-2); box-shadow:var(--sh-dark); position:relative; }
.re-preview { position:relative; aspect-ratio:16/9; overflow:hidden; background:#0d1420; }
.re-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:#0d1420; }
.re-vid.failed { display:none; }
.re-scene { position:absolute; inset:-12%; background:linear-gradient(120deg,#0e1a2c,#1a1030 55%,#241018);
  filter:none; animation:scenePan 16s var(--ease-io) infinite; }
@keyframes scenePan { 0%{transform:scale(1.06) translate(0,0);} 50%{transform:scale(1.12) translate(-2%,-1.5%);} 100%{transform:scale(1.06) translate(1.5%,1%);} }
.re-shape { display:none; }
.re-sweep { display:none; }
.re-vig { position:absolute; inset:0; z-index:2; box-shadow:inset 0 0 120px rgba(0,0,0,0.6); pointer-events:none; }
.re-tag { position:absolute; top:13px; right:14px; z-index:6; display:flex; align-items:center; gap:6px;
  padding:4px 9px; border-radius:var(--r-sm); background:rgba(10,12,11,0.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--dark-line); font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.05em; color:#fff; }
.re-tag .rec { width:6px; height:6px; border-radius:50%; background:#ff3b5f; animation:recPulse 1.8s ease-in-out infinite; }
@keyframes recPulse { 50% { opacity:.35; } }
.re-intro { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; background:#0b0e0d; z-index:3; animation:introShow 8s linear infinite; }
.re-intro .word { font-family:var(--display); font-weight:590; font-size:clamp(28px,5.6vw,50px);
  letter-spacing:-0.022em; background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; color:#fff; animation:introWord 8s var(--ease) infinite; }
.re-intro .tag { font-family:var(--mono); font-size:11px; color:var(--dark-text-3);
  letter-spacing:.16em; text-transform:uppercase; }
@keyframes introShow { 0%,13%{opacity:1;} 20%,100%{opacity:0;} }
@keyframes introWord { 0%{filter:blur(8px);opacity:0;} 12%,20%,100%{filter:blur(0);opacity:1;} }
.re-logo { position:absolute; top:16px; left:18px; height:46px; z-index:4; opacity:0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6)); animation:wmShow 8s linear infinite; }
@keyframes wmShow { 0%,4%{opacity:0;} 9%,78%{opacity:.95;} 84%,100%{opacity:0;} }
.re-l3 { position:absolute; left:20px; bottom:22px; z-index:4; display:flex; align-items:center;
  gap:10px; padding:9px 14px; border-radius:var(--r-lg); background:var(--primary);
  box-shadow:0 10px 26px rgba(0,0,0,0.4); transform:translateX(-130%); opacity:0;
  animation:l3Show 8s var(--ease) infinite; }
.re-l3 .l3a { width:28px; height:28px; border-radius:var(--r-sm); background:rgba(255,255,255,0.24); flex-shrink:0; }
.re-l3 .l3t b { font-size:13px; color:#fff; display:block; line-height:1.2; font-weight:590; letter-spacing:-0.012em; }
.re-l3 .l3t small { font-size:11px; font-weight:500; color:rgba(255,255,255,0.9); }
@keyframes l3Show { 0%,35%{transform:translateX(-130%);opacity:0;} 41%,58%{transform:none;opacity:1;} 64%,100%{transform:translateX(-130%);opacity:0;} }
.re-end { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; padding:20px;
  background:rgba(11,14,13,0.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; animation:endShow 8s var(--ease) infinite; }
.re-end-h { font-family:var(--display); font-weight:590; font-size:16px;
  letter-spacing:-0.014em; color:#fff; text-align:center; }
.re-end-h span { color:var(--primary-on-dark); }
.re-partners { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; max-width:92%; }
.pt { width:94px; height:52px; border-radius:var(--r-md); background:#fff; display:flex;
  align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 16px rgba(18,23,21,0.30); }
.pt .pm { width:18px; height:18px; border-radius:var(--r-xs); background:var(--pc,#888); flex-shrink:0; }
.pt .pw { display:flex; flex-direction:column; gap:4px; }
.pt .pw i { display:block; height:4px; border-radius:2px; background:#20252a; }
.pt .pw i:first-child { width:32px; } .pt .pw i:last-child { width:20px; opacity:.5; }
@keyframes endShow { 0%,72%{opacity:0;} 79%,95%{opacity:1;} 100%{opacity:0;} }

.render-row { display:grid; grid-template-columns:1fr 288px; gap:28px; align-items:center; }
.render-vert { display:flex; flex-direction:column; align-items:center; gap:14px; }
.re-vframe { width:264px; max-width:100%; border-radius:38px; padding:10px; position:relative;
  background:#0b0e0d; border:1px solid var(--dark-line); box-shadow:var(--sh-dark); }
.re-vframe .notch2 { position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:62px; height:19px; border-radius:999px; background:#000; z-index:9; }
.re-vframe::after { content:''; position:absolute; bottom:19px; left:50%; transform:translateX(-50%);
  width:88px; height:4px; border-radius:3px; background:rgba(255,255,255,0.45); z-index:9; }
.re-preview.vert { aspect-ratio:9/18; border-radius:30px; }
.re-preview.vert .re-logo { height:28px; top:46px; left:16px; }
.re-preview.vert .re-tag { top:48px; right:16px; padding:3px 8px; font-size:9px; }
.re-preview.vert .re-l3 { left:16px; right:auto; bottom:46px; padding:8px 12px; }
.re-preview.vert .re-l3 .l3a { width:24px; height:24px; }
.re-preview.vert .re-l3 .l3t b { font-size:12px; } .re-preview.vert .re-l3 .l3t small { font-size:10px; }
.re-preview.vert .re-end { gap:14px; padding:18px 14px; }
.re-preview.vert .re-partners { flex-direction:column; flex-wrap:nowrap; max-width:none; gap:10px; }
.re-preview.vert .pt { width:138px; height:44px; }
.re-preview.vert .re-end-h { font-size:14px; }
.rv-label { font-family:var(--mono); font-size:11px; font-weight:500; color:var(--dark-text-3);
  text-align:center; letter-spacing:.05em; text-transform:uppercase; }
@media (max-width:900px){ .render-row { grid-template-columns:1fr; } .render-vert { margin:0 auto; } }
@media (max-width:760px){ .re-logo { height:36px; } }
.re-tracks { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px;
  border-top:1px solid var(--dark-line); background:var(--dark-3); position:relative; }
.re-lane { display:grid; grid-template-columns:80px 1fr; align-items:center; gap:12px; }
.re-lane .ll { font-family:var(--mono); font-size:10px; font-weight:500; color:var(--dark-text-3);
  letter-spacing:.05em; text-transform:uppercase; }
.re-lane .lt { position:relative; height:20px; background:rgba(255,255,255,0.05); border-radius:var(--r-xs); }
.re-clip { position:absolute; top:0; bottom:0; border-radius:var(--r-xs); display:flex; align-items:center;
  padding:0 8px; font-family:var(--mono); font-size:9px; font-weight:500; color:#fff;
  white-space:nowrap; overflow:hidden; }
.re-playhead { position:absolute; top:8px; bottom:8px; left:92px; width:1.5px; background:#fff;
  z-index:6; animation:phSweep 8s linear infinite; }
.re-playhead::before { content:''; position:absolute; top:-4px; left:-3px; width:8px; height:8px;
  border-radius:50%; background:#fff; }
@keyframes phSweep { from{left:92px;} to{left:calc(100% - 18px);} }
.re-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:24px;
  border-top:1px solid var(--dark-line);
  margin-left:calc(var(--gut) * -1); margin-right:calc(var(--gut) * -1); }
.re-cards > * { padding:22px var(--gut); border-right:1px solid var(--dark-line); }
.re-cards > *:last-child { border-right:none; }
@media (max-width:760px){
  .re-cards { grid-template-columns:1fr; margin-left:0; margin-right:0; }
  .re-cards > * { border-right:none; border-bottom:1px solid var(--dark-line); padding:20px 0 !important; }
  .re-lane { grid-template-columns:58px 1fr; }
}

/* ═══ kanály ═══════════════════════════════════════════════════════════════ */
.chan-wrap { display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
.chan-list { display:flex; flex-direction:column; border-top:1px solid var(--border); }
.chan { display:flex; gap:14px; align-items:flex-start; padding:18px 0;
  border:none; border-bottom:1px solid var(--border); border-radius:0; background:none;
  transition:none; }
.chan:hover { transform:none; background:none; }
.chan .ci { width:38px; height:38px; border-radius:var(--r-md); display:grid; place-items:center;
  flex-shrink:0; color:#fff; }
.chan .ci svg { width:20px; height:20px; }
.chan h4 { font-size:15px; font-weight:590; letter-spacing:-0.014em; }
.chan p { font-size:13.5px; color:var(--text-2); margin-top:3px; line-height:1.55; }
.phone { justify-self:center; width:264px; max-width:100%; border-radius:38px; padding:10px;
  position:relative; background:#0b0e0d; border:1px solid var(--border-2);
  box-shadow:var(--sh-3); transform:none !important; }
.phone .notch { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:62px;
  height:19px; border-radius:999px; background:#000; z-index:9; }
.phone::after { content:''; position:absolute; bottom:19px; left:50%; transform:translateX(-50%);
  width:88px; height:4px; border-radius:3px; background:rgba(255,255,255,0.45); z-index:9; }
.phone .screen { aspect-ratio:9/18; border-radius:30px; overflow:hidden; background:#12100f;
  padding:44px 14px 26px; display:flex; flex-direction:column; gap:10px; }
.pcard { background:rgba(255,255,255,0.07); border:1px solid var(--dark-line);
  border-radius:var(--r-md); padding:11px; animation:none; }
.pcard .h { height:7px; width:60%; background:var(--primary); border-radius:3px; opacity:.9; }
.pcard .l { height:5px; width:90%; background:rgba(255,255,255,0.16); border-radius:3px; margin-top:8px; }
.pcard .l.s { width:65%; }

/* ═══ ceník ════════════════════════════════════════════════════════════════ */
.bill-toggle { display:inline-flex; gap:2px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:3px; }
.bill-toggle button { font-family:var(--font); font-size:13px; font-weight:510; color:var(--text-2);
  background:none; border:none; height:30px; padding:0 14px; border-radius:var(--r-sm); cursor:pointer;
  letter-spacing:-0.008em;
  transition:background-color var(--out) var(--ease-io), color var(--out) var(--ease-io); }
.bill-toggle button:hover { color:var(--text); transition-duration:var(--in); }
.bill-toggle button.on { background:var(--surface); color:var(--text); box-shadow:var(--sh-1); }
.bill-save { color:var(--primary-text); font-weight:590; font-size:12px; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:860px;
  margin:40px auto 0; align-items:stretch; }
.price-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 28px; display:flex; flex-direction:column; position:relative; overflow:hidden;
  box-shadow:var(--sh-1); }
.price-card.feat { border-color:var(--primary-line); background:var(--surface); box-shadow:var(--sh-2); }
.pc-badge { position:absolute; top:16px; right:16px; font-family:var(--mono); font-size:10px;
  font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--primary);
  background:var(--primary-soft); padding:3px 8px; border-radius:var(--r-xs); }
.pc-name { font-family:var(--display); font-size:20px; font-weight:590; letter-spacing:-0.018em; }
.pc-desc { color:var(--text-2); font-size:14px; line-height:1.55; margin:6px 0 20px; min-height:42px; }
.pc-price { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.pc-amt { font-family:var(--display); font-size:38px; font-weight:590; letter-spacing:-0.026em; line-height:1; }
.pc-per { color:var(--text-2); font-size:15px; }
.pc-note { color:var(--text-3); font-size:13px; font-weight:500; min-height:20px; margin-bottom:24px; }
.pc-feats { list-style:none; display:flex; flex-direction:column; gap:11px; margin:0 0 26px; padding:0; flex:1; }
.pc-feats li { display:flex; gap:10px; align-items:flex-start; color:var(--text); font-size:14px; line-height:1.45; }
.pc-feats.muted li { color:var(--text-2); }
.pc-feats li svg { width:17px; height:17px; stroke:var(--primary); fill:none; stroke-width:1.6; flex-shrink:0; margin-top:1px; }
@media(max-width:760px){ .pricing-grid { grid-template-columns:1fr; } }

/* ═══ závěrečné CTA ════════════════════════════════════════════════════════ */
.cta { text-align:center; border:none; border-radius:0; padding:0; background:none;
  position:relative; overflow:visible; }
.cta::before { content:none; }
.cta h2 { max-width:20ch; margin:0 auto 14px; }
.cta p { color:var(--text-2); font-size:17px; max-width:48ch; margin:0 auto 28px; letter-spacing:-0.006em; }
.cta-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.pc-assure { text-align:center; color:var(--text-3); font-size:12.5px; font-weight:500; margin-top:14px; }

/* ═══ patička ══════════════════════════════════════════════════════════════ */
footer { border-top:1px solid var(--border); margin-top:0; padding:0; }
footer > .wrap { padding-top:56px; padding-bottom:40px; }
.foot-grid { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.foot-brand { max-width:280px; }
.foot-brand p { color:var(--text-2); font-size:14px; margin-top:12px; line-height:1.55; }
.foot-cols { display:flex; gap:60px; flex-wrap:wrap; }
.fcol h5 { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--text-3); margin-bottom:14px; font-weight:500; }
.fcol a { display:block; color:var(--text-2); font-size:14px; margin-bottom:10px;
  letter-spacing:-0.009em; transition:color var(--out) var(--ease-io); }
.fcol a:hover { color:var(--text); transition-duration:var(--in); }
.foot-bottom { margin-top:40px; padding-top:22px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--text-3); font-size:13px; }
.fcol .fmail { color:var(--text-2); } .fcol .fmail:hover { color:var(--text); }

/* ═══ reveal: rozostření + drobný posun, jednou ════════════════════════════
   BEZPEČNOSTNÍ ZÁSADA: obsah je viditelný VE VÝCHOZÍM STAVU.  Skrývá se teprve
   tehdy, když skript ohlásí, že animace převzal (třída .js-anim na <html>).
   Když se landing.js nenačte nebo kdekoli spadne, text zůstane čitelný —
   nikdy nesmí zůstat obsah neviditelný kvůli chybě v JS.                     */
.reveal { opacity:1; filter:none; transform:none; }
.js-anim .reveal { opacity:0; filter:blur(5px); transform:translateY(8px);
  transition:opacity var(--rev) var(--ease), filter var(--rev) var(--ease), transform var(--rev) var(--ease); }
.js-anim .reveal.in { opacity:1; filter:blur(0); transform:none; }
.js-anim .reveal.d1{transition-delay:60ms;}
.js-anim .reveal.d2{transition-delay:120ms;}
.js-anim .reveal.d3{transition-delay:180ms;}

/* ═══ use-cases ════════════════════════════════════════════════════════════ */
.uc-ico { width:26px; height:26px; border-radius:0; display:block; margin-bottom:16px;
  background:none; border:none; }
.uc-ico svg { width:26px; height:26px; stroke:var(--primary); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.uc-roles { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.uc-roles span { font-size:12px; font-weight:500; color:var(--text-2); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-sm); padding:3px 9px; }

/* ═══ srovnání ═════════════════════════════════════════════════════════════ */
.vs { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--border); }
.vs-card { border-radius:0; padding:30px 26px 30px 0; border:none; border-right:1px solid var(--border);
  background:none; box-shadow:none; }
.vs-card:last-child { border-right:none; padding-right:0; padding-left:26px; }
.vs-card.good { background:none; }
.vs-card.bad { background:none; }
.vs-title { font-family:var(--display); font-weight:590; font-size:17px; letter-spacing:-0.014em;
  margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.vs-title .tag { font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 8px; border-radius:var(--r-xs); }
.vs-card.bad .tag { background:var(--surface-2); color:var(--text-2); }
.vs-card.good .tag { background:var(--primary-soft); color:var(--primary-text); }
.vs-row { display:flex; align-items:flex-start; gap:11px; padding:10px 0; font-size:14px;
  line-height:1.5; border-top:1px solid var(--border); }
.vs-row:first-of-type { border-top:none; }
.vs-card.bad .vs-row { color:var(--text-3); }
.vs-ic { flex:none; width:18px; height:18px; margin-top:1px; stroke-width:1.6; }
.vs-card.bad .vs-ic { color:var(--text-4); } .vs-card.good .vs-ic { color:var(--primary); }
@media(max-width:760px){
  .vs { grid-template-columns:1fr; }
  .vs-card { border-right:none; border-bottom:1px solid var(--border); padding:24px 0 !important; }
  .vs-card:last-child { border-bottom:none; }
}

/* ═══ FAQ ══════════════════════════════════════════════════════════════════ */
.faq { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--border); }
.faq details { background:none; border:none; border-bottom:1px solid var(--border);
  border-radius:0; padding:0; transition:none; }
.faq details[open] { background:none; }
.faq summary { list-style:none; cursor:pointer; padding:19px 0; font-weight:510; font-size:15.5px;
  letter-spacing:-0.012em; display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:color var(--out) var(--ease-io); }
.faq summary:hover { color:var(--primary-text); transition-duration:var(--in); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .qic { flex:none; width:20px; height:20px; border-radius:var(--r-xs); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--text-3); font-size:17px;
  line-height:0; transition:transform var(--mid) var(--ease-io), color var(--mid) var(--ease-io); }
.faq details[open] summary .qic { transform:rotate(45deg); background:none; color:var(--primary); }
.faq .a { color:var(--text-2); font-size:14.5px; line-height:1.65; padding:0 0 20px; max-width:66ch; }
.faq .a b { color:var(--text); font-weight:510; }

/* ═══ ceník doplňky ════════════════════════════════════════════════════════ */
.seat-math { max-width:560px; margin:26px auto 0; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius); padding:16px 22px;
  text-align:center; font-size:14px; color:var(--text-2); line-height:1.6; }
.seat-math b { color:var(--text); font-weight:590; } .seat-math .plus { color:var(--primary-text); font-weight:590; }
.pricing-faqlink { text-align:center; margin-top:20px; }
.pricing-faqlink a { color:var(--primary-text); font-weight:510; font-size:14px; }
.pricing-faqlink a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ═══ podstránky ═══════════════════════════════════════════════════════════ */
.page-hero { border-top:none; }
.page-hero > .wrap { padding-top:76px; padding-bottom:28px; }
.page-hero.center { text-align:center; }
.page-hero h1 { font-family:var(--display); font-weight:590; letter-spacing:-0.026em;
  line-height:1.06; font-size:clamp(34px,4.8vw,56px); max-width:19ch; margin:0 0 18px; }
.page-hero.center h1 { margin:0 auto 18px; }
.page-hero .sub { margin:0 0 28px; }
.page-hero.center .sub { margin:0 auto 28px; }
/* .crumb i .eyebrow jsou VZDY vlastni radek.  Jako inline-flex se slepily
   vedle sebe („Hlavni stranka > Podminky pouziti PRAVNI DOKUMENT") a navic
   jim nefungoval svisly margin ani centrovani ve .wrap.narrow. */
.crumb { display:flex; font-family:var(--mono); font-size:11.5px; font-weight:500;
  color:var(--text-2); margin-bottom:20px;
  gap:8px; align-items:center; letter-spacing:.04em; }
.crumb a { color:var(--text-2); transition:color var(--out) var(--ease-io); }
.crumb a:hover { color:var(--text); transition-duration:var(--in); }

.fblock { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:56px 0; border-top:1px solid var(--border); }
.fblock:first-of-type { border-top:none; }
.fblock.rev > .fb-mock { order:-1; }
.fblock h3 { font-family:var(--display); font-size:clamp(22px,3vw,30px); font-weight:590;
  letter-spacing:-0.022em; line-height:1.15; margin-bottom:12px; }
.fblock p { color:var(--text-2); font-size:16px; max-width:52ch; line-height:1.6; letter-spacing:-0.006em; }
.fb-checks { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.fb-checks li { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text-2); line-height:1.5; }
.fb-checks svg { width:16px; height:16px; stroke:var(--primary); stroke-width:1.6; flex-shrink:0; margin-top:3px; }
/* min-width:0 — bez tohohle si grid polozka vynuti sirku podle nejsirsiho
   obsahu (min-content) a mock pretece z okna ven. */
.fblock > *, .numsec > * { min-width:0; }
.fb-mock { position:relative; min-width:0; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--sh-2); overflow:hidden; }
@media (max-width:880px){ .fblock { grid-template-columns:1fr; gap:26px; padding:38px 0; } .fblock.rev > .fb-mock { order:0; } }

.numsec { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:56px 0; border-top:1px solid var(--border); }
.numsec:first-of-type { border-top:none; }
.numsec.rev > .fb-mock { order:-1; }
.numsec .n { font-family:var(--mono); font-weight:500; font-size:11.5px; color:var(--primary-text);
  letter-spacing:.09em; margin-bottom:10px; }
.numsec h3 { font-family:var(--display); font-size:clamp(22px,3.2vw,32px); font-weight:590;
  letter-spacing:-0.022em; line-height:1.15; margin-bottom:12px; }
.numsec p { color:var(--text-2); font-size:16px; max-width:50ch; line-height:1.6; letter-spacing:-0.006em; }
@media (max-width:880px){ .numsec { grid-template-columns:1fr; gap:26px; padding:38px 0; } .numsec.rev > .fb-mock { order:0; } }

/* mocky podstránek */
.mock-month { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.mock-month .dh { font-family:var(--mono); font-size:9px; font-weight:500; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-3); text-align:center; padding-bottom:3px; }
.mock-month .dc { min-height:52px; border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--border); padding:4px; display:flex; flex-direction:column; gap:3px; }
.mock-month .dc.we { background:var(--surface-3); }
.mock-month .p { height:7px; border-radius:3px; background:var(--pc,var(--primary)); opacity:.85; }
.mock-month .p.s { width:70%; }
.mock-approval .msg { display:flex; gap:10px; margin-bottom:12px; }
.mock-approval .av { width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--a1,var(--surface-3)); }
.mock-approval .bb { flex:1; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:10px 12px; }
.mock-approval .ln { height:5px; border-radius:3px; background:var(--border-2); margin-bottom:6px; }
.mock-approval .ln.s { width:55%; margin-bottom:0; }
.appr-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:510;
  padding:4px 10px; border-radius:var(--r-sm); position:relative; overflow:hidden; }
.appr-chip.wait { background:var(--warn-soft); color:var(--warn); animation:apprSwapA 6s var(--ease-io) infinite; }
.appr-chip.ok { background:var(--ok-soft); color:var(--ok); }
@keyframes apprSwapA { 0%,45%{opacity:1;} 50%,95%{opacity:0;} 100%{opacity:1;} }
.appr-chip.ok.swap { position:absolute; animation:apprSwapB 6s var(--ease-io) infinite; }
@keyframes apprSwapB { 0%,45%{opacity:0;} 50%,95%{opacity:1;} 100%{opacity:0;} }
.mock-roles { display:flex; flex-direction:column; gap:4px; }
.mock-roles .rr { display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:6px; align-items:center;
  padding:8px 11px; border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--border); font-size:12.5px; }
.mock-roles .rr.hd { background:none; border:none; color:var(--text-3); font-family:var(--mono);
  font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:500; padding:2px 11px; }
.mock-roles .rn { font-weight:510; color:var(--text-2); }
.mock-roles .ok { color:var(--primary-text); text-align:center; }
.mock-roles .no { color:var(--text-4); text-align:center; }
.mock-inbox { display:grid; grid-template-columns:200px 1fr; gap:12px; }
.mock-inbox .il { display:flex; flex-direction:column; gap:5px; }
.mock-inbox .ir { display:flex; gap:8px; align-items:center; padding:8px 10px;
  border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); }
.mock-inbox .ir.on { border-color:var(--primary-line); background:var(--primary-soft); }
.mock-inbox .nb { width:15px; height:15px; border-radius:var(--r-xs); flex-shrink:0; }
.mock-inbox .it { flex:1; height:5px; border-radius:3px; background:var(--border-2); }
.mock-inbox .thread { border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2); padding:12px; display:flex; flex-direction:column; gap:10px; }
.mock-inbox .reply { margin-top:auto; border:1px solid var(--border); border-radius:var(--r-sm);
  padding:9px 12px; font-size:12px; font-weight:500; color:var(--text-3); display:flex; align-items:center;
  background:var(--surface); }
.mock-inbox .reply::after { content:''; width:1.5px; height:13px; background:var(--primary);
  margin-left:6px; animation:blink 1.1s steps(1) infinite; }
@media (max-width:560px){ .mock-inbox { grid-template-columns:1fr; } .mock-inbox .il { flex-direction:row; overflow:hidden; } }
.mock-queue { display:flex; flex-direction:column; gap:6px; }
.mock-queue .qr { display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border); }
.mock-queue .qt { flex:1; height:6px; border-radius:3px; background:var(--border-2); }
.mock-queue .qs { font-size:11px; font-weight:510; padding:3px 9px; border-radius:var(--r-xs); white-space:nowrap; }
.mock-queue .qs.done { background:var(--ok-soft); color:var(--ok); }
.mock-queue .qs.run { background:var(--primary-soft); color:var(--primary-text); }
.mock-queue .qs.wait { background:var(--surface-3); color:var(--text-2); }
.mock-queue .qbar { width:70px; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden; }
.mock-queue .qbar i { display:block; height:100%; width:47%; border-radius:2px;
  background:var(--primary); animation:qgrow 3.4s var(--ease-io) infinite; }
@keyframes qgrow { 0%{width:12%;} 60%{width:84%;} 100%{width:12%;} }

/* ═══ srovnávací tabulka ═══════════════════════════════════════════════════ */
.cmp-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--sh-1); }
table.cmp-table { width:100%; border-collapse:collapse; min-width:640px; font-size:14px; }
.cmp-table th, .cmp-table td { padding:12px 18px; text-align:left; border-bottom:1px solid var(--border); }
.cmp-table thead th { font-family:var(--display); font-size:14px; font-weight:590;
  letter-spacing:-0.012em; position:sticky; top:0; background:var(--surface); z-index:2; }
.cmp-table thead th:nth-child(2) { color:var(--text); }
.cmp-table thead th:nth-child(3) { color:var(--primary-text); }
.cmp-table td:nth-child(2), .cmp-table td:nth-child(3),
.cmp-table th:nth-child(2), .cmp-table th:nth-child(3) { text-align:center; }
.cmp-table .grp td { font-family:var(--mono); font-size:10px; font-weight:500; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-3); background:var(--surface-2); padding:8px 18px; }
.cmp-table .y { color:var(--primary-text); font-weight:510; } .cmp-table .n { color:var(--text-3); }
.cmp-table td:first-child { color:var(--text-2); }

/* ═══ kalkulačka míst ══════════════════════════════════════════════════════ */
.seat-calc { max-width:660px; margin:0 auto; border:1px solid var(--border);
  border-radius:var(--radius); padding:28px; background:var(--surface); box-shadow:var(--sh-1); }
.seat-calc input[type=range] { width:100%; accent-color:var(--primary); height:34px; cursor:pointer; }
.seat-out { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-top:6px; }
.seat-out .amt { font-family:var(--display); font-weight:590; font-size:32px; letter-spacing:-0.024em; }
.seat-out .amt small { font-size:15px; color:var(--text-2); font-weight:450; }
.seat-note { font-size:13px; color:var(--text-3); margin-top:10px; }

/* ═══ kontakt ══════════════════════════════════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start; }
@media (max-width:880px){ .contact-grid { grid-template-columns:1fr; } }
.cform { border:1px solid var(--border); border-radius:var(--radius); padding:26px;
  background:var(--surface); display:flex; flex-direction:column; gap:14px; box-shadow:var(--sh-1); }
.cform label { font-family:var(--mono); font-size:10.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-3); }
.cform input, .cform select, .cform textarea {
  width:100%; background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg);
  padding:0 12px; height:38px; color:var(--text); font-family:var(--font); font-size:14.5px;
  margin-top:6px; outline:none;
  transition:border-color var(--out) var(--ease-io), box-shadow var(--out) var(--ease-io); }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  border-color:var(--primary); box-shadow:var(--focus); transition-duration:var(--in); }
.cform textarea { min-height:110px; height:auto; padding:11px 12px; resize:vertical; line-height:1.55; }

/* ═══ FAQ kategorie ════════════════════════════════════════════════════════ */
.faq-cats { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:38px; }
.faq-cats a { font-size:13px; font-weight:510; padding:0 13px; height:32px; display:inline-flex;
  align-items:center; border-radius:var(--r-lg); border:1px solid var(--border);
  background:var(--surface); color:var(--text-2); letter-spacing:-0.008em;
  transition:border-color var(--out) var(--ease-io), color var(--out) var(--ease-io),
             background-color var(--out) var(--ease-io); }
.faq-cats a:hover { border-color:var(--border-2); color:var(--text); background:var(--surface-2);
  transition-duration:var(--in); }
.faq-h { font-family:var(--display); font-size:19px; font-weight:590; letter-spacing:-0.018em;
  margin:42px 0 14px; display:flex; align-items:center; gap:10px; }
.faq-h::before { content:none; }

/* ═══ dva režimy ═══════════════════════════════════════════════════════════ */
.modes-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--border); }
@media (max-width:880px){
  .modes-grid { grid-template-columns:1fr; }
  .mode-card { border-right:none !important; border-bottom:1px solid var(--border);
    padding:26px 0 !important; }
  .mode-card:last-child { border-bottom:none; }
}
.mode-card { border:none; border-right:1px solid var(--border); border-radius:0;
  padding:30px 28px 30px 0; background:none; position:relative; overflow:visible;
  display:flex; flex-direction:column; gap:12px; transition:none; }
.mode-card:last-child { border-right:none; padding-right:0; padding-left:28px; }
.mode-card:hover { transform:none; }
.mode-card.std, .mode-card.akce { border-color:var(--border); }
.mode-card h3 { font-family:var(--display); font-size:22px; font-weight:590; letter-spacing:-0.022em; }
.mode-card p { color:var(--text-2); font-size:15px; line-height:1.6; }
.mode-card .go { margin-top:auto; color:var(--primary-text); font-weight:510; font-size:14px;
  display:inline-flex; align-items:center; gap:5px;
  transition:gap var(--out) var(--ease-io); }
.mode-card .go:hover { text-decoration:none; gap:9px; transition-duration:var(--in); }

/* ═══ nápověda ═════════════════════════════════════════════════════════════ */
.help-search { width:100%; max-width:520px; margin:0 auto; display:block; background:var(--surface);
  border:1px solid var(--border-2); border-radius:var(--r-lg); padding:0 18px; height:42px;
  color:var(--text); font-family:var(--font); font-size:15px; outline:none;
  transition:border-color var(--out) var(--ease-io), box-shadow var(--out) var(--ease-io); }
.help-search:focus { border-color:var(--primary); box-shadow:var(--focus); transition-duration:var(--in); }
/* Mřížka se roztáhne až na rámeček .wrap (záporné okraje o gutter), takže
   svislá linka posledního sloupce splyne s nosnou linkou stránky místo aby
   visela ve vzduchu.  Padding je symetrický → text se nedotýká dělítka. */
.help-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:0;
  border-top:1px solid var(--border);
  margin-left:calc(var(--gut) * -1); margin-right:calc(var(--gut) * -1); }
.help-card { display:flex; flex-direction:column; gap:8px; background:none; border:none;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  border-radius:0; padding:24px var(--gut);
  transition:background-color var(--out) var(--ease-io); }
.help-card:hover { transform:none; background:var(--surface-2); transition-duration:var(--in); }
.help-card .hc-ic { font-size:22px; color:var(--primary); }
.help-card h3 { font-family:var(--display); font-size:16px; font-weight:590; line-height:1.35;
  letter-spacing:-0.014em; }
.help-card p { color:var(--text-2); font-size:13.5px; flex:1; line-height:1.55; }
.help-card .hc-go { color:var(--primary-text); font-size:13px; font-weight:510; }
@media (max-width:600px){ .help-card { border-right:none; padding-right:0; } }

.art-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:44px; align-items:start; }
@media (max-width:880px){ .art-grid { grid-template-columns:1fr; } }
.art { font-size:16px; line-height:1.75; color:var(--text-2); max-width:68ch; letter-spacing:-0.006em; }
.art h2 { font-family:var(--display); font-size:20px; font-weight:590; letter-spacing:-0.018em;
  color:var(--text); margin:30px 0 10px; }
.art p { margin-bottom:14px; }
.art b { color:var(--text); font-weight:510; }
.art a { color:var(--primary-text); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--primary); text-decoration-thickness:1px; }
.art a:hover { text-decoration-color:var(--primary); }
.art ol, .art ul { margin:0 0 14px 22px; }
.art li { margin-bottom:7px; }
.art .note { background:var(--primary-soft); border:1px solid var(--primary-line);
  border-radius:var(--r-lg); padding:13px 16px; font-size:14px; margin:16px 0; color:var(--text-2); }
.art-help { border-top:1px solid var(--border); margin-top:30px; padding-top:18px;
  font-size:13.5px; color:var(--text-3); }
.art-side { position:sticky; top:80px; border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; background:var(--surface); box-shadow:var(--sh-1); }
.art-side h4 { font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-3); margin-bottom:12px; font-weight:500; }
.art-rel { display:flex; gap:9px; align-items:flex-start; padding:8px 0; font-size:13px;
  color:var(--text-2); border-bottom:1px solid var(--border); line-height:1.45;
  transition:color var(--out) var(--ease-io); }
.art-rel:last-child { border-bottom:none; }
.art-rel:hover { color:var(--text); transition-duration:var(--in); }
.art-rel .material-icons-outlined { font-size:16px; color:var(--primary); flex:none; margin-top:1px; }
.art-rel.all { color:var(--primary-text); font-weight:510; }

/* ═══ stavová stránka ══════════════════════════════════════════════════════ */
.st-banner { display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:590; font-size:clamp(16px,2.4vw,20px); letter-spacing:-0.018em;
  padding:10px 20px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--surface); }
.st-banner.ok { border-color:var(--primary-line); background:var(--ok-soft); color:var(--primary-text); }
.st-banner.warn { border-color:#EFD9AE; background:var(--warn-soft); color:var(--warn); }
.st-banner.down { border-color:#F0C8C2; background:var(--err-soft); color:var(--err); }
.st-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.st-dot.ok { background:var(--ok); box-shadow:none; }
.st-dot.warn { background:var(--warn); box-shadow:none; }
.st-dot.down { background:var(--err); box-shadow:none; }
.st-dot.chk { background:var(--text-4); animation:stPulse 1.2s ease-in-out infinite; }
@keyframes stPulse { 50% { opacity:.35; } }
.st-list { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); }
.st-row { display:flex; align-items:center; gap:14px; background:none; border:none;
  border-bottom:1px solid var(--border); border-radius:0; padding:14px 0; }
.st-main { flex:1; min-width:0; }
.st-nm { font-weight:510; font-size:14.5px; color:var(--text); letter-spacing:-0.012em; }
.st-ds { font-size:12.5px; font-weight:500; color:var(--text-3); }
.st-ms { font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--text-2);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.st-empty { display:flex; align-items:center; gap:10px; color:var(--text-2); font-size:14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:15px 18px; }
.st-inc { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:12px; box-shadow:var(--sh-1); }
.st-inc-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.st-inc-h b { color:var(--text); font-weight:590; }
.st-inc-d { margin-left:auto; font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--text-3); }
.st-inc p { font-size:13.5px; color:var(--text-2); margin:0; }
.st-pill { font-family:var(--mono); font-size:10px; font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; padding:3px 8px; border-radius:var(--r-xs); }
.st-pill.ok { background:var(--ok-soft); color:var(--ok); }
.st-pill.warn { background:var(--warn-soft); color:var(--warn); }
.st-pill.down { background:var(--err-soft); color:var(--err); }

/* ═══ responzivita ═════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .chan-wrap { grid-template-columns:1fr; gap:40px; }
  .mock-body { grid-template-columns:1fr; } .mock-side { display:none; }
  .mock-cols { grid-template-columns:1fr 1fr; }
}
/* Navigace se sbalí dřív, než odkazy dojdou k logu.  Sedm položek + tlačítko
   potřebuje ~940 px; pod tím se překrývaly s brandem. */
.nav-links a.navlink { white-space:nowrap; }
@media (max-width:940px) {
  .nav-links { position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:2px; padding:14px 20px 22px; background:var(--bg);
    border-bottom:1px solid var(--border); transform:translateY(-120%);
    transition:transform var(--mid) var(--ease-io); }
  .nav-links.open { transform:none; }
  .nav-links a.navlink { padding:11px 4px; font-size:15.5px; }
  .nav-toggle { display:block; } .nav-links .btn { justify-content:center; margin-top:6px; }
}
@media (max-width:640px) {
  :root { --gut:20px; }
  section > .wrap { padding-top:64px; padding-bottom:64px; }
  .hero > .wrap { padding-top:56px; }
  .mock-cols { grid-template-columns:1fr; } .mcol:nth-child(n+2) { display:none; }
  .mock { margin-top:40px; }
  /* Buňky pod sebe.  POZOR: záporné okraje (kterými se mřížka na širokém
     displeji roztahuje až na rám .wrap) se tady MUSÍ zrušit — jinak jediný
     sloupec visí 20 px za okrajem obsahu a text začíná 1 px od kraje displeje,
     zatímco nadpisy mají 21 px.  Zrušit se musí i vodorovný padding buňky,
     jinak by text naopak odskočil o 20 px dovnitř. */
  .stats, .features, .pricing-grid { grid-template-columns:1fr; }
  .stats, .features, .help-grid { margin-left:0; margin-right:0; }
  .stats .stat, .features .feature, .help-grid .help-card {
    padding-left:0; padding-right:0; border-right:none; }
  .stats .stat:last-child, .features .feature:last-child { border-bottom:none; }
}

/* ═══ omezený pohyb ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; filter:none; transform:none; }
  .hero-title .w > b { filter:none; opacity:1; }
  html { scroll-behavior:auto; }

  /* Zkrácení animace na 0,001 ms vrátí prvek do JEHO VLASTNÍCH stylů, ne do
     posledního keyframu — u překryvů render-editoru to znamená, že úvodní
     karta navždy zakryje video a naopak zapečená grafika zmizí.  Proto se
     tady staví staticky ta scéna, kterou má divák vidět. */
  .re-intro { display:none; }
  .re-end { display:none; }
  .re-logo { opacity:1; }
  .re-l3 { opacity:1; transform:none; }
  .re-playhead { left:44%; }
  .re-scene { inset:0; }
  /* tři „přetahované" události kalendáře leží bez animace na sobě v buňce 1 */
  .ev.d1 { transform:translate(calc(100% + 6px),34px); }
  .ev.d2 { transform:translate(calc(400% + 24px),34px); }
  .ev.d3 { transform:translate(calc(200% + 12px),64px); }
}