/* ==========================================================================
   NUMIO - Účtovníctvo · Mzdy · Personalistika
   Design system & stylesheet
   Farby vychádzajú z dizajn manuálu značky NUMIO.
   ========================================================================== */

/* ---------- 1. TOKENY ---------------------------------------------------- */
:root {
  /* Značka */
  --petrol:        #0F5F6B;
  --petrol-600:    #0D525C;
  --petrol-300:    #3E8A95;
  --petrol-100:    #C9DEE1;
  --oranzova:      #FF7A33;
  --oranzova-600:  #F0631A;
  --oranzova-100:  #FFE3D3;
  --tmava:         #0B3D45;
  --tmava-900:     #072B31;
  --svetla:        #E7EFF0;
  --siva:          #5E8289;
  --text:          #22383D;
  --biela:         #FFFFFF;

  /* Plochy */
  --papier:        #F6FAFA;
  --papier-2:      #EDF4F4;
  --linka:         rgba(15, 95, 107, .14);
  --linka-tmava:   rgba(255, 255, 255, .14);

  /* Typografia */
  --font: "Montserrat", "Calibri", "Segoe UI", Arial, sans-serif;

  --fs-display: clamp(2.85rem, 1.2rem + 6.4vw, 6.2rem);
  --fs-h1:      clamp(2.3rem, 1.35rem + 3.7vw, 4.15rem);
  --fs-h2:      clamp(1.85rem, 1.2rem + 2.5vw, 3.15rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + .8vw, 1.72rem);
  --fs-h4:      clamp(1.05rem, .98rem + .35vw, 1.22rem);
  --fs-lead:    clamp(1.03rem, .95rem + .45vw, 1.31rem);
  --fs-body:    clamp(.97rem, .93rem + .18vw, 1.055rem);
  --fs-small:   .875rem;
  --fs-micro:   .745rem;

  /* Priestor */
  --sekcia:     clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --sirka:      1240px;
  --sirka-uzka: 820px;
  --gap:        clamp(1.1rem, .6rem + 1.4vw, 2rem);

  /* Tvar */
  --r-s:  10px;
  --r-m:  18px;
  --r-l:  28px;
  --r-xl: 40px;

  /* Tiene */
  --tien-1: 0 1px 2px rgba(11, 61, 69, .05), 0 4px 14px rgba(11, 61, 69, .05);
  --tien-2: 0 2px 6px rgba(11, 61, 69, .06), 0 14px 38px rgba(11, 61, 69, .09);
  --tien-3: 0 6px 16px rgba(11, 61, 69, .09), 0 30px 70px rgba(11, 61, 69, .16);
  --tien-oranz: 0 10px 30px rgba(255, 122, 51, .34);

  /* Pohyb */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;
  --t:      .38s;
  --t-slow: .75s;

  --header-h: 82px;
}

/* ---------- 2. RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--text);
  background: var(--papier);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 3px solid var(--oranzova);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--oranzova); color: #fff; }

/* Typografia */
h1, h2, h3, h4, h5 {
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--tmava);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.01em; }
p  { text-wrap: pretty; }

strong, b { font-weight: 700; color: var(--tmava); }

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.obal { width: min(100% - 2.6rem, var(--sirka)); margin-inline: auto; }
.obal-uzky { width: min(100% - 2.6rem, var(--sirka-uzka)); margin-inline: auto; }
.sekcia { padding-block: var(--sekcia); position: relative; }
.sekcia-s { padding-block: calc(var(--sekcia) * .62); }

.mriezka { display: grid; gap: var(--gap); }
.m-2 { grid-template-columns: repeat(2, 1fr); }
.m-3 { grid-template-columns: repeat(3, 1fr); }
.m-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .m-3, .m-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .m-2, .m-3, .m-4 { grid-template-columns: 1fr; } }

.stred { text-align: center; }
.stred .nadpis-blok { margin-inline: auto; }

/* Tmavá plocha */
.tmavy {
  background: var(--tmava);
  color: #CEDDE0;
  position: relative;
  isolation: isolate;
}
.tmavy h1, .tmavy h2, .tmavy h3, .tmavy h4, .tmavy strong { color: #fff; }
.tmavy .oko { color: rgba(255,255,255,.62); }

.svetly { background: var(--papier-2); }

/* Tmavé plochy mimo .tmavy - hero, podstránkový hero, CTA pás, tmavé karty.
   Bez tohto by <b>/<strong> zdedili tmavú farbu textu a na tmavom zanikli. */
.hero b, .hero strong,
.pod-hero b, .pod-hero strong,
.cta b, .cta strong,
.karta-tmava b, .karta-tmava strong,
.hero-karta b, .hero-karta strong,
.kalk-vysledok b, .kalk-vysledok strong,
.stat b, .stat strong, .stat h4,
.mega-pata b, .mega-pata strong { color: #fff; }

/* Textúra zrna – jemný papierový nádych */
.zrno::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* ---------- 4. TYPO KOMPONENTY ------------------------------------------- */
.nadpis-blok { max-width: 62ch; }
.nadpis-blok > * + * { margin-top: 1.05rem; }

.oko {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--petrol);
}
.oko::before {
  content: "";
  width: 26px; height: 3px;
  border-radius: 3px;
  background: var(--oranzova);
  flex: none;
}
.tmavy .oko::before { background: var(--oranzova); }

.lead { font-size: var(--fs-lead); color: var(--siva); line-height: 1.62; }
.tmavy .lead { color: rgba(255,255,255,.74); }

/* Zvýraznenie oranžovou linkou – motív z loga */
.zvyr { position: relative; display: inline-block; white-space: nowrap; }
.zvyr::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: .13em;
  border-radius: .1em;
  background: var(--oranzova);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease) .25s;
}
.je-videt .zvyr::after, .zvyr.aktiv::after { transform: scaleX(1); }

.text-petrol { color: var(--petrol); }
.text-oranz  { color: var(--oranzova); }

/* ---------- 5. TLAČIDLÁ -------------------------------------------------- */
.btn {
  --btn-bg: var(--oranzova);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.65rem;
  font-size: .935rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--tmava);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
  border-radius: inherit;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--tien-2); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(-1px); }
