:root{
  /* ── barvy značky ─────────────────────────────────────────────── */
  --navy:#12253f; --navy-2:#1a2f4d; --navy-deep:#0b1a2e;
  --blue:#0b6bcb; --blue-dark:#0958a5; --blue-light:#f0f6ff;
  --green:#17784a; --green-bg:#e7f8ee; --green-bg-2:#f2fbf6; --green-on-dark:#5fd6a0;

  /* ── plochy a linky ───────────────────────────────────────────── */
  --bg:#fbfbfc; --surface:#fff; --surface-2:#f7f8fa; --surface-3:#fafbfc;
  --surface-4:#f4f5f7; --hero-bg:#eef4fb;
  --border:#e6e8ec; --border-strong:#dcdfe4; --border-hatch:#dfe3e9; --hatch:#eceff3;
  --amber-bg:#fff8e8; --amber-border:#f0dcb0; --warn-ink:#4a3400; --warn-line:#96690a;
  --warn-fill:#ffe9a8; --warn-text:#5c3f00;

  /* ── text ─────────────────────────────────────────────────────── */
  --ink:#1c2024; --text:#2c343d; --text-muted:#3c4653; --text-soft:#4a5563;
  --gray:#636e7c; --gray-2:#5c6470;
  --on-dark:#c3d2e4; --on-dark-2:#8fa6c4; --on-dark-3:#a9bdd6;
  --on-dark-accent:#9dc3ec; --on-dark-kicker:#7ea8db; --on-dark-soft:#dbe6f2;

  /* ── barvy bloků v mockupech (všechny ≥ 4,5:1 proti bílé) ──────── */
  --mock-blue:#2f6db8; --mock-navy:#12253f; --mock-teal:#1f7a6f; --mock-amber:#8a5a12;

  /* ── písmo ────────────────────────────────────────────────────── */
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans','Segoe UI',Helvetica,Arial,sans-serif;
  /* stupnice: 7 kroků, display 2,0× nad druhým největším */
  --t-xs:13px;    /* popisky, drobný text, meta, mockupy */
  --t-sm:15px;    /* navigace, seznamy, text v kartách   */
  --t-base:17px;  /* běžný text a leady                  */
  --t-md:21px;    /* nadpisy karet, h3, citace           */
  --t-lg:26px;    /* h3 ve featrow, h2 v článku          */
  --t-xl:32px;    /* h2 sekcí                            */
  --t-display:64px; /* h1                                */

  /* ── rozestupy: mřížka 4 px ───────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --s-24:96px; --s-35:140px;

  /* ── rádiusy: 4 kroky se záměrem ──────────────────────────────── */
  --r-sm:6px;   /* drobné prvky, štítky, bloky v tabuli */
  --r-md:10px;  /* tlačítka, řádky, menší karty         */
  --r-lg:14px;  /* karty a rámy                        */
  --r-xl:20px;  /* velké plochy, telefon               */
  --r-pill:999px;

  /* ── stíny: vrstvené (ambientní + směrový) ────────────────────── */
  --sh-1:0 1px 2px rgba(18,37,63,.05), 0 2px 8px rgba(18,37,63,.05);
  --sh-2:0 1px 2px rgba(18,37,63,.06), 0 12px 32px rgba(18,37,63,.10);
  --sh-3:0 2px 4px rgba(18,37,63,.07), 0 24px 60px rgba(18,37,63,.13);
  --sh-4:0 3px 6px rgba(18,37,63,.08), 0 32px 72px rgba(18,37,63,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* přeskočení navigace klávesnicí */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--navy);
  padding:var(--s-3) var(--s-5);border-radius:0 0 var(--r-md) 0;font-weight:700;font-size:var(--t-sm);text-decoration:none;
  box-shadow:var(--sh-3)}
.skip:focus{left:0}

/* viditelné zaměření klávesnicí (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,summary:focus-visible,details:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)}
header.site a:focus-visible,header.site button:focus-visible,
.section-navy a:focus-visible,footer.site a:focus-visible{outline-color:var(--on-dark-accent)}

/* omezený pohyb (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}
body{margin:0;padding:0;background:var(--bg);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s-6)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--s-6)}
.vis-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* reveal */
.reveal{opacity:1;transform:none}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-stagger.visible>*{transition-delay:calc(var(--i,0)*80ms)}

/* nav */
header.site{background:rgba(18,37,63,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(255,255,255,.08);transition:box-shadow .3s,background .3s}
header.site.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.18);background:rgba(18,37,63,.97)}
.navrow{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) 0;gap:var(--s-5)}
.logo{display:flex;align-items:center;gap:var(--s-3);color:#fff;font-weight:700;font-size:var(--t-md);letter-spacing:-.2px;text-decoration:none;font-family:var(--serif)}
.logo-mark{width:30px;height:30px;border-radius:var(--r-md);background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:var(--t-sm);font-weight:700;color:#fff;flex:none;font-family:var(--serif)}
nav.links{display:flex;align-items:center;gap:var(--s-6)}
nav.links>a,.navdrop>button{color:var(--on-dark);text-decoration:none;font-size:var(--t-sm);background:none;border:none;font-family:var(--sans);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:var(--s-1)}
nav.links>a:hover,.navdrop>button:hover{color:#fff}
.navdrop{position:relative}
.navdrop>button svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .2s}
.navdrop:hover>button svg,.navdrop.openmenu>button svg{transform:rotate(180deg)}
.dropmenu{position:absolute;top:100%;left:-14px;padding-top:var(--s-4);display:none;min-width:320px}
/* focus-within drží klávesnicovou obsluhu i bez JS; .closed dovolí Escape zavřít */
.navdrop:hover .dropmenu,.navdrop:focus-within .dropmenu,.navdrop.openmenu .dropmenu{display:block}
.navdrop.closed .dropmenu{display:none}
.dropinner{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-4);border:1px solid var(--border);padding:var(--s-2);overflow:hidden}
.dropinner a{display:block;padding:var(--s-3);border-radius:var(--r-md);text-decoration:none;color:var(--navy);font-size:var(--t-sm);font-weight:600}
.dropinner a span{display:block;font-weight:400;font-size:var(--t-xs);color:var(--gray);margin-top:2px;line-height:1.45}
.dropinner a:hover{background:var(--blue-light)}
.dropinner .all{border-top:1px solid var(--border);margin-top:var(--s-2);padding-top:var(--s-3);color:var(--blue)}
/* specificita musí dorovnat `nav.links>a`, jinak se background a padding zahodí */
nav.links>a.nav-cta{background:var(--blue);color:#fff;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);font-weight:600;font-size:var(--t-sm);transition:background .2s,transform .2s;text-decoration:none}
nav.links>a.nav-cta:hover{background:var(--blue-dark);transform:translateY(-1px)}
.nav-login{color:var(--on-dark);text-decoration:none;font-size:var(--t-sm)}
.navtoggle{display:none;background:none;border:none;color:#fff;font-size:var(--t-md);cursor:pointer;padding:var(--s-2);line-height:1}
@media (max-width:1000px){
  nav.links{position:absolute;top:60px;left:0;right:0;background:var(--navy);flex-direction:column;align-items:flex-start;gap:0;padding:var(--s-2) var(--s-6) var(--s-5);border-bottom:1px solid rgba(255,255,255,.08);display:none;max-height:80vh;overflow:auto}
  nav.links.open{display:flex}
  nav.links>a{padding:var(--s-3) 0;width:100%}
  .navdrop{width:100%}
  .navdrop>button{padding:var(--s-3) 0;width:100%;justify-content:space-between}
  .dropmenu{position:static;padding-top:0;min-width:0}
  .navdrop:hover .dropmenu,.navdrop:focus-within .dropmenu{display:none}
  .navdrop.openmenu .dropmenu{display:block}
  .dropinner{background:transparent;border:none;box-shadow:none;padding:0 0 var(--s-2) var(--s-3)}
  .dropinner a{color:var(--on-dark);padding:var(--s-2) 0;font-weight:500}
  .dropinner a span{display:none}
  .dropinner a:hover{background:transparent;color:#fff}
  .dropinner .all{border-color:rgba(255,255,255,.12)}
  nav.links>a.nav-cta{width:100%;text-align:center;justify-content:center;margin-top:var(--s-3);padding:var(--s-3) var(--s-4)}
  .navtoggle{display:block}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-6);border-radius:var(--r-md);font-weight:600;font-size:var(--t-sm);text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;cursor:pointer;border:none;min-height:44px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-ghost{background:var(--surface);color:var(--navy);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.micro{font-size:var(--t-xs);color:var(--gray)}
.micro.on-dark{color:var(--on-dark-2)}

/* hero */
.hero{background:linear-gradient(180deg,var(--hero-bg) 0%,var(--surface) 100%);padding:var(--s-16) 0 var(--s-16)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s-12);align-items:center}
/* stejný důvod jako u .featrow — min-content mockupu jinak roztáhne celý dokument */
.hero-grid>*{min-width:0}
.badge-dev{display:inline-flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-6);background:var(--surface);border:1px solid var(--border);color:var(--gray);font-size:var(--t-xs);padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.badge-dev .dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(23,120,74,.5)}50%{opacity:.7;box-shadow:0 0 0 6px rgba(23,120,74,0)}}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(var(--t-xl),6.2vw,var(--t-display));line-height:1.08;letter-spacing:-1.4px;color:var(--navy);margin:0 0 var(--s-5);text-wrap:balance}
.hero h1 .hero-target{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:.22em;align-items:start;text-wrap:wrap}
.hero h1 .hero-prefix{color:var(--navy);font-style:normal}
.hero h1 .hero-accent{color:var(--blue);font-style:italic}
/* Pevný druhý sloupec drží začátek rotujícího textu na stejném místě. JS navíc
   zamkne výšku celého H1 podle nejvyšší varianty, takže neposkočí ani obsah pod ním. */
.hero h1 .rot-wrap{display:block;min-width:0}
.hero h1 .rot-word{display:inline-block;max-width:100%;text-align:left;opacity:1;transition:opacity .35s,transform .35s;font:inherit;color:inherit}
.rot-control{font:inherit;font-size:var(--t-xs);color:var(--text-muted);background:none;border:1px solid currentColor;border-radius:4px;padding:4px 8px;margin:0 0 var(--s-3);cursor:pointer}
.hero h1 .rot-word.swap{opacity:0;transform:translateY(6px)}
.hero-lead{font-size:var(--t-base);line-height:1.6;color:var(--text-muted);margin:0 0 var(--s-6);max-width:52ch}
.hero-checks{list-style:none;margin:0 0 var(--s-7);padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.hero-checks li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-sm);color:var(--text-muted);line-height:1.5}
.tick{flex:none;width:20px;height:20px;border-radius:50%;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-top:1px}
.tick svg{width:11px;height:11px;stroke:var(--blue);stroke-width:3;fill:none}
.hero-ctas{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}
/* Ve dvou sloupcích má nejdelší nezalomitelné slovo „vzduchotechniku“ při
   64 px víc než prostor za „pro“. Celý cílový řádek proto zmenšujeme jednotně
   a dvousloupcový hero zapínáme až tam, kde mockup nesežere šířku nadpisu. */
