/* whitedog Consulting — website (site/)
   ÖNÁLLÓ stíluslap: SEMMILYEN közös fájl a hero-laborral (proto/hero) — a
   szétválasztás garanciája, hogy a laborban végzett munka fizikailag nem
   érheti el a website-ot.

   RESZPONZÍV RENDSZER (62. kör): desktop-first, három töréspont —
   ≤1024 (tablet: 4-es gridek 2×2, paddingok 48), ≤768 (mobil: hamburger-
   fejléc, hero mobil-sorrend, gridek 1 oszlop, vizuál a szöveg fölött),
   ≤480 (kis mobil: 2×2-k is 1 oszlop). A rács-elrendezések KÖZÖS
   OSZTÁLYOKBAN élnek (wd-grid-3 · wd-grid-4 · wd-media-split · wd-step ·
   wd-pillar · wd-contact-grid · wd-cta-band) — az inline stílus csak
   színt/paddingot/keretet hordoz; a szekció-paddingok reszponzív
   felülírása media queryben, !important-tal (az inline drótváz-padding
   ellen — szándékos, dokumentált kivétel).

   1. STÍLUS-KÖR (78. kör): szín-token rendszer (.wd-dark / .wd-light
   blokk-osztályok — NINCS globális téma-váltó, minden blokk maga
   deklarálja a módját) + alap-tipográfia (Mohave-label ▷ ikonnal ·
   Onest Black H2 · 18px Onest Light kenyérszöveg) + copy-szendvics
   (.wd-section-head — egységes label→cím→lead eltartás). Referencia:
   Website-styles.png — KIZÁRÓLAG stílus-minta, tartalmilag nem forrás. */

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

/* --- SZÍN-TOKENEK (1. stílus-kör) -------------------------------------------
   Három alapszín: FEHÉR #ffffff · INDIGÓ #1f133d · AQUA #3cc4c6 — minden
   token ezekből származik (a muted/line/card a két alapszín alfa-változata).
   A lila #441BE9 ebben a körben tudatosan NINCS bekötve (később a dark-panel
   szeparátorok/form-mezők kapják). A tokenek BLOKK-szinten élnek: a szekciók
   .wd-dark / .wd-light osztállyal deklarálják a módjukat — nincs globális
   téma-kapcsoló. KIOSZTÁS: dark = fejléc + landing-hero + kapcsolat-blokk +
   lábléc (mindkét oldalon); MINDEN MÁS light (a termék-hero és a közbeszúrt
   CTA-sávok is — Gábor visszaigazolására vár, lásd a kör riportját). */
.wd-light {
  /* 105. kör — AQUA TELI FELÜLET SZÖVEGSZÍNE: a módot a BEFOGLALÓ elem
     dönti el, és a döntést a CSS-ÖRÖKLÉS viszi (nem a szelektor-sorrend):
     az `--on-accent` a legközelebbi mód-osztályról érkezik. LIGHT
     környezetben az aqua felületen FEHÉR a szöveg/ikon. */
  --on-accent: #ffffff;
  --bg: #ffffff;
  --text: #1f133d;
  --text-muted: #1f133d; /* 87. kör: nincs halványítás — telibe indigó */
  --accent: #3cc4c6;
  --line: #EBE8EF; /* 121. kör: egységes light vonalszín (Gábor) — a korábbi
     rgba(31,19,61,0.07) helyett teli, kevert érték */
  --card-bg: rgba(31, 19, 61, 0.045);
  /* KÁRTYA-GRADIENS — M2 (112. kör): a labor ÁTERESZTŐ receptje (94/97. kör,
     cardLightAlpha 0.3 beégetve): közép = fehér 30%, szél = #e6e3ec 30% — a
     kártya mögött a tintázott deco átsejlik (blur-rel párban). */
  --card-center: color-mix(in srgb, #ffffff 30%, transparent);
  --card-edge: color-mix(in srgb, #e6e3ec 30%, transparent);
  /* HIBA-SZÍN (100. kör, űrlap-validáció): a narancs #E14E0A a FÜGGŐ-jelölés
     foglalt színe, ezért a hiba önálló tokent kap. Mért kontraszt: light
     #b3261e fehéren 6.54:1 · dark #ff8a7a az indigón 7.52:1 (a mező
     kitöltésén 6.6:1) — mindkettő a 4.5:1-es kis-szöveg küszöb felett. */
  --wd-error: #b3261e;
  background: var(--bg);
  color: var(--text);
}
.wd-dark {
  /* 105. kör: DARK környezetben az aqua felületen INDIGÓ a szöveg/ikon
     (lásd a light blokk magyarázatát). */
  --on-accent: #1f133d;
  --bg: #1f133d;
  --text: #ffffff;
  --text-muted: #ffffff; /* 87. kör: nincs halványítás — telibe fehér */
  --accent: #3cc4c6;
  /* 107. kör: MINDEN szeparátor-típus (szekció-vonal, lista-vonal,
     blokk-vonal) a dark felületeken EGYSÉGESEN #342066, teli opacitással. */
  --line: #342066;
  /* 107. kör: a dark felület BEVITELI MEZŐINEK háttere (a --card-bg eddig
     csak itt élt) — teli #2B1A54. */
  --card-bg: #2b1a54;
  /* M2 (112. kör): a DARK kártya színe a labor kalibrált értéke
     (lab.darkCard + cardAlpha), a szél 15%-kal sötétítve, azonos alfával.
     119. kör: Gábor friss kalibrációja — #140c27 @40% (a defaults.v5.json
     2026-08-26-i exportjából átvezetve). */
  --card-center: color-mix(in srgb, #140c27 40%, transparent);
  --card-edge: color-mix(in srgb, color-mix(in srgb, #140c27, #000 15%) 40%, transparent);
  --wd-error: #ff8a7a; /* 100. kör — lásd a light blokk mérését */
  background: var(--bg);
  color: var(--text);
}

/* --- VERTICAL TRIM — „cap height to baseline" (82. kör) ----------------------
   A függőleges illesztés a betűk VIZUÁLIS élei közt mérődik: a felső elem
   BASELINE-jától az alsó elem CAP-HEIGHT tetejéig (Figma „vertical trim: cap
   height to baseline") — NEM a sorbox-élek közt. Technika: a sorbox fölötti
   levegő (half-leading + a cap fölötti ascender-rész) és alatta a
   (half-leading + descender) NEGATÍV MARGÓVAL kioltva — az elem margója TISZTA
   TRIM, térközt NEM hordoz:
       margin-top = −trimTop · margin-bottom = −trimBot
   A TÉRKÖZ a KONTÉNERÉ (83. kör): flex/grid `gap` a --sp-* skálából. Két
   trimmelt elem közti mért távolság így PONTOSAN a konténer gap-je (a felső
   baseline-jától az alsó cap-tetejéig), és új elem beszúrása után nincs mit
   hangolni.
   FONT-METRIKÁK (canvas fontBoundingBox + „H" cap-height, mérve):
       Onest  — asc 0.97 · desc 0.30 · cap 0.707 · normal sorköz 1.28
       Mohave — asc 0.99 · desc 0.40 · cap 0.75  · normal sorköz 1.40
   Minden trimmelt elemen KÖTELEZŐ a `--tl` (a sorköz unitless számként, a
   line-height ebből olvas — a képlet half-leadinget számol belőle).
   ÚJ SZÖVEG-ELEM: h1–h4/p/li/.wd-label alapból trimmelt; szöveget hordozó
   DIV-nél a `.wd-trim` osztály (+ Mohave-nál a metrikák). */
:root {
  /* === GLOBÁLIS 1440-SKÁLA (83. kör) =====================================
     EGYETLEN alap-egység: --u = 1px @1440. MINDEN px-érték ezen keresztül
     számol (tipográfia, térközök, paddingok, stroke, ikonok), így 1440-en
     pixelre a megadott érték, 1920-on ×1.333, kis kijelzőn ×0.75-ig
     zsugorodik. Plafonok: 0.75× alsó (a lab display-tipó konvenciója),
     1.35× felső. A töréspont-rendszer (1024/768/480) VÁLTOZATLAN — ez
     méret-skálázás, nem layout-váltás; a media-query-beli paddingok
     szándékosan FIX px-ek (a töréspont sajátjai). */
  --u: clamp(0.75px, 0.0694444vw, 1.35px);

  /* TÉRKÖZ-SKÁLA — Gábor skálája (32 · 36 · 40 · 48 · 52) + a kisebb belső
     fokozatok (4 · 8 · 12 · 16 · 20 · 24 · 28) és a nagy szekció-tételek
     (56 · 80). A térközt MINDIG a KONTÉNER adja (flex/grid gap), nem az
     elem margója — a trim alapértelmezés (lásd lentebb). */
  --sp-4: calc(4 * var(--u));
  --sp-8: calc(8 * var(--u));
  --sp-12: calc(12 * var(--u));
  --sp-16: calc(16 * var(--u));
  --sp-20: calc(20 * var(--u));
  --sp-24: calc(24 * var(--u));
  --sp-28: calc(28 * var(--u));
  --sp-32: calc(32 * var(--u));
  --sp-36: calc(36 * var(--u));
  --sp-40: calc(40 * var(--u));
  --sp-48: calc(48 * var(--u));
  --sp-52: calc(52 * var(--u));
  --sp-56: calc(56 * var(--u));
  --sp-64: calc(64 * var(--u)); /* 87. kör: szekció-padding + csoport-gap */
  --sp-80: calc(80 * var(--u));

  /* TIPOGRÁFIA — a kis fokozatok OLVASHATÓSÁGI PADLÓT kapnak (max(…)): a
     --u 0.75-es alja alatt sem esnek a korábbi clamp-padlók alá. A display-
     méretek (24/40/44 + a hero) padló nélkül, tisztán skálázódnak. */
  --fs-11: max(10px, calc(11 * var(--u)));
  --fs-13: max(12px, calc(13 * var(--u)));
  --fs-14: max(12px, calc(14 * var(--u)));
  --fs-15: max(13px, calc(15 * var(--u)));
  --fs-16: max(14px, calc(16 * var(--u)));
  --fs-17: max(15px, calc(17 * var(--u)));
  --fs-18: max(15px, calc(18 * var(--u)));
  --fs-19: max(16px, calc(19 * var(--u)));
  --fs-22: max(18px, calc(22 * var(--u)));
  --fs-24: calc(24 * var(--u));
  --fs-40: calc(40 * var(--u));
  --fs-44: calc(44 * var(--u));

  /* FONT-METRIKÁK a trimhez — Onest-alap (Mohave-nál elemenként felülírva) */
  --fm-asc: 0.97;
  --fm-desc: 0.3;
  --fm-cap: 0.707;
  --tl: 1.28;

  /* PER-FONT BASELINE-KORREKCIÓ (84. kör) — EGY KAR minden Mohave-elemre
     (label · gomb · headline · nav): pozitív érték = lejjebb.
     ⚠ MÉRVE: a Mohave metrikus cap-je 74.94/100 em, a VALÓDI tinta-cap
     ('H') 75.00/100 em → az eltérés −0.0006em, azaz a valódi trim
     (text-box-edge: cap) után NINCS mit korrigálni; a korábbi „felcsúszás"
     a negatív-margós ál-trim sorbox-centrálásából jött (a gomb-felirat mért
     optikai közepe most 0.00 px). Ezért a default 0 — a kar marad, ha
     Gábor ízlésre mégis mozdítaná. */
  --mohave-shift: 0em;
}
/* Mohave-metrikák a display-elemekre (label · hero-eyebrow/headline · gombok) */
#landing .wd-label,
#hero .wd-label,
#copy .eyebrow,
#copy h1,
#landing .wd-sec--hero h1,
#copy .cta,
#landing .wd-cta,
#wd-header .wd-head-nav a {
  --fm-asc: 0.99;
  --fm-desc: 0.4;
  --fm-cap: 0.75;
  --tl: 1.4;
}
/* A Mohave OPTIKAI KORREKCIÓJA (84. kör): a font cap-doboza a valódi tintához
   képest felfelé csúszik, ezért minden Mohave-elem a --mohave-shift értékkel
   LEJJEBB kerül (a layout érintetlen — tisztán optikai igazítás). */
#landing .wd-label,
#hero .wd-label,
#copy .eyebrow,
#copy h1,
#landing .wd-sec--hero h1,
#landing .wd-cta,
#copy .cta,
#wd-header .wd-head-nav a {
  translate: 0 var(--mohave-shift);
}
/* A TRIM ALAPÉRTELMEZÉS (83. kör): MINDEN szöveg-elem cap-to-baseline
   trimmel renderel — a `.wd-trim` már csak kapaszkodó a szöveget hordozó
   DIV-eknek. A térközt KIZÁRÓLAG a konténer adja (flex/grid gap a
   skálából): új szöveg-elem beszúrása után nincs mit hangolni. */
.wd-trim,
#copy .eyebrow,
#copy h1,
#copy .sub,
:where(#hero, #landing) :where(.wd-label, h1, h2, h3, h4, p, li) {
  --trim-top: calc((var(--tl) - var(--fm-asc) - var(--fm-desc)) / 2 + var(--fm-asc) - var(--fm-cap));
  --trim-bot: calc((var(--tl) - var(--fm-asc) - var(--fm-desc)) / 2 + var(--fm-desc));
  line-height: var(--tl);
  margin-top: calc(var(--trim-top) * -1em);
  margin-bottom: calc(var(--trim-bot) * -1em);
}

/* VALÓDI TRIM (84. kör) — ahol a böngésző tudja, a SORBOX maga zsugorodik a
   cap-height↔baseline dobozra (`text-box-trim`), nem negatív margóval
   kompenzálunk. Ez a különbség MÉRHETŐ: a gomb/label felirata optikailag
   középen ül, és a kijelölés/találati terület is a valós dobozt mutatja
   (a negatív margós út a sorboxot érintetlenül hagyta). A fenti blokk
   FALLBACK marad a régebbi böngészőknek. */
@supports (text-box-trim: trim-both) {
  .wd-trim,
  #copy .eyebrow,
  #copy h1,
  #copy .sub,
  :where(#hero, #landing) :where(.wd-label, h1, h2, h3, h4, p, li) {
    margin-top: 0;
    margin-bottom: 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  /* GOMBOK / CHIPEK: a felirat sorboxa a cap-dobozra vág, a függőleges
     padding így SZIMMETRIKUSAN középre teszi (line-height 1 + trim). */
  #copy .cta,
  #landing .wd-cta,
  #wd-header .wd-head-nav a.wd-nav-cta,
  .wd-pending-frame::before {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

html {
  height: 100%;
  /* Sima görgetés minden oldalon belüli horgony-ugrásra (menü, CTA-k). */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } /* azonnali ugrás, animáció nélkül */
}

body {
  min-height: 100%;
  overflow-x: hidden;
  background: #1f133d; /* a hero indigója — a landing fehér blokkjai fedik le */
}

/* --- STICKY FEJLÉC — KÉTÁLLAPOTÚ (81. kör, standard recept) -----------------
   ALAPÁLLAPOT (oldal teteje, landing): a lab-hero fejléce — ÁTLÁTSZÓ háttér
   (a hero-deco átlátszik), levegős paddingok (36/80/20 @1440 — 113. kör),
   1440-bázisú logó- és nav-tipó (Mohave), a Kapcsolat keretes gomb.
   BETAPADT ÁLLAPOT (.is-stuck, 113. kör): a kompakt méret akkor vált, amikor
   a fejléc a hero COPY-jára ér (site.js méri), a HÁTTÉR pedig SCROLL-VEZÉRELT
   rámpán telítődik (--head-bg-a 0→1 a rámpa-hossz alatt) — nem hirtelen.
   A TERMÉKOLDALON a fejléc MINDIG kompakt és teli (CSS-ből, scroll nélkül).
   MOBIL (≤768): hamburger-fejléc — saját fix paddingok, csak a háttér vált. */
/* 128. kör — EGYETLEN MÉRET-ÁLLAPOT: a kétállású (top ↔ sticky) logó/padding-
   transzformáció KIVEZETVE — mindenhol a KOMPAKT (korábbi sticky) méretek
   érvényesek, tehát görgetéskor nincs méret-váltás. A HÁTTÉR marad kétállású:
   a lap tetején átlátszó, legörgetve a 113-as scroll-rámpán telítődik
   (--head-bg-a). Ezzel a `--logo-scale` @property és a padding-átmenet
   okafogyottá vált (a 85. körös interpoláció-trükk is).
   MÉRVE (a váltás előtt, 1440): top 99.47px sáv / 35.2px logó → sticky
   79.47px sáv / 33.09px logó; a sáv magasságát a NAV (42.48px) adja, nem a
   logó. A 128. körtől: sáv 79.47px MINDENHOL, a logó 42px (+8.9px — a
   nav-magasság alatt marad, így a sáv NEM nő). */
#wd-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--sp-32);
  /* Az oldal EGYSÉGES vízszintes margója (a szekciók 80 px-e). */
  /* 113. kör: a TOP-ÁLLAPOT levegősebb — a Kapcsolat-gomb felett ~36px (mint
     alul a logósáv alatt a hero 32-je), így a betapadásnak valódi mozgásútja
     van; a kompakt (stuck) érték a korábbi marad (19/17 ≈ a 92. körös
     22/20 × 0.85). A --head-scale szorzó kivezetve — a paddingot közvetlenül
     a transition viszi. */
  /* EGY állapot: a korábbi KOMPAKT paddingok (19/17) mindenhol. */
  padding: calc(19 * var(--u)) var(--sp-80) calc(17 * var(--u));
  /* 113. kör: a fejléc háttere SCROLL-VEZÉRELT (--head-bg-a, site.js): a
     beúszás akkor kezdődik, amikor a fejléc a hero COPY-jára ér, és
     fokozatosan telítődik (a korábbi hirtelen 24px-es küszöb helyett). A
     termékoldalon és nyitott mobil-menünél fixen teli. */
  background: color-mix(in srgb, var(--bg, #1f133d) calc(var(--head-bg-a, 0) * 100%), transparent);
  border-bottom: 1px solid transparent;
  /* Csak a HÁTTÉR vált — a méret nem (128. kör). */
  transition: background-color 0.25s ease;
}
/* (Az `.is-stuck` osztályt a site.js továbbra is felteszi — a 128. körtől
   MÉRET-hatása nincs, a scroll-spy és a jövőbeli állapot-függő szabályok
   kapaszkodója marad.) */
/* A termékoldalon nincs hero-copy küszöb: a fejléc fixen teli. */
body.page-product #wd-header { --head-bg-a: 1; }
/* Nyitott mobil-menü alatt a fejléc sosem átlátszó (a lenyílás opak). */
#wd-header.nav-open { --head-bg-a: 1; }

#wd-header a { text-decoration: none; } /* 126. kör — az UA-aláhúzás le */
#wd-header .wd-head-logo { display: flex; align-items: center; flex-shrink: 0; }
#wd-header .wd-head-logo img {
  /* 128. kör: EGY méret (a kétállású skálázás kivezetve), ~10px-szel
     magasabb: 33.09 → 42.00 @1440. A 42px a NAV-magasság (42.48) ALATT
     marad, ezért a fejléc-sáv magassága NEM nő. */
  height: calc(42 * var(--u));
  width: auto;
  display: block;
}

#wd-header .wd-head-nav {
  display: flex;
  align-items: center;
  gap: calc(34 * var(--u)); /* 84. kör: nagyobb menü-térköz (referencia) */
  margin-left: auto;
}
/* Nav-tipó a lab 1440-bázisán: Mohave 600, 14px@1440. */
#wd-header .wd-head-nav a {
  font-family: 'Mohave', 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
#wd-header .wd-head-nav a:hover { color: var(--text); }
/* Scroll-spy (site.js, csak landing + desktop): az éppen fókuszban lévő
   szekció linkje — drótváz-jelölés: aláhúzás + fehér. */
#wd-header .wd-head-nav a.active {
  /* 92. kör: az aktív menüpont AQUA (a betű is).
     126. kör: az ALÁHÚZÁS LEKERÜLT — a „sehol nincs aláhúzás" szabály a
     scroll-spy jelölésére is áll; az aktív állapotot az aqua szín viszi. */
  color: var(--accent, #3cc4c6);
  text-decoration: none;
}
/* A Kapcsolat menüpont keretes gomb (a lab hv5-nav-cta mintája) — a kompakt
   állapotban a betűvel együtt zsugorodik (a padding em-ben követi). */
#wd-header .wd-head-nav a.wd-nav-cta {
  border: 1px solid rgba(255, 255, 255, 0.85);
  /* 113. kör: a gomb arányai a CTA-k felé húznak — KEVESEBB oldalsó, TÖBB
     alul-felül (a korábbi 13/24px @14 lapos volt): 15/18px @14. A betűméret
     változatlan, és sticky állapotban sem zsugorodik. */
  padding: 1.071em 1.286em;
  font-size: var(--fs-14);
  color: var(--text);
}
#wd-header .wd-head-nav a.wd-nav-cta.active { text-decoration: none; }

/* Nyelvválasztó-helyfoglaló a menü végén: inaktív span (nem link), wd-pending
   jelöléssel — a színét a függő-jelölés közös szabálya adja lentebb. */
#wd-header .wd-head-nav .wd-pending {
  font-family: 'Mohave', 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.15em;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  #wd-header,
  #wd-header .wd-head-logo img,
  #wd-header .wd-head-nav a.wd-nav-cta { transition: none; } /* átmenet nélkül vált */
}

/* Mobil fejléc-elemek — desktopon rejtve. */
.wd-nav-toggle,
.wd-head-contact { display: none; }

/* --- A DECO FIX RÉTEGE (M1 · 111. kör — a labor 96. körös architektúrája,
   #lab-deco → #deco-layer): z0, viewport-fix, SOSEM mozdul; az élő canvas ÉS
   a statikus PNG-stack ugyanitt él (a váltás helyben történik — nincs
   handoff-drift). A réteg MINDIG teli (opacity 1) — a tartalom alatti
   halványítást az M2 szekció-receptjei végzik. */
/* 128. kör — A DECO GEOMETRIÁJA PARAMÉTEREZETT, és MINDEN oldalon AZONOS:
   viewport-magasságú (100vh) négyzet, jobbra zárva, fixen. A 127. körös
   „a termékoldalon a hero magasságához méretezzük" megoldás KIVEZETVE: a deco
   a teljes oldalt kísérő dekoráció, a megjelenése nem függhet a felső szekció
   (karakterhossztól függő) magasságától.
   A KÉT KAR — `--deco-size` (a négyzet oldala) és `--deco-shift-x` (jobbra
   tolás) — SZÁNDÉKOSAN itt él: álló képarányú eszközökön / mobilon az
   illesztés változni fog (a deco kissé jobbra kitolva, ~1/3-a levágva), és
   akkor elég ezt a két értéket felülírni egy media-queryben. A tint-maszk és
   a lyuk-kártya UGYANEZT a két kart olvassa — a geometria egy forrásból jön. */
:root {
  --deco-size: 100vh;
  --deco-shift-x: 0px;
}
#deco-layer {
  position: fixed;
  top: 0;
  right: var(--deco-shift-x);
  height: var(--deco-size);
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none; /* az interakció a .hero-deco hit-arean él */
}
#deco-layer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#deco-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s linear;
}
#deco-layer img.show { opacity: 1; }
/* STATIC VÁLTÁS HELYBEN (C-állapot): a canvas tűnik el, a PNG marad. */
/* 117. kör: a rejtés VISIBILITY (nem display) — a display-váltás a C→B
   visszainduláskor layoutot + réteg-újraépítést kényszerített (~50ms-os
   határ-frame, mérve); a visibility paint-szintű: a réteg a compositoron
   marad, a feltámasztás olcsó. A canvas backing a display:none alatt is
   megmaradt (103. kör), tehát a C-fázis memória-költsége nem nő. */
