/* ŠTÝLY
   ==================================================================
   Pravidlá, ktoré tu platia:

   1. Žiadna konkrétna farba ani veľkosť. Všetko ide z tokens.css.
      Keď potrebuješ hodnotu, ktorá tam nie je, pridaj ju tam.
   2. Žiadne `:nth-child` na sekciách. Striedanie svetlá/tmavá sa robí
      triedou v HTML, aby sa sekcie dali presúvať.
   3. Vertikálne rozostupy medzi sekciami drží VÝHRADNE `.sekcia`
      (padding, nie margin). Jednotlivé komponenty si nepridávajú
      vonkajší odstup zvonku — inak sa začnú rozostupy sčítavať
      a prekrývať, čo je najčastejší spôsob, ako sa takýto web rozsype.
   4. Komponenty sú zoradené v tom poradí, v akom idú na stránke,
      a každý má hlavičku. Hľadaj podľa názvu sekcie.

   Obsah:
      01  Základ a reset
      02  Typografia
      03  Opakované prvky (očko, tlačidlá, linka)
      04  Zárubňa — signature prvok
      05  Hlavička a navigácia
      06  Hero
      07  Prečo 3D prehliadka
      08  Ako to prebieha
      09  Ukážka (demo)
      10  Pre koho
      11  Cenník
      12  FAQ
      13  Kontakt a formulár
      14  Pätka
      15  Právna podstránka
      16  Prístupnosť a obmedzený pohyb
   ================================================================== */

/* ============ 01  ZÁKLAD A RESET ============ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Aby kotva nepodliezla pod lepkavú hlavičku. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-tmavy);
  font-family: var(--pismo-text);
  font-size: var(--text-base);
  line-height: var(--vyska-riadku-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* MUSÍ byť za pravidlom vyššie. `svg { display: block }` je silnejšie
   než prehliadačové `[hidden] { display: none }`, takže bez tohto
   riadku by sa skrytý sprite ikon vykreslil ako prázdny blok 300×150
   a odtlačil celú stránku nadol. Stálo to raz hodinu hľadania. */
[hidden] { display: none !important; }

img { height: auto; }

button,
input,
textarea,
select { font: inherit; color: inherit; }

/* Obal obsahu. `--okraj` je bočný okraj; na mobile nikdy nepadne
   pod 20px, aby text nelepil na hranu displeja. */
.obal {
  width: 100%;
  max-width: var(--sirka-obsah);
  margin-inline: auto;
  padding-inline: var(--okraj);
}

.obal--uzky { max-width: var(--sirka-uzka); }

/* Sekcia. Jediný držiteľ vertikálneho rytmu — pozri pravidlo 3 vyššie. */
.sekcia {
  padding-block: var(--sekcia-y);
  background: var(--plocha);
  color: var(--text);
}

/* Hlavička sekcie: očko, nadpis, úvodný odstavec. */
.sekcia__hlavicka {
  max-width: var(--miera);
  margin-bottom: var(--p-12);
}

.sekcia__hlavicka > * + * { margin-top: var(--p-4); }

/* ============ 02  TYPOGRAFIA ============ */

h1, h2, h3, h4 {
  font-family: var(--pismo-display);
  font-weight: var(--vaha-nadpis);
  letter-spacing: var(--prestrk-display);
  line-height: var(--vyska-riadku-nadpis);
  margin: 0;
  /* Slovenské slová sú dlhé; bez toho sa „nehnuteľnosti" pretlačí
     cez okraj na úzkych displejoch. */
  overflow-wrap: break-word;
}

p { margin: 0; max-width: var(--miera); }

.h-hero {
  font-size: var(--text-3xl);
  line-height: var(--vyska-riadku-tesna);
  text-wrap: balance;
}

.h-sekcia {
  font-size: var(--text-2xl);
  text-wrap: balance;
}

.h-pod {
  font-size: var(--text-lg);
  letter-spacing: 0;
  line-height: 1.3;
}

.h-mala {
  font-size: var(--text-base);
  letter-spacing: 0;
  line-height: 1.35;
}

/* Úvodný odstavec sekcie — o stupeň väčší a tichší než bežný text. */
.lead {
  font-size: var(--text-md);
  color: var(--text-tichy);
  max-width: var(--miera);
}

.tichy { color: var(--text-tichy); }

/* Poznámka pod čiarou — používa sa pri cenách a pri ukážke, teda
   všade, kde treba povedať „toto ešte nie je záväzné". */
.poznamka {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-tichy);
  max-width: var(--miera);
}

/* ============ 03  OPAKOVANÉ PRVKY ============ */

/* Očko nad nadpisom — „eyebrow" z KC Digital: malé verzálky, rez 700,
   veľký prestrk, tichá farba. */
.ocko {
  display: block;
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-2xs);
  letter-spacing: var(--prestrk-ocko);
  text-transform: uppercase;
  color: var(--text-tichy);
  margin: 0;
}

/* Vlasová linka. Jediný deliaci prvok na webe — žiadne rámiky ani
   karty s tieňom. */
.linka {
  border: 0;
  border-top: var(--vlasova) solid var(--linka);
  margin: 0;
}

/* --- Tlačidlá --- */
.tlacidlo {
  display: inline-flex;
  align-items: center;
  gap: var(--p-3);
  justify-content: center;
  padding: var(--p-4) var(--p-8);
  border: var(--ram) solid transparent;
  border-radius: var(--radius);
  font-family: var(--pismo-text);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--prechod), color var(--prechod), border-color var(--prechod);
}

/* Hlavné tlačidlo ako v KC Digital: plný atrament, pri prejdení myšou
   sa prevráti na obrys. Na tmavej ploche sa vďaka aliasom prevráti
   samo opačne (papier na atramente). */
.tlacidlo--hlavne {
  background: var(--akcent);
  color: var(--plocha);
  border-color: var(--akcent);
}

.tlacidlo--hlavne:hover,
.tlacidlo--hlavne:focus-visible {
  background: var(--plocha);
  color: var(--akcent);
  border-color: var(--akcent-hover);
}

/* Menšie tlačidlo do hlavičky. */
.tlacidlo--male {
  padding: var(--p-2) var(--p-4);
  font-size: var(--text-sm);
}

.tlacidlo--obrysove {
  background: transparent;
  color: var(--text);
  border-color: var(--linka-silna);
}

.tlacidlo--obrysove:hover,
.tlacidlo--obrysove:focus-visible {
  border-color: var(--text);
}

.tlacidlo[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Textový odkaz so šípkou. Podčiarknutie je vlasové a odsadené,
   aby neprerezávalo diakritiku pod písmenami. */
.odkaz {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-thickness: var(--vlasova);
  text-underline-offset: 0.22em;
  text-decoration-color: var(--linka);
  transition: text-decoration-color var(--prechod), color var(--prechod);
}

.odkaz:hover,
.odkaz:focus-visible {
  color: var(--akcent);
  text-decoration-color: var(--akcent);
}

/* Druhá výzva — v KC Digital „ghost" tlačidlo: rovnaký rozmer ako
   hlavné, len s tichým rámom, ktorý pri prejdení myšou stmavne. */
.odkaz-sipka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-3);
  padding: var(--p-4) var(--p-8);
  border: var(--ram) solid var(--linka-silna);
  color: var(--text);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--prechod);
}

.odkaz-sipka svg { transition: transform var(--prechod); }

.odkaz-sipka:hover svg,
.odkaz-sipka:focus-visible svg { transform: translateX(3px); }

.odkaz-sipka:hover,
.odkaz-sipka:focus-visible { border-color: var(--text); }

/* Riadok s dvoma výzvami vedľa seba. */
.vyzvy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-4);
}

