/* ZenRock Labs foldal - alap: design/mockups/final-a-layout-b-colors/index.html (Forma, 2026-09-16).
   1-4. szekcio: a mockup szerint, valtoztatas nelkul. 5-10. szekcio (DIAGNOSZTIKA, Garancia, Kinek nem valo,
   Ki all mogotte, teszt-belepo, Foglalas): latvanyterv meg nincs hozzajuk (handoff 100. sor), ezert a meglevo
   tokenekbol es komponensekbol epitve, bespoke abra nelkul - Forma jovahagyja a vegso latvanyt. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-300);
  line-height: var(--font-line-height-normal);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible {
  outline: var(--size-ring) solid var(--color-focus-ring);
  outline-offset: var(--space-1);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  min-height: var(--size-touch);
  position: absolute; left: var(--space-4); top: var(--space-2);
  transform: translateY(-200%);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent); color: var(--color-on-accent);
  z-index: var(--z-overlay);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--size-container);
  margin-inline: auto;
  padding-inline: var(--size-gutter);
}
.wrap--narrow { max-width: 48rem; }

.grid-bg {
  background-image:
    linear-gradient(to right, var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-line) 1px, transparent 1px);
  background-size: var(--size-grid-cell) var(--size-grid-cell);
  background-position: center top;
}
/* v3, 2026-09-24 (Zeno kerese, iparagak-szekcio beszurasa utan): a racs-erosseg
   korabban a .grid-bg:nth-of-type(1/3/5/7/9) pozicio-trukkon ult, ami a sotet/vilagos
   szekciok SZIGORU valtakozasat feltetelezte. Egy uj szekcio beszurasa elcsuszatja
   ezt mindenben, ami utana kovetkezik (mert a nth-of-type az OSSZES <section>
   gyereket szamolja, nem csak a .grid-bg-seket). Ezert explicit osztalyokra valtottunk:
   minden sotet grid-bg szekcio maga hordozza a sajat ritmus-fokozatat, fuggetlenul
   attol, hanyadik <section> a DOM-ban. Uj szekcio beszurasa mostantol nem borogatja fel
   a tobbi ritmusat. */
.grid-bg--strong { --color-grid-line: var(--color-dark-grid); }
.grid-bg--mid { --color-grid-line: var(--color-dark-grid-mid); }
.grid-bg--soft { --color-grid-line: var(--color-dark-grid-soft); }

/* v3: a regen vilagos szekciok hatarat mert elvalaszto jeloli, mert a hatter-kontraszt
   mint tagolas megszunt (minden szekcio sotet). */
.section[data-theme="light"] {
  border-top: 1px solid var(--color-dark-hairline);
  border-bottom: 1px solid var(--color-dark-hairline);
}

/* v3, 2026-09-24: a harmadik hattersint, a gradiens szekcio. A mintaoldalon EGY szekcio
   kap fuggoleges atmenetet, ettol "valahol sotetebb, valahol vilagosabb" a lap, ahogy
   Peter kerte. A DIAGNOSZTIKA szekcio a lap kozepe tajan van, ezert az kapja (explicit
   .grid-bg--gradient osztallyal, nem pozicio szerint - lasd a fenti magyarazatot).
   FONTOS: a gradiens a racs ALA kerul kulon retegkent, nem helyette. Eloszor
   felulirtam a background-image-et, es attol azon az egy szekcion eltunt a racs. */
.grid-bg--gradient {
  background-image:
    linear-gradient(to right, var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-line) 1px, transparent 1px),
    var(--color-dark-gradient);
  background-size: var(--size-grid-cell) var(--size-grid-cell), var(--size-grid-cell) var(--size-grid-cell), cover;
  background-position: center top, center top, center top;
}

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-100);
  letter-spacing: var(--font-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex; align-items: center; gap: var(--space-3);
}
.eyebrow::before {
  content: ""; width: var(--space-2); height: var(--space-2);
  background: var(--color-accent); flex-shrink: 0;
}
.h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-900);
  font-weight: var(--font-weight-display);
  line-height: var(--font-line-height-tight);
  letter-spacing: var(--font-letter-spacing-tight);
  overflow-wrap: break-word; hyphens: none;
}
.h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-display);
  line-height: var(--font-line-height-tight);
  letter-spacing: var(--font-letter-spacing-tight);
  overflow-wrap: break-word; hyphens: none;
}
.h3 {
  font-size: var(--font-size-400);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-snug);
  letter-spacing: var(--font-letter-spacing-snug);
}
.lead {
  font-size: var(--font-size-400);
  color: var(--color-text-muted);
  max-width: var(--size-measure);
}
.h2 + .lead { margin-top: var(--space-4); }
.body-muted { color: var(--color-text-muted); max-width: var(--size-measure); }
.mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-100);
  letter-spacing: var(--font-letter-spacing-wide);
  text-transform: uppercase;
}
.ph { color: var(--color-text-muted); }