body.deco-static-now #deco-layer canvas { visibility: hidden; }

/* --- HERO (81. kör): V5 ASCII-hero — a labor kalibrált hero-élményének
   MÁSOLATA (hv5-* → site-osztálynevek). A hero a TELJES first view: fix
   (átlátszó) fejléc + copy-sáv + alul a logó-marquee; a DECO a teljes hero
   mögötti háttérréteg (canvas vagy statikus PNG), jobbra zárt 1:1. */
#hero {
  position: relative;
  /* 84. kör: a deco mobilon SZÉLESEBB a viewportnál (1:1, a hero magasságához
     méretezve, középre igazítva) — a túllógó rész itt vágódik. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh; /* mobil böngésző-chrome mellett is valós first view */
  /* 107. kör: a hero FELSŐ és ALSÓ paddingja EGYSÉGESEN 32px @1440 — a
     korábbi „a fejléc magasságát kiadó" felső padding (≈99px) helyett. A fix
     fejléc így a hero fölé lóg (a copy a maradék sávban van középre zárva),
     és görgetve több elem kerül a sticky állapotba. */
  padding-top: calc(32 * var(--u));
  padding-bottom: calc(32 * var(--u));
  /* M1 (111. kör): a hero háttere ÁTLÁTSZÓ — a fix #deco-layer süt át (a
     .wd-dark token-háttér eltakarná); az indigót a body adja. */
  background: transparent;
}
/* (A 81. körös sticky-parallax KIVEZETVE az M1 körben — a lab réteg-modellje
   váltotta: fix #deco-layer + in-flow hero, a szekciók fölötte gördülnek. A
   parallax-kód params-vezérelt és a recept kikapcsolja.) */

/* HERO COPY POZÍCIÓ: vízszintesen a szekciók 80px-e (85. kör); függőlegesen
   a 114. körtől a .hero-copy-track közép-képlete (lentebb) — a fejléc-alj és
   a logósáv-tető közti sáv közepe, tisztán layoutból. */
.hero-main {
  /* ⚠ SZÁNDÉKOSAN NEM POSITIONED (82. kör — regresszió-javítás): a deco
     absolute gyerekként a legközelebbi POZICIONÁLT felmenőhöz méretezik. Ha
     ez a sáv `position: relative`-t kap, a deco containing blockja a sáv lesz
     → a raszter a fejléc alja és a marquee teteje KÖZÉ szorul (ez volt a hiba;
     a lab .hv5-main-ja is direkt pozicionálatlan). Így a containing block a
     #hero PADDING-BOXA: a deco top:0/height:100% a fejléc-helyfoglaló padding
     mögé és a marquee mögé is benyúlik. */
  flex: 1;
  display: flex;
  align-items: center;
  /* 85. kör: a hero vízszintes paddingja EGYEZIK a tartalmi szekciókéval. */
  padding: var(--sp-24) var(--sp-80);
}

/* DECO = HÁTTÉRRÉTEG a TELJES hero mögött (a lab hv5-deco geometriája): a
   szekció tetejétől az aljáig — a fejléc és a logó-marquee MÖGÉ is benyúlik
   (azok z1-en ülnek fölötte) —, 1:1, a jobb széle a viewport jobb szélén.
   A .hero-main SZÁNDÉKOSAN nem positioned: a deco így a #hero-hoz méretezik. */
.hero-deco {
  position: absolute;
  z-index: 0;
  right: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1 / 1;
  touch-action: pan-y; /* a vízszintes swipe a slideré, a görgetés az oldalé */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
/* A canvas a deco-box gyereke, kitölti (a backing-store méretét a JS méri). */
#hero-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}
#hero-canvas.hero-canvas-fade { opacity: 0; }

/* GYENGE-KLIENS STATIKUS ÚT (body.hero-static): a deco-boxban a canvas
   helyett előre exportált <img>-ek (assets/static/deco-<scene>@1x/@2x.png) —
   a rács-motor el sem indul; a slide-váltás a képek közti crossfade (a
   transition-duration-t a staticDeco írja a swap-ívből). A PNG-k átlátszóak,
   az indigót a hero adja. */
body.hero-static #hero-canvas { display: none; }
.hero-static-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none; /* a swipe/drag a deco-boxé marad */
}
.hero-static-img.show { opacity: 1; }

/* HERO-MOZGÁSOK (113. kör) — SORONKÉNTI KASZKÁD, a decóval szinkronban.
   A copy sorai (eyebrow → cím → lead → CTA-sor) ALULRÓL érkeznek fade-del,
   soronkénti késleltetéssel; kilépéskor FELFELÉ tűnnek el (rövidebb ívvel).
   Az érkezés (első betöltés) ugyanez a kaszkád (#copy.hero-copy-hidden
   levételekor), a CTA-sor a 4. lépcső. A deco párja: field-morph (érkezésnél
   a semmiből felépülő mező — js/hero/main). Az időzítés HANGOLHATÓ
   változókból él (lent) — a be-ív a swap-arc felébe (~500 ms) illeszkedjen.
   reduced-motion: nincs mozgás, csak fade (lentebb). */
.hero-slide { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #copy { transition: none; }
}
/* Copy-slide: grid-stack — minden slide ugyanabban a cellában, a konténer
   magassága a legmagasabb slide-é (nincs magasság-ugrás váltáskor).
   82. kör: `align-items: end` — a slide-ok az ALJUKHOZ igazodnak (a fix
   CTA-sorhoz legközelebbi él), így az alcím baseline → CTA térköz MINDEN
   slide-on pontosan a 52px; a slide-ok magasság-különbsége FELÜL nyílik. */
#copy .hero-slides { display: grid; align-items: end; }
#copy .hero-slides .hero-slide { grid-area: 1 / 1; }
/* Ideiglenesen rejtett slide (copy vár) — a DOM megmarad, a slider nem járja. */
#copy .hero-slides .hero-slide-off { display: none; }

/* Bogyó-navigáció: desktopon a hero jobb szélén függőlegesen, mobilon alul
   vízszintesen. Desktopon a 44×44 találati terület marad (a látható bogyó
   ~fele a korábbinak — 64. kör); aktív: kitöltött + nagyobb. Jelöletlen
   (unstyled) alap — Gábor később egyedi SVG-t hoz. */
/* 87. kör: a bogyók közti rés −20% — a 44px-es TALÁLATI TERÜLET megmarad,
   a szűkítést a gombok kis negatív függőleges margója adja. */
