/* Oldalak közti áttűnés (progresszív bővítés). Ahol a böngésző támogatja a
   cross-document view transitiont (ma Chrome/Edge), ott a lapváltás magától
   átúszik a vágás helyett; ahol nem, ott pontosan a régi viselkedés marad.
   Ehhez MINDEN dokumentumnak deklarálnia kell — nálunk közös a main.css, tehát
   a főoldal, a features és a jogi oldalak is megkapják.
   Csökkentett mozgásnál nem kérünk áttűnést. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* =========================================
   MAIN — Medalyst weboldal layout
   Referencia look&feel: nor.ma (keskeny konténer, kártya-hero, sok levegő)
   ========================================= */

:root {
  /* Figma grid @1440: 12 oszlop × 64px, 24px gutter, center → 1032px tartalom, 204px margók */
  /* A lebegő menü-pill alja 82px-nél van (24px offset + 58px magasság). A hero-val
     induló oldalakat ez nem érinti, a jogi oldalaknak viszont ennyit kell hagyniuk
     a cím fölött, különben a pill rátakar. */
  --nav-pill-clearance: 82px;
  /* olvasható sorhossz a jogi prózához (a táblázat ennél szélesebb lehet) */
  --legal-measure: 720px;
  --section-gap: 112px;
}

html { scroll-behavior: smooth; }

/* a 100vw-s háttérsávok a scrollbar szélességével túllógnának →
   a clip levágja őket és megakadályozza a vízszintes elcsúszást */
html, body { overflow-x: clip; }

body { background: var(--background-default); position: relative; }

/* ---------- A lap felső szürke tónusa ----------
   A szürke CSAK a lila sáv kezdetéig tart. Ezt NEM úgy oldjuk meg, hogy a body-t
   szürkére festjük és a lentebbi szekcióknak kivételként fehéret adunk — az volt az
   első, hibás kör: a kivételek kemény szürke/fehér éleket vágtak a szekcióhatárokon,
   és a lila sávok fade-je is grafitra futott ki fehér helyett.
   Helyette a szürkét a FELSŐ szekciók viszik, és a videó-szekcióban lágyan fehérbe
   fordul — épp mielőtt a lila sáv elkezdődne. Így minden lila átmenet ugyanúgy
   FEHÉRBŐL indul, ahogy tervezve volt (D-014), és nincs egyetlen kivétel-szabály sem. */
.hero { background: var(--surface-tint); }
/* Aloldalak, ahol a hero ALATT lila mintás szekció jön (demo, pricing): a szürke
   blokk-háttér letakarta volna a mintát vivő, z-index: -1-es pszeudót — így a sáv
   éles vonallal vágódott el a hero alján. Átlátszó hero-val a minta ugyanúgy
   felúszik mögé, mint a főoldalon. */
.hero--plain { background: transparent; }
/* A szürke a pillér-szekció ALJÁN fordul fehérbe, tehát a videó-szekció már
   érintetlenül fehér — a lila sáv így ugyanúgy FEHÉRBŐL úszik be, ahogy tervezve
   volt (D-014).
   Miért nem a videó-szekcióra tettem a fade-et (első próba): a lila sáv egy
   `z-index: -1`-es pszeudó, a blokk-szintű háttér viszont a festési sorrendben
   FÖLÖTTE van — a szekcióra tett háttér egyszerűen letakarta a sávot. Ugyanaz a
   csapda, mint a D-056-nál. A pillér-szekció biztonságos: az egyetlen negatív
   rétege a kártyák hover-hitboxa, azt viszont `isolation: isolate` zárja a
   kártyába. */
#value {
  background: linear-gradient(var(--surface-tint) 0%, var(--background-default) 100%);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

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

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }

/* Figma WEB: GT Bold 40/40, -4% tracking, #222 (≈ neutral-87) */
h2 {
  text-wrap: balance;
  font-size: var(--typo-title-size);
  line-height: 1;
  letter-spacing: var(--typo-title-tracking);
  color: var(--color-neutral-87);
}
h3 { font-size: var(--typo-h3-size); line-height: 1.3; }

/* Figma WEB: GT Regular 16/24, #444 (≈ neutral-70) */
.section__lead {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-neutral-70);
  max-width: var(--measure-md);
}

/* ---------- Site logo ---------- */

.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: var(--logo-h); width: auto; }

/* ---------- Hero (sunday.ai-minta: lebegő menü-pill, középre zárt szöveg, alatta a széles stage) ---------- */

.hero { padding: calc(var(--spacing-24) + var(--size-56)) 0 0; text-align: center; }

.hero__content { padding-top: var(--space-fluid-md); padding-bottom: var(--space-fluid-md); }

.hero__title {
  font-weight: 700;
  font-size: var(--typo-hero-size);
  line-height: 1;
  letter-spacing: var(--typo-title-tracking);
  color: var(--color-neutral-87);
  margin-bottom: var(--spacing-24);
}

/* Szó-rotátor a hero címben: az aktuális szó felfelé kicsúszik, a következő alulról
   érkezik, közben a doboz szélessége a szó szélességére animál (különben a mondat
   vége ugrálna). A --hover-* mintához hasonlóan minden érték tokenből jön. */
/* Hero szó-rotátor — gépelős csere.
   A doboz szélessége a tartalomé (nincs width-animáció): a törlés/gépelés maga
   adja a mozgást. Nincs overflow-vágás sem, így a descender ("g") kilóghat. */
.rotator {
  display: inline;
  color: var(--brand-primary);
  white-space: pre;   /* a részszavak szélessége karakterpontos marad */
}
@media (prefers-reduced-motion: reduce) {
  .rotator { transition: none; }
}

/* a hero két CTA-ja egymás mellett, mobilon egymás alatt */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-16);
}

.hero__subhead {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-neutral-70);
  /* 1440px-en két sorra törjön, ne háromra (a Figma 504px-e ehhez szűk volt) */
  max-width: var(--measure-xl);
  margin: 0 auto var(--spacing-40);
}

/* hero stage — a korábbi hero-kártya lila felülete, változatlan szélességben (16px bleed),
   csak most a szöveg ALATT: ide kerül majd a videó. Addig a márka-gradiens a helyőrző. */
.hero__stage {
  position: relative;
  container-type: size;   /* a videó cover-méretezése cqw/cqh-ból számol */
  display: grid;
  place-items: center;
  margin: 0 var(--bleed-inset);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-32);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 85% 10%, var(--color-primary-60) 0%, transparent 55%),
    radial-gradient(100% 120% at 10% 90%, var(--color-primary-80) 0%, transparent 60%),
    var(--color-primary-70);
  cursor: pointer;
}
/* ugyanaz a grain, mint a többi lila felületen (D-013) */
.hero__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/grain.png');
  background-size: 512px;
  opacity: 0.35;
  pointer-events: none;
}
.hero__stage .video-frame__play { position: relative; z-index: 1; }

/* képernyőkép-variáns (features): a UI-shot egészben látszik, világos alapon */
.hero__stage--shot {
  background: var(--color-primary-05);
  cursor: default;
}
.hero__stage--shot::before { opacity: 0.25; }
.hero__stage--shot img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: var(--space-fluid-sm);
}

/* ---------- Menü-pill: zárva pill, kattintásra panellé nyílik ---------- */

/* a panel mögött tompított oldal (sunday.ai minta) */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--surface-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-smooth-out),
              visibility var(--duration-fast) var(--ease-smooth-out);
}
body.nav-open .nav-overlay { opacity: 1; visibility: visible; }
/* Nyitott menü mellett az oldal NEM görgethető: előbb be kell zárni.
   A görgető elem a <html>, ezért a `body { overflow: hidden }` ÖNMAGÁBAN nem
   állítja meg a görgetést — mérve: nyitott menü mellett is 800px-t görgetett.
   Mindkettőre kell.

   A görgetősáv eltűnése kiszélesíti a viewportot, amitől a tartalom és a
   viewporthoz igazított fixed pill is elugrana. A --sb-w (a sáv mért szélessége,
   js/main.js írja) ezt kompenzálja: a lap jobb oldalt annyi paddinget kap,
   amennyit a sáv elfoglalt, a pill pedig fele annyival tolódik vissza balra,
   mert a középre igazítása a viewport felétől számol.
   macOS-en (átfedő görgetősáv) a --sb-w értéke 0, tehát nincs mit kompenzálni.
   A `scrollbar-gutter: stable` NEM jó megoldás ide: a 100vw-s háttérsávokat
   túllógatja, és elrontja a vízszintes túlcsordulás-tesztet. */
html:has(body.nav-open) { overflow: hidden; padding-right: var(--sb-w, 0px); }
body.nav-open { overflow: hidden; }
body.nav-open .nav-pill { transform: translateX(calc(-50% - var(--sb-w, 0px) / 2)); }
.nav-overlay { overscroll-behavior: contain; touch-action: none; }

.nav-pill {
  position: fixed;
  top: var(--spacing-24);
  left: 50%;
  /* Két, EGYMÁSTÓL FÜGGETLEN mozgás él ezen az elemen, és külön tulajdonságot
     kap, hogy ne kelljen közös időzítésen osztozniuk:
       • `transform`  → a középre igazítás + a HOVER-emelés
       • `translate`  → a görgetéses ki/beúszás (panel-léptékű, saját tempó)
     A hover-emelés a --pill-lift regisztrált számból jön (lásd components.css),
     és ugyanabból származik az árnyék offsetje is — a pill és az árnyéka így
     szerkezetileg nem tud különválni, ugyanúgy, mint a gomboknál (D-094). */
  --pill-lift: 0px;
  transform: translateX(-50%) translateY(var(--pill-lift));
  box-shadow: 0 calc(-1 * var(--pill-lift)) 0 var(--color-neutral-20);
  z-index: 100;
  width: min(340px, calc(100vw - 2 * var(--spacing-24)));
  background: var(--surface-default);
  border: 2px solid var(--border-nav);
  border-radius: var(--radius-full);
  isolation: isolate;
  /* A sarok NEM animál: az 1000px → 24px interpoláció köztes értékei (pl. 500px) a
     nyíló, még alacsony dobozon oválissá húznák a pillt. Nyitáskor azonnal a
     végértékre ugrik, záráskor a szűkülés végén vált vissza (0s + delay). */
  transition: width var(--duration-fast) var(--ease-smooth-out),
              /* a hover-emelés UGYANAZON a tempón, mint a gomboké (D-094) */
              --pill-lift var(--duration-slow) var(--ease-smooth-out),
              /* a görgetés-beúszás panel-léptékű mozgás (a pill teljesen elhagyja a
                 képernyőt), ezért szintén --duration-slow */
              translate var(--duration-slow) var(--ease-smooth-out),
              border-radius 0s var(--duration-fast);
}
/* hover-emelés: a transform-ot a középre igazítás foglalja, ezért az emelés `translate` */
/* ugyanaz a hover-viselkedés, mint a gomboknál, de semleges árnyékkal: a pill fehér,
   a lila él túl hangsúlyos volt rajta */
.nav-pill:not(.is-open):not(.is-tucked):hover { --pill-lift: var(--hover-lift); }
/* Görgetésre kicsúszik felfelé, visszagörgetésre beúszik.
   Ugyanazon a `translate` sávon megy, mint a hover-emelés (a `transform`-ot a
   középre igazítás foglalja) — ezért a hover-szabályból ki van zárva a kicsúszott
   állapot, különben a mutató alá érve visszahúzná a pillt.
   A -100% az elem saját magassága, a --spacing-24 a felső offset: együtt épp a
   viewport fölé viszi. Kicsúszás = záródás → --duration-quick; a visszaúszás a
   .nav-pill alap-transitionjéből jön → --duration-fast (skill: close < open). */