.index {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}
.index__rule { height: 1px; background: var(--color-border-subtle); transform-origin: left; }
.index b { color: var(--color-accent); font-weight: var(--font-weight-medium); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: var(--size-touch);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-letter-spacing-snug);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}
.btn svg { width: var(--size-icon); height: var(--size-icon); transition: transform var(--duration-base) var(--easing-standard); }
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover { background: var(--color-text-primary); color: var(--color-bg-base); }
.btn--primary:hover svg { transform: translateX(var(--space-1)); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { border-color: var(--color-border-strong); color: var(--color-text-primary); background: transparent; }
.btn--ghost:hover { border-color: var(--color-text-primary); }
.btn[aria-disabled="true"] { opacity: var(--opacity-disabled); pointer-events: none; }
.btn--block { width: 100%; }
.btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
@media (min-width: 48rem) { .btn--block { width: auto; } }

.textlink {
  display: inline-flex; align-items: center; min-height: var(--size-touch);
  font-family: var(--font-family-mono); font-size: var(--font-size-200);
  color: var(--color-text-muted);
  text-decoration: underline; text-decoration-color: var(--color-border-strong);
  text-underline-offset: var(--space-1);
  transition: color var(--duration-fast) var(--easing-standard);
  background: none; border: none; padding: 0; cursor: pointer;
}
.textlink:hover { color: var(--color-text-primary); text-decoration-color: var(--color-accent); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-base);
}
.nav__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--space-8);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--size-touch);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-letter-spacing-snug);
  text-decoration: none;
}
.wordmark__jel {
  display: block; flex-shrink: 0;
  width: var(--space-6); height: var(--space-6);
}
.nav__links { display: none; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: var(--size-touch);
  padding-inline: var(--space-2);
  font-size: var(--font-size-200); color: var(--color-text-muted); text-decoration: none;
  transition: color var(--duration-fast) var(--easing-standard);
}
.nav__links a:hover { color: var(--color-text-primary); }
.nav__cta { display: none; }
.menu-btn {
  width: var(--size-touch); height: var(--size-touch);
  display: inline-grid; place-items: center;
  background: transparent; color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu-btn svg { width: var(--size-icon); height: var(--size-icon); }
.mobile-panel {
  display: none;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-base);
}
.mobile-panel.is-open { display: block; }
.mobile-panel__list { display: grid; padding-block: var(--space-3); }
.mobile-panel__list a {
  display: flex; align-items: center; min-height: var(--size-touch);
  color: var(--color-text-muted); text-decoration: none;
}
.mobile-panel__list a:hover, .mobile-panel__list a:focus-visible { color: var(--color-text-primary); }
.mobile-panel .btn { margin-block: var(--space-2); }
/* 2026-09-23: a toresopont 48rem-rol 64rem-re ment. Ok: 768px-en mar a nyelvvalto NELKUL is
   szuk volt a fejlec (ot nav-elem + CTA), a nyelvvalto pedig 33px vizszintes tullogast okozott,
   amit a verify meg is fogott. Igy 768 es 1023px kozott a hamburger-menu megy, amiben minden
   elfer, a nyelvvaltot is beleertve. */
@media (min-width: 64rem) {
  .nav__links { display: flex; gap: var(--space-1); }
  .nav__cta { display: inline-flex; }
  .menu-btn { display: none; }
  .mobile-panel { display: none !important; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--space-8); position: relative; }
@media (min-width: 48rem) { .section { padding-block: var(--space-9); } }

/* hero */
.hero { padding-block: var(--space-7) var(--space-8); overflow: hidden; }
.hero__grid { display: grid; gap: var(--space-7); }
.hero__copy { display: grid; gap: var(--space-5); align-content: start; }
/* 2026-09-24, Peter dontese (B2 valtozat, site/hero-valtozat-b2.html): a foccim
   20%-kal kisebb, az alatta levo korall mondat 20%-kal nagyobb, a harom pont
   (.spec) kikerult. A calc(...*0.8/1.2) a --font-size-900 clamp() gorbejet
   aranyosan skalazza minden toresponton, nem csak egy fix ertéket ir felul. */