/* Ikony. Dedia farbu textu, takže fungujú na svetlom aj tmavom.
   Ťah 2 px — rovnaká váha ako šípky v KC Digital. */
.ikona {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ikona--velka { width: 1.75rem; height: 1.75rem; }

/* ============ 04  ZÁRUBŇA ============
   Otvor v pomere skutočných dverí (90 × 197 cm, token
   `--zarubna-pomer`). Od 21. 10. 2026 je už len JEDEN: vstup do ukážky
   (`.vstup__dvere`, sekcia 09). Zárubňa so záberom v hero bola
   odstránená spolu so záberom; prázdny otvor tam zámerne nie je. */

/* ============ 05  HLAVIČKA A NAVIGÁCIA ============ */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Záložná plná farba pre prehliadače bez color-mix — bez nej by
     deklarácia neplatila a hlavička by bola priehľadná. */
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--vlasova) solid var(--linka);
  color: var(--text);
}

.hlavicka__obsah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-4);
  min-height: 4rem;
}

/* Značka v duchu KC Digital: znak „C" + názov verzálkami s prestrkom. */
.znacka {
  display: inline-flex;
  align-items: center;
  gap: var(--p-3);
  font-size: var(--text-sm);
  font-weight: var(--vaha-nadpis);
  letter-spacing: var(--prestrk-znacka);
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.znacka__znak {
  width: auto;
  height: 1.25rem;
  fill: currentColor;
}

.znacka__nadznacka {
  font-size: var(--text-2xs);
  font-weight: var(--vaha-popis);
  letter-spacing: var(--prestrk-popis);
  color: var(--text-tichy);
}

@media (max-width: 29.999rem) {
  /* Na úzkych displejoch by vytlačil tlačidlo Menu na druhý riadok. */
  .znacka__nadznacka { display: none; }
}

/* Navigácia.
   Bez JavaScriptu zostane rozbalená pod značkou — je to obyčajný
   zoznam odkazov, takže web je použiteľný aj tak. Zbalí ju až app.js
   atribútom `hidden`. Prepínač sa zobrazí len vtedy, keď skript beží
   (trieda `js` na <html>), inak by bolo tlačidlo, ktoré nič nerobí. */
.nav {
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-bottom: var(--p-4);
}

.nav[hidden] { display: none; }

/* `:not(.tlacidlo)` je nutné: bez neho by `.nav a` (silnejší selektor)
   prebil farbu textu tlačidla a „Nezáväzný dopyt" by zmizol na
   atramentovom podklade. */
.nav a:not(.tlacidlo) {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  padding-block: var(--p-4);
  border-bottom: var(--vlasova) solid var(--linka);
  transition: opacity var(--prechod);
}

.nav a:not(.tlacidlo):hover,
.nav a:not(.tlacidlo):focus-visible { opacity: 0.6; }

.nav .tlacidlo {
  margin-top: var(--p-4);
  justify-content: center;
  border-bottom: 0;
}

.nav__prepinac {
  display: none;   /* zobrazí sa len keď beží skript */
  align-items: center;
  gap: var(--p-2);
  padding: var(--p-2) var(--p-3);
  background: transparent;
  border: var(--vlasova) solid var(--linka-silna);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.js .nav__prepinac { display: inline-flex; }

@media (min-width: 68rem) {
  /* 68rem a nie menej: od 21. 10. má navigácia šesť položiek a pri
     56rem sa hlavička zalamovala na dva riadky (overené pri 910 px). */
  /* Na širokom displeji je navigácia vždy vodorovná a vždy viditeľná —
     aj keby na nej `hidden` zostalo z úzkeho okna. */
  .nav,
  .nav[hidden] {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    gap: var(--p-8);
    padding-bottom: 0;
  }
  .nav a:not(.tlacidlo) { padding-block: 0; border-bottom: 0; }
  .nav .tlacidlo { margin-top: 0; }
  .nav__prepinac,
  .js .nav__prepinac { display: none; }
}

/* ============ 06  HERO ============ */

/* Hero je svetlý ako v KC Digital — veľký nadpis v reze 800 na papieri. */
.hero {
  background: var(--plocha);
  color: var(--text);
  padding-block: clamp(4rem, 2.5rem + 5vw, 6rem) clamp(5rem, 3.5rem + 5vw, 7rem);
  overflow: hidden;
}

.hero__text > * + * { margin-top: var(--p-8); }
.hero__text > .h-hero { margin-top: var(--p-6); }

/* Hero stojí len na texte (od 21. 10.), preto nadpis dostane celú
   šírku obsahu — ako v KC Digital (max-w-4xl). */
.hero .h-hero { max-width: 18ch; }

.hero__lead {
  font-size: var(--text-md);
  color: var(--text-tichy);
  max-width: 52ch;
}

.hero .vyzvy { margin-top: var(--p-10); }

/* Ponuka zdarma v hero. Hrubá linka vľavo ju oddelí od leadu bez
   rámika — je to jediný takýto akcent na stránke. */
.hero__ponuka {
  padding-left: var(--p-4);
  border-left: var(--ram) solid var(--text);
  font-size: var(--text-base);
  color: var(--text-tichy);
}

.hero__ponuka strong {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--vaha-nadpis);
  color: var(--text);
}

/* Tri fakty pod výzvami — popisky verzálkami, oddelené vlasovou linkou. */
.hero__fakty {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-3) var(--p-8);
  margin: var(--p-12) 0 0;
  padding: var(--p-6) 0 0;
  border-top: var(--vlasova) solid var(--linka);
  list-style: none;
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-2xs);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-tichy);
}

/* ============ 07  ČÍM SA LÍŠIME ============
   Porovnanie (3 stĺpce, náš tmavý), riadok „Čo nemáme", ilustračný
   príbeh v dvoch stĺpcoch (bez / s prehliadkou). Mriežky s 1px
   medzerou ako karty v KC Digital. */

.porovnanie {
  display: grid;
  gap: var(--vlasova);
  background: var(--linka);
  border: var(--vlasova) solid var(--linka);
}

.porovnanie__stlpec {
  background: var(--plocha);
  color: var(--text);
  padding: var(--p-8);
}

.porovnanie__stlpec .scenar__nadpis { margin-bottom: var(--p-4); }

.porovnanie__stlpec p { color: var(--text-tichy); }

/* Náš stĺpec: plný text, nie tichý. */
.porovnanie__my p { color: var(--text); }

@media (min-width: 48rem) {
  .porovnanie { grid-template-columns: repeat(3, 1fr); }
  .porovnanie__stlpec { padding: var(--p-10); }
}

/* „Čo nemáme" — riadok pod porovnaním, nadpis vľavo, text vpravo. */
.porovnanie__nie {
  display: grid;
  gap: var(--p-2);
  padding-block: var(--p-8);
  border-bottom: var(--vlasova) solid var(--linka);
}

@media (min-width: 48rem) {
  .porovnanie__nie {
    grid-template-columns: minmax(10rem, 15rem) 1fr;
    gap: var(--p-8);
  }
}

.pribeh {
  margin: var(--p-16) 0 var(--p-6);
}

.pribeh > * + * { margin-top: var(--p-2); }


.scenar {
  display: grid;
  gap: var(--vlasova);
  background: var(--linka);
  border: var(--vlasova) solid var(--linka);
}

.scenar__stlpec {
  background: var(--plocha);
  color: var(--text);
  padding: var(--p-8);
}

.scenar__nadpis {
  margin-bottom: var(--p-8);
  font-size: var(--text-lg);
  letter-spacing: 0;
}