@media (min-width:1100px){
  .hero-grid{grid-template-columns:1.02fr .98fr}
  .hero h1 .hero-target{font-size:.8em}
}
.hero-visual{position:relative}

/* subpage hero */
.subhero{background:linear-gradient(180deg,var(--hero-bg) 0%,var(--surface) 100%);padding:var(--s-8) 0 var(--s-10)}
/* Dvousloupcová hlavička: vlevo nadpis a tlačítka, vpravo doprovodný text.
   Jednosloupcová verze nechávala vpravo přes 500 px prázdna (revize 13. 8.).
   Platí jen pro `.wrap`; stránky ve `wrap-narrow` (články, právní texty) mají
   zůstat jednosloupcové, tam je úzká míra záměr. */
.subhero-grid{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
.subhero-grid>*{min-width:0}
@media (min-width:900px){
  .subhero-grid{grid-template-columns:1.08fr .92fr;grid-template-areas:"nadpis text" "akce text";
    column-gap:var(--s-16);row-gap:var(--s-8);align-items:start}
  .subhero-grid h1{grid-area:nadpis;max-width:15ch;margin-bottom:0}
  .subhero-grid .sh-copy{grid-area:text;padding-top:6px}
  .subhero-grid .sh-akce{grid-area:akce}
}
.sh-copy>*:last-child{margin-bottom:0}
/* line-height a odsazení zvedají klikací plochu drobečku na 26 px (WCAG 2.5.8) */
.crumbs{font-size:var(--t-xs);color:var(--gray);margin-bottom:var(--s-5);line-height:1.4}
.crumbs a{color:var(--gray);text-decoration:none;display:inline-block;padding:var(--s-1) 0}
.crumbs a:hover{color:var(--blue)}
.subhero h1{font-family:var(--serif);font-weight:600;font-size:clamp(var(--t-xl),4.6vw,48px);line-height:1.1;letter-spacing:-1px;color:var(--navy);margin:0 0 var(--s-5);max-width:20ch;text-wrap:balance}
.subhero p.lead{font-size:var(--t-base);line-height:1.6;color:var(--text-muted);margin:0 0 var(--s-5);max-width:50ch}
.subhero p.lead2{font-size:var(--t-sm);line-height:1.7;color:var(--text-soft);margin:0 0 var(--s-7);max-width:52ch}

/* sections — dvě rozteče, ne jedna */
.section{padding:var(--s-24) 0}
.section.major{padding:var(--s-35) 0}
.section.tight{padding:var(--s-16) 0}
.section-alt{background:var(--surface)}
.section-navy{background:var(--navy);color:#fff}
.kicker{font-size:var(--t-xs);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);margin-bottom:var(--s-3)}
.kicker.on-dark{color:var(--on-dark-kicker)}
h2.h{font-family:var(--serif);font-size:var(--t-xl);font-weight:600;color:var(--navy);margin:0 0 var(--s-4);letter-spacing:-.8px;line-height:1.15;text-wrap:balance}
h2.h.on-dark{color:#fff}
p.lead2{font-size:var(--t-base);line-height:1.6;color:var(--text-muted);margin:0 0 var(--s-8);max-width:56ch}
p.lead2.on-dark{color:var(--on-dark)}
.section-head{margin:0 0 var(--s-12);max-width:56ch}
.section-head.centered{text-align:center;margin-left:auto;margin-right:auto}
.section-head.centered p.lead2{margin-left:auto;margin-right:auto}

/* alternating feature rows */
.featrow{display:grid;grid-template-columns:1fr;gap:var(--s-10);align-items:center;padding:var(--s-12) 0;border-top:1px solid var(--border)}
.featrow:first-of-type{border-top:none;padding-top:var(--s-6)}
/* bez min-width:0 vytlačí min-content mockupu celý dokument doprava */
.featrow>*{min-width:0}
@media (min-width:900px){.featrow{grid-template-columns:1fr 1fr;gap:var(--s-16)}.featrow.rev .fr-copy{order:2}}
.featrow .fr-h{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;color:var(--navy);margin:0 0 var(--s-4);letter-spacing:-.5px;line-height:1.2}
.featrow p{font-size:var(--t-base);line-height:1.65;color:var(--text-muted);margin:0 0 var(--s-4)}
.checklist{list-style:none;margin:0 0 var(--s-5);padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.checklist li{display:flex;gap:var(--s-3);font-size:var(--t-sm);line-height:1.6;color:var(--text-muted)}
.checklist li b{color:var(--navy)}
.caption{font-size:var(--t-xs);color:var(--gray);margin-top:var(--s-3)}
.hero-visual>.caption{text-align:center}
.inline-link{font-weight:600;text-decoration:none;font-size:var(--t-sm)}
.inline-link:hover{text-decoration:underline}
/* odkaz vedle tlačítka v tmavé sekci — modrá z .inline-link by na navy propadla */
.inline-link.on-dark{color:var(--on-dark-accent)}

/* skutečné screenshoty aplikace — vždy s popiskem, aby se nepletly s mockupy */
.product-shot{margin:0;min-width:0}
.product-shot>a{display:block;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-3)}
.product-shot picture{display:block}
.product-shot img{display:block;width:100%;height:auto;background:var(--surface-2);transition:transform .25s}
.product-shot>a:hover img{transform:scale(1.008)}
.product-shot figcaption{font-size:var(--t-xs);line-height:1.5;color:var(--gray);margin-top:var(--s-3)}
.product-shot--portrait{max-width:390px;margin-left:auto;margin-right:auto}
.product-shot--portrait img{aspect-ratio:390/844;object-fit:cover;object-position:top}

/* mock visuals */
.mock-card{position:relative;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);border:1px solid var(--border);overflow:hidden}
.mock-card.float{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.mock-top{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);background:var(--surface-2)}
.mock-top span{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
.mock-body{padding:var(--s-3);display:grid;grid-template-columns:56px repeat(3,1fr);gap:1px;background:var(--border)}
.mock-body .mh{background:var(--surface);font-size:var(--t-xs);font-weight:600;color:var(--gray);padding:var(--s-2) var(--s-1);text-align:center}
.mock-body .mt{background:var(--surface);font-size:var(--t-xs);color:var(--gray);padding:var(--s-2) var(--s-1);text-align:right}
.mock-slot{background:var(--surface);min-height:48px;position:relative}
.mock-block{position:absolute;left:2px;right:2px;z-index:1;border-radius:var(--r-sm);font-size:var(--t-xs);line-height:1.25;color:#fff;padding:var(--s-1) var(--s-2);font-weight:600;overflow:hidden}
.mock-block small{display:block;font-weight:400;font-size:var(--t-xs);opacity:.9;line-height:1.3}
.b-blue{background:var(--mock-blue)}.b-navy{background:var(--mock-navy)}
.b-teal{background:var(--mock-teal)}.b-amber{background:var(--mock-amber)}
.float-pill{position:absolute;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:var(--s-3) var(--s-4);font-size:var(--t-xs);display:flex;align-items:center;gap:var(--s-2);border:1px solid var(--border)}
.float-pill.confirm{top:-16px;right:var(--s-3);animation:floaty 6s ease-in-out infinite;animation-delay:.3s}
.float-pill.confirm .ico{width:26px;height:26px;border-radius:50%;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.float-pill.confirm .ico svg{width:14px;height:14px;stroke:var(--green);stroke-width:2.5;fill:none}
.float-pill.confirm strong{display:block;color:var(--navy);font-size:var(--t-xs)}
.float-pill.confirm span.sub{color:var(--gray);font-size:var(--t-xs)}
/* pilulka musí sedět pod kartou, jinak zakryje poslední řádek tabulky */
.float-pill.stats{top:100%;margin-top:var(--s-3);left:var(--s-5);gap:var(--s-4);animation:floaty 6s ease-in-out infinite;animation-delay:.6s}
.float-pill.stats .stat{text-align:center}
.float-pill.stats .stat b{display:block;color:var(--blue);font-size:var(--t-md);font-family:var(--serif);font-variant-numeric:tabular-nums}
.float-pill.stats .stat small{color:var(--gray);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.4px}
.float-pill.stats .divider{width:1px;background:var(--border);align-self:stretch}

.browser-frame{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--sh-3);overflow:hidden}
.browser-frame .bar{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);background:var(--surface-2)}
.browser-frame .bar span{width:10px;height:10px;border-radius:50%;background:var(--border-strong)}
/* tabule je datová mřížka — na úzkém displeji se roluje, neořezává a nedrtí */
.frame-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* planning board mock */
.board{display:grid;grid-template-columns:84px repeat(5,1fr);font-size:var(--t-xs)}
.board div{border-bottom:1px solid var(--border);border-right:1px solid var(--border);min-height:42px;padding:var(--s-1) 6px;position:relative}
.board .bh{background:var(--surface-3);font-weight:700;color:var(--navy);text-align:center;font-size:var(--t-xs);min-height:0;padding:var(--s-2) var(--s-1)}
.board .bh.we{color:var(--gray)}
.board .bn{font-weight:600;color:var(--navy);display:flex;align-items:center}
.board .we{background:var(--surface-4)}
.board .fill{border-radius:var(--r-sm);color:#fff;font-weight:600;padding:var(--s-1) var(--s-2);font-size:var(--t-xs);line-height:1.25;height:100%;display:flex;align-items:center}
.board .half{height:calc(50% - 2px)}
.board .absent{background:repeating-linear-gradient(45deg,var(--hatch),var(--hatch) 5px,var(--border-hatch) 5px,var(--border-hatch) 10px);border-radius:var(--r-sm);height:100%;display:flex;align-items:center;justify-content:center;color:var(--gray-2);font-size:var(--t-xs);font-weight:600}
.board .offered{border:1.6px dashed var(--blue);color:var(--blue);border-radius:var(--r-sm);height:100%;display:flex;align-items:center;justify-content:center;font-size:var(--t-xs);font-weight:600;background:var(--blue-light)}

/* slot list mock (nabídka) */
.slotcard{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--sh-3);overflow:hidden;max-width:420px;margin:0 auto}
.slotcard .sc-top{background:var(--navy);color:#fff;padding:var(--s-5) var(--s-6)}
.slotcard .sc-top b{font-family:var(--serif);font-size:var(--t-md);display:block;margin-bottom:var(--s-1)}
.slotcard .sc-top span{color:var(--on-dark-3);font-size:var(--t-xs)}
.slotcard .sc-body{padding:var(--s-4) var(--s-5) var(--s-5)}
.slotrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-2);font-size:var(--t-sm);color:var(--navy);font-weight:600;transition:border-color .2s,transform .2s}
.slotrow span{display:block;font-weight:400;color:var(--gray);font-size:var(--t-xs);margin-top:2px}
.slotrow .pick{font-size:var(--t-xs);color:var(--blue);font-weight:700;flex:none}
.slotrow.sel{border-color:var(--green);background:var(--green-bg-2)}
.slotrow.sel .pick{color:var(--green)}
.slotrow:hover{border-color:var(--blue);transform:translateX(2px)}
.slotcard .sc-foot{font-size:var(--t-xs);color:var(--gray);text-align:center;padding-top:var(--s-2)}


/* ── klipy: sdílené díly ───────────────────────────────────────────────────
   Šest mockupů na webu přehrává dokola, co se v aplikaci opravdu stane.
   Pravidla platná pro všechny:
   · Základní stav pravidel je KONCOVÝ snímek klipu, ne jeho začátek. Pohyb
     dělají animace s `backwards` navěšené na `.klip.hraje`. Bez JS
     i s omezeným pohybem tak zůstane hotový výsledek, ne prázdný mockup.
   · Nic se nepřidává ani neubírá, mění se jen průhlednost — mockup nemění
     výšku a klip nepřidává layout shift.
   · Pohyb končí do 3,2 s, pak koncový snímek stojí do konce cyklu (5,5 s)
     a klip začne znovu. Smyčku řídí JS tím, že třídu `hraje` odebere a zase
     přidá — dosavadní choreografie se tím nemění.
   · K nekonečné smyčce PATŘÍ tlačítko pauzy (WCAG 2.2.2, Pause Stop Hide).
     Dokud se klip přehrával jednou, byl to právě ten zastavený poslední
     snímek, co pravidlo plnil. Tlačítko musí ležet MIMO prvek `role="img"`,
     jinak je pro čtečku nedosažitelné — od toho je obal `.klip`.
   · Ukazatel myši patří jen tam, kde klikne obsluha té obrazovky. Když změna
     přichází od zákazníka odjinud, kurzor by lhal a klip ho nemá. */
.klip{position:relative}
/* Tiché textové tlačítko v rejstříku popisku pod mockupem. */
.klip-pauza{display:block;margin:var(--s-2) auto 0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--t-xs);color:var(--gray);padding:var(--s-1) var(--s-2);
  border-radius:var(--r-sm);text-decoration:underline;text-underline-offset:2px}
