/* ============================================================
   Amanu, amanu.cz
   Světlá a hravá, tmavý režim přepínačem. Motiv zvukové vlny.
   ============================================================ */

/* ---------- Písmo: vlastní hosting, ne Google Fonts ----------
   Jeden variabilní řez pokrývá celou škálu tloušťky 100 až 900,
   takže je to jeden požadavek místo dvanácti. Kurzíva se záměrně
   nenačítá: dřívější odkaz na Google Fonts ji taky neobsahoval
   (v adrese chyběla osa "ital"), takže prohlížeč ji dopočítává
   sklonem úplně stejně jako dosud a vykreslení se nemění.
   Inter 4.1, licence SIL Open Font License 1.1, viz fonts/Inter-LICENSE.txt.
   Důvod pro vlastní hosting je v zásadách ochrany údajů, čl. 9:
   při načtení z Googlu odcházela IP adresa návštěvníka do USA. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

/* ---------- Tokeny: světlý režim (výchozí) ---------- */
:root {
  --bg: #ffffff;
  --bg-soft: #f7f4fd;
  --surface: #ffffff;
  --surface-tint: #f3eefc;
  --border: #e6def6;
  --text: #241c3d;
  --muted: #5d5478;
  --accent: #7c3aed;
  --accent-strong: #6d28d9;
  --accent-soft: #efe8fd;
  --accent-lighter: #a78bfa;
  --on-accent: #ffffff;
  --btn-bg: #7c3aed;
  --btn-bg-hover: #6d28d9;
  --success: #059669;
  --success-soft: #d1fae5;
  --warn: #b45309;
  --danger: #dc2626;
  --shadow-card: 0 8px 30px rgba(109, 40, 217, 0.08);
  --shadow-pop: 0 18px 50px rgba(109, 40, 217, 0.16);
  --nav-bg: rgba(255, 255, 255, 0.82);
  --deco-opacity: 0.78;
  /* Maska vln u vyzev k akci. Hranice je svazana s obalem obsahu, ne s procenty
     sirky okna: carky se tak kresli vyhradne vedle nej a nikdy pod textem ani
     pod tlacitky. Pod sirku obalu zmizi uplne, coz je na mobilu zamer. */
  --vlna-maska: linear-gradient(90deg, #000 0,
                #000 calc(50% - var(--maxw) / 2 - 34px),
                transparent calc(50% - var(--maxw) / 2 + 6px),
                transparent calc(50% + var(--maxw) / 2 - 6px),
                #000 calc(50% + var(--maxw) / 2 + 34px), #000 100%);
  --radius: 18px;
  --radius-sm: 12px;
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --maxw: 1120px;
}

/* ---------- Tokeny: tmavý režim ---------- */
:root[data-theme="dark"] {
  --bg: #16111f;
  --bg-soft: #1c1529;
  --surface: #211a31;
  --surface-tint: #281f3d;
  --border: #392c52;
  --text: #f5f3ff;
  --muted: #b6abd6;
  --accent: #a78bfa;
  --accent-strong: #c4b5fd;
  --accent-soft: #2f2349;
  --accent-lighter: #8b5cf6;
  --on-accent: #ffffff;
  --btn-bg: #8b5cf6;
  --btn-bg-hover: #7c3aed;
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.16);
  --warn: #fbbf24;
  --danger: #f87171;
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.45);
  --nav-bg: rgba(22, 17, 31, 0.82);
  --deco-opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #16111f;
    --bg-soft: #1c1529;
    --surface: #211a31;
    --surface-tint: #281f3d;
    --border: #392c52;
    --text: #f5f3ff;
    --muted: #b6abd6;
    --accent: #a78bfa;
    --accent-strong: #c4b5fd;
    --accent-soft: #2f2349;
    --accent-lighter: #8b5cf6;
    --on-accent: #ffffff;
    --btn-bg: #8b5cf6;
    --btn-bg-hover: #7c3aed;
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.16);
    --warn: #fbbf24;
    --danger: #f87171;
    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.45);
    --nav-bg: rgba(22, 17, 31, 0.82);
    --deco-opacity: 0.6;
  }
}

/* ---------- Reset & základ ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

/* Bez teto radky se obrazek s atributem height pri zuzeni roztahne:
   sirku vezme z rozvrzeni, ale vysku drzi z atributu, takze se zdeformuje.
   Na svg se to schvalne nevztahuje, ikony si vysku ridi samy. */
img { height: auto; }

h1, h2, h3 { margin: 0; line-height: 1.14; }

p { margin: 0; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection { background: rgba(124, 58, 237, 0.3); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow { max-width: 800px; }

.section { padding: 108px 0; position: relative; }

.section-soft { background: var(--bg-soft); }

/* Zvýrazněná slova v nadpisech: stejný font, značková fialová */
.hl { font-style: normal; color: var(--accent); }

/* ---------- Tlačítka ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 16.5px;
  letter-spacing: 0.1px;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--btn-bg);
  color: var(--on-accent);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

.btn-primary:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.4);
}

.btn-ghost {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn-invert {
  background: #ffffff;
  color: #6d28d9;
  box-shadow: 0 8px 26px rgba(20, 10, 40, 0.25);
}

.btn-invert:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 34px rgba(20, 10, 40, 0.3);
}

.btn-lg { padding: 17px 34px; font-size: 17.5px; }
.btn-sm { padding: 10px 20px; font-size: 15px; }

/* Tlacitko v navigaci nese dva popisky. Siroky plati vsude krome telefonu,
   kde se do listy nevejde; prepina je medialni dotaz nize. */
.nav-cta-kratky { display: none; }
.btn-block { width: 100%; }

/* Vyzva na konci rozbaleneho panelu. Zobrazuje se jen na uzkych telefonech,
   kde v liste pro tlacitko neni misto; jinde by byla druhou kopii teze vyzvy. */
.nav-panel-cta { display: none; }

/* Mini vlna uvnitř tlačítka */
.btn-wave {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
}

.btn-wave i {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.9;
  animation: btnWave 1.3s ease-in-out infinite;
}

.btn-wave i:nth-child(1) { height: 8px; animation-delay: 0s; }
.btn-wave i:nth-child(2) { height: 15px; animation-delay: 0.18s; }
.btn-wave i:nth-child(3) { height: 10px; animation-delay: 0.36s; }

@keyframes btnWave {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.2); }
}

/* ---------- Logo (statické: vlna + slovo) ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  text-decoration: none;
  font-size: 25px;
}

.logo-wave {
  display: inline-flex;
  align-items: center;
  gap: 0.115em;
}

.logo-wave i {
  width: 0.145em;
  height: var(--h);
  border-radius: 0.075em;
  background: var(--accent);
}

.logo-word {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}

/* ---------- Navigace ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

/* Barva textu, ne tlumena seda: polozky navigace jsou hlavni rozcestnik
   dlouhe prodejni stranky, ne popisek.

   Vyjimka `:not(.btn)` je kvuli vyzve na konci rozbaleneho panelu. Je to taky
   odkaz uvnitr `.nav-links`, takze by ji tahle pravidla prebila `.btn-primary`
   (0,1,1 proti 0,1,0) a popisek by na fialovem tlacitku vysel tmave. */
.nav-links a:not(.btn) {
  position: relative;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 15.5px;
  padding: 6px 1px;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Podtrzeni se vykresluje pseudoprvkem, ne zmenou ramecku: menit ramecek by
   posunulo ostatni polozky o dva pixely pokazde, kdyz se prectena sekce zmeni. */
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nav-links a:not(.btn):hover { color: var(--accent); }

.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

/* Sekce, kterou ma ctenar prave pred sebou. Trida ji dava skript v main.js. */
.nav-links a:not(.btn).aktivni { color: var(--accent); }

.nav-links a:not(.btn).aktivni::after { transform: scaleX(1); }

/* ---------- Hamburger ----------
   Na desktopu neexistuje. Pod 960 px je to jediná cesta k odkazům, protože
   `.nav-links` se tam mění v rozbalovací panel pod lištou. */
.nav-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 2px solid var(--border);
  color: var(--text);
  flex: 0 0 auto;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-menu:hover { border-color: var(--accent); color: var(--accent); }

.nav-menu-cary {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

.nav-menu-cary i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.14s ease;
}

.nav-menu-cary i:nth-child(1) { top: 0; }
.nav-menu-cary i:nth-child(2) { top: 6px; }
.nav-menu-cary i:nth-child(3) { top: 12px; }

/* Otevřený panel: ze tří čar se stane křížek. */
.nav.menu-otevreno .nav-menu-cary i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.menu-otevreno .nav-menu-cary i:nth-child(2) { opacity: 0; }
.nav.menu-otevreno .nav-menu-cary i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--border);
  color: var(--muted);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  flex: 0 0 auto;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(12deg);
}

.theme-toggle svg { width: 20px; height: 20px; }

.theme-toggle .ico-sun { display: none; }

:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .ico-sun { display: block; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .ico-moon { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 92px 0 116px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 480px at 50% -140px, var(--accent-soft), transparent 70%),
    var(--bg);
}

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

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}

.blob-1 {
  width: 460px;
  height: 460px;
  top: -180px;
  left: -140px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.35), transparent 66%);
  animation: blobDrift 13s ease-in-out infinite alternate;
}

.blob-2 {
  width: 420px;
  height: 420px;
  bottom: -160px;
  right: -120px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22), transparent 66%);
  animation: blobDrift 16s ease-in-out infinite alternate-reverse;
}

@keyframes blobDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(36px, 22px) scale(1.1); }
}

/* Pozadí hera. Jeden obrázek slouží oběma motivům, druhá sada souborů se
   tedy neudržuje. Ve světlém motivu `multiply` vyhodí bílou a nechá jen
   fialovou kresbu, v tmavém `invert` otočí světlost, `hue-rotate` vrátí
   odstín zpátky k fialové a `screen` vyhodí černou.

   `isolation: isolate` na `.hero` je povinné. Bez něj se prolnutí počítá
   proti pozadí celé stránky, ne proti hero sekci, takže by obrázek
   prosákl i tam, kde nemá co dělat. */
.hero-foto {
  position: absolute;
  inset: 0;
  background: url("../img/hero-vlnovka.jpg") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.9;
  /* Bez masky obrázek dojede na spodní hranu sekce, `overflow: hidden` ho
     uřízne a mezi herem a bílou sekcí pod ním je vidět čára. Takhle se
     rozplyne do podkladu dřív, než hero skončí. */
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 84%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 84%);
}

:root[data-theme="dark"] .hero-foto {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
  opacity: 0.55;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .hero-foto {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
    opacity: 0.55;
  }
}

/* Na telefonu by `cover` ořízl obrázek na jeho střed, jenže ten je schválně
   prázdný, takže by se 130 kB stáhlo a nebylo vidět nic. Kreslí se proto
   na šířku jako pruh, kde jsou hustší kraje vlny vidět. */
@media (max-width: 640px) {
  .hero-foto {
    background-size: 160% auto;
    background-position: center 58%;
  }
}

/* Plovoucí čárky značky */
.fbar {
  position: absolute;
  width: 10px;
  border-radius: 6px;
  background: var(--accent);
  opacity: 0.16;
  animation: fbFloat 7s ease-in-out infinite;
}

.fb-1 { height: 54px; top: 18%; left: 7%; animation-delay: 0s; }
.fb-2 { height: 34px; top: 58%; left: 13%; animation-delay: 1.4s; width: 8px; }
.fb-3 { height: 72px; top: 30%; right: 8%; animation-delay: 0.7s; }
.fb-4 { height: 40px; top: 66%; right: 14%; animation-delay: 2.2s; width: 8px; }
.fb-5 { height: 26px; top: 12%; right: 26%; animation-delay: 3s; width: 7px; }
.fb-6 { height: 30px; top: 74%; left: 30%; animation-delay: 1.9s; width: 7px; }

@keyframes fbFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(3deg); }
}

/* Dekorativní řada čárek u paty hero */
.hero-bars {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: var(--deco-opacity);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

.hero-bars i {
  width: 5px;
  height: 14px;
  border-radius: 2.5px;
  background: var(--accent);
  opacity: 0.75;
  animation: heroPulse 3.4s ease-in-out infinite;
}

.hero-bars i:nth-child(3n)   { height: 26px; animation-delay: 0.3s; }
.hero-bars i:nth-child(4n)   { height: 18px; animation-delay: 0.9s; }
.hero-bars i:nth-child(5n)   { height: 32px; animation-delay: 1.4s; }
.hero-bars i:nth-child(7n)   { height: 22px; animation-delay: 2s; }
.hero-bars i:nth-child(2n+1) { animation-delay: 0.6s; }

@keyframes heroPulse {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.3); }
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Animovaný wordmark (podpis značky): čárky -> písmena, zleva */
.brandmark {
  font-size: clamp(44px, 6vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.04em;
  margin-bottom: 34px;
  min-height: 1.5em;
}

.bm-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.68em;
  height: 1.45em;
}

.bm-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.3em;
  height: var(--h);
  margin-left: -0.15em;
  margin-top: calc(var(--h) / -2);
  border-radius: 0.15em;
  background: var(--accent);
  transform-origin: center;
  animation: barSeq 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.55s);
}

.bm-ltr {
  font-weight: 800;
  color: var(--text);
  opacity: 0;
  animation: ltrSeq 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.55s);
}

@keyframes barSeq {
  0%   { opacity: 1; transform: scaleY(1); }
  6%   { transform: scaleY(0.5); }
  12%  { transform: scaleY(1.1); }
  18%  { transform: scaleY(0.55); }
  24%  { opacity: 1; transform: scaleY(0.85); }
  32%  { opacity: 0; transform: scaleY(0.12); }
  82%  { opacity: 0; transform: scaleY(0.12); }
  92%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 1; transform: scaleY(1); }
}

@keyframes ltrSeq {
  0%, 26% { opacity: 0; transform: translateY(9px); }
  36%     { opacity: 1; transform: translateY(0); }
  80%     { opacity: 1; }
  90%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  border-radius: 99px;
  padding: 9px 20px;
  margin-bottom: 26px;
  box-shadow: var(--shadow-card);
}

.badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* Nadpis v heru se skládá ze dvou řezaných řádků, aby šlo za „Mluvte“ postavit
   ikonu čárek místo tečky a na druhý řádek střídající se sloveso. Globální
   `max-width: 14ch` je pro ten nadpis příliš úzké: nejdelší střídané spojení
   („škrtá výplňová slova“) by se do něj nevešlo a řádek by poskakoval. */
.hero h1 { max-width: none; }
.h1-radek { display: block; }

/* Řádek se střídaným slovem si drží místo pro NEJDELŠÍ z nich.
   Bez toho nadpis poskakuje: slovo se píše po písmenech, a jakmile se
   „Amanu <slovo>" přestane vejít na řádek, celá stránka pod ním se posune.
   Naměřeno před opravou: od 320 do 760 px, na 390 px devět skoků o 48 px
   za jeden cyklus, na 320 px až o 96 px.

   Měřicí dvojníky vyrábí `main.js` ze svého seznamu slov, aby nešlo přidat
   slovo a zapomenout na ně tady. Leží ve stejné buňce mřížky jako živý
   nadpis, takže řádek je vysoký jako ten nejvyšší z nich a široký jako ten
   nejširší. */
.h1-rotor { display: grid; }

.h1-rotor > * { grid-area: 1 / 1; }

