/* ============================================================
   dataid — landing page
   "Precision instrument" — warm near-black, fine technical grid,
   one confident grotesk, monospace metadata, single amber accent.
   ============================================================ */

/* Tém-závislé farby registrujeme ako <color>, aby sa dali PLYNULE animovať
   priamo na :root pri prepnutí témy. Výhoda oproti `transition` na elementoch:
   mení sa JEDNA premenná na jednom mieste, takže všetky prvky, čo ju čítajú, sa
   menia úplne synchrónne a rovnomerne — žiadne kaskádové oneskorenie cez
   dedičnosť (headline cez .hero/.hero-inner) ani rôzne trvania na elementoch.
   Staršie prehliadače @property ignorujú → téma sa prepne okamžite (bez regresie). */
@property --bg        { syntax: "<color>"; inherits: true; initial-value: #0a0a0c; }
@property --bg-soft   { syntax: "<color>"; inherits: true; initial-value: #101013; }
@property --ink       { syntax: "<color>"; inherits: true; initial-value: #ecebe6; }
@property --ink-dim   { syntax: "<color>"; inherits: true; initial-value: #a3a39c; }
@property --ink-faint { syntax: "<color>"; inherits: true; initial-value: #828279; }
@property --line      { syntax: "<color>"; inherits: true; initial-value: rgba(236, 235, 230, 0.10); }
@property --line-soft { syntax: "<color>"; inherits: true; initial-value: rgba(236, 235, 230, 0.055); }
@property --accent     { syntax: "<color>"; inherits: true; initial-value: #cdbf9f; }
@property --accent-cta { syntax: "<color>"; inherits: true; initial-value: #cdbf9f; }
@property --accent-ink { syntax: "<color>"; inherits: true; initial-value: #0a0a0c; }

:root {
  /* Surfaces — warm near-black */
  --bg:        #0a0a0c;
  --bg-soft:   #101013;
  --ink:       #ecebe6;   /* warm off-white */
  --ink-dim:   #a3a39c;
  --ink-faint: #828279;
  --line:      rgba(236, 235, 230, 0.10);
  --line-soft: rgba(236, 235, 230, 0.055);

  /* Akcent — default = CHAMPAGNE (tmavá téma). Konkrétne hodnoty určuje dvojica
     data-accent × data-theme (sekcia „Akcentové palety" nižšie); tieto v :root sú
     len fallback, keby atribút data-accent náhodou chýbal.
       --accent      = brand / dekoratívny akcent (headline, kicker, dot, caret,
                       selection, chip hover, eclipse) — charakter
       --accent-cta  = funkčný akcent CTA tlačidla (výplň/okraj/text + hover tieň)
       --accent-ink  = text na plnom akcentovom pozadí (.cta)
       --accent-rgb  = RGB triplet akcentu pre rgba() v pulse keyframes */
  --accent:     #cdbf9f;
  --accent-cta: #cdbf9f;
  --accent-ink: #0a0a0c;
  --accent-rgb: 205, 191, 159;

  /* Rhythm */
  --gap:        clamp(1rem, 2.4vw, 2rem);
  --pad-x:      clamp(1.5rem, 6vw, 7rem);
  --pad-y:      clamp(1.4rem, 3.2vh, 2.6rem);
  --maxw:       1320px;

  /* Type */
  --sans: "Geist", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --theme-ease: cubic-bezier(.65, 0, .35, 1);   /* ease-in-out pre prechod témy */

  /* Jednotný focus-visible prsteň pre všetky interaktívne prvky (akcentový,
     viditeľný v oboch témach; offset kreslí mimo overflow:hidden na .cta). */
  --focus-ring: 2px solid var(--accent);
  --focus-off:  3px;

  /* Prechod farieb pri prepnutí témy: animujeme priamo premenné (viď @property),
     takže celá plocha sa prefarbí synchrónne. Silné ease-in-out = rýchly priechod
     stredom, kde sa text a pozadie jasovo míňajú → nízkokontrastný moment je
     nepostrehnuteľný. */
  transition:
    --bg .2s var(--theme-ease), --bg-soft .2s var(--theme-ease),
    --ink .2s var(--theme-ease), --ink-dim .2s var(--theme-ease), --ink-faint .2s var(--theme-ease),
    --line .2s var(--theme-ease), --line-soft .2s var(--theme-ease),
    --accent .2s var(--theme-ease), --accent-cta .2s var(--theme-ease), --accent-ink .2s var(--theme-ease);

  /* Depth vignette at bottom of field (theme-dependent) */
  --depth: rgba(0, 0, 0, 0.45);
  --warm:  rgba(233, 176, 62, 0.05);

  color-scheme: dark;
}

/* ---------- Light theme (deň) ------------------------------- */
:root[data-theme="light"] {
  --bg:        #f3f1ea;   /* warm paper */
  --bg-soft:   #e9e6dd;
  --ink:       #1b1b18;   /* warm near-black */
  --ink-dim:   #54534c;
  --ink-faint: #71706a;
  --line:      rgba(27, 27, 24, 0.14);
  --line-soft: rgba(27, 27, 24, 0.08);

  --depth: rgba(31, 28, 20, 0.06);
  --warm:  rgba(233, 176, 62, 0.10);

  color-scheme: light;
}

/* ============================================================
   Akcentové palety — prepínateľné cez atribút data-accent na <html>.
   Dve nezávislé osi: data-accent (champagne | amber) × data-theme (dark | light)
   = 4 kombinácie. Mení sa IBA akcent (--accent / --accent-cta / --accent-ink /
   --accent-rgb); plochy a text (--bg, --ink, --line …) ostávajú z témy vyššie.
   Champagne sa na svetlej téme zámerne stmaví (inak by na papierovom pozadí
   zmizla) a --accent-ink sa preklopí na svetlý, aby text v plnom CTA ostal
   čitateľný (na svetlej champagne je akcent tmavý → ink musí byť svetlý).
   ============================================================ */

/* CHAMPAGNE (default) — „prémiový dodávateľ, ktorý nekričí" */
:root[data-accent="champagne"] {                       /* tmavá téma */
  --accent:     #cdbf9f;
  --accent-cta: #cdbf9f;
  --accent-ink: #0a0a0c;
  --accent-rgb: 205, 191, 159;
}
:root[data-accent="champagne"][data-theme="light"] {   /* svetlá téma – tlmená (oceľová) */
  --accent:     #4e5a66;
  --accent-cta: #4e5a66;
  --accent-ink: #f3f1ea;
  --accent-rgb: 78, 90, 102;
}

/* AMBER (pôvodný — ponechaný ako živá alternatíva na priame porovnanie) */
:root[data-accent="amber"] {                            /* tmavá téma */
  --accent:     #e9b03e;
  --accent-cta: #e9b03e;
  --accent-ink: #0a0a0c;
  --accent-rgb: 233, 176, 62;
}
:root[data-accent="amber"][data-theme="light"] {        /* svetlá téma */
  --accent:     #e9b03e;
  --accent-cta: #e9b03e;
  --accent-ink: #0a0a0c;
  --accent-rgb: 233, 176, 62;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Obmedzený pohyb: prepnúť tému okamžite (bez animácie premenných). */
@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
}

html, body { height: 100%; }
html {
  overflow-x: hidden;   /* poistka proti horizontálnemu pásu (scrollbaru) dole */
  /* Vypnúť natívny iOS „tap flash" – pri ťuknutí WebKit prekryl prvok
     poloprehľadnou čiernou (rgba(0,0,0,~0.2)). Na prepínači témy to splynulo
     s prepnutím a pôsobilo ako rušivý sivý frame. Vlastný :active press si
     dávame sami. Dedí sa, takže pokrýva všetky tlačidlá/odkazy. */
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* overflow-x:hidden tu NIE — prinútilo by body do overflow-y:auto (scroll-container)
     a pri obsahu vyššom než body height:100% by body dostalo vlastný scrollbar
     („pásik" dole). Horizontálne pretečenie poistkuje už html { overflow-x:hidden }. */
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }

/* ---------- Stage / layout ---------------------------------- */
.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
}

/* Pozadie „Svetlo a tieň": teplé svetlo zhora, ktoré pomaly „dýcha"
   (rastie + jasní sa), + mäkký hĺbkový tieň po obvode. Žiadny pravidelný
   vzor → na mobile nič nepreskakuje ani nepretína text. */
.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  overflow: hidden;   /* orež dýchajúci ::before, nech nepretečie cez okraj viewportu */
}
.field::before {
  content: "";
  position: absolute;
  inset: -16%;
  /* Glow naviazaný na akcent (rgba z --accent-rgb) → mení sa s témou×akcentom,
     žiadny zadrátovaný amber. Alfa nižšia (akcent býva svetlejší než pôvodný
     amber → glow ostáva ambientný). Hĺbkový tieň cez pripravený --depth (téma-aware). */
  background:
    radial-gradient(56% 46% at 50% 1%,
      rgba(var(--accent-rgb), 0.28) 0%,
      rgba(var(--accent-rgb), 0.12) 34%,
      transparent 66%),
    radial-gradient(140% 110% at 50% 40%,
      transparent 42%, var(--depth) 100%);
  will-change: transform, opacity;
  animation: field-breathe 9s ease-in-out infinite alternate;
}
@keyframes field-breathe {
  from { transform: scale(0.94); opacity: 0.5; }
  to   { transform: scale(1.14); opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .field::before { animation: none; opacity: .82; }
}

/* ---------- Top bar ----------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-y) var(--pad-x);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  display: inline-flex;
  align-items: center;
}

/* dataid wordmark — sized by height, width follows the viewBox aspect */
.logo { display: block; width: auto; color: inherit; }
.logo--sm { height: 20px; }
.logo--md { height: 22px; }

.topright {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.topmeta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
  display: flex;
  gap: 1.4rem;
  align-items: center;
}
.topmeta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  margin-right: 0.5rem;
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
  /* Akcentová farba cez --accent-rgb (presný odtieň pri presnej alfe 0.45→0).
     Čistejšie než color-mix s transparent v keyframe (žiadny posun odtieňa). */
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.topmeta .sep { color: var(--ink-faint); }

/* Eclipse switch — light & dark side of one disc.
   The visual state is keyed off the document theme so it renders
   correctly on first paint (no JS-driven flash on load). */
.eclipse {
  --tw: 62px;            /* track width  */
  --th: 28px;            /* track height */
  --dd: 20px;            /* disc diameter */
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.ec-track {
  position: relative;
  width: var(--tw);
  height: var(--th);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  /* ŽIADNY transition na background/border — tieto farby vedie @property (--line,
     --accent) pri prepnutí témy (.2s). Vlastný .5s transition by ich rozdvojoval
     (premenná .2s × transition .5s) a na WebKite by prepínač mihol. */
  overflow: hidden;
  flex-shrink: 0;
}
:root[data-theme="dark"] .ec-track {
  background: linear-gradient(90deg, transparent 30%, rgba(150, 168, 220, 0.10));
}
/* tiny stars — only on the dark side */
.ec-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  background-image:
    radial-gradient(1px 1px at 16% 38%, var(--ink) 99%, transparent),
    radial-gradient(1px 1px at 30% 70%, var(--ink) 99%, transparent),
    radial-gradient(1.2px 1.2px at 22% 55%, var(--ink) 99%, transparent);
}
:root[data-theme="dark"] .ec-stars { opacity: 0.5; }
/* the celestial disc */
.ec-disc {
  position: absolute;
  top: 50%;
  left: 4px;
  width: var(--dd);
  height: var(--dd);
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 36% 34%, #fbf6ea, #ecdcbd 78%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.18);
  /* transform .14s zjemní :active press (inak by disk tvrdo cukol); slide ostáva .5s */
  transition: left .5s var(--ease), background .5s var(--ease), transform .14s var(--ease);
}
/* shadow crescent that carves the disc into a moon on the dark side */
.ec-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bg);
  transform: translate(42%, -26%) scale(0.94);
  opacity: 0;
  /* background NIE v transition liste — --bg sa už animuje cez @property (.2s),
     druhý prechod (.5s) by ho rozdvojil a kosák by mihol zlou farbou. */
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
:root[data-theme="dark"] .ec-disc {
  left: calc(100% - var(--dd) - 4px);
}
:root[data-theme="dark"] .ec-disc::after {
  opacity: 1;
  transform: translate(34%, -22%) scale(0.94);
}
.ec-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  /* color bez transition — vedie ho @property (--ink-faint) pri prepnutí témy;
     vlastný transition by sa s ním bil (dvojitá animácia → mihnutie na WebKite). */
  min-width: 1.9em;
  text-align: left;
}
@media (hover: hover) {
  .eclipse:hover .ec-label { color: var(--ink-dim); }
  .eclipse:hover .ec-track { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
}
.eclipse:active .ec-disc { transform: translateY(-50%) scale(.94); }   /* press feedback (instant; nemení .5s slide disku) */
.eclipse:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-off); border-radius: 999px; }
/* Jednotný focus ring na boxové/odkazové prvky (CTA, logo, footer odkazy) */
.cta:focus-visible,
.brand:focus-visible,
.col .v a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-off); }
/* .cta-mail je textový prvok a jeho box rezervuje šírku pre „skopírované ✓",
   takže box-outline by vpravo precnieval. Fokus preto rieši ako hover:
   rozjasnenie + akcentové podčiarknutie samotného e-mailu (hugne obsah). */
.cta-mail:focus-visible { outline: none; color: var(--ink); }
.cta-mail:focus-visible [data-u] { border-color: var(--accent); }

/* ---------- Hero -------------------------------------------- */
.hero {
  display: flex;
  align-items: center;
  padding: clamp(2rem, 7vh, 5rem) var(--pad-x);
}
.hero-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(1.4rem, 3.4vh, 2.4rem);
}
.kicker .idx { color: var(--accent); }
.kicker .ln {
  height: 1px; width: clamp(40px, 8vw, 96px);
  background: linear-gradient(90deg, var(--accent), transparent);
}
.caret {
  display: inline-block;
  width: 0.5em; height: 1.05em;
  background: var(--accent);
  margin-left: 0.1em;
  transform: translateY(0.12em);
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.headline {
  font-weight: 560;
  font-size: clamp(2.35rem, 6.4vw, 5.35rem);
  line-height: 1.015;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
}
.headline .em {
  color: var(--accent);
  font-style: normal;
}
.headline .nb { white-space: nowrap; }

.subhead {
  margin-top: clamp(1.5rem, 3.6vh, 2.4rem);
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 58ch;
  text-wrap: pretty;
}
.subhead .strong { color: var(--ink); font-weight: 500; }

/* Expertise chips — credibility signal, not a menu */
.chips {
  margin-top: clamp(1.9rem, 4vh, 2.8rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-dim);
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.chip .num {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  transition: color .35s var(--ease);
}
@media (hover: hover) {
  .chip:hover {
    border-color: color-mix(in oklab, var(--accent) 55%, transparent);
    color: var(--ink);
    transform: translateY(-1px);
  }
  .chip:hover .num { color: var(--accent); }
}

/* Call to action */
.cta-row {
  margin-top: clamp(2.2rem, 4.6vh, 3.2rem);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  flex-wrap: wrap;
}
.cta {
  --h: 3.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  height: var(--h);
  padding: 0 1.5rem 0 1.7rem;
  /* Okrajové (outline) tlačidlo v OBOCH režimoch — decentné, tlmené.
     Akcentový okraj + text; pri hoveri sa zafarbí naplno. Pri prepnutí témy sa
     farby plynule prelejú (.4s). CTA ide cez --accent-cta, nie brandový --accent. */
  background-color: transparent;
  color: var(--accent-cta);
  border: 1px solid var(--accent-cta);
  font-weight: 560;
  font-size: 1rem;
  letter-spacing: -0.005em;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
  will-change: transform;
}
/* Hover: outline sa zafarbí naplno (oba režimy) + jemné nadvihnutie a tieň.
   Za @media (hover:hover), aby na touch hover „neprischol" po ťuknutí. */
@media (hover: hover) {
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -14px color-mix(in oklab, var(--accent-cta) 70%, transparent);
    background-color: var(--accent-cta);
    color: var(--accent-ink);
  }
  .cta:hover .arrow { transform: translateX(4px); }
}
.cta:active { transform: translateY(0); }
.cta .arrow { display: inline-flex; transition: transform .3s var(--ease); }
.cta .arrow svg { display: block; width: 1.15em; height: 1.15em; }

.cta-mail {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--ink-dim);
  cursor: pointer;
  background: none;
  border: none;
  transition: color .3s var(--ease);
}
@media (hover: hover) {
  .cta-mail:hover { color: var(--ink); }
}
.cta-mail:active { transform: translateY(1px); }   /* press feedback (instant) */
/* Podčiarknutie patrí LEN samotnému e-mailu — nie labelu „E-MAIL"
   ani rezervovanému miestu pre „skopírované ✓". */
.cta-mail [data-u] {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
@media (hover: hover) {
  .cta-mail:hover [data-u] { border-color: var(--line); }
}
.cta-mail .label {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cta-mail .copied {
  color: var(--accent);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cta-mail.is-copied .copied { opacity: 1; transform: translateY(0); }

/* ---------- Footer / contact -------------------------------- */
.contact {
  border-top: 1px solid var(--line-soft);
  padding: clamp(1.4rem, 3vh, 2.2rem) var(--pad-x);
}
.contact-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
}
.col { display: flex; flex-direction: column; gap: 0.42rem; }
.col .k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.col .v { font-size: 0.95rem; color: var(--ink-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.col .v.addr { white-space: normal; }   /* adresa sa smie zalomiť (inak na ~320px oreže) */
.col .v a { transition: color .25s var(--ease); }
.col .v a:hover { color: var(--ink); }
.col.firm .v { color: var(--ink); }

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}
.foot-brand .name { display: inline-flex; color: var(--ink); margin-bottom: 0.15rem; }
.foot-brand .tag { color: var(--ink-faint); font-size: 0.82rem; }
.foot-brand .legal {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.clock {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.clock .z { color: var(--ink-faint); }

/* ---------- Entrance animation ------------------------------ */
/* Content is visible by default; the staggered entrance is applied
   imperatively via the Web Animations API (only when the document is
   actually visible) so the page is NEVER stuck blank in a background
   tab / snapshot. .reveal is just a marker hook. */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .caret, .topmeta .dot { animation: none; }
  /* žiadny interakčný POHYB (hover/active transformy); farby a opacity ostávajú */
  .cta:hover, .cta:active, .chip:hover, .cta-mail:active { transform: none; }
  .cta:hover .arrow { transform: none; }
  .eclipse:active .ec-disc { transform: translateY(-50%); }   /* zachovaj centrovanie, zruš scale */
}

/* ---------- 404 / stránka neexistuje ------------------------
   Zdieľa chrome (topbar, footer, .field grid) aj jazyk (kicker, .cta,
   .cta-mail, reveal) s webom. Tu len drobné scoped úpravy – žiadny shared
   token sa neprepisuje; akcent ide cez existujúce var(--accent). */
.notfound .nf-title {
  font-size: clamp(2rem, 5vw, 3.6rem);   /* striedmejší než hero headline */
  max-width: 18ch;
}
.notfound .nf-note {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
}
.notfound .nf-c {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-faint);   /* muted „comment" register */
}

/* ---------- Responsive -------------------------------------- */
@media (max-width: 720px) {
  .topmeta .desc { display: none; }
  .topbar { flex-wrap: wrap; gap: 0.8rem 1rem; }
  .hero { align-items: flex-start; padding-top: clamp(2.2rem, 8vh, 4rem); }
  .contact-inner { align-items: flex-start; }
  .clock { order: 3; }
}
@media (max-width: 480px) {
  .cta { width: 100%; justify-content: center; }
  .cta-row { gap: 1.1rem; }
}

/* Tlačový spodný riadok (IČO+sídlo + QR) – na obrazovke skrytý */
.print-bottom { display: none; }

/* ============================================================
   Print – čistá „vizitka" na papieri.
   Biely papier, čierny text, jeden tlačovo čitateľný amber akcent.
   Preč: animované pozadie, prepínač témy, CTA, live hodiny, modal,
   dead pixel. Ostáva: logo, claim, expertíza a kontaktné údaje
   (hlavička + footer = vizitka). Funguje aj pre stránku ochrany OÚ.
   ============================================================ */
@media print {
  :root,
  :root[data-theme],
  :root[data-accent],
  :root[data-accent][data-theme] {
    --bg: #fff;       --bg-soft: #fff;
    --ink: #111;      --ink-dim: #333;  --ink-faint: #555;
    --line: #cfcfcf;  --line-soft: #e6e6e6;
    --accent: #b07d1e;            /* tlačovo čitateľnejší akcent */
    --accent-cta: #b07d1e; --accent-rgb: 176, 125, 30;
    --depth: transparent; --warm: transparent;
    color-scheme: light;
  }

  @page { margin: 16mm; }
  html, body { background: #fff; color: var(--ink); }

  /* žiadne animácie/prechody pri tlači */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* obrazovkové / interaktívne prvky preč */
  .field, .eclipse, .caret, .clock, .cta-row, .modal {
    display: none !important;
  }
  /* tieto sú nahradené v .print-bottom (IČO+sídlo + QR) */
  .foot-brand .legal,
  .contact-inner > .col:nth-of-type(3) {
    display: none !important;
  }
  /* redundancia: skryť topmeta („Vývoj softvéru…" + „Bratislava, SK"
     sú už v headline a v adrese), kicker (DATAID + Bratislava sú už v logu
     a adrese), druhé logo v footri (už je hore). */
  .topmeta,
  .kicker,
  .foot-brand .name {
    display: none !important;
  }

  /* kompaktné jednostranové rozloženie (okraje rieši @page) */
  .stage   { min-height: auto; display: block; }
  .topbar  { padding: 0 0 6mm; border-bottom: 1px solid var(--line); }
  .hero    { padding: 8mm 0 6mm; display: block; }
  .contact { padding: 6mm 0 0; border-top: 1px solid var(--line); page-break-inside: avoid; }
  .hero-inner, .contact-inner { max-width: none; }
  .legal   { max-width: none; padding: 6mm 0; }

  /* oblasti expertízy – jeden riadok textu s oddeľovačmi, jemný odstup
     od subhead. Bez kickera – v print kontexte stačí sám text. */
  .chips {
    display: block;
    margin-top: 8mm;
  }
  .chip {
    display: inline;
    border: 0; padding: 0; border-radius: 0;
    font-size: 10pt; color: var(--ink);
    white-space: normal; letter-spacing: 0;
  }
  .chip .num { display: none; }
  .chip:not(:last-child)::after {
    content: " · ";
    color: var(--ink-faint);
    margin: 0 .15em;
  }

  .reveal  { opacity: 1 !important; transform: none !important; }
  a        { color: inherit; text-decoration: none; }

  /* Spodný riadok footra – IČO+sídlo vľavo (na výšku QR), QR vpravo */
  .print-bottom {
    display: flex !important;
    justify-content: space-between;
    align-items: stretch;
    gap: 10mm;
    padding-top: 5mm;
    margin-top: 4mm;
    border-top: 1px solid var(--line);
  }
  .pb-info {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* zarovnané na výšku QR */
    gap: 3mm;
  }
  .pb-row {
    font-family: var(--mono);
    font-size: 9.5pt;
    letter-spacing: .03em;
    color: var(--ink-dim);
    white-space: nowrap;
  }
  .pb-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2mm;
    flex-shrink: 0;
  }
  .pb-qr img { width: 26mm; height: 26mm; display: block; }
  .pb-qr .qr-cap {
    font-family: var(--mono);
    font-size: 8pt;
    letter-spacing: .04em;
    color: var(--ink-dim);
  }
}