/* Marketingové stránky — vlastné CSS, nie Tailwind.
 *
 * Prečo nie Tailwind ako v aplikácii: marketingové stránky sú statické HTML
 * generované mimo Vite pipeline. Zdieľať s nimi Tailwind by znamenalo viazať
 * build obsahu na build aplikácie a riešiť hashované názvy CSS súborov.
 * Ručne písaný stylesheet má navyše pár kilobajtov, čo je pri stránke, ktorú
 * návštevník vidí ako prvú, dôležitejšie než pohodlie pri písaní.
 */

/* Paleta je zámerne v OKLCH a s rovnakými menami ako appkine dizajnové tokeny
 * (frontend/src/style.css) — je to TÁ ISTÁ paleta, len opísaná raz na dvoch
 * miestach, lebo web beží mimo Vite pipeline appky (viď hlavička súboru).
 * Kto mení odtieň tu, má zmeniť aj tam, a naopak — inak návštevník prejde
 * jedným klikom z modrej webu do inej modrej appky.
 *
 * Neutrály majú mierny modrý nádych (hue 250–255), nie čistú šeď — to isté
 * zdôvodnenie ako v appke: čistá šeď vedľa modrého akcentu pôsobí špinavo. */
:root {
  --ink: oklch(0.22 0.02 255);
  --ink-soft: oklch(0.47 0.02 255);
  /* Pôvodne #94a3b8 — na bielej to je kontrast asi 2,6:1, čiže pod hranicou
   * WCAG AA (4,5:1). Používa sa na drobnotext (omrvinky, dátumy, disclaimer),
   * ktorý sa má dať prečítať aj na mobile v aute. 0,55 je tá istá hodnota,
   * ktorú appka používa z rovnakého dôvodu (viď --color-ink-3 v style.css). */
  --ink-faint: oklch(0.55 0.02 255);
  --line: oklch(0.915 0.007 250);
  --line-strong: oklch(0.82 0.012 255);
  --bg: oklch(1 0 0);
  --bg-soft: oklch(0.975 0.004 250);
  --brand: oklch(0.55 0.16 250);
  --brand-dark: oklch(0.47 0.16 250);
  /* Pre odkazy v behúcom texte (viď `a { color }` nižšie) — tá istá značková
   * modrá, ale tmavšia a menej sýta, takže v odstavci nekričí tak ako na
   * tlačidle, kde má kričať. */
  --brand-ink: oklch(0.42 0.15 250);
  --brand-soft: oklch(0.96 0.025 250);
  --brand-line: oklch(0.88 0.06 250);
  /* --ok, --warn, --crit sú presne appkine --color-ok/--color-warn/--color-crit
   * (frontend/src/style.css) — nie nová voľba, len prevzatá hodnota, ktorá je
   * tam už overená proti WCAG AA na bielom podklade. */
  --ok: oklch(0.52 0.12 162);
  --warn: oklch(0.52 0.11 75);
  --warn-soft: oklch(0.96 0.04 85);
  --warn-line: oklch(0.88 0.07 85);
  --crit: oklch(0.53 0.19 18);
  --crit-soft: oklch(0.96 0.02 18);
  --crit-line: oklch(0.87 0.06 18);

  /* Škála polomerov: ostrejšie na malých vnútorných prvkoch (odznaky, čísla
   * krokov), mäkšie na kontajneroch (karty, snímky). Jednotný 14 px na
   * všetkom predtým nerozlišoval veľkosť prvku od veľkosti plochy. */
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius: var(--radius-lg);

  /* Tiene tónované do --ink cez color-mix namiesto pevnej rgba(15,23,42,…) —
   * farba sa tak nedá rozísť s farbou textu a svetlo pôsobí, akoby prichádzalo
   * z jedného zdroja nad celou stránkou. */
  --shadow-sm: 0 8px 20px -10px color-mix(in oklch, var(--ink) 35%, transparent);
  --shadow-md: 0 18px 40px -20px color-mix(in oklch, var(--ink) 35%, transparent),
    0 2px 8px color-mix(in oklch, var(--ink) 8%, transparent);
  --shadow-lg: 0 20px 45px -22px color-mix(in oklch, var(--ink) 50%, transparent);
  --shadow-brand: 0 14px 34px -22px color-mix(in oklch, var(--brand) 55%, transparent);

  --wrap: 1120px;
  /* Geist Variable, self-hosted (viď scripts/build-site.mjs — @font-face
   * nižšie dostáva adresu s odtlačkom obsahu pri builde). Systémový fallback
   * zostáva pre prvý zlomok sekundy pred načítaním a pre prehliadače bez
   * podpory variabilných fontov. */
  --font: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/geist-latin-ext-wght-normal.824f485b5d.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/geist-latin-wght-normal.19f9c92546.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Tmavšia, menej sýta modrá než tlačidlá (--brand) — odkaz v behúcom texte
 * nemá kričať rovnako hlasno ako výzva na akciu. */
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Viditeľné zameranie klávesnicou. Prehliadačový predvolený prstenec je na
 * modrom tlačidle prakticky neviditeľný — kto stránku ovláda tabulátorom,
 * by nevedel, kde stojí. */
a:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Klikateľná karta sa má správať ako tlačidlo, nie ako odkaz v texte. */
a.card { transition: border-color .15s, box-shadow .15s; }
a.card:hover {
  text-decoration: none; border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

/* Nevyplnený údaj prevádzkovateľa — viď site/company.mjs. Na hotovej stránke
 * sa nesmie objaviť; keď sa objaví, má byť vidieť na prvý pohľad. */
mark { background: #fef08a; padding: 0 4px; border-radius: 4px; }

/* `text-wrap: balance` bráni osirotenému slovu na poslednom riadku nadpisu —
 * prehliadače bez podpory ho jednoducho ignorujú, žiadny fallback netreba. */
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.5em; font-weight: 650; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* 680 px pri 17 px písme ≈ 65 znakov na riadok — odporúčaná šírka na
 * čítanie. Predtým 720 px vychádzalo na ~80 znakov. */
.narrow { max-width: 680px; }
.lead { font-size: 1.2rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }
.center { text-align: center; }

/* Kto stránku ovláda klávesnicou, by inak musel pred KAŽDÝM obsahom prejsť
 * sedem odkazov v hlavičke. Mimo zamerania je odkaz posunutý mimo obrazovku,
 * nie priehľadný — priehľadný by čítačka aj tak ohlásila ako klikací prvok. */
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-md); transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ── Hlavička ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.02em;
}
.logo:hover { text-decoration: none; }
.logo svg { flex: none; }
.site-nav { display: flex; gap: 20px; margin-left: auto; align-items: center; }
/* `:not(.btn)` je tu nutnosť, nie kozmetika: `.site-nav a` má vyššiu
 * špecificitu než `.btn-primary`, takže bez tejto výnimky prebilo tlačidlu
 * v hlavičke bielu farbu písma na sivú — sivý text na modrom pozadí má
 * kontrast 1,13:1, čiže tlačidlo bolo prakticky prázdne. */
.site-nav a:not(.btn) { color: var(--ink-soft); font-size: 0.95rem; }
.site-nav a:not(.btn):hover { color: var(--ink); text-decoration: none; }

/* ── Tlačidlá ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; padding: 13px 24px; border-radius: var(--radius-md);
  font-weight: 600; font-size: 1rem; border: 1px solid transparent;
  cursor: pointer; transition: background-color .15s, border-color .15s, transform .05s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--ink-faint); }
.btn-sm { padding: 9px 16px; font-size: 0.93rem; }

/* ── Sekcie ─────────────────────────────────────────────────────────────── */

/* Spodok o čosi väčší než vrch — rovnaký odstup meraný matematicky vyzerá
 * opticky menší dolu, lebo nadpis nasledujúcej sekcie „ťahá" pohľad nahor. */
section { padding: 80px 0 96px; }
section.tight { padding: 56px 0 64px; }
.section-soft { background: var(--bg-soft); border-block: 1px solid var(--line); }

/* Radiálny nádych + veľmi jemný šum namiesto plochej bielej — druhý vrství sa
 * nad prvým, aby plocha nepôsobila ako jeden dokonale rovný gradient. Alfa
 * šumu je 0,025: má sa dať vycítiť, nie vidieť. */
.hero {
  padding: 88px 0 72px;
  background-image:
    radial-gradient(60% 55% at 85% 0%, color-mix(in oklch, var(--brand) 7%, transparent), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
}
.hero h1 { max-width: 16ch; }
.hero .lead { max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-note { margin-top: 16px; color: var(--ink-faint); font-size: 0.92rem; }

/* Nie odznak — plný modrý pill s pozadím a orámovaním je presne ten vzor,
 * ktorý sa opakuje na každej druhej AI-generovanej stránke. Krátka farebná
 * značka pred textom robí tú istú prácu (upúta pozornosť pred nadpisom),
 * bez toho, aby vyzerala ako tlačidlo, na ktoré sa dá kliknúť. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--brand); margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 16px; height: 3px; border-radius: 2px;
  background: var(--brand); flex: none;
}

/* ── Mriežky a karty ────────────────────────────────────────────────────── */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff; font-weight: 650; font-size: 0.95rem; margin-bottom: 16px;
}

/* ── Riadok s ikonou ────────────────────────────────────────────────────── */

/* Nahrádza kartu tam, kde stačí odsadenie — trojica rovnakých kariet vedľa
 * seba (border + tieň + biele pozadie) je najopakovanejší útvar na tejto
 * stránke. Karta nesie hierarchiu len tam, kde sa porovnáva (tarify), tu
 * len opakuje ten istý rám dvanásťkrát. */
.icon-rows { display: grid; gap: 22px; }
.icon-rows-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 36px; }
.icon-row { display: flex; gap: 14px; align-items: flex-start; }
.icon-row h3 { margin-bottom: 4px; font-size: 1.05rem; }
.icon-row p { margin-bottom: 0; }

.icon-badge-sm {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); flex: none; margin-bottom: 0;
  background: var(--brand-soft); color: var(--brand);
}
.icon-badge-sm.warn { background: var(--crit-soft); color: var(--crit); }
.icon-badge-sm .icon { width: 18px; height: 18px; }

