/* ============================================================
   kCalori — designový systém webu
   ------------------------------------------------------------
   Pořadí: tokeny → základ → háčky pro motion.js → komponenty
   → responzivita → omezený pohyb.

   Pravidlo, které tu platí všude: bez JS musí být stránka celá
   čitelná. Skryté „před" stavy proto visí na třídě .km-reveal,
   kterou přidává až motion.js — když nedojede, nic se neschová.
   ============================================================ */

/* ─────────── 1. RESET & TOKENY ─────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Plochy — teplá čerň, ne uhlík */
  --bg:        #060706;
  --bg-2:      #0a0c0b;
  --bg-3:      #0d100e;
  --surface:   #101312;
  --surface-2: #151917;

  /* Text */
  /* Text. Odstíny jsou vybrané na kontrast, ne od oka:
     ink-2 ≈ 8:1, ink-3 ≈ 7:1, ink-4 ≈ 4,7:1 proti pozadí.
     Pod ink-4 už se nesmí psát nic, co má někdo číst. */
  --ink:   #f4f1e8;
  --ink-2: #b6bbaf;
  --ink-3: #969b91;
  --ink-4: #767b72;

  /* Akcenty — shodné s aplikací */
  --green:      #4ade80;
  --green-deep: #157f45;
  --gold:       #cfc79a;
  --gold-2:     #b2ac88;
  --purple:     #a78bfa;
  --amber:      #fbbf24;
  --red:        #f87171;

  --line:   rgba(244,241,232,0.09);
  --line-2: rgba(244,241,232,0.16);

  /* Písma */
  --disp: 'Bricolage Grotesque', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Serif (Instrument Serif) se od 10. 10. 2026 nepoužívá — web má jedno
     písmo na nadpisy. Proměnná zůstává jako alias, ať nic nespadne na Georgii. */
  --serif: var(--disp);
  --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --num:  system-ui, -apple-system, sans-serif;

  /* Velikosti — plynulé, bez zlomů */
  --fs-hero:  clamp(2.9rem, 9.6vw, 9rem);
  --fs-h2:    clamp(2.35rem, 6.4vw, 5.6rem);
  --fs-h3:    clamp(1.55rem, 2.9vw, 2.5rem);
  --fs-h4:    clamp(1.15rem, 1.7vw, 1.5rem);
  --fs-lede:  clamp(1.02rem, 1.35vw, 1.3rem);
  --fs-body:  clamp(0.95rem, 1.05vw, 1.05rem);
  --fs-small: 0.85rem;
  --fs-eyebrow: 0.7rem;

  /* Rozměry */
  --shell:  1360px;
  --gutter: clamp(20px, 5vw, 68px);
  --sec-y:  clamp(88px, 13vh, 176px);
  --r-lg:   30px;
  --r-md:   20px;
  --r-sm:   12px;
  --nav-h:  68px;
  /* Poloměr „desek". Sekce na sebe nasedají a v rozích prosvítá
     černá stránka pod nimi — z toho vzniká ten dojem vrstvení. */
  --plate-r: clamp(22px, 3.4vw, 52px);

  /* Křivky */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  /* Kotvy nesmí zaskočit pod lištu. */
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
/* Když plynulý scroll řídí motion.js, nativní by se s ním pral. */
html.js.km-smooth { scroll-behavior: auto; }

/* Čísla se čtou po sloupcích — kalorie, gramy, ceny. Tabulkové
   číslice je srovnají bez monospace, který by se hůř četl. */
.bal-num, .bal-ring-num, .plan-price, .calc-kcal-num, .calc-macro-val,
.calc-meal-kcal, .rev-sum-num, .spark-num, .dev-balnum, .ring-val,
.dev-row b, .dev-bar-head b, .scene-step, .loader-count {
  font-variant-numeric: tabular-nums;
}

body {
  /* Čerň pod deskami. Sekce si nesou vlastní pozadí — tahle
     prosvítá jen v zaoblených rozích a dělá ten spoj. */
  background: #000;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.62;
  /* clip místo hidden — hidden by z body udělal scroll kontejner
     a position:sticky uvnitř by přestalo fungovat. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Zámek scrollu pod clonou sází a ruší site.js, ne CSS.
   Kdyby ho držel stylopis, stačilo by, aby JS nedojel, a stránka
   by zůstala zamčená napořád — přesně to se stalo při vypnutém JS. */
html.nav-open body { overflow: hidden; }

/* Bez JS clona nemá kdo sundat, tak ji vůbec nezobrazujeme. */
html:not(.js) .loader { display: none; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background: rgba(207,199,154,0.3); color: #fff; }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, details:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 10000;
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 600;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* ─────────── 2. ATMOSFÉRA ─────────── */

/* Filmové zrno — drží tmavé plochy živé, ať nejsou jako plast. */
.grain {
  position: fixed; inset: -50%; z-index: 900; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.032;
  mix-blend-mode: overlay;
  animation: grainShift 6s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0,0); }
}

.vignette {
  position: fixed; inset: 0; z-index: 899; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,0.45) 100%);
}

.orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(90px);
  will-change: transform;
}

/* ─────────── 3. HÁČKY PRO MOTION.JS ───────────
   Tohle je smlouva s /assets/motion.js. Třídy přidává on,
   vzhled je tady. */

.km-reveal { will-change: opacity, transform; }

[data-km-reveal].km-reveal {
  opacity: 0;
  transition:
    opacity   .85s var(--ease),
    transform 1.05s var(--ease),
    filter    .85s var(--ease),
    clip-path 1.05s var(--ease);
}
[data-km-reveal].km-reveal.km-in { opacity: 1; transform: none; filter: none; }

[data-km-reveal="fade-up"].km-reveal { transform: translate3d(0, 42px, 0); }
[data-km-reveal="scale"].km-reveal   { transform: scale(0.93); }
[data-km-reveal="blur"].km-reveal    { filter: blur(14px); transform: scale(1.02); }
[data-km-reveal="mask"].km-reveal    { clip-path: inset(0 0 100% 0); transform: translate3d(0, 22px, 0); }
[data-km-reveal="mask"].km-reveal.km-in { clip-path: inset(0 0 0 0); }

/* Dělený text: maska po řádcích. Vlastní průhlednost prvku
   necháváme na 1 — animují se jen vnitřní řádky. */
[data-km-split].km-reveal { opacity: 1 !important; transform: none !important; }

.km-line, .km-word-m, .km-char-m {
  display: block;
  overflow: hidden;
}
.km-word-m, .km-char-m { display: inline-block; vertical-align: top; }

.km-line-i, .km-word, .km-char {
  display: block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition:
    transform 1.05s var(--ease),
    opacity   .8s  var(--ease);
  transition-delay: calc(var(--i, 0) * 0.075s);
  will-change: transform;
}
.km-word, .km-char { display: inline-block; }
.km-in .km-line-i, .km-in .km-word, .km-in .km-char {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Média po odhalení. Výchozí stav je VIDITELNÝ — obrázek se nesmí
   schovat do stavu, který závisí na tom, že nějaká třída dorazí. */
[data-km-lazy-media].km-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease);
}
[data-km-lazy-media].km-reveal.km-media-in,
[data-km-lazy-media].km-reveal.km-in { clip-path: inset(0 0 0 0); }

/* ─────────── 4. VLASTNÍ KURZOR ─────────── */

.km-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
  /* Do prvního pohnutí myší sedí v levém horním rohu a svítil by tam.
     Třídu sází site.js po prvním pointermove. */
  opacity: 0;
  transition: opacity .3s ease;
}
html.km-cursor-live .km-cursor { opacity: 1; }
/* Motion.js si obě části centruje sám (`translate(-50%,-50%)`),
   takže tady se posun NESMÍ opakovat — jinak se tečka a prstenec
   rozejdou o rozdíl svých poloměrů. Nastavujeme jen velikost. */
.km-cursor-dot {
  position: absolute; top: 0; left: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff;
  transition: transform .25s var(--ease), opacity .25s;
}
.km-cursor-ring {
  position: absolute; top: 0; left: 0;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  transition: width .28s var(--ease), height .28s var(--ease),
              opacity .3s, border-color .3s;
}
.km-cursor--hover .km-cursor-ring {
  width: 40px; height: 40px;
  border-color: rgba(255,255,255,0.85);
}
.km-cursor--hover .km-cursor-dot { transform: scale(0); }
@media (pointer: coarse) { .km-cursor { display: none !important; } }

/* ─────────── 5. CLONA ─────────── */

.loader {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.loader.is-out { opacity: 0; visibility: hidden; }
.loader-inner {
  display: flex; align-items: baseline; gap: 18px;
  font-family: var(--disp);
}
.loader-mark {
  font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 600;
  letter-spacing: -0.04em; color: var(--ink);
}
.loader-count {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700;
  color: var(--gold);
}
.loader-count::after { content: '%'; font-size: .55em; opacity: .6; margin-left: 2px; }
.loader-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(244,241,232,0.08);
}
.loader-bar i {
  display: block; height: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--green), var(--gold));
}
/* Pojistka: kdyby se site.js nenačetl, clona po 2 s odejde sama. */
.loader { animation: loaderFailsafe 0s linear 2s forwards; }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ─────────── 6. NAVIGACE ─────────── */