.klip-pauza:hover{color:var(--navy)}
.klip-pauza:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.section-navy .klip-pauza{color:var(--on-dark-3)}
.section-navy .klip-pauza:hover{color:#fff}
.klip-kurzor{position:absolute;width:16px;height:16px;opacity:0;pointer-events:none;z-index:4}
.klip-kurzor svg{width:16px;height:16px;display:block;fill:var(--navy);stroke:#fff;stroke-width:1.1;
  filter:drop-shadow(0 1px 2px rgba(18,37,63,.35))}
.klip-kurzor::after{content:"";position:absolute;left:-15px;top:-15px;width:32px;height:32px;
  border-radius:50%;border:2px solid var(--blue);opacity:0}
/* Na telefonu myš není, dotyk je kroužek. */
.klip-dotyk{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:2px solid var(--blue);background:rgba(11,107,203,.10);opacity:0;pointer-events:none;z-index:4}
/* Pruh se závěrem klipu: modrý říká, co aplikace spočítala, zelený potvrzuje. */
.klip-pruh{display:flex;align-items:flex-start;gap:var(--s-2);border-radius:var(--r-md);
  padding:var(--s-2) var(--s-3);font-size:var(--t-xs);font-weight:600;line-height:1.4}
.klip-pruh svg{flex:none;width:11px;height:11px;margin-top:4px;stroke-width:3;fill:none}
.klip-pruh.modry{background:var(--blue-light);color:var(--blue-dark)}
.klip-pruh.modry svg{stroke:var(--blue)}
.klip-pruh.zeleny{background:var(--green-bg);color:var(--green)}
.klip-pruh.zeleny svg{stroke:var(--green)}

@keyframes k-kurzor{
  0%{opacity:0;transform:translate(26px,26px)}
  18%{opacity:1;transform:translate(18px,18px)}
  55%{opacity:1;transform:translate(0,0)}
  60%{transform:translate(1px,2px)}
  67%{transform:translate(0,0)}
  82%{opacity:1;transform:translate(0,0)}
  100%{opacity:0;transform:translate(5px,-5px)}
}
@keyframes k-vlna{0%{opacity:.75;transform:scale(.3)}100%{opacity:0;transform:scale(1)}}
@keyframes k-dotyk{0%{opacity:0;transform:scale(.35)}30%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes k-puls{0%{opacity:0}35%{opacity:.85}100%{opacity:0}}
@keyframes k-zmizi{0%{opacity:1}100%{opacity:0}}
@keyframes k-objevi{0%{opacity:0;transform:translateY(3px)}100%{opacity:1;transform:none}}
@keyframes k-pruh{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}

/* klip 1/6 — nabídka termínů, jen na úvodní stránce. Koncový snímek: druhý
   termín vybraný, potvrzení vidět. */
.slotcard-anim .sc-overeno{margin-bottom:var(--s-3)}
.slotcard-anim .slotrow{position:relative;transition:none}
.slotcard-anim .slotrow:hover{border-color:var(--border);transform:none}
.slotcard-anim .slotrow.sel:hover{border-color:var(--green)}
.slotcard-anim .slotrow::after{content:"";position:absolute;inset:-1px;border:1.5px solid var(--blue);
  border-radius:var(--r-md);opacity:0;pointer-events:none}
.slotcard-anim .pick{display:grid;justify-items:end}
.slotcard-anim .pick>span{grid-area:1/1;display:block;margin:0;font-size:var(--t-xs);font-weight:700;white-space:nowrap}
.slotcard-anim .p-vybrat{color:var(--blue)}
.slotcard-anim .p-hotovo{color:var(--green)}
.slotcard-anim .slotrow.sel .p-vybrat{opacity:0}
.slotcard-anim .klip-kurzor{right:4px;bottom:6px}
.slotcard-anim .sc-hotovo{margin-top:var(--s-3)}

/* časová osa klipu: pohyb končí ve 3,2 s, pak snímek stojí (WCAG 2.2.2) */
.klip.hraje .slotcard-anim .slotrow::after{animation:k-puls .5s ease-out calc(.5s + var(--i,0)*.18s) 1}
.klip.hraje .slotcard-anim .klip-kurzor{animation:k-kurzor 1.35s cubic-bezier(.4,0,.2,1) 1.45s 1 backwards}
.klip.hraje .slotcard-anim .klip-kurzor::after{animation:k-vlna .5s ease-out 2.2s 1}
.klip.hraje .slotcard-anim .slotrow.sel{animation:sc-vyber .45s ease-out 2.25s 1 backwards}
.klip.hraje .slotcard-anim .slotrow.sel .p-vybrat{animation:k-zmizi .16s ease-out 2.26s 1 backwards}
.klip.hraje .slotcard-anim .p-hotovo{animation:k-objevi .26s ease-out 2.44s 1 backwards}
.klip.hraje .slotcard-anim .sc-hotovo{animation:k-pruh .5s ease-out 2.7s 1 backwards}

@keyframes sc-vyber{
  0%{border-color:var(--border);background:var(--surface);transform:none}
  55%{border-color:var(--green);background:var(--green-bg);transform:translateX(3px)}
  100%{border-color:var(--green);background:var(--green-bg-2);transform:none}
}

/* klip 2/6 — filtr dovedností spočítá kapacitu, jen na stránce kapacit.
   Koncový snímek: filtr „plyn" zapnutý, dva technici vyřazení i s důvodem. */
.capcard-anim .cap-filtr{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);
  position:relative;padding-bottom:var(--s-4);border-bottom:1px solid var(--border)}
.capcard-anim .cf-popis{font-size:var(--t-xs);color:var(--gray);font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;margin-right:var(--s-1)}
.capcard-anim .chip-f{font-size:var(--t-xs);font-weight:600;padding:3px var(--s-3);
  border-radius:var(--r-pill);border:1px solid var(--border-strong);color:var(--text-soft);background:var(--surface)}
.capcard-anim .chip-f.cf-akt{background:var(--blue);border-color:var(--blue);color:#fff;position:relative}
.capcard-anim .klip-kurzor{right:-7px;bottom:-11px}
.capcard-anim .caprow{position:relative}
.capcard-anim .caprow::after{content:"";position:absolute;inset:2px -10px;border:1.5px solid var(--green);
  border-radius:var(--r-md);opacity:0;pointer-events:none}
.capcard-anim .caprow.ne{opacity:.45}
.capcard-anim .f-stack{display:grid;justify-items:end}
.capcard-anim .f-stack>b{grid-area:1/1;white-space:nowrap}
/* Musí přebít `.caprow .free b{color:var(--green)}` — zelená by u chybějící
   dovednosti četla jako výsledek, ne jako důvod vyřazení. */
.capcard-anim .f-stack .f-chybi{color:var(--gray-2);font-size:var(--t-sm);font-weight:700;opacity:0}
.capcard-anim .caprow.ne .f-dny,.capcard-anim .caprow.ne small{opacity:0}
.capcard-anim .caprow.ne .f-chybi{opacity:1}
.capcard-anim .cap-souhrn{margin-top:var(--s-4)}

.klip.hraje .capcard-anim .klip-kurzor{animation:k-kurzor 1.1s cubic-bezier(.4,0,.2,1) .45s 1 backwards}
.klip.hraje .capcard-anim .klip-kurzor::after{animation:k-vlna .5s ease-out 1.15s 1}
.klip.hraje .capcard-anim .cf-akt{animation:cap-chip .22s ease-out 1.2s 1 backwards}
.klip.hraje .capcard-anim .caprow.ano::after{animation:k-puls .5s ease-out calc(1.5s + var(--i,0)*.14s) 1}
.klip.hraje .capcard-anim .caprow.ne{animation:cap-zhasne .28s ease-out calc(1.5s + var(--i,0)*.14s) 1 backwards}
.klip.hraje .capcard-anim .caprow.ne .f-dny,
.klip.hraje .capcard-anim .caprow.ne small{animation:k-zmizi .16s ease-out calc(1.5s + var(--i,0)*.14s) 1 backwards}
.klip.hraje .capcard-anim .caprow.ne .f-chybi{animation:k-objevi .22s ease-out calc(1.68s + var(--i,0)*.14s) 1 backwards}
.klip.hraje .capcard-anim .cap-souhrn{animation:k-pruh .45s ease-out 2.45s 1 backwards}
@keyframes cap-chip{
  0%{background:var(--surface);border-color:var(--border-strong);color:var(--text-soft)}
  100%{background:var(--blue);border-color:var(--blue);color:#fff}
}
@keyframes cap-zhasne{0%{opacity:1}100%{opacity:.45}}

/* klip 3/6 — vybraný den se potvrdí, druhý nabídnutý se uvolní. Jen na
   stránce nabídky termínů. Koncový snímek: středa plná, čtvrtek prázdný.
   Dva stavy jedné buňky leží přes sebe absolutně, ne v gridu: `.board div`
   platí i pro vnořené divy, takže by každý obal navíc přidal řádku 8 px
   a tabule by přetekla z rámu ven. */
.board-anim .prepis{position:relative}
.board-anim .prepis>.o-pred,.board-anim .prepis>.o-po{position:absolute;inset:var(--s-1) 6px;
  height:auto;min-height:0}
.board-anim .prepis .o-pred{opacity:0}
/* Rám drž uvnitř buňky: přesah ven přidá tabuli svislé rolování o 4 px. */
.board-anim .cil::after{content:"";position:absolute;inset:2px 4px;border:1.5px solid var(--green);
  border-radius:var(--r-sm);opacity:0;pointer-events:none}
.board-anim .klip-pruh{margin:var(--s-3) var(--s-4) var(--s-4)}

.klip.hraje .board-anim .ceka .o-pred{animation:brd-ceka 1.1s ease-in-out calc(.35s + var(--i,0)*.16s) 1}
.klip.hraje .board-anim .cil .o-pred{animation:k-zmizi .18s ease-out 1.55s 1 backwards}
.klip.hraje .board-anim .cil .o-po{animation:k-objevi .28s ease-out 1.73s 1 backwards}
.klip.hraje .board-anim .cil::after{animation:k-puls .55s ease-out 1.73s 1}
.klip.hraje .board-anim .uvolneno .o-pred{animation:brd-uvolni .34s ease-out 2.1s 1 backwards}
.klip.hraje .board-anim .klip-pruh{animation:k-pruh .45s ease-out 2.5s 1 backwards}
@keyframes brd-ceka{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes brd-uvolni{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(.94)}}

/* klip 4/6 — vícedenní nasazení vznikne tažením přes tři dny. Na stránce
   plánovací tabule a na úvodní stránce. Koncový snímek: souvislý pruh Út–Čt.

   Pruh se spojuje odebráním vodorovného odsazení buňky a průhledným pravým
   okrajem u prvních dvou dnů. ŽÁDNÝ obal navíc: `.board div` platí i na
   vnořené divy, takže by každý mezistupeň dostal vlastní rám i `min-height`
   a řádek by povyrostl, až by tabule přetekla z rámečku ven.

   Kurzor táhne v posledním dni pruhu a `left:-200%` ho posadí přesně o dva
   sloupce vlevo, tedy na začátek prvního dne. Procenta se u `left` počítají
   ze šířky buňky, takže to drží na každé šířce tabule; `translateX(-200%)`
   by se počítal ze šířky kurzoru a mířil o dva jeho vlastní kroky vedle. */
.board-montaz .mnt{padding-left:0;padding-right:0}
/* Pruh musi byt SOUVISLY. Pruhledny pravy okraj bunky nestaci - 1px spara
   prosviti pozadim a proti tmave navy je dobre videt, takze pruh cte jako tri
   bloky vedle sebe. Vypln proto pres tu sparu prelezne zapornym okrajem;
   `.fill` je diky `.board div` positioned, takze se vykresli az nad ramem. */
.board-montaz .mnt.m1,.board-montaz .mnt.m2{border-right-color:transparent}
.board-montaz .mnt.m1 .fill,.board-montaz .mnt.m2 .fill{margin-right:-1px}
/* I samotna vypln je div uvnitr `.board`, takze i ona nosi svetly ramecek
   vpravo a dole. V bezne tabuli splyva s mrizkou, ve spojenem pruhu je z nej
   svisla linka uprostred - pruh pak cte jako tri bloky. Zmereno na
   `getComputedStyle`, ze snimku to vypadalo jako artefakt vyhlazovani. */
.board-montaz .mnt .fill{border-radius:0;border:0}
.board-montaz .mnt.m1 .fill{border-radius:var(--r-sm) 0 0 var(--r-sm);padding-left:6px}
.board-montaz .mnt.m3 .fill{border-radius:0 var(--r-sm) var(--r-sm) 0}
/* Kurzor je taky div uvnitr `.board`, takze na nej plati `.board div` (0,1,1)
   a prebije `.klip-kurzor` (0,1,0). Bez vyslovneho zruseni si odtud odnese
   TRI veci: `position:relative` (spadne do toku a svych 42 px natahne radek
   tabule z 51 na 93 px), `min-height:42px` a hlavne RAMECKY - uprostred
   tazeni pak tabuli pluje oramovany obdelnik 16x42. Vse tri zmereno; okem
   to pusobilo jako podivny artefakt vykreslovani. */
.board-montaz .klip-kurzor{position:absolute;left:0;bottom:2px;
  height:16px;min-height:0;border:0;padding:0}
.board-montaz .klip-pruh{margin:var(--s-3) var(--s-4) var(--s-4)}

.klip.hraje .board-montaz .klip-kurzor{animation:mnt-tah 1.4s cubic-bezier(.4,0,.2,1) .45s 1 backwards}
.klip.hraje .board-montaz .klip-kurzor::after{animation:k-vlna .5s ease-out 1.9s 1}
.klip.hraje .board-montaz .mnt .fill{animation:k-objevi .3s ease-out calc(.7s + var(--i,0)*.5s) 1 backwards}
.klip.hraje .board-montaz .klip-pruh{animation:k-pruh .45s ease-out 2.3s 1 backwards}
@keyframes mnt-tah{
  0%{opacity:0;left:-200%;transform:translateY(5px)}
  14%{opacity:1;left:-200%;transform:none}
  90%{opacity:1;left:0;transform:none}
  100%{opacity:0;left:0;transform:translate(4px,-4px)}
}

/* klip 5/6 — technik zahájí práci. Jen na stránce mobilu. Pilulka stavu
   i popisky tlačítek jsou opsané z obrazovky „Můj den" v aplikaci. */
.phone-anim .agenda-item{position:relative}
.phone-anim .ai-stav{display:inline-block;font-size:var(--t-xs);font-weight:700;line-height:1.4;
  padding:1px var(--s-2);border-radius:var(--r-pill);margin-bottom:var(--s-1)}
.phone-anim .st-stack{display:grid;justify-items:start}
.phone-anim .st-stack>span{grid-area:1/1}
.phone-anim .st-pred{background:var(--surface-4);color:var(--gray-2);opacity:0}
.phone-anim .st-po{background:var(--green-bg);color:var(--green)}
.phone-anim .ai-tlacitko{display:grid;justify-items:center;margin-top:var(--s-2);position:relative}
.phone-anim .ai-tlacitko>span{grid-area:1/1;width:100%;text-align:center;font-size:var(--t-xs);
  font-weight:700;padding:5px var(--s-3);border-radius:var(--r-md);background:var(--navy);color:#fff}
.phone-anim .tl-pred{opacity:0}
.phone-anim .klip-dotyk{left:50%;top:calc(100% - 12px)}
/* Koncový snímek: rozdělaná zakázka je zelená. Animace níž jde od neutrální. */
.phone-anim .ai-aktivni{border-left-color:var(--green);background:var(--green-bg-2)}

.klip.hraje .phone-anim .klip-dotyk{animation:k-dotyk .6s ease-out .95s 1}
.klip.hraje .phone-anim .tl-pred{animation:k-zmizi .16s ease-out 1.3s 1 backwards}
.klip.hraje .phone-anim .tl-po{animation:k-objevi .24s ease-out 1.46s 1 backwards}
.klip.hraje .phone-anim .st-pred{animation:k-zmizi .16s ease-out 1.4s 1 backwards}
.klip.hraje .phone-anim .st-po{animation:k-objevi .24s ease-out 1.56s 1 backwards}
.klip.hraje .phone-anim .ai-aktivni{animation:ph-aktivni .4s ease-out 1.4s 1 backwards}
@keyframes ph-aktivni{
  0%{border-left-color:var(--border-strong);background:var(--surface-2)}
  100%{border-left-color:var(--green);background:var(--green-bg-2)}
}

/* klip 6/6 — historie zakázky se dopíše sama. Jen na stránce zakázek. */
.feed-anim .fh-stack{display:grid;justify-items:end}
.feed-anim .fh-stack>span{grid-area:1/1}
.feed-anim .fp-pred{opacity:0}
.feed-anim .fi-nova .dot{background:var(--green)}

.klip.hraje .feed-anim .fi-nova{animation:k-objevi .4s ease-out 1.05s 1 backwards}
.klip.hraje .feed-anim .fi-nova .dot{animation:fd-tecka .6s ease-out 1.15s 1}
.klip.hraje .feed-anim .fp-pred{animation:k-zmizi .16s ease-out 1.7s 1 backwards}
.klip.hraje .feed-anim .fp-po{animation:k-objevi .26s ease-out 1.86s 1 backwards}
.klip.hraje .feed-anim .fi-navazna{animation:k-objevi .4s ease-out 2.2s 1 backwards}
@keyframes fd-tecka{0%{box-shadow:0 0 0 0 rgba(23,120,74,.55)}100%{box-shadow:0 0 0 9px rgba(23,120,74,0)}}

/* Globální pravidlo pro omezený pohyb animace nevypíná, jen je zkrátí na
   .01 ms — proto se tady vypínají výslovně. Základní stav je koncový snímek,
   takže se nic neztratí. */
@media (prefers-reduced-motion: reduce){
  .klip *,.klip *::after,.klip *::before{animation:none!important}
}

/* phone mock */
.phone{max-width:290px;margin:0 auto;background:var(--navy);border-radius:var(--r-xl);padding:var(--s-3);box-shadow:var(--sh-4)}
.phone-in{background:var(--surface);border-radius:var(--r-lg);overflow:hidden}
.phone-top{background:var(--navy);color:#fff;padding:var(--s-4) var(--s-5) var(--s-3)}
.phone-top b{font-size:var(--t-sm);display:block}
.phone-top span{font-size:var(--t-xs);color:var(--on-dark-3)}
.phone-body{padding:var(--s-4)}
.agenda-day{font-size:var(--t-xs);font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.8px;margin:var(--s-3) 0 var(--s-2)}
.agenda-item{border-left:3px solid var(--blue);background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s-2) var(--s-3);margin-bottom:var(--s-2)}
.agenda-item b{display:block;font-size:var(--t-xs);color:var(--navy)}
.agenda-item span{display:block;font-size:var(--t-xs);color:var(--gray);margin-top:2px}
.agenda-item.t2{border-color:var(--mock-teal)}
.agenda-item.t3{border-color:var(--mock-amber)}

/* feed mock */
.feedcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--s-6)}
.feedhead{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding-bottom:var(--s-4);border-bottom:1px solid var(--border);margin-bottom:var(--s-4)}
.feedhead b{font-family:var(--serif);font-size:var(--t-md);color:var(--navy);display:block}
.feedhead span{font-size:var(--t-xs);color:var(--gray)}
.pill{font-size:var(--t-xs);font-weight:700;padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);background:var(--blue-light);color:var(--blue);flex:none}
.pill.green{background:var(--green-bg);color:var(--green)}
.feeditem{display:flex;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px dashed var(--border)}
.feeditem:last-child{border-bottom:none}
.feeditem .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--blue);margin-top:5px}
.feeditem .dot.sys{background:var(--border-strong)}
.feeditem b{font-size:var(--t-xs);color:var(--navy);display:block}
.feeditem p{font-size:var(--t-xs);color:var(--gray);margin:2px 0 0;line-height:1.5}
.feeditem time{font-size:var(--t-xs);color:var(--gray);flex:none}

