/* ====================================================================
   PREDAJNÁ STRÁNKA MitoOps — vzhľad
   ====================================================================
   Rovnaká úvaha ako v aplikácii: nikde pevné pixely „od oka", každý
   odstup, rádius a stupeň písma má premennú. Stránka a aplikácia majú
   vyzerať ako jedna vec — návštevník, ktorý sa prihlási, nesmie mať
   pocit, že prišiel niekam inam.

   Odlišnosť je zámerná v jednom: stránka smie dýchať. Aplikácia je
   pracovný nástroj a stláča dáta; stránka má jednu myšlienku na
   obrazovku a väčšie odstupy sú tu nástroj, nie plytvanie.

   Motív: `prefers-color-scheme` ako východisko, `data-theme` na
   koreňovom prvku ho prebije (prepínač v hlavičke).               */

:root {
  color-scheme: light;

  /* --- plochy a text --- */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f2f5f9;
  --surface-3: #e8eef6;
  --line: rgba(31, 45, 61, 0.12);
  --line-strong: rgba(31, 45, 61, 0.22);
  --text: #101828;
  --soft: #344054;
  --muted: #667085;

  /* --- značka --- */
  /* AKCENT AKO PLOCHA MUSÍ UNIESŤ BIELE PÍSMO.
     Pôvodné `#0b7fe8` dávalo s bielym textom pomer 4,03 — pod hranicou
     4,5, ktorú norma žiada pre bežný text (namerané, nie odhadnuté).
     Tmavší odtieň drží rovnaký charakter a dáva 5,0.
     `--accent-text` je ešte tmavší: odkaz v texte stojí na bielej,
     nie na akcentnej ploche, a potrebuje väčšiu rezervu. */
  --accent: #0a6fd0;
  --accent-hover: #0960b6;
  --accent-text: #0a5fb0;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(10, 111, 208, 0.10);
  /* Zelená sa používa aj ako PÍSMO (menovka „v prevádzke", odrážky
     v cenníku). `#188a42` dávalo 4,42 — tesne pod hranicou. */
  --success: #157a3a;
  --warn: #a16207;

  /* --- odstupy --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* Vodorovné odsadenie stránky. Rastie s oknom, ale zastaví sa —
     bez hornej hranice by na širokom monitore odsadenie prerástlo
     obsah. */
  --gutter: clamp(16px, 4vw, 40px);
  --page: 1140px;
  --prose: 68ch;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Písmo škáluje plynulo so šírkou okna — netreba ladiť každý
     breakpoint zvlášť a nestane sa, že medzi dvoma to vyzerá zle. */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --fs-2xl: clamp(1.7rem, 1.35rem + 1.6vw, 2.4rem);
  --fs-3xl: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 24px 64px rgba(16, 24, 40, 0.12);
  /* PODFARBENIE OKOLO NÁHĽADU.
     Tieň hovorí „toto leží nad plochou". Podfarbenie hovorí niečo iné:
     oddeľuje náhľad od pozadia aj tam, kde majú takmer rovnaký jas —
     bez neho svetlá snímka na svetlej stránke splýva a rám vyzerá ako
     tenká linka okolo ničoho. Je zámerne široké a slabé: má sa stratiť,
     nie ohraničiť. */
  --halo: rgba(24, 36, 52, 0.17);
  /* Rám telefónu pre ZÁBER V OPAČNOM MOTÍVE. Bežný `--surface-3` sa
     riadi motívom stránky, takže by okolo tmavej obrazovky vznikol
     biely rám a naopak. Tu je zámerne natvrdo odtieň druhého motívu. */
  --telo-opacne: #10161f;

  --header-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #080b10;
    --surface: #0e131b;
    --surface-2: #141b25;
    --surface-3: #1a2430;
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.20);
    --text: #edf2f7;
    --soft: #c5d0de;
    --muted: #8fa0b4;
    --accent: #4a9dff;
    --accent-hover: #6fb2ff;
    --accent-text: #8cc2ff;
    --accent-contrast: #06121f;
    --accent-soft: rgba(74, 157, 255, 0.14);
    --success: #58d68d;
    --warn: #f4c95d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
    /* Na tmavej ploche musí podfarbenie ísť k SVETLU. Sivá na takmer
       čiernom podklade nie je vidieť a náhľad by zostal bez okolia. */
    --halo: rgba(150, 188, 232, 0.17);
  --telo-opacne: #dbe3ec;
    --telo-opacne: #dbe3ec;
  }
}

/* Voľba návštevníka prebije systém — v oboch smeroch. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #080b10;
  --surface: #0e131b;
  --surface-2: #141b25;
  --surface-3: #1a2430;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
  --text: #edf2f7;
  --soft: #c5d0de;
  --muted: #8fa0b4;
  --accent: #4a9dff;
  --accent-hover: #6fb2ff;
  --accent-text: #8cc2ff;
  --accent-contrast: #06121f;
  --accent-soft: rgba(74, 157, 255, 0.14);
  --success: #58d68d;
  --warn: #f4c95d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --halo: rgba(150, 188, 232, 0.17);
  --telo-opacne: #dbe3ec;
}

* { box-sizing: border-box; }

/* ATRIBÚT `hidden` MUSÍ VYHRAŤ NAD KAŽDOU TRIEDOU.
   ------------------------------------------------------------------
   Prehliadač skrýva `[hidden]` pravidlom `display: none` z vlastnej
   predvolenej tabuľky. Tá má NIŽŠIU váhu než ktorákoľvek naša trieda,
   takže `.btn { display: inline-flex }` ju prebije a prvok označený
   ako skrytý zostane vidieť.
   Nájdené naživo: tlačidlo „Uložiť voľbu" v lište súhlasu sa
   zobrazovalo hneď, hoci sa má objaviť až po otvorení nastavenia.
   Jedno pravidlo to rieši pre celú stránku — a je to jediné miesto,
   kde je `!important` na mieste: `hidden` nie je štýl, je to stav. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Kotva pod pevnou hlavičkou by inak skončila za ňou. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Poistka proti vodorovnému posuvu celej stránky. Široký prvok
     (tabuľka, náhľad) sa posúva VNÚTRI seba, nikdy nie telom stránky. */
  overflow-x: hidden;
}

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

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Odkaz na preskočenie navigácie. Viditeľný až pri zameraní. */
.skip {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: top 0.15s;
}
.skip:focus { top: var(--sp-4); }

/* ====================================================================
   ROZLOŽENIE
   ==================================================================== */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 820px; }

section { padding-block: var(--sp-8); }
section.tight { padding-block: var(--sp-7); }

/* Na telefóne sa dva susedné odstupy sčítajú do 96 px prázdna medzi
   nadpisom sekcie a jej obsahom — na 390 px je to štvrtina obrazovky
   bez informácie. Priestor je na širokom monitore nástroj, na telefóne
   je to posúvanie navyše. */
@media (max-width: 640px) {
  section { padding-block: var(--sp-6); }
  section.tight { padding-block: var(--sp-5); }
}

/* ZAROVNANIE SA RIADI POČTOM STĹPCOV
   ------------------------------------------------------------------
   Pri dvoch stĺpcoch (text vľavo, obsah vpravo) je zarovnanie doľava
   správne — oko má kam nabehnúť. Pri JEDNOM stĺpci, kde pod nadpisom
   nasleduje mriežka kariet cez celú šírku, vyzerá nadpis pri ľavom
   okraji ako zabudnutý; obsah je vycentrovaný a nadpis nie.

   Hlavičky sekcií sú preto vycentrované všade, kde nad nimi nestojí
   dvojstĺpcové rozloženie. Výnimka je článok a právne stránky, kde je
   text úzky stĺpec a čítanie zľava je prirodzené. */
.section-head {
  max-width: var(--prose);
  margin: 0 auto var(--sp-6);
  text-align: center;
}
.section-head.left { margin-inline: 0; text-align: left; }
.wrap-narrow .section-head,
.prose ~ .section-head { margin-inline: 0; text-align: left; }
.section-head p { color: var(--soft); font-size: var(--fs-lg); margin: 0; }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Mriežka, ktorá sa nezalamuje na sirotu.
   `auto-fit` s `minmax` rieši všetky šírky naraz — netreba breakpointy
   pre 2, 3 a 4 stĺpce zvlášť. */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* ====================================================================
   TLAČIDLÁ
   ==================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 20px;
  min-height: 44px;          /* trafí sa prstom */
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-hover); }
/* DRUHÁ VÝZVA MUSÍ BYŤ VIDIEŤ, NIE PREHLIADNUTEĽNÁ.
   Priehľadné tlačidlo s tenkým rámom splynulo na svetlej stránke
   s pozadím — vyzeralo ako popisok, nie ako niečo, na čo sa dá kliknúť.
   Dostáva preto vlastnú plochu a výraznejší rám.

   Hlavnou výzvou zostáva modré tlačidlo: má plnú akcentovú plochu
   a bielym písmom, takže hierarchia ostáva zachovaná. Toto je druhá
   voľba, nie druhá rovnocenná. */
.btn-ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* V LIŠTE ZOSTÁVA TLAČIDLO PRIEHĽADNÉ.
   Vlastná plocha je správna v obsahu stránky, kde druhá výzva inak
   splynie s pozadím. V hlavičke by ale biela plocha súperila
   s hlavnou modrou výzvou hneď vedľa — a v obrátenej lište by navyše
   niesla farbu STRÁNKY, nie lišty. Hlavička má vlastné pravidlá
   vyššie (`body.je-odscrollovane .header .btn-ghost`). */
.header .btn-ghost {
  background: transparent;
  box-shadow: none;
  border-color: var(--line);
}
.header .btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-quiet { background: transparent; color: var(--soft); padding-inline: var(--sp-3); }
.btn-quiet:hover { color: var(--text); background: var(--surface-2); }
.btn-lg { padding: 14px 22px; min-height: 50px; font-size: var(--fs-md); }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row.center { justify-content: center; }

/* ====================================================================
   HLAVIČKA
   ==================================================================== */
/* ====================================================================
   HLAVIČKA: NAD PRVOU OBRAZOVKOU PRIEHĽADNÁ, PO SCROLLNUTÍ PEVNÁ
   ====================================================================
   Farebný podklad prvej obrazovky prechádza AJ ZA hlavičku — stránka
   potom začína jednou plochou, nie pásikom a pod ním niečím iným.
   Až keď návštevník odscrolluje, hlavička dostane vlastné pozadie
   a oddelí sa čiarou, aby text pod ňou nepresvital.

   Prepína to `assets/site.js` triedou `.je-odscrollovane` na `<body>`.
   Bez skriptu zostáva hlavička pevná — teda čitateľná; priehľadnosť
   je ozdoba, nie podmienka použiteľnosti. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
/* ====================================================================
   PO ODSCROLLOVANÍ MÁ HLAVIČKA OPAČNÝ TÓN NEŽ STRÁNKA
   ====================================================================
   Vo svetlom režime tmavá, v tmavom svetlá. Nie je to ozdoba: lišta,
   ktorá je len o odtieň iná než obsah pod ňou, sa pri rolovaní stráca
   a návigácia s hlavným tlačidlom prestane byť viditeľná práve vtedy,
   keď ju návštevník hľadá. Opačný tón ju drží na očiach po celý čas.

   Farby prvkov vnútri sa preberajú z `--hl-*`, aby sa nemuselo
   prepisovať každé pravidlo zvlášť. */
body.je-odscrollovane .header {
  --hl-plocha: #0f1620;
  --hl-text: #eef3f8;
  --hl-muted: #a7b6c6;
  --hl-line: rgba(255, 255, 255, .14);
  /* PLNÁ, nie poloprehľadná. Obrátený tón má zmysel iba vtedy, keď je
     lišta naozaj iná plocha; pri priesvitnosti cez ňu presvitá stránka,
     kontrast textu klesne a farba sa mení podľa toho, čo je práve pod
     ňou. Priesvitnosť je namieste nad prvou obrazovkou, kde má hlavička
     splývať — tam ale žiadne `--hl-*` neplatia. */
  background: var(--hl-plocha);
  border-bottom-color: var(--hl-line);
  color: var(--hl-text);
}
:root[data-theme='dark'] body.je-odscrollovane .header {
  --hl-plocha: #f4f7fb;
  --hl-text: #16202c;
  --hl-muted: #55637a;
  --hl-line: rgba(20, 30, 45, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body.je-odscrollovane .header {
    --hl-plocha: #f4f7fb;
    --hl-text: #16202c;
    --hl-muted: #55637a;
    --hl-line: rgba(20, 30, 45, .14);
  }
}

/* Obsah hlavičky preberá jej vlastné farby. Logo je obrázok, takže sa
   mu upraví jas — dve verzie loga by znamenali dva súbory navyše
   a jeden by sa pri zmene značky vždy zabudol. */
/* IBA PRVKY, KTORÉ SÚ NA SAMOTNEJ LIŠTE.
   Na úzkej obrazovke je navigácia rozbaľovací panel s vlastným
   pozadím — obrátené farby by v ňom znamenali tmavý text na tmavom
   podklade. Odkazy sa preto prefarbujú až tam, kde sú naozaj v lište
   (rovnaká hranica ako zbaľovanie menu, 1080 px). */
/* LOGO MUSÍ NASLEDOVAŤ TÓN HLAVIČKY, NIE TÓN STRÁNKY.
   Hlavička po odscrollovaní zámerne obracia tón — na tmavej stránke je
   svetlá a naopak. Logo sa pritom prepínalo podľa motívu STRÁNKY,
   takže na tmavej stránke zostala svetlá značka na svetlej ploche
   a z nápisu „MitoOps" bolo vidieť sotva polovicu. Tu sa výber obracia
   späť: v obrátenej hlavičke platí opačná dvojica než na stránke. */
body.je-odscrollovane .header .logo-on-light { display: none; }
body.je-odscrollovane .header .logo-on-dark { display: block; }
:root[data-theme='dark'] body.je-odscrollovane .header .logo-on-light { display: block; }
:root[data-theme='dark'] body.je-odscrollovane .header .logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body.je-odscrollovane .header .logo-on-light { display: block; }
  :root:not([data-theme='light']) body.je-odscrollovane .header .logo-on-dark { display: none; }
}

body.je-odscrollovane .header .icon-btn,
body.je-odscrollovane .header .lang-pick { color: var(--hl-muted); }
@media (min-width: 1361px) {
  body.je-odscrollovane .header .nav-features > summary,
  body.je-odscrollovane .header .nav-features > .nav-features-link { color: var(--hl-muted); }
  body.je-odscrollovane .header .nav-features > summary:hover,
  body.je-odscrollovane .header .nav-features > summary:focus-visible,
  body.je-odscrollovane .header .nav-features > .nav-features-link:hover,
  body.je-odscrollovane .header .nav-features > .nav-features-link:focus-visible {
    color: var(--hl-text);
    background: color-mix(in srgb, var(--hl-text) 10%, transparent);
  }
  /* Otvorená stránka: rovnako ako ostatné položky menu — svetlejšie
     písmo, žiadne pozadie. */
  body.je-odscrollovane .header .nav-features[data-current='true'] > summary,
  body.je-odscrollovane .header .nav-features[data-current='true'] > .nav-features-link {
    color: var(--hl-text);
  }
}
@media (min-width: 1081px) {
  body.je-odscrollovane .header .nav a:not(.btn) { color: var(--hl-muted); }
  body.je-odscrollovane .header .nav a:not(.btn):hover,
  body.je-odscrollovane .header .nav a[aria-current='page'] { color: var(--hl-text); }
  body.je-odscrollovane .header .nav a:not(.btn):hover { background: color-mix(in srgb, var(--hl-text) 10%, transparent); }
  body.je-odscrollovane .header .nav .nav-mega-head > a:not(.btn) {
    color: var(--accent);
    background: transparent;
  }
}
/* POZADIE PRI PREJDENÍ MYŠOU MUSÍ BYŤ TIEŽ OBRÁTENÉ.
   NAMERANÉ 2026-08-05: prepínač motívu aj prepínač jazyka brali pri
   prejdení myšou `--surface-2` z motívu STRÁNKY. V obrátenej hlavičke
   tak na tmavej stránke vznikol tmavý štvorec s tmavou ikonou na
   svetlej lište — ikona zmizla presne vo chvíli, keď na ňu človek
   mieri. Farbu aj rám sa opravovalo, pozadie nie.

   Odtieň sa mieša z `--hl-text`, takže platí v oboch smeroch bez
   ďalšieho pravidla. */
body.je-odscrollovane .header .icon-btn:hover,
body.je-odscrollovane .header .lang-pick:hover {
  border-color: var(--hl-line);
  color: var(--hl-text);
  background: color-mix(in srgb, var(--hl-text) 10%, transparent);
}
@media (min-width: 1081px) {
  body.je-odscrollovane .header .btn-ghost { color: var(--hl-text); border-color: var(--hl-line); }
  /* TEXT A POZADIE MUSIA POCHÁDZAŤ Z TOHO ISTÉHO MOTÍVU.
     NAMERANÉ 2026-08-05 na oboch motívoch: „Prihlásiť sa" bralo pri
     prejdení myšou pozadie `--surface-2` zo STRÁNKY, kým text mal
     `--hl-text` z obrátenej HLAVIČKY. Vyšlo z toho
     rgb(238,243,248) na rgb(242,245,249) vo svetlom režime a
     rgb(22,32,44) na rgb(20,27,37) v tmavom — teda text, ktorý zmizne
     presne vo chvíli, keď naň človek mieri, a to v oboch režimoch.

     Odtieň sa preto mieša z `--hl-text`, rovnako ako pri ikonkách. */
  body.je-odscrollovane .header .btn-ghost:hover,
  body.je-odscrollovane .header .btn-ghost:focus-visible {
    color: var(--hl-text);
    border-color: var(--hl-text);
    background: color-mix(in srgb, var(--hl-text) 12%, transparent);
  }
}
/* ZNAČKA SI DRŽÍ SVOJE FARBY.
   Kým sa v obrátenej hlavičke prepínala tá istá značka, riešil sa
   kontrast filtrom `brightness(0) invert(1)` — teda prefarbením na
   bielo. Odvtedy sa vyberá SPRÁVNA VERZIA značky (`logo-on-light` /
   `logo-on-dark`, pravidlá vyššie), takže filter už nič nerieši a iba
   zahadzuje firemné farby: modrý znak a červené „Mito" zbelели.
   Namerané 2026-08-06 na svetlej stránke s tmavou lištou. */
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
}
.logo {
  display: inline-flex;
  align-items: center;
  /* Značka je najčastejšie klikaný odkaz na stránke (cesta späť na
     úvod). Výška obsahu je 29 px, čo sa prstom trafí ťažko — minimum
     preto nesie prvok, nie obsah. */
  min-height: 40px;
  gap: var(--sp-2);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
  flex: 0 0 auto;
}
.logo:hover { text-decoration: none; }

