@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════════
   Esentra — dizajnový systém
   ─────────────────────────────────────────────────────────────────────────
   Rozloženie, rytmus a typografická škála sú prevzaté z predlohy
   the7 „FSE Software Agency". Farebná rampa je preladená: primárna vychádza
   z logovej modrej Esentra, sekundárnu nesie bronz z pôvodnej identity.
   Neutrály sú ponechané z predlohy — sú farebne neutrálne a sadnú na oboje.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokeny ─────────────────────────────────────────────────────────── */
:root {
  /* Neutrály — prevzaté z predlohy bezo zmeny. */
  --n-950: #020617;
  --n-900: #0f172a;
  --n-850: #16203a;
  --n-800: #1d273a;
  --n-700: #344056;
  --n-600: #47566b;
  --n-500: #64748b;
  --n-400: #94a3b8;
  --n-300: #c8d1df;
  --n-200: #dde4ee;
  --n-100: #f1f5f9;
  --n-050: #f8fafc;
  --n-000: #ffffff;

  /* Primárna — logová modrá #3796C7 rozvinutá do rampy.
     Odtieň 800 je najsvetlejší, ktorý na bielej prejde WCAG AA pre text. */
  --p-950: #08222F;
  --p-900: #0E3247;
  --p-800: #1F5E80;   /* text na bielej — 4,6:1 */
  --p-700: #2A7BA6;
  --p-600: #3796C7;   /* logo */
  --p-500: #55AAD5;
  --p-400: #7FC2E3;
  --p-300: #A9D6EC;
  --p-200: #CDE7F5;
  --p-100: #E4F1F9;
  --p-050: #F2F8FC;

  /* Sekundárna — bronz. 600 je najsvetlejší čitateľný ako text na bielej. */
  --b-800: #5C4C2C;
  --b-700: #6E5B34;
  --b-600: #8A7345;   /* text na bielej — 4,5:1 */
  --b-500: #B0956B;   /* plocha, linky, ikony — nie text na bielej */
  --b-400: #C6B189;
  --b-300: #D9C9A8;
  --b-200: #EDE4D3;
  --b-100: #F7F2E9;

  /* Podpisový gradient predlohy, preladený do modrej Esentra.
     Nesie druhú polovicu veľkých nadpisov. */
  --grad-head:   linear-gradient(110deg, #fff 44%, var(--p-400) 68%, var(--p-600) 100%);
  --grad-head-d: linear-gradient(110deg, var(--n-900) 40%, var(--p-700) 72%, var(--p-600) 100%);
  --grad-dark:   linear-gradient(110deg, #171c2c 46%, var(--p-900) 72%, var(--p-700) 100%);

  /* Významové aliasy. */
  --bg:         var(--n-000);
  --bg-soft:    var(--n-050);
  --bg-dark:    var(--n-900);
  --bg-darker:  var(--n-950);
  --ink:        var(--n-900);
  --ink-2:      var(--n-700);
  --muted:      var(--n-500);
  --on-dark:    var(--n-000);
  --on-dark-2:  var(--n-300);
  --on-dark-3:  var(--n-400);
  --line:       var(--n-200);
  --line-soft:  var(--n-100);
  --line-dark:  rgba(255,255,255,.10);
  --accent:     var(--p-600);
  --accent-ink: var(--p-800);
  --accent-2:   var(--b-500);
  --accent-2-ink: var(--b-700);   /* text: 6,2:1 aj na tlmenom podklade */

  /* Typografia. */
  --font: 'Mona Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Škála predlohy — clamp krivky odčítané z jej CSS. */
  --fs-d1:  clamp(2rem,  2rem + ((1vw - .2rem) * 5.455), 5rem);      /* 32 → 80 */
  --fs-d2:  clamp(2rem,  2rem + ((1vw - .2rem) * 3.636), 4rem);      /* 32 → 64 */
  --fs-d3:  clamp(2rem,  2rem + ((1vw - .2rem) * 2.727), 3.5rem);    /* 32 → 56 */
  --fs-t1:  clamp(2rem,  2rem + ((1vw - .2rem) * 1.364), 2.75rem);   /* 32 → 44 */
  --fs-t2:  clamp(1.875rem, 1.875rem + ((1vw - .2rem) * .682), 2.25rem);
  --fs-t3:  clamp(1.75rem,  1.75rem + ((1vw - .2rem) * .227), 1.875rem);
  --fs-t4:  1.5rem;
  --fs-t5:  1.25rem;
  --fs-t6:  1.125rem;
  --fs-lead: clamp(1.125rem, 1.125rem + ((1vw - .2rem) * .227), 1.25rem);
  --fs-body: clamp(1rem, 1rem + ((1vw - .2rem) * .227), 1.125rem);
  --fs-sm:  .9375rem;
  --fs-xs:  .875rem;
  --fs-2xs: .8125rem;

  --ls-tight: -.02em;
  --ls-label: .12em;

  /* Rozmery a rytmus. */
  --container: 1290px;
  --container-narrow: 800px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --sec-y:  clamp(4rem, 7vw, 7.5rem);
  --header-h: 76px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(2,6,23,.05), 0 4px 12px rgba(2,6,23,.05);
  --shadow:    0 2px 6px rgba(2,6,23,.06), 0 12px 32px rgba(2,6,23,.08);
  --shadow-lg: 0 8px 24px rgba(2,6,23,.10), 0 32px 64px rgba(2,6,23,.12);
  --shadow-p:  0 10px 30px rgba(55,150,199,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .28s;

  /* Mostík na názvy z pôvodného dizajnového systému. Šablóny ich používajú
     v inline štýloch; kým sa všetky neprepíšu, musia niečo znamenať. */
  --hairline:   var(--line);
  --hairline-2: var(--n-300);
  --muted-2:    var(--n-400);
}

/* ── 2. Reset a základ ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Atribút hidden musí prebiť akékoľvek display z komponentov — inak sa
   krokované tlačidlá formulára zobrazia všetky naraz. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-d2); }
h2 { font-size: var(--fs-t1); }
h3 { font-size: var(--fs-t4); line-height: 1.25; }
h4 { font-size: var(--fs-t5); line-height: 1.3; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
figure, blockquote { margin: 0; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--p-700); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

strong, b { font-weight: 650; }
small { font-size: var(--fs-xs); }

:focus-visible {
  outline: 3px solid var(--p-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--n-900); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── 3. Layout ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--sec-y); position: relative; }
.section--soft  { background: var(--bg-soft); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* Tmavé pásy predlohy: navy podklad, modrá žiara a sieťová kresba. */
.section--dark {
  background: var(--bg-dark);
  color: var(--on-dark-2);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark strong { color: var(--on-dark); }
.section--darker { background: var(--bg-darker); }

.section--dark::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(55,150,199,.20), transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(31,94,128,.20), transparent 70%);
}
/* Sieťová kresba — vlastné SVG, nie materiál z predlohy. */
.section--dark::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url(../img/art/constellation.svg) center / cover no-repeat;
  opacity: .45;
  pointer-events: none;
}
.section--plain::after { display: none; }

/* ── 4. Typografické komponenty ────────────────────────────────────────── */

/* Návestie sekcie. Rez presne podľa predlohy: Mona Sans 600, 15 px,
   verzálky s prestrkom 0,3 px — nie monospace. Farba je modrá; odtieň 800
   je najsvetlejší z našej rampy, ktorý prejde WCAG AA aj na tlmenom
   podklade (6,8:1). */
.kicker {
  display: block;
  margin: 0 0 1rem;
  font-family: var(--font);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.section--dark .kicker, .sec--ink .kicker, .page-hero .kicker { color: var(--p-400); }
.kicker--blue { color: var(--accent-ink); }
.section--dark .kicker--blue { color: var(--p-400); }

/* Podpisová črta predlohy: druhá polovica nadpisu prechádza do gradientu. */
.grad {
  background: var(--grad-head-d);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.section--dark .grad,
.hero .grad {
  background: var(--grad-head);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .grad { color: var(--accent-ink); }
  .section--dark .grad, .hero .grad { color: var(--p-400); }
}

.display { font-size: var(--fs-d1); font-weight: 800; line-height: 1.04; }
.h-d2 { font-size: var(--fs-d2); font-weight: 750; line-height: 1.08; }
.h-d3 { font-size: var(--fs-d3); font-weight: 750; line-height: 1.1; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 68ch;
}
.section--dark .lead { color: var(--on-dark-2); }

.sec-head { max-width: 64ch; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head h2 { margin-bottom: .6rem; }
.sec-head .lead { margin-top: 1rem; }
.sec-head__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}

/* ── 5. Tlačidlá a odkazy ──────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--p-700);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px;
  padding: .78rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--p-700); box-shadow: var(--shadow-p); }
.btn--primary:hover { --btn-bg: var(--p-800); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--n-300); }
.btn--ghost:hover { --btn-bd: var(--p-600); --btn-fg: var(--accent-ink); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--n-900); }
.btn--light:hover { --btn-bg: var(--n-100); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.35); }
.btn--outline-light:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.08); }

.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: var(--fs-body); }
.btn--block { width: 100%; }
.btn .ico { width: 1.15em; height: 1.15em; flex: none; }

/* Textový odkaz s podčiarknutím, ako „View all projects" v predlohe. */
.link-more {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-more:hover { gap: .85em; }
.section--dark .link-more { color: var(--p-400); }
.link-more .ico { width: 1.1em; height: 1.1em; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Ikony sú Material Symbols vykreslené ako plochy, nie ťahy — preto
   fill, nie stroke. Sprite sám je z toku vybratý, nie display:none:
   skryté SVG s display:none nevykreslí <use> v starších prehliadačoch. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* inline-block, nie block: ikona sa používa aj uprostred vety (návestia,
   poznámky), kde by blokový prvok spadol na vlastný riadok. */
.ico {
  display: inline-block; vertical-align: -.15em;
  width: 1em; height: 1em; fill: currentColor; stroke: none; flex: none;
}

/* ── 5b. Logo ──────────────────────────────────────────────────────────
   Značka je inline SVG z troch ciest. Farby sa nastavujú premennými, aby
   sa dala prefarbiť podľa podkladu. Modrá je z loga, „čepeľ" nesie bronz
   zo sekundárnej rampy. */
/* Firemné farby odčítané priamo z predlohy loga (esentra.png): značka je
   #3796C7, štvrtá lopatka aj nápis #5A5B5C. Iné odtiene originál nemá —
   limetková z predchádzajúcich súborov v ňom nikdy nebola.

   Predvolené hodnoty sedia na samotnom <svg>, nie na obale s triedou .logo:
   logo sa vkladá aj bez neho (napr. v hero) a inak by ostalo čierne. */
.logo-svg {
  --lg-mark:  #3796C7;
  --lg-blade: #5A5B5C;
  --lg-word:  #5A5B5C;
  height: 36px; width: auto; display: block;
}
.logo { display: inline-flex; text-decoration: none; transition: opacity var(--dur) var(--ease); }
.logo:hover { opacity: .85; }

/* Na tmavom podklade by sivá zanikla. Lopatka a nápis zostávajú rovnakej
   farby ako v origináli — len sa obrátia do svetla. */
.header .logo-svg,
.footer .logo-svg,
.hero .logo-svg,
.section--dark .logo-svg,
.sec--ink .logo-svg,
.page-hero .logo-svg,
.logo--dark .logo-svg {
  --lg-mark:  #56AEDC;
  --lg-blade: #FFFFFF;
  --lg-word:  #FFFFFF;
}

/* ── 6. Hlavička ───────────────────────────────────────────────────────── */
/* Predloha má tmavú lištu pripnutú na vrchu, ktorá po odrolovaní stmavne
   a stlačí sa. Priesvitnosť rieši backdrop-filter s pevným záložným pozadím. */
/* Predloha má lištu nad hero úplne priehľadnú a podklad jej nasadí až po
   odrolovaní (#020617). Vlastné pozadie navrchu robilo cez hero viditeľný
   pás inej modrej — preto tu žiadne nie je.
   Podmienka: každá stránka musí začínať tmavou sekciou (.hero alebo
   .page-hero). Dnes to platí pre všetkých 35 stránok. */
.header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.header.is-stuck {
  background: var(--n-950);
  border-bottom-color: var(--line-dark);
  box-shadow: 0 8px 32px rgba(2,6,23,.45);
}
@supports (backdrop-filter: blur(1px)) {
  .header.is-stuck { background: rgba(2,6,23,.92); backdrop-filter: saturate(180%) blur(14px); }
}

.header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--header-h);
}
.header .logo { display: inline-flex; align-items: center; flex: none; color: #fff; }
.header .logo svg { height: 34px; width: auto; }

.header__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
/* Na úzkych displejoch ustupujú tlačidlá hlavičky hamburgeru — dopyt aj
   kontakt sú v mobilnej navigácii, takže sa nikam nestratia. */
@media (max-width: 1099px) { .header__actions .btn--ghost { display: none; } }
@media (max-width: 479px)  { .header__actions .btn { display: none; } }
.header__actions .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.28); }
.header__actions .btn--ghost:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.08); }