.hero .h1 { font-size: calc(var(--font-size-900) * 0.8); }
.hero__claim { color: var(--color-accent); font-size: calc(var(--font-size-400) * 1.2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
.spec {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}
.spec li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-200);
}
.spec .mono { color: var(--color-accent); }
@media (min-width: 48rem) {
  .hero { padding-block: var(--space-9); }
  .spec { grid-template-columns: repeat(3, 1fr); }
  .spec li { grid-template-columns: 1fr; gap: var(--space-1); border-bottom: 0; padding-right: var(--space-4); }
  .spec li + li { border-left: 1px solid var(--color-border-subtle); padding-left: var(--space-4); }
}
@media (min-width: 75rem) {
  .hero__grid { grid-template-columns: 7fr 5fr; align-items: center; }
}

/* VALTOZAT, 2026-09-24 (site/hero-kozepre.html): nyitoabra nelkuli, kozepre igazitott
   nyitoszoveg. Az eles index.html-en NINCS .hero--kozep, ezert ez a blokk ott nem hat.
   A 75rem-es ketoszlopos szabalyt felul kell irni, kulonben szeles kepernyon
   megmaradna a 7fr 5fr, es a szoveg a bal oldalon ragadna. */
.hero--kozep .hero__grid {
  grid-template-columns: 1fr;
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}
.hero--kozep .hero__copy { justify-items: center; }
.hero--kozep .hero__actions { justify-content: center; }
.hero--kozep .spec { width: 100%; }
.hero--kozep .spec li { text-align: left; }

/* hero plot */
.plot {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-raised);
  padding: var(--space-4);
}
.plot__head {
  display: flex; justify-content: space-between; gap: var(--space-3);
  color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.plot svg { width: 100%; height: auto; overflow: visible; }
.plot .axis { stroke: var(--color-border-strong); stroke-width: 1; fill: none; }
.plot .tick { stroke: var(--color-border-strong); stroke-width: 1; }
.plot .gridl { stroke: var(--color-border-subtle); stroke-width: 1; }
.plot .threshold { stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.plot .curve { stroke: var(--color-accent); stroke-width: 2; fill: none; stroke-linecap: square; }
.plot .area { fill: var(--color-accent); opacity: var(--opacity-subtle); }
.plot .dot { fill: var(--color-bg-raised); stroke: var(--color-accent); stroke-width: 2; }
.plot text { fill: var(--color-text-muted); font-family: var(--font-family-mono); letter-spacing: var(--font-letter-spacing-wide); }
.plot__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3); color: var(--color-text-muted);
}
.plot__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.plot__legend i { width: var(--space-4); height: 1px; background: var(--color-accent); }
/* 2026-09-24: a megterulesi SAV (6-10. honap) es az abra alatti feltevesek.
   A sav szandekosan halvany: jeloles, nem kiemeles, mert a gorbe a foszereplo. */
.plot .band { fill: var(--color-accent); opacity: 0.10; }
.plot__note {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-100);
  line-height: 1.5;
}
.plot__legend i.dash { background: none; border-top: 1px dashed var(--color-text-muted); }

/* problem: layer stack */
.split { display: grid; gap: var(--space-7); }
@media (min-width: 75rem) { .split { grid-template-columns: 5fr 7fr; align-items: start; gap: var(--space-9); } }
.split__copy { display: grid; gap: var(--space-5); }
@media (min-width: 75rem) { .split--rev { grid-template-columns: 7fr 5fr; } }