/* ZNAČKA — dva súbory, prepína ich CSS
   ------------------------------------------------------------------
   Dodaný balík má vlastnú verziu pre svetlý a pre tmavý podklad. Oba
   obrázky sú v dokumente naraz a zobrazuje sa ten správny; výmena
   `src` skriptom by pri prepnutí motívu blikla a bez skriptu by
   nefungovala vôbec. */
.logo-img { height: 30px; width: auto; flex: 0 0 auto; }
.logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo-on-light { display: none; }
  :root:not([data-theme='light']) .logo-on-dark { display: block; }
}
:root[data-theme='dark'] .logo-on-light { display: none; }
:root[data-theme='dark'] .logo-on-dark { display: block; }
:root[data-theme='light'] .logo-on-light { display: block; }
:root[data-theme='light'] .logo-on-dark { display: none; }

/* PREPÍNAČ MOTÍVU — ikonka ukazuje, KAM sa prepne
   ------------------------------------------------------------------
   V svetlom motíve mesiac („prepni na tmavý"), v tmavom slnko. Pôvodne
   tam bol natvrdo mesiac, takže v tmavom motíve tlačidlo ponúkalo to,
   v čom už používateľ bol. Rieši to tá istá dvojica ako pri značke —
   obe ikonky sú v dokumente a prepína ich CSS, takže sa stav nemôže
   rozísť s tým, čo je naozaj zapnuté. */
.ico-on-dark { display: none; }
.ico-on-light, .ico-on-dark { display: inline-flex; }
.ico-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ico-on-light { display: none; }
  :root:not([data-theme='light']) .ico-on-dark { display: inline-flex; }
}
:root[data-theme='dark'] .ico-on-light { display: none; }
:root[data-theme='dark'] .ico-on-dark { display: inline-flex; }
:root[data-theme='light'] .ico-on-light { display: inline-flex; }
:root[data-theme='light'] .ico-on-dark { display: none; }
.icon-btn svg { width: 18px; height: 18px; }

.nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
/* `:not(.btn)` je tu kvôli ŠPECIFICITE, nie kvôli vzhľadu.
   `.nav a` má špecificitu 0,1,1 a prebíja `.btn-primary` (0,1,0) —
   tlačidlo v zbalenom menu tak dostalo `color: var(--soft)` na
   akcentovom podklade a kontrast spadol na 1,78 : 1 pri hranici 4,5.
   Bolo to na každej stránke naraz, teda 89 nálezov z jedného riadka. */
.nav a:not(.btn) {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--soft);
  font-size: var(--fs-sm);
  font-weight: 550;
  white-space: nowrap;
}
.nav a:not(.btn):hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav a:not(.btn)[aria-current='page'] { color: var(--text); font-weight: 650; }

/* Funkcie na desktope predávajú výsledok, nie iba názov stránky. Natívne
   details zostáva klávesnicovo ovládateľné; hover je pohodlnejšia cesta
   pre myš, nie podmienka fungovania. */
.nav-features { position: relative; }

/* ==================================================================
   MOSTÍK CEZ MEDZERU MEDZI ODKAZOM A PANELOM
   ==================================================================
   Panel je `position: fixed` a začína pod celou hlavičkou, takže medzi
   spodkom odkazu „Funkcie" a horným okrajom panela je niekoľko
   pixelov prázdna. Myš tou medzerou prejde, `:hover` sa na okamih
   stratí a menu sa zabalí skôr, než sa dá na čokoľvek kliknúť.

   Cez šípku to náhodou fungovalo — je nižšie, takže myš medzeru
   preskočila rýchlejšie. Zo stredu textu nie, a to bola tá chyba.

   Mostík je neviditeľný pás, ktorý medzeru prekryje. Je súčasťou
   `.nav-features`, takže po ňom `:hover` nepretrhne. Zapína sa až pri
   prejdení myšou, inak by neviditeľný pás cez hlavičku bral kliky
   susedným položkám menu. */
.nav-features--desktop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(var(--header-h) / 2);
  display: none;
}
.nav-features--desktop:hover::after,
.nav-features--desktop:focus-within::after { display: block; }
.nav-features--mobile { display: none; }
.nav-features > summary,
.nav-features > .nav-features-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--soft);
  font-size: var(--fs-sm);
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.nav-features > summary { display: none; }
.nav-features > summary::-webkit-details-marker { display: none; }
.nav-features > summary:hover,
.nav-features > summary:focus-visible,
.nav-features > .nav-features-link:hover,
.nav-features > .nav-features-link:focus-visible {
  color: var(--text);
  background: var(--surface-2);
  outline: none;
}
/* ==================================================================
   OTVORENÁ STRÁNKA SA IBA ZOSVETLÍ, NEPODFARBUJE SA
   ==================================================================
   Podfarbenie tu bolo jediné v celom menu — ostatné položky značia
   otvorenú stránku iba svetlejším písmom. Na stránke „Funkcie"
   k tomu navyše prišla obrátená hlavička po odscrollovaní, ktorá
   pravidlo nižšie mala len pre mobilné `summary`. Desktopový odkaz tak
   ostal svetlý na svetlom podklade a nedal sa prečítať. */
.nav-features[data-current='true'] > summary,
.nav-features[data-current='true'] > .nav-features-link {
  color: var(--text);
  outline: none;
}
.nav-features-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
.nav-features[open] .nav-features-caret { transform: translateY(2px) rotate(-135deg); }
.nav-mega-panel {
  position: fixed;
  z-index: 80;
  top: calc(var(--header-h) - 5px);
  left: 50%;
  width: min(1180px, calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, visibility .14s ease;
}
.nav-features:hover .nav-mega-panel,
.nav-features:focus-within .nav-mega-panel,
.nav-features[open] .nav-mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-mega-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
}
.nav-mega-head > span { display: grid; gap: 3px; max-width: 62ch; }
.nav-mega-head > span strong { color: var(--text); }
.nav-mega-head small { color: var(--muted); line-height: 1.4; }
.nav-mega-head > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 700;
}
.nav-mega-head > a svg { width: 18px; height: 18px; }
.nav-mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.nav a.nav-mega-card:not(.btn) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  white-space: normal;
}
.nav a.nav-mega-card:not(.btn):hover { border-color: var(--line); background: var(--surface-2); }
.nav-mega-card > span:last-child { display: grid; gap: 4px; }
.nav-mega-card strong { color: var(--text); font-size: var(--fs-sm); }
.nav-mega-card small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.nav-mega-icon { color: var(--accent); }
.nav-mega-icon svg { width: 22px; height: 22px; }
.nav-mega-foot {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-2);
  color: var(--accent);
  font-weight: 750;
}
.nav-mega-foot svg { width: 18px; height: 18px; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

/* IKONOVÉ TLAČIDLO — PREVZATÉ Z APLIKÁCIE
   ------------------------------------------------------------------
   Rám je PRIEHĽADNÝ a objaví sa až pri prejdení myšou. Presne tak to
   má aplikácia (`.language-current` v `src/styles.css`) a je to
   dôvod, prečo sa jej hlavička na telefóne nerozpadne: štyri ovládače
   v rámčekoch zaberú toľko, že sa vedľa nich značka nezmestí.

   Rám sa NEODSTRAŇUJE úplne — zostáva priehľadný, aby sa prvok pri
   prejdení myšou nehýbal o dva pixely. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--soft);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--line); background: var(--surface-2); color: var(--text); }

/* Prepínač jazyka. Natívny `<select>` zámerne — na telefóne ho
   operačný systém vykreslí ako zoznam, ktorý sa ovláda lepšie než
   akákoľvek vlastná ponuka. */
/* Vlajka je vedľa výberu, nie v ňom: `<option>` obrázok neunesie
   a vlastná ponuka by sa na telefóne ovládala horšie než natívna. */
/* PREPÍNAČ JAZYKA
   ------------------------------------------------------------------
   Viditeľná časť je vlajka + kód + šípka; cez celý prvok leží
   priehľadný `<select>`. Ovládanie tak zostáva natívne (klávesnica,
   čítačka obrazovky, výber na telefóne), ale vzhľad je náš a zhodný
   s aplikáciou.

   Predtým bol `<select>` viditeľný a na úzkej obrazovke sa skrýval
   `display: none` — jazyk sa teda na telefóne nedal prepnúť vôbec.
   Zostala po ňom iba vlajka, ktorá nič nerobí. */
.lang-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* 40 px, nie menej: je to dotykový cieľ a na tablete sa doň klikne
     prstom rovnako ako na telefóne. */
  height: 40px;
  padding: 0 6px;
  /* Priehľadný rám — rovnako ako `.icon-btn` a ako v aplikácii.
     Štvorcové orámovanie okolo vlajky a okolo motívu zaberalo na
     telefóne toľko, že sa vedľa nich nezmestila značka. */
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  flex: 0 0 auto;
}
.lang-pick:hover { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.lang-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-flag {
  /* 18 px — zhodne s aplikáciou (`.language-switch-topbar img`). */
  width: 18px;
  height: 14px;
  border-radius: 2px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}
.lang-code { line-height: 1; }
.lang-caret { flex: 0 0 auto; opacity: .7; }
/* `opacity: 0`, nie `visibility: hidden` — skrytý prvok sa nedá
   kliknúť ani zamerať a celý prepínač by prestal fungovať. */
.lang-select {
  position: absolute;
  /* `-1px`, nie `0`: `inset: 0` sa vzťahuje na plochu VNÚTRI rámu,
     takže pole malo 38 px pri 40 px vysokom prepínači a meranie ho
     hlásilo ako malý dotykový cieľ. Rozdiel sú dva pixely rámu. */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  opacity: 0;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.burger { display: none; }

/* Na úzkej obrazovke sa navigácia zbalí. Otvorená sa ukotví pod
   hlavičkou a NEROZTLAČÍ obsah — inak by pri zatvorení stránka
   poskočila.

   ==================================================================
   HRANICA 1360 px, NIE 1080 (posunuté 9. 8. 2026)
   ==================================================================
   Namerané na nasadenej stránke: hlavička potrebuje 1 232 px a pri
   1 100 px pretekala o 56 px UŽ PREDTÝM, než sem čokoľvek pribudlo.
   Odkazy vpravo teda mizli mimo obrazovku v celom pásme zhruba
   1 081–1 150 px a nikto si toho nevšimol, lebo bežné testovacie
   šírky (1 280, 1 440) sú nad ním alebo tesne pod hranicou.

   Prepínač režimu (68 px) to posunul aj do pásma 1 200–1 300 px, kde
   dovtedy miesto bolo. Namiesto lepenia jednotlivých pásiem sa hranica
   posunula tak, aby sa navigácia zbalila skôr, než začne čokoľvek
   vypadávať — teda pri šírke, kde sa obsah preukázateľne zmestí.

   Dôsledok: notebook so šírkou okolo 1 200 px dostane zbalené menu.
   Je to zámena — jeden klik navyše za odkazy, ktoré sú vidieť. */
@media (max-width: 1360px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav a:not(.btn) { padding: 13px var(--sp-2); border-bottom: 1px solid var(--line); border-radius: 0; font-size: var(--fs-md); }
  .nav a:not(.btn):last-of-type { border-bottom: 0; }
  .nav-features--desktop { display: none; }
  .nav-features--mobile { display: block; border-bottom: 1px solid var(--line); }
  .nav-features > summary {
    display: flex;
    min-height: 46px;
    padding: 13px var(--sp-2);
    border-radius: 0;
    font-size: var(--fs-md);
  }
  .nav-features > summary:hover,
  .nav-features > summary:focus-visible { background: var(--surface-2); }
  .nav-mega-panel {
    position: static;
    width: auto;
    transform: none;
    padding: 0 0 var(--sp-3);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }
  .nav-features[open] .nav-mega-panel { display: block; }
  .nav-mega-head { display: none; }
  .nav-mega-grid { grid-template-columns: 1fr 1fr; }
  .nav-mega-card--secondary { display: none !important; }
  .nav a.nav-mega-foot:not(.btn) {
    display: flex;
    border: 0;
    border-radius: var(--r-2);
    background: var(--surface-2);
  }
  .nav a.nav-mega-card:not(.btn) {
    min-height: 44px;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
  }
  /* Hlavná výzva k akcii zostáva v hlavičke aj po zbalení menu —
     je to jediná vec, ktorú návštevník musí vedieť nájsť vždy. */
  .header-actions .btn-ghost { display: none; }
}
/* NA TELEFÓNE SA HLAVIČKA MUSÍ ZMESTIŤ, NIE PRETIECŤ
   ------------------------------------------------------------------
   Namerané po výmene kreslenej značky za dodané logo: značka (118 px),
   výzva k akcii, prepínač motívu a tlačidlo menu spolu prerástli 390 px
   o 18 px a stránka sa posúvala do strán.

   Značka sa preto smie ZMENŠIŤ (`min-width: 0` na odkaze — bez neho ju
   flexbox nezmenší pod šírku obsahu) a ovládacie prvky si na telefóne
   berú menej miesta. Nič sa neskrýva: prihlásenie aj vyskúšanie musia
   zostať dosiahnuteľné práve na telefóne. */
/* ZNAČKA NEUSTUPUJE, USTUPUJE VÝZVA
   ------------------------------------------------------------------
   NAMERANÉ 2026-08-05 na nasadenej stránke: pri 320 px mala značka
   16 px (teda nebola vidieť), pri 360 px 56 px a pri 390 px 86 px
   z plných 136 px — a pri 320 px stránka NAVYŠE pretekala do strán.
   Príčinou bolo `flex: 0 1 auto` spolu s `max-width: 100%`: značka sa
   zmenšovala ako prvá, lebo bola jediný prvok, ktorý to dovoľoval.

   Značka je pritom to jediné, čo návštevníkovi povie, kde je. Ustupuje
   preto výzva k akcii — najprv skrátením znenia, a až pod 340 px smie
   značka klesnúť na čitateľné minimum. */
.cta-kratke { display: none; }
@media (max-width: 420px) {
  .header-cta .cta-dlhe { display: none; }
  .header-cta .cta-kratke { display: inline; }
}

@media (max-width: 560px) {
  /* Lišta si na telefóne berie užší okraj než zvyšok stránky.
     Vnútorný obsah stránky potrebuje odsadenie od okraja displeja,
     aby sa dal čítať; lišta je rad ovládacích prvkov a rovnaké
     odsadenie jej berie ~30 px, kvôli ktorým sa nezmestila. */
  .header .wrap { padding-inline: 12px; }
  .header-inner { gap: 6px; }
  /* `flex: 0 0 auto` — značka sa nezmenšuje. */
  .logo { min-width: 0; flex: 0 0 auto; }
  .logo-img { height: 30px; width: auto; max-width: none; }
  .header-actions { gap: 6px; }

  /* ČO ZOSTÁVA V LIŠTE NA TELEFÓNE
     ----------------------------------------------------------------
     značka · vlajka · motív · výzva · menu

     Zmestí sa to všetko, pretože vlajka a motív nemajú rámček — sú to
     holé ikonky, presne ako v aplikácii. Pôvodne mali štvorcové
     orámovanie a práve to zaberalo miesto, kvôli ktorému sa najprv
     stratil jazyk a potom aj prepínač motívu.

     Do zbaleného menu ide iba prihlásenie: je to jediná položka,
     ktorá sa dá odložiť bez toho, aby človek niečo hľadal.

     Rozpočet šírky pri 390 px:
       značka 100 + vlajka 40 + motív 36 + výzva 129 + menu 36
       + štyri medzery po 6 px = 365 z 390. */
  .header-login { display: none; }
  .header-cta {
    /* `min-height`, nie `height`: `.btn` má `min-height: 44px` a tá
       by výšku držala bez ohľadu na `height`. Bez toho zostávalo
       tlačidlo 44 px vysoké a 146 px široké — teda presne to, čo
       vytláčalo značku. */
    padding-inline: 10px;
    font-size: var(--fs-xs);
    min-height: 40px;
    white-space: nowrap;
    /* Výzva je jediný prvok, ktorý sa smie zmenšiť pod šírku obsahu.
       Znenie je už skrátené, takže sa neoreže — je to poistka pre
       jazyk s dlhším slovom. */
    flex: 0 1 auto;
    min-width: 0;
    /* POISTKA PROTI DLHŠIEMU PREKLADU.
       NAMERANÉ 2026-08-05: české „Vyzkoušet" má 86 px oproti slovenskému
       „Vyskúšať" (78 px) a pri 360 px pretiekla stránka o 6 px. Ladiť
       šírku po jazykoch je krehké — ďalší preklad ju rozbije znova.
       Tlačidlo sa preto smie skrátiť; pri dnešných zneniach k tomu
       nedôjde, ale stránka sa už nikdy nerozsype do strán. */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Pod 340 px sa už nezmestí ani skrátená výzva vedľa plnej značky.
     Značka smie klesnúť na 104 px — pri tejto šírke je nápis „MitoOps"
     ešte čitateľný, čo pri 16 px neplatilo. */
  @media (max-width: 339px) {
    .header-inner { gap: 4px; }
    .header-actions { gap: 4px; }
    .logo { flex: 0 1 auto; }
    .logo-img { max-width: 104px; object-fit: contain; object-position: left center; }
  }
  /* Rozpočet šírky pri 360 px (namerané 2026-08-05, po tom, čo značka
     prestala ustupovať):
       okraj 24 + značka 136 + vlajka 41 + motív 34 + výzva 78
       + menu 34 + štyri medzery po 6 = 371 … a to je o 11 px viac,
     než sa zmestí. Chýbajúce pixely sa berú z ovládacích prvkov, nie
     zo značky: vlajka a ikonky sú rozoznateľné aj o dva pixely užšie,
     zatiaľ čo orezaná značka prestáva byť značkou. */
  .lang-pick { padding: 0 2px; gap: 2px; }
  .lang-code { display: none; }
  .icon-btn { width: 34px; height: 40px; }
  .icon-btn svg { width: 18px; height: 18px; }
}

/* Odkazy v zbalenom menu. Na širokej obrazovke sú tie isté v lište
   vpravo, takže tu by boli druhýkrát. */
.nav-cta, .nav-login { display: none; }
@media (max-width: 1080px) {
  /* Iba rozloženie. Farby nesú `.btn-primary` a `.btn-ghost` — tie
     majú kontrast vyriešený pre oba motívy. */
  .nav-cta, .nav-login {
    display: flex;
    margin: var(--sp-3) var(--sp-3) 0;
    border-bottom: 0;
  }
  .nav-login { margin-top: var(--sp-2); margin-bottom: var(--sp-3); }
}

/* ====================================================================
   ÚVODNÁ OBRAZOVKA — DVA STĹPCE
   ====================================================================
   Prvá verzia mala všetko v jednom stĺpci: nadpis, odsek, dve tlačidlá
   a pod tým obrázok. Na širokej obrazovke z toho bol pás textu jednej
   farby cez pol displeja a napravo prázdno — teda presne to, čo si
   návštevník preletí očami a odíde.

   Text vľavo, produkt vpravo. Oko ide zľava doprava: prečíta tvrdenie
   a hneď vidí, čoho sa týka. Je to najbežnejšie rozloženie predajnej
   stránky práve preto, že funguje.

   Pod tým je pás log dopravcov — odpoveď na otázku „podporujete môjho
   dopravcu", ktorá padne skôr než ktorákoľvek iná. */
/* Prvá obrazovka siaha POD hlavičku — preto záporný horný okraj
   o jej výšku a rovnako veľká vnútorná výplň. Farebný podklad tak
   začína úplne hore a hlavička na ňom „pláva". */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + clamp(40px, 6vw, 80px)) var(--sp-7);
  overflow: hidden;

  /* ==================================================================
     PODKLAD IDE OPAČNÝM SMEROM NEŽ ZVYŠOK STRÁNKY
     ==================================================================
     Vo svetlom režime je prvá obrazovka TMAVŠIA, v tmavom SVETLEJŠIA.
     Dôvod je čisto praktický: snímka aplikácie je teraz v tom istom
     motíve ako stránka (návštevník má vidieť realitu režimu, ktorý si
     zapol), takže by na rovnako svetlom podklade splynula a stratila
     obrys. Posunutý podklad jej vráti hranu bez toho, aby sa muselo
     klamať o vzhľade aplikácie.

     Vrstvy zhora nadol:
       1. dva mäkké svetelné body (hĺbka, nie ozdoba),
       2. jemná mriežka — odkaz na tabuľkovú povahu produktu,
       3. základná plocha posunutá oproti `--bg`.

     Mriežka je v `::before` a končí mäkkým prechodom do nuly, aby sa
     obrazovka nekončila viditeľnou hranou. */
  --hero-plocha: color-mix(in srgb, var(--text) 6%, var(--bg));
  /* SILA MRIEŽKY SA LADÍ TU, NA JEDNOM MIESTE.
     Čiara je na svetlom podklade menej čitateľná než na tmavom —
     tmavá linka na svetlom sa opticky stenčuje, svetlá na tmavom sa
     rozlieva. Bledý motív preto potrebuje vyššiu hodnotu, aby mriežka
     pôsobila rovnako silno. Zvýšené 2026-08-06 zo 7 % / 9 %. */
  --hero-mriezka: color-mix(in srgb, var(--text) 8.5%, transparent);
  background:
    radial-gradient(ellipse 60% 55% at 82% 12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%),
    radial-gradient(ellipse 55% 50% at 6% 4%, color-mix(in srgb, var(--accent-2, var(--accent)) 16%, transparent), transparent 64%),
    linear-gradient(180deg, var(--hero-plocha) 0%, color-mix(in srgb, var(--hero-plocha) 55%, var(--bg)) 78%, var(--bg) 100%);
}

/* V tmavom režime sa plocha dvíha k svetlu, nie k tieňu. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero {
    --hero-plocha: color-mix(in srgb, #ffffff 7%, var(--bg));
    --hero-mriezka: color-mix(in srgb, #ffffff 10.5%, transparent);
  }
}
:root[data-theme='dark'] .hero {
  --hero-plocha: color-mix(in srgb, #ffffff 7%, var(--bg));
  --hero-mriezka: color-mix(in srgb, #ffffff 10.5%, transparent);
}
:root[data-theme='light'] .hero {
  --hero-plocha: color-mix(in srgb, var(--text) 6%, var(--bg));
  --hero-mriezka: color-mix(in srgb, var(--text) 8.5%, transparent);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Dve mriežky na sebe: hustá 48 px a nad ňou riedka 192 px, ktorá
     je o niečo výraznejšia. Jedna mriežka pôsobí ako milimetrový
     papier; dve vrstvy dajú ploche hĺbku, akú má technický výkres. */
  background-image:
    linear-gradient(to right, var(--hero-mriezka) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-mriezka) 1px, transparent 1px),
    linear-gradient(to right, var(--hero-mriezka) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-mriezka) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 192px 192px, 192px 192px;
  /* Mriežka sa stráca k okrajom, aby nevyzerala ako tabuľka. */
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 20%, transparent 78%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  /* Ľavý stĺpec je širší, aby sa dve výzvy k akcii zmestili VEDĽA
     seba. Namerané: pri pomere 1,02 : 1 mal ľavý stĺpec 475 px a dve
     tlačidlá potrebujú 467 px plus medzeru — zalomili sa preto pod
     seba a druhá výzva vyzerala ako dodatočná myšlienka. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
}
.hero-text { min-width: 0; }
.hero h1 { margin-bottom: var(--sp-4); }
.hero-lead {
  max-width: 46ch;
  margin-bottom: var(--sp-5);
  color: var(--soft);
  font-size: var(--fs-lg);
}
.hero-note { margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }

/* ZÁBER NA PRVEJ OBRAZOVKE
   ------------------------------------------------------------------
   Snímka plochy smela pretiecť za pravý okraj obsahu — pôsobilo to,
   akoby rozhranie pokračovalo za obrazovku.

   Od 2026-08-05 je tu VIDEO NA TELEFÓNE, a to sa správa opačne:
   telefón je predmet s vlastnými hranicami a orezaný okraj by z neho
   spravil chybu vykreslenia, nie zámer. Preto sa centruje a presah
   sa ruší.

   Výška je stropovaná pomerom obrazovky: záznam má 430 × 880, teda
   takmer 1 : 2. Bez stropu by prvá obrazovka na notebooku narástla
   nad výšku okna a výzva k akcii by sa ocitla pod ohybom — presne to,
   čo má prvá obrazovka nerobiť. */