.scenar__chvile {
  display: grid;
  gap: var(--p-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.scenar__chvile li {
  display: grid;
  gap: var(--p-1);
  padding-top: var(--p-6);
  border-top: var(--vlasova) solid var(--linka);
}

.scenar__chvile li:first-child { padding-top: 0; border-top: 0; }

.scenar__kedy {
  font-size: var(--text-2xs);
  font-weight: var(--vaha-popis);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-tichy);
}

.scenar__chvile p { color: var(--text-tichy); }

/* V stĺpci „s prehliadkou" je text plný, nie tichý — je to strana,
   ku ktorej má čitateľ dospieť. */
.scenar__stlpec--s .scenar__chvile p { color: var(--text); }

@media (min-width: 48rem) {
  .scenar { grid-template-columns: 1fr 1fr; }
  .scenar__stlpec { padding: var(--p-10); }
}

/* Jedna veta, ktorú chceme, aby si čitateľ odniesol. Stojí osamotene
   za scenárom, veľkým stupňom v reze 800. */
.priznanie {
  margin-top: var(--p-14);
  max-width: 40ch;
  font-size: var(--text-xl);
  font-weight: var(--vaha-nadpis);
  line-height: 1.2;
  letter-spacing: var(--prestrk-display);
  color: var(--text);
  text-wrap: balance;
}

/* ============ 08  AKO TO PREBIEHA ============
   Číslovanie 01–04 je tu oprávnené: kroky sa naozaj robia v tomto
   poradí a klient potrebuje vedieť, čo nasleduje po čom. Keby sa
   sekcia zmenila na zoznam vlastností, čísla treba odobrať. */

.kroky {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}

/* Riadky ako „Ako to prebieha" v KC Digital: veľké tiché číslo,
   nadpis a text v troch stĺpcoch. */
.krok {
  display: grid;
  gap: var(--p-2);
  padding-block: var(--p-8);
  border-top: var(--vlasova) solid var(--linka);
}

.krok:last-child { border-bottom: var(--vlasova) solid var(--linka); }

.krok__cislo {
  font-size: var(--text-xl);
  font-weight: var(--vaha-nadpis);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--cislo);
}

.krok h3 { margin-bottom: var(--p-2); }

.krok p { color: var(--text-tichy); }

.krok__trvanie {
  display: inline-block;
  margin-top: var(--p-3);
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-2xs);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-tichy);
}

@media (min-width: 48rem) {
  .krok { grid-template-columns: 5rem 1fr; gap: var(--p-8); }
  .krok > div {
    display: grid;
    grid-template-columns: minmax(10rem, 15rem) 1fr;
    column-gap: var(--p-8);
    align-items: start;
  }
  .krok > div > h3 { grid-row: 1 / span 2; margin-bottom: 0; }
  .krok > div > :not(h3) { grid-column: 2; }
  .krok > div > .krok__trvanie { justify-self: start; }
}

/* ============ 09  UKÁŽKA (DEMO) ============
   Dôležité pravidlo, ktoré nesmie zmiznúť pri úpravách: prehliadka sa
   NENAČÍTA sama. V zatvorenom stave je tu len tmavá plocha a vstup;
   iframe vzniká až po kliknutí, v app.js. Je to kvôli objemu dát.

   Od 21. 10. 2026 je rám bez obrázka (poster bol málo kvalitný). */

.ukazka__ram {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ink-800);
  border: var(--vlasova) solid var(--linka);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 48rem) {
  /* Minimálna výška drží miesto pre dvere, texty a označenie scény
     na tablete, kde by pomer 16 : 9 bol príliš nízky. */
  .ukazka__ram { aspect-ratio: 16 / 9; min-height: 28rem; }
}

/* Na úzkom displeji rám nemá pevný pomer — bez fotky by ho nič
   nevyplnilo a pri 320 px by dvere aj texty v pomere 16 : 10 nevošli.
   Zatvorený stav tu ide v toku a rám rastie s obsahom. Načítanie
   prebieha na mobile v celoobrazovkovom režime, nie v tomto ráme. */
@media (max-width: 47.999rem) {
  .ukazka__ram { aspect-ratio: auto; min-height: 22rem; }
  .ukazka__vrstva[data-ukazka-zatvorene] {
    position: relative;
    /* Spodok drží miesto pre dvojriadkové označenie scény. */
    padding: var(--p-12) var(--p-6) var(--p-24);
  }
}

/* Trvalé označenie syntetickej scény v päte rámu. Leží pod vloženým
   viewerom (z-index 2) — ten má vlastný trvalý baner. */
.ukazka__oznacenie {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  max-width: none;
  padding: var(--p-4);
  font-size: var(--text-2xs);
  font-weight: var(--vaha-popis);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-svetly-tichy);
  text-align: center;
}

.ukazka__vrstva {
  position: absolute;
  inset: 0;
  /* Nepriehľadná plocha v farbe rámu. V zatvorenom stave splýva
     s rámom; pri načítaní zakryje viewer, kým nie je pripravený. */
  background: var(--ink-800);
  /* Vyššie než vložený viewer (z-index 2). Priebeh načítania musí byť
     VIDNO aj po tom, čo iframe vznikne — dáta prehliadky sa sťahujú
     ešte dlho po tom, ako sa jej dokument načíta. */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--p-6);
  padding: var(--p-6) var(--p-6) var(--p-12);
  text-align: center;
  color: var(--text-svetly);
}

/* Zatvorený stav nechá označenie scény v päte viditeľné. */
.ukazka__vrstva[data-ukazka-zatvorene] { background: transparent; }

/* Vstup do ukážky nesie tvar dverí: klikneš na otvor a vojdeš dovnútra.
   Je to jediná zárubňa na webe. Popis je POD dverami, nie v nich —
   do otvoru v pomere 90 × 197 sa nezmestí. Pri prejdení myšou sa
   otvor prevráti na plný papier, ako tlačidlá v KC Digital. */
.vstup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-4);
  padding: 0;
  background: none;
  border: 0;
  color: var(--paper);
  cursor: pointer;
}

.vstup__dvere {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 10vw, 6rem);
  aspect-ratio: var(--zarubna-pomer);
  background: transparent;
  border: var(--ram) solid var(--paper);
  border-radius: var(--radius);
  color: var(--paper);
  transition: background var(--prechod), color var(--prechod);
}

.vstup:hover .vstup__dvere,
.vstup:focus-visible .vstup__dvere {
  background: var(--paper);
  color: var(--ink);
}

.vstup__text {
  font-family: var(--pismo-text);
  font-size: var(--text-lg);
  font-weight: var(--vaha-nadpis);
}

.ukazka__vyzva {
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: 1.5;
  /* Plná svetlá, nie tichá: leží na fotografii, nie na ploche. */
  color: var(--text-svetly);
}

/* Varovanie o objeme dát. Na mobile je text iný než na desktope —
   obe verzie sú v HTML a prepína sa medzi nimi CSS, nie JS, aby to
   fungovalo aj pred načítaním skriptu. */
/* Poznámka o objeme dát je ÚDAJ, preto mono — a stojí na vlastnom
   riadku. Inline za vetou sa jednak zlievala (prázdny znak okolo
   skrytej varianty sa stratí), jednak mono uprostred bežnej vety
   pôsobí nepokojne. */
.ukazka__data {
  margin-top: var(--p-3);
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.ukazka__data--mobil { display: block; }
.ukazka__data--desktop { display: none; }

@media (min-width: 48rem) {
  .ukazka__data--mobil { display: none; }
  .ukazka__data--desktop { display: block; }
}

/* Priebeh načítania. Šírku nastavuje app.js cez `style.width`. */
.priebeh {
  width: min(22rem, 80%);
  height: 2px;
  background: var(--ink-700);
  overflow: hidden;
}

.priebeh__pas {
  height: 100%;
  width: 0;
  background: var(--paper);
  transition: width var(--prechod);
}

.priebeh__stav {
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-xs);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-svetly-tichy);
}

