/* ============================================================
   BASE – reset, typografia, geometria (chamfer/hex), pomocné triedy
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-ink); text-decoration: none; }
a:hover { color: var(--teal-deep); }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* --- Typografia: žiadna kurzíva, hrúbky 400 / 600 / 700 --- */
h1, h2, h3, h4 {
  font-family: var(--font-ui);
  line-height: var(--leading-tight);
  letter-spacing: -.025em;
  margin: 0 0 var(--space-4);
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); font-weight: 600; }
h3 { font-size: var(--text-xl);  font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: var(--text-md);  font-weight: 600; letter-spacing: 0; }
p  { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
em, i, cite { font-style: normal; font-weight: 600; }
small { font-size: var(--text-sm); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

.brand { font-family: var(--font-brand); font-weight: 400; letter-spacing: .01em; }
.mono  { font-family: var(--font-mono); }
/* Pravidlo mono: KAŽDÉ číslo v mono s tabulárnymi číslicami */
.num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.unit  { font-size: .8em; color: var(--ink-muted); font-family: var(--font-ui); }
.lead  { font-size: var(--text-lg); color: var(--ink-muted); max-width: 52ch; line-height: 1.6; }
.muted { color: var(--ink-muted); }

/* Mono štítok (eyebrow): 11px, rozpal, veľké písmená – max 3–4 slová */
.label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}
.label--accent { color: var(--teal-ink); }
.on-dark .label { color: var(--on-dark-faint); }
.on-dark .label--accent { color: var(--flow); }

/* Hlavička sekcie z konceptu: hex číslo — čiara — štítok */
.sec-label { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.sec-label hr { flex: 1; margin: 0; border-color: var(--line); }
.on-dark .sec-label hr { border-color: rgba(255,255,255,.22); }
.hex-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 50px; background: var(--teal); color: #06121a;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.on-dark .hex-num { background: var(--flow); }

/* Eyebrow s teal čiarou (hero, podstránky) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--space-5);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--teal); }
.on-dark .eyebrow { color: rgba(255,255,255,.88); }

/* --- Geometria: skosené rohy a hex (clip-path). Tieň cez .cast na obale,
       lebo clip-path oreže box-shadow. --- */
.cham-l { clip-path: polygon(var(--cham-l) 0, 100% 0, 100% calc(100% - var(--cham-l)), calc(100% - var(--cham-l)) 100%, 0 100%, 0 var(--cham-l)); }
.cham-m { clip-path: polygon(var(--cham-m) 0, 100% 0, 100% calc(100% - var(--cham-m)), calc(100% - var(--cham-m)) 100%, 0 100%, 0 var(--cham-m)); }
.cham-s { clip-path: polygon(var(--cham-s) 0, 100% 0, 100% calc(100% - var(--cham-s)), calc(100% - var(--cham-s)) 100%, 0 100%, 0 var(--cham-s)); }
.hex    { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.cast   { filter: var(--shadow); }
.cast-d { filter: var(--shadow-dark); }
.lift   { transition: transform var(--dur) var(--ease); }
.lift:hover { transform: translateY(-3px); }
@media (max-width: 760px) { :root { --cham-l: 24px; --edge: 52px; } }

/* --- Layout helpers --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section-head { max-width: 60ch; margin-bottom: var(--space-8); }
.section-head h2 { margin-bottom: var(--space-4); }
.on-dark { background: var(--deep); color: var(--on-dark); }
.on-dark .lead { color: var(--on-dark-muted); }
.on-dark .muted { color: var(--on-dark-faint); }
.on-dark a { color: var(--on-dark); }
.on-dark hr { border-color: var(--line-dark); }
.on-dark .unit { color: var(--on-dark-faint); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.stack { display: grid; gap: var(--space-4); }

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

/* --- Scroll-reveal (js/main.js pridá .is-visible) --- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Bloky viditeľné len v jednom jazyku --- */
[data-lang-only] { display: none; }
html[lang="sk"] [data-lang-only="sk"], html[lang="en"] [data-lang-only="en"] { display: revert; }