/* ==========================================================================
   OPTIMUM AUTÓSISKOLA — base.css  (v3 · Duolingo-forma, rozsda + narancs, 5. kiadás)
   --------------------------------------------------------------------------
   Közös stílusok, amelyeket MINDEN oldal betölt. A szabályok forrása:
   _design-loop/design-system.md és _design-loop/bar.md (mindkettő 3. kiadás).
   A-darab után FAGYASZTVA: a többi oldal ezt a fájlt nem módosítja.
   A többi oldal CSS-e ezt a fájlt NEM módosítja — minden közös komponens itt él.

   Tartalma:
     1.  Dizájn tokenek (:root)            ← minden szín / méret itt állítható
     2.  Régi (v2) tokenek álnevei          ← csak átmenetileg, új kódban ne használd
     3.  Alap / reset
     4.  Tipográfia + szövegközi link
     5.  Elrendezés (container, section, grid, split)
     6.  Gombok (.btn-primary · .btn-secondary · .btn-white)
     7.  Pilla, eyebrow, címke (badge), pipás lista (checks)
     8.  Fejléc, navigáció, mobil fiók
     9.  Lábléc (vörös CTA-sáv + sötét alap)
     10. Kártya, ikoncsempe, szekció-fejléc
     11. Aloldal-fejléc (page-hero) + morzsamenü
     12. Akkordeon (GYIK)
     13. Űrlap-elemek
     14. Toast értesítés
     15. Média-hely (matrica-keret + lapos SVG-poszter + sarok-pilla)
     16. Görgetéses megjelenés (reveal)
     17. Akadálymentesség (skip-link, fókuszgyűrű, mozgáscsökkentés)
     18. Lebegő tárgymező („Tanulj bárhonnan, bármikor”, 6. kiadás)
     19. Lábléc élő sávja (Seedance-loop a „Kezdd el még ma!” sávban)

   Alapelv: fehér vászon, egyetlen telített szín (rozsda), kerek és vaskos
   Nunito, matricaszerű elemek 2px kerettel és alul 4px-es „peremmel”.
   A perem az EGYETLEN engedélyezett box-shadow: 0 4px 0 <szín>, elmosás nélkül
   (+ a fókuszgyűrű). Nincs gradiens, nincs elmosott árnyék, nincs üveghatás.

   Kontraszt (design-system.md): 19px alatti szöveg ≥ 4,5:1. Ezért a kis
   UPPERCASE feliratok (pilla, címke, morzsamenü, logó alsora) --ink színűek.
   A rozsdán a fehér felirat (7,3:1) és a --accent felirat a fehéren (5,2:1) is
   megfelel. Márka-kivétel marad: #777 törzsszöveg fehéren (4,48:1).
   A --muted (#afafaf) SOHA nem szöveg — csak letiltott állapot / dekor-ikon.
   Méret: 13px alatt semmi.
   ========================================================================== */


/* 1. DIZÁJN TOKENEK ------------------------------------------------------- */
:root {
  /* --- Színek (csak ezek) — 5. kiadás, a tulajdonos választása (2026-09-29) --- */
  --brand:      #9a3412;   /* rozsda: elsődleges CTA, display címsor, logó, lábléc CTA-sávja (fehér szöveg rajta 7,3:1) */
  --brand-lip:  #72260d;   /* mély rozsda: a rozsda gomb pereme, hover, dekor-ikon, fehér gomb pereme a rozsda sávon */
  --brand-wash: #fcede4;   /* halvány rozsda-barack kiemelő háttér (címke, ikoncsempe, lépés-pötty, óraszám-sáv) */
  --amber:      #f2a52a;   /* borostyán: CSAK dekor (értékelés-csillagok) — szövegre tilos */
  --amber-wash: #fff1d9;   /* halvány borostyán háttér (illusztráció-alap) */
  --accent:     #c2410c;   /* narancs: másodlagos gomb szövege, aktív nav, fókuszgyűrű (5,2:1) */
  --accent-lip: #91310a;   /* a narancs elemek pereme */
  --foot:       #9a3412;   /* a lábléc alapja: rozsda (= --brand), a főoldali „tál” egybefolyik vele (2026-09-30) */
  --foot-line:  rgb(255 255 255 / 0.24);   /* elválasztó a rozsda láblécen */
  --foot-text:  #fde6d8;   /* másodlagos szöveg a rozsda láblécen (6,1:1) */
  --foot-link:  #ffffff;   /* CSAK linkek (és fókusz) a rozsda láblécen (7,3:1) — fehér vásznon tilos */
  --success:    #2e8b47;   /* „Nyitva” jelzés (a zöld itt jelentést hordoz: nyitva / mehetsz) */
  --success-wash: #e3f4e6;
  --ink:        #4b4b4b;   /* címsorok (nem vörös), erős szöveg, kis feliratok, szövegközi link */
  --ink-soft:   #777777;   /* törzsszöveg, inaktív nav */
  --muted:      #afafaf;   /* CSAK letiltott állapot és dekor-ikon — szövegre tilos */
  --line:       #e5e5e5;   /* 2px keretek és perem a fehér elemeken */
  --paper:      #ffffff;   /* vászon, kártyák */
  --paper-2:    #f7f7f7;   /* ritka, visszafogott sávháttér, hover */
  --danger:     #ff4b4b;   /* hiba, „Zárva” jelzés */

  /* --- Perem („lip”) — az egyetlen engedélyezett box-shadow --- */
  --lip:        0 4px 0 var(--line);
  --lip-brand:  0 4px 0 var(--brand-lip);

  /* --- Tipográfia: négy szerep (Display · Alcím · Törzs · Felirat) --- */
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-label:   0.8125rem;                                 /* 13px — Felirat: pilla, címke */
  --fs-nav:     0.875rem;                                  /* 14px — Felirat: nav */
  --fs-btn:     0.9375rem;                                 /* 15px — Felirat: gomb */
  --fs-note:    0.9375rem;                                 /* 15px — kártyán belüli leírás, média-felirat */
  --fs-foot:    1rem;                                      /* 16px — lábléc */
  --fs-body:    1.0625rem;                                 /* 17px — Törzs */
  --fs-sub:     1.1875rem;                                 /* 19px — Alcím (legkisebb) */
  --fs-h4:      clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);   /* 19–22px */
  --fs-h3:      clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);     /* 22–28px */
  --fs-h2:      clamp(2.125rem, 1rem + 3vw, 3.25rem);          /* 34–52px */
  --fs-h1:      clamp(2.25rem, 1.1rem + 3.4vw, 3.75rem);       /* 36–60px */

  /* --- Térköz (4px alapegység) --- */
  --space-1: 0.25rem;   /*   4px */
  --space-2: 0.5rem;    /*   8px */
  --space-3: 0.75rem;   /*  12px */
  --space-4: 1rem;      /*  16px */
  --space-5: 1.5rem;    /*  24px */
  --space-6: 2rem;      /*  32px */
  --space-7: 3rem;      /*  48px */
  --space-8: 4rem;      /*  64px */
  --space-9: 5rem;      /*  80px */
  --space-10: 6rem;     /*  96px */
  --space-11: 7.5rem;   /* 120px */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);   /* 56px mobilon → 112px asztalon */

  /* --- Sugarak --- */
  --radius-sm:   12px;  /* gomb, pilla, input, ikoncsempe */
  --radius:      16px;  /* kártya */
  --radius-lg:   20px;  /* média-hely, nagy kártya */
  --radius-full: 999px; /* csak kör: avatar, lépésszám-pötty, ikon-kör */

  /* --- Elrendezés --- */
  --container: 1200px;
  --gutter: 16px;
  --nav-h: 72px;
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 360ms cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Rétegsorrend --- */
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-toast: 300;
}
@media (min-width: 768px) {
  :root { --gutter: 24px; }
}


