/* ============================================================
   tf-book · homepage
   Tokeny převzaté z TECH FASS Brand Manual v1.0 (Phase A)

   MASTER PRAVIDLO MANUÁLU (str. 04 + 13 + 14):
   „Jeden dokument = jedna sub-brand barva."
   Tato stránka proto používá VÝHRADNĚ book.* + neutrály.
   badge.* tokeny zde nejsou definované záměrně — tf-badge se
   na tf-book stránce jmenuje a taguje, ale nebarví se mauve.
   Kdyby designér chtěl mauve zpět, je to vědomá výjimka z manuálu.
   ============================================================ */
:root{
  /* neutrály */
  --paper:#FFFFFF;
  --frost:#E5E7EB;
  --silver:#D1D5DB;
  --slate:#6B7280;
  --slate-d:#8b93a1; /* světlejší šedá pro text na tmavém (ink) — projde WCAG AA */
  --graphite:#1F2328;
  --ink:#0A0E14;
  /* book (tf-book) — jediná sub-brand hue na této stránce */
  --book-700:#0B576C;
  --book-500:#0E7490;
  --book-100:#D8E9ED;
  --book-050:#F1F7F9;
  /* funkční */
  --success:#15803D;

  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);
  --radius:10px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  color:var(--graphite);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--book-500);outline-offset:3px;border-radius:3px}

/* Přeskočit na obsah — WCAG 2.4.1 (A). Bez něj se člověk na klávesnici
   prokliká 13 prvky hlavičky, než se dostane k textu. Vidět je až při focusu. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:13px 20px;border-radius:0 0 var(--radius) 0;
  font-weight:600;font-size:.9rem;
}
.skip-link:focus{left:0}
.nowrap{white-space:nowrap}/* značka tf-book se nikdy nesmí zalomit */

/* --- mono utility vrstva (signature) --- */
.tag{
  font-family:var(--mono);
  font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--book-700);
}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;font-weight:500;
  letter-spacing:.04em;
  color:var(--slate);
  display:inline-block;
}

/* --- typografická škála (Montserrat) --- */
.display{
  font-weight:800;letter-spacing:-.025em;line-height:1.04;
  font-size:clamp(2.3rem,5.6vw,4rem);
  color:var(--ink);
}
.h2{
  font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  color:var(--ink);
}
.h3{font-weight:700;letter-spacing:-.01em;font-size:1.18rem;color:var(--ink)}
.lede{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:var(--slate);max-width:48ch;line-height:1.6;
}

/* --- tlačítka --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:600;font-size:.95rem;
  padding:13px 22px;border-radius:var(--radius);
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);
}
.btn-primary{background:var(--book-500);color:#fff;box-shadow:0 1px 0 var(--book-700)}
.btn-primary:hover{background:var(--book-700);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-arrow{transition:transform .2s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* Samostatné odkazy se šipkou vycházely na 23 px, tedy o pixel pod minimem
   WCAG 2.5.8 (AA = 24 px). Platí i na desktopu, vizuálně se nic nemění.
   Kontakty v CTA bloku dostávají drobný padding ze stejného důvodu. */
.split-text .link,.price-card .link,.ref .link{min-height:24px;align-items:center}
.cta-band .note a{display:inline-block;min-height:24px}

/* --- zástupná grafika (k výměně za finální vizuál) --- */
.ph{position:relative}
.ph::after{
  content:"[PLACEHOLDER]";position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  background:var(--ink);color:#fff;padding:4px 8px;border-radius:5px;opacity:.82;
}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--frost);
}
/* hlavička smí být širší než tělo (1180), aby měla nav vzduch */
.site-header .wrap{max-width:1320px}
.nav{display:flex;align-items:center;height:74px}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{display:block;height:38px;width:auto;max-width:none}
.nav-links{display:flex;gap:2px;margin-left:clamp(20px,2.4vw,36px)}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--graphite);padding:8px 10px;border-radius:7px;transition:color .15s,background .15s;white-space:nowrap}
.nav-links a:hover{color:var(--book-500);background:var(--book-050)}
.nav-login-m{display:none}/* login jen v mobilním rozbaleném menu */
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:14px;white-space:nowrap}
.nav-phone{display:grid;place-items:center;width:44px;height:44px;border-radius:9px;border:1px solid var(--frost);color:var(--book-700);transition:background .15s,border-color .15s}
.nav-phone:hover{background:var(--book-050);border-color:var(--book-500)}
.nav-phone svg{display:block}
.nav-login{font-size:.875rem;font-weight:600;color:var(--book-700);border:1.5px solid var(--book-500);padding:8px 17px;border-radius:var(--radius);transition:background .15s,color .15s}
.nav-login:hover{background:var(--book-050)}
.nav-actions .btn{padding:9px 18px;font-size:.875rem}
.nav-toggle{display:none;background:none;border:1px solid var(--frost);border-radius:8px;padding:8px;cursor:pointer}
.nav-toggle svg{display:block}