.stack { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-4); }
.stack__layers { display: grid; gap: var(--space-2); }
.layer {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-raised);
  min-height: var(--space-8);
}
.layer .mono { color: var(--color-text-muted); }
.layer__name { font-weight: var(--font-weight-medium); }
.layer__state { width: var(--space-2); height: var(--space-2); border: 1px solid var(--color-border-strong); }
.layer--top {
  min-height: var(--space-7);
  border-color: var(--color-accent);
  border-style: dashed;
  background: transparent;
}
.layer--top .layer__state { background: var(--color-accent); border-color: var(--color-accent); }
.layer:nth-child(2) { min-height: calc(var(--space-8) + var(--space-2)); }
.layer:nth-child(3) { min-height: calc(var(--space-8) + var(--space-4)); }
.layer:nth-child(4) { min-height: calc(var(--space-8) + var(--space-5)); }
.layer:nth-child(5) { min-height: calc(var(--space-8) + var(--space-6)); }
.layer:nth-child(6) { min-height: calc(var(--space-8) + var(--space-7)); }
.stack__dim {
  display: grid; grid-template-rows: auto 1fr;
  justify-items: center;
  color: var(--color-accent);
  position: relative; padding-right: var(--space-5);
}
.stack__dim-top { height: calc(var(--space-7) + var(--space-2)); }
.stack__dim-line {
  width: var(--space-3);
  border-block: 1px solid currentColor;
  position: relative;
}
.stack__dim-line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid currentColor; }
.stack__dim-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  position: absolute; left: calc(100% + var(--space-2)); top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
}
.stack__caption { grid-column: 1 / -1; margin-top: var(--space-4); color: var(--color-text-muted); }

/* calculator */
.calc { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
@media (min-width: 75rem) { .calc { grid-template-columns: 7fr 5fr; gap: var(--space-2); } }
.panel {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-raised);
  padding: var(--space-5);
}
@media (min-width: 48rem) { .panel { padding: var(--space-6); } }
.panel__head {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-4); margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}
.field + .field { margin-top: var(--space-6); }
.field__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.field label { font-weight: var(--font-weight-medium); }
.field output {
  font-family: var(--font-family-mono); font-size: var(--font-size-200);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.field__scale { display: flex; justify-content: space-between; color: var(--color-text-muted); margin-top: var(--space-2); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--size-touch); background: transparent; margin: 0; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--color-border-strong); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--color-border-strong); }
input[type="range"]::-moz-range-progress { height: var(--space-1); background: var(--color-accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--space-5); height: var(--space-5); margin-top: calc(var(--space-5) / -2);
  background: var(--color-bg-raised);
  border: var(--size-ring) solid var(--color-accent);
  border-radius: var(--radius-sm);
  transition: transform var(--duration-fast) var(--easing-standard);
}
input[type="range"]::-moz-range-thumb {
  width: var(--space-5); height: var(--space-5);
  background: var(--color-bg-raised);
  border: var(--size-ring) solid var(--color-accent);
  border-radius: var(--radius-sm);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: translateY(-1px); }
input[type="range"]:focus-visible { outline-offset: 0; }

.result { display: grid; gap: var(--space-5); align-content: start; }
.result__value {
  font-family: var(--font-family-display);
  font-size: var(--font-size-800);
  font-weight: var(--font-weight-display);
  line-height: var(--font-line-height-tight);
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--color-accent);
  overflow-wrap: anywhere;
}
.result__unit { display: block; margin-top: var(--space-2); color: var(--color-text-muted); }
.result__note { color: var(--color-text-muted); font-size: var(--font-size-200); }
.assume { border-top: 1px solid var(--color-border-subtle); }
.assume li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-200); color: var(--color-text-muted);
}
.assume .mono { color: var(--color-text-primary); }
.assume__toggle {
  width: 100%; text-align: left; background: none; border: none; padding: var(--space-3) 0;
  color: var(--color-text-muted); font-family: var(--font-family-mono); font-size: var(--font-size-200);
  cursor: pointer; min-height: var(--size-touch); display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--color-border-subtle);
}
.assume__toggle:hover { color: var(--color-text-primary); }
.assume__body[hidden] { display: none; }
.assume__body { padding-bottom: var(--space-2); }
.assume__body p { color: var(--color-text-muted); font-size: var(--font-size-200); margin-bottom: var(--space-3); }
.assume__sources { color: var(--color-text-muted); font-size: var(--font-size-100); margin-top: var(--space-3); }