.btn svg { flex: none; transition: transform var(--t) var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-hlavne { box-shadow: var(--tien-oranz); }
.btn-hlavne:hover { box-shadow: 0 14px 34px rgba(11,61,69,.28); }

.btn-obrys {
  --btn-bg: transparent;
  --btn-fg: var(--tmava);
  box-shadow: inset 0 0 0 1.6px var(--linka);
}
.btn-obrys:hover { --btn-fg: #fff; }
.btn-obrys::before { background: var(--petrol); }

/* Obrysové tlačidlo na tmavom podklade - vrátane hero, CTA pásu a tmavých kariet. */
.tmavy .btn-obrys, .hero .btn-obrys, .pod-hero .btn-obrys,
.cta .btn-obrys, .karta-tmava .btn-obrys {
  --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.6px rgba(255, 255, 255, .32);
}
.tmavy .btn-obrys::before, .hero .btn-obrys::before, .pod-hero .btn-obrys::before,
.cta .btn-obrys::before, .karta-tmava .btn-obrys::before { background: #fff; }
.tmavy .btn-obrys:hover, .hero .btn-obrys:hover, .pod-hero .btn-obrys:hover,
.cta .btn-obrys:hover, .karta-tmava .btn-obrys:hover { --btn-fg: var(--tmava); }

.btn-biele { --btn-bg: #fff; --btn-fg: var(--tmava); }
.btn-biele::before { background: var(--oranzova); }
.btn-biele:hover { --btn-fg: #fff; }

.btn-s { padding: .68rem 1.15rem; font-size: .85rem; }
.btn-l { padding: 1.12rem 2.15rem; font-size: 1rem; }

.btn-skupina { display: flex; flex-wrap: wrap; gap: .8rem; }
.stred .btn-skupina { justify-content: center; }

/* Textový odkaz so šípkou */
.odkaz {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .9rem;
  color: var(--petrol);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--oranzova), var(--oranzova));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t) var(--ease), color var(--t) var(--ease);
}
.odkaz:hover { background-size: 100% 2px; color: var(--oranzova); }
.odkaz svg { transition: transform var(--t) var(--ease); }
.odkaz:hover svg { transform: translateX(4px); }
.tmavy .odkaz { color: #fff; }

/* ---------- 6. ZNAČKY / CHIPS -------------------------------------------- */
.znacka {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--oranzova-100);
  color: var(--oranzova-600);
}
.znacka-petrol { background: rgba(15,95,107,.1); color: var(--petrol); }
.znacka-sklo {
  background: rgba(255,255,255,.09);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}
.znacka .bod {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.znacka .bod-zivy {
  background: #43D9A3;
  box-shadow: 0 0 0 0 rgba(67,217,163,.7);
  animation: tep 2.2s infinite;
}
@keyframes tep {
  0%   { box-shadow: 0 0 0 0 rgba(67,217,163,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(67,217,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(67,217,163,0); }
}

/* ---------- 7. HLAVIČKA -------------------------------------------------- */
.postup {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--oranzova), #FFB067);
  z-index: 1200;
  transition: width .1s linear;
}

.hlavicka {
  position: fixed; inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: height var(--t) var(--ease), background var(--t) var(--ease),
              box-shadow var(--t) var(--ease), backdrop-filter var(--t);
}
.hlavicka::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(246,250,250,.82);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--linka);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.hlavicka.pri-scrolle { height: 66px; }
.hlavicka.pri-scrolle::before { opacity: 1; }

.hlavicka .obal {
  display: flex; align-items: center; gap: 1.4rem;
  width: min(100% - 2.6rem, calc(var(--sirka) + 80px));
  position: relative;
}

.logo { display: block; flex: none; margin-right: auto; }
.logo img {
  height: 46px; width: auto;
  transition: height var(--t) var(--ease);
}
.hlavicka.pri-scrolle .logo img { height: 38px; }

/* Nad tmavým hero svieti biele logo, po scrollnutí sa prepne na základné. */
.logo-tmave { display: none; }
.logo-biele { display: block; }
.hlavicka.pri-scrolle .logo-tmave { display: block; }
.hlavicka.pri-scrolle .logo-biele { display: none; }

/* Navigácia */
.nav { display: flex; align-items: center; gap: .15rem; }
.nav > li { position: relative; }
.nav a.nav-odkaz {
  display: flex; align-items: center; gap: .35rem;
  padding: .58rem .78rem;
  font-size: .895rem;
  font-weight: 600;
  color: #fff;
  border-radius: 999px;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.nav a.nav-odkaz:hover { color: #fff; background: rgba(255,255,255,.15); }
.nav a.nav-odkaz.tu { color: var(--oranzova); }

.hlavicka.pri-scrolle .nav a.nav-odkaz { color: var(--tmava); }
.hlavicka.pri-scrolle .nav a.nav-odkaz:hover { color: var(--petrol); background: rgba(15,95,107,.07); }
.hlavicka.pri-scrolle .nav a.nav-odkaz.tu { color: var(--oranzova-600); }
.nav a.nav-odkaz.tu::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--oranzova);
}
.nav .sipka { transition: transform var(--t) var(--ease); opacity: .55; }
.nav li:hover > .nav-odkaz .sipka { transform: rotate(180deg); }

/* Rozbaľovacie mega menu */
.mega {
  position: absolute;
  top: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 12px);
  width: min(92vw, 660px);
  padding: .8rem;
  background: #fff;
  border-radius: var(--r-l);
  box-shadow: var(--tien-3);
  border: 1px solid var(--linka);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.nav li:hover > .mega, .nav li:focus-within > .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega::before {
  content: "";
  position: absolute; top: -8px; left: 0; right: 0; height: 14px;
}
.mega-polozka {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .75rem .8rem;
  border-radius: var(--r-m);
  transition: background var(--t-fast);
}
.mega-polozka:hover { background: var(--papier-2); }
.mega-ikona {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(15,95,107,.09);
  color: var(--petrol);
  transition: background var(--t), color var(--t), transform var(--t) var(--ease-back);
}
.mega-polozka:hover .mega-ikona { background: var(--oranzova); color: #fff; transform: rotate(-6deg) scale(1.06); }
.mega-polozka b { display: block; font-size: .9rem; color: var(--tmava); }
.mega-polozka span { display: block; font-size: .795rem; line-height: 1.45; color: var(--siva); }
.mega-pata {
  grid-column: 1 / -1;
  margin-top: .25rem;
  padding: .85rem 1rem;
  border-radius: var(--r-m);
  background: var(--tmava);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .84rem;
}
.mega-pata b { color: #fff; }

.hlavicka-akcie { display: flex; align-items: center; gap: .6rem; flex: none; }
.tel-odkaz {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .88rem; color: rgba(255,255,255,.88);
  padding: .5rem .3rem;
  transition: color var(--t-fast);
}
.tel-odkaz:hover { color: var(--oranzova); }
.hlavicka.pri-scrolle .tel-odkaz { color: var(--tmava); }

/* Hamburger */
.hamburger {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  position: relative;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
  flex: none;
}
.hlavicka.pri-scrolle .hamburger { background: var(--tmava); box-shadow: none; }
body.menu-otvorene .hamburger { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.hamburger span {
  position: absolute; left: 50%; top: 50%;
  width: 19px; height: 2px; border-radius: 2px;
  background: #fff;
  transition: transform var(--t) var(--ease), opacity var(--t-fast);
}
.hamburger span:nth-child(1) { transform: translate(-50%, -7px); }
.hamburger span:nth-child(2) { transform: translate(-50%, -50%); }
.hamburger span:nth-child(3) { transform: translate(-50%, 5px); }
body.menu-otvorene .hamburger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.menu-otvorene .hamburger span:nth-child(2) { opacity: 0; }
body.menu-otvorene .hamburger span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Mobilné menu */
.mob-menu {
  position: fixed; inset: 0;
  z-index: 999;
  background: var(--tmava);
  padding: calc(var(--header-h) + 1.5rem) 0 2.5rem;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 45px) 45px);
  transition: clip-path .65s var(--ease);
  visibility: hidden;
}
body.menu-otvorene .mob-menu {
  clip-path: circle(150% at calc(100% - 45px) 45px);
  visibility: visible;
}
.mob-menu a { color: #fff; }
.mob-nav > li {
  border-bottom: 1px solid var(--linka-tmava);
  opacity: 0; transform: translateY(18px);
}
body.menu-otvorene .mob-nav > li {
  animation: vstup .5s var(--ease) forwards;
}
.mob-nav > li:nth-child(1) { animation-delay: .16s; }
.mob-nav > li:nth-child(2) { animation-delay: .21s; }
.mob-nav > li:nth-child(3) { animation-delay: .26s; }
.mob-nav > li:nth-child(4) { animation-delay: .31s; }
.mob-nav > li:nth-child(5) { animation-delay: .36s; }
.mob-nav > li:nth-child(6) { animation-delay: .41s; }
@keyframes vstup { to { opacity: 1; transform: none; } }

.mob-nav > li > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .2rem;
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.02em;
}
.mob-pod { display: grid; gap: .1rem; padding: 0 .2rem 1rem; }
.mob-pod a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 0;
  font-size: .95rem;
  color: rgba(255,255,255,.72);
}
.mob-pod a::before {
  content: ""; width: 14px; height: 2px; background: var(--oranzova); flex: none;
}
.mob-cta { margin-top: 1.8rem; display: grid; gap: .7rem; padding-inline: .2rem; }

@media (max-width: 1080px) {
  .nav, .hlavicka-akcie .tel-odkaz, .hlavicka-akcie .btn { display: none; }
  .hamburger { display: block; }
}

/* ---------- 8. HERO ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 3.5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  background: var(--tmava);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-platno {
  position: absolute; inset: 0;
  z-index: -3;
  width: 100%; height: 100%;
}
.hero::before {
  /* aurora */
  content: "";
  position: absolute;
  z-index: -2;
  width: 130vmax; height: 130vmax;
  top: -55vmax; left: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(15,95,107,.85), transparent 70%) 22% 42% / 62% 62% no-repeat,
    radial-gradient(closest-side, rgba(255,122,51,.42), transparent 70%) 74% 30% / 48% 48% no-repeat,
    radial-gradient(closest-side, rgba(62,138,149,.55), transparent 70%) 52% 74% / 58% 58% no-repeat;
  filter: blur(28px);
  opacity: .95;
  animation: aurora 26s var(--ease) infinite alternate;
}
@keyframes aurora {
  0%   { transform: translateX(-50%) rotate(0deg) scale(1); }
  50%  { transform: translateX(-48%) rotate(12deg) scale(1.09); }
  100% { transform: translateX(-52%) rotate(-8deg) scale(1.04); }
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,43,49,.55) 0%, rgba(7,43,49,.14) 34%, rgba(7,43,49,.85) 100%);
}