/* Zig-zag: text a snímka sa striedajú po stranách namiesto radu kariet.
 * Poradie strán rozhoduje poradie v HTML (viď content.mjs), nie CSS —
 * na CSS grid stačí dať obrázok v párnom riadku ako prvé dieťa. */
.feature-rows { display: grid; gap: 64px; margin-top: 48px; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--ok); font-weight: 700;
}
.crosslist li::before { content: "✕"; color: var(--crit); }

/* ── Ikony ──────────────────────────────────────────────────────────────── */

.icon { width: 24px; height: 24px; flex: none; }
.icon-sm { width: 20px; height: 20px; }
.icon-xs { width: 14px; height: 14px; }

.icon-badge {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--brand); margin-bottom: 16px;
}
.icon-badge.warn { background: var(--crit-soft); color: var(--crit); }

/* ── Hero rozloženie ────────────────────────────────────────────────────── */

.hero-grid {
  display: grid; gap: 48px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
}

/* Farebná doska za snímkou v hero — bez nej sedeli text a obrázok len vedľa
 * seba na jednej rovine. Doska nesie ten istý odtieň ako `.eyebrow`, takže
 * pôsobí ako súčasť tej istej sady, nie ako náhodná ozdoba, a je za snímkou
 * (`z-index: -1`), takže sa s ňou nedá omylom interagovať. */