/* Neurčitý priebeh. Používa sa, kým viewer nepošle skutočný podiel —
   vymyslené percentá by boli to isté klamanie ako falošný ukazovateľ
   v inštalátore, preto radšej animácia bez čísla. */
.priebeh--neurcity .priebeh__pas {
  width: 35%;
  animation: priebeh-tuda-sem 1.4s ease-in-out infinite;
}

@keyframes priebeh-tuda-sem {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}

/* Vložený viewer. Vzniká až v app.js. */
.ukazka__viewer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--ink);
}

/* Stav „demo sa pripravuje" — keď v obsah.json nie je URL viewera. */
.ukazka__priprava {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Text leží na kresbe posteru, preto pod ním stmavíme plochu viac
     než pri zatvorenom stave — tam je obsahom tlačidlo, tu súvislé
     vety, a tie potrebujú pokojnejší podklad. */
  background: rgb(10 10 10 / 0.62);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--p-4);
  padding: var(--p-8);
  text-align: center;
  color: var(--text-svetly);
}

.ukazka__priprava .h-pod { max-width: 28ch; }

/* --- CELOOBRAZOVKOVÝ REŽIM (mobil) ---------------------------
   Prehliadka zaberie celú obrazovku, aby sa ťahanie prstom v scéne
   nebilo so scrollovaním stránky.

   `100dvh` a nie `100vh`: na mobile sa lišta prehliadača pri scrollovaní
   skrýva a zobrazuje, `100vh` počíta s tou väčšou výškou a spodok
   prehliadky (vrátane joysticku) by zostal schovaný pod lištou. */
.celaobrazovka {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--ink);
  color: var(--text-svetly);
}

.celaobrazovka[hidden] { display: none; }

.celaobrazovka__lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-4);
  flex: none;
  padding: var(--p-3) var(--p-4);
  border-bottom: var(--vlasova) solid var(--ink-700);
  /* Na telefónoch s výrezom nesmie lišta zaliezť pod stavový riadok. */
  padding-top: max(var(--p-3), env(safe-area-inset-top));
}

/* Označenie ukážkovej scény musí byť viditeľné aj v tomto režime. */
.celaobrazovka__popis {
  margin: 0;
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-xs);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-svetly-tichy);
}

.celaobrazovka__zavriet {
  display: inline-flex;
  align-items: center;
  gap: var(--p-2);
  /* Dotyková plocha aspoň 44 px — pod tým sa tlačidlo trafí ťažko. */
  min-height: 2.75rem;
  padding: var(--p-2) var(--p-4);
  background: transparent;
  border: var(--vlasova) solid var(--ink-700);
  border-radius: var(--radius);
  color: var(--text-svetly);
  font-weight: 600;
  cursor: pointer;
}

.celaobrazovka__zavriet:hover,
.celaobrazovka__zavriet:focus-visible { border-color: var(--text-svetly); }

/* Plocha pre samotnú prehliadku. `position: relative`, lebo vrstva
   s priebehom aj iframe sú v nej absolútne. */
.celaobrazovka__plocha {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--ink);
}

/* Kým je otvorená prehliadka, stránka pod ňou sa nescrolluje. */
body.je-celaobrazovka { overflow: hidden; }

/* Popisky ovládania pod rámom. */
.ovladanie {
  display: grid;
  gap: var(--p-4);
  margin: var(--p-8) 0 0;
  padding: var(--p-8) 0 0;
  border-top: var(--vlasova) solid var(--linka);
  list-style: none;
}

.ovladanie li {
  display: flex;
  align-items: flex-start;
  gap: var(--p-3);
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tichy);
}

.ovladanie .ikona { color: var(--text); width: 1rem; height: 1rem; }

@media (min-width: 48rem) {
  .ovladanie { grid-template-columns: repeat(3, 1fr); gap: var(--p-6); }
}

.atribucia {
  margin-top: var(--p-6);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-tichy);
}

/* ============ 10  PRE KOHO ============ */

.segmenty {
  display: grid;
  gap: 0;
  border-top: var(--vlasova) solid var(--linka);
}

.segment {
  display: grid;
  gap: var(--p-3);
  padding-block: var(--p-8);
  border-bottom: var(--vlasova) solid var(--linka);
}

.segment__ikona { color: var(--text); }

/* „Zatiaľ nie pre vás" — posledný riadok zoznamu, bez ikony. Text
   je plný, nie tichý: je to informácia, ktorú nechceme schovať. */
.segment--nie h3 { color: var(--text-tichy); }
.segment--nie p { color: var(--text); }

.segment p { color: var(--text-tichy); max-width: 48ch; }

@media (min-width: 48rem) {
  .segment {
    grid-template-columns: 2.5rem minmax(10rem, 14rem) 1fr;
    align-items: start;
    gap: var(--p-8);
  }
  .segment h3 { grid-column: 2; }
  .segment__ikona { grid-row: 1; grid-column: 1; }
  .segment p { grid-column: 3; }
}

/* ============ 11  CENNÍK ============ */

/* Ponuka zdarma pred cenníkom — tmavý pás cez celú šírku obsahu.
   Selektor `.ponuka` je v zozname tmavých plôch v tokens.css. */
.ponuka {
  display: grid;
  gap: var(--p-8);
  align-items: center;
  padding: var(--p-8);
  background: var(--plocha);
  color: var(--text);
}

.ponuka > div > * + * { margin-top: var(--p-3); }

.ponuka__nadpis {
  font-size: var(--text-xl);
  line-height: 1.15;
}

.ponuka__text { color: var(--text-tichy); max-width: 56ch; }

.ponuka .tlacidlo { justify-self: start; }

@media (min-width: 48rem) {
  .ponuka {
    grid-template-columns: 1fr auto;
    padding: var(--p-10) var(--p-12);
  }
}

.cennik__uvod {
  margin: var(--p-14) 0 var(--p-6);
}

.cennik__uvod > * + * { margin-top: var(--p-2); }

/* Mriežka kariet ako „Služby" v KC Digital: 1px medzera, cez ktorú
   presvitá podklad v farbe linky. Linka je teda podklad, nie rámik. */
.cennik {
  display: grid;
  gap: var(--vlasova);
  background: var(--linka);
  border: var(--vlasova) solid var(--linka);
}

.cena {
  display: grid;
  align-content: start;
  gap: var(--p-2);
  padding: var(--p-8);
  background: var(--plocha);
}

.cena__suma {
  margin-bottom: var(--p-4);
  font-size: var(--text-2xl);
  font-weight: var(--vaha-nadpis);
  letter-spacing: var(--prestrk-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cena__rozsah { color: var(--text-tichy); font-size: var(--text-sm); }

@media (min-width: 48rem) {
  .cennik { grid-template-columns: repeat(3, 1fr); }
  .cena { padding: var(--p-10); }
}

/* Čo je v cene — vodorovný zoznam s odškrtnutím. */
.v-cene {
  display: grid;
  gap: var(--p-4);
  margin: var(--p-12) 0 0;
  padding: 0;
  list-style: none;
}

.v-cene li {
  display: flex;
  align-items: flex-start;
  gap: var(--p-3);
  font-size: var(--text-base);
}

.v-cene .ikona { color: var(--text); margin-top: 0.2em; }

@media (min-width: 48rem) {
  .v-cene { grid-template-columns: repeat(3, 1fr); gap: var(--p-6) var(--p-8); }
}

/* ============ 12  FAQ ============
   Natívne <details>. Funguje bez JS, je prístupné z klávesnice
   a prehliadač aj vyhľadávač v ňom vedia hľadať text. Nenahrádzať
   vlastným akordeónom. */

.faq { border-top: var(--vlasova) solid var(--linka); }

.otazka { border-bottom: var(--vlasova) solid var(--linka); }

.otazka > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p-6);
  padding-block: var(--p-6);
  font-size: var(--text-lg);
  font-weight: var(--vaha-nadpis);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

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

.otazka > summary::after {
  content: '';
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.45em;
  border-right: var(--ram) solid var(--text);
  border-bottom: var(--ram) solid var(--text);
  transform: rotate(45deg);
  transition: transform var(--prechod);
}

.otazka[open] > summary::after { transform: rotate(-135deg); }

.otazka__telo {
  padding-bottom: var(--p-8);
  max-width: var(--miera);
  color: var(--text-tichy);
}

.otazka__telo > * + * { margin-top: var(--p-4); }

/* ============ 13  KONTAKT A FORMULÁR ============ */

.kontakt__mriezka {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4rem);
}