.h1-rotor-mera {
  visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Ikona mluvení. Stejný motiv jako ve značce, jen posazený na účaří nadpisu. */
/* Ikona mluvení v nadpisu.

   Obal je schválně `inline-block` s `overflow: hidden`, ne rovnou `inline-flex`.
   Účaří `inline-flexu` se totiž bere z jeho PRVNÍHO proužku, ne ze spodní hrany,
   takže ikona spadla 0,195em pod účaří, tedy 13 px při 64,8px písmu, a `overflow`
   to na flexu nespravil (naměřeno). U `inline-blocku` s `overflow` jiným než
   `visible` je účařím spodní hrana, což drží bez ohledu na výšky proužků.

   Výška 0,73em je změřená výška verzálek Interu, takže ikona začíná i končí
   tam, kde velké M, a je s ním svisle na střed. */
.h1-eq {
  display: inline-block;
  overflow: hidden;
  height: 0.73em;
  margin-left: 0.26em;
  vertical-align: baseline;
}

.h1-eq-in {
  display: flex;
  align-items: center;
  gap: 0.115em;
  height: 100%;
}

.h1-eq i {
  width: 0.115em;
  border-radius: 0.06em;
  background: var(--accent);
  animation: h1Eq 1.05s ease-in-out infinite;
}

/* Výšky jsou poměrově tytéž jako u ikony v hlavičce demo okna, aby obě
   vypadaly stejně. Zpoždění se rozbíhá od prostředního proužku ven. */
.h1-eq i:nth-child(1) { height: 0.34em; animation-delay: 0.28s; }
.h1-eq i:nth-child(2) { height: 0.65em; animation-delay: 0.14s; }
.h1-eq i:nth-child(3) { height: 0.46em; animation-delay: 0s; }
.h1-eq i:nth-child(4) { height: 0.73em; animation-delay: 0.14s; }
.h1-eq i:nth-child(5) { height: 0.39em; animation-delay: 0.28s; }

@keyframes h1Eq {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

/* Kurzor za střídaným slovem, aby to působilo jako psaní. Pravidlo míří na
   třídu, ne na `#rotor`, protože týž kurzor musí nést i měřicí dvojníci:
   bez něj by rezervovali o jeho šířku míň a nejdelší slovo by se přece jen
   zalomilo. Blikat má ale jen ten živý. */
.h1-rotor em.hl::after {
  content: "";
  display: inline-block;
  width: 0.055em;
  height: 0.78em;
  margin-left: 0.06em;
  background: var(--accent);
  vertical-align: baseline;
}

#rotor::after { animation: caretBlink 0.9s step-end infinite; }

h1 {
  font-size: clamp(42px, 7.2vw, 78px);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

.hero-sub {
  color: var(--muted);
  font-size: clamp(17.5px, 2.2vw, 21px);
  max-width: 660px;
  margin-top: 22px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-note {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  margin-top: 16px;
}

/* ---------- Demo: surová řeč -> čistý text ---------- */
.demo {
  width: 100%;
  max-width: 720px;
  margin-top: 60px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  text-align: left;
}

.demo-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-tint);
}

.demo-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.demo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: demoDot 1.2s ease-in-out infinite;
}

@keyframes demoDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.75); }
}

/* Barva tečky nese fázi: fialová nahrávám, žlutá probíhá korektura,
   zelená hotovo. Zelená pulzuje pomalu, aby bylo poznat, že je to konec,
   ne že se něco děje. */
/* Během korektury zůstává na obrazovce surový přepis, jen zesedne a přestane
   blikat kurzor. Výsledek se ukáže až se zeleným stavem. */
.demo[data-faze="koriguji"] .demo-raw { opacity: 0.45; }
.demo[data-faze="koriguji"] .demo-raw::after { animation: none; opacity: 0; }

.demo[data-faze="koriguji"] .demo-dot {
  background: var(--warn);
  animation-duration: 0.5s;
}

.demo[data-faze="hotovo"] .demo-dot {
  background: var(--success);
  animation-duration: 2.4s;
}

.demo-eq {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
}

.demo-eq i {
  width: 3.5px;
  border-radius: 2px;
  background: var(--accent);
  animation: eqPulse 1s ease-in-out infinite;
}

.demo-eq i:nth-child(1) { height: 9px;  animation-delay: 0.28s; }
.demo-eq i:nth-child(2) { height: 17px; animation-delay: 0.14s; }
.demo-eq i:nth-child(3) { height: 12px; animation-delay: 0s; }
.demo-eq i:nth-child(4) { height: 19px; animation-delay: 0.14s; }
.demo-eq i:nth-child(5) { height: 10px; animation-delay: 0.28s; }

@keyframes eqPulse {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1.25); }
}

.demo[data-faze="koriguji"] .demo-eq i { animation-duration: 0.45s; }
.demo[data-faze="hotovo"] .demo-eq i { animation-play-state: paused; opacity: 0.35; }

/* Surový i opravený text leží ve stejné buňce mřížky, takže výška okna je
   maximum z obou a nevzniká pod textem mrtvé místo. Dřív měl `.demo-clean`
   `position: absolute` a výšku držel `min-height: 150px` odhadem, což na
   užších obrazovkách sedělo špatně. Odsazení je nahoře i dole stejné. */
.demo-body {
  display: grid;
  padding: 24px 28px;
  font-size: 17.5px;
  line-height: 1.7;
}

.demo-raw,
.demo-clean,
.demo-mera {
  grid-area: 1 / 1;
}

/* Měřicí dvojník surového přepisu. Drží okno vysoké jako nejdelší stav, aby
   při psaní nerostlo a nehýbalo celou stránkou pod sebou. Vyrábí ho `main.js`
   ze svého `RAW_TEXT`, aby s ním nešel rozejít, a jen když se opravdu píše. */
.demo-mera {
  visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.demo-raw {
  color: var(--muted);
  transition: opacity 0.55s ease, filter 0.55s ease;
}

.demo-raw::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: caretBlink 0.9s step-end infinite;
}

@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.demo-clean {
  color: var(--text);
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.7s ease 0.15s, filter 0.7s ease 0.15s;
}

.demo.swapped .demo-raw { opacity: 0; filter: blur(6px); }
.demo.swapped .demo-raw::after { animation: none; opacity: 0; }
.demo.swapped .demo-clean { opacity: 1; filter: blur(0); }

/* ---------- Hlavičky sekcí ---------- */
.sec-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.sec-wave {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 18px;
}

.sec-wave i {
  width: 5px;
  border-radius: 3px;
  background: var(--accent);
  transform-origin: center center;
  animation: sec-vlna 1.9s ease-in-out infinite;
}

/* Klidny dech, ne rec. Ma drzet znacku pohromade nad vsemi nadpisy sekci,
   a proto nesmi tahat pozornost od nadpisu samotneho. */
@keyframes sec-vlna {
  0%, 100% { transform: scaleY(.5); }
  50% { transform: scaleY(1); }
}

.sec-wave i:nth-child(1) { animation-delay: 0s; }
.sec-wave i:nth-child(2) { animation-delay: .16s; }
.sec-wave i:nth-child(3) { animation-delay: .32s; }
.sec-wave i:nth-child(4) { animation-delay: .48s; }
.sec-wave i:nth-child(5) { animation-delay: .64s; }

.sec-wave i:nth-child(1) { height: 12px; }
.sec-wave i:nth-child(2) { height: 24px; }
.sec-wave i:nth-child(3) { height: 16px; }
.sec-wave i:nth-child(4) { height: 28px; }
.sec-wave i:nth-child(5) { height: 13px; }

h2 {
  font-size: clamp(31px, 4.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.sec-head p {
  color: var(--muted);
  font-size: 18.5px;
  margin-top: 16px;
}

/* ---------- Karty (společné) ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ---------- Jak to funguje: časová osa ---------- */

/* Čtyři kroky v mřížce, nad nimi drát. Mezi uzly neputuje bublina, ale
   samotný obsah leží rovnou na lince a prochází jím vlna: zleva se odkryje,
   chvíli stojí a zleva zase zmizí. Souřadnice úseků jsou středy sloupců
   čtyřsloupcové mřížky, tedy 12,5 / 37,5 / 62,5 / 87,5 procenta.
   Pod 1080 px drát mizí, protože uzly by přestaly sedět na lince.

   Jedna otáčka trvá 14 s. Uzel se rozsvítí po čtyřech vteřinách a spolu
   s ním se nadzvedne jeho karta, tedy totéž co dělá najetí myší. */

.osa { position: relative; }

.osa-drat {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  pointer-events: none;
}

.osa-linka {
  position: absolute;
  top: 31px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  border-radius: 3px;
  background: var(--border);
}

.osa-usek { position: absolute; top: 0; height: 64px; }
.osa-usek-1 { left: 12.5%; right: 62.5%; }
.osa-usek-2 { left: 37.5%; right: 37.5%; }
.osa-usek-3 { left: 62.5%; right: 12.5%; }

/* Pruh, který úsekem probíhá a nechá ho rozsvícený. */
.osa-svit {
  position: absolute;
  top: 31px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-lighter), var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.33, 0, .25, 1);
}

.osa-usek-1 .osa-svit { animation-name: osa-svit-1; }
.osa-usek-2 .osa-svit { animation-name: osa-svit-2; }
.osa-usek-3 .osa-svit { animation-name: osa-svit-3; }