/* --- rozbalovací pododkazy (segmenty provozů / služeb) --- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a::after{content:"";display:inline-block;margin-left:6px;width:7px;height:7px;
  border-right:1.5px solid var(--slate);border-bottom:1.5px solid var(--slate);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s var(--ease)}
.nav-item:hover > a::after,.nav-item:focus-within > a::after{border-color:var(--book-500)}
.nav-sub{position:absolute;top:calc(100% + 4px);left:0;min-width:210px;z-index:60;
  background:var(--paper);border:1px solid var(--frost);border-radius:11px;
  box-shadow:0 22px 44px -26px rgba(11,87,108,.55);padding:6px;
  display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
.nav-sub a{padding:9px 12px;border-radius:7px;font-size:.88rem;font-weight:500;color:var(--graphite);white-space:nowrap}
.nav-sub a:hover{background:var(--book-050);color:var(--book-500)}

/* kotvy na segmenty nesmí zmizet pod lepivou hlavičkou (74 px + vzduch) */
[id^="seg-"]{scroll-margin-top:96px}

/* ============================ HERO ============================ */
/* Mezera pod lištou byla na desktopu 126 px. Cíl bylo alespoň ji zpolovit,
   takže padding jde ze 104 na 40 px — samotný padding nestačilo zpolovit,
   protože do mezery se počítá i výška řádku eyebrow. */
.hero{padding:clamp(22px,3.2vw,40px) 0 clamp(48px,7vw,80px);position:relative;overflow:hidden}
/* Textový sloupec je mírně širší (1.12 vs 1.05), aby se delší claim od klienta
   vešel na 4 řádky místo 5. Při 1.25fr by claim seděl taky, ale mockup by spadl
   na 370 px — takhle si drží 434 px. Viz poznámka u .hero h1. */
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero-mockup img{display:block;width:100%;height:auto}
/* Nový claim od klienta má 62 znaků (původní 52) a nerozpadá se na dvě věty.
   Na globálních 64px vycházel do 5 řádků a 332 px. Zlom mezi 4 a 5 řádky je
   ale přesně na 46 px, což je moc těsné — proto širší sloupec (viz .hero-grid)
   a strop 48 px, kde je do překlopení rezerva.
   Kdyby se claim zkrátil, může se vrátit globální .display i poměr 1.05fr. */