.hero-dot { margin-block: calc(-4.4 * var(--u)); }
.hero-dots {
  position: absolute;
  z-index: 2;
  right: calc(18 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-dot {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hero-dot::before {
  content: "";
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.hero-dot.is-active::before {
  background: #fff;
  border-color: #fff;
  transform: scale(1.5);
}

/* --- RÉTEG-SZÉTVÁLASZTÁS (114. kör) — három felelősség, három réteg:
   1) POZICIONÁLÁS: a .hero-copy-track a flex-item, amit a .hero-main
      centrál + az alábbi margó pozicionál (LAYOUT — se transform, se top);
   2) PARALLAX: a track transformja (js/hero/layout — egy írás/frame);
   3) KASZKÁD: a sorok SAJÁT translate-je (CSS-átmenet, lentebb).
   A 113. kör hibája: a #copy-n a top-eltolás + a parallax-transform + a
   kaszkád-állapotok EGY elemen ültek, és a top cél-képlete a logósávot nem
   számolta be → leesett copy. */
.hero-copy-track {
  position: relative;
  z-index: 1;
  max-width: 80%;
  /* 116. kör — POINTER-ÁTLÁTSZÓSÁG: a track KONTÉNER, nem interakció-felület
     — enélkül a teljes doboza elnyelte a pointer-eseményeket a z0-s
     .hero-deco hit-area elől (a kurzor-csóva a copy területe fölött nem élt;
     a 114-es wrapper regressziója). Az interaktív elemek (CTA-k) lentebb
     kapják vissza a pointer-events: auto-t. */
  pointer-events: none;
  /* KÖZÉP-KÉPLET: a copy a FEJLÉC ALJA és a LOGÓSÁV TETEJE közti sávban áll
     középen (felül a fejléc / copy-tető, alul a CTA-alj / logósáv rése
     EGYENLŐ). A .hero-main flex-centrálása a (hero padding-top … logósáv-tető)
     sávra centráz — a flex a MARGIN-boxot igazítja, ezért az
     M = fejléc-magasság − hero-padding-top felső margó a közepet PONTOSAN
     (fejléc-alj + logósáv-tető)/2-re tolja, minden viewporton, mérés nélkül.
     A --wd-head-h-t a site.js adja (top-állapotú fejléc, betöltés + fontok +
     resize után frissítve); a fallback a mért ~99.5px@1440 a --u skálán. */
  margin-top: calc(var(--wd-head-h, calc(99.5 * var(--u))) - calc(32 * var(--u)));
}

/* --- PARALLAX KIVEZETVE (118. kör, Gábor döntése) — a hero elemei nem
   viselnek scroll-csatolt transformot. A parallax-élményt a FIX-HERO adja
   szerkezetből (lentebb): a hero elemei a deco mintájára FIXEK, a tartalom
   gördül föléjük. */

/* --- FIX-HERO (118. kör, a 117-es terv szerint) -----------------------------
   Réteg-rend: deco z0 (fix) · .hero-fix z1 (fix: copy-track + CTA-k + bogyók
   + logósáv) · #landing z2 (a szekciók a fix hero fölé gördülnek) · fejléc z4.
   A #hero a folyamban 100vh-s SPACER marad — horgonyok, scroll-spy és a
   deco-életciklus (heroVisible a #hero gBCR-jéből) érintetlen. A .hero-deco
   hit-area a SPACER gyereke (a heróval gördül — fixen a szekciók fölé érve
   elfogná a kattintásokat; a 96. körös kurzor-koordináta út változatlan).
   ELTŰNÉS (kritikus — a dark szekciók ÁTERESZTŐ fátylak, a fix elemeknek
   TELJESEN el kell tűnniük, mielőtt a tartalom föléjük ér): scroll-vezérelt
   fade a compositoron — copy/CTA/bogyók a 0→60vh, a logósáv a 0→100vh
   szakaszon; az első dark szekció ~3000px-nél jön, addigra minden 0. A
   hit-teszt + fókusz kapuja a visibility (külön, fő-szálas animáció a
   99%-nál — a composited opacity-t nem rontja el): elhalványulva a CTA/bogyó
   nem kattintható és nem fókuszálható. A visszaút szimmetrikus (a timeline
   állapot-mentes — nincs állapotgép, nincs időzítés-verseny).
   KAPU: @supports scroll-driven + desktop (≥769) — e nélkül (régebbi
   Safari/Firefox, mobil) a wrapper display:contents = a mai in-flow modell
   (tiszta degradáció: a hero a page-dzsel gördül ki). reduced-motion: a fade
   ITT NEM dekoráció, hanem funkció (átderengés-gát) — nincs kikapcsolva. */
.hero-fix { display: contents; }
@supports (animation-timeline: scroll()) {
  @media (min-width: 769px) {
    .hero-fix {
      display: flex;
      flex-direction: column;
      position: fixed;
      inset: 0;
      z-index: 1;
      /* a #hero spacer függőleges paddingjainak mása (contents-módban a
         spaceré érvényesül — itt a fix doboz adja ugyanazt a keretet) */
      padding: calc(32 * var(--u)) 0;
      /* a wrapper nem interakció-felület: az események a hit-area-ra /
         szekciókra esnek; az interaktív elemek lentebb kapnak auto-t */
      pointer-events: none;
    }
    .hero-fix .hero-dot { pointer-events: auto; }
    /* eltűnés: fade (composited) + visibility-kapu (külön animáció) */
    .hero-fix > .hero-main,
    .hero-fix > .hero-dots {
      animation: wd-hero-fade linear both, wd-hero-gate linear both;
      animation-timeline: scroll(root block), scroll(root block);
      animation-range: 0px 60vh, 0px 60vh;
    }
    .hero-fix > .hero-logos {
      animation: wd-hero-fade linear both, wd-hero-gate linear both;
      animation-timeline: scroll(root block), scroll(root block);
      /* a visibility-flip (a gate-range ~99.5%-ánál) NE a deco-életciklus
         C-határára (≈100vh) essen — 92vh-nál a fade már 0.08-on jár, a
         flip láthatatlan, és a két munka nem torlódik egy frame-be */
      animation-range: 0px 100vh, 0px 92vh;
    }
    @keyframes wd-hero-fade {
      to { opacity: 0; }
    }
    @keyframes wd-hero-gate {
      0%, 99% { visibility: visible; }
      to { visibility: hidden; }
    }
  }
}

/* Copy: balra zárt, desktopon a szélesség ~3/4-éig engedve (a korlát a
   tracken). A réteg pointer-events: none — a deco-drag a headline-átfedés
   alatt is él; a CTA-pár visszakapja az eseményeket. */
#copy {
  text-align: left;
  color: #fff;
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  pointer-events: none;
  /* A hero copy-elemek KÖZTI térköz (83. kör): a --sp-52 skála-token
     (52px @1440), cap-to-baseline — és KONTÉNER-GAP, nem elem-margó:
     a slide-ok belső ritmusa + a slides→CTA-sor rés ugyanez az egy érték. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-52);
}
/* A slide belső ritmusa: eyebrow → headline → alcím — ugyanaz a token. */
#copy .hero-slide {
  display: flex;
  flex-direction: column;
  gap: var(--sp-52);
}
/* --- HERO-MOZGÁS HANGOLÓ-BLOKK (113. kör) — Gábor finomítja ---------------
   --hero-rise:    a sor bemozgás-távolsága (alulról; kilépésnél ugyanennyi
                   felfelé)
   --hero-in-dur:  egy sor beérkezés-ideje
   --hero-out-dur: egy sor kilépés-ideje
   --hero-step:    a soronkénti késleltetés lépcsője (kaszkád)
   A be-oldal (in-dur + 3×step) férjen a swap-arc felébe (~500 ms), különben
   a bejövő copy a deco-morph után csúszik. */
#copy {
  --hero-rise: calc(28 * var(--u));
  --hero-in-dur: 0.4s;
  --hero-out-dur: 0.28s;
  --hero-step: 0.09s;
}
#copy .hero-slide > *,
#copy .cta-row {
  transition: opacity var(--hero-in-dur) ease, translate var(--hero-in-dur) ease;
  transition-delay: calc(var(--hero-i, 0) * var(--hero-step));
}
/* kaszkád-index soronként (a slide gyerekei: eyebrow · h1 · lead) */
#copy .hero-slide > :nth-child(1) { --hero-i: 0; }
#copy .hero-slide > :nth-child(2) { --hero-i: 1; }
#copy .hero-slide > :nth-child(3) { --hero-i: 2; }
#copy .cta-row { --hero-i: 3; }
/* nem aktív slide sorai: lent + láthatatlan (beúszásra kész állapot) */
#copy .hero-slides .hero-slide:not(.is-active) > * {
  opacity: 0;
  translate: 0 var(--hero-rise);
}
/* kilépő slide: FELFELÉ tűnik el, rövidebb ívvel (a js/hero teszi ki) */
#copy .hero-slides .hero-slide.is-leaving > * {
  opacity: 0;
  translate: 0 calc(-1 * var(--hero-rise));
  transition-duration: var(--hero-out-dur), var(--hero-out-dur);
}
/* érkezés (boot): a teljes copy — aktív slide sorai + CTA-sor — kaszkádban.
   114. kör: a rejtett boot-állapot AZONNALI (transition: none) — enélkül a
   sorok 1→0-ba csak elindultak (mérve: op 0.92-nél már jött a copyIn), és az
   „érkezés" egy alig látható visszatérés volt. Az osztály-levétel után a
   sorok az alap-szabály átmenetével, kaszkádban úsznak be. */
#copy.hero-copy-hidden .hero-slide > *,
#copy.hero-copy-hidden .cta-row {
  opacity: 0;
  translate: 0 var(--hero-rise);
  transition: none;
  /* 117. kör — FELOLDÓ-BIZTOSÍTÉK (no-JS / JS-hiba): a rejtett boot-állapot
     a MARKUPBÓL jön, ezért ha a motor nem venné le az osztályt, a copy CSS-ből
     fedi fel magát 5s-nél (0.4s fade) — sosem ragadhat rejtve. Normál úton a
     copyIn jóval előbb fut, és az osztállyal az animáció is eltűnik. */
  animation: wd-copy-reveal 0.4s ease 5s forwards;
}
@keyframes wd-copy-reveal {
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* reduced-motion: NINCS mozgás, csak fade — a translate mindenütt nullázva */
@media (prefers-reduced-motion: reduce) {
  #copy .hero-slide > *,
  #copy .cta-row { transition: opacity 0.3s ease; transition-delay: 0s; }
  #copy .hero-slides .hero-slide:not(.is-active) > *,
  #copy .hero-slides .hero-slide.is-leaving > *,
  #copy.hero-copy-hidden .hero-slide > *,
  #copy.hero-copy-hidden .cta-row { translate: none; }
}

/* Elő-üzenet a lab 1440-bázisú tipójával: Mohave 600, aqua, ▷ mask-ikonnal
   (a site label-konvenciója — a lab '▷' content-karaktere helyett). */
#copy .eyebrow {
  font-family: 'Mohave', 'Onest', sans-serif;
  font-size: var(--fs-14); /* 14px@1440 */
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  --tl: 1.55; /* sorköz — a trim ebből számol (a térköz a konténer gap-je) */
  color: var(--accent, #3cc4c6);
}
#copy .eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.857em;
  height: 0.857em;
  margin-right: 0.857em;
  vertical-align: -0.04em;
  background: var(--accent, #3cc4c6);
  -webkit-mask: url("assets/icons/wd-triangle.svg") no-repeat center / contain;
  mask: url("assets/icons/wd-triangle.svg") no-repeat center / contain;
}

/* Headline a lab receptje szerint: Mohave uppercase, 1. sor regular
   (.hero-head-a), 2. sor bold (.hero-head-b); 1440-bázis: 60px@1440 =
   4.1667vw → 1920-on 80px (a FullHD-nagyítás a kérés része). A break-word
   biztonsági őr (túl hosszú csonk ellen). */
#copy h1 {
  font-family: 'Mohave', 'Onest', sans-serif;
  font-weight: 400;
  font-size: calc(60 * var(--u)); /* 60px@1440 → 80px@1920 */
  --tl: 1.15;
  /* 85. kör: −2% betűköz (a mért leghosszabb sor 980 → 913px @60px), és a
     copy-blokk 80%-ra szélesedett → MINDKÉT slide 2 sorban marad. */
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
#copy h1 .hero-head-a,
#copy h1 .hero-head-b { display: block; }
#copy h1 .hero-head-b { font-weight: 700; }

#copy .sub { /* 91. kör: ExtraLight (200) — KIZÁRÓLAG a heróban */
  font-size: max(17px, calc(20 * var(--u))); /* 20px@1440 — 1920-on 26.7px */
  font-weight: var(--fw-hero-lead); /* 91. kör: ExtraLight (200) — sötét alapon a 300 optikailag vastagabb volt */
  --tl: 1.4; /* 87. kör: 140% */
  max-width: 69ch;
}

/* Balra zárt CTA-sor: gomb + másodlagos link egymás mellett — a
   pointer-events itt visszakapcsol (a copy-réteg none). */
#copy .cta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-28);
  flex-wrap: wrap;
}
#copy .cta,
#copy .cta-secondary { pointer-events: auto; }

/* 91. kör: a hero másodlagos linkjének SAJÁT aláhúzás-szabálya MEGSZŰNT —
   a méret/súly/aláhúzás a közös `.wd-link-quiet` komponensé (a 90. kör
   „önálló linkek nem aláhúzottak" szabálya eddig ide nem ért el). Itt csak a
   szín + a hover marad. */
#copy .cta-secondary { color: var(--text); }
#copy .cta-secondary:hover { opacity: 0.75; }

/* EGYSÉGES AQUA CTA (2. stílus-kör) — az oldal összes elsődleges gombja, a
   lab-hero (proto/hero .hv5-cta) gomb-stílusának átvétele: aqua kitöltés +
   indigó felirat, Mohave 17/700/0.06em uppercase, em-alapú padding (a lab
   1em/1.647em párja — 17/28px @17px), SARKOS (a labban sincs sugár). A sárga
   (#f9f474) a site-ról TELJESEN kivezetve. Hover/focus: a labban nincs
   definiálva → egyszerű enyhe sötétítés + focus-ring (a ring színe a
   kontextus --text tokenje: sötét blokkon fehér, világoson indigó). */
#copy .cta,
#landing .wd-cta {
  display: inline-block;
  /* 84. kör: line-height 1 + cap-magassághoz igazított FÜGGŐLEGES padding —
     a felirat (a valódi trimmel) mérhetően középen ül. A gomb-magasság a
     korábbi ~57px @1440 marad: 2×1.3em + 0.75em cap ≈ 3.35em. */
  padding: 1.3em 1.647em;
  line-height: 1;
  border-radius: 0;
  background: var(--accent, #3cc4c6);
  /* 105. kör: az aqua felület szövegszínét a BEFOGLALÓ MÓD adja
     (--on-accent): dark környezetben indigó, lightban fehér. A
     háromszög-jel currentColor-os, tehát vele fordul. */
  color: var(--on-accent, #1f133d);
  text-decoration: none;
  font-family: 'Mohave', 'Onest', sans-serif;
  /* 90. kör: EGYSÉGESEN 16px @1440, betűköz 3% */
  font-size: max(14px, calc(16 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: filter 0.2s ease;
}
#copy .cta:hover,
#landing .wd-cta:hover { filter: brightness(0.9); opacity: 1; }
#copy .cta:focus-visible,
#landing .wd-cta:focus-visible {
  outline: 2px solid var(--text, #1f133d);
  outline-offset: calc(3 * var(--u));
}
/* A HERO elsődleges CTA-ja a hero 1440-bázisán skálázik (17px@1440 = a közös
   gomb-méret — 1440-en pixelre azonos, FullHD-n arányosan nagyobb); a többi
   .wd-cta a fix 17px-en marad. */
/* (a hero-CTA a közös gomb-mérettel skálázik — külön kar nem kell) */

/* --- ÜGYFELEINK LOGÓ-SÁV a hero alján: végtelen marquee (81. kör: a lab
   mintája) — 3 KÉSZLET (1 látható + 2 aria-hidden), a keyframes −100%/3-mal
   ciklizál; a köz 60px @1440, és 105. körtől ÖT valódi logó fut egységesen
   32px magasan (helyfoglalók nélkül). A sáv z1-en ül
   (a deco-háttérréteg fölött), és a hero-egység tagjaként saját
   parallax-faktorral gördül ki (a transformot a js/hero írja). */
.hero-logos {
  position: relative;
  z-index: 1;
  /* 107. kör: a saját alsó padding KI — a hero alsó 32px-e adja a rést. */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12); /* label baseline → a logó-sor teteje (cap-to-baseline) */
}
/* 84. kör: a hero logósáv LABELJE rejtve (a label a duplikált sávon él, az
   Eredmények blokk alján) — #hero-val erősítve az ID-szelektoros
   label-alapszabály ellen. */
#hero .hero-logos .wd-label { display: none; }

.wd-logo-marquee { overflow: hidden; width: 100%; }
.wd-logo-track {
  display: flex;
  width: max-content;
  animation: wd-marquee 50s linear infinite;
}
.wd-logo-set {
  display: flex;
  align-items: center;
  /* 105. kör: a köz EGYSÉGESEN 60px @1440; 113. kör: +20% → 72px @1440
     (a --u skálán, tehát a töréspont-rendszerrel együtt nő/csökken). */
  gap: calc(72 * var(--u));
  padding-right: calc(72 * var(--u));
}
/* 3 azonos készlet — a folytonos ciklus elmozdulása a track harmada. */
@keyframes wd-marquee { to { transform: translateX(calc(-100% / 3)); } }
@media (prefers-reduced-motion: reduce) {
  .wd-logo-track { animation: none; } /* statikus sor */
}

/* 105. kör: a sorban CSAK logó-slotok vannak (a szöveges helyfoglalók
   véglegesen kivezetve), ezért a slot puszta tartó — a méretet az img adja. */
#hero .wd-logo-slot { flex: 0 0 auto; display: flex; align-items: center; }
#hero .wd-logo-slot img { display: block; }

/* --- DUPLIKÁLT LOGÓSÁV (84. kör) — az Eredmények blokk alján, INVERZ
   színekkel: indigó alap, tört-indigó (halványított) logók. A sáv teljes
   szélességű: a szekció vízszintes paddingját negatív margóval üti ki. */
/* 85. kör: NINCS dark blokk és nincs szekció-keret — csak a futó logósor a
   szekció FEHÉR alapján, INDIGÓ (tört-indigó) logókkal, label nélkül. A
   logó-SVG-k fehér kitöltésűek, ezért itt CSS-maszkként futnak, a szín a
   blokk --text tokenje. */
/* 87. kör: a label + a futó sáv KÖZÖS konténerben — a label 36px-re a
   logóktól (a szekció 64-es gapje helyett). */
/* (A 92/107. körös blokk-vonal a 121. körrel kivezetve: az Ügyfeleink
   ÖNÁLLÓ szekció lett — a határt a szabályos szekció-vonal adja.
   125. kör: a `.wd-logo-band-wrap` burkoló is KIVEZETVE — a szekció MAGA a
   flex-oszlop (`wd-flow--36`), így a fejezet-osztó `.wd-sep--inset` a
   szekció KÖZVETLEN gyereke: pontosan tartalom-szélességben fut, nem kap
   további 80px behúzást a `:not(section, footer) >` szabálytól.) */
#landing .wd-logo-band {
  /* 87. kör: a label 36px-re a logóktól (korábban 12 + a sáv paddingja).
     113. kör: az ALSÓ padding KI — az alsó eltartást a SZEKCIÓ adja (a hero
     sávjában is a szekció 32-je viszi), a komponensen csak a felső marad. */
  margin: 0 calc(-1 * var(--sp-80));
  padding: var(--sp-20) 0 0;
}
/* 88. kör: a sáv placeholder-slotjai vékony kerettel — hogy a logó-készlet
   TÖMEGE látszódjon (a hero-sávban ezek rejtve vannak). */
#landing .wd-logo-band .wd-logo-slot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#landing .wd-logo-band .wd-logo-mark {
  display: block;
  /* 105. kör: TELI indigó (a szekció szövegszíne) — a korábbi 0.8-as
     „tört-indigó" a régi, beégetett alfás SVG-khez volt hangolva. */
  background: var(--text);
  -webkit-mask: var(--mark) no-repeat center / contain;
  mask: var(--mark) no-repeat center / contain;
}

/* --- LANDING (drótváz-blokkok a hero alatt) --------------------------------
   Full-bleed: a blokkok fehér háttere és elválasztó vonalai teljes
   szélességben futnak. Szövegszínek: alap #160F36, linkek #4FB2C9. */
#landing {
  position: relative;
  /* M1 (111. kör): a #landing ÁTLÁTSZÓ és z-auto (a lab réteg-modellje) — a
     szekciók a SAJÁT token-hátterüket viszik (ma mind opak; az áteresztő
     dark/tint receptek az M2 körben jönnek), a fix #deco-layer (z0) fölött
     a DOM-sorrend tartja őket. */
  z-index: auto;
  background: transparent;
  font-family: 'Onest', sans-serif;
  color: #1f133d;
}
/* 118. kör — FIX-HERO z-rend: a szekciók (a footerrel együtt — a footer a
   #landing-en belül él) a z1-es fix hero FÖLÉ gördülnek. A szabály a base
   #landing MÖGÖTT áll (azonos specificitás — a sorrend dönt). */