/* email capture (UI only, no submit) */
.emailform { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.emailform[hidden] { display: none; }
.emailform__fields { display: grid; gap: var(--space-4); }
.emailform__fields > button[type="submit"] { margin-top: var(--space-2); }
.emailform__row { display: flex; flex-direction: column; gap: var(--space-2); }
.emailform label { font-size: var(--font-size-200); font-weight: var(--font-weight-medium); }
/* csak a szoveges mezokre - a jelolonegyzet/radio a .quiz-option sajat jelolojet hasznalja,
   ne oroklje ezt a min-height/padding-ot (ORSIKTXRATA-stilusu csapda: magas, keskeny jelolo lett belole) */
.emailform input:not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--size-touch);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-3);
  color: var(--color-text-primary);
  font-family: var(--font-family-body); font-size: var(--font-size-300);
}
.emailform input:invalid[data-touched="true"] { border-color: var(--color-danger); }
.emailform__error { color: var(--color-danger); font-size: var(--font-size-100); min-height: 1em; }
.emailform__row.is-error input { border-color: var(--color-danger); }
.emailform__note { color: var(--color-text-muted); font-size: var(--font-size-100); }
.emailform__success { display: none; color: var(--color-accent); font-size: var(--font-size-200); }
.emailform.is-sent .emailform__fields { display: none; }
.emailform.is-sent .emailform__success { display: block; }

/* process timeline */
.timeline {
  position: relative;
  display: grid; gap: var(--space-6);
  margin-top: var(--space-7);
  padding-left: calc(var(--size-node) + var(--space-4));
}
.timeline__line {
  position: absolute;
  left: calc(var(--size-node) / 2); top: 0; bottom: 0;
  width: 1px; background: var(--color-border-strong);
  transform-origin: top;
}
.step { position: relative; display: grid; gap: var(--space-2); }
.step__node {
  position: absolute;
  left: calc(-1 * (var(--size-node) + var(--space-4)));
  top: 0;
  width: var(--size-node); height: var(--size-node);
  display: grid; place-items: center;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-family-mono); font-size: var(--font-size-100);
  transition: background-color var(--duration-base) var(--easing-standard),
              color var(--duration-base) var(--easing-standard),
              border-color var(--duration-base) var(--easing-standard);
}
.step.is-in .step__node { background: var(--color-text-primary); color: var(--color-bg-base); border-color: var(--color-text-primary); }
.step__meta { color: var(--color-accent); }
.step__meta span { color: var(--color-text-muted); }
.step p { color: var(--color-text-muted); font-size: var(--font-size-200); }
.step__name { padding-top: var(--space-2); }
.step__price {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-family: var(--font-family-mono); font-size: var(--font-size-100);
  color: var(--color-text-primary);
}

/* process flowgraph (kompakt lepes-grafika) + stepboxes (2026-09-24, Forma
   latvanyterve: design/mockups/iparagak-igy-dolgozunk) */
.flowgraph { border: 1px solid var(--color-border-subtle); background: var(--color-bg-raised); padding: var(--space-5); margin-top: var(--space-7); }
.flowgraph__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.flowgraph__node {
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-family-mono); font-size: var(--font-size-100); color: var(--color-accent);
}
.flowgraph__link { flex: 1 1 1.5rem; height: 1px; background: var(--color-border-subtle); min-width: 1rem; }

/* 5 doboz nem toltene ki egyenletesen a 2 vagy 3 oszlopos racsot: a verticals-nal
   hasznalt "hatter a racs alatt + 1px gap" trukk itt egy szinezett, ures teglalapot
   hagyna a hianyzo cella helyen. Ezert itt a hairline minden dobozon SAJAT szegely
   (jobb+also), a konteineren csak felso+bal - igy a hianyzo cella egyszeruen ures
   marad, nincs mit lerajzolni. */
.stepboxes { display: grid; margin-top: var(--space-6); border-top: 1px solid var(--color-border-subtle); border-left: 1px solid var(--color-border-subtle); }
@media (min-width: 48rem) { .stepboxes { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto auto 1fr auto); } }
@media (min-width: 75rem) { .stepboxes { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto auto 1fr auto); } }
.stepbox {
  background: var(--color-bg-base); padding: var(--space-6); display: grid; gap: var(--space-3);
  grid-template-rows: auto auto 1fr auto; min-width: 0;
  border-right: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle);
}
/* 2026-09-24, Zeno merese: az "auto auto 1fr auto" onmagaban nem eleg -- az ar-sor
   (4. sor) sajat auto-magassaga dobozonkent elter (rovid "Dijmentes" vs a hosszu
   AI DIAGNOSZTIKA ar-szoveg), ezert az ar felso szegelye akar 68px-et is csuszott
   egy soron belul, holott a dobozok teljes magassaga mar egyezett (stretch miatt).
   Megoldas: subgrid a >=48rem tortespontokon, hogy a 4 belso sor (meta/cim/torzs/ar)
   dobozonkent ne kulon, hanem a RACS-soron belul kozosen merettezodjon. */