@media (min-width: 60rem) {
  .kontakt__mriezka { grid-template-columns: 0.9fr 1.1fr; }
}

.kontakt__text > * + * { margin-top: var(--p-6); }

/* Priame kontakty vedľa formulára — niekto radšej zavolá. */
.priame {
  display: grid;
  gap: var(--p-4);
  margin: 0;
  padding: var(--p-6) 0 0;
  border-top: var(--vlasova) solid var(--linka);
  list-style: none;
}

.priame li { display: flex; align-items: center; gap: var(--p-3); }

.priame .ikona { color: var(--text); }

.formular { display: grid; gap: var(--p-6); }

.pole { display: grid; gap: var(--p-2); }

/* Popisky a polia ako vo formulári KC Digital: popis verzálkami,
   pole s 2px tichým rámom, ktorý pri zameraní stmavne. */
.pole > label {
  font-size: var(--text-2xs);
  font-weight: var(--vaha-popis);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-tichy);
}

.pole__nepovinne {
  font-weight: 400;
  letter-spacing: 0.06em;
}

.pole input,
.pole textarea {
  width: 100%;
  padding: var(--p-3) var(--p-4);
  background: var(--plocha);
  /* Rám poľa je tmavší než ink/20 v KC Digital: hranica ovládacieho
     prvku musí mať aspoň 3 : 1 (WCAG 1.4.11). */
  border: var(--ram) solid var(--ram-pola);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  transition: border-color var(--prechod);
}

.pole input:hover,
.pole textarea:hover,
.pole input:focus,
.pole textarea:focus { border-color: var(--text); }

.pole textarea { min-height: 7.5rem; resize: vertical; }

.pole input::placeholder,
.pole textarea::placeholder { color: var(--text-tichy); opacity: 1; }

/* Súhlas so spracovaním. Políčko NIE JE predzaškrtnuté a nikdy nesmie
   byť — súhlas musí byť aktívny úkon (§ 109, čl. 7 GDPR). */
.suhlas {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--p-3);
  align-items: start;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-tichy);
}

.suhlas input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2em 0 0;
  accent-color: var(--akcent);
}

/* Náhrada za formulár pri vypnutom JavaScripte. Štandardne skrytá;
   odkrýva ju <style> vnútri <noscript> v hlavičke stránky. */
.bez-js { display: none; }

/* Odpoveď formulára (chyba alebo potvrdenie). Dopĺňa ju app.js. */
.odozva {
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: var(--p-4);
  border-left: 2px solid var(--akcent);
  background: var(--plocha-vyvysena);
}

.odozva:empty { display: none; }

/* ============ 14  PÄTKA ============
   Tu sú povinné údaje podľa § 3a Obchodného zákonníka a podľa zákona
   č. 22/2004 o elektronickom obchode. Žiadnu položku neodstraňuj
   bez toho, že by si vedel, podľa čoho tam je — zoznam je v CLAUDE.md. */

.patka {
  background: var(--ink);
  color: var(--text-svetly-tichy);
  padding-block: var(--p-16) var(--p-8);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.patka__mriezka {
  display: grid;
  gap: var(--p-12);
  padding-bottom: var(--p-12);
  border-bottom: var(--vlasova) solid var(--ink-700);
}

@media (min-width: 48rem) {
  .patka__mriezka { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--p-16); }
}

.patka h2 {
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-2xs);
  letter-spacing: var(--prestrk-ocko);
  text-transform: uppercase;
  color: var(--text-svetly-tichy);
  margin-bottom: var(--p-4);
}

/* Prvý stĺpec nesie názov značky — v pätke KC Digital je to wordmark. */
.patka__mriezka > div:first-child > h2 {
  font-size: var(--text-lg);
  font-weight: var(--vaha-nadpis);
  letter-spacing: var(--prestrk-znacka);
  color: var(--text-svetly);
}

.patka a { color: var(--text-svetly); }

.patka__udaje {
  display: grid;
  gap: var(--p-2);
  margin: 0;
}

.patka__udaje dt {
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-svetly-tichy);
}

.patka__udaje dd { margin: 0 0 var(--p-3); color: var(--text-svetly); }

.patka__odkazy {
  display: grid;
  gap: var(--p-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.patka__spodok {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-3) var(--p-8);
  justify-content: space-between;
  padding-top: var(--p-8);
  font-size: var(--text-xs);
}

/* ============ 15  PRÁVNA PODSTRÁNKA ============ */

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

.pravny h1 { font-size: var(--text-2xl); margin-bottom: var(--p-4); }

.pravny h2 {
  font-size: var(--text-lg);
  margin-top: var(--p-12);
  margin-bottom: var(--p-4);
  padding-top: var(--p-6);
  border-top: var(--vlasova) solid var(--linka);
}

.pravny h3 {
  font-size: var(--text-base);
  font-family: var(--pismo-text);
  font-weight: 600;
  letter-spacing: 0;
  margin-top: var(--p-8);
  margin-bottom: var(--p-2);
}

.pravny p,
.pravny ul,
.pravny ol { margin-top: var(--p-4); }

.pravny ul,
.pravny ol { padding-left: var(--p-6); }

.pravny li + li { margin-top: var(--p-2); }

.pravny__datum {
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-xs);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-tichy);
}

/* Tabuľka firemných údajov. Na mobile sa prepne na riadky pod sebou,
   lebo dvojstĺpcová tabuľka sa na 360px nedá čítať. */
.tabulka {
  width: 100%;
  margin-top: var(--p-6);
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: left;
}

.tabulka th,
.tabulka td {
  padding: var(--p-3) 0;
  border-bottom: var(--vlasova) solid var(--linka);
  vertical-align: top;
}

.tabulka th {
  font-weight: 600;
  padding-right: var(--p-6);
  white-space: nowrap;
  width: 1%;
}

@media (max-width: 34rem) {
  .tabulka th,
  .tabulka td { display: block; width: auto; white-space: normal; }
  .tabulka th { border-bottom: 0; padding-bottom: 0; }
}

/* --- Odstupy pod blokom. Jediné povolené „pomocné" triedy; všetko
       ostatné má mať vlastný názov komponentu. --- */
.odstup-nad-8 { margin-top: var(--p-8); }
.odstup-nad-12 { margin-top: var(--p-12); }

.patka__onas { max-width: 34ch; }
.patka__cookies { margin-top: var(--p-6); }

/* ============ 16  PRÍSTUPNOSŤ A OBMEDZENÝ POHYB ============ */

/* Pre čítačky obrazovky, vizuálne skryté. */
.len-pre-citacku {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Preskočenie na obsah — prvý prvok v tabulátorovom poradí. */
.preskoc {
  position: absolute;
  left: var(--p-4);
  top: var(--p-4);
  z-index: 100;
  padding: var(--p-3) var(--p-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--prechod);
}

.preskoc:focus { transform: translateY(0); }

/* Viditeľné zameranie klávesnicou. Obrys má odstup, aby nesplynul
   s vlasovými linkami. Nikdy nenastavuj `outline: none` bez náhrady. */
:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 4px;
}