#main-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 800;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  transition: background .45s var(--ease), backdrop-filter .45s, border-color .45s;
  border-bottom: 1px solid transparent;
}
html.km-scrolled #main-nav {
  background: rgba(6,7,6,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
/* Při scrollu dolů lišta uhne, při scrollu nahoru se vrátí. */
html.km-scrolled.km-scrolling-down:not(.nav-open) #main-nav { transform: translateY(-100%); }
#main-nav { transition: transform .5s var(--ease), background .45s var(--ease), border-color .45s; }

.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo img { border-radius: 9px; }
.nav-logo .name {
  font-family: var(--disp); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -0.03em;
}

.nav-mid {
  display: flex; align-items: center; gap: 4px;
  margin: 0 auto;
}
.nav-mid a {
  position: relative; display: block;
  padding: 8px 13px; border-radius: 999px;
  font-size: 0.83rem; color: var(--ink-2);
  transition: color .25s, background .25s;
  white-space: nowrap;
}
.nav-mid a::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 1px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
  background-size: 300% 100%;
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease);
  /* Nekonečná animace, která v klidu stojí — nula práce, dokud
     na odkaz někdo nenajede. */
  animation: sweep 3s linear infinite;
  animation-play-state: paused;
}
.nav-mid a:hover { color: var(--ink); background: rgba(244,241,232,0.06); }
.nav-mid a:hover::after { transform: scaleX(1); animation-play-state: running; }
@keyframes sweep { to { background-position: -300% 0; } }

.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-cta {
  padding: 9px 20px; border-radius: 999px;
  background: var(--ink); color: #070908;
  font-size: 0.83rem; font-weight: 600; white-space: nowrap;
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.nav-cta:hover { background: var(--green); }

/* Odkaz na slovenskou verzi (/sk/). Jeden malý pilulkový odkaz, ne
   dvoudílný CZ/SK přepínač jako na /sk/ — dvoudílná verze na 390px
   přetekla lištu (scrollWidth 438 px do 390 px viewportu), protože
   .nav-right musí vedle sebe pojmout ještě "Stáhnout zdarma" a burger.
   V .nav-right, ne v .nav-mid, protože .nav-mid na mobilu mizí (viz
   media query výš) a odkaz na slovenskou verzi musí zůstat dosažitelný
   i tam, ne jen na desktopu. */
.nav-lang-link {
  padding: 6px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 600;
  color: var(--ink-3); letter-spacing: 0.03em; flex-shrink: 0;
  border: 1px solid var(--line-2);
  transition: color .25s, background .25s, border-color .25s;
}
.nav-lang-link:hover { color: var(--ink); background: rgba(244,241,232,0.06); border-color: var(--gold); }

.nav-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; overflow: hidden;
}
.nav-progress i {
  display: block; height: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--green), var(--gold));
  opacity: 0; transition: opacity .4s;
}
html.km-scrolled .nav-progress i { opacity: 1; }

.nav-burger {
  display: none; width: 42px; height: 42px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nb-line {
  display: block; width: 17px; height: 1.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .35s var(--ease), opacity .25s;
}
.nav-burger.open .nb-line:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-burger.open .nb-line:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav-panel {
  position: fixed; inset: 0; z-index: 790;
  background: rgba(6,7,6,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: calc(var(--nav-h) + 32px) var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: center;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease), visibility .7s;
}
.nav-panel.open { clip-path: inset(0 0 0 0); visibility: visible; }
.nav-panel ul { display: flex; flex-direction: column; gap: 2px; }
.nav-panel li { overflow: hidden; }
.nav-panel a {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--disp);
  font-size: clamp(1.9rem, 8vw, 3rem); font-weight: 500;
  letter-spacing: -0.022em; line-height: 1.24;
  transform: translateY(105%);
  transition: transform .8s var(--ease), color .3s;
}
.nav-panel.open a { transform: none; }
.nav-panel li:nth-child(1) a { transition-delay: .06s; }
.nav-panel li:nth-child(2) a { transition-delay: .10s; }
.nav-panel li:nth-child(3) a { transition-delay: .14s; }
.nav-panel li:nth-child(4) a { transition-delay: .18s; }
.nav-panel li:nth-child(5) a { transition-delay: .22s; }
.nav-panel li:nth-child(6) a { transition-delay: .26s; }
.nav-panel li:nth-child(7) a { transition-delay: .30s; }
.nav-panel li:nth-child(8) a { transition-delay: .34s; }
.nav-panel li:nth-child(9) a { transition-delay: .38s; }
.nav-panel a em {
  font-family: var(--num); font-style: normal;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-4);
}
.nav-panel a:hover { color: var(--gold); }
.nav-panel-cta {
  margin-top: 40px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  background: var(--ink); color: #070908; font-weight: 600;
  opacity: 0; transition: opacity .4s .44s;
}
.nav-panel.open .nav-panel-cta { opacity: 1; }

/* ─────────── 7. ROZVRH & TYPOGRAFIE ─────────── */

.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── DESKY ──
   Každá sekce je vlastní plocha se zaoblenou náběžnou hranou.
   Sousední desky se liší o pár procent jasu; v zaoblených rozích
   prosvítá černá stránka a nahoře běží vlasová linka, která
   hranu obtáhne. To je celý ten efekt navrstvených karet. */
main > .sec,
main > .story,
main > .shots,
main > .final,
footer {
  position: relative;
  border-radius: var(--plate-r) var(--plate-r) 0 0;
  box-shadow: inset 0 1px 0 rgba(244,241,232,0.07);
  background: var(--bg);
}
/* Hero má jiný tón než deska pod ním — jinak by zaoblený spoj
   nebyl vidět. Dřív ten předěl dělal rychlostní pás. */
.hero { border-radius: 0 0 var(--plate-r) var(--plate-r); background: var(--bg-2); }

/* Rytmus jasů: dvě sousední desky nesmí mít stejný tón,
   jinak zaoblení nikdo neuvidí. */
main > .story      { background: var(--bg-2); }
main > .shots      { background: var(--bg); }
main > #funkce     { background: var(--bg-2); }
main > .cta-band   { background: var(--bg-3); }
main > .hk-band    { background: var(--bg-3); }
main > #kalkulacka { background: var(--bg); }
main > .sec-rev    { background: var(--bg-2); }
main > #premium    { background: var(--bg); }
main > .sec-faq    { background: var(--bg-2); }
main > .final      { background: var(--bg); }
footer             { background: var(--bg-2); }

.sec { padding-block: var(--sec-y); }

/* Šířku drží až jednotlivé prvky. Když se strop dal na celou hlavičku,
   displejové písmo se lámalo do čtyř řádků a lišta snímků se navíc
   vycentrovala, protože `.shell` má margin-inline:auto. */
.sec-head, .story-head, .shots-head, .hk-copy, .faq-head { max-width: none; }
.sec-head { margin-bottom: clamp(48px, 7vw, 92px); }
.display { max-width: 17ch; }
.hero-sub, .lede { text-wrap: pretty; }

main { counter-reset: sec; }