.nav-pill.is-tucked {
  translate: 0 calc(-100% - var(--spacing-24));
  --pill-lift: 0px;
  /* Szimmetrikus időzítés — a sunday.ai mért viselkedése szerint (rejtés ~430ms,
     beúszás ~450ms, gyakorlatilag azonos): ez egyetlen megfordítható mozgás, nem
     nyit/zár pár, ezért itt NEM érvényes a „close < open" aszimmetria. */
  transition: translate var(--duration-slow) var(--ease-smooth-out),
              --pill-lift var(--duration-slow) var(--ease-smooth-out),
              width var(--duration-fast) var(--ease-smooth-out),
              border-radius 0s var(--duration-fast);
}
.nav-pill.is-open {
  width: min(800px, calc(100vw - 2 * var(--spacing-24)));
  border-radius: var(--radius-24);
  transition: width var(--duration-fast) var(--ease-smooth-out),
              --pill-lift var(--duration-fast) var(--ease-smooth-out),
              translate var(--duration-fast) var(--ease-smooth-out),
              border-radius 0s;
}
/* hover-hitbox (lásd components.css) — nyitva nem kell, ott nincs emelés */
.nav-pill::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--hover-pad)) calc(-1 * var(--hover-pad))
         calc(var(--hover-lift) - var(--hover-pad));
}
.nav-pill.is-open::after { content: none; }

.nav-pill__bar {
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--size-24) 1fr var(--size-32);
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
}
/* A bal oldali jel a rács 24px-es hasábjában ül, de a MASKOT nagyobb nála és
   kilóg belőle — a pillnek nincs levágása, ezért ez megengedett, sőt szándékos.
   A hasáb mérete változatlan, tehát a sáv elrendezése nem mozdul. */
.nav-pill__mark {
  position: relative;
  display: inline-flex;
  justify-self: start;
  width: var(--size-24);
  height: var(--size-24);
  color: var(--brand-primary);
}
.nav-pill__mark img { width: var(--size-24); height: var(--size-24); }
.nav-pill__mascot {
  position: absolute;
  /* a hasáb közepére központozva, nagyobb méretben */
  left: 50%;
  top: 50%;
  /* A vászon 343×249, a figura ennek a közepén ~130px magas — a 24px-es
     hasábhoz képest tehát bőven nagyobb színpad kell, hogy a FIGURA legyen
     ~24px. A kilógás szándékos: a pillnek nincs levágása. */
  /* 15%-kal nagyobb, és 10px-szel balra tolva a hasáb közepéhez képest */
  width: calc(var(--size-24) * 4.4 * 1.15 * 1.1);
  height: calc(var(--size-24) * 4.4 * 1.15 * 1.1);
  margin-left: -10px;
  translate: -50% -50%;
  pointer-events: none;
}
.nav-pill__mascot svg { display: block; width: 100%; height: 100%; }
/* Nyitott menüben a figura eltűnik: ott a panel viszi a figyelmet, és a
   kilógó maskot a nagyobb doboz szélén zavaró lenne. */
.nav-pill.is-open .nav-pill__mascot { opacity: 0; visibility: hidden; }
.nav-pill__mascot { transition: opacity var(--duration-quick) ease; }
/* a logók csak a saját szélességükben linkek — a sáv többi (fehér) része a menüt nyitja */
/* A wordmark optikailag magasan ült: a betűkép súlypontja a doboz közepe FÖLÖTT
   van (az „y" szára lefelé lóg, de vékony). 4px-szel lejjebb tolva a felirat
   alapvonala kerül a sáv közepére, ami a szemnek a helyes középre-zárás. */
.nav-pill__word { display: inline-flex; justify-self: center; translate: 0 4px; }
.nav-pill__word img { height: var(--logo-h-sm); width: auto; }

.nav-pill__toggle {
  width: var(--size-32);
  height: var(--size-32);
  display: grid;
  place-items: center;
  border-radius: var(--radius-8);
  transition: background-color var(--duration-quick) ease;
}
.nav-pill__toggle:hover { background: var(--surface-alt); }
/* A hamburger a rendszer ikon-skálájáról méretezik (`--icon-md`), nem egy kézi
   18px-ről: ez a vezérlő-glifák rangja (listaikon, accordion-nyíl, csillag). A
   `--icon-sm` (16) a lap szótárában „apró jelzés, inline ikon" — egy menügomb nem
   az. A két csík közti 5px és a nyitott állapot 3,5px-es eltolása a csíkok
   KÖZÉPPONT-távolságának a fele, tehát a szélességtől független: nem kellett
   utánahangolni. */
.nav-pill__burger { display: block; width: var(--icon-md); }
.nav-pill__burger span {
  display: block;
  height: 2px;
  background: var(--text-primary);
  border-radius: var(--radius-2);
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
.nav-pill__burger span + span { margin-top: 5px; }
.nav-pill.is-open .nav-pill__burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-pill.is-open .nav-pill__burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* a panel magassága 0fr → 1fr-rel animál: pontosan a tartalom magasságáig fut,
   nincs max-height-becslésből eredő megugrás vagy holtidő a nyitás végén */
.nav-pill__panel {
  display: grid;
  grid-template-rows: 0fr;
  text-align: left;
  transition: grid-template-rows var(--duration-fast) var(--ease-smooth-out);
}
.nav-pill__panel-inner { overflow: hidden; min-height: 0; }
.nav-pill.is-open .nav-pill__panel { grid-template-rows: 1fr; }

.nav-pill__links {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-24);
}
.nav-pill__links a {
  padding: var(--spacing-12) 0;
  font-size: var(--typo-h3-size);
  font-weight: 700;
  color: var(--text-primary);
  transition: color var(--duration-quick) ease;
}
.nav-pill__links a:hover { color: var(--brand-primary); }
.nav-pill__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
  border-top: 1px solid var(--border-default);
}

/* nyelvváltó — szegmentált pill a menüpanel lábában */
.lang-switch {
  display: inline-flex;
  padding: var(--spacing-2);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-full);
}
.lang-switch__btn {
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-full);
  font-size: var(--typo-small-size);
  font-weight: 700;
  color: var(--text-neutral);
  transition: background-color var(--duration-quick) ease, color var(--duration-quick) ease;
}
.lang-switch__btn:hover { color: var(--text-primary); }
.lang-switch__btn[aria-pressed="true"] {
  background: var(--brand-primary);
  color: var(--color-white);
}

/* logó sor (demo szekció) */
.logo-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  flex-wrap: wrap;
}

/* trust band — full-bleed világosszürke sáv a hero alatt */
/* Bizalmi sor a hero-ban: stacked klublogók + egysoros felirat.
   A korábbi teljes szélességű, szürke hátterű logósáv (.trust-band) helyett — az a
   hero és az első szekció közé ékelődött; így viszont a CTA-val egy blokká olvad. */
/* Bizalmi sor (Figma WEB 2087:2708) — a hero CTA és a stage között.
   Mért arányok a designból (1512px-es frame): a vonal 76px-re van a stage
   tetejétől, a sor függőlegesen középen ül benne (16 fölötte / 20 alatta a
   40px-es korongokkal), a korongok és a felirat közt ~48px. A vonal a stage
   szélességét fogja (--bleed-inset behúzás), nem a szűkebb gridet. */
/* A MAG: csak a sor maga (korongok + felirat). Két helyen fut — a hero videó
   fölött és a demó-szekció szövegoszlopában —, ezért itt nincs semmilyen
   kontextus-függő keretezés vagy térköz. Amit itt átírsz, mindkét helyen látszik. */
.trust-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* keskeny nézetben a felirat a korongok alá kerül */
  gap: var(--spacing-16);
}
/* A hero-változat keretezése: elválasztó vonal + a stage-hez igazított térközök.
   Ezek a HELYHEZ tartoznak, nem a komponenshez. */
.trust-inline--rule {
  --crest-ring: var(--surface-tint);   /* a hero szürke tónusán ül */
  justify-content: center;
  margin: var(--spacing-40) var(--bleed-inset) 0;
  border-top: 1px solid var(--border-default);
  padding: var(--spacing-16) 0 var(--spacing-20);
}
.trust-inline__logos { display: flex; list-style: none; }
/* Egymásra csúsztatás arányból (nem nyers px), hogy a korongméret változásakor
   ne kelljen kézzel követni. 50%: a 24px-es címer fölött marad annyi fehér korong,
   hogy a shape látsszon — a korábbi 67%-nál a címerek egymást takarták. */
.trust-inline__logos li { margin-left: calc(var(--size-40) * -0.5); }
.trust-inline__logos li:first-child { margin-left: 0; }
.trust-inline__logos img {
  display: block;
  width: var(--size-40);
  height: var(--size-40);
  border-radius: var(--radius-full);
  /* fehér külső gyűrű + fehér korong: az átfedésnél ez választja el a címereket
     egymástól. Korábban szürke (--surface-alt) korong volt alattuk, ami a fehér
     lapon árnyéknak látszott — a design szerint nincs árnyék. */
  /* Két gyűrű: belül vékony szürke keret rajzolja körbe a korongot, azon kívül
     2px fehér választja el az alatta lévő címertől. A külső gyűrű `outline`, nem
     box-shadow: nem árnyék, hanem tömör vonal, és nem befolyásolja az elrendezést,
     így az átfedés mértéke a margóból marad számolható. */
  border: 1px solid var(--border-default);
  /* A külső gyűrű a HÁTTÉRBE olvad: alapból fehér, de a szürke tónusú hero-ban
     a tint. Egy változó, két kontextus — nem két külön szabály. */
  outline: 2px solid var(--crest-ring, var(--surface-default));
  background: var(--crest-ring, var(--surface-default));
  box-shadow: none;
  object-fit: contain;
  /* a címer 24px a korongon belül (border-box: 40 − 2×1 keret − 2×7 padding = 24) */
  padding: 7px;
}
.trust-inline__text {
  text-align: center;
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  color: var(--text-neutral);
}
.trust-inline__text strong { color: var(--text-primary); font-weight: 700; }

/* ---------- Általános szekció ---------- */

.section { padding: var(--section-gap) 0; }
/* a sticky fejléc ne takarja a címeket anchor-ugrásnál */
[id] { scroll-margin-top: var(--nav-pill-clearance); }

.section__head { max-width: var(--measure-lg); margin-bottom: var(--spacing-40); }
/* A cím alatti rés az EGYETLEN közös tokenből jön (--section-head-gap), nem
   szekciónként hangolva. A többi konténer ugyanezt a szabályt kapja lentebb. */
.section__head h2 { margin-bottom: var(--section-head-gap); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center .section__lead {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--measure-sm); /* Figma: 503px — két sorra törik */
}
.section__cta { margin-top: var(--spacing-40); }

/* ---------- Pillér-kártyák (Figma WEB 2087:1947) ----------
   Anatómia: a screen FELÜL kilóg a dobozból, alul pedig BELELÓG a szöveg mögé,
   ahol egy maszk elhalványítja. A dobozon belül lila átfedés ül a screen mögött,
   ami LENTRŐL felfelé halványul. A szöveg alul, középre zárva, a screen fölött.
   Sorszám a designon nincs, ezért kikerült. */
/* A pillér-szekció fejléce alatt DUPLA hely: a mért 41 px helyett 81 px a szöveg
   alja és a screen teteje között. Csak itt, mert a `.section__head` 40 px-e a
   többi szekció közös alapja — azt globálisan nem mozgatjuk. A `.pillars`
   padding-top-ját a screen kilógása teljes egészében felemészti, ezért a
   tényleges távolságot a fejléc alsó margója adja. */
#value .section__head { margin-bottom: var(--size-80); }

.pillars {
  --pillar-screen-h: clamp(300px, 32vw, 420px);
  --pillar-overhang: calc(var(--pillar-screen-h) * 0.20);   /* ennyi lóg ki felül */
  --pillar-sink: calc(var(--pillar-screen-h) * 0.34);       /* ennyi lóg be a szöveg mögé */
  /* A hover-emelkedés a NYUGALMI kilógásból származik (0,15×), nem kézzel hangolt
     px: ha a screen lejjebb kerül, a mozgás magától arányosan kisebb lesz. Az
     overhang+sink összege állandó, ezért a kártya magassága nem változik. */
  --pillar-hover-rise: calc(var(--pillar-overhang) * -0.15);
  /* Készülék-keret a screen körül. A screenek 720×1559-esek, ezért a kirajzolt
     szélesség a magasságból számolható — a sarok-rádiusz pedig ennek a rögzített
     aránya (0,107), ez a mobil-mockup arány a kapott mintaképről mérve. Így a
     keret együtt skálázódik a kártyával, nem egy kézzel hangolt px-érték. */
  --pillar-screen-w: calc(var(--pillar-screen-h) * 720 / 1559);
  --pillar-screen-radius: calc(var(--pillar-screen-w) * 0.107);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-24);
  padding-top: var(--pillar-overhang);
}
.pillar {
  position: relative;
  isolation: isolate;          /* a hover-hitbox a kártyán belül maradjon */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-24);
  text-align: center;
  transition: transform var(--duration-slow) var(--ease-smooth-out),
              box-shadow var(--duration-slow) var(--ease-smooth-out);
}
/* lila átfedés a screen MÖGÖTT — lentről felfelé halványul */
.pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-primary-07) 100%);
  pointer-events: none;
}