@keyframes osa-svit-1 {
  0%, 7% { transform: scaleX(0); opacity: 1; }
  29%, 94% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes osa-svit-2 {
  0%, 36% { transform: scaleX(0); opacity: 1; }
  57%, 94% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes osa-svit-3 {
  0%, 64% { transform: scaleX(0); opacity: 1; }
  86%, 94% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Obsah leží na celé šířce úseku, žádné pole kolem něj. Vlnu dělá ořez:
   zprava se odkrývá, pak se zleva zase zavírá, takže obsah vznikne
   a zase odteče. Mimo své okno je úsek celý oříznutý, tedy neviditelný. */
.osa-obsah {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* Text sedí na lince, ne přes ni. */
.osa-obsah-text {
  align-items: flex-end;
  padding-bottom: 35px;
}

.osa-usek-1 .osa-obsah { animation-name: osa-vlna-1; }
.osa-usek-2 .osa-obsah { animation-name: osa-vlna-2; }
.osa-usek-3 .osa-obsah { animation-name: osa-vlna-3; }

@keyframes osa-vlna-1 {
  0%, 7% { clip-path: inset(0 100% 0 0); }
  16%, 22% { clip-path: inset(0 0 0 0); }
  29%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes osa-vlna-2 {
  0%, 36% { clip-path: inset(0 100% 0 0); }
  45%, 51% { clip-path: inset(0 0 0 0); }
  57%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes osa-vlna-3 {
  0%, 64% { clip-path: inset(0 100% 0 0); }
  73%, 79% { clip-path: inset(0 0 0 0); }
  86%, 100% { clip-path: inset(0 0 0 100%); }
}

/* Text na lince. Výměna surového znění za opravené padne doprostřed toho,
   kdy obsah stojí odkrytý, aby ji bylo vidět. */
.osa-text { font-size: 12.5px; line-height: 1.4; white-space: nowrap; color: var(--muted); }
.osa-oprava { position: relative; display: inline-block; white-space: nowrap; }
.osa-oprava b { font-weight: 600; }
.osa-oprava .op-pred { color: var(--muted); animation: osa-oprava-pred 14s steps(1) infinite; }
.osa-oprava .op-po {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text);
  animation: osa-oprava-po 14s steps(1) infinite;
}
.osa-oprava .op-po mark {
  padding: 1px 3px;
  margin: 0 -3px;
  border-radius: 4px;
  background: var(--success-soft);
  color: inherit;
}
/* Ne border-bottom. `wavy` neni hodnota border-style, takze prohlizec
   cely radek zahodil a vlnovka se nikdy nevykreslila. */
.osa-oprava .op-pred u {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--warn);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
@keyframes osa-oprava-pred { 0%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes osa-oprava-po { 0%, 75% { opacity: 0; } 76%, 100% { opacity: 1; } }

/* Ekvalizér rozprostřený po celém úseku, sloupce sedí na lince. */
.sc-pas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 30px;
}
.sc-pas i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transform-origin: center center;
  animation: sc-pas-sloupec 1.1s ease-in-out infinite;
}

/* Vlastní minimum, vyšší než u ekvalizéru v kartě. Na tenké lince klesne
   sloupec na osminu výšky do tečky a vypadá to jako smetí na drátu. */
@keyframes sc-pas-sloupec {
  0%, 100% { transform: scaleY(.34); }
  50% { transform: scaleY(1); }
}
.sc-pas i:nth-child(7n+1) { animation-duration: .92s; animation-delay: -.20s; }
.sc-pas i:nth-child(7n+2) { animation-duration: 1.24s; animation-delay: -.55s; }
.sc-pas i:nth-child(7n+3) { animation-duration: .78s; animation-delay: -.10s; }
.sc-pas i:nth-child(7n+4) { animation-duration: 1.40s; animation-delay: -.80s; }
.sc-pas i:nth-child(7n+5) { animation-duration: .86s; animation-delay: -.35s; }
.sc-pas i:nth-child(7n+6) { animation-duration: 1.12s; animation-delay: -.65s; }
.sc-pas i:nth-child(7n+7) { animation-duration: .70s; animation-delay: -.05s; }

/* ---------- Kroky ---------- */

.osa-kroky {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.osa-krok { display: flex; flex-direction: column; align-items: center; }

.osa-uzel {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 3px solid var(--border);
  background: var(--surface);
  font-size: 27px;
  font-weight: 900;
  color: var(--muted);
  animation: osa-uzel 14s ease-in-out infinite;
}

@keyframes osa-uzel {
  0% { border-color: var(--border); background: var(--surface); color: var(--muted); transform: scale(1); box-shadow: none; }
  4% { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); transform: scale(1.09); box-shadow: var(--shadow-pop); }
  12% { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); transform: scale(1.06); box-shadow: var(--shadow-card); }
  16%, 100% { border-color: var(--border); background: var(--surface); color: var(--muted); transform: scale(1); box-shadow: none; }
}

.osa-karta {
  width: 100%;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  animation: osa-karta-ziva 14s ease-in-out infinite;
}

/* Totéž, co dělá najetí myší, jen řízené osou. Během animace najetí myší
   neprojde, protože animace přebíjí obyčejná pravidla; při vypnutém pohybu
   se animace neuplatní a hover funguje normálně. */
@keyframes osa-karta-ziva {
  0% { transform: translateY(0); border-color: var(--border); box-shadow: var(--shadow-card); }
  4% { transform: translateY(-5px); border-color: var(--accent-lighter); box-shadow: var(--shadow-pop); }
  12% { transform: translateY(-5px); border-color: var(--accent-lighter); box-shadow: var(--shadow-pop); }
  16%, 100% { transform: translateY(0); border-color: var(--border); box-shadow: var(--shadow-card); }
}

.osa-karta:hover { transform: translateY(-5px); border-color: var(--accent-lighter); box-shadow: var(--shadow-pop); }

.osa-krok:nth-child(1) .osa-uzel, .osa-krok:nth-child(1) .osa-karta { animation-delay: 0s; }
.osa-krok:nth-child(2) .osa-uzel, .osa-krok:nth-child(2) .osa-karta { animation-delay: 4s; }
.osa-krok:nth-child(3) .osa-uzel, .osa-krok:nth-child(3) .osa-karta { animation-delay: 8s; }
.osa-krok:nth-child(4) .osa-uzel, .osa-krok:nth-child(4) .osa-karta { animation-delay: 12s; }

/* Pevná výška, ne min-height. Korekční scéna je o dvě řádky vyšší než ostatní
   tři a stlačila by nadpis čtvrté karty níž než u sousedů. */
.osa-displej {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-tint);
  overflow: hidden;
}

.osa-karta h3 { font-size: 18.5px; font-weight: 800; letter-spacing: -0.01em; }
.osa-karta p { color: var(--muted); font-size: 15.5px; }

/* ---------- Scény v displejích karet ---------- */

/* Krok 1: zkratka, která se mačká. */
.sc-klavesy { display: inline-flex; align-items: center; gap: 7px; }
.sc-klavesy b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  border-bottom-width: 3px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}
.sc-klavesy i { font-style: normal; font-weight: 700; color: var(--muted); }
.sc-klavesy .sc-stisk { position: relative; animation: sc-stisk 2.6s ease-in-out infinite; }
.sc-klavesy .sc-stisk::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  border: 2px solid var(--accent);
  animation: sc-kruh 2.6s ease-out infinite;
}
@keyframes sc-stisk {
  0%, 62%, 100% { transform: translateY(0); border-bottom-width: 3px; }
  70%, 88% { transform: translateY(3px); border-bottom-width: 1px; background: var(--accent-soft); border-color: var(--accent-lighter); color: var(--accent-strong); }
}
@keyframes sc-kruh {
  0%, 62% { transform: scale(.7); opacity: 0; }
  74% { opacity: .55; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Krok 2: mluvení, sloupce s vlastním tempem. */
.sc-hlas { display: inline-flex; align-items: center; gap: 4px; height: 40px; }
.sc-hlas i {
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transform-origin: center center;
  animation: sc-hlas 1.1s ease-in-out infinite;
}
@keyframes sc-hlas {
  0%, 100% { transform: scaleY(.18); }
  50% { transform: scaleY(1); }
}
.sc-hlas i:nth-child(1) { animation-duration: .92s; animation-delay: -.20s; }
.sc-hlas i:nth-child(2) { animation-duration: 1.24s; animation-delay: -.55s; }
.sc-hlas i:nth-child(3) { animation-duration: .78s; animation-delay: -.10s; }
.sc-hlas i:nth-child(4) { animation-duration: 1.40s; animation-delay: -.80s; }
.sc-hlas i:nth-child(5) { animation-duration: .86s; animation-delay: -.35s; }
.sc-hlas i:nth-child(6) { animation-duration: 1.12s; animation-delay: -.65s; }
.sc-hlas i:nth-child(7) { animation-duration: .70s; animation-delay: -.05s; }

/* Krok 3: přepis, který se sám píše. Psací stroj bez skriptu: obal má pevnou
   šířku, aby karta při psaní neposkakovala, a kurzorem je pravý okraj textu,
   takže sedí přesně na jeho hraně bez ohledu na to, kolik je napsáno. */
.sc-pise-obal { display: inline-block; width: 186px; }
.sc-pise {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  vertical-align: bottom;
  font-size: 13px;
  border-right: 2px solid var(--accent);
  animation: sc-pise 3s steps(27, end) infinite;
}
@keyframes sc-pise {
  0% { width: 0; }
  62%, 100% { width: 184px; }
}

/* Krok 4: korekce, lokální nebo v cloudu. */
.sc-korekce { display: grid; gap: 9px; width: 100%; }
.sc-radky { position: relative; min-height: 3.2em; font-size: 12.5px; line-height: 1.5; }
/* Dvě třídy v selektoru schválně. Karta má vlastní pravidlo pro `p` se stejnou
   specificitou a stojí v souboru níž, takže by tohle tiše přebila a obě řádky
   by se místo výměny naskládaly pod sebe. */
.sc-korekce .sc-radky p { position: absolute; inset: 0; margin: 0; }
.sc-korekce .sc-pred { color: var(--muted); animation: sc-zmiz 5.2s ease-in-out infinite; }
.sc-korekce .sc-po { color: var(--text); animation: sc-objev 5.2s ease-in-out infinite; }
.sc-pred u {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--warn);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
/* Záporný okraj ruší odsazení v toku, takže zvýraznění přesahuje ven,
   ale za slovem nevznikne mezera před čárkou. */
.sc-po mark { padding: 1px 3px; margin: 0 -3px; border-radius: 4px; background: var(--success-soft); color: inherit; }
/* Výměna, ne prolnutí. Původně si obě znění na půl vteřiny překrývala
   a vypadalo to jako rozmazané vykreslení, ne jako oprava textu. */
@keyframes sc-zmiz { 0%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes sc-objev { 0%, 48% { opacity: 0; } 52%, 100% { opacity: 1; } }

.sc-volby { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.sc-pilulka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}
.sc-pilulka svg { width: 14px; height: 14px; }
@keyframes sc-stridani {
  0%, 44% { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
  50%, 94% { border-color: var(--border); background: var(--surface); color: var(--muted); }
  100% { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
}
.sc-pilulka.p1 { animation: sc-stridani 5.2s ease-in-out infinite; }
.sc-pilulka.p2 { animation: sc-stridani 5.2s ease-in-out infinite reverse; }

/* ---------- Rychlost (závod) ---------- */
.race {
  padding: 34px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.lane-name {
  font-weight: 700;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.lane-amanu .lane-name { color: var(--accent); }

.lane-wave {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
}

.lane-wave i {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.lane-wave i:nth-child(1) { height: 8px; }
.lane-wave i:nth-child(2) { height: 15px; }
.lane-wave i:nth-child(3) { height: 10px; }

.lane-wpm { color: var(--muted); font-size: 15px; font-weight: 600; white-space: nowrap; }

.lane-track {
  border-bottom: 2px solid var(--border);
  padding-bottom: 13px;
  overflow: hidden;
}

/* Obal je široký přesně jako věta, protože ho roztahuje neviditelný dvojník
   textu. Odstavec uvnitř se pak odkrývá od nuly do sta procent TÉ VĚTY, ne
   celé stopy, takže kurzor na jeho pravém okraji skončí za tečkou a ne
   v pravém rohu karty. Na úzké šířce obal narazí na max-width a chová se
   jako dřív, tedy věta se ořízne na kraji stopy a kurzor sedí tam. */
.lane-obal {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  font-weight: 400;
}

.lane-sizer {
  display: block;
  visibility: hidden;
  white-space: nowrap;
  font-size: 17px;
}

.lane-obal .lane-text { position: absolute; left: 0; top: 0; }

.lane-text {
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  font-size: 17px;
  color: var(--muted);
}

/* Dvojník musí mít tutéž tloušťku písma jako text, jinak by obal vyšel jinak
   široký a kurzor by se o pár pixelů minul. */
.lane-amanu .lane-obal { font-weight: 500; }
.lane-amanu .lane-text { color: var(--text); font-weight: 500; }

/* Poměr drah je poměr těch dvou čísel v hlavičkách, tedy 40 ku 120 slov
   za minutu, čili přesně trojnásobek. Ukázková věta má dvanáct slov, takže
   na klávesnici trvá osmnáct vteřin a nadiktovaná šest. Obojí je zpomalené
   na dvě třetiny, aby se to dalo sledovat: klávesnice 12 s, Amanu 4 s.
   Poměr tím zůstává přesně tři ku jedné.

   Uvnitř těch čtyř vteřin je diktování 2 s a korektura 2 s. Ve skutečnosti
   je korektura kratší, ale kdyby dostala svůj podíl, problikne a nikdo si
   jí nevšimne. Roztažená je schválně, protože ukazuje, co Amanu dělá navíc
   proti obyčejnému diktování.

   Jedno kolo je 13,8 s, tedy SLOW_MS 12000 plus RACE_HOLD 1800 z main.js,
   a všechny klíčové snímky se počítají v procentech z něj. Když se ta dvě
   čísla v main.js změní, musí se přepočítat i tenhle blok. */

.race.running .lane-slow { animation: laneKlavesnice 13.8s linear both, kurzorBlik 0.9s steps(1) infinite; }
.race.running .lane-fast { animation: laneDiktat 13.8s linear both, kurzorBlik 0.6s steps(1) infinite; }
.race.noanim .lane-text { transition: none !important; width: 0; }

/* Psaní na klávesnici není plynulé. V polovině se udělá překlep, pár slov
   se smaže a napíše znovu. Ten čas je v těch čtyřiceti slovech za minutu
   už započítaný, protože to je čistá rychlost, ne rychlost úhozů. */
@keyframes laneKlavesnice {
  0% { width: 0; }
  29% { width: 40%; }
  31% { width: 40%; }
  35% { width: 29%; }
  37% { width: 29%; }
  87%, 100% { width: 100%; }
}

@keyframes laneDiktat {
  0% { width: 0; }
  14.5%, 100% { width: 100%; }
}

/* Kurzor je pravý okraj textu, takže sedí přesně na jeho hraně. Blikání se
   zastaví samo počtem opakování, aby po dopsání nezůstal blikat dál. */
.lane-text { border-right: 2px solid transparent; }
@keyframes kurzorBlik {
  0%, 49% { border-right-color: var(--accent); }
  50%, 100% { border-right-color: transparent; }
}

/* Dolní dráha ukazuje celý průběh, ne jen rychlejší pruh. Jedno kolo trvá
   10,2 s, tedy SLOW_MS 8400 plus RACE_HOLD 1800 z main.js, a všechny fáze
   se počítají v procentech z něj. Když se ta dvě čísla v main.js změní,
   musí se přepočítat i tyhle klíčové snímky, jinak se fáze rozejdou. */
.lane-track-amanu { position: relative; }

.lane-track-amanu .lane-cisty {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
}

.race.running .lane-syrovy { animation: laneDiktat 13.8s linear both, kurzorBlik 0.6s steps(1) infinite, laneSyrovy 13.8s linear both; }
.race.running .lane-cisty { animation: laneCisty 13.8s linear both, laneOpraveno 13.8s linear both; }

/* Obě znění se střídají v jednom okamžiku, ne prolnutím. Když se prolínala,
   byla půl vteřiny vidět obě přes sebe a vypadalo to jako vada vykreslení,
   ne jako oprava. Opravená věta se místo toho krátce prosvítí. */
@keyframes laneSyrovy { 0%, 28.9% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes laneCisty { 0%, 28.9% { opacity: 0; } 29%, 100% { opacity: 1; } }
@keyframes laneOpraveno {
  0%, 28.9% { background-color: transparent; }
  29% { background-color: var(--success-soft); }
  38%, 100% { background-color: transparent; }
}

/* Tři stavy v jednom místě. Šířka je pevná, aby se název dráhy nehýbal,
   když se „nahrávám" vystřídá za „koriguji". */
.lane-faze {
  position: relative;
  display: inline-block;
  width: 158px;
  height: 23px;
  margin-left: 4px;
  vertical-align: middle;
}

.lf {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 11px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
}

.lf-1 { color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-lighter); }
.lf-2 { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border: 1px solid var(--warn); }
.lf-3 { color: var(--success); background: var(--success-soft); border: 1px solid var(--success); }

.lf-1::before, .lf-2::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.lf-3::before {
  content: "";
  width: 10px;
  height: 10px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m3 8.5 3.5 3.5L13 4.5" stroke="%23059669" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

.race.running .lf-1 { animation: lf1 13.8s ease both; }
.race.running .lf-2 { animation: lf2 13.8s ease both, lf2Puls 1.1s ease-in-out 2s infinite; }
.race.running .lf-3 { animation: lf3 13.8s cubic-bezier(0.34, 1.56, 0.64, 1) both, lfPuls 1.7s ease-in-out 4s infinite; }

/* Diktování končí ve 14,5 %, korektura běží do 29 %, pak je hotovo. */
@keyframes lf1 {
  0% { opacity: 0; transform: translateY(3px); }
  2% { opacity: 1; transform: none; }
  13.5% { opacity: 1; }
  14.5%, 100% { opacity: 0; }
}
@keyframes lf2 {
  0%, 14% { opacity: 0; transform: translateY(3px); }
  15.5%, 28% { opacity: 1; transform: none; }
  29%, 100% { opacity: 0; }
}
@keyframes lf3 {
  0%, 28.9% { opacity: 0; transform: translateY(4px) scale(0.9); }
  31.5%, 100% { opacity: 1; transform: none; }
}

/* Oranžový odznak pulzuje rychleji než zelený, aby bylo poznat, že se pracuje,
   ne že je hotovo. Stín zmizí s odznakem, protože průhlednost bere i jeho. */
@keyframes lf2Puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); }
  50% { box-shadow: 0 0 0 7px rgba(180, 83, 9, 0.20); }
}

/* Odznak po objevení pulzuje, aby si ho oko všimlo i uprostřed stránky. */
@keyframes lfPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
  50% { box-shadow: 0 0 0 7px rgba(5, 150, 105, 0.16); }
}

/* ---------- Funkce ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature { padding: 30px 28px; }

.feature:hover { transform: translateY(-5px); border-color: var(--accent-lighter); box-shadow: var(--shadow-pop); }

.f-ico {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 18px;
  transition: transform 0.25s ease;
}

.feature:hover .f-ico { transform: scale(1.08) rotate(-3deg); }

.f-ico svg { width: 28px; height: 28px; }

.feature h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.01em; }

.feature p { color: var(--muted); font-size: 16.5px; }

/* ---------- Podívejte se dovnitř ---------- */
.okna { display: grid; gap: 28px; }
.okno { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }
.okno:nth-child(even) { grid-template-columns: 1fr 1.25fr; }
.okno:nth-child(even) .okno-text { order: -1; }

.okno-ram {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  background: var(--surface);
}

.okno-ram img { width: 100%; display: block; }

.okno-text h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 12px; }

.okno-text p { color: var(--muted); font-size: 16.5px; }

.okno-cisla { margin-top: 20px; display: flex; gap: 26px; flex-wrap: wrap; }

.okno-cislo strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.okno-cislo span { color: var(--muted); font-size: 13.5px; }

/* ---------- O autorovi ---------- */
.autor { display: grid; grid-template-columns: 380px 1fr; gap: 52px; align-items: start; }

/* Rám drží poměr předlohy (920 × 1150), takže `cover` nemá co oříznout.
   Dřív se rám protahoval na výšku textu, ubral 8 % šířky a fotka vypadala
   protaženě, přestože se geometricky nic nedeformovalo. */
.autor-foto {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  margin: 0;
  aspect-ratio: 920 / 1150;
}

/* Duotón do fialové. Předloha má v pozadí přeliv do zelené, což se s paletou
   tluče; odbarvení plus fialová vrstva to srovná bez vyřezávání postavy. */
.autor-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
  filter: grayscale(1) contrast(1.06);
}

.autor-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, #7c3aed, #2a1758 70%);
  mix-blend-mode: color;
  opacity: 0.9;
}

.autor-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(18, 13, 28, 0.55), transparent 45%);
}

.autor-podpis { position: absolute; left: 22px; bottom: 20px; z-index: 3; color: #fff; }

.autor-podpis strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }

.autor-podpis span { display: block; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }

.autor-text h2 { font-size: clamp(28px, 3.8vw, 40px); margin-bottom: 20px; }

.autor-text p { color: var(--muted); font-size: 17px; margin-bottom: 16px; }

.autor-text p:last-of-type { margin-bottom: 0; }

.autor-text strong { color: var(--text); font-weight: 600; }

/* ---------- Kam všude můžete diktovat ----------
   Šest kapslí v řadě nahoře, pod nimi jedno okno. Na aktivní kapsli běží
   ukazatel auto-střídání, aby bylo vidět, že se ukázky mění samy.

   Scéna má pevnou minimální výšku, protože vodorovné kapsle na rozdíl od
   svislého seznamu výšku nedrží a panely se liší. Hodnota je změřená,
   ne odhadnutá; když přibude delší ukázka, přeměř ji. */
.pu-seznam {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 30px;
}

.pu-radek {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  white-space: nowrap;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  padding: 9px 17px 9px 11px;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  box-shadow: var(--shadow-card);
}

.pu-ico {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 auto;
  transition: background 0.22s ease, color 0.22s ease;
}

.pu-ico svg { width: 16px; height: 16px; }

.pu-radek:hover { border-color: var(--accent-lighter); transform: translateY(-2px); }

.pu-radek.active {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--on-accent);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

