/*
 * Váltópont – landing v1.6 (probléma → megoldás felépítés; a vizuális alap a v1.4.1–v1.5.2 „A Váltó” dizájn)
 * Dark premium + clean conversion: éjszakai, mozis nyitás; szekciónként változó fényintenzitás;
 * egy világos ellenpont a döntési blokkban; hajnali zárás. Navy–narancs arculat, eredeti logó.
 * Betűk: Archivo Variable (súly 100–900, szélesség 62–125%) és IBM Plex Mono 500, saját tárhelyről (SIL OFL 1.1).
 * v1.4.1: svh-tartalék (--svh); a hero felső térközének alsó korlátja (--hero-felso-min); álló és fekvő nézet
 * szerint szétválasztott töréspontok; olvasható ajánlói címke a fejlécben; a sticky sáv mért magassága
 * (--sticky-mag); az állomások idővonala egy helyen (1280 px alatt egy oszlop, a fényúttól szabadon; 1280 px-től két oszlop).
 * v1.5: tartalmi pontosítás; a CSS-ben csak a hero-kártya változott (a fájl végén): az ajánlói közlés és a lemondási
 * sor mobilon és tableten is 13 px, valamint két kis térköz-korrekció. A látvány, az animációk és a töréspontok változatlanok.
 */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(assets/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(assets/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ej: #040913;
  --ej-2: #060f1e;
  --grafit: #0a1424;
  --grafit-2: #0d1a2e;
  --navy: #0d2038;
  --navy-2: #14284b;
  --navy-3: #1b3560;
  --narancs: #f28c28;
  --narancs-vil: #ff9a3c;
  --narancs-halvany: #ffd9a0;
  --feher: #f7f9fc;
  --kek-halvany: #eaf1fa;
  --szoveg: #e6edf7;
  --szoveg-2: #c0cde0;
  --szoveg-3: #93a6c3;
  --vonal: rgba(159, 182, 214, .15);
  --vonal-2: rgba(159, 182, 214, .24);
  --cim: 'Archivo Variable', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --szel: clamp(20px, 6.5vw, 104px);
  --tarto: 1180px;
  --kifut: cubic-bezier(.2, .7, .2, 1);
  --ugro: cubic-bezier(.3, 1.4, .5, 1);
  --kartya-arnyek: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -32px rgba(0, 0, 0, .75);
  /* v1.4.1: nézetmagasság-egység tartalékkal – az svh-t nem ismerő böngésző a vh-t kapja (@supports lent) */
  --svh: 1vh;
  interpolate-size: allow-keywords;
}
@supports (height: 1svh) {
  :root { --svh: 1svh; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ej);
  color: var(--szoveg);
  font-family: var(--cim);
  font-size: 1.0625rem;
  font-weight: 420;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-family: var(--cim); }

p { margin: 0; }

:focus-visible { outline: 3px solid var(--narancs-halvany); outline-offset: 3px; border-radius: 6px; }

.ugro {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  padding: 10px 14px; border-radius: 10px;
  background: var(--feher); color: var(--navy); font-weight: 700; text-decoration: none;
}
.ugro:focus { top: 12px; }

.tarto { width: min(100% - 2 * var(--szel), var(--tarto)); margin-inline: auto; position: relative; }
.tarto-keskeny { width: min(100% - 2 * var(--szel), 860px); }

/* ======================================================================
   Fejléc: mobilon a hero tetején áll; asztalin rögzített, görgetéskor üvegsáv
   ====================================================================== */
.fejlec { position: absolute; inset: 0 0 auto 0; z-index: 40; }
.fejlec-belso {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px 0;
}
.marka { display: inline-flex; align-items: center; gap: 10px; }
.marka-logo {
  width: 42px; height: 42px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(242, 140, 40, .28), 0 8px 26px rgba(242, 140, 40, .22);
}
.marka-nev { font-weight: 800; font-size: 1.1875rem; letter-spacing: -.01em; color: var(--feher); }
.marka-pont { color: var(--narancs); }

.fejlec-cta { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fejlec-cta small { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--szoveg-3); }
/* v1.4.1: mobilon és tableten a jelenet sínjei a címke mögött futnak – visszafogott, sötét alap tartja olvashatónak */
@media (max-width: 959.98px) {
  .fejlec-cta small {
    /* 14 px-es sor + 2 px belső tér = a v1.4-es 16 px-es sor: a fejléc magassága és a logó helye nem változik;
       a negatív oldalsó margó miatt a háttér szélessége sem tolja el a fölötte álló gombot (keskeny mobilon sem) */
    padding: .5px 8px 1.5px; margin-inline: -8px; border-radius: 999px; line-height: 14px;
    background: rgba(4, 9, 19, .82);
    /* a lágy árnyék lefelé és oldalra esik: a fölötte álló gomb peremét nem sötétíti */
    box-shadow: 0 6px 12px -2px rgba(4, 9, 19, .5);
    color: var(--szoveg-2);
  }
}
.gomb-kicsi {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid rgba(242, 140, 40, .85);
  background: rgba(4, 9, 19, .55);
  color: var(--narancs-halvany); font-weight: 700; font-size: .875rem; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.gomb-kicsi:hover { background: var(--narancs); color: var(--navy); }

/* ======================================================================
   Közös elemek: CTA, közlések, címkék, szakaszfejek
   ====================================================================== */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffa552 0%, var(--narancs) 100%);
  color: var(--navy);
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.005em; line-height: 1.2; text-decoration: none; text-align: center;
  box-shadow: 0 14px 34px -10px rgba(242, 140, 40, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta::after {
  content: ""; width: 22px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h19M14 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h19M14 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 18px 42px -10px rgba(242, 140, 40, .75), inset 0 1px 0 rgba(255, 255, 255, .45); }
.cta:hover::after { transform: translateX(3px); }
.cta:focus-visible { outline-color: var(--feher); outline-offset: 4px; border-radius: 999px; }

.cta-note { font-size: .8125rem; line-height: 1.5; color: var(--szoveg-3); }
.cta-note small { font-size: inherit; }
.cta-note strong { color: var(--szoveg-2); font-weight: 700; }

.cimke {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--szoveg-3);
}
.cimke span {
  display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px;
  border: 1px solid rgba(242, 140, 40, .55); border-radius: 999px; color: var(--narancs-vil); letter-spacing: .08em;
}
.cimke-vilagos { color: #4a5f80; }
.cimke-vilagos span { color: #a4520f; border-color: rgba(164, 82, 15, .5); }

.szakasz { position: relative; padding: clamp(56px, 7.2vw, 100px) 0; isolation: isolate; }
.szakasz-fej { max-width: 760px; margin-bottom: clamp(28px, 3.6vw, 48px); }
/* a szekciók fényfoltjai a szélek előtt elhalványulnak, így nincs éles varrat két szekció között */
.szakasz::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--fenyfolt, none);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.szakasz h2 {
  font-weight: 820; font-stretch: 86%;
  font-size: clamp(2.125rem, 1.25rem + 2.9vw, 3.75rem);
  line-height: 1.02; letter-spacing: -.022em; color: var(--feher);
  text-wrap: balance;
}
.szakasz-bevezeto { margin-top: 20px; max-width: 40em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--szoveg-2); }

.ikon {
  display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; flex: none;
  background: radial-gradient(120% 120% at 30% 20%, rgba(242, 140, 40, .26), rgba(242, 140, 40, .05) 60%), rgba(255, 255, 255, .03);
  border: 1px solid rgba(242, 140, 40, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px -14px rgba(242, 140, 40, .6);
}
.ikon svg { width: 30px; height: 30px; fill: none; stroke: var(--kek-halvany); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ikon .ikon-ki { stroke: var(--narancs-vil); }

/* ======================================================================
   1. HERO – a jelenet és a nyitás
   ====================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: calc(100 * var(--svh));
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: #050b16;
  --jelenet-mag: min(calc(100vw * 430 / 390), calc(60 * var(--svh)));
  /* v1.4.1: a szöveg ennyivel lóg rá a jelenet aljára; a felső térköz soha nem kisebb a fejléc-tartaléknál */
  --hero-atfedes: 104px;
  --hero-felso-min: 5.75rem;
}

.szinter { position: absolute; inset: 0 0 auto 0; height: var(--jelenet-mag); z-index: -1; pointer-events: none; }
.jelenet { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.jelenet-a { display: none; }
/* a jelenet alja a háttérbe olvad, a cím rálóghat */
.szinter::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4, 9, 19, .55) 0%, rgba(4, 9, 19, 0) 20%, rgba(5, 11, 22, 0) 50%, rgba(5, 11, 22, .82) 72%, #050b16 90%);
}

.hero-belso {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  /* v1.4.1: egyetlen képlet; a töréspontok csak a --jelenet-mag és a --hero-atfedes értékét állítják */
  padding: max(var(--hero-felso-min), calc(var(--jelenet-mag) - var(--hero-atfedes))) 20px 22px;
}

.szemoldok {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--szoveg-2);
}
.szemoldok-pont { width: 8px; height: 8px; border-radius: 50%; background: var(--narancs); box-shadow: 0 0 0 4px rgba(242, 140, 40, .18), 0 0 14px rgba(242, 140, 40, .8); }