/* hover-hitbox (D-030): az emelkedő elem ne csússzon ki a mutató alól */
.pillar::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--hover-pad)) calc(-1 * var(--hover-pad))
         calc(var(--hover-lift-card) - var(--hover-pad));
}

.pillar__media {
  position: relative;
  height: var(--pillar-screen-h);
  margin-top: calc(-1 * var(--pillar-overhang));
  /* negatív alsó margó: a screen a szöveg MÖGÉ lóg, ott a maszk elhalványítja */
  margin-bottom: calc(-1 * var(--pillar-sink));
  display: flex;
  justify-content: center;
  /* A screenen NINCS maszk: végig tiszta marad. Az alját a szövegblokk átlátszatlan
     fehér lapja vágja le élesen az elválasztó vonalnál — a halványulás csak a
     HÁTTÉRRE (a lila átfedésre) tartozik, nem a képernyőképre. */
  transition: transform var(--duration-slow) var(--ease-smooth-out);
}
.pillar__media img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: top center;
  /* A keret magán a képen ül: a border-radius a replaced element tartalmát is
     levágja, így nem kell külön burkoló elem hozzá (no spaghetti). Az alsó
     lekerekítés a szövegblokk mögé süllyed — ott úgyis levágja a fehér lap. */
  border: var(--screen-bezel) solid var(--screen-bezel-color);
  border-radius: var(--pillar-screen-radius);
}

/* A szövegblokk saját FEHÉR lap, fölötte elválasztó vonallal — a lila átmenet
   innen indul felfelé. A screen a vonal mögé süllyed, ott a maszk elhalványítja. */
.pillar__body {
  position: relative;
  z-index: 1;
  padding: var(--size-32) var(--spacing-24) var(--spacing-40);
  background: var(--surface-default);
  border-top: 1px solid var(--border-default);
  border-radius: 0 0 var(--radius-24) var(--radius-24);
}
.pillar__body h3 { margin-bottom: var(--spacing-8); color: var(--color-primary-85); }
.pillar__body p {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-neutral-70);
}

/* Hover (D-029): a kártya emelkedik és a KORÁBBI, semleges kemény árnyékot kapja
   vissza (a lila offset az ár-banneré marad). A screen ilyenkor még egy kicsit
   feljebb csúszik a kártyához képest — ettől lesz parallax-érzete a mozgásnak. */
.pillar:hover {
  transform: translateY(var(--hover-lift-card));
  box-shadow: var(--shadow-card);
}
.pillar:hover .pillar__media { transform: translateY(var(--pillar-hover-rise)); }
@media (prefers-reduced-motion: reduce) {
  .pillar:hover { transform: none; }
  .pillar:hover .pillar__media { transform: none; }
}

@media (max-width: 960px) {
  .pillars { grid-template-columns: 1fr; gap: calc(var(--pillar-overhang) + var(--spacing-24)); }
}

/* ---------- Features oldal: benefit-csoportok ---------- */

.benefit-group { margin-bottom: var(--section-gap); }
.benefit-group:last-child { margin-bottom: 0; }
.benefit-group__head { margin-bottom: var(--spacing-40); }
.benefit-group__head h3 {
  font-size: var(--typo-title-size);
  line-height: 1;
  letter-spacing: var(--typo-title-tracking);
  color: var(--color-neutral-87);
  margin-bottom: var(--spacing-12);
}
.benefit-group__head p {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-neutral-70);
}
.benefit-group__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-16);
}
.benefit-group__proof { margin-top: var(--spacing-24); }

/* ---------- Features oldal: ROI-szekció ---------- */
/* A kártya belseje középre zárt, mint a szekciófejlécek — a badge-sor és a CTA
   ugyanabból a komponenskészletből jön, mint a főoldalon. */
.roi { text-align: center; }
.roi .section__head { margin-bottom: var(--spacing-24); }
.roi__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-8);
  list-style: none;
  margin-bottom: var(--spacing-40);
}

/* a bizalmi sor panelen belüli változata (features · social proof) */
.trust-inline--panel {
  padding-bottom: 0;
  margin-top: var(--spacing-40);
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-32);
  padding: var(--spacing-24);
  position: relative;
  transition: transform var(--duration-fast) var(--ease-smooth-out),
              box-shadow var(--duration-fast) var(--ease-smooth-out);
}
.feature-card:hover {
  transform: translateY(var(--hover-lift-card));
  box-shadow: var(--shadow-card);
}
.feature-card h4 {
  font-size: var(--typo-h3-size);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.feature-card p {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-neutral-70);
}

/* info-kártyák (scales / ROI) */
.info-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-16);
}
/* a .pricing-card grid-szabályát felülírjuk (az később van a fájlban) */
.info-cards .info-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  max-width: none;
  margin: 0;
}
.info-cards .pricing-card__badges { justify-content: flex-start; margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: none; }
  .feature-card:hover { transform: none; }
}

/* ---------- Videó ---------- */

.section--video { padding-bottom: 0; }

/* a gradient háttérsáv a videó függőleges felénél indul és lefelé fehérbe fut */
.video-stage { position: relative; }
/* félköríves lecsengés: középen rövidebb lineáris, a széleken mélyre nyúló
   radiális gradiensek — a színhatár felfelé domborodó ívet ad */
.video-stage::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--band-h);
  background:
    radial-gradient(38% 115% at 0% 0%, var(--brand-primary-subtle) 0%, rgba(255, 255, 255, 0) 76%),
    radial-gradient(38% 115% at 100% 0%, var(--brand-primary-subtle) 0%, rgba(255, 255, 255, 0) 76%),
    linear-gradient(180deg, var(--brand-primary-subtle) 0%, rgba(255, 255, 255, 0) 46%);
  z-index: -1;
  pointer-events: none;
}
/* organikus grain a gradient sávon (saját generált tile: tools/generate-grain.py),
   a maszk révén a szemcsézet a gradienttel együtt halványul el */
.video-stage::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--band-h);
  background-image: url('../assets/img/grain.png');
  background-size: 512px;
  opacity: 0.5;
  /* a grain ugyanazt az íves lecsengést követi, mint a színátmenet */
  -webkit-mask-image:
    radial-gradient(38% 115% at 0% 0%, #000 0%, transparent 76%),
    radial-gradient(38% 115% at 100% 0%, #000 0%, transparent 76%),
    linear-gradient(180deg, #000 0%, transparent 46%);
  mask-image:
    radial-gradient(38% 115% at 0% 0%, #000 0%, transparent 76%),
    radial-gradient(38% 115% at 100% 0%, #000 0%, transparent 76%),
    linear-gradient(180deg, #000 0%, transparent 46%);
  z-index: -1;
  pointer-events: none;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-32);
  background: var(--color-primary-80);
  display: grid;
  place-items: center;
  margin-bottom: var(--spacing-40);
  /* tilt-effekt (js/main.js állítja a --tilt-x/--tilt-y értékeket);
     preserve-3d + translateZ a gombon → a play térben a kártya előtt lebeg.
     Emiatt nincs overflow:hidden — a kerekítést a gyerekek öröklik. */
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.35s ease-out;
  will-change: transform;
}
.video-frame__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.video-frame__play { position: relative; z-index: 1; }

/* on-brand play gomb: lila, teljesen kerek, kemény offset árnyékkal;
   a teljes videóblokk hoverjére reagál */
.video-frame { cursor: pointer; }
/* A gomb az alsó harmadba kerül: az előnézeti képen a beszélő arca középen van,
   a középre igazított gomb pont rátakart. Az igazítás a KONTÉNEREN megy, nem a
   gomb transformján — azt a translateZ (3D-tilt) és a hover-scale foglalja. */
/* a felső korlát a méretskáláról (80), nem kézi 88 */
.video-frame { align-items: end; padding-bottom: clamp(var(--spacing-40), 8%, var(--size-80)); }
.video-frame__play {
  width: var(--play-size); height: var(--play-size);
  border-radius: var(--radius-full);
  background: var(--action-primary-surface);
  color: var(--action-primary-content);
  display: grid; place-items: center;
  /* Ugyanaz a rendszer, mint a `.btn`-en: EGY animált szám (--play-lift) adja a
     függőleges elmozdulást ÉS az árnyék offsetjét, tehát a gomb és az árnyéka
     nem tud különválni. A nagyítás ugyanabból a számból arányosodik. */
  --play-lift: 0px;
  --play-lift-hover: var(--hover-lift);
  transform: translateZ(var(--size-48)) translateY(var(--play-lift))
             scale(calc(1 + var(--play-lift) / var(--play-lift-hover) * 0.1));
  box-shadow: 0 calc(-1 * var(--play-lift)) 0 var(--color-primary-70);
  transition: --play-lift var(--duration-slow) var(--ease-smooth-out);
}
.video-frame__play svg { width: var(--icon-2xl); height: var(--icon-2xl); margin-left: 4px; }
.video-frame:hover .video-frame__play,
.hero__stage:hover .video-frame__play { --play-lift: var(--play-lift-hover); }
.video-frame:active .video-frame__play,
.video-frame__play:active { --play-lift: 0px; }
/* caption-sor a videó alatt: bordered kör + lila Material ikon */
.benefit-captions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-40);
  list-style: none;
  padding-bottom: var(--section-gap);
}
.benefit-captions li {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  font-size: var(--typo-body-size);
  font-weight: 500;
  color: var(--text-primary);
}
.benefit-captions__icon {
  width: var(--size-48);
  height: var(--size-48);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-full);
  color: var(--brand-primary);
}
.benefit-captions__icon svg { width: var(--icon-lg); height: var(--icon-lg); }

/* ---------- Testimonials — Figma WEB: statikus 3 kártya gradient sávon ---------- */

/* Figma WEB 2071:2365: világoslila panel grain-textúrával, benne a kártyahármas */
.voices { padding-top: 0; }
/* A panel a Figma WEB 2087:2141 szerint: a lila tónus LEFELÉ mélyül
   (--color-primary-02 → --color-primary-07, a node bekötött változói), és a
   textúra is ALUL a legerősebb, onnan fogy felfelé. Korábban fordítva volt —
   ettől hatott „másik textúrának", mint a videó alatti sáv vagy a footer:
   ugyanaz a grain.png fut mindenhol, csak a maszk iránya tért el. */
.voices__panel {
  position: relative;
  background: linear-gradient(180deg, var(--color-primary-02) 0%, var(--color-primary-07) 100%);
  border-radius: var(--radius-32);
  padding: var(--spacing-40);
  overflow: hidden;
}
.voices__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/grain.png');
  background-size: 512px;
  opacity: 0.5;
  /* alul teli, felfelé kifutó */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
  pointer-events: none;
}

/* csillagsor a cím fölött */
.voices__rating {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-16);
}
.voices__rating img { width: var(--icon-md); height: var(--icon-md); }
/* a tartalom a textúra fölött */
.voices__panel > * { position: relative; }

/* maskot-animáció: jobbra fent, a kártyahármas mögé lógva (Figma 2071:2365) */
/* Figmából mérve (1032px-es panel, 1:1): a figura 300px = a panel 29,1%-a,
   a jobb margója 150px = 14,5%, az alja pedig pontosan a kártyák tetejénél van
   — vagyis a kártyák MÖGÉ lóg be. Az arány a tényleges Lottie-vászoné (343×249),
   nem a fájlnévben szereplő 430 — azzal levegő maradt a doboz alján. */