.eyebrow {
  counter-increment: sec;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.eyebrow::before {
  order: -2;
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.eyebrow::after {
  order: -1;
  content: counter(sec, decimal-leading-zero);
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-weight: 700; letter-spacing: 0.04em;
  color: var(--gold-2);
}

.display {
  font-family: var(--disp);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: 'opsz' 72;
  text-wrap: balance;
}

/* ── PROSVÍCENÁ TYPOGRAFIE ──
   Nadpisy nejsou plně bílé; jsou to gradienty ořezané do písma.
   Rozdíl proti plné bílé je malý, ale právě on dělá ten dojem,
   že text má na sobě světlo, místo aby byl natřený. */
.display, .hero-title, .final h2, .scene-copy h3, .tile .tile-h, .footer-mark,
.lit {
  background-image: linear-gradient(196deg,
    rgba(244,241,232,0.99) 6%,
    rgba(244,241,232,0.78) 52%,
    rgba(244,241,232,0.46) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Bez tohohle si prohlížeč ořízne dotažnice (p, g, y). */
  padding-bottom: 0.1em;
}

/* Dělený nadpis je jiný případ: řádky mají vlastní transform, a přes
   transformovaného potomka pozadí předka do písma neprosvítá — první
   řádek by zmizel. Gradient proto dostane každý řádek sám pro sebe. */
[data-km-split] {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}
[data-km-split] .km-line-i,
[data-km-split] .km-word,
[data-km-split] .km-char {
  background-image: linear-gradient(196deg,
    rgba(244,241,232,0.99) 4%,
    rgba(244,241,232,0.80) 58%,
    rgba(244,241,232,0.52) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.footer-mark { background-image: linear-gradient(180deg, rgba(244,241,232,0.24), rgba(244,241,232,0.03)); }

.display em, .hero-title em, .final h2 em, .dev-greet em,
[data-km-split] em {
  /* Akcent nese barva a tenký řez, ne jiné písmo. */
  font-family: var(--disp);
  font-style: normal;
  font-weight: 300;
  /* Zlatá musí přebít průhlednou výplň zděděnou z nadpisu. */
  background-image: none;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
}

.lede {
  font-size: var(--fs-lede);
  color: var(--ink-2);
  max-width: 50ch;
  margin-top: 26px;
  line-height: 1.58;
}
.lede strong, .hero-sub strong { color: var(--ink); font-weight: 600; }

/* Vystředěné varianty. Bez nich si je každá podstránka dopisovala
   lokálně a rozcházely se. */
.eyebrow--center { justify-content: center; }
.display--center, .lede--center { margin-inline: auto; text-align: center; }

/* ─────────── 8. TLAČÍTKA ─────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), background .35s, color .35s, border-color .35s;
  will-change: transform;
}
.btn-lg { padding: 18px 36px; font-size: 1.02rem; }

.btn-primary { background: var(--ink); color: #070908; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--green), var(--gold));
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn-primary:hover::after { transform: translateY(0); }
.btn-primary > *, .btn > span { position: relative; z-index: 1; }
.btn-primary svg { position: relative; z-index: 1; }

.btn-ghost {
  border-color: transparent; color: var(--ink);
  background: rgba(244,241,232,0.02);
}
/* Gradientový obrys: dvě masky, ze kterých se vyřízne vnitřek.
   Jinak by se gradient dal na rámeček udělat jen obrázkem. */
.btn-ghost::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, rgba(244,241,232,0.28), rgba(244,241,232,0.08) 45%, rgba(207,199,154,0.4));
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sweep 3.4s linear infinite;
  animation-play-state: paused;
  transition: background .4s;
}
.btn-ghost:hover { background: rgba(244,241,232,0.07); }
.btn-ghost:hover::before { animation-play-state: running; }

/* ─────────── 9. HERO ─────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 36px) var(--gutter) clamp(110px, 14vh, 150px);
  overflow: hidden;
}

.hero-field { position: absolute; inset: 0; pointer-events: none; }

.orb-hero {
  width: min(1200px, 150vw); height: 680px;
  left: 50%; top: -280px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 42%,
    rgba(122,227,161,0.5) 0%,
    rgba(74,222,128,0.22) 36%,
    rgba(178,172,136,0.12) 58%,
    rgba(6,7,6,0) 78%);
  filter: blur(70px);
  animation: orbPulse 10s ease-in-out infinite;
}
@keyframes orbPulse {
  0%,100% { transform: translateX(-50%) scale(1);    opacity: .88; }
  50%     { transform: translateX(-50%) scale(1.09); opacity: 1; }
}

/* Soustředné kruhy — tichá připomínka kalorického prstence z aplikace. */
.hero-rings { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.hero-rings .hr {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  border: 1px solid var(--line); border-radius: 50%;
  animation: ringDrift 22s linear infinite;
}
.hr-1 { width: 620px; height: 620px; opacity: .8; }
.hr-2 { width: 900px; height: 900px; opacity: .5; animation-duration: 34s; animation-direction: reverse; }
.hr-3 { width: 1240px; height: 1240px; opacity: .3; animation-duration: 46s; }
@keyframes ringDrift {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.03); }
  to   { transform: rotate(360deg) scale(1); }
}

/* Postup skrz hero (--hp) nastavuje site.js: obsah se při odjezdu
   propadá a odchází — vrstvení, ne prostý scroll. */
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  /* Mizení začne až v druhé polovině odjezdu. Kdyby šlo lineárně od
     nuly, tlačítko do App Store by bylo poloprůhledné ještě ve chvíli,
     kdy na něj člověk kouká — a to je na prodejní stránce daň, kterou
     žádný efekt nestojí. */
  opacity: calc(1 - max(0, var(--hp, 0) - 0.5) * 1.95);
  transform: translate3d(0, calc(var(--hp, 0) * -70px), 0)
             scale(calc(1 - var(--hp, 0) * 0.07));
  will-change: transform, opacity;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 17px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(244,241,232,0.035);
  backdrop-filter: blur(10px);
  font-size: 0.82rem; color: var(--ink-2);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.hero-badge b { color: var(--ink); font-family: var(--num); font-weight: 700; }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 13px; height: 13px; fill: var(--gold); }

.hero-title {
  font-family: var(--disp);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-variation-settings: 'opsz' 96;
  max-width: 15ch;
}

.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.32rem);
  color: var(--ink-2);
  max-width: 56ch;
  margin: clamp(26px, 3.5vw, 40px) auto 0;
  line-height: 1.56;
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
  margin-top: clamp(30px, 4vw, 46px);
}

.hero-scroll {
  position: absolute; left: 50%; bottom: 30px; translate: -50% 0;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-4);
  opacity: calc(1 - var(--hp, 0) * 3);
}
.hero-scroll i {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--ink-4), transparent);
  position: relative; overflow: hidden;
}
.hero-scroll i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollHint 2.1s var(--ease-io) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  60%,100% { transform: translateY(100%); }
}

/* ─────────── 11. BILANCE ─────────── */

.sec-balance { background: var(--bg); }

.balance-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 5vw, 72px);
  padding: clamp(8px, 1.6vw, 22px) 0;
}
.bal-side { text-align: right; }
.bal-side.out { text-align: left; }
.bal-num {
  font-family: var(--num);
  font-size: clamp(2.1rem, 6vw, 4.6rem);
  font-weight: 700; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(180deg, var(--ink), var(--ink-3));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.bal-side.out .bal-num {
  background: linear-gradient(180deg, var(--green), var(--green-deep));
  -webkit-background-clip: text; background-clip: text;
}
.bal-lbl {
  margin-top: 12px; font-size: 0.78rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3);
}

.bal-center { display: grid; place-items: center; }
.bal-ring { position: relative; width: clamp(180px, 26vw, 300px); aspect-ratio: 1; }
.bal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bal-bg { fill: none; stroke: rgba(244,241,232,0.07); stroke-width: 9; }
.bal-fg {
  fill: none; stroke: url(#balg); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 553;
  /* Prstenec se dokresluje podle postupu sekce. */
  stroke-dashoffset: calc(553 - 553 * 0.82 * var(--p, 0));
}
.bal-core {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.bal-ring-num {
  font-family: var(--num);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.bal-ring-unit { font-size: 0.8rem; color: var(--ink-3); margin-top: 2px; }
.bal-ring-lbl {
  margin-top: 10px; font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-4);
}

.balance-note {
  text-align: center; margin-top: 26px;
  font-size: 1rem; color: var(--ink-3);
}
.balance-note strong { color: var(--green); font-weight: 600; }

/* ─────────── 12. DEN S KCALORI (připnutá sekvence) ─────────── */

.story { position: relative; background: var(--bg-2); }
.story::before, .story::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line);
}
.story::before { top: 0; } .story::after { bottom: 0; }

.story-stage {
  display: flex; align-items: center;
  padding-block: var(--sec-y);
}
/* Připnutá scéna se musí vejít do jedné obrazovky i na 768px vysokém
   notebooku — proto všechny rozměry vážeme na vh, ne na pevné pixely. */
@media (min-width: 861px) {
  html.js .story-stage { padding-block: clamp(56px, 7.5vh, 120px); }
  html.js .story-track { min-height: min(500px, 54vh); }
  html.js .scene-shot { min-height: min(430px, 46vh); }
}
.story-shell { width: 100%; }
.story-head { margin-bottom: clamp(34px, 5vw, 56px); }

.story-rail {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 32px;
}
.story-rail li {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--ink-4);
  transition: color .5s var(--ease);
}
.story-rail li span {
  font-family: var(--num); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em;
}
.story-rail li i {
  display: block; width: 38px; height: 2px; border-radius: 2px;
  background: rgba(244,241,232,0.1);
  position: relative; overflow: hidden;
}
.story-rail li i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.story-stage[data-active="0"] .story-rail li:nth-child(1),
.story-stage[data-active="1"] .story-rail li:nth-child(2),
.story-stage[data-active="2"] .story-rail li:nth-child(3) { color: var(--ink); }
.story-stage[data-active="0"] .story-rail li:nth-child(1) i::after,
.story-stage[data-active="1"] .story-rail li:nth-child(2) i::after,
.story-stage[data-active="2"] .story-rail li:nth-child(3) i::after { transform: scaleX(1); }

.story-track { position: relative; }

.scene {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  align-items: center;
  gap: clamp(28px, 6vw, 80px);
}
.scene.flip .scene-copy  { order: 2; }
.scene.flip .scene-visual { order: 1; }

