/* ============================================================
   Handoff Systems — design system
   Hűvös, technikai paletta. KÉT akcent, és ez jelentést hordoz:
   --volt (elektromos kék) = a jel útközben
   --ember (izzó narancs)  = a becsapódás, ahol az átadás megtörténik
   ============================================================ */

:root{
  --bg:        #EDEFF3;   /* hűvös világos alap — nem krém, nem fehér */
  --bg-2:      #E3E7EE;   /* tint szekció */
  --surface:   #F7F8FA;   /* kártya világos felületen */
  --night:     #0A0D13;   /* mély grafit */
  --night-2:   #141922;   /* kártya sötét felületen */
  --fg:        #0A0D13;
  --muted:     #626C7A;
  --muted-d:   #8E99A8;   /* muted sötét háttéren */

  --volt:      #2F5BFF;   /* a jel */
  --ember:     #E4622F;   /* a becsapódás */
  --ok:        #10A87A;

  --line:      rgba(10,13,19,.12);
  --line-soft: rgba(10,13,19,.06);
  --line-d:    rgba(237,239,243,.14);

  --display: 'Space Grotesk', system-ui, sans-serif;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --wrap: 1220px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3{ margin:0; font-family: var(--display); font-weight:500; letter-spacing:-.03em; }
p{ margin:0 0 1.1em; }
b{ font-weight:600; }

.wrap{ width:100%; max-width: var(--wrap); margin:0 auto; padding:0 40px 0 92px; }
.wrap--narrow{ max-width: 900px; }

/* ---------- monospace címke (a technikai karakter hordozója) ---------- */
.tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform: uppercase; color: var(--muted);
  background: rgba(10,13,19,.04); border:1px solid var(--line);
  padding: 7px 14px 7px 11px; border-radius: 6px; margin-bottom: 26px;
}
.tag i{ width:6px; height:6px; border-radius:1px; background: var(--volt); flex:none; }
.tag--onDark{ color: var(--muted-d); background: rgba(237,239,243,.05); border-color: var(--line-d); }

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  position: fixed; inset: 0; z-index: 200;
  background: var(--night);
  display: grid; place-items: center;
  --reveal: 0%; --rx: 50%; --ry: 50%;
  /* A failsafe a teljes koreográfia (~4,0 mp) után jóval később üt be.
     ⚠️ Ha a script.js-ben növeled a RUN/HOLD/OPEN időt, ezt is told feljebb. */
  animation: introFailsafe .4s 7s forwards;
}
/* A maszk CSAK a felnyílás fázisában — különben a 0%-os gradiens
   látható korongot rajzol a képernyő közepére. */