.voices__mascot {
  position: absolute;
  top: 0;
  /* +80px jobbra a korábbi helyéhez képest (user-finomítás) */
  right: calc(12% - 80px);
  width: 38%;
  aspect-ratio: 343 / 249;
  z-index: 0;
  pointer-events: none;
}
.voices__mascot svg { display: block; width: 100%; height: 100%; }
.voices__grid { position: relative; z-index: 1; }
/* a cím alatti tér ad helyet a maskotnak (Figma: a figura a kártyák mögé lóg) */
.voices__title { margin-bottom: clamp(var(--spacing-40), 9vw, var(--size-120)); color: var(--color-primary-85); }
.voices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface-default);
  border-radius: var(--radius-16);
  overflow: hidden;
  /* finom, puha árnyék a kártyahármason (user kérés) */
  box-shadow: var(--shadow-soft);
}
.voice-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-40);
  min-height: 301px;
  padding: var(--size-32);
}
.voice-card + .voice-card { border-left: 1px solid var(--border-default); }
.voice-card__body { display: flex; flex-direction: column; gap: var(--spacing-24); }
.voice-card__stars { display: flex; gap: var(--spacing-2); }
.voice-card__stars img { width: var(--icon-md); height: var(--icon-md); }
.voice-card__body p {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  font-weight: 500;
  color: var(--color-neutral-70);
}
.voice-card footer {
  color: var(--color-neutral-70);
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
}

/* ---------- Simplicity — Figma WEB: sunken kártya + screenshot ---------- */

/* nagy lekerekített, sunken háttérkártya-szekció (Figma: #f5f5f5 ≈ background-sunken, r40) */
.section-card {
  /* halvány lila alap (user-érték: #F6F3FD = --color-primary-02) — ugyanaz a tónus,
     amiből a testimonial-panel és az ár-banner gradiense is indul */
  background: var(--color-primary-02);
  border-radius: var(--radius-container-lg);
  width: calc(100% - 2 * var(--bleed-inset));
  margin: 0 auto;
  padding: var(--section-gap) 0;
  overflow: hidden;
}

.simplicity {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-fluid-md);
  align-items: stretch; /* a szövegoszlop a teló teljes magasságát követi */
}
/* cím + leírás + pipák felülre zárva, az idézet a teló aljához (margin-top: auto) */
.simplicity__text { display: flex; flex-direction: column; }
.simplicity__text h2 { margin-bottom: var(--section-head-gap); }
.simplicity__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin-top: var(--spacing-24);
  font-weight: 500;
}
.simplicity__quote { margin-top: auto; padding-top: var(--spacing-40); }
.simplicity__quote p { font-weight: 500; color: var(--text-primary); margin-bottom: var(--spacing-12); }
.simplicity__quote footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--text-secondary);
  font-size: var(--typo-small-size);
}
.simplicity__quote-avatar {
  width: var(--icon-md); height: var(--icon-md);
  border-radius: var(--radius-full);
  background: var(--color-neutral-20);
  flex-shrink: 0;
}
/* Valódi app-képernyőkép, UGYANAZZAL a készülék-kerettel, mint a pillér-kártyákon
   és a benefit-tabok látványán. A rádiusz itt is a kirajzolt SZÉLESSÉGBŐL jön
   (0,107-szerese) — a kép szélessége adott, ezért közvetlenül számolható. */
/* ---------- Közös app-képernyő keret ----------
   Egy recept, több fogyasztó: a benefit-tabok látványa és a „No tech skills"
   szekció képe. A doboz rögzített 3:4 arányú helyet tart (a tartalom nem
   méretezi át), a kép függőlegesen kitölti, vízszintesen középre kerül, és a
   doboz PONTOSAN a kép mérete lesz — így a keret a képet fogja körbe, nem egy
   nála nagyobb dobozt.

   A `container-type: size` miatt a képen a `cqh` a doboz magasságára hivatkozik,
   ezért a sarok-rádiusz a kirajzolt szélességből számolható: a screenek
   720×1559-esek, tehát a szélesség a magasság 0,462-szerese, a rádiusz pedig
   ennek 0,107-szerese → 100cqh × 0,0494. */
.screen-frame {
  position: relative;
  container-type: size;
  aspect-ratio: 3 / 4;
}
.screen-frame img {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  width: auto;
  border: var(--screen-bezel) solid var(--screen-bezel-color);
  border-radius: calc(100cqh * 0.0494);
}

/* ---------- Features by benefit — Figma WEB 2024:6132: brand-kártya + accordion ---------- */

/* teli lila (primary) felület: a szekció a márkaszín erős blokkja az oldal közepén */
.section-card--dark { background: var(--background-brand); }

/* Alátűrés: a lenti lap FELCSÚSZIK a fölötte lévő lekerekített alja mögé — a
   két felület „összelóg", és a felső ív teljesen látszik. Két szerep, két
   osztály; korábban ez két konkrét id-hez (#simplicity/#features) volt kötve,
   és a második előforduláskor (features-oldal) újra kellett volna írni. */
.section-card--above-tuck { position: relative; z-index: 2; }
.section-card--tucked {
  margin-top: calc(-1 * var(--radius-container-lg));
  padding-top: calc(var(--section-gap) + var(--radius-container-lg));
  /* felül szögletes: így a lenti felület hézag nélkül tölti ki a fenti
     lekerekítés mögötti sarkokat */
  border-radius: 0 0 var(--radius-container-lg) var(--radius-container-lg);
}

.features-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-fluid-md);
  align-items: start;
}
.features-panel__title {
  color: var(--color-white);
  margin-bottom: var(--section-head-gap);
}
.features-panel__lead {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-white-a80);
  max-width: var(--measure-sm);
}

/* ---------- Harmonika ----------
   Egyszerre egy elem nyitva; a nyitás grid-template-rows átmenettel animált.

   A komponens KÉT felületen él: a főoldal sötét paneljén és a features-oldal
   világos szekciójában. Ezért minden szín egy-egy lokális változóból jön, és a
   `--light` változat CSAK ezeket a változókat írja felül — a szerkezet, az
   eltartások és a mozgás közösek maradnak. (Egy második, lemásolt harmonika
   lett volna a másik út; abból csúszik szét a kettő.) */
.accordion {
  --acc-line: var(--color-white-a20);
  --acc-title: var(--color-neutral-05);
  --acc-title-open: var(--color-white);
  --acc-icon: var(--color-white-a80);
  --acc-icon-open: var(--brand-secondary);
  --acc-body: var(--color-white-a80);
}
.accordion--light {
  --acc-line: var(--border-default);
  --acc-title: var(--text-neutral);
  --acc-title-open: var(--color-neutral-87);
  --acc-icon: var(--text-tertiary);
  --acc-icon-open: var(--brand-primary);
  --acc-body: var(--color-neutral-70);
}
.accordion__item { border-top: 1px solid var(--acc-line); }
.accordion__item:last-child { border-bottom: 1px solid var(--acc-line); }
/* A fejléc RÁCS, nem sor: az ikon és a cím az első sorban ül egymás mellett, a
   felvezető mondat pedig a cím alatt, ugyanabban az oszlopban. A mondat
   SZÁNDÉKOSAN a gombon belül van (span-ként, mert a <button> csak phrasing
   contentet fogad): így csukott állapotban is látszik, mégis a teljes fejléc
   kattintható marad. Ahol nincs lead (főoldal), a rács egysoros. */
.accordion__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--spacing-12);
  row-gap: var(--spacing-4);
  text-align: left;
  padding: var(--spacing-20) 0;
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  font-weight: 500;
  color: var(--acc-title);
  transition: color var(--duration-quick) ease;
}
/* a lead a második sorba, a cím oszlopába */
.accordion__lead {
  grid-column: 2;
  font-weight: 400;
  color: var(--acc-body);
}
.accordion__trigger:hover { color: var(--acc-title-open); }
.accordion__item.is-open .accordion__trigger { color: var(--acc-title-open); }
.accordion__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--acc-icon);
  transition: color var(--duration-quick) ease;
}
.accordion__icon svg { width: var(--icon-md); height: var(--icon-md); }
.accordion__item.is-open .accordion__icon,
.accordion__trigger:hover .accordion__icon { color: var(--acc-icon-open); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-fast) var(--ease-smooth-out);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel-inner {
  overflow: hidden;
  /* a tartalom ott kezdődik, ahol a CÍM: az ikon szélessége + a fejléc
     oszlopköze — egy helyről, ugyanabból a két tokenből, mint a fejléc rácsa */
  padding-left: calc(var(--icon-md) + var(--spacing-12));
}
.accordion__list {
  list-style: none;
  padding-bottom: var(--spacing-20);
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--acc-body);
}
/* A features-oldalon a nyitott panel a csoport funkcióit hozza cím+leírás
   párban, és a csoport bizonyítékát. (A felvezető mondat NEM itt van: az a
   fejlécben ül, csukott állapotban is.) */
.accordion__list--rich {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-8) 0 var(--spacing-16);
}
.accordion__list--rich li { display: flex; flex-direction: column; gap: var(--spacing-4); }
.accordion__list--rich strong {
  font-weight: 700;
  color: var(--acc-title-open);
}
.accordion__proof { padding-bottom: var(--spacing-24); }

/* ---------- „Együtt nő a klubbal" szekció ----------
   Cím → illusztráció → egyetlen bekezdés, mind középre zárva. A szöveg a kép
   ALATT áll, ezért itt nem a szekciófejléc-rés (--section-head-gap) köti a
   kettőt: a cím alatti köz az illusztrációig tart. */
.scales { text-align: center; }
/* Illusztráció → cím → leírás. A cím és a leírás közti köz a SZOKÁSOS
   szekciófejléc-token (--section-head-gap): a fejléc saját alsó margóját
   ezért nullázzuk, hogy ne adódjon hozzá — a rést egyedül a h2 tokene adja,
   ugyanúgy, mint minden más szekcióban. */
.scales .section__head { margin-bottom: 0; }
/* lila felületen a szöveg világos — ugyanaz a párosítás, mint a főoldali
   .features-panel-en (cím fehér, törzs 80%-os fehér) */
.section-card--dark .scales h2 { color: var(--color-white); }
.scales__lead {
  max-width: var(--measure-md);
  margin: 0 auto;
}
.section-card--dark .scales__lead { color: var(--color-white-a80); }

/* ---------- Növekedési görbe ----------
   A vonal a `pathLength="1"` miatt 0…1 egységben rajzolódik, tehát a hossz
   mérése nélkül animálható. A terület, a pontok és a végpont-feliratok
   lépcsőzetesen úsznak be, saját --dot-delay késleltetéssel. */
.growth {
  max-width: clamp(320px, 46vw, 520px);
  margin: 0 auto var(--space-fluid-sm);
  color: var(--brand-secondary);
}
.growth__svg { display: block; width: 100%; height: auto; overflow: visible; }
.growth__base {
  stroke: var(--color-white-a20);
  stroke-width: 2;
  stroke-linecap: round;
}
.growth__line {
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-smooth-out);
}
.growth__area {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-smooth-out) 600ms;
}
.growth__dot {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  scale: 0.4;
  transition: opacity var(--duration-fast) var(--ease-smooth-out) var(--dot-delay, 0ms),
              scale var(--duration-fast) var(--ease-smooth-out) var(--dot-delay, 0ms);
}
.growth__dot--end { stroke: var(--color-white); stroke-width: 4; }
.growth__num {
  fill: var(--color-white-a80);
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-smooth-out) 900ms;
}
.growth__num--start { text-anchor: start; }
.growth__num--end { text-anchor: end; }

.growth.is-visible .growth__line { stroke-dashoffset: 0; }
.growth.is-visible .growth__area,
.growth.is-visible .growth__num { opacity: 1; }
.growth.is-visible .growth__dot { opacity: 1; scale: 1; }

/* Csökkentett mozgásnál a görbe a VÉGÁLLAPOTÁBAN látszik — az információ
   ugyanaz, csak nem rajzolódik. */
@media (prefers-reduced-motion: reduce) {
  .growth__line, .growth__area, .growth__dot, .growth__num { transition: none; }
  .growth__line { stroke-dashoffset: 0; }
  .growth__area, .growth__num { opacity: 1; }
  .growth__dot { opacity: 1; scale: 1; }
}

/* ---------- Benefit-harmonika: látvány + harmonika ----------
   A látványok EGYMÁSRA vannak rakva, és mindig az látszik, amelyik a nyitott
   csoporthoz tartozik. Nem magasság-animáció: a doboz magassága a legmagasabb
   képhez igazodik, csak az átlátszóság vált — így a jobb oldali harmonika nem
   ugrál, amikor a bal oldali kép cserélődik. */