/* ── 7. Navigácia a mega-menu ──────────────────────────────────────────── */
.nav { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1100px) { .nav { display: flex; } }

.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  font-size: var(--fs-sm); font-weight: 550;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.07); }
.nav__link[aria-current="page"] { color: #fff; }
.nav__link .chev { width: .9em; height: .9em; transition: transform var(--dur) var(--ease); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(880px, 92vw);
  padding: 1.25rem;
  background: var(--n-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(2,6,23,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.mega--sm { width: min(620px, 92vw); }
.nav__item.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.mega__link {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .75rem .85rem;
  border-radius: var(--r-sm);
  color: var(--on-dark-2); text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.mega__link:hover { background: rgba(255,255,255,.07); color: #fff; }
.mega__ico {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px;
  border-radius: var(--r-xs);
  background: rgba(55,150,199,.16);
  color: var(--p-400);
}
.mega__ico .ico { width: 20px; height: 20px; }
.mega__t { display: block; color: #fff; font-weight: 600; font-size: var(--fs-sm); }
.mega__d { display: block; color: var(--on-dark-3); font-size: var(--fs-2xs); line-height: 1.45; }
.mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--line-dark);
}
.mega__foot p { margin: 0; color: var(--on-dark-3); font-size: var(--fs-sm); }

/* Hamburger */
.burger {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-sm); color: #fff; cursor: pointer;
}
@media (min-width: 1100px) { .burger { display: none; } }
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger span { position: relative; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after  { position: absolute; top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobilná navigácia */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 99;
  padding: 1.25rem var(--gutter) 2.5rem;
  background: var(--n-950);
  overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1100px) { .mobile-nav { display: none; } }
.mobile-nav details { border-bottom: 1px solid var(--line-dark); }
.mobile-nav summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; color: #fff; font-weight: 600; cursor: pointer; list-style: none;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav details[open] summary .chev { transform: rotate(180deg); }
.mobile-nav__sub { display: grid; gap: .1rem; padding: 0 0 1rem; }
.mobile-nav__sub a, .mobile-nav__flat {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .5rem; border-radius: var(--r-xs);
  color: var(--on-dark-2); text-decoration: none; font-size: var(--fs-sm);
}
.mobile-nav__sub a:hover, .mobile-nav__flat:hover { background: rgba(255,255,255,.07); color: #fff; }
.mobile-nav__flat {
  padding: 1rem .5rem; border-bottom: 1px solid var(--line-dark);
  color: #fff; font-weight: 600; border-radius: 0;
}
.mobile-nav__cta { display: grid; gap: .6rem; margin-top: 1.5rem; }
/* Duchové tlačidlo má tmavý text — v tmavom menu ho treba prefarbiť. */
.mobile-nav .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.28); }
.mobile-nav .btn--ghost:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.08); }
body.is-locked { overflow: hidden; }

/* ── 8. Hero ───────────────────────────────────────────────────────────── */
/* Predloha: celoplošný tmavý gradient, sieťová kresba, značka v strede,
   obrovský nadpis s gradientom v druhej polovici a pás technológií pod ním. */
.hero {
  position: relative;
  /* Lišta je priehľadná a hero sa má ťahať až pod ňu — inak by nad ním
     ostal biely pás tela stránky. Odsadenie zhora rastie o výšku lišty,
     aby obsah pod ňou nezmizol. */
  margin-top: calc(var(--header-h) * -1);
  padding-block: calc(clamp(4.5rem, 11vw, 9rem) + var(--header-h)) clamp(4.5rem, 11vw, 9rem);
  background: var(--n-950);
  color: var(--on-dark-2);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(55,150,199,.34), transparent 72%),
    radial-gradient(ellipse 90% 60% at 50% 105%, rgba(31,94,128,.42), transparent 70%),
    linear-gradient(180deg, #071426 0%, #0a1b30 55%, #071426 100%);
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url(../img/art/constellation.svg) center / cover no-repeat;
  opacity: .65;
  pointer-events: none;
}
.hero__mark { display: grid; place-items: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* Výškou, nie šírkou: .logo-svg má height 36px a šírka auto, takže dva
   protichodné rozmery robili zo značky placku. */
.hero__mark .logo-svg { height: clamp(72px, 8vw, 112px); width: auto; }

.hero h1 {
  margin: 0 0 1rem;
  font-size: var(--fs-d1);
  font-weight: 800;
  line-height: 1.04;
  color: #fff;
  max-width: 20ch;
  margin-inline: auto;
}
.hero__lead {
  margin: 0 auto;
  max-width: 62ch;
  font-size: var(--fs-lead);
  color: var(--on-dark-2);
}
.hero .btn-row { justify-content: center; }

/* Pás technológií pod nadpisom — v predlohe „React · Next.js · Node…" */
.hero__tech {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1.15rem;
  margin: 2rem 0 0;
  padding: 0; list-style: none;
}
.hero__tech li {
  display: flex; align-items: center; gap: 1.15rem;
  margin: 0;
  color: var(--p-400);
  font-weight: 600; font-size: var(--fs-sm);
}
.hero__tech li + li::before {
  content: "·"; color: var(--p-700); font-weight: 700;
}
.hero__tech li span { display: inline-flex; align-items: center; gap: .45rem; }

/* Odznaky pod pásom — pravidlá spolupráce z pôvodného webu. */
.hero__badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 2.25rem 0 0; padding: 0; list-style: none;
}
.hero__badges li {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0;
  padding: .45rem .9rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  color: var(--on-dark-2);
  font-size: var(--fs-2xs);
}
.hero__badges .ico { width: 15px; height: 15px; color: var(--b-400); }

/* ── 9. Kto sme — nadpis, čísla, text, tlačidlá ────────────────────────── */
.about-grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.05fr .95fr; } }