.hero-shot { min-width: 0; display: flex; justify-content: center; }
.hero-shot .shot { margin-top: 0; }
.hero-shot .shot-mobil {
  max-width: min(300px, 34vh);
  width: 100%;
}
@media (min-width: 1100px) {
  .hero-shot .shot-mobil { max-width: min(320px, 42vh); }
}

/* Na užšej obrazovke pod seba a text na stred — jeden stĺpec zarovnaný
   doľava vyzerá na telefóne nedokončene. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-text { text-align: center; }
  .hero-lead { max-width: 52ch; margin-inline: auto; }
  .hero .btn-row { justify-content: center; }
}

/* ÚVODNÁ OBRAZOVKA NA TELEFÓNE
   ------------------------------------------------------------------
   NAMERANÉ na 390 px: nadpis sa lámal na tri riadky a s odsekom
   a dvoma tlačidlami zabral celú prvú obrazovku. Návštevník nevidel
   ani náznak toho, že stránka pokračuje — a prvá obrazovka, ktorá
   nevyzerá ako začiatok, sa nescrolluje.

   Tri úpravy, každá o jeden dôvod:
     * menší nadpis a tesnejší riadkovací krok — zmestí sa na dva riadky,
     * kratší rozostup pod odsekom,
     * tlačidlá cez celú šírku a pod sebou — na dotyk sa lepšie trafia
       a nevyzerajú ako dve rovnocenné možnosti, keď prvá je hlavná. */
@media (max-width: 560px) {
  /* HORNÝ ODSTUP JE POVINNÝ, NIE OZDOBA.
     NAMERANÉ 2026-08-05 na 390 x 844: lišta končí na 61 px, nadpis
     začínal na 61 px a nadradený riadok („Operačný systém pre e-shopy")
     ležal na 29 px — teda POD lištou, úplne neviditeľný. Prvá obrazovka
     tak začínala nadpisom nalepeným na menu. */
  .hero { padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-5); }

  /* MENŠIE PÍSMO, ABY SA ZMESTIL AJ ZÁBER.
     Nadpis mal 33 px a tri riadky, odsek štyri; video tak začínalo až
     na 514 px a na 780 px vysokom telefóne z neho nebolo vidieť nič.
     Prvá obrazovka má ukázať záber, nadpis, vetu aj výzvu — nie tri
     odseky textu a náznak obrázka. */
  .hero h1 {
    font-size: clamp(1.55rem, 7.2vw, 2rem);
    line-height: 1.14;
    margin-bottom: var(--sp-3);
  }
  .hero-lead {
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin-bottom: var(--sp-4);
  }
  .hero .btn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .btn-row .btn { width: 100%; }
  /* Poznámka pod tlačidlami je dôvod, prečo sa na tlačidlo klikne
     (bez karty, s našou pomocou). Na telefóne mala rovnakú veľkosť
     ako odsek nad ňou a splývala s ním. */
  .hero-note { font-size: var(--fs-xs); margin-top: var(--sp-2); margin-bottom: var(--sp-4); }

  /* Záber dostane presne toľko výšky, koľko na obrazovke zvýšilo.
     `svh` (small viewport height) je výška okna aj s lištami
     prehliadača — `vh` na telefóne počíta s ich schovaním, takže
     by video presiahlo pod okraj práve na tom zariadení, kde má byť
     vidieť celé. */
  /* ZÁBER IDE NA TELEFÓNE HORE.
     ----------------------------------------------------------------
     NAMERANÉ 2026-08-05 na 390 x 844: aj po zmenšení písma začínalo
     video až na 463 px a končilo na 913 px — teda pod okrajom okna.
     Návštevník tak ako prvé videl tri odseky textu a z produktu nič.

     Poradie v dokumente zostáva nezmenené (nadpis je prvý, čo je
     správne pre vyhľadávače aj pre čítačku obrazovky); mení sa iba
     poradie na obrazovke. Na telefóne je záber najsilnejší argument,
     ktorý sa dá pochopiť bez čítania.

     `svh` (small viewport height) je výška okna aj s lištami
     prehliadača — `vh` na telefóne počíta s ich schovaním, takže by
     video presiahlo pod okraj práve tam, kde má byť vidieť celé. */
  /* PORADIE NA TELEFÓNE: ZÁBER → NADPIS → VÝZVA → ODSEK.
     ----------------------------------------------------------------
     Odsek je podporný detail, nie hák. Na štyri riadky tlačil obe
     výzvy pod ohyb, takže návštevník videl produkt a nadpis, ale nie
     to, kam má kliknúť.

     Tlačidlá zostávajú POD SEBOU, nie vedľa seba. Dva rovnako široké
     prvky vedľa seba sa čítajú ako dve rovnocenné možnosti — a hlavná
     výzva má byť jedna. Vedľa seba by sa navyše „Vyskúšať 14 dní
     zdarma" muselo zmenšiť na drobné písmo a dva susedné dotykové
     ciele s úzkou medzerou zvyšujú počet preklepov.

     Poradie v dokumente sa NEMENÍ (nadpis, odsek, výzvy) — mení sa
     iba poradie na obrazovke. Čítačka obrazovky aj vyhľadávač tak
     dostanú text v tom poradí, v akom dáva zmysel čítaný. */
  .hero-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
  .hero-shot { order: -1; }
  .hero-text { display: flex; flex-direction: column; }
  .hero-text .eyebrow { order: 1; }
  .hero-text h1 { order: 2; }
  .hero-text .btn-row { order: 3; }
  .hero-text .hero-note { order: 4; }
  .hero-text .hero-lead { order: 5; margin: var(--sp-4) 0 0; }
  .hero-shot .shot-mobil { max-width: min(190px, 34svh); }
}

/* --------------------------------------------------------------------
   PÁS LOG
   --------------------------------------------------------------------
   Značky, ktoré návštevník pozná, povedia za sekundu viac než odsek. */
.strip-label {
  margin: var(--sp-7) 0 var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
}
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Podložka je BIELA v oboch motívoch, nie priehľadná.
   Dôvod je v samotných značkách: DHL je červená na žltej, Packeta
   tmavočervená na bielej, GLS biela na modrej. Jedna spoločná svetlá
   podložka je jediné, na čom sú čitateľné všetky — a vyzerá to ako
   rad štítkov, nie ako nálepky nalepené na pozadí. */
.logo-strip .chip {
  background: #fff;
  border-color: color-mix(in srgb, #0b1220 12%, transparent);
  padding: 9px 16px;
}
.logo-strip .chip span { display: none; }   /* v páse hovorí logo, nie názov */
.logo-strip .chip img { height: 26px; max-width: 92px; background: transparent; padding: 0; }

/* ====================================================================
   POSÚVAJÚCI SA PÁS DOPRAVCOV
   ====================================================================
   Statický riadok log si návštevník preletí za pol sekundy a druhýkrát
   sa naň už nepozrie. Pomalý posun s miernym zväčšením v strede drží
   oko na mieste, kde je odpoveď na otázku „posielate mojím dopravcom".

   Posun robí CSS (stopa sa presunie o svoju polovicu a skočí späť),
   zväčšenie robí `site.js` — ktorá značka je práve v strede, závisí od
   šírky okna a to sa v CSS spočítať nedá.

   Pod kurzorom sa pás zastaví: kto si chce logo prezrieť, nemá za ním
   naháňať myšou. */
.pas-dopravcov {
  overflow: hidden;
  /* Zvislý priestor pre zväčšenú značku. Bez neho ju `overflow: hidden`
     odreže zhora aj zdola — vodorovné orezanie je zámer, zvislé chyba. */
  padding-block: 14px;
  /* Okraje sa strácajú do stránky, aby značka nevznikala a nemizla
     rezom. `mask` bez predpony podporujú všetky cieľové prehliadače;
     kde nie, pás sa iba orezáva natvrdo a nič sa nerozbije. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.pas-stopa {
  display: flex;
  width: max-content;
  animation: pas-posun 46s linear infinite;
}
.pas-stopa .logo-strip { flex-wrap: nowrap; }
.pas-dopravcov:hover .pas-stopa,
.pas-dopravcov:focus-within .pas-stopa { animation-play-state: paused; }
.pas-stopa .chip {
  /* Zväčšenie prepisuje `site.js` každý snímok, takže tu nesmie byť
     `transition` — bila by sa s ním a pohyb by sa rozmazal. */
  transform-origin: center;
  will-change: transform;
}
@keyframes pas-posun {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Kto má vypnutý pohyb, dostane pás, ktorý si posunie sám. Zastaviť
   animáciu a nechať stopu širšiu než okno by časť dopravcov schovalo
   bez možnosti dostať sa k nim. */
@media (prefers-reduced-motion: reduce) {
  .pas-dopravcov { overflow-x: auto; mask-image: none; }
  .pas-stopa { animation: none; }
  .pas-stopa .logo-strip[aria-hidden="true"] { display: none; }
}

.logo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Značka s logom aj názvom. Logo pre oko, názov pre istotu a pre
   čítačku obrazovky — časť značiek sa na malej ploche nerozozná. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--soft);
  font-size: var(--fs-sm);
  white-space: nowrap;
  /* NAMERANÉ 2026-08-05 na 320 px: menovka platformy s poznámkou
     „pripravujeme" má 296 px a s odsadením strany pretiekla o 17 px —
     celá stránka sa dala posúvať do strán. `white-space: nowrap` je
     pritom správne (rozlomený názov platformy sa zle číta), takže
     riešením je strop šírky a orezanie textu, nie zalomenie. */
  max-width: 100%;
  min-width: 0;
}
/* Ak sa aj tak nezmestí, ustúpi POZNÁMKA, nie názov platformy. */
.chip .chip-soon { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip img {
  height: 20px;
  width: auto;
  max-width: 74px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* Logá dopravcov sú farebné a na tmavom podklade zaniknú — jemný
   svetlý podklad ich udrží čitateľné v oboch motívoch, bez toho, aby
   sa museli dodávať dve sady. */
:root[data-theme='dark'] .chip img,
:root:not([data-theme='light']) .chip img {
  background: #fff;
  border-radius: 3px;
  padding: 2px 3px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .chip img { background: transparent; padding: 0; }
}
.chip.is-soon { opacity: 0.62; }
.chip-soon {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-style: normal;
}

/* ====================================================================
   DVOJSTĹPCOVÝ ÚVOD PODSTRÁNKY
   ====================================================================
   Text vľavo, záber vpravo — rovnaký rytmus ako na titulke, takže
   návštevník, ktorý sem prišiel z druhej výzvy, nemá pocit, že sa
   ocitol na inej stránke.

   Na telefóne pod sebou a záber IDE HORE: rovnako ako na titulke je
   to najsilnejší argument, ktorý sa dá pochopiť bez čítania. */
.uvod-par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.uvod-text { min-width: 0; }
.uvod-text h1 { margin-bottom: var(--sp-4); }
.uvod-text p { color: var(--soft); font-size: var(--fs-lg); max-width: 46ch; }
.uvod-zaber { min-width: 0; }
.uvod-zaber .shot { margin-top: 0; }

@media (max-width: 900px) {
  .uvod-par { grid-template-columns: 1fr; }
  .uvod-zaber { order: -1; }
  .uvod-text p { font-size: var(--fs-md); }
}

/* ====================================================================
   ZÁBERY NA PODSTRÁNKE FUNKCIE
   ====================================================================
   Jeden záber na riadok, text a obraz vedľa seba a strany sa striedajú
   — rovnaký rytmus, aký má titulka. Do 11. 8. 2026 tu bolo všetko
   centrované pod sebou: stránka pôsobila ako zoznam a oko nemalo kam
   skočiť. Mriežka troch záberov vedľa seba je druhá krajnosť, ktorú
   sme už raz skúsili — každý sa zmenšil na tretinu a z rozhrania sa
   nedalo prečítať nič.

   Nad nadpisom stojí jedna veta prínosu. Je to prvé, čo oko chytí,
   a hovorí ČO Z TOHO ČITATEĽ MÁ — nadpis hovorí, ako sa to volá. */
.funkcie-zabery { display: grid; gap: var(--sp-8); margin-top: var(--sp-6); }
.zaber { display: grid; gap: var(--sp-5); align-items: center; }
.zaber-prinos {
  margin: 0 0 6px;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
}
.zaber h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
.zaber-text p { margin: 0; color: var(--muted); }
/* Telefónny rám si šírku drží sám (`.shot-mobil`), ale v polovičnom
   stĺpci by ho mriežka roztiahla — strop je preto tu a je užší než
   pri zábere obrazovky. */
/* `width: 100%` musí byť napísané. Položka mriežky sa síce naťahuje
   sama, ale `margin-inline: auto` to zruší a šírka spadne na vlastnú
   veľkosť obsahu — pri `<video>` bez načítaných metadát je to 300 px
   podľa normy, takže záber obrazovky vyšiel užší než telefón vedľa. */
.zaber-media { width: 100%; max-width: 760px; margin-inline: auto; }
.zaber--mobil .zaber-media { max-width: 320px; }
.zaber-media .shot { margin-top: 0; }

@media (min-width: 900px) {
  /* Rovnaké polovice, nie 5fr/7fr ako pri príbehoch na titulke: tam sa
     pri prehodení strán mení aj šírka stĺpca s obrazom a záber raz
     narastie, raz sa zmenší. Pri striedaní ôsmich záberov pod sebou by
     to vyzeralo ako chyba sadzby. */
  .zaber { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); }
  /* Prehodenie cez `order`, nie zmenou poradia v HTML — poradie pre
     čítačku obrazovky a tabulátor zostáva „najprv text, potom obraz". */
  .zaber.flip .zaber-text { order: 2; }
}

/* ====================================================================
   PRÁVNY TEXT
   ====================================================================
   Články s vlastným nadpisom a odsadením. Riadok je zámerne kratší
   než pri bežnom obsahu: právny text sa číta pomaly a dlhý riadok sa
   pri návrate na ďalší riadok stráca. */
.pravny-text { max-width: var(--prose); }
.pravny-clanok { margin-bottom: var(--sp-6); }
.pravny-clanok h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  letter-spacing: -.01em;
}
.pravny-clanok p {
  margin: 0 0 var(--sp-3);
  color: var(--soft);
  line-height: 1.7;
}
.pravny-clanok p:last-child { margin-bottom: 0; }