/* Na velkém plátně jedou tři momenty přes sebe: sekce drží obrazovku
   a scény se střídají vodorovně. Přepíná se to po třetinách postupu,
   takže každá scéna chvíli stojí — jinak by to bylo jen rozmazané
   klouzání. `data-active` sází site.js. */
@media (min-width: 861px) {
  html.js .story-stage { min-height: 100vh; }
  html.js .story-track { min-height: min(520px, 58vh); }
  html.js .story-track .scene {
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
    transform: translate3d(70px, 0, 0);
    transition: opacity .6s var(--ease), transform .95s var(--ease);
  }
  /* už proběhlé scény odcházejí doleva */
  html.js .story-stage[data-active="1"] .scene[data-idx="0"],
  html.js .story-stage[data-active="2"] .scene[data-idx="0"],
  html.js .story-stage[data-active="2"] .scene[data-idx="1"] {
    transform: translate3d(-70px, 0, 0);
  }
  html.js .story-stage[data-active="0"] .scene[data-idx="0"],
  html.js .story-stage[data-active="1"] .scene[data-idx="1"],
  html.js .story-stage[data-active="2"] .scene[data-idx="2"] {
    opacity: 1; pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }
}

.scene-step {
  font-family: var(--num); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.22em; color: var(--gold-2);
}
.scene-time {
  margin-top: 8px; font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
.scene-copy h3 {
  font-family: var(--disp); font-size: var(--fs-h3);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.08;
  margin: 16px 0 16px;
}
.scene-copy p { color: var(--ink-2); max-width: 46ch; }

.scene-visual { position: relative; display: grid; place-items: center; }
.scene-glow {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.22), transparent 66%);
  filter: blur(56px);
}
.scene-glow.g-green { background: radial-gradient(circle, rgba(74,222,128,0.2), transparent 66%); }
.scene-glow.g-gold  { background: radial-gradient(circle, rgba(207,199,154,0.18), transparent 66%); }

/* Zjednodušený „telefon" — nekopíruje aplikaci, jen ji připomíná. */
.scene-shot {
  position: relative; z-index: 1;
  width: min(310px, 82vw); min-height: 430px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(244,241,232,0.055), rgba(244,241,232,0.012)),
    var(--surface);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(244,241,232,0.07);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .6s var(--ease);
}
.dev-top { display: flex; align-items: center; justify-content: space-between; }
.dev-time { font-family: var(--num); font-size: 0.76rem; font-weight: 600; color: var(--ink-3); }
.dev-pill {
  font-size: 0.66rem; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); letter-spacing: 0.05em;
}
.dev-greet { font-family: var(--disp); font-size: 1.16rem; font-weight: 500; letter-spacing: -0.03em; }
.dev-greet em { font-family: var(--disp); font-style: normal; font-weight: 300; color: var(--gold); }

.mini-ring { position: relative; width: 132px; aspect-ratio: 1; margin: 4px auto; }
.mini-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(244,241,232,0.08); stroke-width: 8; }
.ring-fg {
  fill: none; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 339;
  stroke-dashoffset: calc(339 - 339 * var(--dash, 74.6) / 100);
}
.ring-core {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-val { font-family: var(--num); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; }
.ring-unit { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; }

.dev-rows { display: flex; flex-direction: column; gap: 1px; }
.dev-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 0.83rem;
}
.dev-row:last-child { border-bottom: 0; }
.dev-row span { color: var(--ink-3); }
.dev-row b { font-family: var(--num); font-weight: 600; }

.dev-chip {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(74,222,128,0.25);
  background: rgba(74,222,128,0.07);
  font-size: 0.72rem; color: var(--ink-2);
}
.dev-chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
  animation: dotPulse 2.2s var(--ease-io) infinite;
}
@keyframes dotPulse {
  to { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
}

.dev-balnum {
  font-family: var(--num); font-size: 2.5rem; font-weight: 700;
  letter-spacing: -0.045em; color: var(--gold);
}
.dev-balnum span { font-size: 0.9rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }

.dev-bars { display: flex; flex-direction: column; gap: 14px; }
.dev-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.78rem; color: var(--ink-3); margin-bottom: 7px;
}
.dev-bar-head b { font-family: var(--num); color: var(--ink); font-weight: 600; }
.bar-track { height: 6px; border-radius: 6px; background: rgba(244,241,232,0.07); overflow: hidden; }
.bar-in {
  height: 100%; border-radius: 6px; width: var(--w, 50%);
  transform-origin: left;
  animation: barGrow 1.1s var(--ease) both;
}
.bar-gold  { background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.bar-green { background: linear-gradient(90deg, var(--green-deep), var(--green)); }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hledáček */
.viewfinder {
  position: relative; width: 100%; aspect-ratio: 4/3;
  border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, rgba(74,222,128,0.09), transparent 62%),
    var(--bg-3);
  border: 1px solid var(--line);
}
.vf-c {
  position: absolute; width: 17px; height: 17px;
  border: 2px solid var(--green); opacity: .85;
}
.vf-c.tl { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.vf-c.tr { top: 10px; right: 10px; border-left: 0;  border-bottom: 0; border-radius: 0 5px 0 0; }
.vf-c.bl { bottom: 10px; left: 10px;  border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.vf-c.br { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; border-radius: 0 0 5px 0; }
.vf-plate {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 54%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(207,199,154,0.4), transparent 52%),
    radial-gradient(circle at 66% 62%, rgba(74,222,128,0.3), transparent 54%),
    rgba(244,241,232,0.06);
  border: 1px solid var(--line-2);
}
.scanline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  box-shadow: 0 0 16px 2px rgba(74,222,128,0.5);
  animation: scan 3.1s var(--ease-io) infinite;
}
@keyframes scan {
  0%   { top: 8%;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 92%; opacity: 0; }
}

/* ─────────── 13. SNÍMKY (připnutá vodorovná lišta) ─────────── */

.shots { position: relative; background: var(--bg); }
.shots-stage { display: flex; flex-direction: column; justify-content: center; padding-block: var(--sec-y); }
.shots-head { margin-bottom: clamp(40px, 6vw, 70px); }

.shots-rail {
  display: flex; gap: clamp(18px, 2.4vw, 34px);
  padding-inline: var(--gutter);
  will-change: transform;
}
/* Lišta jede vodorovně podle toho, jak sekce prochází obrazovkou.
   Dráhu (--shots-travel) dopočítá site.js z reálné šířky obsahu —
   v CSS ji spočítat nelze. Sekce se NEPŘIPÍNÁ: dráha vychází na pár
   set pixelů a držet kvůli tomu obrazovku by byla jen daň na scrollu. */
@media (min-width: 861px) {
  html.js .shots-rail {
    transform: translate3d(calc(var(--p, 0) * var(--shots-travel, 0px) * -1), 0, 0);
    transition: none;
  }
}
.shot-card { flex: 0 0 auto; width: clamp(210px, 21vw, 300px); }
.shot-frame {
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: 0 34px 80px -34px rgba(0,0,0,0.9);
  transition: transform .6s var(--ease), border-color .4s;
}
.shot-frame img { width: 100%; height: auto; }
.shot-frame:hover { border-color: rgba(207,199,154,0.35); }
.shot-cap { margin-top: 18px; font-size: 0.85rem; color: var(--ink-3); line-height: 1.5; }
.shot-cap b {
  display: block; color: var(--ink); font-weight: 600;
  font-family: var(--disp); letter-spacing: -0.02em; margin-bottom: 3px;
  font-size: 0.98rem;
}
.shots-hint {
  display: none;
  margin: 22px var(--gutter) 0;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-4);
}

/* ─────────── 14. BENTO ─────────── */

/* Dlaždice nesdílejí mezeru, ale jednu vlasovou linku: mřížka má
   `gap: 1px` nad barvou linky a buňky si nesou pozadí. Dvojité rámečky
   tím nemůžou vzniknout ani u nepravidelného bentu, kde by se
   „poslední ve sloupci" hledalo těžko.
   Mřížkujeme jen důkaz — ne výzvu. Ceník zůstává na čisté ploše. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tile {
  position: relative; overflow: hidden;
  border: 0; border-radius: 0;
  background: linear-gradient(180deg, rgba(244,241,232,0.045), rgba(244,241,232,0.012)), var(--bg-2);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 22px;
  transition: background .45s var(--ease);
  min-height: 210px;
}
/* Světlo pod kurzorem — --mx/--my nastavuje motion.js (data-km-tilt). */
.tile::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(207,199,154,0.09), transparent 62%);
  opacity: 0; transition: opacity .45s;
}
.tile:hover::before { opacity: 1; }
.tile:hover { background: linear-gradient(180deg, rgba(244,241,232,0.07), rgba(244,241,232,0.02)), var(--bg-2); }

.tile-big   { grid-column: span 4; grid-row: span 2; }
.tile-tall  { grid-column: span 2; grid-row: span 2; }
.tile-half  { grid-column: span 3; }
.tile-third { grid-column: span 3; }
/* Tři dlaždice vedle sebe (trénink · předpověď váhy · žebříček). Šest
   sloupců se jimi dělí beze zbytku; na tabletu jsou sloupce čtyři, takže
   třetí by zůstala trčet v půlce řady — proto přes celou šířku. */