.pu-radek.active .pu-ico { background: rgba(255, 255, 255, 0.22); color: var(--on-accent); }

/* Ukazatel auto-střídání na aktivní kapsli. Třídu auto zapíná skript,
   jakmile se střídání rozjede, a odebírá ji při prvním kliknutí. */
.pu-radek.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: rgba(255, 255, 255, 0.65);
}

.pu-kam.auto .pu-radek.active::after { animation: puProgres 4.5s linear; }

@keyframes puProgres {
  from { width: 0; }
  to   { width: 100%; }
}

/* Scéna má pevnou minimální výšku, protože vodorovné kapsle na rozdíl od
   svislého seznamu výšku nedrží. 258 px je změřený nejvyšší panel a platí
   pro celý rozsah, kde má scéna svých 820 px, tedy zhruba od 868 px výš.
   Níž se pouští, protože tam scéna začne užit a panely rostou. */
/* `position: relative` kvůli měření: `main.js` každý panel na okamžik odkryje
   mimo tok, aby zjistil, který je nejvyšší, a ten odkrytý se musí roztáhnout
   přes scénu, ne přes celou stránku. Naměřenou hodnotu pak zapíše sem jako
   `min-height`, takže pravidlo níž je jen záskok pro čtenáře bez skriptu. */
.pu-scena { max-width: 820px; margin: 0 auto; min-height: 258px; position: relative; }

.pu-panel[hidden] { display: none; }

@media (max-width: 1060px) {
  /* Šest kapslí potřebuje 1000 px a obsah končí na 1048 px šířky okna,
     takže se odsud z nich stává lišta, která si roluje. Aktivní kapsli
     do ní dorolovává skript. */
  .pu-seznam { justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; }
}

@media (max-width: 880px) {
  .pu-scena { min-height: 0; }
}


.use-window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}

.uw-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-tint);
}

.uw-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}

.uw-bar span {
  margin-left: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
}

.uw-body { padding: 22px 26px 26px; }

.uw-meta {
  font-size: 15px;
  color: var(--muted);
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.uw-meta b { color: var(--text); font-weight: 700; }

.uw-text { font-size: 16.5px; line-height: 1.75; color: var(--text); margin-top: 6px; }

.uw-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: caretBlink 0.9s step-end infinite;
}

.uw-bubble {
  border-radius: 15px;
  padding: 13px 17px;
  font-size: 16px;
  line-height: 1.65;
  max-width: 88%;
  margin-bottom: 12px;
}

.uw-user {
  background: var(--accent-soft);
  border: 1px solid var(--accent-lighter);
  margin-left: auto;
}

.uw-bot {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  color: var(--muted);
}

.uw-mono .uw-text { font-family: "Cascadia Code", Consolas, monospace; font-size: 15px; }

.uw-prompt { color: var(--accent); font-weight: 700; margin-right: 6px; }

/* ---------- Proč Amanu (slovníkové heslo) ---------- */
.section-dict { padding-top: 44px; padding-bottom: 44px; }

.dict {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 56px 40px 52px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.dict::after {
  content: "";
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 240px;
  background: radial-gradient(ellipse, var(--accent-soft), transparent 72%);
  pointer-events: none;
}

.dict-word {
  font-weight: 800;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: 0.04em;
  color: var(--text);
  position: relative;
}

.dict-pron {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 12px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  position: relative;
}

.dict-pron::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.dict-def {
  font-size: clamp(17.5px, 2.2vw, 20.5px);
  color: var(--text);
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}

.dict-claim {
  margin-top: 20px;
  font-size: clamp(16.5px, 2vw, 19.5px);
  color: var(--muted);
  position: relative;
  font-weight: 600;
}

.dict-claim .hl { font-weight: 800; }

/* Tri sloupce vedle sebe, v poradi zdarma, mesicne, rocne (rozhodl Mirek
   23. 8.). Do te doby tu byla jedina karta a nadpis "Jedna cena, vsechno v ni",
   ktery prestal byt pravdivy ve chvili, kdy jsou ceny tri. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* ---------- Ceník ---------- */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 30px 26px 26px;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}

/* Ram a stin nese doporucena varianta, od 31. 8. 2026 mesicni. Do te doby ho
   mela rocni, protoze byla jedina na prodej; ted jsou na prodej obe a rozhoduje
   to, kam chceme zakaznika poslat. Stitek `price-tag` maji obe placene karty,
   ale plne tlacitko a ram jen mesicni, aby doporuceni zustalo jednoznacne. */
.price-card-buy {
  border: 2px solid var(--accent-lighter);
  box-shadow: var(--shadow-pop);
}

.price-card:hover { transform: translateY(-3px); }

/* Tlacitko je vzdycky na spodni hrane karty, at maji karty ruzne dlouhe
   seznamy. `margin-top: auto` na TLACITKU, ne na seznamu: na seznamu se
   zmerilo, ze se tlacitka nezarovnala (942, 967 a 943 px), protoze prazdne
   misto naskocilo nad seznam a delka seznamu se pak promitla dal. */
.price-card > .btn { margin-top: auto; }

.price-tag {
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--btn-bg);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* "Pripravujeme" nesmi vypadat jako nabidka. Sedy stitek, ne fialovy. */
.price-tag-soon {
  background: var(--surface-tint);
  color: var(--muted);
  border: 1px solid var(--border);
}

.price-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}

.price-lede {
  color: var(--muted);
  font-size: 15.5px;
  margin: 14px 0 20px;
}

/* Neni to `<button disabled>`, ale `<span>`: neprodavana varianta nema kam
   vest, takze tu zadny ovladaci prvek nema byt. Vzhled drzi tvar mrizky. */
.btn-off {
  background: var(--surface-tint);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: default;
  pointer-events: none;
}

.price-foot {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  margin-top: 20px;
  max-width: 46rem;
  margin-inline: auto;
}

.price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.price-num {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

.price-per { color: var(--muted); font-size: 16px; font-weight: 600; }

.price-coffee {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 700;
  margin: 16px 0 20px;
}

.price-coffee svg { width: 22px; height: 22px; flex: 0 0 auto; }

.price-feats {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.price-feats li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
}

.price-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m4.5 8.5 2.5 2.5 4.5-5.5" stroke="%237c3aed" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    center / 14px no-repeat;
}

/* `min-height` na tri radky, protoze poznamka lezi POD tlacitkem a karty jsou
   v mrizce natazene na stejnou vysku: kratsi poznamka posunula tlacitko dolu.
   Zmereno v prohlizeci: poznamky mely 72, 48 a 72 px a tlacitka sedela na 964,
   990 a 967 px. Na telefonu je sloupec jediny, takze tam je to jen odsazeni. */
.price-note {
  text-align: center;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  margin-top: 14px;
  min-height: 4.95em;
}

/* Tri sloupce se do sirky prestanou vejit driv nez zbytek stranky: kazda karta
   ma seznam vlastnosti a na ~330 px uz se lame kazdy druhy radek. Zmereno v
   prohlizeci, ne odhadnuto. */
@media (max-width: 980px) {
  .price-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 500px; margin-inline: auto; }
}

/* ---------- Srovnání tarifů ---------- */
.srovnani-obal {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

table.srovnani { width: 100%; border-collapse: collapse; min-width: 620px; }

table.srovnani th,
table.srovnani td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 16.5px; }

table.srovnani thead th {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-tint);
}

table.srovnani thead th:not(:first-child),
table.srovnani td:not(:first-child) { text-align: center; width: 140px; }

table.srovnani tbody tr:last-child th,
table.srovnani tbody tr:last-child td { border-bottom: 0; }

table.srovnani tbody th { font-weight: 600; }

/* Popis vedle nazvu, ne pod nim: radek tabulky pak meri jednu radku textu misto
   dvou. Oddelovac je tecka, protoze pomlcka je v tomhle projektu zakazana jako
   vetny predel a tecku uz web pouziva jako oddelovac v paticce. */
table.srovnani tbody th small { display: inline; color: var(--muted); font-size: 14.5px; font-weight: 400; }

table.srovnani tbody th small::before { content: "\00a0\00b7\00a0"; }

/* Jmena zapouzdrena pod tabulku schvalne: .ano, .ne a .hodnota jsou tak obecna,
   ze by si je ve sdilenem stylopisu sesti stranek nekdo drive nebo pozdeji prebil. */
table.srovnani .ano { color: var(--success); font-weight: 700; }

table.srovnani .ne { color: var(--muted); }

table.srovnani .hodnota { font-weight: 700; font-variant-numeric: tabular-nums; }

table.srovnani .sl-pro { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }

/* Zapouzdrena stejne jako .ano a .ne vys. Zelena znamena "mate to cele", zluta
   "mate to, ale omezene" a cervena "tohle je az v Amanu Pro". */
table.srovnani .srov-plne { color: var(--success); font-weight: 700; font-variant-numeric: tabular-nums; }

table.srovnani .srov-castecne { color: var(--warn); font-weight: 700; font-variant-numeric: tabular-nums; }

/* inline-block, ne inline-flex: obalka s ikonou by jinak vzala uctari z prvni
   polozky a spadla pod radek. */
.srov-ano, .srov-ne { display: inline-block; line-height: 0; }

.srov-ano svg, .srov-ne svg { display: block; width: 22px; height: 22px; }

.srov-ano { color: var(--success); }

.srov-ne { color: var(--danger); }

/* Tabulka ma dve tela, spolecne vlastnosti a rozdily. Bez tohohle by posledni
   radek prvniho tela prisel o spodni caru, protoze `tr:last-child` plati uvnitr
   tela, ne v cele tabulce. */
table.srovnani tbody:not(:last-child) tr:last-child th,
table.srovnani tbody:not(:last-child) tr:last-child td { border-bottom: 1px solid var(--border); }

/* Specificita: `table.srovnani tbody th` je silnejsi nez `.srov-radek-nadpis th`,
   takze selektor musi zacit tabulkou, jinak se pravidlo tise neprojevi. */
table.srovnani .srov-radek-nadpis th {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-tint);
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 14px 20px;
  /* Dědí se do potomků a je potřeba, aby šla animovat výška na "auto". */
  interpolate-size: allow-keywords;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-card);
}

.faq details[open] { border-color: var(--accent-lighter); }

/* Plynulé rozbalení odpovědi. Vlastní výšku obsahu umí prohlížeč dopočítat jen
   se `interpolate-size` výš; `allow-discrete` drží obsah vykreslený i po dobu
   zavírání, jinak by zmizel na prvním snímku. Kde to prohlížeč neumí, odpověď
   naskočí rovnou, tedy tak, jak se chovala předtím. Doba je stejná jako
   u otáčení křížku níž, aby si obojí nešlo naproti. */
.faq details::details-content {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
}

.faq details[open]::details-content { height: auto; }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  font-weight: 700;
  font-size: 17.5px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq-x {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.faq-x::before,
.faq-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2.5px;
  margin-top: -1.25px;
  border-radius: 2px;
  background: var(--accent);
}

.faq-x::after { transform: rotate(90deg); }

.faq details[open] .faq-x { transform: rotate(45deg); }

.faq details p {
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 16.5px;
}

/* ---------- Výzva k akci: pruh uprostřed stránky ----------
   Mezi koncem hera a ceníkem bylo 5452 px stránky bez jediného tlačítka,
   tedy zhruba její polovina. Tenhle pruh tu díru půlí. Je vodorovný a nízký
   schválně, aby nekonkuroval závěrečnému panelu níž. */
.cta-pruh-sekce { padding: 0; }

.cta-pruh {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 180% at 12% 0%, #8b5cf6 0%, rgba(139, 92, 246, 0) 58%),
    radial-gradient(100% 160% at 92% 100%, #6d28d9 0%, rgba(109, 40, 217, 0) 60%),
    linear-gradient(100deg, #6d28d9, #7c3aed 52%, #8b5cf6);
  color: #fff;
}

/* Dekorace ve stopě zvukového signálu. Při najetí povyroste, aby se pruh
   „nadechl“. `pointer-events: none`, jinak by kradla najetí tlačítku. */
.cp-vlna {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 18px;
  pointer-events: none;
  /* Uprostřed se dekorace nekreslí vůbec, takže nemá kudy rušit čtení
     nadpisu ani tlačítek. Maska je v procentech, tedy drží na každé šířce. */
  -webkit-mask-image: var(--vlna-maska);
  mask-image: var(--vlna-maska);
}

.cp-vlna i {
  /* Pevná úzká šířka, ne `flex: 1`. Roztažené na dvacetinu šířky okna z nich
     byly pruhy přes 50 px a vypadaly jako pozadí, ne jako signál. */
  flex: 0 0 7px;
  width: 7px;
  border-radius: 99px;
  /* Průsvitnější než dřív: dekorace nemá přetahovat pozornost z nadpisu. */
  background: rgba(255, 255, 255, 0.07);
  transform-origin: center;
  animation: cta-vlna 4s ease-in-out infinite;
}

/* Rozfázování po sedmi, jako u pásu v sekci Jak to funguje. Záporné zpoždění
   znamená, že vlna běží už při načtení a nezačíná srovnaná do řady. */
.cp-vlna i:nth-child(7n+1) { animation-duration: 4.2s; animation-delay: -0.6s; }
.cp-vlna i:nth-child(7n+2) { animation-duration: 5.4s; animation-delay: -2.1s; }
.cp-vlna i:nth-child(7n+3) { animation-duration: 3.6s; animation-delay: -1.2s; }
.cp-vlna i:nth-child(7n+4) { animation-duration: 6.1s; animation-delay: -3.4s; }
.cp-vlna i:nth-child(7n+5) { animation-duration: 4.8s; animation-delay: -0.9s; }
.cp-vlna i:nth-child(7n+6) { animation-duration: 3.9s; animation-delay: -2.7s; }
.cp-vlna i:nth-child(7n+7) { animation-duration: 5.7s; animation-delay: -1.8s; }

@keyframes cta-vlna {
  0%, 100% { transform: scaleY(0.74); }
  50%      { transform: scaleY(1.16); }
}

.cp-vnitrek {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 76px;
  padding-bottom: 76px;
}

.cp-text h2 {
  color: #fff;
  font-size: 34px;
  line-height: 1.15;
  margin: 0;
}

.cp-text p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 17.5px;
  margin: 10px 0 0;
  /* Volněji, než by se zdálo: při 46ch se věta lámala a rozdělila „e-mailem“
     přes dva řádky. */
  max-width: 66ch;
}

.cp-akce {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}

.cp-tlacitka {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Vedlejší tlačítko na fialovém pruhu. Bez tohohle si .btn-ghost vezme bílé
   pozadí z --surface a obě tlačítka pak váží stejně. */
.cp-akce .btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.cp-akce .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff;
}

/* ---------- Výzva k akci: závěrečný panel ---------- */
/* Spodní odsazení je o 40 px větší, než kam sahá panel: stín pod ním jinak
   zajíždí do patičky. */
.section-final { padding: 72px 0 80px; }

/* Širší než ostatní sekce schválně: je to poslední věc, kterou má návštěvník
   vidět, a má vážit víc než obsah nad ní. */
.cta-panel-obal { max-width: 1320px; }

.cta-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: 32px;
  padding: 84px 32px;
  color: #fff;
  background:
    radial-gradient(80% 120% at 50% -10%, #a78bfa 0%, rgba(167, 139, 250, 0) 55%),
    radial-gradient(70% 110% at 8% 108%, #6d28d9 0%, rgba(109, 40, 217, 0) 60%),
    linear-gradient(160deg, #7c3aed, #5b21b6);
  box-shadow: 0 18px 50px rgba(109, 40, 217, 0.22);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}

.cta-panel:hover {
  transform: scale(1.015) translateY(-4px);
  box-shadow: 0 34px 80px rgba(109, 40, 217, 0.36);
}

.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px,
                              transparent 1px 46px);
  opacity: 0.9;
}

.cp2-vlna {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  pointer-events: none;
  -webkit-mask-image: var(--vlna-maska);
  mask-image: var(--vlna-maska);
}

.cp2-vlna i {
  flex: 0 0 7px;
  width: 7px;
  border-radius: 99px 99px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02));
  transform-origin: bottom;
  animation: cta-vlna 4s ease-in-out infinite;
}