@supports (animation-timeline: scroll()) {
  @media (min-width: 769px) {
    #landing { z-index: 2; }
  }
}
/* Folyó szövegben a link: aláhúzott aqua — SEMMI automatikus ikon (az
   önálló link-elemek ▷ ikonja a .wd-more osztályé). */
/* 91. kör: az ELEM-ALAPOK nulla specificitáson (`:where`) — így bármely
   komponens-osztály felülírhatja őket ID-s kivétel nélkül. */
/* 126. kör — NINCS ALÁHÚZÁS SEHOL: a link-jelentést az AQUA SZÍN viszi.
   A `text-decoration: none` ITT, a (0,0,0)-s alapon áll: a böngésző
   UA-aláhúzását veszi le (eddig 3 anchor — a fejléc-logó, a mobil
   kapcsolat-ikon és a lábléc-logó — csak azért nem látszott aláhúzva,
   mert kizárólag képet tartalmaz). */
:where(#landing) :where(a) { color: var(--accent, #3cc4c6); text-decoration: none; }
:where(#landing) :where(a):hover { opacity: 0.75; }
/* Horgony-célzás: a fix fejléc ne takarja a célszekció tetejét. */
/* 125. kör: a `.wd-anchor` a SZEKCIÓN BELÜLI horgony-blokké (#eredmenyek —
   az Eredmények fejezet a 125. körtől az Ügyfeleink szekció része). */
#landing section,
#landing .wd-anchor { scroll-margin-top: calc(72 * var(--u)); }

/* Cím-tipográfia KÖZÖS szabályból (62. kör — az inline font-size-ok ide
   költöztek, hogy a töréspontokon skálázódjanak). 1. stílus-kör: a
   fejezet-címek súlya (Onest Black 900) + margin: 0 is ide került az
   inline-okból — a méretek a meglévő clamp-rendszerben maradtak. */
/* termékoldal-hero: a sorköz a 82. körtől CSS-ből (a trim ebből számol — az
   inline line-height kivezetve) */
:where(#landing) :where(h1) { font-weight: var(--fw-black); font-size: calc(46 * var(--u)); --tl: 1.2; }
/* A h2 sorköze a 82. körtől EXPLICIT szám (a trim half-leadinget számol
   belőle): 1.28 = az Onest mért `normal` értéke → a látvány változatlan. */
:where(#landing) :where(h2) { font-weight: var(--fw-black); font-size: calc(36 * var(--u)); --tl: 1.2; }
/* 91. kör: a kártya-cím ALAPJA (19px/700) — a 14 inline `font-weight: 700`
   ide költözött; a 22/18/17px fokozatok a .wd-subhead-sm / .wd-title-sm /
   .wd-title-xs komponensek. */
:where(#landing) :where(h3) { font-size: var(--fs-19); font-weight: var(--fw-bold); }
:where(#landing) :where(h4) { font-size: var(--fs-17); font-weight: var(--fw-bold); }

/* --- SZEKCIÓ-LABEL (1. stílus-kör): Mohave 14/600, 0.15em, uppercase, AQUA
   (mindkét módban azonos) + ▷ ikon-prefix az assets/icons készletből.
   Az ikon CSS mask-ként fut (background = --accent): NEM szöveg-karakter és
   nem DOM-elem — a szöveg-lenyomat nem látja. Gridben teljes sort foglal. */
#landing .wd-label,
#hero .wd-label {
  grid-column: 1 / -1;
  /* 84. kör: NEM flex — a valódi trim (text-box-trim) blokk-konténert kíván;
     az ikon inline-block ::before, a cap-középre igazítva. */
  display: block;
  font-family: 'Mohave', 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent, #3cc4c6);
  /* Sorköz + margók: a VERTICAL TRIM blokkból (a label is trimmelt elem);
     a térközt a konténer gap-je adja (szendvics --sp-36, marquee --sp-12). */
}
#landing .wd-label::before,
#hero .wd-label::before {
  content: "";
  display: inline-block;
  /* 85. kör: PONTOSAN a hero-label (eyebrow) igazítása — az ott jó. */
  vertical-align: -0.04em;
  width: 0.857em;
  height: 0.857em;
  margin-right: 0.857em;
  background: var(--accent, #3cc4c6);
  -webkit-mask: url("assets/icons/wd-triangle.svg") no-repeat center / contain;
  mask: url("assets/icons/wd-triangle.svg") no-repeat center / contain;
}

/* --- COPY-SZENDVICS (1. stílus-kör): minden blokk fejrésze (label → cím →
   lead) AZONOS belső eltartással — az egységes térköz-pár ITT él, a blokkok
   egyedi margói/gap-kioltói helyett (a korábbi negatív-margós gap-kioltás
   kivezetve). A fejrész utáni levegőt a szekció saját gap-je adja. */
/* A blokk-fejrész EGY konténer-gap-et használ a skálából: --sp-36.
   FORRÁS: a referencia-kép 4 szekció-fejrészén MÉRVE (PNG-dekóder +
   tinta-sáv-detektálás): label baseline → cím cap-teteje 34px, cím
   baseline → lead cap-teteje 37px, a H2 mért betűméretével 36.7px (= a mi
   36px-ünk). A két érték egyetlen skála-fokozatba esik (±2px), ezért EGY
   gap: 36px @1440. (A korábbi 12/14 sorbox-élek közti érték volt — a
   trim-mérésben ez ~3× szűk.) */
#landing .wd-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-36);
}

/* --- KENYÉRSZÖVEG (1. stílus-kör): 18px Onest Light a lead/bekezdés
   szövegekre (a kártya-belsők tipográfiája a kártya-körre vár). */
#landing .wd-lead,
#landing .wd-section-head p {
  font-size: var(--fs-18);
  font-weight: 300;
  --tl: 1.4; /* 87. kör: kenyérszöveg-sortáv 140% */
  color: var(--text-muted, rgba(31, 19, 61, 0.72));
}
/* (a .wd-lead is trimmelt <p> — margót NEM hordoz) */

/* --- HÁROMSZÖG-RENDSZER (105. kör) — KÉT JEL, KÉT SZEREP -------------------
   · `wd-triangle.svg` (ÜRES / kontúros) = JELÖLÉS, NEM kattintható elemeken:
     a szekció-labelek és a hero-eyebrow prefixe (em-alapú, a label-lockup
     része) — ott marad, ahol most is van.
   · `wd-link.svg` (TELI) = INTERAKCIÓ: MINDEN gomb és MINDEN önálló link
     jele, EGYSÉGESEN 8×8px @1440 (a --u skálázással). A korábbi KETTŐS
     méretezés (gomb 11px / link 8px) megszűnt. Szín: `currentColor` — tehát
     az --on-accent szabály (aqua felületen dark→indigó / light→fehér) és a
     link-színek automatikusan viszik. Később a harmonika-elemek (FAQ-sorok)
     is ezt kapják.
   FOLYÓ SZÖVEGBEN a link ikon NÉLKÜL marad (csak aláhúzott aqua).
   IGAZÍTÁS (82/84/90. kör): a jel a felirat CAP-KÖZEPÉRE ül, nem a sorbox
   közepére — a gombokon Mohave-cap 0.75em, a linkeken Onest-cap 0.707em; a
   köz csoportonként marad (gomb 14px / link 11px @1440).
   ⚠ A „→" karakterek a fagyasztott szöveg részei — ahol a felirat nyílra
   végződik, ott most KETTŐS jelzés látszik (copy-döntésre vár). */
#copy .cta::after,
#landing .wd-cta::after,
#landing a.wd-more::after,
#copy .cta-secondary::after,
#landing .wd-cta-secondary::after {
  content: "";
  display: inline-block;
  /* 84. kör: a jel a felirat CAP-KÖZEPÉRE igazodik (nem a sorbox közepére):
     baseline-ról indul, majd (cap − jel)/2-vel feljebb tolva.
     88. kör: `color: inherit` — a `.wd-pending::after` UGYANEZT a pszeudót
     narancsra állította, és a currentColor onnan vette a színt; így a jel
     mindig a LINK/gomb színét követi (a pending-jelölés kizárólag a csillag). */
  color: inherit;
  vertical-align: baseline;
  background: currentColor;
  /* EGYSÉGES doboz-méret: 8px @1440, a betűméret változásától függetlenül */
  --tri: calc(8 * var(--u));
  width: var(--tri);
  height: var(--tri);
  -webkit-mask: url("assets/icons/wd-link.svg") no-repeat center / contain;
  mask: url("assets/icons/wd-link.svg") no-repeat center / contain;
}
/* A KÖZ és a cap-igazítás csoportonként (a két betűtípus cap-je eltér). */
#copy .cta::after,
#landing .wd-cta::after {
  margin-left: calc(14 * var(--u));
  translate: 0 calc((var(--tri) - 0.75em) / 2);
}
#landing a.wd-more::after,
#copy .cta-secondary::after,
#landing .wd-cta-secondary::after {
  margin-left: calc(11 * var(--u));
  translate: 0 calc((var(--tri) - 0.707em) / 2);
}
/* 126. kör — IKONOS LINK SOSEM KAP LINK-NYILAT: ahol a ::before már egy
   ikont hoz (kontakt-ikonok, PDF-ikon), ott a teli háromszög KETTŐS jelzés
   volna — az ikon maga jelöli az interakciót. (1,1,1) specificitás, a
   jel-szabályok UTÁN: így üti a `#landing a.wd-more::after` (1,1,1) és a
   `#landing .wd-cta-secondary::after` (1,1,0) szabályt is. */
#copy a.wd-ic::after,
#landing a.wd-ic::after { content: none; }

/* 90. kör: a háromszöges (önálló) linkek NEM aláhúzottak — a jel viszi a
   „link" jelentést. */
#landing a.wd-more,
#landing .wd-cta-secondary,
:where(#landing) .wd-ic { text-decoration: none; }
/* Az önálló link egy sorban tartja a jelet a szöveggel. */
#landing a.wd-more { white-space: nowrap; }

/* --- AVATAR (1. stílus-kör): a csapat-kártyák fotója — kör-vágás a
   stílus-referencia szerint (ideiglenesen mindenkinél az NG-avatar). */
/* 88. kör: a kör-maszk MÉRETE FIX — kizárólag a benne lévő KÉP nagyodik
   (a keret overflow: hidden, a kép skálázódik alatta); 105. kör: 5% → 15%. */
#landing .wd-avatar-frame {
  width: min(calc(160 * var(--u)), 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  flex: 0 0 auto;
  background: var(--accent, #3cc4c6);
}
#landing .wd-card-top:hover .wd-avatar { transform: scale(1.1); } /* 107. kör: 15% → 10% */
@media (prefers-reduced-motion: reduce) {
  #landing .wd-card-top:hover .wd-avatar { transform: none; }
}
#landing .wd-avatar {
  transition: transform 0.35s ease;
  /* a kép a KERETET tölti ki (a kör a .wd-avatar-frame-é) */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- RÁCS-RENDSZER (62. kör): közös elrendezés-osztályok --------------------
   wd-grid-3: 3 kártya (→ 1 oszlop ≤768) · wd-grid-4: 4 kártya (→ 2×2 ≤1024,
   → 1 ≤480) · wd-media-split: szöveg + vizuál 50–50 (→ 1 oszlop ≤768, a
   vizuál felül) · wd-media: egységes 4:3 vizuál-helyfoglaló · wd-step /
   wd-pillar: számozott/ikonos sorok · wd-contact-grid: kapcsolat-blokk ·
   wd-cta-band: közbeszúrt CTA-sáv. */
/* 125. kör — 2 oszlopos rács (P7 „Keretek és ár": desktopon is 2×2). */
#landing .wd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-36); }
#landing .wd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-36); }
#landing .wd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-36); }
#landing .wd-media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-48);
  align-items: center;
}
/* 124. kör — VIZUÁL-DOMINÁNS változat (1/3 copy · 2/3 kép): a P4 radar-képe
   kapja, ahol a kép a mondanivaló és a copy csak felvezet. Mobilon a közös
   1 oszlopos szabály visz (a kép felül). */
#landing .wd-media-split--wide { grid-template-columns: 1fr 2fr; }
/* 91. kör: `:where()` — bázis-komponens, a modifierek felülírhassák. */
:where(#landing) .wd-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px dashed #b0b0b0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
  text-align: center;
  color: #888;
  font-size: var(--fs-14);
  font-weight: 500;
}
/* Vizuál-KÉP a helyfoglaló helyén (88. kör): a SZÉLESSÉG tölti ki a helyet, a
   magasságot a kép saját aránya adja — nincs 4:3-as vágás. */
#landing .wd-media-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 16:9-es változat (64. kör — a Kik vagyunk teljes-szélességű vizuálja). */
:where(#landing) .wd-media-169 { aspect-ratio: 16 / 9; }
/* 120. kör: a lépés-sor SAJÁT arányai — sorszám balra (36px, Regular),
   mellette a cím és a leírás EGYMÁS ALATT (16px gap), minden FELFELÉ zár
   (a sorszám cap-teteje a cím cap-tetejével egy vonalban — mindkettő
   trimmelt). */
#landing .wd-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-16);
  align-items: start;
}
#landing .wd-step .wd-step-no { grid-row: 1 / span 2; }
/* HOW-pillérek (63. kör): desktopon KÁRTYA-GRID 3+2 elrendezésben, a 6.
   hely ÜRES placeholder-kártya (az 5 kártya egy sorban ~208px/kártya lett
   volna 1280-on — 3 soros címek, aránytalanul magas-keskeny kártyák);
   mobilon (≤768) vertikális lista (ikon + cím + lead). */
#landing .wd-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-36); /* 85. kör: kártya-grid gap mindkét irányban */
}
#landing .wd-pillar {
  border: 1px solid var(--line);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-24); /* kártya-belső elem-térköz (119. kör: 20 → 24) */
}
/* 86. kör: a 6. rács-hely a szekció LINKJÉT hordozza, KÖZÉPRE — kártya-
   kitöltéssel, de MINDENFÉLE STROKE NÉLKÜL (a bal aqua sáv sem). */
/* (a szelektor SZÁNDÉKOSAN erősebb a .wd-card-nál: az azonos specificitású
   kártya-szabály később áll a fájlban, és visszahozná a bal stroke-ot) */
#landing .wd-pillar.wd-pillar-link {
  border: 0;
  box-shadow: none;
  /* 127. kör: az elemek BALRA zárnak (szöveg és gomb is) — a kártya
     FÜGGŐLEGES közepe marad (justify-content: center a flex-oszlopon). */
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

/* --- KÁRTYA-ALAPSTÍLUS (82. kör) — közös osztály ----------------------------
   RADIÁLIS GRADIENS: középen a blokk téma-háttere (--bg), a SARKOKIG
   (farthest-corner) ugyanez 5%-kal sötétítve (--card-edge) — így a látvány
   MINDEN kártya-méretnél azonos. BAL OLDALI INNER STROKE: 3px aqua (inset
   box-shadow, a kártyán belül). Egyelőre semmi blur, semmi árnyék.
   ⚠ FELTEVÉS: a 3px az 1440-bázis szabállyal skálázódik (3/14.4 = 0.2083vw,
   0.75×/1.35× őrökkel) — ha fix 3px kell mindenhol, a --card-stroke egy
   sorban visszaállítható.
   Alkalmazás (CSAK a landingen, 82. kör): Hogyan dolgozunk 5 pillére (a blokk
   .wd-dark) · Eredmények 3 számdoboza · a gerinc-kártya (maga .wd-dark). */
#landing .wd-card {
  /* 91. kör: a belső elrendezés a komponensé (20 inline flex-column helyett) */
  display: flex;
  flex-direction: column;
  --card-stroke: calc(3 * var(--u)); /* 3px @1440 */
  /* 85. kör: a kártya BELSŐ paddingja 32px @1440 (kisebb kártyákon 28 —
     .wd-card-sm); a 36-os érték a KÁRTYA-GRID gap-jébe került.
     119. kör: a belső elem-térköz 20 → 24px (Gábor kérése — globális +4). */
  padding: var(--sp-32);
  gap: var(--sp-24);
  background: radial-gradient(farthest-corner at 50% 50%, var(--card-center) 0%, var(--card-edge) 100%);
  box-shadow: inset var(--card-stroke) 0 0 0 var(--accent);
  border: 0;
}

/* (A 92. körös .wd-card-paper variáns az M2 körben KIVEZETVE — a lab 99.
   köre szerint a light kártya közös, áteresztő receptje viszi; a variáns
   oka [a tint-szekció gradiens-ütközése] a tint-kivezetéssel megszűnt.) */

/* Kisebb kártyák: 28px belső padding (85. kör). */
#landing .wd-card.wd-card-sm { padding: var(--sp-28); }

/* 90. kör — SZOLGÁLTATÁSOK BLOKK.
   (a) A három kártya-CSOPORT (gerinc · 3 szint · 3 terület) között 36px rés
       (a szekció 64-es csoport-gapje a fejrész és a készlet közé marad). */
#landing .wd-card-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}
/* (b) AQUA kártya: a gradiens közepe az aqua, a sarkok 5%-kal sötétebbek;
       a szöveg ÉS az ikon fehér (a kártya a saját kontextusát viszi). */