.stats {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stats--pair { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 560px) { .stats--pair { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stats li { margin: 0; }
.stat__n {
  display: block;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 800; line-height: 1;
  letter-spacing: var(--ls-tight);
  background: var(--grad-head-d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section--dark .stat__n { background: var(--grad-head); -webkit-background-clip: text; background-clip: text; }
.stat__l {
  display: block; margin-top: .5rem;
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.4;
}
.section--dark .stat__l { color: var(--on-dark-3); }

/* ── 10. Celoplošný obrazový pás ───────────────────────────────────────── */
.band {
  position: relative; overflow: hidden;
  min-height: clamp(240px, 34vw, 460px);
  background: var(--n-900);
}
.band img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,20,38,.86) 0%, rgba(10,27,48,.45) 45%, rgba(55,150,199,.42) 100%);
}
.band__inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; min-height: inherit;
  padding-block: clamp(2rem, 5vw, 4rem);
}
.band__inner p { color: #fff; font-size: var(--fs-t4); font-weight: 650; max-width: 26ch; margin: 0; }

/* ── 11. Prečo — odrážky so značkou na tmavom ──────────────────────────── */
.checks { display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .checks { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2.5rem; } }
.checks li { display: flex; gap: .9rem; margin: 0; }
.checks .ico {
  flex: none; width: 24px; height: 24px; margin-top: .15rem;
  color: var(--p-400);
}
.checks h3 { font-size: var(--fs-t6); margin-bottom: .35rem; }
.checks p { margin: 0; font-size: var(--fs-sm); color: var(--on-dark-2); line-height: 1.6; }

/* ── 12. Karty služieb ─────────────────────────────────────────────────── */
.cards {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.cards li { margin: 0; }
.card {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--p-300);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  color: inherit;
}
.card__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 1.25rem;
  border-radius: var(--r-sm);
  background: var(--p-050);
  border: 1px solid var(--p-100);
  color: var(--accent-ink);
}
.card__ico .ico { width: 26px; height: 26px; }
.card h3 { font-size: var(--fs-t6); margin-bottom: .5rem; }
.card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin: 0; }
.card__more {
  display: inline-flex; align-items: center; gap: .4em;
  /* auto zarovná odkaz na spodok karty, nech je textu koľkokoľvek */
  margin-top: auto; padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 600;
  transition: gap var(--dur) var(--ease);
}
.card:hover .card__more { gap: .75em; }
.card__more .ico { width: 1em; height: 1em; }

/* ── 13. Pás klientov / technológií ────────────────────────────────────── */
.strip { text-align: center; }
.strip__label {
  margin: 0 0 2rem;
  color: var(--on-dark-2);
  font-size: var(--fs-t5); font-weight: 600;
}
.strip__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.25rem 2.75rem;
  margin: 0; padding: 0; list-style: none;
}
.strip__list li { margin: 0; }
.strip__item {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--on-dark-2);
  font-size: var(--fs-t5); font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
  opacity: .78;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.strip__item:hover { opacity: 1; color: #fff; }
.strip__item .flag {
  font-family: var(--font-mono); font-size: .6em; font-weight: 500;
  letter-spacing: .08em;
  padding: .15em .45em;
  border: 1px solid var(--line-dark); border-radius: var(--r-xs);
  color: var(--on-dark-3);
}
.strip__note { margin: 1.75rem 0 0; color: var(--on-dark-3); font-size: var(--fs-2xs); }

/* Pás technológií — logá v jednom rade, tlmené kým naň nejdete myšou. */
.techs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none;
}
.techs li { margin: 0; }
.techs .tech-logo {
  height: 30px; width: auto; max-width: 132px;
  fill: var(--on-dark-2); color: var(--on-dark-2);
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.techs li:hover .tech-logo { opacity: 1; }

/* ── 14. Mriežka projektov ─────────────────────────────────────────────── */
.projects {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 760px) { .projects { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.projects li { margin: 0; }

.project { display: block; text-decoration: none; color: inherit; }
.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--n-100);
}
.project__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.project:hover .project__media img { transform: scale(1.04); }
/* Značka „+" v rohu, ako v predlohe. */
.project__plus {
  position: absolute; right: 0; bottom: 0;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--p-600); color: #fff;
  transition: background var(--dur) var(--ease);
}
.project:hover .project__plus { background: var(--p-800); }
.project__plus .ico { width: 18px; height: 18px; }
.project h3 { margin: 1.15rem 0 .4rem; font-size: var(--fs-t4); }
.project p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.project__tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .85rem 0 0; padding: 0; list-style: none;
}
.project__tags li {
  margin: 0; padding: .2rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--muted); font-size: var(--fs-2xs);
}

/* ── 15. Tmavý výzvový pás na domovskej ────────────────────────────────── */
.cta-strip { text-align: center; }
.cta-strip .kicker { color: var(--p-400); }
.cta-strip h2 { font-size: var(--fs-d3); font-weight: 750; max-width: 22ch; margin-inline: auto; }
.cta-strip .lead { margin-inline: auto; }
.cta-strip .btn-row { justify-content: center; }

/* ── 16. Cenník ────────────────────────────────────────────────────────── */
.plans {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  margin: 0; padding: 0; list-style: none;
  align-items: stretch;
}
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.plans li { margin: 0; }

.plan {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.plan--featured {
  border-color: var(--p-600);
  box-shadow: 0 12px 40px rgba(55,150,199,.18);
}
.plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: .3rem .85rem;
  border-radius: var(--r-pill);
  background: var(--p-700); color: #fff;
  font-size: var(--fs-2xs); font-weight: 650; white-space: nowrap;
}
.plan h3 { font-size: var(--fs-t4); margin-bottom: .35rem; }
.plan__hint { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 1.5rem; }
.plan__from { display: block; color: var(--muted); font-size: var(--fs-2xs); margin-bottom: .2rem; }
.plan__price {
  display: flex; align-items: baseline; gap: .2rem;
  font-size: clamp(2.25rem, 3.6vw, 3rem); font-weight: 800; line-height: 1;
  letter-spacing: var(--ls-tight); color: var(--ink);
}
.plan__price small { font-size: .45em; font-weight: 600; color: var(--muted); }
.plan__price--text { font-size: var(--fs-t3); }
.plan__vat { color: var(--muted); font-size: var(--fs-2xs); margin: .65rem 0 0; min-height: 2.6em; }
.plan__from--empty { visibility: hidden; }
.plan__list {
  margin: 1.75rem 0 2rem; padding: 1.75rem 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  display: grid; gap: .7rem;
}
.plan__list li {
  display: flex; gap: .6rem; margin: 0;
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5;
}
.plan__list .ico { flex: none; width: 19px; height: 19px; margin-top: .2rem; color: var(--p-600); }
.plan .btn { margin-top: auto; }