/* capacity mock */
.capcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--s-5) var(--s-6)}
.caprow{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--border)}
.caprow:last-child{border-bottom:none}
.caprow .av{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--t-xs);flex:none}
.caprow .who b{font-size:var(--t-sm);color:var(--navy);display:block}
.caprow .who span{font-size:var(--t-xs);color:var(--gray)}
.caprow .free{margin-left:auto;text-align:right;flex:none}
.caprow .free b{color:var(--green);font-size:var(--t-sm);display:block;font-variant-numeric:tabular-nums}
.caprow .free small{color:var(--gray);font-size:var(--t-xs)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-1)}
.chip{font-size:var(--t-xs);background:var(--blue-light);color:var(--blue);padding:2px var(--s-2);border-radius:var(--r-pill);font-weight:600}

/* cards grid */
.cards{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
.card-f{padding:var(--s-6);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);transition:transform .25s,box-shadow .25s;display:block;text-decoration:none;color:inherit}
.card-f:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.card-f h3{font-size:var(--t-md);font-family:var(--serif);font-weight:600;color:var(--navy);margin:0 0 var(--s-2);letter-spacing:-.3px}
.card-f p{font-size:var(--t-sm);line-height:1.6;color:var(--text-muted);margin:0}
.card-f .more{display:inline-block;margin-top:var(--s-3);font-size:var(--t-sm);font-weight:700;color:var(--blue)}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.cards.cols-3{grid-template-columns:repeat(3,1fr)}}