.tile-trio  { grid-column: span 2; }

.tile-viz { position: relative; }
/* S opravdovou fotkou dává hledáček smysl v širším poměru než 4:3 —
   talíř se vejde celý a dlaždice nenaroste do nesmyslné výšky. */
.tile-big .viewfinder { aspect-ratio: 16 / 10; height: auto; max-height: 400px; }
.vf-photo { position: absolute; inset: 0; display: block; }
.vf-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%;
  /* Snímek je z teplého vnitřního světla — pod ztmavením by zhasl. */
  filter: brightness(1.1) saturate(1.14) contrast(1.05);
}
/* Ztmavení pod odečty — bez něj se bílé chipy na vejcích ztratí. */
.tile-big .viewfinder::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,7,6,0.24), rgba(6,7,6,0.04) 42%, rgba(6,7,6,0.5));
}
.tile-big .vf-c, .tile-big .scanline { z-index: 2; }
.viz-chip {
  position: absolute; padding: 6px 12px; border-radius: 999px;
  background: rgba(6,7,6,0.82); backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  font-family: var(--num); font-size: 0.72rem; font-weight: 600;
  animation: chipFloat 5s var(--ease-io) infinite;
}
.vc-1 { top: 14%;  right: 6%;  color: var(--gold); }
.vc-2 { bottom: 26%; left: 4%; color: var(--ink-2); animation-delay: .7s; }
.vc-3 { bottom: 8%; right: 12%; color: var(--green); animation-delay: 1.4s; }
@keyframes chipFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}

.tile-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  border: 1px solid var(--line-2);
  background: rgba(244,241,232,0.035);
  flex-shrink: 0;
}
.tile-icon svg { width: 21px; height: 21px; }

.t-copy { margin-top: auto; }
.tile-kicker {
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 10px;
}
.tile .tile-h {
  font-family: var(--disp); font-size: var(--fs-h4);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.18;
  margin-bottom: 9px;
}
.tile p { color: var(--ink-3); font-size: 0.92rem; line-height: 1.55; }

.spark { position: relative; }
.spark-num {
  font-family: var(--num); font-size: 2rem; font-weight: 700;
  letter-spacing: -0.04em; margin-bottom: 12px;
}
.spark-num span { font-size: 0.85rem; font-weight: 500; color: var(--ink-3); }
.spark svg { width: 100%; height: 74px; }
/* Vysoká dlaždice má nad popiskem hodně místa — graf ho zaplní
   lépe než prázdno. */
.tile-tall .spark svg { height: clamp(90px, 11vw, 150px); }
.spark-line {
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: drawLine 1.8s var(--ease) .3s forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.spark-lbls {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 0.66rem; color: var(--ink-4);
}

/* ─────────── 14b. VÝZVA UPROSTŘED ───────────
   Vsuvka mezi funkcemi a Apple Health. Bez jediné linky uvnitř:
   každá hranice soupeří s tlačítkem o první pohled, a tady má
   vyhrát tlačítko. Vlasové linky drží jen okraje pruhu. */
.cta-band { padding-block: clamp(44px, 6vh, 78px); }
.cta-band-in {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 22px 40px;
  padding-block: clamp(26px, 3.4vh, 40px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band p {
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  color: var(--ink-3); max-width: 48ch; line-height: 1.5;
}
.cta-band p strong { color: var(--ink); font-weight: 600; }

/* ─────────── 15. APPLE HEALTH ─────────── */

.hk-band { background: var(--bg-2); border-block: 1px solid var(--line); overflow: hidden; }
.hk-glow {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(900px, 120vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.13), transparent 62%);
  filter: blur(80px); pointer-events: none;
}
.hk-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px); align-items: center;
  position: relative;
}
.hk-note {
  margin-top: 30px; font-size: 0.93rem; color: var(--ink-3);
  padding-left: 16px; border-left: 2px solid var(--gold-2);
}
.hk-note strong { color: var(--ink); font-weight: 600; }

.hk-orbit { position: relative; display: grid; place-items: center; min-height: 380px; }

/* Prstence a paprsky. Kreslí se podle postupu sekce (--p), takže
   spoje „narostou" ze středu ven ve chvíli, kdy sekce najíždí. */
.hk-rings {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.hk-rings ellipse {
  fill: none; stroke: var(--line); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hk-ring-inner { stroke: rgba(167,139,250,0.16); }
.hk-spokes line {
  stroke: rgba(74,222,128,0.55); stroke-width: 1; opacity: 0.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 260;
  stroke-dashoffset: calc(260 - 260 * var(--p, 0));
}

.hk-core {
  position: absolute; z-index: 3;
  width: 84px; height: 84px; border-radius: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: 0 0 70px -10px rgba(167,139,250,0.4);
}
.hk-core img { border-radius: 12px; }

.hk-pills {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 9px;
  justify-content: center; align-content: center;
  max-width: 460px;
  padding: 90px 0;
}
.hk-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(6,7,6,0.78); backdrop-filter: blur(8px);
  font-size: 0.8rem; color: var(--ink-2); white-space: nowrap;
  /* Posun je na vlastnosti `translate`, ne v `transform` — transform
     drží rozmístění po elipse a nesmí ho nic přepsat. */
  transition: border-color .4s, translate .4s var(--ease), color .4s;
  animation: pillFloat 7s var(--ease-io) infinite;
}
.hk-pill:nth-child(2n) { animation-delay: -1.4s; }
.hk-pill:nth-child(3n) { animation-delay: -2.8s; }
.hk-pill:nth-child(4n) { animation-delay: -4.2s; }
.hk-pill:hover { border-color: var(--gold-2); color: var(--ink); }
.hk-pill .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
@keyframes pillFloat {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -6px; }
}

/* Na širokém plátně pilulky sedí na elipse. Souřadnice jsou spočítané
   tak, aby nejširší popisky padly nahoru a dolů, kde je na oblouku
   nejvíc místa — jinak by se sousedi překrývali. */
@media (min-width: 1025px) {
  .hk-orbit { min-height: 430px; }
  .hk-pills {
    position: absolute; inset: 0;
    display: block; max-width: none; padding: 0;
  }
  /* Selektor je záměrně na tři třídy: obecné `.km-in { transform: none }`
     má stejnou váhu a jinak by rozmístění po elipse smazalo. */
  .hk-orbit .hk-pills .hk-pill {
    position: absolute; left: 50%; top: 50%;
    transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
  }
  .hk-pill:nth-child(1) { --x: -148px; --y: -106px; }  /* Spánek & fáze */
  .hk-pill:nth-child(2) { --x:  210px; --y:    0px; }  /* HRV */
  .hk-pill:nth-child(3) { --x:    0px; --y: -150px; }  /* Klidová tepovka */
  .hk-pill:nth-child(4) { --x:  148px; --y: -106px; }  /* Kroky */
  .hk-pill:nth-child(5) { --x:    0px; --y:  150px; }  /* Aktivní kalorie */
  .hk-pill:nth-child(6) { --x: -210px; --y:    0px; }  /* Váha */
  .hk-pill:nth-child(7) { --x:  148px; --y:  106px; }  /* Tréninky */
  .hk-pill:nth-child(8) { --x: -148px; --y:  106px; }  /* Recovery skóre */
}
/* Užší plátno na elipsu nemá šířku — zpátky do hloučku a logo nad něj. */
@media (max-width: 1024px) {
  .hk-rings { display: none; }
  .hk-orbit { display: flex; flex-direction: column; align-items: center; gap: 26px; min-height: 0; }
  .hk-core { position: static; }
  .hk-pills { padding: 0; }
}

/* Textová alternativa pro čtečky a případ bez CSS gridu. */
.hk-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ─────────── 16. KALKULAČKA ─────────── */