#landing .wd-card.wd-card-accent {
  /* Az aqua kártya színe a labor kalibrált értéke (lab.aquaCard, szél 5%-kal
     sötétebb; M2: mindkét stop 65% alfán). 119. kör: Gábor friss
     kalibrációja — #00a8a8 (a defaults.v5.json 2026-08-26-i exportjából). */
  --card-center: color-mix(in srgb, #00a8a8 65%, transparent);
  --card-edge: color-mix(in srgb, color-mix(in srgb, #00a8a8, #000 5%) 65%, transparent);
  /* 105. kör: a szöveg/ikon a BEFOGLALÓ mód szerint (light szekcióban fehér) */
  color: var(--on-accent, #ffffff);
}
#landing .wd-card.wd-card-accent .wd-card-icon { background: currentColor; }
/* (c) A gerinc-kártya és a szint-kártyák bal aqua stroke NÉLKÜL (a 3
       terület-kártyán marad). */
#landing .wd-card.wd-card-nostroke { box-shadow: none; }

/* Eredmények nagy számai (87. kör): Mohave REGULAR (400), 68px @1440. */
#landing .wd-stat {
  font-family: 'Mohave', 'Onest', sans-serif;
  font-size: calc(68 * var(--u));
  font-weight: 400;
  --fm-asc: 0.99; --fm-desc: 0.4; --fm-cap: 0.75; --tl: 1;
}

/* P3 lépés-sorszám (90. kör): Mohave, AQUA, kissé nagyobb (14 → 18px @1440);
   a lépés-sorok felső/alsó vonala KI (a markupból). */
#landing .wd-step-no {
  font-family: 'Mohave', 'Onest', sans-serif;
  /* 120. kör: a sorszámos változat kilép a 28px-es közös szabály alól —
     36px, Mohave REGULAR (400). */
  font-size: calc(36 * var(--u));
  font-weight: 400;
  color: var(--accent, #3cc4c6);
  --fm-asc: 0.99; --fm-desc: 0.4; --fm-cap: 0.75; --tl: 1;
}

/* „Miért mi" pipa-ikonok — 119. kör: 28px (lista-kártya spec; a 86. körös
   45px a szeparátoros lista-sorokhoz volt méretezve). */
#landing .wd-check {
  flex-shrink: 0;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  color: var(--accent);
}


/* 91. kör: a P7 érték-fokozatai (.wd-stat-sm / -xs, Mohave 40/24) KIVEZETVE —
   helyettük a .wd-stat--card (Onest 28/600) egységesen mind a 4 kártyán. */

/* Csapat-kártya TITULUS (85. kör): label-szerű Mohave, aqua (Figma-terv). */
#landing .wd-role,
#landing .wd-kicker {
  font-family: 'Mohave', 'Onest', sans-serif;
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  --fm-asc: 0.99; --fm-desc: 0.4; --fm-cap: 0.75; --tl: 1.4;
}

/* SZEMÉLY-KÁRTYA (84. kör): az általános kártyától egyetlen eltérés — a 3px
   aqua stroke FELÜL fut, nem a bal oldalon. */
#landing .wd-card.wd-card-top {
  box-shadow: inset 0 var(--card-stroke) 0 0 var(--accent);
}

/* KÁRTYA-IKON (82. kör: placeholder · 89. kör: a lineal pack ikonjai) —
   a BOX adja a MÉRETET és a SZÍNT, az ikon KILÉTE a `--icon-url`-ben jön egy
   külön `.wd-ico-*` osztályból, tehát a méret és az ikon ORTOGONÁLIS.
   Méret-fokozatok @1440: alap 80px (HOW-pillérek · szolgáltatás-szint-kártyák ·
   termékoldal P2/P9) · `-sm` 56px (kisebb terület-kártyák) · `-xs` 32px
   (termékoldal P6 lista-tételek). Mobilon a --u padlója miatt 60/42/24px.
   AQUA a CSS-maszkon át: a szín token-pontos, a fájl saját kitöltése nem
   számít (a pack MIND fill-alapú, stroke nélkül — mérve a 89. körben).
   Fallback (osztály nélkül): a régi placeholder-SVG. */
#landing .wd-card-icon {
  flex: 0 0 auto;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  background: var(--accent, #3cc4c6);
  -webkit-mask: var(--icon-url, url("assets/icons/icon-placeholder.svg")) no-repeat center / contain;
  mask: var(--icon-url, url("assets/icons/icon-placeholder.svg")) no-repeat center / contain;
}
/* 90. kör: a 80/56/32-es fokozat-rendszer KIVEZETVE — a kártya-ikon MINDIG
   80px @1440 (kisebb méretben a lineal-vonal túl vékony volt). */

/* Az IKON-KÉSZLET (lineal pack — MÁSOLAT: site/assets/icons/pack/; a
   fájlnév-szóközök kötőjelre írva a file://-export miatt). */
.wd-ico-effective { --icon-url: url("assets/icons/pack/015-effective.svg"); }
.wd-ico-puzzle { --icon-url: url("assets/icons/pack/032-puzzle.svg"); }
.wd-ico-creative-process { --icon-url: url("assets/icons/pack/025-creative-process.svg"); }
.wd-ico-teamwork { --icon-url: url("assets/icons/pack/050-teamwork.svg"); }
.wd-ico-artificial-intelligence { --icon-url: url("assets/icons/pack/artificial-intelligence.svg"); }
.wd-ico-ai { --icon-url: url("assets/icons/pack/ai.svg"); }
.wd-ico-innovation { --icon-url: url("assets/icons/pack/020-innovation.svg"); }
.wd-ico-key { --icon-url: url("assets/icons/pack/039-key.svg"); }
.wd-ico-start-up { --icon-url: url("assets/icons/pack/011-start-up.svg"); }
.wd-ico-structure { --icon-url: url("assets/icons/pack/004-structure.svg"); }
.wd-ico-book { --icon-url: url("assets/icons/pack/042-book.svg"); }
.wd-ico-contract { --icon-url: url("assets/icons/pack/040-contract.svg"); }
.wd-ico-analysis { --icon-url: url("assets/icons/pack/026-analysis.svg"); }
.wd-ico-maze { --icon-url: url("assets/icons/pack/045-maze.svg"); }
.wd-ico-stopwatch { --icon-url: url("assets/icons/pack/007-stopwatch.svg"); }
.wd-ico-coordination { --icon-url: url("assets/icons/pack/022-coordination.svg"); }
.wd-ico-target { --icon-url: url("assets/icons/pack/013-target.svg"); }
.wd-ico-work-process { --icon-url: url("assets/icons/pack/029-work-process.svg"); }
.wd-ico-funnel { --icon-url: url("assets/icons/pack/044-funnel.svg"); }
.wd-ico-statistics { --icon-url: url("assets/icons/pack/010-statistics.svg"); }
.wd-ico-planning { --icon-url: url("assets/icons/pack/043-planning.svg"); }
.wd-ico-document { --icon-url: url("assets/icons/pack/037-document.svg"); }
.wd-ico-profit { --icon-url: url("assets/icons/pack/036-profit.svg"); }
.wd-ico-computer { --icon-url: url("assets/icons/pack/023-computer.svg"); }
.wd-ico-strategy { --icon-url: url("assets/icons/pack/034-strategy.svg"); }
.wd-ico-rise { --icon-url: url("assets/icons/pack/005-rise.svg"); }
.wd-ico-graphs { --icon-url: url("assets/icons/pack/041-graphs.svg"); }

/* P6 „Mit birtokolsz" lista-tétel (89. kör): a szürke doboz flex-sorrá vált,
   hogy a 32px-es ikon a szöveg mellé álljon (a doboz látványa változatlan). */
#landing .wd-owned {
  /* 91. kör: a #f0f0f0 off-token szín MEGSZŰNT — a doboz a standard
     kártya-komponens (gradiens + bal aqua stroke); itt csak a belső
     elrendezés marad. */
  padding: var(--sp-24);
  display: flex;
  /* 90. kör: az ikon a SZÖVEG FÖLÉ került (nem mellé) — 80px-es ikonnal a
     sor-alak szétesett volna. */
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-20);
}
/* Lead/alcím-sorok (63. kör): desktopon a konténer ~80%-áig mehetnek. */
#landing .wd-lead-wrap { max-width: 80%; }

/* --- TERMÉK-HERO (126. kör) ------------------------------------------------
   A termékoldal első blokkja a LANDING HERO COPY megjelenését viseli, de
   ÁLLÓ, in-flow szekcióként: a magasságot a TARTALOM adja (nincs 100vh,
   nincs fix réteg, nincs slider). Ami átjön a hero-receptből: a Mohave
   headline mérete/betűköze/uppercase-e, a lead ExtraLight fokozata, és az
   52px-es hero-ritmus (a fejrész 36-os szendvicse helyett).
   ⚠ ELTÉRÉS a landingtől, a kérés szerint: a headline VÉGIG a VASTAGABB
   vágat (a landingen az 1. sor regular, a 2. bold — ott a két span adja).
   A metrikákat és az optikai Mohave-shiftet a fenti KÖZÖS listák viszik. */
#landing .wd-sec--hero {
  --flow: var(--sp-52);
  /* 127. kör: a deco HIT-AREA (.hero-deco) ehhez a dobozhoz pozicionál, a
     túllógó 1:1 négyzet pedig itt vágódik (a landing #hero mintája). */
  position: relative;
  overflow: hidden;
}
#landing .wd-sec--hero .wd-section-head { gap: var(--sp-52); }
#landing .wd-sec--hero h1 {
  font-family: 'Mohave', 'Onest', sans-serif;
  font-weight: 700;
  font-size: calc(60 * var(--u)); /* 60px@1440 → 80px@1920 — a hero-fokozat */
  --tl: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: break-word; /* biztonsági őr túl hosszú csonkra */
}
#landing .wd-sec--hero .wd-section-head p {
  font-size: max(17px, calc(20 * var(--u))); /* a hero lead fokozata */
  font-weight: var(--fw-hero-lead);          /* ExtraLight (200) */
  --tl: 1.4;
  max-width: 69ch;                           /* a hero lead sorhossza */
}
/* Elküldés utáni nézet (63. kör): a Küldés az űrlap HELYÉN sikeres-állapot
   panelt mutat (site.js — valódi küldés továbbra sincs); a szövegei
   wd-pending jelölésűek (jóváhagyatlan copy). */
/* Az űrlap elrendezése CSS-ből (64. kör — inline display-jel a [hidden]
   nem tudta elrejteni): a form[hidden] szabály a specifikusabb. */
/* 90. kör: mezők között 24px, a Küldés és az adatvédelmi sor előtt 36px
   (a gap 24 + 12px delta = a nagyobb skála-fokozat). */
:where(#landing) .wd-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
:where(#landing) .wd-form button.wd-cta,
:where(#landing) .wd-form .wd-fineprint { margin-top: var(--sp-12); }
:where(#landing) .wd-form[hidden] { display: none; }
#landing .wd-form-success {
  border: 1px solid var(--line, #c8c8c8);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-24);
}
#landing .wd-form-success[hidden] { display: none; }
#landing .wd-contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-64); /* 121. kör: 56 → 64 (a függőleges vonal kivezetve) */
}
/* 121. kör: a jobb oszlop FÜGGŐLEGES vonala + a hozzá méretezett padding
   KIVEZETVE (a vonal akadt a decóval) — az eltartást a grid 64-es gapje adja. */
#landing .wd-cta-band {
  /* 91. kör: EXPLICIT row — a .wd-card új flex-column alapja ellen (a
     gerinc-kártya mindkét osztályt viseli). */
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-48);
}

/* Valódi űrlap-elemek (lo-fi): a kapcsolat-űrlap mezői. A placeholder-szöveg
   adja a mező nevét; az űrlap MÉG NEM KÜLD SEHOVA (lásd a form melletti
   kommentet). */
/* 1. stílus-kör: a kapcsolat-blokk SÖTÉT módra váltott — a mezők a
   tokenekből öltöznek (a lila #441BE9 form-mező kitöltés későbbi köré). */
/* 84. kör: a mezők KERET NÉLKÜL (a Figma-terv szerint); a fókusz jelzése a
   BAL oldali 3px-es aqua sáv (inset box-shadow) — ez egyben a látható
   fókusz-indikátor, ezért a natív outline elmarad. */
#landing .wd-input,
#landing .wd-select,
#landing .wd-textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: var(--sp-16) var(--sp-16);
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* 126. kör — EGYSÉGESEN 16px, PADLÓVAL: a mezők szövege (hint ÉS beírt
     szöveg) AZONOS méretű, és sosem esik 16px alá. Az előző `--fs-15` a
     --u alsó plafonján 13px-re zsugorodott (keskeny desktopon „túl apró"),
     ráadásul 16px alatt az iOS Safari FÓKUSZKOR RÁNAGYÍT a lapra.
     ⚠ TUDATOS ELTÉRÉS a --u-skálától: itt PADLÓ van (max(16px, …)), nem
     tiszta arányosítás — fölfelé továbbra is a skálával nő. */
  font-size: max(16px, calc(16 * var(--u)));
  /* A BEÍRT szöveg SEMIBOLD — a hint és a kitöltés különbsége SÚLY (+ enyhe
     opacitás), NEM méret (126. kör). */
  font-weight: 600;
  color: var(--text, #1f133d);
  background: var(--card-bg, #fafafa);
}
#landing .wd-input:focus,
#landing .wd-textarea:focus,
#landing .wd-select:focus {
  outline: none;
  box-shadow: inset var(--card-stroke, 3px) 0 0 0 var(--accent);
}
/* A HINT: azonos méret, LIGHT súly + enyhe halványítás. (A dark blokkban a
   --text-muted maga is fehér — a 87. kör óta nincs szín-halványítás —, ezért
   a megkülönböztetést itt a súly és az opacitás viszi.) */
#landing .wd-input::placeholder,
#landing .wd-textarea::placeholder {
  color: var(--text-muted, #8a8a8a);
  font-weight: 300;
  opacity: 0.65;
}
/* 126. kör — AUTOFILL: a böngésző SAJÁT kitöltés-stílusa (Chrome/Safari egy
   belső, szerzői CSS-sel nem felülírható háttérszínt és fekete szöveget fest
   az automatikusan kitöltött mezőre) a sötét mezőnkön INVERZ dobozként
   jelent meg. DIAGNÓZIS (mérve): kézzel beírt értéknél a mező computed
   háttere/színe VÁLTOZATLAN, és a saját CSS-ünkben nincs semmilyen
   „kitöltött" állapot-szabály → a jelenség KIZÁRÓLAG a böngésző autofill
   stílusa lehet. FELÜLÍRÁS a bevált módon: a hátteret egy hatalmas INSET
   box-shadow festi a saját tokenünkkel, a szöveget a -webkit-text-fill-color
   viszi, a több tízezer másodperces background-átmenet pedig megakadályozza,
   hogy a böngésző visszaszínezze.
   ⚠ A `:-webkit-autofill` és a szabványos `:autofill` KÜLÖN szabályban áll:
   egy közös szelektor-listát az azt nem ismerő motor EGÉSZBEN eldobna. */
#landing .wd-input:-webkit-autofill,
#landing .wd-textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: inset 0 0 0 100vmax var(--card-bg);
  box-shadow: inset 0 0 0 100vmax var(--card-bg);
  transition: background-color 100000s ease-in-out 0s;
  font-weight: 600;
}
/* Fókuszban az aqua sáv MARAD (elöl fest) — a hatalmas inset mögötte. */
#landing .wd-input:-webkit-autofill:focus,
#landing .wd-textarea:-webkit-autofill:focus {
  -webkit-box-shadow: inset var(--card-stroke, 3px) 0 0 0 var(--accent), inset 0 0 0 100vmax var(--card-bg);
  box-shadow: inset var(--card-stroke, 3px) 0 0 0 var(--accent), inset 0 0 0 100vmax var(--card-bg);
}
#landing .wd-input:autofill,
#landing .wd-textarea:autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: inset 0 0 0 100vmax var(--card-bg);
  transition: background-color 100000s ease-in-out 0s;
  font-weight: 600;
}
#landing .wd-input:autofill:focus,
#landing .wd-textarea:autofill:focus {
  box-shadow: inset var(--card-stroke, 3px) 0 0 0 var(--accent), inset 0 0 0 100vmax var(--card-bg);
}
#landing .wd-select:invalid { color: var(--text-muted, #8a8a8a); }
#landing .wd-textarea { min-height: calc(108 * var(--u)); resize: vertical; }
#landing button.wd-cta { border: 0; cursor: pointer; }

/* --- ŰRLAP-VALIDÁCIÓ + ÁLLAPOTOK (100. kör) ---------------------------------
   A kapcsolat-űrlap a 100. körtől VALÓDI mentést végez (js/form.js →
   Supabase), ezért három új réteg kell: KÖTELEZŐ-jelölés, MEZŐNKÉNTI
   hibaüzenet a mező alatt, és form-szintű status-sor (küldés / hiba).
   ELVEK:
   · A hibaüzenet SZÖVEGE a HTML-ben áll (előre renderelt hidden span) — a JS
     csak a hidden flaget írja; így a szöveg-fagyasztás lenyomata őrzi, és
     mind viselheti a narancs csillagot.
   · A KÖTELEZŐ-jelölés CSS-ből jön (aqua csillag a mező jobb szélén, a
     .wd-field--req burkolón) — a placeholder-SZÖVEG nem változott, tehát a
     jelölés fingerprint-semleges (a 78. körös label-▷ ikon mintája). A
     narancs pending-csillagtól SZÍN és HELY különíti el (aqua, a mezőn
     BELÜL).
   · Az élő régiók (aria-live) MINDIG a DOM-ban vannak — üresen 0 magasak
     (a saját trim-margóikat nyomjuk el), a térközt a látható span hordozza:
     így a rejtett hibaüzenet NEM hagy rést a mezők között. */
