/* ------------------------------------------------------------------
   LUMA Creative — základné štýly.
   Rozloženie, mierky a časovanie animácií vychádzajú zo šablóny Necyron;
   farby idú cez tokeny z tokens.css, takže svetlá aj tmavá téma fungujú
   bez duplikovania pravidiel.
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@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;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: 500;
}
h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  font-weight: 500;
}
p {
  margin: 0 0 var(--space-4);
}
a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-bg);
  color: var(--accent-contrast);
  border-radius: 0 0 var(--radius-sm) 0;
}
.preskocit:focus {
  left: 0;
}
/* ---------- Nosné rozloženie ---------- */
.obal {
  width: 100%;
  margin-inline: auto;
}
.sekcia {
  padding-block: var(--section-y);
}
/* --- Drobčeková navigácia ---
   Sedí nad hlavou stránky a je zámerne tichá: je to orientácia, nie výzva.
   `--section-y` sa tu nepoužíva — drobčeky patria k hlave pod nimi, nie
   samostatná sekcia s vlastným odsadením. */
.drobcek {
  padding-block: clamp(12px, 2vw, 20px) 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.drobcek__zoznam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Oddeľovač je v CSS, nie v HTML — do prečítaného textu ani do kopírovaného
   výberu nepatrí, je to čisto vizuálna pomôcka. */
.drobcek__polozka + .drobcek__polozka::before {
  content: '/';
  margin-inline-end: 8px;
  color: var(--border-strong);
}
.drobcek__odkaz {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.drobcek__odkaz:hover,
.drobcek__odkaz:focus-visible {
  color: var(--text);
  border-bottom-color: currentColor;
}
.drobcek__aktualna {
  color: var(--text);
}

/* --- Prevádzka na cenníku ---
   Stojí pod triedami a je zámerne pokojnejšia než ony: nie je to siedma
   možnosť na výber, je to položka, ktorá sa týka všetkých šiestich. */
.prevadzka {
  margin-block-start: clamp(24px, 4vw, 40px);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--bg-alt);
}
.prevadzka__nadpis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 0 8px;
  /* Značka je H2 (súrodenec kariet tried), veľkosť ostáva na úrovni H3.
     Bez týchto troch riadkov by prevzala vzhľad H2 — väčšie písmo, tenší
     rez a zlatú farbu z bloku „Zlaté nadpisy" nižšie. */
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--text);
}
.prevadzka__cena {
  color: var(--accent-strong, var(--luma-gold-strong));
  font-variant-numeric: tabular-nums;
}
.prevadzka__popis {
  max-width: 62ch;
  margin: 0 0 12px;
  color: var(--text-muted);
}
.prevadzka__obsah {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 24px;
  margin: 0;
  padding-inline-start: 1.2em;
}

/* --- Zhrnutá odpoveď pod nadpisom ---
   Prvý odsek stránky odpovedá na otázku, s ktorou návštevník prišiel, a je to
   zároveň odsek, ktorý si z stránky odnesie odpovedací engine. Preto má
   vlastnú triedu a väčšie písmo než bežný text — nesie váhu, ktorú má. */
.odpoved {
  max-width: 68ch;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.1875rem);
  line-height: 1.6;
}

.sekcia--tichá {
  background: var(--bg-alt);
}
/* Široký obsah (tabuľky, kód) dostane vlastný posuvník namiesto toho, aby
   roztiahol celú stránku. */
