/* ==========================================================================
   Alapok: reset, tipográfia, layout, segédosztályok, reveal-animációk
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--lime-deep) var(--ink-800);
  /* A sáv helye akkor is meg van tartva, ha eltűnik (menü/modal nyitásakor
     a body fixed lesz) — így nem ugrik el vízszintesen a tartalom. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ink-800);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Scroll-zár: a `top` értéket a JS állítja be (-scrollY), így a menü/modal
   bezárása után pontosan oda kerülünk vissza, ahonnan nyitottuk. */
body.no-scroll {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

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

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

/* --- Tipográfia -------------------------------------------------------- */

.display,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  /* Biztonsági háló: a magyar összetett szavak (adókedvezmény-igénylés,
     nyugdíj-megtakarítás) kis kijelzőn hosszabbak lehetnek a sávnál. Ez
     csak akkor tör, ha máshogy kifolyna — normál esetben nem látszik. */
  overflow-wrap: break-word;
}

.display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-snug); }
.h2 { font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-snug); }
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.h4 { font-size: var(--fs-h4); font-weight: 650; line-height: 1.3; letter-spacing: -0.015em; }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 56ch;
}

.prose { max-width: var(--maxw-text); }
.prose p + p { margin-top: var(--space-4); }
.prose strong { color: var(--text); font-weight: 620; }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--lime-text);
}

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.lime { color: var(--lime-text); }
.soft { color: var(--text-soft); }
.mute { color: var(--text-mute); }
.tiny { font-size: var(--fs-xs); line-height: 1.5; }

/* Lime kiemelés a folyószövegben */
.mark {
  color: var(--lime-text);
  font-weight: 620;
}

/* --- Layout ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-wide { max-width: 1600px; }
.wrap-narrow { max-width: 900px; }

.section { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: clamp(3rem, 5vw, 5rem); }

.stack > * + * { margin-top: var(--flow, var(--space-4)); }
.stack-lg { --flow: var(--space-6); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
  .split-sticky > :first-child { position: sticky; top: 120px; }
}

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

/* --- Háttér-textúrák --------------------------------------------------- */

/* A fix helyzetű zaj-réteg saját kompozit rétegre kerül (translateZ),
   különben görgetéskor újrafesti a teljes látható területet. */
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  transform: translateZ(0);
  contain: strict;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A lime derengés-foltok (.glow-blob) kikerültek: a `filter: blur(90px)`
   minden görgetéskor újrafestette a hero teljes felületét, telefonon ez
   volt a legdrágább effekt az oldalon. */

.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin-block: var(--space-7);
}

/* --- Reveal / scroll animációk ----------------------------------------- */

/* Szándékosan NINCS `will-change`: a főoldalon 30+ reveal-elem van, és a
   will-change mindegyiknek külön kompozit réteget foglalt már betöltéskor.
   A rövid opacity/transform átmenethez a böngésző magától is réteget nyit. */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
/* Kis kijelzőn a vízszintes belépés 14-32px-es dokumentum-túlcsordulást
   okozna a reveal előtt, ezért ott függőlegesre váltunk. */
@media (max-width: 900px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(26px); }
}
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms var(--ease-out) var(--reveal-delay, 0ms);
}
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

/* Szavankénti felfutás (JS bontja fel .w elemekre).
   Szándékosan nincs overflow:hidden — a magyar ékezetek levágódnának. */
.split-words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(1.2deg);
  transition:
    opacity 620ms var(--ease-out),
    transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.split-words.is-in .w { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal],
  .split-words .w { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* --- Segédosztályok ---------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--space-4);
  z-index: var(--z-toast);
  background: var(--lime);
  color: var(--lime-ink);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-pill);
  font-weight: 650;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--space-4); }

/* !important kell: a .btn display-je ugyanolyan specifikus és később töltődik */
.hide-mobile { display: none !important; }
@media (min-width: 860px) { .hide-mobile { display: revert !important; } }
@media (min-width: 860px) { a.btn.hide-mobile, button.btn.hide-mobile { display: inline-flex !important; } }
@media (min-width: 860px) { .only-mobile { display: none !important; } }