/* ── 17. Blok zakladateľa ──────────────────────────────────────────────── */
.founder {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 820px) { .founder { grid-template-columns: auto 1fr; } }
.founder__avatar {
  display: grid; place-items: center;
  width: clamp(96px, 14vw, 148px); aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--grad-dark);
  border: 1px solid var(--line-dark);
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 750; letter-spacing: -.03em;
}
.founder__quote { margin: 0; }
.founder__quote p {
  font-size: var(--fs-t3); font-weight: 500; line-height: 1.45;
  color: #fff; letter-spacing: -.01em;
  text-wrap: pretty;
}
.founder__by { margin-top: 1.5rem; font-style: normal; }
.founder__by strong { display: block; color: #fff; font-size: var(--fs-t6); }
.founder__by span { color: var(--on-dark-3); font-size: var(--fs-sm); }

/* ── 18. Postup v krokoch ──────────────────────────────────────────────── */
.steps {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
  margin: 0; padding: 0; list-style: none;
  counter-reset: step;
}
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.steps li { margin: 0; position: relative; padding-top: 2.75rem; }
/* Linka spájajúca kroky — v predlohe drží rad pohromade. */
.steps li::before {
  content: ""; position: absolute; top: 19px; left: 0; right: -2rem; height: 1px;
  background: var(--line);
}
@media (min-width: 1080px) { .steps li:last-child::before { right: 0; } }
@media (max-width: 1079px) { .steps li::before { right: 0; } }
.step__n {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  background: var(--p-700); color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
}
.steps h3 { font-size: var(--fs-t6); margin-bottom: .45rem; }
.steps p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }

/* ── 19. Ohlasy klientov ───────────────────────────────────────────────── */
.quotes { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px)  { .quotes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .quotes { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.quotes li { margin: 0; }
.quote {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.quote__mark { color: var(--b-400); font-size: 2.5rem; line-height: 1; font-weight: 800; margin-bottom: .5rem; }
.quote p { margin: 0 0 1.5rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); }
.quote__by { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); font-style: normal; }
.quote__by strong { display: block; font-size: var(--fs-sm); }
.quote__by span { color: var(--muted); font-size: var(--fs-2xs); }
/* Zdroj tvrdenia — odlišuje prevzatú vetu od ohlasu na mieru. */
.quote__src { display: block; margin-top: .35rem; color: var(--muted); font-size: var(--fs-2xs); }
.quote__src a { color: var(--accent-ink); }

/* ── 20. Tím ───────────────────────────────────────────────────────────── */
.team {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.team li { margin: 0; }
.member { text-align: center; }
.member__photo {
  aspect-ratio: 1; margin-bottom: 1rem;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--n-100);
  display: grid; place-items: center;
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__initials {
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 750;
  color: var(--p-700); letter-spacing: -.03em;
}
.member h3 { font-size: var(--fs-t6); margin-bottom: .2rem; }
.member p { margin: 0; color: var(--muted); font-size: var(--fs-xs); }

/* ── 21. Kontakt ───────────────────────────────────────────────────────── */
.contact-grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr auto; } }

/* Na stránke kontaktu nesie tá istá mriežka formulár a mapu. Pri „auto"
   si mapa vzala, koľko chcela, a na formulár zostal úzky prúžok — tu
   preto pevné pomery a mapa hore, nie na stred. */
#napiste-nam .contact-grid { align-items: start; }
@media (min-width: 860px) {
  #napiste-nam .contact-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); }
}
.contact-lines { display: grid; gap: .85rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.contact-lines li { margin: 0; }
.contact-lines a, .contact-lines span {
  display: inline-flex; align-items: center; gap: .65rem;
  color: #fff; font-size: var(--fs-t5); font-weight: 600; text-decoration: none;
}
.contact-lines .ico { width: 20px; height: 20px; color: var(--p-400); flex: none; }
.contact-lines a:hover { color: var(--p-300); }

/* ── 22. Pätička ───────────────────────────────────────────────────────── */
/* Rozloženie prevzaté z pôvodného webu: nárok vedľa značky, potom stĺpce
   odkazov, značky, identifikácia podľa § 3a Obchodného zákonníka a spodná lišta. */
.footer {
  background: var(--n-950);
  color: var(--on-dark-3);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--line-dark);
}
.footer a { color: var(--on-dark-2); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__claim {
  display: grid; gap: 1.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 820px) {
  .footer__claim { grid-template-columns: auto 1fr; align-items: center; gap: 3.5rem; }
}
.footer__claim .logo { display: inline-flex; color: #fff; }
/* Značka stojí vedľa trojriadkového nároku sádzaného na 30–36 px, takže
   38 px pôsobilo pri ňom drobno. */
.footer__claim .logo-svg { height: clamp(56px, 6vw, 76px); width: auto; }
.footer__claim-text {
  margin: 0;
  font-size: var(--fs-t2); font-weight: 700; line-height: 1.2;
  letter-spacing: var(--ls-tight); color: #fff;
}
.footer__claim-dim { color: var(--n-500); }

.footer__cols {
  display: grid; gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__h {
  margin: 0 0 1rem;
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .3px; text-transform: uppercase;
  color: var(--p-400);
}
.footer__h--gap { margin-top: 2rem; }
.footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.footer__col li { margin: 0; }
.footer__addr { color: var(--on-dark-3); font-style: normal; line-height: 1.6; }

.footer__marks {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0; padding: clamp(2rem, 4vw, 2.5rem) 0 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
  /* Spodná linka tu bola kvôli bloku s identifikáciou, ktorý je teraz na
     stránke kontaktu. Bez neho by s linkou spodnej lišty tvorila prázdny pás. */
}
.footer__marks li { display: flex; gap: .7rem; margin: 0; font-size: var(--fs-2xs); line-height: 1.5; }
.footer__marks .ico { flex: none; width: 19px; height: 19px; margin-top: .1rem; color: var(--p-400); }
.footer__marks strong { display: block; color: #fff; font-weight: 600; }

.footer__id {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 0; padding: clamp(1.75rem, 3vw, 2.25rem) 0 0;
}
.footer__id dt {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--n-400);
  margin-bottom: .25rem;
}
.footer__id dd { margin: 0; color: var(--on-dark-2); font-size: var(--fs-xs); }

.footer__vat {
  margin: 1.5rem 0 0;
  color: var(--n-400); font-size: var(--fs-2xs); line-height: 1.6;
  max-width: 80ch;
}

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
}
.footer__copy { margin: 0; color: var(--n-400); font-size: var(--fs-2xs); }
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer__legal a { font-size: var(--fs-2xs); }

/* ── 23. Pohyb ─────────────────────────────────────────────────────────── */
/* Jemný nábeh pri vstupe do výrezu — pridáva ho site.js, aby stránka
   fungovala aj bez JavaScriptu. */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@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;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── 24. Tlač ──────────────────────────────────────────────────────────── */
@media print {
  .header, .mobile-nav, .btn, .hero::after, .section--dark::after { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .section--dark, .hero, .footer { background: #fff !important; color: #000 !important; }
  .section--dark h2, .hero h1, .grad { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VNÚTORNÉ STRÁNKY
   Rovnaký dizajnový jazyk ako domovská: tmavé pásy so sieťovou kresbou,
   drobné návestia verzálkami, gradient v druhej polovici nadpisu a karty
   s jemným orámovaním. Názvy tried zostávajú z pôvodných šablón, aby sa
   nemuseli prepisovať — mení sa len ich vzhľad.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 25. Sekcie — pôvodné názvy ako aliasy ─────────────────────────────── */
.sec { padding-block: var(--sec-y); position: relative; }
.sec--tight  { padding-block: clamp(3rem, 5vw, 4.5rem); }
.sec--paper2 { background: var(--bg-soft); }

.sec--ink {
  background: var(--bg-dark); color: var(--on-dark-2);
  position: relative; overflow: hidden; isolation: isolate;
}
.sec--ink h1, .sec--ink h2, .sec--ink h3, .sec--ink h4, .sec--ink strong { color: var(--on-dark); }
.sec--ink .lead { color: var(--on-dark-2); }
.sec--ink::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(55,150,199,.20), transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(31,94,128,.20), transparent 70%);
}
.sec--ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url(../img/art/constellation.svg) center / cover no-repeat;
  opacity: .45; pointer-events: none;
}

.sec-head--split {
  display: grid; gap: 1.5rem 3rem; max-width: none;
  align-items: end;
}
@media (min-width: 900px) { .sec-head--split { grid-template-columns: 1.1fr .9fr; } }

/* ── 26. Mriežky a rozdelenie ──────────────────────────────────────────── */
.grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

/* Hlavný stĺpec plus bočný panel. */
.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0,1fr) 340px; } }