/* 2. RÉGI (v2) TOKENEK ÁLNEVEI --------------------------------------------
   Az aloldalak régi CSS-e még ezekre hivatkozhat. Mind az új palettára mutat.
   ÚJ KÓDBAN NE HASZNÁLD — használd a fenti tokeneket. */
:root {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --dark: var(--ink);
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --elevated: var(--paper);
  --white: #ffffff;
  --red: var(--brand);
  --red-deep: var(--paper);
  --red-bright: var(--brand);
  --red-pink: var(--danger);

  --amber-deep: var(--accent);
  --amber-light: var(--amber);
  --border: var(--line);
  --border-strong: var(--line);
  --grad-warm: var(--brand);   /* szín, nem színátmenet */
  --grad-glow: none;
  --font-display: var(--font);
  --font-body: var(--font);
  --fs-eyebrow: var(--fs-label);
  --fs-small: var(--fs-note);
  --fs-lead: var(--fs-sub);
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --shadow-glow: none;
}


/* 3. ALAP / RESET -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px); /* rögzített fejléc miatt */
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* vízszintes túlcsordulás tiltása mellékhatás nélkül */
}

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

a { color: inherit; text-decoration: none; }
/* Hosszú, szóköz nélküli címek (e-mail) keskeny kijelzőn se tolják szét a rácsot */
a[href^="mailto:"] { overflow-wrap: anywhere; }

ul, ol { list-style: none; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }


/* 4. TIPOGRÁFIA ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
/* Display: kerek, vaskos, vörös — ez hordozza az érzelmi töltetet (≥ 34px) */
h1, h2 {
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--brand);
}
h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); }
/* Alcím: 700, 19–32px */
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); font-weight: 700; }

p { color: var(--ink-soft); max-width: 62ch; }

/* Kiemelés a törzsszövegben: sötétebb szín, a törzs súlyán marad */
strong, b { color: var(--ink); font-weight: inherit; }

/* Szövegközi link: --ink szöveg, 2px --brand aláhúzás (nem csak szín jelöli) */
.link,
p a:not(.btn),
li a.link {
  color: var(--ink);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition);
}
.link:hover, p a:not(.btn):hover, li a.link:hover { text-decoration-color: var(--brand-lip); }

/* Kiemelések: sima vörös display-szöveg (nincs színátmenet) — csak ≥ 32px címben */
.text-gradient,
.text-green { color: var(--brand); }
.text-ink   { color: var(--ink); }
.text-amber { color: var(--brand); }
.text-red   { color: var(--danger); }


/* 5. ELRENDEZÉS ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(820px + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 2rem + 4vw, 5rem); }
.section--paper-2 { background: var(--paper-2); }

/* Reszponzív rácsok */
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Szekció: egy szövegblokk + egy vizuális elem, váltakozó oldalon (bar.md 5.)
   <div class="split">  <div class="split__text">…</div>  <figure class="media-slot">…</figure>  </div>
   .split--flip → a vizuális elem kerül balra (asztali nézetben). */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.split__text > * + * { margin-top: var(--space-4); }
.split__text > .btn,
.split__text > .btn-row { margin-top: var(--space-6); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
  .split--flip > :first-child { order: 2; }
}


/* 6. GOMBOK — matricagomb peremmel ----------------------------------------
   12px sugár, UPPERCASE, 15px / 800, +0.05em betűköz. Alatta 4px perem;
   megnyomva a perem eltűnik, a gomb 4px-et „lesüllyed”.
   .btn + .btn--primary (= .btn-primary)     teli vörös, fehér felirat
   .btn + .btn--secondary (= .btn-secondary) fehér, 2px --line, --accent felirat
   .btn + .btn-white (= .btn--white)         CSAK a vörös CTA-sávon: fehér, --foot felirat
   A régi .btn--ghost / .btn--light a másodlagos gomb álneve. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.6875rem 1.5rem;
  font-family: var(--font);
  font-size: var(--fs-btn);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease, background-color var(--transition),
              filter var(--transition), border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  margin-bottom: 4px; /* hely a peremnek */
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Elsődleges — teli vörös, mélyvörös perem */
.btn--primary,
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--lip-brand);
}

/* Másodlagos — fehér, szürke keret és perem, borostyán felirat */
.btn--secondary,
.btn-secondary,
.btn--ghost,
.btn--light {
  background: var(--paper);
  border-color: var(--line);
  color: var(--accent);
  box-shadow: var(--lip);
}

/* Fehér — csak a vörös CTA-sávon: fehér kitöltés, sötétbarna felirat, mélyvörös perem */
.btn-white,
.btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--foot);
  box-shadow: var(--lip-brand);
}

@media (hover: hover) {
  .btn--primary:hover, .btn-primary:hover { filter: brightness(1.07); }
  .btn--secondary:hover, .btn-secondary:hover,
  .btn--ghost:hover, .btn--light:hover { background: var(--paper-2); }
  .btn-white:hover, .btn--white:hover { background: var(--paper-2); border-color: var(--paper-2); }
}

/* Megnyomva: a perem eltűnik, a gomb lesüllyed */
.btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 transparent;
}

/* Letiltott állapot — az egyetlen hely, ahol a --muted szín szövegen megengedett */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted);
  box-shadow: 0 4px 0 var(--line);
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.btn--lg { min-height: 52px; padding: 0.8125rem 2rem; }
.btn--sm { min-height: 44px; padding: 0.5rem 1.125rem; }
.btn--block { display: flex; width: 100%; }

/* Gombsor: két gomb egymás mellett, mobilon egymás alatt teljes szélességben */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
@media (max-width: 479px) {
  .btn-row { display: grid; }
  .btn-row .btn { width: 100%; }
}


/* 7. PILLA, EYEBROW, CÍMKE, PIPÁS LISTA -----------------------------------
   Matricaszerű: 2px keret, 12px sugár, UPPERCASE 13px / 800, alul perem.
   A felirat --ink (8,9:1), mert 19px alatti szöveg. */
.pill,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 0.3125rem 0.75rem;
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--lip);
  margin-bottom: 4px;
}
.pill svg,
.eyebrow svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand-lip); }

/* Kiemelt címke — pl. „Legnépszerűbb”: halvány korall alap, --ink felirat */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.1875rem 0.625rem;
  font-size: var(--fs-label);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brand-wash);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--lip);
  margin-bottom: 4px;
  white-space: nowrap;
}

/* Pipás lista — rövid előnyök (pl. „Manuál és automata oktatás”).
   Törzs-szerep: 17px / 500 --ink, vörös pipa-ikon (dekor). */
.checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.checks li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.checks svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); }


/* 8. FEJLÉC + NAVIGÁCIÓ --------------------------------------------------
   Nyugodt, fehér sáv, alul 2px --line vonal. NINCS vörös kitöltésű felület.
   Balra: vörös logó-szó (kormány-ikon keret nélkül) + 13px UPPERCASE alsor.
   Középen: UPPERCASE nav — inaktív --ink-soft, aktív --accent + 3px --accent
   alsó sáv (a fejléc alsó vonalán ül; doboz és perem nélkül).
   Jobbra: csendes „Hívjon minket” telefon-link (--ink, tel:) + egy
   .btn-secondary méretű „JELENTKEZEM”.
   Mobilon (< 1120px): logó · 44px telefon-ikongomb · hamburger; a
   „Jelentkezem” a fiókban és a hero-ban van (600px felett a fejlécben is). */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--nav-h);
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border-bottom: 2px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
}