/* ====================================================================
   TRI KROKY NASADENIA
   ====================================================================
   Číslo kroku je veľké a stlmené — je to orientácia, nie obsah.
   Kroky idú vedľa seba, na telefóne pod sebou. */
.kroky {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}
.krok {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.krok-cislo {
  position: absolute;
  top: -14px;
  left: var(--sp-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.krok h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.krok p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }

/* ====================================================================
   POROVNANIE S BEŽNÝM RIEŠENÍM
   ====================================================================
   Tri stĺpce: funkcia, bežné riešenie, my. Ľavý je ZÁMERNE STLMENÝ —
   nie preto, aby konkurencia vyzerala zle, ale preto, aby oko šlo
   doprava. Náš stĺpec má vlastný podklad a značku v hlavičke.

   Tabuľka sa na úzkej obrazovke posúva vodorovne vo VLASTNOM rámčeku;
   stránka sa od toho nehýbe. */
.porovnanie-obal {
  margin-top: var(--sp-6);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.porovnanie {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.porovnanie th,
.porovnanie td {
  padding: var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.porovnanie tbody tr:last-child th,
.porovnanie tbody tr:last-child td { border-bottom: 0; }
.porovnanie thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  white-space: nowrap;
}
.porovnanie tbody th[scope='row'] {
  width: 22%;
  color: var(--text);
  font-weight: 700;
}
.porovnanie td { width: 39%; }

/* Pružný riadok je VO VNÚTRI bunky, nie na nej. `display: flex` na
   `<td>` vyradí bunku z tabuľkového rozloženia a stĺpce sa poskladajú
   pod seba — namerané 2026-08-06 v tmavom motíve, kde sa z tabuľky stal
   jeden zvislý zoznam.

   Značka a text sú zarovnané na PRVÝ RIADOK: pri troch riadkoch textu
   sa značka inak odtrhne nad ne. */
.porovnanie .bunka {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.porovnanie .bunka > span:last-child { flex: 1; min-width: 0; }

/* Stlmený stĺpec. Kontrast textu zostáva nad hranicou čitateľnosti —
   „zašednuté" znamená menej výrazné, nie neprečítateľné. */
.porovnanie .je-bezne { color: var(--muted); }
.porovnanie tbody .je-bezne { background: color-mix(in srgb, var(--muted) 5%, transparent); }

/* Náš stĺpec. Podklad aj hlavička nesú akcent. */
.porovnanie .je-nase { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.porovnanie thead .je-nase { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.porovnanie tbody .je-nase { color: var(--text); }
.porovnanie .je-nase {
  border-left: 2px solid color-mix(in srgb, var(--accent) 65%, var(--line));
  border-right: 2px solid color-mix(in srgb, var(--accent) 65%, var(--line));
}
.porovnanie thead .je-nase {
  border-top: 2px solid color-mix(in srgb, var(--accent) 65%, var(--line));
}
.porovnanie tbody tr:last-child .je-nase {
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 65%, var(--line));
}
.nase-znacka { display: inline-flex; align-items: center; }
.nase-znacka .logo-img { height: 22px; }
.porovnanie-funkcia {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
.porovnanie-funkcia-ikona {
  display: inline-flex;
  color: var(--accent);
  flex: 0 0 auto;
}
.porovnanie-funkcia-ikona svg { width: 20px; height: 20px; }

.znak-nie,
.znak-ano {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 1px;
  flex: 0 0 20px;
}
.znak-nie { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.znak-ano { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.znak-nie svg, .znak-ano svg { width: 12px; height: 12px; }

.pod-tabulkou {
  margin: var(--sp-4) 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: center;
}

/* ====================================================================
   ROZDIEL PRI MODULOCH
   ====================================================================
   Dva stĺpce vedľa seba: vľavo bežné riešenie, vpravo my. Na telefóne
   pod sebou — v tomto poradí, aby po probléme hneď nasledovala
   odpoveď.

   Ľavý stĺpec je stlmený, nie neprečítateľný: „zašednuté" znamená
   menej výrazné. Kontrast textu zostáva nad hranicou čitateľnosti,
   inak by sekcia bola len ozdoba. */
.rozdiely { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.rozdiel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.rozdiel h3 {
  margin: 0;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-md);
}
.rozdiel-par { display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .rozdiel-par { grid-template-columns: 1fr 1fr; }
  .rozdiel-stlpec.je-nase { border-left: 1px solid var(--line); }
}
@media (max-width: 859px) {
  .rozdiel-stlpec.je-nase { border-top: 1px solid var(--line); }
}
.rozdiel-stlpec { padding: var(--sp-4); }
.rozdiel-stlpec.je-bezne { background: color-mix(in srgb, var(--muted) 5%, transparent); }
.rozdiel-stlpec.je-nase { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rozdiel-hlava {
  margin: 0 0 var(--sp-3);
  min-height: 22px;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.rozdiel-hlava .nase-znacka { text-transform: none; }
.rozdiel-hlava .logo-img { height: 20px; }
.rozdiel-stlpec ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.rozdiel-stlpec li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); line-height: 1.5; }
.rozdiel-stlpec li > span:last-child { flex: 1; min-width: 0; }
.rozdiel-stlpec.je-bezne li { color: var(--muted); }
.rozdiel-stlpec.je-nase li { color: var(--text); }

/* ====================================================================
   MENOVKY SCHOPNOSTÍ
   ====================================================================
   Rad kariet s ikonou, názvom schopnosti a jednou vetou. Nahradili
   štvoricu prevádzkových čísel, ktoré patrili konkrétnemu klientovi,
   nie produktu.

   Ikona má vlastnú plochu s akcentovým podfarbením — bez nej sa rad
   šiestich odsekov číta ako zoznam a nie ako prehľad. */
.odznaky {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.odznak {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.odznak-ikona {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  /* PODFARBENIE MUSÍ BYŤ VIDIEŤ, INAK IKONA SPLÝVA S KARTOU.
     Pri 14 % akcentu bola plocha ikony na svetlej karte takmer biela
     a na tmavej takmer čierna — ikona vyzerala, akoby ju niekto
     zabudol dokresliť. Rám dodá hranu aj tam, kde je podklad blízko
     farbe karty. */
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent-text);
}
.odznak-ikona svg { width: 20px; height: 20px; stroke-width: 1.9; }
.odznak b { display: block; margin-bottom: 3px; font-size: var(--fs-md); }
.odznak span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }

/* ====================================================================
   NÁHĽAD APLIKÁCIE
   ====================================================================
   Náhľad je vykreslený v HTML a CSS, nie obrázok. Tri dôvody:
   je ostrý na každom displeji, prekladá sa spolu so stránkou a
   neobsahuje ani jeden údaj skutočného zákazníka.                 */
.shot {
  position: relative;
  margin-top: var(--sp-7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  /* DVE VRSTVY, NIE JEDNA.
     Prvá je tieň — hovorí, že náhľad leží nad plochou. Druhá je
     rozptýlené podfarbenie (`--halo`): veľký polomer, veľký rozptyl,
     nízka priehľadnosť. Robí okolo rámu mäkký prechod do stratena,
     takže sa náhľad oddelí od pozadia aj tam, kde má s ním takmer
     rovnaký jas. Podfarbenie sa píše ako tieň zámerne — pseudoprvok
     by `overflow: hidden` na tomto prvku orezal. */
  box-shadow: var(--shadow-lg), 0 0 100px 36px var(--halo);
  overflow: hidden;
}

/* ====================================================================
   NAKLONENÁ PLÁVAJÚCA KARTA
   ====================================================================
   Rovinný obdĺžnik uprostred textu pôsobí ako vložený obrázok.
   Jemné otočenie okolo zvislej osi z neho spraví PREDMET, ktorý na
   stránke leží — a oko ho prečíta ako ukážku produktu, nie ako
   ilustráciu.

   Naklonenie je v CSS, NIE vo videu. Keby sa zapieklo do záznamu,
   bolo by natrvalo, na mobile by prekážalo a pri každej zmene by sa
   muselo prefotiť všetkých štrnásť scén. Takto je to jedno pravidlo.

   Uhol je malý (7°). Väčší je efektný na snímke z prezentácie a
   nepríjemný pri čítaní skutočného textu na obrazovke.

   `.je-vpravo` je zrkadlový variant pre striedavé rozloženie — karta
   sa nakláňa vždy „od stredu stránky", nie stále na tú istú stranu. */
.karta-3d {
  perspective: 1400px;
  perspective-origin: 50% 40%;
}
.karta-3d > .shot {
  margin-top: 0;
  transform: rotateY(7deg) rotateX(1.5deg);
  transform-origin: 50% 50%;
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, .45),
    0 8px 20px -8px rgba(0, 0, 0, .3),
    0 0 100px 38px var(--halo);
  transition: transform .5s cubic-bezier(.22, .8, .3, 1);
}
.karta-3d.je-vpravo > .shot { transform: rotateY(-7deg) rotateX(1.5deg); }
/* Pri prejdení myšou sa karta narovná — drobná odmena za pozornosť
   a zároveň spôsob, ako si obsah prečítať bez skreslenia. */
.karta-3d:hover > .shot { transform: rotateY(0) rotateX(0) translateZ(12px); }

/* Kto má v systéme obmedzený pohyb, nedostane ani naklonenie ani
   prechod — je to ozdoba a pre časť ľudí zdroj nevoľnosti. */
@media (prefers-reduced-motion: reduce) {
  .karta-3d > .shot,
  .karta-3d.je-vpravo > .shot,
  .karta-3d:hover > .shot { transform: none; transition: none; }
}
/* Na úzkej obrazovke sa nenakláňa nič: karta zaberá celú šírku
   a otočenie by jej odrezalo okraj. */
@media (max-width: 720px) {
  .karta-3d > .shot,
  .karta-3d.je-vpravo > .shot { transform: none; }
}

/* Video v karte. `poster` sa ukáže, kým sa video nestiahne; kto má
   prehrávanie vypnuté, uvidí ten obrázok natrvalo a nepríde o nič
   podstatné — preto je poster snímka z tej istej scény. */
/* NÁHĽAD VIDEA AKO POZADIE PRVKU.
   Adresy dodáva šablóna v premenných `--nahlad-svetly` a
   `--nahlad-tmavy`; ktorá sa použije, rozhoduje tá istá kaskáda ako
   pri zvyšku stránky. `poster` to nedokázal — má jedinú hodnotu, takže
   na opačnom systéme bliklo. Obrátený záber (`data-video-opacny`) má
   dvojicu vymenenú, rovnako ako svoj zdroj. */
.shot video {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--surface-2);
  background-image: var(--nahlad-svetly);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
/* VIDEO SA UKÁŽE AŽ VTEDY, KEĎ HRÁ SPRÁVNY SÚBOR.
   Náhľad na pozadí sa riadi zvoleným motívom, zdroj videa sa vyberá
   podmienkou `media`, ktorá pozná iba nastavenie SYSTÉMU. Keď sa tie
   dve líšia (návštevník si na stránke zvolil opak toho, čo má
   v systéme), skript zdroj vymení a zavolá `load()` — a medzitým je
   na obrazovke pár snímok toho druhého motívu.

   Priehľadné video s prechodom to zakryje: kým nie je pripravené,
   vidno náhľad, ktorý je od začiatku správny. Bez skriptu sa trieda
   nedoplní nikdy, preto ju ruší aj `:not([data-video-lenive])` — video
   bez lenivého načítania sa musí zobraziť aj vtedy. */
.shot video[data-video-kluc] { opacity: 0; transition: opacity 0.25s ease; }
.shot video.je-pripravene { opacity: 1; }
/* Bez JavaScriptu sa trieda nedoplní — video musí byť vidieť aj tak. */
html:not(.ma-skript) .shot video[data-video-kluc] { opacity: 1; }
.shot video[data-video-opacny] { background-image: var(--nahlad-tmavy); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .shot video { background-image: var(--nahlad-tmavy); }
  :root:not([data-theme='light']) .shot video[data-video-opacny] { background-image: var(--nahlad-svetly); }
}
:root[data-theme='dark'] .shot video { background-image: var(--nahlad-tmavy); }
:root[data-theme='dark'] .shot video[data-video-opacny] { background-image: var(--nahlad-svetly); }
:root[data-theme='light'] .shot video { background-image: var(--nahlad-svetly); }
:root[data-theme='light'] .shot video[data-video-opacny] { background-image: var(--nahlad-tmavy); }

/* ====================================================================
   MOBILNÉ VIDEO V RÁME TELEFÓNU
   ====================================================================
   Záznam z telefónu vložený do okna prehliadača si protirečí — divák
   vidí adresný riadok nad obrazovkou, ktorá žiadny nemá. Mobilné
   scény preto dostanú rám telefónu a lišta prehliadača sa vynechá.

   Šírka je obmedzená: záznam má 430 px a roztiahnutý na šírku stĺpca
   by bol rozmazaný. */
.shot-mobil {
  max-width: 320px;
  margin-inline: auto;
  border: 10px solid var(--surface-3);
  border-radius: 34px;
  padding: 0;
  overflow: hidden;
  background: var(--surface-3);
}
.shot-mobil video { border-radius: 24px; }
.shot-mobil.shot-opacny { border-color: var(--telo-opacne); background: var(--telo-opacne); }
@media (max-width: 720px) { .shot-mobil { max-width: 260px; } }

/* Široké video cez celú šírku obsahu — pre scénu, ktorá ukazuje
   celý proces a v stĺpci by sa stratila. */
.video-siroke { max-width: var(--page); margin-inline: auto; }
.video-siroke .shot { margin-top: 0; }
.shot-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.shot-dots { display: flex; gap: 6px; }
.shot-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.shot-url {
  margin-left: var(--sp-2);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-style: normal;
}
/* Široký náhľad sa posúva VNÚTRI seba. Telo stránky sa neposúva nikdy. */
.shot-body { overflow-x: auto; }
.shot-canvas { min-width: 720px; padding: var(--sp-4); }

/* Snímka vypĺňa rámček celá. `aspect-ratio` drží miesto ešte pred
   načítaním, takže sa obsah pod obrázkom pri dotiahnutí NEPOSUNIE —
   poskakujúca stránka je najviditeľnejší prejav pomalého webu. */
.shot picture, .shot img { display: block; width: 100%; }
.shot img { aspect-ratio: 5 / 3; object-fit: cover; object-position: top center; }

/* VÝREZ SI NESIE VLASTNÝ TVAR.
   Snímka celej obrazovky má vždy 5 : 3, takže pravidlo vyššie jej nič
   neoreže. Výrez má pomer podľa toho, čo z obrazovky vybral — jeden je
   široký pás tabuľky, iný takmer štvorec. Vnútiť mu 5 : 3 znamená
   odrezať práve tie okraje, kvôli ktorým vznikol; namerané na
   podstránke modulov, kde z tabuľky dopravcov zostal stred bez prvého
   stĺpca. Rozmery dopĺňa šablóna z `content/vyrezy.json`. */
.shot-vyrez img { aspect-ratio: auto; object-fit: contain; height: auto; }

/* Trojica snímok pod sebou. Na širokej obrazovke vedľa seba, na
   telefóne pod sebou — a nikdy menšie než sa dá prečítať.

   NAJVIAC DVA STĹPCE.
   Pri `320px` sa na širokej obrazovke vošli tri karty a na jednu tak
   pripadlo ~330 px. Do takej šírky sa nedá zmestiť čitateľný výrez
   aplikácie ani po orezaní — písmo vyjde asi na tretinu pôvodnej
   veľkosti a záber je opäť len „nejaký systém". Dve karty dávajú
   ~515 px, čo je s výrezom na jednu panelovú oblasť práve dosť. */
.shot-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}
@media (min-width: 1100px) {
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
}
.shot-card { margin: 0; }
.shot-card .shot { margin-top: 0; box-shadow: var(--shadow-md), 0 0 76px 28px var(--halo); }
.shot-card figcaption {
  margin-top: var(--sp-3);
  color: var(--soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.shot-card figcaption b { color: var(--text); }

/* ====================================================================
   PRODUKTOVÉ PRÍBEHY
   ====================================================================
   Jeden veľký záber na riadok s textom vedľa, strany sa striedajú
   (`.flip`). Mriežka troch kariet ukazuje produkt ako katalóg; príbeh
   ukazuje jednu vec naraz a dá sa pri nej prečítať, čo rieši.

   Na úzkej obrazovke sa poradie NEOTÁČA: text vždy pred snímkou, aby
   čitateľ vedel, na čo sa díva, skôr než to uvidí. Pri `.flip` by
   `grid-auto-flow` na mobile inak vysypal obrázok navrch. */
.stories { display: grid; gap: var(--sp-7); }
.story {
  margin: 0;
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}
.story .shot { margin-top: 0; box-shadow: var(--shadow-md); }
.story-text h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.story-text p { color: var(--soft); margin-bottom: var(--sp-3); }
/* Dotykový cieľ 44 px aj pri jednoriadkovom texte — samotný odkaz mal
   22 px a na telefóne sa doň trafí len s presnosťou, ktorú palec nemá. */
.story-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

@media (min-width: 900px) {
  .story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); }
  /* Prehodenie strán cez `order`, nie cez zmenu poradia v HTML —
     čítačka obrazovky aj poradie tabulátora zostávajú rovnaké. */
  .story.flip .story-text { order: 2; }
  .story.flip .shot { order: 1; }
}

/* Vernou kópiou pásu kariet z aplikácie — vrátane toho, že si nesie
   vlastný podklad (oprava z 2026-08-03). */
.ui-tabs {
  display: flex;
  gap: 2px;
  padding: var(--sp-1) var(--sp-1) 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.ui-tab {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-bottom-color: transparent;
  border-top: 3px solid transparent;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: -1px;
  white-space: nowrap;
}
.ui-tab.on {
  border-top-color: var(--accent);
  background: var(--surface);
  border-bottom-color: var(--surface);
  color: var(--text);
  font-weight: 650;
}
.ui-rows { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.ui-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.ui-row b { font-weight: 650; }
.ui-row small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.ui-badge {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--soft);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.ui-badge.ok { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.ui-badge.warn { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.ui-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ui-kpi { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.ui-kpi b { display: block; font-size: 1.35rem; letter-spacing: -0.02em; }
.ui-kpi span { color: var(--muted); font-size: var(--fs-xs); }

/* ====================================================================
   KARTY
   ==================================================================== */
.card {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card p { color: var(--soft); font-size: var(--fs-sm); margin: 0; }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.card-icon svg { width: 20px; height: 20px; }

/* Stavová menovka modulu. Bez nej by zoznam tvrdil, že všetko je
   hotové — a to by bol presne ten druh sľubu, ktorý sa vypomstí. */
.state {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 600;
  vertical-align: 2px;
  white-space: nowrap;
}
.state.live { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.state.beta { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.state.planned { color: var(--muted); }

/* ====================================================================
   ČÍSLA
   ==================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.stat b { display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; }
.stat span { color: var(--muted); font-size: var(--fs-sm); }

/* ====================================================================
   POZNÁMKA — rovnaká reč tvarov ako v aplikácii
   ==================================================================== */
.note {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--note-c, var(--line-strong));
  border-radius: var(--r-sm);
  background: var(--note-bg, var(--surface-2));
  color: var(--soft);
  font-size: var(--fs-sm);
}
.note strong { color: var(--text); }
.note.warn { --note-c: var(--warn); --note-bg: color-mix(in srgb, var(--warn) 10%, transparent); }
.note.info { --note-c: var(--accent); --note-bg: var(--accent-soft); }

/* ====================================================================
   ČASTÉ OTÁZKY
   ====================================================================
   `<details>` zámerne: otváranie rieši prehliadač, funguje bez
   JavaScriptu a vyhľadávač vidí odpoveď v texte, nie až po kliknutí. */
/* `margin-inline: auto` NIE JE kozmetika.
   Nadpis sekcie nad zoznamom je vycentrovaný (`.section-head`), takže
   bez toho visel blok otázok pri ľavom okraji a pôsobil ako chyba
   rozloženia — nahlásené 2026-08-05. */
.faq {
  display: grid;
  gap: var(--sp-2);
  max-width: var(--prose);
  margin-inline: auto;
}
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq .faq-a { padding: 0 var(--sp-4) var(--sp-4); color: var(--soft); font-size: var(--fs-sm); }

/* ====================================================================
   CENNÍK
   ==================================================================== */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
/* Odporúčaná tarifa je zvýraznená rámom, nie väčším rozmerom — väčšia
   karta rozhodí zarovnanie ostatných a na telefóne stratí zmysel.

   Zosilnenie ide cez `box-shadow`, nie cez hrubší `border`: prstenec
   sa kreslí MIMO toku, takže karta si drží presne tie isté vnútorné
   rozmery ako susedia. Dvojpixlový rám by obsah stlačil o dva pixle
   a nadpisy štyroch kariet by prestali sedieť na jednej linke —
   presne to, čomu bráni poznámka o plaketke o pár riadkov nižšie. */
.plan.hi {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-lg);
}
/* Tlačidlo odporúčanej tarify je o ~14 % vyššie (44 → 50 px). Nie je to
   ozdoba: je to jediný prvok, ktorým sa dá povedať „týmto začnite",
   bez toho, aby sa musela zväčšiť celá karta. */
.plan.hi .plan-cta {
  min-height: 50px;
  padding: 14px 22px;
  font-size: var(--fs-base);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--plan-cta, var(--accent)) 42%, transparent);
}
/* PLAKETKA NESMIE POSÚVAŤ OBSAH KARTY.
   Kým bola v toku, tlačila nadpis a cenu odporúčanej tarify nižšie než
   pri susedoch — tri karty vedľa seba mali tri rôzne výšky nadpisu
   a oko nemalo na čom porovnávať. Namerané: rozdiel jeden riadok.

   Je preto vyňatá z toku a sedí na hornej hrane. Všetky tri karty majú
   rovnaké horné odsadenie, takže nadpisy sedia na jednej linke. */
.plan-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.plan h3 { margin-bottom: var(--sp-1); font-size: var(--fs-lg); }
.plan-tagline { color: var(--muted); font-size: var(--fs-sm); min-height: 3em; }
.plan-price { margin: var(--sp-4) 0 var(--sp-2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-price b { font-size: 2.1rem; letter-spacing: -0.03em; line-height: 1; }
.plan-price span { color: var(--muted); font-size: var(--fs-sm); }
/* Prepínač frekvencie platby. Centruje sa spolu s tarifami pod ním —
   zarovnaný vľavo sa nad vycentrovanými kartami vizuálne utrhol.
   Na úzkej obrazovke sa poznámka o mesiacoch zdarma zalomí pod
   prepínač, nie vedľa neho. */
.billing-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); text-align: center;
}
/* Fakturovaná ročná suma — ukazuje sa len pri ročnom prepínači.
   `[hidden]` výslovne, inak triedna špecificita zremizuje s UA pravidlom
   a element zostane viditeľný. */
.plan-yeartotal { margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); color: var(--muted); font-size: var(--fs-xs); }
.plan-yeartotal[hidden] { display: none; }
.plan-limits { margin: 0 0 var(--sp-4); padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); color: var(--soft); }
.plan-limits li { list-style: none; }
.plan ul { margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: 7px; }
.plan-features li {
  list-style: none;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--soft);
}
.plan-features li::before { content: '✓'; color: var(--success); font-weight: 700; }
.plan .btn { margin-top: auto; }

.toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.toggle button {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.toggle button[aria-pressed='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ====================================================================
   ZOZNAMY MENOVIEK (dopravcovia, platformy, platby)
   ==================================================================== */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0; list-style: none; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--soft);
}
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: 0 0 auto; }
.tag.soon { color: var(--muted); }
.tag.soon i { background: var(--line-strong); }

/* ====================================================================
   CITÁT
   ==================================================================== */
.quote {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.quote blockquote { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); line-height: 1.55; }
/* Podpis pod referenciou je pružný riadok: logo, meno, popis. Na
   úzkej obrazovke sa popis musí zalomiť pod meno — bez `flex-wrap`
   a `min-width: 0` ho flexbox nezmenšil pod šírku textu a pri 320 px
   pretiekol o 10 px (namerané 2026-08-05). */
.quote figcaption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  min-width: 0;
}
.quote figcaption span { min-width: 0; }
.quote figcaption b { color: var(--text); }
.quote-logo { height: 30px; width: auto; flex: 0 0 auto; }
.quote-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .quote-logo-light { display: none; }
  :root:not([data-theme='light']) .quote-logo-dark { display: block; }
}
:root[data-theme='dark'] .quote-logo-light { display: none; }
:root[data-theme='dark'] .quote-logo-dark { display: block; }
:root[data-theme='light'] .quote-logo-light { display: block; }
:root[data-theme='light'] .quote-logo-dark { display: none; }
.quote figcaption span { color: var(--muted); }

/* ====================================================================
   VÝZVA K AKCII NA KONCI
   ==================================================================== */
.cta-band {
  padding: var(--sp-7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface);
  text-align: center;
}
.cta-band p { max-width: 56ch; margin-inline: auto; color: var(--soft); }

/* ====================================================================
   FORMULÁRE
   ==================================================================== */
.form { display: grid; gap: var(--sp-4); max-width: 560px; }
/* Formulár, ktorý stojí sám v strede obrazovky, má byť v strede aj
   fyzicky — inak sa vycentrovaný nadpis a ľavý formulár rozídu. */
.form-center { margin-inline: auto; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 11px var(--sp-3);
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.check { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-2); align-items: start; font-size: var(--fs-sm); color: var(--soft); }
.check input { width: 18px; height: 18px; min-height: 0; margin-top: 3px; }
/* Informačná veta o spracovaní údajov pod formulárom.
   Zámerne TICHÁ: nie je to voľba ani upozornenie, je to splnenie
   informačnej povinnosti. Keby vyzerala ako súhlas, znovu by z nej
   robila rozhodnutie, ktorým nie je. */
.form-privacy-note { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.form-privacy-note a { color: inherit; text-decoration: underline; }
.form-privacy-note a:hover { color: var(--accent); }
/* Pasca na roboty. Musí byť skrytá pre oči aj pre čítačku obrazovky,
   ale NIE cez `display: none` — časť robotov taký prvok preskočí. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  /* NIE `left: -9999px`: prvok mimo plátna rozšíri stránku doľava
     a meranie potom hlási vodorovné pretečenie, ktoré nikto nevidí,
     ale ktoré je skutočné. Orezanie na jeden pixel má rovnaký účinok
     bez tohto vedľajšieho efektu. */
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ====================================================================
   BLOG
   ==================================================================== */
.posts { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.post-card { display: flex; flex-direction: column; }
/* ====================================================================
   TITULNÝ OBRÁZOK ČLÁNKU (2026-08-21)
   ====================================================================
   Karta bola dovtedy samý text a päť kariet vedľa seba splývalo.
   Obrázok drží pomer 1200×630, takže sa karta pri načítaní nepohne
   (`width`/`height` sú v značke, `aspect-ratio` tu) a obrázok sa
   nikdy neroztiahne do vlastného pomeru.

   Odkaz okolo obrázka je pre myš, nie pre klávesnicu ani pre čítačku
   obrázka: nadpis vedie na to isté miesto a dva rovnaké odkazy za
   sebou sú v prechode tabulátorom zdržanie. Preto `tabindex="-1"`,
   `aria-hidden` a prázdny `alt`. */
.post-thumb {
  display: block;
  /* Odsadenie karty je `--sp-5`; obrázok ho vyruší presne o toľko,
     takže sedí na hrane karty a nie v ráme z prázdna. */
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  background: var(--surface-3);
}
.post-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.post-card .meta { color: var(--muted); font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
.post-card h3 { font-size: var(--fs-lg); }
.post-card .more { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 650; }

.prose { max-width: var(--prose); }
.prose h2 { margin-top: var(--sp-7); font-size: var(--fs-xl); }
.prose h3 { margin-top: var(--sp-5); font-size: var(--fs-lg); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 var(--sp-4); }
.prose li { margin-bottom: 6px; color: var(--soft); }
.prose p { color: var(--soft); }
.prose > p:first-of-type { font-size: var(--fs-lg); color: var(--text); }
/* ====================================================================
   SNÍMKA A TABUĽKA V ČLÁNKU (2026-09-02)
   ====================================================================
   Prípadová štúdia má namiesto kreslenej obálky snímku z aplikácie
   a v texte tabuľky (nástroje, rozsahy). Tabuľka preberá vzhľad
   porovnávacej tabuľky cenníka, aby článok nezaviedol tretí vzhľad
   tabuľky; hlavička v článku nie je prilepená, lebo tabuľka je krátka
   a prilepená hlavička by v úzkom stĺpci prekryla text pod ňou. */
.prose .post-cover { margin: 0 0 var(--sp-5); }
.prose .post-cover img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-3); }
.prose .table-scroll { margin: 0 0 var(--sp-4); }
.prose .prose-table { min-width: 520px; }
.prose .prose-table thead th { position: static; }
.prose .prose-table th[scope="row"] { color: var(--text); }
.prose .prose-table td { color: var(--soft); }

/* ====================================================================
   PÄTIČKA
   ==================================================================== */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: var(--sp-7) var(--sp-5); margin-top: var(--sp-8); }
/* `auto-fit` s `minmax(min(100%, …))` rieši všetky šírky naraz. Pôvodné
   rozloženie malo prvý stĺpec pevne a tri ďalšie po 140 px — súčet
   prerástol telefón o 58 px a stránka sa posúvala do strán (namerané
   448 > 390). Pevné stĺpce v pätičke sa preto nepoužívajú. */
.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.footer .logo-img { height: 26px; }
.footer h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: var(--sp-3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer a { color: var(--soft); font-size: var(--fs-sm); }
.footer a:hover { color: var(--text); }
.footer-tagline { color: var(--muted); font-size: var(--fs-sm); max-width: 40ch; }
/* Dva riadky, nie jeden pružný.
   ------------------------------------------------------------------
   Pri jednom riadku si dlhý text o autorských právach vzal väčšinu
   šírky a menovky platobných metód sa stlačili do úzkeho stĺpca —
   päť pilulek pod sebou pri pravom okraji. Pevné poradie riadkov je
   predvídateľné na každej šírke. */
/* ÚDAJE PREVÁDZKOVATEĽA V PÄTIČKE.
   Sú to povinné údaje, nie ozdoba — a zároveň prvé miesto, kam sa
   pozrie ten, kto zvažuje, či firme zveriť prevádzku e-shopu. Preto
   sú čitateľné, nie stlačené do jedného riadka drobným písmom. */
.footer-prevadzkovatel {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.footer-prevadzkovatel p { margin: 0; }
.footer-prevadzkovatel strong { color: var(--text); }
.footer-prevadzkovatel a { color: var(--muted); }
.footer-prevadzkovatel a:hover { color: var(--text); }

.footer-bottom {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
}
/* PLATOBNÉ ZNAČKY
   ------------------------------------------------------------------
   Pôvodne to bol rad textových menoviek rôznej dĺžky — nedal sa
   zarovnať a v pätičke sa rozsypal do stĺpca. Každá značka teraz sedí
   v rovnakom rámčeku 40 × 26, takže rad je zarovnaný bez ohľadu na to,
   aká široká je samotná kresba. */
/* `.footer ul` vyššie nastavuje `display: grid` pre VŠETKY zoznamy
   v pätičke a má vyššiu špecificitu (0,1,1) než samotná trieda (0,1,0) —
   preto sa značky zoradili pod seba namiesto do radu. Selektor musí byť
   rovnako konkrétny, nie `!important`. */
.footer .pays,
.pays {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--soft);
}
.pay svg { width: 100%; height: 100%; }
.footer-bottom .tag { padding: 3px 9px; font-size: var(--fs-xs); }

/* ====================================================================
   LIŠTA SÚHLASU
   ====================================================================
   Ukotvená dole, nie cez celú obrazovku. Prekryv celej stránky je
   nátlak, nie voľba — a na telefóne zakryje aj obsah, kvôli ktorému
   návštevník prišiel. Odmietnutie je rovnako dostupné ako súhlas. */
.consent {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 80;
  max-width: 560px;
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.consent[hidden] { display: none; }
.consent h4 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.consent p { color: var(--soft); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.consent .btn-row { align-items: center; }
.consent-opts { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.consent-opts[hidden] { display: none; }

@media (max-width: 560px) {
  .consent { left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); padding: var(--sp-4); }
  .consent .btn { flex: 1 1 100%; }
}

/* ====================================================================
   TLAČ
   ==================================================================== */
@media print {
  .header, .footer, .consent, .btn-row { display: none; }
  body { background: #fff; color: #000; }
}

/* ====================================================================
   PODROBNÉ POROVNANIE TARÍF
   ====================================================================
   Zbalené v `<details>` pod kartami. Rozbalí si ho ten, kto porovnáva
   podrobne — a to je menšina návštevníkov. Rozbalené by z cenníka
   spravilo tabuľku, v ktorej sa stratí to podstatné: ktorá tarifa je
   moja.

   Na úzkej obrazovke sa tabuľka posúva VO VLASTNOM RÁMCI, nie celá
   stránka. Vodorovný posuv celej stránky je najčastejšia chyba
   responzívnych tabuliek a znamená, že sa nedá prečítať nič — ani text
   nad tabuľkou. */

/* ZBALENÉ PODROBNOSTI, NIE ZATVORENÁ TABUĽKA (2026-08-08).
   Predtým bolo celé porovnanie v `<details>`, teda za jedným kliknutím
   a bez akéhokoľvek náznaku, čo je vnútri. Kto nevie, že tam niečo je,
   to neotvorí — a tabuľka s tridsiatimi šiestimi riadkami je pritom
   hlavný podklad pre výber tarify.

   Teraz je vidieť začiatok (základné limity, teda to, čo rozhoduje
   najčastejšie), zvyšok sa jemne stráca pod zahmlením a tlačidlo pod
   ním povie, že pokračuje. */
.compare {
  margin-top: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.compare-title {
  margin: 0;
  padding: var(--sp-3) var(--sp-4) 0;
  font-size: var(--fs-md);
  font-weight: 650;
}
/* Popis skúšobnej verzie. Nemá kartu, takže toto je jediné miesto, kde
   sa návštevník dozvie, čo v nej je a ako dlho trvá. */
.compare-note {
  margin: 4px 0 0;
  padding: 0 var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Zbalenie zapína skript triedou `is-clamped`. Bez skriptu zostáva
   tabuľka celá viditeľná — skrátenie je pohodlie, nie podmienka. */
.compare-body.is-clamped {
  max-height: 22rem;
  overflow-y: hidden;
}
/* Zahmlenie je NAD tabuľkou a neprijíma klikanie — inak by pohltilo
   posúvanie práve v mieste, kde si ho človek chce potiahnuť. */
.compare-body.is-clamped::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  display: block;
  height: 5rem;
  margin-top: -5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface));
}
.compare-more {
  display: flex;
  justify-content: center;
  padding: var(--sp-3);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.table-scroll {
  overflow-x: auto;
  /* Bez tohto by prehliadač pri posúvaní tabuľky posúval aj stránku. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  /* Bez minimálnej šírky by sa stĺpce na mobile stlačili na jedno
     písmeno na riadok. Radšej posuv než nečitateľnosť. */
  min-width: 640px;
}
.compare-table th,
.compare-table td {
  padding: 10px var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.compare-table tbody th[scope="row"] { font-weight: 500; }
.compare-table td { color: var(--muted); }
/* NADPIS SKUPINY JE PREDEL, NIE ĎALŠÍ RIADOK TABUĽKY.
   Pri veľkosti `--fs-xs`, zarovnaní vľavo a sedempercentnom podklade
   splýval s riadkami nad ním aj pod ním. Tabuľka má dvanásť skupín;
   keď sa ich začiatok nedá nájsť očami, návštevník listuje hore-dole
   a hľadá, kde sa skončila kapacita a začali automatizácie.

   Väčšie písmo, stred a sýtejší podklad z neho robia zreteľnú deliacu
   čiaru. `text-transform: uppercase` zostáva — verzálky na jednom
   riadku sa čítajú ako nadpis aj bez zmeny rezu. */
.compare-group th {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-top: 2px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  padding-block: 11px;
  text-align: center;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text);
  font-weight: 800;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .compare-group th {
    background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  }
}
:root[data-theme='dark'] .compare-group th {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
}

/* PRUHOVANIE. Tabuľka má päť stĺpcov a tridsaťšesť riadkov — oko je na
   ceste zľava doprava ľahko o riadok vedľa. `of tr:not(.compare-group)`
   vynecháva nadpisy skupín, aby striedanie nepreskakovalo zakaždým, keď
   sa začne nová skupina. */
.compare-table tbody tr:nth-child(even of tr:not(.compare-group)) td,
.compare-table tbody tr:nth-child(even of tr:not(.compare-group)) th[scope="row"] {
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
}

/* Číslo je to, čo návštevník porovnáva; pomlčka znamená „toto tu nie je"
   a má ustúpiť. Triedu prideľuje generátor podľa tvaru hodnoty, nie
   podľa jazyka (viď `triedaHodnoty` v templates/pages/pricing.mjs). */
.compare-table td.is-num { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.compare-table td.is-no { color: color-mix(in srgb, var(--muted) 60%, transparent); }

/* Odporúčaná tarifa a skúšobná verzia sa odlíšia CELÝM STĹPCOM. Farbí
   sa cez `<colgroup>` — jedno pravidlo namiesto triedy na štyridsiatich
   bunkách. Pozadie stĺpca leží POD pozadím buniek, takže pruhovanie
   zostáva viditeľné aj v ňom. */
.compare-table col.is-highlight { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.compare-table col.is-trial { background: color-mix(in srgb, var(--ok, var(--accent)) 6%, transparent); }
.compare-table thead th { border-bottom: 2px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }

@media (max-width: 720px) {
  .compare-table th,
  .compare-table td { padding: 8px var(--sp-2); }
}

/* ====================================================================
   DLAŽDICE, MIERKY A CENOVÉ RIADKY
   ====================================================================
   Tri spôsoby, ako ukázať číslo — každý pre inú otázku:

     .tiles       „koľko to stojí"  → tri ceny vedľa seba na porovnanie
     .meter-list  „koľko to berie"  → miera, kde rozdiel vidieť pred
                                       prečítaním čísla
     .price-rows  „čo stojí čo"     → dvojica názov ↔ suma

   Odrážkový zoznam by zvládol všetky tri, ale zle: núti čítať po
   riadkoch a rozdiel medzi 1 a 3 kreditmi sa v ňom stratí. */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-4);
  max-width: 46rem;
  /* Zarovnané na stred pod vycentrovaným nadpisom sekcie. */
  margin-inline: auto;
}
.tile {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tile-num {
  font-size: 1.9rem;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.tile-unit {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.tile-price {
  margin-top: var(--sp-2);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft, var(--bg));
  color: var(--accent-text);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.hint-center {
  max-width: var(--prose);
  margin: var(--sp-4) auto 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.meter-list,
.price-rows {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: grid;
  gap: 10px;
}
.meter-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.meter-list strong { min-width: 1.4rem; text-align: right; }

/* Mierka z bodiek. `aria-hidden` v značkách — číslo vedľa nesie ten
   istý údaj a čítačka obrazovky nemá čo robiť s piatimi prázdnymi
   prvkami. */
.dots { display: inline-flex; gap: 4px; }
.dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .85;
}

.price-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm);
}
.price-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.price-rows strong { font-size: var(--fs-md); white-space: nowrap; }

@media (max-width: 480px) {
  .tile { padding: var(--sp-4) var(--sp-3); }
  .tile-num { font-size: 1.6rem; }
  /* Bodky sa na najužšej obrazovke skryjú — pri troch stĺpcoch by
     stlačili názov úkonu na dve písmená na riadok. Číslo zostáva. */
  .dots { display: none; }
  .meter-list li { grid-template-columns: 1fr auto; }
}

/* ====================================================================
   KONFIGURÁTOR
   ====================================================================
   Dva stĺpce: vľavo voľby, vpravo výsledok. Výsledok je UKOTVENÝ —
   pri štvrtom kroku by inak zmizol hore a človek by nevidel, čo mu
   voľba spravila s cenou. Práve to je celý zmysel konfigurátora.

   Na úzkej obrazovke sa stĺpce skladajú pod seba a výsledok sa ukotví
   DOLE: na mobile je hore mimo dohľadu rovnako ako v strede stránky. */

.konfig {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 900px) {
  .konfig { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); }
  .konfig-vysledok { position: sticky; top: var(--sp-5); }
}

.konfig-vstupy { display: grid; gap: var(--sp-5); min-width: 0; }

.konfig-krok {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.konfig-krok h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
}
.konfig-cislo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.konfig-popis { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }

/* Ciele ako menovky. Radiobutton je skrytý, ale NIE `display:none` —
   skrytý týmto spôsobom by zmizol aj klávesnici a čítačke obrazovky. */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: block;
  padding: 10px var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  /* Dotykový cieľ aj na najužšej obrazovke. */
  min-height: 42px;
  display: flex;
  align-items: center;
}
.chip input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 650;
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.konfig-polia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--sp-4);
  /* ==================================================================
     POLIA SA MUSIA ZAROVNAŤ VODOROVNE
     ==================================================================
     Každé pole má menovku, vstup a nápovedu — a nápovedy sú rôzne
     dlhé. Kým bolo každé pole vlastnou mriežkou, vstupy sa posunuli
     podľa toho, na koľko riadkov sa zalomil text nad nimi, a dve
     políčka vedľa seba nesedeli. Nahlásené 12. 8. 2026.

     Tri zdieľané riadky (`subgrid`) to riešia bez pevných výšok:
     menovky sú v prvom riadku, vstupy v druhom, nápovedy v treťom —
     naprieč všetkými stĺpcami. Prehliadač bez podpory `subgrid`
     vykreslí to, čo doteraz; je to zhoršenie vzhľadu, nie funkcie. */
  grid-template-rows: auto auto auto;
  align-items: start;
}
.konfig-pole {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 4px;
  min-width: 0;
}

/* Zaškrtávacie voľby: menia ODHAD doplatkov, nie odporúčanú tarifu. */
.konfig-volby { display: grid; gap: var(--sp-3); }
.konfig-volba {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
}
.konfig-volba input { margin-top: 3px; }
.konfig-volba b { display: block; font-size: var(--fs-sm); font-weight: 650; }
.konfig-volba .konfig-napoveda { display: block; margin-top: 2px; }
/* Pole patriace k zaškrtnutiu — odsadené, aby bolo vidieť, k čomu patrí. */
.konfig-pole--vnorene { margin-left: 26px; max-width: 260px; }
.konfig-pole label { font-size: var(--fs-sm); font-weight: 650; }
.konfig-pole input,
.konfig-pole select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  min-height: 42px;
}
.konfig-napoveda { color: var(--muted); font-size: var(--fs-xs); }

/* Triedy `.konfig-moduly`, `.konfig-modul*` a `.konfig-zavislosti` boli
   odstránené 12. 8. 2026 spolu s modulárnym predajom. Konfigurátor už
   nič neskladá — odporúča tarifu. */

.konfig-vysledok {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}
.konfig-vysledok h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-lg);
}
.konfig-tarifa { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.konfig-cena { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.konfig-cena b {
  font-size: 2.4rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1;
}
.konfig-cena span { color: var(--muted); font-size: var(--fs-sm); }

.konfig-zahrnute { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.konfig-zahrnute li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-sm);
  color: var(--soft);
}
.konfig-zahrnute li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success, var(--accent));
  font-weight: 700;
}

/* ====================================================================
   DRUHÉ ČÍSLO: ČO SA DOÚČTUJE NAD LIMITY
   ====================================================================
   Nahradilo `.konfig-uspora`, ktorá porovnávala tarifu s vlastnou
   zostavou modulov. Zostava sa už nepredáva, takže niet čo porovnávať —
   zaujímavé je, koľko tarifa STOJÍ pri zadanom objeme.

   Rozpis je zámerne tichší než súčet: zákazník má najprv vidieť sumu
   a až potom, ak chce, z čoho vznikla. */
.konfig-doplatky {
  display: grid;
  gap: var(--sp-2, 8px);
  padding: var(--sp-3);
  border-radius: var(--r-sm, 8px);
  background: var(--bg);
}
.konfig-doplatky[hidden] { display: none; }
.konfig-doplatky h3 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 650;
}
.konfig-rozpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: var(--fs-xs);
}
/* Súčet je to, čo si má návštevník odniesť — preto je jediný, ktorý má
   plnú farbu textu a tučný rez. */
.konfig-spolu {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 650;
}

/* Zdôvodnenie výberu. Bez neho je odporúčanie hádanie, ktoré si
   návštevník nemá ako preveriť. */
.konfig-preco {
  margin: 0;
  color: var(--soft);
  font-size: var(--fs-sm);
}
.konfig-preco:empty { display: none; }

.konfig-poznamka { margin: 0; color: var(--muted); font-size: var(--fs-xs); }

@media (max-width: 480px) {
  .konfig-krok, .konfig-vysledok { padding: var(--sp-4); }
  .konfig-cena b { font-size: 2rem; }
}

/* ====================================================================
   TOK RIEŠENIA
   ====================================================================
   Päť krokov v rade, so šípkou medzi nimi. Na úzkej obrazovke sa
   skladajú pod seba a šípka sa otočí — vodorovný posuv by z piatich
   krátkych slov spravil nečitateľný pás. */

.tok {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tok-nadpis {
  margin: 0 0 var(--sp-4);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.tok-kroky {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--sp-2);
  counter-reset: tok;
}
.tok-kroky li {
  flex: 1 1 9rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px);
  background: var(--bg);
  font-size: var(--fs-sm);
}
/* Šípka je `::after` na položke, nie samostatný prvok: prvok navyše by
   čítačka obrazovky prečítala ako prázdny zoznamový bod. */
.tok-kroky li::after {
  content: '→';
  position: absolute;
  right: calc(var(--sp-2) * -1);
  top: 50%;
  transform: translate(50%, -50%);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1;
}
.tok-kroky li:last-child::after { content: none; }

@media (max-width: 700px) {
  .tok-kroky { flex-direction: column; }
  .tok-kroky li::after {
    content: '↓';
    right: 50%;
    top: auto;
    bottom: calc(var(--sp-2) * -1);
    transform: translate(50%, 50%);
  }
}

/* ====================================================================
   JEDNO JADRO, VIAC MODULOV
   ====================================================================
   Jadro v strede, moduly okolo. Je to MRIEŽKA, nie obrázok: obrázok by
   sa nedal preložiť, na mobile by bol nečitateľný a pri pridaní modulu
   by ho musel niekto prekresliť.

   Na úzkej obrazovke sa mriežka zloží na zvislý zoznam — jadro zostane
   hore a poradie zostane zmysluplné. */

.jadro {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .jadro {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
  }
  /* Jadro zaberá stredné dva stĺpce prostredného radu — moduly ho tak
     obklopia zhora, zdola aj z bokov. */
  .jadro-stred { grid-column: 2 / 4; grid-row: 2; }
  .jadro-modul:nth-child(2) { grid-column: 1; grid-row: 1; }
  .jadro-modul:nth-child(3) { grid-column: 2; grid-row: 1; }
  .jadro-modul:nth-child(4) { grid-column: 3; grid-row: 1; }
  .jadro-modul:nth-child(5) { grid-column: 4; grid-row: 1; }
  .jadro-modul:nth-child(6) { grid-column: 1; grid-row: 2; }
  .jadro-modul:nth-child(7) { grid-column: 4; grid-row: 2; }
  .jadro-modul:nth-child(8) { grid-column: 2; grid-row: 3; }
  .jadro-modul:nth-child(9) { grid-column: 3; grid-row: 3; }
}

/* ================================================================
   BIELY TEXT NA AKCENTE NEPREJDE V OBOCH MOTÍVOCH
   ================================================================
   NAMERANÉ: pôvodná podoba mala bielu na `--accent`. V tmavom motíve
   je akcent svetlejší, takže podnadpis vyšiel na kontrast 2,78 : 1 —
   pod hranicou 4,5 : 1. Zvýšenie krytia by nepomohlo: aj plná biela
   dá pri tomto pozadí okolo 3 : 1.

   Jadro sa preto odlišuje RÁMOM a jemným podfarbením, nie prevrátenými
   farbami. Text zostáva v bežnej farbe, ktorá kontrast spĺňa v oboch
   motívoch — a dlaždica je aj tak jednoznačne iná než moduly okolo. */
.jadro-stred {
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-md);
  border: 2px solid var(--accent);
  background: var(--accent-soft, var(--surface));
  color: var(--text);
  min-height: 96px;
}
.jadro-stred strong { font-size: var(--fs-lg); color: var(--accent-text); }
.jadro-stred span { font-size: var(--fs-sm); color: var(--soft); }