/* ── 27. Hlavička vnútornej stránky ────────────────────────────────────── */
.page-hero {
  position: relative;
  /* To isté ako pri .hero — prekryv s priehľadnou lištou. */
  margin-top: calc(var(--header-h) * -1);
  padding-block: calc(clamp(2.75rem, 6vw, 5rem) + var(--header-h)) clamp(3rem, 6vw, 5rem);
  background: var(--n-950);
  color: var(--on-dark-2);
  overflow: hidden; isolation: isolate;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    url(../img/art/constellation.svg) center / cover no-repeat,
    radial-gradient(ellipse 70% 70% at 20% 0%, rgba(55,150,199,.26), transparent 70%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(31,94,128,.30), transparent 70%),
    linear-gradient(180deg, #071426 0%, #0a1b30 100%);
}
.page-hero__inner { max-width: 74ch; }
.page-hero h1 {
  font-size: var(--fs-d3); font-weight: 780; color: #fff;
  margin: 0 0 1rem;
}
.page-hero .lead { color: var(--on-dark-2); }
.page-hero .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.32); }
.page-hero .btn--ghost:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.08); }

/* Varianta s obrázkom vedľa textu. */
.page-hero__split { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (min-width: 940px) { .page-hero__split { grid-template-columns: 1.05fr .95fr; } }
.page-hero__media img, .page-hero__media picture {
  border-radius: var(--r-lg); overflow: hidden; width: 100%;
}

/* ── 28. Drobčeková navigácia ──────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.5rem; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
}
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--on-dark-3); }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--on-dark-3); }
.crumbs__sep { color: var(--n-600); }

/* Na svetlom podklade (stránky bez tmavej hlavičky). */
.sec .crumbs li { color: var(--muted); }
.sec .crumbs a { color: var(--accent-ink); }
.sec .crumbs [aria-current="page"] { color: var(--muted); }

/* ── 29. Zoznamy v obsahu ──────────────────────────────────────────────── */
/* Odrážka so značkou — rovnaká reč ako v cenníku a v „Prečo Esentra". */
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.ticks li {
  position: relative; margin: 0; padding-left: 2rem;
  color: var(--ink-2); line-height: 1.6;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--p-050); border: 1px solid var(--p-200);
}
.ticks li::after {
  content: ""; position: absolute; left: 5px; top: .72em;
  width: 8px; height: 4px;
  border-left: 2px solid var(--p-700);
  border-bottom: 2px solid var(--p-700);
  transform: rotate(-45deg);
}
.ticks--sm li { font-size: var(--fs-sm); padding-left: 1.7rem; }
.sec--ink .ticks li, .section--dark .ticks li { color: var(--on-dark-2); }
.sec--ink .ticks li::before, .section--dark .ticks li::before {
  background: rgba(55,150,199,.16); border-color: rgba(127,194,227,.35);
}
.sec--ink .ticks li::after, .section--dark .ticks li::after { border-color: var(--p-400); }

/* Zoznam výstupov: názov a popis, oddelené vlasovou linkou. */
.def-list { margin: 0; display: grid; gap: 0; }
.def-list > div { padding: 1.15rem 0; border-top: 1px solid var(--line); }
.def-list > div:last-child { border-bottom: 1px solid var(--line); }
.def-list dt { font-weight: 650; color: var(--ink); margin-bottom: .25rem; }
.def-list dd { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }

/* Dvojriadkový zoznam. Používa sa v dvoch podobách: ako <ul> s <li>
   v bočných paneloch a ako <div> s odkazmi v obsahu — preto sa štýluje
   priamy potomok, nech je to ktorýkoľvek z nich. */
.mini-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.mini-list > li, .mini-list > a {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .85rem;
  margin: 0;
}
.mini-list > a {
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mini-list > a:hover { border-color: var(--p-300); transform: translateX(2px); color: inherit; }
.mini-list .ico { flex: none; width: 17px; height: 17px; margin-top: .28em; color: var(--accent); }
.mini-list__t { display: block; font-weight: 650; font-size: var(--fs-sm); color: var(--ink); }
.mini-list__d { display: block; color: var(--muted); font-size: var(--fs-2xs); line-height: 1.5; }

/* Zoznam problémov — rovnaká kostra, bronzová značka. */
.pain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.pain-list li {
  position: relative; margin: 0; padding-left: 1.6rem;
  color: var(--ink-2); line-height: 1.6;
}
.pain-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--b-500);
}
.sec--ink .pain-list li, .section--dark .pain-list li { color: var(--on-dark-2); }

/* ── 30. Postup ako časová os ──────────────────────────────────────────── */
.timeline { position: relative; display: grid; gap: 2rem; padding-left: 2.25rem; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: .5rem; bottom: .5rem;
  width: 1px; background: var(--line);
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: ""; position: absolute; left: -2.25rem; top: .35em;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; border: 2px solid var(--p-600);
}
.timeline__t { font-size: var(--fs-t6); margin-bottom: .35rem; }
.timeline p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.sec--paper2 .timeline__item::before { background: var(--bg-soft); }

/* ── 31. Bočný panel ───────────────────────────────────────────────────── */
.aside-card {
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 960px) {
  .aside-card { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.aside-card h3 { font-size: var(--fs-t6); margin-bottom: .5rem; }
.aside-card h4 { font-size: var(--fs-xs); font-weight: 650; }
.aside-card p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.aside-card hr { border: 0; border-top: 1px solid var(--line-soft); margin: 1.5rem 0; }
.aside-photo { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.25rem; }

/* ── 32. Odkaz so šípkou ───────────────────────────────────────────────── */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--accent-ink); font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none;
  transition: gap var(--dur) var(--ease);
}
.arrow-link:hover { gap: .75em; }
.arrow-link .ico { width: 1em; height: 1em; }
.sec--ink .arrow-link, .section--dark .arrow-link { color: var(--p-400); }

/* ── 33. Doplnky ku kartám ─────────────────────────────────────────────── */
/* Plochá karta nie je odkaz, teda sa pri prejdení myšou ani nenadvihuje. */
.card--flat { background: #fff; }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--line); }
.sec--paper2 .card { background: #fff; }
.card__foot {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: auto; padding-top: 1.25rem;
  color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 600;
  transition: gap var(--dur) var(--ease);
}
.card:hover .card__foot { gap: .75em; }
.card__foot .ico { width: 1em; height: 1em; }

/* ── 34. Časté otázky ──────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: var(--fs-t6); font-weight: 650; color: var(--ink);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
/* Znamienko + / − nakreslené dvoma linkami — bez ikony aj bez písma. */
.faq__sign { position: relative; flex: none; width: 20px; height: 20px; margin-top: .2em; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--accent); border-radius: 1px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__sign::before { width: 14px; height: 2px; transform: translate(-50%,-50%); }
.faq__sign::after  { width: 2px; height: 14px; transform: translate(-50%,-50%); }
.faq details[open] .faq__sign::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__a {
  padding: 0 0 1.5rem; max-width: 76ch;
  color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7;
}

/* ── 35. Záverečný CTA blok ────────────────────────────────────────────── */
.cta-band {
  padding: clamp(2rem, 4vw, 3.25rem);
  border-radius: var(--r-xl);
  background: var(--n-900);
  color: var(--on-dark-2);
  position: relative; overflow: hidden; isolation: isolate;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 70% 80% at 10% 0%, rgba(55,150,199,.28), transparent 70%),
    radial-gradient(ellipse 60% 70% at 100% 100%, rgba(31,94,128,.32), transparent 70%);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url(../img/art/constellation.svg) center / cover no-repeat;
  opacity: .4; pointer-events: none;
}
.cta-band h2 { color: #fff; font-size: var(--fs-t1); }
.cta-band .kicker { color: var(--p-400); }
.cta-band .lead { color: var(--on-dark-2); }
/* Duchové tlačidlo dedí tmavý text — v každom tmavom okolí ho treba obrátiť.
   Zoznam je zámerne na jednom mieste, aby sa na žiadne okolie nezabudlo. */
.cta-band .btn--ghost,
.sec--ink .btn--ghost,
.section--dark .btn--ghost,
.price-panel .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.32); }
.cta-band .btn--ghost:hover,
.sec--ink .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.price-panel .btn--ghost:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.08); }
.cta-band__inner { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 940px) {
  .cta-band__inner { grid-template-columns: 1.2fr .8fr; align-items: center; }
}
.cta-band__side {
  padding: 1.5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
}
/* Riadok „názov — hodnota". Základ je pre svetlý podklad; tmavé varianty
   si farby prepíšu, nie naopak. */
.price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.price-row:last-child { border-bottom: 0; }
.price-row span:first-child { color: var(--muted); }
.price-row span:last-child { color: var(--ink); font-weight: 600; text-align: right; }