/* Na tmavých plochách je `--akcent` papier, takže obrys zamerania
   sa preladí sám a nepotrebuje vlastné pravidlo. */

/* Kto si v systéme vypol animácie, nedostane ani naše. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Tlač: na papieri nemá zmysel tmavá plocha ani lepkavá hlavička. */
@media print {
  .hlavicka,
  .nav,
  .ukazka__ram,
  .preskoc { display: none; }
  body { background: #fff; color: #000; }
  .sekcia, .hero, .patka { background: #fff; color: #000; padding-block: var(--p-8); }
}

/* Svetlé sekcie oddeľuje vlasová linka hore — ako `border-t` v KC
   Digital. Tmavá sekcia ju nepotrebuje, jej hranicu nesie plocha. */
.sekcia:not(.sekcia--tien) { border-top: var(--vlasova) solid var(--linka); }


/* Záber zo scény pod vstupom do ukážky. Stlmený plošne, aby držal
   kontrast textu aj tlačidla (biely text na ploche ~ink/62 %). */
.ukazka__poster { position: absolute; inset: 0; z-index: 0; }
.ukazka__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ukazka__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(10 10 10 / 0.66);
}


/* ============ 22. 10.  HERO VIZUÁL, TÍM, CENNÍK ============ */

/* Pôdorys → záber z prehliadky pod textom hero. */
.hero__vizual {
  display: grid;
  gap: var(--p-6);
  margin-top: var(--p-16);
  align-items: center;
}
.hero__vizual figure { margin: 0; }
.hero__vizual figcaption {
  margin-top: var(--p-3);
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-2xs);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-tichy);
}
.plan svg { width: 100%; max-width: 17rem; height: auto; display: block; color: var(--text); }
.render img { width: 100%; height: auto; display: block; border: var(--vlasova) solid var(--linka); }
.hero__sipka { justify-self: start; transform: rotate(90deg); }
@media (min-width: 48rem) {
  .hero__vizual { grid-template-columns: minmax(0, 1fr) auto minmax(0, 2.4fr); gap: var(--p-8); }
  .hero__sipka { justify-self: center; transform: none; }
}

/* Galéria pod krokmi. */
.galeria { display: grid; gap: var(--p-4); margin-top: var(--p-12); }
.galeria img { width: 100%; height: auto; display: block; border: var(--vlasova) solid var(--linka); }
.galeria figure { margin: 0; }
.galeria__popis {
  margin-top: var(--p-3);
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-2xs);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-tichy);
}
@media (min-width: 48rem) { .galeria { grid-template-columns: 1fr 1fr; } }

/* Tím. */
.tim { display: grid; gap: var(--p-8); }
.osoba { display: grid; grid-template-columns: auto 1fr; gap: var(--p-6); align-items: start; padding-top: var(--p-6); border-top: var(--vlasova) solid var(--linka); }
.osoba__znak {
  display: grid; place-items: center;
  width: 4.5rem; aspect-ratio: 1;
  border: var(--ram) solid var(--text);
  font-weight: var(--vaha-nadpis);
  font-size: var(--text-xl);
  letter-spacing: var(--prestrk-display);
  margin: 0;
}
.osoba .ocko { margin: var(--p-1) 0 var(--p-3); }
/* Fotky zakladateľov (23. 10.) namiesto iniciálok, ak je v obsah.json „foto". */
.osoba__foto {
  width: 7.5rem;
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--vlasova) solid var(--linka);
}
@media (min-width: 64rem) { .osoba__foto { width: 9rem; } }
@media (min-width: 48rem) { .tim { grid-template-columns: 1fr 1fr; gap: var(--p-12); } }

/* Cenník: viditeľné upozornenie, zľava, makléri, hosting. */
.upozornenie {
  margin: var(--p-8) 0 var(--p-6);
  padding: var(--p-4) var(--p-6);
  border-left: var(--ram) solid var(--text);
  background: var(--plocha-vyvysena-svetla, transparent);
  font-size: var(--text-lg);
  color: var(--text);
  max-width: none;
}
.upozornenie strong { font-weight: var(--vaha-nadpis); }
.cena__akcia {
  margin-top: var(--p-4);
  padding-top: var(--p-3);
  border-top: var(--vlasova) solid var(--linka);
  font-weight: var(--vaha-nadpis);
  font-size: var(--text-md);
}
.cennik__makleri { margin: var(--p-12) 0 var(--p-4); }
.cennik--male .cena__suma { font-size: var(--text-xl); }
.hosting {
  margin-top: var(--p-10);
  padding: var(--p-6);
  border: var(--vlasova) solid var(--linka);
  display: grid; gap: var(--p-2);
}
.hosting__nadpis { margin: 0; font-family: var(--pismo-popis); font-weight: var(--vaha-popis); font-size: var(--text-2xs); letter-spacing: var(--prestrk-popis); text-transform: uppercase; color: var(--text-tichy); }
.hosting__suma { margin: 0; font-size: var(--text-xl); font-weight: var(--vaha-nadpis); letter-spacing: var(--prestrk-display); }
.hosting__text { margin: 0; color: var(--text-tichy); max-width: 60ch; }
@media (min-width: 48rem) { .cennik--male { grid-template-columns: repeat(3, 1fr); } }


/* 23. 10. — pôdorys a záber majú rovnakú šírku aj pomer 16 : 9,
   galéria má obe fotky v rovnakom pomere. */
.plan svg { max-width: none; width: 100%; height: auto; aspect-ratio: 16 / 9; box-sizing: border-box; border: var(--vlasova) solid var(--linka); padding: var(--p-3); }
.render img, .galeria img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 48rem) {
  .hero__vizual { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
.cennik__skupina { margin: var(--p-12) 0 var(--p-4); }
.cennik__uvod.cennik__skupina { margin-top: var(--p-12); }

/* Upozornenie na ceny stojí medzi blokmi cien, vycentrované. */
.upozornenie--stred { margin: var(--p-8) auto 0; text-align: center; border-left: 0; border-top: var(--ram) solid var(--text); border-bottom: var(--vlasova) solid var(--linka); }
.cennik__makleri { margin-top: var(--p-6); }


/* ============ 22. 10. večer — HERO S UKÁŽKOU, SEKCIA NA OBRAZOVKU ============
   Rozhodnutie majiteľov: návštevník má hneď po otvorení vidieť ukážku
   a každá kategória má sedieť na jednu obrazovku. Ukážka (rám, video,
   spustenie živej prehliadky) je preto v hero, vedľa textu. */

.hero__mriezka { display: grid; gap: var(--p-8); align-items: center; }
.hero__text > * + * { margin-top: var(--p-6); }
.hero .vyzvy { margin-top: var(--p-8); }
.hero__ukazka { min-width: 0; }

/* Rám v hero má vždy pomer videa; na mobile je video v toku a vrstva
   so spustením pod ním (prekrytie by sa do 200 px výšky nezmestilo). */
.hero__ukazka .ukazka__ram { aspect-ratio: 16 / 9; min-height: 0; }

.ukazka__video { position: absolute; inset: 0; z-index: 0; }
.ukazka__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Stmavenie len pri spodku — tam leží tlačidlo a texty; zvyšok videa
   ostáva jasný, nech je byt vidno. */
.ukazka__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 80%, transparent), transparent 60%);
}

/* Označenie scény hore vľavo ako štítok — spodok patrí spusteniu. */
.hero__ukazka .ukazka__oznacenie {
  top: var(--p-3);
  bottom: auto;
  left: var(--p-3);
  right: auto;
  padding: var(--p-1) var(--p-3);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  border-radius: var(--radius);
  color: var(--text-svetly);
  text-align: left;
}