.pretecenie {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* ---------- Tlačidlá ---------- */
.tlacidlo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.tlacidlo--tiche {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.tlacidlo--tiche:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* ---------- Hlavička ---------- */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.hlavicka__vnutro {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.znacka {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
/* Dva varianty zostavy sa striedajú podľa témy. Nad hero, ktoré je tmavé
   aj v svetlej téme, platí vždy svetlá kresba. */
.znacka {
  text-decoration: none;
}
/* Podtitul „WEB & E-COMMERCE STUDIO" má v kresbe 23 % výšky loga, takže
   pri malom logu sú jeho písmená pod hranicou čitateľnosti. Pri 92 px
   majú okolo 12 px.

   Jas dvíhame filtrom, nie prekreslením súboru — logo tak ostáva jediné
   a v svetlej téme sa použije bez úprav. */
.znacka__obr {
  height: 92px;
  width: auto;
}
body:has(.hero) .hlavicka .znacka__obr--tmava {
  filter: brightness(1.34) contrast(1.1) saturate(1.06);
}
:root[data-theme="dark"] .znacka__obr--tmava {
  filter: brightness(1.28) contrast(1.08) saturate(1.05);
}
.znacka__obr--tmava {
  display: none;
}
:root[data-theme="dark"] .znacka__obr--svetla {
  display: none;
}
:root[data-theme="dark"] .znacka__obr--tmava {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .znacka__obr--svetla {
    display: none;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .znacka__obr--tmava {
    display: block;
  }
}
body:has(.hero) .hlavicka .znacka__obr--svetla {
  display: none;
}
body:has(.hero) .hlavicka .znacka__obr--tmava {
  display: block;
}
.navigacia__zoznam {
  display: flex;
  align-items: center;
}
.navigacia__odkaz {
  display: inline-block;
  text-decoration: none;
  position: relative;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.navigacia__odkaz::after {
  content: '';
  position: absolute;
  bottom: 0;
}
/* Šablóna drží farbu položky rovnakú v pokoji, pri hoveri aj pri aktívnej
   stránke (#FFFFFF) — stav nesie podčiarknutie, nie zmena farby textu. */
.navigacia__odkaz:hover,
.navigacia__odkaz.je-aktivny {
  color: var(--text);
}
.hlavicka__nastroje {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.prepinac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: var(--transition);
}
.prepinac--tema {
  width: 40px;
  padding: 0;
  font-size: 1.05rem;
}
.prepinac:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.prepinac--jazyk {
  gap: 2px;
  padding: 3px;
  cursor: default;
}
.prepinac__jazyk {
  min-width: 36px;
  min-height: 32px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.prepinac__jazyk.je-aktivny {
  background: var(--accent-bg);
  color: var(--accent-contrast);
}
/* Hamburger sa ukáže až na tablete — na desktope je menu vodorovné. */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
}
.hamburger__ciara,
.hamburger__ciara::before,
.hamburger__ciara::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--text);
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.hamburger__ciara {
  top: 50%;
  margin-top: -1px;
}
.hamburger__ciara::before {
  content: '';
  top: -6px;
}
.hamburger__ciara::after {
  content: '';
  top: 6px;
}
.hamburger:hover .hamburger__ciara,
.hamburger:hover .hamburger__ciara::before,
.hamburger:hover .hamburger__ciara::after {
  background: #bebebe;
}
.hamburger[aria-expanded="true"] .hamburger__ciara {
  background: transparent;
}
.hamburger[aria-expanded="true"] .hamburger__ciara::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__ciara::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}
/* ---------- Pätička ---------- */
.paticka {
  margin-top: var(--section-y-velka);
  padding-block: var(--section-y-velka) 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.paticka__vnutro {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--gutter), 20px);
}
/* Newsletter sedí v karte nad pätičkou, aby sa nestratil medzi odkazmi. */
.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  margin-bottom: 50px;
  padding: 30px;
  background: var(--surface);
}
:root[data-theme="dark"] .newsletter {
  background: #050e0e;
}
.newsletter__nadpis {
  font-size: 1.5em;
  margin-bottom: 8px;
}
.newsletter__popis {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.newsletter__vstup {
  flex: 1 1 14rem;
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.newsletter__vstup:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.newsletter__sprava {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
/* Honeypot musí byť pre človeka neviditeľný, ale pre robota vyplniteľný —
   display:none by ho niektoré roboty preskočili. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.paticka__mriezka {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.9fr)) minmax(0, 1.8fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
/* Väčšie logo je aj ostrejšie: pri 44 px sa 1812 px široká kresba
   zmenšovala 10× a podtitul sa rozmazal do šedej kaše. */
.paticka__logo {
  height: 76px;
  width: auto;
  margin-bottom: 18px;
}
:root[data-theme="dark"] .paticka__logo--tmava {
  filter: brightness(1.18) contrast(1.05);
}
.paticka__logo--tmava {
  display: none;
}
:root[data-theme="dark"] .paticka__logo--svetla {
  display: none;
}
:root[data-theme="dark"] .paticka__logo--tmava {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .paticka__logo--svetla {
    display: none;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .paticka__logo--tmava {
    display: block;
  }
}
.paticka__tagline {
  max-width: 34ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.paticka__znackyZoznam {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.paticka__znacka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.paticka__znacka img {
  width: 22px;
  height: 22px;
}
.paticka__stlpecNadpis {
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 500;
  margin-bottom: 14px;
  /* Značka je H2, farba nie — nadpisy stĺpcov pätičky majú ostať tiché.
     Viď blok „Zlaté nadpisy" nižšie. */
  color: var(--text);
}
.paticka__stlpec li + li {
  margin-top: 8px;
}
.paticka__odkaz {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
  word-break: break-word;
}
.paticka__odkaz:hover {
  color: var(--accent);
}
.paticka__adresa {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 8px;
}
/* Kontakt: telefón aj e-mail patria na jeden riadok. `word-break: break-word`
   z .paticka__odkaz je tu vypnuté — zlomená adresa („…onlin / e") vyzerá ako
   preklep a nedá sa označiť dvojklikom. Ak by sa raz predsa nezmestila,
   radšej sa mierne zmenší, než aby sa rozpadla. */
.paticka__kontakt .paticka__odkaz {
  display: inline-block;
  white-space: nowrap;
  word-break: normal;
  font-size: clamp(13px, 0.92vw, var(--fs-sm));
}
/* Spodná lišta: všetko v jednom riadku a na spoločnej základni. */
.paticka__spodok {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 30px;
  padding-top: 24px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.paticka__spodok > * {
  margin: 0;
}
.paticka__autor {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.paticka__autorNazov {
  color: var(--text);
  font-weight: 500;
}
/* Verzia musí byť čitateľná — nie šedý drobček na hranici viditeľnosti. */
.paticka__verzia {
  display: inline-block;
  padding: 2px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.paticka__cookies {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: var(--transition);
}
.paticka__cookies:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.paticka__prava {
  margin-left: auto;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .paticka__mriezka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
  .newsletter {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .paticka__mriezka {
    grid-template-columns: 1fr;
  }
}
/* ---------- Cookie lišta ---------- */
.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-toast);
  padding: var(--gutter);
  padding-bottom: max(var(--gutter), env(safe-area-inset-bottom));
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.cookies[hidden] {
  display: none;
}
.cookies__vnutro {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.cookies__nadpis {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}
.cookies__text {
  flex: 1 1 340px;
}
.cookies__text p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.cookies__tlacidla {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* ---------- Body zlomu ---------- */
/* MacBook Air 13" — 1280 logických bodov. Kontajner sa musí zmestiť aj
   s okrajmi, inak sa navigácia zalomí presne na tomto stroji. */
@media (max-width: 1280px) {
  :root {
    --container: 1120px;
  }
}
/* Tablet na výšku a mobil — navigácia sa mení na výsuvný panel. */
@media (max-width: 900px) {
  .hamburger {
    display: inline-flex;
  }
  .navigacia {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 86vw);
    padding: calc(var(--space-8) + var(--space-4)) var(--gutter) var(--gutter);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: var(--z-menu);
  }
  .navigacia.je-otvorene {
    transform: translateX(0);
  }
  .navigacia__zoznam {
    flex-direction: column;
    align-items: stretch;
  }
  .navigacia__polozka + .navigacia__polozka {
    border-top: 1px solid var(--border);
  }
  /* Odsadenie a veľkosť písma odkazu v mobilnom paneli sú na konci súboru
     v sekcii „Responzívne dorovnania" — základné pravidlo menu (`.navigacia__odkaz`
     v časti „Menu podľa šablóny") stojí nižšie a odtiaľto by ich prebilo. */
  .navigacia__odkaz {
    display: block;
    min-height: 48px;
  }
  /* Tmavá plachta pod panelom — klik mimo menu ho zavrie. */
  .plachta {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-menu) - 1);
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }
  .plachta.je-viditelna {
    opacity: 1;
  }
  body.je-zamknute {
    overflow: hidden;
  }
}
/* Mobil. */
@media (max-width: 640px) {
  /* `.hlavicka__vnutro` s tesnejším odsadením je na konci súboru — základná
     výška hlavičky sa nastavuje nižšie a odtiaľto by ju prebila. */
  .znacka__obr {
    height: 62px;
  }
  .prepinac--jazyk {
    padding: 2px;
  }
  .prepinac__jazyk {
    min-width: 32px;
    font-size: 0.75rem;
  }
  .paticka__spodok {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .paticka__prava {
    margin-left: 0;
  }
  .cookies__vnutro {
    flex-direction: column;
    align-items: stretch;
  }
  .cookies__tlacidla .tlacidlo {
    flex: 1 1 auto;
  }
}
/* Veľmi úzke displeje (iPhone SE a spol.). */
@media (max-width: 380px) {
  :root {
    --gutter: 0.875rem;
  }
  .prepinac--tema {
    width: 36px;
    min-height: 36px;
  }
}
/* Balíky */
.baliky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.balik {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.balik--odporucany {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.balik__cena {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-h3);
  font-family: var(--font-heading);
}
.balik__cena span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.balik__alternativa, .balik__dodanie {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.balik__obsah {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.balik__obsah li {
  padding-left: 1.4em;
  position: relative;
  font-size: var(--fs-sm);
}
.balik__obsah li::before {
  content: '·';
  position: absolute;
  left: 0.4em;
  color: var(--accent);
  font-weight: 700;
}
/* Hero */
.hero__stitok {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.hero__uvod {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}
/* Kontakt */
/* ==================================================================
   Prvky prevzaté zo šablóny Necyron

   Rozmery, rádiusy a časovanie sú z Elementor JSON (templates/*.json).
   Farby idú cez tokeny LUMA — šablóna má šalviovú zeleň, my zlatú,
   ale tonálna stavba ostáva rovnaká: sýty akcent na tmavom podklade.
   ================================================================== */
/* Kontajner šablóny má 1300px a vodorovné odsadenie rieši sekcia. */
/* ---------- Malý štítok nad nadpisom ---------- */
/* ---------- Hero ---------- */
/* Nadpis cez celú šírku s gradientovou výplňou písma — podpis šablóny. */
/* Viditeľný H1 domovskej stránky, pod rovnicou.

   Rozmery sú tie isté ako `.hlava__nadpis`, teda H1 na ostatných stránkach —
   domovská nemá dôvod mať iný. Rozdiel je len zarovnanie na stred, lebo
   rovnica nad ním je tiež na stred, a farba: `.hero h1` je biela, aby na
   fotke držala kontrast (zlatá by sa v svetlejších miestach stratila).

   `text-transform: none` je nutné — základné `h1` je verzálkami. */
.hero__titulok {
  margin: 0 auto var(--space-6);
  max-width: 20ch;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  text-transform: none;
  text-align: center;
  text-wrap: balance;
}

/* Prizma je nadstavba, nie druhá rovnocenná značka — jej stĺpec je preto
   oddelený linkou a text má o stupeň tichší. */
/* ---------- Pilulka ---------- */
/* ---------- Tlačidlá podľa šablóny ---------- */
/* Svetlá zlatá #F5C26B na tmavom pozadí svietila ako výstražná značka.
   Berieme tmavší odtieň z glyfu loga (#D9A13B) — je to tá istá značková
   farba, len tichšia, a s bielym textom drží kontrast 4,6 : 1. */
/* Kruhová šípka — v šablóne sedí v rohu každej karty. */
/* ---------- Karta ---------- */
/* ---------- Mriežka „prečo my" s číslami 01–04 ---------- */
/* Karta zo šablóny: v pokoji vidno fotku, číslo a šípku, pri hoveri sa panel
   vysunie a odhalí text. Fotka leží pod panelom, rovnako ako v predlohe. */
/* Fotka vypĺňa celú kartu, panel na nej leží. Zlatý závoj ju drží v palete webu
   a spodný gradient robí podklad pod panelom dosť tmavý na čitateľnosť. */
/* Pri hoveri sa fotka priblíži a presvetlí — ten istý pohyb ako v šablóne. */
/* Hover aj klávesnica — bez :focus-within by sa k textu nedostal nikto,
   kto myš nepoužíva. */
/* Dotykové displeje hover nepoznajú — tam je panel otvorený natrvalo. */
/* ---------- Karty tímu ---------- */
/* Fotka prečnieva nad hornú hranu karty — v šablóne je to margin-top -90px. */
/* ---------- Portfólio ---------- */
/* Filtre nad portfóliom */
/* ---------- FAQ ---------- */
/* ---------- Body zlomu pre nové prvky ---------- */
/* Päť stĺpcov drží po 1150 px; nižšie by bola karta užšia než jej nadpis. */
/* ---------- Značka Very v hero ---------- */
/* Glyf sa škáluje s nápisom, aby dvojica držala pomer na každej šírke. */
/* Tlačidlá patria k Prizme, ktorá je nad nimi — medzera je preto malá,
   spodné odsadenie drží odstup od ďalšej sekcie. */
/* Tlačidlá kopírujú mriežku blokov nad nimi: prvé začína pod Verou,
   druhé presne pod Prizmou. Voľné zalomenie by ich rozhodilo mimo osi
   stĺpcov a hero by pôsobilo neusporiadane. */
/* Druhé tlačidlo dostane rovnaké odsadenie ako stĺpec Prizmy, takže obe
   sedia presne pod textom, ku ktorému patria. */
/* Tlačidlo v balíku sedí na spodku karty, aby boli karty zarovnané. */
/* Značka pri názve modulu — sedí na účiare textu, nie nad ňou. */
/* ==================================================================
   Animácie zo šablóny

   Elementor používa animate.css: fadeInUp / fadeInLeft / fadeInRight,
   trvanie 1,25 s (slow = 2 s) a oneskorenia 100–800 ms. Prvky sa spúšťajú
   pri vstupe do viewportu — u nás to rieši IntersectionObserver v app.js,
   ktorý pridá triedu .je-viditelny.
   ================================================================== */
/* Oneskorenia podľa šablóny. */
/* Kto si vypol pohyb, dostane obsah rovno — bez čakania na observer. */
/* ==================================================================
   Menu podľa šablóny

   Necyron má položky DM Sans 1em/500 capitalize, vodorovný padding 25 px
   a mobilný panel s pozadím #091818 a rádiusom 20 px. Podčiarknutie
   nahrádza farebný prechod na akcent — v LUMA zlatej.
   ================================================================== */
/* Hlavička šablóny nie je prilepená a prekrýva hero. U nás prilepená
   ostáva — na dlhých cenníkoch je to praktickejšie — ale výška aj
   odsadenie sedia so šablónou (30 px zvisle). */
/* ==================================================================
   Tlačidlá podľa šablóny — so šípkou vpravo a odsadením 10 px
   ================================================================== */
/* Tlačidlá bez šípky (napr. cookie lišta) — šípka by tam mátla. */
/* ---------- Sekcia produktu (Prizma) ---------- */
/* Znak sa drží pri rolovaní vedľa textu — inak by pri dlhom rozpise
   ostal hore a dole by zívala prázdna šachta. */
/* Glyf sedí pri ľavom okraji svojho stĺpca, teda hneď vedľa textu —
   vycentrovaný odplával doprava a medzi ním a odstavcami zívala diera. */
/* ---------- Hlavička podstránky ---------- */
/* Podnadpis v hlavičke stránky je jedna veta a má sa zmestiť do riadku —
   62ch z bežnej sekcie ju lámalo na dva. Text-wrap: balance zabráni tomu,
   aby na druhom riadku ostalo jedno slovo, keď sa raz predsa zalomí. */
/* ---------- Služby ---------- */
/* Text a obrázok vedľa seba, body pod nimi cez celú šírku. */
/* Štyri body majú stáť v jednom riadku — auto-fit ich pri tejto šírke
   lámal na 3 + 1, čo vyzeralo ako chyba sadzby. */
/* ---------- Kroky procesu ---------- */
/* ---------- Portfólio: doplnky ---------- */
/* ---------- Dvojica značiek v hero ---------- */
/* Rovnica na dvoch riadkoch: hore logo firmy, dole jej produkty.
   Produkty sú menšie, aby bolo jasné, čo je celok a čo časti. */
.hero__rovnica {
  justify-items: center;
}
.hero__riadok {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 2vw, 1.6rem);
  margin: 0;
}
/* Firma je o stupeň väčšia než jej produkty — rovnica tak povie,
   čo je celok a čo časti, bez jediného slova navyše. */
.hero__clenObr--firma {
  height: clamp(2.4rem, 9vw, 7.2rem);
}
.hero__firmaText {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 9vw, 7.2rem);
  line-height: 0.88;
  font-weight: 500;
  letter-spacing: -0.02em;
  /* Presne farba glyfu, ktorý stojí vedľa. Predtým tu bol gradient končiaci
     na #d9a544 — spodok písmen tak stmavol pod odtieň značky a slovo vyzeralo
     ako iná zlatá než kresba pri ňom. */
  color: var(--luma-gold-znacka);
}
@media (max-width: 640px) {
  .hero__riadok {
    gap: 0.4rem;
  }
}
/* Kontakt */
/* ==================================================================
   Prvky prevzaté zo šablóny Necyron

   Rozmery, rádiusy a časovanie sú z Elementor JSON (templates/*.json).
   Farby idú cez tokeny LUMA — šablóna má šalviovú zeleň, my zlatú,
   ale tonálna stavba ostáva rovnaká: sýty akcent na tmavom podklade.
   ================================================================== */
/* Kontajner šablóny má 1300px a vodorovné odsadenie rieši sekcia. */
/* ---------- Malý štítok nad nadpisom ---------- */
/* ---------- Hero ---------- */
/* Nadpis cez celú šírku s gradientovou výplňou písma — podpis šablóny. */
/* Prizma je nadstavba, nie druhá rovnocenná značka — jej stĺpec je preto
   oddelený linkou a text má o stupeň tichší. */
/* ---------- Pilulka ---------- */
/* ---------- Tlačidlá podľa šablóny ---------- */
/* Svetlá zlatá #F5C26B na tmavom pozadí svietila ako výstražná značka.
   Berieme tmavší odtieň z glyfu loga (#D9A13B) — je to tá istá značková
   farba, len tichšia, a s bielym textom drží kontrast 4,6 : 1. */
/* Kruhová šípka — v šablóne sedí v rohu každej karty. */
/* ---------- Karta ---------- */
/* ---------- Mriežka „prečo my" s číslami 01–04 ---------- */
/* Karta zo šablóny: v pokoji vidno fotku, číslo a šípku, pri hoveri sa panel
   vysunie a odhalí text. Fotka leží pod panelom, rovnako ako v predlohe. */
/* Fotka vypĺňa celú kartu, panel na nej leží. Zlatý závoj ju drží v palete webu
   a spodný gradient robí podklad pod panelom dosť tmavý na čitateľnosť. */
/* Pri hoveri sa fotka priblíži a presvetlí — ten istý pohyb ako v šablóne. */
/* Hover aj klávesnica — bez :focus-within by sa k textu nedostal nikto,
   kto myš nepoužíva. */
/* Dotykové displeje hover nepoznajú — tam je panel otvorený natrvalo. */
/* ---------- Karty tímu ---------- */
/* Fotka prečnieva nad hornú hranu karty — v šablóne je to margin-top -90px. */
/* ---------- Portfólio ---------- */
/* Filtre nad portfóliom */
/* ---------- FAQ ---------- */
/* ---------- Body zlomu pre nové prvky ---------- */
/* Päť stĺpcov drží po 1150 px; nižšie by bola karta užšia než jej nadpis. */
/* ---------- Značka Very v hero ---------- */
/* Glyf sa škáluje s nápisom, aby dvojica držala pomer na každej šírke. */
/* Tlačidlá patria k Prizme, ktorá je nad nimi — medzera je preto malá,
   spodné odsadenie drží odstup od ďalšej sekcie. */
/* Tlačidlá kopírujú mriežku blokov nad nimi: prvé začína pod Verou,
   druhé presne pod Prizmou. Voľné zalomenie by ich rozhodilo mimo osi
   stĺpcov a hero by pôsobilo neusporiadane. */
/* Druhé tlačidlo dostane rovnaké odsadenie ako stĺpec Prizmy, takže obe
   sedia presne pod textom, ku ktorému patria. */
/* Tlačidlo v balíku sedí na spodku karty, aby boli karty zarovnané. */
/* Značka pri názve modulu — sedí na účiare textu, nie nad ňou. */
/* ==================================================================
   Animácie zo šablóny

   Elementor používa animate.css: fadeInUp / fadeInLeft / fadeInRight,
   trvanie 1,25 s (slow = 2 s) a oneskorenia 100–800 ms. Prvky sa spúšťajú
   pri vstupe do viewportu — u nás to rieši IntersectionObserver v app.js,
   ktorý pridá triedu .je-viditelny.
   ================================================================== */
/* Oneskorenia podľa šablóny. */
/* Kto si vypol pohyb, dostane obsah rovno — bez čakania na observer. */
/* ==================================================================
   Menu podľa šablóny

   Necyron má položky DM Sans 1em/500 capitalize, vodorovný padding 25 px
   a mobilný panel s pozadím #091818 a rádiusom 20 px. Podčiarknutie
   nahrádza farebný prechod na akcent — v LUMA zlatej.
   ================================================================== */
/* Hlavička šablóny nie je prilepená a prekrýva hero. U nás prilepená
   ostáva — na dlhých cenníkoch je to praktickejšie — ale výška aj
   odsadenie sedia so šablónou (30 px zvisle). */
/* ==================================================================
   Tlačidlá podľa šablóny — so šípkou vpravo a odsadením 10 px
   ================================================================== */
/* Tlačidlá bez šípky (napr. cookie lišta) — šípka by tam mátla. */
/* ---------- Sekcia produktu (Prizma) ---------- */
/* Znak sa drží pri rolovaní vedľa textu — inak by pri dlhom rozpise
   ostal hore a dole by zívala prázdna šachta. */
/* Glyf sedí pri ľavom okraji svojho stĺpca, teda hneď vedľa textu —
   vycentrovaný odplával doprava a medzi ním a odstavcami zívala diera. */
/* ---------- Hlavička podstránky ---------- */
/* Podnadpis v hlavičke stránky je jedna veta a má sa zmestiť do riadku —
   62ch z bežnej sekcie ju lámalo na dva. Text-wrap: balance zabráni tomu,
   aby na druhom riadku ostalo jedno slovo, keď sa raz predsa zalomí. */
/* ---------- Služby ---------- */
/* Text a obrázok vedľa seba, body pod nimi cez celú šírku. */
/* Štyri body majú stáť v jednom riadku — auto-fit ich pri tejto šírke
   lámal na 3 + 1, čo vyzeralo ako chyba sadzby. */
/* ---------- Kroky procesu ---------- */
/* ---------- Portfólio: doplnky ---------- */
/* ---------- Dvojica značiek v hero ---------- */
/* Rovnica LUMA = Vera + Prizma. Členy sú menšie než firma, aby bolo
   jasné, čo je celok a čo jeho časti. */
.hero__rovnica {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1.6vw, 1.4rem);
  padding-top: 20px;
}
.hero__firma {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 11.5vw, 9.5rem);
  line-height: 0.88;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: linear-gradient(117deg, #ffffff 0%, rgba(255, 255, 255, 0.35) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__operator {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 5.5vw, 4.4rem);
  line-height: 1;
  font-weight: 400;
  color: var(--luma-gold-znacka);
  /* Znamienka sú stále o stupeň tichšie než členy — nesú vzťah, nie mená —
     ale nie natoľko, aby na fotke zmizli. */
  opacity: 0.8;
}
.hero__clen {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 0.7rem);
}
.hero__clenObr {
  height: clamp(2rem, 7.5vw, 6rem);
  width: auto;
}
.hero__clenText {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 7.5vw, 5.8rem);
  line-height: 0.88;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--luma-gold-znacka);
}
@media (max-width: 640px) {
  .hero__rovnica {
    gap: 0.35rem;
  }
}
.hero__akcie {
  flex-wrap: wrap;
}
/* Kontakt */
.kontakt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-7);
  margin-top: var(--space-6);
}
.kontakt__mapa iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}
.kontakt__mapaOdkaz {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
}
/* ==================================================================
   Prvky prevzaté zo šablóny Necyron

   Rozmery, rádiusy a časovanie sú z Elementor JSON (templates/*.json).
   Farby idú cez tokeny LUMA — šablóna má šalviovú zeleň, my zlatú,
   ale tonálna stavba ostáva rovnaká: sýty akcent na tmavom podklade.
   ================================================================== */
/* Kontajner šablóny má 1300px a vodorovné odsadenie rieši sekcia. */
.obal {
  max-width: var(--container);
  padding-inline: max(var(--gutter), 20px);
}
@media (min-width: 1025px) {
  :root {
    --gutter: 0px;
  }
}
@media (max-width: 1024px) {
  :root {
    --gutter: 30px;
  }
}
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
  }
}
/* ---------- Malý štítok nad nadpisom ---------- */
.stitok {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.9em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stitok::before {
  content: '';
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 6px) center / 100% 15px no-repeat;
  mask: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 6px) center / 100% 15px no-repeat;
}
/* Náznak pokračovania: čiarka a štítok vpravo dole v hero.
   Sedí na spodnú hranu prvej obrazovky, kde ho oko nájde po prečítaní rovnice.
   `pointer-events: none`, aby neukrádal kliknutia tlačidlám nad ním. Farba je
   biela s priehľadnosťou, nie token textu — hero má tmavý prekryv v oboch
   témach, takže svetlá téma by s tokenom dostala tmavý text na tmavom podklade. */
.hero__posun {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3.5rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  pointer-events: none;
}
.hero__posun::before {
  content: "";
  width: clamp(1.75rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
/* Na úzkych displejoch je pod hero rovno vidieť ďalšiu sekciu, takže náznak
   nie je na čo — a tlačidlám by sa tam pod nohami plietol. */
@media (max-width: 700px) {
  .hero__posun { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: 130px 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(11, 15, 20, 0.14) 0%, rgba(11, 15, 20, 0.28) 45%, rgba(11, 15, 20, 0.68) 100%),
    var(--hero-obrazok) center / cover no-repeat;
}
:root[data-theme="light"] .hero {
  background: linear-gradient(180deg, rgba(17, 24, 40, 0.13) 0%, rgba(17, 24, 40, 0.26) 45%, rgba(17, 24, 40, 0.67) 100%),
    var(--hero-obrazok) center / cover no-repeat;
}
/* Prizma je nadstavba, nie druhá rovnocenná značka — jej stĺpec je preto
   oddelený linkou a text má o stupeň tichší. */
.hero__produkt--vedlajsi .hero__uvod {
  opacity: 0.82;
}
.hero__stitok {
  color: var(--luma-gold);
  margin-bottom: 12px;
}
.hero__uvod {
  max-width: 44ch;
}
:root[data-theme="dark"] .hero__uvod {
  color: var(--text-muted);
}
.hero__pilulky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
/* ---------- Pilulka ---------- */
.pilulka {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: var(--radius-pill);
  background: #172828;
  box-shadow: inset 0 0 19px rgba(255, 255, 255, 0.12);
  font-size: 0.9em;
  color: #fff;
  white-space: nowrap;
}
/* ---------- Tlačidlá podľa šablóny ---------- */
.tlacidlo {
  padding: 17px 30px;
  border-radius: var(--radius-lg);
  min-height: 0;
}
/* Svetlá zlatá #F5C26B na tmavom pozadí svietila ako výstražná značka.
   Berieme tmavší odtieň z glyfu loga (#D9A13B) — je to tá istá značková
   farba, len tichšia, a s bielym textom drží kontrast 4,6 : 1. */
.tlacidlo--hlavne {
  background: #d9a13b;
  color: #1a1206;
}
.tlacidlo--hlavne:hover {
  background: var(--luma-gold);
  color: #1a1206;
  transform: none;
  box-shadow: none;
}
/* Kruhová šípka — v šablóne sedí v rohu každej karty. */
.sipka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}
.sipka:hover {
  background: #243838;
  color: #fff;
}
/* ---------- Karta ---------- */
.karta {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
:root[data-theme="dark"] .karta {
  background: #091818;
  border-color: transparent;
}
/* ---------- Mriežka „prečo my" s číslami 01–04 ---------- */
.duvody {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
/* Karta zo šablóny: v pokoji vidno fotku, číslo a šípku, pri hoveri sa panel
   vysunie a odhalí text. Fotka leží pod panelom, rovnako ako v predlohe. */
.duvod {
  position: relative;
  overflow: hidden;
  border-radius: 21px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  isolation: isolate;
}
:root[data-theme="dark"] .duvod {
  background: #050e0e;
  border-color: transparent;
}
/* Fotka vypĺňa celú kartu, panel na nej leží. Zlatý závoj ju drží v palete webu
   a spodný gradient robí podklad pod panelom dosť tmavý na čitateľnosť. */
.duvod__obr {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.75) contrast(1.05);
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.duvod::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(245, 194, 107, 0.22) 0%, transparent 62%),
    linear-gradient(to bottom, rgba(5, 14, 14, 0.30) 0%, rgba(5, 14, 14, 0.90) 78%);
}
/* Pri hoveri sa fotka priblíži a presvetlí — ten istý pohyb ako v šablóne. */
.duvod:hover .duvod__obr,
.duvod:focus-within .duvod__obr {
  transform: scale(1.06);
  opacity: 0.7;
}
.duvod__panel {
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transform: translateY(calc(100% - 158px));
  transition: transform var(--dur-slow) var(--ease);
}
:root[data-theme="dark"] .duvod__panel {
  background: #091818;
  border-color: transparent;
}
/* Hover aj klávesnica — bez :focus-within by sa k textu nedostal nikto,
   kto myš nepoužíva. */
.duvod:hover .duvod__panel,
.duvod:focus-within .duvod__panel {
  transform: translateY(0);
}
.duvod__hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.duvod__cislo {
  font-family: var(--font-heading);
  font-size: 2em;
  line-height: 1;
  color: var(--accent);
}
.duvod__nadpis {
  font-size: 1.05em;
  line-height: 1.25;
  margin-bottom: 10px;
  min-height: 2.5em;
}
.duvod__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.duvod .sipka {
  width: 38px;
  height: 38px;
  font-size: 17px;
}
/* Dotykové displeje hover nepoznajú — tam je panel otvorený natrvalo. */
@media (hover: none) {
  .duvod {
    min-height: 0;
  }
  .duvod__panel {
    transform: none;
  }
}
/* ---------- Karty tímu ---------- */
.tim {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Tím sú traja ľudia a patria do jedného radu na celú šírku. Pri piatich
     kartách musela byť medzera uzučká, aby sa rad vôbec zmestil; pri troch
     je miesta dosť, tak sa škáluje k pohodlnejšiemu maximu. */
  gap: clamp(20px, 2.2vw, 36px);
  /* Fotka prečnieva 60 px nad hornú hranu karty (.clen__media), takže mriežka
     si o toľko odsadí vlastný vrch — inak portrét naskočí na nadpis sekcie. */
  margin-top: 60px;
}
.clen {
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
:root[data-theme="dark"] .clen {
  background: #091818;
}
/* Fotka prečnieva nad hornú hranu karty — v šablóne je to margin-top -90px. */
.clen__media {
  margin-top: -60px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--border);
}
.clen__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clen__meno {
  margin: 16px 0 2px;
  font-size: clamp(1.05em, 1.5vw, 1.3em);
}
/* O stupeň menšie než popis: „Business Development Officer" sa pri --fs-sm
   láme na viac riadkov a rozhádže výšku mien pod sebou. */
.clen__pozicia {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.clen__popis {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
/* ---------- Portfólio ---------- */
.projekty {
  display: grid;
  gap: 20px;
}
.projekt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  transition: var(--transition);
}
:root[data-theme="dark"] .projekt {
  background: #091818;
  border-color: transparent;
}
.projekt:hover {
  border-color: var(--accent);
}
.projekt__hlava {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.projekt__nazov {
  margin: 0;
  font-size: 1.2em;
}
.projekt__domena {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  word-break: break-all;
}
.projekt__popis {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.projekt__tagy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
}
.projekt__tag {
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}
/* Filtre nad portfóliom */
.filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.filter {
  padding: 12px 24px;
  border: 0;
  border-radius: 30px;
  background: var(--bg-alt);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: var(--transition);
}
:root[data-theme="dark"] .filter {
  background: #050e0e;
}
.filter:hover, .filter[aria-pressed="true"] {
  background: var(--luma-gold);
  color: #1f1f1f;
}
/* ---------- FAQ ---------- */
.faq__skupina {
  margin-bottom: 50px;
}
.faq__nadpis {
  margin-bottom: 20px;
}
.otazka {
  border-bottom: 1px solid var(--border);
}
.otazka__tlacidlo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-family: var(--font-heading);
  font-size: 1.1em;
  text-align: left;
  cursor: pointer;
}
.otazka__znak {
  flex: 0 0 auto;
  font-size: 20px;
  transition: transform var(--dur) var(--ease);
}
.otazka[open] .otazka__znak {
  transform: rotate(45deg);
}
.otazka__odpoved {
  padding: 0 0 25px;
  color: var(--text-muted);
  max-width: 72ch;
}
/* ---------- Body zlomu pre nové prvky ---------- */
/* Päť stĺpcov drží po 1150 px; nižšie by bola karta užšia než jej nadpis. */
@media (max-width: 1150px) and (min-width: 1025px) {
  .duvody {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .duvody {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .duvod__nadpis {
    font-size: 1.1em;
  }
}
/* Odsadenie hero a zalomenie jeho tlačidiel do jedného stĺpca sú na konci
   súboru — základné pravidlá hero aj tlačidiel stoja nižšie v tomto súbore. */
@media (max-width: 767px) {
  .duvody {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .tim {
    grid-template-columns: 1fr;
    gap: 60px;
    margin-top: 40px;
  }
  .clen__media {
    margin-top: -40px;
  }
}
/* ---------- Značka Very v hero ---------- */
.hero__znacka {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding-top: 20px;
}
/* Glyf sa škáluje s nápisom, aby dvojica držala pomer na každej šírke. */
.hero__znackaObr {
  width: auto;
  height: clamp(3rem, 13vw, 10.5rem);
  flex: 0 0 auto;
}
.hero__znackaText {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 13vw, 10rem);
  line-height: 0.85;
  font-weight: 500;
  text-transform: uppercase;
  background: linear-gradient(117deg, var(--luma-gold) 0%, rgba(245, 194, 107, 0.18) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Tlačidlá patria k Prizme, ktorá je nad nimi — medzera je preto malá,
   spodné odsadenie drží odstup od ďalšej sekcie. */
/* Tlačidlá kopírujú mriežku blokov nad nimi: prvé začína pod Verou,
   druhé presne pod Prizmou. Voľné zalomenie by ich rozhodilo mimo osi
   stĺpcov a hero by pôsobilo neusporiadane. */
/* Druhé tlačidlo dostane rovnaké odsadenie ako stĺpec Prizmy, takže obe
   sedia presne pod textom, ku ktorému patria. */
.hero__stred {
  min-height: 1px;
}
.sekcia__uvod {
  max-width: 62ch;
  color: var(--text-muted);
}
/* Tlačidlo v balíku sedí na spodku karty, aby boli karty zarovnané. */
.balik {
  display: flex;
  flex-direction: column;
}
.balik .tlacidlo {
  margin-top: auto;
  align-self: flex-start;
}
.balik__obsah {
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .hero__znacka {
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 10px;
  }
  .hero__znackaObr {
    height: 4.5rem;
  }
}
/* Značka pri názve modulu — sedí na účiare textu, nie nad ňou. */
.znackaIkona {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: -4px;
}
/* ==================================================================
   Animácie zo šablóny

   Elementor používa animate.css: fadeInUp / fadeInLeft / fadeInRight,
   trvanie 1,25 s (slow = 2 s) a oneskorenia 100–800 ms. Prvky sa spúšťajú
   pri vstupe do viewportu — u nás to rieši IntersectionObserver v app.js,
   ktorý pridá triedu .je-viditelny.
   ================================================================== */
[data-anim]:not(.je-viditelny),
[data-anim].je-viditelny {
  will-change: opacity, transform;
  transition: opacity 1.25s var(--ease),
    transform 1.25s var(--ease);
}
/* Východiskový stav animácie je viazaný na triedu `.js`, ktorú si `<html>`
   nasadí samo v hlavičke dokumentu. Bez nej sa nič neskrýva.

   Dôvod: `opacity: 0` tu viselo bez podmienky, a keďže `data-anim` nesie na
   každej podstránke obalová `.sekcia--hlava` a na domovskej priamo `<h1>`,
   bol nadpis stránky bez JavaScriptu neviditeľný. Pre návštevníka to bola
   otázka milisekúnd, pre crawler bez renderovania JS to bola stránka bez
   nadpisu. Nadpis stránky nesmie závisieť od toho, či dobehne skript. */
.js [data-anim] {
  opacity: 0;
}
.js [data-anim="hore"] {
  transform: translateY(40px);
}
.js [data-anim="vlavo"] {
  transform: translateX(-40px);
}
.js [data-anim="vpravo"] {
  transform: translateX(40px);
}
.js [data-anim].je-viditelny {
  opacity: 1;
  transform: none;
}
[data-anim-pomaly] {
  transition-duration: 2s;
}
/* Oneskorenia podľa šablóny. */
[data-anim-oneskorenie="100"] {
  transition-delay: 100ms;
}
[data-anim-oneskorenie="200"] {
  transition-delay: 200ms;
}
[data-anim-oneskorenie="250"] {
  transition-delay: 250ms;
}
[data-anim-oneskorenie="300"] {
  transition-delay: 300ms;
}
[data-anim-oneskorenie="400"] {
  transition-delay: 400ms;
}
[data-anim-oneskorenie="600"] {
  transition-delay: 600ms;
}
[data-anim-oneskorenie="800"] {
  transition-delay: 800ms;
}
/* Kto si vypol pohyb, dostane obsah rovno — bez čakania na observer. */
@media (prefers-reduced-motion: reduce) {
  .js [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ==================================================================
   Menu podľa šablóny

   Necyron má položky DM Sans 1em/500 capitalize, vodorovný padding 25 px
   a mobilný panel s pozadím #091818 a rádiusom 20 px. Podčiarknutie
   nahrádza farebný prechod na akcent — v LUMA zlatej.
   ================================================================== */
.navigacia__odkaz {
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--text);
}
.navigacia__zoznam {
  gap: 0;
}
.navigacia__polozka > .navigacia__odkaz {
  padding-inline: 25px;
}
.navigacia__odkaz::after {
  height: 2px;
  background: var(--luma-gold);
  left: 25px;
  right: 25px;
  width: auto;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.navigacia__odkaz:hover::after,
.navigacia__odkaz.je-aktivny::after {
  width: auto;
  transform: scaleX(1);
}
/* Hlavička šablóny nie je prilepená a prekrýva hero. U nás prilepená
   ostáva — na dlhých cenníkoch je to praktickejšie — ale výška aj
   odsadenie sedia so šablónou (30 px zvisle). */
.hlavicka__vnutro {
  padding-block: 14px;
}
@media (max-width: 900px) {
  .navigacia {
    background: var(--bg-raised);
    border-radius: 20px 0 0 20px;
  }
  :root[data-theme="dark"] .navigacia {
    background: #091818;
  }
  .navigacia__polozka > .navigacia__odkaz {
    padding-inline: 0;
  }
  .navigacia__odkaz::after {
    display: none;
  }
}
/* ==================================================================
   Tlačidlá podľa šablóny — so šípkou vpravo a odsadením 10 px
   ================================================================== */
.tlacidlo--hlavne::after,
.tlacidlo--tiche::after {
  content: '→';
  margin-left: 10px;
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--dur) var(--ease);
}
.tlacidlo:hover::after {
  transform: translateX(4px);
}
/* Tlačidlá bez šípky (napr. cookie lišta) — šípka by tam mátla. */
.tlacidlo--bezSipky::after {
  content: none;
}
/* ---------- Sekcia produktu (Prizma) ---------- */
.produkt__vnutro {
  display: grid;
  /* Pravý stĺpec mal 120 px a niesol len glyf — vedľa šiestich kariet to
     pôsobilo ako prázdne miesto. Teraz je v ňom fotka a glyf na nej sedí
     ako odznak značky. */
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
}
.produkt__text > h2 {
  max-width: 26ch;
}
.produkt__text > p {
  color: var(--text-muted);
}
.produkt__cena {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 24px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
}
.produkt__cena strong {
  font-family: var(--font-heading);
  font-size: 1.6em;
}
/* Znak sa drží pri rolovaní vedľa textu — inak by pri dlhom rozpise
   ostal hore a dole by zívala prázdna šachta. */
/* Glyf sedí pri ľavom okraji svojho stĺpca, teda hneď vedľa textu —
   vycentrovaný odplával doprava a medzi ním a odstavcami zívala diera. */
.produkt__znak {
  position: sticky;
  top: 120px;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
/* Fotka vypĺňa stĺpec na výšku plagátu; závoj ju drží v tmavej palete, aby
   nekričala vedľa textu. */
.produkt__foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  opacity: 0.6;
  filter: saturate(0.75) contrast(1.05);
}
.produkt__znak::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(245, 194, 107, 0.20) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(5, 14, 14, 0.25) 0%, rgba(5, 14, 14, 0.80) 85%);
}
/* Glyf značky ostáva, len sa presunul na fotku ako odznak. */
.produkt__odznak {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 84px;
  height: auto;
  opacity: 0.95;
  z-index: 1;
}
@media (max-width: 900px) {
  .produkt__vnutro {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Zalomenie rozpisu produktu do stĺpcov je na konci súboru — základné
     pravidlo `.produkt__body` s `grid-auto-flow: column` stojí nižšie. */
  /* Pod 900 px ide fotka nad text a je nízka — na mobile nemá zaberať
     celú obrazovku, kým sa čitateľ dostane k obsahu. */
  .produkt__znak {
    order: -1;
    position: static;
  }
  .produkt__foto {
    aspect-ratio: 16 / 7;
    opacity: 0.5;
  }
  .produkt__odznak {
    width: 56px;
    left: 16px;
    bottom: 16px;
  }
}
/* ---------- Hlavička podstránky a rytmus podstránok ---------- */
/* Domovská má priestor niesť dojem, podstránky nesú obsah, ktorý má ísť za
   sebou — 50 px medzi sekciami tam robilo prázdne pásy. Podstránka sa pozná
   podľa hlavičky: domovská ju nemá, začína `.hero`. Prepisuje sa premenná,
   nie jednotlivé pravidlá, takže sa to prejaví všade, kde sekcia berie
   odsadenie z `--section-y`. Pätička stojí mimo `main` a `--section-y-velka`
   sa nemení, takže tá ostáva na všetkých stránkach rovnaká. */
main:has(> .sekcia--hlava) {
  --section-y: 24px;
}
/* Hore stačí `--section-y`: nad hlavičkou už stojí drobčeková navigácia
   s vlastným odsadením, takže 100 px z `--section-y-velka` za ňou nechávalo
   dieru. Dole nula — nasledujúca sekcia si svoje odsadenie prináša sama a dva
   padingy za sebou odtláčali prvý nadpis o 116 px od úvodnej vety. */
.sekcia--hlava {
  padding-block: var(--section-y) 0;
}
/* Podnadpis v hlavičke stránky je jedna veta a má sa zmestiť do riadku —
   62ch z bežnej sekcie ju lámalo na dva. Text-wrap: balance zabráni tomu,
   aby na druhom riadku ostalo jedno slovo, keď sa raz predsa zalomí. */
.sekcia--hlava .sekcia__uvod {
  max-width: none;
  text-wrap: balance;
}
.hlava__nadpis {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  text-transform: none;
  margin-block: 12px 16px;
}
/* ---------- Služby ---------- */
/* Text a obrázok vedľa seba, body pod nimi cez celú šírku. */
.sluzba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-areas: "text media" "body body";
  gap: 40px;
  align-items: start;
}
.sluzba__text {
  grid-area: text;
}
.sluzba__media {
  grid-area: media;
}
.sluzba__body {
  grid-area: body;
}
.sluzba--obratena .sluzba__media {
  order: -1;
}
.sluzba__perex {
  max-width: 62ch;
  color: var(--text-muted);
}
/* Štyri body majú stáť v jednom riadku — auto-fit ich pri tejto šírke
   lámal na 3 + 1, čo vyzeralo ako chyba sadzby. */
.sluzba__body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
}
.sluzba__bod {
  padding: 18px;
}
.sluzba__bodNadpis {
  font-size: 1.1em;
  margin-bottom: 8px;
}
.sluzba__bodText {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.sluzba__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.sluzba__nahrada {
  width: 45% !important;
  margin-inline: auto;
  aspect-ratio: 1 !important;
  object-fit: contain !important;
  opacity: 0.5;
}
/* ---------- Kroky procesu ---------- */
.kroky {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
  counter-reset: krok;
}
.krok__cislo {
  display: block;
  font-family: var(--font-heading);
  font-size: 2em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 12px;
}
.krok__nadpis {
  font-size: 1.2em;
  margin-bottom: 8px;
}
.krok__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
/* ---------- Portfólio: doplnky ---------- */
.filtre__pocet {
  min-height: 1.5em;
  margin: -18px 0 20px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.projekt[hidden] {
  display: none;
}
.projekt__tag--vera {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: var(--accent);
  color: var(--accent);
}
.projekt__tag--vera img {
  width: 14px;
  height: 14px;
}
.projekt__tag--ai {
  border-color: var(--border-strong);
  color: var(--text);
}
.sipka {
  text-decoration: none;
}
@media (max-width: 1240px) and (min-width: 1025px) {
  .sluzba__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .sluzba {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "media" "body";
    gap: 30px;
  }
  .sluzba--obratena .sluzba__media {
    order: 0;
  }
  .sluzba__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kroky {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .kroky {
    grid-template-columns: 1fr;
  }
  .sluzba__body {
    grid-template-columns: 1fr;
  }
}
/* ---------- Dvojica značiek v hero ---------- */
/* Značky stoja nad sebou v schodoch: Vera vľavo a veľká, Prizma vpravo
   a menšia, s prekryvom na výšku. Znamienko medzi nimi netreba — poradie
   aj mierka povedia, čo je základ a čo nadstavba, a diagonála oživí hlavu
   stránky viac než symbol. */
.hero__znacky {
  display: grid;
  justify-items: start;
  padding-top: 20px;
}
.hero__znacka {
  margin: 0;
}
.hero__znacka--vedlajsia {
  justify-self: end;
  margin-top: clamp(-1.2rem, -2.2vw, -0.4rem);
}
.hero__znacka--vedlajsia .hero__znackaObr {
  height: clamp(2rem, 8vw, 6.2rem);
}
.hero__znacka--vedlajsia .hero__znackaText {
  font-size: clamp(1.7rem, 8vw, 6rem);
  opacity: 0.85;
}
@media (max-width: 767px) {
  .hero__znacky {
    justify-items: center;
  }
  .hero__znacka--vedlajsia {
    justify-self: center;
    margin-top: 0;
  }
  .hero__znacka--vedlajsia .hero__znackaObr {
    height: 3rem;
  }
}
/* Pri piatich kartách je stĺpec užší, číslo aj nadpis preto o stupeň menšie. */
/* Štítok, ktorý už nesie vlastnú značku, nepotrebuje dekoratívnu ikonu —
   vedľa seba pôsobili ako dve ikony a čitateľ hľadal rozdiel. */
.stitok--znacka::before {
  content: none;
}
/* ---------- Náhľad webu v portfóliu ---------- */
.projekt {
  padding: 15px;
}
.projekt__nahlad {
  display: block;
  margin-bottom: 6px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--border);
  aspect-ratio: 16 / 10;
}
.projekt__nahlad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-slow) var(--ease);
}
.projekt:hover .projekt__nahlad img {
  transform: scale(1.04);
}
.projekty {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
/* ---------- Cookie panel s kategóriami ---------- */
.cookies__odkaz {
  color: var(--accent);
}
.cookies__panel[hidden] {
  display: none;
}
.cookies__panel {
  flex: 1 0 100%;
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.cookies__kategoria {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.cookies__kategoria input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--luma-gold-strong);
  flex: 0 0 auto;
}
.cookies__kategoria input:disabled {
  cursor: not-allowed;
}
.cookies__kategoriaNazov {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.cookies__kategoriaPopis {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.cookies__vzdy {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
}
.cookies__panel .tlacidlo {
  justify-self: start;
  margin-top: 8px;
}
/* ==================================================================
   Hero má tmavé pozadie aj vo svetlej téme, takže prvky v ňom nesmú
   brať farby z tokenov pre svetlý podklad — inak je tmavý text na
   tmavom a tlačidlo zmizne. Prepíšeme tokeny pre celý blok naraz,
   nie pravidlo po pravidle.
   ================================================================== */
.hero {
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.72);
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.34);
  --accent: var(--luma-gold);
  --surface: rgba(255, 255, 255, 0.04);
  --bg-raised: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.hero h1, .hero h2, .hero h3 {
  color: #fff;
}
.hero .tlacidlo--tiche {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}
.hero .tlacidlo--tiche:hover {
  border-color: var(--luma-gold);
  color: var(--luma-gold);
}
.hero .stitok {
  color: var(--luma-gold);
}
.hero__uvod {
  color: rgba(255, 255, 255, 0.78);
}
/* ---------- Rozpis produktu ---------- */
.produkt__text > p {
  max-width: 78ch;
}
/* Body majú stáť v jednom riadku bez ohľadu na počet — Vera ich má šesť,
   Prizma päť. auto-flow: column to zariadi bez toho, aby sa počet stĺpcov
   musel prepisovať pri každej zmene obsahu. */
.produkt__body {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  margin-block: 28px;
}
.produkt__bod {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
:root[data-theme="dark"] .produkt__bod {
  background: #091818;
  border-color: transparent;
}
.produkt__bodNadpis {
  font-size: 1.0625rem;
  line-height: 1.25;
  margin-bottom: 8px;
}
.produkt__bodText {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Pri rozpise je stĺpec s textom širší — glyf je len sprievodný znak. */
/* ==================================================================
   Hero ako v šablóne: hlavička na ňom leží, nestojí nad ním

   V Necyrone nie je hlavička prilepená ani ohraničená — je priehľadná
   a hero jej podteká. Dosiahneme to záporným odsadením hlavičky
   (šablóna má margin-bottom -130px) a odsadením hero zhora.
   ================================================================== */
body:has(.hero) .hlavicka {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}
/* Závoj pod hlavičkou. Hero je fotka a nie je tmavá všade — v hornom páse
   sa striedajú svetlé plochy, na ktorých biele menu zmizne. Priehľadný
   prechod dá písmu podklad, ale hero nezakryje: dole končí v nule, takže
   hranu medzi závojom a obrázkom nevidno.

   Rieši sa to takto a nie stmavením celej fotky preto, že tmavší obrázok
   by ubral hero na jase — a čitateľnosť treba len v tom hornom páse. */
body:has(.hero) .hlavicka::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 15, 20, 0.62) 0%,
    rgba(11, 15, 20, 0.38) 45%,
    rgba(11, 15, 20, 0) 100%
  );
}
/* Obsah hlavičky musí byť nad závojom. */
body:has(.hero) .hlavicka > * { position: relative; z-index: 1; }

/* Hlavička nad hero má svetlé písmo, lebo pod ňou je tmavý podklad.
   Plná biela a jemný tieň — pri 0.85 sa odkazy na svetlejšom mieste fotky
   strácali aj so závojom. */
body:has(.hero) .hlavicka .navigacia__odkaz,
body:has(.hero) .hlavicka .prepinac {
  color: #fff;
  text-shadow: 0 1px 3px rgba(11, 15, 20, 0.55);
}
body:has(.hero) .hlavicka .prepinac,
body:has(.hero) .hlavicka .hamburger {
  border-color: rgba(255, 255, 255, 0.45);
}
body:has(.hero) .hlavicka .hamburger__ciara,
body:has(.hero) .hlavicka .hamburger__ciara::before,
body:has(.hero) .hlavicka .hamburger__ciara::after {
  background: #fff;
}
/* Hero si spraví miesto pre hlavičku sám a je vysoké na celú obrazovku,
   aby pôsobilo ako scéna, nie ako pruh. */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 150px;
}
/* Značky sú v šablóne vysadené cez celú šírku kontajnera. */
.hero__znackaText {
  letter-spacing: -0.03em;
}
@media (max-width: 900px) {
  body:has(.hero) .hlavicka {
    position: sticky;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
  }
  body:has(.hero) .hlavicka .navigacia__odkaz,
  body:has(.hero) .hlavicka .prepinac {
    color: var(--text);
  }
  body:has(.hero) .hlavicka .hamburger__ciara,
  body:has(.hero) .hlavicka .hamburger__ciara::before,
  body:has(.hero) .hlavicka .hamburger__ciara::after {
    background: var(--text);
  }
  body:has(.hero) .hlavicka .znacka__obr--svetla {
    display: block;
  }
  body:has(.hero) .hlavicka .znacka__obr--tmava {
    display: none;
  }
  :root[data-theme="dark"] body:has(.hero) .hlavicka .znacka__obr--svetla {
    display: none;
  }
  :root[data-theme="dark"] body:has(.hero) .hlavicka .znacka__obr--tmava {
    display: block;
  }
  :root[data-theme="dark"] body:has(.hero) .hlavicka {
    background: color-mix(in srgb, #0b0f14 92%, transparent);
  }
  .hero {
    min-height: 0;
    padding-top: 40px;
  }
}
/* ---------- Karta tímu bez fotky ---------- */
/* Kým fotka chýba, drží miesto panel s iniciálami. Rozbitá ikona obrázka
   na karte konkrétneho človeka pôsobí ako zanedbaný web, iniciály ako
   zámer — a rozmer ostáva rovnaký, takže sa po doplnení fotky nič nepohne. */
.clen__media--bezFotky {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--luma-gold) 0%, var(--luma-gold-strong) 100%);
}
.clen__media--bezFotky::after {
  content: attr(data-iniciovky);
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(31, 31, 31, 0.85);
}
/* ---------- Bublina s prostredím ---------- */
.prostredie {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
/* Produkcia svieti, aby bola vidieť na prvý pohľad. */
.prostredie--prod {
  background: var(--luma-gold);
  border-color: var(--luma-gold);
  color: #1f1f1f;
}
body:has(.hero) .hlavicka .prostredie {
  border-color: rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.85);
}
body:has(.hero) .hlavicka .prostredie--prod {
  border-color: var(--luma-gold);
  color: #1f1f1f;
}
@media (max-width: 480px) {
  .prostredie {
    display: none;
  }
}
/* ---------- Rozbaľovacie menu podľa šablóny ---------- */
.navigacia__polozka {
  position: relative;
}
.navigacia__prepinac {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 500;
  text-transform: capitalize;
  cursor: pointer;
}
.navigacia__sipka {
  font-size: 0.7em;
  transition: transform var(--dur) var(--ease);
}
.navigacia__prepinac[aria-expanded="true"] .navigacia__sipka {
  transform: rotate(180deg);
}
.navigacia__podmenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 12px;
  min-width: 14rem;
  padding: 10px;
  border-radius: 20px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
:root[data-theme="dark"] .navigacia__podmenu {
  background: #091818;
  border-color: transparent;
}
.navigacia__polozka--rozbalovacia:hover .navigacia__podmenu,
.navigacia__polozka--rozbalovacia:focus-within .navigacia__podmenu,
.navigacia__prepinac[aria-expanded="true"] + .navigacia__podmenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.navigacia__pododkaz {
  display: block;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
}
.navigacia__pododkaz {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: capitalize;
}
.navigacia__pododkaz:hover,
.navigacia__pododkaz.je-aktivny {
  background: var(--bg-alt);
  color: var(--accent);
}
:root[data-theme="dark"] .navigacia__pododkaz:hover,
:root[data-theme="dark"] .navigacia__pododkaz.je-aktivny {
  background: #050e0e;
}
body:has(.hero) .hlavicka .navigacia__prepinac {
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 900px) {
  /* V mobilnom paneli je podmenu vždy rozbalené — skrývať ho za ďalší
     klik by pridalo krok bez úžitku, miesta je tam dosť. */
  .navigacia__podmenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 8px 14px;
    border: 0;
    background: none;
    box-shadow: none;
  }
  :root[data-theme="dark"] .navigacia__podmenu {
    background: none;
  }
  .navigacia__prepinac {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-4) 0;
  }
  .navigacia__sipka {
    display: none;
  }
  .navigacia__pododkaz {
    padding: 10px 0;
  }
}
/* ==================================================================
   Zlaté zvýraznenia v texte

   Biely text v celých blokoch je monotónny. Kľúčové slová a čísla
   dostanú firemnú zlatú — nie ako ozdoba, ale ako vodítko pre oko:
   zvýraznené je vždy to, čo nesie podstatu vety.
   ================================================================== */
.zlate {
  color: var(--luma-gold);
}
:root[data-theme="light"] .zlate {
  color: var(--luma-gold-strong);
}
/* Prvé slovo nadpisu sekcie ostáva biele, zvyšok zlatý — rytmus, ktorý
   šablóna dosahuje gradientom, my farbou. */
.sekcia h2 strong,
.hero__uvod strong,
.produkt__text > p strong,
.sluzba__perex strong {
  font-weight: 500;
  color: var(--luma-gold);
}
:root[data-theme="light"] .sekcia h2 strong,
:root[data-theme="light"] .hero__uvod strong,
:root[data-theme="light"] .produkt__text > p strong,
:root[data-theme="light"] .sluzba__perex strong {
  color: var(--luma-gold-strong);
}
/* Prvé písmeno čísla v kartách a krokoch je už zlaté; doplníme aj názvy
   produktov v behu textu. */
.zlate--vera, .zlate--prizma {
  color: var(--luma-gold);
  font-weight: 500;
}
:root[data-theme="light"] .zlate--vera,
:root[data-theme="light"] .zlate--prizma {
  color: var(--luma-gold-strong);
}
/* ==================================================================
   Zlaté nadpisy

   Nadpisy nesú firemnú zlatú rovnako ako logo. Text odsekov ostáva
   biely — keby bolo zlaté všetko, prestala by zlatá čokoľvek znamenať.
   ================================================================== */
h1, h2,
.hlava__nadpis,
.taby__panelNadpis,
.oNas__nadpis,
.proces__nadpis,
.faq__nadpis {
  color: var(--luma-gold);
}
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] .hlava__nadpis,
:root[data-theme="light"] .taby__panelNadpis,
:root[data-theme="light"] .oNas__nadpis,
:root[data-theme="light"] .proces__nadpis,
:root[data-theme="light"] .faq__nadpis {
  color: var(--luma-gold-strong);
}
/* Výnimky: na kontrastnej karte a v hero, kde nadpis nesie vlastný
   gradient alebo leží na svetlom podklade, by zlatá zanikla. */
.oNas__karta--svetla .oNas__kartaNadpis,
.hero h1, .hero h2 {
  color: inherit;
}
/* Hero je tmavá fotka v OBOCH témach (svetlá má vlastný tmavý prekryv), takže
   nadpisy v ňom musia byť biele aj tam. Výnimka vyššie na to nestačí:
   `:root[data-theme="light"] h1` má vyššiu špecifickosť než `.hero h1`
   a v svetlej téme ju prebije — nadpis potom sadne zlatou na tmavú fotku. */
:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .hero h2,
:root[data-theme="light"] .hero h3 {
  color: #fff;
}

/* Dva H2, ktoré zlatú nechcú: nadpis stĺpca v pätičke a prevádzka v cenníku.
   Obidva sú H2 kvôli osnove stránky, nie kvôli dôrazu — zlatá by z nich
   spravila nadpisy sekcií, ktorými nie sú. V tmavej téme ich pribíja trieda
   pri vlastnom bloku vyššie, tu je svetlá: `:root[data-theme="light"] h2` má
   vyššiu špecifickosť než samotná trieda a prebilo by ju. */
:root[data-theme="light"] .paticka__stlpecNadpis,
:root[data-theme="light"] .prevadzka__nadpis {
  color: var(--text);
}
.cookies__nadpis {
  color: var(--text);
}
/* ---------- Hero: kedy sa stĺpce skladajú ---------- */
/* Vera a Prizma vedľa seba vydržia až po 768 px. Predtým sa lámali už
   pri 900 px, takže na užšom okne stáli pod sebou zbytočne skoro. */
/* ---------- Kontaktné osoby ---------- */
.kontakt__osoby {
  display: grid;
  gap: 24px;
  margin-top: 20px;
}
.kontakt__osoba {
  display: grid;
  gap: 4px;
}
.kontakt__meno {
  font-family: var(--font-heading);
  font-size: 1.1em;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.kontakt__osoba a {
  color: var(--text-muted);
  text-decoration-color: var(--accent);
}
.kontakt__osoba a:hover {
  color: var(--accent);
}
/* ==================================================================
   Hero — záväzné rozloženie

   Stojí zámerne na konci súboru: hero prešlo mnohými úpravami a
   v kaskáde vyhráva posledné pravidlo.
   ================================================================== */
.hero {
  --hero-medzera: 50px;
}
/* Oba stĺpce sú rovnako vysoké (`stretch`) a vnútri sú stĺpcovým flexom.
   Odsek dostane `flex: 1`, takže pilulky sa odtlačia na spodok bez ohľadu na
   to, či má text štyri riadky alebo päť — rady piluliek tak sedia na jednej
   linke. Predtým tu bolo `align-items: start` a poloha piluliek závisela od
   dĺžky textu, takže sa medzi stĺpcami rozchádzali o jeden riadok. */
.hero__telo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hero-medzera);
  align-items: stretch;
  padding-block: 50px 30px;
  max-width: none;
}
.hero__produkt {
  display: flex;
  flex-direction: column;
}
.hero__produkt .hero__uvod {
  flex: 1 1 auto;
}
.hero__produkt .hero__pilulky {
  margin-top: auto;
}
.hero__produkt--vedlajsi {
  padding-left: var(--hero-medzera);
  padding-top: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 0;
}
/* Tlačidlá kopírujú tú istú mriežku: prvé stojí pod Verou, druhé pod
   Prizmou vrátane jej odsadenia od deliacej linky. */
.hero__akcie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hero-medzera);
  margin-top: 24px;
  padding-bottom: 40px;
}
.hero__akcie .tlacidlo {
  justify-self: start;
  margin: 0;
}
.hero__akcie .tlacidlo:nth-child(2) {
  margin-left: var(--hero-medzera);
}
@media (max-width: 1100px) and (min-width: 769px) {
  .hero {
    --hero-medzera: 30px;
  }
}
@media (max-width: 768px) {
  .hero__telo {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero__produkt--vedlajsi {
    padding-left: 0;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .hero__akcie {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hero__akcie .tlacidlo:nth-child(2) {
    margin-left: 0;
  }
}

/* Hero pozadie má 2400×1600, čo je na telefón so šírkou 390 px zbytočných
   130 kB. Pod 900 px sa preto použije 1200 px varianta (40 kB). Adresu
   dosadzuje šablóna do premennej `--hero-obrazok-mobil`. */
@media (max-width: 900px) {
  .hero,
  :root[data-theme="light"] .hero {
    background-image:
      linear-gradient(180deg, rgba(11, 15, 20, 0.14) 0%, rgba(11, 15, 20, 0.28) 45%, rgba(11, 15, 20, 0.68) 100%),
      var(--hero-obrazok-mobil, var(--hero-obrazok));
  }
}

/* ==================================================================
   Responzívne dorovnania

   MUSIA stáť na konci súboru. Media query nepridáva špecificitu, takže pri
   rovnakom selektore rozhoduje poradie v súbore. Pravidlá nižšie prepisujú
   základné hodnoty, ktoré sú v tomto súbore zapísané AŽ ZA pôvodnými
   mobilnými blokmi (redizajn ich dopisoval na koniec) — v pôvodných blokoch
   boli preto mŕtve a na telefóne sa neprejavili.

   Poradie zhora nadol: od najširšieho bodu zlomu po najužší.
   ================================================================== */
@media (max-width: 1024px) {
  /* Hero si robí miesto pre hlavičku; na tablete stačí menšie než 150 px. */
  .hero {
    padding-top: 100px;
  }
}
@media (max-width: 900px) {
  /* Rozpis produktu (Vera, Prizma) stojí v jednom riadku len na širokom
     displeji. Bez tohto ostane `grid-auto-flow: column` a päť až šesť kariet
     sa stlačí do nečitateľných stĺpcov, ktoré vytŕčajú zo stránky. */
  .produkt__body {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
  }
  /* Odkazy vo výsuvnom paneli menu — riadok sa dá pohodlne trafiť prstom. */
  .navigacia__odkaz {
    padding: var(--space-4) 0;
    font-size: var(--fs-body);
  }
  .navigacia__polozka > .navigacia__odkaz {
    padding-inline: 0;
  }
}
@media (max-width: 767px) {
  .hero {
    padding-top: 80px;
  }
  /* Dve tlačidlá vedľa seba sa na telefóne nezmestia — na 390 px z nich
     ostanú dva úzke stĺpce s lámaným textom. */
  .hero__akcie {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hero__akcie .tlacidlo:nth-child(2) {
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  .hlavicka__vnutro {
    padding-block: var(--space-2);
    gap: var(--space-3);
  }
}

/* ---------- Hlavička na telefóne ----------

   Logo má v kresbe pomer 1812×448, takže pri výške 62 px je široké 251 px.
   S nástrojmi (172 px), medzerou a okrajmi to na 390 px displeji dá 475 px —
   hlavička pretekala o 65 px a na 320 px o 131 px. Vytlačený bol pravý kraj,
   teda hamburger: na telefóne stál celý MIMO obrazovky a menu sa nedalo
   otvoriť vôbec.

   Riešenie má dve vrstvy. Logo sa zmenšuje so šírkou okna a nástroje sa
   pritiahnu k sebe — to rieši rozloženie. Druhá vrstva je poistka: logo smie
   ustúpiť (`flex: 0 1 auto` + `min-width: 0`), takže aj keby do hlavičky
   pribudlo ďalšie tlačidlo, ubere sa z loga a nie z dosahu na menu.
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .hlavicka__vnutro {
    gap: var(--space-3);
  }
  /* Nástroje sa nesmú zmenšovať — sú to plochy na klikanie prstom. */
  .hlavicka__nastroje {
    flex: 0 0 auto;
  }
  .znacka {
    flex: 0 1 auto;
    min-width: 0;
  }
  .znacka__obr {
    height: clamp(38px, 11vw, 62px);
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
}
@media (max-width: 480px) {
  .hlavicka__vnutro {
    gap: var(--space-2);
  }
  .hlavicka__nastroje {
    gap: 6px;
  }
  /* Prepínač jazyka je najširší z nástrojov — uberá sa mu ako prvému. */
  .prepinac__jazyk {
    min-width: 30px;
    padding-inline: 6px;
  }
  .prepinac--tema {
    width: 36px;
  }
}

/* Kým je mobilné menu otvorené, hlavička musí byť nad plachtou.

   Plachta visí na `<body>` (vyrába ju app.js) a má z-index 199. Panel menu má
   síce 200, lenže je vnútri hlavičky, ktorá je `position: sticky` so z-indexom
   100 — a tým tvorí vlastný stohovací kontext. Tých 200 preto platí len
   VNÚTRI hlavičky a voči plachte je celý panel na úrovni 100.

   Dôsledok bol, že plachta ležala nad otvoreným menu: ťuknutie na položku
   netrafilo odkaz, ale plachtu, takže sa menu iba zavrelo a nikam sa nešlo.
   Overené cez `elementFromPoint` nad stredom položky — vracalo `plachta`.

   Dvíha sa hlavička, nie panel: keby sa znížila plachta, prestala by prekrývať
   obsah stránky, ktorý má vlastné vrstvenie. */
body:has(.navigacia.je-otvorene) .hlavicka {
  z-index: calc(var(--z-menu) + 1);
}

/* Rozmazanie podkladu hlavičky patrí pod ňu, nie na ňu.

   `backdrop-filter` na prvku z neho robí *containing block* pre potomkov
   s `position: fixed`. Výsuvný panel menu je pritom vnútri hlavičky, takže sa
   jeho `inset: 0 0 0 auto` nerozmeral podľa okna, ale podľa hlavičky —
   dostal 100 px namiesto celej výšky obrazovky. Obsah (538 px) sa doň nezmestil
   a `overflow-y: auto` ho odrolovalo preč: na displeji ostal len malý tmavý
   pásik vpravo hore a položky menu sa nedali ani prečítať, ani ťuknúť.

   Rozmazanie preto robí podvrstva `::before`. Vyzerá to rovnako, ale hlavička
   prestáva byť kotvou pre `fixed` a panel sa opäť meria voči oknu.

   Len pod 900 px, teda tam, kde je panel `fixed` — na desktope je menu
   vodorovné a rozmazanie na hlavičke nikomu neprekáža. */
@media (max-width: 900px) {
  .hlavicka,
  body:has(.hero) .hlavicka {
    backdrop-filter: none;
  }
  .hlavicka::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(10px);
    pointer-events: none;
  }
}

/* Kým je mobilné menu otvorené, cookie lišta ide pod plachtu.

   Lišta je `position: fixed` so `--z-toast`, teda nad menu. Na telefóne
   preto zakryla spodné položky panela — pri prvej návšteve sa nedalo ťuknúť
   na Služby, Cenník ani Kontakt. Zmerané cez `elementFromPoint`: nad nimi
   vracalo `cookies`.

   Nezakrýva sa, len sa zaradí za plachtu — lišta tak ostáva na mieste
   a po zavretí menu je zase navrchu. */
body:has(.navigacia.je-otvorene) .cookies {
  z-index: calc(var(--z-menu) - 2);
}

/* Text v hero na svetlejšej fotke.

   Prekryv sa zámerne stenčil, aby bolo z fotky vidieť viac — tým ale stratil
   funkciu podkladu pod textom. Tieň ju preberá: je mäkký a nízky, takže na
   tmavších miestach nie je poznať, a na svetlých drží písmo čitateľné bez
   toho, aby sa muselo podkladať plochou. */
.hero__uvod,
.hero__stitok,
.hero__firmaText,
.hero__clenText {
  text-shadow: 0 1px 10px rgba(5, 9, 14, 0.75);
}

/* Ostrá fotka aj na telefóne s hustým displejom.

   Pod 900 px sa ťahá 1200 px varianta — na 390 px displeji s trojnásobnou
   hustotou je to ale 1170 fyzických bodov na šírku, takže sa fotka roztiahne
   a zmäkne. Na hustých displejoch preto ide plná veľkosť; na bežných ostáva
   malá, aby sa nesťahovalo 130 kB tam, kde stačí 40. */
@media (max-width: 900px) and (min-resolution: 2dppx) {
  .hero,
  :root[data-theme="light"] .hero {
    background-image:
      linear-gradient(180deg, rgba(11, 15, 20, 0.14) 0%, rgba(11, 15, 20, 0.28) 45%, rgba(11, 15, 20, 0.68) 100%),
      var(--hero-obrazok);
  }
}


/* ==================================================================
   Cenník — triedy

   Prepínač produktu beží na `<input type="radio">` a `:checked`, rovnako
   ako záložky služieb v sekcie.css. Panely stoja za celou lištou prepínačov,
   preto selektor ide cez `~`, nie cez `+`.
   ================================================================== */

.triedy__ovladanie {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.triedy__legenda {
  display: block;
  width: 100%;
  margin-bottom: var(--space-4);
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Produkt ako samostatné `<details>`: dá sa mať otvorený web aj e-shop naraz.
   Predtým to bol prepínač na rádiových tlačidlách, teda vždy len jedno z toho. */
.triedy__skupina {
  border-top: 1px solid var(--border);
  padding-block: var(--space-4);
}
.triedy__skupina:last-of-type {
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-7);
}
.triedy__skupinaCta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}
.triedy__skupinaCta::-webkit-details-marker { display: none; }
/* Rovnaké „+/−" ako pri rozpise triedy nižšie — jeden idióm na celej stránke. */
.triedy__skupinaCta::before {
  content: '+';
  display: inline-block;
  width: 1.2em;
  color: var(--accent);
  font-weight: 700;
}
.triedy__skupina[open] > .triedy__skupinaCta::before { content: '−'; }
.triedy__skupinaCta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Je to <h2>, nie <span> — sekcia cenníka musí mať nadpis. Nadpis je však
   blokový prvok a v <summary> stál nad počtom tried namiesto vedľa neho,
   preto sa vracia do riadku a zbavuje sa vlastných okrajov. */
.triedy__skupinaNazov {
  display: inline;
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
}
.triedy__skupinaPocet {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.triedy__skupina[open] > .triedy {
  margin-top: var(--space-5);
}

.triedy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.trieda {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
:root[data-theme="dark"] .trieda { background: #091818; }

/* Stredná trieda je zvýraznená zámerne (compromise effect). Zlatý rám a tieň
   ju vytiahnu dopredu bez toho, aby menila veľkosť — posun by pri troch
   kartách rozhodil zarovnanie riadkov. */
.trieda--odporucana {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.trieda__odznak {
  position: absolute;
  top: 0;
  left: var(--space-6);
  transform: translateY(-50%);
  margin: 0;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--luma-gold);
  color: #1f1f1f;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.trieda__uroven {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.trieda__nazov {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h4);
}
.trieda__tagline {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
/* Tabulárne číslice — stĺpce sa tak dajú porovnať pohľadom dole. */
.trieda__cena {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
}
.trieda__cena span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-variant-numeric: normal;
  color: var(--text-muted);
}
.trieda__dodanie {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.trieda__vlastnosti {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}
.trieda__vlastnosti li {
  position: relative;
  padding-left: 1.4em;
  font-size: var(--fs-sm);
}
.trieda__vlastnosti li::before {
  content: '·';
  position: absolute;
  left: 0.4em;
  color: var(--accent);
  font-weight: 700;
}
.trieda__cta {
  width: 100%;
  margin-bottom: var(--space-4);
}
.trieda__preKoho {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Rozpis triedy. `<details>` namiesto dialógu — otvorí sa bez JS, dá sa
   vytlačiť a vyhľadávač v ňom text nájde. */
.trieda__detail {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.trieda__detailCta {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  list-style: none;
}
.trieda__detailCta::-webkit-details-marker { display: none; }
.trieda__detailCta::before {
  content: '+';
  display: inline-block;
  width: 1.2em;
  color: var(--accent);
  font-weight: 700;
}
.trieda__detail[open] > .trieda__detailCta::before { content: '−'; }
.trieda__detailCta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Počet položiek je kotva proti nákupu tých istých vecí po jednej. */
.trieda__pocet {
  display: block;
  padding-left: 1.2em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.trieda__detailUvod {
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.trieda__blokNadpis {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.trieda__blokObsah {
  display: grid;
  gap: var(--space-1);
}
.trieda__blokObsah li {
  position: relative;
  padding-left: 1.4em;
  font-size: var(--fs-sm);
}
.trieda__blokObsah li::before {
  content: '·';
  position: absolute;
  left: 0.4em;
  color: var(--accent);
  font-weight: 700;
}
.trieda__pozn {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.triedy__pata {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  text-align: center;
}
.triedy__pataText {
  max-width: 52ch;
  margin: 0 auto var(--space-5);
  color: var(--text-muted);
}
.triedy__pataTlacidla {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .triedy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .triedy {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   Tím — rozpis role a sľuby

   `.clen__detail` je to, čo rola znamená v praxi. Bez neho je pozícia
   len titul.
   ================================================================== */

.clen__detail {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.clen__detail li {
  position: relative;
  padding-left: 1.4em;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.clen__detail li::before {
  content: '·';
  position: absolute;
  left: 0.4em;
  color: var(--accent);
  font-weight: 700;
}

.sluby {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.sluby--dvojica {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.slub {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
:root[data-theme="dark"] .slub { background: #091818; }
.slub__nadpis {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h4);
}
.slub__popis {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.kdeNasNajdete {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
:root[data-theme="dark"] .kdeNasNajdete { background: #091818; }
.kdeNasNajdete__nadpis {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h4);
}
.kdeNasNajdete__popis {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .sluby, .sluby--dvojica {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .sluby, .sluby--dvojica {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   Vera a Prizma
   ================================================================== */

.platforma__uvod {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-6);
}
.platforma__znacka { display: flex; justify-content: center; }
.platforma__znackaObr {
  width: 100%;
  max-width: 180px;
  height: auto;
}
/* Popiska k logu už nie je <h2>, ale <p> — vzhľad ostáva. Selektor musí byť
   špecifickejší než `.platforma__znackaText p` pod ním, inak by ju stiahol
   medzi tiché odstavce. */
.platforma__znackaText .platforma__znackaNadpis {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  color: var(--text);
}
.platforma__znackaText p { margin: 0; color: var(--text-muted); }

.platforma__ramik {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
:root[data-theme="dark"] .platforma__ramik { background: #091818; }
.platforma__ramik h2 { margin: 0 0 var(--space-2); font-size: var(--fs-h4); }
.platforma__ramik p { margin: 0; color: var(--text-muted); }

.sluby--trojica { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slub__zvyraznene {
  margin: 0 0 var(--space-2);
  font-weight: 500;
  color: var(--accent);
}

.platforma__trhoviska {
  margin-top: var(--space-4);
  font-size: var(--fs-h4);
  font-family: var(--font-heading);
}
.platforma__trhoviska span {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.platforma__tlacidla {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (max-width: 767px) {
  .platforma__uvod {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Členy rovnice v hero sú odkazy na Veru a Prizmu. Vyzerajú rovnako ako
   predtým — podčiarknutie by v rovnici pôsobilo ako zlomková čiara. */
.hero__clen--odkaz {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
.hero__clen--odkaz:hover,
.hero__clen--odkaz:focus-visible { opacity: 0.75; }
.hero__clen--odkaz:focus-visible {
  outline: 2px solid var(--luma-gold);
  outline-offset: 6px;
  border-radius: var(--radius-md);
}

/* Odkaz z hero stĺpca na stránku produktu. */
/* CTA na Veru a Prizmu v hero. Stojí PRED textom — kto tie dve mená vidí prvý
   raz, potrebuje sa najprv dozvedieť, čo znamenajú; keď odkaz visel až pod
   odsekom a pilulkami, prišiel na rad po tom, čo ich už prečítal.

   Je to bežné tlačidlo webu, len menšie: v plnej veľkosti by dve z nich
   v stĺpcoch prebili dvojicu hlavných CTA pod hero. */
.hero__cta {
  align-self: start;
  margin-bottom: var(--space-4);
  padding: 11px 22px;
  font-size: var(--fs-sm);
}
.hero__cta::after {
  content: '→';
  margin-left: 0.15em;
}

/* Na čom Vera beží — zoznam verzií. Názov s číslom drží nadpisové písmo
   a tabulárne číslice, aby sa čísla dali porovnať pohľadom dole. */
.stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.stack__polozka {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
}
:root[data-theme="dark"] .stack__polozka { background: #091818; }
.stack__nazov {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h4);
  font-variant-numeric: tabular-nums;
}
.stack__popis {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stack { grid-template-columns: 1fr; }
}

/* Na nízkych oknách sa hero aj s náznakom posunu na obrazovku nezmestilo.
   Namerané pri okne 1440x723: hero malo 873 px, teda presah 150 px, a štítok
   „Posuňte sa nižšie" sedel na 820 px — pod ohybom, čiže presne tam, kde
   stráca zmysel, lebo naň treba odscrollovať.

   Sťahuje sa len tu. Na vysokých displejoch je pôvodné rozostupovanie
   v poriadku a nie je dôvod ho zmenšovať: hero tam dorastie na 100svh samo
   a náznak je vidieť aj bez zásahu.

   Po stiahnutí sa rovnica vojde na jeden riadok a celé hero má presne výšku
   okna. Náznak sa zvisle prekrýva s pásom tlačidiel asi o 20 px, ale vodorovne
   sú od seba ďaleko (tlačidlá končia na 988 px, náznak začína na 1159 px). */
@media (max-height: 900px) {
  .hero {
    padding-top: 126px;
  }
  .hero__rovnica {
    gap: 0.5rem;
  }
  .hero__firmaText {
    font-size: clamp(2.4rem, 9vw, 5.2rem);
  }
  .hero__clenText {
    font-size: clamp(1.9rem, 7.5vw, 4.2rem);
  }
  .hero__clenObr {
    height: clamp(2rem, 7.5vw, 4.3rem);
  }
  .hero__telo {
    padding-block: 22px 12px;
  }
  .hero__stitok {
    margin-bottom: 8px;
  }
  .hero__cta {
    margin-bottom: 10px;
    padding-block: 9px;
  }
  .hero__akcie {
    margin-top: 12px;
    padding-bottom: 16px;
  }
  .hero__akcie .tlacidlo {
    padding-block: 13px;
  }
  .hero__posun {
    bottom: 12px;
  }
}

/* Druhý stupeň pre naozaj nízke okná. Pri 900 px stiahnuté hero má okolo 660 px
   obsahu, čo je na 650 px okne tesne — náznak by sa dostal na hranu a stránka
   by sa o pár pixelov rozscrollovala. Tu sa uberie ešte kúsok, aby ostala
   rezerva. */
@media (max-height: 700px) {
  .hero {
    padding-top: 112px;
  }
  .hero__firmaText {
    font-size: clamp(2.2rem, 9vw, 4.4rem);
  }
  .hero__clenText {
    font-size: clamp(1.8rem, 7.5vw, 3.6rem);
  }
  .hero__clenObr {
    height: clamp(1.9rem, 7.5vw, 3.7rem);
  }
  .hero__telo {
    padding-block: 14px 8px;
  }
  .hero__akcie {
    margin-top: 8px;
    padding-bottom: 8px;
  }
  .hero__posun {
    bottom: 8px;
  }
}