/* prostý seznam odkazů — alternativa k mřížce karet */
.linklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.linklist li{border-bottom:1px solid var(--border)}
.linklist a{display:flex;align-items:baseline;gap:var(--s-4);padding:var(--s-5) 0;text-decoration:none;color:inherit;transition:padding-left .2s,background .2s}
.linklist a:hover{padding-left:var(--s-3);background:linear-gradient(90deg,var(--blue-light),transparent 60%)}
.linklist b{font-family:var(--serif);font-size:var(--t-md);font-weight:600;color:var(--navy);flex:none;min-width:260px;letter-spacing:-.3px}
/* strop míry: bez něj měl popisek na 1440px 134 znaků na řádek */
.linklist span{font-size:var(--t-sm);color:var(--text-muted);line-height:1.55;max-width:62ch}
.linklist .arr{margin-left:auto;color:var(--blue);font-weight:700;flex:none;font-size:var(--t-sm)}
@media (max-width:759px){.linklist a{flex-direction:column;gap:var(--s-2)}.linklist b{min-width:0}.linklist .arr{margin-left:0}}
/* Obory na úvodní stránce jsou jen názvy, bez popisku. Sloupcové lámání pro mobil
   by tu šipku poslalo na vlastní řádek pod jednořádkový název, proto zůstává řádek. */