.hero-visual { position: relative; }
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--brand-soft);
  border-radius: var(--radius-lg);
  z-index: -1;
}
@media (max-width: 640px) {
  .hero-visual::before { inset: 12px -8px -8px 12px; }
}

.trustbar {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px;
  color: var(--ink-soft); font-size: 0.93rem;
}
.trustbar span { display: inline-flex; align-items: center; gap: 7px; }
.trustbar .icon { color: var(--ok); }

/* ── Snímky aplikácie ───────────────────────────────────────────────────── */

.shot {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.shot-bar {
  display: flex; gap: 6px; padding: 11px 14px; background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.shot-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.shot img { display: block; width: 100%; height: auto; }

.phone-shot { border-radius: 22px; }

.gallery { display: grid; gap: 28px; }
.gallery figcaption,
.shot-caption { margin-top: 12px; color: var(--ink-soft); font-size: 0.93rem; }

/* ── Telefón ────────────────────────────────────────────────────────────── */

.phone {
  width: 232px; border-radius: 30px; padding: 10px; background: var(--ink);
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
}
.phone img { display: block; width: 100%; height: auto; }

/* ── Posuvný pás telefónov ──────────────────────────────────────────────── */

/* Štyri telefóny vedľa seba sú na mobile štyri obrázky pod sebou a k poslednému
   sa nikto nedoscrolluje. Pás sa ťahá prstom — ako galéria v obchode
   s aplikáciami. Posúvanie robí prehliadač, takže funguje aj bez JavaScriptu;
   šípky doplní skript len pre myš (viď visuals.mjs). */

.slider { margin: 28px 0 0; }

/* Rám je v samostatnom obale, aby sa šípky dali zvisle vycentrovať na NEHO.
   Pod ním je ešte popis a bodky — voči celému bloku by šípky sedeli nižšie,
   než kde je displej. */
.slider-stage { position: relative; width: fit-content; margin-inline: auto; }
.slider-desktop .slider-stage { width: 100%; }

/* Displej. Vlastnosť overflow je TU, nie na celom bloku — posúva sa obsah,
   rám stojí.
   Keby sa posúval rám, bol by z toho zase rad zariadení. */
.slider-screen {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Posuvník je na displeji rušivý — posúva sa prstom, šípkami alebo bodkami. */
  scrollbar-width: none;
}
.slider-screen::-webkit-scrollbar { display: none; }
.slider-screen:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.phone .slider-screen { border-radius: 22px; }

/* Základ 100 % — jedna obrazovka zaberie presne šírku displeja, takže
   snap vždy dosadne na celú a nikdy nezostane visieť medzi dvoma. */
.slider-shot {
  flex: 0 0 100%; width: 100%; height: auto;
  display: block; scroll-snap-align: center;
}
.phone .slider-shot { border-radius: 22px; }

.slider-caption {
  margin-top: 16px; text-align: center; color: var(--ink-soft); font-size: 0.93rem;
}

/* Bodky ukazujú, koľko obrazoviek ešte je — bez nich sa nedá odhadnúť, či sa
   oplatí ťahať ďalej. Skript ich odkryje; bez neho by to boli mŕtve tlačidlá. */
.slider-dots { display: flex; justify-content: center; gap: 0; margin-top: 6px; }

/* Bodka je opticky 8 px, ale dotykový cieľ má 32×40 — do osempixelového
   puntíka sa nikto palcom netrafí (WCAG 2.5.8 žiada aspoň 24×24). Robí to
   výplň spolu s orezaním pozadia na obsahový rámec: plocha na klikanie
   narastie, ale farba sa vykreslí len dovnútra. */
.slider-dot {
  box-sizing: content-box;
  width: 8px; height: 8px; padding: 16px 12px; border-radius: 999px;
  border: 0; background: var(--line); background-clip: content-box;
  cursor: pointer;
  transition: background-color 0.15s;
}
/* Aktívna sa líši LEN farbou. Zväčšenie cez transform zväčší aj klikaciu
   plochu, takže aktívna bodka prekrývala susednú a klik pri okraji trafil
   nesprávnu obrazovku. */
.slider-dot[aria-current="true"] { background: var(--brand); }
.slider-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Šípky len tam, kde je myš. Na dotykovom displeji by zaberali miesto
   a prekrývali obrázok, hoci sa displej dá potiahnuť prstom. */
.slider-nav { display: none; }

@media (hover: hover) and (min-width: 760px) {
  .slider-nav {
    display: grid; place-items: center;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border-radius: 999px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }
  .slider-nav:hover { border-color: var(--brand); color: var(--brand); }
  .slider-nav[disabled] { opacity: 0.35; cursor: default; }
  .slider-nav svg { width: 20px; height: 20px; }
  .slider-nav-prev { left: -22px; }
  .slider-nav-next { right: -22px; }
}

/* ── Kroky ──────────────────────────────────────────────────────────────── */

.steps { counter-reset: step; }
.step-num {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-weight: 650; font-size: 0.9rem; margin-bottom: 14px;
}

/* ── Cenník ─────────────────────────────────────────────────────────────── */

.price { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.price small { font-size: 1rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }

/* Tarify sa porovnávajú, takže musia byť rovnako vysoké a tlačidlo má byť
 * v jednej línii — inak oko porovnáva rozloženie namiesto obsahu. */
.plans { align-items: stretch; }
.plan { display: flex; flex-direction: column; position: relative; }
.plan .price { font-size: 2.4rem; margin: 8px 0 4px; }
.plan .checklist { margin-top: 18px; }
.plan-cta { margin-top: auto; text-align: center; }
.plan-featured { border-color: var(--brand); box-shadow: var(--shadow-brand); }
.plan-tag {
  position: absolute; top: -12px; left: 26px;
  background: var(--brand); color: #fff; border-radius: 999px;
  padding: 3px 12px; font-size: 0.75rem; font-weight: 600;
}

/* ── Hero: konkrétne číslo ──────────────────────────────────────────────── */

/* Abstraktný „súlad so zákonom" nikoho nepohne, konkrétna suma áno. Blok je
 * odsadený linkou, aby sa dal prečítať aj pri preskakovaní textu. */
.hero-figure {
  margin-top: 20px; padding-left: 16px; border-left: 3px solid var(--brand);
  color: var(--ink-soft); font-size: 0.98rem;
}
.hero-figure strong { color: var(--ink); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

/* Otvorený zoznam, nie skladačka — desať otázok zbalených do akordeónu
 * vyzerá stručne, len kým sa nezačne otvárať jedna po druhej. Na širokom
 * displeji dva stĺpce, aby sa krátka odpoveď nestrácala v prázdnom riadku. */
.faq-grid { display: grid; gap: 28px 48px; }
@media (min-width: 760px) {
  .faq-grid { grid-template-columns: 1fr 1fr; }
}
.faq-item h3 { font-size: 1.02rem; margin-bottom: 6px; }
.faq-item p { margin-bottom: 0; }

/* ── Články ─────────────────────────────────────────────────────────────── */

.article { padding: 56px 0 80px; }
.article h2 { margin-top: 2em; }
.article h3 { margin-top: 1.6em; }
.article ul, .article ol { padding-left: 22px; }
.article li { margin-bottom: 8px; }
.article blockquote {
  margin: 24px 0; padding: 16px 22px; border-left: 3px solid var(--brand);
  background: var(--bg-soft); color: var(--ink-soft);
}
.article table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.95rem; }
.article th, .article td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.article th { font-weight: 650; color: var(--ink-soft); font-size: 0.85rem; }
.article table { display: block; overflow-x: auto; }

.breadcrumb { font-size: 0.9rem; color: var(--ink-faint); margin-bottom: 20px; }
.article-meta { color: var(--ink-faint); font-size: 0.9rem; margin-bottom: 32px; }

/* ── Kalkulačka ─────────────────────────────────────────────────────────── */

.calc { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.field .hint { font-weight: 400; font-size: 0.85rem; color: var(--ink-faint); margin-top: 5px; }

.result-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.result-row:last-child { border-bottom: 0; }
.result-row strong { font-variant-numeric: tabular-nums; }
.result-total { font-size: 1.3rem; }

.notice {
  border: 1px solid #fde68a; background: #fffbeb; color: #78350f;
  border-radius: var(--radius-md); padding: 16px 18px; font-size: 0.93rem;
}

/* ── Test evidencie ─────────────────────────────────────────────────────── */

.quiz-item {
  border: 0; border-top: 1px solid var(--line); margin: 0; padding: 16px 0 12px;
}
.quiz-item:first-of-type { border-top: 0; padding-top: 0; }
.quiz-item legend { font-weight: 600; padding: 0; margin-bottom: 10px; }
.quiz-item label {
  display: inline-flex; align-items: center; gap: 8px; margin-right: 20px;
  color: var(--ink-soft); cursor: pointer;
}
.quiz-item input { accent-color: var(--brand); width: 18px; height: 18px; }

/* ── Odber upozornení ───────────────────────────────────────────────────── */

/* Na širokom displeji vedľa seba, na telefóne pod sebou — tlačidlo v jednom
   riadku s poľom by sa na 375 px zmenšilo pod použiteľnú veľkosť. */
.odber-form {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 18px;
}
.odber-field { flex: 1 1 260px; }
.odber-label {
  display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600;
}
.odber-form input {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
.odber-form input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.odber-form .btn { flex: 0 0 auto; }
.odber-form button[disabled] { opacity: 0.55; cursor: default; }

.odber-stav { margin: 16px 0 0; font-size: 0.93rem; }
.odber-ok { color: var(--ok); }
.odber-chyba { color: var(--warn); }

/* ── Pätka ──────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line); background: var(--bg-soft);
  padding: 48px 0 40px; font-size: 0.93rem; color: var(--ink-soft);
}
.footer-cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer h4 { margin: 0 0 10px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { color: var(--ink-soft); }
.disclaimer { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 0.87rem; }

/* ── Odstupy ────────────────────────────────────────────────────────────── */

/* Nahrádza `style="margin-top:…"` roztrúsené po obsahových súboroch (site/
 * content.mjs, pages.mjs, tools.mjs…) — hodnoty sú presne tie, čo tam boli,
 * len pomenované, aby štýl sedel v jednom súbore a nie v HTML aj v CSS naraz. */
.mt-0 { margin-top: 0; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-36 { margin-top: 36px; }
.mt-40 { margin-top: 40px; }
.mt-44 { margin-top: 44px; }
.mb-0 { margin-bottom: 0; }
.mb-24 { margin-bottom: 24px; }
.mx-auto { margin-inline: auto; }
.text-left { text-align: left; }
.justify-start { justify-content: flex-start; }
/* Karta-odkaz (Firmy s flotilou / Účtovné kancelárie) nemá vyzerať ako odkaz
 * v behúcom texte — farbu textu určuje karta, nie prehliadačová modrá. */
.color-inherit { color: inherit; }
/* Nadpis vo funkčnom celku (viď content.mjs `featureCluster`) — o čosi väčší
 * než bežné `h3` v karte, ale menší než `h2` sekcie nad ním. */
.cluster-title { font-size: 1.4rem; }

/* ── Postupné odkrývanie pri scrolli ──────────────────────────────────────
 *
 * BEZ JAVASCRIPTU JE VŠETKO HNEĎ VIDIEŤ — toto pravidlo je tu prvé a je
 * záväzné pre všetko pod ním. `[data-reveal]` samo osebe nič neskrýva;
 * skrýva ho až `.js-reveal [data-reveal]`, teda trieda, ktorú vie pridať
 * jedine skript v layout.mjs (`analytics()`), a ten ju nepridá vôbec, ak
 * prehliadač nepodporuje IntersectionObserver alebo si niekto vypol pohyb
 * (`prefers-reduced-motion`). Skript zároveň nastavuje `transition-delay`
 * podľa poradia prvku — to je celý „stagger": žiadna knižnica, len rad
 * oneskorení na tom istom prechode. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 56px 0 64px; }
  .hero { padding: 56px 0 48px; }
  .site-nav a:not(.btn) { display: none; }
}