.cta-band .price-row, .section--dark .price-row,
.sec--ink .price-row, .price-panel .price-row {
  border-bottom-color: var(--line-dark);
}
.cta-band .price-row span:first-child,
.section--dark .price-row span:first-child,
.sec--ink .price-row span:first-child,
.price-panel .price-row span:first-child { color: var(--on-dark-3); }
.cta-band .price-row span:last-child,
.section--dark .price-row span:last-child,
.sec--ink .price-row span:last-child,
.price-panel .price-row span:last-child { color: #fff; }

/* ── 36. Drobné pomocné triedy ─────────────────────────────────────────── */
.muted { color: var(--muted); }
.sec--ink .muted, .section--dark .muted, .page-hero .muted { color: var(--on-dark-3); }
.small { font-size: var(--fs-sm); }
.mono  { font-family: var(--font-mono); font-size: var(--fs-xs); }
.hint  { color: var(--muted); font-size: var(--fs-2xs); line-height: 1.5; }

.note {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--b-500);
  border-radius: var(--r-sm);
  background: var(--b-100);
  color: var(--ink-2);
  font-size: var(--fs-sm); line-height: 1.6;
}
.note--ok  { border-left-color: #2F7D51; background: #EFF7F2; }
.note--err { border-left-color: #B3261E; background: #FCF0EF; }

.pill-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.pill {
  display: inline-flex; align-items: center; gap: .35em;
  margin: 0; padding: .3rem .75rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink-2); font-size: var(--fs-2xs); white-space: nowrap;
}
.sec--ink .pill, .section--dark .pill, .page-hero .pill {
  background: rgba(255,255,255,.05); border-color: var(--line-dark); color: var(--on-dark-2);
}

.photo { border-radius: var(--r-lg); overflow: hidden; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Súvislý text právnych a obsahových stránok. */
.prose { max-width: 76ch; }
.prose h2 { font-size: var(--fs-t2); margin: 2.75rem 0 .85rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-t5); margin: 2rem 0 .6rem; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: .55em; }
.prose a { color: var(--accent-ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: var(--fs-sm); }
.prose th, .prose td { padding: .8rem 1rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--bg-soft); font-weight: 650; }

/* ── 37. Ručne kreslené podčiarknutie ──────────────────────────────────── */
/* Signatúrny prvok z pôvodnej identity. Ťah sa dokresľuje len vtedy, keď
   beží JavaScript — inak je rovno hotový, aby text nikdy nezostal holý. */
.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark-svg {
  position: absolute; left: -1.5%; bottom: -.16em;
  width: 103%; height: .38em;
  overflow: visible; pointer-events: none;
}
.mark-svg path {
  fill: none; stroke: var(--p-500);
  stroke-width: 9; stroke-linecap: round;
}
.js .mark-svg path { stroke-dasharray: 340; stroke-dashoffset: 340; }
.js .mark.is-revealed .mark-svg path {
  transition: stroke-dashoffset .9s var(--ease) .15s;
  stroke-dashoffset: 0;
}
.section--dark .mark-svg path, .sec--ink .mark-svg path,
.page-hero .mark-svg path { stroke: var(--p-400); }

/* ── 38. Nábeh prvkov ──────────────────────────────────────────────────── */
/* Rovnaké správanie ako [data-reveal]; trieda .reveal je z pôvodných šablón. */
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .mark-svg path { stroke-dashoffset: 0; }
}

/* ── 39. Pás technológií ───────────────────────────────────────────────── */
/* Mriežka kariet oddelených vlasovou linkou — jeden pixel medzery na
   podfarbenom podklade urobí linku bez toho, aby sa rámy zdvojovali. */
.tech-groups {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tech-group { display: flex; flex-direction: column; background: #fff; padding: 1.6rem; }
.tech-group__t {
  margin: 0 0 1.25rem;
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .3px; text-transform: uppercase;
  color: var(--accent-ink);
}
/* Keď je v páse jediná skupina, roztiahne sa na celú šírku a riadky textu
   sú potom neúmerne dlhé. Zoznam sa preto sám rozdelí do stĺpcov. */
.tech-list {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; gap: 1.35rem 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.tech-item { display: flex; align-items: flex-start; gap: 1rem; margin: 0; }

/* Štvorček so značkou alebo logom výrobcu. */
.tech-item__badge {
  display: grid; place-items: center; flex: none;
  width: 64px; height: 64px;
  border-radius: var(--r-sm);
  background: var(--n-050);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tech-item__mark {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600;
  color: var(--accent-ink); letter-spacing: -.02em;
}
.tech-logo { height: 40px; width: auto; max-width: 48px; fill: var(--n-700); color: var(--n-700); }
/* align-content: start je tu nutnosť, nie kozmetika. Grid bez neho roztiahne
   riadky do celej výšky bunky a medzi názvom, použitím a popisom vzniknú
   rôzne veľké diery — pri jednoriadkovom názve aj 20 px navyše. */
.tech-item__body { display: grid; gap: .15rem; min-width: 0; align-content: start; }
.tech-item__n { font-weight: 650; font-size: var(--fs-t6); color: var(--ink); letter-spacing: -.015em; }
/* Výrobca patrí hneď pod názov — „Claude / Anthropic" sa číta ako jedna
   informácia, kým na konci riadku s použitím zaniká. */
.tech-item__by {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--muted); letter-spacing: .02em;
}
.tech-item__u { font-size: var(--fs-xs); color: var(--accent-ink); line-height: 1.45; font-weight: 550; }
.tech-item__d { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; margin-top: .35rem; }
.tech-group__note {
  margin: auto 0 0; padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-2xs); color: var(--muted); line-height: 1.5;
}

/* ── 40. Karta odvetvia ────────────────────────────────────────────────── */
.ind-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.ind-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.ind-card:hover {
  border-color: var(--p-300); box-shadow: var(--shadow);
  transform: translateY(-3px); color: inherit;
}
.ind-card__media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--n-100); }
.ind-card__media img, .ind-card__img { width: 100%; height: 100%; object-fit: cover; }
/* Ikona sedí na spodnej hrane fotky, nech je textu pod ňou koľkokoľvek. */
.ind-card__ico {
  position: absolute; right: 1.25rem; bottom: 0;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  transform: translateY(50%);
  border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--line);
  color: var(--accent-ink);
}
.ind-card__ico .ico { width: 25px; height: 25px; }
.ind-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem; }
.ind-card__body h2 { font-size: var(--fs-t4); margin: .5rem 0 .5rem; }
.ind-card__body > p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.ind-card__body .ticks { margin: .5rem 0 1.25rem; }
.ind-card__body .arrow-link { margin-top: auto; }

/* ── 41. Karta produktu ────────────────────────────────────────────────── */
.product-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.product-card:hover {
  border-color: var(--p-300); box-shadow: var(--shadow);
  transform: translateY(-3px); color: inherit;
}
/* Farebná dlaždica s názvom — každý produkt má vlastnú farbu v --pc. */
.product-card__visual {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--pc, var(--p-700)) 0%, var(--n-950) 130%);
}
.product-card__mark {
  color: #fff; font-size: var(--fs-t3); font-weight: 780;
  letter-spacing: -.03em; text-align: center;
}
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem; }
.product-card__cat {
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .3px; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: .6rem;
}
.product-card__body h3 { font-size: var(--fs-t5); margin-bottom: .25rem; }
.product-card__tag { color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 600; margin-bottom: .75rem; }
.product-card__body > p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.product-card .pill-row { margin-top: auto; padding-top: 1.25rem; }