/* --- Logó: a tulajdonos logója képként (assets/logo/, 2026-10-08), fejlécben és láblécben is a teljes,
   íves logó (a tulajdonos kérése). Fejlécben az eredeti színes, a rozsda láblécen a fehér–sárga változat.
   Az <img> width/height attribútuma a megjelenített méret, így elavult (gyorsítótárazott) CSS-sel sem
   lehet óriási. A link aria-label-je adja a teljes nevet, ezért a kép alt="" (dekoratív). --- */
.logo__img { display: block; width: auto; height: 66px; max-width: none; }   /* a 72px-es fejlécben */
.footer__logo .logo__img { height: 104px; }
@media (max-width: 1119px) { .site-header .logo__img { height: 64px; } }
@media (max-width: 379px)  { .site-header .logo__img { height: 60px; } }
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-height: 44px;
  border-radius: var(--radius-sm);
  color: var(--brand);
}
/* (A kormány-ikon a logóból 2026-09-30-án a tulajdonos kérésére kikerült: a logó csak a név.) */
/* Logó-blokk: a név („Optimum Autósiskola”) KÉT sorban áll
   („Optimum” / „Autósiskola”), alatta a „SZÉKESFEHÉRVÁR” alsor, együtt
   „Optimum Autósiskola Székesfehérvár”. Csak CSS: a max-width két sorra
   kényszeríti, a text-wrap: balance a szóköznél töri. Így a fejlécben
   egy ~150px széles tömb marad, amely 1120–1280px-en sem szorítja ki a
   menüt, a telefont és a „Jelentkezem” gombot, mobilon pedig nem lóg ki. */
.logo__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.logo__name {
  font-size: 1.1875rem;         /* Alcím-szerep: 19px / 900 */
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--brand);
  max-width: 9.4em;             /* két sor: „Optimum” / „Autósiskola” */
  text-wrap: balance;
}
/* A lábléc sötét alapján több a hely: nagyobb, szintén kétsoros név */
.footer__logo .logo__name { font-size: 1.375rem; }        /* 22px */
.logo__sub {
  margin-top: 4px;
  font-size: var(--fs-label);  /* Felirat: 13px / 800 UPPERCASE */
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 379px) {
  .site-header .logo { gap: 6px; }
  .site-header .logo__name { font-size: var(--fs-body); }  /* 17px */
}

/* --- Navigációs linkek: UPPERCASE; aktív = borostyán felirat + 3px borostyán alsó sáv --- */
.nav__links {
  display: none;
  align-self: stretch;
  align-items: stretch;
  gap: var(--space-1);
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.625rem;
  font-size: var(--fs-nav);    /* Felirat: 14px / 800 UPPERCASE */
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--transition);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.625rem;
  right: 0.625rem;
  bottom: -2px;                 /* a fejléc 2px alsó vonalára ül */
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background-color var(--transition);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { background: var(--line); }
.nav__link.is-active,
.nav__link[aria-current="page"] { color: var(--accent); }
.nav__link.is-active::after,
.nav__link[aria-current="page"]::after { background: var(--accent); }

/* --- Jobb oldal --- */
.nav__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Csendes telefon-link: ikon + „Hívjon minket”, --ink, keret nélkül */
.nav__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-2);
  font-size: var(--fs-nav);    /* Felirat: 14px / 800 UPPERCASE */
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand);
}
.nav__phone svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand-lip); }
.nav__phone:hover { text-decoration-line: underline; }

/* „JELENTKEZEM” — .btn-secondary méretben */
.nav__apply.btn { min-height: 44px; padding: 0.5rem 1.125rem; font-size: var(--fs-nav); }

/* Mobilon: a telefon 44×44-es ikon-matrica, a szöveg képernyőolvasónak marad */
@media (max-width: 1279px) {
  .nav__phone-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 1119px) {
  .nav__phone {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--line);
    box-shadow: var(--lip);
    margin-bottom: 4px;
    transition: transform 80ms ease, box-shadow 80ms ease;
  }
  .nav__phone:active { transform: translateY(4px); box-shadow: none; }
  .nav__phone svg { color: var(--ink); }
}
@media (max-width: 599px) {
  .nav__apply { display: none; }
}

/* --- Hamburger — kis matrica --- */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  box-shadow: var(--lip);
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 4px;
  flex-shrink: 0;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.nav__toggle:active { transform: translateY(4px); box-shadow: none; }
.nav__toggle svg { width: 24px; height: 24px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* --- Mobil fiók: fehér panel a fejléc alatt --- */
.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: var(--z-drawer);
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  padding: var(--space-3) var(--gutter) var(--space-6);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.mobile-menu.is-open { transform: none; opacity: 1; visibility: visible; }
.mobile-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--space-4);
  font-size: var(--fs-sub);    /* Alcím: 19px / 700 */
  font-weight: 700;
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.mobile-menu__link + .mobile-menu__link { margin-top: 2px; }
.mobile-menu__link:hover { background: var(--paper-2); }
/* Aktív: borostyán felirat + 3px borostyán jelölő bal oldalt (mint az asztali alsó sáv) */
.mobile-menu__link.is-active,
.mobile-menu__link[aria-current="page"] { color: var(--accent); }
.mobile-menu__link.is-active::before,
.mobile-menu__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.mobile-menu__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 2px solid var(--line);
}
.mobile-menu__actions .btn { width: 100%; }
.mobile-menu__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-2);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 1119px) {
  .nav { gap: var(--space-2); }
}
@media (min-width: 1120px) {
  .nav__links { display: flex; }
  .nav__actions { margin-left: 0; gap: var(--space-3); }
  .nav__toggle { display: none; }
  .mobile-menu { display: none; }
}


/* 9. LÁBLÉC — két réteg (design-system.md · Lábléc) ------------------------
   1) .footer-cta  fehér alapon CSAK egy nagy rozsda display-cím (≥ 32px, 900)
      és egy .btn--primary gomb; alatta a rozsda sáv „tálja” a lebegő
      tárgyakkal (19. pont). Apró szöveg nincs.
   2) .footer-base teljes szélességű rozsda (--foot #9a3412) alap: fehér 700-as
      oszlopcímek, --night-text szöveg, --leaf linkek, --night-2 elválasztók,
      15–16px. Itt van a cím, a telefon, az e-mail, az oldal- és jogi linkek
      és a ©. */
.site-footer { color: var(--foot-text); }

.footer-cta {
  background: var(--paper);
  padding-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  overflow: hidden;               /* a szélen kifutó tárgyak ne okozzanak vízszintes görgetést */
}
.footer-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.footer-cta__title {
  font-size: clamp(2.125rem, 1.2rem + 3vw, 3.25rem);   /* 34–52px / 900 */
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand);
  max-width: 18ch;
}
.footer-cta .btn { min-width: min(100%, 300px); }

.footer-base {
  background: var(--foot);
  padding-block: var(--space-9) var(--space-6);
  font-size: var(--fs-foot);
  line-height: 1.5;
}
.footer-base :focus-visible { outline-color: var(--foot-link); }
/* A főoldalon a tál után közvetlenül folytatódik a rozsda lábléc: kisebb felső térköz */
.footer-cta + .footer-base { padding-top: var(--space-7); }

.footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
.footer__col { min-width: 0; }

/* Logó a rozsda alapon: fehér ikon, fehér logó-szó, --foot-text alsor */
.footer__logo .logo__name { color: #fff; }
.footer__logo .logo__sub { color: var(--foot-text); }
.footer__about {
  margin-top: var(--space-4);
  max-width: 38ch;
  font-size: var(--fs-foot);
  color: var(--foot-text);
}

.footer__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-btn);     /* 15px / 700 UPPERCASE — oszlopcím */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.footer__links,
.footer__contact { display: grid; }
.footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.footer-base a:not(.btn) {
  color: var(--foot-link);
  text-decoration-color: var(--amber);    /* borostyán aláhúzás a rozsdán (3,6:1; a narancs 1,4:1 lenne) */
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: color var(--transition);
}
.footer-base a:not(.btn):hover { color: #fff; text-decoration-line: underline; }
.footer__links a,
.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-size: var(--fs-foot);
  font-weight: 700;
  line-height: 1.35;
}
.footer__contact a { padding-block: var(--space-1); }
.footer__contact svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--foot-text);
}
.footer__contact span { min-width: 0; }

/* Közösségi ikonok: --leaf vonalikonok, 44px érintési célon */
.footer__socials {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-left: -10px;
}
.footer-base .footer__social {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}
.footer__social svg { width: 22px; height: 22px; }

/* Alsó sor: 2px --night-2 elválasztó, © + cégnév, adatvédelem, GYIK */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 2px solid var(--foot-line);
}
.footer__copy,
.footer__legal {
  max-width: none;
  font-size: var(--fs-note);   /* 15px */
  font-weight: 500;
  color: var(--foot-text);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-4);
}
.footer__legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* rövid link (GYIK) is középen a 44 px-es célterületben → egyenlő közök */
  min-height: 44px;
  min-width: 44px;
  font-weight: 700;
  text-decoration-line: underline;   /* jogi linkek: mindig aláhúzva */
}

@media (min-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--about { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.4fr 0.8fr 1.2fr; gap: var(--space-8); }
  .footer__col--about { grid-column: auto; }
  .footer__links { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .footer-base { padding-block: var(--space-8) var(--space-5); }
  .footer__grid { gap: var(--space-6); }
  .footer__bottom { margin-top: var(--space-6); flex-direction: column; align-items: flex-start; }
  .footer-cta .btn { width: 100%; }
  .footer__legal span { flex-basis: 100%; }
}


/* 10. KÁRTYA, IKONCSEMPE, SZEKCIÓ-FEJLÉC ---------------------------------- */
/* Szekció-fejléc: eyebrow-pilla + vörös display cím + bevezető */
.section-head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-8);
}
.section-head .eyebrow { margin-bottom: var(--space-5); }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head p { margin-inline: auto; font-size: var(--fs-body); }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head--left p { margin-inline: 0; }

/* Kártya: fehér matrica, 2px keret + 4px perem */
.card {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lip);
  padding: var(--space-5);
  margin-bottom: 4px;
}
.card p { font-size: var(--fs-body); }
/* Kártyán belüli rövid leírás: 15px (design-system.md · Tipográfia) */
.card__desc { font-size: var(--fs-note); line-height: 1.45; color: var(--ink-soft); }
/* Kattintható kártya: megnyomva lesüllyed, mint a gomb */
.card:where(a),
.card--link {
  display: block;
  transition: transform 80ms ease, box-shadow 80ms ease, border-color var(--transition), background-color var(--transition);
}
@media (hover: hover) {
  a.card:hover, .card--link:hover { background: var(--paper-2); }
}
a.card:active, .card--link:active { transform: translateY(4px); box-shadow: none; }

/* Kiemelt kártya (pl. „Legnépszerűbb”) — --brand keret + --brand-lip perem.
   A vörös itt keret, nem kitöltés (bar.md 3.). A címke: <span class="badge">Legnépszerűbb</span> */
.card--featured,
.card-featured { border-color: var(--brand); box-shadow: var(--lip-brand); }

/* Leírás-szerep (design-system.md · Tipográfia): 15–16px / 500, --ink-soft.
   Kártyán belüli leírás, lépés-leírás, űrlap-segédszöveg, média-felirat.
   .text-note = 15px · .text-note--16 = 16px. A 17px-es törzs marad az alap. */
.text-note { font-size: var(--fs-note); font-weight: 500; line-height: 1.45; color: var(--ink-soft); }
.text-note--16 { font-size: var(--fs-foot); }

/* Ikoncsempe: halvány korall matrica, vörös ikon (dekor) */
.icon-box {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--brand-wash);
  border: 2px solid var(--line);
  box-shadow: var(--lip);
  color: var(--brand-lip);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.icon-box svg { width: 28px; height: 28px; }

/* Betűcsempe (kategória-jel: B, A, C, B+E …): fehér matrica, --ink betű */
.letter-tile {
  display: inline-grid;
  place-items: center;
  min-width: 56px;
  height: 52px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: var(--lip);
  margin-bottom: 4px;
  font-size: var(--fs-sub);     /* Alcím: 19px / 700 */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex-shrink: 0;
}
.letter-tile--wash { background: var(--brand-wash); }


/* 11. ALOLDAL-FEJLÉC + MORZSAMENÜ ---------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--space-8));
  padding-bottom: var(--space-8);
  background: var(--paper);
}
.page-hero__content { position: relative; max-width: 760px; }
.page-hero__content .eyebrow { margin-bottom: var(--space-5); }
.page-hero__content h1 { margin-bottom: var(--space-4); }
.page-hero__content p { font-size: var(--fs-body); line-height: 1.5; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  font-size: var(--fs-label);    /* Felirat: 13px / 800 UPPERCASE, --ink */
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-4);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.breadcrumb a:hover { text-decoration-color: var(--brand-lip); }
.breadcrumb span[aria-current] { color: var(--ink); }


/* 12. AKKORDEON (GYIK) ----------------------------------------------------
   Minden kérdés egy kártya (2px keret + perem). A NYITOTT elem vörös jelölőt
   kap: --brand keret + --brand-lip perem, és a +/× ikon-kör vörös kitöltésű
   (fehér ikon — dekor, nem szöveg). Minta:
   <div class="accordion__item is-open">
     <button class="accordion__trigger" aria-expanded="true">Kérdés <svg class="accordion__icon">…</svg></button>
     <div class="accordion__panel"><div><p>Válasz</p></div></div>
   </div> */
.accordion { display: flex; flex-direction: column; gap: var(--space-4); }
.accordion__item {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lip);
  overflow: hidden;
  transition: border-color var(--transition);
}
.accordion__item.is-open { border-color: var(--brand); box-shadow: var(--lip-brand); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.accordion__trigger:hover { background: var(--paper-2); }
.accordion__trigger .accordion__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: var(--radius-full);
  border: 2px solid var(--line);
  color: var(--ink);
  background: var(--paper);
  transition: transform var(--transition-slow), background-color var(--transition), color var(--transition), border-color var(--transition);
}
.accordion__item.is-open .accordion__icon {
  transform: rotate(45deg);
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--fs-body);
}


/* 13. ŰRLAP-ELEMEK -------------------------------------------------------
   2px --line keret, 12px sugár, fehér alap, fókuszban --accent keret.
   Mobilon is ≥ 16px betű (17px), különben az iOS ránagyít. */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__group { display: flex; flex-direction: column; gap: var(--space-2); }