.hero-obsah { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (max-width: 980px) { .hero-obsah { grid-template-columns: 1fr; } }

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: #fff;
  margin-block: 1.4rem 1.5rem;
}
/* Maska riadku sa rozšíri o kúsok hore aj dole, aby neorezala slovenskú
   diakritiku (Ú, Č, Ž) ani dotiahnuté paticky. Záporný margin drží layout. */
.hero h1 .riadok {
  display: block;
  overflow: hidden;
  padding-block: .12em;
  margin-block: -.12em;
}
.hero h1 .riadok > span {
  display: block;
  transform: translateY(105%);
  animation: odkryv .95s var(--ease) forwards;
}
.hero h1 .riadok:nth-child(1) > span { animation-delay: .12s; }
.hero h1 .riadok:nth-child(2) > span { animation-delay: .22s; }
.hero h1 .riadok:nth-child(3) > span { animation-delay: .32s; }
@keyframes odkryv { to { transform: none; } }

.hero .lead { max-width: 54ch; color: rgba(255,255,255,.8); }

.hero-vstup { opacity: 0; transform: translateY(24px); animation: vstup .8s var(--ease) forwards; }
.hero-vstup.d1 { animation-delay: .05s; }
.hero-vstup.d2 { animation-delay: .45s; }
.hero-vstup.d3 { animation-delay: .58s; }
.hero-vstup.d4 { animation-delay: .70s; }

/* rotujúce slovo */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  color: var(--oranzova);
  position: relative;
}
.rotator span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.42em) rotateX(-45deg);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  white-space: nowrap;
}
.rotator span.aktiv { opacity: 1; transform: none; }
.rotator span.odchod { opacity: 0; transform: translateY(-.42em) rotateX(45deg); }

/* dôverové pásmo */
.hero-dovera {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem;
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linka-tmava);
}
.dovera-polozka { display: flex; align-items: center; gap: .7rem; }
.dovera-polozka .cislo {
  font-size: 1.72rem; font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1;
}
.dovera-polozka .popis { font-size: .78rem; line-height: 1.32; color: rgba(255,255,255,.6); max-width: 15ch; }