/* ── 42. Karta referencie ──────────────────────────────────────────────── */
.ref-card {
  display: flex; flex-direction: column;
  padding: 0 1.75rem 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.ref-card__visual {
  position: relative;
  margin: 0 -1.75rem 1.5rem;
  aspect-ratio: 16 / 10;
  background: var(--rc, var(--n-800));
  overflow: hidden;
}
.ref-card__visual img, .ref-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Snímka webu dostane lištu prehliadača, aby bolo jasné, že ide o web. */
.ref-card__visual--shot { padding-top: 30px; background: var(--n-900); }
.browser-bar {
  position: absolute; inset: 0 0 auto; height: 30px;
  display: flex; align-items: center; gap: .6rem;
  padding: 0 .8rem;
  background: var(--n-800);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.browser-bar__dots { display: flex; gap: .3rem; }
.browser-bar__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.browser-bar__url {
  font-family: var(--font-mono); font-size: 11px; color: var(--n-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Náhrada, keď snímku nemáme: meno klienta a jedno číslo. */
.ref-card__plate {
  position: absolute; inset: 0;
  display: grid; align-content: center; gap: .5rem;
  padding: 1.75rem;
}
.ref-card__plate-name { color: #fff; font-size: var(--fs-t4); font-weight: 750; letter-spacing: -.02em; }
.ref-card__plate-num { color: rgba(255,255,255,.72); font-size: var(--fs-sm); }
.ref-card__plate-num em { font-style: normal; }
.ref-card__stamp {
  position: absolute; right: 1rem; bottom: 1rem;
  padding: .2rem .6rem; border-radius: var(--r-pill);
  background: rgba(0,0,0,.35);
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.85);
}
.ref-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ref-card__flag {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  padding: .15rem .5rem;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--muted);
}
.ref-card h3 { font-size: var(--fs-t4); margin: .5rem 0 .3rem; }
.ref-card__domain {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-bottom: 1.15rem;
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--accent-ink);
}
.ref-card__platform { color: var(--muted); }
/* Veta, ktorou sa klient prezentuje na svojom webe — nie náš text. */
.ref-card__highlight {
  margin-bottom: 1.15rem; padding-left: 1rem;
  border-left: 3px solid var(--b-400);
  color: var(--ink); font-size: var(--fs-sm); line-height: 1.6; font-weight: 500;
}
.ref-card p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.65; }
.ref-card__story { color: var(--muted); }
.ref-card .price-rows { margin-top: auto; }
.ref-card .price-row { border-bottom-color: var(--line-soft); }
.ref-card .price-row span:first-child { color: var(--muted); }
.ref-card .price-row span:last-child { color: var(--ink); }

/* ── 43. Mestá ─────────────────────────────────────────────────────────── */
.city-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.city-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.city-card:hover { border-color: var(--p-300); transform: translateY(-2px); color: inherit; }
.city-card__n { display: block; font-weight: 650; font-size: var(--fs-sm); }
.city-card__r { display: block; color: var(--muted); font-size: var(--fs-2xs); }
.city-card .ico { width: 18px; height: 18px; color: var(--accent); flex: none; }
.sec--ink .city-card, .section--dark .city-card {
  background: rgba(255,255,255,.05); border-color: var(--line-dark); color: var(--on-dark-2);
}
.sec--ink .city-card__n, .section--dark .city-card__n { color: #fff; }
.sec--ink .city-card__r, .section--dark .city-card__r { color: var(--on-dark-3); }

/* ── 44. Pás čísel ─────────────────────────────────────────────────────── */
.factbar {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.factbar__i { margin: 0; }
.factbar__i strong {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1;
  letter-spacing: var(--ls-tight);
  background: var(--grad-head-d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec--ink .factbar__i strong, .section--dark .factbar__i strong {
  background: var(--grad-head); -webkit-background-clip: text; background-clip: text;
}
.factbar__i span { display: block; margin-top: .45rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }
.sec--ink .factbar__i span, .section--dark .factbar__i span { color: var(--on-dark-3); }

/* ── 45. Číslované kroky v bočnom paneli ───────────────────────────────── */
.steps-mini { margin: 0; padding: 0; list-style: none; counter-reset: sm; display: grid; gap: .9rem; }
.steps-mini li {
  position: relative; margin: 0; padding-left: 2.1rem;
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.5;
  counter-increment: sm;
}
.steps-mini li::before {
  content: counter(sm);
  position: absolute; left: 0; top: .05em;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--p-050); border: 1px solid var(--p-200);
  color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
.steps-mini strong { color: var(--ink); font-weight: 650; }

/* ── 46. Formuláre ─────────────────────────────────────────────────────── */
.field { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.lbl {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.lbl .muted { font-weight: 400; }

.input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .95rem;
  background: #fff;
  border: 1px solid var(--n-300);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--n-400); }
.input:hover { border-color: var(--n-400); }
.input:focus {
  outline: none;
  border-color: var(--p-600);
  box-shadow: 0 0 0 3px rgba(55,150,199,.22);
}
.input[aria-invalid="true"] { border-color: #B3261E; }
.textarea { min-height: 140px; resize: vertical; }

.err { color: #B3261E; font-size: var(--fs-2xs); }

/* Súhlas so spracovaním — zaškrtávacie políčko so sprievodným textom. */
.consent {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: .5rem 0 1.25rem;
  color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin: .15rem 0 0;
  accent-color: var(--p-700); cursor: pointer;
}

/* Pasca na roboty — musí zostať v toku dokumentu, len mimo dohľadu. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* Poznámky s ikonou vedľa textu. */
.note { display: flex; gap: .7rem; align-items: flex-start; }
.note .ico { flex: none; width: 19px; height: 19px; margin-top: .18em; }
.note--ok .ico { color: #2F7D51; }
.note--err .ico { color: #B3261E; }

/* ── 47. Kontakt ───────────────────────────────────────────────────────── */
.contact-form-wrap {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.contact-form-wrap h2 { font-size: var(--fs-t3); }
.contact-form-wrap .lead { font-size: var(--fs-sm); margin-bottom: 1.75rem; }
.contact-form .grid--2 { gap: 0 1rem; }

.contact-map {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--n-100);
}
.contact-map__link { display: block; position: relative; }
.contact-map__img, .contact-map img {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; display: block;
}
.contact-map__pin {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: .4rem .8rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.contact-map__body {
  padding: 1.5rem;
  border-top: 1px solid var(--line);
  background: #fff;
}
.contact-map__links { display: grid; gap: .5rem; margin-top: 1rem; }
.contact-map__link { text-decoration: none; }
.contact-map__pin {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 600;
}

/* ── 48. Odkaz na obchody s aplikáciami ────────────────────────────────── */
/* Odznak stojí v tmavej hlavičke stránky produktu, preto svetlé farby. */
.store-soon {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .55rem 1rem;
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: var(--r-pill);
  color: var(--on-dark-2); font-size: var(--fs-2xs);
}
.store-soon strong { display: block; color: #fff; font-weight: 650; }
.store-soon code {
  display: block;
  font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-3);
}
.store-soon__logo, .btn__logo { height: 18px; width: auto; }
/* Logo Google Play má vlastnú zelenú (#01875F), ktorá sa na modrom tlačidle
   stráca. Filter ho zrovná do bielej — CSS fill sa cez <use> na symbol
   s vlastným atribútom fill nedostane. */
.btn__logo { height: 17px; filter: brightness(0) invert(1); }
.store-soon__logo { filter: brightness(0) invert(1); opacity: .9; }

/* Ak by odznak niekedy pristál na svetlom podklade, nech je stále čitateľný. */
.sec .store-soon, .section--soft .store-soon {
  border-color: var(--line); color: var(--n-600);
}
.sec .store-soon strong, .section--soft .store-soon strong { color: var(--ink); }
.sec .store-soon code, .section--soft .store-soon code { color: var(--muted); }

/* ── 49. Snímky aplikácií ──────────────────────────────────────────────── */
.shot {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line);
  background: var(--n-100);
}
.shot img { width: 100%; height: auto; display: block; }
.shots--flow {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* ── 50. Konfigurátor dopytu ───────────────────────────────────────────── */
.quote-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 1000px) { .quote-layout { grid-template-columns: minmax(0,1fr) 380px; } }

/* Lišta krokov. */
.steps-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 2.5rem; padding: 0; list-style: none;
}
.steps-bar__item {
  margin: 0; padding: .45rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fff;
  color: var(--muted);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  white-space: nowrap;
}
.steps-bar__item.is-active {
  background: var(--p-700); border-color: var(--p-700); color: #fff; font-weight: 600;
}

/* Kroky. Skrývame ich len pri zapnutom JavaScripte — bez neho musí byť
   formulár celý vidieť, aby sa dal odoslať naraz. */
.js .qstep { display: none; }
.js .qstep.is-active { display: block; }
.qstep h2 { font-size: var(--fs-t2); }
.qstep > .lead { margin-bottom: 2rem; }

/* Voľby ako klikateľné karty. */
.opt-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.opt-grid--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt label {
  display: flex; align-items: flex-start; gap: .8rem;
  height: 100%;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--n-300);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.opt label:hover { border-color: var(--p-400); }
.opt input:checked + label {
  border-color: var(--p-600);
  background: var(--p-050);
  box-shadow: 0 0 0 1px var(--p-600);
}
.opt input:focus-visible + label { outline: 3px solid var(--p-500); outline-offset: 2px; }

/* Prepínač / zaškrtávacie políčko nakreslené, aby sedelo s ostatkom. */
.opt__box {
  flex: none; position: relative;
  width: 20px; height: 20px; margin-top: .15rem;
  border: 1px solid var(--n-400);
  border-radius: 4px;
  background: #fff;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.opt--radio .opt__box { border-radius: 50%; }
.opt input:checked + label .opt__box { border-color: var(--p-700); background: var(--p-700); }
.opt input:checked + label .opt__box::after {
  content: ""; position: absolute; left: 5px; top: 4px;
  width: 7px; height: 11px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}
.opt--radio input:checked + label .opt__box::after {
  left: 50%; top: 50%; width: 8px; height: 8px;
  border: 0; border-radius: 50%; background: #fff;
  transform: translate(-50%,-50%);
}
.opt__t { display: block; font-weight: 650; font-size: var(--fs-sm); color: var(--ink); }
/* n-600, nie n-500: na podfarbenej karte vybranej voľby by n-500 dalo 4,4:1. */
.opt__h { display: block; color: var(--n-600); font-size: var(--fs-2xs); line-height: 1.45; }
.opt__p { display: block; color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 600; margin-top: .2rem; }
.opt--inline label { align-items: center; }

/* Popisok voľby má dva tvary: v prvom kroku je názov s vysvetlivkou vnorený
   v obale, v druhom stojí názov a cena vedľa seba priamo v popisku. */
.opt label > span:not([class]) { flex: 1; min-width: 0; }
.opt label > .opt__t { flex: 1; min-width: 0; }
.opt label > .opt__p {
  margin: 0 0 0 auto; align-self: flex-start;
  white-space: nowrap; font-family: var(--font-mono);
}

/* Navigácia medzi krokmi. */
.qnav {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.btn--sm { min-height: 38px; padding: .4rem 1rem; font-size: var(--fs-2xs); }

/* ── 51. Panel s cenou ─────────────────────────────────────────────────── */
.price-panel {
  padding: 1.6rem;
  background: var(--n-900);
  color: var(--on-dark-2);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden; isolation: isolate;
}
.price-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(55,150,199,.26), transparent 72%);
}
@media (min-width: 1000px) { .price-panel { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.price-panel__label {
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .3px; text-transform: uppercase;
  color: var(--p-400);
}
.price-panel__value {
  margin: .5rem 0 .35rem;
  font-size: clamp(1.5rem, 2.5vw, 1.9rem); font-weight: 800; line-height: 1.15;
  letter-spacing: var(--ls-tight); color: #fff;
  text-wrap: nowrap;
}
.price-panel__note { color: var(--on-dark-3); font-size: var(--fs-2xs); line-height: 1.5; }

/* Ukazovateľ úplnosti zadania. */
.price-panel__meter {
  height: 5px; margin: 1.15rem 0 .5rem;
  background: rgba(255,255,255,.12);
  border-radius: var(--r-pill); overflow: hidden;
}
.price-panel__meter i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--p-600), var(--p-400));
  border-radius: inherit;
  transition: width .5s var(--ease);
}
.price-panel .price-rows { margin: 1.25rem 0; }
.price-panel__deposit {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; margin-bottom: 1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
}
.price-panel__deposit strong { color: #fff; font-size: var(--fs-sm); }
.price-panel__disclaimer {
  color: var(--n-400); font-size: 11px; line-height: 1.55;
  padding-top: 1rem; border-top: 1px solid var(--line-dark);
}

/* Cena zamknutá, kým nie sú vyplnené kontaktné údaje. */
.price-lock { position: relative; min-height: 7.5rem; }
.price-lock__veil {
  position: absolute; inset: -.25rem;
  display: grid; align-content: center; justify-items: start; gap: .55rem;
  padding: .5rem;
  background: rgba(15,23,42,.86);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs); color: var(--on-dark-2);
}
@supports (backdrop-filter: blur(1px)) {
  .price-lock__veil { backdrop-filter: blur(14px); background: rgba(15,23,42,.55); }
}
/* Rozmazanie samotného čísla, nie len prekrytie: cez priehľadnú vrstvu sa
   suma dala prečítať a backdrop-filter navyše nemá každý prehliadač. */
.price-lock.is-locked .price-panel__value {
  filter: blur(11px);
  user-select: none;
  pointer-events: none;
}
.price-lock__veil .ico { width: 18px; height: 18px; color: var(--b-400); }
.price-lock__veil .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.35); }
.price-lock.is-unlocked .price-lock__veil { display: none; }

/* ── 52. Zhrnutie a zálohová platba ────────────────────────────────────── */
.result-card {
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.result-card h3 { font-size: var(--fs-t5); margin-bottom: .35rem; }

.deposit-box {
  padding: 1.35rem;
  background: var(--b-100);
  border: 1px solid var(--b-300);
  border-radius: var(--r);
  margin-bottom: 1.5rem;
}
.deposit-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.deposit-box__amount {
  font-size: var(--fs-t3); font-weight: 800; letter-spacing: var(--ls-tight);
  color: var(--b-800);
}

.pay { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 760px) { .pay { grid-template-columns: 240px minmax(0,1fr); } }
.pay__qr {
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.pay__qr svg, .pay__qr img { width: 100%; height: auto; display: block; }
.pay__qr .ico { width: 56px; height: 56px; }
.pay__qr-note { margin: .75rem 0 0; color: var(--muted); font-size: var(--fs-2xs); line-height: 1.5; text-align: center; }

.pay-list { margin: 0; display: grid; gap: 0; }
.pay-list > div {
  display: grid; gap: .15rem;
  padding: .8rem 0;
  border-top: 1px solid var(--line-soft);
}
.pay-list > div:last-child { border-bottom: 1px solid var(--line-soft); }
.pay-list dt {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.pay-list dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); word-break: break-word; }
.pay-list dd strong { font-size: var(--fs-t5); }

/* Popis metriky v referencii — ikona má rovnakú farbu ako text, aby do karty
   nevnášala ďalšiu farbu. */
.metric-label { display: inline-flex; align-items: center; gap: .5em; }
.metric-label .ico { width: 16px; height: 16px; opacity: .75; }


/* Logo klienta pri adrese jeho webu. Výška je zjednotená, šírku si obrázok
   drží sám — logá sú od kvadratických po široké nápisy. */
.client-logo {
  height: 24px; width: auto; max-width: 120px;
  display: inline-block; vertical-align: middle;
  object-fit: contain;
}
.ref-card__domain { align-items: center; }
.ref-card__domain picture { display: inline-flex; }

/* Logá technológií v hero. Každé má vlastnú firemnú farbu, ktorá by na tmavom
   podklade pôsobila ako cirkus — filter ich zrovná do bielej. Funguje to
   rovnako na vloženom SVG aj na rastrovom logu. */
/* Dva riadky s vlastným popiskom. Každé logo má výšku podľa svojej kresby
   (premenná --lh z obsahu), aby široký nápis nepôsobil väčšie než štvorcová
   ikona. Spoločný rámček drží značky na jednej optickej osi. */
.hero__tech-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem 1rem;
  margin-top: 1.5rem;
}
.hero__tech-label {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--n-500);
  flex: 0 0 100%; text-align: center;
}
.hero__tech-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; flex: none;
}
.hero__tech-mark .tech-logo {
  height: var(--lh, 20px); width: auto; max-width: 26px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.hero__tech li span { gap: .55rem; }

/* Doplňujúca poznámka na spodku karty — oddelená linkou, aby bolo jasné,
   že je to podmienka, nie súčasť kontaktného údaja. */
.card__note {
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-2);
}

/* ── Poradňa ───────────────────────────────────────────────────────────── */
.guide__meta {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: 1.5rem;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--on-dark-3);
}
.guide__meta .ico { width: 15px; height: 15px; }

.guide h2 { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.guide .ticks { margin: 1.25rem 0; }
.guide .note { margin: 1.5rem 0; }
.guide .faq { margin-top: 1.5rem; }

/* Široká tabuľka sa posúva vo vlastnom ráme, stránka sa nerozťahuje. */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.table-wrap table { margin: 0; min-width: 30rem; }
.table-wrap .mono { font-family: var(--font-mono); font-size: var(--fs-xs); white-space: nowrap; }

/* Karta textu v prehľade — nadpis je h2, nie h3. */
.cards .card h2 { font-size: var(--fs-t6); margin-bottom: .5rem; }

/* ── Miestne referencie na mestskej stránke ────────────────────────────── */
.local-refs { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .85rem; }
.local-refs li {
  display: flex; align-items: center; gap: 1rem; margin: 0;
  padding: 1.15rem 1.35rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.local-refs__logo {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px;
  border-radius: var(--r-xs);
  background: var(--n-050); border: 1px solid var(--line-soft);
  overflow: hidden;
}
.local-refs__logo .client-logo { height: 30px; max-width: 44px; }
.local-refs__body { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.local-refs__where {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted);
}
.local-refs__where .ico { width: 14px; height: 14px; color: var(--accent); }
.local-refs__what { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
@media (max-width: 599px) {
  .local-refs li { flex-wrap: wrap; }
  .local-refs .arrow-link { flex-basis: 100%; }
}

/* Obchodné meno v adrese pätičky — má byť čitateľnejšie než zvyšok riadku. */
.footer__addr strong { color: var(--on-dark-2); font-weight: 650; }