.form__group label,
.form-label {
  font-size: var(--fs-nav);     /* Felirat: 14px / 800 UPPERCASE, --ink */
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.form__group label .req,
.form-label .req { color: var(--danger); }

.form input:not([type="checkbox"]):not([type="radio"]),
.form select,
.form textarea,
.input {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  font-family: var(--font);
  font-size: var(--fs-body);   /* 17px */
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.form textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
/* Helykitöltő: --ink-soft (a --muted szövegre tilos) */
.form input::placeholder,
.form textarea::placeholder,
.input::placeholder { color: var(--ink-soft); opacity: 1; }
.form input:focus,
.form select:focus,
.form textarea:focus,
.input:focus {
  border-color: var(--accent);
  outline: none;
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible,
.input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.form input:user-invalid,
.form textarea:user-invalid,
.form select:user-invalid { border-color: var(--danger); }
.form select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b4b4b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 20px;
}
.form input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  accent-color: var(--brand);
}
.form__hint,
.form__note { font-size: var(--fs-body); font-weight: 500; color: var(--ink-soft); }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body);
  color: var(--ink-soft);
}


/* 14. TOAST ÉRTESÍTÉS ----------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: var(--z-toast);
  width: max-content;
  max-width: min(calc(100vw - 32px), 460px);
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lip);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }


/* 15. MÉDIA-HELY — loop-videó vagy fotó helye (design-system.md · Média-hely)
   --------------------------------------------------------------------------
   Minta (a teljes leírás a README-ben):
     <figure class="media-slot media-slot--16x9" id="media-…" data-kind="video"
             data-src=""                         ← CSERE: ide jön a fájl útvonala
             data-file="assets/media/….mp4" data-ratio="16:9" data-length="6 s">
       <div class="media-slot__frame">
         <video class="media-slot__media" autoplay muted loop playsinline
                preload="none" aria-hidden="true"></video>
         <div class="media-slot__poster" data-art="road" aria-hidden="true"></div>
         <span class="media-slot__tag" aria-hidden="true">…ikon…Videó helye</span>
       </div>
       <figcaption class="media-slot__caption">Mit filmezzünk (egy sor)</figcaption>
     </figure>

   KERET (mindig): matrica — 2px --line keret + 4px --line perem + 20px
   sugár, rögzített arány: --16x9 · --4x3 · --4x5 · --1x1. Vágja a tartalmat.
   ÜRES ÁLLAPOT: a keretet egy lapos, geometrikus SVG „poszter” tölti ki
   (assets/media-art/*.svg, data-art), fehér alapon (.media-slot--wash:
   --brand-wash alapon). A bal felső sarokban kis címke-pilla: „VIDEÓ HELYE”
   vagy „FOTÓ HELYE”; a keret alatt legfeljebb EGY sor 15px --ink-soft leírás.
   A pilla és a leírás KÖTELEZŐ minden üres helyen (a leírás = a data-note
   szövege is); betöltött fájlnál mindkettő eltűnik.
   Arány, fájlnév, hossz NEM látszik — csak data-attribútum és _media/*.md.
     data-art (assets/media-art/):
       kitöltő (.media-slot--fill, a keret arányában rajzolt, széltől szélig):
         hero (4:3) · fleet (4:3, autó + motor + teherautó) ·
         pedals (4:5, lábtér kettős pedállal) · route (4:5, kanyargós út felülről)
       beágyazott (a keretben margóval ül): road · cockpit (1:1) · licence (1:1) ·
         kresz · place · moto · truck
   Álló (4:5) helyre CSAK 4:5-ös kitöltő posztert tegyél, hogy ne maradjon üres
   sáv a rajz fölött és alatt.
   BETÖLTÖTT ÁLLAPOT (.has-media, a main.js adja): a videó / fotó kitölti a
   keretet, a poszter, a pilla és a leírás eltűnik.
   Mozgáscsökkentésnél a videó nem indul el magától. Tilos: szürke
   telikitöltés, szaggatott keret, drótváz-hatás. */
.media-slot {
  --ratio: 16 / 9;
  position: relative;
  width: 100%;
  margin: 0;
}
.media-slot--16x9 { --ratio: 16 / 9; }
.media-slot--4x3  { --ratio: 4 / 3; }
.media-slot--4x5  { --ratio: 4 / 5; }
.media-slot--1x1  { --ratio: 1 / 1; }

.media-slot__frame {
  position: relative;
  aspect-ratio: var(--ratio);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lip);
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 4px;   /* hely a peremnek */
}
.media-slot--wash .media-slot__frame { background: var(--brand-wash); }

.media-slot__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
}
/* KÉSZ MÉDIA AZONNAL: ha a helynek van saját fájlja (data-src="assets/…"), már az első
   pillanattól a videó (előbb a <video poster> első képkockája) látszik – a 2D helykitöltő
   rajz, a keret és a „VIDEÓ HELYE” címke egy pillanatra sem villan fel, JS nélkül sem.
   A .has-media (main.js) ugyanezt jelenti, a régi logika kompatibilitása miatt marad. */
.media-slot.has-media .media-slot__media,
.media-slot[data-src^="assets"] .media-slot__media { opacity: 1; transition: none; }
.media-slot.has-media .media-slot__poster,
.media-slot.has-media .media-slot__tag,
.media-slot[data-src^="assets"] .media-slot__poster,
.media-slot[data-src^="assets"] .media-slot__tag { display: none; }

/* 6. kiadás — KÉSZ MÉDIA KERET NÉLKÜL (bar.md 1.): ha a helynek van fájlja,
   a keret, a perem, a lekerekítés és a háttér eltűnik, a fehér hátterű videó a lap
   színén „lebeg”. A multiply a tömörítésből eredő tört fehéret tünteti el. A felirat
   képernyőolvasónak megmarad (vizuálisan rejtett). */
.media-slot.has-media .media-slot__frame,
.media-slot[data-src^="assets"] .media-slot__frame {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}
.media-slot.has-media .media-slot__media,
.media-slot[data-src^="assets"] .media-slot__media { object-fit: contain; mix-blend-mode: multiply; }
.media-slot[data-src^="assets"] .media-slot__caption,
.media-slot.has-media .media-slot__caption {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* SVG-poszter: a témába illő lapos illusztráció kitölti a keretet */
.media-slot__poster {
  position: absolute;
  inset: 10% 6% 4%;           /* felül hely a sarok-pillának */
  background: url("../assets/media-art/road.svg?v=202610210915") center bottom / contain no-repeat;
}
.media-slot__poster[data-art="cockpit"] { background-image: url("../assets/media-art/cockpit.svg?v=202610210915"); }
.media-slot__poster[data-art="pedals"]  { background-image: url("../assets/media-art/pedals.svg?v=202610210915"); }
.media-slot__poster[data-art="licence"] { background-image: url("../assets/media-art/licence.svg?v=202610210915"); }
.media-slot__poster[data-art="kresz"]   { background-image: url("../assets/media-art/kresz.svg?v=202610210915"); }
.media-slot__poster[data-art="place"]   { background-image: url("../assets/media-art/place.svg?v=202610210915"); }
.media-slot__poster[data-art="moto"]    { background-image: url("../assets/media-art/moto.svg?v=202610210915"); }
.media-slot__poster[data-art="truck"]   { background-image: url("../assets/media-art/truck.svg?v=202610210915"); }
.media-slot__poster[data-art="hero"]    { background-image: url("../assets/media-art/hero.svg?v=202610210915"); }
.media-slot__poster[data-art="fleet"]   { background-image: url("../assets/media-art/fleet.svg?v=202610210915"); }
.media-slot__poster[data-art="route"]   { background-image: url("../assets/media-art/route.svg?v=202610210915"); }
/* Kitöltő poszter (.media-slot--fill): a (keret arányával azonos arányú)
   illusztráció szélétől széléig kitölti a keretet — kész jelenetként hat.
   A jelenet ne érjen szürkével a keret aljáig (az út legyen beljebb), hogy a
   keret + perem látszódjon, és a bal felső sarok maradjon üres a pillának.
   A főoldal hőse ezt használja — pillával és egy sor leírással. */
.media-slot--fill .media-slot__poster { inset: 0; background-position: center; background-size: cover; }
/* Inline <svg> poszter is használható ugyanígy: <svg class="media-slot__poster" …> */
svg.media-slot__poster { width: auto; height: auto; max-width: none; background: none; }

/* Sarok-pilla: „VIDEÓ HELYE” / „FOTÓ HELYE” — 13px / 800 UPPERCASE, --ink */
.media-slot__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0.25rem 0.625rem;
  font-size: var(--fs-label);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--lip);
  white-space: nowrap;
}
.media-slot__tag svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--brand-lip); }