/* Tabos változat: a SZÖVEG a bal szélen, a LÁTVÁNY a jobb szélen. A markupban
   a látvány áll hátul, tehát a rács természetes sorrendje adja az elrendezést —
   nincs `order`, ami a billentyűzet-bejárást a látványtól tenné függővé. */
.benefit-accordion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-fluid-md);
  /* `start`, nem `center`: a jobb oldali harmonika magassága nyitás-csukáskor
     változik, és középre igazítva ettől a BAL oldali kép is föl-le ugrálna.
     Így a látvány a helyén marad, a harmonika alatta nő. */
  align-items: start;
}
/* Nincs háttérpanel: csak a képernyőkép áll itt, ugyanazzal a készülék-kerettel
   és lekerekítéssel, mint a főoldal pillér-kártyáin. A doboz csak a HELYET tartja
   (rögzített 3:4 arány), hogy a harmonika nyitogatása ne méretezze át.
   `container-type: size`: ettől a képen a `cqh` egység a doboz magasságára
   hivatkozik, így a sarok-rádiusz ugyanabból az arányból számolható, mint a
   pilléreknél — nem kézzel hangolt px. */
/* a látvány a közös `.screen-frame` receptet viszi (lásd fentebb) — itt csak a
   képek egymásra rétegzése és az áttűnés a plusz */
.benefit-accordion__visuals { position: relative; }
/* A képek EGYMÁSON állnak, abszolút pozícióban. Miért nem rács-cellában:
   ott a százalékos magasság nem oldódott fel (a cella magassága határozatlan),
   ezért a kép a saját 1559px-es magasságán maradt és 250px-szel kilógott —
   mérve. Abszolút pozícióban a négy inset ADJA a doboz méretét, tehát a
   100%/100% + `contain` biztosan a helyére teszi, vágás és torzítás nélkül. */
/* A képek egymáson állnak, függőlegesen kitöltve, vízszintesen középen
   (`inset: 0` + `margin: auto` + `width: auto`): a doboz így PONTOSAN a
   képernyőkép mérete lesz, tehát a keret és a rádiusz a képet fogja körbe,
   nem egy nála nagyobb dobozt. Ez a különbség bukott meg korábban az
   `object-fit: contain`-nel. */
.benefit-visual {
  /* a méret, a keret és a rádiusz a `.screen-frame img`-ből jön */
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-smooth-out);
}
.benefit-visual.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .benefit-visual { transition: none; }
}
/* ---------- Vízszintes tabok ----------
   UGYANAZ a komponens, mint a harmonika — a viselkedés (egyszerre egy nyitva,
   névre kötött látvány-csere) közös, csak az ELRENDEZÉS más. Ehhez a tételek
   `display: contents`-szel feloldódnak, így a fejlécek és a panelek a KÖZÖS
   rácsba kerülnek: a fejlécek egymás mellé az első sorba, a panelek pedig
   mind ugyanabba a cellába a második sorba.

   Miért egy cellába: így a csukott panelek nulla magasak, a nyitott adja a
   sor magasságát — a szöveg tehát a tabok ALATT jön be, és a nyitás továbbra
   is ugyanazzal a grid-template-rows átmenettel animál. */
/* FLEX + `order`, nem rács: a rácsos változatban a fejlécek egymásra csúsztak,
   mert az `auto-fit` egyetlen oszlopot hozott létre, a panel `1 / -1`-e pedig
   csak az explicit rács végéig ért volna. Flexben az `order` két csoportra
   bontja a feloldott elemeket — előbb MINDEN fejléc (egy sorban), utána MINDEN
   panel (mindegyik teljes szélességű, tehát saját sorba törik). Ez nem függ
   attól, hány tab van. */
.accordion--tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--size-32);
}
.accordion--tabs .accordion__item { display: contents; }
/* a tabon CSAK a cím áll — ikon nélkül a fülsor nyugodtabb, és a nevek
   közvetlenül egymás mellé kerülnek */
.accordion--tabs .accordion__icon { display: none; }
.accordion--tabs .accordion__trigger {
  order: 0;
  width: auto;
  padding: var(--spacing-12) 0;
  /* a fül a szürke alapvonal FÖLÖTT fest: enélkül a két vonal ugyanabban a
     sávban ül, és az aktív 2px-ből csak 1px látszik */
  position: relative;
  z-index: 1;
  /* 2px, hogy a szürke 1px-es alapvonal fölött vastagabbnak lássék — a kettő
     egymáson ül, ezért az aktív jelölés csak akkor olvasható, ha vastagabb */
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.accordion--tabs .accordion__item.is-open .accordion__trigger {
  border-bottom-color: var(--brand-primary);
}

/* VÉGIG futó vonal a fülsor alatt — enélkül nem látszik, hogy a nevek egy
   kattintható sávot alkotnak. A vonal a konténer `::after`-je, ami flex-elemként
   viselkedik: `order: 0` mellett a fülekkel egy csoportba kerül, de a teljes
   szélessége miatt saját sorba törik — épp a fülek ALÁ. Így nem kell a fülsor
   magasságát px-ben kitalálni. */
.accordion--tabs::after {
  content: '';
  order: 0;
  flex: 0 0 100%;
  height: 1px;
  /* a fülek 2px-es alsó kerete ebbe a sávba lóg bele; a fül z-indexe emeli
     fölé, így az aktív jelölés teljes vastagságában látszik */
  margin-top: -2px;
  background: var(--acc-line);
}
/* a panelek a fejlécek UTÁN, mindegyik teljes szélességű — a csukottak nulla
   magasak, tehát csak a nyitott látszik, közvetlenül a tabsor alatt */
.accordion--tabs .accordion__panel {
  order: 1;
  flex: 0 0 100%;
}
.accordion--tabs .accordion__item { border: 0; }
/* A felső köz NEM lehet a panel-inneren: az a `0fr` rácssávban ül, és a saját
   `overflow: hidden` a TARTALMÁT vágja, a PADDINGJÉT nem — így minden csukott
   panel 20px magas maradt. Mérve: a fülsor és a szöveg közti rés tabonként
   20 / 40 / 60px volt, mert annyi csukott panel állt fölötte.
   A köz ezért a panel ELSŐ GYEREKÉNEK margója, ami már a vágott területen belül van. */
.accordion--tabs .accordion__panel-inner { padding-left: 0; padding-top: 0; }
/* a fülek alatt már nincs felvezető mondat — a köz a lista első dobozáé */
.accordion--tabs .accordion__list--rich { margin-top: var(--spacing-20); }

/* Funkciónként EGY-EGY lekerekített felület, egymás alatt — keret nélkül. Egy
   közös dobozban a három funkció egyetlen szövegtömbnek olvasódott; külön
   felületeken viszont látszik, hogy három önálló állításról van szó. */
.accordion--tabs .accordion__list--rich {
  gap: var(--spacing-12);
  padding: 0;
}
.accordion--tabs .accordion__list--rich li {
  padding: var(--spacing-20);
  background: var(--surface-tint);
  border-radius: var(--radius-16);
}
/* A bizonyíték-sor kiemelt blokként áll a funkciók alatt: UGYANAZ a lekerekítés,
   mint a fölötte lévő szürke dobozoké — a pirula-forma önálló jelvénynek
   olvasódott, nem a szekció zárásának. Az ikon a trófea-animáció, fehér
   háttér nélkül, ikonméretben. */
.accordion--tabs .accordion__proof {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-top: var(--spacing-12);
  padding: var(--spacing-16) var(--spacing-20);
  /* ZÖLD felület a lila helyett: a lila a lap fő márkaszíne, ezért a kiemelés
     nem vált ki belőle. A másodlagos (lime) rámpa halvány fokozata elüt, és a
     trófea sárga-arany ikonja ezen látszik is — lilán beleolvadt. */
  background: var(--color-secondary-10, var(--brand-secondary));
  border-radius: var(--radius-16);
  color: var(--color-secondary-90);
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
}
.accordion__proof-icon {
  flex-shrink: 0;
  /* nagyobb, mint a 32px-es ikonméret: a trófea így valódi illusztrációként
     olvasódik, nem listajelként */
  width: var(--size-56);
  height: var(--size-56);
  display: block;
}
.accordion__proof-icon svg { display: block; width: 100%; height: 100%; }

/* Szűk nézetben a fülek NEM törhetnek sorba — a sortörés kettészakítja a
   fülsort, és a vonal alá csúszott fül nem látszik kattinthatónak. 375px-en a
   három cím 16px-es szedéssel 324px, a hely 343px: 9px köz maradna. Kisebb
   szedéssel a három cím ~283px, tehát marad elég köz. A `white-space: nowrap`
   már megvan; itt a MÉRET adja a férőhelyet. */
@media (max-width: 560px) {
  .accordion--tabs {
    column-gap: var(--spacing-16);
  }
  .accordion--tabs .accordion__trigger {
    font-size: var(--typo-small-size);
    line-height: var(--typo-small-line);
  }
}

@media (max-width: 960px) {
  .benefit-accordion { grid-template-columns: 1fr; }
  /* szűk nézetben elöl a tartalom, a látvány alá — a markup-sorrend már ilyen,
     tehát nincs teendő. A tabok sortörhetnek. */
  .accordion--tabs { grid-template-columns: repeat(auto-fit, minmax(0, max-content)); }
}

/* ---------- Comparison + pricing ---------- */

/* Figma WEB: lila Medalyst-oszlop, szürke fejléc-sáv, fehér sorok */
/* 8 grid-oszlop széles (8×64 + 7×24 = 680px), középre zárva */
.compare-wrap {
  overflow-x: auto;
  /* ugyanolyan széles, mint az alatta lévő ár-banner (a teljes grid) */
  max-width: none;
  margin: 0 auto var(--spacing-24);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-24);
}
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 560px;
  /* Fix elrendezés: az első („Feature") oszlop szélessége meg van adva, a többi
     — akárhány szolgáltató van — MAGÁTÓL egyenlően osztozik a maradékon.
     Auto-elrendezésnél a tartalom hossza döntött, ezért a „Heja" oszlop mérve
     170,8 px lett a másik kettő 190 px-e mellett. */
  table-layout: fixed;
}
.compare th, .compare td {
  padding: var(--spacing-16) var(--spacing-24);
  text-align: left;
  background: var(--surface-default);
}
.compare thead th {
  font-size: var(--typo-small-size);
  font-weight: 500;
  color: var(--text-neutral);
  background: var(--surface-alt);
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}
/* Minden SZOLGÁLTATÓ-oszlop középre zárt — a szabály a szerepre szól („ami nem
   az első, funkciónév-oszlop"), nem a pozícióra. Korábban `:last-child`-ra volt
   kötve: két szolgáltatónál még stimmelt, háromnál viszont a középső (Heja)
   kimaradt, és balra zárva, eltérő szélességgel állt. */
.compare th:not(:first-child),
.compare td:not(:first-child) { text-align: center; }
.compare tbody td { border-bottom: 1px solid var(--border-default); font-size: var(--typo-small-size); }
.compare tbody tr:last-child td { border-bottom: none; }

.compare .compare__medalyst {
  background: var(--brand-primary);
  text-align: center;
}
.compare tbody .compare__medalyst { border-bottom-color: var(--color-white-a20); }
/* a fejléc (logó) alatt, az első pipa felett is legyen elválasztó a lila sávban */
.compare thead .compare__medalyst { border-bottom: 1px solid var(--color-white-a20); }
.compare tbody tr:last-child .compare__medalyst { border-bottom: none; }
/* A logó a saját arányán marad: `max-width: none` kell, mert a globális
   `img { max-width: 100% }` szűk hasábban összenyomná — a magasság kötött, tehát
   a torzulás néma lenne. */
.compare__logo {
  height: var(--icon-lg);
  width: auto;
  max-width: none;
  margin: 0 auto;
}
/* Material rounded pipa/X ikonok */

/* ---------- Ár-banner ----------
   A háttér UGYANAZ, mint a testimonial-panelé: lefelé mélyülő lila tónus
   (--color-primary-02 → --color-primary-07) + a saját grain textúra, ami ALUL a
   legerősebb és felfelé fogy. Egy nyelv a két nagy panelen.
   A szövegezés a CTA-blokk mintáját követi: mondatkezdő nagybetű, GT Bold,
   sötét szín — a korábbi csupa nagybetűs, szélesített vágat lekerült. */