.hero__ukazka .ukazka__vrstva[data-ukazka-zatvorene] {
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--p-3);
  padding: var(--p-6);
  text-align: left;
}
.hero__ukazka .ukazka__vyzva { max-width: 46ch; margin: 0; }
.hero__ukazka .ukazka__data { margin-top: var(--p-1); }
.ukazka__spustit .ikona { width: 1.25rem; height: 1.25rem; }

.hero__ukazka .ovladanie { margin-top: var(--p-4); padding-top: var(--p-4); grid-template-columns: 1fr 1fr; gap: var(--p-4); }
.hero__ukazka .atribucia { margin-top: var(--p-3); font-size: var(--text-2xs); }

@media (max-width: 47.999rem) {
  /* Na mobile: nadpis a jedna veta, hneď potom ukážka, až potom ponuka
     a výzva. Bez scrollovania tak človek vidí byt, nie len text. */
  .hero__text { display: contents; }
  .hero__mriezka { gap: var(--p-6); }
  .hero__mriezka > .hero__text > * { margin-top: 0; }
  .hero .ocko { order: 1; }
  .hero .h-hero { order: 2; }
  .hero__lead { order: 3; }
  .hero__ukazka { order: 4; }
  .hero__ponuka { order: 5; }
  .hero .vyzvy { order: 6; margin-top: 0; }

  .hero__ukazka .ukazka__ram { aspect-ratio: auto; }
  .hero__ukazka .ukazka__video { position: relative; aspect-ratio: 16 / 9; }
  .hero__ukazka .ukazka__video::after { display: none; }
  .hero__ukazka .ukazka__vrstva[data-ukazka-zatvorene] { position: relative; padding: var(--p-4); }
  .hero__ukazka .ovladanie { grid-template-columns: 1fr; gap: var(--p-2); }
}

@media (min-width: 64rem) {
  /* Hlavička je rovnako široká ako hero, nech logo lícuje s nadpisom. */
  .hlavicka > .obal { max-width: var(--sirka-hero); }
  .hero__mriezka { max-width: var(--sirka-hero); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--p-12); }
  .hero .h-hero { font-size: clamp(2.5rem, 1rem + 3vw, 3.75rem); }
}

/* Každá kategória na jednu obrazovku (len kde je na to výška).
   Sekcia má aspoň výšku okna mínus hlavička, obsah je vycentrovaný
   a jemné „prichytenie" (proximity, nie mandatory) dorovná sekciu
   pod hlavičku, keď sa pri nej človek zastaví. Dlhšie sekcie (FAQ,
   cenník) sú vyššie a scrollujú sa normálne. */
@media (min-width: 64rem) and (min-height: 40rem) {
  html { scroll-snap-type: y proximity; }
  .hero,
  .sekcia {
    min-height: calc(100svh - var(--vyska-hlavicky));
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
  }
  .hero { padding-block: var(--p-8); }
  .sekcia { padding-block: var(--p-16); }
}

/* Galéria v „Ako to robíme": pôdorys + dva zábery. */
@media (min-width: 48rem) { .galeria--tri { grid-template-columns: repeat(3, 1fr); } }
.galeria--tri figcaption {
  margin-top: var(--p-2);
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-2xs);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-tichy);
}

/* Cenník ako jedna tabuľka (22. 10. večer): developeri aj makléri
   v tých istých pásmach. Na úzkom displeji sa posúva len tabuľka. */
.cennik-tabulka {
  margin-top: var(--p-8);
  overflow-x: auto;
  border: var(--vlasova) solid var(--linka);
}
.cennik-tabulka table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.cennik-tabulka th,
.cennik-tabulka td {
  padding: var(--p-4) var(--p-6);
  border-bottom: var(--vlasova) solid var(--linka);
  text-align: left;
  vertical-align: top;
}
.cennik-tabulka tbody tr:last-child > * { border-bottom: 0; }
.cennik-tabulka thead th {
  font-family: var(--pismo-popis);
  font-weight: var(--vaha-popis);
  font-size: var(--text-2xs);
  letter-spacing: var(--prestrk-popis);
  text-transform: uppercase;
  color: var(--text-tichy);
}
.cennik-tabulka tbody th { font-weight: var(--vaha-nadpis); font-size: var(--text-md); }
.cennik-tabulka tbody th span {
  display: block;
  margin-top: var(--p-1);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--text-tichy);
}
.cennik-tabulka td {
  font-size: var(--text-xl);
  font-weight: var(--vaha-nadpis);
  letter-spacing: var(--prestrk-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cennik__pozn { margin-top: var(--p-3); font-size: var(--text-sm); color: var(--text-tichy); max-width: none; }
.cennik-tabulka + .cennik__pozn + .upozornenie--stred { margin-top: var(--p-6); }

/* Hosting po 12 mesiacoch — jeden riadok namiesto boxu. */
p.hosting {
  display: block;
  margin-top: var(--p-6);
  padding: var(--p-4) var(--p-6);
  color: var(--text-tichy);
  max-width: none;
}
p.hosting strong { color: var(--text); font-weight: var(--vaha-nadpis); }

/* Kompaktné rozloženie na počítači, aby každá kategória sedela na
   jednu obrazovku (pozri vyššie „Sekcia na obrazovku"). */
@media (min-width: 64rem) {
  .sekcia__hlavicka { margin-bottom: var(--p-8); }

  /* Ako to robíme: kroky 2 × 2. */
  #ako-to-prebieha .kroky { grid-template-columns: 1fr 1fr; column-gap: var(--p-12); }
  #ako-to-prebieha .krok { padding-block: var(--p-6); grid-template-columns: 4rem 1fr; }
  #ako-to-prebieha .krok { gap: var(--p-4); }
  #ako-to-prebieha .krok > div { display: block; }
  #ako-to-prebieha .krok > div > h3 { margin-bottom: var(--p-2); }
  #ako-to-prebieha .krok:nth-last-child(2) { border-bottom: var(--vlasova) solid var(--linka); }
  #ako-to-prebieha .galeria { margin-top: var(--p-8); }

  /* Pre koho: 2 × 2. */
  .segmenty { grid-template-columns: 1fr 1fr; column-gap: var(--p-12); }
  .segment { grid-template-columns: 2.5rem 1fr; gap: var(--p-2) var(--p-6); padding-block: var(--p-6); align-content: start; }
  .segment h3, .segment p { grid-column: 2; }
  .segment__ikona { grid-row: 1 / span 2; }

  /* FAQ: dva stĺpce otázok, širší obal. */
  #faq .obal--uzky { max-width: var(--sirka-obsah); }
  #faq .faq { columns: 2; column-gap: var(--p-12); }
  #faq .otazka { break-inside: avoid; }

  /* Cenník a porovnanie bez zbytočne veľkých okrajov. */
  .ponuka { padding: var(--p-6) var(--p-10); }
  .v-cene { margin-top: var(--p-8); gap: var(--p-3) var(--p-8); }
  .porovnanie__stlpec { padding: var(--p-8); }
  .scenar__stlpec { padding: var(--p-8); }
  .priznanie { margin-top: var(--p-10); }
}

/* Cenník na počítači: nadpis vľavo, ponuka vpravo; dole hosting
   a poznámka vedľa seba. */
@media (min-width: 64rem) {
  .cennik__hore { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-12); align-items: end; }
  .cennik__hore .sekcia__hlavicka { margin-bottom: 0; }
  .cennik__hore .ponuka { grid-template-columns: 1fr; gap: var(--p-4); padding: var(--p-6) var(--p-8); }
  .cennik-tabulka td { font-size: var(--text-lg); }
  .cennik-tabulka th, .cennik-tabulka td { padding-block: var(--p-3); }
  .cennik__dole { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-8); align-items: start; margin-top: var(--p-6); }
  .cennik__dole > * { margin-top: 0; }
  .upozornenie--stred { margin-top: var(--p-6); padding-block: var(--p-3); }
}