.hero h1{margin:22px 0 0;font-size:clamp(2rem,3.9vw,3rem)}
.hero .lede{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-note{
  font-family:var(--mono);font-size:12px;color:var(--slate);
  margin-top:20px;display:flex;align-items:center;gap:8px;
}
.hero-note .dot{width:7px;height:7px;border-radius:50%;background:var(--success)}

/* browser frame = ukázka reálného produktu */
.browser{
  border:1px solid var(--frost);border-radius:14px;overflow:hidden;background:var(--paper);
  box-shadow:0 30px 60px -34px rgba(11,87,108,.5);
}
.browser-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--book-050);border-bottom:1px solid var(--frost)}
.browser-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--silver)}
.browser-bar .url{margin-left:12px;font-family:var(--mono);font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{display:block;width:100%;height:auto}
.browser.on-dark{border-color:rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.browser.on-dark .browser-bar{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.12)}
.browser.on-dark .browser-bar .dot{background:rgba(255,255,255,.22)}

.live{flex:none;width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(21,128,61,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(21,128,61,.55)}70%{box-shadow:0 0 0 9px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}}
@media (prefers-reduced-motion:reduce){.live{animation:none}}

/* ============================ TRUST STRIP ============================ */
.trust{border-block:1px solid var(--frost);background:var(--book-050)}
/* padding-block, ne zkratka `padding: 26px 0` — ta přebíjela padding-inline
   z .wrap a trust strip pak začínal o celý gutter vlevo než zbytek stránky. */
.trust-inner{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,52px);padding-block:26px}
.trust-lead{font-size:.95rem;color:var(--graphite);max-width:30ch;font-weight:500}
.trust-lead b{color:var(--ink)}
.stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,46px);margin-left:auto}
.stat .num{font-weight:800;font-size:1.7rem;color:var(--book-700);letter-spacing:-.02em;line-height:1}
.stat .cap{font-family:var(--mono);font-size:11px;color:#5f6877;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}

/* ============================ SECTIONS base ============================ */
.section{padding:clamp(64px,9vw,108px) 0}
.section.tight{padding-top:clamp(40px,5vw,60px)}
.section-head{max-width:60ch}
.section-head .h2{margin-top:16px}
.section-head .lede{margin-top:16px}
.section-alt{background:var(--book-050);border-block:1px solid var(--frost)}

/* ============================ UBYTOVÁNÍ (split) ============================ */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:center;margin-top:48px}
.split.flip .split-text{order:2}
.split-text .tag{display:block;margin-bottom:14px}
.split-text h3{font-size:clamp(1.35rem,2.5vw,1.85rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.split-text p{margin-top:14px;color:var(--slate);font-size:1.05rem;max-width:42ch}
.ticks{list-style:none;margin-top:22px;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--graphite)}
.ticks li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:5px;background:var(--book-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l2.8 2.8 6-6.4' fill='none' stroke='%230B576C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.split-text .link{margin-top:24px;display:inline-flex;gap:8px;font-weight:600;color:var(--book-500);font-size:.95rem}

/* ============================ TYPY JEDNOTEK ============================ */
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.type{border:1px solid var(--frost);border-radius:14px;padding:24px;background:var(--paper);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.type:hover{border-color:var(--book-500);transform:translateY(-3px);box-shadow:0 24px 48px -32px rgba(11,87,108,.5)}
.type .ico{width:42px;height:42px;border-radius:11px;background:var(--book-100);display:grid;place-items:center;color:var(--book-700);margin-bottom:16px}
.type h3{font-size:1.05rem;color:var(--ink);font-weight:700}
.type p{margin-top:8px;color:var(--slate);font-size:.9rem}
.type .meta{font-family:var(--mono);font-size:11px;color:var(--book-700);letter-spacing:.05em;margin-top:12px;display:block;text-transform:uppercase}
.note-band{margin-top:34px;border-left:3px solid var(--book-500);padding:4px 0 4px 18px;
  font-size:.95rem;color:var(--graphite);max-width:74ch}
.note-band b{color:var(--ink)}

/* ============================ ŘEŠENÍ (3 úrovně) ============================ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;align-items:stretch}
.tier{border:1px solid var(--frost);border-radius:16px;padding:30px 26px;background:var(--paper);display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.tier:hover{border-color:var(--book-500);box-shadow:0 24px 48px -32px rgba(11,87,108,.5)}
.tier.is-featured{border-color:var(--book-500);border-width:2px;box-shadow:0 24px 48px -34px rgba(11,87,108,.55)}
.tier-idx{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--slate);text-transform:uppercase}
.tier h3{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:10px}
.tier .sub{font-family:var(--mono);font-size:11px;color:var(--book-700);letter-spacing:.06em;text-transform:uppercase;margin-top:8px;display:block}
.tier > p{margin-top:14px;color:var(--slate);font-size:.95rem}
.tier .ticks{margin-top:20px}
.tier .ticks li{font-size:.9rem}
.tier-foot{margin-top:auto;padding-top:24px}
/* ukazatel zapojení operátora */
.meter{margin-top:22px}
.meter-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);display:flex;justify-content:space-between;gap:10px}
.meter-track{margin-top:8px;height:6px;border-radius:99px;background:var(--frost);overflow:hidden}
.meter-fill{height:100%;border-radius:99px;background:var(--book-500)}
.tier-badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--book-100);color:var(--book-700);padding:5px 9px;border-radius:6px;margin-bottom:14px}