.pricing-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-primary-02) 0%, var(--color-primary-07) 100%);
  border-radius: var(--radius-container-lg);
  /* a bannernek NINCS textúrája (a testimonial-panelnek van) — itt elég a szín;
     cserébe alapból árnyék emeli el a laptól. Lila tónusú felület alá LILA árnyék
     való: a semleges szürke piszkosnak hat rajta. */
  box-shadow: var(--shadow-brand);
  width: 100%;
  margin: 0 auto;
  /* A felső korlátok a méretskála rangjai (80 / 64), nem kézi 88 / 68. A fluid
     rész változatlan: szűk nézetben továbbra is a vw-tag, majd a spacing-alsókorlát
     vezet — csak a nagy nézetek plafonja került rácsra. */
  padding: clamp(var(--spacing-40), 8vw, var(--size-80)) clamp(var(--spacing-24), 6vw, var(--size-64));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-40);
  align-items: center;
}
.pricing-card__main { position: relative; z-index: 1; max-width: 62ch; }
.pricing-card h3 {
  max-width: 16em;
  margin-bottom: var(--spacing-16);
  font-size: var(--typo-title-size);
  line-height: 1.1;
  letter-spacing: var(--typo-title-tracking);
  color: var(--color-primary-85);
}
.pricing-card p {
  max-width: 52ch;
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-neutral-70);
}
.pricing-card__mascot {
  position: relative;
  z-index: 1;
  width: clamp(120px, 16vw, 184px);
  aspect-ratio: 1;
  justify-self: end;
}
.pricing-card__mascot svg { display: block; width: 100%; height: 100%; }

@media (max-width: 720px) {
  .pricing-card { grid-template-columns: 1fr; }
  .pricing-card__mascot { justify-self: center; }
}

/* ---------- CTA block — Portrait-féle scroll-nyitású kártyalegyező ---------- */

.cta-block {
  padding: var(--section-gap) 0;
  text-align: center;
  overflow-x: clip; /* a szétnyíló kártyák ne okozzanak vízszintes scrollt */
}

/* a legyező: 7 kártya, középre stackelve; a --fan (0..1) scroll-progressz nyitja szét.
   A JS (js/main.js) írja a --fan értékét; reduced motion esetén fixen nyitva. */
.cta-fan {
  --fan: 0;
  position: relative;
  height: 300px;
  margin-bottom: var(--spacing-40);
}
.cta-fan img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 230px;
  object-fit: cover;
  border-radius: var(--radius-24);
  transform:
    translate(calc(-50% + var(--fan) * var(--fan-tx)), calc(-50% + var(--fan) * var(--fan-ty)))
    rotate(calc(var(--fan) * var(--fan-rot)));
  transition: transform 0.15s ease-out;
  will-change: transform;
}
/* ívelt szétnyílás: vízszintes eltolás + kifelé dőlés + a szélek lejjebb (boltív) */
.cta-fan img:nth-child(1) { --fan-tx: -450px; --fan-ty: 76px; --fan-rot: -21deg; z-index: 1; }
.cta-fan img:nth-child(2) { --fan-tx: -300px; --fan-ty: 34px; --fan-rot: -14deg; z-index: 2; }
.cta-fan img:nth-child(3) { --fan-tx: -150px; --fan-ty: 9px;  --fan-rot: -7deg;  z-index: 3; }
.cta-fan img:nth-child(4) { --fan-tx: 0px;    --fan-ty: 0px;  --fan-rot: 0deg;   z-index: 4; }
.cta-fan img:nth-child(5) { --fan-tx: 150px;  --fan-ty: 9px;  --fan-rot: 7deg;   z-index: 5; }
.cta-fan img:nth-child(6) { --fan-tx: 300px;  --fan-ty: 34px; --fan-rot: 14deg;  z-index: 6; }
.cta-fan img:nth-child(7) { --fan-tx: 450px;  --fan-ty: 76px; --fan-rot: 21deg;  z-index: 7; }

.cta-block__content h2 { margin-bottom: var(--section-head-gap); }
.cta-block__content p {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-neutral-70);
  margin-bottom: var(--spacing-40);
}

@media (prefers-reduced-motion: reduce) {
  .cta-fan { --fan: 1 !important; }
  .cta-fan img { transition: none; }
}

@media (max-width: 960px) {
  .cta-fan { height: 220px; }
  .cta-fan img { width: 130px; height: 150px; border-radius: var(--radius-16); }
  .cta-fan img:nth-child(1) { --fan-tx: -270px; --fan-ty: 50px; }
  .cta-fan img:nth-child(2) { --fan-tx: -180px; --fan-ty: 22px; }
  .cta-fan img:nth-child(3) { --fan-tx: -90px;  --fan-ty: 6px; }
  .cta-fan img:nth-child(5) { --fan-tx: 90px;   --fan-ty: 6px; }
  .cta-fan img:nth-child(6) { --fan-tx: 180px;  --fan-ty: 22px; }
  .cta-fan img:nth-child(7) { --fan-tx: 270px;  --fan-ty: 50px; }
}

/* ---------- Demo form ---------- */

/* fehér kártya-változat: a tükrözött gradient sávon ül */
.section-card--white {
  background: var(--background-default);
  overflow: visible; /* a ::before/::after sáv kilóghasson */
}

/* tükrözött gradient + grain a CTA és a demo blokk között — a videó sávjának
   vertikális tükörképe: alulról (a fehér kártya felső élétől) felfelé halványul */
/* a felső 920px a beúszó (tükrözött íves) átmenet, alatta a minta teljes
   intenzitással folytatódik az oldal aljáig (a footer sarkainál is kilátszik) */
.demo-stage { position: relative; }
.demo-stage::before,
.demo-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* a fade-zóna kezdete: a sáv magassága mínusz az átfedés, tokenből számolva */
  top: calc(-1 * (var(--band-h) - 140px));
  bottom: 0;   /* innen lefelé a footer::before/::after viszi tovább a mintát */
  z-index: -1;
  pointer-events: none;
}
/* A negyedik réteg a sáv ALATT folytatja a felületet. Az 1px-es ÁTFEDÉS
   szándékos: enélkül a törtpixeles kirajzolásnál hajszálvékony világos vonal
   jelenne meg a sáv alján. A méret a --band-h tokenből jön, az átfedés pedig
   kimondva 1px — korábban 919/920 néven két kézi szám állt itt. */
.demo-stage::before {
  background-image:
    radial-gradient(38% 115% at 0% 100%, var(--brand-primary-subtle) 0%, rgba(255, 255, 255, 0) 76%),
    radial-gradient(38% 115% at 100% 100%, var(--brand-primary-subtle) 0%, rgba(255, 255, 255, 0) 76%),
    linear-gradient(0deg, var(--brand-primary-subtle) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(var(--brand-primary-subtle), var(--brand-primary-subtle));
  background-repeat: no-repeat;
  background-size: 100% var(--band-h), 100% var(--band-h), 100% var(--band-h), 100% calc(100% - var(--band-h) + 1px);
  background-position: top, top, top, 0 calc(var(--band-h) - 1px);
}
.demo-stage::after {
  background-image: url('../assets/img/grain.png');
  background-size: 512px;
  opacity: 0.5;
  -webkit-mask-image:
    radial-gradient(38% 115% at 0% 100%, #000 0%, transparent 76%),
    radial-gradient(38% 115% at 100% 100%, #000 0%, transparent 76%),
    linear-gradient(0deg, #000 0%, transparent 46%),
    linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% var(--band-h), 100% var(--band-h), 100% var(--band-h), 100% calc(100% - var(--band-h) + 1px);
  -webkit-mask-position: top, top, top, 0 calc(var(--band-h) - 1px);
  mask-image:
    radial-gradient(38% 115% at 0% 100%, #000 0%, transparent 76%),
    radial-gradient(38% 115% at 100% 100%, #000 0%, transparent 76%),
    linear-gradient(0deg, #000 0%, transparent 46%),
    linear-gradient(#000, #000);
  mask-repeat: no-repeat;
  mask-size: 100% var(--band-h), 100% var(--band-h), 100% var(--band-h), 100% calc(100% - var(--band-h) + 1px);
  mask-position: top, top, top, 0 calc(var(--band-h) - 1px);
}

/* A bal oszlop a KÁRTYA magasságát kapja (stretch), hogy a bizalmi sort alulra
   lehessen zárni — pont oda, ahol az input-blokk véget ér. */
.demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-fluid-md);
  align-items: stretch;
}
.demo__text { display: flex; flex-direction: column; }
/* Eddig itt nem volt szabály, ezért a cím a globális resetről 0 px-t kapott —
   ez volt az egyetlen hely, ahol a leírás a címhez tapadt. */
.demo__text h2 { margin-bottom: var(--section-head-gap); }
.demo__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-40);
}
.demo__submit { margin-top: var(--spacing-8); }
.demo__success { color: var(--text-success); font-weight: 500; text-align: center; }
.demo__error { color: var(--text-danger); font-weight: 500; text-align: center; }

/* ---------- Footer ---------- */

/* A footer a demó (contact) kártya ALÁ tűrve csúszik — ugyanaz a megoldás, mint a
   simplicity → features kapcsolatnál (D-020/d): a felső sarkok szögletesek, így a
   sötét felület hézag nélkül tölti ki a fehér kártya lekerekítése mögötti sarkokat,
   és a fehér ív teljesen látszik. A felhúzás mértéke = a fehér kártya radiusa,
   a felső paddingban kompenzálva, hogy a tartalom ne csússzon feljebb. */
/* A fehér kártya a footer FÖLÉ kerül (alátűrés), a pattern viszont a szekción
   ül, tehát kívül esik ezen a stacking contexten — így a kártya mögött marad. */
.demo-card { position: relative; z-index: 2; }

/* Demo ALOLDAL: ugyanaz a komponens, de a blokk saját fejléce kimarad — az oldal
   nagy címe már elmondta ugyanazt, kétszer felesleges. A bizalmi sor és az űrlap
   változatlanul a főoldali markupból jön. */
.demo-stage--page .demo__text .eyebrow,
.demo-stage--page .demo__text h2,
.demo-stage--page .demo__text .section__lead { display: none; }
/* Egyoszlopos, középre zárt elrendezés: az aloldalnak egyetlen dolga van, az űrlap.
   A bizalmi sor az űrlap alá kerül (order), nem mellé egy üres hasábba. */
.demo-stage--page .demo {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
  gap: var(--spacing-40);
}
.demo-stage--page .demo__text { order: 2; }
.demo-stage--page .demo__text .trust-inline { padding: 0; justify-content: center; }
.site-footer {
  position: relative;
  background: var(--surface-dark);
  color: var(--color-white-a80);
  width: calc(100% - 2 * var(--bleed-inset));
  margin: calc(-1 * var(--radius-container-lg)) auto var(--bleed-inset);
  padding: calc(var(--space-fluid-lg) + var(--radius-container-lg)) 0 var(--spacing-40);
  border-radius: 0 0 var(--radius-32) var(--radius-32);
}
/* Ahol NINCS contact-szekció (404, ÁSZF, adatkezelési), ott a footer önmagában áll:
   nincs mibe alátűrni, és a lila pattern sem indokolt — az a demó-szekció
   háttérsávjának a folytatása. Ilyenkor a footer MINDEN sarkán lekerekített,
   és fehér lapon ül. A feltétel a `.demo-stage` meglétére néz, így új oldal
   hozzáadásakor magától a helyes ágra esik — nincs oldalanként kézzel állítgatás. */
body:not(:has(.demo-stage)) .site-footer {
  margin-top: var(--bleed-inset);
  padding-top: var(--space-fluid-lg);
  border-radius: var(--radius-32);
}
body:not(:has(.demo-stage)) .site-footer::before,
body:not(:has(.demo-stage)) .site-footer::after { content: none; }

/* a lila pattern a footer mögött és alatt is folytatódik az oldal legaljáig */
.site-footer::before,
.site-footer::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: calc(-1 * var(--bleed-inset));
  bottom: calc(-1 * var(--bleed-inset));
  z-index: -1;
  pointer-events: none;
}
.site-footer::before { background: var(--brand-primary-subtle); }
.site-footer::after {
  background-image: url('../assets/img/grain.png');
  background-size: 512px;
  opacity: 0.5;
}
/* A lábléc a LAP RÁCSÁN ül, nem saját arányokon: 12 oszlop, a hasábok 4-2-2-2-2
   felosztásban. Az oszlopszámot a --grid-columns token adja, ezért a felosztás
   töréspontonként MAGÁTÓL igazodik: tableten 8, mobilon 4 oszlop — így a márka
   (span 4) mobilon pontosan a teljes szélességet tölti, a négy hasáb pedig
   2-2-ben sorakozik. Nem kell hozzá külön media query. */
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--spacing-40);
  padding-bottom: clamp(80px, 10vw, 160px);
}
.site-footer__brand { grid-column: span 4; }
.site-footer__col { grid-column: span 2; }

.site-footer__brand p { margin-top: var(--spacing-8); color: var(--color-white-a50); }
.site-footer__col { display: flex; flex-direction: column; gap: var(--spacing-8); }
.site-footer__col h4 {
  font-size: var(--typo-caption-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white-a50);
  margin-bottom: var(--spacing-8);
}
.site-footer__col a { font-size: var(--typo-small-size); transition: color var(--duration-quick) ease; }
.site-footer__col a:hover { color: var(--brand-secondary); }
.site-footer__bottom {
  padding-top: var(--spacing-24);
  font-size: var(--typo-caption-size);
  color: var(--color-white-a50);
  text-align: center;
}

/* ---------- Áruház-badge-ek (App Store / Google Play) ----------
   A két kép a platformok KÖTELEZŐ, változtathatatlan artworkja. Ezért itt nincs
   se szín-, se forma-, se tipográfiai szabály: a CSS egyetlen dolga a MÉRETEZÉS
   és az igazítás.

   A méretezés csapdája: a két fájl nem ugyanúgy van vágva.
   • Az Apple SVG (119,66 × 40) pontosan a badge — nincs benne üres keret.
   • A Google PNG (646 × 250) viszont MAGÁBAN HORDOZZA a Google által előírt
     védőzónát: mérve 41 px átlátszó perem mind a négy oldalon, a tényleges
     badge 564 × 168. A fájl és a tinta magasságának aránya 250/168 = 1,4881.
   Ha mindkettőre ugyanazt a `height`-et adnánk, a Google-badge optikailag
   ~33%-kal kisebb lenne. Ezért a Google képre a magasságot ezzel az aránnyal
   felszorozzuk — így a KÉT LÁTHATÓ BADGE lesz egyforma magas, ahogy mindkét
   irányelv előírja, a védőzóna pedig megmarad (nem vágjuk le). */
/* A méret a BADGE-en él, nem a befoglalón: így a komponens bárhol használható
   (lábléc-oszlop, ár-kártya alatti sor), és nem kell minden új helyen újra
   megadni. A `.store-badges` csak az elrendezés — sor vagy oszlop. */
.store-badge { --store-badge-h: 40px; display: block; line-height: 0; }
.store-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}
.store-badges--column { flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }
.store-badge img {
  display: block;
  width: auto;
  /* A globális `img { max-width: 100% }` ITT KÁROS. A badge-oszlop szélessége
     `auto`, tehát a tartalomtól függ; a Google-képre tett negatív vízszintes
     margó viszont épp csökkenti a tartalom-szélességet — mire a max-width
     visszahatna a képre, az már keskenyebb dobozba lenne szorítva, és mivel a
     magasság kötött, a badge ÖSSZENYOMÓDNA. Márpedig a torzítást mindkét
     irányelv tiltja. A kép ezért nem enged magának korlátot: a mérete a
     magasságból és a saját arányából jön. */
  max-width: none;
}
.store-badge--ios img { height: var(--store-badge-h); }
.store-badge--android img {
  height: calc(var(--store-badge-h) * 1.4881);
  /* A Google-perem VÍZSZINTES részét kioltjuk, hogy a két badge bal éle — és az
     oszlopcím bal éle — egy tengelyen álljon. A FÜGGŐLEGES perem marad: az a
     Google által előírt védőzóna a badge fölött és alatt, azt nem szabad
     elvenni. (Perem = a badge-doboz magasságának 41/250 = 0,164-e.) */
  margin-inline: calc(var(--store-badge-h) * -0.244);
}
/* A badge nem gomb: nem emelkedik, nem kap árnyékot — az artwork nem módosítható.
   Az egyetlen visszajelzés a finom áttetszőség. */