.jadro-modul {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px);
  background: var(--surface);
  font-size: var(--fs-sm);
  min-width: 0;
}
.jadro-ikona { flex: 0 0 auto; display: grid; place-items: center; color: var(--accent-text); }
.jadro-ikona svg { width: 20px; height: 20px; }
.jadro-meno { min-width: 0; overflow-wrap: anywhere; }
.jadro-stav {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* ====================================================================
   PODĽA CIEĽA
   ====================================================================
   Zámerne NIE záložky. Bez JavaScriptu by záložky skryli štyri pätiny
   obsahu a stránka má fungovať aj bez neho. Päť kariet sa dá prečítať
   celých a na mobile je to rovnako rýchle. */

.ciele {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
}
.ciel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.ciel h3 { margin: 0; font-size: var(--fs-md); }
.ciel p { margin: 0; color: var(--soft); font-size: var(--fs-sm); }
.ciel .more { margin-top: auto; padding-top: var(--sp-2); }


/* ====================================================================
   ŽIVÝ NÁHĽAD V KONZOLE
   ====================================================================
   Prvok, ktorého pole má človek práve otvorené v editore. Obrys je
   mimo toku (`outline`, nie `border`), takže nič neposunie — text
   v označenom odseku sa nesmie preskladať len preto, že sa naň niekto
   pozerá. Na bežnej stránke sa tento stav nikdy nenastaví. */
[data-obsah-vybrane] {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ====================================================================
   PREPÍNAČ MENY
   ====================================================================
   Menší a tichší než prepínač obdobia. Obdobie je rozhodnutie o cene
   (dva mesiace zdarma), mena je len pohľad na tú istú cenu — a keby
   vyzerali rovnako dôležito, prvé by sa v ich dvojici stratilo. */
.toggle-mena {
  /* Rozdiel musí byť vidieť na PRVÝ pohľad, nie po zmeraní. Menšie
     písmo samo nestačilo — obe skupiny mali rovnakú výšku (40 px zo
     spoločného `.toggle button`), takže vedľa seba pôsobili rovnako
     dôležito. Nahlásené 12. 8. 2026. */
  padding: 2px;
  align-self: center;
}
.toggle-mena button {
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  padding: 4px 10px;
  min-height: 28px;
  font-weight: 500;
}

/* ==================================================================
   PRIPOJITEĽNÉ APLIKÁCIE
   ==================================================================
   Rozbaľovacie skupiny cez natívne `details`. Bez JavaScriptu: celý
   adresár `landing/` je čitateľný aj vtedy, keď sa skript nenačíta,
   a vlastné rozbaľovanie by tu nepridalo nič — natívne funguje
   klávesnicou, číta ho čítačka obrazovky a vyhľadávač vidí obsah aj
   v zatvorenom stave.

   Farebné ochranné známky (KROS, Fio, OpenAI) dostanú svetlú podložku,
   aby boli čitateľné aj v tmavej téme. Prefarbiť ich na jednu farbu
   nie je prípustné — je to cudzia značka, nie naša ikona. */
.integracie {
  display: grid;
  gap: var(--sp-3);
  max-width: 62rem;
  margin: 0 auto;
}

/* Titulka: konektor je výhoda iba vtedy, keď je pri ňom napísané, čo
   odpadne z práce. Auto-fit sa na desktope rozloží a na telefóne ostane
   v jednom čitateľnom stĺpci bez horizontálneho pásu log. */
.integracie-benefity {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
}
.integracia-benefit {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 58%),
    var(--surface);
  grid-column: span 2;
}
.integracia-benefit:nth-last-child(2):nth-child(4) { grid-column: 2 / span 2; }
.integracia-benefit h3 { margin: var(--sp-3) 0 var(--sp-2); }
.integracia-benefit p { margin: 0; color: var(--muted); }
.integracia-benefit-loga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
}
.integracia-logo.integracia-logo--mini { width: 3rem; height: 2.25rem; }
.integracia-logo.integracia-logo--mini img { max-height: 1.55rem; }
.integracia-logo.integracia-logo--platform {
  flex: 1 1 calc(50% - var(--sp-2));
  width: auto;
  max-width: 9rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.integracia-logo.integracia-logo--platform img {
  width: 100%;
  height: auto;
  max-width: 8.5rem;
  max-height: 3.4rem;
}
.integracie-benefit-cta { margin-top: var(--sp-5); }
#pripojitelne-aplikacie {
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.feature-area { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.integracia-skupina {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  overflow: hidden;
}
.integracia-skupina > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
/* Predvolený trojuholník preč — nahrádza ho vlastná šípka, ktorá sa
   otáča. Webkit ho skrýva iba cez tento vlastný pseudoprvok. */
.integracia-skupina > summary::-webkit-details-marker { display: none; }
.integracia-skupina > summary:hover { background: var(--surface-2); }
.integracia-skupina > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.integracia-skupina-nazov { flex: 1 1 auto; }
.integracia-pocet {
  flex: 0 0 auto;
  min-width: 1.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
}
.integracia-sipka {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.integracia-skupina[open] .integracia-sipka { transform: rotate(-135deg); }
.integracia-popis {
  margin: 0;
  padding: 0 var(--sp-5) var(--sp-3);
  color: var(--muted);
  font-size: 0.95rem;
}
.integracia-zoznam {
  list-style: none;
  margin: 0;
  padding: 0 var(--sp-5) var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  /* Automatické stĺpce: pri dvoch položkách nevznikne prázdne pole,
     pri šiestich sa zalomia samy. */
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}
.integracia {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.integracia.je-priprava { opacity: 0.72; }
/* Podložka je ŠIRŠIA než vysoká. Väčšina logiek výrobcov je slovná
   značka (Shoptet, Shopify, Fio), nie štvorcová ikona — vo štvorci by
   sa zmenšila na nečitateľnú stopu. Výška zostáva jednotná, takže
   riadky sedia. */
.integracia-logo {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0.25rem;
  border-radius: var(--r-1);
  background: #fff;
  border: 1px solid var(--line);
}
/* Jednofarebné ikony sa prispôsobia téme a podložku nepotrebujú. */
.integracia-logo.je-mono {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}
.integracia-logo.je-mono svg,
.integracia-logo.je-mono img { filter: none; }
.integracia-logo img {
  max-width: 100%;
  max-height: 1.9rem;
  object-fit: contain;
}
/* Jednofarebná ikona je štvorcová a širokú podložku nepotrebuje. */
.integracia-logo.je-mono { width: 2.5rem; }
.integracia-logo.je-mono img { max-width: 1.6rem; max-height: 1.6rem; }
.integracia-znak {
  font-weight: 700;
  color: var(--muted);
}
.integracia-text { display: grid; gap: 0.1rem; min-width: 0; }
.integracia-nazov { font-weight: 600; overflow-wrap: anywhere; }
.integracia-stav {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: lowercase;
}
.integracie-pata {
  max-width: 62rem;
  margin: var(--sp-4) auto 0;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: center;
}

/* Plaketka „pripravujeme". Drobný šedý riadok pod názvom sa v mriežke
   stratil a položka potom vyzerala ako hotová — to je horšie než ju
   neuviesť vôbec. */
.integracia-pill {
  align-self: start;
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Poznámka o tom, ČO systém s nástrojmi robí. Z názvov „Gmail, Drive,
   Kalendár" to poznať nie je — a práve to je dôvod, prečo sa pripájajú.
   Farebný pruh vľavo ju odlíši od popisu skupiny nad ňou. */
.integracia-vyznam {
  margin: 0 var(--sp-5) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .integracie-benefity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integracia-benefit,
  .integracia-benefit:nth-last-child(2):nth-child(4) { grid-column: auto; }
}

@media (max-width: 720px) {
  .nav-mega-grid { grid-template-columns: 1fr; }
  .nav-mega-card small { display: none; }
  .integracia-benefit { padding: var(--sp-4); }
  .porovnanie { min-width: 660px; }
}

@media (max-width: 560px) {
  .integracie-benefity { grid-template-columns: 1fr; }
  .integracia-logo.integracia-logo--platform {
    flex-basis: calc(50% - var(--sp-2));
    max-width: 8.25rem;
    height: 3.75rem;
  }
  .integracia-logo.integracia-logo--platform img { max-width: 7.75rem; max-height: 3.15rem; }
}

/* Cesta k človeku pod otázkami. Kto sa dočíta na koniec FAQ a odpoveď
   tam nenašiel, potrebuje vedieť, kam sa obrátiť. */
.faq-viac {
  max-width: 52rem;
  margin: var(--sp-5) auto 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  text-align: center;
  color: var(--muted);
}
.faq-viac strong { color: var(--text); margin-right: 0.35rem; }
.faq-viac a {
  display: inline-block;
  margin-left: 0.35rem;
  font-weight: 650;
}

/* ====================================================================
   CENNÍK — TRI TARIFY VEDĽA SEBA, „NA MIERU" POD NIMI
   ====================================================================
   Doteraz stáli všetky štyri v jednej mriežke `auto-fit`. Znamenalo to
   dve veci naraz: každá karta bola o štvrtinu užšia (a cena v nej
   menšia), a „na mieru" — ktoré nemá cenu ani limity — vyzeralo ako
   štvrtá tarifa, medzi ktorou sa vyberá rovnako ako medzi ostatnými.

   Tri karty majú pevné tri stĺpce až od 900 px. Pod tým sa skladajú
   pod seba: dva úzke stĺpce sú horšie než jeden čitateľný, a cena
   v 200 px širokej karte sa neprečíta. */
.plans-3 { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}

/* ŠTYRI KARTY — SKÚŠOBNÝ BALÍK PRIBUDOL K TROM PLATENÝM.
   Zalomenie je ROZHODNUTIE, nie výsledok `auto-fit`. Nechať to na
   `auto-fit` znamená, že pri istých šírkach vyjde 3+1 — tri karty
   v rade a štvrtá osamote pod nimi, čo vyzerá ako chyba vykreslenia,
   nie ako ponuka.

   NAMERANÉ 2026-08-08 (obsah = `--page` 1140 px mínus dva okraje):
     390 px   1 stĺpec, karta 358 px
     820 px   2 × 2, karta 369 px
     1100 px  4 × 1, karta 243 px
     1280 px  4 × 1, karta 253 px

   Prah pre štyri stĺpce je 1060 px. Nižšie by karta klesla pod 230 px
   a nadpis „Skúšobná verzia" sa v nej zalomí uprostred slova.

   Dva stĺpce sú medzikrok od 640 px: na 820 px sú štyri stĺpce po
   175 px nečitateľné a jeden stĺpec by z cenníka spravil meter dlhé
   posúvanie. */
.plans-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1060px) {
  /* Menší odstup než pri troch kartách: pri štyroch stĺpcoch berie
     `--sp-5` z každej karty 24 px, teda desatinu jej šírky. */
  .plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
  /* Aj vnútorný odsadenie ustupuje — 24 px na každej strane z 243 px
     karty by nechalo textu menej než dve tretiny jej šírky. */
  .plans-4 .plan { padding-inline: var(--sp-4); }
}

/* SKÚŠOBNÝ BALÍK MÁ VLASTNÝ ODTIEŇ.
   Bez neho by mal jediný z karty šedý pruh a pôsobil by ako
   nedokončená karta vedľa troch farebných. Zelená hovorí „začni tu"
   a zároveň sa nepletie s odporúčanou tarifou, ktorá má farbu značky. */
.plan--free { --plan-farba: #34d399; }
.plan--free .plan-price b { color: #047857; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .plan--free .plan-price b { color: #6ee7b7; }
}
:root[data-theme='dark'] .plan--free .plan-price b { color: #6ee7b7; }

/* FAREBNÉ ODLÍŠENIE TARÍF.
   Tri rovnaké biele karty vedľa seba sa čítajú ako jedna plocha —
   oko nemá čoho sa chytiť a rozhodovanie trvá dlhšie. Každá tarifa má
   preto vlastný odtieň v hlavičke a pri cene.

   Odtiene idú od chladného k teplému, teda v poradí rastúcej tarify;
   je to jemné podfarbenie, nie plná plocha. Farby sú odvodené
   z premenných témy, takže platia v bledom aj tmavom režime. */
.plan {
  position: relative;
  /* `visible`, nie `hidden`: plaketka presahuje hornú hranu karty
     a `hidden` by jej odrezal vrchnú polovicu. */
  overflow: visible;
  /* Miesto pre plaketku na hornej hrane — rovnaké pri VŠETKÝCH troch
     kartách, aby nadpisy sedeli na jednej linke. */
  padding-top: var(--sp-6);
}
.plan::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--plan-farba, var(--line));
  /* Zaoblenie sa musí zopakovať — bez `overflow: hidden` by pruh
     vytŕčal z rohov karty. */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.plan--start { --plan-farba: #38bdf8; }
.plan--growth { --plan-farba: var(--accent); }
.plan--scale { --plan-farba: #a78bfa; }
.plan--start .plan-price b { color: #0284c7; }
.plan--growth .plan-price b { color: var(--accent); }
.plan--scale .plan-price b { color: #7c3aed; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .plan--start .plan-price b { color: #7dd3fc; }
  :root:not([data-theme='light']) .plan--scale .plan-price b { color: #c4b5fd; }
}
:root[data-theme='dark'] .plan--start .plan-price b { color: #7dd3fc; }
:root[data-theme='dark'] .plan--scale .plan-price b { color: #c4b5fd; }

/* ODPORÚČANÁ TARIFA JE VIDIEŤ, NIE VÄČŠIA.
   Väčšia karta rozhodí zarovnanie ostatných a na telefóne stratí
   zmysel. Namiesto rozmeru dostane výraznejší rám a tieň. */
.plan.hi { border-color: var(--accent); box-shadow: var(--shadow-lg, var(--shadow-md)); }

/* PÁS „NA MIERU".
   Nie je to štvrtá tarifa, je to iný druh rozhodnutia: „ani jedna
   z týchto mi nesadne, ozvem sa vám". Preto stojí pod nimi a vyzerá
   inak — plná farebná plocha namiesto bielej karty. */
.plan-custom {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background-color: #123a96;
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 92%, #000),
    color-mix(in srgb, #7c3aed 78%, var(--accent)));
  color: #fff;
}
@media (min-width: 900px) {
  .plan-custom { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.plan-custom-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  font-size: var(--fs-xs);
  font-weight: 650;
}
.plan-custom h2 { margin: 0 0 var(--sp-2); color: #fff; }
.plan-custom p { margin: 0 0 var(--sp-4); color: rgba(255, 255, 255, 0.86); max-width: 48rem; }
.plan-custom-zoznam {
  display: grid;
  gap: 7px var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.plan-custom-zoznam li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-sm);
}
.plan-custom-zoznam li::before { content: '✓'; font-weight: 700; }
.plan-custom-akcia { display: grid; gap: var(--sp-3); justify-items: center; }
.plan-custom-akcia b { font-size: var(--fs-lg); }
/* Tlačidlo na farebnej ploche musí byť biele — akcentné by na akcente
   zaniklo. */
.plan-custom-akcia .btn-primary {
  background: #fff;
  color: #075faf;
  border-color: #fff;
}
.plan-custom-akcia .btn-primary:hover { background: rgba(255, 255, 255, 0.9); }

/* ====================================================================
   PREPÍNAČ OBDOBIA A MENY — FAREBNE, NIE ŠEDO
   ====================================================================
   Prepínač bol šedý na šedom a zvolená položka sa líšila len o odtieň
   svetlejšia. Je to pritom prvá vec, ktorou návštevník na cenníku hýbe
   — a od nej závisí, akú cenu vidí. Keď nie je vidieť, ktorá polovica
   je zapnutá, čísla pod ňou strácajú zmysel.

   Zvolená položka má plnú akcentnú plochu; celý prepínač jemné
   podfarbenie, aby sa neutrhol od pozadia. */
.billing-row .toggle {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.billing-row .toggle button { transition: background 0.16s ease, color 0.16s ease; }
.billing-row .toggle button:hover:not([aria-pressed='true']) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
}
.billing-row .toggle button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  box-shadow: none;
}
/* Mena je DRUHORADÁ voľba — fakturuje sa v eurách a ostatné sú
   prepočet. Dostane preto tlmenejšie odlíšenie než obdobie; rovnako
   výrazné by naznačovalo, že sa dá fakturovať v korunách. */
.billing-row .toggle-mena {
  border-color: var(--line);
  background: var(--surface-2);
}
.billing-row .toggle-mena button[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--text);
}
/* Zľava pri ročnej platbe ako plaketka, nie holý text. Je to jediný
   dôvod, prečo prepínač vôbec existuje. */
.billing-row [data-yearly-note] {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
}

/* Poznámka pod vycentrovaným obsahom. `footer-tagline` sa na ňu
   používať nesmie —
   má `max-width: 40ch` a zarovnanie vľavo, takže veta pod
   vycentrovanými kartami visela vľavo a lámala sa na dva riadky,
   z ktorých druhý mal jedno slovo. */
.pozn-stred {
  max-width: var(--prose);
  margin: var(--sp-4) auto 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}
/* Poznámka, ktorá stojí pod vycentrovaným obsahom, sa má vycentrovať
   tiež — inak sa opticky „utrhne" doľava. Text vnútri zostáva vľavo:
   vycentrovaná veta o troch riadkoch sa číta horšie. */
.note-stred { max-width: var(--prose); margin-left: auto; margin-right: auto; }

/* ====================================================================
   PLATOBNÉ METÓDY V PÄTIČKE
   ====================================================================
   Značky sú ZÁSTUPNÉ, nie oficiálne logá — oficiálne súbory sa doplnia
   pri spustení platobnej brány (viď `templates/icons.mjs`). Dovtedy
   rozhoduje aspoň to, čo rozhodnúť vieme: aby boli čitateľné v oboch
   témach a aby bolo vidieť, čím sa dá platiť UŽ DNES.

   Farebné značky (Visa, Mastercard) potrebujú svetlú podložku — v tmavej
   téme by na tmavom pozadí zanikli. Rovnaké pravidlo ako pri logách
   účtovných systémov v aplikácii. */
.pay {
  /* Širšie než pôvodných 46 px: „Apple Pay" sa do nich nezmestilo
     a text sa orezal. */
  width: 54px;
  height: 32px;
  background: #fff;
  color: #1c2024;
}
.pay svg { width: 100%; height: 100%; }
/* Metóda, ktorá zatiaľ nefunguje, je stlmená. Päť rovnako vyzerajúcich
   značiek nad vetou „platobná brána sa dokončuje" sľubuje prijímanie,
   ktoré nemáme — a to je horšie než ich neuviesť. */
.pay--priprava { opacity: 0.45; }
@media (max-width: 480px) {
  /* Na telefóne sa zmestí päť dlaždíc do dvoch riadkov; menšie by boli
     nečitateľné, väčšie by pretiekli. */
  .pay { width: 48px; height: 30px; }
}

/* ==================================================================
   PREPÍNAČ SVETLÉHO A TMAVÉHO REŽIMU (2026-08-09)
   ==================================================================
   Rovnaký prvok aj rovnaké triedy ako v aplikácii a v konzole
   (`src/modules/shared/temaPrepinac.js`). Stránka je samostatný
   generátor a do `src/` nesiaha, takže pravidlá musia byť aj tu —
   pri zmene vzhľadu sa menia OBE miesta.

   Pilulka s dvoma voľbami nahradila jedno tlačidlo, ktoré ukazovalo
   ikonu cieľového režimu. Pri ňom sa nedalo uhádnuť, či ikona hovorí
   „teraz si tu" alebo „klikni sem" — polovica ľudí to čítala opačne. */
.tema-prepinac {
  /* `flex: 0 0 auto` NIE JE ozdoba. Prvok stojí vo flexovom riadku
     (hlavička stránky, horná lišta aplikácie) a bez neho sa roztiahol
     na celú voľnú šírku — namerané 1 084 px z 1 100 px okna. Vytlačil
     tým hamburger aj prihlásenie mimo obrazovku, takže sa na telefóne
     nedalo otvoriť menu (nahlásené 9. 8. 2026).

     Pôvodné jedno tlačidlo `<button>` tento problém nemalo: tlačidlo
     má vlastnú prirodzenú šírku, `<div>` sa vo flexe rád natiahne. */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2, var(--surface));
}
.tema-volba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: .65;
  transition: background-color .14s ease, color .14s ease, opacity .14s ease;
}
.tema-volba svg { width: 16px; height: 16px; }
.tema-volba:hover { opacity: 1; color: var(--text); }
.tema-volba:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Zvolená polovica sa líši pozadím, tieňom AJ plným krytím — nie iba
   farbou. Rozdiel tak zostáva čitateľný pri poruche farbocitu a
   v odtieňoch sivej. */
.tema-volba.je-zvolena {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  color: var(--text);
  cursor: default;
  opacity: 1;
}

/* Ikony sa už neprepínajú podľa motívu — každá voľba nesie svoju
   vlastnú a obe sú viditeľné naraz. Pravidlá pre pôvodné jedno
   tlačidlo by tu jednu z nich skryli. */
.tema-prepinac .ico-on-light,
.tema-prepinac .ico-on-dark { display: inline-flex; }

/* ==================================================================
   KDE STOJÍ PREPÍNAČ REŽIMU (2026-08-09)
   ==================================================================
   Prvok je v HTML dvakrát: v hlavičke a v zbalenom menu. Viditeľný je
   vždy najviac jeden — ten istý vzor, aký v aplikácii používa prepínač
   jazyka.

   PREČO VÔBEC.
   Rozpočet šírky pri 360 px (vypísaný vyššie) vychádzal na doraz už
   s jedným tlačidlom motívu (34 px). Prepínač s dvoma voľbami má 68 px,
   takže hlavička pretiekla a TLAČIDLO MENU vypadlo mimo obrazovku —
   na telefóne sa nedalo otvoriť menu vôbec (nahlásené 9. 8. 2026).

   Hranica je TÁ ISTÁ ako pri zbalení navigácie (1360 px) a je to
   zámer: prepínač sa presunie presne vtedy, keď vznikne miesto, kam
   ho presunúť. Dve rôzne hranice by znamenali pásmo, v ktorom nie je
   ani v hlavičke, ani v menu.

   Prepínač sa NESKRÝVA úplne. Režim zobrazenia je nastavenie, ktoré má
   byť dosiahnuteľné aj na telefóne; skrytý prepínač by znamenal, že si
   tmavý režim na mobile nikto nezapne. */
.nav-rezim { display: none; }

@media (max-width: 1360px) {
  .header-actions .tema-prepinac { display: none; }

  /* V menu stojí s popisom — na rozdiel od hlavičky tu je miesto
     a dve ikony bez textu by v zozname odkazov pôsobili ako ozdoba. */
  .nav-rezim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
  }
  .nav-rezim-popis { color: var(--muted); font-size: var(--fs-sm); }
}

/* ====================================================================
   CENNÍK — PRÉMIOVÝ VZHĽAD KARIET (10. 8. 2026)
   ====================================================================
   NAHLÁSENÉ prevádzkovateľom: po pridaní štvrtej tarify boli karty
   úzke, jednotvárne, bez ikon a bez farebného odlíšenia. Čísla sedeli,
   vzhľad nie — a cenník je jediná stránka, na ktorej návštevník
   rozhoduje o peniazoch.

   Čo sa zmenilo a prečo:

   1. ŠIRŠÍ OBSAH. `--page` (1140 px) je stavaná na text; štyri karty
      v nej majú po 250 px a nadpis sa v nich láme uprostred slova.
      Cenník dostal 1280 px — je to jediné miesto na stránke, kde vedľa
      seba stojí štyri stĺpce rovnocenného obsahu.
   2. IKONA V HLAVIČKE. Štyri biele karty sa čítajú ako jedna plocha.
      Ikona je to prvé, čo oko rozlíši — skôr než prečíta názov.
   3. FAREBNÝ AKCENT NA CELÚ KARTU, nie iba pruh navrchu: ikona, cena,
      odrážky aj tlačidlo. Jedna farba na tarifu drží kartu pokope.
   4. TLAČIDLO MÁ FARBU TARIFY. Tri šedé „ghost" tlačidlá a jedno modré
      hovorili, že tri tarify sú druhoradé — pritom sú to tri z piatich
      spôsobov, ako môže zákazník zaplatiť.
   ==================================================================== */

/* Širší obal IBA pre cenník. Globálne rozšírenie `--page` by roztiahlo
   aj bežné textové stránky, kde je dlhý riadok horšie čitateľný. */
.wrap-cennik { max-width: 1280px; }

/* ------------------------------------------------------------------
   HLAVIČKA KARTY
   ------------------------------------------------------------------ */
.plan-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  /* Rovnaká minimálna výška pri všetkých kartách, aby ceny pod nimi
     sedeli na jednej linke. Bez toho má karta s dlhším popisom cenu
     o riadok nižšie a oko nemá čo porovnávať. */
  min-height: 4.75rem;
}
.plan-ikona {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  /* Podfarbenie z farby tarify — nie plná plocha. Plná by pri štyroch
     kartách vedľa seba prekričala samotné ceny. */
  background: color-mix(in srgb, var(--plan-farba, var(--accent)) 13%, var(--surface));
  color: var(--plan-farba, var(--accent));
}
.plan-ikona svg { width: 24px; height: 24px; }
.plan-nadpis { min-width: 0; }
.plan-nadpis h3 { margin: 2px 0 3px; font-size: var(--fs-lg); }
/* Popis už nemá pevnú výšku — zarovnanie drží `.plan-head`. Pevná
   výška pri štyroch kartách nechávala pod krátkym popisom prázdny
   riadok, ktorý vyzeral ako chýbajúci text. */
.plan-head .plan-tagline { min-height: 0; font-size: var(--fs-xs); line-height: 1.45; }

/* ------------------------------------------------------------------
   KĽÚČOVÉ ČÍSLA
   ------------------------------------------------------------------
   Boli v podfarbenom bloku, ktorý pôsobil ako poznámka pod cenou.
   Sú to pritom čísla, podľa ktorých sa zákazník rozhoduje — dostávajú
   preto značku pri každom riadku a oddeľovač, nie sivé pozadie. */
.plan-limits {
  margin: 0 0 var(--sp-3);
  padding: 0 0 var(--sp-3);
  background: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: var(--fs-sm);
}
.plan-limits li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--sp-2);
  align-items: start;
  line-height: 1.35;
}
.plan-limits li::before {
  content: '✓';
  margin-top: 1px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--plan-farba, var(--accent)) 55%, transparent);
  border-radius: 50%;
  color: var(--plan-farba, var(--accent));
  font-size: 9px;
  font-weight: 800;
}
.plan-features li { color: var(--soft); font-size: var(--fs-xs); }
.plan-features li::before { color: var(--plan-farba, var(--success)); }

/* ------------------------------------------------------------------
   TLAČIDLO A VETA POD NÍM
   ------------------------------------------------------------------ */
/* ================================================================
   TLAČIDLO POUŽÍVA TMAVÚ VARIANTU FARBY TARIFY
   ================================================================
   Odtiene tarify sú stavané na PODFARBENIE (ikona, značky, pruh) —
   biele písmo na nich nemá dosť kontrastu. Namerané na svetlomodrej
   `#38bdf8` a svetlofialovej `#a78bfa`: text bol takmer nečitateľný.

   `--plan-cta` je preto samostatná, tmavšia hodnota. Odvodiť ju
   filtrom (`brightness`) nešlo: rovnaký filter na štyri rôzne odtiene
   dá štyri rôzne úrovne kontrastu, takže by jedno tlačidlo prešlo
   a druhé nie. */
.plan-cta {
  margin-top: auto;
  border: 0;
  background: var(--plan-cta, var(--plan-farba, var(--accent)));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--plan-cta, var(--accent)) 30%, transparent);
}
.plan-cta:hover { filter: brightness(0.92); color: #fff; }
.plan--beginner { --plan-cta: #047857; }
.plan--start { --plan-cta: #0369a1; --plan-tag-text: #06121f; }
.plan--growth { --plan-cta: #075faf; }
.plan--scale { --plan-cta: #6d28d9; }
.plan--free { --plan-cta: #047857; }

/* Sadzba nad limit — poznámka POD zoznamom čísel, nie jeho položka.
   V zozname dostávala zaškrtávaciu značku ako kľúčové číslo (hoci je to
   poznámka) a veta sa v mriežke lámala uprostred sumy. */
.plan-overage {
  margin: 0 0 var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.plan-nocard {
  margin: 7px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* Zdvih pri prejdení myšou. Karta tak reaguje na to, že si ju niekto
   vybral očami — bez toho pôsobí cenník ako obrázok, nie ako ponuka. */
.plan { transition: transform 0.18s ease, box-shadow 0.18s ease; }
@media (hover: hover) {
  .plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, var(--shadow-md)); }
}
@media (prefers-reduced-motion: reduce) {
  .plan { transition: none; }
  .plan:hover { transform: none; }
}

/* ------------------------------------------------------------------
   FARBA VSTUPNEJ TARIFY
   ------------------------------------------------------------------
   Zelená ako pri skúšobnej verzii by ich pomiešala. Začiatočník má
   preto vlastný odtieň a spolu s ostatnými tvorí rad od chladnej
   k teplej v poradí rastúcej tarify. */
.plan--beginner { --plan-farba: #10b981; }
.plan--beginner .plan-price b { color: #047857; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .plan--beginner .plan-price b { color: #6ee7b7; }
}
:root[data-theme='dark'] .plan--beginner .plan-price b { color: #6ee7b7; }

/* ------------------------------------------------------------------
   ODPORÚČANÁ TARIFA
   ------------------------------------------------------------------
   Dvojitý rám a výraznejší tieň. Väčší rozmer sa nepoužíva — rozhodil
   by zarovnanie ostatných a na telefóne by stratil zmysel. */
.plan.hi {
  border: 2px solid var(--plan-farba, var(--accent));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--plan-farba, var(--accent)) 16%, transparent);
}
.plan-tag {
  padding: 5px 14px;
  background: var(--plan-farba, var(--accent));
  color: var(--plan-tag-text, var(--accent-contrast));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--plan-farba, var(--accent)) 35%, transparent);
}

/* ------------------------------------------------------------------
   PÁS „NA MIERU" — PRÉMIOVÝ, NIE ŠTVRTÁ KARTA
   ------------------------------------------------------------------ */
.plan-custom {
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(22, 53, 170, 0.18);
}
/* Jemná kresba v pravom dolnom rohu. Plocha bez nej je pri tejto veľkosti
   prázdna a pás vyzerá ako farebný obdĺžnik, nie ako ponuka. */
.plan-custom::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -120px;
  width: 420px;
  height: 220px;
  opacity: 0.22;
  background: repeating-radial-gradient(ellipse at center,
    transparent 0, transparent 9px, rgba(255, 255, 255, 0.32) 10px, transparent 11px);
  pointer-events: none;
}
.plan-custom-text, .plan-custom-akcia { position: relative; z-index: 1; }
.plan-custom-zoznam li::before { content: '✓'; opacity: 0.85; }

/* ------------------------------------------------------------------
   MOBIL: 2 × 2, KOMPAKTNÁ KARTA
   ------------------------------------------------------------------
   Cieľ je dvojstĺpec od šírky, kde má karta aspoň ~170 px. Pod ňou by
   sa nadpis lámal uprostred slova, preto jeden stĺpec. */
@media (max-width: 639px) {
  .plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .plans-4 .plan { padding: var(--sp-5) var(--sp-3) var(--sp-3); }
  .plans-4 .plan-head { min-height: 0; flex-direction: column; gap: var(--sp-2); }
  .plans-4 .plan-ikona { flex-basis: 36px; width: 36px; height: 36px; border-radius: 11px; }
  .plans-4 .plan-ikona svg { width: 20px; height: 20px; }
  .plans-4 .plan-nadpis h3 { font-size: var(--fs-md, 1rem); }
  /* Popis a doplnkové funkcie ustupujú — na 170 px karte by z nich bol
     odsek, v ktorom sa stratí cena. Detail je v porovnaní nižšie. */
  .plans-4 .plan-tagline { display: none; }
  .plans-4 .plan-features { display: none; }
  .plans-4 .plan-price b { font-size: 1.5rem; }
  .plans-4 .plan-limits { font-size: var(--fs-xs); }
  /* Na najužších zariadeniach ostanú štyri hlavné čísla; piate a šieste
     by kartu natiahli na dve obrazovky. */
  .plans-4 .plan-limits li:nth-child(n + 5) { display: none; }
}
@media (max-width: 379px) {
  /* Extrémne úzke zariadenie — dva stĺpce by dali karte pod 165 px. */
  .plans-4 { grid-template-columns: 1fr; }
  .plans-4 .plan-tagline { display: block; }
  .plans-4 .plan-features { display: grid; }
  .plans-4 .plan-limits li:nth-child(n + 5) { display: grid; }
}

/* ====================================================================
   POROVNANIE TARÍF — HLAVIČKA A FAREBNÉ STĹPCE (10. 8. 2026)
   ==================================================================== */

/* Hlavička tabuľky ako karta. Holý nadpis splýval s cenníkom nad ním
   a tabuľku so siedmimi stĺpcami návštevník preskočil. */
.compare-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.compare-ikona {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}
.compare-ikona svg { width: 19px; height: 19px; }
.compare-head .compare-title { padding: 0; font-size: var(--fs-md); font-weight: 700; }
.compare-subtitle { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); }

/* FARBA STĹPCA V HLAVIČKE.
   Tá istá, akú má karta tarify vyššie — bez nej je hlavička sedem
   rovnakých sivých slov a oko nemá ako spojiť stĺpec s kartou, podľa
   ktorej sa rozhodovalo. */
.compare-plan { color: var(--plan-farba, var(--muted)); font-weight: 750; }
.compare-plan--free { --plan-farba: #059669; }
.compare-plan--beginner { --plan-farba: #047857; }
.compare-plan--start { --plan-farba: #0284c7; }
.compare-plan--growth { --plan-farba: var(--accent); }
.compare-plan--scale { --plan-farba: #7c3aed; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .compare-plan--free { --plan-farba: #6ee7b7; }
  :root:not([data-theme='light']) .compare-plan--beginner { --plan-farba: #6ee7b7; }
  :root:not([data-theme='light']) .compare-plan--start { --plan-farba: #7dd3fc; }
  :root:not([data-theme='light']) .compare-plan--scale { --plan-farba: #c4b5fd; }
}
:root[data-theme='dark'] .compare-plan--free { --plan-farba: #6ee7b7; }
:root[data-theme='dark'] .compare-plan--beginner { --plan-farba: #6ee7b7; }
:root[data-theme='dark'] .compare-plan--start { --plan-farba: #7dd3fc; }
:root[data-theme='dark'] .compare-plan--scale { --plan-farba: #c4b5fd; }

/* Sedem stĺpcov potrebuje viac miesta než päť. Pod touto šírkou by sa
   hodnoty lámali na jedno písmeno na riadok — radšej posuv vo vlastnom
   rámci než nečitateľnosť. */
.compare-table { min-width: 860px; }

/* Vysvetlenie hviezdičky pri produktoch. */
.compare-footnote {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* Tri výhody pod nadpisom cenníka — odpovede na otázky, ktoré si
   návštevník kladie skôr, než sa pozrie na ceny. */
.pricing-vyhody {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--soft);
  font-size: var(--fs-sm);
}
.pricing-vyhody li { display: inline-flex; align-items: center; gap: 7px; }
.pricing-vyhody svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 16px; }

/* ====================================================================
   PREPÍNAČE CENNÍKA — OBDOBIE VÄČŠIE, MENA MENŠIA (10. 8. 2026)
   ====================================================================
   Nahlásené: prepínače majú stáť vedľa seba aj na telefóne a veta
   o dvoch mesiacoch zdarma má byť menším písmom pod nimi.

   Nie sú si rovné a nemajú tak ani vyzerať. Obdobie mení SUMU — o
   šestinu ceny. Mena mení iba JEDNOTKU, v ktorej sa suma zobrazí;
   fakturuje sa v eurách. Rovnako veľké prepínače by naznačovali, že sa
   dá fakturovať v korunách. */
.billing-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--sp-5);
}
.billing-area .billing-row {
  /* `nowrap`: dva prepínače vedľa seba aj na najužšej obrazovke. Pod
     sebou pôsobia ako dve nesúvisiace nastavenia a druhý si návštevník
     nevšimne. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: 0;
}
.toggle-obdobie button {
  padding: 10px 20px;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.billing-row .toggle-mena button {
  padding: 7px 10px;
  min-height: 40px;
  font-size: var(--fs-xs);
  font-weight: 650;
}
/* Veta o dvoch mesiacoch zdarma. Vedľa prepínača súperila s tlačidlami
   o pozornosť a na úzkej obrazovke rozbíjala rad na tri riadky. */
.billing-pozn {
  margin: 0;
  color: var(--success);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-align: center;
}
.billing-pozn[hidden] { display: none; }

@media (max-width: 420px) {
  /* Na najužších telefónoch ustupuje odsadenie, nie usporiadanie —
     rad zostáva radom. */
  .billing-area .billing-row { gap: var(--sp-2); }
  .toggle-obdobie button { padding: 9px 13px; }
  .billing-row .toggle-mena button { padding: 6px 7px; }
}