/* Doladenie výšok na počítači (22. 10. večer). */
@media (min-width: 64rem) {
  #ako-to-prebieha .sekcia__hlavicka { max-width: none; }
  #ako-to-prebieha .h-sekcia { max-width: 30ch; }
  #ako-to-prebieha .krok { padding-block: var(--p-4); }
  #ako-to-prebieha .galeria img,
  #ako-to-prebieha .plan svg { aspect-ratio: 2 / 1; }
  .galeria__pata { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-8); margin-top: var(--p-3); align-items: start; }
  .galeria__pata > * { margin-top: 0; max-width: none; }
  .cennik__dole > p.hosting { margin-top: 0; padding: 0; border: 0; }
  .cennik-tabulka th, .cennik-tabulka td { padding-block: var(--p-2); }
  .cennik-tabulka thead th { padding-block: var(--p-3) var(--p-2); }
  .cennik__hore .ponuka__nadpis { font-size: var(--text-lg); }
  .v-cene { margin-top: var(--p-6); }
}
@media (min-width: 64rem) and (min-height: 40rem) {
  .sekcia { padding-block: var(--p-12); }
}

/* Cenník na mobile: každá skupina ako karta, pásma pod sebou. */
@media (max-width: 47.999rem) {
  .cennik-tabulka { overflow: visible; border: 0; }
  .cennik-tabulka table { min-width: 0; }
  .cennik-tabulka thead { display: none; }
  .cennik-tabulka tbody,
  .cennik-tabulka tr,
  .cennik-tabulka th,
  .cennik-tabulka td { display: block; }
  .cennik-tabulka tr { border: var(--vlasova) solid var(--linka); }
  .cennik-tabulka tr + tr { margin-top: var(--p-4); }
  .cennik-tabulka tbody th { padding: var(--p-4); }
  .cennik-tabulka td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--p-4);
    padding: var(--p-3) var(--p-4);
    border-bottom: 0;
    border-top: var(--vlasova) solid var(--linka);
    font-size: var(--text-lg);
  }
  .cennik-tabulka td::before {
    content: attr(data-pasmo);
    font-family: var(--pismo-popis);
    font-weight: var(--vaha-popis);
    font-size: var(--text-2xs);
    letter-spacing: var(--prestrk-popis);
    text-transform: uppercase;
    color: var(--text-tichy);
  }
}
.galeria__pata { display: grid; gap: var(--p-3); margin-top: var(--p-3); }
.galeria__pata > * { margin-top: 0; }

/* Cenník prečistený (22. 10. neskoro večer): nadpis + upozornenie vľavo,
   ponuka vpravo, tabuľka, „V cene", jedna veta poznámky. */
.cennik__hore .lead strong { color: var(--text); font-weight: var(--vaha-nadpis); }
.cennik__vcene { margin-top: var(--p-10); }
.cennik__vcene .v-cene { margin-top: var(--p-4); }
.cennik__vcene + .cennik__pozn { margin-top: var(--p-8); }
@media (min-width: 64rem) {
  .cennik__hore .ponuka { gap: var(--p-6); }
}

/* Cenník ako jeden celok (23. 10., Nino: „je tam toho veľa"): pruh so
   zľavou nalepený na tabuľku, hosting ako posledný riadok tabuľky,
   „V cene" v jednom riadku, jedna poznámka. */
.ponuka-pruh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-3) var(--p-6);
  margin-top: var(--p-8);
  padding: var(--p-4) var(--p-6);
  border-top: var(--ram) solid var(--akcent);
  background: var(--plocha-vyvysena);
}
.ponuka-pruh p { flex: 1 1 28rem; margin: 0; max-width: none; font-weight: var(--vaha-nadpis); font-size: var(--text-md); }
.ponuka-pruh .ocko { display: inline; margin-right: var(--p-3); color: var(--akcent); }
.ponuka-pruh + .cennik-tabulka { margin-top: 0; border-top: 0; }
.ponuka-pruh .odkaz-sipka { flex: none; padding: var(--p-3) var(--p-6); }

.cennik-tabulka tfoot > tr > * {
  border-top: var(--vlasova) solid var(--linka);
  background: var(--plocha-vyvysena);
}
.cennik-tabulka tfoot th { font-weight: var(--vaha-nadpis); font-size: var(--text-md); }
.cennik-tabulka tfoot th span {
  display: block;
  margin-top: var(--p-1);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--text-tichy);
}
.cennik-tabulka tfoot td { color: var(--akcent); font-size: var(--text-lg); }
.cennik-tabulka tfoot td span {
  margin-left: var(--p-2);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--text-tichy);
}

#cennik .cennik__vcene { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p-3) var(--p-6); margin-top: var(--p-8); }
#cennik .cennik__vcene .v-cene { display: flex; flex-wrap: wrap; gap: var(--p-3) var(--p-6); margin: 0; }
#cennik .cennik__vcene .v-cene li { font-size: var(--text-sm); gap: var(--p-2); }
#cennik .cennik__vcene + .cennik__pozn { margin-top: var(--p-4); }

@media (max-width: 47.999rem) {
  .ponuka-pruh .ocko { display: block; margin: 0 0 var(--p-1); }
  .ponuka-pruh + .cennik-tabulka tr:first-child { border-top: 0; }
  .cennik-tabulka tfoot { display: block; margin-top: var(--p-4); }
  .cennik-tabulka tfoot > tr > * { border-top: 0; }
  .cennik-tabulka tfoot th { padding: var(--p-4); }
  .cennik-tabulka tfoot td { flex-wrap: wrap; justify-content: flex-start; border-top: var(--vlasova) solid var(--linka); }
  .cennik-tabulka tfoot td::before { content: none; }
  .cennik-tabulka tfoot td span { flex-basis: 100%; margin: 0; }
  #cennik .cennik__vcene .v-cene { display: grid; }
}

/* Vlastný posuvník (22. 10., 23. 10. bez šípok a s priehľadnou dráhou):
   tenký jazdec v akcentovej farbe. Úplne skrytý nie je — návštevník má
   vidieť, kde na stránke je a koľko jej ešte zostáva.

   POZOR: Chrome a Edge pri nastavenom `scrollbar-color`/`scrollbar-width`
   ignorujú ::-webkit-scrollbar a kreslia systémový posuvník so šípkami.
   Štandardné vlastnosti preto dostane len prehliadač bez
   ::-webkit-scrollbar (Firefox, ten šípky pri `thin` nemá). */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--akcent) transparent;
  }
}
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; background: transparent; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--akcent);
  background-clip: padding-box;
  border: 0.1875rem solid transparent;
  border-radius: 1rem;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Prepínač jazyka (23. 10.): SK ↔ EN. Na mobile vedľa tlačidla Menu,
   na širokom displeji úplne vpravo za navigáciou. */
.jazyk-prepinac {
  margin-left: auto;
  padding: var(--p-2) var(--p-3);
  border: var(--vlasova) solid var(--linka-silna);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--text-2xs);
  font-weight: var(--vaha-nadpis);
  letter-spacing: var(--prestrk-popis);
  text-decoration: none;
  transition: border-color var(--prechod);
}
.jazyk-prepinac:hover,
.jazyk-prepinac:focus-visible { border-color: var(--text); }
@media (min-width: 68rem) {
  .jazyk-prepinac { order: 3; margin-left: 0; }
  .nav { order: 2; margin-left: auto; }
}

/* Poznámka o preklade v anglických zásadách (23. 10.). */
.pravny__pozn { margin-top: var(--p-2); font-size: var(--text-sm); color: var(--text-tichy); }