.cp2-vlna i:nth-child(7n+1) { animation-duration: 5.2s; animation-delay: -1.4s; }
.cp2-vlna i:nth-child(7n+2) { animation-duration: 3.8s; animation-delay: -3.0s; }
.cp2-vlna i:nth-child(7n+3) { animation-duration: 6.4s; animation-delay: -0.5s; }
.cp2-vlna i:nth-child(7n+4) { animation-duration: 4.4s; animation-delay: -2.6s; }
.cp2-vlna i:nth-child(7n+5) { animation-duration: 5.9s; animation-delay: -1.1s; }
.cp2-vlna i:nth-child(7n+6) { animation-duration: 4.0s; animation-delay: -3.7s; }
.cp2-vlna i:nth-child(7n+7) { animation-duration: 6.8s; animation-delay: -2.2s; }

/* Text nad dekoraci. Řeší se vrstvením, ne krytím, aby mřížka i vlna
   zůstaly vidět. */
.cta-panel > *:not(.cp2-vlna) { position: relative; z-index: 1; }

.cta-panel h2 {
  color: #fff;
  font-size: 46px;
  line-height: 1.08;
  margin: 0;
}

.cta-panel p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 18.5px;
  margin: 18px auto 32px;
  max-width: 60ch;
}

/* Vedlejší tlačítko na fialovém panelu. Bez tohohle si .btn-ghost vezme bílé
   pozadí z --surface, obě tlačítka pak váží stejně a hierarchie zmizí.
   Změřeno: obě měla pozadí rgb(255, 255, 255). */
.cta-panel .btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.cta-panel .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff;
}

.cp2-chipy {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.cp2-chipy span {
  font-size: 14.5px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 7px 16px;
}

/* ---------- Patička prodejní stránky ----------
   Vlastní třídy vedle `.footer`, protože `.footer` drží zbylých osm stránek
   a ty se touhle prací neměnily. Až se sjednotí, `.footer` může odejít. */
.pat {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 56px 0 34px;
}

.pat-logo .logo { font-size: 34px; }

.pat-claim {
  margin: 18px 0 0;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  max-width: 15ch;
}

.pat-claim em {
  font-style: normal;
  color: var(--accent);
  /* Zlom po prvni vete, at nezavisi na sirce. Bez tohohle se claim lamal
     jako "Vy mluvite. Amanu" a "pise." */
  display: block;
}

.pat-mrizka {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(140px, 1fr));
  gap: 40px;
  align-items: start;
}

.pat-sloupec h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 6px 0 16px;
}

.pat-sloupec ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pat-sloupec a,
.pat-sloupec button {
  color: var(--muted);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}

.pat-sloupec a:hover,
.pat-sloupec button:hover { color: var(--accent); }

.pat-spodek {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14.5px;
}

/* ---------- Patička ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 44px 0 40px;
  background: var(--bg-soft);
}

.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.footer-brand .logo { font-size: 22px; }

.footer-brand p {
  color: var(--muted);
  font-size: 15px;
  margin-top: 10px;
}

.footer-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-links a:hover { color: var(--accent); }

.footer-legal { color: var(--muted); font-size: 14.5px; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in { opacity: 1; transform: translateY(0); }

.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.42s; }

/* ---------- Fokus pro klávesnici ---------- */
.btn:focus-visible,
.pu-radek:focus-visible,
.theme-toggle:focus-visible,
.nav-menu:focus-visible,
.nav-links a:focus-visible,
.footer-links a:focus-visible,
.faq summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Responzivita ---------- */
/* Navigace nic neschovava. Se sedmi polozkami se cela lista vejde az k 961 px,
   tedy k sirce, pod kterou se z nav-links stava rozbalovaci panel za
   hamburgerem. Zmereno: pri 961 px chce vnitrek listy 946 px a posledni odkaz
   konci 22 px pred prepinacem motivu. */
@media (max-width: 1080px) {
  .osa-drat { display: none; }
  .osa-kroky { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
}

@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .section { padding: 84px 0; }

  .features { grid-template-columns: 1fr 1fr; }

  .okno, .okno:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }

  .autor { grid-template-columns: 1fr; gap: 32px; }

  .autor-foto { max-width: 340px; }
  .okno:nth-child(even) .okno-text { order: 0; }

  /* Z vodorovné lišty se stává rozbalovací panel pod hlavičkou. Je to TÁŽ
     navigace, ne druhá sada odkazů: dvě kopie by se dřív nebo později
     rozešly a zvýrazňování právě čtené sekce by muselo obsluhovat obojí.
     Zavírá se přes `visibility`, ne `display`, aby šel přechod animovat
     a aby zavřený panel zmizel z pořadí tabulátoru. */
  .nav-menu { display: inline-flex; order: 9; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 4px 24px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    max-height: 70vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  .nav.menu-otevreno .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Ve sloupci by podtržení přes celou šířku vypadalo jako oddělovač řádku,
     takže se ruší a právě čtená sekce se pozná barvou. Výzva na konci panelu
     je tlačítko, ne položka seznamu, proto se jí odkazová pravidla vyhýbají. */
  .nav-links a:not(.btn) {
    font-size: 17px;
    padding: 13px 2px;
  }

  /* Linka nahoře, ne dole: dole by zůstala viset pod poslední položkou
     pokaždé, když se výzva pod ní zrovna nezobrazuje. */
  .nav-links a:not(.btn) + a:not(.btn) { border-top: 1px solid var(--border); }

  .nav-links a:not(.btn)::after { display: none; }

  .theme-toggle { margin-left: auto; }

  .hero { padding: 68px 0 100px; }

  .fbar { display: none; }
}

@media (max-width: 560px) {
  .lane-head { flex-direction: column; align-items: flex-start; gap: 4px; }

  .nav .btn-sm { display: none; }

  /* Hlavni vyzva prodejni stranky se schovat nesmi: je to jedina cesta dal,
     ktera je z libovolneho mista stranky po ruce, protoze odkazy v navigaci
     mizi uz pod 960 px. Tlacitka na ostatnich strankach (Cenik) miznou dal,
     tam o zadnou cestu k vyzkouseni nejde.
     Zmereno na 390 px: v liste je 327 px mista, logo 119 plus prepinac 42
     plus tlacitko s kratkym popiskem a uzsi mezerou se do toho vejde,
     kdezto se sirokym popiskem chtel obsah 383 px. */
  .nav .nav-cta { display: inline-flex; padding: 10px 16px; }

  .nav-inner { gap: 14px; }

  .nav-cta-dlouhy { display: none; }

  .nav-cta-kratky { display: inline; }
}

/* Nejmensi bezne telefony. S tlacitkem v liste chtel obsah na 320 px
   324 px proti 305 px mista, takze se ubira na odsazeni, ne na obsahu.
   Pred touhle zmenou to nevadilo jen proto, ze se tlacitko schovavalo. */
@media (max-width: 380px) {
  .nav-inner { padding-left: 14px; padding-right: 14px; gap: 10px; }

  .nav .nav-cta { padding: 10px 13px; }
}

/* Ctyri ovladaci prvky v liste se na uzkych telefonech nevejdou. Zmereno
   s hamburgerem: na 320 px chce obsah listy 352 px z 305 dostupnych, na
   390 px 380 z 375, a teprve od 412 px zbyva 17 px rezerva. Vyzva se proto
   pod 480 px stehuje na konec rozbaleneho panelu, kde je navic citelnejsi
   nez 105px cip. Cesta k vyzkouseni tim nemizi, jen je o klepnuti dal
   a hero ma vlastni dve tlacitka hned pod listou. */
@media (max-width: 480px) {
  .nav .nav-cta { display: none; }

  .nav-panel-cta { display: inline-flex; margin-top: 14px; }
}

/* ---------- Závod na úzkých displejích ----------
   Věta se píše na JEDEN řádek (`white-space: nowrap`) a stopa má
   `overflow: hidden`, takže na mobilu se ukázala jen její první půlka:
   naměřeno na 390 px, věta chce 569 px a stopa má 285. Zkracuje se proto
   o dovětky, aby se to, co zbude, opravdu napsalo celé.

   Zkracovat, ne lámat: odkrývání jede přes `width` od nuly do sta procent,
   což je efekt pro jeden řádek. Na zalomeném odstavci by se odkrývaly všechny
   řádky najednou a psaní by to připomínat přestalo.

   Poměr drah zůstává tři ku jedné, protože obě dráhy píšou tutéž větu.
   Doba kola se nemění; už dnes je zpomalená na dvě třetiny, takže nejde
   o hodiny, ale o poměr. */
@media (max-width: 739px) {
  .lane-dovetek-2 { display: none; }
}

@media (max-width: 640px) {
  .lane-text, .lane-sizer { font-size: 15.5px; }
}

/* Nejužší telefony. Na 320 px má stopa 215 px, takže i „Dobrý den, posílám
   shrnutí ze schůzky." je moc dlouhé a zbývá první věta. */
@media (max-width: 430px) {
  .lane-dovetek-1 { display: none; }

  /* Totéž ve stavovém řádku dema, jen o krok dál: zbývá „Nadiktováno,
     opraveno." Ekvalizér vedle stavu je dekorace a uvolní dalších 30 px,
     bez kterých se na 320 px nevejde ani ta zkrácená věta. */
  .demo-dovetek-2 { display: none; }

  .demo-eq { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }

  .section { padding: 64px 0; }

  .features, .osa-kroky { grid-template-columns: 1fr; }


  .race { padding: 24px 20px; }

  .lane-text { font-size: 15px; }

  .lane-faze { display: none; }

  /* Stejné odsazení nahoře i dole. `min-height` tu bylo od doby, kdy byl
     opravený text `position: absolute` a výšku okna nedržel; dnes ji drží
     mřížka, takže pevná výška jen vyráběla mrtvé místo. */
  .demo-body { padding: 20px 18px; }

  /* Dovětky posledního stavu. Ve všech třech fázích se musí hlavička okna
     vejít na JEDEN řádek, jinak okno na konci kola povyroste o 24 px
     a stránka pod ním poskočí. Naměřeno na 390 px: na text je 229 px místa
     a „Nadiktováno, přepsáno, opraveno." chce 248. */
  .demo-dovetek-1 { display: none; }

  .hero-ctas { flex-direction: column; width: 100%; }

  .hero-ctas .btn { width: 100%; }

  .brandmark { margin-bottom: 26px; }

  .price-card { padding: 26px 20px 24px; }

  .price-num { font-size: 46px; }


  .footer-inner { flex-direction: column; }

  .pu-radek { font-size: 15px; }

  .uw-body { padding: 18px 16px 20px; }

  .dict { padding: 40px 22px 38px; }

}

/* Heslo `a·ma·nu·en·sis` je jeden nedělitelný kus, protože prostřední tečka
   není příležitost ke zlomu. Na 32 px chce 233 px, jenže na 320px obrazovce
   je uvnitř kartičky 211 px a `overflow: hidden` mu ukousne konec; na 340 px
   chybí 2 px a od 360 px se vejde. Pod 350 px se proto zmenší. */