:where(#landing) .wd-field { position: relative; }
/* KÖTELEZŐ-jel: aqua csillag a mező jobb felső sarkában (a felirat cap-jével
   egy magasságban); a mező jobb paddingja megnő, hogy a beírt szöveg ne
   fusson alá. */
:where(#landing) .wd-field--req::after {
  content: "*";
  position: absolute;
  top: var(--sp-16);
  right: var(--sp-16);
  color: var(--accent);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
/* (ID-s szelektor SZÁNDÉKOSAN: a `#landing .wd-input { padding: … }` alapot
   kell ütni — egy ID, a specificitás-őr rendben van.) */
#landing .wd-field--req .wd-input,
#landing .wd-field--req .wd-textarea { padding-right: var(--sp-36); }
/* Élő régiók (mezőnkénti hiba + form-status): üresen NEM hordoznak térközt. */
:where(#landing) .wd-field-error,
:where(#landing) .wd-form-status { --tl: 1.4; margin: 0; }
/* A látható üzenet-span: 13px, hiba-szín, 8px a mezőtől (cap-to-baseline
   trimmel — a ház konvenciója: a fallback negatív margó, ahol van
   text-box-trim, ott a sorbox vág). */
:where(#landing) .wd-field-error > span,
:where(#landing) .wd-form-status > span {
  display: block;
  --tl: 1.4;
  font-size: var(--fs-13);
  line-height: var(--tl);
  color: var(--wd-error);
  --trim-top: calc((var(--tl) - var(--fm-asc) - var(--fm-desc)) / 2 + var(--fm-asc) - var(--fm-cap));
  --trim-bot: calc((var(--tl) - var(--fm-asc) - var(--fm-desc)) / 2 + var(--fm-desc));
  margin-top: calc(var(--sp-8) + var(--trim-top) * -1em);
  margin-bottom: calc(var(--trim-bot) * -1em);
}
@supports (text-box-trim: trim-both) {
  :where(#landing) .wd-field-error > span,
  :where(#landing) .wd-form-status > span {
    margin-top: var(--sp-8);
    margin-bottom: 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}
/* A [hidden] a display:block-ot is felülírja (különben a rejtett üzenet
   látszana — ez a 64. kör hibaosztálya: inline display kontra [hidden]). */
:where(#landing) .wd-field-error > span[hidden],
:where(#landing) .wd-form-status > span[hidden] { display: none; }
/* Hibás mező: a fókusz aqua sávjának hiba-színű párja (a jelzés így akkor is
   látszik, amikor a mező NEM fókuszált) — a fókusz-sáv marad az erősebb. */
:where(#landing) .wd-field.has-error .wd-input,
:where(#landing) .wd-field.has-error .wd-textarea {
  box-shadow: inset var(--card-stroke, 3px) 0 0 0 var(--wd-error);
}
/* A „küldés folyamatban" sor NEM hiba-színű — a semleges szövegszín. */
:where(#landing) .wd-form-status > span { color: var(--text); }
:where(#landing) .wd-form-status > span.wd-form-status-error { color: var(--wd-error); }
:where(#landing) .wd-form-status:focus { outline: none; }
:where(#landing) .wd-form-status:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* A gomb + a status-sor EGY flex-elemben ül: üres status-sor így nem ad
   plusz gap-et a mezők és a gomb közé (a form gap-je 24, a gomb margója
   +12 = 36 — változatlan). */
:where(#landing) .wd-form-send { display: flex; flex-direction: column; }
/* Küldés alatt: a gomb tiltott + halvány (a szöveges visszajelzést a
   status-sor adja, aria-live-ból is bemondva). */
/* (Az ID-s szelektor SZÁNDÉKOS: a `#landing button.wd-cta { cursor: pointer }`
   alapszabályt kell ütni — egy ID, tehát a specificitás-őr rendben van.) */
#landing .wd-cta.is-busy,
#landing .wd-cta:disabled { opacity: 0.55; cursor: progress; }
/* Honeypot: robot-csapda — a képernyőről kifuttatva (a display:none-t több
   bot kiszűri), a képernyőolvasó elől aria-hidden + tabindex=-1 zárja. */
:where(#landing) .wd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* MOBIL: a fix fejléc és a felugró billentyűzet ne takarja a fókuszált
   mezőt — a böngésző scroll-into-view-ja ezt a margót tartja. A 96px PADLÓ
   mért érték: a kompakt fejléc 83.7px @1440 és 61px @375 (a --u padlója
   miatt a skálázott 80px mobilon 60px lett volna — 1px-re a fejléc alá). */
:where(#landing) .wd-input,
:where(#landing) .wd-textarea {
  scroll-margin: max(96px, calc(96 * var(--u))) 0 max(48px, var(--sp-40));
}
/* A success-panel programozott fókuszt kap (tabindex=-1) — keret csak
   billentyűzetes úton. */
#landing .wd-form-success:focus { outline: none; }
#landing .wd-form-success:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Képernyőolvasó-only címke: az input NEVE (a placeholder csak segéd-szöveg,
   ami gépelés közben eltűnik) — látható elrendezést nem befolyásol. */
.wd-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A kapcsolat-blokk linkjei: EGYSÉGES, csendes stílus — 16px / 400 /
   aláhúzott, a szöveg színében. */
:where(#landing) .wd-clink {
  /* 126. kör — NINCS ALÁHÚZÁS SEHOL: a link jelentését az AQUA SZÍN viszi
     (a `:where(#landing) :where(a)` alap adja), a folyó szövegben lévő
     linkeken is. A korábbi `color: var(--text)` + underline páros kivezetve:
     aláhúzás nélkül a szöveg-színű link nem lett volna megkülönböztethető a
     kenyérszövegtől. */
  font-size: var(--fs-16);
  font-weight: 400;
  text-decoration: none;
}
/* Placeholder-elérhetőség (még nincs valós adat): halvány + szaggatott —
   a placeholder-konvenció szürkéje változatlan (nem token). */
:where(#landing) .wd-clink.wd-link-ph {
  /* 86. kör: NINCS aláhúzás — a szaggatott vonal „törött linknek" látszott. */
  color: var(--text-muted);
  text-decoration: none;
  cursor: default;
}

/* 87. kör — KAPCSOLAT jobb oszlop (Figma-terv): a két csoport-cím ALCÍM-
   SZINTŰ (a Strix-alcímmel azonos fokozat, fehér Onest), a CRM-linkek EGY
   SORBAN futnak, és minden itteni link AQUA, aláhúzás nélkül (a ▷ jelet a
   .wd-more adja, az ikont a .wd-ic-*). */
#landing .wd-subhead {
  font-size: calc(28 * var(--u));
  font-weight: var(--fw-xbold); /* 91. kör: a súly-létra alcím-fokozata */
  color: var(--text);
}
#landing .wd-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-32);
}
:where(#landing) .wd-clink.wd-more {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--fs-16);
  /* 91. kör: a kapcsolat-blokk linkjei REGULAR súlyúak (a .wd-more 500-as
     alapja itt nem érvényes) — a mai látvány. */
  font-weight: 400;
}
/* A csillag-span ott áll, ahol a két pszeudó-elem (ikon + háromszög) foglalt. */
.wd-star::before {
  content: "*";
  color: #E14E0A;
  font-size: calc(14 * var(--u));
  line-height: 0;
  vertical-align: super;
  margin-left: 0.2em;
  font-weight: 700;
}
.wd-pending:has(> .wd-star)::after,
.wd-pending:has(> .wd-star)::before { content: none; }

/* Kontakt-ikonok (1. stílus-kör): a közvetlen elérés sorának link-prefixei —
   CSS mask (aqua), nem DOM-elem, a szöveg-lenyomat nem látja. A blokk a két
   oldalon SZINKRONBAN tartott másolat, ezért az ikon-útvonal is a site.css-ből
   oldódik fel (mindkét oldalról azonos markup). */
:where(#landing) .wd-ic { display: inline-block; }
/* 90. kör — FIX DOBOZ-MÉRET: 20×20px @1440 (a --u skálázással), a Figma-terv
   szerint; a jel a dobozt kitölti (mask-size: contain).
   ELŐZMÉNY (a hiba oka): a 86. kör az ikonokat a link CAP-HEIGHT-jéhez
   normalizálta (a tinta = 0.707em ≈ 11.31px), amiből ikononként 12.4–15.0px-es
   DOBOZ jött — a Figma 20px-éhez képest 26–38%-kal kisebb. Új elv: ahol
   MEGADOTT doboz-méret van, az a mérvadó, nem a szöveg-metrika. */
:where(#landing) .wd-ic::before {
  content: "";
  display: inline-block;
  vertical-align: baseline;
  --ic-size: calc(20 * var(--u)); /* FIX 20px @1440 */
  width: var(--ic-size);
  height: var(--ic-size);
  /* 91. kör — IGAZÍTÁS-FIX: a doboz KÖZEPE a felirat CAP-KÖZEPÉN.
     A baseline-ra ülő inline-block közepe a baseline fölött doboz/2-nél van,
     a cap-közép cap/2-nél → a szükséges eltolás (doboz − cap)/2 LEFELÉ.
     A 90. körben ez fordított előjellel állt, ezért a 20px-es doboz
     2×4.3px-et csúszott FÖLFELÉ. */
  translate: 0 calc((var(--ic-size) - 0.707em) / 2);
  margin-right: calc(10 * var(--u));
  background: var(--accent, #3cc4c6);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
:where(#landing) .wd-ic-email::before {
  -webkit-mask-image: url("assets/icons/email.svg");
  mask-image: url("assets/icons/email.svg");
}
:where(#landing) .wd-ic-phone::before {
  -webkit-mask-image: url("assets/icons/phone.svg");
  mask-image: url("assets/icons/phone.svg");
}
:where(#landing) .wd-ic-linkedin::before {
  -webkit-mask-image: url("assets/icons/linkedin.svg");
  mask-image: url("assets/icons/linkedin.svg");
}
:where(#landing) .wd-ic-location::before {
  -webkit-mask-image: url("assets/icons/location.svg");
  mask-image: url("assets/icons/location.svg");
}
/* 124. kör — PDF-IKON a letöltés-jellegű másodlagos CTA-n (termékoldal-hero).
   UGYANAZ a recept, mint a kontakt-ikonoké (kontúros SVG CSS-MASZKKÉNT — a
   fájl saját aqua színe így nem számít, az alfa a maszk), KÉT eltéréssel:
   a doboz 28px @1440 (nem 20), és a szín `currentColor` (nem --accent), így
   a jel a link állapotát követi — placeholder-ként muted, éles PDF-nél a
   token-szín. A `--ic-size` felülírása azért elég, mert a `width/height` a
   .wd-ic::before-ban var()-ból olvas (a custom property elemenként dől el).
   A ::after teli háromszög (interakció-jel) MARAD: a kapcsolat-blokk linkjei
   is prefix-ikon + jel párost viselnek — ez a rendszer mintája. */
:where(#landing) .wd-ic-pdf::before {
  --ic-size: calc(28 * var(--u));
  background: currentColor;
  -webkit-mask-image: url("assets/icons/pdf.svg");
  mask-image: url("assets/icons/pdf.svg");
}
/* A Küldés gomb a felette lévő mezők teljes szélességét veszi fel. */
:where(#landing) .wd-form button.wd-cta {
  display: block;
  width: 100%;
}

/* --- TERMÉKOLDAL (site/diagnosztika/) --------------------------------------
   Nincs 100vh hero: a tartalom a fix fejléc-sáv alatt kezdődik; a site.js a
   62. körtől itt is betöltődik (hamburger-menü) — a scroll-spy a
   body.page-product alatt kikapcsol. */
/* 90. kör — A TERMÉKOLDAL FEJLÉCE STICKY (nem fixed): a sáv a FOLYAMBAN
   foglalja el a saját magasságát, ezért a tartalom-tartalék nem tud
   elcsúszni a fejléc magasságától. AZ „ELSŐ BLOKK 64px-e" EDDIG EZÉRT VOLT
   39px: a body 59px-et tartott fenn (a 81. körös fejléc-magasság), miközben
   a kompakt sáv a 85. kör óta 83.7px @1440 (mobilon 61 vs a fenntartott 51).
   Sticky-vel a hiba osztálya megszűnik: nincs két külön követendő szám. */
body.page-product { padding-top: 0; }
body.page-product #wd-header { position: sticky; }

/* A termékoldal-hero másodlagos linkje: a landing-hero „Tudj meg többet"
   párjának vizuális súlya (15px / 500 / aláhúzott) — az 1. stílus-körrel a
   termék-hero LIGHT módra váltott, a link a tokenekből öltözik. */
#landing .wd-cta-secondary {
  color: var(--text, #1f133d);
  /* 91. kör: méret/súly/aláhúzás a .wd-link-quiet komponensből */
}
/* 128. kör — A PDF-CTA IKONJA ÉS SZÖVEGE EGY VONALBAN A GOMBBAL.
   DIAGNÓZIS (mérve @1440): a link DOBOZA pontosan a gomb közepén ült
   (eltérés 0.00), de a link SZÖVEGE 6.74px-szel a gomb optikai közepe ALATT
   volt. Ok: a 28px-es `::before` ikon inline-blockként a BASELINE-ra ül, és a
   cap-közép igazítást egy 8.7px-es `translate` adja — ettől a sorbox lefelé
   nyúlik (32.49px doboz egy 19px-es szöveghez), a szöveg pedig a doboz alsó
   felébe kerül. MEGOLDÁS: ez a link FLEX-sor, az ikon flex-elem — az ikon és
   a szöveg EGYMÁSHOZ centrál (a translate-re nincs szükség), a doboz pedig a
   `.wd-row` `align-items: center`-jével a gombhoz. A kontakt-ikonok
   (inline-block + translate) ÉRINTETLENEK. */
#landing .wd-cta-secondary.wd-ic {
  display: inline-flex;
  align-items: center;
}
#landing .wd-cta-secondary.wd-ic::before {
  translate: none;
  flex: 0 0 auto;
}

/* Placeholder-változat (még nincs PDF): halvány + szaggatott — a
   placeholder-konvenció szürkéje változatlan. */
#landing .wd-cta-secondary.wd-link-ph {
  color: var(--text-muted);
  text-decoration: none;
  cursor: default;
}

/* Adatvédelmi apróbetűs sor a Küldés alatt (84. kör). */
#landing .wd-fineprint { color: var(--text-muted); }
/* az adatvédelmi sor linkje AQUA (a #kapcsolat link-szabálya erősebb, ezért
   itt is ID-vel — 87. kör) */
#landing .wd-fineprint a,
:where(#landing) .wd-fineprint .wd-clink { font-size: inherit; color: var(--accent); }

/* --- FÜGGŐ-JELÖLÉS (wd-pending): „döntésre vár" -----------------------------
   Erős narancs (#E14E0A — az 58. körben kékről cserélve): világos ÉS sötét
   (indigó) felületen is közvetlenül olvasható (mért kontraszt: fehéren
   3.97:1 · indigón 4.06:1 · a szürke kártya-alapon 3.48:1 — mind a 3:1-es
   kiemelt/nagybetűs küszöb felett), ezért NINCS külön sötét-felületi
   kiemelő-háttér. Vizuálisan ELTÉR a placeholder-jelöléstől (wd-link-ph,
   halvány szürke + szaggatott): az SZÖVEG-hiányt jelöl, ez DÖNTÉS-hiányt.
   KONVENCIÓ: minden wd-pending / wd-pending-frame elem data-pending
   attribútumban hordozza a rövid okot — a smoke:site számolja és listázza
   őket (oldal + blokk + ok).
   Két alak: wd-pending = narancs SZÖVEG (span/link/logó-slot);
   wd-pending-frame = narancs KERET blokk-szinten (kártya vagy teljes
   szekció), a tartalom színei változatlanok. */
/* 84. kör — ÚJ ELV: a pending elem a RENDES szövegével és RENDES színével
   jelenik meg; a jóváhagyás-igényt egy APRÓ NARANCS CSILLAG jelzi utána, az
   ok a title-ben (tooltip) és a data-pending-ben (a smoke-leltár ebből
   számol). A korábbi narancs SZÖVEGSZÍN kivezetve. */
.wd-pending::after {
  content: "*";
  color: #E14E0A;
  /* APRÓ és a szülő betűmérettől FÜGGETLEN (14px @1440) — nagy H2-n is jel
     marad, nem díszítés. */
  font-size: calc(14 * var(--u));
  line-height: 0;
  vertical-align: super;
  margin-left: 0.2em;
  font-weight: 700;
  cursor: help;
}
/* A csillag SOHA nem nyeli el az elem saját ::after ikonját (gomb/link
   háromszög) — azokon az elemeken a csillag a szöveg elé kerül helyette. */
#copy .cta.wd-pending::after,
#landing .wd-cta.wd-pending::after,
#landing a.wd-more.wd-pending::after { content: ""; }
#copy .cta.wd-pending::before,
#landing .wd-cta.wd-pending::before,
#landing a.wd-more.wd-pending::before {
  content: "*";
  color: #E14E0A;
  font-size: calc(14 * var(--u));
  vertical-align: super;
  margin-right: 0.2em;
}
/* 125. kör — TALÁLT HIBA JAVÍTVA (a 88. kör hibaosztálya, ID-specificitáson):
   ha az elem SAJÁT `.wd-star` spant hordoz (mert mindkét pszeudója foglalt —
   ::before ikon / ::after háromszög), akkor a fenti ID-s szabály visszahozta
   a ::before csillagot → KETTŐS jelölés. A semlegesítő a 1639. sori
   `.wd-pending:has(> .wd-star)` párja, de ID-specificitáson (1,3,1), a
   fenti (1,2,1) UTÁN. Mérve: a gerinc-kártya és a 6. pillér-kártya
   CTA-ján 2 → 1 csillag; minden más pending elem érintetlen. */
#copy .cta.wd-pending:has(> .wd-star)::before,
#landing .wd-cta.wd-pending:has(> .wd-star)::before,
#landing a.wd-more.wd-pending:has(> .wd-star)::before { content: none; }
/* Blokk-szintű függő-jelölés: narancs keret + kis címke a data-pending okból
   (a címke szövege indigó — a narancs alapon ez a jobban olvasható pár; a
   CTA sötét-a-színesen mintáját követi). */
.wd-pending-frame {
  outline: 3px solid #E14E0A;
  outline-offset: -3px;
}
.wd-pending-frame::before {
  content: "függő döntés — " attr(data-pending);
  align-self: flex-start;
  background: #E14E0A;
  color: #1f133d;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: calc(3 * var(--u)) var(--sp-8);
}

/* ===========================================================================
   KOMPONENS-RÉTEG (91. kör) — a 221 inline stílus kiváltása
   ---------------------------------------------------------------------------
   ELV: minden komponens `:where(#landing)`-gel scope-olt, ezért a
   specificitása (0,1,0) — a MÓDOSÍTÓ osztályok forrás-sorrend szerint
   nyernek, nem kell ID-vel felülütni őket. (Ez a specificitás-adósság volt
   az oka, hogy körökön át minden új variáns újabb `#landing #x` kivételt
   kapott.) A módosító CSAK TOKENT ír át, nem duplikál szabályt.
   =========================================================================== */

/* --- SÚLY-LÉTRA tokenben (90. kör rendszere + 2 új fokozat) --------------- */
:root {
  --fw-black: 900;      /* H1 · H2 — szekció- és oldal-cím */
  --fw-xbold: 800;      /* alcím-szint (22–28px) */
  --fw-bold: 700;       /* kártya-cím · lista-cím · nevek */
  /* (--fw-value: 600 — a 124. körrel KIVEZETVE a `.wd-stat--card`-dal együtt:
     nem maradt használója, és az Onest 600 vágat nincs is a fontlinkben.) */
  --fw-med: 500;        /* kiemelt lista-tétel · másodlagos link */
  --fw-hero-lead: 200;  /* hero lead ExtraLight — 91. kör */
}

/* --- SZEKCIÓ-HÉJ ---------------------------------------------------------- */
:where(#landing) .wd-sec {
  padding: var(--sp-64) var(--sp-80);
}
/* 122. kör — A BORDER-ALAPÚ SZEKCIÓ-VONAL RENDSZER KIVEZETVE: vonalat
   KIZÁRÓLAG fizikai elem ad (.wd-sep — lentebb, a szekciók KÖZÉ téve a
   markupban). EGY határ = EGY elem — a duplikáció szerkezetből kizárt. */

/* --- SZEPARÁTOR-ELEM (.wd-sep) ---------------------------------------------
   Alap: KIFUTÓ (teljes szélesség) — SZEKCIÓ-határra; a szín a határ
   MÓDJÁBÓL jön (a sep a wd-light/wd-dark mód-osztályt viseli, a --line-t a
   mód-scope adja — light #EBE8EF · dark #342066). Elhelyezés-szabályok:
   light↔light szekció-határ = kifutó light · dark↔dark = kifutó dark
   (Csapat→Kapcsolat, Kapcsolat→Footer — a 107-es dark vonalak vissza) ·
   light↔dark = SEMMI (a színváltás az elválasztó) · a 2 kifutó dark CTA-sáv
   vonal nélkül. --inset: BEHÚZOTT (tartalom-szélesség, a töréspont-paddingot
   követve) — szekción BELÜLI fejezet-osztásra; szekción belül elhelyezve a
   szekció paddingja miatt margó nélkül is tartalom-szélES. */
:where(#landing) .wd-sep {
  border: 0;
  margin: 0;
  padding: 0;
  height: 1px;
  flex: none;
  background: var(--line);
}
/* 123. kör — VARRÁS-KÖTÉNY: a szekciók tört (vw-alapú) magasságai közt
   szub-pixel RÉS nyílik, amin a z0-s body INDIGÓJA átsüt (mérve: teli
   indigó device-sor a vonal mellett — a „dupla/erős vonal" hatás valódi
   forrása, böngészőnként más kerekítéssel). A sep ezért 2-2px, a határ
   MÓDJÁNAK háttérszínével festett kötényt visel a vonal FELETT és ALATT
   (border-box: 5px doboz, középen az 1px vonal) — ez fedi a rést ÉS a
   szomszéd szekciók tört-élű sorait a snap-eltolás után is. A vonal EGÉSZ
   device-pixelre igazítását a site.js sep-igazítója adja. ⚠ Dark határon a
   kötény 2px-nyi sávban kitakarja az átsütő deco-glyph-eket — a fátyol
   alatt gyakorlatilag láthatatlan (élő ítélet Gáboré). */
/* 128. kör — A KÖTÉNY CSAK A LIGHT HATÁROKON: a dark blokkok ÁTERESZTŐK, ott
   a szomszédos szekciók között nincs „rés-probléma" (nem sütne át idegen szín
   — a page-háttér ugyanaz az indigó), a 2-2px-es színezék viszont a vonal
   mellett vizuálisan zavaró volt. A dark sep innentől CSUPASZ 1px vonal. */
:where(#landing) .wd-sep.wd-light {
  height: 5px;
  border-top: 2px solid var(--bg, #ffffff);
  border-bottom: 2px solid var(--bg, #ffffff);
}
:where(#landing) :not(section, footer) > .wd-sep--inset { margin: 0 var(--sp-80); }
/* Lábléc: vízszintes elrendezés. */
:where(#landing) .wd-sec--foot {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-40);
  flex-wrap: wrap;
}
/* ÚJ VARIÁNS (91. kör): a szekció a LIGHT KÁRTYA gradiensét kapja — ilyenkor
   sem alul, sem FÖLÜL nincs szeparátor (a fölötte lévő szekció vonalát a
   :has() szedi le). */
/* M2 (112. kör): a tint szekció-gradiense kivezetve — az osztály tisztán
   VARRAT-jelölő (vonal-vonatkozása a 122. körtől nincs: a határ-vonalakat a
   .wd-sep elemek adják). */

/* ============================================================================
   M2 (112. kör) — A LABOR SZÍN- ÉS RÉTEG-RENDSZERE (96–103. kör receptjei,
   a kalibrált defaults.v5.json lab.* értékei BEÉGETVE — nincs runtime-kar).
   RÉTEGREND: z0 body (indigó) · z1 #deco-layer (fix deco) · z2 szekciók.
   KAPU: a fix-képes receptek (tinta, lyuk, blur) CSAK ott élnek, ahol van
   deco-réteg (body:has(.wd-deco-layer)) ÉS desktopon (≥769px — mobilon a
   deco a heróval kigördül, a viewport-fix másolatnak nincs mihez folytonosnak
   lennie; a kapu zárva = tiszta degradáció: sík fehér/indigó szekciók). */
:root {
  /* mennyi süt át a decóból a TARTALOM ALATT (lab.decoUnder — a dark fátyol
     és a lyuk-kártya közös értéke; a hero fix rétege mindig 100%) */
  --wd-deco-under: 0.7;
  /* a fehér-szekció tinta + a lyuk-kártya képe: az AKTUÁLIS jelenet statikus
     deco-PNG-je — a landingen a JS (decoLayer) követi a slide-ot, a
     termékoldalon fix (starship — Gábor döntése, M2) */
  --deco-mask-url: url("assets/static/deco-tiger@2x.png?v=622f2962");
}
/* 127. kör: a termékoldal dedikált jelenete a SAILBOAT (a decoLayer JS is
   erre állítja a változót — ez az induló/mobil érték). */
body.page-product { --deco-mask-url: url("assets/static/deco-sailboat@2x.png?v=0f218b75"); }

/* DARK SZEKCIÓ — „LYUK A MÉLYBE" + tartalom alatti halványítás (102/103. kör):
   a szekció ÁTERESZTŐ — a háttere a page-háttér színű FÁTYOL (1 − decoUnder =
   30% indigó), alatta a fix deco süt át. A lab ::before-os fátylával bitre
   azonos eredő (blend: normal), de nem foglalja a ::before-t és nem kíván
   tartalom-emelést. KIZÁRÓLAG section/footer — a .wd-dark KÁRTYA (gerinc)
   a saját gradiensét viszi (a 97. kör labor-tanulsága). */
#landing :is(section, footer).wd-dark {
  background: color-mix(in srgb, var(--bg) calc((1 - var(--wd-deco-under)) * 100%), transparent);
}

/* (125. kör — a lábléc dark KÁRTYA-felülete + blurja a 128. körrel
   KIVEZETVE, Gábor döntése: nem vált be. A lábléc innentől a szekciókkal
   azonos, sima dark fátylat viseli, és FÖLÖTTE visszatér a szabályos
   dark↔dark szeparátor — a 122. kör szabálya szerint.) */

/* FEHÉR SZEKCIÓ — teli fehér + a deco TINTÁZOTT, viewport-fix, a szekcióra
   VÁGOTT változata (96. kör „mask" technika): a clip-path nem képez
   containing blockot a FIXED ::after-nek, tehát az a viewporthoz rögzül, az
   ős a szekcióra vágja; a maszk a színes deco-PNG ALFÁJA. A tartalom z1-re
   emelve (a pozicionált ::after különben fölé festene). Tinta: #e1dee8 @0.8
   (lab.tintColor/tintAlpha). */
@media (min-width: 769px) {
  body:has(.wd-deco-layer) #landing :is(section, footer).wd-light { clip-path: inset(0); }
  body:has(.wd-deco-layer) #landing :is(section, footer).wd-light > * {
    position: relative;
    z-index: 1;
  }
  body:has(.wd-deco-layer) #landing :is(section, footer).wd-light::after {
    content: "";
    position: fixed;
    top: 0;
    right: var(--deco-shift-x);
    height: var(--deco-size);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    background-color: #e1dee8;
    opacity: 0.8;
    -webkit-mask: var(--deco-mask-url) no-repeat center / 100% 100%;
    mask: var(--deco-mask-url) no-repeat center / 100% 100%;
  }
}

/* LYUK-KÁRTYA (.wd-card-hole — a landing gerinc-kártyája, 102. kör): TELI
   FEHÉR szekcióban ül, ezért saját, viewporthoz rögzített deco-képet hordoz
   (a page-háttérrel pixelre folytonos), sík indigó alapon (vignetta nélkül —
   a sarok-sötétítés keretet adna). ⚠ transform/filter/backdrop-filter TILOS
   rajta: containing blockot képezne a fixed ::before-nak (a blur-szabály
   :not()-tal kihagyja — smoke-őr védi). */
#landing .wd-card.wd-card-hole {
  --card-center: #1f133d;
  --card-edge: #1f133d;
}
@media (min-width: 769px) {
  body:has(.wd-deco-layer) #landing .wd-card.wd-card-hole { clip-path: inset(0); }
  body:has(.wd-deco-layer) #landing .wd-card.wd-card-hole > * {
    position: relative;
    z-index: 1;
  }
  body:has(.wd-deco-layer) #landing .wd-card.wd-card-hole::before {
    content: "";
    position: fixed;
    top: 0;
    right: var(--deco-shift-x);
    height: var(--deco-size);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    opacity: var(--wd-deco-under);
    background: var(--deco-mask-url) no-repeat center / 100% 100%;
  }
}

/* KÁRTYA-BLUR (lab.blur 6px, blurMode: all) — GYENGE-KLIENS KAPUVAL: a
   backdrop-filter a 94. kör mérése szerint a domináns compositor-tétel,
   ezért csak ott fut, ahol a hero-JS élő utat választana (a kapu a
   gyenge-kliens feltételek CSS-negáltja: nem reduced-motion ÉS van hover ÉS
   >768) — plusz csak deco-réteges oldalon. A lyuk-kártya kimarad
   (fixed-csapda — lásd fent). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (min-width: 769px) {
  body:has(.wd-deco-layer) #landing .wd-card:not(.wd-card-hole),
  body:has(.wd-deco-layer) #landing .wd-card-row {
    /* 120. kör: a blur a LISTA-KÁRTYA sorok skinjének is része. */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* TERMÉKOLDAL-DECO — 127. kör: a statikus CSS-hátterű réteget az ÉLŐ MOTOR
   váltotta (a landing hero ELVE szerint: a hero mögött élő canvas, a tartalom
   alatt statikus PNG, egyetlen fix rétegben). A jelenet a SAILBOAT.
   ⚠ GEOMETRIA — a landingtől TUDATOSAN eltér: ott a hero 100vh, ezért a
   deco-négyzet is 100vh. A termék-hero a 126/B kör óta TARTALOM-magasságú
   (644px @1440), ezért a réteg mérete a HERO magasságát követi: a site.js
   írja a `--deco-size` változót (a hero mért magassága, a viewportra vágva).
   UGYANEZT a méretet használja a fehér szekciók tint-maszkja is — így a
   hero és a tartalom alatti kép geometriája FOLYTONOS (nincs ugrás a
   határon). Mobilon a réteg — a landing modelljével azonosan — a lap
   tetején, a heróval gördül. */
/* (128. kör: a termékoldal SAJÁT deco-geometriája KIVEZETVE — a réteg és a
   tint a közös `--deco-size` / `--deco-shift-x` karokat követi, ugyanúgy,
   mint a landingen. A `--deco-size` JS-mérése a site.js-ből is kikerült.) */

/* --- ELRENDEZÉS-SEGÉDEK (a 14 inline flex-wrapper helyett) ---------------- */
:where(#landing) .wd-flow {
  display: flex;
  flex-direction: column;
  gap: var(--flow, var(--sp-64));
}
:where(#landing) .wd-flow--16 { --flow: var(--sp-16); }
:where(#landing) .wd-flow--20 { --flow: var(--sp-20); }
:where(#landing) .wd-flow--24 { --flow: var(--sp-24); }
:where(#landing) .wd-flow--32 { --flow: var(--sp-32); }
:where(#landing) .wd-flow--36 { --flow: var(--sp-36); }
:where(#landing) .wd-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--row, var(--sp-24));
}
:where(#landing) .wd-row--28 { --row: var(--sp-28); }

/* --- SZÖVEG-FOKOZATOK (a 74 inline font-size/weight/--tl helyett) --------- */
/* Kártya/lista törzsszöveg (31×) · apró (10×) · legkisebb (3×) */
:where(#landing) .wd-text { font-size: var(--fs-15); --tl: 1.4; line-height: var(--tl); }
/* Méret-fokozatok — ÖNÁLLÓAN is használhatók (a --tl a .wd-text-tel jön;
   a 13px-es apróbetűs sorok a mai örökölt sortávot tartják). */
:where(#landing) .wd-size-14 { font-size: var(--fs-14); }
:where(#landing) .wd-size-13 { font-size: var(--fs-13); }
:where(#landing) .wd-text--med { font-weight: var(--fw-med); }
/* Cím-fokozatok a súly-létrából (a h3 alapja 19px/700 — lásd az elem-alapot) */
:where(#landing) .wd-title-sm { font-size: var(--fs-18); font-weight: var(--fw-bold); }
:where(#landing) .wd-title-xs { font-size: var(--fs-17); font-weight: var(--fw-bold); }
:where(#landing) .wd-subhead-sm { font-size: var(--fs-22); font-weight: var(--fw-xbold); }

/* --- TAG (92. kör): önálló felsorolás-elem vékony aqua kerettel, aqua
   szöveggel — a gerinc-kártya szolgáltatás-tételei. Nagy kezdőbetű a
   SZÖVEGBŐL jön (nincs text-transform: a `capitalize` minden szót érintene). */
:where(#landing) .wd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(#landing) .wd-tag {
  border: 1.5px solid var(--accent, #3cc4c6); /* 107. kör: 1 → 1.5px */
  color: var(--accent, #3cc4c6);
  font-size: var(--fs-14);
  font-weight: var(--fw-med);
  --tl: 1;
  line-height: var(--tl);
  /* 119. kör: a labor 102. körös tag-magasítása (9 → 11px) átvezetve —
     a lab-merge-ből ez az egy kalibrált érték maradt ki a site-on. */
  padding: calc(11 * var(--u)) calc(14 * var(--u));
  white-space: nowrap;
}

/* --- LISTA-CSALÁD (29 sor, 5 különböző mechanizmus → 1) ------------------- */
/* --- LISTA-KÁRTYA (119. kör): a „listázós" blokkok közös komponense —
   „Miért mi" (IKONOS) · P3 „Lépésről lépésre" (SORSZÁMOS) · „Gyakori
   kérdések" (KÉRDÉS–VÁLASZ). KIZÁRÓLAG SOROKBA rendez (egy elem = egy
   kártya-sor), light kártya-skin + bal aqua stroke; kártya-padding 24px
   H és V · belső gap (ikon/szám ↔ szöveg) 16px · kártyák közti gap 16px.
   E blokkokban SZEPARÁTOR-VONAL nincs többé (a 107-es lista-szeparátor
   szabály alól kikerültek). ELŐRETEKINTÉS: a FAQ később HARMONIKA lesz —
   a kérdés KÜLÖN (első) gyerek-elem, fejléc-szerepre alkalmas. */
:where(#landing) .wd-card-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16); /* kártyák közti gap */
}
:where(#landing) .wd-card-row {
  --card-stroke: calc(3 * var(--u));
  background: radial-gradient(farthest-corner at 50% 50%, var(--card-center) 0%, var(--card-edge) 100%);
  box-shadow: inset var(--card-stroke) 0 0 0 var(--accent);
  padding: var(--sp-24); /* 24px H és V */
}
/* IKONOS sor (Miért mi): ikon + szöveg egy sorban, 16px közzel. */
:where(#landing) .wd-card-row--check {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  font-size: var(--fs-19);
  font-weight: var(--fw-med);
  --tl: 1.4;
  line-height: var(--tl);
}
/* SORSZÁMOS sor (P3): a .wd-step grid adja a kolumnákat (gap-je 16px). */
/* KÉRDÉS–VÁLASZ sor (FAQ): a kérdés külön elem — később harmonika-fejléc. */
:where(#landing) .wd-card-row--qa {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

:where(#landing) .wd-list { display: flex; flex-direction: column; }
:where(#landing) .wd-list--narrow { max-width: calc(860 * var(--u)); }
:where(#landing) .wd-list-item { padding: var(--li-pad, calc(22 * var(--u))) 0; }
/* 107. kör — FELSOROLÁS-SZEPARÁTOR (egyetlen szabály, MINDEN listára): FELÜL
   és ALUL nincs vonal, a TÉTELEK KÖZÖTT igen. A korábbi hármas (minden sor
   felső vonala + `--notop` kivétel + `--last` záró vonal) kivezetve. */
:where(#landing) .wd-list-item + .wd-list-item { border-top: 1px solid var(--line); }
/* (A --qa / --check / --step lista-variánsok a 119. körrel a LISTA-KÁRTYA
   komponensbe költöztek — lásd fent; a .wd-list bázis + szeparátor-szabály
   a későbbi sima listáknak marad.) */
/* Pontos felsorolás (91. kör: a P5 „▶" karakterek helyett). */
:where(#landing) .wd-bullets {
  /* NEM flex: a flex-elemek blokkosodnak, és a ::marker eltűnik — a lista
     blokk-folyam marad, a sorok közti rést a li margója adja. */
  margin: 0;
  padding-left: calc(22 * var(--u));
  list-style: disc outside;
}
:where(#landing) .wd-bullets > li {
  font-size: var(--fs-15);
  --tl: 1.4;
  line-height: var(--tl);
}
:where(#landing) .wd-bullets > li + li { margin-top: var(--sp-20); }
:where(#landing) .wd-bullets > li::marker { color: var(--accent); }

/* --- CTA-SÁV bekezdése (20px/500 — a 2 közbeszúrt sávon) ----------------- */
:where(#landing) .wd-band-text {
  font-size: calc(20 * var(--u));
  font-weight: var(--fw-med);
  --tl: 1.4;
  line-height: var(--tl);
}

/* (A `--last` záró vonal a 107. körrel kivezetve — a lista ALJÁN nincs vonal.) */

/* (124. kör — A RADAR-MOCK (.wd-mock*) KIVEZETVE: a P4 helyfoglaló widgetjét
   a valódi radar-kép váltotta le, a szabályoknak nem maradt használója.) */

/* --- LOGÓ-JELEK (a 9 inline méret helyett — a --mark az asset-azonosító) -- */
/* 105. kör — ÜGYFELEINK-SÁV: ugyanaz az öt logó, INDIGÓ maszkkal, szintén
   EGYSÉGESEN 32px magasan; a szélesség a natív képarányból (a maszk
   `contain`-nel ül a dobozban, tehát a doboz aránya a logóé kell legyen). */
:where(#landing) .wd-logo-mark--hunguest {
  --mark: url("assets/logos/hunguest-logo-v2.svg");
  height: calc(32 * var(--u)); width: calc(126 * var(--u));
}
:where(#landing) .wd-logo-mark--ganz {
  --mark: url("assets/logos/ganz-logo.svg");
  height: calc(32 * var(--u)); width: calc(83 * var(--u));
}
:where(#landing) .wd-logo-mark--talentis {
  --mark: url("assets/logos/talentis-agro-logo-v2.svg");
  height: calc(32 * var(--u)); width: calc(98 * var(--u));
}
:where(#landing) .wd-logo-mark--opus {
  --mark: url("assets/logos/opus-logo-v2.svg");
  height: calc(32 * var(--u)); width: calc(97 * var(--u));
}
:where(#landing) .wd-logo-mark--whitedog {
  --mark: url("assets/logos/whitedog-logo.svg");
  height: calc(32 * var(--u)); width: calc(130 * var(--u));
}

/* --- FOLYÓ-SZÖVEG LINK: a semleges alap (aláhúzott aqua) ------------------ */
/* Osztályba fogva, hogy a lefedettség-őr ne találjon osztály nélküli linket —
   a látvány az elem-alapé (`:where(#landing) :where(a)`), tehát változatlan. */
:where(#landing) .wd-link { color: var(--accent, #3cc4c6); }

/* --- LINK-VARIÁNS: néma (aláhúzás nélküli) másodlagos link ---------------- */
/* A 90. kör „önálló linkek nem aláhúzottak" szabálya a hero `.cta-secondary`-t
   nem érte el, mert annak SAJÁT aláhúzás-szabálya volt. Most egy komponens
   fedi mindkettőt. */
:where(#landing, #copy) .wd-link-quiet {
  font-size: max(13px, calc(15 * var(--u)));
  font-weight: var(--fw-med);
  text-decoration: none;
}

/* (124. kör — A `.wd-stat--card` ÉRTÉK-FOKOZAT KIVEZETVE: a P7 „Keretek és
   ár" kártya-címei a rendszer MEGLÉVŐ kártya-cím fokozatát kapták — h3 =
   19px/700 @1440 —, ezért a 28/600-as egyedi fokozatnak nem maradt
   használója. ⚠ A 600-as súly a termékoldalon eddig sem renderelt: az Onest
   600 vágat nincs a fontlinkben, a böngésző a 700-at vette — mérve.) */

/* --- HERO-MARQUEE logó-képek (a 9 inline magasság helyett) ---------------- */
/* 105. kör — LOGÓ-SOR, EGY szabály: minden logó EGYSÉGESEN 32px magas
   (a belső space kompenzálja a tömeg-eltéréseket — nincs optikai skálázás),
   és a hero-sorban 75% FEHÉR. A szín/opacitás a CSS-é: az SVG-kből a
   Figma-export beégetett alfája kivezetve, hogy pontosan 75% legyen. */
:where(#hero) .hero-logo-img {
  height: calc(32 * var(--u));
  width: auto;
  opacity: 0.75;
}

/* --- Önálló link ALAP-mérete (16px/500) — eddig 1 példányon inline volt --- */
:where(#landing) a.wd-more { font-size: var(--fs-16); font-weight: var(--fw-med); }

/* --- Nem zsugorodó flex-elem (a 3 inline flex-shrink helyett) ------------- */
:where(#landing) .wd-noshrink { flex-shrink: 0; }

/* --- LOGÓ-KÉP a láblécben (2 inline helyett) ------------------------------ */
:where(#landing) .wd-foot-logo { display: block; height: calc(34 * var(--u)); width: auto; }

/* --- RESZPONZÍV TÖRÉSPONTOK (62. kör) -------------------------------------- */

/* ≤1024 — TABLET: 4-es gridek 2×2-re, paddingok 48-ra, deco kisebb. */
@media (max-width: 1024px) {
  #wd-header { padding: 14px 48px; }
  #landing :not(section, footer) > .wd-sep--inset { margin: 0 48px; }
  /* A szekciók inline drótváz-paddingja ellen — szándékos !important. */
  #landing section,
  #landing footer {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  #landing .wd-grid-4 { grid-template-columns: repeat(2, 1fr); }
  #landing .wd-logo-band { margin: 0 -48px; }
  #landing .wd-logo-band .wd-label { padding: 0 48px; }
  .hero-main { padding: 24px 48px; }
  .hero-deco { right: 48px; }
  .hero-copy-track { max-width: 80%; }
  .hero-logos .wd-label { padding: 0 48px; }
}

/* ≤768 — MOBIL: hamburger-fejléc, hero mobil-sorrend, 1 oszlopos gridek,
   vizuál a szöveg fölött, sorok egymás alá. */
@media (max-width: 768px) {
  /* Fejléc: hamburger + logó | headset-ikon; a linksor lenyílásban. Mobilon
     a méretek FIXEK (nincs kompakt-zsugor) — csak a háttér vált. */
  #wd-header { padding: 10px 20px; gap: 14px; }
  #landing :not(section, footer) > .wd-sep--inset { margin: 0 24px; }
  #wd-header .wd-head-logo img { height: 26px; }
  .wd-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -9px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
  }
  .wd-head-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    color: #fff;
  }
  #wd-header .wd-head-nav { display: none; }
  #wd-header.nav-open .wd-head-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px 20px 18px;
    background: var(--bg, #1f133d);
    border-bottom: 1px solid var(--line);
  }
  #wd-header.nav-open .wd-head-nav a { padding: 10px 0; }
  /* A spy-jelölés mobilon irreleváns (a lenyílás úgyis zár). */
  #wd-header .wd-head-nav a.active { text-decoration: none; color: var(--text-muted); }


  /* HERO MOBILON (84. kör — ÚJRAÉPÍTVE): a deco a DESKTOP modellt követi —
     absolute háttérréteg a TELJES hero mögött (a fejléc ÉS a logósor mögé is
     benyúlik), fal-tól falig: 1:1, a magassága a hero teljes magassága, a
     szélessége ebből adódik és VÍZSZINTESEN KÖZÉPRE van igazítva (a túllógó
     rész a body overflow-x: hidden alatt vágódik). A copy a sáv ALJÁHOZ ül
     (a deco felső része szabadon marad), a maradék hely a copy fölött nyílik. */
  #hero { padding-top: 51px; }
  .hero-main {
    display: flex;
    align-items: flex-end;
    padding: 0 24px var(--sp-40);
  }
  .hero-deco {
    /* 85. kör: FALTÓL FALIG (teljes szélesség) és FELÜLRE ZÁRVA — a magassága
       az 1:1 arányból adódik (nem a hero teljes magassága). A fejléc mögé
       benyúlik; a copy alatta / rálógva ül. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    translate: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* M1 (111. kör): a FIX deco-réteg mobilon a lap tetején, a heróval gördül
     (a lab #lab-deco ≤768-as modellje) — a hit-area geometriája ugyanez. */
  #deco-layer {
    position: absolute;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    width: 100vw;
    aspect-ratio: 1 / 1;
  }
  /* Mobilon a copy a sáv ALJÁHOZ ül (flex-end) — a desktop közép-képlet
     (fejléc-kompenzáló margó) itt nem játszik. */
  .hero-copy-track {
    max-width: 100%;
    margin-top: 0;
  }
  /* Mobil hero-ritmus: a trim-rendszer 52-es tokenje (skálázva 39px @375). */
  /* 86. kör: a mobil hero-ritmus −15% (39 → 33px @375); a CTA-sor rése
     UGYANEZ az egységes copy-gap; a copy-blokk MINDIG lefelé zár. */
  #copy { gap: calc(var(--sp-52) * 0.85); }
  #copy .hero-slide { gap: calc(var(--sp-52) * 0.85); }
  #copy .cta-row { gap: calc(var(--sp-52) * 0.85); }
  #copy .hero-slides { align-items: end; }
  #copy h1 { font-size: 36px; } /* a lab mobil-fokozata */
  /* Bogyók mobilon: alul, vízszintesen — csak JELZÉS-értékű: kicsi,
     diszkrét sor (kattintható marad, de vizuálisan nem hívogat). */
  /* 86. kör: a bogyók a DECO JOBB oldalán, FÜGGŐLEGESEN (mint desktopon),
     sokkal kisebben — mobilon csak jelzés. A deco 1:1 és teljes szélességű,
     ezért a fél magassága = 50vw. */
  .hero-dots {
    position: absolute;
    top: 50vw;
    right: 6px;
    transform: translateY(-50%);
    flex-direction: column;
    padding: 0;
    margin: 0;
  }
  .hero-dot { width: 20px; height: 20px; }
  .hero-dot::before { width: 3px; height: 3px; border-width: 1px; }
  /* Pillérek mobilon: vertikális lista (ikon + cím, a lead alattuk) — a
     kártya-alapstílus (gradiens + bal stroke) itt KIKAPCSOL: a lista
     szeparátor-vonalas, nem kártyás elrendezés. */
  #landing .wd-pillar {
    border: 0;
    border-top: 1px solid var(--line);
    padding: 24px 0;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px 16px;
    align-items: start;
  }
  #landing .wd-pillar-grid { display: flex; flex-direction: column; gap: 0; }
  #landing .wd-pillar.wd-card { background: none; box-shadow: none; }
  #landing .wd-pillar .wd-card-icon { width: 40px; height: 40px; }
  #landing .wd-pillar p { grid-column: 2; }
  #landing .wd-pillar:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  #landing .wd-pillar-empty { display: none; }
  /* Lead-sorok mobilon teljes szélességben. */
  #landing .wd-lead-wrap { max-width: 100%; }
  .hero-logos { padding-bottom: 12px; }
  /* Az „Ügyfeleink" label mobilon rejtve (64. kör) — desktopon marad.
     (1. stílus-kör: #hero-val erősítve — a label-alapszabály ID-szelektora
     ellen, különben a display: flex győzne.) */
  #hero .hero-logos .wd-label { display: none; }
  /* 86. kör: a logók mobilon −30%, a köz ugyanennyivel nagyobb. */
  #hero .wd-slot-img img { scale: 0.7; }
  /* 113. kör: +20% (8.6667 → 10.4vw) — a desktop-köz emelésével arányban. */
  #hero .wd-logo-set { gap: 10.4vw; padding-right: 10.4vw; }

  #landing section,
  #landing footer { padding: 48px 24px !important; }
  #landing .wd-grid-2 { grid-template-columns: 1fr; }
  #landing .wd-grid-3 { grid-template-columns: 1fr; }
  #landing .wd-logo-band { margin: 0 -24px; }
  #landing .wd-logo-band .wd-label { padding: 0 24px; }
  #landing .wd-media-split { grid-template-columns: 1fr; gap: 24px; }
  /* Vizuál a szöveg FÖLÉ (a label marad legfelül). */
  #landing .wd-media-split .wd-media { order: -1; }
  #landing .wd-media-split .wd-label { order: -2; }
  /* 124. kör — a KÉP-vizuál csak a --wide (radar) változatban kap sorrendet:
     ott a copy áll elöl a DOM-ban. A többi media-splitben a DOM-sorrend dönt
     (a mai viselkedés — a Kik vagyunk képe elöl, a Strix-képé hátul áll;
     ez tudatosan érintetlen). */
  #landing .wd-media-split--wide > .wd-media-img { order: -1; }
  /* (a .wd-step mobil-felülírás a 120. körrel kivezetve — az új
     sorszám+stack elrendezés minden méreten azonos) */
  #landing .wd-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  #landing .wd-contact-side {
    border-top: 1px solid var(--line, #d8d8d8);
    padding-top: 32px;
  }
  #landing .wd-cta-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ≤480 — KIS MOBIL: a 2×2-k is 1 oszlop, tipó alsó fokozat. */
@media (max-width: 480px) {
  #landing :not(section, footer) > .wd-sep--inset { margin: 0 20px; }
  #landing section,
  #landing footer { padding: 40px 20px !important; }
  #landing .wd-grid-4 { grid-template-columns: 1fr; }
  #landing .wd-logo-band { margin: 0 -20px; }
  #landing .wd-logo-band .wd-label { padding: 0 20px; }
  /* 91. kör: `:where()` — hogy a cím-fokozat komponensek (pl. .wd-subhead-sm)
     felülírhassák ezt a töréspont-alapot ID-s kivétel nélkül. */
  :where(#landing) :where(h3) { font-size: 17px; }
  .hero-main { --deco-h: calc(100vw - 40px); padding: 16px 20px 8px; }
}