@media (min-width: 48rem) {
  .stepbox { grid-row: span 4; grid-template-rows: subgrid; }
}
.stepbox p { color: var(--color-text-muted); font-size: var(--font-size-200); }
/* 2026-09-25, Peter kerese: a lepes sorszama korallal a kicker ELE. A ketto-osztalyos
   szelektor kell, mert a `.stepbox p` (0,1,1) amugy legyozne a `.step__meta`-t (0,1,0)
   -- ezert nem volt korall eddig maga a kicker sem. */
.stepbox .step__no { color: var(--color-accent); margin-right: var(--space-3); }

/* iparagak vertical-kartyak (2026-09-24, Forma latvanyterve) */
.verticals { display: grid; gap: 1px; background: var(--color-border-subtle); border: 1px solid var(--color-border-subtle); margin-top: var(--space-7); }
@media (min-width: 48rem) { .verticals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .verticals { grid-template-columns: repeat(4, 1fr); } }
/* 2026-09-24, Zeno merese: harom gyerek van (head, title, body), de a rows csak ketto
   sort definialt - a title kapta veletlenul a nyulo 1fr-t, ezert a hosszabb torzsu
   kartyakon a cim (es alatta a szoveg) lejjebb csuszott. Mindharom sor sajat auto-t kap,
   a nyulo sor a body. */
.vcard { background: var(--color-bg-base); display: grid; grid-template-rows: auto auto 1fr; min-width: 0; }
/* 2026-09-24, Forma vonalrajzai (design/mockups/iparag-vonalrajzok/beillesztheto-svg.md,
   "Valtozat c: Keverek"): a nagy sorszam kikerult, helyette egy inline .motif SVG ul a
   fejlec also 68px-es savjaban. A fejlec 136 -> 158px, mert a leghosszabb alszegmens-sor
   (04, Logisztika) 1280px korul harom sorba tordel. */
.vcard__head {
  padding: var(--space-5); height: 158px; position: relative; overflow: hidden;
  display: grid; align-content: end; gap: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-raised);
}
.vcard__head .motif {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 68px; pointer-events: none;
  /* A rajz a felirat savja felett kiolvad. Nelkule a korall vonal a felirat ala kerulne,
     es a kontraszt 4,5:1 ala esne - ez mert ertek (Forma), nem ovatossag. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
}
.vcard__tag { position: relative; color: var(--color-text-muted); }
/* 2026-09-24, Zeno merese (2. kor): a grid-template-rows javitas onmagaban nem eleg,
   mert MINDEN .vcard sajat, fuggetlen grid-konteiner - a cim-sor "auto" magassaga
   kartyankent kulon szamolodik, a sajat cimszoveg sorszama szerint. Ha az egyik cim
   ket sorra tordelik ("Professzionalis szolgaltatok"), a masik harom (egysoros)
   cime alatt a torzs korabban kezdodne. Ezert a cim-zona min-height-et kap, ami
   MINDIG ket sornyi helyet foglal (a leghosszabb cim eseten sem tordel harom sorra),
   fuggetlenul attol, hany sort tolt ki a tenyleges szoveg - igy mind a negy kartyan
   ugyanott kezdodik a torzs. */
.vcard__title {
  font-family: var(--font-family-display); font-weight: var(--font-weight-display);
  font-size: var(--font-size-500); line-height: var(--font-line-height-snug);
  padding: var(--space-5) var(--space-5) 0;
  min-height: calc(var(--space-5) + (var(--font-size-500) * var(--font-line-height-snug) * 2));
}
/* 2026-09-24, Zeno masodik merese: a .vcard__body oldalso paddingje a .vcard__slot
   DOBOZAT (nem csak a szoveget) 24px-kel a title dobozahoz kepest beljebb tolta -
   a slot sajat paddingjenek levetele ezt nem oldotta meg, mert a getBoundingClientRect
   a doboz szelet meri, nem a szoveg kezdopontjat. Ezert az oldalso terkoz lekerult a
   bodyrol es a slotra kerult (ugyanugy var(--space-5), mint a title sajat paddingje):
   igy a slot doboz-szele es a title doboz-szele valoban egyezik (mindketto a
   .vcard bal szeletol indul), a szoveg vizualisan pedig ugyanott kezdodik, mint
   eddig. */
.vcard__body { padding-block: var(--space-4) var(--space-6); display: grid; gap: var(--space-4); }
/* 2026-09-24, Zeno kerese: a szaggatott szegely + mono + korall a Forma-fele
   HELYORZO-stilus volt ("ide meg jon valami"). Miutan Wilder valodi mondatai
   bekerultek, ez mar hamis jelzes - normal torzsszoveg kell helyette. */
.vcard__slot { padding-inline: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-200); }
.verticals__closing { margin-top: var(--space-7); display: grid; gap: var(--space-5); justify-items: center; text-align: center; }
.verticals__closing p { max-width: 52ch; }