@media (max-width: 350px) {
  .dict-word { font-size: 28px; letter-spacing: 0.02em; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Statické logo místo animace: čárky pryč, písmena viditelná */
  .bm-bar { display: none; }
  .bm-ltr { opacity: 1; animation: none; }

  .reveal { opacity: 1; transform: none; }

  /* Demo staticky: rovnou čistý text */
  .demo-raw { display: none; }
  .demo-clean { position: static; opacity: 1; filter: none; }

  /* Osa staticky: drat pryc, karty nezvednute, korekce hotova */
  .osa-drat { display: none; }
  .osa-uzel, .osa-karta, .sc-hlas i, .sc-pas i,
  .sc-klavesy .sc-stisk, .sc-klavesy .sc-stisk::after, .sc-pise,
  .sc-korekce .sc-pred, .sc-korekce .sc-po,
  .sc-pilulka.p1, .sc-pilulka.p2 { animation: none !important; }
  .sec-wave i { animation: none !important; }
  .sc-hlas i { transform: scaleY(.55); }
  .sc-pise { width: auto !important; border-right: 0; }
  .sc-pise-obal { width: auto; }
  .sc-korekce .sc-pred { opacity: 0; }
  .sc-korekce .sc-po { opacity: 1; }
  .sc-pilulka.p1 { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

  /* Závod: rovnou hotový stav, opravená věta a odznak Hotovo */
  .lane-text { width: 100% !important; white-space: normal; position: static; }
  .lane-obal { display: block; }
  .lane-sizer { display: none; }
  .lane-syrovy { display: none; }
  .lane-track-amanu .lane-cisty { position: static; opacity: 1; }
  .lf-1, .lf-2 { display: none; }
  .lf-3 { opacity: 1; }
  input[type="range"].kalk-tahlo::-webkit-slider-thumb { animation: none; }
  input[type="range"].kalk-tahlo::-moz-range-thumb { animation: none; }
}


/* ============================================================
   DLOUHÝ TEXTOVÝ DOKUMENT (právní stránky)
   Přidáno pro obchodni-podminky.html, cenik.html,
   reklamacni-rad.html a ochrana-udaju.html.
   Používá jen existující tokeny, takže tmavý režim funguje sám.
   Nic výše se nemění, tenhle blok jen přidává.
   ============================================================ */

.doc { padding: 44px 0 96px; }

.doc-back { font-size: 15.5px; font-weight: 600; margin-bottom: 22px; }
.doc-back a { color: var(--muted); text-decoration: none; }
.doc-back a:hover { color: var(--accent); }

.doc-head { margin-bottom: 34px; }
.doc-head h1 {
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: none;
}
.doc-meta { color: var(--muted); font-size: 15.5px; font-weight: 600; margin-top: 14px; }

/* ---------- Obsah stránky ---------- */
.doc-toc {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 44px;
}
.doc-toc strong { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.doc-toc ul { margin: 12px 0 0; padding-left: 0; list-style: none; }
.doc-toc li { margin-top: 6px; font-size: 16px; }
.doc-toc li.toc-part { margin-top: 14px; }
.doc-toc li.toc-part a { color: var(--text); font-weight: 800; }
.doc-toc a { color: var(--muted); text-decoration: none; font-weight: 600; }
.doc-toc a:hover { color: var(--accent); }

/* ---------- Vlastní text ---------- */
.prose { font-size: 17px; line-height: 1.75; }
.prose > * + * { margin-top: 18px; }

.prose .doc-part {
  font-size: clamp(25px, 3.4vw, 32px);
  margin-top: 56px;
  padding-top: 26px;
  border-top: 3px solid var(--accent-soft);
  color: var(--accent-strong);
}

.prose h2 {
  font-size: clamp(23px, 3vw, 29px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-top: 48px;
  scroll-margin-top: 96px;
}
.prose h3 {
  font-size: 19.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 32px;
  scroll-margin-top: 96px;
}
.prose h4 { font-size: 17px; font-weight: 700; margin-top: 24px; line-height: 1.35; }
.prose p { color: var(--text); }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  overflow-wrap: anywhere;
}
.prose a:hover { color: var(--accent-strong); }

.prose ul, .prose ol { margin: 18px 0; padding-left: 26px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ol ol { list-style: lower-alpha; }
.prose li { margin-top: 8px; }
.prose li > ul, .prose li > ol { margin: 8px 0; }
.prose li::marker { color: var(--accent); font-weight: 700; }

.prose code {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.9em;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  overflow-wrap: anywhere;
}

.prose hr { border: none; border-top: 1px solid var(--border); margin: 44px 0; }

/* ---------- Tabulky ---------- */
.table-wrap { overflow-x: auto; margin: 22px 0; -webkit-overflow-scrolling: touch; }

.prose table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.prose th, .prose td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.prose thead th { background: var(--surface-tint); font-weight: 700; color: var(--text); }
.prose tbody th[scope="row"] { background: var(--surface-tint); font-weight: 700; white-space: nowrap; }
.prose tr:last-child th, .prose tr:last-child td { border-bottom: none; }

/* Cenova tabulka ma ctyri sloupce a bez pevneho rozvrzeni si prvni sloupec
   (nazvy radku, `nowrap`) vzal 240 px z 752 a tri varianty pak mely ruznou
   sirku. Zmereno v prohlizeci. `white-space: normal` je tu tedy nutny, jinak
   by `table-layout: fixed` sloupec stejne pretekl. */
.prose table.varianty-tabulka { table-layout: fixed; }
.prose table.varianty-tabulka th[scope="row"] { width: 25%; white-space: normal; }
.prose table.varianty-tabulka thead th + th { width: 25%; }

/* ---------- Zvýrazněná poznámka ---------- */
.doc-note {
  background: var(--accent-soft);
  border: 1px solid var(--accent-lighter);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--accent-strong);
  font-size: 16px;
  font-weight: 600;
  margin: 26px 0;
}

/* ---------- Loga přijímaných karet ----------
   Vyžadují je VOP PayU 7.6.5, viditelně na webu i v platebním procesu, a je to
   kontrolovaná položka při ověřování obchodu. */
.pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; }
.pay-logos img { height: 26px; width: auto; }

/* VISA MÁ VE SVÉM SOUBORU POVINNÝ VOLNÝ PROSTOR, takže při stejné výšce boxu
   je její kresba o dost menší než symbol Mastercard. Změřeno v prohlížeči:
   kresba Visy zabírá 30 % výšky viewBoxu (158 × 51 ze 278 × 169), Mastercard
   67 % (116 × 72 ze 152 × 108). Při 26 px by tak Visa měla 7,8 px proti
   17,3 px Mastercardu.

   Řeší to vyšší box, ne oříznutí souboru: 57 px dá kresbě 17,2 px, tedy
   stejně jako Mastercard, a volný prostor zůstane tam, kde ho brand standards
   Visy chtějí. Soubor od Visy zůstává bajt po bajtu jejich. */
.pay-logos .pay-visa { height: 57px; }

/* Visa má modrou variantu pro světlý podklad a bílou pro tmavý; symbol
   Mastercard je na obou čitelný, ten je jen jeden. Pořadí bloků kopíruje
   zbytek stylopisu: nejdřív výchozí, pak výslovně zvolený tmavý, pak systémový. */
.pay-logos .pay-tmavy { display: none; }

:root[data-theme="dark"] .pay-logos .pay-svetly { display: none; }
:root[data-theme="dark"] .pay-logos .pay-tmavy { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pay-logos .pay-svetly { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pay-logos .pay-tmavy { display: block; }
}

@media (max-width: 640px) {
  .doc { padding: 28px 0 64px; }
  .prose { font-size: 16.5px; }
  .doc-toc { padding: 18px 20px; }
  .prose table { min-width: 460px; font-size: 15.5px; }
  .prose th, .prose td { padding: 10px 12px; }
}

/* ---------- Obchod (obchod.amanu.cz) ----------
   Obchod bezi na jinem stroji, ale cte tenhle stylopis, aby nakup nevypadal
   jako jiny web. Vsechno je zanorene pod `.shop`, kterou nasazuje
   `server/src/shop/view/layout.ts`: marketingove stranky zadny formular nemaji
   a tabulky uz stylovane maji pres `.prose`, takze holy selektor `input` nebo
   `table` by jim menil vzhled bez duvodu.

   Bez tohoto bloku dedil obchod jen hlavicku, paticku a tlacitka, a pole
   formulare se vykreslovala vychozim vzhledem prohlizece. V tmavem rezimu z
   nich byly bile cihly na tmavem pozadi, protoze vychozi pole barvy motivu
   nezna. */
.shop { font-size: 17px; line-height: 1.7; }
.shop > * + * { margin-top: 20px; }
.shop h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-top: 38px; }

/* ---------- Formulare ---------- */
.shop form { margin-top: 30px; }
.shop form > p { margin: 0 0 22px; }
.shop form > p:last-child { margin-bottom: 0; }

.shop label { display: block; font-weight: 700; font-size: 16px; margin-bottom: 7px; }

.shop input[type="text"],
.shop input[type="email"] {
  display: block;
  font: inherit;
  font-size: 16.5px;
  width: 100%;
  max-width: 26rem;
  padding: 12px 14px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}
.shop input[type="text"]:hover:not(:disabled),
.shop input[type="email"]:hover { border-color: var(--accent-lighter); }
.shop input[type="text"]:focus-visible,
.shop input[type="email"]:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}
.shop input:disabled { background: var(--surface-tint); color: var(--muted); cursor: not-allowed; }

/* Zaskrtavaci pole. Trida, ne `:has()`: znění souhlasu je pravne vazane a
   sablona ho vykresluje na tri mistech, takze at je na prvni pohled videt,
   ktery popisek je zaskrtavaci. */
.shop label.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.6;
  margin-bottom: 0;
  cursor: pointer;
}
.shop label.check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Souhlas podle cl. 8.2 stoji nad tlacitkem, ktere zavazuje k platbe, takze
   dostava ram: musi byt videt, ze je to samostatne rozhodnuti, ne dalsi odstavec. */
.shop .consent {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}

/* Pole pro firmu se ukazuji az po zaskrtnuti "Nakupuji na firmu". Delano
   `:has()`, ne skriptem: platebni stranka se obejde bez javascriptu a stav
   zaskrtnuti se tim cte za behu, takze krok zpet z rekapitulace nepotrebuje
   zadnou inicializaci. Kdyz prohlizec `:has()` neumi, ukazou se obe pole, tedy
   presne to, co delal obchod predtim. Skryta jsou jen vizualne: `name="ico"` a
   `name="dic"` v dokumentu zustavaji, jinak by je krok zpet zahodil. */
.shop form:not(:has(input[name="firma"]:checked)) .firma-pole { display: none; }

.shop .form-note { color: var(--muted); font-size: 15.5px; margin-top: 10px; }
.shop .form-error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 15.5px;
  font-weight: 600;
  margin: 8px 0 0;
  max-width: 26rem;
}
:root[data-theme="dark"] .shop .form-error { color: #fca5a5; background: rgba(185, 28, 28, 0.18); border-color: rgba(252, 165, 165, 0.4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .shop .form-error {
    color: #fca5a5;
    background: rgba(185, 28, 28, 0.18);
    border-color: rgba(252, 165, 165, 0.4);
  }
}

/* ---------- Výběr varianty v prvním kroku objednávky ----------
   Vykresluje se jen tehdy, kdyz je na prodej vic nez jedna varianta
   (`naProdejVarianty` v server/src/shop/prices.ts). Dnes je na prodej jedina,
   takze tenhle blok na produkci nic nekresli; az se brana otevre, kresli hned,
   a presne proto tu je uz ted: bez nej by se `fieldset` vykreslil vychozim
   rameckem prohlizece a poznalo by se to az u zakaznika. Bod 6 seznamu
   v Tasku 22 planu D. */
.shop fieldset.varianty {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  padding: 16px 20px 18px;
  margin: 0 0 26px;
}

.shop fieldset.varianty legend {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  padding: 0 8px;
}

/* Mezi variantami, ne pod posledni: `fieldset` uz ma spodni odsazeni sam. */
.shop fieldset.varianty label.check + label.check { margin-top: 14px; }

/* `label.check` vys stylovala jen zaskrtavatko. Prepinac varianty je radio,
   takze bez tohohle pravidla by mel vychozi velikost a vedle 22px
   zaskrtavatek by vypadal jako jiny ovladaci prvek. */
.shop label.check input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------- Tabulka rekapitulace ----------
   Bez `min-width`, na rozdil od `.prose table`: rekapitulace ma dva sloupce a
   na telefonu se ma zalomit, ne posouvat do strany. Cl. 8.1 bod 3 ji dela
   povinnou, takze musi byt cela precitatelna i na uzke obrazovce. */
.shop table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.shop th, .shop td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.shop th { background: var(--surface-tint); font-weight: 700; width: 42%; }
.shop tr:last-child th, .shop tr:last-child td { border-bottom: none; }

/* ---------- Dvojice tlacitek pod sebou ---------- */
.shop .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

@media (max-width: 640px) {
  .shop th, .shop td { padding: 10px 12px; }
  .shop th { width: 40%; }
  .shop .actions .btn { width: 100%; }
}

/* ---------- Prihlaseni (obchod) ----------
   Uzky sloupec na stred, protoze na teto strance je vzdycky jen jeden ukol:
   napsat adresu, nebo opsat sest cislic. Tentyz vzhled ma obrazovka prihlaseni
   v aplikaci (`app/src/components/accounts/LoginScreen.tsx`), aby zakaznik
   nepoznal, ze jsou to dve ruzne implementace. */
.shop .prihlaseni { max-width: 30rem; margin-inline: auto; text-align: center; }
/* Marketingovy nadpis stranky ma 42px, coz se do uzkeho sloupce nevejde:
   `Zadejte kod z e-mailu` se na nem lamalo uprostred slova na `e-` a `mailu`.
   `balance` rozdeli radky rovnomerne, kdyby se prece jen lamat musel. */
.shop .prihlaseni h1 {
  font-size: clamp(28px, 4.5vw, 34px);
  line-height: 1.2;
  text-wrap: balance;
}
.shop .prihlaseni-uvod { font-size: 17.5px; color: var(--muted); margin-top: 10px; }
.shop .prihlaseni-uvod strong { color: var(--text); font-weight: 700; }

/* Pole se roztahne na celou sirku sloupce a text v nem jde na stred, jinak by
   jedina hodnota sedela u leveho okraje pod nadpisem zarovnanym na stred. */
.shop .prihlaseni input[type="email"],
.shop .prihlaseni input[type="text"] { max-width: none; text-align: center; }

/* Sest cislic je jediny obsah pole, takze snese vetsi pismo i rozestup. */
.shop .prihlaseni .pole-kod {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.3em;
  /* Rozestup pridava mezeru i ZA posledni cislici, takze by cislo vypadalo
     posunute doleva. Odsazeni o tutez hodnotu ho vraci na stred. */
  text-indent: 0.3em;
  padding: 14px;
}

.shop .prihlaseni-platnost { font-size: 16px; color: var(--muted); margin-top: 14px; }
.shop .prihlaseni-platnost .odpocet {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  /* Aby cislice pri odpoctu neposkakovaly, kdyz se zmeni sirka znaku. */
  font-variant-numeric: tabular-nums;
  margin-inline-start: 6px;
}
.shop .prihlaseni-platnost .vyprselo { color: #b91c1c; font-weight: 700; }

/* Dve vedlejsi akce vedle sebe a stejne siroke. Jedna z nich je tlacitko ve
   vlastnim formulari, druha odkaz, takze se sirka musi vynutit obema. */
.shop .prihlaseni-akce { display: flex; gap: 12px; margin-top: 18px; }
.shop .prihlaseni-akce > * { flex: 1; }
.shop .prihlaseni-akce form { margin-top: 0; }
.shop .prihlaseni-akce .btn { width: 100%; }

.shop .prihlaseni .form-note { text-align: center; margin-top: 18px; }

@media (max-width: 480px) {
  .shop .prihlaseni-akce { flex-direction: column; }
  .shop .prihlaseni .pole-kod { font-size: 24px; letter-spacing: 0.2em; text-indent: 0.2em; }
}

/* ---------- Popisek jen pro odecitac obrazovky ----------
   Pole s vymluvnym zastupnym textem popisek navic vedle sebe nepotrebuje, ale
   bez `label` by ho odecitac obrazovky ohlasil jako nepojmenovane. Schovava se
   proto vizualne, ne pres `display: none`, ktere by ho vzalo i odecitaci. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Tisk a export do PDF =====
   Prilohy potvrzovaciho e-mailu se vyrabeji tiskem techto stranek do PDF
   (server/legal/build-pdf.mjs). Bez tohoto bloku by se do pravniho dokumentu
   vytiskla navigace, prepinac motivu a patickove odkazy. */
@media print {
  :root { color-scheme: light; }

  .nav,
  .footer,
  .doc-back,
  .theme-toggle,
  .reveal-init { display: none !important; }

  html,
  body {
    background: #fff !important;
    color: #111 !important;
  }

  .doc { padding: 0 !important; }

  /* Odkazy v papirovem dokumentu nikam nevedou, takze cil patri do textu.
     Vnitrni kotvy se vypisovat nemusi, ty v ramci dokumentu davaji smysl. */
  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  h1, h2, h3 { break-after: avoid; }
  table, pre, blockquote { break-inside: avoid; }

  @page { margin: 18mm 16mm; }
}

/* ============================================================
   ADMINISTRACE (admin.amanu.cz)
   Pridano pro `server/src/sprava/view/`. Administrace si pujcuje
   `.shop` pravidla vyse (formulare, tabulky, tlacitka), tenhle
   blok dopisuje jenom to, co obchod nema: navigaci mezi
   obrazovkami, uzsi tabulku a kladnou hlasku.

   VSECHNA JMENA MAJI PREDPONU `sprava-` a zadna stranka v `live/`
   je nepouziva, takze se marketingovy web tim to blokem nemeni.
   Tataz uvaha, jakou ma u sebe blok obchodu.
   ============================================================ */

/* Radek odkazu v hlavicce. `margin-left: auto` ho odsune doprava od loga,
   `flex-wrap` ho na telefonu zalomi misto aby prelil hlavicku. */
.sprava-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  font-size: 15.5px;
  font-weight: 600;
}

.sprava-nav a { color: var(--muted); text-decoration: none; }
.sprava-nav a:hover { color: var(--accent); }

/* Formular v radku odkazu se nesmi chovat jako blok, jinak by rozbil flex. */
.sprava-odhlasit { display: inline-flex; margin: 0; }

/* `.shop table` dava prvnimu sloupci 42 %, protoze rekapitulace objednavky ma
   sloupce dva. Tabulky administrace jich maji vic a sirku si maji rozdelit
   samy, jinak by se ctyri sloupce zmackly do 58 % sirky. */
.sprava-tabulka th { width: auto; }
.sprava-tabulka td form { margin: 0; }

/* Tabulka, ktera se nevejde, se posouva SAMA V SOBE a stranka vodorovne
   neroluje. Plati na kazde sirce, ne jen na telefonu: v bloku 3 pribyl
   tabulkam sloupec s akci a zmereno v prohlizeci na 1280 px, ze tabulka
   licenci narostla na 1166 px a fronta na 1373 px proti kontejneru 1120 px,
   takze do strany rolovala CELA STRANKA vcetne hlavicky.

   OBAL, ne `overflow-x` na tabulce samotne. Vyzkousene oboji: `display: block`
   na tabulce sice roluje, ale radky se pak smrsknou na sirku obsahu, takze
   uzka tabulka ma prouzek hlavicky na 357 px uvnitr boxu sirokeho 1072 px.
   S obalem zustava `min-width: 100%` na tabulce a uzke tabulky vypadaji
   presne jako pred blokem 3, zmereno.

   `.shop` v selektoru MUSI byt: `.shop table` vyse ma `width: 100%` se
   specificitou 0-1-1 a holou `.sprava-tabulka` s 0-1-0 by prebilo bez ohledu
   na poradi, takze by tabulka nikdy nepresahla obal a sloupce by se zmackly.
   Tataz past, jakou tu uz jednou nastrazil `overflow: hidden`. */
