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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ══════════════════════════════════════════════════════════════════════
   Web pro PR: jediná sekce, kontakt. Nic víc na něm není, takže veškerá
   práce je v pozadí a v sazbě té jedné obrazovky.

   Pozadí je „aura" — tři velké měkké skvrny, které se pomalu posouvají
   a dýchají. Motiv není náhodný, je to jméno firmy.
   ══════════════════════════════════════════════════════════════════════ */

body.pr-page{background:#fbfaf8;min-height:100vh;display:flex;flex-direction:column}

/* ⚠️ `z-index:0`, NE záporný. Záporný by vrstvu poslal pod neprůhledné
   pozadí `body` a byla by dokonale neviditelná — ta samá past už na
   tomhle projektu padla dvakrát (page-field, aura na /case/). */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura i{
  position:absolute;display:block;border-radius:50%;
  /* ⚠️ Měkkost nese gradient sám, žádný `filter:blur()`. Na plochách přes
     půl obrazovky je drahý a barvu zabije. */
  will-change:transform;
}
.aura i:nth-child(1){
  width:78vw;height:78vw;left:-20vw;top:-26vw;
  background:radial-gradient(circle, rgba(16,93,240,.16) 0%, rgba(16,93,240,.05) 45%, transparent 70%);
  animation:aura-a 46s ease-in-out infinite alternate;
}
.aura i:nth-child(2){
  width:66vw;height:66vw;right:-18vw;top:6vh;
  background:radial-gradient(circle, rgba(183,151,133,.24) 0%, rgba(183,151,133,.08) 45%, transparent 70%);
  animation:aura-b 58s ease-in-out infinite alternate;
}
.aura i:nth-child(3){
  width:60vw;height:60vw;left:22vw;bottom:-30vw;
  background:radial-gradient(circle, rgba(122,162,255,.20) 0%, rgba(122,162,255,.06) 45%, transparent 70%);
  animation:aura-c 70s ease-in-out infinite alternate;
}
@keyframes aura-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,5vh,0) scale(1.12)}}
@keyframes aura-b{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-6vw,7vh,0) scale(.94)}}
@keyframes aura-c{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8vw,-6vh,0) scale(1.14)}}

/* ⚠️ Vypínač musí mít STEJNOU specificitu jako pravidla s animací
   (`:nth-child` = 0,2,0). Se samotným `.aura i` se reduced motion
   neuplatnilo — přesně na tom to spadlo na /case/. */
@media (prefers-reduced-motion:reduce){
  .aura i:nth-child(n){animation:none}
}

/* obsah nad pozadím */
.pr-page > *:not(.aura){position:relative;z-index:1}

/* Lišta nese jen logo — na jednostránkovém webu není kam odkazovat. */
.pr-page .nav{background:transparent;border-bottom:0;backdrop-filter:none;position:absolute;inset-inline:0;top:0}
.pr-page .nav.is-scrolled{box-shadow:none}

/* ⚠️ `flex:1` na sekci nestačí — jejím rodičem je `<main>`, které samo
   flexem nebylo, takže se sekce neměla do čeho roztáhnout a obsah zůstal
   v horní půlce okna. Roztahuje se `main`, sekce se centruje uvnitř něj.
   Odsazení je nahoře větší kvůli liště (ta je `absolute`, tedy mimo tok)
   a zároveň drží obsah lehce nad optickým středem. */
.pr-page main{flex:1;display:flex}
.pr-kontakt{
  flex:1;display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(110px,14vh,160px) clamp(20px,4vw,32px) clamp(80px,11vh,130px);
}
/* 20ch: delší věta se při 16ch lámala na tři řádky */
.pr-kontakt h1{max-width:20ch;margin-inline:auto}
.pr-kontakt h1 .accent{color:var(--accent)}
.pr-kontakt p{
  margin:clamp(18px,2.4vw,26px) auto 0;max-width:34ch;
  color:var(--muted);font-size:clamp(17px,1.4vw,19px);
}
/* E-mail je jediná akce na stránce, takže smí být velký. */
.pr-mail{
  display:inline-flex;align-items:center;min-height:56px;
  margin-top:clamp(30px,4vw,46px);
  font-weight:800;font-size:clamp(1.35rem,3.4vw,2.4rem);
  color:var(--ink);text-decoration:none;
  border-bottom:2px solid rgba(16,93,240,.35);
  transition:color .18s,border-color .18s;
}
.pr-mail:hover{color:var(--accent);border-color:var(--accent)}

/* Patička je jeden řádek, ne sekce. */
.pr-foot{
  padding:0 clamp(20px,4vw,32px) clamp(24px,3vw,34px);
  text-align:center;font-size:14.5px;color:var(--muted);
}
/* `inline-flex` + `min-height` kvůli klikací ploše: odkazy měly 19 px. */
.pr-foot a,.pr-foot button{display:inline-flex;align-items:center;min-height:44px;
  color:var(--muted);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0}
.pr-foot a:hover{color:var(--ink)}
.pr-foot span{margin-inline:10px;opacity:.5}