.store-badge { transition: opacity var(--duration-quick) ease; }
.store-badge:hover { opacity: 0.8; }

/* ---------- Grid overlay (dev eszköz, Figma layout guide mása) ---------- */

/* absolute (nem fixed): a body koordináta-rendszerében él, így pontosan arra a
   tengelyre központoz, amire a tartalom — fixed esetén a scrollbar szélessége
   eltolná a viewport-központhoz képest */
.grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;
}
body.show-grid .grid-overlay { display: block; }
.grid-overlay__cols {
  height: 100%;
  margin: 0 auto;
  max-width: var(--grid-width);
  width: calc(100% - 2 * var(--container-pad));
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}
.grid-overlay__cols span { background: rgba(255, 0, 0, 0.04); }

.grid-toggle {
  position: fixed;
  bottom: var(--spacing-16);
  right: var(--spacing-16);
  z-index: 10000;
  min-height: var(--component-height-xs);
  padding: 0 var(--spacing-16);
  border-radius: var(--radius-full);
  background: var(--action-contrast-surface);
  color: var(--action-contrast-content);
  font-size: var(--typo-caption-size);
  font-weight: 700;
  opacity: 0.55;
  transition: opacity var(--duration-quick) ease;
}
.grid-toggle:hover { opacity: 1; }
body.show-grid .grid-toggle {
  opacity: 1;
  background: var(--brand-primary);
}
/* DS link a grid-toggle mellett */
.ds-link { right: calc(var(--spacing-16) + 64px); display: inline-grid; place-items: center; }

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

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-very-slow) var(--ease-in-out), transform var(--duration-very-slow) var(--ease-in-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Reszponzív ---------- */

@media (max-width: 960px) {
  :root { --section-gap: 72px; }
  /* az overlay 12 sávot renderel — a rácson kívüliek kikerülnek */
  .grid-overlay__cols span:nth-child(n+9) { display: none; }

  .pillars, .benefit-captions, .voices__grid { grid-template-columns: 1fr; }
  .features-panel { grid-template-columns: 1fr; }
  .benefit-group__grid, .info-cards { grid-template-columns: 1fr; }
  .simplicity, .demo, .pricing-card { grid-template-columns: 1fr; }

  /* A demó-szekció szövegoszlopa egy hasábban középre zárt: az űrlap fölött
     álló cím, felvezető és bizalmi sor így egy tengelyen áll az űrlappal. */
  .demo__text { text-align: center; }
  .demo__text .trust-inline { justify-content: center; }

  /* Egy hasábban a képernyőkép a lista UTÁN, az idézet pedig a kép ALATT álljon
     — az idézet a bizonyíték, annak a bemutatott dolog után van a helye.
     A szövegoszlop `display: contents`-szel feloldódik, így a gyerekei
     közvetlenül a rács elemei lesznek és sorrendezhetők. */
  .simplicity__text { display: contents; }
  .simplicity__visual { order: 2; }
  .simplicity__quote { order: 3; margin-top: var(--spacing-40); padding-top: 0; }
  .pricing-card__badges { justify-content: flex-start; }
  .voice-card { min-height: 0; gap: var(--spacing-24); }
  .voices__mascot { display: none; } /* mobilon nincs rá hely */
  .voice-card + .voice-card { border-left: none; border-top: 1px solid var(--border-default); }
  .voices__panel { padding: var(--spacing-24); }

  /* A lábléc felosztását a --grid-columns adja (4-2-2-2-2), ezért itt nincs
     külön szabály: tableten 8, mobilon 4 oszlopra vált magától. */
}

@media (max-width: 720px) {
  .grid-overlay__cols span:nth-child(n+5) { display: none; }

  .nav-pill { width: min(320px, calc(100vw - 2 * var(--spacing-16))); }
  .nav-pill.is-open { width: calc(100vw - 2 * var(--spacing-16)); }
  .hero__stage { aspect-ratio: 4 / 3; }

  /* A szekciókártyák és a footer ITT IS lekerekítettek maradnak, 16px behúzással —
     korábban mobilon 0-ra estek, amitől a lila és a szürke blokk máshogy épült fel,
     mint desktopon. A radius egy fokkal kisebb, hogy a keskenyebb lapon arányos legyen. */
  .section-card { border-radius: var(--radius-32); }

  /* a hero címben a „More" + a cserélődő szó saját sorba kerül: így a rotátor
     nem tördel a szó közepén, és a sormagasság sem ugrál gépelés közben */
  .hero__title-a,
  .hero__title-b { display: block; }

  /* a kézi sortörés desktop-arányokra készült — szűk nézetben a balance jobb sorokat ad */
  h2 br { display: none; }

  /* Mobil felülírások TOKENSZINTEN: a komponensek maguk nem tudják, hogy szűk
     nézetben vannak — csak az értéket kapják máshonnan. */
  :root {
    --play-size: var(--size-56);   /* a kisebb videókockához arányos play gomb */
    --band-h: 420px;               /* rövidebb lila ív: ne érjen a testimonial blokkra */
  }
  .video-frame__play svg { width: var(--icon-xl); height: var(--icon-xl); }

  /* a videó alatti ikon+szöveg sorok egy oszlopban állnak: 40px köztük túl sok */
  .benefit-captions { gap: var(--spacing-16); }

  /* A tábla INKÁBB GÖRGESSEN, mint hogy összenyomódjon. Korábban `min-width: 0`
     állt itt, hogy kiférjen — de a fix elrendezés miatt ez a hasábokat préselte
     össze, és a Medalyst-logó torzult. Márpedig a logó torzítása nem opció.
     Marad a min-width (a `.compare-wrap` `overflow-x: auto`-ja görget), a
     szedés viszont kisebb, hogy minél több látszódjon egyszerre. */
  .compare th,
  .compare td {
    padding: var(--spacing-12) var(--spacing-8);
    font-size: var(--typo-small-size);
    line-height: var(--typo-small-line);
  }

  /* az űrlapkártya belső margója desktop-méretű volt: keskeny lapon elveszi a helyet */
  .demo__form { padding: var(--spacing-24); }
}

/* ---------- Jogi oldalak (ÁSZF, adatkezelési tájékoztató) ----------
   Egy dokumentum = egy HTML, benne a magyar és az angol változat is.
   A láthatóságot a <html lang> dönti el, amit az i18n motor amúgy is állít —
   így a meglévő nyelvváltó vezérli, plusz JS nélkül (vö. D-026: nincs külön
   HU-oldal, ugyanaz a HTML fordul). */
.legal { padding: calc(var(--nav-pill-clearance) + var(--spacing-40)) 0 var(--section-gap); }
.legal__lang { display: none; }
html[lang="hu"] .legal__lang[data-lang="hu"],
html[lang="en"] .legal__lang[data-lang="en"] { display: block; }
/* ha a lang valamiért ismeretlen, a magyar változat legyen a tartalék */
/* Minden EGYÉB nyelv az ANGOL dokumentumot kapja — korábban a magyart. A német
   nyelvi mód bekapcsolásakor ez azonnal láthatóvá vált: német felületen magyar
   ÁSZF jelent volna meg. A jogi szövegeknek nincs német fordítása (magyar jog
   szerinti dokumentumok, magyar hatóságokra hivatkozva) — a nemzetközi változat
   az angol, tehát az a helyes visszaesés. */
html:not([lang="hu"]) .legal__lang[data-lang="en"] { display: block; }
html:not([lang="hu"]):not([lang="en"]) .legal__lang[data-lang="hu"] { display: none; }

.legal__title { margin: 0 0 var(--spacing-8); max-width: var(--legal-measure); }
.legal__meta {
  max-width: var(--legal-measure);
  margin: 0 0 var(--spacing-40);
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  color: var(--text-neutral);
}
/* A próza olvasható sorhosszra fogva, DE elemenként — így az adatkezelési
   táblázat a teljes konténer-szélességet megkaphatja, és nem kell benne
   vízszintesen görgetni egy 5 oszlopos táblát. */
.legal__body > * { max-width: var(--legal-measure); }
.legal__body > .legal__table-wrap { max-width: none; }
.legal__body h2 {
  font-size: var(--typo-h3-size);
  line-height: 1.3;
  letter-spacing: normal;
  margin: var(--spacing-40) 0 var(--spacing-12);
  color: var(--text-primary);
}
.legal__body h3 {
  font-size: var(--typo-body-size);
  margin: var(--spacing-24) 0 var(--spacing-8);
  color: var(--text-primary);
}
.legal__body p,
.legal__body li {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-neutral-70);
}
.legal__body p { margin: 0 0 var(--spacing-12); }
.legal__body ul,
.legal__body ol { margin: 0 0 var(--spacing-12); padding-left: var(--spacing-24); }
.legal__body li { margin-bottom: var(--spacing-4); }
.legal__body a { color: var(--brand-primary); }
.legal__body dl { margin: 0 0 var(--spacing-12); }
.legal__body dt { font-weight: 700; color: var(--text-primary); font-size: var(--typo-small-size); }
.legal__body dd {
  margin: 0 0 var(--spacing-8);
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--color-neutral-70);
}