.sprava-tabulka-obal {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.shop .sprava-tabulka-obal > .sprava-tabulka {
  width: auto;
  min-width: 100%;
}

/* Akcni formular v bunce tabulky (Blok 3: odvolat/zrusit odvolani licence a
   dalsi akce, ktere pribyvaji). Bez `display: flex` by pole spadlo pod
   tlacitko, protoze `.shop input[type="text"]` vyse ma vlastni radek jako
   blokovy prvek. Pole dostava PEVNOU sirku misto zdedeneho `width: 100%`,
   jinak by se snazilo vyplnit celou bunku a roztahlo by tabulku (a s ni
   telefon) na sirku, kterou nic neomezuje. */
.sprava-akce {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sprava-akce input[type="text"] {
  width: 14rem;
}

/* Formular "Vyrazit licenci bez objednavky" (Blok 3, Task 13, pod tabulkou
   licenci na detailu uctu). Ma pet ruznych poli (vyber, cislo, text,
   zaskrtavatko, tlacitko), takze se do `.sprava-akce` vejit nema: ta je
   0-1-0 jednoradkovy flex bez popisku nad polem a byla by pro pet veci tesna.
   Sklada se stejne jako `.sprava-hledani` nize (radek sloupcu s popiskem
   nahore, tlacitko zarovnane k jejich spodni hrane), jen ma vlastni jmeno,
   protoze `.sprava-hledani` je GET filtr nad tabulkou, semanticky jina vec. */
.sprava-razeni {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
}

/* Popisek nad polem uvnitr `.sprava-razeni` pouziva stejnou tridu `.sprava-pole`
   jako `.sprava-hledani` nize (sloupec: popisek, mezera, pole), takze admin
   vidi na obou formularich totez chovani. `margin: 0` rusi `.shop label`
   (16px, tucne, margin-bottom 7px, viz vyse): tu mezeru uz dava `gap`
   v `.sprava-pole` a bez teto opravy by se secetla dvakrat. */
.sprava-razeni label {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}

.sprava-razeni select,
.sprava-razeni input[type="number"] {
  display: block;
  font: inherit;
  font-size: 16.5px;
  width: auto;
  margin: 0;
  padding: 11px 14px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}
.sprava-razeni input[type="number"] { width: 6rem; }
/* `.shop input[type="text"]` uz stylizuje (blokovy prvek, 100% sirky do
   max-width 26rem); tady se jen zuzuje, aby v radku vedle ctyr dalsich poli
   nevznikl neuvazany prazdny prostor. */
.sprava-razeni input[type="text"] {
  width: 16rem;
  max-width: 100%;
  margin: 0;
}

.sprava-razeni select:hover,
.sprava-razeni input:hover:not(:disabled) { border-color: var(--accent-lighter); }
.sprava-razeni select:focus-visible,
.sprava-razeni input:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Zaskrtavatko pouziva tutez tridu `.check`, jakou ma "Chci e-mailem vedet
   o novinkach" na `/ucet/novinky`, aby administrace nevymyslela druhy vzhled
   pro totez. Uvnitr flex radku se `.check` (display: grid) chova jako jeden
   polozka zarovnana na sirku sveho obsahu, takze radek nerozbiji. */
.sprava-razeni .check {
  margin: 0;
  flex: 0 0 auto;
}

.sprava-razeni .btn { margin: 0; flex: 0 0 auto; }

/* Bunky se nezalamuji. U tabulky, ktera se na uzku obrazovku posouva do strany,
   je zalomeni to horsi z obou zel: "18. 6. 2027" se rozpadlo na tri radky a
   rozhodilo vysku kazdeho radku, zatimco posunuti do strany uz stejne existuje.
   Posledni chyba ve fronte je vyjimka, ta je veta a zalomit se musi. */
.sprava-tabulka th,
.sprava-tabulka td { white-space: nowrap; }
.sprava-tabulka td.sprava-chyba { white-space: normal; min-width: 18rem; }

/* Kladny protejsek `.form-error`. Vlastni pravidlo, ne `.form-note`: hlaska po
   akci ma byt videt na prvni pohled, protoze rika, ze se neco stalo. */
.sprava-zprava {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 15.5px;
  font-weight: 600;
  margin: 8px 0 0;
}

:root[data-theme="dark"] .sprava-zprava {
  color: #86efac;
  background: rgba(22, 101, 52, 0.18);
  border-color: rgba(134, 239, 172, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sprava-zprava {
    color: #86efac;
    background: rgba(22, 101, 52, 0.18);
    border-color: rgba(134, 239, 172, 0.4);
  }
}

/* Rada dlazdic na Prehledu. `auto-fit` a `minmax` znamena, ze se pocet sloupcu
   ridi sirkou okna a na telefonu z toho vyjde jeden sloupec bez media dotazu. */
.sprava-dlazdice-rada {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 22px 0 34px;
}

.sprava-dlazdice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.sprava-dlazdice-popis {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Cislo je to jedine, co se z dlazdice cte na dalku, takze nese vahu samo. */
.sprava-dlazdice-hodnota {
  color: var(--text);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 4px;
}

.sprava-dlazdice-poznamka {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

/* Radek hledani nad tabulkou. Formularova pravidla obchodu davaji poli sirku
   100 % a vlastni radek, coz je spravne u objednavky a spatne u filtru.

   `.sprava-pole` je sloupec popisek nad polem; bez nej sedel popisek vedle pole
   a tlacitko o hlavu vys, protoze `.btn` obchodu ma mnohem vyssi vypln nez
   `input`. Poznalo se to vykreslenim, ne z kodu. */
.sprava-hledani {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 0 0 26px;
}

.sprava-pole { display: flex; flex-direction: column; gap: 5px; }
.sprava-hledani label { margin: 0; font-size: 14.5px; font-weight: 600; }

/* Blok obchodu vysazi jen `input[type="text"]` a `[type="email"]`, takze
   vyhledavaci pole a nabidka stavu by zustaly ve vychozim vzhledu prohlizece.
   V tmavem motivu je to bila cihla, tataz vada, jakou mel cely obchod pred
   16. 8. Poznalo se to vykreslenim, ne z kodu. */
.sprava-hledani input[type="search"],
.sprava-hledani select {
  display: block;
  font: inherit;
  font-size: 16.5px;
  width: auto;
  min-width: 210px;
  margin: 0;
  padding: 11px 14px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}

.sprava-hledani input[type="search"]:hover,
.sprava-hledani select:hover { border-color: var(--accent-lighter); }

.sprava-hledani input[type="search"]:focus-visible,
.sprava-hledani select:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}

.sprava-hledani .btn { margin: 0; flex: 0 0 auto; }

/* Doslovne zneni souhlasu podle cl. 8.2. Vysazene jako citace schvalne: je to
   text, ktery zakaznik videl a odsouhlasil, ne nase veta. */
.sprava-souhlas {
  border-left: 3px solid var(--accent);
  background: var(--surface-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 10px 0;
  padding: 12px 16px;
  font-size: 15.5px;
}

/* Jedna ze tri globalnich hodnot na obrazovce Nastaveni (Blok 4). Cara nahore
   misto ramecku dokola: jsou to tri polozky pod sebou, ne karty vedle sebe, a
   ramecek by z kazde udelal box uvnitr boxu, ktery uz stranka ma. */
.sprava-nastaveni-polozka {
  border-top: 1px solid var(--border);
  margin-top: 28px;
  padding-top: 20px;
}
.sprava-nastaveni-polozka h2 { margin-top: 0; }

.sprava-poznamka { color: var(--muted); font-size: 14.5px; }

/* Nadpis detailu uctu je e-mail zakaznika, tedy dlouhe slovo bez mezer.
   Zmereno 3. 9. 2026 na 413 px: `jana.novakova@seznam.cz` chtelo 389 px v boxu
   sirokem 327, takze se ADRESA OREZALA. Stranka se do strany nerolovala, takze
   se to nepoznalo jinak nez merenim; z telefonu proste nebylo videt, komu ten
   ucet patri. Ostatni nadpisy administrace jsou kratka slova, ale pravidlo je
   tu bez media dotazu: dost dlouha adresa preteka i na siroke obrazovce. */
.sprava-hlava h1 { overflow-wrap: anywhere; }

/* Druhy radek v bunce: pod e-mailem drobne id subjektu. Id zustava videt,
   protoze podle nej se hleda v logu a v databazi, ale uz neni to jedine,
   co v te bunce stoji. */
.sprava-podradek {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .sprava-nav { gap: 12px; font-size: 14.5px; }

  /* Hlavicka administrace na telefonu. Zmereno 3. 9. 2026 na 375 px: `.nav-inner`
     je `flex-wrap: nowrap` a `align-items: center`, sedm odkazu se tedy zalomilo
     do tri radku vysokych 121 px a logo (25 px) se vycentrovalo doprostred, tedy
     na y=62, kdezto menu zacinalo na y=14. Hlavicka merila 150 px, tretinu
     vysky telefonu, a logo v ni plavalo.

     Prepisuje se DVEMA tridami (`.nav-inner.sprava-nav-inner`), takze je to
     specifictejsi nez `.nav-inner` a nezalezi na poradi v souboru. Marketingovy
     web druhou tridu nema, takze se ho tohle nedotkne ani omylem. */
  .nav-inner.sprava-nav-inner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Odkazy dostanou vlastni radek pod logem. Bez `margin-left: 0` by je tam
     drzelo `margin-left: auto` z `.sprava-nav` odsazene doprava. */
  .sprava-nav-inner .sprava-nav {
    width: 100%;
    margin-left: 0;
    row-gap: 8px;
  }
  /* `.nav .btn-sm { display: none }` vyse je pravidlo marketingoveho webu, ktere
     pod 560 px schovava male tlacitko v hlavicce. Tlacitko Odhlasit ma tytez
     tridy, takze se schovavalo taky a z TELEFONU SE NESLO ODHLASIT. Poznalo se
     to merenim rozmeru, ne pohledem: tlacitko melo nulovou sirku. */
  .sprava-odhlasit .btn-sm { display: inline-flex; }
  /* Adresa v tlacitku se na uzkou obrazovku nevejde a tlacitko prelilo hlavicku
     ven z obrazovky. Kdo je prihlaseny, stejne vi; slovo Odhlasit staci. */
  .sprava-kdo { display: none; }
  /* Filtr se na telefonu sklada pod sebe, jinak by pole vytlacilo tlacitko ven. */
  .sprava-hledani { flex-direction: column; align-items: stretch; }
  .sprava-pole { width: 100%; }
  .sprava-hledani input,
  .sprava-hledani select { width: 100%; min-width: 0; }
  /* Formular "Vyrazit licenci" (Task 13) sklada sve `.sprava-pole` sloupce pod
     sebe uz diky pravidlu vyse (bere je tez, je bez selektoru). `select` by se
     roztahl sam (`.sprava-pole` ma vychozi `align-items: stretch` a `select`
     nema pevnou sirku), ale `input[number]` a `input[text]` maji pevnou
     sirku 6rem/16rem a bez tohohle prepisu by v ted uz siroke bunce zustaly
     uzke, s prazdnym mistem vedle sebe. Zmereno v prohlizeci na 390 px: bez
     tohohle radku input Dnu meril 96 px v bunce sirokou 342 px. */
  .sprava-razeni select,
  .sprava-razeni input[type="number"],
  .sprava-razeni input[type="text"] { width: 100%; }
}

/* Tabulky administrace se na telefonu prevlekaji do karticek.
   ------------------------------------------------------------
   Do 3. 9. 2026 se tabulka drzela tabulkou a rolovala se do strany uvnitr
   `.sprava-tabulka-obal`. Stranka se tim nerozbila, ale na 375 px byl videt
   e-mail a pul dalsiho sloupce, takze se z telefonu nedalo precist, co k tomu
   radku patri, bez rolovani u kazdeho radku zvlast.

   Kazda bunka se meni v radek "popisek: hodnota". Popisek se bere z atributu
   `data-popisek`, protoze CSS na `<th>` odpovidajiciho sloupce nedosahne.
   Ze ho nese KAZDA bunka, hlida `test/sprava/tabulky-na-mobilu.test.ts`; bez
   nej by se udaj vykreslil bez popisku a nikdo by nevedel, co znamena.

   TENHLE BLOK MUSI ZUSTAT ZA pravidlem `.sprava-tabulka td { white-space:
   nowrap }` vyse. Specificita je stejna, takze rozhoduje poradi v souboru, a
   media dotaz na tom nic nemeni. Presunuti nahoru by ticho zrusilo zalamovani.

   Sedm set pixelu, ne sest set ctyricet: siroke tabulky (Zarizeni ma sest
   sloupcu, Licence sedm) se mackaji driv, nez zacne mobilni zlom hlavicky. */
@media (max-width: 700px) {
  .sprava-tabulka-obal { overflow-x: visible; }

  .sprava-tabulka,
  .sprava-tabulka tbody,
  .sprava-tabulka tr,
  .sprava-tabulka td {
    display: block;
    width: auto;
  }

  .sprava-tabulka thead { display: none; }

  .sprava-tabulka tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  .sprava-tabulka td {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: 10px;
    padding: 5px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sprava-tabulka td::before {
    content: attr(data-popisek);
    color: var(--muted);
    font-weight: 600;
  }

  /* Bunka bez popisku, treba sloupec "tenhle prohlizec" u relaci. Prazdny
     popisek by nechal poloviny radku prazdnou a vypadalo by to jako chybejici
     udaj, ne jako bunka, ktera zadny popisek nema. */
  .sprava-tabulka td[data-popisek=""] {
    display: block;
  }

  .sprava-tabulka td[data-popisek=""]::before { content: none; }

  /* Prazdna bunka bez obsahu i bez popisku by zbyla jako prouzek mezery. */
  .sprava-tabulka td[data-popisek=""]:empty { display: none; }
}

/* ============================================================
   Cookie lišta

   Barvy si bere z tokenů webu, takže se sama převléká do tmavého
   režimu a nemá vlastní paletu, která by se s webem rozešla.
   Tlačítka jsou schválně vlastní třídy, ne `.btn`: ta má oblé
   pilulky s výrazným stínem a v liště by přebíjely obsah stránky.
   ============================================================ */

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  transform: translateY(110%);
  /* `visibility` tu není navíc k `transform`. Posunutá lišta je sice za spodní
     hranou okna, ale pořád je vykreslená, takže na její čtyři tlačítka dosáhne
     tabulátor a přečte je odečítač obrazovky. Kdo web ovládá klávesnicí, projde
     po odbavení souhlasu čtyřmi neviditelnými tlačítky. Změřeno v prohlížeči:
     `focus()` na prvním z nich uspěl a `getBoundingClientRect().top` byl 936
     při okně vysokém 900.

     Přechod na `visibility` je tu kvůli tomu, aby vyjíždění zůstalo vidět:
     u téhle vlastnosti platí, že při cestě k `hidden` zůstane `visible` po
     celou dobu přechodu a přepne se až na jeho konci, kdežto opačným směrem
     se projeví hned. */
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
  padding-bottom: env(safe-area-inset-bottom);
}

.cookie-bar.show { transform: translateY(0); visibility: visible; }

/* Široký pruh přes skoro celou šířku, aby se text a tlačítka vešly
   na jeden řádek a lišta zůstala nízká. */
.cookie-inner {
  max-width: min(1560px, calc(100vw - 2 * clamp(16px, 3vw, 40px)));
  margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 36px);
  flex-wrap: wrap;
}

.cookie-text {
  flex: 1 1 340px;
  min-width: 0;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.cookie-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cookie-text a:hover { color: var(--accent-strong); }

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cookie-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.cookie-ghost:hover { border-color: var(--accent); color: var(--accent); }

.cookie-primary {
  background: var(--btn-bg);
  color: var(--on-accent);
  border: 1px solid transparent;
}

.cookie-primary:hover { background: var(--btn-bg-hover); }

.cookie-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Rozbalený detail s kategoriemi */
.cookie-details {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px clamp(20px, 3vw, 48px);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cookie-details[hidden] { display: none; }

.cookie-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.cookie-cat-name { font-size: 15px; font-weight: 700; color: var(--text); }
.cookie-cat-state { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cookie-cat-desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.cookie-details-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* Přepínač */
.cookie-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 auto; }
.cookie-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.cookie-slider {
  position: absolute;
  inset: 0;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cookie-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.cookie-switch input:checked + .cookie-slider { background: var(--accent); border-color: var(--accent); }
.cookie-switch input:checked + .cookie-slider::before { transform: translate(20px, -50%); border-color: transparent; }
.cookie-switch input:focus-visible + .cookie-slider { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Znovuotevření voleb. Sedí v patičce mezi ostatními odkazy, takže musí
   vypadat stejně jako ony, jenom je to tlačítko. */
.cookie-reopen {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s ease;
}

.cookie-reopen:hover { color: var(--accent); }

@media (max-width: 767px) {
  .cookie-inner { padding: 14px 18px; gap: 12px; }
  .cookie-text { font-size: 14px; }
  .cookie-actions { width: 100%; }
  .cookie-actions .cookie-btn { flex: 1 1 auto; }
  .cookie-details { grid-template-columns: 1fr; }
}

/* Schranka na karetni pole platebni brany.
   JEDINA NOVA TRIDA SBERU KARTY. Hlaska o stavu i zaverecna poznamka pouzivaji
   `.form-error` a `.form-note`, ktere obchod uz ma vcetne tmaveho motivu.
   Tahle schranka svuj protejsek nema: PayU do ni vlozi tri vlastni iframy, a
   dokud se jejich SDK nenacte, je to prazdny prvek s nulovou vyskou. Bez
   `min-height` by stranka po nacteni poskocila, a bez ramecku by zakaznik
   nepoznal, kam ma psat. */
.shop .karta-pole {
  min-height: 64px;
  padding: 12px 14px;
  margin: 18px 0 6px;
  max-width: 26rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ---------- Kalkulačka úspory času ---------- */
.kalk-uvod { text-align: center; max-width: 680px; margin: 72px auto 32px; }
.kalk-uvod h3 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.kalk-uvod p { color: var(--muted); font-size: 17px; margin-top: 12px; }

.kalk { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; }
.kalk-vstup { padding: 38px 36px; }
.kalk-vystup {
  padding: 38px 36px;
  background: linear-gradient(165deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 55%, var(--surface)));
  border-left: 1px solid var(--border);
}
.kalk-label { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.kalk-slova { margin-top: 10px; font-size: 40px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kalk-slova span { font-size: 18px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 6px; }

input[type="range"].kalk-tahlo {
  -webkit-appearance: none; appearance: none; width: 100%; margin: 26px 0 10px;
  height: 8px; border-radius: 999px; background: var(--border); cursor: pointer;
}
input[type="range"].kalk-tahlo::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #9d6bff, var(--accent-strong)); border: 3px solid var(--surface);
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.5); cursor: grab;
}
input[type="range"].kalk-tahlo::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--surface);
  background: linear-gradient(180deg, #9d6bff, var(--accent-strong));
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.5); cursor: grab;
}

/* Tahlo pulzuje, dokud s ním návštěvník nepohne. Prsten je druhý stín, takže
   nepřekrývá ten původní a nezvětšuje plochu, na kterou se dá kliknout.
   Třídu "pouzito" nasazuje main.js při prvním doteku. */
@keyframes kalkPuls {
  0% { box-shadow: 0 4px 14px rgba(109, 40, 217, 0.5), 0 0 0 0 rgba(124, 58, 237, 0.45); }
  70% { box-shadow: 0 4px 14px rgba(109, 40, 217, 0.5), 0 0 0 12px rgba(124, 58, 237, 0); }
  100% { box-shadow: 0 4px 14px rgba(109, 40, 217, 0.5), 0 0 0 0 rgba(124, 58, 237, 0); }
}
input[type="range"].kalk-tahlo::-webkit-slider-thumb { animation: kalkPuls 2.4s ease-out infinite; }
input[type="range"].kalk-tahlo::-moz-range-thumb { animation: kalkPuls 2.4s ease-out infinite; }
input[type="range"].kalk-tahlo.pouzito::-webkit-slider-thumb { animation: none; }
input[type="range"].kalk-tahlo.pouzito::-moz-range-thumb { animation: none; }
.kalk-meze { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
/* Nápověda s rychlou volbou. Na širokém okně je rozbalená a shrnutí schované,
   takže vypadá jako obyčejný blok; sbalit ji umí až `main.js` na telefonu. */
.kalk-napoveda > summary { display: none; }

.kalk-napoveda > summary::-webkit-details-marker { display: none; }

.kalk-otaznik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 13px;
  font-weight: 800;
  flex: 0 0 auto;
}

.kalk-priklady { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.kalk-priklad {
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); transition: all 160ms ease;
}
.kalk-priklad:hover { border-color: var(--accent); color: var(--accent); }
.kalk-priklad[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--on-accent); }

.kalk-hlavni { font-size: clamp(40px, 6vw, 60px); font-weight: 800; letter-spacing: -0.045em; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.05; }
.kalk-hlavni-popis { margin-top: 6px; font-size: 17px; color: var(--muted); }
.kalk-radky { margin-top: 26px; display: grid; gap: 12px; }
.kalk-radek { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.kalk-radek:last-child { border-bottom: 0; padding-bottom: 0; }
.kalk-radek dt { font-size: 15px; color: var(--muted); }
.kalk-radek dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kalk-predpoklady { margin-top: 28px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.kalk-predpoklady b { font-weight: 600; }
.kalk-zdroj { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 900px) {
  .kalk { grid-template-columns: 1fr; }
  .kalk-vystup { border-left: 0; border-top: 1px solid var(--border); }
}
/* ---------- Kalkulačka na telefonu ----------
   Zadání je jedno: když návštěvník sáhne na táhlo, musí na téže obrazovce
   vidět celý výsledek. Naměřeno před úpravou na 390 × 844 px: vstup 460 px
   a výstup 511 px, tedy 971 px na 773 px viditelné plochy pod lištou, takže
   táhlo a výsledek se nikdy nepotkaly.

   Ubírá se na odsazení a na velikostech, ne na obsahu; jediné, co se schová,
   je nápověda s rychlou volbou, a ta je klepnutí daleko za otazníkem. */
@media (max-width: 900px) {
  .kalk-napoveda > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
  }

  .kalk-napoveda > summary:hover { color: var(--accent); }

  .kalk-napoveda[open] > summary { margin-bottom: 2px; }

  /* Uvnitř rozbalené nápovědy už netřeba odsazovat od táhla podruhé. */
  .kalk-napoveda .kalk-priklady { margin-top: 14px; }
  .kalk-napoveda .kalk-predpoklady { margin-top: 14px; }

  .kalk-uvod { margin: 56px auto 24px; }
  .kalk-slova { margin-top: 6px; font-size: 34px; }
  input[type="range"].kalk-tahlo { margin: 20px 0 8px; }

  /* „104 hodin ročně" se na 40 px lámalo na dva řádky (chtělo 300 px z 287).
     Nejvyšší hodnota posuvníku je 417 hodin, tedy taky tři číslice. */
  .kalk-hlavni { font-size: clamp(30px, 9vw, 44px); }

  .kalk-hlavni-popis { margin-top: 4px; font-size: 16px; }
  .kalk-radky { margin-top: 18px; gap: 9px; }
  .kalk-radek { gap: 10px; padding-bottom: 9px; }

  /* Popisek i hodnota se musí vejít na jeden řádek. Naměřeno na 390 px:
     „Psaní na klávesnici" plus „38 min denně" chtělo 276 px z 279, takže
     to na užším telefonu spadlo na dva řádky a řádek povyrostl o 25 px. */
  .kalk-radek dt { font-size: 14px; }
  .kalk-radek dd { font-size: 17px; white-space: nowrap; }
}

@media (max-width: 640px) {
  .kalk-vstup, .kalk-vystup { padding: 24px 20px; }
}

/* Nejužší telefony. Na 320 px zbývá uvnitř kartičky tak málo, že se
   „Psaní na klávesnici" i velké číslo lámaly na dva řádky. */
@media (max-width: 380px) {
  .kalk-vstup, .kalk-vystup { padding: 22px 15px; }

  .kalk-hlavni { font-size: 27px; }

  .kalk-radek { gap: 8px; }

  .kalk-radek dt { font-size: 12.5px; }

  .kalk-radek dd { font-size: 15.5px; }
}


/* Zlom tabulky je 700 px, ne 640. Obal tabulky klesne pod jeji `min-width` uz
   kolem 690 px sirky okna, takze se mezi 641 a 690 px rolovala do strany.
   Zmereno v prohlizeci: pri okne 660 px mel obal 595 px a tabulka 620 px. */
@media (max-width: 700px) {
  table.srovnani { min-width: 0; }

  table.srovnani th, table.srovnani td { padding: 12px 10px; font-size: 15.5px; }

  table.srovnani tbody th small { display: none; }

  table.srovnani thead th:not(:first-child),
  table.srovnani td:not(:first-child) { width: 78px; }

  table.srovnani thead th { font-size: 11.5px; letter-spacing: 0.04em; }
}

/* Na uzkych telefonech nevychazela ani pevna sirka 78 px (tabulka chtela 298 px
   a obal mel na 320 px jen 255), ani `auto`, ktere sloupce rozdelilo na tretiny
   a hodnotovym dalo 95 px, ackoli v nich je ikona o 22 px. Sirka 70 px je
   spoctena z nejdelsiho neprelomitelneho slova, ktere v tech sloupcich stoji:
   "pripravE" ma pri 13 px asi 52 px a na obsah zbyva 54 px. Prvni sloupec tim
   dostane 115 px, coz staci na "statistiky". Dohromady presne 255 px. */
@media (max-width: 420px) {
  table.srovnani th, table.srovnani td { padding: 11px 6px; }

  table.srovnani thead th:not(:first-child),
  table.srovnani td:not(:first-child) { width: 70px; font-size: 13px; }
}

/* ---------- Vitrína: funkce a snímky aplikace v jedné sekci ----------
   Vlevo šest štítků, vpravo velký snímek. Seznam se roztahuje na výšku
   scény, aby pod posledním štítkem nezbylo prázdno, a scéna má pevnou
   minimální výšku, jinak by sloupec při přepínání poskakoval podle toho,
   jak dlouhý text má který slajd.

   Výšku drží textový blok, ne scéna. Obrázky mají všechny stejný poměr
   stran, takže se panely liší jen délkou textu a poznámkou pod ním.
   Rezervací 170 px na text jsou si všechny slajdy rovné na každé šířce.
   Pevná výška scény tu byla dřív a na 961 px nechávala 133 px prázdna. */
.vitrina { display: grid; grid-template-columns: 316px 1fr; gap: 34px; align-items: stretch; }

.vit-list { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }

.vit-tab {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  width: 100%;
  flex: 1 1 0;
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 15px 18px;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  box-shadow: var(--shadow-card);
}

/* Ukazatel průběhu automatického střídání, stejný jako u kapslí v sekci
   Kam všude můžete diktovat. Doba musí sedět s intervalem v `main.js`;
   třídu `auto` tam přidává až pozorovatel, aby ukazatel nezačal běžet
   dřív, než se sekce ukáže. */
.vit-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: rgba(255, 255, 255, 0.65);
}

.vitrina.auto .vit-tab.active::after { animation: vitProgres 5.5s linear; }

@keyframes vitProgres {
  from { width: 0; }
  to   { width: 100%; }
}

.vit-cislo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  flex: 0 0 auto;
  transition: background 0.22s ease, color 0.22s ease;
}

.vit-popis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vit-popis strong { font-weight: 800; font-size: 19.5px; letter-spacing: -0.01em; color: var(--text); transition: color 0.22s ease; }
.vit-popis small { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--muted); transition: color 0.22s ease; }

.vit-tab:hover { border-color: var(--accent-lighter); transform: translateX(3px); }
.vit-tab:hover .vit-popis strong { color: var(--accent); }

.vit-tab.active { background: var(--btn-bg); border-color: var(--btn-bg); box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3); }
.vit-tab.active .vit-popis strong { color: var(--on-accent); }
.vit-tab.active .vit-popis small { color: rgba(255, 255, 255, 0.82); }
.vit-tab.active .vit-cislo { background: rgba(255, 255, 255, 0.22); color: var(--on-accent); }

.vit-panel[hidden] { display: none; }
.vit-text { margin-bottom: 18px; min-height: 170px; }
.vit-text h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.vit-text p { color: var(--muted); font-size: 16.5px; max-width: 64ch; }
.vit-pozn { margin-top: 10px; font-size: 14px; color: var(--muted); opacity: 0.85; }

@media (max-width: 900px) {
  .vitrina { grid-template-columns: 1fr; gap: 22px; align-items: start; }

  /* Na úzké obrazovce je ze sloupce vodorovná lišta, která si roluje sama.
     Bez min-height 0 by scéna držela 700 px i tam, kde je snímek nižší. */
  .vit-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }

  .vit-tab { width: auto; flex: 0 0 auto; }

  .vit-tab:hover { transform: none; }

  .vit-text { min-height: 0; }
}

/* ---------- Zlomy pro výzvy k akci a patičku ----------
   Stojí na konci schválně: kdyby byly u svých pravidel výš, přebila by je
   pozdější pravidla se stejnou specifičností. U návrhu patičky se to jednou
   stalo a stránka se na 390 px rolovala do strany na 734 px. */

/* Zvětšení panelu potřebuje po stranách místo. Obal ho pod 1200 px okna nemá,
   takže se tam zvětšování vypne a zůstane jen nadzvednutí a stín. Změřeno:
   při okně 1200 px zbývá panelu 48 px vlevo a 63 px vpravo. */
@media (max-width: 1199px) {
  .cta-panel:hover { transform: translateY(-4px); }

  /* Pod touhle sirkou uz maska necha z vln videt jen par pixelu vedle obsahu,
     protoze obal vyplni skoro cele okno. Sazet dvacet ctyri pruhu o pevnych
     7 px, ktere se pak stejne oriznou, nema smysl: pri 390 px chtela rada
     352 px do 314 px sirokeho panelu. */
  .cp-vlna, .cp2-vlna { display: none; }
}

@media (max-width: 900px) {
  .pat .pat-mrizka { grid-template-columns: 1fr 1fr; gap: 30px; }
  .pat .pat-znacka { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .cp-vnitrek {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .cp-akce { align-items: flex-start; }

  /* Bez tohohle zustane rada tlacitek zarovnana doprava i po zalomeni pod
     text, protoze zlom sahal jen na .cp-akce. Zmereno na 390 px. */
  .cp-tlacitka { justify-content: flex-start; }

  .cp-text h2 { font-size: 28px; }
}

@media (max-width: 640px) {
  .cta-panel { padding: 60px 22px; border-radius: 24px; }
  .cta-panel h2 { font-size: 32px; }
  .section-final { padding: 72px 0 96px; }
}

@media (max-width: 520px) {
  .pat .pat-mrizka { grid-template-columns: 1fr; }
  .pat .pat-logo .logo { font-size: 28px; }
  .pat .pat-claim { font-size: 22px; }
}