/* flex:none z .linklist b nesmí platit i tady: bez zmenšení přeteče dlouhý
   název ven z odkazu a šipka se na 375 px vysune 6-10 px za pravý okraj
   (změřeno 19. 8. 2026 u vzduchotechniky a elektroinstalace). */
.linklist--nazvy b{min-width:0;flex:0 1 auto}
.linklist--nazvy a{align-items:center}
@media (max-width:759px){.linklist--nazvy a{flex-direction:row;align-items:center;gap:var(--s-4)}.linklist--nazvy .arr{margin-left:auto}}

/* steps */
.steps-grid{display:grid;grid-template-columns:1fr;gap:var(--s-7)}
.step-num{width:40px;height:40px;border-radius:50%;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:var(--t-md);margin-bottom:var(--s-3)}
.step-item h3{font-size:var(--t-md);font-family:var(--serif);font-weight:600;color:var(--navy);margin:0 0 var(--s-2);letter-spacing:-.3px}
.step-item p{font-size:var(--t-sm);line-height:1.6;color:var(--text-muted);margin:0}
@media (min-width:760px){.steps-grid{grid-template-columns:repeat(5,1fr);gap:var(--s-5)}}
/* Tři kroky mají víc textu než pět, proto širší sloupce a větší mezera. */
@media (min-width:760px){.steps-grid.steps-3{grid-template-columns:repeat(3,1fr);gap:var(--s-8)}}