/* Sklenená karta v hero */
.hero-karta {
  position: relative;
  padding: 1.6rem;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 40px 80px rgba(0,0,0,.34);
  backdrop-filter: blur(22px) saturate(1.4);
  animation: plavanie 7s ease-in-out infinite alternate;
}
@keyframes plavanie {
  from { transform: translateY(-9px); }
  to   { transform: translateY(9px); }
}
.hero-karta-hlava {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.13);
  margin-bottom: 1.1rem;
}
.hero-karta-hlava b { font-size: .95rem; }
.hero-riadok {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .72rem 0;
  font-size: .875rem;
  color: rgba(255,255,255,.78);
  border-bottom: 1px dashed rgba(255,255,255,.1);
}
.hero-riadok:last-of-type { border-bottom: 0; }
.hero-riadok .stav {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #6FE7BC;
}
.hero-riadok .stav svg { width: 15px; height: 15px; }
.hero-suma {
  margin-top: 1.2rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-m);
  background: linear-gradient(120deg, var(--oranzova), #FF9A5E);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--tien-oranz);
}
.hero-suma small { display: block; font-size: .72rem; opacity: .85; font-weight: 600; }
.hero-suma b { font-size: 1.5rem; color: #fff; letter-spacing: -.03em; }

/* plávajúce mini-štítky */
.plavak {
  position: absolute;
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: var(--tmava);
  font-size: .775rem; font-weight: 700;
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
  white-space: nowrap;
}
.plavak svg { color: var(--oranzova); }
.plavak-1 { top: -18px; left: -24px; animation: plavanie 5.5s ease-in-out infinite alternate; }
.plavak-2 { bottom: -20px; right: -24px; animation: plavanie 6.5s ease-in-out .8s infinite alternate-reverse; }
@media (max-width: 900px) {
  .plavak-1 { left: 6px; top: -14px; }
  .plavak-2 { right: 6px; bottom: -16px; }
}

/* Šípka nadol */
.scroll-dole {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: grid; place-items: center; gap: .5rem;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.scroll-dole .cesta {
  width: 1px; height: 42px;
  background: linear-gradient(rgba(255,255,255,.35), transparent);
  position: relative; overflow: hidden;
}
.scroll-dole .cesta::after {
  content: ""; position: absolute; inset: 0;
  background: var(--oranzova);
  animation: padanie 1.9s var(--ease) infinite;
}
@keyframes padanie {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 980px) { .scroll-dole { display: none; } }

/* ---------- 9. MARQUEE --------------------------------------------------- */
.pas {
  overflow: hidden;
  padding-block: 1.15rem;
  background: var(--petrol);
  border-block: 1px solid rgba(255,255,255,.1);
  position: relative;
  z-index: 2;
}
.pas-stopa { display: flex; width: max-content; animation: posun 38s linear infinite; }
.pas:hover .pas-stopa { animation-play-state: paused; }
@keyframes posun { to { transform: translateX(-50%); } }
.pas-skupina { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; }
.pas-polozka {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .855rem; font-weight: 700; letter-spacing: .03em;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}
.pas-polozka svg { color: var(--oranzova); flex: none; }
.pas-oddel { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); flex: none; }

/* ---------- 10. KARTY ---------------------------------------------------- */
.karta {
  position: relative;
  padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  background: #fff;
  border-radius: var(--r-l);
  box-shadow: var(--tien-1);
  border: 1px solid rgba(15,95,107,.07);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
  overflow: hidden;
  isolation: isolate;
}
.karta:hover { transform: translateY(-6px); box-shadow: var(--tien-3); border-color: rgba(15,95,107,.12); }

/* svetelný bod sledujúci myš */
.karta.svetlo::before {
  content: "";
  position: absolute; inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255,122,51,.13), transparent 62%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.karta.svetlo:hover::before { opacity: 1; }

.karta-ikona {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(15,95,107,.12), rgba(15,95,107,.04));
  color: var(--petrol);
  margin-bottom: 1.15rem;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform .5s var(--ease-back);
}
.karta:hover .karta-ikona {
  background: linear-gradient(140deg, var(--oranzova), #FF9A5E);
  color: #fff;
  transform: rotate(-8deg) scale(1.08);
}
.karta h3 { margin-bottom: .6rem; }
.karta p { color: var(--siva); font-size: .945rem; }
.karta-cena {
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px dashed var(--linka);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.karta-cena .suma { font-size: 1.3rem; font-weight: 800; color: var(--tmava); letter-spacing: -.03em; }
.karta-cena .suma small { font-size: .7rem; font-weight: 700; color: var(--siva); letter-spacing: 0; }

/* číslovaná karta */
.karta-cislo {
  position: absolute; top: 1.1rem; right: 1.4rem;
  font-size: 3.6rem; font-weight: 800;
  color: rgba(15,95,107,.06);
  letter-spacing: -.05em;
  line-height: 1;
  transition: color var(--t);
}
.karta:hover .karta-cislo { color: rgba(255,122,51,.14); }

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
}
.bento > * { grid-column: span 2; }
.bento .siroka { grid-column: span 3; }
.bento .cela { grid-column: span 6; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > *, .bento .siroka, .bento .cela { grid-column: span 2; }
}

/* karta služby s obrázkovým vrchom */
.karta-sluzba { display: flex; flex-direction: column; }
.karta-sluzba .karta-telo { flex: 1; }
.karta-zoznam { margin-top: 1rem; display: grid; gap: .42rem; }
.karta-zoznam li {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .875rem; color: var(--siva);
}
.karta-zoznam li svg { flex: none; color: var(--petrol); margin-top: .28rem; }

/* karta rozdelená na text + panel */
.karta-duo {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  align-items: center;
}
@media (max-width: 780px) { .karta-duo { grid-template-columns: 1fr; } }

/* Tmavá karta */
.karta-tmava {
  background: linear-gradient(150deg, var(--tmava), var(--petrol-600));
  color: rgba(255,255,255,.78);
  border-color: rgba(255,255,255,.09);
}
.karta-tmava h3, .karta-tmava h4 { color: #fff; }
.karta-tmava p { color: rgba(255,255,255,.72); }
.karta-tmava .karta-ikona { background: rgba(255,255,255,.1); color: #fff; }
.karta-tmava .karta-cislo { color: rgba(255,255,255,.08); }
.karta-tmava .karta-cena { border-color: rgba(255,255,255,.15); }
.karta-tmava .karta-cena .suma { color: #fff; }
.karta-tmava .karta-cena .suma small { color: rgba(255,255,255,.6); }

/* Oranžová karta */
.karta-oranz {
  background: linear-gradient(145deg, var(--oranzova), #FF9B57);
  color: #fff; border: 0;
  box-shadow: var(--tien-oranz);
}
.karta-oranz h3, .karta-oranz h4, .karta-oranz strong { color: #fff; }
.karta-oranz p { color: rgba(255,255,255,.9); }

/* ---------- 11. PROCES --------------------------------------------------- */
.proces { position: relative; display: grid; gap: 0; }
.proces-krok {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: clamp(1rem, 3vw, 2.6rem);
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-top: 1px solid var(--linka);
}
.proces-krok:last-child { border-bottom: 1px solid var(--linka); }
.tmavy .proces-krok { border-color: var(--linka-tmava); }
.proces-krok .krok-cislo {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--petrol-100);
  transition: color .5s var(--ease), transform .5s var(--ease);
}
.tmavy .proces-krok .krok-cislo { color: rgba(255,255,255,.16); }
.proces-krok:hover .krok-cislo { color: var(--oranzova); transform: translateX(6px); }
.proces-krok h3 { margin-bottom: .5rem; }
.proces-krok p { color: var(--siva); max-width: 62ch; }
.tmavy .proces-krok p { color: rgba(255,255,255,.68); }
/* Variant s letopočtami - štvorciferné číslo potrebuje širší stĺpec. */
.proces-roky .proces-krok { grid-template-columns: 132px 1fr; }
.proces-roky .krok-cislo {
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem);
  white-space: nowrap;
}
@media (max-width: 620px) { .proces-roky .proces-krok { grid-template-columns: 1fr; } }

.krok-cas {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .8rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--oranzova-600);
}
.tmavy .krok-cas { color: var(--oranzova); }
@media (max-width: 620px) { .proces-krok { grid-template-columns: 1fr; gap: .4rem; } }

/* ---------- 12. ŠTATISTIKY ---------------------------------------------- */
.staty { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 860px) { .staty { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: clamp(1.2rem, 2vw, 1.9rem);
  border-radius: var(--r-l);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  transition: background var(--t), transform var(--t) var(--ease);
}
.stat:hover { background: rgba(255,255,255,.09); transform: translateY(-5px); }
.stat .cislo {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 800; letter-spacing: -.045em; line-height: 1;
  color: #fff;
  display: flex; align-items: baseline; gap: .06em;
}
.stat .cislo .prip { color: var(--oranzova); }
.stat .popis { margin-top: .7rem; font-size: .855rem; color: rgba(255,255,255,.62); line-height: 1.45; }

/* svetlá varianta */
.staty-svetle .stat { background: #fff; box-shadow: var(--tien-1); }
.staty-svetle .stat .cislo { color: var(--tmava); }
.staty-svetle .stat .popis { color: var(--siva); }

/* ---------- 13. CENNÍK --------------------------------------------------- */
.cenniky { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 980px) { .cenniky { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.cena-karta {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  background: #fff;
  border-radius: var(--r-l);
  border: 1px solid var(--linka);
  box-shadow: var(--tien-1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  display: flex; flex-direction: column;
}
.cena-karta:hover { transform: translateY(-6px); box-shadow: var(--tien-3); }
.cena-karta.top {
  background: linear-gradient(160deg, var(--tmava), var(--petrol-600) 90%);
  border-color: transparent;
  box-shadow: var(--tien-3);
  color: rgba(255,255,255,.8);
}
.cena-karta.top h3, .cena-karta.top .cena-suma, .cena-karta.top strong { color: #fff; }
.cena-karta.top .cena-zoznam li { color: rgba(255,255,255,.78); }
.cena-karta.top .cena-zoznam svg { color: var(--oranzova); }
.cena-karta.top .cena-hlava { border-color: rgba(255,255,255,.15); }
.cena-stitok {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: .35rem .95rem;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--oranzova); color: #fff;
  border-radius: 999px;
  box-shadow: var(--tien-oranz);
  white-space: nowrap;
}
.cena-hlava { padding-bottom: 1.2rem; border-bottom: 1px dashed var(--linka); margin-bottom: 1.2rem; }
.cena-karta h3 { margin-bottom: .35rem; }
.cena-popis { font-size: .875rem; color: var(--siva); min-height: 2.6em; }
.cena-karta.top .cena-popis { color: rgba(255,255,255,.65); }
.cena-suma {
  display: flex; align-items: baseline; gap: .35rem;
  margin-top: 1.1rem;
  font-size: clamp(2.1rem, 1.6rem + 1.8vw, 2.9rem);
  font-weight: 800; letter-spacing: -.045em; line-height: 1;
  color: var(--tmava);
}
.cena-suma .od {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--siva); align-self: center;
}
.cena-karta.top .cena-suma .od { color: rgba(255,255,255,.6); }
.cena-suma .jednotka { font-size: .82rem; font-weight: 600; color: var(--siva); letter-spacing: 0; }
.cena-karta.top .cena-suma .jednotka { color: rgba(255,255,255,.6); }
.cena-zoznam { display: grid; gap: .62rem; margin-bottom: 1.5rem; flex: 1; }
.cena-zoznam li { display: flex; gap: .6rem; align-items: flex-start; font-size: .885rem; color: var(--text); }
.cena-zoznam svg { flex: none; color: var(--petrol); margin-top: .3rem; }
.cena-karta .btn { width: 100%; }

/* Tabuľka cien */
.tab-obal { overflow-x: auto; border-radius: var(--r-l); box-shadow: var(--tien-1); background: #fff; border: 1px solid var(--linka); }
.tab {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: .91rem;
}
.tab caption {
  text-align: left;
  padding: 1.15rem 1.35rem .35rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--tmava);
}
.tab th, .tab td { padding: .95rem 1.35rem; text-align: left; }
.tab thead th {
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--siva); font-weight: 700;
  border-bottom: 1px solid var(--linka);
}
.tab tbody tr { border-bottom: 1px solid rgba(15,95,107,.07); transition: background var(--t-fast); }
.tab tbody tr:last-child { border-bottom: 0; }
.tab tbody tr:hover { background: var(--papier); }
.tab td.cena { font-weight: 800; color: var(--tmava); white-space: nowrap; }
.tab td.cena small { font-weight: 600; color: var(--siva); font-size: .74rem; }
.tab td .pozn { display: block; font-size: .78rem; color: var(--siva); margin-top: .15rem; }

/* ---------- 14. KALKULAČKA ---------------------------------------------- */
.kalk {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.2rem, 2.5vw, 2.6rem);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.6rem);
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--tien-3);
  border: 1px solid var(--linka);
}
@media (max-width: 900px) { .kalk { grid-template-columns: 1fr; } }

.kalk-pole { margin-bottom: 1.5rem; }
.kalk-pole:last-child { margin-bottom: 0; }
.kalk-pole > label, .kalk-legenda {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .88rem; font-weight: 700; color: var(--tmava);
  margin-bottom: .75rem;
}
.kalk-pole .hodnota {
  font-size: .82rem; font-weight: 800; color: var(--oranzova-600);
  background: var(--oranzova-100);
  padding: .18rem .6rem; border-radius: 999px;
  white-space: nowrap;
}

.prepinace { display: flex; flex-wrap: wrap; gap: .5rem; }
.prepinac input { position: absolute; opacity: 0; width: 0; height: 0; }
.prepinac span {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.05rem;
  font-size: .855rem; font-weight: 700;
  border-radius: 999px;
  background: var(--papier-2);
  color: var(--siva);
  cursor: pointer;
  transition: all var(--t) var(--ease);
  box-shadow: inset 0 0 0 1.5px transparent;
}
.prepinac:hover span { background: var(--petrol-100); color: var(--petrol); }
.prepinac input:checked + span {
  background: var(--tmava); color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--tmava), 0 6px 16px rgba(11,61,69,.2);
}
.prepinac input:focus-visible + span { outline: 3px solid var(--oranzova); outline-offset: 3px; }

/* range slider */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--oranzova) var(--vypln, 30%), var(--papier-2) var(--vypln, 30%));
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 5px solid var(--oranzova);
  box-shadow: 0 4px 12px rgba(11,61,69,.24);
  transition: transform var(--t) var(--ease-back);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.16); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 5px solid var(--oranzova);
  box-shadow: 0 4px 12px rgba(11,61,69,.24);
}
.kalk-rozsah { display: flex; justify-content: space-between; font-size: .72rem; color: var(--siva); margin-top: .5rem; }