.calc-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.calc-form, .calc-results {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(244,241,232,0.04), rgba(244,241,232,0.012));
  padding: clamp(24px, 2.8vw, 38px);
}
.calc-form { display: flex; flex-direction: column; gap: 20px; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-field { display: flex; flex-direction: column; gap: 9px; }
.calc-label {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.calc-input, .calc-select {
  width: 100%; padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: rgba(6,7,6,0.55);
  font-family: var(--num); font-size: 1rem; font-weight: 600;
  transition: border-color .3s, background .3s;
}
.calc-input::placeholder { color: var(--ink-4); font-weight: 500; }
.calc-input:focus, .calc-select:focus { border-color: var(--green); background: rgba(6,7,6,0.85); }
.calc-input.is-error { border-color: var(--red); }
.calc-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7069' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  font-size: 0.9rem; font-family: var(--body); font-weight: 500;
}
.calc-select option { background: var(--bg-2); color: var(--ink); }

.calc-seg {
  display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 4px; padding: 4px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: rgba(6,7,6,0.55);
}
.calc-seg label { position: relative; cursor: pointer; }
.calc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.calc-seg span {
  display: block; text-align: center; padding: 10px 6px;
  border-radius: 9px; font-size: 0.87rem; font-weight: 500;
  color: var(--ink-3);
  transition: background .3s var(--ease), color .3s;
}
.calc-seg input:checked + span { background: rgba(244,241,232,0.1); color: var(--ink); }
.calc-seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

.calc-submit {
  margin-top: 4px; padding: 15px 24px; border-radius: 999px; border: 0;
  background: var(--ink); color: #070908;
  font-weight: 600; font-size: 0.95rem; cursor: pointer;
  transition: background .3s, transform .3s var(--ease);
}
.calc-submit:hover { background: var(--green); }

.calc-results { min-height: 340px; display: flex; flex-direction: column; }
.calc-empty {
  margin: auto; text-align: center; color: var(--ink-4);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: 30ch;
}
.calc-kcal { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.calc-kcal-num {
  font-family: var(--num); font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  background: linear-gradient(100deg, var(--green), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.calc-kcal-num span { font-size: 0.32em; font-weight: 500; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.calc-kcal-label { margin-top: 10px; font-size: 0.9rem; color: var(--ink); }
.calc-kcal-meta { margin-top: 4px; font-size: 0.78rem; color: var(--ink-4); }

.calc-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.calc-macro {
  padding: 16px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(6,7,6,0.4);
  text-align: center;
}
.calc-macro-val { font-family: var(--num); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; }
.calc-macro-val span { font-size: 0.62em; color: var(--ink-3); font-weight: 500; }
.calc-macro-label { margin-top: 4px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }

.calc-meals-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.calc-meals-title { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.calc-reroll {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent;
  font-size: 0.75rem; color: var(--ink-2); cursor: pointer;
  transition: border-color .3s, color .3s;
}
.calc-reroll:hover { border-color: var(--gold-2); color: var(--ink); }
.calc-reroll svg { transition: transform .5s var(--ease); }
.calc-reroll:hover svg { transform: rotate(180deg); }

.calc-meals { display: flex; flex-direction: column; }
.calc-meal {
  display: grid; grid-template-columns: 86px 1fr auto;
  gap: 12px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.calc-meal:last-child { border-bottom: 0; }
.calc-meal-time { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.calc-meal-name { color: var(--ink-2); line-height: 1.45; }
.calc-meal-kcal { font-family: var(--num); font-weight: 600; color: var(--gold); white-space: nowrap; }
.calc-disclaimer { margin-top: 18px; font-size: 0.75rem; color: var(--ink-4); line-height: 1.5; }
.calc-disclaimer a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────── 17. RECENZE ─────────── */

.sec-rev { overflow: hidden; }
.rev-sum {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px;
  padding: clamp(22px, 2.4vw, 32px) clamp(26px, 3vw, 40px);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(110deg, rgba(207,199,154,0.1), rgba(244,241,232,0.012) 60%);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.rev-sum .rev-sum-cta { margin-left: auto; }
.rev-sum-num {
  font-family: var(--num); font-size: clamp(3rem, 7vw, 4.6rem);
  font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--gold);
}
.rev-sum .stars svg { width: 17px; height: 17px; }
.rev-sum-lbl { font-size: 0.9rem; color: var(--ink-3); }
.rev-sum-lbl strong { color: var(--ink); font-weight: 600; }
.rev-sum-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 6px; padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 0.85rem; font-weight: 500;
  transition: background .3s, border-color .3s, gap .3s var(--ease);
}
.rev-sum-cta:hover { background: rgba(244,241,232,0.07); border-color: var(--ink-3); gap: 13px; }

.rev-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rev-marquee { overflow: hidden; padding-block: 6px; }
.rev-set {
  display: flex; gap: clamp(14px, 1.6vw, 22px);
  padding-right: clamp(14px, 1.6vw, 22px);
  will-change: transform;
}
.rev-card {
  flex: 0 0 auto; width: clamp(290px, 30vw, 420px);
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(244,241,232,0.045), rgba(244,241,232,0.012));
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color .4s, transform .5s var(--ease);
}
.rev-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.rev-top { display: flex; align-items: center; gap: 12px; }
.rev-ava {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-2), var(--green-deep));
  color: #070908; font-family: var(--disp); font-weight: 700; font-size: 0.95rem;
  flex-shrink: 0;
}
.rev-who { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.rev-name { font-weight: 600; font-size: 0.92rem; }
.rev-src { font-size: 0.72rem; color: var(--ink-4); }
.rev-top .stars svg { width: 12px; height: 12px; }
.rev-card blockquote { color: var(--ink-2); font-size: 0.95rem; line-height: 1.62; }
/* Bez JS aspoň karty recenzí popojíždějí samy. Klíčové snímky
   sem patří, protože se smazaly i s rychlostním pásem. */
@keyframes revSlide { to { transform: translateX(-50%); } }
html:not(.js) .rev-set { animation: revSlide 46s linear infinite; }

/* ─────────── 18. PLÁNY ─────────── */

.plans {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 2.6vw, 36px);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(244,241,232,0.04), rgba(244,241,232,0.012));
  transition: border-color .45s, transform .5s var(--ease);
}
.plan:hover { border-color: var(--line-2); }
.plan.featured {
  border-color: rgba(207,199,154,0.4);
  background:
    linear-gradient(180deg, rgba(207,199,154,0.11), rgba(244,241,232,0.015));
  box-shadow:
    0 40px 90px -40px rgba(207,199,154,0.35),
    inset 0 1px 0 rgba(207,199,154,0.28);
}
.plan.featured::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(207,199,154,0.75), rgba(207,199,154,0.05) 55%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.plan-badge {
  position: absolute; top: -11px; left: clamp(26px, 2.6vw, 36px);
  padding: 5px 14px; border-radius: 999px;
  background: linear-gradient(100deg, var(--gold), var(--gold-2));
  color: #070908; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em;
}
.plan-name { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.plan-price {
  font-family: var(--num); font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; margin-top: 14px;
}
.plan-price span { font-size: 0.34em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.plan-period { font-size: 0.83rem; color: var(--ink-3); margin-top: 4px; }
.save {
  display: inline-block; margin-left: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(74,222,128,0.14); color: var(--green);
  font-size: 0.72rem; font-weight: 600;
}
.plan ul { display: flex; flex-direction: column; gap: 11px; margin: 26px 0 30px; }
.plan li {
  position: relative; padding-left: 26px;
  font-size: 0.89rem; color: var(--ink-2); line-height: 1.5;
}
.plan li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 1.8px solid var(--green); border-bottom: 1.8px solid var(--green);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.plan li.dim { color: var(--ink-4); }
.plan li.dim::before {
  border-color: var(--ink-4);
  width: 12px; height: 12px; top: 5px;
  border: 0;
  background: linear-gradient(45deg, transparent 44%, var(--ink-4) 44%, var(--ink-4) 56%, transparent 56%),
              linear-gradient(-45deg, transparent 44%, var(--ink-4) 44%, var(--ink-4) 56%, transparent 56%);
  transform: none;
}
.plan-btn {
  margin-top: auto; text-align: center;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 600; font-size: 0.92rem;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.plan-btn.outline { border: 1px solid var(--line-2); color: var(--ink); }
.plan-btn.outline:hover { background: rgba(244,241,232,0.08); border-color: var(--ink-3); }
.plan-btn.gold {
  background: linear-gradient(100deg, var(--gold), var(--gold-2));
  color: #070908;
}
.plan-btn.gold:hover { filter: brightness(1.08); }
.plans-note {
  margin-top: 30px; font-size: 0.8rem; color: var(--ink-4);
  max-width: 78ch; line-height: 1.6;
}

/* ─────────── 19. FAQ ─────────── */

.sec-faq { background: var(--bg-2); border-block: 1px solid var(--line); }
.faq-grid {
  display: grid; grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.faq-head { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq-kontakt { margin-top: 22px; color: var(--ink-3); font-size: var(--fs-small); }
.faq-kontakt a {
  color: var(--gold); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(207,199,154,0.42);
}
.faq-kontakt a:hover { text-decoration-color: var(--gold); }

.faq-wrap { display: flex; flex-direction: column; }
.faq-wrap details { border-bottom: 1px solid var(--line); }
.faq-wrap details:first-child { border-top: 1px solid var(--line); }
.faq-wrap summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer;
  font-family: var(--disp);
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  font-weight: 500; letter-spacing: -0.025em; line-height: 1.35;
  transition: color .3s;
  list-style: none;
}
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary:hover { color: var(--gold); }
.faq-wrap summary i {
  position: relative; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2);
  transition: transform .45s var(--ease), border-color .3s, background .3s;
}
.faq-wrap summary i::before, .faq-wrap summary i::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--ink-2); border-radius: 2px;
  transition: transform .45s var(--ease), background .3s;
}
.faq-wrap summary i::before { width: 11px; height: 1.5px; translate: -50% -50%; }
.faq-wrap summary i::after  { width: 1.5px; height: 11px; translate: -50% -50%; }
.faq-wrap details[open] summary i { border-color: var(--gold); background: rgba(207,199,154,0.12); }
.faq-wrap details[open] summary i::after { transform: scaleY(0); }
.faq-wrap details[open] summary { color: var(--gold); }
.faq-answer { overflow: hidden; }
.faq-answer p {
  padding-bottom: 26px; padding-right: 50px;
  color: var(--ink-2); font-size: 0.95rem; line-height: 1.68;
  max-width: 68ch;
}

/* ─────────── 20. ZÁVĚREČNÁ VÝZVA ─────────── */

.final {
  position: relative; overflow: hidden;
  min-height: 88svh;
  display: grid; place-items: center;
  text-align: center;
  padding: var(--sec-y) var(--gutter);
}
.orb-final {
  width: min(1100px, 150vw); height: 700px;
  left: 50%; bottom: -320px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%,
    rgba(74,222,128,0.28) 0%,
    rgba(207,199,154,0.14) 40%,
    rgba(6,7,6,0) 72%);
  filter: blur(80px);
  animation: orbPulse 12s ease-in-out infinite;
}
.final-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.final h2 {
  font-family: var(--disp);
  font-size: clamp(2.8rem, 9vw, 8rem);
  font-weight: 600; line-height: 0.98; letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 96;
}
.final p {
  margin-top: 26px; font-size: var(--fs-lede);
  color: var(--ink-2); max-width: 48ch;
}
.final .btn { margin-top: 44px; padding: 21px 44px; font-size: 1.08rem; }

/* ─────────── 21. PATIČKA ─────────── */

footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 78px) 34px;
  overflow: hidden;
}
.footer-top {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-logo img { border-radius: 8px; }
.footer-logo .name { font-family: var(--disp); font-weight: 600; letter-spacing: -0.03em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 26px; }
.footer-links a {
  display: inline-block;
  /* Prst potřebuje víc než výšku řádku. */
  padding-block: 10px;
  font-size: 0.86rem; color: var(--ink-3);
  transition: color .3s;
  position: relative;
}
.footer-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: var(--gold-2);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.footer-links a:hover { color: var(--ink); }
.footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Velká značka na doraz — poslední obraz, který po sobě stránka nechá. */
.footer-mark {
  font-family: var(--disp);
  font-size: clamp(4.4rem, 23.5vw, 21rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 0.84;
  text-align: center;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
.footer-copy {
  margin-top: 30px; text-align: center;
  font-size: 0.78rem; color: var(--ink-4);
}
/* Povinné údaje provozovatele (§ 435 OZ) a „Nastavení cookies".
   Řádek skládá Scripts/lib/pravni.mjs, hlídá check-pravni-udaje.mjs. */
.footer-legal {
  margin: 10px auto 0; max-width: 72ch; text-align: center;
  font-size: 0.74rem; line-height: 1.7; color: var(--ink-4);
}
.footer-legal a {
  color: var(--ink-3); text-decoration: underline;
  text-decoration-color: rgba(244,241,232,0.22); text-underline-offset: 2px;
  transition: color .3s;
}
.footer-legal a:hover { color: var(--ink); }
/* Plovoucí bublina chatu (chat.js: 56 px, 18 px od okraje) by na úzkém
   displeji zakryla konec patičky — a v něm „Nastavení cookies", tedy
   odvolání souhlasu, které musí jít stejně snadno jako jeho udělení. */
@media (max-width: 860px) {
  footer { padding-bottom: 96px; }
}

/* ── NÍZKÉ DISPLEJE ──
   Notebook 1440×900 má po odečtení lišt prohlížeče kolem 700 px.
   Hero i připnutá scéna se do toho musí vejít celé — jinak CTA
   spadne pod okraj a scéna se ořízne. Všechno tu proto váže na vh. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 74px; }
  .hero-title { font-size: min(var(--fs-hero), 13vh); }
  .hero-badge { margin-bottom: clamp(14px, 2.6vh, 30px); }
  .hero-sub { margin-top: clamp(16px, 2.8vh, 34px); font-size: clamp(0.95rem, 2vh, 1.2rem); }
  .hero-actions { margin-top: clamp(20px, 3.2vh, 40px); }
  .hero-scroll { bottom: 16px; }
  .hero-scroll i { height: clamp(24px, 4vh, 46px); }

  html.js .story-stage { padding-block: clamp(28px, 4.5vh, 64px); }
  html.js .story-head { margin-bottom: clamp(16px, 2.6vh, 40px); }
  html.js .story-head .display { font-size: clamp(1.9rem, 6.4vh, 3.6rem); }
  html.js .story-head .lede { margin-top: clamp(12px, 2vh, 22px); font-size: clamp(0.9rem, 1.9vh, 1.05rem); }
  html.js .story-rail { margin-top: clamp(14px, 2.4vh, 28px); }
  html.js .story-track { min-height: min(400px, 44vh); }
  /* Karta je vysoká podle obsahu, ne podle min-height — proto ji
     na nízkém displeji zužujeme; hledáček má pevný poměr stran,
     takže šířka táhne výšku dolů s sebou. */
  html.js .scene-shot {
    width: clamp(196px, 33vh, 310px);
    min-height: 0; padding: 15px; gap: 9px;
  }
  html.js .scene-shot .dev-rows .dev-row { padding: 6px 0; font-size: 0.78rem; }
  html.js .dev-balnum { font-size: 1.9rem; }
  html.js .scene-copy h3 { font-size: clamp(1.3rem, 3.8vh, 2.1rem); margin: 10px 0 10px; }
  html.js .mini-ring { width: clamp(90px, 13vh, 132px); }
}

/* ─────────── 22. RESPONZIVITA ─────────── */

@media (max-width: 1180px) {
  .nav-mid { display: none; }
  .nav-burger { display: flex; }
}

/* Nejužší telefony (změřeno 390px): logo + odkaz na sk + "Stáhnout
   zdarma" + burger o pár pixelů přetékaly lištu (scrollWidth 398 px do
   390 px viewportu). Stažení mezer a paddingu jen v tomhle rozsahu —
   nad 400 px je místa dost a nemá smysl měnit vzhled lišty všem. */
@media (max-width: 400px) {
  .nav-right { gap: 8px; }
  .nav-cta { padding: 9px 14px; }
  .nav-lang-link { padding: 6px 8px; }
}

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .tile-big   { grid-column: span 4; grid-row: auto; }
  .tile-tall  { grid-column: span 4; grid-row: auto; }
  .tile-half, .tile-third, .tile-trio { grid-column: span 2; }
  .tile-trio-wide { grid-column: span 4; }

  .hk-grid { grid-template-columns: 1fr; }
  .hk-orbit { min-height: 320px; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .calc-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 520px; }
  .plan.featured { order: -1; }
}

@media (max-width: 860px) {
  :root { --nav-h: 60px; }

  /* Připnuté sekce se rozpadnou do normálního sloupce — na mobilu
     je vodorovný scroll uvnitř svislého past. */
  .story, .shots { height: auto !important; }
  .story-stage, .shots-stage { position: static !important; height: auto !important; }
  .story-track { display: flex; flex-direction: column; gap: clamp(56px, 10vw, 90px); }
  .scene {
    position: static !important;
    opacity: 1 !important; transform: none !important;
    grid-template-columns: 1fr; gap: 30px;
  }
  .scene.flip .scene-copy  { order: 0; }
  .scene.flip .scene-visual { order: 0; }
  .story-rail { display: none; }

  .shots-rail {
    transform: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    /* Bez scroll-padding by přichycení přitáhlo první snímek na
       samý okraj a okrajová mezera by zmizela. */
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .shots-rail::-webkit-scrollbar { display: none; }
  .shot-card { scroll-snap-align: start; width: min(230px, 62vw); }
  .shots-hint { display: block; }

  .balance-stage { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .bal-side, .bal-side.out { text-align: center; }
  .bal-center { order: -1; }

  .bento { grid-template-columns: 1fr; }
  .tile-big, .tile-tall, .tile-half, .tile-third,
  .tile-trio, .tile-trio-wide { grid-column: span 1; }

  .rev-card { width: min(320px, 82vw); }
  .footer-top { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .calc-row { grid-template-columns: 1fr; }
  .calc-macros { grid-template-columns: 1fr; }
  .calc-meal { grid-template-columns: 1fr auto; }
  .calc-meal-time { grid-column: 1 / -1; }
  .faq-answer p { padding-right: 0; }
  .hero-rings { display: none; }
}

/* ─────────── 23. OMEZENÝ POHYB ───────────
   Nic nezmizí, nic neposkakuje. Obsah zůstává celý. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .km-reveal, [data-km-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .km-line-i, .km-word, .km-char { transform: none !important; opacity: 1 !important; }
  [data-km-lazy-media] { clip-path: none !important; transform: none !important; }
  .hero-inner { opacity: 1 !important; transform: none !important; }
  .hero-scroll { opacity: 1 !important; }
  .km-cursor { display: none !important; }
  .grain { animation: none !important; }
  .story, .shots { height: auto !important; }
  .story-stage, .shots-stage { position: static !important; height: auto !important; }
  .scene { position: static !important; opacity: 1 !important; transform: none !important; }
  .story-track { display: flex; flex-direction: column; gap: 80px; }
  .shots-rail { transform: none !important; overflow-x: auto; }
  .bal-fg { stroke-dashoffset: calc(553 - 553 * 0.82); }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO S 3D TELEFONEM
   Telefon drží na místě, při scrollu se lehce natáčí a mění obrazovku;
   vlevo se k tomu střídá text. Postup dráhy dodává site.js jako --sp
   (0→1 přes celou výšku sekce), index kroku jako [data-step].

   Proč sticky a ne pin/scroll-jacking: stránka si nepřebírá scroll,
   takže kolečko, trackpad i klávesnice fungují normálně. Efekt je
   ozdoba obsahu, ne překážka mezi člověkem a tlačítkem do App Storu.
   ══════════════════════════════════════════════════════════════════════ */

.hero-3d {
  /* 4 kroky × ~90svh dráhy + jedna obrazovka na doběh. Míň dráhy =
     obrazovky se přepínají trhaně, víc = scrolluje se do prázdna. */
  min-height: 460svh;
  display: block;              /* přebíjí flex centrování původního hera */
  text-align: left;
  padding: 0 0 clamp(90px, 12vh, 140px);
  overflow: clip;              /* clip místo hidden: nezakládá scroll kontejner,
                                  takže position:sticky uvnitř dál funguje */
}

.hero-3d .hero-field {
  /* Sticky, ale záporný margin ho vyndá z toku — jinak by si ukousl
     celou obrazovku výšky a odsunul scénu pod fold. */
  position: sticky; top: 0; height: 100svh; margin-bottom: -100svh;
}

.hero-stage {
  position: sticky; top: 0; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(70px, 9vh, 110px);
}

.hero-grid {
  width: min(1180px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center; gap: clamp(28px, 5vw, 72px);
}

.hero-3d .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-3d .hero-badge { margin-bottom: clamp(20px, 2.6vw, 30px); }
.hero-3d .hero-title { text-align: left; }

/* Kroky leží přes sebe, aby se pod nimi nehýbala tlačítka. Výšku drží
   nejvyšší z nich (grid + stejná buňka), ne ten právě viditelný. */
.hero-steps {
  display: grid; width: 100%;
  margin: clamp(16px, 2.4vw, 26px) 0 clamp(26px, 3.4vw, 38px);
}
.hero-step {
  grid-area: 1 / 1;
  max-width: 46ch;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.hero-step.is-active {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity .45s ease, transform .45s ease, visibility 0s;
}

/* ── telefon ───────────────────────────────────────────────────────── */
.hero-device {
  perspective: 1400px;
  display: flex; justify-content: center;
}

.device-shell {
  position: relative;
  width: min(300px, 72vw);
  /* Poměr podle skutečného snímku (552x1200) + 9px rámu z každé strany,
     aby se displej nikde neořezával. Při výměně snímků překontrolovat. */
  aspect-ratio: 570 / 1218;
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(155deg, #2b312c 0%, #10130f 46%, #262b25 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.10) inset,
    0 34px 70px -26px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.05);
  transform-style: preserve-3d;
  /* „Většinou stojí" — otáčení je malé a kolem klidové polohy.
     Velké úhly vypadají jako šetřič obrazovky, ne jako produkt. */
  transform:
    rotateY(calc(-15deg + var(--sp, 0) * 13deg))
    rotateX(calc(5deg - var(--sp, 0) * 7deg))
    rotateZ(calc(-1.5deg + var(--sp, 0) * 3deg))
    translate3d(0, calc(var(--sp, 0) * -18px), 0);
  transition: transform .18s linear;
  will-change: transform;
}

.device-notch {
  position: absolute; z-index: 3; top: 17px; left: 50%;
  translate: -50% 0;
  width: 33%; height: 20px; border-radius: 999px;
  background: #050706;
}

.device-screen {
  position: absolute; inset: 9px;
  width: calc(100% - 18px); height: calc(100% - 18px);
  object-fit: contain; object-position: center;
  border-radius: 34px;
  opacity: 0;
  transition: opacity .5s ease;
}
.device-screen.is-active { opacity: 1; }

/* Odlesk skla. Nereaguje na scroll — statický lesk čte oko jako materiál,
   pohyblivý jako animaci navíc. */
.device-glare {
  position: absolute; inset: 9px; z-index: 2;
  border-radius: 34px; pointer-events: none;
  background: linear-gradient(118deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.03) 26%,
    rgba(255,255,255,0) 52%);
}

.hero-3d .hero-scroll { position: absolute; left: 50%; translate: -50% 0; bottom: clamp(20px, 4vh, 40px); }

/* ── užší displeje ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-3d { min-height: 420svh; }
  .hero-grid { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 40px); }
  /* Text NAD telefonem, ne pod ním. Do 2. 10. 2026 tu bylo `order: -1`
     a na 375×812 začínal nadpis na 616 px, věta o hodnotě na 732 px
     a tlačítko do App Storu na 886 px — pod ohybem. Scéna je sticky,
     takže co se do první obrazovky nevešlo, zůstalo schované celou
     dráhu sekce (přes tři obrazovky scrollu). */
  .hero-device { perspective: 1000px; }
  .device-shell { width: min(228px, 56vw); }
  .hero-3d .hero-copy { align-items: center; text-align: center; }
  .hero-3d .hero-title { text-align: center; }
  /* justify-self: bez něj sedí odstavec v širší mřížce (tablet) vlevo pod
     vystředěným nadpisem. */
  .hero-step { max-width: 38ch; justify-self: center; }
  .hero-3d .hero-scroll { display: none; }
}

/* Telefon pod textem dostane jen tu výšku, která po textu z obrazovky zbude.
   Bez toho by přečníval pod ohyb a se sticky scénou by se jeho spodek během
   přepínání obrazovek vůbec neukázal. Jen na dost vysokých displejích — na
   telefonu na šířku by na telefon nezbylo nic, tam platí obyčejný tok výš.
   A jen s povoleným pohybem: s vypnutým se scéna rozloží pod sebe (níž). */
@media (max-width: 900px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .hero-stage { height: 100svh; padding-bottom: 20px; }
  .hero-grid {
    flex: 1 1 auto; min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
  }
  .hero-device { align-self: stretch; min-height: 0; }
  /* Výška místo šířky: šířka dopočtená z poměru stran, strop zůstává
     původních min(228px, 56vw). Spodní mez 260 px: na nízkém displeji
     (iPhone SE, 375×667) by jinak zbyl telefon široký 72 px, tedy ikonka.
     Radši ať spodkem přečnívá pod ohyb — tlačítko je stejně nad ním. */
  .device-shell { width: auto; height: max(260px, min(100%, calc(min(228px, 56vw) * 1218 / 570))); }
  /* Telefon tu bývá menší než původních 228 px a pevná zaoblení (42 / 34 px)
     by z něj udělala pilulku. Procenta drží tvar při jakékoli velikosti —
     při šířce 300 px dávají přesně původní hodnoty. */
  .device-shell { border-radius: 14% / 6.55%; }
  .device-screen, .device-glare { border-radius: 12.06% / 5.46%; }
  /* Snímky obrazovek mají vlastní dynamic island. Překryvný výřez s ním
     lícuje jen při původní velikosti; na menším telefonu (rám zůstává 9 px)
     by se ukázaly dva nad sebou. */
  .device-notch { display: none; }
}
/* Na úzkém telefonu by druhé tlačítko pod sebou ukrojilo telefonu skoro
   70 px. Vede jen na sekci hned pod herem, ke které se palec doscrolluje sám;
   hlavní tlačítko do App Storu zůstává. */
@media (max-width: 560px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .hero-actions .btn-ghost { display: none; }
}

/* ── bez animací ───────────────────────────────────────────────────────
   Sticky dráha by pro někoho, kdo si vypnul pohyb, znamenala jen čtyři
   obrazovky scrollování skoro bez obsahu. Sekce se proto smrskne na
   jednu obrazovku a všechny kroky se vypíšou pod sebe. */
@media (prefers-reduced-motion: reduce) {
  .hero-3d { min-height: auto; }
  .hero-stage { position: static; min-height: auto; }
  .hero-3d .hero-field { position: absolute; height: 100%; }
  .hero-steps { display: block; }
  .hero-step {
    opacity: 1; visibility: visible; transform: none;
    transition: none; margin-bottom: 12px;
  }
  .device-shell { transform: none; transition: none; }
  .device-screen { transition: none; }
  .device-screen:not(.is-active) { display: none; }
}