/* dark deep dive */
.dive-grid{display:grid;grid-template-columns:1fr;gap:var(--s-12);align-items:center}
.dive-grid>*{min-width:0}
@media (min-width:900px){.dive-grid{grid-template-columns:1fr 1fr}}
.dive-list{list-style:none;margin:var(--s-6) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.dive-list li{display:flex;gap:var(--s-3);font-size:var(--t-sm);color:var(--on-dark-soft);line-height:1.6}
.dive-list b{color:#fff}
/* tlačítko a doplňkový odkaz vedle sebe, na mobilu pod sebou */
.dive-akce{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);margin-top:var(--s-6)}
.tick2{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(11,107,203,.25);display:flex;align-items:center;justify-content:center;margin-top:1px}
.tick2 svg{width:11px;height:11px;stroke:var(--on-dark-accent);stroke-width:3;fill:none}
/* pricing */
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-4);max-width:760px;margin:0 auto}
.price-head{background:var(--navy);color:#fff;padding:var(--s-8)}
.price-head .tag2{display:inline-block;background:rgba(11,107,203,.25);color:var(--on-dark-accent);font-size:var(--t-xs);font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);margin-bottom:var(--s-3)}
.price-head h3{font-family:var(--serif);font-size:var(--t-lg);margin:0 0 var(--s-2);font-weight:600;letter-spacing:-.5px}
.price-head p{font-size:var(--t-sm);line-height:1.6;color:var(--on-dark);margin:0;max-width:52ch}
.price-num{display:flex;align-items:baseline;gap:var(--s-2);margin-top:var(--s-6)}
.price-num .num{font-family:var(--serif);font-size:var(--t-xl);font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.price-num .per{color:var(--on-dark-2);font-size:var(--t-sm)}
.price-body{padding:var(--s-8)}
.price-list{list-style:none;margin:0 0 var(--s-7);padding:0;display:grid;grid-template-columns:1fr;gap:var(--s-3)}
@media (min-width:600px){.price-list{grid-template-columns:1fr 1fr}}
.price-list li{display:flex;gap:var(--s-3);font-size:var(--t-sm);color:var(--text-muted);line-height:1.5}
.price-list li b{color:var(--navy)}

/* FAQ */
.faq{max-width:760px}
details.faq-item{border-bottom:1px solid var(--border);padding:var(--s-5) 0}
details.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:var(--t-md);font-family:var(--serif);font-weight:600;color:var(--navy);gap:var(--s-4);letter-spacing:-.2px}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary .plus{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);position:relative;transition:transform .25s}
details.faq-item summary .plus::before,details.faq-item summary .plus::after{content:'';position:absolute;background:var(--navy);top:50%;left:50%;transform:translate(-50%,-50%)}
details.faq-item summary .plus::before{width:9px;height:1.6px}
details.faq-item summary .plus::after{width:1.6px;height:9px;transition:opacity .2s}
details.faq-item[open] summary .plus{transform:rotate(180deg)}
details.faq-item[open] summary .plus::after{opacity:0}
details.faq-item p{font-size:var(--t-base);line-height:1.65;color:var(--text-muted);margin:var(--s-3) 0 0;max-width:62ch}

/* related */
.rel-grid{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media (min-width:800px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);text-decoration:none;display:block;transition:transform .2s,box-shadow .2s}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.rel-card b{display:block;font-size:var(--t-md);font-family:var(--serif);font-weight:600;color:var(--navy);margin-bottom:var(--s-2);letter-spacing:-.3px}
.rel-card p{font-size:var(--t-sm);line-height:1.6;color:var(--text-muted);margin:0}
/* karta bez afordance nevypadá jako odkaz — šipka to řekne dřív než kurzor */
.rel-arr{display:inline-block;margin-top:var(--s-3);color:var(--blue);font-weight:700;font-size:var(--t-sm);transition:transform .2s}
.rel-card:hover .rel-arr{transform:translateX(3px)}