/* prepínač áno/nie */
.spinac { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--linka); cursor: pointer; }
.spinac:last-of-type { border-bottom: 0; }
.spinac-text { font-size: .875rem; font-weight: 600; }
.spinac-text small { display: block; font-size: .76rem; font-weight: 500; color: var(--siva); }
.spinac input { position: absolute; opacity: 0; }
.spinac .drazka {
  flex: none;
  width: 46px; height: 26px; border-radius: 99px;
  background: var(--papier-2);
  box-shadow: inset 0 0 0 1.5px var(--linka);
  position: relative;
  transition: background var(--t) var(--ease);
}
.spinac .drazka::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(11,61,69,.24);
  transition: transform var(--t) var(--ease-back);
}
.spinac input:checked + .drazka { background: var(--oranzova); box-shadow: inset 0 0 0 1.5px var(--oranzova); }
.spinac input:checked + .drazka::after { transform: translateX(20px); }
.spinac input:focus-visible + .drazka { outline: 3px solid var(--oranzova); outline-offset: 3px; }

/* výsledok */
.kalk-vysledok {
  align-self: start;
  position: sticky; top: calc(var(--header-h) + 16px);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  border-radius: var(--r-l);
  background: linear-gradient(155deg, var(--tmava), var(--petrol-600));
  color: rgba(255,255,255,.8);
  overflow: hidden;
  isolation: isolate;
}
.kalk-vysledok::before {
  content: "";
  position: absolute; z-index: -1;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,122,51,.5), transparent);
  top: -90px; right: -70px;
  filter: blur(10px);
}
.kalk-vysledok .oko { color: rgba(255,255,255,.65); }
.kalk-cena {
  display: flex; align-items: baseline; gap: .3rem;
  margin: 1rem 0 .3rem;
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: #fff;
}
.kalk-cena .od { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); align-self: center; }
.kalk-cena .mena { font-size: .5em; }
.kalk-jednotka { font-size: .82rem; color: rgba(255,255,255,.6); }
.kalk-rozpis { margin: 1.35rem 0; display: grid; gap: .55rem; }
.kalk-rozpis li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .845rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed rgba(255,255,255,.14);
}
.kalk-rozpis li span:last-child { font-weight: 700; color: #fff; white-space: nowrap; }
.kalk-pozn { font-size: .755rem; color: rgba(255,255,255,.55); line-height: 1.5; margin-top: 1rem; }

/* ---------- 15. FAQ ------------------------------------------------------ */
.faq { display: grid; gap: .7rem; }
.faq-polozka {
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: box-shadow var(--t) var(--ease), border-color var(--t);
}
.faq-polozka.otvorena { box-shadow: var(--tien-2); border-color: rgba(255,122,51,.35); }
.faq-otazka {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.15rem 1.35rem;
  text-align: left;
  font-size: 1rem; font-weight: 700; color: var(--tmava);
  transition: color var(--t-fast);
}
.faq-otazka:hover { color: var(--oranzova-600); }
.faq-ikona {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papier-2);
  color: var(--petrol);
  transition: background var(--t), color var(--t), transform var(--t) var(--ease);
}
.faq-polozka.otvorena .faq-ikona { background: var(--oranzova); color: #fff; transform: rotate(45deg); }
.faq-odpoved { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.faq-polozka.otvorena .faq-odpoved { grid-template-rows: 1fr; }
.faq-odpoved > div { overflow: hidden; }
.faq-odpoved p {
  padding: 0 1.35rem 1.3rem;
  color: var(--siva);
  font-size: .93rem;
  max-width: 78ch;
}
.faq-odpoved p + p { padding-top: .8rem; }

/* ---------- 16. REFERENCIE ---------------------------------------------- */
.ref-obal { position: relative; overflow: hidden; }
.ref-stopa {
  display: flex;
  transition: transform .65s var(--ease);
}
.ref-karta {
  flex: 0 0 100%;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.ref-citat {
  font-size: clamp(1.15rem, .95rem + 1.1vw, 1.72rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--tmava);
  text-wrap: balance;
}
.tmavy .ref-citat { color: #fff; }
.ref-citat::before { content: "„"; color: var(--oranzova); }
.ref-citat::after { content: "“"; color: var(--oranzova); }
.ref-autor { display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem; }
.ref-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--petrol), var(--petrol-300));
  color: #fff; font-weight: 800; font-size: .95rem;
  letter-spacing: -.02em;
}
.ref-autor b { display: block; font-size: .93rem; }
.ref-autor span { display: block; font-size: .8rem; color: var(--siva); }
.tmavy .ref-autor span { color: rgba(255,255,255,.6); }
.ref-ovlad { display: flex; align-items: center; gap: .5rem; margin-top: 1.6rem; }
.ref-bodky { display: flex; gap: .4rem; margin-right: auto; }
.ref-bodka {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--linka);
  transition: all var(--t) var(--ease);
}
.tmavy .ref-bodka { background: rgba(255,255,255,.24); }
.ref-bodka.aktiv { width: 26px; background: var(--oranzova); }
.ref-tlacidlo {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: var(--tien-1);
  color: var(--tmava);
  transition: all var(--t) var(--ease);
}
.ref-tlacidlo:hover { background: var(--tmava); color: #fff; transform: scale(1.08); }
.tmavy .ref-tlacidlo { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.tmavy .ref-tlacidlo:hover { background: #fff; color: var(--tmava); }

/* Hodnotenie */
.hviezdy { display: inline-flex; gap: .15rem; color: var(--oranzova); margin-bottom: 1.1rem; }

/* ---------- 17. FORMULÁR ------------------------------------------------- */
.form { display: grid; gap: 1.05rem; }
.form-riadok { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
@media (max-width: 620px) { .form-riadok { grid-template-columns: 1fr; } }

.pole { position: relative; }
.pole label {
  display: block;
  font-size: .8rem; font-weight: 700; color: var(--tmava);
  margin-bottom: .45rem;
}
.pole label .pov { color: var(--oranzova); }
.pole input, .pole textarea, .pole select {
  width: 100%;
  padding: .92rem 1.05rem;
  font-size: .95rem;
  background: #fff;
  border: 1.5px solid var(--linka);
  border-radius: var(--r-s);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.pole textarea { resize: vertical; min-height: 128px; }
.pole select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E8289' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem;
}
.pole input:focus, .pole textarea:focus, .pole select:focus {
  outline: 0;
  border-color: var(--oranzova);
  box-shadow: 0 0 0 4px rgba(255,122,51,.14);
}
.pole input::placeholder, .pole textarea::placeholder { color: #9FB4B8; }
.pole.chyba input, .pole.chyba textarea, .pole.chyba select { border-color: #E24C4C; box-shadow: 0 0 0 4px rgba(226,76,76,.11); }
.pole-chyba { display: none; font-size: .76rem; color: #E24C4C; margin-top: .35rem; font-weight: 600; }
.pole.chyba .pole-chyba { display: block; }

.karta-tmava .pole label {
  color: rgba(255,255,255,.78);
  cursor: pointer;
}
.karta-tmava .pole > label:first-child,
.karta-tmava .pole label[for] {
  color: #fff;
  cursor: default;
}
.karta-tmava .pole label b {
  display: inline-flex;
  align-items: center;
  margin-left: .35rem;
  padding: .12rem .48rem;
  border-radius: 999px;
  background: rgba(255,122,51,.18);
  color: #fff;
  font-size: .74rem;
  white-space: nowrap;
}
.karta-tmava .pole input[type="radio"] {
  width: auto;
  padding: 0;
  margin: 0 .5rem 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--oranzova);
}
.karta-tmava .pole input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--oranzova) var(--vypln, 30%), rgba(255,255,255,.2) var(--vypln, 30%));
  box-shadow: none;
}
.karta-tmava .kalk-vysledok {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .45rem 1rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--r-m);
}
.karta-tmava .kalk-vysledok [data-kalk-typ] {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.8);
  font-size: .88rem;
  font-weight: 700;
}
.karta-tmava .kalk-vysledok b {
  color: #fff;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.15rem);
  line-height: .95;
  letter-spacing: -.045em;
}
.karta-tmava .kalk-vysledok small {
  color: rgba(255,255,255,.66);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
}

.suhlas { display: flex; gap: .7rem; align-items: flex-start; font-size: .8rem; color: var(--siva); line-height: 1.5; cursor: pointer; }
.suhlas input { position: absolute; opacity: 0; }
.suhlas .box {
  flex: none;
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--linka);
  background: #fff;
  display: grid; place-items: center;
  transition: all var(--t-fast);
  margin-top: 1px;
}
.suhlas .box svg { opacity: 0; transform: scale(.5); transition: all var(--t) var(--ease-back); color: #fff; }
.suhlas input:checked + .box { background: var(--oranzova); border-color: var(--oranzova); }
.suhlas input:checked + .box svg { opacity: 1; transform: none; }
.suhlas input:focus-visible + .box { outline: 3px solid var(--oranzova); outline-offset: 3px; }
.suhlas a { color: var(--petrol); text-decoration: underline; text-underline-offset: 2px; }
.suhlas.chyba .box { border-color: #E24C4C; }

.form-hlaska {
  display: none;
  align-items: center; gap: .8rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r-m);
  background: rgba(67,217,163,.12);
  color: #0E7A57;
  font-size: .9rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(67,217,163,.3);
}
.form-hlaska.vidno { display: flex; animation: vstup .5s var(--ease); }
.form-hlaska svg { flex: none; }

/* ---------- 18. KONTAKT -------------------------------------------------- */
.kontakt-mriezka { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(1.6rem, 3vw, 3.4rem); align-items: start; }
@media (max-width: 900px) { .kontakt-mriezka { grid-template-columns: 1fr; } }

.kontakt-polozka {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linka);
}
.kontakt-polozka:last-child { border-bottom: 0; }
.kontakt-polozka .ik {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(15,95,107,.09); color: var(--petrol);
  transition: all var(--t) var(--ease-back);
}
.kontakt-polozka:hover .ik { background: var(--oranzova); color: #fff; transform: rotate(-7deg); }
.kontakt-polozka b { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--siva); font-weight: 700; }
.kontakt-polozka a, .kontakt-polozka p { font-size: 1.02rem; font-weight: 600; color: var(--tmava); }
.kontakt-polozka a:hover { color: var(--oranzova); }