.hero-cim {
  font-weight: 860; font-stretch: 82%;
  font-size: clamp(2.875rem, 1.35rem + 7.4vw, 4.6rem);
  line-height: .92; letter-spacing: -.028em;
  color: var(--feher);
  text-shadow: 0 2px 30px rgba(4, 9, 19, .65);
}
.hero-cim .h1-b { color: var(--narancs); text-shadow: 0 0 36px rgba(242, 140, 40, .42); }
.hero-cim .h1-c { display: block; }

.hero-kerdes {
  margin-top: 14px; max-width: 26em;
  font-size: 1.0625rem; line-height: 1.42; font-weight: 450; color: var(--szoveg-2);
}

.ajanlat {
  position: relative; width: 100%; margin-top: 18px;
  padding: 18px 18px 16px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(13, 32, 56, .86), rgba(5, 12, 24, .95));
  border: 1px solid rgba(159, 182, 214, .2);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* a kártya felső éle a váltópont fényét viszi tovább */
.ajanlat::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--narancs), rgba(242, 140, 40, 0));
}
.ajanlat-kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--narancs-vil); }
.ajanlat-ar { margin-top: 6px; font-size: 1rem; line-height: 1.45; color: var(--szoveg-2); }
.ajanlat-ar strong { color: var(--feher); font-weight: 760; }
.ajanlat .cta-note { margin-top: 10px; font-size: .75rem; }
.ajanlat-lab { display: grid; gap: 10px; margin-top: 14px; }
.ajanlat-lab .cta { width: 100%; }
.ajanlat-feltetel { font-size: .75rem; line-height: 1.5; color: var(--szoveg-3); }
.ajanlat-feltetel a { color: var(--szoveg-2); text-underline-offset: 3px; }