@media (min-width: 75rem) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
    padding-left: 0;
    padding-top: calc(var(--size-node) + var(--space-5));
  }
  .timeline__line {
    left: 0; right: 0; top: calc(var(--size-node) / 2); bottom: auto;
    width: auto; height: 1px; transform-origin: left;
  }
  .step__node { left: 0; top: calc(-1 * (var(--size-node) + var(--space-5))); }
  .step__name { padding-top: 0; }
}
/* 2026-09-25: hat lepesdoboz -> 3x2 racs, ezert Peter kerte a gombot kozepre.
   A `space-between` egyetlen gyerek mellett balra tolta. */
.process__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

/* ---------- 5-10. szekcio: egyseges, letezo komponensekbol (nincs meg bespoke latvanyterv) ---------- */

/* DIAGNOSZTIKA - lista + adatsor */
.checklist { display: grid; gap: var(--space-4); margin-top: var(--space-6); }

/* 2026-09-23, Peter kerese: a hat pont ket oszlopban, 3-3, es ami utana jon, az kozepen.
   A `min-width: 0` a racs-gyerekekre KOTELEZO, kulonben a hosszu szoveg nem engedi
   osszehuzodni az oszlopot, es a lap vizszintesen tullog telefonon. */
.diag > * { min-width: 0; }
@media (min-width: 768px) {
  .checklist--2col {
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    column-gap: var(--space-7);
  }
}
.diag__foot {
  margin-top: var(--space-7);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-5);
}
.diag__foot .honesty { max-width: var(--size-measure); }

/* Nyelvvalto a fejlecben. Az EN meg nem mukodik, ezert lathatoan mas allapotban van:
   halvanyabb, nem kattinthato, es a cime megmondja, hogy keszul. */
.lang { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono, monospace);
        font-size: .7rem; letter-spacing: .08em; white-space: nowrap; }
.lang__on { color: var(--color-text); }
.lang__off { color: var(--color-text-muted); opacity: .55; cursor: not-allowed;
             text-decoration: line-through; text-decoration-thickness: 1px; }
.lang__on::after { content: "/"; margin-left: .35rem; color: var(--color-text-muted); opacity: .5; }
.lang--mobile { margin-top: var(--space-4); }
@media (max-width: 63.999rem) { .nav__row > .lang:not(.lang--mobile) { display: none; } }
.checklist li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-raised);
}
.checklist .mono { color: var(--color-accent); }
.checklist h3 { margin-bottom: var(--space-1); }
.checklist p { color: var(--color-text-muted); font-size: var(--font-size-200); }
.datarow { display: grid; gap: var(--space-3); margin-top: var(--space-7); max-width: var(--size-measure); }
.datarow div { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
.datarow dt { color: var(--color-text-muted); }
.datarow dd { margin: 0; font-weight: var(--font-weight-medium); }
.datarow__note { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-100); font-weight: var(--font-weight-regular); }
@media (min-width: 30rem) {
  .datarow div { flex-direction: row; justify-content: space-between; gap: var(--space-4); }
  .datarow dd { text-align: right; }
}
.honesty {
  margin-top: var(--space-6); padding: var(--space-5);
  border-left: 2px solid var(--color-accent);
  color: var(--color-text-muted);
}

/* Garancia */
.guarantee { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 75rem) { .guarantee { grid-template-columns: 1fr 1fr; align-items: start; } }
/* 2026-09-24, Peter kerese: a bal oldal (guarantee__promise) ugyanazt a doboz-kezelest
   kapja, mint a jobb oldal (guarantee__how) - azonos szegely, hatter, belso terkoz. */
.guarantee__how, .guarantee__promise { border: 1px solid var(--color-border-subtle); background: var(--color-bg-raised); padding: var(--space-5); }
.guarantee__how h3 { margin-bottom: var(--space-3); }
.guarantee__how p { color: var(--color-text-muted); font-size: var(--font-size-200); }