.intro.is-opening{
  -webkit-mask-image: radial-gradient(circle at var(--rx) var(--ry), transparent 0 var(--reveal), #000 calc(var(--reveal) + 3%));
  mask-image: radial-gradient(circle at var(--rx) var(--ry), transparent 0 var(--reveal), #000 calc(var(--reveal) + 3%));
}
@keyframes introFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.intro.is-gone{ display:none; }

.intro__svg{ position:absolute; inset:0; width:100%; height:100%; }
.intro__trace{
  fill:none; stroke: var(--volt);
  stroke-linecap: round; stroke-linejoin: round;
}
.intro__head{ fill:#EAF0FF; filter: drop-shadow(0 0 10px var(--volt)) drop-shadow(0 0 26px rgba(47,91,255,.85)); }
.intro__halo{ fill:none; stroke: rgba(237,239,243,.1); stroke-width:1; }
.intro__ring{ fill:none; stroke: rgba(237,239,243,.32); stroke-width:1.4; }
.intro__core{ fill: rgba(237,239,243,.2); transition: fill .2s; }
/* A becsapódásnál a hideg jelből meleg izzás lesz — ez a handoff pillanata. */
.intro__node.is-hit .intro__core{ fill:#FFE9DE; }
.intro__node.is-hit .intro__ring{ stroke: var(--ember); stroke-width:2; }
.intro__node.is-hit .intro__halo{ stroke: rgba(228,98,47,.45); }
.intro__burst{ fill:none; stroke: var(--ember); stroke-width:2; opacity:0; }
.intro__node.is-hit .intro__burst{ animation: introBurst .75s var(--ease) forwards; }
@keyframes introBurst{
  0%  { opacity:.9; r:6;   stroke-width:2.5; }
  100%{ opacity:0;  r:120; stroke-width:.4; }
}
.intro__skip{
  position:absolute; left:0; right:0; bottom:34px; margin:0; text-align:center;
  font-family: var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color: rgba(237,239,243,.26);
}

/* ============================================================
   GERINC — a signature: a jel végigfut az oldalon
   ============================================================ */
.spine{
  position: fixed; left: 40px; top: 0; bottom: 0; width: 12px; z-index: 40;
  pointer-events:none; opacity:0; transition: opacity .6s .3s;
}
.spine.is-on{ opacity:1; }
.spine__rail{
  position:absolute; left:5px; top:12vh; bottom:12vh; width:2px;
  background: var(--line); border-radius:2px; overflow:hidden;
}
/* A gradiens mindig a TELJES sínre vonatkozik, a haladást egy clip fedi fel —
   különben a rövid kitöltés is végigfutna a kék→narancs átmeneten. */
.spine__fill{
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--volt), var(--ember));
  clip-path: inset(0 0 var(--rest, 100%) 0);
}
.spine__node{
  position:absolute; left:2px; top: calc(12vh + (76vh * var(--at)));
  width:8px; height:8px; border-radius:50%;
  background: var(--bg); border:1.5px solid var(--line);
  transition: all .4s var(--ease-out);
}
.spine__node.is-lit{
  background: var(--ember); border-color: var(--ember);
  box-shadow: 0 0 0 4px rgba(228,98,47,.16);
}

/* ---------- gombok ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--sans); font-size:15px; font-weight:500;
  padding: 13px 24px; border-radius: 8px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition: transform .3s var(--ease-out), background .25s, color .25s, border-color .25s, box-shadow .3s;
  white-space: nowrap;
}
.btn--lg{ padding: 16px 30px; font-size:16px; }
.btn--solid{ background: var(--fg); color: var(--bg); }
.btn--solid:hover{ background: var(--volt); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47,91,255,.28); }
.btn--line{ border-color: var(--line); color: var(--fg); }
.btn--line:hover{ border-color: var(--fg); transform: translateY(-2px); }
.section--dark .btn--solid{ background: var(--bg); color: var(--fg); }
.section--dark .btn--solid:hover{ background: var(--volt); color:#fff; }
.section--dark .btn--line{ border-color: var(--line-d); color: var(--bg); }
.section--dark .btn--line:hover{ border-color: var(--bg); }

/* ---------- NAV ---------- */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display:flex; align-items:center; gap:40px; padding: 22px 40px 22px 92px;
  transition: padding .4s var(--ease), background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck{
  padding: 13px 40px 13px 92px;
  background: rgba(237,239,243,.82); backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.nav__brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em;
  color: var(--fg); text-decoration:none;
}
.nav__brand em{ font-style:normal; font-weight:400; color: var(--muted); }
.nav__mark{
  width:28px; height:34px; flex:none;
  background-image: url('assets/handoff-mark-black.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.nav__links{ display:flex; gap:28px; margin-left:auto; }
.nav__links a{
  font-family: var(--mono); font-size:12.5px; letter-spacing:.03em;
  color: var(--muted); text-decoration:none; padding:4px 0; position:relative;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background: var(--volt); transition: width .35s var(--ease-out);
}
.nav__links a:hover{ color: var(--fg); }
.nav__links a:hover::after{ width:100%; }

/* ---------- HERO ---------- */
/* A tartalom `align-items:center`-rel a két padding KÖZÖTT középre ül, ezért
   az alsó padding a felsőnél nagyobb: ez tolja a blokkot a képernyő közepe
   fölé. A kettő különbségének a fele = ennyivel kerül feljebb. */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding: 120px 0 160px; overflow:hidden;
}
.hero__viz{
  position:absolute; inset:0; z-index:0;
  /* A bal szél kifut, hogy a címsor mögött ne zajongjon. Ha a mezőt beljebb tolod
     (script.js GRID_LEFT), ezt a három stopot is told vele együtt. */
  -webkit-mask-image: linear-gradient(to right, transparent 2%, rgba(0,0,0,.34) 22%, #000 42%);
  mask-image: linear-gradient(to right, transparent 2%, rgba(0,0,0,.34) 22%, #000 42%);
  will-change: transform;
}
.hero__viz svg{ width:100%; height:100%; display:block; }
/* A bal padding az oldal többi szekciójával (.wrap) egy vonalban van. */
.hero__inner{
  position:relative; z-index:1;
  width:100%; max-width: var(--wrap); margin:0 auto; padding:0 40px 0 92px;
}
/* A méret a leghosszabb sorhoz van szabva („Dolgozzon az AI." — 16 karakter).
   ⚠️ Ha hosszabb headline-t választasz, ezt le kell vinni, különben tördel:
   nagyjából 16 karakternél 92px, 24-nél 70px, 32-nél 55px a felső határ. */
.hero__title{
  font-size: clamp(40px, 6.6vw, 92px);
  line-height: 1.04; letter-spacing:-.04em; font-weight:600;
  margin-bottom: 18px;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block; transform: translateY(105%);
  transition: transform 1s var(--ease-out);
}
.hero.is-in .line:nth-child(1) > span{ transition-delay:.05s; }
.hero.is-in .line:nth-child(2) > span{ transition-delay:.16s; }
.hero.is-in .line > span{ transform: translateY(0); }
/* ---- Áram a betűk körvonalán ----
   Két réteg egymáson:
     ① a szó maga — statikus hideg→meleg gradiens kitöltés
     ② egy ::after kontúrmás (`-webkit-text-stroke`), amiből egy MOZGÓ MASZK
        mindig csak egy keskeny sávot enged látni → az áram végigfut a
        betűk élén. Ugyanaz a nyelv, mint az intró áramszálai.
   ⚠️ Világos háttéren a `text-shadow`-os fényudvar NEM működik: elmosódott
   dobozként jelenik meg a szó mögött. Vékony kontúron viszont a
   `drop-shadow` igen — ezért az adja a fényt, nem a text-shadow. */
.hero__title em{
  font-style:normal; position:relative; display:inline-block;
  background: linear-gradient(100deg, var(--volt), var(--ember));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title em::after{
  content: attr(data-text);
  position:absolute; left:0; top:0; white-space:nowrap; pointer-events:none;
  /* Világos mag + telített kék izzás = elektromos ív. Ha a drop-shadow sugarát
     megnöveled, a hatás maszattá mosódik — 4/11px a felső határ. */
  -webkit-text-stroke: 1.5px #DCE6FF;
  filter: drop-shadow(0 0 4px #2F5BFF) drop-shadow(0 0 11px rgba(47,91,255,.7));
  /* Táguló GYŰRŰ a szó közepéből kifelé: a maszk egy ellipszis alakú sáv,
     belül és kívül átlátszó. A `mask-size` növelése tágítja a gyűrűt, a
     `mask-position: center` tartja a középpontban — így az áram minden
     irányba egyszerre halad kifelé.
     (Azért `mask-size`-t animálunk és nem a gradiens sugarát: ahhoz
     @property-vel regisztrált változó kellene, enélkül nem interpolálna.) */
  -webkit-mask-image: radial-gradient(ellipse closest-side,
    transparent 0 44%, rgba(0,0,0,.3) 57%, #000 70%, rgba(0,0,0,.3) 83%, transparent 96%);
          mask-image: radial-gradient(ellipse closest-side,
    transparent 0 44%, rgba(0,0,0,.3) 57%, #000 70%, rgba(0,0,0,.3) 83%, transparent 96%);
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-size: 0% 0%;         mask-size: 0% 0%;
}
/* A késleltetés megvárja, amíg a két sor felúszik (.line, 1s + .16s delay).
   A tágulás egyenletes és lassú (~6 mp), utána ~4 mp szünet — enélkül
   folyamatos villogás lenne belőle. Lineáris ütemezés: `ease-out`-tal a
   gyűrű az első fél másodpercben már majdnem kiért volna, itt viszont
   végig egyforma sebességgel kúszik kifelé. */
.hero.is-in .hero__title em::after{ animation: heroCurrent 10s 1.2s linear infinite; }
@keyframes heroCurrent{
  0%       { -webkit-mask-size: 0% 0%;     mask-size: 0% 0%; }
  80%, 100%{ -webkit-mask-size: 260% 260%; mask-size: 260% 260%; }
}
/* Alfelirat a címsor alatt. Félkövér, de a címsornál jóval kisebb — nem
   versenyez vele, csak megtámasztja. A `max-width` a mérték miatt van: 58ch
   körül tördel kényelmesen olvasható sorhosszra, nem fut ki a hero széléig. */
.hero__lead{
  margin: 26px 0 0; max-width: 64ch;
  font-size: 20.5px; font-weight:600; line-height:1.55; color: var(--muted);
}
.hero__lead b{ color: var(--fg); }
.hero__lead p{ margin:0; }

/* Crescendo: a három ütem lefelé haladva erősödik — méretben és kontrasztban is.
   A jel halad, és egyre közelebb kerül a becsapódáshoz; ugyanaz a logika, mint a
   nyilak hideg→meleg színváltásában. A harmadik display-fontot kap: az köti
   vissza a címsorhoz, anélkül hogy versenyezne vele (rövid és egysoros). */


/* ---------- a lánc: három állapot, nyíllal összekötve ----------
   Ez a `handoff` maga, három szóban. Nem hasáb és nem felsorolás: vízszintes
   lánc, ami vizuálisan KÖNNYŰ — a hero így nem lesz szövegfal, és az ív mégis
   ott van. A nyilak --volt-ból --ember-be váltanak (a jel útja), az utolsó
   cella pedig a becsapódás: meleg keret és gradiens szöveg.

   ⚠️ Volt korábban három egymás alatti, vastag bekezdés nyilakkal, majd egy
   bal oldali jelvonallal — mindkettő szövegfalat csinált a heróból. Ez a
   forma azért működik, mert a magyarázatot EGY mondat viszi, a lánc pedig
   csak a végeredményt mutatja. Ne told vissza a mondatokat a cellákba. */
.chain{
  list-style:none; margin:40px 0 0; padding:0;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:16px 52px;
}
/* Keret és háttér NINCS: a CTA-gombok közvetlenül alatta vannak, egy dobozos
   cella kattinthatónak látszana. Ez tipográfiai lánc, nem gombsor. */
.chain li{
  position:relative;
  font-family: var(--display); font-weight:700; font-size:25px;
  letter-spacing:-.02em; color: var(--fg); line-height:1.2;
}
/* A nyíl a cellák KÖZÖTT, a 34px-es résben ül. */
.chain li + li::before{
  content:''; position:absolute; left:-38px; top:.58em;
  width:22px; height:2px; background: var(--volt);
}
.chain li + li::after{
  content:''; position:absolute; left:-24px; top:.58em;
  width:8px; height:8px; margin-top:-3px;
  border-top:2px solid var(--volt); border-right:2px solid var(--volt);
  transform: rotate(45deg);
}
/* A második nyíl már a meleg akcentben: itt érkezik meg az eredmény. */
.chain li + li + li::before{ background: var(--ember); }
.chain li + li + li::after{
  border-top-color: var(--ember); border-right-color: var(--ember);
}
/* A becsapódás: az utolsó tagot a gradiens szó emeli ki, nem doboz. */
/* A záró tag EGÉSZE viseli a gradienst, nem csak a „nyereségráta" szó: hosszabb
   szövegen az átmenet lágyabb, és a lánc végpontja egyben válik színessé. */
.chain em{
  font-style:normal;
  background: linear-gradient(95deg, var(--volt), var(--ember) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
/* Csak a heróban tolódnak lejjebb — a lead-kártya alatt kell a levegő.
   A kapcsolat szekció ugyanezt az osztályt viszi, ott a 34px marad. */
.hero .hero__actions{ margin-top:54px; }

.hero__meta{
  position:absolute; left:92px; right:40px; bottom:40px; z-index:1;
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--muted);
  border-top:1px solid var(--line); padding-top:16px;
}
.hero__scrollhint{ position:relative; padding-right:26px; }
.hero__scrollhint::after{
  content:''; position:absolute; right:0; top:50%; width:16px; height:1px;
  background: var(--muted); animation: hintSlide 1.9s var(--ease) infinite;
}
@keyframes hintSlide{ 0%,100%{ transform:translateX(0); opacity:1; } 50%{ transform:translateX(6px); opacity:.35; } }

/* ---------- szekció-alapok ---------- */
.section{ padding: 130px 0; position:relative; }
.section--tint{ background: var(--bg-2); }
.section--dark{ background: var(--night); color: var(--bg); }
.section--cta{ padding: 150px 0 120px; }

.h2{
  font-size: clamp(32px, 4.4vw, 58px); line-height:1.06;
  max-width: 17ch; margin-bottom: 20px;
}
.h2--light{ color: var(--bg); }
.sub{ color: var(--muted); max-width: 58ch; font-size:18px; }
.sub--light{ color: var(--muted-d); }
.note{
  margin-top: 46px; padding-top: 24px; border-top:1px solid var(--line);
  color: var(--muted); max-width: 70ch; font-size:16px;
}
.note em{ font-style:normal; color: var(--fg); font-weight:500; }

/* ---------- 02/a — a négy bemenet (iparág helyett anyag szerint) ---------- */
/* Négy sor: kicker · cím · „ami ma történik" · „amit átvesz".
   A kártyák subgriddel osztoznak ezeken, így a belső elválasztó vonal mind a
   négy kártyán EGY magasságban van, akkor is, ha a szövegek eltérő hosszúak.
   Subgrid nélküli böngészőben sima grid lesz belőle — csak az igazítás vész el. */
.inputs{
  display:grid; grid-template-columns: repeat(4,1fr);
  grid-template-rows: auto auto 1fr auto;
  gap:16px; margin:44px 0 40px;
}
.inputs__card{
  background: var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:26px 22px;
  display:grid; grid-row: span 4; grid-template-rows: subgrid;
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
}
.inputs__card:hover{
  transform: translateY(-4px); border-color: rgba(47,91,255,.34);
  box-shadow: 0 16px 38px rgba(10,13,19,.08);
}
/* Mono kicker emoji helyett — a paletta két akcentre van szabva, a
   többszínű emoji kilógna belőle. */
.inputs__ico{
  display:block; font-family: var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color: var(--muted-d); margin-bottom:14px;
}
.inputs__card h3{ font-size:19px; line-height:1.25; margin-bottom:12px; }
.inputs__now{ font-size:15px; color: var(--muted); margin-bottom:16px; }
.inputs__sys{
  margin:0; padding-top:16px; border-top:1px solid var(--line);
  font-size:14.5px; color: var(--fg);
}
.inputs__sys span{
  display:block; font-family: var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color: var(--volt); margin-bottom:8px;
}

/* ---------- 02/b — felismerés-ellenőrző ---------- */
.check{
  margin-top:52px; background: var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:34px;
}
.check__title{ font-size: clamp(22px,2.6vw,30px); line-height:1.15; margin-bottom:22px; }
.check__list{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:9px; }
.check__item{
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:flex-start; gap:13px;
  font-family: var(--sans); font-size:15.5px; color: var(--muted);
  background: var(--bg); border:1px solid var(--line);
  border-radius:9px; padding:13px 17px;
  transition: all .25s var(--ease-out);
}
/* A jelölőnégyzet tiszta CSS — nincs kép, nincs SVG. */
.check__item::before{
  content:''; flex:none; width:18px; height:18px; margin-top:1px;
  border:1.5px solid var(--muted-d); border-radius:4px;
  display:grid; place-items:center; line-height:1;
  font-size:11px; font-weight:700; color:transparent;
  transition: background .25s, border-color .25s;
}
.check__item:hover{ border-color: var(--fg); color: var(--fg); }
.check__item.is-on{ color: var(--fg); border-color: var(--volt); background: rgba(47,91,255,.05); }
.check__item.is-on::before{
  content:'✓'; color:#fff;
  background: var(--volt); border-color: var(--volt);
}
.check__out{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:24px;
}
.check__score{
  font-family: var(--mono); font-size:14px; color: var(--muted); flex:none;
}
.check__score b{
  font-family: var(--display); font-size:38px; font-weight:600; line-height:1;
  color: var(--volt); margin-right:4px; font-variant-numeric: tabular-nums;
  transition: color .4s var(--ease);
}
.check.is-high .check__score b{ color: var(--ember); }
.check__out p{ margin:0; font-size:16px; color: var(--muted); max-width:56ch; }
.check__out p b{ color: var(--fg); }

/* ---------- 02/c — a cégszintű ugrás ---------- */
.leap{ margin-top:64px; }
.leap__title{ font-size: clamp(24px,3vw,36px); line-height:1.12; margin-bottom:32px; max-width:24ch; }
.leap__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:34px; }
.leap__item{ border-top:2px solid var(--line); padding-top:22px; }
.leap__num{
  display:block; font-family: var(--mono); font-size:12px; letter-spacing:.1em;
  color: var(--volt); margin-bottom:12px;
}
.leap__item h4{
  margin:0 0 10px; font-family: var(--display); font-weight:500;
  font-size:19px; line-height:1.25; letter-spacing:-.02em;
}
.leap__item p{ margin:0; font-size:15.5px; color: var(--muted); }

/* ---------- bizonyíték-kártya ----------
   2026-08-22 óta EGY kártya van belőle, a 02-es (mérés) szekció jobb oldalán;
   a háromkártyás rács és a záró sáv törölve (kód: `_archive/2026-08-22-…`).

   A sáv 100 vonalból áll: ennyi az alapsokaság, és amennyi ebből világít,
   annyi a szám — a 66% így nem szó, hanem arány. A vonalakat a JS rakja ki
   (6. blokk).

   ⚠️ A kártya hoverén NINCS transform: a `.reveal.is-in{transform:none}`
   ugyanolyan erős szelektor, és később jön a fájlban — felülírná. Ezért a
   hover keretet és fényt mozgat, nem geometriát. */
.proof__card{
  display:flex; flex-direction:column;
  background: var(--night-2); border:1px solid var(--line-d);
  border-radius:16px; padding:30px 28px;
  transition: border-color .35s, box-shadow .35s;
}
.proof__card:hover{
  border-color: rgba(47,91,255,.42);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

.proof__kicker{
  display:block; font-family: var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color: var(--muted-d);
}

/* A szám és a mértékegység egy alapvonalon: a nagy szám az állítás, a kis
   szöveg az, hogy MIBŐL — enélkül a 9% önmagában nem jelent semmit. */
.proof__num{
  margin:18px 0 0; display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  /* Fix magasság: az egysoros („a munkaidőből") és a kétsoros mértékegység
     különben 19 képpontnyi csúszást vinne a kártyák közé, és a lenyitó sorok
     nem állnának egy vonalban. */
  min-height:68px;
}
.proof__num b{
  font-family: var(--display); font-weight:500;
  font-size: clamp(38px, 4vw, 50px); line-height:1; letter-spacing:-.045em;
  color: var(--bg);
}
.proof__num span{ font-size:13.5px; line-height:1.35; color: var(--muted-d); max-width:16ch; }

.proof__bar{
  display:flex; align-items:flex-end; gap:1px;
  height:34px; margin:20px 0 26px;
}
.proof__bar i{
  flex:1 1 0; min-width:1px; height:36%;
  background: rgba(237,239,243,.13);
  transition: height .45s var(--ease-out), background .45s, box-shadow .45s;
}
.proof__bar i.is-on{ height:100%; }
.proof__bar[data-tone="volt"] i.is-on{
  background: var(--volt); box-shadow: 0 0 7px rgba(47,91,255,.65);
}
.proof__bar[data-tone="ember"] i.is-on{
  background: var(--ember); box-shadow: 0 0 8px rgba(228,98,47,.7);
}

.proof__claim{
  font-size:20px; line-height:1.25; color: var(--bg); margin-bottom:12px;
}
.proof__body{
  margin:0 0 24px; font-size:15.5px; line-height:1.6; color: var(--muted-d);
}
.proof__body b{ color: var(--bg); font-weight:600; }

/* ---------- a lenyíló módszertan ----------
   Natív <details>: ugyanaz a +/× nyelv, mint a GYIK-nál, nulla JS.
   `margin-top:auto` — a nyitó sor mindhárom kártyán egy vonalban áll,
   akármilyen hosszú fölötte a szöveg. */
.proof__det{
  margin-top:auto; border-top:1px solid var(--line-d); padding-top:18px;
}
.proof__det summary{
  list-style:none; cursor:pointer; position:relative; padding-right:26px;
  font-family: var(--mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:#8FA8FF;
  transition: color .25s;
}
.proof__det summary::-webkit-details-marker{ display:none; }
.proof__det summary:hover{ color: var(--bg); }
.proof__det summary::before,
.proof__det summary::after{
  content:''; position:absolute; right:0; top:50%;
  background:#8FA8FF; transition: transform .35s var(--ease-out), background .25s;
}
.proof__det summary::before{ width:11px; height:1.5px; margin-top:-.75px; }
.proof__det summary::after{ width:1.5px; height:11px; right:4.75px; margin-top:-5.5px; }
.proof__det[open] summary::before,
.proof__det[open] summary::after{ background: var(--bg); }
.proof__det[open] summary::after{ transform: rotate(90deg); }
.proof__det[open] summary{ color: var(--bg); }

.proof__more{ padding-top:20px; }
.proof__meta{ margin:0 0 20px; display:grid; gap:15px; }
.proof__meta dt{
  font-family: var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--muted-d); margin-bottom:6px;
}
.proof__meta dd{
  margin:0; font-size:14.5px; line-height:1.55; color: rgba(237,239,243,.82);
}
/* Az utolsó tétel mindhárom kártyán a korlát — „amit nem mond ki". Ez a
   szekció lényege, ezért kap saját jelölést: a meleg akcent itt nem
   dísz, hanem azt jelöli, hol áll meg a bizonyíték. */
.proof__meta div:last-child{
  border-left:2px solid rgba(228,98,47,.5); padding-left:15px;
}
.proof__meta div:last-child dt{ color: var(--ember); }

.proof__src{
  font-family: var(--mono); font-size:11px; letter-spacing:.04em;
  color: var(--muted-d); text-decoration:none;
  display:inline-flex; align-items:center; gap:7px;
  border-bottom:1px solid rgba(237,239,243,.22); padding-bottom:3px;
  transition: color .25s, border-color .25s;
}
.proof__src::after{ content:'↗'; font-size:12px; }
.proof__src:hover{ color: var(--bg); border-color: var(--bg); }


/* ---------- 04 kalkulátor ----------
   Nulla bevitellel indul: három nagyságrend-chip azonnali eredménnyel.
   A csúszkák és a forint egy-egy kattintás mögött vannak — az órabér az a
   mező, ahol a látogató elakad, ezért nem az az első, amit lát. */
.calc{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; margin-top:50px; align-items:start; }
.calc__q{ display:block; font-size:17px; margin-bottom:16px; }
.calc__presets{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:26px; }
.preset{
  font-family: var(--sans); font-size:15px; color: var(--muted);
  background: var(--surface); border:1px solid var(--line);
  padding:13px 20px; border-radius:9px; cursor:pointer;
  transition: all .28s var(--ease-out);
}
.preset:hover{ border-color: var(--fg); color: var(--fg); transform: translateY(-2px); }
.preset.is-active{ background: var(--fg); border-color: var(--fg); color: var(--bg); }

.calc__more, .calc__money{
  font-family: var(--mono); font-size:12.5px; color: var(--volt);
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition: gap .25s var(--ease-out);
}
.calc__more:hover, .calc__money:hover{ gap:12px; }
.calc__more[aria-expanded="true"] span, .calc__money[aria-expanded="true"] span{
  transform: rotate(90deg); display:inline-block;
}
.calc__fine{ margin-top:30px; padding-top:8px; }

.calc__money{ grid-column:1/-1; justify-self:start; color:#8FA8FF; }
.calc__moneybox{ grid-column:1/-1; border-top:1px solid var(--line-d); padding-top:22px; }
.calc__moneybox label{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size:15px; color: var(--bg); margin-bottom:14px;
}
.calc__moneybox label b{
  font-family: var(--display); font-size:22px; font-weight:600;
  color:#8FA8FF; white-space:nowrap;
}
.calc__moneybox input[type=range]{ background: var(--line-d); }
.calc__moneybox input[type=range]::-webkit-slider-thumb{ background: var(--bg); }
.calc__moneybox input[type=range]::-moz-range-thumb{ background: var(--bg); }
.out--money{ margin-top:22px; }

.field{ margin-bottom: 32px; }
.field label{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size:15.5px; color: var(--fg); margin-bottom:14px;
}
.field label b{ font-family: var(--display); font-size:24px; font-weight:600; color: var(--volt); white-space:nowrap; }
.field__hint{ display:block; font-size:13px; color: var(--muted); margin-top:9px; }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px;
  background: var(--line); border-radius:3px; outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background: var(--fg); border:0; cursor:grab;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
input[type=range]::-webkit-slider-thumb:hover{ transform: scale(1.2); box-shadow: 0 0 0 8px rgba(47,91,255,.15); }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background: var(--fg); border:0; cursor:grab; }

.calc__out{
  background: var(--night); color: var(--bg); border-radius:16px; padding:34px;
  display:grid; grid-template-columns:1fr 1fr; gap:26px 20px;
}
.out{ display:flex; flex-direction:column; }
.out--hero{ grid-column:1/-1; border-bottom:1px solid var(--line-d); padding-bottom:22px; }
.out__label{ font-family: var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-d); margin-bottom:8px; }
.out__num{ font-family: var(--display); font-weight:600; line-height:1; font-size:40px; font-variant-numeric: tabular-nums; letter-spacing:-.03em; }
.out--hero .out__num{
  font-size: clamp(58px, 8vw, 96px);
  /* Sötét háttéren a --volt túl sötét: világosabb kékkel indul a gradiens,
     hogy a legfontosabb szám kontrasztos maradjon. */
  background: linear-gradient(100deg, #7D9BFF, var(--ember) 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.out__unit{ font-size:13.5px; color: var(--muted-d); margin-top:6px; }
.out.is-muted{ opacity:.3; }
/* A világos bal oszlopban él, nem a sötét kártyában — így a két oszlop
   magassága nem szalad szét, és a számok mellett nem zajong. */
.calc__disclaimer{
  font-size:14px; line-height:1.6; color: var(--muted);
  border-top:1px solid var(--line); padding-top:20px; margin:36px 0 0; max-width:52ch;
}
.calc__out .btn{ grid-column:1/-1; justify-self:start; background: var(--bg); color: var(--fg); }
.calc__out .btn:hover{ background: var(--volt); color:#fff; }

/* A szöveg-oszlop (.flow__body) csak ~62ch széles, a .wrap viszont 1220px-ig
   mehet — a jobb oldali sáv a szekció teljes magasságában üresen áll.
   A minta ténylegesen a hero grid-jét folytatja: ugyanaz a --volt/--ember
   pár, ugyanaz a pöttyrács-nyelv, csak nyugalmi állapotban — nem önálló
   dekoráció, hanem a hero vizuáljának visszhangja lejjebb az oldalon. */
#folyamat{ overflow:hidden; }
#folyamat::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  /* Négy nagyobb, izzó "csomópont" (a hero rendezett pontjaira utalva) +
     alattuk a finom, egyenletes rács. A rétegek sorrendje számít: az azonos
     indexű image/position/size hármas tartozik össze. */
  background-image:
    radial-gradient(circle, rgba(47,91,255,.95) 0 2px, rgba(47,91,255,.28) 2px 6px, transparent 7px),
    radial-gradient(circle, rgba(228,98,47,.9) 0 2px, rgba(228,98,47,.26) 2px 6px, transparent 7px),
    radial-gradient(circle, rgba(47,91,255,.8) 0 1.8px, rgba(47,91,255,.22) 1.8px 5px, transparent 6px),
    radial-gradient(circle, rgba(47,91,255,.8) 0 1.8px, rgba(47,91,255,.22) 1.8px 5px, transparent 6px),
    radial-gradient(circle, rgba(47,91,255,.22) 1.6px, transparent 1.6px);
  background-position: 84% 10%, 90% 42%, 76% 66%, 93% 86%, 0 0;
  background-size: 16px 16px, 16px 16px, 13px 13px, 13px 13px, 34px 34px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  -webkit-mask-image: radial-gradient(ellipse 52% 92% at 87% 48%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 52% 92% at 87% 48%, #000 0%, transparent 78%);
}
#folyamat > .wrap{
  position:relative; z-index:1;
  /* A szekció egésze jobbra tolva, hogy a bal oldali részecske-szalagnak
     (.flow__art, 300px + 40px offset) legyen hely — 1100px alatt visszaáll
     a normál értékre (lásd reszponzív blokk). */
  padding-left: 384px;
}

/* ---------- 01 bal oldali dísz — részecske-szalag ----------
   Csavarodó szalag több ezer részecskéből: a "handoff" vizuális megfelelője.
   Canvas, nem SVG — több ezer elemnél az SVG DOM már akadna görgetésre.
   A részecskéket a JS generálja (script.js, 12. blokk) a konténer TÉNYLEGES
   magasságához, ezért nem torzul, bármilyen hosszú is a szekció tartalma. */
.flow__art{
  /* A szalagot a TÉNYLEGES üres bal sáv közepére tesszük, nem a .wrap
     széléhez. Az üres sáv a lap bal szélétől a szöveg kezdetéig tart:
        szövegkezdet = wrap-bal + 384px, ahol wrap-bal = max(0, (100% - 1220)/2)
     Ennek a felezőpontjából vonjuk le a szalag félszélességét.
     ⚠️ A `left` levonása MINDIG a `width` fele legyen — ha a szalagot
     szélesíted, ezt is vidd vele, különben elcsúszik a sáv közepéről. */
  position:absolute; top:0; bottom:0; width:360px;
  left: calc((max(0px, (100% - var(--wrap)) / 2) + 384px) / 2 - 180px);
  pointer-events:auto; z-index:0;
  filter: saturate(1.18) contrast(1.06);
  transition: filter 1.1s var(--ease-out);
  /* A felső/alsó elhalványulás rövidebb sávon fut, mint korábban — így a
     szalagból többet látni teljes erővel. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 95%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 95%, transparent 100%);
}
.flow__art:hover{ filter: saturate(1.4) contrast(1.16); }
.flow__art canvas{ display:block; width:100%; height:100%; }

/* ---------- 01 folyamat — függőleges, scroll-vezérelt ---------- */
.flow{ position:relative; margin-top: 58px; }
/* A vonal a gerinc logikáját folytatja: görgetésre töltődik, hideg→meleg. */
.flow__rail{
  position:absolute; left:23px; top:26px; bottom:40px; width:2px;
  background: var(--line); border-radius:2px; overflow:hidden;
}
.flow__rail span{
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--volt), var(--ember));
  clip-path: inset(0 0 var(--rest, 100%) 0);
}

/* A fázisok GÖRGETÉSHEZ KÖTÖTTEN bontakoznak ki, nem egy küszöbnél villannak be:
   a `--p` (0…1) a fázis haladása a képernyőn, a `--pc` ugyanez késleltetve a
   belső „Amit kapsz" kártyához. Mindkettőt a script.js 8. blokkja írja minden
   görgetésnél.
   ⚠️ Szándékosan NINCS transition az opacity/transform-on: az érték már a
   görgetést követi, egy transition csak utána kullogna. */
.flow__step{
  position:relative; display:grid; grid-template-columns:48px 1fr; gap:0 34px;
  padding-bottom: 76px;
  --p: 0; --pc: 0;
  opacity: var(--p);
  transform: translateY(calc((1 - var(--p)) * 38px));
}
.flow__step:last-child{ padding-bottom:0; }

.flow__marker{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background: var(--bg); border:1.5px solid var(--line);
  font-family: var(--mono); font-size:13px; color: var(--muted);
  transition: all .55s var(--ease-out); z-index:1;
}
.flow__step.is-in .flow__marker{
  border-color: var(--volt); color: var(--volt);
  box-shadow: 0 0 0 6px rgba(47,91,255,.09);
}
.flow__step:last-child.is-in .flow__marker{
  border-color: var(--ember); color: var(--ember);
  box-shadow: 0 0 0 6px rgba(228,98,47,.11);
}

.flow__body{ padding-top:3px; }
.flow__meta{
  display:block; font-family: var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--muted); margin-bottom:10px;
}
.flow__body h3{ font-size: clamp(26px, 3.2vw, 38px); margin-bottom:14px; }
.flow__lead{ font-size:17.5px; max-width:62ch; margin-bottom:18px; }
.flow__list{ list-style:none; padding:0; margin:0 0 22px; }
.flow__list li{
  position:relative; padding-left:24px; margin-bottom:9px;
  font-size:15.5px; color: var(--muted);
}
.flow__list li::before{
  content:''; position:absolute; left:3px; top:9px;
  width:7px; height:7px; border-radius:2px; background: var(--volt); opacity:.45;
}
/* „Rich" variáns (03-as fázis): a tétel nem címke, hanem cím + magyarázat.
   A <b> ezért blokk-szintű vezérsor --fg színnel — a magyarázat marad --muted,
   így a lista végigfutva is olvasható marad, de nem versenyez a `flow__lead`-del. */
.flow__list--rich li{ margin-bottom:15px; max-width:62ch; }
.flow__list--rich li b{
  display:block; margin-bottom:3px;
  font-size:16px; font-weight:600; color: var(--fg);
}
/* „Amit kapsz" — a fázis kézzelfogható eredménye, ezért kap erősebb
   vizuális súlyt: SÖTÉT kártya a világos szekcióban (ugyanaz a kontraszt-
   logika, mint a 03-as dark szekció adatkártyái), jel-színű szegély és
   izzás, és egy saját, KÉSLELTETETT megjelenés.
   A `--pc` a fázis `--p`-jének a második fele (lásd script.js 8. blokk) — így
   előbb áll össze a fázis, és csak utána érkezik a lezárás. */
.flow__out{
  position:relative; margin:0; padding:18px 22px 18px 26px;
  border-radius:10px; max-width:62ch;
  /* Semleges szürke, nem kék-fekete — a --night/--night-2 túl "navy" volt. */
  background: linear-gradient(155deg, #2C2E32, #202226);
  border:1px solid var(--line-d);
  box-shadow: 0 18px 40px rgba(10,13,19,.16);
  /* Fehér, félkövér szövegtörzs — ez a fázis kimenete, a szekció legerősebb
     állítása, ezért nem halkabb (--muted-d), hanem hangsúlyos. */
  font-size:15.5px; color:#FFFFFF; font-weight:500;
  opacity: var(--pc);
  transform: translateX(calc((1 - var(--pc)) * -14px));
}
.flow__out::before{
  content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:2px; background: linear-gradient(180deg, var(--volt), var(--ember));
  box-shadow: 0 0 12px rgba(47,91,255,.55);
}
.flow__out b{
  display:block; margin-bottom:6px;
  font-family: var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:600;
  /* Világosabb kék, mert a sima --volt túl sötét lenne éjfekete alapon —
     ugyanaz a csere, mint a kalkulátor sötét kártyáján. */
  color:#8FA8FF;
}
/* Az utolsó (élesítés) fázisnál a jel már megérkezett — ember-narancs jelöli. */
.flow__step:last-child .flow__out::before{ background: var(--ember); box-shadow: 0 0 12px rgba(228,98,47,.5); }
.flow__step:last-child .flow__out b{ color: var(--ember); }

/* A fázisok lezárása. A 82px = a `.flow__step` rács marker-oszlopa (48px) plusz
   a gap (34px) — így a szöveg pontosan a fázisok szövegoszlopa alá kerül. */
.flow__cta{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  margin: 52px 0 0; padding-left:82px; max-width:78ch;
}
.flow__cta p{ margin:0; flex:1 1 340px; font-size:16.5px; color: var(--muted); }

/* ---------- 05 scroll-vezérelt szövegkiemelés ---------- */
.bigtext{
  font-family: var(--display); font-weight:500;
  /* 2026-08-22: a bigtext a kártya melletti oszlopban ül — a felső határ
     ehhez a szűkebb sávhoz van szabva, nem a teljes szélességhez. */
  font-size: clamp(25px, 3.1vw, 44px); line-height:1.2; letter-spacing:-.03em;
  margin: 4px 0 0;
}
.bigtext .w{ color: rgba(237,239,243,.16); transition: color .32s var(--ease); }
.bigtext .w.is-lit{ color: var(--bg); }
/* A nagy szöveg alatt: balra a két hasáb, jobbra a bizonyíték-kártya.
   `align-items:start`, hogy a kártya ne nyúljon a szöveg magasságára. */
.meres__grid{
  display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:56px;
  align-items:start; margin-top:12px;
}
.meres__main{ min-width:0; }
/* A második állítás UGYANAZ a fokozat, mint a nagy szöveg (`.bigtext`-et is
   visel) — csak egy vonal választja el. Két egyenrangú állítás, nem cím és
   alcím. A szó-kiemelés mindkettőn fut (script.js 9. blokk). */
.meres__after{
  margin:40px 0 0; padding-top:38px; border-top:1px solid var(--line-d);
}

.meres__cols{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.meres__cols--single{ grid-template-columns:1fr; max-width:560px; }
.meres__cols p{ color: var(--muted-d); font-size:16.5px; margin:0; }

/* ---------- 06 gyakori kérdések ----------
   Natív <details> — nyitható JS nélkül, és képernyőolvasóval is működik. */
.faq{ margin-top:44px; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family: var(--display); font-weight:500; font-size:19px; letter-spacing:-.02em;
  transition: color .25s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color: var(--volt); }
/* + jel, ami × -re fordul nyitáskor */
.faq__item summary::after,
.faq__item summary::before{
  content:''; position:absolute; right:8px; top:50%;
  background: var(--muted); transition: transform .35s var(--ease-out), background .25s;
}
.faq__item summary::before{ width:14px; height:1.5px; margin-top:-.75px; }
.faq__item summary::after{ width:1.5px; height:14px; right:14px; margin-top:-7px; }
.faq__item[open] summary{ color: var(--volt); }
.faq__item[open] summary::before,
.faq__item[open] summary::after{ background: var(--volt); }
.faq__item[open] summary::after{ transform: rotate(90deg); }
.faq__item p{
  margin:0; padding:0 60px 26px 0; max-width:72ch;
  font-size:16px; color: var(--muted);
}
.faq__item p b{ color: var(--fg); }
.faq__item p em{ font-style:normal; color: var(--fg); }

/* ---------- 03 esettanulmányok — balról jobbra bővülő sáv ----------
   Egy vízszintes sáv: minden esettanulmány egy kártya, időrendben, és a
   végén mindig egy szaggatott „következő" hely. A kártyák fölött a jel
   vonala fut — a gerinc és a 01-es folyamat nyelve: ami már kész, annak
   a csomópontja narancs (a jel megérkezett), a következőé még üres.

   A kártya a 02-es KSH-kártya osztályait viseli (`.proof__card`, `.proof__det`,
   `.proof__meta`) — ugyanaz a sötét kártya és ugyanaz a lenyitás. Az utolsó
   tétel itt a „Megtérülés": a `.proof__meta div:last-child` narancs
   jelölése ugyanúgy kiemeli, mint a KSH-kártyán a korlátot.

   A sáv `overflow-x:auto` + scroll-snap: amíg kifér, csak áll; ha már nem
   (telefonon azonnal, desktopon a 3. kártya körül), húzható, és megjelennek
   a nyilak (script.js 14. blokk). */
.cases__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:34px;
}
.cases__head .h2{ margin-bottom:0; }
.cases__nav{ display:flex; gap:8px; flex:none; }
.cases__nav[hidden]{ display:none; }
.cases__btn{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  font-family: var(--mono); font-size:16px; color: var(--fg);
  background: transparent; border:1px solid var(--line);
  transition: border-color .25s, background .25s, color .25s, transform .3s var(--ease-out);
}
.cases__btn:hover:not(:disabled){ border-color: var(--fg); transform: translateY(-2px); }
.cases__btn:disabled{ opacity:.35; cursor:default; }

.cases{
  --w: 380px; --gap: 24px;
  list-style:none; margin:0; display:flex; align-items:flex-start; gap: var(--gap);
  overflow-x:auto; scroll-snap-type: x mandatory; scroll-behavior:smooth;
  /* A felső padding a csomópont fényudvarának kell, az alsó a kártya
     árnyékának — a görgethető doboz mindkét irányban vág. */
  padding: 8px 6px 30px; scroll-padding-left: 6px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.cases:focus-visible{ outline-offset:6px; }
.cases__item{
  position:relative; flex: 0 0 var(--w);
  padding-top:36px; scroll-snap-align:start;
}

/* Csomópont minden elem fölött. Kész esettanulmány = narancs. */
.cases__item::after{
  content:''; position:absolute; left:0; top:0; z-index:1;
  width:14px; height:14px; border-radius:50%; box-sizing:border-box;
  background: var(--ember); border:1.5px solid var(--ember);
  box-shadow: 0 0 0 5px rgba(228,98,47,.14);
}
.cases__item.is-next::after{
  background: var(--bg-2); border:1.5px dashed var(--muted-d); box-shadow:none;
}
/* Szakasz az ELŐZŐ csomóponttól ehhez: az elemek egyforma szélesek, ezért a
   `100%` (az elem saját szélessége) + gap pontosan az előző csomópontig ér.
   Kész → kész között teli jel, a „következő" felé szaggatott. Reveal-kor
   balról jobbra rajzolódik ki (clip-path, mint a gerincnél). */
.cases__item + .cases__item::before{
  content:''; position:absolute; top:6px; height:2px;
  left: calc(14px - 100% - var(--gap)); width: calc(100% + var(--gap) - 14px);
  background: linear-gradient(90deg, var(--volt), var(--ember));
  clip-path: inset(0 100% 0 0);
  transition: clip-path .7s linear .3s;
}
.cases__item.is-next::before{
  background: repeating-linear-gradient(90deg, var(--muted-d) 0 6px, transparent 6px 12px);
}
.cases.is-in .cases__item::before{ clip-path: inset(0); }

/* A kártya: rövid felül, a részlet a lenyitásban. Egyforma minimum-magasság,
   hogy a „következő" hely ne legyen törpe a valódi mellett. */
.case{ min-height:280px; }
.case__client{
  margin:14px 0 10px; color: var(--bg);
  font-size: clamp(26px, 2.6vw, 32px); line-height:1.1;
}
.case__line{ margin:0 0 22px; font-size:16px; line-height:1.5; color: rgba(237,239,243,.82); }
/* A lenyitás tartalma: rövid pontok, ugyanaz a négyzetes jelölő, mint a 01-es
   folyamat listáin — csak sötét alapra világosítva (#8FA8FF, mint a summary). */
.case__list{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:10px; }
.case__list li{
  position:relative; padding-left:20px;
  font-size:14.5px; line-height:1.55; color: rgba(237,239,243,.82);
}
/* Bélyegkép a valódi workflow-ról, a lenyitásban. A kép maga is sötét
   (n8n-szerkesztő), ezért kap egy vékony keretet — enélkül beleolvadna a
   kártyába. Hoverre kicsit közelebb jön; kattintásra nagyban nyílik. */
.case__shot{
  display:block; position:relative; margin:0 0 22px;
  border-radius:10px; overflow:hidden; border:1px solid var(--line-d);
  cursor:zoom-in; text-decoration:none;
}
.case__shot img{
  display:block; width:100%; height:auto; opacity:.86;
  transition: transform .5s var(--ease-out), opacity .3s;
}
.case__shot:hover img{ transform: scale(1.04); opacity:1; }
.case__shot span{
  position:absolute; left:0; right:0; bottom:0; padding:24px 12px 9px;
  background: linear-gradient(180deg, transparent, rgba(10,13,19,.9));
  font-family: var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--bg);
}
.case__shot span i{ font-style:normal; color:#8FA8FF; }

/* A nagyított kép: natív <dialog>, így az Esc, a fókuszcsapda és a háttér
   letiltása a böngészőtől jön. A dialógus maga átlátszó, nulla paddinggel —
   így a kép melletti kattintás a ::backdrop-ra esik, és bezár. */
.shot{
  padding:0; border:0; background:transparent; overflow:visible;
  max-width:94vw; max-height:90vh;
}
.shot::backdrop{ background: rgba(10,13,19,.84); backdrop-filter: blur(6px); }
.shot img{
  display:block; max-width:94vw; max-height:90vh; width:auto; height:auto;
  border-radius:12px; border:1px solid var(--line-d);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.shot__close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:20px; line-height:1;
  background: var(--night-2); color: var(--bg); border:1px solid var(--line-d);
  transition: background .25s, border-color .25s;
}
.shot__close:hover{ background: var(--volt); border-color: var(--volt); }

/* A megtérülés második bekezdése: a forint-összeg a kártya csattanója, ezért
   félkövér és meleg — ugyanaz a világos narancs (#FF8A5C), amibe a záró
   manifesztó gradiense fut, mert a sima --ember sötét alapon túl tompa. */
.case__save{ display:block; margin-top:10px; }
.case__save b{ font-weight:700; color:#FF8A5C; }
.case__list li::before{
  content:''; position:absolute; left:2px; top:8px;
  width:6px; height:6px; border-radius:2px; background:#8FA8FF; opacity:.7;
}

/* A „következő" hely: világos, szaggatott — nem kártya, hanem foglalt hely.
   Egész felülete link, ugyanoda, ahová minden CTA az oldalon. */
.case--next{
  display:flex; flex-direction:column; box-sizing:border-box;
  padding:30px 28px; border-radius:16px; text-decoration:none;
  border:1.5px dashed rgba(10,13,19,.22); color: var(--fg);
  transition: border-color .3s, background .3s;
}
.case--next:hover{ border-color: var(--volt); background: rgba(47,91,255,.04); }
.case__kicker{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color: var(--muted);
}
.case__nextTitle{
  margin:14px 0 10px; font-family: var(--display); font-weight:500;
  font-size: clamp(22px, 2.2vw, 26px); line-height:1.15; letter-spacing:-.02em;
}
.case__nextText{ font-size:15.5px; line-height:1.55; color: var(--muted); }
.case__go{
  margin-top:auto; padding-top:22px;
  font-size:15px; font-weight:500; color: var(--fg);
}
.case__go i{ font-style:normal; display:inline-block; color: var(--volt); transition: transform .3s var(--ease-out); }
.case--next:hover .case__go i{ transform: translateX(4px); }

/* ---------- rólam ----------
   Egyszemélyes szolgáltatónál az arc nem opcionális: a hallgató-státusz
   akkor erő, ha ő mondja ki először. */
/* 2026-10-05: két oszlop — balra a Rólam-kártya, jobbra a következő lépés.
   A kártya keskenyebb sáv, mint a CTA: az ember a kontextus, a döntés a
   jobb oldalon születik. `align-items:center`, hogy a két blokk egymás
   mellett egyensúlyban álljon, akármelyik a hosszabb. */
.contact{
  display:grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  /* 250px-es rés széles kijelzőn (~1830px-től), lefelé fokozatosan szűkül,
     1100px körül 72px-en áll meg — keskenyebb képernyőn a nagy rés a jobb
     oszlopot túl keskenyre nyomná. */
  gap: clamp(72px, calc(30vw - 300px), 250px); align-items:center;
}
/* A 250px-es rés mellett a globális 1220px-es konténerben a jobb oszlop
   ~400px-re szorulna. Ezért ez a szekció JOBBRA 180px-szel szélesebb — a bal
   széle viszont ugyanott marad, ahol a többi szekcióé (ugyanaz a margó-
   képlet, mint a `margin:auto` középre zárásnál), így a gerinc-vonal nem
   törik meg. `width:auto`, különben a bal margó túltolná a lapon. */
#kapcsolat > .wrap{
  width:auto; max-width: calc(var(--wrap) + 180px);
  margin-left: max(0px, calc((100% - var(--wrap)) / 2)); margin-right:0;
}
/* A szekció-h2 globálisan 58px-ig nő — a félszélességű oszlopban ez négy
   sorra törne, ezért itt kisebb a plafon. */
.contact__main .h2{ font-size: clamp(32px, 3.6vw, 48px); }

.me{
  padding:30px 30px 32px;
  background: var(--surface); border:1px solid var(--line); border-radius:16px;
}
.me__label{
  display:block; margin-bottom:16px;
  font-family: var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color: var(--muted);
}
.me__head{ display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.me__mark{
  flex:none; width:52px; height:52px; border-radius:14px;
  background: linear-gradient(135deg, var(--volt), var(--ember));
}
.me__name{
  margin:0 0 3px; font-family: var(--display); font-weight:600;
  font-size:19px; letter-spacing:-.02em;
}
.me__role{ margin:0; font-size:14.5px; color: var(--muted); }
.me__text{ margin:0 0 26px; font-size:15.5px; color: var(--fg); max-width:62ch; }
/* Az erősségek: ugyanaz a négyzetes jel-pötty, mint a 01-es folyamat
   listáin — nem chip, mert egy keretes címke kattinthatónak látszana. */
.me__label + .me__list{ margin-top:-4px; }
.me__list{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.me__list li{ position:relative; padding-left:22px; font-size:15.5px; font-weight:500; }
.me__list li::before{
  content:''; position:absolute; left:2px; top:9px;
  width:7px; height:7px; border-radius:2px; background: var(--volt); opacity:.6;
}
.me__list li:last-child::before{ background: var(--ember); opacity:.8; }

/* Az e-mail menükülőút a 05-ös szekcióban — szándékosan szöveg és nem gomb:
   egyetlen elsődleges CTA van az oldalon, ezzel nem versenyezhet. */
.cta__alt{ margin:20px 0 0; font-size:15px; color: var(--muted); }
.cta__alt a{ color: var(--fg); text-decoration:none; border-bottom:1px solid var(--line); }
.cta__alt a:hover{ border-bottom-color: var(--fg); }


/* ---------- záró manifesztó ----------
   A világos CTA után sötétbe vált, és onnan folytatja a footer — így az oldal
   sötéten nyílik (intro) és sötéten zárul.

   A záró mondat ugyanazt a --volt → --ember gradienst kapja, mint a hero
   „Vezess te." szava, csak sötét háttérre világosítva: az oldal két vége
   ugyanazzal a jellel van megjelölve. */
.closer{
  background: var(--night); color: var(--bg);
  padding: 120px 0 104px;
  text-align:center; position:relative; overflow:hidden;
}
/* Halvány fényudvar alulról — ugyanaz a jel, ami az intróban becsapódik. */
.closer::before{
  content:''; position:absolute; left:50%; bottom:-42%;
  width:min(920px, 130%); height:600px; transform:translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(47,91,255,.22), transparent 68%);
  pointer-events:none;
}
.closer > .wrap{
  position:relative;
  /* A globális .wrap 92px bal paddingje a gerincnek szól; középre zárt
     szövegnél ez néhány képponttal jobbra tolná a blokkot. */
  padding-left:40px;
}
.closer__lead,
.closer__end{
  font-family: var(--display); font-weight:500;
  font-size: clamp(25px, 3.4vw, 44px); line-height:1.2; letter-spacing:-.03em;
  margin:0;
}
.closer__lead{ margin-bottom:44px; }
.closer__lead span{ color:#8FA8FF; }
.closer__end em{
  font-style:normal;
  background: linear-gradient(100deg, #8FA8FF, #FF8A5C);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* A második sor egy hajszállal később úszik be — a mondat így válasznak hat,
   nem a bekezdés folytatásának. */
.closer__end.reveal{ transition-delay:.18s; }

/* ---------- footer ---------- */
.foot{ background: var(--night); color: var(--muted-d); padding:56px 0; }
.foot__inner{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.foot__brand{
  display:flex; align-items:center; gap:9px;
  font-family: var(--display); font-size:19px; font-weight:600; color: var(--bg); margin:0 0 5px;
}
.foot__brand .nav__mark{ background-image: url('assets/handoff-mark-light.png'); }
.foot__small{ font-size:14px; margin:0; }
.foot__links{ display:flex; gap:24px; }
.foot__links a,
.foot__btn{ font-family: var(--mono); font-size:12px; color: var(--muted-d); text-decoration:none; }
/* A süti-beállítás <button>, mert nem navigál — de úgy néz ki, mint a szomszéd linkek. */
.foot__btn{ background:none; border:0; padding:0; cursor:pointer; }
.foot__links a:hover,
.foot__btn:hover{ color: var(--bg); }

/* ============================================================
   ALOLDAL (kapcsolat.html)
   ============================================================ */

/* A főoldal bal oldali 92px-es behúzása a gerincnek szól. Aloldalon nincs
   gerinc, tehát nincs mit kikerülni — a tartalom szimmetrikusan ül. */
.page-sub .wrap{ padding-left:40px; }
.page-sub .nav{ padding-left:40px; }
.page-sub .nav.is-stuck{ padding-left:40px; }

/* A fix nav alá csúszna az első szekció — az aloldalnak nincs hero-ja,
   ami ezt elnyelné. */
#urlap{ padding-top:150px; }
#urlap .h2{ margin-bottom:16px; }
.urlap__head{ display:flex; align-items:flex-start; gap:40px; }
.urlap__cta{ flex:none; margin-top:6px; gap:8px; }
.urlap__cta-arrow{ flex:none; }
.urlap__intro{ flex:1; }

/* A kapcsolat oldal sötét szekcióval indul (nincs felette világos hero),
   a fix nav alapból sötét szöveget feltételez — amíg nem görgetünk le
   (.is-stuck), a nav szövege világosra vált, hogy látszódjon a sötét alapon. */
.page-sub .nav:not(.is-stuck) .nav__brand,
.page-sub .nav:not(.is-stuck) .nav__links a{ color: var(--bg); }
.page-sub .nav:not(.is-stuck) .nav__brand em{ color: var(--muted-d); }
.page-sub .nav:not(.is-stuck) .nav__mark{ background-image: url('assets/handoff-mark-light.png'); }
.page-sub .nav:not(.is-stuck) .btn--solid{ background: var(--bg); color: var(--fg); }
.page-sub .nav:not(.is-stuck) .btn--solid:hover{ background: var(--volt); color:#fff; }

/* ---------- dokumentum-aloldal (adatvedelem.html) ----------
   A `.page-sub` világos navja a kapcsolat-oldal SÖTÉT fejlécéhez van szabva.
   Ez az oldal világos felülettel indul (hosszú jogi szöveget világoson
   kényelmesebb olvasni), ezért a `.page-doc` visszaadja a sötét navot. */
.page-doc .nav:not(.is-stuck) .nav__brand,
.page-doc .nav:not(.is-stuck) .nav__links a{ color: var(--fg); }
.page-doc .nav:not(.is-stuck) .nav__brand em{ color: var(--muted); }
.page-doc .nav:not(.is-stuck) .nav__mark{ background-image: url('assets/handoff-mark-black.png'); }
.page-doc .nav:not(.is-stuck) .btn--solid{ background: var(--fg); color: var(--bg); }
.page-doc .nav:not(.is-stuck) .btn--solid:hover{ background: var(--volt); color:#fff; }

/* A fix nav alá csúszna az első szekció — ugyanaz a helyzet, mint az űrlapnál. */
#adatvedelem{ padding-top:150px; }

.doc{ margin-top:44px; max-width:74ch; }
.doc h2{
  font-family: var(--display); font-weight:500;
  font-size: clamp(21px, 2.2vw, 27px); line-height:1.2; letter-spacing:-.02em;
  margin: 54px 0 16px; padding-top:26px; border-top:1px solid var(--line);
}
.doc h3{
  font-family: var(--display); font-weight:600; font-size:17.5px;
  letter-spacing:-.01em; margin: 32px 0 12px; color: var(--fg);
}
.doc p{ margin:0 0 16px; font-size:16px; line-height:1.68; color: var(--muted); }
.doc p b, .doc li b, .doc td b{ color: var(--fg); font-weight:600; }
.doc a{ color: var(--fg); text-decoration:none; border-bottom:1px solid var(--line); }
.doc a:hover{ color: var(--volt); border-bottom-color: var(--volt); }
.doc ul{ margin:0 0 20px; padding-left:20px; }
.doc li{ font-size:16px; line-height:1.68; color: var(--muted); margin-bottom:9px; }

.doc table{
  width:100%; border-collapse:collapse; margin:4px 0 24px;
  font-size:15px; color: var(--muted);
}
.doc th, .doc td{
  text-align:left; vertical-align:top; padding:12px 16px 12px 0;
  border-bottom:1px solid var(--line-soft); line-height:1.55;
}
.doc thead th{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--muted-d);
  border-bottom:1px solid var(--line); padding-bottom:9px;
}
.doc tbody th{ color: var(--fg); font-weight:600; width:32%; }

/* Amire külön oda kell figyelni — a meleg akcent a jelölése, ugyanaz a nyelv,
   mint a 02-es kártya „amit nem mond ki" tételénél. */
.doc__warn{ border-left:2px solid rgba(228,98,47,.5); padding-left:16px; }

.doc__meta{
  font-family: var(--mono) !important; font-size:12px !important;
  letter-spacing:.04em; color: var(--muted-d) !important;
}

/* ---------- űrlap ---------- */
.form{ margin-top:40px; }
/* A fieldset alapértelmezett kerete és belső padding-je itt csak zaj —
   a csoportosítást a legend és a térköz hordozza. */
.form__set{ border:0; padding:0; margin:0 0 34px; }
.form__set legend{
  padding:0; margin-bottom:16px;
  font-family: var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--muted);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form__row:last-child{ margin-bottom:0; }

.field-t{ display:flex; flex-direction:column; margin-bottom:18px; }
.field-t:last-child{ margin-bottom:0; }
.form__row .field-t{ margin-bottom:0; }
.field-t label{ font-size:14.5px; font-weight:500; margin-bottom:7px; }
.req{ color: var(--ember); }
.opt{ font-weight:400; color: var(--muted); font-size:13px; }

.field-t input,
.field-t select,
.field-t textarea{
  font-family: var(--sans); font-size:15.5px; color: var(--fg);
  background: var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; width:100%;
  transition: border-color .2s, box-shadow .2s;
}
.field-t textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.field-t input:focus,
.field-t select:focus,
.field-t textarea:focus{
  outline:none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(47,91,255,.12);
}
.field-t__hint{ font-size:13px; color: var(--muted); margin-top:6px; }

/* Hibaüzenet: csak akkor foglal helyet, ha van mit mondania — különben minden
   mező alatt ott lenne egy üres sor. */
.field-t__err{ font-size:13px; color: var(--ember); margin-top:6px; display:none; }
.field-t.is-bad .field-t__err{ display:block; }
.field-t.is-bad input,
.field-t.is-bad select,
.field-t.is-bad textarea{ border-color: var(--ember); }

/* Spam-csapda: a képernyőn kívül, de NEM `display:none` — egyes botok
   kihagyják a rejtett mezőket, ez így viszont kitöltésre csábít. */
.form__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__bar{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form__bar .btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.form__note{ margin:0; font-size:14.5px; color: var(--muted); }
.form__note.is-ok{ color: var(--ok); font-weight:500; }
.form__note.is-bad{ color: var(--ember); font-weight:500; }

/* Sikeres küldés után az űrlap helyére egy visszaigazolás kerül. */
.form__done{
  padding:34px 32px; border-radius:12px;
  background: var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--ok);
}
.form__done h3{ font-size:22px; margin-bottom:10px; }
.form__done p{ color: var(--muted); font-size:15.5px; margin:0 0 .8em; }
.form__done p:last-child{ margin-bottom:0; }

/* ---------- űrlap SÖTÉT szekcióban ----------
   Az űrlap a `.section--dark` alatt ül, tehát a mezők is megfordulnak.
   Nem új komponens: ugyanazok az osztályok, csak a színszerepek cserélődnek. */
.section--dark .form__set legend{ color: var(--muted-d); }
.section--dark .field-t label{ color: var(--bg); }
.section--dark .opt{ color: var(--muted-d); }
.section--dark .field-t__hint{ color: var(--muted-d); }

.section--dark .field-t input,
.section--dark .field-t select,
.section--dark .field-t textarea{
  background: var(--night-2); border-color: var(--line-d); color: var(--bg);
  /* A `color-scheme` miatt a natív legördülő lista és a caret is sötét lesz —
     ennélkül a select kinyitva vakító fehér doboz maradna a sötét mező alatt. */
  color-scheme: dark;
}
.section--dark .field-t input::placeholder,
.section--dark .field-t textarea::placeholder{ color: var(--muted); }
.section--dark .field-t input:focus,
.section--dark .field-t select:focus,
.section--dark .field-t textarea:focus{
  border-color: var(--volt); box-shadow: 0 0 0 3px rgba(47,91,255,.25);
}

.section--dark .form__note{ color: var(--muted-d); }
.section--dark .form__done{
  background: var(--night-2); border-color: var(--line-d); border-left-color: var(--ok);
}
.section--dark .form__done h3{ color: var(--bg); }
.section--dark .form__done p{ color: var(--muted-d); }
.section--dark .form__done a{ color:#8FA8FF; }

/* ---------- Cal.com beágyazás ---------- */
.cal-embed{
  margin-top:36px; min-height:640px;
  border-radius:12px; overflow:hidden;
  background: var(--surface); border:1px solid var(--line);
}

/* ---------- scroll-reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- reszponzív ---------- */
@media (max-width: 1100px){
  .wrap, .hero__inner, .nav{ padding-left:40px; }
  /* A `.nav.is-stuck` erősebb szelektor, mint a `.nav` — külön kell
     felülírni, különben görgetés után visszajön a gerincnek szánt 92px. */
  .nav.is-stuck{ padding-left:40px; }
  .spine{ display:none; }
  .hero__meta{ left:40px; }
  /* Nincs már üres oldalsáv, amit a rács vagy a jelfonat kitöltene —
     a szöveg alá/mögé kerülne. */
  #folyamat::before{ display:none; }
  #folyamat > .wrap{ padding-left:40px; }
  .flow__art{ display:none; }
}
@media (max-width: 1000px){
  .nav{ padding:18px 24px; gap:20px; }
  /* 2026-10-05 javítva: enélkül a ragadós nav 375px-en ~120px-szel
     kilógott (a CTA-gomb levágva). */
  .nav.is-stuck{ padding:13px 24px; }
  .nav__links{ display:none; }
  /* Desktopon a linkek `margin-left:auto`-ja tolja jobbra a gombot — ha a
     linkek eltűnnek, ezt a gombnak kell átvennie. */
  .nav__cta{ margin-left:auto; }
  .wrap, .hero__inner{ padding-left:24px; padding-right:24px; }
  .page-sub .wrap, .page-sub .nav, .page-sub .nav.is-stuck{ padding-left:24px; }
  #folyamat > .wrap{ padding-left:24px; }
  .hero__meta{ left:24px; right:24px; }
  .section{ padding:88px 0; }
  .calc{ grid-template-columns:1fr; gap:44px; }
  .flow__step{ grid-template-columns:38px 1fr; gap:0 20px; padding-bottom:56px; }
  .flow__marker{ width:38px; height:38px; font-size:12px; }
  .flow__rail{ left:18px; }
  /* Együtt mozog a szűkülő rácsal: 38 + 20 = 58. */
  .flow__cta{ padding-left:58px; gap:20px; }
  .inputs{ grid-template-columns:1fr 1fr; }
  .leap__grid{ grid-template-columns:1fr; gap:26px; }
  .check{ padding:26px 22px; }
  .meres__cols{ grid-template-columns:1fr; gap:20px; }
  .meres__grid{ grid-template-columns:1fr; gap:38px; }
  /* Egy oszlopban a Rólam-kártya jön előbb: előbb az ember, aztán a kérés. */
  .contact{ grid-template-columns:1fr; gap:48px; }
  .me{ max-width:560px; }
}
@media (max-width: 620px){
  body{ font-size:16px; }
  .hero{ padding:120px 0 70px; }
  .hero__viz{ opacity:.4; }
  .hero__actions .btn{ width:100%; }
  .hero__lead{ font-size:18px; }
  /* Telefonon a lánc függőlegesbe fordul, és a nyilak vele együtt: vízszintes
     nyíl a sortörés után a konténeren kívülre lógna. */
  .chain{ flex-direction:column; align-items:flex-start; gap:30px; }
  .chain li{ font-size:20px; }
  .chain li + li::before{ left:7px; top:-23px; width:2.5px; height:16px; }
  .chain li + li::after{ left:3px; top:-13px; margin-top:0; transform: rotate(135deg); }
  .inputs{ grid-template-columns:1fr; }
  .calc__out{ grid-template-columns:1fr; padding:26px; }
  .calc__presets .preset{ width:100%; }
  .proof__card{ padding:26px 22px; }
  .proof__num{ min-height:0; }
  .proof__num span{ max-width:none; }
  .me{ padding:26px 22px 28px; }
  .faq__item p{ padding-right:20px; }
  .foot__inner{ flex-direction:column; }
  /* Telefonon a folyamat-vonal alatti behúzás elveszi a szöveg helyét. */
  .flow__cta{ padding-left:0; }
  .flow__cta .btn{ width:100%; }
  /* Az űrlap egyoszlopossá esik: két mező egymás mellett 620px alatt olvashatatlan. */
  .form__row{ grid-template-columns:1fr; gap:0; }
  .form__row .field-t{ margin-bottom:18px; }
  .form__bar{ flex-direction:column; align-items:stretch; }
  .form__bar .btn{ width:100%; }
  .subhero{ padding-top:120px; }
  .cal-embed{ min-height:560px; }
  /* Telefonon a kártya a sáv 84%-a: a következő elem széle kilátszik, így
     látszik, hogy a sáv húzható. */
  .cases{ --w: 84%; --gap: 16px; align-items:stretch; }
  /* Itt egyszerre egy kártya látszik, ezért egyforma magasra nyújtjuk őket
     (desktopon nem: ott a lenyitott kártya mellett a „következő" is
     felnyúlna). */
  .cases__item{ display:flex; flex-direction:column; }
  .cases__item > .case{ flex:1; }
  .case--next{ padding:26px 22px; }
  /* A nav telefonon: logó + név + gomb együtt ~450px volt, 375px-en a gomb
     le volt vágva. Kisebb gomb és rés — a felirat marad, a cél is. */
  .nav, .nav.is-stuck{ gap:12px; }
  .nav .btn{ padding:10px 14px; font-size:14px; }
}
/* A legkeskenyebb telefonokon a „Systems" a láblécben él tovább — a nav-ban
   a gomb fontosabb, mint a név második fele. */
@media (max-width: 420px){
  .nav__brand em{ display:none; }
}

/* ---------- akadálymentesség ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  /* A scrub kimarad: minden fázis és a kártyája is rögtön a végállapotában.
     (A script.js 8. blokkja is korán kilép reduceMotion mellett.) */
  .reveal,.flow__step,.flow__out{ opacity:1; transform:none; }
  .hero__title .line > span{ transform:none; }
  /* A táguló áram-gyűrű teljesen elmarad — a szó a gradiens kitöltést kapja. */
  .hero__title em::after{ display:none; }
  .bigtext .w{ color: var(--bg); }
  /* A globális szabály csak a tartamot nullázza, a késleltetést nem —
     enélkül az esettanulmány-sáv vonala 0,3 mp-ig üresen várna. */
  .cases__item::before{ transition-delay:0s !important; }
  .intro{ display:none; }
}
:focus-visible{ outline:2px solid var(--volt); outline-offset:3px; }

/* ============================================================
   SÜTI-SÁV (script.js 16. blokk)
   Csak a Cal.com naptár miatt van: saját analitikai / hirdetési süti
   nincs az oldalon. Az intro (z-index 200) alatt ül, így az első
   betöltéskor az animáció után tűnik elő.
   ============================================================ */
.consent{
  position: fixed; left: 50%; bottom: 20px; z-index: 150;
  width: min(1100px, calc(100% - 32px));
  transform: translate(-50%, 0);
  display: flex; align-items: center; gap: 24px;
  padding: 16px 18px 16px 22px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(10,13,19,.16);
  animation: consentIn .5s var(--ease-out) both;
}
.consent[hidden]{ display: none; }
.consent__text{ margin: 0; flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.consent__text b{ color: var(--fg); }
.consent__text a{ color: var(--volt); }
.consent__actions{ display: flex; gap: 10px; flex-shrink: 0; }
.consent .btn{ padding: 11px 20px; font-size: 14px; }
@keyframes consentIn{ from{ opacity: 0; transform: translate(-50%, 16px); } }

/* A naptár helye, amíg nincs hozzájárulás */
.cal-gate{
  min-height: 640px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  padding: 32px; text-align: center;
}
.cal-gate p{ margin: 0; max-width: 46ch; color: var(--muted); line-height: 1.6; }
.cal-gate__actions{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 760px){
  .consent{ flex-direction: column; align-items: stretch; gap: 14px; bottom: 12px; padding: 16px; }
  .consent__actions .btn{ flex: 1; justify-content: center; }
  .cal-gate{ min-height: 420px; }
}
@media (prefers-reduced-motion: reduce){
  .consent{ animation: none; }
}