/* final band */
.final-band{text-align:center}
.final-band h2{font-family:var(--serif);font-size:var(--t-xl);color:#fff;margin:0 0 var(--s-3);font-weight:600;letter-spacing:-.8px;text-wrap:balance}
/* vystředěný text bez stropu měl 126 znaků na řádek — nejhůř čitelné místo webu */
.final-band p{color:var(--on-dark);font-size:var(--t-base);margin:0 auto var(--s-7);line-height:1.6;max-width:54ch}

/* blog */
.postlist{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
@media (min-width:760px){.postlist{grid-template-columns:1fr 1fr}}
.postcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-6);text-decoration:none;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.postcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.postmeta{font-size:var(--t-xs);color:var(--gray);display:flex;gap:var(--s-3);align-items:center;margin-bottom:var(--s-3);flex-wrap:wrap}
.postmeta .cat{background:var(--blue-light);color:var(--blue);font-weight:700;padding:2px var(--s-2);border-radius:var(--r-pill)}
.postcard h3{font-family:var(--serif);font-size:var(--t-md);font-weight:600;color:var(--navy);margin:0 0 var(--s-3);line-height:1.25;letter-spacing:-.3px}
/* nejnovější článek přes celou šířku: dá výpisu hlavu a srovná lichý počet.
   Uvnitř dva sloupce, jinak by titulek stál sám v levé třetině široké karty. */
@media (min-width:760px){
  .postcard--lead{grid-column:1/-1;padding:var(--s-8);display:grid;
    grid-template-columns:1.05fr .95fr;column-gap:var(--s-12);row-gap:var(--s-4);align-items:start}
  .postcard--lead .postmeta{grid-column:1;grid-row:1}
  .postcard--lead h3{grid-column:1;grid-row:2;font-size:var(--t-lg);max-width:18ch;margin-bottom:0}
  .postcard--lead p{grid-column:2;grid-row:1/4;font-size:var(--t-base);align-self:center;margin:0}
  .postcard--lead .more{grid-column:1;grid-row:3;margin-top:0}
}
.postcard p{font-size:var(--t-sm);line-height:1.6;color:var(--text-muted);margin:0 0 var(--s-4)}
.postcard .more{margin-top:auto;font-size:var(--t-sm);font-weight:700;color:var(--blue)}

/* article */
.article{font-size:var(--t-base);line-height:1.75;color:var(--text)}
/* první prvek nesmí do sekce přidávat vlastní horní margin — dělá to mrtvé pásmo pod hlavičkou */
.article>*:first-child{margin-top:0}
.article h2{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;color:var(--navy);margin:var(--s-12) 0 var(--s-4);letter-spacing:-.5px;line-height:1.2}
.article h3{font-size:var(--t-md);font-family:var(--serif);font-weight:600;color:var(--navy);margin:var(--s-8) 0 var(--s-3);letter-spacing:-.2px}
.article p{margin:0 0 var(--s-5)}
.article ul,.article ol{margin:0 0 var(--s-6);padding-left:var(--s-6)}
.article li{margin-bottom:var(--s-2)}
.article blockquote{margin:var(--s-7) 0;padding:var(--s-5) var(--s-6);background:var(--blue-light);border-left:3px solid var(--blue);border-radius:0 var(--r-md) var(--r-md) 0;font-size:var(--t-base);color:var(--navy)}
.article blockquote p:last-child{margin:0}
.article table{width:100%;border-collapse:collapse;margin:0 0 var(--s-6);font-size:var(--t-sm)}
.article th{background:var(--navy);color:#fff;text-align:left;padding:var(--s-3) var(--s-4);font-size:var(--t-sm);position:sticky;top:0}
.article td{border-bottom:1px solid var(--border);padding:var(--s-3) var(--s-4);vertical-align:top}
.article .callout{background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);margin:var(--s-7) 0;font-size:var(--t-base);line-height:1.7}
.article .callout b{color:var(--navy)}
.article a{font-weight:600}
.postbanner{background:var(--navy);border-radius:var(--r-lg);padding:var(--s-7) var(--s-8);color:#fff;margin:var(--s-10) 0 0}
.postbanner h3{font-family:var(--serif);font-size:var(--t-md);margin:0 0 var(--s-2);font-weight:600;color:#fff}
.postbanner p{color:var(--on-dark);font-size:var(--t-sm);margin:0 0 var(--s-5);line-height:1.6}
/* callout se seznamem uvnitř (blok „ve zkratce" na začátku článku) */
.article .callout>:last-child{margin-bottom:0}
.article .callout ul,.article .callout ol{margin-top:var(--s-3)}
.article .faq{margin:var(--s-7) 0 0}

/* nevyplněné údaje - musí být vidět na první pohled, ať se web nenasadí s prázdnými poli */
.doplnit{background:var(--warn-fill);border:1px dashed var(--warn-line);border-radius:var(--r-sm);padding:1px var(--s-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;font-weight:700;color:var(--warn-text);
  white-space:nowrap}
.varovani{background:var(--amber-bg);border:2px solid var(--warn-line);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);
  margin:0 0 var(--s-8);font-size:var(--t-sm);line-height:1.6;color:var(--warn-ink)}
.varovani b{display:block;margin-bottom:var(--s-2);font-size:var(--t-base)}

/* srovnávací tabulka */
.srovnani{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin:0 0 var(--s-3);min-width:560px}
.srovnani th{background:var(--navy);color:#fff;text-align:left;padding:var(--s-3) var(--s-4);font-size:var(--t-sm);font-weight:600;position:sticky;top:0}
.srovnani th:first-child{border-radius:var(--r-md) 0 0 0}
.srovnani th:last-child{border-radius:0 var(--r-md) 0 0}
.srovnani td{border-bottom:1px solid var(--border);padding:var(--s-3) var(--s-4);vertical-align:top;line-height:1.55}
.srovnani tr:nth-child(even) td{background:var(--surface)}
.srovnani td:first-child{font-weight:600;color:var(--navy)}
.srovnani .ano{color:var(--green);font-weight:700}
.srovnani .ne{color:var(--gray)}
.tabulka-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--s-6)}

/* footer */
footer.site{background:var(--navy);color:var(--on-dark);padding:var(--s-12) 0 var(--s-8)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--s-8);padding-bottom:var(--s-8);border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:var(--s-6)}
@media (min-width:760px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot-brand .logo{margin-bottom:var(--s-3)}
.foot-brand p{font-size:var(--t-xs);color:var(--on-dark-2);line-height:1.6;max-width:280px}
.foot-col .foot-h{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--on-dark-2);margin:0 0 var(--s-4);font-family:var(--sans)}
.foot-col a{display:block;color:var(--on-dark);text-decoration:none;font-size:var(--t-xs);margin-bottom:var(--s-3)}
.foot-col a:hover{color:#fff}
footer.site .legal{font-size:var(--t-xs);color:var(--on-dark-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-3);align-items:center}
footer.site .legal a{color:var(--on-dark-2);text-decoration:none}
footer.site .legal a:hover{color:#fff;text-decoration:underline}
footer.site .legal .legal-links{display:flex;gap:var(--s-4);flex-wrap:wrap}

/* drobné pomocné třídy — místo inline style v HTML */
.section-more{text-align:center;margin-top:var(--s-8)}
.cta-note{margin-top:var(--s-4)}
.mt-6{margin-top:var(--s-6)}
.section.pull-top{padding-top:var(--s-12)}
.codebox{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s-4) var(--s-5);font-size:var(--t-sm);overflow-x:auto}
/* výška bloků v ukázce rozvrhu — odvozená od délky zásahu, ne od oka */
.mock-block.mb-s{top:2px;height:44px}
.mock-block.mb-m{top:2px;height:70px}
.mock-block.mb-l{top:2px;height:140px}

/* důkazní pás pod hero — čtyři ověřitelné věci. Cizí loga ani počty zákazníků
   tu být nesmí, dokud nejsou doložené (audit 23. 8. 2026). */
.section.proof{padding-top:var(--s-8);padding-bottom:var(--s-8);border-bottom:1px solid var(--border);background:var(--surface)}
.proofbar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s-5)}
@media (min-width:600px){.proofbar{grid-template-columns:1fr 1fr;gap:var(--s-6)}}
@media (min-width:1000px){.proofbar{grid-template-columns:repeat(4,1fr)}}
.proofbar li{display:flex;gap:var(--s-3);font-size:var(--t-xs);line-height:1.55;color:var(--text-muted)}
.proofbar b{display:block;font-size:var(--t-sm);color:var(--navy);font-weight:700;margin-bottom:2px;font-family:var(--serif);letter-spacing:-.2px}
.proofbar a{color:var(--blue);text-decoration:none;font-weight:600}
.proofbar a:hover{text-decoration:underline}

/* karty bez odkazu (situace v sekci „Poznáváte to?“) — nesmí se tvářit klikací */
.cards--static .card-f{cursor:default}
.cards--static .card-f:hover{transform:none;box-shadow:none}

/* před a po — dvousloupcové srovnání bez procent a bez slibů úspor.
   Tabulka by se na 390 px musela rolovat, proto řádky, ne <table>. */
.ba{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.ba li{display:grid;grid-template-columns:1fr;gap:var(--s-4);padding:var(--s-5);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
@media (min-width:760px){.ba li{grid-template-columns:1fr 1fr;gap:var(--s-8);padding:var(--s-5) var(--s-6);align-items:start}}
.ba p{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--text-muted)}
.ba .po{color:var(--navy)}
.ba .lbl{display:block;font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--gray);margin-bottom:var(--s-2)}
.ba .po .lbl{color:var(--green)}