/* Kinek nem valo */
.notfor { display: grid; gap: 0; margin-top: var(--space-6); border-top: 1px solid var(--color-border-subtle); max-width: var(--size-measure); }
.notfor li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}
.notfor li::before { content: "-"; font-family: var(--font-family-mono); color: var(--color-accent); }

/* Ki all mogotte */
.founder { display: grid; gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
@media (min-width: 48rem) { .founder { grid-template-columns: auto 1fr; gap: var(--space-8); } }
/* 2026-09-25: a helyorzo dobozbol valodi <img> lett. Az arany 5/9, a fotoe (768x1376):
   igy az egesz alak latszik, vagas nelkul. A `height: auto` kell, kulonben a HTML
   width/height attributumbol szamolt magassag felulirja az aspect-ratio-t. */
.founder__photo {
  width: 100%; max-width: 12rem; height: auto; aspect-ratio: 5 / 9;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
}
@media (min-width: 48rem) {
  .founder__photo {
    width: 17.5rem; max-width: 17.5rem; aspect-ratio: 5 / 9;
  }
  .founder__text { max-width: var(--size-measure); }
}
.founder__fixed { margin-top: var(--space-4); font-weight: var(--font-weight-medium); }
/* 2026-09-25: Peter alairasa a Rolunk szoveg zarasakent. Vektor, ezert a szelesseg
   dont, nem a felbontas. A 15rem a szovegoszlop kb. felet foglalja el. */
.founder__sign { display: block; width: 15rem; max-width: 100%; height: auto; margin-top: var(--space-5); }

/* Teszt-belepo (kartya) */
.quizcard {
  margin-top: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-raised);
  padding: var(--space-6);
  display: grid; gap: var(--space-4);
}
@media (min-width: 48rem) { .quizcard { grid-template-columns: 1fr auto; align-items: center; } }
.quizcard p { color: var(--color-text-muted); }

/* Foglalas - Cal.com beagyazott naptar (2026-09-24, a fiok mar megvan).
   A #cal-booking-nek fix min-height kell, kulonben az embed betoltese elott/
   nelkul 0px magas es semmi nem latszik -- ez adta a "ures dobozkent jelenik meg"
   kockazatot, amit a brief kifejezetten tiltott. */
.booking-slot { margin-top: var(--space-6); }
.booking-embed { min-height: 40rem; }
@media (max-width: 47.99rem) { .booking-embed { min-height: 34rem; } }
.booking-embed__fallback { margin-top: var(--space-4); text-align: center; }
.booking-embed__fallback[hidden] { display: none; }

/* footer */
.foot { padding-block: var(--space-7); border-top: 1px solid var(--color-border-subtle); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); color: var(--color-text-muted); }
.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.foot__soon { color: var(--color-text-muted); opacity: .55; cursor: not-allowed; }


/* ---------- motion ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--space-4));
  transition: opacity var(--duration-slow) var(--easing-standard),
              transform var(--duration-slow) var(--easing-standard);
  transition-delay: calc(var(--i, 0) * var(--duration-stagger));
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .index__rule { transform: scaleX(0); transition: transform var(--duration-draw) var(--easing-draw); }
.js .is-in .index__rule, .js .index.is-in .index__rule { transform: scaleX(1); }
.js .timeline__line { transform: scaleY(0); transition: transform var(--duration-draw) var(--easing-draw); }
.js .timeline.is-in .timeline__line { transform: scaleY(1); }
@media (min-width: 75rem) {
  .js .timeline__line { transform: scaleX(0); }
  .js .timeline.is-in .timeline__line { transform: scaleX(1); }
}
.js .plot .curve { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .plot.is-in .curve { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duration-draw) var(--easing-draw) var(--duration-base); }
.js .plot .dot, .js .plot .area { opacity: 0; transition: opacity var(--duration-slow) var(--easing-standard); }
.js .plot.is-in .dot { opacity: 1; transition-delay: calc(var(--duration-draw) + var(--i, 0) * var(--duration-fast)); }
.js .plot.is-in .area { opacity: var(--opacity-subtle); transition-delay: var(--duration-draw); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
  .js .reveal, .js .index__rule, .js .timeline__line { opacity: 1; transform: none; }
  .js .plot .curve { stroke-dashoffset: 0; }
  .js .plot .dot { opacity: 1; }
  .js .plot .area { opacity: var(--opacity-subtle); }
}