.mapa {
  width: 100%; height: 320px;
  border: 0; border-radius: var(--r-l);
  filter: grayscale(.35) contrast(1.05);
  transition: filter var(--t);
}
.mapa:hover { filter: none; }

/* ---------- 19. CTA PÁS -------------------------------------------------- */
.cta {
  position: relative;
  padding: clamp(2.4rem, 2rem + 3vw, 4.6rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--tmava) 0%, var(--petrol) 62%, var(--petrol-300) 130%);
  color: rgba(255,255,255,.82);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -40% -10% auto auto;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,122,51,.55), transparent 70%);
  animation: plavanie 9s ease-in-out infinite alternate;
}
.cta::after {
  content: "";
  position: absolute; z-index: -1;
  inset: auto auto -45% -12%;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15,95,107,.75), transparent 70%);
  animation: plavanie 11s ease-in-out 1s infinite alternate-reverse;
}
.cta h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta .lead { color: rgba(255,255,255,.78); max-width: 56ch; margin: 1.1rem auto 2rem; }

/* ---------- 20. PÄTA ----------------------------------------------------- */
.pata {
  background: var(--tmava-900);
  color: rgba(255,255,255,.62);
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
  position: relative;
  overflow: hidden;
}
.pata::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oranzova), transparent);
}
.pata-vrch {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-bottom: 3rem;
}
@media (max-width: 900px) { .pata-vrch { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pata-vrch { grid-template-columns: 1fr; } }

.pata img.pata-logo { width: 190px; margin-bottom: 1.15rem; }
.pata p { font-size: .875rem; line-height: 1.62; }
.pata h4 {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45); font-weight: 700;
  margin-bottom: 1.05rem;
}
.pata-nav { display: grid; gap: .58rem; }
.pata-nav a {
  font-size: .885rem;
  color: rgba(255,255,255,.68);
  transition: color var(--t-fast), transform var(--t-fast);
  display: inline-block;
}
.pata-nav a:hover { color: var(--oranzova); transform: translateX(4px); }
.pata-kontakt { display: grid; gap: .75rem; }
.pata-kontakt a, .pata-kontakt span {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .885rem; color: rgba(255,255,255,.72);
  transition: color var(--t-fast);
}
.pata-kontakt a:hover { color: var(--oranzova); }
.pata-kontakt svg { flex: none; margin-top: .2rem; color: var(--oranzova); }