/* Egy sor leírás a keret alatt: 15px / 500 --ink-soft (4,48:1 — márka-kivétel).
   Mindig EGY sor: rövid szöveg; biztonsági vágás, ha mégsem férne ki. */
.media-slot__caption {
  margin-top: var(--space-3);
  padding-inline: var(--space-1);
  font-size: var(--fs-note);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (A videók megállító gombja 2026-09-30-án a tulajdonos kérésére kikerült; mozgáscsökkentésnél
   a videó nem indul el magától, a poszter látszik.) */


/* 16. GÖRGETÉSES MEGJELENÉS (reveal) ------------------------------------- */
/* A .reveal elemek csak JS-sel rejtettek (html.js); a main.js adja az .is-visible-t */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }


/* 17. AKADÁLYMENTESSÉG ---------------------------------------------------- */
/* Ugrás a fő tartalomra — fókuszra vörös matricagombként jelenik meg */
.skip-link {
  position: absolute;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-btn);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: var(--lip-brand);
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* Látható fókuszgyűrű: 3px borostyán */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Vizuálisan rejtett, de képernyőolvasónak elérhető */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mozgáscsökkentés tisztelete */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}


/* 18. LEBEGŐ TÁRGYMEZŐ („Tanulj bárhonnan, bármikor”) — bar.md 8., design-system.md 6. kiadás
   ---------------------------------------------------------------------------------------
   Teljes szélességű, hideg tónusú sáv: középen nagy display-cím, egy sor, egy gomb és egy
   keret nélküli Seedance-loop; körülötte átlátszó, vaskos tárgyak (assets/float/*.webp).
   GÖRGETÉSRE MOZOG, mint a duolingo.com „learn anytime, anywhere” sávja: a tárgyak helyzete
   a görgetéshez kötött (nem idő szerinti), ha a görgetés megáll, ők is megállnak, visszafelé
   görgetve visszafelé mennek. A main.js (12.) egyetlen számot ír a sávra: --p = a sáv útja a
   képernyőn (-0,5 = épp belép alul · 0 = középen · +0,5 = épp kilép felül). Tárgyanként:
   --vy függőleges út (negatív = „közeli”, gyorsabban suhan el; pozitív = „távoli”, lemarad),
   --hx vízszintes szétnyílás, --spin elfordulás a teljes úton, --r0 alapdőlés; --k a
   képernyőméret szerinti szorzó. --tint: a sáv színe be- és kiúszik (JS nélkül 1).
   Csak transform és háttérszín változik. Mozgáscsökkentésnél és JS nélkül állókép (--p: 0).
   A sáv overflow: hidden → a széleken túlnyúló tárgyak nem okoznak vízszintes görgetést.
   Asztalon 26 tárgy, tableten 19, mobilon 23. */
.float-band {
  --band-rgb: 234 245 255;         /* #eaf5ff */
  --band: rgb(var(--band-rgb) / var(--tint, 1));
  --p: 0;
  --k: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--band);
  /* alul annyi hely, hogy a lágy szél (::after, --fade) mindig a videó ALATT maradjon:
     a videó kerete a sáv teljes színén ül, így nem látszik téglalap */
  --fade: clamp(56px, 8vw, 120px);
  padding-block: clamp(4.5rem, 2.5rem + 7vw, 8.5rem) calc(var(--fade) + var(--space-4));
}
.float-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.float-band__title {
  max-width: 14ch;
  font-size: clamp(2.375rem, 1.1rem + 4.4vw, 4.25rem);   /* 38–68px / 900 */
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--brand-lip);
  text-wrap: balance;
}
.float-band__text {
  margin-top: var(--space-4);
  max-width: 30em;
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}
.float-band__inner > .btn { margin-top: var(--space-5); }
/* A sáv jelenete: lebegő laptop és telefon (Seedance-loop, fehér alapon). A keret a sáv színét kapja
   (ugyanazzal a --tint-tel), a videó multiply-jal ül rajta, így a fehér háttér pontosan a sáv tónusa lesz.
   (A korábbi jármű-parádé stílusa: _backup/before-band-devices.tar.) */
.float-band__media { width: 100%; max-width: 560px; margin-top: var(--space-5); }
.float-band .float-band__media .media-slot__frame,
.float-band .float-band__media.has-media .media-slot__frame { background: var(--band); border-color: transparent; box-shadow: none; border-radius: 0; }

/* Lágy szélek: a sáv színe fent és lent a lap fehérjébe olvad (nincs éles határvonal) */
.float-band::before,
.float-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  height: var(--fade);
  pointer-events: none;
}
.float-band::before { top: 0;    background: linear-gradient(to bottom, var(--paper), rgb(255 255 255 / 0)); }
.float-band::after  { bottom: 0; background: linear-gradient(to top,    var(--paper), rgb(255 255 255 / 0)); }
/* A tárgyak a tartalom ELŐTT lebegnek (z-index 3), így a videó láthatatlan kerete sosem vágja el őket;
   pointer-events: none → a gomb és a videó alattuk is kattintható. A szélen futnak, a címet nem takarják. */