/* ---------- jelenetfeliratok ---------- */
.felirat { font-family: var(--mono); font-weight: 500; letter-spacing: .2em; }
.jelenet-a .felirat { font-size: 12px; }
.jelenet-m .felirat { font-size: 9px; letter-spacing: .16em; }
.felirat-regi { fill: #8197ba; fill-opacity: .85; }
.felirat-uj { fill: var(--narancs-halvany); }
.felirat-pont { fill: #ffd2a0; }
.pont-hullam { opacity: 0; }
.fenycsepp { opacity: 0; }

/* ---------- a vasútanimáció: rövid, egyszeri; a szöveg az első pillanattól látható ----------
   0,35 s: a régi pályából kirajzolódik az új (1,15 s); amikor a hegye eléri a váltópontot (--villanas),
   a pont felvillan; a talpfák lépcsőzve gyúlnak; 1,1 s-tól kinyílik a hajnal; egyetlen fénycsepp fut végig.
   ~3,3 s után minden áll – nincs folyamatos mozgás. Szűrő nincs, csak vonaleltolás, átlátszóság, méretezés. */
@media (prefers-reduced-motion: no-preference) {
  .jelenet .sin path, .jelenet .izzas path, .jelenet .sin-csucs path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: rajzol 1.15s cubic-bezier(.5, .05, .3, 1) .35s forwards;
  }
  .jelenet .izzas-1 path { animation-delay: .42s; }
  .jelenet .sin-csucs path { animation-delay: .4s; }
  .talp-uj { animation: feltunik .45s ease-out both; animation-delay: calc(var(--villanas) - .05s + var(--i) * 34ms); }
  .pont { animation: feltunik .45s ease-out .1s both; }
  .pont-feny { transform-box: fill-box; transform-origin: center; animation: villan 1.5s cubic-bezier(.2, .7, .2, 1) var(--villanas) both; }
  .pont-hullam { transform-box: fill-box; transform-origin: center; animation: hullam 1.1s cubic-bezier(.15, .6, .3, 1) var(--villanas) forwards; }
  .pont-karika, .pont-mag { transform-box: fill-box; transform-origin: center; animation: dobban .6s var(--ugro) var(--villanas) both; }
  .pont-csillanas { transform-box: fill-box; transform-origin: center; animation: csillan 1.3s ease-out var(--villanas) both; }
  .kiomles { animation: feltunik 1.2s ease-out var(--villanas) both; }
  .hajnal, .perem { animation: hajnal-be 1.8s ease-out 1.05s both; }
  .felirat-uj, .felirat-pont, .vezeto { animation: feltunik .7s ease-out 1.55s both; }
  .fenycsepp { stroke-dasharray: .03 3; stroke-dashoffset: .03; animation: csepp 1.5s cubic-bezier(.45, 0, .3, 1) 1.9s 1 forwards; }
}
@keyframes rajzol { to { stroke-dashoffset: 0; } }
@keyframes feltunik { from { opacity: 0; } to { opacity: 1; } }
@keyframes villan { 0% { transform: scale(.6); opacity: .3; } 30% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hullam { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes dobban { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes csillan { 0% { transform: scale(.1, .1); opacity: 0; } 25% { transform: scale(1.25, 1); opacity: 1; } 100% { transform: scale(1, 1); opacity: .6; } }
@keyframes hajnal-be { from { opacity: .25; } to { opacity: 1; } }
@keyframes csepp {
  0% { stroke-dashoffset: .03; opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
.pont-csillanas { opacity: .6; }

/* ======================================================================
   2. MI EZ, ÉS KINEK VALÓ? – hideg és meleg ellentét
   ====================================================================== */
.sz-kinek {
  background: linear-gradient(180deg, #050b16 0%, #071122 100%);
  --fenyfolt: radial-gradient(60% 50% at 0% 30%, rgba(111, 134, 168, .11), transparent 70%), radial-gradient(55% 45% at 100% 75%, rgba(242, 140, 40, .09), transparent 70%);
}

.szerep {
  display: grid; gap: 14px; align-items: stretch;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.szerep-elem {
  padding: 20px 22px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid var(--vonal);
  box-shadow: var(--kartya-arnyek);
}
.szerep-cel { border-color: rgba(242, 140, 40, .3); background: linear-gradient(180deg, rgba(242, 140, 40, .08), rgba(242, 140, 40, .015)); }
.szerep-cimke { font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--szoveg-3); }
.szerep-cel .szerep-cimke { color: var(--narancs-vil); }
.szerep-nev { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 800; font-size: 1.25rem; color: var(--feher); }
.szerep-logo { width: 30px; height: 30px; border-radius: 50%; }
.szerep-szoveg { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: var(--szoveg-2); }
.szerep-valto { width: 120px; height: 46px; margin: -4px auto; transform: rotate(90deg); overflow: visible; }
.szerep-sin { fill: none; stroke: rgba(159, 182, 214, .35); stroke-width: 2; stroke-linecap: round; }
.szerep-ag { fill: none; stroke: var(--narancs); stroke-width: 3; stroke-linecap: round; }
.szerep-halo { fill: rgba(242, 140, 40, .22); }
.szerep-pont { fill: #fff1dc; stroke: var(--narancs); stroke-width: 2; }

.illik { display: grid; gap: 16px; }
.illik-doboz {
  position: relative; padding: 26px 24px 22px; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--vonal); box-shadow: var(--kartya-arnyek);
}
.illik-doboz h3 { font-weight: 780; font-stretch: 92%; font-size: 1.375rem; letter-spacing: -.01em; color: var(--feher); }
.illik-doboz ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.illik-doboz li { position: relative; padding-left: 36px; font-size: 1.0625rem; line-height: 1.45; color: var(--szoveg); }
.illik-doboz li::before { content: ""; position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%; }
.illik-igen {
  background: radial-gradient(120% 90% at 0% 0%, rgba(242, 140, 40, .16), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  border-color: rgba(242, 140, 40, .32);
}
.illik-igen li::before {
  background: var(--narancs) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%230d2038' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 0 16px rgba(242, 140, 40, .45);
}
.illik-nem {
  background: radial-gradient(120% 90% at 100% 0%, rgba(111, 134, 168, .14), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
}
.illik-nem h3 { color: var(--szoveg-2); }
.illik-nem li { color: var(--szoveg-2); }
.illik-nem li::before {
  background: rgba(111, 134, 168, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' fill='none' stroke='%23a9bedb' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  border: 1px solid rgba(159, 182, 214, .35);
}

/* ======================================================================
   3. MIT TANULHATSZ MEG? – eltérő méretű csempék
   ====================================================================== */
.sz-tanulas {
  background: linear-gradient(180deg, #071122 0%, #0a1424 55%, #081120 100%);
  --fenyfolt: radial-gradient(50% 40% at 85% 22%, rgba(27, 53, 96, .6), transparent 70%);
}
/* finom pontrács a háttérben – a „tervezett út” érzete, nem vasút */
.sz-tanulas::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(159, 182, 214, .16) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}
.bento { display: grid; gap: 14px; }
.csempe {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px 22px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  border: 1px solid var(--vonal);
  box-shadow: var(--kartya-arnyek);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.csempe::after {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(242, 140, 40, .16), transparent 65%);
  right: -110px; top: -120px;
}
.csempe-b::after { left: -120px; right: auto; top: auto; bottom: -140px; }
/* a két nagy csempe díszítő pályaköre: koncentrikus ívek, egy narancs szakasz és csomópont (díszítés) */
.csempe-a::before, .csempe-b::before {
  content: ""; position: absolute; right: -60px; top: -70px; width: 300px; height: 300px; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none'%3E%3Cg stroke='%239fb6d6' stroke-opacity='.13'%3E%3Ccircle cx='150' cy='150' r='60'/%3E%3Ccircle cx='150' cy='150' r='98'/%3E%3Ccircle cx='150' cy='150' r='136'/%3E%3C/g%3E%3Cpath d='M52 150a98 98 0 0 1 98-98' stroke='%23f28c28' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='150' cy='52' r='5' fill='%23fff1dc' stroke='%23f28c28' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.csempe-b::before { transform: rotate(90deg); }
.csempe > * { position: relative; z-index: 1; }
.csempe-c::after { background: radial-gradient(circle, rgba(111, 134, 168, .18), transparent 65%); }
.csempe h3 { font-weight: 780; font-stretch: 90%; font-size: 1.5rem; letter-spacing: -.012em; color: var(--feher); }
.csempe p { font-size: 1rem; line-height: 1.55; color: var(--szoveg-2); max-width: 34em; }
.temacimkek { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.temacimkek li {
  padding: 7px 14px; border-radius: 999px; font-weight: 650; font-size: .9375rem; color: var(--narancs-halvany);
  background: rgba(242, 140, 40, .1); border: 1px solid rgba(242, 140, 40, .4);
}

/* ======================================================================
   4. TANULJ, FEJLŐDJ, ÉPÍTS – nagy állítás és a továbbfutó fényút
   ====================================================================== */
.sz-fejlodes {
  overflow: hidden; overflow: clip;
  background: linear-gradient(180deg, #081120 0%, #0b1a31 50%, #071122 100%);
  --fenyfolt: radial-gradient(70% 55% at 80% 35%, rgba(242, 140, 40, .14), transparent 62%), radial-gradient(60% 45% at 10% 70%, rgba(27, 53, 96, .55), transparent 70%);
}
.fenyut { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: -1; pointer-events: none; }
.fenyut-izzas, .fenyut-vonal { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fenyut-izzas { stroke: rgba(255, 154, 60, .14); stroke-width: 14; }
.fenyut-vonal { stroke: url(#fu-vonal); stroke-width: 2.6; }
.nagy-allitas {
  max-width: 21em;
  font-weight: 560; font-stretch: 94%;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.75rem);
  line-height: 1.22; letter-spacing: -.012em; color: var(--feher);
  text-wrap: pretty;
}
.nagy-allitas .meleg { color: var(--narancs-halvany); }
/* állomások idővonala (v1.4.1: egy helyen): egy oszlop függőleges vonallal, 1280 px-től két oszlop vízszintes
   vonallal – a vonal és a pontok minden méreten összetartoznak. 600 és 1279 px között az oszlop keskenyebb,
   hogy a szakasz jobb oldalán felfutó fényút ne haladjon át az állomások szövegén (geometriailag mérve). */
.allomasok { position: relative; list-style: none; margin: clamp(30px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: 22px; counter-reset: lepes; }
.allomasok::before {
  content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(242, 140, 40, .25), #ffb466);
}
.allomas { position: relative; padding: 0 0 0 40px; counter-increment: lepes; }
.allomas::before {
  content: ""; position: absolute; left: 1px; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff1dc; border: 3px solid var(--narancs); box-shadow: 0 0 0 5px rgba(242, 140, 40, .16), 0 0 18px rgba(242, 140, 40, .6);
}
.allomas h3::before { content: "0" counter(lepes); display: block; margin-bottom: 4px; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .18em; color: var(--narancs-vil); }
.allomas h3 { font-weight: 760; font-size: 1.3125rem; color: var(--feher); }
.allomas p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--szoveg-2); }
@media (min-width: 600px) and (max-width: 1279.98px) {
  .allomasok { max-width: 25rem; }
}
@media (min-width: 1280px) {
  .allomasok { grid-template-columns: 1fr 1fr; gap: 40px; max-width: 860px; }
  .allomasok::before { left: 10px; right: -80px; top: 9px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, rgba(242, 140, 40, .25), #ffb466 85%, rgba(255, 180, 102, 0)); }
  .allomas { padding: 38px 0 0; }
  .allomas::before { left: 1px; top: 0; }
}

/* ======================================================================
   5. KÖZÖSSÉGBEN TANULHATSZ – bizalom
   ====================================================================== */
.sz-kozosseg { background: linear-gradient(180deg, #071122 0%, #09121f 100%); }
.jellemzok { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.jellemzo {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--vonal);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.jellemzo h3 { font-weight: 760; font-size: 1.1875rem; color: var(--feher); }
.jellemzo p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--szoveg-2); }
.jellemzo-kiemelt { border-color: rgba(242, 140, 40, .34); background: linear-gradient(180deg, rgba(242, 140, 40, .09), rgba(242, 140, 40, .015)); }
.oszinte {
  display: flex; gap: 14px; align-items: center;
  margin-top: 22px; padding: 18px 22px; border-radius: 18px;
  border: 1px dashed rgba(159, 182, 214, .32);
  font-size: 1rem; line-height: 1.5; color: var(--szoveg-2);
}
.oszinte-jel {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(159, 182, 214, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01' fill='none' stroke='%23c0cde0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  border: 1px solid rgba(159, 182, 214, .35);
}

/* ======================================================================
   6. ELŐSZÖR ISMERD MEG, UTÁNA DÖNTS – a világos ellenpont, tiszta döntés
   ====================================================================== */
.sz-dontes {
  background: linear-gradient(180deg, #09121f 0%, #0a1526 100%);
  --fenyfolt: radial-gradient(60% 55% at 50% 55%, rgba(242, 140, 40, .11), transparent 70%);
}
.dontes {
  position: relative; display: grid; gap: 28px;
  padding: 30px 22px 24px; border-radius: 28px;
  background: linear-gradient(180deg, #fbfcfe 0%, #eef3fa 100%);
  color: var(--navy);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 40px 90px -30px rgba(242, 140, 40, .32), 0 30px 70px -30px rgba(0, 0, 0, .9);
}
.dontes::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--narancs), #ffc27a, rgba(242, 140, 40, 0));
}
.dontes h2 { color: var(--navy); }
.dontes-szoveg > p:not(.cimke) { margin-top: 16px; font-size: 1.0625rem; line-height: 1.6; color: #34496b; max-width: 38em; }
.dontes .kiemeles { font-weight: 700; color: var(--navy-2); }
.menetrend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: menet; }
.menetrend li {
  position: relative; display: grid; gap: 2px; padding: 0 0 22px 40px;
}
.menetrend li::before {
  content: ""; position: absolute; left: 6px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--narancs); box-shadow: 0 0 0 5px rgba(242, 140, 40, .15);
}
.menetrend li::after {
  content: ""; position: absolute; left: 12px; top: 26px; bottom: 2px; width: 2px;
  background: linear-gradient(180deg, rgba(242, 140, 40, .7), rgba(242, 140, 40, .15));
}
.menetrend li:last-child { padding-bottom: 0; }
.menetrend li:last-child::after { display: none; }
.menetrend li:last-child::before { background: var(--narancs); }
.menet-ido { font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: #a4520f; }
.menetrend strong { font-weight: 800; font-stretch: 92%; font-size: 1.3125rem; color: var(--navy); }
.menet-szoveg { font-size: .9375rem; line-height: 1.5; color: #34496b; }
.dontes-cta { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(20, 40, 75, .14); }
.dontes .cta-note { color: #4a5f80; }
.dontes .cta-note strong { color: var(--navy); }
.dontes .cta { width: 100%; box-shadow: 0 16px 34px -12px rgba(242, 140, 40, .65), inset 0 1px 0 rgba(255, 255, 255, .45); }
.dontes .cta:focus-visible { outline-color: var(--navy); }
.dontes :focus-visible { outline-color: var(--navy); }

/* ======================================================================
   7. GYIK – nyugodt, gyorsan pásztázható
   ====================================================================== */
.sz-gyik { background: linear-gradient(180deg, #0a1526 0%, #070e1b 100%); }
.gyik { display: grid; gap: 12px; }
.gyik details {
  border-radius: 18px; border: 1px solid var(--vonal);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  transition: border-color .25s ease, background-color .25s ease;
}
.gyik details[open] { border-color: rgba(242, 140, 40, .4); background: linear-gradient(180deg, rgba(242, 140, 40, .07), rgba(255, 255, 255, .01)); }
.gyik summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 20px 60px 20px 22px; border-radius: 18px;
  font-weight: 720; font-size: 1.125rem; line-height: 1.35; color: var(--feher);
}
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  border: 1px solid rgba(242, 140, 40, .55);
  background:
    linear-gradient(var(--narancs-vil), var(--narancs-vil)) center / 11px 2px no-repeat,
    linear-gradient(var(--narancs-vil), var(--narancs-vil)) center / 2px 11px no-repeat;
  transition: transform .3s var(--kifut), background-size .3s ease;
}
.gyik details[open] summary::after { transform: rotate(180deg); background-size: 11px 2px, 2px 0; }
.gyik .valasz { padding: 0 22px 20px; }
.gyik .valasz p { font-size: 1rem; line-height: 1.65; color: var(--szoveg-2); }
/* kulturált nyitás: ahol a böngésző tudja, a tartalom magassága finoman nyílik */
@media (prefers-reduced-motion: no-preference) {
  .gyik details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .32s var(--kifut), content-visibility .32s allow-discrete;
  }
  .gyik details[open]::details-content { block-size: auto; }
}

/* ======================================================================
   8. ZÁRÓ – hajnal: az új vágány a fénybe fut
   ====================================================================== */
.zaro {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  min-height: calc(92 * var(--svh)); display: flex; flex-direction: column;
  background: #070e1b;
}
.zaro-szinter { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: -1; pointer-events: none; }
.zaro-szinter::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, #070e1b 0%, rgba(7, 14, 27, .35) 18%, rgba(7, 14, 27, 0) 36%);
}
.hajnal-jelenet { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hajnal-ha { display: none; }
.zaro-belso {
  position: relative; z-index: 2; text-align: center;
  width: min(100% - 40px, 820px); margin: 0 auto;
  padding: clamp(72px, 9vw, 112px) 0 0;
}
.zaro-cim {
  font-weight: 860; font-stretch: 82%;
  font-size: clamp(2.5rem, 1.2rem + 5vw, 5.4rem);
  line-height: .98; letter-spacing: -.026em; color: var(--feher);
  text-wrap: balance;
  text-shadow: 0 4px 40px rgba(4, 9, 19, .6);
}
.zaro-cta { display: grid; gap: 14px; justify-items: center; margin: 26px auto 0; max-width: 560px; }
.zaro .cta-note { color: var(--szoveg-2); }
.cta-nagy { width: 100%; min-height: 62px; font-size: 1.125rem; }
/* a nap egyszer, finoman emelkedik, amikor a szakasz láthatóvá válik */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .zaro-szinter .hajnal-nap { transition: transform 2.4s var(--kifut), opacity 2.4s ease; }
  html.reveal-ready .zaro-szinter:not(.is-visible) .hajnal-nap { transform: translateY(18px); opacity: .55; }
}

/* ======================================================================
   Lábléc
   ====================================================================== */
.lablec { padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); background: #03070e; border-top: 1px solid rgba(159, 182, 214, .1); }
.lablec p { margin-top: 12px; max-width: 46em; font-size: .875rem; line-height: 1.6; color: var(--szoveg-3); }
.lablec-marka { display: flex; align-items: center; gap: 16px; margin: 0 !important; }
.lablec-logo { width: 72px; height: 72px; border-radius: 50%; }
.lablec-szlogen { font-weight: 800; font-stretch: 88%; font-size: 1.375rem; color: var(--feher); }
.lablec-kozles strong { color: var(--szoveg-2); }
.lablec-linkek a { color: var(--szoveg-2); text-underline-offset: 3px; }

/* ======================================================================
   Mobilos sticky CTA – kompakt, átlátszatlan, nem takar ki fókuszt
   ====================================================================== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; gap: 6px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #07101f;
  border-top: 1px solid rgba(242, 140, 40, .45);
  box-shadow: 0 -20px 40px -24px rgba(0, 0, 0, .9);
  transform: translateY(110%);
  transition: transform .28s var(--kifut);
}
.sticky-cta.is-visible { transform: translateY(0); }
.cta-sticky { width: 100%; min-height: 50px; padding: 10px 18px; font-size: 1rem; }
.sticky-note { font-size: .75rem; line-height: 1.3; text-align: center; color: var(--szoveg-3); }

@media (max-width: 959.98px) {
  /* v1.4.1: a sáv tényleges magasságát (a biztonsági sávval együtt) a script.js méri, és a --sticky-mag
     változóba írja. Erre igazodik a fókusz-görgetés tartaléka (a fókuszált elem ne kerüljön a sáv alá,
     WCAG 2.2, 2.4.11) és a lábléc alsó térköze. JS nélkül nincs sáv, ilyenkor az érték 0. */
  html { scroll-padding-bottom: calc(var(--sticky-mag, 0px) + .5rem); }
  .lablec { padding-bottom: calc(48px + max(var(--sticky-mag, 0px), env(safe-area-inset-bottom))); }
}
/* fekvő mobil és nagyított asztali nézet: egysoros, alacsony sáv */
@media (max-width: 959.98px) and (max-height: 500px) {
  .sticky-cta { grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 6px 14px calc(6px + env(safe-area-inset-bottom)); }
  .sticky-note { order: -1; text-align: left; }
  .cta-sticky { width: auto; min-height: 44px; padding: 8px 18px; }
}
/* v1.4.1: nagyon alacsony nézetben (pl. 300–400%-os nagyítás) a sáv a képernyő túl nagy részét takarná: ott nincs
   sticky – a tartalom CTA-i (mindegyik mellett ajánlói közléssel) görgetéssel elérhetők maradnak */
@media (max-width: 959.98px) and (max-height: 300px) {
  .sticky-cta { display: none; }
}

/* ======================================================================
   Beúszás (csak ha a script.js elindult) és hover
   ====================================================================== */
html.reveal-ready .reveal {
  transition:
    opacity .55s var(--kifut) var(--reveal-delay, 0ms),
    translate .75s var(--kifut) var(--reveal-delay, 0ms),
    transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
html.reveal-ready .reveal:not(.is-visible) { opacity: 0; translate: 0 var(--reveal-y, 18px); }
/* a díszítő elemek nem „úsznak”, csak kirajzolódnak vagy fényt kapnak */
html.reveal-ready .fenyut.reveal:not(.is-visible), html.reveal-ready .zaro-szinter.reveal:not(.is-visible) { opacity: 1; translate: none; }
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .fenyut .fenyut-izzas, html.reveal-ready .fenyut .fenyut-vonal { stroke-dasharray: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5, .05, .3, 1) .15s; }
  html.reveal-ready .fenyut:not(.is-visible) .fenyut-izzas, html.reveal-ready .fenyut:not(.is-visible) .fenyut-vonal { stroke-dashoffset: 1; }
  html.reveal-ready .fenyut .fenyut-cel, html.reveal-ready .fenyut .fenyut-nyalab { transition: opacity 1.4s ease .6s; }
  html.reveal-ready .fenyut:not(.is-visible) .fenyut-cel, html.reveal-ready .fenyut:not(.is-visible) .fenyut-nyalab { opacity: .2; }
}

@media (hover: hover) and (pointer: fine) {
  .csempe:hover, .jellemzo:hover { transform: translateY(-4px); border-color: rgba(242, 140, 40, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(242, 140, 40, .12); }
}

/* ======================================================================
   Kis és alacsony mobil- és tabletnézetek
   v1.4.1 – következetes töréspontok: a hero felső térköze egyetlen képletből adódik
   (max(--hero-felso-min, --jelenet-mag − --hero-atfedes)); a töréspontok csak ezt a két változót állítják.
   A rövid, álló nézetek (pl. a Facebook-böngésző) keskenyebb jelenetsávot kapnak (orientation: portrait).
   Fekvő telefonon és nagyított asztali nézetben a jelenet a tablet-szabály szerint él; a fő CTA ott a hajtás
   alá kerülhet, és helyette a sticky sáv jelenik meg (script.js).
   ====================================================================== */
@media (max-width: 959.98px) and (max-height: 700px) {
  .hero { --jelenet-mag: min(calc(100vw * 430 / 390), calc(44 * var(--svh))); --hero-atfedes: 92px; }
  .hero-belso { padding-bottom: 16px; }
  .szemoldok { display: none; }
  .hero-cim { font-size: clamp(2.5rem, 1.1rem + 6.6vw, 3.4rem); }
  .hero-kerdes { margin-top: 10px; font-size: 1rem; line-height: 1.38; }
  .ajanlat { margin-top: 14px; padding: 14px 14px 12px; }
  .ajanlat-ar { font-size: .9375rem; }
  .ajanlat .cta-note { margin-top: 8px; }
  .ajanlat-lab { margin-top: 10px; gap: 8px; }
  .felirat-regi, .felirat-uj { display: none; }
}
@media (max-width: 719.98px) {
  .dontes { padding: 26px 18px 20px; }
  .dontes .cta, .ajanlat .cta { padding-inline: 18px; }
}
@media (max-width: 379.98px) {
  .cta { padding: 12px 16px; font-size: 1rem; gap: 10px; }
  .fejlec-belso { padding: 12px 14px 0; }
  .marka-nev { font-size: 1.0625rem; }
  .marka-logo { width: 38px; height: 38px; }
  .gomb-kicsi { padding: 0 12px; font-size: .8125rem; }
}
/* nagyon alacsony képernyőn a jelenet teteje a fejléc alá kerülne: ott felirat nélkül */
@media (max-width: 959.98px) and (max-height: 620px) {
  .feliratok { display: none; }
}
/* 360 px alatt a CTA szövege egy sorban marad: a nyíl elmarad, a belső margó kisebb */
@media (max-width: 359.98px) {
  .cta::after { display: none; }
  .cta { padding-inline: 12px; }
  .hero-belso { padding-inline: 16px; }
}
/* tablet és fekvő telefon: a mobil jelenet legfeljebb 600 px széles, középen, lágyan elhalványuló szélekkel */
@media (min-width: 600px) and (max-width: 959.98px) {
  .hero { --jelenet-mag: min(calc(600px * 430 / 390), calc(60 * var(--svh))); }
  .szinter { left: 50%; right: auto; width: 600px; margin-left: -300px; }
  .jelenet-m {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  }
  .hero-belso { padding-inline: var(--szel); }
}
/* rövid, keskeny, álló mobil (pl. 320×568, 360×600): tömörebb tipográfia, a fő CTA az első képernyőn marad */
@media (max-width: 379.98px) and (max-height: 600px) and (orientation: portrait) {
  /* a jelenet sávja keskenyebb, de a váltópont és az emelkedő pálya látszik; a CTA alatt marad levegő */
  .hero { --jelenet-mag: calc(33 * var(--svh)); --hero-atfedes: 62px; }
  /* a jelenet alulra horgonyzott: a sávot lefelé nyújtjuk, hogy a váltópont ne a márkanév mögé kerüljön */
  .szinter { height: calc(var(--jelenet-mag) + 36px); }
  .hero-belso { padding-bottom: 12px; }
  .hero-cim { font-size: 2.25rem; }
  .hero-kerdes { margin-top: 8px; font-size: .9375rem; line-height: 1.34; }
  .ajanlat { margin-top: 12px; padding: 12px 13px 11px; }
  .ajanlat-ar { margin-top: 4px; font-size: .875rem; line-height: 1.38; }
  .ajanlat .cta-note { margin-top: 6px; font-size: .71875rem; line-height: 1.42; }
  .ajanlat-lab { margin-top: 9px; }
  .ajanlat .cta { min-height: 50px; }
}
/* rövid, álló mobil 340 px-től (pl. 360×600 – Facebook-böngésző): a jelenetsáv a nézetmagasság 38%-a */
@media (min-width: 340px) and (max-width: 959.98px) and (max-height: 620px) and (orientation: portrait) {
  .hero { --jelenet-mag: min(calc(100vw * 430 / 390), calc(38 * var(--svh))); --hero-atfedes: 80px; }
}

/* ======================================================================
   Tablet és asztali nézet (≥ 720 px és ≥ 960 px)
   ====================================================================== */
@media (min-width: 720px) {
  .szerep { grid-template-columns: 1fr 120px 1fr; align-items: center; }
  .szerep-valto { transform: none; margin: 0 auto; width: 120px; height: 46px; }
  .illik { grid-template-columns: 1.15fr .85fr; }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .csempe-a, .csempe-b { grid-column: span 3; min-height: 250px; }
  .csempe-c { grid-column: span 2; }
  .csempe-d { grid-column: span 4; }
  .jellemzok { grid-template-columns: 1fr 1fr; }
  .jellemzo-kiemelt { grid-column: 1 / -1; }
  .menetrend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .menetrend li { padding: 34px 0 0; }
  .menetrend li::before { left: 0; top: 0; }
  .menetrend li::after { left: 22px; right: -18px; top: 6px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, rgba(242, 140, 40, .7), rgba(242, 140, 40, .15)); }
  .dontes { padding: 44px 44px 36px; }
  .dontes-cta { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
  .dontes .cta { width: auto; min-width: 300px; justify-self: start; }
}

@media (min-width: 960px) {
  body { font-size: 1.125rem; }
  html { scroll-padding-top: 96px; }

  .fejlec { position: fixed; transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
  /* JS nélkül is olvasható marad a rögzített fejléc alatt átgördülő tartalom */
  .fejlec::before { content: ""; position: absolute; inset: 0 0 -24px 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 9, 19, .72), rgba(4, 9, 19, 0)); transition: opacity .3s ease; }
  .fejlec.fejlec--lebeg { background: rgba(5, 11, 22, .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: rgba(159, 182, 214, .12); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); }
  .fejlec.fejlec--lebeg::before { opacity: 0; }
  .fejlec-belso { width: min(100% - 2 * var(--szel), 1320px); margin-inline: auto; padding: 14px 0; }
  .marka-logo { width: 50px; height: 50px; }
  .marka-nev { font-size: 1.375rem; }
  .gomb-kicsi { min-height: 44px; padding: 0 20px; font-size: .9375rem; }

  .hero { --jelenet-mag: 100%; min-height: max(calc(100 * var(--svh)), 760px); }
  .szinter { inset: 0; height: auto; }
  .jelenet-a { display: block; }
  .jelenet-m { display: none; }
  .szinter::before {
    background:
      linear-gradient(90deg, rgba(4, 9, 19, .9) 0%, rgba(4, 9, 19, .66) 34%, rgba(4, 9, 19, 0) 58%),
      linear-gradient(180deg, rgba(4, 9, 19, .5) 0%, rgba(4, 9, 19, 0) 18%, rgba(4, 9, 19, 0) 84%, #050b16 100%);
  }
  .szinter::after {
    content: ""; position: absolute; inset: 0; z-index: 2; opacity: .07;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .hero-belso {
    width: min(100%, calc(var(--szel) + 660px));
    min-height: inherit; justify-content: center;
    padding: 118px 0 64px var(--szel);
  }
  .szemoldok { margin-bottom: 20px; font-size: .8125rem; }
  .hero-cim { font-size: clamp(4.4rem, 1.2rem + 6.6vw, 7.6rem); line-height: .9; }
  .hero-cim .h1-a, .hero-cim .h1-b { display: block; }
  .hero-kerdes { margin-top: 24px; max-width: 27em; font-size: clamp(1.125rem, .9rem + .45vw, 1.375rem); line-height: 1.45; }
  .ajanlat { width: min(100%, 640px); margin-top: 30px; padding: 22px 26px 20px; }
  .ajanlat::before { left: 26px; right: 26px; }
  .ajanlat-kicker { font-size: .8125rem; }
  .ajanlat-ar { font-size: 1.0625rem; }
  .ajanlat .cta-note { font-size: .8125rem; }
  .ajanlat-lab { grid-template-columns: auto 1fr; align-items: center; gap: 20px; margin-top: 16px; }
  .ajanlat-lab .cta { width: auto; }
  .ajanlat-feltetel { font-size: .8125rem; }

  .szakasz-fej { margin-bottom: 56px; }
  .szerep { grid-template-columns: 1fr 160px 1fr; }
  .szerep-valto { width: 160px; height: 60px; }
  .bento { gap: 18px; }
  .csempe { padding: 32px 30px 30px; }
  .csempe-a, .csempe-b { min-height: 300px; justify-content: flex-end; }
  .csempe-a .ikon, .csempe-b .ikon { position: absolute; top: 30px; left: 30px; }
  .csempe h3 { font-size: 1.75rem; }
  .jellemzok { grid-template-columns: 1.2fr 1fr 1fr; }
  .jellemzo-kiemelt { grid-column: auto; }
  .jellemzo { flex-direction: column; padding: 28px; }

  .zaro { min-height: max(calc(96 * var(--svh)), 800px); }
  .zaro-szinter { height: 62%; }
  .hajnal-ha { display: block; }
  .hajnal-hm { display: none; }
  .cta-nagy { width: auto; min-width: 420px; }

  .sticky-cta { display: none; }
}

@media (min-width: 960px) and (max-height: 820px) {
  .hero-belso { padding-top: 104px; padding-bottom: 44px; }
  .hero-cim { font-size: clamp(4rem, .8rem + 6vw, 6.4rem); }
  .hero-kerdes { margin-top: 18px; }
  .ajanlat { margin-top: 22px; }
}


/* ======================================================================
   v1.4 – feszesebb mobil, prémiumabb középső szakaszok, kisebb fontterhelés
   ====================================================================== */
/* a kicker és a menetrend időcímkéje Archivóval: így a Plex Mono latin-ext fájlja (ő, ű) nem töltődik be */
.ajanlat-kicker, .menet-ido { font-family: var(--cim); font-weight: 720; font-stretch: 100%; letter-spacing: .14em; }

/* 4. második csúcspont: sötétből a fény felé */
.sz-fejlodes {
  background: linear-gradient(180deg, #071122 0%, #0a1830 40%, #161a2e 72%, #261c26 88%, #09121f 100%);
  --fenyfolt: radial-gradient(50% 40% at 90% 16%, rgba(242, 140, 40, .14), transparent 65%), radial-gradient(60% 40% at 0% 60%, rgba(27, 53, 96, .5), transparent 70%);
}
.fenyut-izzas { stroke: rgba(255, 154, 60, .16); stroke-width: 16; }
.nagy-allitas { max-width: 17.5em; font-weight: 600; font-size: clamp(1.625rem, .95rem + 2.7vw, 3.35rem); line-height: 1.16; letter-spacing: -.016em; }
/* az állomások idővonalának szabályai a 4. szakasznál, egy helyen (v1.4.1) */

/* 5. bizalom: szerkesztőségi lista, nem kártyasor */
.sz-kozosseg { background: #09121f; }
.sz-kozosseg .szakasz-fej { margin-bottom: 22px; }
.sz-kozosseg .oszinte { margin-top: 20px; padding: 14px 16px; font-size: .9375rem; }
.sz-kozosseg .jellemzok { display: block; border-top: 1px solid var(--vonal); }
.sz-kozosseg .jellemzo {
  display: flex; flex-direction: row; gap: 16px; align-items: flex-start;
  padding: 18px 4px; border: 0; border-bottom: 1px solid var(--vonal); border-radius: 0; background: none; box-shadow: none;
}
.sz-kozosseg .jellemzo .ikon { width: 44px; height: 44px; border-radius: 14px; }
.sz-kozosseg .jellemzo .ikon svg { width: 24px; height: 24px; }
.sz-kozosseg .jellemzo-kiemelt { background: linear-gradient(90deg, rgba(242, 140, 40, .1), rgba(242, 140, 40, 0) 70%); box-shadow: inset 2px 0 0 var(--narancs); padding-left: 14px; }
.sz-kozosseg .jellemzo:hover { transform: none; box-shadow: none; }
.sz-kozosseg .jellemzo-kiemelt:hover { box-shadow: inset 2px 0 0 var(--narancs); }

@media (max-width: 719.98px) {
  .szakasz { padding: 48px 0; }
  .szakasz-fej { margin-bottom: 22px; }
  .szakasz-bevezeto { margin-top: 14px; font-size: 1rem; line-height: 1.55; }
  /* szerepábra: egyetlen kártya két sorral */
  .szerep { gap: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--vonal); box-shadow: var(--kartya-arnyek); margin-bottom: 18px; }
  .szerep-elem { border: 0; border-radius: 0; box-shadow: none; padding: 16px 18px; }
  .szerep-cel { border-top: 1px dashed rgba(242, 140, 40, .4); }
  .szerep-valto { display: none; }
  .szerep-nev { margin-top: 4px; font-size: 1.125rem; }
  .szerep-szoveg { margin-top: 4px; font-size: .9375rem; }
  .illik { gap: 12px; }
  .illik-doboz { padding: 18px 18px 16px; }
  .illik-doboz h3 { font-size: 1.1875rem; }
  .illik-doboz ul { margin-top: 12px; gap: 8px; }
  .illik-doboz li { font-size: 1rem; padding-left: 32px; }
  .illik-doboz li::before { width: 22px; height: 22px; }
  /* témák: ikon balra, szöveg jobbra */
  .bento { gap: 10px; }
  .csempe { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 4px; padding: 18px 16px; border-radius: 20px; }
  .csempe .ikon { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 14px; }
  .csempe .ikon svg { width: 24px; height: 24px; }
  .csempe > :not(.ikon) { grid-column: 2; }
  .csempe h3 { font-size: 1.1875rem; line-height: 1.25; }
  .csempe p { font-size: .9375rem; line-height: 1.5; }
  .csempe::before { display: none; }
  .temacimkek li { padding: 5px 11px; font-size: .875rem; }
  .nagy-allitas { font-size: 1.5rem; line-height: 1.22; }
  .dontes { gap: 20px; padding: 24px 16px 18px; }
  .dontes-szoveg > p:not(.cimke) { margin-top: 12px; font-size: 1rem; }
  .menetrend li { padding-bottom: 16px; }
  .menetrend strong { font-size: 1.1875rem; }
  .dontes-cta { padding-top: 16px; gap: 12px; }
  .gyik summary { padding: 16px 52px 16px 18px; font-size: 1.0625rem; }
  .gyik .valasz { padding: 0 18px 16px; }
  .zaro { min-height: calc(82 * var(--svh)); }
  .lablec { padding-top: 40px; }
}
@media (min-width: 960px) {
  .sz-fejlodes { min-height: 820px; display: flex; align-items: center; }
  .sz-fejlodes > .tarto { width: min(100% - 2 * var(--szel), var(--tarto)); }
  .kozosseg-racs { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
  .sz-kozosseg .szakasz-fej { margin-bottom: 0; position: sticky; top: 120px; }
  .sz-kozosseg .jellemzo { padding: 24px 8px; }
  .sz-kozosseg .jellemzo-kiemelt { padding-left: 18px; }
}

/* ======================================================================
   Csökkentett mozgás: minden a végállapotban; JS nélkül minden látható
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.reveal-ready .reveal:not(.is-visible) { opacity: 1; translate: none; }
  .fenycsepp { display: none; }
  .cta, .cta::after, .csempe, .jellemzo, .sticky-cta, .gomb-kicsi, .gyik summary::after { transition: none; }
}

@media (forced-colors: active) {
  .cta { border: 2px solid ButtonText; }
  .ajanlat, .dontes, .csempe, .jellemzo, .gyik details { border: 1px solid CanvasText; }
}

/* v1.4 – mobilon a fényvonal csak a jobb szélen fut fel, a szöveg mögött nem */
@media (max-width: 959.98px) {
  .fenyut {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 76%, #000 97%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 76%, #000 97%);
  }
  .temacimkek { gap: 6px; }
  .temacimkek li { padding: 4px 10px; }
}

/* ======================================================================
   v1.5 – a hero-kártya ajánlói közlése most a közösség nevét is tartalmazza (a látogató itt látja először),
   ezért mobilon és tableten is 13 px, mint asztali nézetben (korábban 11,5–12 px); a lemondási sor ugyanígy.
   ====================================================================== */
@media (max-width: 959.98px) {
  .ajanlat .cta-note, .ajanlat-feltetel { font-size: .8125rem; line-height: 1.42; }
}
/* rövid, keskeny, álló mobil (320×568, 360×600): 2 px-szel kisebb köz a CTA fölött, hogy a lemondási sor is az első képernyőn maradjon */
@media (max-width: 379.98px) and (max-height: 600px) and (orientation: portrait) {
  .ajanlat-lab { margin-top: 7px; }
}
/* magas, álló mobil (701–900 px, pl. 390×844): a kártya belső térközei a 700 px alatti tömör értékekre, mert a hosszabb
   közlés miatt a fő CTA különben közel kerülne a sticky sáv zónájához (lassú betűletöltésnél a sáv a gomb fölé kerülhetne) */
@media (max-width: 959.98px) and (min-height: 700.02px) and (max-height: 900px) and (orientation: portrait) {
  .ajanlat { margin-top: 14px; padding-top: 14px; }
  .ajanlat-ar { margin-top: 4px; }
  .ajanlat .cta-note { margin-top: 8px; line-height: 1.36; }
  .ajanlat-lab { margin-top: 10px; }
}

/* v1.5.2: a hosszabb fejléc-CTA („Megnézem a közösséget”) keskeny kijelzőn két sorba törik –
   középre igazítva, kiegyensúlyozott sorokkal és szűkebb sorközzel, hogy a gomb magassága ne nőjön */
.gomb-kicsi { text-align: center; line-height: 1.2; text-wrap: balance; }

/* ======================================================================
   v1.6 – probléma → megoldás felépítés, új hero-szöveg, „Mi ez?” blokk, mentorcsoport,
   hozzájárulási ablak (analytics.js; csak akkor jelenik meg, ha a mérés be van kapcsolva)
   ====================================================================== */
/* hero: a hosszabb, kérdő főcím kisebb betűvel, kiegyensúlyozott tördeléssel */
.hero-cim { font-size: clamp(2.25rem, 1.15rem + 4.6vw, 3rem); line-height: 1; letter-spacing: -.024em; text-wrap: balance; max-width: 15em; }
.hero-cim .h1-b { white-space: nowrap; }
.hero-kerdes { color: var(--szoveg); }
.ajanlat { display: grid; gap: 12px; }
.ajanlat-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .9375rem; line-height: 1.4; color: var(--szoveg-2); }
.ajanlat-sor strong { color: var(--feher); font-weight: 760; }
.ajanlat-pont { color: var(--narancs); }
.ajanlat-sor a { color: var(--narancs-halvany); text-underline-offset: 3px; }
.ajanlat .cta { width: 100%; }

/* „Mi ez?” – rögtön a hero alatt */
.sz-miez { position: relative; padding: 8px 0 clamp(40px, 5vw, 64px); background: #050b16; }
.miez {
  max-width: 820px; padding: 22px 22px 20px; border-radius: 22px;
  border: 1px solid rgba(242, 140, 40, .32);
  background: linear-gradient(180deg, rgba(242, 140, 40, .08), rgba(255, 255, 255, .012));
  box-shadow: var(--kartya-arnyek);
}
.miez-cim { font-family: var(--cim); font-weight: 720; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--narancs-vil); }
.miez-szoveg { margin-top: 10px; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.6; color: var(--szoveg); }

/* probléma: a három kérdés */
.kerdesek { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.kerdesek li {
  position: relative; padding: 16px 18px 16px 56px; border-radius: 18px;
  border: 1px solid var(--vonal); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  font-weight: 650; font-size: 1.0625rem; line-height: 1.45; color: var(--feher);
}
.kerdesek li::before {
  content: "?"; position: absolute; left: 16px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .9375rem; color: var(--narancs-vil);
  border: 1px solid rgba(242, 140, 40, .55); background: rgba(242, 140, 40, .1);
}

/* megoldás: három állomás */
@media (min-width: 1280px) {
  .allomasok-3 { grid-template-columns: repeat(3, 1fr); max-width: 1040px; }
}

/* mentorcsoport a témák alatt */
.mentor {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 14px;
  padding: 20px 22px; border-radius: 22px;
  border: 1px solid rgba(242, 140, 40, .34);
  background: linear-gradient(90deg, rgba(242, 140, 40, .1), rgba(242, 140, 40, .015) 70%);
}
.mentor h3 { font-weight: 760; font-size: 1.1875rem; color: var(--feher); }
.mentor p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--szoveg-2); }

/* záró: böngészőváltás tudnivaló */
.zaro-bongeszo { font-size: .875rem; line-height: 1.5; color: var(--szoveg-2); max-width: 30em; }

@media (max-width: 719.98px) {
  .kerdesek li { padding: 14px 14px 14px 52px; font-size: 1rem; }
  .mentor { padding: 16px; gap: 14px; }
  .mentor .ikon { width: 44px; height: 44px; border-radius: 14px; }
  .mentor .ikon svg { width: 24px; height: 24px; }
  .miez { padding: 18px 16px 16px; }
}
@media (max-width: 959.98px) and (max-height: 700px) {
  .hero-cim { font-size: clamp(2rem, 1rem + 4.2vw, 2.5rem); }
}
@media (max-width: 379.98px) and (max-height: 600px) and (orientation: portrait) {
  .hero-cim { font-size: 1.875rem; }
}
@media (min-width: 960px) {
  .hero-cim { font-size: clamp(3.4rem, 1rem + 3.9vw, 4.9rem); line-height: .98; max-width: 11.5em; }
  .hero-belso { width: min(100%, calc(var(--szel) + 720px)); }
  .ajanlat { grid-template-columns: auto 1fr; align-items: center; gap: 14px 22px; }
  .ajanlat-sor { grid-column: 1 / -1; font-size: 1rem; }
  .ajanlat .cta { width: auto; }
  .sz-miez { padding-top: 0; }
}
@media (min-width: 960px) and (max-height: 820px) {
  .hero-cim { font-size: clamp(3.2rem, .9rem + 3.6vw, 4.4rem); }
}

/* ---------- hozzájárulási ablak és „Süti-beállítások” gomb (analytics.js) ----------
   Középre úszó párbeszédablak minden kijelzőn: legfeljebb 420 px széles, telefonon 16 px oldalsó margó.
   Mögötte az oldal elhomályosodik (8 px blur + sötét réteg), nem görgethető és nem érhető el, amíg a látogató
   nem választ. Az „Elfogadom” kiemelt (narancs kitöltés), az „Elutasítom” kiemelés nélküli, aláhúzott szöveggomb;
   mindkettő legalább 44 px magas. */
.consent-settings {
  margin-left: 18px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--szoveg-2); text-decoration: underline; text-underline-offset: 3px;
}
.consent {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(4, 9, 19, .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}
/* ahol a böngésző nem tud homályosítani, erősebb sötét réteg */
@supports not ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .consent { background: rgba(4, 9, 19, .88); }
}
.consent[hidden] { display: none; }
/* görgetészár, amíg az ablak látszik */
html.consent-nyitva, html.consent-nyitva body { overflow: hidden; }
/* amíg az ablak látszik, a mobilos sticky CTA rejtve marad */
body.has-consent-banner .sticky-cta { display: none; }
.consent-doboz {
  width: min(100%, 420px); max-height: 100%; overflow-y: auto;
  padding: 22px 20px 14px; border-radius: 20px;
  background: linear-gradient(180deg, #0d2038 0%, #07101f 100%);
  border: 1px solid rgba(242, 140, 40, .45);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* a doboz csak a fókusz kiindulópontja (nem kezelőelem); a látható fókuszkeret a gombokon és a linken van */
.consent-doboz:focus, .consent-doboz:focus-visible { outline: none; }
.consent-text { font-size: .9375rem; line-height: 1.55; color: var(--szoveg); }
.consent-link { color: var(--narancs-halvany); text-underline-offset: 3px; white-space: nowrap; }
.consent-actions { display: grid; gap: 6px; margin-top: 18px; }
.consent-btn { font: inherit; cursor: pointer; width: 100%; min-height: 44px; }
/* Elfogadom: narancs kitöltés, sötét szöveg, nyíl nélkül */
.consent-elfogad {
  min-height: 50px; padding: 12px 20px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ffa552 0%, var(--narancs) 100%); color: var(--navy);
  font-weight: 800; font-size: 1.0625rem;
  box-shadow: 0 12px 28px -12px rgba(242, 140, 40, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
}
/* Elutasítom: kitöltés és keret nélkül, fehér, aláhúzott szöveg – jól olvasható, valódi gomb */
.consent-elutasit {
  padding: 10px 16px; border: 0; border-radius: 12px; background: none; color: var(--feher);
  font-weight: 650; font-size: 1rem; text-decoration: underline; text-underline-offset: 4px;
}
.consent-elutasit:hover { color: var(--narancs-halvany); }
.consent-btn:focus-visible, .consent-settings:focus-visible, .consent-link:focus-visible { outline: 3px solid var(--narancs-halvany); outline-offset: 3px; }
/* mobilon és tableten a hero nem nyúlik a teljes képernyőre: a „Mi ez?” blokk eleje már az első képernyőn látszik */
@media (max-width: 959.98px) {
  .hero { min-height: 0; }
  .hero-belso { padding-bottom: 18px; }
  .sz-miez { padding-top: 0; }
}
/* a menetrend lépései felülre igazodnak (a rövidebb szövegű lépés címe ne csússzon lejjebb) */
.menetrend li { align-content: start; }
.zaro-bongeszo { margin-top: -4px; color: var(--szoveg); }

/* ---------- egyetlen reklám- és ajánlói közlés a hero CTA előtt ---------- */
.reklam-doboz { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border: 1px solid rgba(255, 217, 160, .32); border-radius: 10px; background: rgba(4, 9, 19, .55); font-size: .8125rem; line-height: 1.45; color: var(--szoveg); }
.reklam-doboz strong { display: block; margin-bottom: 3px; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--narancs-halvany); }