/* ============================ HARDWARE ============================ */
.hw{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.hw-card{border:1px solid var(--frost);border-radius:16px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.hw-card:hover{border-color:var(--book-500);transform:translateY(-3px);box-shadow:0 24px 48px -32px rgba(11,87,108,.5)}
.hw-media{background:var(--book-050);border-bottom:1px solid var(--frost);aspect-ratio:4/3;overflow:hidden;position:relative}
.hw-media img{display:block;width:100%;height:100%;object-fit:cover}
.hw-media.contain img{object-fit:contain;padding:14px}
.hw-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1}
.hw-body .tag{display:block;margin-bottom:12px}
.hw-body h3{font-size:1.15rem;font-weight:700;color:var(--ink)}
.hw-body p{margin-top:10px;color:var(--slate);font-size:.92rem}
.hw-spec{list-style:none;margin-top:18px;display:grid;gap:7px;padding-top:16px;border-top:1px solid var(--frost)}
.hw-spec li{font-family:var(--mono);font-size:11.5px;color:var(--graphite);letter-spacing:.02em;display:flex;gap:9px}
.hw-spec li::before{content:"·";color:var(--book-500);font-weight:700}
.hw-band{margin-top:36px;border:1px solid var(--frost);border-radius:14px;overflow:hidden;background:var(--paper)}
.hw-band img{display:block;width:100%;height:auto}
.hw-band figcaption{padding:14px 18px;background:var(--book-050);border-top:1px solid var(--frost);
  font-family:var(--mono);font-size:12px;color:var(--slate);line-height:1.6}

/* ============================ HOW IT WORKS (sequence) ============================ */
.flow{background:var(--ink);color:var(--silver)}
.flow .eyebrow{color:var(--silver)}
.flow .h2{color:#fff}
.flow .section-head .lede{color:var(--silver)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:52px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden}
.step{background:var(--ink);padding:28px 24px 32px;position:relative}
.step .idx{font-family:var(--mono);font-size:12px;color:#5bc6dd;letter-spacing:.1em}
.step h3{color:#fff;font-size:1.12rem;margin-top:40px}
.step p{color:var(--slate-d);font-size:.92rem;margin-top:10px}
.step .arrow{position:absolute;top:26px;right:20px;color:rgba(255,255,255,.25);font-family:var(--mono);font-size:18px}

/* ============================ FEATURES grid ============================ */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.feature{background:var(--paper);border:1px solid var(--frost);border-radius:16px;padding:30px 28px;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.feature:hover{border-color:var(--book-500);transform:translateY(-3px);box-shadow:0 24px 48px -32px rgba(11,87,108,.5)}
.feature .ico{width:46px;height:46px;border-radius:12px;background:var(--book-100);display:grid;place-items:center;color:var(--book-700);margin-bottom:20px}
.feature .ico svg{width:23px;height:23px}
.feature h3{font-size:1.08rem}
.feature p{margin-top:9px;color:var(--slate);font-size:.92rem}

/* kompletní výčet funkcí */
.feat-all{margin-top:24px;scroll-margin-top:96px;background:var(--paper);border:1px solid var(--frost);
  border-radius:18px;padding:34px 32px}
.feat-all-head h3{font-size:1.15rem;font-weight:700;color:var(--ink);margin-top:10px}
.feat-list{margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;row-gap:12px}
.feat-list li{font-size:.92rem}
@media(max-width:640px){.feat-list{grid-template-columns:1fr}}

/* ============================ CENOTVORBA ============================ */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.price-card{border:1px solid var(--frost);border-radius:16px;padding:30px 28px;background:var(--paper);display:flex;flex-direction:column}
.price-card .tag{display:block;margin-bottom:12px}
.price-card h3{font-size:1.15rem;font-weight:700;color:var(--ink)}
.price-card p{margin-top:11px;color:var(--slate);font-size:.95rem}
/* obrázkové grafy cenotvorby (podklad od klienta, tf-badge překreslen do teal) */
.price-graph-img{display:block;width:100%;height:auto;margin-top:auto;border:1px solid var(--frost);
  border-radius:10px;background:#fff}
.price-card p{margin-bottom:20px}
.sum-graph{max-width:860px;margin-inline:auto}
/* skladba předplatného */
.sub-build{margin-top:22px;display:grid;gap:12px}
.sub-part{border:1px solid var(--book-100);background:var(--book-050);border-radius:12px;padding:16px 18px}
.sub-part .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--book-700)}
.sub-part strong{display:block;font-size:.98rem;color:var(--ink);margin-top:6px;font-weight:600}
.sub-part span{display:block;font-size:.88rem;color:var(--slate);margin-top:5px}
.sub-plus{font-family:var(--mono);font-size:13px;color:var(--book-500);text-align:center;letter-spacing:.1em}
/* schodiště podle počtu jednotek */
/* sloupce mají definitivní výšku z gridu, aby % výška pruhu resolvovala */
.scale{margin-top:22px;display:flex;align-items:stretch;gap:8px;height:136px}
.scale-col{flex:1;display:grid;grid-template-rows:1fr auto;row-gap:8px;justify-items:center;align-items:end}
.scale-bar{width:100%;align-self:end;min-height:6px;background:var(--book-100);border:1px solid var(--book-100);border-bottom:none;border-radius:6px 6px 0 0}
.scale-col.flat .scale-bar{background:var(--book-500);border-color:var(--book-500)}
.scale-cap{font-family:var(--mono);font-size:10px;color:var(--slate);letter-spacing:.04em;white-space:nowrap}
.scale-legend{font-family:var(--mono);font-size:11px;color:var(--slate);margin-top:14px;line-height:1.7}
/* postup ve dvou krocích */
.procedure{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
.proc{border:1px solid var(--frost);border-radius:16px;padding:28px 26px;background:var(--paper);position:relative}
.proc-idx{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--book-500)}
.proc h3{font-size:1.08rem;font-weight:700;color:var(--ink);margin-top:12px}
.proc p{margin-top:10px;color:var(--slate);font-size:.92rem}
.proc ul{list-style:none;margin-top:14px;display:grid;gap:7px}
.proc li{font-family:var(--mono);font-size:11.5px;color:var(--graphite);display:flex;gap:9px}
.proc li::before{content:"·";color:var(--book-500);font-weight:700}
.tbd{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--frost);color:var(--graphite);padding:3px 7px;border-radius:5px;white-space:nowrap}
/* součet obou pilířů */
.sum-band{margin-top:20px;border:1px solid var(--frost);border-radius:16px;padding:30px 28px;background:var(--paper)}
.sum-head h3{font-size:1.15rem;font-weight:700;color:var(--ink);margin-top:10px}
.sum-head p{margin-top:11px;color:var(--slate);font-size:.95rem;max-width:62ch}
.scale-sum{height:150px;margin-top:26px}
/* čtyři scénáře */
.scenarios{margin-top:20px}
.scenarios-title{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:18px}
.scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.scenario{border:1px solid var(--frost);border-radius:14px;padding:22px;background:var(--paper);display:flex;flex-direction:column}
.scenario .sc-idx{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--book-700)}
.scenario p{margin-top:9px;color:var(--graphite);font-size:.92rem;flex:1}
.sc-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.sc-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;padding:4px 9px;border-radius:6px;
  background:var(--book-050);color:var(--book-700);border:1px solid var(--book-100)}
@media(max-width:760px){.scenario-grid{grid-template-columns:1fr}}

/* ============================ REFERENCE ============================ */
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:48px}
.ref{border:1px solid var(--frost);border-radius:16px;padding:30px;background:var(--paper);display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.ref:hover{border-color:var(--book-500);transform:translateY(-3px);box-shadow:0 24px 48px -32px rgba(11,87,108,.5)}
.ref .tag{display:block;margin-bottom:14px}
.ref h3{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ref .loc{font-family:var(--mono);font-size:12px;color:var(--slate);margin-top:5px}
.ref p:not(.loc){margin-top:14px;color:var(--slate);font-size:1rem}
.ref .link{margin-top:auto;padding-top:22px;display:inline-flex;gap:8px;font-weight:600;color:var(--book-500);font-size:.95rem}
.ref-stat{display:flex;align-items:baseline;gap:11px;margin-top:20px;padding-top:18px;border-top:1px solid var(--frost)}
.ref-stat-num{font-weight:800;font-size:1.55rem;color:var(--book-700);letter-spacing:-.02em;line-height:1;flex:none}
.ref-stat-cap{font-family:var(--mono);font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;line-height:1.45}
.usecases{margin-top:38px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.usecases .lbl{font-family:var(--mono);font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
.chip{
  font-family:var(--mono);font-size:13px;color:var(--book-700);
  border:1px solid var(--frost);background:var(--paper);
  padding:9px 14px;border-radius:8px;
}
.chip.muted{color:var(--slate)}

/* ============================ PROČ TECH FASS ============================ */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:48px}
.why-item{border-top:2px solid var(--book-500);padding-top:20px}
.why-item .tag{display:block;margin-bottom:10px}
.why-item h3{font-size:1.05rem;line-height:1.25}
.why-item p{margin-top:10px;color:var(--slate);font-size:.92rem}

/* ============================ CTA ============================ */
.cta-band{background:var(--book-500);color:#fff;border-radius:20px;padding:clamp(32px,5vw,56px);margin:0 auto;max-width:var(--maxw);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,56px);align-items:center}
.cta-logo{height:56px;width:auto;display:block;margin-bottom:26px}
.cta-band .tag{color:rgba(255,255,255,.85)}
.cta-band h2{color:#fff;font-weight:800;letter-spacing:-.02em;font-size:clamp(1.7rem,3.2vw,2.4rem);margin:14px 0 0;max-width:16ch}
.cta-band p{color:rgba(255,255,255,.92);margin:16px 0 0;max-width:42ch}
.cta-band .note{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.8);margin-top:22px;line-height:1.7}
.cta-band .note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cta-section{padding:clamp(48px,7vw,84px) 0}

/* kontaktní formulář (bílá karta na teal bandu) */
.demo-form{background:var(--paper);border-radius:16px;padding:clamp(22px,3vw,30px);color:var(--graphite)}
.demo-form h3{font-size:1.1rem;color:var(--ink);margin-bottom:18px}
.f-row{margin-bottom:13px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.demo-form label{display:block;font-size:.8rem;font-weight:600;color:var(--graphite);margin-bottom:6px}
.demo-form input,.demo-form select,.demo-form textarea{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  padding:11px 13px;border:1.5px solid var(--frost);border-radius:9px;background:var(--paper);transition:border-color .15s}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{outline:none;border-color:var(--book-500)}
.demo-form textarea{resize:vertical;min-height:80px}
.demo-form .btn-primary{background:var(--book-500);color:#fff;width:100%;margin-top:4px;box-shadow:0 1px 0 var(--book-700)}
.demo-form .btn-primary:hover{background:var(--book-700)}
.form-note{font-size:11px;color:var(--slate);margin-top:13px;line-height:1.55}
.form-ok{display:none;margin-top:14px;padding:12px 14px;border-radius:9px;background:var(--book-050);border:1px solid var(--book-100);
  color:var(--book-700);font-size:.9rem;font-weight:500}

/* FAQ */
.faq-list{margin-top:44px;max-width:780px;border-top:1px solid var(--frost)}
.faq-item{border-bottom:1px solid var(--frost)}
.faq-q{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 2px;font-weight:600;font-size:1.05rem;color:var(--ink)}
.faq-q::-webkit-details-marker{display:none}
.faq-ico{flex:none;width:20px;height:20px;position:relative}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;background:var(--book-500);border-radius:2px}
.faq-ico::before{top:9px;left:1px;right:1px;height:2px}
.faq-ico::after{left:9px;top:1px;bottom:1px;width:2px;transition:opacity .2s var(--ease)}
.faq-item[open] .faq-ico::after{opacity:0}
.faq-a{padding:0 2px 24px;color:var(--slate);font-size:1rem;max-width:66ch;line-height:1.65}

/* ============================ FOOTER (title block) ============================ */
.site-footer{background:var(--ink);color:var(--silver);padding:clamp(48px,7vw,72px) 0 36px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-logo{display:block;height:34px;width:auto}
.foot-brand p{color:var(--slate-d);font-size:.9rem;margin-top:18px;max-width:34ch}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-d);margin-bottom:16px}
.foot-col a{display:block;color:var(--silver);font-size:.92rem;padding:5px 0;transition:color .15s}
.foot-col a:hover{color:#fff}
/* master TECH FASS — jediné místo pro symbol < (brand DNA) */
.master{margin-top:42px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;font-family:var(--mono);font-size:12px;color:var(--slate-d)}
.master-logo{display:block;height:22px;width:auto}
.foot-legal{margin-top:24px;font-family:var(--mono);font-size:11px;color:var(--slate-d);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}

/* ============================ scroll reveal ============================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1270px){
  .nav-links,.nav-login{display:none}
  .nav-toggle{display:inline-flex}
  .nav.open .nav-links{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--frost);padding:8px var(--gutter) 16px;
    max-height:calc(100vh - 74px);overflow-y:auto}
  .nav.open .nav-links > a{padding:12px 0;border-bottom:1px solid var(--frost)}
  /* pododkazy: rodič + odsazený seznam, žádné plovoucí menu */
  .nav.open .nav-item{flex-direction:column;align-items:stretch}
  .nav.open .nav-item > a{padding:12px 0;border-bottom:1px solid var(--frost)}
  .nav.open .nav-item > a::after{display:none}
  .nav.open .nav-sub{position:static;opacity:1;visibility:visible;transform:none;
    border:none;box-shadow:none;border-radius:0;padding:2px 0 8px 16px;min-width:0}
  .nav.open .nav-sub a{padding:9px 0;font-size:.85rem;color:var(--slate);border-bottom:1px solid var(--frost)}
  .nav.open .nav-sub a:last-child{border-bottom:none}
  .nav.open .nav-links .nav-login-m{display:block;color:var(--book-700);font-weight:600;border-bottom:none;margin-top:4px}
}
@media (max-width:980px){
  .tiers{grid-template-columns:1fr}
}
/* Hardware drží 3 sloupce až k 761 px. Ve dvou sloupcích by třetí karta
   zůstala sama s půlkou řádku prázdnou — a jsou to tři varianty k porovnání,
   takže mají zůstat v jedné řadě. Pod 761 px se skládají na sebe. */
@media (max-width:980px) and (min-width:761px){
  .hw{gap:14px}
  .hw-body{padding:22px 18px 24px}
  .hw-body h3{font-size:1.05rem}
  .hw-spec li{font-size:11px}
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:24px}
  .split.flip .split-text{order:0}
  .steps{grid-template-columns:1fr 1fr}
  .features{grid-template-columns:1fr 1fr}
  .types{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr;gap:26px}
  .foot-top{grid-template-columns:1fr 1fr}
  .cta-band{grid-template-columns:1fr}
  .price-grid,.procedure{grid-template-columns:1fr}
}
@media (max-width:760px){
  .refs{grid-template-columns:1fr}
  .hw{grid-template-columns:1fr}
  .trust-inner{flex-direction:column;align-items:flex-start}
  .stats{margin-left:0}
}
/* Dotyková zařízení: samostatné odkazy mají na desktopu jen ~23 px na výšku,
   což je pod hranicí pohodlného cíle prstem. Odkazy uvnitř věty necháváme —
   tam by svislý padding rozhodil řádkování odstavce.
   Podmínka je OR: úzký viewport NEBO hrubý ukazatel. Druhá část pokrývá
   tablety, které jsou širší než 920 px (iPad Pro na výšku má 1024 px). */
@media (max-width:920px), (pointer:coarse){
  .split-text .link,.price-card .link,.ref .link{padding-block:10px}
  .cta-band .note{line-height:1.5}
  .cta-band .note a{display:inline-block;padding-block:10px}
  .foot-col a{padding:9px 0}
}
@media (max-width:600px){
  .nav-actions .btn{display:none}
}
@media (max-width:480px){
  .steps,.features,.why,.types{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hero-cta .btn{flex:1}
  .f-grid{grid-template-columns:1fr}
  .scale{height:112px;gap:5px}
  .scale-cap{font-size:10px}/* 9px bylo pod čitelnou hranicí i pro mono caption */
}

/* ============================ v2 (dle připomínek) ============================ */
/* „3 měsíce zdarma" — badge s jemným pulzem */
.freebadge{display:inline-flex;align-items:center;gap:11px;margin-top:26px;background:var(--book-050);
  border:1px solid var(--book-100);border-radius:999px;padding:10px 18px;font-size:1rem;color:var(--ink)}
.freebadge b{color:var(--book-700)}
.pulse{width:11px;height:11px;border-radius:50%;background:#2FA36A;flex:none;position:relative}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2FA36A;animation:tfpulse 2s ease-out infinite}
@keyframes tfpulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pulse::after{animation:none}}

/* hero: notebook + mobil */
.hero-mockup{position:relative}
.hm-pc{display:block;width:100%;height:auto}
.hm-phone{position:absolute;right:-4px;bottom:-16px;width:25%;max-width:145px;aspect-ratio:9/19;
  background:#0A0E14;border:4px solid #0A0E14;border-radius:22px;overflow:hidden;box-shadow:0 22px 44px -18px rgba(11,87,108,.55)}
.hm-phone img{width:100%;height:100%;object-fit:cover;display:block;border-radius:18px}
@media (max-width:760px){.hm-phone{width:32%;right:0;bottom:-10px}}

/* srovnávací tabulka řešení */
.cmp-wrap{margin-top:44px;overflow-x:auto;border:1px solid var(--frost);border-radius:16px;background:var(--paper)}
.cmp-table{width:100%;border-collapse:collapse;min-width:640px}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--frost)}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table .feat{text-align:left;font-size:.92rem;color:var(--graphite);width:40%}
.cmp-table thead th{vertical-align:bottom;background:var(--book-050);border-bottom:2px solid var(--book-100);padding-top:28px}
.cmp-table thead .feat{background:var(--paper)}
.cmp-table thead .ci{font-family:var(--mono);font-size:11px;color:var(--slate);display:block}
.cmp-table thead b{display:block;font-size:1.05rem;color:var(--ink);margin-top:2px}
.cmp-table thead .cs{display:block;font-family:var(--mono);font-size:10.5px;color:var(--slate);margin-top:3px}
.cmp-hint{font-family:var(--mono);font-size:11px;color:var(--slate)}
.cmp-table th.hot,.cmp-table td.hot{background:var(--book-050)}
.cmp-table th.hot{border-top:2px solid var(--book-500);position:relative}
.cmp-table .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--book-500);
  color:#fff;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.02em;padding:4px 11px;border-radius:6px;white-space:nowrap}
.cmp-table .yes{color:var(--book-500);font-style:normal;font-weight:700;font-size:1.1rem}
.cmp-table .no{color:var(--slate);font-style:normal;opacity:.55}
.cmp-table .row-meter td{font-family:var(--mono);font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em}
.cmp-table .row-meter .feat{text-transform:none;letter-spacing:0}

/* sticky mobilní CTA */
.mobile-cta{display:none}
@media (max-width:600px){
  .mobile-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;justify-content:center;
    align-items:center;gap:8px;background:var(--book-500);color:#fff;font-weight:700;padding:14px 18px;
    border-radius:12px;box-shadow:0 12px 30px -8px rgba(11,87,108,.55);text-decoration:none}
  .cta-section{padding-bottom:96px}
}

/* náhledy (kalendář ap.) — hlubší „monitor" dojem */
.browser{box-shadow:0 26px 54px -30px rgba(10,20,25,.55)}
.browser-cap{font-family:var(--mono);font-size:11px;color:var(--slate);margin-top:10px;text-align:center}