/* adatkezelési táblázat */
.legal__table { width: 100%; border-collapse: collapse; margin: 0 0 var(--spacing-24); }
.legal__table th,
.legal__table td {
  border: 1px solid var(--border-default);
  padding: var(--spacing-12);
  text-align: left;
  vertical-align: top;
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  color: var(--color-neutral-70);
}
.legal__table th { background: var(--background-sunken); color: var(--text-primary); font-weight: 700; }
.legal__table-wrap { overflow-x: auto; }

/* Kitöltendő helyőrző — szándékosan feltűnő, hogy éles indulás előtt
   ne lehessen véletlenül bent felejteni. */
.legal-todo {
  background: var(--color-warning-10);
  color: var(--color-neutral-90);
  border-bottom: 1px solid var(--color-warning-30);
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-4);
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Menü-panel: linkek + keretes idézet (Figma WEB 2089:2746) ---------- */
.nav-pill__cols {
  display: grid;
  /* a design szerint az idézet valamivel szélesebb, mint a linkoszlop */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: var(--spacing-16);
  align-items: start;
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-16);
}
/* a behúzást a rács adja, a link-lista maga már nem padolja magát */
.nav-pill__cols .nav-pill__links { padding: 0; }

/* Keretes idézet-változat: NEM új komponens — ugyanaz a .voice-card, csak keretben.
   A szekcióbeli hármas egybeépített (elválasztó vonalakkal, közös kerettel), itt
   viszont önállóan áll, ezért kap saját keretet és radiust. */
.voice-card--boxed {
  min-height: 0;
  gap: var(--spacing-24);
  padding: var(--spacing-24);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-16);
}

/* Szűk nézetben a pill alig szélesebb a képernyőnél: két oszlop ott olvashatatlan
   lenne, és a menü aránytalanul magas. Az idézet kimarad — a főoldalon amúgy is
   ott a teljes testimonial szekció. */
@media (max-width: 560px) {
  .nav-pill__cols { grid-template-columns: 1fr; }
  .nav-pill__cols .voice-card--boxed { display: none; }
}

/* ---------- Videó-beágyazás (csak kattintás után jön létre) ---------- */
.video-frame__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}
/* lejátszáskor a facade elemei eltűnnek, és a 3D-tilt is leáll (a JS is kilép,
   itt a transform nullázása biztosítja, hogy ne maradjon ferdén az iframe) */
.video-frame.is-playing { --tilt-x: 0deg; --tilt-y: 0deg; }
.video-frame.is-playing .video-frame__thumb,
.video-frame.is-playing .video-frame__play { display: none; }

/* ---------- Demó-szekció bal oszlopa ----------
   Sorrend: eyebrow/cím/lead → (rugalmas rés) → bizalmi sor, alulra zárva az
   űrlapkártya aljához. (A korábbi maskot innen kikerült, a szekció felső
   paddingja ezért visszaállt az alap szekció-térközre.) */
.demo__text .trust-inline { margin-top: auto; padding-top: var(--spacing-40); }

/* ---------- 404 oldal ----------
   A blokk EGYBEN, függőlegesen középre a képernyőn — a lábléc alá csúszik.
   A cím szekciócím-méretű (nem hero-méretű): a 404 nem kampányoldal, a figura
   viszi a hangsúlyt, a szöveg csak eligazít. */
.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100svh;
  /* szimmetrikus eltartás: így a blokk a VIEWPORT közepére esik, nem egy
     aszimmetrikus dobozéra. A felső érték a lebegő pillt kerüli ki. */
  padding: var(--nav-pill-clearance) 0;
}
/* A 404 saját függőleges ritmust visz, ezért a szekció- és a .legal-padding
   itt kioltódik — különben duplán számolódna, és a blokk lecsúszna középről. */
.section:has(.notfound) { padding: 0; }
.notfound__mascot {
  width: min(240px, 52vw);
  aspect-ratio: 343 / 249;
  margin-bottom: var(--spacing-8);
}
.notfound__mascot svg { display: block; width: 100%; height: 100%; }
.notfound__title {
  margin: 0 0 var(--spacing-12);
  font-size: var(--typo-title-size);
  line-height: 1.1;
  letter-spacing: var(--typo-title-tracking);
  color: var(--color-primary-80);
}
.notfound__lead {
  margin: 0 0 var(--spacing-32, var(--spacing-24));
  max-width: 42ch;
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--text-neutral);
}

/* ---------- Hero háttérvideó ----------
   A Vimeo background-lejátszó 16:9-es; a stage is az, tehát pontosan kitölti.
   A grain a videó FÖLÖTT marad (ugyanaz a réteg, mint a helyőrzőn), így a kép
   illeszkedik a lap többi lila felületéhez. */
/* A stage „ablak", a videó pedig BENNE mozog más ütemben — ettől lesz parallax.
   Két dolgot kell megoldani:
   1) COVER: a Vimeo-lejátszó 16:9-es, a stage viszont nem mindig az (mobilon 4:3).
      Ha csak kifeszítenénk, a lejátszó levelezőlapozna, és kilátszana mögüle a lila
      helyőrző. Container query egységekkel (a stage `container-type: size`) pontos
      cover-számítás lehetséges: a videó a nagyobbik irányra méretezve tölti ki.
   2) FEDEZET a parallaxhoz: a `scale` ad ráhagyást, hogy a függőleges eltolás soha
      ne mutasson üres sávot. A skála (1.25) nagyobb, mint a maximális eltolás (9%),
      tehát a szélek mindig fedve maradnak. */
.hero__stage-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
  border: 0;
  pointer-events: none;   /* dekoratív: ne fogjon el kattintást */
  /* a --parallax (-1 … 1) értéket a js/main.js írja görgetéskor */
  translate: -50% calc(-50% + var(--parallax, 0) * 9%);
  scale: 1.25;
  will-change: translate;
}
@media (prefers-reduced-motion: reduce) {
  .hero__stage-video { scale: 1.25; translate: -50% -50%; }
}
/* Ha valódi videó megy, a grain LEKERÜL: a textúra a lila helyőrző felület
   karaktere volt (D-013), a filmes képen viszont csak piszkítja a képet.
   A helyőrzőn (videó nélkül, pl. reduced motion esetén) változatlanul ott marad. */
.hero__stage.has-video::before { content: none; }
.hero__stage.has-video { cursor: default; } /* nincs mit kattintani rajta */

/* ---------- Hero-maskot: a bizalmi sor jobb szélén, a videó mögé bukva ----------
   Rétegtan (ez a lényeg):
   • az elválasztó VONAL a bizalmi sor `border-top`-ja → a figura mögött marad,
     mert a maskot ennek az elemnek a gyereke, és a gyerek a keret UTÁN festődik;
   • a videó-stage a DOM-ban a bizalmi sor UTÁN jön, tehát fölé kerül → a figura
     alsó harmada eltűnik mögötte.
   Nem kell hozzá egyetlen z-index sem: a dokumentum-sorrend elvégzi. */
.trust-inline--rule { position: relative; }
/* A méret a HERO-n él, nem a figurán: a szülőnek is szüksége van rá (a mobil
   alsó padding ebből számol), és egy gyerekre kötött változót a szülő nem lát —
   a `calc` némán érvénytelen lenne, a deklaráció pedig eldobódna. */
.hero { --hero-mascot-h: clamp(170px, 19vw, 280px); }
.hero__mascot {
  position: absolute;
  right: 6%;
  /* A doboz alja a stage tetejénél van — 0-val tehát a videó EGYÁLTALÁN nem
     vágja el a figurát; a pár pixeles ráhagyás a döntés miatt kell, hogy a
     megbillent sarok se érjen bele. */
  bottom: var(--spacing-4);
  rotate: 2deg;
  /* parallax: a --lag értéket a js/main.js írja görgetéskor (lemaradás lefelé) */
  translate: 0 var(--lag, 0px);
  height: var(--hero-mascot-h);
  width: calc(var(--hero-mascot-h) * 343 / 430);
  pointer-events: none;
}
.hero__mascot svg { display: block; width: 100%; height: 100%; }

/* A videó nélküli heroban (demó-oldal) nincs mibe belebukni, ezért a figura a
   SZEKCIÓ aljához ül, és nem kell a parallax-lemaradás sem — az a videóra
   ráúszást szolgálta. A méret, az elforgatás és a jobb oldali hely közös. */
.hero--plain { position: relative; }
.hero--plain { --hero-mascot-h: clamp(230px, 25.5vw, 376px); }
.hero__mascot--plain {
  /* NAGYOBB, hogy optikailag a főoldalival egyezzen. A doboz mérete a kettőn
     azonos volt (227,6 × 281 px) — a különbség a RAJZBAN van: ez az animáció
     kisebb figurát tesz ugyanarra a 343×430-as vászonra. Alfa-alapú méréssel
     nem dönthető el (mindkettő rajzol halvány, teljes vásznat átfogó réteget,
     és a küszöbtől függően 0,78…1,07 közt ugrál az arány), ezért a legszigorúbb
     küszöbön mért SZÉLESSÉG-arányból (229/171) jön a szorzó — a méret magán a
     `.hero--plain`-en van, hogy a szülő is olvashassa. */
  /* A figura ALJA a következő (fehér) lap fölé lóg — a szekcióhatár peremén ül,
     ahogy a főoldalon a videó peremén. A mértéket a saját magasságából
     származtatjuk, hogy a clamp minden nézetméretben arányosan vigye. */
  bottom: calc(-0.37 * var(--hero-mascot-h));
  translate: none;
  /* a fehér lap a DOM-ban utána jön, tehát alapból fölé festene */
  z-index: 3;
}
/* Szűk nézetben a főoldali figura kimarad: ott a bizalmi sor amúgy is törik, és
   a videó mellé zsúfolva csak zavarna. A demó-oldalon VISZONT marad — ott nincs
   videó, és a cím alatt középre állva ő tölti ki a hero és az űrlap közti helyet. */
@media (max-width: 720px) {
  .hero__mascot { display: none; }
  /* Mobilon is a szekcióhatár PEREMÉN ül, mint desktopon — csak középre zárva.
     Abszolút pozícióban marad, hogy a következő (fehér) lap fölé lóghasson;
     a `left/right: 0` + `margin-inline: auto` központozza. A felső köz azért
     kicsi, mert a figura maga sok üres helyet hoz a vászna tetején. */
  .hero__mascot--plain {
    display: block;
    left: 0;
    right: 0;
    margin-inline: auto;
    rotate: none;
  }
  /* A figura abszolút pozícióban ül, tehát nem tol maga előtt helyet: a
     szöveg alatti levegőt a HERO alsó paddingja adja. Mérve: enélkül a maskot
     doboza 65px-szel a felvezető szövegbe lógott. A képlet a figura saját
     méretéből származik — a kilógó rész (0,37×) plusz a kívánt köz. */
  .hero--plain {
    padding-bottom: calc(var(--hero-mascot-h) * 0.37 + var(--spacing-40));
  }
}