.socialne { display: flex; gap: .55rem; margin-top: 1.3rem; }
.socialne a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.75);
  transition: all var(--t) var(--ease);
}
.socialne a:hover { background: var(--oranzova); color: #fff; transform: translateY(-3px); }

.pata-spodok {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.6rem;
  font-size: .795rem;
}
.pata-spodok nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pata-spodok a:hover { color: var(--oranzova); }

/* ---------- 21. DROBČEKY ------------------------------------------------- */
.drobceky {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.4rem;
}
.drobceky a { transition: color var(--t-fast); }
.drobceky a:hover { color: var(--oranzova); }
.drobceky .odd { opacity: .4; }
.drobceky [aria-current] { color: #fff; }

/* ---------- 22. PODSTRÁNKOVÝ HERO --------------------------------------- */
.pod-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.6rem, 5vw, 4.6rem));
  padding-bottom: clamp(2.8rem, 5vw, 4.8rem);
  background: var(--tmava);
  color: rgba(255,255,255,.78);
  overflow: hidden;
  isolation: isolate;
}
.pod-hero::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -60% -20% auto 30%;
  width: 900px; height: 900px; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(15,95,107,.9), transparent 72%),
    radial-gradient(closest-side, rgba(255,122,51,.32), transparent 70%) 70% 60% / 60% 60% no-repeat;
  filter: blur(20px);
  animation: aurora 30s var(--ease) infinite alternate;
}
.pod-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,43,49,.35), rgba(7,43,49,.8));
}
.pod-hero h1, .pod-hero h2, .pod-hero h3, .pod-hero h4 { color: #fff; }
.pod-hero h1 { max-width: 20ch; }
.pod-hero .lead { max-width: 62ch; margin-top: 1.2rem; }
.pod-hero-mriezka { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
@media (max-width: 880px) { .pod-hero-mriezka { grid-template-columns: 1fr; align-items: start; } }

.hero-cena-box {
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-l);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  backdrop-filter: blur(18px);
}
.hero-cena-box .oko { color: rgba(255,255,255,.6); }
.hero-cena-box .suma {
  display: flex; align-items: baseline; gap: .3rem;
  margin: .9rem 0 .35rem;
  font-size: clamp(2.3rem, 1.8rem + 2vw, 3.1rem);
  font-weight: 800; letter-spacing: -.05em; color: #fff; line-height: 1;
}
.hero-cena-box .suma .od { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); align-self: center; }
.hero-cena-box small { font-size: .8rem; color: rgba(255,255,255,.6); }

/* ---------- 23. ROZDEĽOVAČ / STĹPY -------------------------------------- */
.stlpy { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.stlpy i {
  display: block; width: 8px; border-radius: 3px;
  background: var(--petrol);
  animation: stlp 1.5s var(--ease) infinite alternate;
}
.stlpy i:nth-child(1) { height: 60%; animation-delay: 0s; }
.stlpy i:nth-child(2) { height: 100%; background: var(--oranzova); animation-delay: .2s; }
.stlpy i:nth-child(3) { height: 74%; animation-delay: .4s; }
@keyframes stlp { to { transform: scaleY(.55); } }

/* zvislá deliaca linka s bodom */
.linka-motiv {
  height: 4px; width: 68px; border-radius: 4px;
  background: var(--oranzova);
  margin-bottom: 1.4rem;
}

/* ---------- 24. OBSAHOVÉ PRVKY ------------------------------------------ */
.obsah > * + * { margin-top: 1.15rem; }
.obsah h2 { margin-top: 2.6rem; }
.obsah h3 { margin-top: 1.9rem; }
.obsah p { color: var(--siva); }
.obsah ul { display: grid; gap: .6rem; }
.obsah ul li { display: flex; gap: .65rem; align-items: flex-start; color: var(--siva); }
.obsah ul li::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--oranzova);
  margin-top: .62rem;
}