.float-band__props { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.float-prop {
  --amp: 1.6;                      /* a görgetéses út szorzója (2026-09-30: „jobban mozogjanak”) */
  position: absolute;
  width: var(--w, 100px);
  height: auto;
  max-width: none;
  transform:
    translate3d(calc(var(--p) * var(--hx, 0px) * var(--k) * var(--amp)), calc(var(--p) * var(--vy, 0px) * var(--k) * var(--amp)), 0)
    rotate(calc(var(--r0, 0deg) + var(--p) * var(--spin, 0deg) * var(--amp)));
  /* Állva is él: finom, saját ritmusú lebegés és billegés (a translate/rotate önálló tulajdonság,
     így a görgetéses transform-ra rakódik rá, nem írja felül). */
  animation: float-idle var(--idur, 5s) ease-in-out var(--idel, 0s) infinite alternate;
  will-change: transform, translate, rotate;
}
@keyframes float-idle {
  from { translate: calc(var(--bob, 10px) * -0.35) calc(var(--bob, 10px) * -1); rotate: calc(var(--wob, 5deg) * -1); }
  to   { translate: calc(var(--bob, 10px) * 0.35)  var(--bob, 10px);            rotate: var(--wob, 5deg); }
}
/* eltérő tempó, fázis és kilengés tárgyanként, hogy ne egyszerre mozogjanak */
.float-prop:nth-child(3n+1) { --idur: 4.2s; --bob: 12px; --wob: 6deg; }
.float-prop:nth-child(3n+2) { --idur: 5.4s; --bob: 9px;  --wob: 8deg; }
.float-prop:nth-child(3n)   { --idur: 3.6s; --bob: 14px; --wob: 4deg; }
.float-prop:nth-child(4n+1) { --idel: -1.3s; }
.float-prop:nth-child(4n+2) { --idel: -2.7s; }
.float-prop:nth-child(4n+3) { --idel: -0.6s; }
.float-prop:nth-child(4n)   { --idel: -3.9s; }
.float-band.is-offscreen .float-prop { animation-play-state: paused; }

/* Asztal (≥ 1200px): 15 tárgy a cím és a jelenet körül, a széleken kifutva.
   Nagy tárgy = közeli (negatív --vy), kicsi = távoli (pozitív --vy). */
.fp-1  { --w: 150px; --vy: -440px; --hx: -50px; --spin: 26deg;  --r0: -14deg; left: -28px; top: 7%; }
.fp-2  { --w: 80px;  --vy: 200px;  --hx: 24px;  --spin: -40deg; --r0: 10deg;  left: 14%;   top: 12%; }
.fp-3  { --w: 150px; --vy: -360px; --hx: -60px; --spin: -22deg; --r0: -8deg;  left: 3%;    top: 41%; }
.fp-4  { --w: 86px;  --vy: 170px;  --hx: 20px;  --spin: 34deg;  --r0: 8deg;   left: 8%;    top: 64%; }
.fp-5  { --w: 128px; --vy: -300px; --hx: -50px; --spin: 40deg;  --r0: -24deg; left: -24px; top: 78%; }
.fp-6  { --w: 64px;  --vy: 240px;  --hx: 14px;  --spin: -46deg; --r0: 12deg;  left: 13%;   top: 90%; }
.fp-7  { --w: 70px;  --vy: 220px;  --hx: 0px;   --spin: 28deg;  --r0: -10deg; left: 9%;    top: -3%; }
.fp-8  { --w: 150px; --vy: -420px; --hx: 60px;  --spin: -24deg; --r0: 12deg;  right: -30px; top: 9%; }
.fp-9  { --w: 82px;  --vy: 180px;  --hx: -24px; --spin: 90deg;  --r0: 0deg;   right: 15%;  top: 15%; }
.fp-11 { --w: 72px;  --vy: 200px;  --hx: -14px; --spin: 40deg;  --r0: -12deg; right: 11%;  top: 48%; }
.fp-12 { --w: 96px;  --vy: -160px; --hx: 36px;  --spin: -32deg; --r0: -10deg; right: 3%;   top: 62%; }
.fp-13 { --w: 120px; --vy: -300px; --hx: 50px;  --spin: 22deg;  --r0: 10deg;  right: -20px; top: 81%; }
.fp-14 { --w: 64px;  --vy: 250px;  --hx: -14px; --spin: -40deg; --r0: -14deg; right: 13%;  top: 91%; }
.fp-15 { --w: 84px;  --vy: 180px;  --hx: 24px;  --spin: 34deg;  --r0: 8deg;   right: 7%;   top: -3%; }
/* további táblák és kiegészítők (2026-09-30): főútvonal, behajtani tilos, körforgalom, gyalogátkelő,
   előzni tilos, várakozni tilos · elakadásjelző, láthatósági mellény, bukósisak, tükör, váltó, öv */
.fp-16 { --w: 78px;  --vy: -200px; --hx: -20px; --spin: 18deg;  --r0: -10deg; left: 23%;   top: 29%; }
.fp-17 { --w: 70px;  --vy: 180px;  --hx: 16px;  --spin: -30deg; --r0: 8deg;   right: 22%;  top: 28%; }
.fp-18 { --w: 72px;  --vy: 220px;  --hx: -10px; --spin: 60deg;  --r0: -6deg;  left: 27%;   top: 2%; }
.fp-19 { --w: 80px;  --vy: -180px; --hx: 20px;  --spin: -16deg; --r0: 8deg;   right: 26%;  top: 3%; }
.fp-20 { --w: 86px;  --vy: -260px; --hx: 40px;  --spin: 20deg;  --r0: -8deg;  right: 1%;   top: 33%; }
.fp-21 { --w: 72px;  --vy: 200px;  --hx: -20px; --spin: -36deg; --r0: 12deg;  left: -1%;   top: 58%; }
.fp-22 { --w: 74px;  --vy: 160px;  --hx: -14px; --spin: 24deg;  --r0: -8deg;  left: 22%;   top: 88%; }
.fp-23 { --w: 80px;  --vy: -150px; --hx: 18px;  --spin: -20deg; --r0: 10deg;  right: 24%;  top: 88%; }
.fp-24 { --w: 84px;  --vy: 120px;  --hx: 0px;   --spin: 16deg;  --r0: -12deg; left: 46%;   top: 90%; }
.fp-25 { --w: 88px;  --vy: -160px; --hx: -24px; --spin: -14deg; --r0: 6deg;   left: 20%;   top: 44%; }
.fp-26 { --w: 60px;  --vy: 190px;  --hx: 14px;  --spin: 30deg;  --r0: -10deg; right: 22%;  top: 42%; }
.fp-27 { --w: 70px;  --vy: 170px;  --hx: 10px;  --spin: -26deg; --r0: 14deg;  left: 37%;   top: 1%; }

/* Tablet (700–1199px): 19 tárgy — a cím fölött, a videó két oldalán és alatta (a videó 560px-es,
   mellette van hely); kisebb út. */
@media (max-width: 1199px) {
  .float-band { --k: 0.75; }
  .fp-2, .fp-6, .fp-11, .fp-14, .fp-9, .fp-16, .fp-17 { display: none; }
  .fp-1  { --w: 120px; }
  .fp-3  { --w: 120px; left: -18px; top: 38%; }
  .fp-8  { --w: 120px; }
  .fp-18 { --w: 60px; left: 26%; top: 1%; }
  .fp-19 { --w: 64px; right: 26%; top: 2%; }
  .fp-27 { --w: 56px; left: 46%; top: 1%; }
  .fp-20 { --w: 64px; right: 1%; top: 34%; }
  /* a videó két oldala (a cím–szöveg–gomb alatt) */
  .fp-25 { --w: 70px; left: 3%;   top: 55%; }
  .fp-4  { --w: 60px; left: 7%;   top: 69%; }
  .fp-5  { --w: 84px; left: -2%;  top: 82%; }
  .fp-26 { --w: 48px; left: auto; right: 7%;  top: 54%; }
  .fp-12 { --w: 70px; right: 2%;  top: 66%; }
  .fp-13 { --w: 90px; right: -3%; top: 81%; }
  /* alul */
  .fp-21 { --w: 52px; left: 1%;   top: 93%; }
  .fp-22 { --w: 60px; left: 20%;  top: 92%; }
  .fp-24 { --w: 58px; left: 47%;  top: 94%; }
  .fp-23 { --w: 64px; right: 20%; top: 92%; }
}
/* Mobil (< 700px): 23 tárgy, mint a duolingo.com telefonos sávjában — két sor a cím fölött, kettő-kettő
   a videó két oldalán (a képernyő szélén túlnyúlva), két sor a videó alatt. A videó itt keskenyebb (270px),
   hogy mellette is legyen hely. A helyek px-ben: a sáv tetejéhez (felső zóna) vagy aljához (alsó zóna és
   a videó oldala) mérve, így bármilyen telefonszélességen (320–699px) ugyanúgy állnak. Kisebb görgetési út
   (--k), hogy a tárgyak ne söpörjenek át a címen. */
@media (max-width: 699px) {
  .float-band { padding-top: 196px; padding-bottom: 172px; --k: 0.4; }
  .float-band__media { max-width: 270px; }
  .float-prop { display: block; left: auto; right: auto; top: auto; bottom: auto; }
  .fp-11, .fp-17, .fp-19 { display: none; }
  /* felső zóna, 1. sor */
  .fp-1  { --w: 64px; --vy: 220px; left: -18px; top: 10px; }
  .fp-18 { --w: 42px; --vy: 180px; left: 28%;   top: 8px; }
  .fp-7  { --w: 32px; --vy: 200px; left: 50%;   top: 4px; }
  .fp-15 { --w: 44px; --vy: 170px; right: 22%;  top: 12px; }
  .fp-8  { --w: 70px; --vy: 230px; right: -14px; top: 14px; }
  /* felső zóna, 2. sor */
  .fp-16 { --w: 38px; --vy: 160px; left: 3%;    top: 120px; }
  .fp-4  { --w: 38px; --vy: 190px; left: 17%;   top: 94px; }
  .fp-5  { --w: 52px; --vy: 150px; left: 38%;   top: 118px; }
  .fp-2  { --w: 40px; --vy: 200px; right: 30%;  top: 90px; }
  .fp-27 { --w: 46px; --vy: 170px; right: 5%;   top: 106px; }
  /* a videó két oldala (a sáv aljától mérve) */
  .fp-3  { --w: 70px; --vy: -150px; left: -30px;  bottom: 300px; }
  .fp-25 { --w: 52px; --vy: 140px;  left: -12px;  bottom: 200px; }
  .fp-12 { --w: 52px; --vy: -140px; right: -16px; bottom: 312px; }
  .fp-9  { --w: 50px; --vy: 150px;  right: -12px; bottom: 206px; }
  /* alsó zóna, 1. sor */
  .fp-22 { --w: 44px; --vy: -130px; left: 6%;   bottom: 98px; }
  .fp-6  { --w: 38px; --vy: -150px; left: 30%;  bottom: 118px; }
  .fp-24 { --w: 46px; --vy: -140px; right: 28%; bottom: 108px; }
  .fp-23 { --w: 46px; --vy: -120px; right: 4%;  bottom: 92px; }
  /* alsó zóna, 2. sor */
  .fp-13 { --w: 58px; --vy: -110px; left: -10px; bottom: 24px; }
  .fp-21 { --w: 40px; --vy: -150px; left: 30%;   bottom: 30px; }
  .fp-26 { --w: 30px; --vy: -130px; left: 52%;   bottom: 52px; }
  .fp-14 { --w: 40px; --vy: -120px; right: 26%;  bottom: 22px; }
  .fp-20 { --w: 48px; --vy: -140px; right: -10px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .float-band { --p: 0 !important; --tint: 1 !important; }
  .float-prop { animation: none; }
}


/* 19. LÁBLÉC „TÁLJA” — „Kezdd el még ma!” (CSAK a főoldalon, index.html)
   ---------------------------------------------------------------------------------------
   A duolingo.com láblécének mintájára: a cím és a gomb fehér alapon áll, alattuk a rozsda
   sáv középen lekerekített „tálat” formál (SVG, fehér kitöltés a rozsda alapon), és ebben
   lebeg a jogsi, két oldalt, a tál peremén a kormány és a kulcs, a sávra vetett árnyékkal.
   A tál rajza 4000 × 360-as vásznon van, a középpontja x = 2000, a sáv vonala y = 100,
   a tál alja y = 328. A „slice” igazítás miatt a rajz a sáv magasságával skálázódik
   (--s), a szélessége pedig levágódik — így a tál minden szélességen középen, torzítás
   nélkül áll. A tárgyak helye a tál közepéhez és a sáv vonalához mért (--x, --y), a
   méretük --w; --p a tárgyak skálája. Csak transform animálódik; mozgáscsökkentésnél áll. */
.footer-cta__stage {
  --s: 1;
  --p: 1;
  position: relative;
  height: calc(360px * var(--s));   /* a tál alja (y = 328) + 32 px; alatta a rozsda lábléc folytatja */
  margin-top: var(--space-4);
  background: var(--brand);
}
.footer-cta__bowl {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--paper);
}
.footer-cta__props { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; }
.cta-prop,
.cta-shadow {
  position: absolute;
  left: calc(var(--x) * var(--p));
  top: calc(100px * var(--s) + var(--y) * var(--p));
  translate: -50% -50%;
}
.cta-prop {
  width: calc(var(--w) * var(--p));
  max-width: none;
  height: auto;
  transform: rotate(var(--r0));
  animation: cta-bob var(--dur) ease-in-out var(--del) infinite;
  will-change: transform;
}
.cta-shadow {
  width: calc(var(--w) * var(--p));
  height: calc(20px * var(--p));
  border-radius: 50%;
  background: var(--brand-lip);
  opacity: 0.55;
  animation: cta-shadow var(--dur) ease-in-out var(--del) infinite;
}
.cta-prop--licence { --w: 270px; --x: 0px;    --y: 40px;  --r0: -7deg;  --r1: -3deg; --lift: -12px; --dur: 6s;   --del: 0s; }
.cta-prop--wheel   { --w: 158px; --x: -405px; --y: -22px; --r0: -14deg; --r1: -2deg; --lift: -18px; --dur: 7s;   --del: -2.5s; }
.cta-prop--key     { --w: 186px; --x: 415px;  --y: -8px;  --r0: 12deg;  --r1: 4deg;  --lift: -16px; --dur: 6.5s; --del: -4.5s; }
.cta-shadow--wheel { --w: 116px; --x: -430px; --y: 112px; --dur: 7s;   --del: -2.5s; }
.cta-shadow--key   { --w: 130px; --x: 436px;  --y: 112px; --dur: 6.5s; --del: -4.5s; }
@keyframes cta-bob {
  0%, 100% { transform: translateY(0) rotate(var(--r0)); }
  50%      { transform: translateY(var(--lift)) rotate(var(--r1)); }
}
@keyframes cta-shadow {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(0.78); opacity: 0.35; }
}
/* Tablet: a tál és a tárgyak arányosan kisebbek */
@media (max-width: 1199px) {
  .footer-cta__stage { --s: 0.8; --p: 0.8; }
}
@media (max-width: 999px) {
  .cta-prop--wheel   { --x: -350px; }
  .cta-prop--key     { --x: 352px; }
  .cta-shadow--wheel { --x: -366px; }
  .cta-shadow--key   { --x: 370px; }
}
/* Mobil: kisebb tál (a peremei a képernyő széléig érnek), a tárgyak saját helyen */
@media (max-width: 699px) {
  .footer-cta__stage { --s: 0.44; --p: 1; margin-top: var(--space-7); }
  .cta-prop--licence { --w: 150px; --x: 0px;    --y: 22px; }
  .cta-prop--wheel   { --w: 84px;  --x: -132px; --y: 2px; }
  .cta-prop--key     { --w: 96px;  --x: 134px;  --y: 12px; }
  .cta-shadow--wheel { --w: 60px;  --x: -140px; --y: 66px; }
  .cta-shadow--key   { --w: 66px;  --x: 144px;  --y: 66px; }
  .cta-shadow { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-prop, .cta-shadow { animation: none; }
}