.zoznam-fajka { display: grid; gap: .85rem; }
.zoznam-fajka li { display: flex; gap: .8rem; align-items: flex-start; }
.zoznam-fajka .fajka {
  flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(15,95,107,.1);
  color: var(--petrol);
  margin-top: 1px;
  transition: all var(--t) var(--ease-back);
}
.zoznam-fajka li:hover .fajka { background: var(--oranzova); color: #fff; transform: scale(1.12); }
.zoznam-fajka b { display: block; font-size: .96rem; }
.zoznam-fajka span { display: block; font-size: .875rem; color: var(--siva); line-height: 1.55; }
.tmavy .zoznam-fajka span,
.karta-tmava .zoznam-fajka span,
.cta .zoznam-fajka span,
.pod-hero .zoznam-fajka span { color: rgba(255,255,255,.7); }
.tmavy .zoznam-fajka .fajka,
.karta-tmava .zoznam-fajka .fajka,
.cta .zoznam-fajka .fajka,
.pod-hero .zoznam-fajka .fajka { background: rgba(255,255,255,.12); color: #fff; }

/* Odrážkové zoznamy vnútri tmavých kariet */
.karta-tmava .karta-zoznam li,
.cta .karta-zoznam li { color: rgba(255,255,255,.74); }
.karta-tmava .karta-zoznam li svg { color: var(--oranzova); }

/* Poznámkový blok */
.poznamka {
  display: flex; gap: 1rem;
  padding: 1.15rem 1.3rem;
  border-radius: var(--r-m);
  background: var(--oranzova-100);
  color: #8A3A11;
  font-size: .89rem; line-height: 1.6;
}
.poznamka svg { flex: none; color: var(--oranzova-600); margin-top: .15rem; }
.poznamka strong { color: #7A3210; }

/* dvojstĺpec text + panel */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
.duo.uzsi-vpravo { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px) { .duo, .duo.uzsi-vpravo { grid-template-columns: 1fr; } }

/* Sticky panel */
.lepivy { position: sticky; top: calc(var(--header-h) + 20px); }

/* ---------- 25. ANIMÁCIE ODHALENIA -------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--del, 0ms);
  will-change: opacity, transform;
}
[data-reveal="vlavo"]  { transform: translateX(-38px); }
[data-reveal="vpravo"] { transform: translateX(38px); }
[data-reveal="zoom"]   { transform: scale(.94); }
[data-reveal="ziadna"] { transform: none; }
[data-reveal].je-videt { opacity: 1; transform: none; }

/* Postupné odhaľovanie detí */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-stagger].je-videt > * { opacity: 1; transform: none; }
[data-stagger].je-videt > *:nth-child(1) { transition-delay: .04s; }
[data-stagger].je-videt > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].je-videt > *:nth-child(3) { transition-delay: .20s; }
[data-stagger].je-videt > *:nth-child(4) { transition-delay: .28s; }
[data-stagger].je-videt > *:nth-child(5) { transition-delay: .36s; }
[data-stagger].je-videt > *:nth-child(6) { transition-delay: .44s; }
[data-stagger].je-videt > *:nth-child(7) { transition-delay: .52s; }
[data-stagger].je-videt > *:nth-child(8) { transition-delay: .60s; }

/* Tilt */
.tilt { transform-style: preserve-3d; transition: transform .35s var(--ease); }
.tilt-obal { perspective: 1000px; }

/* ---------- 26. NAČÍTAVAČ ----------------------------------------------- */
.nacitavac {
  position: fixed; inset: 0;
  z-index: 3000;
  display: grid; place-items: center;
  background: var(--tmava);
  transition: opacity .6s var(--ease), visibility .6s;
  animation: skry-nacitavac .6s var(--ease) 2.8s forwards;
}
.nacitavac.prec { opacity: 0; visibility: hidden; animation: none; }
.nacitavac .stlpy { height: 52px; }
.nacitavac .stlpy i { width: 12px; }
.nacitavac .znak { display: grid; place-items: center; gap: 1.2rem; }
.nacitavac .znak span {
  font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  padding-left: .34em;
}
@keyframes skry-nacitavac {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- 27. HORE ----------------------------------------------------- */
.hore {
  position: fixed; right: 22px; bottom: 22px;
  z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tmava); color: #fff;
  box-shadow: var(--tien-2);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all var(--t) var(--ease);
}
.hore.vidno { opacity: 1; visibility: visible; transform: none; }
.hore:hover { background: var(--oranzova); transform: translateY(-3px); }

/* ---------- 28. UTILITY -------------------------------------------------- */
.skryte {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.preskocit {
  position: absolute; top: -100px; left: 12px;
  z-index: 2000;
  padding: .8rem 1.2rem;
  background: var(--oranzova); color: #fff;
  border-radius: 0 0 var(--r-s) var(--r-s);
  font-weight: 700; font-size: .88rem;
  transition: top var(--t) var(--ease);
}
.preskocit:focus { top: 0; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .8rem; }
.mt-2 { margin-top: 1.6rem; }
.mt-3 { margin-top: 2.4rem; }
.mt-4 { margin-top: 3.2rem; }
.mb-2 { margin-bottom: 1.6rem; }
.mb-3 { margin-bottom: 2.4rem; }

/* ---------- 29. OHĽAD NA POHYB ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .hero h1 .riadok > span { transform: none; }
  .hero-vstup { opacity: 1; transform: none; }
}

/* ---------- 30. TLAČ ----------------------------------------------------- */
@media print {
  .hlavicka, .mob-menu, .hore, .postup, .nacitavac, .cta, .pas { display: none !important; }
  body { background: #fff; color: #000; }
  .tmavy, .pod-hero, .hero { background: #fff !important; color: #000 !important; }
  .tmavy h1, .tmavy h2, .tmavy h3, .pod-hero h1 { color: #000 !important; }
  a { color: #000; }
}

/* ---------- 31. WORDPRESS / CF7 ----------------------------------------- */
.admin-bar .hlavicka { top: 32px; }
@media (max-width: 782px) { .admin-bar .hlavicka { top: 46px; } }
.pata-nav ul { display: grid; gap: .58rem; }
.pata-spodok .menu { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.numio-cf7-card { padding: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }
.wpcf7-form { display: grid; gap: 1.05rem; margin-top: 2.4rem; }
.wpcf7-form p { margin: 0; }
.wpcf7-form label { display: block; font-size: .8rem; font-weight: 700; color: var(--tmava); margin-bottom: .45rem; }
.wpcf7-form-control-wrap { display: block; margin-top: .45rem; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: .92rem 1.05rem;
  font-size: .95rem;
  background: #fff;
  border: 1.5px solid var(--linka);
  border-radius: var(--r-s);
}
.wpcf7 textarea { resize: vertical; min-height: 128px; }
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: 0;
  border-color: var(--oranzova);
  box-shadow: 0 0 0 4px rgba(255,122,51,.14);
}
.wpcf7-list-item { margin: 0; }
.wpcf7-acceptance .wpcf7-list-item-label { color: var(--siva); font-size: .8rem; line-height: 1.5; }
.wpcf7-submit {
  width: 100%;
  padding: 1.12rem 2.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--oranzova);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--tien-oranz);
}
.wpcf7-not-valid-tip { color: #E24C4C; font-size: .76rem; font-weight: 600; margin-top: .35rem; }
.wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 1rem 1.2rem;
  border-radius: var(--r-m);
  font-size: .9rem;
  font-weight: 600;
}
.screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }