/* ============================================================================
   components.css — @layer base + @layer components
   Adamo Platform · nyilvános weboldal
   ----------------------------------------------------------------------------
   Normatív forrás — minden érték innen jön, új döntés NINCS:
     handoff_original/README.md „Képernyők"      — bejelentés-sáv, fejléc, mega-menü, lábléc
     01_design_tokens.md                          — tipográfiai skála, radius, árnyék
     10_layout_jogi_palyazat.md §1.3–§1.11, §3   — a jogi sablon és a lábléc pixelértékei
     13_dark_mode_delta.md §7.1–§7.15             — a hiányzó komponens-szabályok, sötéttel
     14_konsz_implementacio.md §2.3.3             — a horgony-geometria és a sticky TOC
     14_konsz_implementacio.md §2.5.2             — a logó festése tokenből
     14_konsz_url_seo.md §2.4                     — morzsamenü: „Főoldal" + CSS ::after
     08_palyazat_oldal.md §9.3                    — a támogatói fehér alátétdoboz
     15_kanonikus_dontesek.md §6 (1a szelet)      — ez a fájl a harness stílusalapja

   ============================================================================
   MIÉRT KÜLÖN FÁJL, ÉS HOGYAN KAPCSOLÓDIK A layers.css-HEZ
   ============================================================================
   A layers.css az EGYETLEN helye a rétegsorrendnek:

       @layer tokens, theme, base, components, utilities, print;

   A kaszkád-rétegek dokumentumszintűek, és a sorrendet az ELSŐ előfordulás rögzíti.
   Mivel a lap a layers.css-t hivatkozza először, az itt megnyitott
   `@layer base` és `@layer components` blokk automatikusan a helyes pozícióba
   kerül — a tokenek és a téma UTÁN, a nyomtatás ELŐTT. Ezért:

     - a print.css MINDEN itteni szabályt legyőz (a `print` réteg az utolsó), tehát a
       nyomtatás akkor is világos, ha itt sötét-specifikus szabály áll;
     - a fájl sorrendje a <link>-ek között nem befolyásolja a kaszkádot;
     - RÉTEGEN KÍVÜLI SZABÁLY ITT SEM LEHET (1a átvételi kritérium). A fájlban minden
       szabály `@layer base` vagy `@layer components` blokkban van; kivétel csak az
       at-rule-ok (`@font-face`, `@property`, `@keyframes`) lennének, de ilyen most nincs.

   BETŰK: a `--font-display` / `--font-body` önhosztolt betűkre mutat, `system-ui`
   tartaléklánccal (tokens.css §4). A @font-face deklarációk a betűfájlokkal együtt a
   b) szeletben érkeznek; addig a tartaléklánc fut, és a LAYOUT ettől nem csúszik el,
   mert minden méret és térköz px-ben, nem em-ben áll.
   ========================================================================= */


/* ==========================================================================
   @layer base — dokumentum-szintű alapok
   ========================================================================== */
@layer base {

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

  html {
    /* A sötét/világos natív vezérlőket a theme.css `color-scheme`-je adja. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink-600);
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.6;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
  }

  /* A címsorok alapból a display-családot kapják; a konkrét méretet a komponens adja
     (01_design_tokens.md: a marketing-skála szerep-alapú, nem elem-alapú). */
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--ink-900);
    font-weight: 800;
  }

  p, dl, dd, figure { margin: 0 }
  ul, ol { margin: 0; padding: 0 }
  li { list-style: none }

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

  a { color: var(--blue-600) }

  /* A form-elemek nem öröklik a betűt egyik böngészőben sem. */
  button, input, select, textarea { font: inherit; color: inherit; margin: 0 }
  button { background: none; border: 0; padding: 0; cursor: pointer }

  table { border-collapse: collapse }

  /* Vizuálisan rejtett, de felolvasott szöveg. `clip-path` + 1px méret: ez az egyetlen
     alak, ami minden képernyőolvasóval együttműködik, és nem hoz létre görgetést. */
  .u-sr-only {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* JS-függő elem: JS nélkül ne látszódjon halott vezérlő (10 §1.3).
     A `has-js` osztályt a legal-toc.js teszi ki, KIZÁRÓLAG sikeres
     IntersectionObserver után. */
  .js-only { display: none }
  html.has-js .js-only { display: inline-flex }
}


/* ==========================================================================
   @layer components
   ========================================================================== */
@layer components {

  /* ------------------------------------------------------------------------
     1. HORGONY-GEOMETRIA — 14_konsz_implementacio.md §2.3.3, SZÓ SZERINT
     Ez a három szabály a legal-toc.js ADATFORRÁSA: a szkript a `html` elem
     SZÁMÍTOTT scrollPaddingTop-jából olvassa az eltolást (asztali 96px,
     mobil 80px). Enélkül a számított érték „auto", és a szkript a 96px
     fallbackre esik — mobilon tévesen.
     ---------------------------------------------------------------------- */

  /* ELSŐDLEGES horgony-mechanizmus: a görgetési konténeren.
     Ez fedi a :target ugrást, a JS-es scrollIntoView-t, a Ctrl+F-et,
     a Tab-bal való fókusz-görgetést és a böngésző visszalépését is. */
  html{
    scroll-padding-top: var(--anchor-offset);
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto } }

  /* MÁSODLAGOS, védőháló. :where() → 0 specifikusság, tehát semmit nem üt le,
     és mivel ugyanazt a tokent használja, nem tud eltérni. */
  :where([id]){ scroll-margin-top: var(--anchor-offset) }


  /* A DUPLA FÓKUSZGYŰRŰ szabálya a réteg LEGVÉGÉN áll (25. pont) — nem itt.
     Az indoklás ott olvasható: `:where()` mellett a szabály (0,1,0) súlyú, ami
     megegyezik minden komponens-osztályéval, tehát azonos rétegben a
     FORRÁSSORREND dönt. Itt előre írva a `.btn--primary { box-shadow: var(--sh-btn) }`
     legyőzné, és a fókuszgyűrű a márkaszínű CTA-n nem látszódna. */

  /* Ugrólink: az első fókuszálható elem, fókuszban látható. */
  .skip-link {
    position: absolute; left: var(--sp-16); top: var(--sp-8);
    z-index: 200;
    transform: translateY(-200%);
    padding: var(--sp-10) var(--sp-16);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--ink-900);
    font-size: 13.5px; font-weight: 700; text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0) }


  /* ------------------------------------------------------------------------
     3. LOGÓ — 14 §2.5.2: inline SVG, TOKENBŐL festve
     A `--logo-*` tokeneket a theme.css adja (világos/sötét), a `.site-footer`
     és a `.band--navy` scope pedig mindig az inverz készletet — ezért a
     láblécben nincs szükség fehér alátétre és külön SVG-fájlra.
     Nyomtatásban a print.css mindhárom tokent `#000`-ra állítja.
     ---------------------------------------------------------------------- */
  /* `flex: none` NEM dekoráció. A `.site-header__inner` flex-sor, és a logó
     alapértelmezett `flex: 0 1 auto`-val ZSUGORODIK: a 400x128-as kép
     `width:auto` mellett nem kap min-width védelmet, ezért a széles
     navigáció vízszintesen összenyomja. MÉRVE 2026-10-29, 1440px:
     37,3 x 34 px helyett a helyes 106 x 34 px — a logó a 35%-ára préselve. */
  .logo { display: inline-flex; align-items: center; text-decoration: none; flex: none }
  .logo__svg { display: block; height: 30px; width: auto }   /* README: logó 30px */

  .logo__mark { fill: var(--logo-mark) }
  .logo__word {
    fill: var(--logo-word);
    /* SVG <text>: font-family NÉLKÜL a böngésző alap serifjével (Times)
       renderelne — ez volt a fejléc-logó „idegenségének" másik fele. */
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .08em;
  }
  .logo__dot  { fill: var(--logo-dot)  }

  /* Tartalék ág: CMS-ből cserélt raszteres logó, két médiarekord (12. döntés). */
  .logo__img { height: 30px; width: auto; flex: none }
  .logo__img--dark { display: none }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo__img--light { display: none }
    :root:not([data-theme="light"]) .logo__img--dark  { display: block }
  }
  :root[data-theme="dark"] .logo__img--light { display: none }
  :root[data-theme="dark"] .logo__img--dark  { display: block }
  .site-footer .logo__img--light { display: none }
  .site-footer .logo__img--dark  { display: block }


  /* ------------------------------------------------------------------------
     4. BEJELENTÉS-SÁV — README + 13 §7.1
     Teljes szélesség, --announce-bg / --announce-fg tokenpár (sötétben #16307A,
     mert a --blue-600 fölött a fehér 3,39:1 lenne), 12.5px/500, 7px 16px.
     NEM sticky: kiscrollol, ezért nem számít a --header-total-ba.
     ---------------------------------------------------------------------- */
  .announce-bar {
    background: var(--announce-bg);
    color: var(--announce-fg);
    padding: 7px var(--sp-16);
    font-size: 12.5px; font-weight: 500; line-height: 1.5;
    text-align: center;
  }
  .announce-bar a {
    color: #FFFFFF; font-weight: 700;
    text-decoration: underline; text-underline-offset: 2px;
  }
  .announce-bar a:hover { text-decoration-thickness: 2px }


  /* ------------------------------------------------------------------------
     5. FEJLÉC — README (64px, sticky, 1px --border) + 13 §7.2 + 14 §2.3.3
     A magasságot és a safe-area-t a --header-h / --header-safe páros adja;
     `content-box` + `padding-top`, hogy a --header-total pontosan a lefoglalt
     hely legyen, és a --anchor-offset ebből számoljon.
     ---------------------------------------------------------------------- */
  .site-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-h);
    padding-top: var(--header-safe);
    box-sizing: content-box;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(140%) blur(10px);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .site-header { background: var(--page-bg) }
  }

  .site-header__inner {
    /* A megamenü panelje ehhez a dobozhoz igazodik (lásd `.mega-menu`). */
    position: relative;
    max-width: var(--canvas-max);
    margin: 0 auto;
    height: var(--header-h);
    padding: 0 var(--gutter);
    display: flex; align-items: center; gap: var(--sp-18);
  }

  .site-nav { display: flex; align-items: center; gap: var(--sp-2) }

  .site-nav__link {
    display: inline-flex; align-items: center; gap: var(--sp-6);
    padding: var(--sp-8) var(--sp-10);
    border-radius: var(--r-sm);              /* 8px */
    color: var(--ink-600);
    font-size: 14px; font-weight: 600; line-height: 1.2;
    text-decoration: none; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .site-nav__link:hover { background: var(--nav-hover); color: var(--ink-900) }
  .site-nav__link[aria-current="page"] { color: var(--ink-900); font-weight: 700 }

  .site-header__actions {
    margin-left: auto;
    display: flex; align-items: center; gap: var(--sp-10);
  }


  /* ------------------------------------------------------------------------
     6. MEGA-MENÜ — README (940px, top:44px, left:-40px, 16px radius,
     --sh-mega árnyék, 22px 24px 18px padding, 3 oszlop gap 4px 8px) + 13 §7.3
     A harness natív <details>/<summary> nyitószerkezetet használ: kattintásra
     nyílik (nem hover — touch-kompatibilitás), a nyitott állapotot a böngésző
     maga közli a segédtechnikával, és JS nélkül is működik.
     ---------------------------------------------------------------------- */
  /* A megamenü PANELJE NEM a nyitógombhoz igazodik, hanem a fejléc belső
     sávjához: 14 funkcióterülettel a panel szélesebb, mint amennyi a gomb alól
     a jobb szélig elfér. MÉRVE 2026-10-29: tördelésmentes szélesség 1070 px,
     a gomb alól (x=352) viszont csak 1040 fért volna ki 1440 px-es ablakban.
     A bal szél így a tartalom szélére (--gutter) igazodik, a panel pedig a
     rendelkezésre álló helyig nőhet — ez a fordítások hosszabb feliratainak is
     helyet ad, és 1100 px-nél (ahol a mobilmenü átveszi) sem lóg ki. */
  .has-mega { position: static }
  .has-mega > summary { list-style: none }
  .has-mega > summary::-webkit-details-marker { display: none }
  .has-mega > summary::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .has-mega[open] > summary::after { transform: translateY(1px) rotate(225deg) }
  .has-mega[open] > summary { background: var(--nav-hover); color: var(--ink-900) }

  .mega-menu {
    position: absolute; z-index: 110;
    /* A fejlécsáv aljához tapad (a mért 5 px-es átfedéssel, mint eddig). */
    top: calc(100% - 5px);
    left: var(--gutter); right: var(--gutter);
    width: auto; max-width: 1180px;
    padding: 22px 24px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-block);            /* 16px */
    box-shadow: var(--sh-mega);
  }
  /* A MEGA-MENÜ FEJLÉCE. A tervlapon a „FUNKCIÓTERÜLETEK” felirat EGYSZER
     áll, a rács felett — nem csempénként ismételve —, a gyűjtőlapra vezető
     hivatkozással a sor jobb szélén. */
  .mega-menu__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-12); margin-bottom: var(--sp-10);
  }
  .mega-menu__kicker {
    font-family: var(--font-display);
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-500);
  }
  .mega-menu__all {
    font-size: 13px; font-weight: 700; text-decoration: none;
    color: var(--blue-700);
  }
  .mega-menu__all:hover { text-decoration: underline }

  .mega-menu__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 8px;
  }
  /* A CSEMPE KÉT HASÁB: a sorszám balra, a cím és az alcím mellette —
     így a címek egy függőleges vonalra igazodnak, ahogy a terven. */
  .mega-menu__item {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sp-10); align-items: baseline;
    /* A rács azonos magasságúra nyújtja a csempéket; a szöveg ettől még a
       csempe TETEJÉN kezdődik, különben az egysoros címek alatt a leírás
       elúszik a többsoros szomszéd miatt. MÉRVE: 157 → 196 px helyett 157 → 177. */
    align-content: start;
    padding: 10px 12px;
    border: 1px solid transparent; border-radius: var(--r-md);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .mega-menu__item:hover { background: var(--blue-50); border-color: var(--blue-200) }
  .mega-menu__num {
    grid-column: 1; grid-row: 1;
    font-family: var(--font-display);
    font-size: 12px; font-weight: 800; letter-spacing: .04em;
    color: var(--ink-500); font-variant-numeric: tabular-nums;
  }
  .mega-menu__title {
    grid-column: 2; grid-row: 1;
    display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: 14.5px; font-weight: 700; line-height: 1.3;
    color: var(--ink-900);
  }
  .mega-menu__sub {
    grid-column: 2; grid-row: 2;
    margin-top: 1px;
    font-size: 12.5px; line-height: 1.45; color: var(--ink-500);
  }
  /* „Egyedi modul” szaggatott hely: kattintható, tehát 3:1 kell → --ink-300 */
  .mega-menu__item--custom {
    border: 2px dashed var(--ink-300);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center; align-content: center;
  }
  .mega-menu__item--custom .mega-menu__title { grid-row: 1 }
  .mega-menu__item--custom:hover { border-color: var(--blue-600); background: var(--blue-50) }

  /* KESKENY LENYÍLÓ (tervlap: „Miért Adamo?"). Ez NEM a fejléchez igazodik,
     hanem a nyitógombhoz: egyetlen hasáb, 288 px, bőven elfér alatta. */
  .has-drop { position: relative }
  .mega-menu--narrow {
    top: 44px; left: -12px; right: auto;
    width: 288px; max-width: calc(100vw - 2 * var(--gutter));
    padding: 14px 10px;
  }
  .nav-drop__group + .nav-drop__group {
    margin-top: var(--sp-10); padding-top: var(--sp-10);
    border-top: 1px solid var(--border);
  }
  .nav-drop__item {
    display: block;
    /* hittarget ≥ 44 px, akkor is, ha nincs alcím */
    min-height: 44px; padding: 8px 12px;
    border: 1px solid transparent; border-radius: var(--r-md);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .nav-drop__item:hover { background: var(--blue-50); border-color: var(--blue-200) }
  .nav-drop__title {
    display: block;
    font-family: var(--font-display);
    font-size: 14.5px; font-weight: 700; line-height: 1.3;
    color: var(--ink-900);
  }
  .nav-drop__sub {
    display: block; margin-top: 1px;
    font-size: 12.5px; line-height: 1.45; color: var(--ink-500);
  }
  /* A „továbbvezető" pont a tervlapon kék, nyíllal — alcím nélkül. */
  .nav-drop__item--cta .nav-drop__title { color: var(--blue-700) }

  /* CSOPORTOS MEGAMENÜ (iparágak). A tervlapon négy tematikus hasáb áll,
     fejléccel, alatta puszta hivatkozáslistával — se sorszám, se alcím. */
  .mega-menu__groups {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-10) var(--sp-18);
    align-items: start;
  }
  .mega-group { display: flex; flex-direction: column; gap: 2px }
  .mega-group__title {
    padding: 0 12px 6px;
    font-family: var(--font-display);
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-500);
  }
  .mega-group__link {
    display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap;
    /* A hittarget legalább 40 px magas: a lista sűrű, de ujjal is használható. */
    min-height: 40px; padding: 8px 12px;
    border: 1px solid transparent; border-radius: var(--r-md);
    font-family: var(--font-display);
    font-size: 14.5px; font-weight: 700; line-height: 1.3;
    color: var(--ink-900); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .mega-group__link:hover { background: var(--blue-50); border-color: var(--blue-200) }

  /* Egyetlen hivatkozás a lábsávban: ne nyúljon a hasáb teljes szélességére. */
  .mega-menu__foot--one { grid-template-columns: max-content; justify-content: start }

  .mega-menu__foot {
    /* HÁROM elem (2026-10-29): két Upkeep-Pro kiemelés + a demó-gomb. A
       gyűjtőlapra vezető hivatkozás a terv szerint a FEJLÉC jobb szélén áll
       („Összes funkció →"), nem a lábsávban. */
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-10);
    margin-top: var(--sp-14); padding-top: var(--sp-14);
    border-top: 1px solid var(--border);
  }
  .mega-menu__promo {
    display: flex; align-items: center; gap: var(--sp-8);
    padding: var(--sp-10) var(--sp-12);
    border-radius: var(--r-md);
    background: var(--blue-100); color: var(--blue-700);
    font-size: 13px; font-weight: 700; text-decoration: none;
  }
  .mega-menu__promo:hover { background: var(--blue-50) }
  .mega-menu__badge {
    padding: 2px var(--sp-8); border-radius: var(--r-chip);
    background: var(--orange-100); color: var(--orange-700);
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  }
  .mega-menu__demo {
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-10) var(--sp-12);
    border-radius: var(--r-md);
    background: var(--surface-dark);
    border: 1px solid var(--border-strong);
    color: #FFFFFF;
    font-size: 13px; font-weight: 700; text-decoration: none;
  }


  /* ------------------------------------------------------------------------
     7. GOMBOK — 13 §7.14
     A `color: var(--page-bg)` SZÁNDÉKOS és mindkét témában helyes:
     világosban #FFFFFF a --blue-600-on (5,15:1), sötétben #0A1428 a
     #5B84FF-on (5,41:1). A fehér sötétben 3,39:1 lenne — tilos.
     ---------------------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
    border-radius: var(--r-md);              /* 9px */
    font-size: 13.5px; font-weight: 700; line-height: 1;
    text-decoration: none; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .btn--primary {
    padding: 10px 18px;                      /* README: elsődleges CTA */
    background: var(--blue-600);
    color: var(--page-bg);
    box-shadow: var(--sh-btn);
  }
  .btn--primary:hover { background: var(--blue-700); color: var(--page-bg) }

  .btn--secondary {
    padding: 9px 16px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--ink-900);
  }
  .btn--secondary:hover { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-700) }

  .btn--quiet {
    padding: var(--sp-8) var(--sp-10);
    color: var(--ink-600); font-weight: 600;
  }
  .btn--quiet:hover { background: var(--nav-hover); color: var(--ink-900) }

  .btn--ghost {
    padding: 9px 16px;
    border: 1px solid var(--border-strong);
    color: #FFFFFF;
  }

  /* Külső link jelzése (14. döntés: az ügyfélportál külön rendszer) */
  .is-external::after { content: " ↗"; font-weight: 600 }


  /* ------------------------------------------------------------------------
     8. TÉMA-KAPCSOLÓ — 13 §4.3
     34×34px asztalon, MIN. 44×44px mobilon. A kerete --border-strong (3,48:1),
     mert a gombnak ez az EGYETLEN affordanciája.
     JS nélkül rejtve: nem működne, a rendszer-preferencia viszont érvényesül.
     A feliratot a `.u-sr-only` <span> adja — a theme-switch.js sosem ír
     textContentet, csak aria-* és data-* attribútumot, tehát ez kompatibilis.
     ---------------------------------------------------------------------- */
  .no-js .theme-switch { display: none }

  .theme-switch {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);              /* 9px */
    background: var(--surface);
  }
  .theme-switch button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 7px;
    color: var(--ink-600);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .theme-switch button:hover { background: var(--nav-hover); color: var(--ink-900) }
  .theme-switch button[aria-pressed="true"] {
    background: var(--blue-100);
    color: var(--blue-700);
  }
  .theme-switch__icon { width: 17px; height: 17px; fill: none;
    stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }


  /* ------------------------------------------------------------------------
     9. NYELVVÁLASZTÓ
     Natív <details> lenyíló: kattintásra nyílik (nem hover), JS nélkül működik,
     a nyitott állapotot a böngésző közli a segédtechnikával.
     ---------------------------------------------------------------------- */
  .lang-switch { position: relative }
  .lang-switch > summary {
    display: inline-flex; align-items: center; gap: var(--sp-6);
    height: 34px; padding: 0 var(--sp-10);
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    color: var(--ink-600);
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    list-style: none; cursor: pointer;
  }
  .lang-switch > summary::-webkit-details-marker { display: none }
  .lang-switch > summary:hover { background: var(--nav-hover); color: var(--ink-900) }
  .lang-switch__panel {
    position: absolute; top: 40px; right: 0; z-index: 110;
    min-width: 168px; padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-pop);
  }
  .lang-switch__panel a {
    display: flex; align-items: center; gap: var(--sp-10);
    padding: var(--sp-8) var(--sp-10);
    border-radius: var(--r-sm);
    color: var(--ink-600); font-size: 13px; font-weight: 600; text-decoration: none;
  }
  .lang-switch__panel a:hover { background: var(--nav-hover); color: var(--ink-900) }
  .lang-switch__panel a[aria-current="true"] { color: var(--blue-700); background: var(--blue-100) }
  .lang-switch__code {
    min-width: 26px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
    color: var(--ink-500);
  }
  .lang-switch__panel a[aria-current="true"] .lang-switch__code { color: var(--blue-700) }


  /* ------------------------------------------------------------------------
     10. MORZSAMENÜ — 14_konsz_url_seo.md §2.4
     A gyökércímke MINDEN oldalon „Főoldal”, és megegyezik a BreadcrumbList
     JSON-LD első elemével. Az ELVÁLASZTÓ CSS `::after`, NEM szöveges csomópont:
     így a másolt szövegbe és a felolvasásba nem kerül bele a » jel.
     Szín: 12,5px-es segédszöveg → --ink-500, NEM --ink-400 (10 §1.1 delta).
     ---------------------------------------------------------------------- */
  .crumbs {
    max-width: var(--canvas-max);
    margin: 0 auto;
    padding: 26px var(--gutter) 0;
    font-size: 12.5px; line-height: 1.5;
  }
  .crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-8) }
  .crumbs__list > li { display: inline-flex; align-items: center; gap: var(--sp-8) }
  .crumbs__list > li:not(:last-child)::after {
    content: "»";
    color: var(--ink-500);                   /* dekoratív, nem szöveg (13 §7.11) */
    font-size: 12px; line-height: 1;
  }
  .crumbs a { color: var(--ink-500); text-decoration: none }
  .crumbs a:hover { color: var(--blue-700); text-decoration: underline }
  /* 10 §1.3: az aktuális elem --ink-900 / 600. Mindkét témában AA. */
  .crumbs [aria-current="page"] { color: var(--ink-900); font-weight: 600 }


  /* ------------------------------------------------------------------------
     11. SÁVOK — 13 §7.4, §7.7
     Sötétben a felület-párok 1,04–1,25:1-ben folynak egybe, ezért a sávok
     határát szegély jelöli, nem a világosság-különbség. A .band--warm
     ink-felülírását a theme.css adja (scope-olt, nem globális token).
     ---------------------------------------------------------------------- */
  .band { padding: 44px var(--gutter) 46px }
  .band__inner { max-width: var(--canvas-max); margin: 0 auto }
  .band--white { background: var(--surface) }
  .band--cool  { background: var(--surface-cool);  border-top: 1px solid var(--border-subtle) }
  .band--warm  { background: var(--surface-warm);  border-top: 1px solid var(--border-subtle) }
  /* A FUNKCIÓTERÜLET-SÁV SAJÁT HIDEG ÁRNYALATA. Lásd --surface-cool-area:
     a terv itt #F4F7FD-t használ, nem #F5F8FC-t. Egy árnyalat, de a
     /funkciok 6 sávján végigfut. */
  .band--cool.band--feature-area-band { background: var(--surface-cool-area) }

  .band--navy  {
    background: var(--surface-dark);
    color: #FFFFFF;
    border-block: 1px solid var(--blue-200);
  }
  .band--navy .btn--primary { background: var(--blue-600); color: var(--page-bg) }
  .band--navy .btn--ghost   { border: 1px solid var(--border-strong); color: #FFFFFF }

  /* KIEMELŐ GOMB — a terv lapzáró felhívásának narancs gombja.

     SPEC-KÉRDÉS (NYITOTT_KERDESEK.md): a terv `#F0691F` (--orange-600) hátteret
     ír fehér, 15px/700 felirattal. Az a párosítás 3,11:1 — a WCAG AA 4,5:1-et
     kér ekkora szövegre, és a tokenfájl is kimondja, hogy az --orange-600 CSAK
     kitöltés és ikon. A legközelebbi, szabályos árnyalatot választom:
     --orange-700 (#BA4C0D), fehérrel 5,09:1. Látványban ugyanaz a jel, de nem
     sérti a 04_biztonsag/akadálymentesítési küszöböt. A megbízó döntheti úgy,
     hogy a terv színe marad — akkor a felirat méretét kell emelni. */
  .btn--accent {
    /* A `.btn` ALAPNAK NINCS BELSŐ TERE — azt minden változat maga adja.
       Enélkül a gomb csak színes SZÖVEGKÉNT renderelt, doboz nélkül.
       MÉRVE 2026-10-30: `padding: 0px`. A terv jelölése: `13px 28px`,
       `border-radius:10px`, 15px/700. */
    padding: 13px 28px;
    background: var(--orange-700);
    color: #FFFFFF;
    font-size: 15px; font-weight: 700;
    border-radius: 10px;
  }
  .btn--accent:hover { background: var(--orange-600); color: #0C1B33 }

  /* A lapzáró felhívás középre zárt, mint a terven. */
  .band--zaro-cta .band__inner { text-align: center }
  .band--zaro-cta .band__lead  { margin: 0 auto 24px; max-width: 46ch }

  .cta-band { padding: 48px var(--gutter) }

  /* Pöttyrács motívum — 13 §7.15, dekoratív, aria-hidden */
  .dotgrid {
    background-image: radial-gradient(circle, var(--dotgrid) 1.6px, transparent 1.6px);
    background-size: 22px 22px;
  }


  /* ------------------------------------------------------------------------
     12. „MINTA” JELÖLÉS — 13 §7.13 (content_state = 'sample')
     ---------------------------------------------------------------------- */
  .sample-flag {
    display: inline-block;
    background: var(--orange-50);
    border: 1px solid var(--orange-200);
    color: var(--orange-700);
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    border-radius: var(--r-chip); padding: 4px 10px;
  }
  .sample-note {
    display: flex; align-items: flex-start; gap: var(--sp-12);
    margin: 0 0 30px; padding: var(--sp-14) var(--sp-18);
    background: var(--orange-50);
    border: 1px solid var(--orange-200);
    border-radius: var(--r-card);
    font-size: 13.5px; line-height: 1.55;
    color: var(--orange-700);
  }
  .sample-note strong { color: var(--orange-700); font-weight: 800 }


  /* ------------------------------------------------------------------------
     13. JOGI HERO ÉS META SOR — 10 §1.3
     ---------------------------------------------------------------------- */
  .legal-hero {
    padding: 22px var(--gutter) 32px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
    border-bottom: 1px solid var(--border);
  }
  .legal-hero__inner { max-width: var(--canvas-max); margin: 0 auto }
  .legal-hero .kicker {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
    color: var(--orange-700);
  }
  .legal-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 44px; font-weight: 800; line-height: 1.08; letter-spacing: -0.025em;
    color: var(--ink-900);
    max-width: 20ch;
    text-wrap: balance;
  }

  .legal-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 14px;
    margin-top: 20px;
  }
  .legal-chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 13px;
    border-radius: var(--r-chip);
    background: var(--surface); border: 1px solid var(--border-strong);
    font-size: 12.5px; font-weight: 600; line-height: 1;
    color: var(--ink-600);
    white-space: nowrap;
  }
  .legal-chip--live {
    background: var(--blue-100); border-color: var(--blue-200); color: var(--blue-700);
  }
  .legal-chip--live::before {                /* zöld pötty: „ez a hatályos” */
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green-600); flex: 0 0 6px;
  }
  .legal-meta__link {
    font-size: 12.5px; font-weight: 700; color: var(--blue-600); text-decoration: none;
  }
  .legal-meta__link:hover { color: var(--blue-700); text-decoration: underline }

  .legal-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-10) }

  .legal-print {
    height: 34px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink-600);
    font: 600 13px/1 var(--font-body); cursor: pointer;
    align-items: center;
  }
  .legal-print:hover { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-700) }


  /* ------------------------------------------------------------------------
     14. KÉTOSZLOPOS TÖRZS — 10 §1.4
     Geometria 1440px-en: 48 + 264 + 56 + 640 + [384 szabad] + 48 = 1440.
     A 384px szabad sáv SZÁNDÉKOSAN üres: ide fut ki a .legal-wide.
     ---------------------------------------------------------------------- */
  .legal-grid {
    display: grid;
    grid-template-columns: var(--legal-toc-w) minmax(0, var(--legal-col));
    column-gap: var(--legal-gap);
    max-width: var(--canvas-max);
    margin: 0 auto;
    padding: 40px var(--gutter) 84px;
    background: var(--surface);
  }
  .legal-wide {
    margin-right: calc(-1 * var(--legal-breakout));
    max-width: none;
  }

  /* Sticky tartalomjegyzék — 14 §2.3.3: CSAK asztali szélességen sticky. */
  @media (min-width: 901px) {
    .legal-toc {
      position: sticky;
      top: calc(var(--header-total) + 24px);
      align-self: start;
      max-height: calc(100dvh - var(--header-total) - 48px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding-right: 4px;
    }
    /* Asztalin a <details> nyitva áll, a <summary> nem interaktív. */
    .legal-toc > summary { display: block; list-style: none; cursor: default; pointer-events: none }
    .legal-toc > summary::-webkit-details-marker { display: none }
  }

  /* content-visibility a jogi dokumentumon KIKAPCSOLVA (10 §1.4): elrontja a
     Ctrl+F-et és a horgony-pozíciót — egy jogi szövegben mindkettő alapfunkció. */
  .legal-prose { content-visibility: visible }


  /* ------------------------------------------------------------------------
     15. TARTALOMJEGYZÉK — 10 §1.9
     Az aktív jelölés `aria-current="true"` az <a>-n (NEM osztály): a
     legal-toc.js ezt írja ki, és így a képernyőolvasó is megkapja.
     ---------------------------------------------------------------------- */
  .legal-toc__title {
    display: block; margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-500);
  }
  .legal-toc__sub { margin: 2px 0 }
  .legal-toc__link {
    display: block;
    padding: 7px 12px;
    border-radius: var(--r-md);              /* 9px */
    font-size: 13.5px; line-height: 1.45; font-weight: 500;
    color: var(--ink-500);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .legal-toc__link b {
    color: var(--ink-400); font-weight: 700; margin-right: 6px;
    font-variant-numeric: tabular-nums;
  }
  .legal-toc__link:hover { background: var(--blue-50); color: var(--ink-900) }

  .legal-toc__link[aria-current="true"] {
    background: var(--legal-toc-active-bg);
    color: var(--blue-700); font-weight: 700;
    box-shadow: inset 2px 0 0 var(--blue-600);
  }
  .legal-toc__link[aria-current="true"] b { color: var(--blue-600) }

  .legal-toc__link--sub { padding: 5px 12px 5px 30px; font-size: 12.5px }

  /* Alpontok: JS-szel csak az AKTÍV szakasz alatt látszanak; JS nélkül MIND (10 §1.9).
     A kanonikus legal-toc.js (14 §2.3.4) KIZÁRÓLAG `aria-current`-et ír, osztályt nem —
     ezért a nyitást `:has()` végzi ugyanabból a jelzésből. A `@supports` guard azt zárja
     ki, hogy egy `:has()`-t nem ismerő böngészőben az alpontok VÉGLEG eltűnjenek:
     ott a szabály be sem lép, és minden alpont látszik, mint JS nélkül. */
  @supports selector(:has(*)) {
    html.has-js .legal-toc__sub { display: none }
    html.has-js .legal-toc__list > li:has(> .legal-toc__link[aria-current="true"]) > .legal-toc__sub,
    html.has-js .legal-toc__list > li:has(.legal-toc__sub .legal-toc__link[aria-current="true"]) > .legal-toc__sub {
      display: block;
    }
  }


  /* ------------------------------------------------------------------------
     16. SZÖVEGTÖRZS — 10 §1.5 (longform tokenek)
     Törzsszín --ink-600 (9,06:1 fehéren / 12,30:1 sötét page-bg-n), NEM --ink-500.
     ---------------------------------------------------------------------- */
  .legal-prose {
    font-family: var(--font-body);
    font-size: var(--fs-read);               /* 16px */
    line-height: var(--lh-read);             /* 1.7 (≤900px: 1.65) */
    color: var(--ink-600);
    max-width: var(--measure-read);          /* 72ch — biztonsági felső korlát */
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }

  .legal-prose h2 {
    margin: var(--sp-read-h2) 0 14px;        /* 56 / 14 */
    font-family: var(--font-display);
    font-size: 26px; font-weight: 800; line-height: 1.22; letter-spacing: -0.015em;
    color: var(--ink-900);
    padding-top: 22px;
    border-top: 1px solid var(--border-subtle);
  }
  .legal-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0 }

  .legal-prose h3 {
    margin: var(--sp-read-h3) 0 10px;        /* 32 / 10 */
    font-family: var(--font-display);
    font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
    color: var(--ink-900);
  }
  .legal-prose h4 {
    margin: 22px 0 8px;
    font-family: var(--font-body);
    font-size: 16px; font-weight: 700; line-height: 1.4;
    color: var(--ink-900);
  }

  /* A szakaszszám VALÓDI SZÖVEG, nem CSS counter (10 §1.2): egy jogi pontra
     szám szerint hivatkoznak, tehát másolhatónak és Ctrl+F-fel kereshetőnek
     kell lennie. */
  .legal-prose .sec-num {
    display: inline-block; margin-right: 10px;
    color: var(--blue-600);
    font-variant-numeric: tabular-nums;
  }
  .legal-prose h3 .sec-num,
  .legal-prose h4 .sec-num { color: var(--ink-500); margin-right: 8px }

  .legal-prose p { margin: 0 0 var(--sp-read-p) }     /* 18px */
  .legal-prose > *:last-child { margin-bottom: 0 }

  .legal-prose ul,
  .legal-prose ol { margin: 0 0 var(--sp-read-p); padding-left: 24px }
  .legal-prose li { margin-bottom: 8px; list-style: revert }
  .legal-prose li::marker { color: var(--blue-600) }

  .legal-prose a {
    color: var(--blue-600);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  .legal-prose a:hover { color: var(--blue-700) }
  .legal-prose strong { color: var(--ink-900); font-weight: 700 }

  /* Szakasz-horgony (#) */
  .legal-prose .anchor {
    margin-left: 10px;
    font-weight: 700; text-decoration: none;
    color: var(--ink-300);
    opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
  }
  .legal-prose :is(h2, h3):hover .anchor,
  .legal-prose .anchor:focus-visible { opacity: 1 }
  @media (hover: none) { .legal-prose .anchor { opacity: 1; color: var(--ink-300) } }

  /* :target kiemelés — a JS NÉLKÜLI visszajelzés (10 §1.5) */
  .legal-prose :is(h2, h3):target {
    box-shadow: inset 3px 0 0 var(--blue-600);
    padding-left: 16px;
    margin-left: -19px;                      /* a szöveg optikai helyben marad */
    transition: box-shadow var(--dur-base) var(--ease-out);
  }

  /* Definíciós lista — fogalommeghatározások */
  .legal-defs {
    margin: 0 0 26px;
    padding-left: 20px;
    border-left: 2px solid var(--blue-200);
  }
  .legal-defs dt {
    margin-top: 16px;
    font-family: var(--font-body);
    font-size: 16px; font-weight: 700; line-height: 1.4;
    color: var(--ink-900);
  }
  .legal-defs dt:first-child { margin-top: 0 }
  .legal-defs dd {
    margin: 5px 0 0;
    font-size: var(--fs-read); line-height: var(--lh-read);
    color: var(--ink-600);
  }

  .legal-note {
    margin: 0 0 var(--sp-read-p);
    padding-left: var(--sp-16);
    border-left: 2px solid var(--border-strong);
    font-size: var(--fs-read-sm); line-height: 1.6;
    color: var(--ink-500);
  }


  /* ------------------------------------------------------------------------
     17. TÁBLÁZATOK — 10 §1.6 (legal_data_table) és 13 §7.10 (table blokk)
     ---------------------------------------------------------------------- */
  .legal-figure { margin: 0 0 30px }

  .legal-table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-card);            /* 13px */
    overflow: hidden;
    background: var(--surface);
    font-size: var(--fs-read-sm);            /* 14.5px */
    line-height: 1.55;
    color: var(--ink-600);
  }
  .legal-table caption {
    caption-side: top; text-align: left;
    margin-bottom: 10px;
    font-size: 13px; font-weight: 600; color: var(--ink-500);
  }
  .legal-table thead th {
    background: var(--table-head-bg);
    padding: 12px 16px;
    text-align: left; vertical-align: bottom;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-500);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .legal-table td {
    padding: 14px 16px;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
  }
  .legal-table tbody tr:nth-child(even) td { background: var(--table-zebra-bg) }
  .legal-table tbody tr:last-child td { border-bottom: 0 }
  .legal-table code,
  .legal-table .cookie-name {
    font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-900);
  }

  /* OSZLOPSZÉLESSÉGEK — 10 §1.6.
     A `<col>` szélessége OSZTÁLYBÓL jön, nem `style=""` attribútumból: a CSP-ben
     `style-src-attr 'none'` áll (15 §4.6), tehát inline stílusattribútum a
     nyilvános oldalon NEM működik. A két kanonikus kiosztás:
       A) purposes / retention — 26% / 18% / 32% / 24%
       B) cookies              — 20% / 30% / 13% / 15% / 22%  */
  .legal-table--purposes col:nth-child(1) { width: 26% }
  .legal-table--purposes col:nth-child(2) { width: 18% }
  .legal-table--purposes col:nth-child(3) { width: 32% }
  .legal-table--purposes col:nth-child(4) { width: 24% }

  .legal-table--cookies col:nth-child(1) { width: 20% }
  .legal-table--cookies col:nth-child(2) { width: 30% }
  .legal-table--cookies col:nth-child(3) { width: 13% }
  .legal-table--cookies col:nth-child(4) { width: 15% }
  .legal-table--cookies col:nth-child(5) { width: 22% }

  /* Általános táblázat-blokk (13 §7.10) */
  .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px }
  .tbl caption { color: var(--ink-500); text-align: left; padding-bottom: 8px }
  .tbl thead th {
    background: var(--surface-sunken); color: var(--ink-600);
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 10px 14px; text-align: left;
  }
  .tbl td { color: var(--ink-500); padding: 12px 14px; border-top: 1px solid var(--border-subtle) }
  .tbl tbody tr:hover td { background: var(--surface-sunken) }
  .tbl__wrap { overflow-x: auto }
  /* Zebra sötétben tilos: 1,11:1 nem látszik, a rétegzett átlátszóság viszont
     rontja a szövegkontrasztot (13 §7.10). A --table-zebra-bg tokent a theme
     réteg adja; a módosító sötétben transparent-re esik. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tbl--zebra tbody tr:nth-child(even) td { background: transparent }
  }
  :root[data-theme="dark"] .tbl--zebra tbody tr:nth-child(even) td { background: transparent }

  /* Sötétben a --sh-* árnyék láthatatlan → a lap élét szegély hordozza (10 §1.10). */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .legal-table,
    :root:not([data-theme="light"]) .legal-table tbody tr { border-color: var(--border-strong) }
  }
  :root[data-theme="dark"] .legal-table,
  :root[data-theme="dark"] .legal-table tbody tr { border-color: var(--border-strong) }


  /* ------------------------------------------------------------------------
     18. „KAPCSOLAT AZ ADATKEZELŐVEL” KÁRTYA — 10 §1.7
     ---------------------------------------------------------------------- */
  .legal-contact {
    margin-top: 48px;
    padding: 28px 30px;
    background: var(--blue-50);
    border: 1px solid var(--blue-200);
    border-radius: var(--r-panel);           /* 14px */
  }
  .legal-contact h2 {
    margin: 0 0 6px; padding: 0; border: 0;
    font-family: var(--font-display);
    font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em;
    color: var(--ink-900);
  }
  .legal-contact__lead {
    margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--ink-500);
  }
  .legal-contact__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px; row-gap: 0;
  }
  .legal-contact__row {
    display: grid; grid-template-columns: 150px minmax(0, 1fr);
    gap: 2px 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--blue-200);
    font-size: 14.5px; line-height: 1.5;
  }
  .legal-contact__row dt {
    font-weight: 700; color: var(--ink-500); font-size: 12.5px;
    letter-spacing: .03em; text-transform: uppercase; padding-top: 2px;
  }
  .legal-contact__row dd { margin: 0; color: var(--ink-900); font-weight: 500 }
  .legal-contact__row a { color: var(--blue-700); font-weight: 600 }
  .legal-contact__authority {
    grid-column: 1 / -1;
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--blue-200);
    font-size: 13.5px; line-height: 1.6; color: var(--ink-600);
  }


  /* ------------------------------------------------------------------------
     19. STRUKTURÁLT ADATKÁRTYA (`data_card`) — 10 §2.3
     Ugyanez a komponens szolgálja a jogi „Kapcsolat” kártyát és a pályázati
     projektadatlapot.
     ---------------------------------------------------------------------- */
  .data-card {
    background: var(--surface-cool);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);           /* 14px */
    padding: 26px 30px;
    margin: 0 0 34px;
  }
  .data-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 18px;
  }
  /* A szelektor SZÁNDÉKOSAN kétosztályos (0,2,0): a kártya a longform törzsben is
     állhat, és ott a `.legal-prose h3` (0,1,1) egyébként legyőzné a méretét és a
     szakasz-térközét. */
  .data-card .data-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
    color: var(--ink-900);
  }
  .data-card__list { margin: 0 }
  .data-card__row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 4px 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .data-card__row:last-child { border-bottom: 0; padding-bottom: 0 }
  .data-card__row dt {
    font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--ink-500);
    padding-top: 3px;
  }
  .data-card__row dd {
    margin: 0;
    font-size: 15.5px; line-height: 1.5; font-weight: 500;
    color: var(--ink-900);
  }
  .data-card__row dd.is-number {
    font-family: var(--font-display); font-weight: 800; font-size: 17px;
    font-variant-numeric: tabular-nums;
  }

  .grant-status {
    display: inline-flex; align-items: center; gap: 7px;
    height: 28px; padding: 0 12px; border-radius: var(--r-chip);
    font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
  }
  .grant-status--active { background: var(--blue-100); color: var(--blue-700) }
  .grant-status--closed { background: var(--green-100); color: var(--green-700) }
  .grant-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }


  /* ------------------------------------------------------------------------
     20. ALÁTÉTEK — .plate (idegen márkajel) és .brand-plate (TÁMOGATÓI)
     13 §6.2 + 08 §9.3.
     A kettő NEM ugyanaz:
       .plate       → --plate #E7EDF6, sötétben is VILÁGOS alátét idegen logónak
                      és világos UI-t ábrázoló képernyőfotónak;
       .brand-plate → a támogatói arculati elem alátéte, LITERÁL #FFFFFF, sötétben
                      is, mert az elem arculati kényszerből nem színezhető át.
     A theme.css mindkettőn a VILÁGOS ink-skálát kényszeríti (a sötét --ink-400
     ott 2,61:1 lenne).
     ---------------------------------------------------------------------- */
  .plate {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--sp-14) var(--sp-18);
    background: var(--plate);
    border: 1px solid var(--plate-border);
    border-radius: var(--r-card);
  }

  .brand-plate {
    background: #FFFFFF;                     /* LITERÁL, nem token — a token sötétben átváltana */
    border: 1px solid var(--border);
    border-radius: var(--r-card);            /* 13px */
    padding: 24px;                           /* = minimális arculati védőzóna */
    display: flex; justify-content: center;
    max-width: 688px;                        /* 640px kép + 2 × 24px padding */
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .brand-plate img,
  .brand-plate svg {
    display: block; width: 100%; height: auto; max-width: 640px;
    /* TILTÓLISTA (08 §9.3): az arculati elem soha nem színezhető át. */
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  .brand-plate-wrap { margin: 0 0 34px }
  .brand-plate-wrap figcaption {
    margin-top: 10px; font: 400 12.5px/1.5 var(--font-body); color: var(--ink-500);
  }

  /* Sötét mód — a doboz FEHÉR MARAD, csak a szegély és az árnyék hangolódik. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-plate {
      border-color: rgba(255,255,255,.14); box-shadow: 0 24px 56px rgba(0,0,0,.55);
    }
  }
  :root[data-theme="dark"] .brand-plate {
    background: #FFFFFF; border-color: rgba(255,255,255,.14);
    box-shadow: 0 24px 56px rgba(0,0,0,.55);
  }
  :root[data-theme="light"] .brand-plate {
    background: #FFFFFF; border-color: var(--border); box-shadow: none;
  }

  /* Kényszerített színek (Windows nagy kontraszt) — az OS se invertálhassa. */
  @media (forced-colors: active) {
    .brand-plate { forced-color-adjust: none; background: #FFFFFF; border: 1px solid #D0D5DD }
  }

  /* Arculati infoblokk-alátét (--legal-plate-*): a támogatói logóblokk kerete. */
  .funding-identity {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: 100%; max-width: 380px;
    padding: 22px 24px;
    background: var(--legal-plate-bg);       /* #FFFFFF — sötétben is */
    border: 1px solid var(--legal-plate-border);
    border-radius: var(--r-block);           /* 16px */
    box-shadow: 0 0 0 6px var(--legal-plate-ring);
  }
  .funding-identity img,
  .funding-identity svg {
    width: 100%; max-width: 300px; min-width: 230px; height: auto;
    filter: none !important; mix-blend-mode: normal !important;
  }
  .funding-identity figcaption {
    margin: 0; font-size: 12px; line-height: 1.5; text-align: center;
    color: #3A4964;                          /* FIX világos ink-600 — a lap mindig fehér */
  }


  /* ------------------------------------------------------------------------
     21. LÁTOGATÁSMÉRÉS-KIKAPCSOLÓ (`analytics_optout`) — gdpr §8.5
     MINDEN felirat data-attribútumból jön (az optout.js-ben egyetlen szöveg
     sincs), ezért itt csak elrendezés van.
     ---------------------------------------------------------------------- */
  .optout {
    margin: 0 0 var(--sp-read-p);
    padding: 20px 22px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
  }
  .optout__state {
    margin: 0 0 var(--sp-14);
    font-size: var(--fs-read-sm); line-height: 1.6; color: var(--ink-600);
  }
  .optout__state:empty { display: none }
  .optout noscript p { margin: 0; font-size: var(--fs-read-sm); color: var(--ink-600) }


  /* ------------------------------------------------------------------------
     22. NYOMTATÁSI FEJ/LÁB tartalma — 10 §1.12
     A megjelenítést a print.css adja (`.print-only` képernyőn `display:none`,
     nyomtatásban `block`). Itt CSAK a belső elrendezés áll, hogy a print réteg
     ne kényszerüljön tipográfiát ismételni.
     ---------------------------------------------------------------------- */
  .print-head__row,
  .print-foot__row { display: block }
  .print-head strong { font-weight: 700 }


  /* ------------------------------------------------------------------------
     23. LÁBLÉC — 10 §3, 13 §7.8
     Az ink-skálát a theme.css `.site-footer` scope-ja invertálja (a navy lábléc
     VILÁGOS módban is sötét felület), ezért itt tokenek állnak, nem rgba-literálok:
     oszlopcímek --ink-900, linkek --ink-600 (11,86:1), copyright/jogi/nyelv
     --ink-400 (5,77:1). A prototípus rgba(255,255,255,.40)-je MINDKÉT témában
     bukik (3,76–3,79:1) — ezért nem használjuk.
     ---------------------------------------------------------------------- */
  .site-footer {
    background: var(--footer);
    padding: 56px var(--gutter) 30px;
    font-size: 13px; line-height: 2;
  }
  .site-footer__inner { max-width: var(--canvas-max); margin: 0 auto }
  .site-footer__cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
    gap: 32px;
  }
  .site-footer h2 {
    margin: 0 0 var(--sp-8);
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-900);
    line-height: 1.4;
  }
  .site-footer a { color: var(--ink-600); text-decoration: none }
  .site-footer a:hover { color: var(--ink-700); text-decoration: underline }
  .site-footer__lead { margin: var(--sp-14) 0 var(--sp-12); color: var(--ink-600); max-width: 34ch }
  .site-footer__contact { color: var(--ink-600) }
  .site-footer__contact li { line-height: 1.8 }
  .site-footer__social { display: flex; gap: var(--sp-14); margin-top: var(--sp-10) }

  .footer-legal {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 22px;
    margin-top: 34px; padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 12.5px; line-height: 1.5;
  }
  .footer-copy { color: var(--ink-400) }
  .footer-legal__nav { display: flex; flex-wrap: wrap; gap: 8px 18px }
  .footer-legal__nav a {
    color: var(--ink-400);
    text-decoration: underline;
    text-decoration-color: var(--ink-300);
    text-underline-offset: 3px;
  }
  .footer-legal__nav a:hover { color: var(--ink-700); text-decoration-color: var(--ink-600) }
  .footer-langs {
    margin-left: auto; display: flex; gap: 10px;
    font-weight: 600; color: var(--ink-400);
  }
  .footer-langs a { color: var(--ink-400); text-decoration: none }
  .footer-langs a:hover { color: var(--ink-700) }
  .footer-langs [aria-current="true"] { color: var(--ink-900) }

  .cookie-note {
    margin-top: var(--sp-16);
    font-size: 12.5px; line-height: 1.6; color: var(--ink-500);
    max-width: 92ch;
  }
  .cookie-note a { color: var(--ink-400); text-decoration: underline }


  /* ========================================================================
     24. RESZPONZÍV — ≤900px (mobil vászon 390px, fejléc 56px)
     A geometria-tokenek (--header-h, --gutter, --anchor-offset, --lh-read)
     már a tokens.css §11-ben átállnak; itt csak az elrendezés-váltás áll.
     ====================================================================== */
  @media (max-width: 1100px) {
    .site-nav { display: none }              /* a mobil menü a 3. szeletben érkezik */
  }

  @media (max-width: 900px) {

    /* Hittarget mobilon min. 44×44px (README „Interakciók”, 13 §9/6) */
    .theme-switch button { width: 44px; height: 44px }
    .lang-switch > summary { height: 44px }

    /* --------------------------------------------------------------------
       MOBIL FEJLÉC — kompakt, 13 §9/6 és §9/12 szerint
       --------------------------------------------------------------------
       390px-en a fejléc jobb oldala NEM tud kiférni: a három 44px-es
       témagomb (132px) + nyelvválasztó + Ügyfélportál + Vásárlás + CTA
       együtt ~528px, a rendelkezésre álló tartalomszélesség 350px. Az
       eredmény VÍZSZINTES TÚLCSORGÁS lenne az egész dokumentumon — mérve.

       A 13 §9/6 kimondja, hol a helyük mobilon: „A prototípus a téma-kapcsolót
       a hamburger ALJÁN helyezi el. Marad, de a láblécbe is bekerül, hogy menü
       megnyitása nélkül is elérhető legyen minden oldalról.” A másodlagos
       linkek (Ügyfélportál, Vásárlás) és a nyelvválasztó ugyanígy a mobil
       menübe tartoznak — mindhárom elérhető a láblécből is.

       A harness ezért mobilon logót + téma-kapcsolót tart a fejlécben (a
       kapcsoló azért marad, mert épp ez az, amit végig kell próbálni), a
       többit elrejti. A hamburger és a benne élő menü a 3. szelettel jön;
       akkor a CTA és a nyelvválasztó oda kerül. Egyetlen `[data-theme-switch]`
       példány van a lapon, mert a theme-switch.js is egyet kötöz be.
       ------------------------------------------------------------------ */
    .site-header__inner { gap: var(--sp-10) }
    .site-header__actions { gap: var(--sp-8) }
    .site-header .lang-switch,
    .site-header .btn--quiet,
    .site-header .btn--primary { display: none }

    /* 13 §9/12: iOS-en a backdrop-filter drága → 390px-en átlátszatlan
       háttér, blur nélkül. */
    .site-header { backdrop-filter: none; background: var(--page-bg) }

    /* 13 §9/9: a bejelentés-sáv mobilon 11,5px és KÉT sor lehet;
       `text-overflow: ellipsis` TILOS, mert levágná az információt. */
    .announce-bar { font-size: 11.5px; padding: 7px var(--gutter) }

    .crumbs { padding: 16px var(--gutter) 0; font-size: 12px }

    .legal-hero { padding: 14px var(--gutter) 24px }
    .legal-hero h1 { font-size: 30px; line-height: 1.12; max-width: none }
    .legal-hero .kicker { font-size: 11.5px; margin-bottom: 10px }
    .legal-meta { gap: 8px 10px; margin-top: 16px }
    .legal-chip { height: 28px; padding: 0 11px; font-size: 12px }
    .legal-actions { margin-left: 0; width: 100% }
    .legal-print { margin-left: 0; min-height: 44px; width: 100%; justify-content: center }

    .legal-grid { display: block; padding: 22px var(--gutter) 56px }
    .legal-prose { max-width: none }
    .legal-prose h2 { font-size: 21px; margin-top: 40px; padding-top: 18px }
    .legal-prose h3 { font-size: 17px; margin-top: 26px }
    .legal-prose h4 { font-size: 15.5px }
    .legal-wide { margin-right: 0 }

    /* A TOC összecsukható <details> a cím alatt — nem sticky, nem overflow-konténer */
    .legal-toc {
      position: static; max-height: none; overflow: visible;
      margin: 0 0 30px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      padding: 0 4px;
    }
    .legal-toc > summary {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 48px;                      /* hittarget ≥ 44px */
      padding: 0 14px;
      cursor: pointer; list-style: none;
      font-family: var(--font-display);
      font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
      color: var(--ink-600);
    }
    .legal-toc > summary::-webkit-details-marker { display: none }
    .legal-toc > summary::after {
      content: "▾";
      font-size: 13px; color: var(--ink-500);
      transition: transform 180ms var(--ease-out);
    }
    .legal-toc[open] > summary::after { transform: rotate(180deg) }
    .legal-toc[open] > summary { border-bottom: 1px solid var(--border-subtle) }
    .legal-toc__title { margin: 0 }
    .legal-toc nav { padding: 8px 4px 12px }
    .legal-toc__link { min-height: 40px; display: flex; align-items: center; font-size: 14px }
    .legal-toc__link--sub { font-size: 13px; padding-left: 28px }

    .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 24px }
    .footer-legal { gap: 12px 16px; margin-top: 26px }
    .footer-legal__nav { width: 100%; gap: 10px 16px }
    .footer-legal__nav a { min-height: 24px; display: inline-flex; align-items: center }
    .footer-langs { margin-left: 0; width: 100% }

    .mega-menu { position: static; width: auto; box-shadow: none; margin-top: var(--sp-8) }
    .mega-menu__grid, .mega-menu__foot { grid-template-columns: 1fr }
  }
  @media (prefers-reduced-motion: reduce) { .legal-toc > summary::after { transition: none } }

  /* ≤700px: a jogi táblázat KÁRTYÁSODIK, nem vízszintesen görget (10 §1.6).
     Indok: a használati mód sor-lekérdezés, nem oszlop-összehasonlítás; a
     vízszintes görgetés egy 8000 szavas dokumentumban rejtve marad, és a jobb
     szélső oszlopokat (Lejárat, Szolgáltató) a látogató észre sem veszi. */
  @media (max-width: 700px) {
    .legal-table,
    .legal-table tbody,
    .legal-table tr,
    .legal-table td { display: block; width: auto }

    .legal-table { border: 0; border-radius: 0; background: transparent; overflow: visible }

    /* A fejléc vizuálisan rejtve, de a DOM-ban marad (a data-label onnan generálódik). */
    .legal-table thead {
      position: absolute; width: 1px; height: 1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .legal-table tbody tr {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      box-shadow: var(--sh-flat);
      padding: 14px 16px;
      margin-bottom: 12px;
    }
    .legal-table tbody tr:nth-child(even) td { background: transparent }
    .legal-table td {
      padding: 6px 0; border: 0;
      display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 2px 12px;
      font-size: 14px;
    }
    .legal-table td::before {
      content: attr(data-label);
      font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      color: var(--ink-500);
      padding-top: 3px;
    }
    .legal-table td:first-child {
      display: block;
      font-family: var(--font-mono); font-size: 14px; font-weight: 700;
      color: var(--ink-900);
      padding: 0 0 10px; margin-bottom: 8px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .legal-table td:first-child::before { content: none }

    .legal-contact { padding: 22px 20px; border-radius: var(--r-card) }
    .legal-contact__grid { grid-template-columns: 1fr }
    .legal-contact__row { grid-template-columns: 1fr; gap: 3px }

    .data-card { padding: 20px; border-radius: var(--r-card) }
    .data-card__row { grid-template-columns: 1fr; gap: 3px; padding: 12px 0 }
    .data-card__row dd { font-size: 15px }

    .brand-plate { padding: 16px; border-radius: var(--r-sm) }   /* 8px */

    .site-footer__cols { grid-template-columns: 1fr }
  }


  /* ========================================================================
     25. DUPLA FÓKUSZGYŰRŰ — 13 §7.12
     ------------------------------------------------------------------------
     >>> EZ A BLOKK A `components` RÉTEG LEGUTOLSÓ SZABÁLYA. NE KERÜLJÖN
         ELÉBE ÚJ KOMPONENS-SZABÁLY. <<<

     A gyűrű maga: sötétben a --blue-600 fókuszjel a --blue-600 gombon 1,68:1 —
     láthatatlan. A belső 2px var(--page-bg) leválasztja a jelet a márkaszínű
     kitöltésről, a külső 2px var(--focus-ring) adja a látható jelzést
     (8,12–9,10:1 minden felületen).

     MIÉRT A RÉTEG VÉGÉN? A 13 §7.12 `:where()`-t ír elő, hogy a szabály semmit
     ne „üssön le”. A `:where()` viszont 0 specifikusságot ad, tehát az egész
     szelektor súlya a `:focus-visible` pszeudoosztályé: (0,1,0) — pontosan
     annyi, mint bármelyik komponens-osztályé. Azonos rétegben, azonos
     specifikusságnál a FORRÁSSORREND dönt. Ha ez a blokk a fájl elején állna,
     a később következő
         .btn--primary { box-shadow: var(--sh-btn) }
         .card:hover   { box-shadow: var(--sh-hover) }
     legyőzné, és a fókuszgyűrű a márkaszínű CTA-n és a hoverelt kártyán
     egyszerűen nem jelenne meg. Mérve: a fókuszgyűrű előbb → a komponens
     árnyéka győz; a fókuszgyűrű utóbb → a gyűrű győz. Ezért áll itt, és ezért
     nem `!important` a megoldás (az a rétegarchitektúrát kerülné meg).

     MIÉRT NINCS `border-radius: inherit`? A 13 §7.12 kódrészlete tartalmazza,
     de az MÉRHETŐEN HIBÁS: a `border-radius` `inherit` értéke a SZÜLŐ radiusát
     veszi át, nem az elem sajátját. Egy 9px-es gombon (`--r-md`) az érték így
     0px-re esik, és a fókuszgyűrű SZÖGLETES lesz egy lekerekített gombon.
     Erre a deklarációra nincs is szükség: a `box-shadow` terjedése magától
     követi az elem saját border-radiusát. (A 15/14 dokumentumok csak a
     box-shadow párost írják elő, a `border-radius`-t nem.)
     ====================================================================== */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--page-bg),
                0 0 0 4px var(--focus-ring);
  }
  @supports not (selector(:focus-visible)) {
    :where(a, button, input, select, textarea, summary):focus {
      outline: 2px solid var(--focus-ring); outline-offset: 2px;
    }
  }
}

/* ==== Hibalapok (a „404 es rendszerallapotok" designterv szerint) ============ */
@layer components {
  .error-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 96px 48px 120px;
    text-align: center;
  }
  .error-page__kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin: 0 0 14px;
  }
  .error-page__code {
    font-family: var(--font-display);
    /* A terv 96px-et ír — ez a lap egyetlen nagy vizuális eleme. */
    font-size: 96px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--blue-600);
    margin: 0;
  }
  .error-page__title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    margin: 14px 0 0;
  }
  .error-page__lead {
    color: var(--ink-500);
    margin: 12px 0 28px;
  }
  .error-page__links {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  /* A terv a másodlagos gyorslinkeket keretezett gombként mutatja
     (1.5px szegély, kitöltés nélkül) — a sablon puszta `.btn`-t ír,
     ami önmagában csupasz szöveg lenne. */
  .error-page__links .btn:not(.btn--primary) {
    padding: 9px 16px;
    border: 1px solid var(--border-strong);
    color: var(--ink-900);
  }
  .error-page__links .btn:not(.btn--primary):hover {
    background: var(--blue-50);
    border-color: var(--blue-200);
    color: var(--blue-700);
  }
  @media (max-width: 900px) {
    .error-page { padding: 64px 20px 80px; }
    .error-page__code { font-size: 72px; }
  }
}


/* ==== hero-es-savok (designterv szerint) ==== */
/* ============================================================================
   HERO ÉS SÁVOK — heading_text (hero + sima), cta_band, image, table,
   custom_html, a standard oldalsablon tartalmi elemei és a morzsamenü.
   ----------------------------------------------------------------------------
   Normatív forrás:
     design_updates/Adamo Weboldal Prototipus.dc.html — Fooldal, Vasarlas,
       Kapcsolat képernyők INLINE px-értékei (hifi-követelmény);
     handoff_original/Adamo Weboldal Prototipus.dc.html — a notHome záró CTA-sáv;
     handoff_original/Adamo Mobil es Dark.dc.html — 1a/1c/2a/2c képernyők
       (mobil hero, mobil CTA-panel, sötét hero);
     handoff_original/README.md „Képernyők” + 01_design_tokens.md.

   HERO-FELISMERÉS: a hero nem külön blokktípus (FooldalSeeder kommentje),
   hanem az a heading_text, amelyik H1-et visz (`as_h1`). A sablon osztályt
   erről nem ad, ezért a felismerés `:has(h1.band__title)`. A főoldali hero
   a seedben spacing:'l' + band_bg:'white' — a NAGY (54px) változatot ezért a
   `.band--sp-l` kombináció adja; minden más H1-es heading_text az aloldali
   (46px, gradiens hátterű) hero. `:has()` nélküli böngészőben a sáv az
   alap sávstílusra esik vissza (tartalom sértetlen).
   ========================================================================= */
@layer components {

  /* ------------------------------------------------------------------------
     H1. SÁV-TÉRKÖZ VARIÁNSOK — README „Képernyők”:
         s: 32px 48px · m: 44px 48px 46px · l: 72px 48px 76px
     A .band alapja (11. szakasz) az m-et adja; itt a három nevesített fokozat.
     ---------------------------------------------------------------------- */
  .band--sp-s { padding: 32px var(--gutter) }
  .band--sp-m { padding: 44px var(--gutter) 46px }
  /* MÉRVE 2026-10-29 a tervprototípus ellen (107 párosított sáv): a terv
     sávjainak uralkodó függőleges belső tere 64px FÖLÜL ÉS ALUL (56, illetve
     46 sávon), nálunk 72/76 volt — ez minden nagy sávon 8, illetve 12 pixel
     eltérést adott. A főoldali hős saját, 72/84-es felülírása marad: a terv
     ott tényleg ennyit ad. */
  .band--sp-l { padding: 64px var(--gutter) }

  /* A FŐOLDAL TÁGASABB. MÉRVE 2026-10-29: a terv 99 címsoros sávjából 49 pontosan
     64/64 — ez a `sp-l` —, a FŐOLDAL sávjai viszont 76/76 és 76/80 között állnak.
     Egyetlen lap kedvéért nem viszünk be negyedik fokozatot a lépcsőbe: a
     főoldal saját laptípus, tehát saját értéket kap. */
  /* A főoldal mérőszám- és CTA-sávja viszont 64/64 marad (MÉRVE: a terv ott
     tényleg ennyit ad), ezért ez a kettő kimarad a tágabb ritmusból. */
  body[data-lap-tipus="home"] .band--sp-l:not(.band--stats):not(.band--cta-band) { padding: 76px var(--gutter) }

  /* ------------------------------------------------------------------------
     H2. KICKER (felüljelzés) — terv: 12.5px/700, letter-spacing .12em,
         szín #C24F0E (= --orange-700), margin-bottom 14px (Vasarlas, Kapcsolat).
         Család: --font-display (01_design_tokens tipográfiai tábla).
     ---------------------------------------------------------------------- */
  .kicker {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-700);
  }
  /* Navy sávon a világos --orange-700 (#C24F0E) kontrasztja elégtelen —
     a 300-as fokozat a sötét felület kísérőszíne (terv-analógia, nem tervi érték). */
  .band--navy .kicker { color: var(--orange-300) }

  /* ------------------------------------------------------------------------
     H3. SZEKCIÓCÍM + LEAD + TÖRZS + CTA — a heading_text (H2-s) és minden
         sávos blokk közös tartalmi elemei.
         Terv (Fooldal „Minden, ami az ügyvitelhez kell”):
         h2 34px/800, ls -0.02em, utána lead 15px/#5B6B84, 8px köz.
     ---------------------------------------------------------------------- */
  .band__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 34px; font-weight: 800; line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink-900);
  }
  .band--navy .band__title { color: #FFFFFF }

  /* MÉRVE 2026-10-29: a terv 71 H2-je közül 58 pontosan 30px, és a GYIK, a
     kapcsolódó-kártyák és az idézet-körhinta sávcíme mindegyik 30px. A közös
     34px-es alapérték ezeken a blokkokon 4px-kel nagyobb címet adott (8 sávon
     mérve). A 34px ott marad, ahol a terv tényleg annyit ad (főoldali
     felsorolás-sáv, esettanulmány-kártyák), ezért nem az alapot írjuk át. */
  .band--faq .band__title,
  .band--related .band__title,
  .band--quote-carousel .band__title { font-size: 30px }
  /* A lead alapszíne --ink-500: sötét sávon olvashatatlan lenne. Ugyanaz az
     érték, ami a CTA-sávnál már bevált — mérve 7,87:1 a --surface-dark-on. */
  .band--navy .band__lead { color: rgba(255, 255, 255, .65) }

  .band__lead {
    margin: 20px 0 0;
    font-size: 16.5px; line-height: 1.6;
    color: var(--ink-500);
    max-width: 560px;                        /* terv: Kapcsolat/Vasarlas lead 560px */
    text-wrap: pretty;
  }
  /* H2-s szekciófejnél a lead kisebb és közelebb ül (Fooldal szekciófej). */
  h2.band__title + .band__lead { margin-top: 8px; font-size: 15px }

  .band__body {
    margin-top: 18px;
    max-width: var(--legal-col);             /* 640px olvasóhasáb */
    font-size: 14.5px; line-height: 1.6;
    color: var(--ink-600);
    text-wrap: pretty;
  }
  .band__body p { margin: 0 0 var(--sp-read-p) }   /* 18px */
  .band__body p:last-child { margin-bottom: 0 }

  .band__cta { margin: 30px 0 0 }
  /* Sávbeli elsődleges CTA a tervben nagyobb a fejlécbelinél:
     15.5px, 14px 26px. A 10px radius NEM tokenérték (r-md 9 / r-lg 11) —
     a terv explicit 10px-ét visszük. */
  .band__cta .btn--primary {
    font-size: 15.5px;
    padding: 14px 26px;
    border-radius: 10px;
  }

  /* ------------------------------------------------------------------------
     H4. ALOLDALI HERO — heading_text H1-gyel (as_h1), bármely térközzel.
         Terv (Vasarlas, Kapcsolat): padding 64px 48px 48px,
         háttér linear-gradient(#fff → #F5F8FC = --surface-alt),
         H1 46px/800, lh 1.08, ls -0.025em, max-width 820px,
         lead 16.5px, 20px-re a cím alatt.
     ---------------------------------------------------------------------- */
  .band--heading-text:has(h1.band__title) {
    padding: 64px var(--gutter) 48px;
  }

  /* A HŐS SAJÁT HÁTTERE CSAK AKKOR, HA A SZERKESZTŐ NEM VÁLASZTOTT MÁSIKAT.
     MÉRVE (2026-10-20): ez a szabály (0,2,1) és az alábbi sp-l változat (0,3,1)
     legyőzte a `.band--navy`-t (0,1,0), ezért a sávháttér-választás a hős
     blokkokon HATÁSTALAN volt — a háttér világos maradt. A `.band--navy
     .band__title { color:#FFF }` viszont érvényesült, így a CÍM FEHÉR LETT
     FEHÉR ALAPON, azaz eltűnt. A megbízó ezt jelezte.
     A kizárás csak a HÁTTÉRRE vonatkozik: a bélés és a pozicionálás marad. */
  .band--heading-text:not(.band--cool):not(.band--warm):not(.band--navy):has(h1.band__title) {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
  }
  h1.band__title {
    font-size: 46px; line-height: 1.08; letter-spacing: -0.025em;
    max-width: 820px;                        /* terv: Kapcsolat H1 820px */
  }

  /* H1-MÉRET A LAP SZINTJE SZERINT — MÉRVE 2026-10-29 mind a 30 tervképernyőn.
     A terv nem egyetlen „aloldali” méretet használ, hanem hármat, és a méret a
     lap SZINTJÉT jelzi:
         főoldal                                   54px  (saját szabály, lentebb)
         gyűjtő- és funkciólap, önálló lapok       46px  (alapérték, fent)
         funkcióterület, iparág, jogi, pályázat    44px
         esettanulmány                             42px
     Hős-VÁLTOZAT szerint ez nem állítható be: ugyanaz a változat fut gyűjtő- és
     részletoldalon is, ezért a `body[data-lap-tipus]` a horgony. A változat-
     szabályok (.hero--b/c/d) 0,2,1 fajsúlyúak, ezért az elem-szelektor mellé
     itt is kell a típusjelölő, különben a 46px maradna. */
  body[data-lap-tipus="feature_area"] h1.band__title,
  body[data-lap-tipus="industry"] h1.band__title,
  body[data-lap-tipus="legal"] h1.band__title,
  body[data-lap-tipus="grant_index"] h1.band__title,
  body[data-lap-tipus="feature_area"] .hero .band__title,
  body[data-lap-tipus="industry"] .hero .band__title,
  body[data-lap-tipus="legal"] .hero .band__title,
  body[data-lap-tipus="grant_index"] .hero .band__title { font-size: 44px }

  body[data-lap-tipus="case_study"] h1.band__title,
  body[data-lap-tipus="case_study"] .hero .band__title { font-size: 42px }

  /* ------------------------------------------------------------------------
     H5. FŐOLDALI HERO — heading_text + as_h1 + spacing 'l' (FooldalSeeder).
         Terv (Fooldal): padding 72px 48px 84px, fehér alap,
         H1 54px/800, lh 1.06, ls -0.025em; lead 17px, max-width 480px,
         22px a cím alatt, CTA-sor 30px-re.
         A kicker itt PIRULA-JELVÉNY (nem uppercase felüljelzés):
         --blue-50 háttér, 1px --blue-200 szegély, --blue-700 szöveg,
         12.5px/600, 5px 12px, előtte 6px-es --orange-600 pötty.
     ---------------------------------------------------------------------- */
  .band--heading-text.band--sp-l:has(h1.band__title) {
    position: relative;
    overflow: hidden;
    /* MÉRVE 2026-10-29 mind a 30 tervképernyőn: a 72/84 KIZÁRÓLAG a főoldalé.
       A gyűjtőlapok hőse 64/48, a részletoldalaké 26–30 fölül (morzsa van
       fölötte) és 44–64 alul. Korábban a 72/84 minden hősre ráfutott, ami 11
       lapon 8px-es, 9-en 36px-es eltérést adott. */
    padding: 64px var(--gutter) 48px;
  }

  body[data-lap-tipus="home"] .band--heading-text.band--sp-l:has(h1.band__title) {
    padding: 72px var(--gutter) 84px;
  }

  /* A HŐS BELSŐ TERE NEM A `spacing` FOKOZATTÓL FÜGG. MÉRVE 2026-10-29: a hős
     sáv ugyanazon a lapszinten hol `s`, hol `m`, hol `l` fokozaton állt (iparág
     `s`, esettanulmány `m`, funkcióterület `l`) — ezért a fokozatra kötött
     szabály a lapok felén nem is futott le. A horgony a laptípus és az, hogy a
     sávban H1 van; a fokozat itt nem számít.

     A részletoldalak hőse a morzsa alatt indul, ezért alig kap felső teret
     (terv: 26–30px). Az alsó érték 44 és 64 között szór (44×5, 52×5, 56×4,
     60, 64×3); egyetlen értékkel nem fedhető le mind — a mediánt, 52px-et
     visszük, a szórás TERVEZŐI DÖNTÉST igényel, ha pontosan kell. */
  body[data-lap-melyseg="2"]:not([data-lap-tipus="legal"]):not([data-lap-tipus="grant_index"]) .band--heading-text:has(h1.band__title),
  body[data-lap-melyseg="3"] .band--heading-text:has(h1.band__title) {
    padding: 28px var(--gutter) 52px;
  }

  /* A jogi és a pályázati lap hőse viszont NEM morzsa alatt áll: a terv ott
     64px felső teret ad, alul a jogi lapon semennyit (azonnal a verziósáv jön),
     a pályázatin 44px-et. */
  body[data-lap-tipus="legal"] .band--heading-text:has(h1.band__title) {
    padding: 64px var(--gutter) 0;
  }

  body[data-lap-tipus="grant_index"] .band--heading-text:has(h1.band__title) {
    padding: 64px var(--gutter) 44px;
  }
  .band--heading-text.band--sp-l:not(.band--cool):not(.band--warm):not(.band--navy):has(h1.band__title) {
    background: var(--surface);
  }
  .band--heading-text.band--sp-l:has(h1.band__title) .band__inner {
    position: relative;                      /* a tartalom a pöttyrács FÖLÉ kerül */
  }
  /* A hero TIPOGRÁFIÁJÁT a hero-komponens variantjai adják (.hero--a … --d):
     a méret oldalanként más (főoldal 54px, aloldal 46px), és ezek a szabályok
     magasabb specificitással MINDEN sp-l heróra hatottak — MÉRVE: a /funkciok
     H1-je 54px lett a tervi 46px helyett. Ezért itt csak a sáv geometriája
     marad, a betűméret a variantnál dől el. */
  .band--heading-text.band--sp-l:has(h1.band__title) .hero--a .kicker,
  .band--heading-text.band--sp-l:has(h1.band__title) .kicker {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 0 22px;
    padding: 5px 12px;
    background: var(--blue-50);
    border: 1px solid var(--blue-200);
    border-radius: var(--r-chip);
    font-family: var(--font-body);
    font-size: 12.5px; font-weight: 600;
    letter-spacing: 0; text-transform: none;
    color: var(--blue-700);
  }
  .band--heading-text.band--sp-l:has(h1.band__title) .hero--a .kicker::before,
  .band--heading-text.band--sp-l:has(h1.band__title) .kicker::before {
    content: "";
    width: 6px; height: 6px; flex: 0 0 6px;
    border-radius: 50%;
    background: var(--orange-600);
  }
  /* HERO-B/C/D: a terv szerint SIMA, nagybetűs narancs felüljelzés — nem pirula.
     A specificitás azért ilyen hosszú, mert a fenti pirula-szabály :has()-szal
     magas értéket kap; enélkül a pirula győzne (MÉRVE). */
  .band--heading-text.band--sp-l:has(h1.band__title) .hero--b .kicker,
  .band--heading-text.band--sp-l:has(h1.band__title) .hero--c .kicker,
  .band--heading-text.band--sp-l:has(h1.band__title) .hero--d .kicker {
    display: block;
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-700);
  }
  .band--heading-text.band--sp-l:has(h1.band__title) .hero--b .kicker::before,
  .band--heading-text.band--sp-l:has(h1.band__title) .hero--c .kicker::before,
  .band--heading-text.band--sp-l:has(h1.band__title) .hero--d .kicker::before {
    content: none;
  }

    @media (max-width: 1100px) {
  }

  /* Sötétben a hero a LAP alapszínén ül (Mobil es Dark 1c/1d: #0A1428 =
     --page-bg), nem a megemelt --surface-en — a gradiens is elmarad. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .band--heading-text:not(.band--cool):not(.band--warm):not(.band--navy):has(h1.band__title) {
      background: var(--page-bg);
    }
  }
  :root[data-theme="dark"] .band--heading-text:not(.band--cool):not(.band--warm):not(.band--navy):has(h1.band__title) {
    background: var(--page-bg);
  }

  /* ------------------------------------------------------------------------
     H6. CTA-SÁV (cta_band)
     Két kanonikus megjelenés a tervben:
       A) NAVY, teljes szélességű záró sáv (handoff „notHome”):
          64px 48px, középre zárt, H2 34px fehér, lead 15px rgba(255,255,255,.65),
          NARANCS gomb (#F0691F → hover #C24F0E), 13px 28px, 10px radius.
       B) VILÁGOS sávon (Fooldal, band_bg=cool): a sáv belsejében kék
          GRADIENS-PANEL (135deg #2B5CFF→#1E44CC — a sötét terv is EZT a két
          nyers értéket használja, ezért szándékosan nem token), 22px radius
          (--r-xl), 64px 56px, H2 38px fehér, lead 15.5px rgba(255,255,255,.8),
          FEHÉR gomb #0C1B33 szöveggel (sötét módban is — tervi érték).
     ---------------------------------------------------------------------- */
  .band--cta-band .band__inner { text-align: center }

  .band--cta-band .band__title { margin: 0 0 10px }
  .band--cta-band .band__lead {
    margin: 0 auto 24px;
    font-size: 15px;
    max-width: none;
  }
  .band--cta-band .band__cta { margin: 0 }

  /* A) navy változat */
  .band--cta-band.band--navy { padding: 64px var(--gutter) }
  .band--cta-band.band--navy .band__lead { color: rgba(255, 255, 255, .65) }
  .band--cta-band.band--navy .btn--primary {
    background: var(--orange-600);
    color: #FFFFFF;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 10px;
    box-shadow: none;                        /* a --sh-btn kék derengése itt téves */
  }
  .band--cta-band.band--navy .btn--primary:hover { background: var(--orange-700); color: #FFFFFF }

  /* B) gradiens-panel változat (minden nem-navy CTA-sáv) */
  .band--cta-band:not(.band--navy) .band__inner {
    background: linear-gradient(135deg, #2B5CFF, #1E44CC);
    border-radius: var(--r-xl);              /* 22px */
    padding: 64px 56px;
  }
  .band--cta-band:not(.band--navy) .kicker { color: rgba(255, 255, 255, .8) }
  .band--cta-band:not(.band--navy) .band__title {
    color: #FFFFFF;
    font-size: 38px;
  }
  .band--cta-band:not(.band--navy) .band__lead {
    color: rgba(255, 255, 255, .8);
    font-size: 15.5px;
    margin-bottom: 26px;
  }
  .band--cta-band:not(.band--navy) .btn--primary {
    background: #FFFFFF;                     /* tervi nyers érték: sötétben is fehér */
    color: #0C1B33;                          /* tervi nyers érték: sötétben is sötét */
    font-size: 15.5px;
    padding: 14px 28px;
    border-radius: 10px;
    box-shadow: none;
  }
  .band--cta-band:not(.band--navy) .btn--primary:hover {
    background: #EAF0FF;                     /* tervi hover-érték — nincs token rá */
    color: #0C1B33;
  }
  /* A box-shadow:none itt magasabb specificitású, mint a réteg végi dupla
     fókuszgyűrű (0,1,0) — a gyűrűt ezért ELLENŐRZÖTTEN visszaírjuk. */
  .band--cta-band .btn--primary:focus-visible {
    box-shadow: 0 0 0 2px var(--page-bg),
                0 0 0 4px var(--focus-ring);
  }

  /* ------------------------------------------------------------------------
     H7. KÉP-BLOKK (image)
     Tervi minta (Rolunk csapatfotó / Magazin cikk képhelyei): 18px radius
     (--r-hero), 1px --border, overflow hidden; felirat 12.5px segédszöveg.
     A frame a média-feloldásig (7. szelet) üres alátét: --surface-alt.
     Az igazítás-max-szélesség (840px) a terv kiemelt kártyáinak szélessége —
     a képblokkra nincs külön tervi érték (jelentésben jelezve).
     ---------------------------------------------------------------------- */
  .image { margin: 0 }
  .band__title + .image { margin-top: 22px }

  .image--left   { max-width: 840px; margin-right: auto }
  .image--center { max-width: 840px; margin-inline: auto }
  .image--right  { max-width: 840px; margin-left: auto }
  .image--full   { max-width: none }

  .image__link { display: block; border-radius: var(--r-hero) }

  .image__frame {
    min-height: 320px;                       /* terv: image-slot 320px */
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-hero);            /* 18px */
    overflow: hidden;
  }
  .image__frame img { width: 100%; height: 100%; object-fit: cover }

  /* A FELOLDOTT KÉP. A terv képhelyei fix magasságú, vágott csíkok
     (a /iparagak bannere MÉRVE 1342x240), ezért `object-fit: cover` —
     a kép kitölti a helyet, a felesleg levágódik, és az arány nem torzul.
     A `height: auto` NEM jó: a négyzetes forrásfájl 1342px szélesen 1342px
     magas sávot adna. */
  .image__img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: var(--r-hero);
  }
  .image--full .image__img { border-radius: var(--r-hero) }

  .image__caption {
    margin-top: 10px;
    font-size: 12.5px; line-height: 1.5;
    color: var(--ink-500);
  }
  .image--center .image__caption { text-align: center }

  /* ------------------------------------------------------------------------
     H8. TÁBLÁZAT-BLOKK (table) — 13 §7.10 vizuális nyelve a .legal-table
     geometriájával (a tervben nincs önálló marketing-táblakép): kártyakeret
     13px radiusszal, süllyesztett fejléc, kis kapitális oszlopcímek.
     Mobilon (≤700px, a jogi táblával azonos küszöb) a `cards` mód kártyásodik;
     a `scroll` mód a .table__scroll burkolóban vízszintesen görget.
     ---------------------------------------------------------------------- */
  .table__scroll { overflow-x: auto }

  .table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-card);            /* 13px */
    overflow: hidden;
    background: var(--surface);
    font-size: 13.5px; line-height: 1.55;
    color: var(--ink-600);
  }
  .band__title + .table__scroll { margin-top: 22px }

  .table__caption {
    caption-side: top; text-align: left;
    margin-bottom: 10px;
    font-size: 13px; font-weight: 600;
    color: var(--ink-500);
  }
  .table thead th {
    background: var(--table-head-bg);
    padding: 10px 14px;
    text-align: left; vertical-align: bottom;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-500);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .table td {
    padding: 12px 14px;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
  }
  .table tbody tr:last-child td { border-bottom: 0 }
  .table tbody tr:hover td { background: var(--surface-sunken) }

  /* A cellacímke csak a kártyásodott mobilnézet kelléke. */
  .table .td-label { display: none }

  /* Sötétben az árnyék/finom szegély elvész → erősebb él (10 §1.10 mintája). */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .table { border-color: var(--border-strong) }
  }
  :root[data-theme="dark"] .table { border-color: var(--border-strong) }

  @media (max-width: 700px) {
    .table--mobile-cards,
    .table--mobile-cards tbody,
    .table--mobile-cards tr,
    .table--mobile-cards td { display: block; width: auto }

    .table--mobile-cards { border: 0; border-radius: 0; background: transparent; overflow: visible }

    /* A fejléc vizuálisan rejtve, a DOM-ban marad (a .td-label onnan való). */
    .table--mobile-cards thead {
      position: absolute; width: 1px; height: 1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .table--mobile-cards tbody tr {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      box-shadow: var(--sh-flat);
      padding: 14px 16px;
      margin-bottom: 12px;
    }
    .table--mobile-cards td {
      padding: 6px 0; border: 0;
      display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 2px 12px;
      font-size: 14px;
    }
    .table--mobile-cards .td-label {
      display: block;
      font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      color: var(--ink-500);
      padding-top: 3px;
    }
  }

  /* ------------------------------------------------------------------------
     H9. EGYEDI HTML (custom_html) — olvasóhasábra fogott, a jogi próza
     könnyített készletével (a tartalom mentéskor tisztított; itt csak
     tipográfia). A blokkon kívülre semmi nem szivárog: minden szabály
     .custom-html alá scope-olt.
     ---------------------------------------------------------------------- */
  .custom-html {
    max-width: var(--legal-col);             /* 640px */
    font-size: 14.5px; line-height: 1.6;
    color: var(--ink-600);
  }
  .band__title + .custom-html { margin-top: 16px }

  .custom-html p { margin: 0 0 var(--sp-read-p) }
  .custom-html :is(ul, ol) { margin: 0 0 var(--sp-read-p); padding-left: 24px }
  .custom-html li { list-style: revert; margin-bottom: 8px }
  .custom-html li::marker { color: var(--blue-600) }
  .custom-html > :last-child { margin-bottom: 0 }

  .custom-html :is(h3, h4) {
    margin: var(--sp-read-h3) 0 10px;        /* 32px */
    font-family: var(--font-display);
    color: var(--ink-900);
  }
  .custom-html h3 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em }
  .custom-html h4 { font-size: 15.5px; font-weight: 700 }
  .custom-html :is(h3, h4):first-child { margin-top: 0 }

  .custom-html a {
    color: var(--blue-600); font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: var(--blue-200);
  }
  .custom-html a:hover { color: var(--blue-700) }
  .custom-html strong { color: var(--ink-900); font-weight: 700 }
  .custom-html img { border-radius: var(--r-card) }
  .custom-html table { width: 100% }

  /* ------------------------------------------------------------------------
     H10. MORZSAMENÜ (.breadcrumbs — a layout/_breadcrumbs.blade.php osztályai)
     Geometriája a 10. szakasz .crumbs szabályaival azonos (14_konsz_url_seo
     §2.4): elválasztó CSS ::after, NEM szöveges csomópont; 12.5px → --ink-500.
     ---------------------------------------------------------------------- */
  .breadcrumbs {
    max-width: var(--canvas-max);
    margin: 0 auto;
    padding: 26px var(--gutter) 0;
    font-size: 12.5px; line-height: 1.5;
  }
  .breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-8) }
  .breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--sp-8) }
  .breadcrumbs__item:not(:last-child)::after {
    content: "»";
    color: var(--ink-500);                   /* dekoratív, nem szöveg (13 §7.11) */
    font-size: 12px; line-height: 1;
  }
  .breadcrumbs__link { color: var(--ink-500); text-decoration: none }
  .breadcrumbs__link:hover { color: var(--blue-700); text-decoration: underline }
  .breadcrumbs [aria-current="page"] { color: var(--ink-900); font-weight: 600 }

  /* ------------------------------------------------------------------------
     H11. MOBIL (≤900px — a tervi 390px-es vászon szabályai;
     a 20px gutter a tokens.css-ből jön)
     Források: Mobil es Dark 1a (főoldali hero), 2a/2c (aloldali hero),
     1a/1c/2c (CTA-panel).
     ---------------------------------------------------------------------- */
  @media (max-width: 900px) {

    /* Sáv-térközök mobilon — a tervi szekciók 28–36px függőleges ütemére húzva */
    .band--sp-s { padding: 24px var(--gutter) }
    .band--sp-m { padding: 32px var(--gutter) }
    .band--sp-l { padding: 44px var(--gutter) 48px }

    .band__title { font-size: 22px; line-height: 1.2 }
    h2.band__title + .band__lead { font-size: 14px }
    .band__lead { font-size: 14.5px }
    .band__cta { margin-top: 22px }
    /* Mobil hittarget: teljes szélességű, min. 48px magas CTA (terv 1a). */
    .band__cta .btn--primary {
      display: flex; width: 100%; min-height: 48px;
      font-size: 15px;
      border-radius: var(--r-lg);            /* 11px — tervi mobil érték */
    }

    .kicker { font-size: 11.5px; margin-bottom: 12px }

    /* Aloldali hero — terv 2a: 30px 20px 26px, H1 30px/1.1/-0.02em, lead 14.5 */
    .band--heading-text:has(h1.band__title) { padding: 30px var(--gutter) 26px }
    h1.band__title { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em }
    h1.band__title + .band__lead { margin-top: 14px; font-size: 14.5px }

    /* Főoldali hero — terv 1a: 36px 20px 32px, H1 33px, pirula 12px/16px köz */
    .band--heading-text.band--sp-l:has(h1.band__title) { padding: 36px var(--gutter) 32px }
    .band--heading-text.band--sp-l h1.band__title { font-size: 33px }
    .band--heading-text.band--sp-l h1.band__title + .band__lead { margin-top: 16px; font-size: 15px }
    .band--heading-text.band--sp-l:has(h1.band__title) .kicker {
      font-size: 12px; margin-bottom: 16px; padding: 5px 11px;
    }

    /* CTA-sáv — terv 1a/1c: panel 30px 24px, 16px radius, cím 23px/-0.015em,
       lead 13px, gomb teljes szélességű */
    .band--cta-band.band--navy { padding: 44px var(--gutter) }
    .band--cta-band:not(.band--navy) .band__inner {
      padding: 30px 24px;
      border-radius: var(--r-block);         /* 16px */
    }
    .band--cta-band .band__title { margin-bottom: 0; font-size: 23px; letter-spacing: -0.015em }
    .band--cta-band:not(.band--navy) .band__title { font-size: 23px }
    .band--cta-band .band__lead { margin: 8px 0 18px; font-size: 13px }
    .band--cta-band .band__cta { margin-top: 16px }
    .band--cta-band .band__lead + .band__cta { margin-top: 0 }

    /* Kép-blokk — terv 2c: 180px keret, 11px radius, felirat 11.5px/8px */
    .image--left, .image--center, .image--right { max-width: none }
    .image__frame { min-height: 180px; border-radius: var(--r-lg) }
    .image__link { border-radius: var(--r-lg) }
    .image__caption { margin-top: 8px; font-size: 11.5px }

    .breadcrumbs { padding-top: 16px; font-size: 12px }
  }

  /* ------------------------------------------------------------------------
     H12. CSÖKKENTETT MOZGÁS — a szakasz minden átmenete a --dur-* tokeneken
     fut (a tokens.css nullázza őket), animáció itt nincs. Ez a védőszabály
     a jövőbeli, tokent kerülő kiegészítéseket is lefogja.
     ---------------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .band--heading-text,
    .band--cta-band,
    .image, .table, .custom-html, .breadcrumbs {
      animation: none;
    }
    .band--heading-text *,
    .band--cta-band *,
    .image *, .table *, .custom-html *, .breadcrumbs * {
      transition: none;
      animation: none;
    }
  }
}


/* ==== funkcio-blokkok (designterv szerint) ==== */
/* ============================================================================
   FUNKCIÓ-BLOKKOK — feature_area_band · before_after · process_steps ·
                     capability_grid · detail_list · text_screenshot ·
                     tech_partner
   ----------------------------------------------------------------------------
   Normatív forrás — minden px-érték a tervből, minden szín tokenből:
     design_updates/…Prototipus.dc.html  „Funkciok"            — területsáv, partner-kártyák
     design_updates/…Prototipus.dc.html  „Funkcio reszletek"   — before/after, idővonal,
                                           képességek, részletlista, szöveg+screenshot,
                                           technológiai partner-panel
     design_updates/…Prototipus.dc.html  „UpkeepPro …"         — 3 hasábos képességrács,
                                           4 lépéses idővonal világos-alt sávon
     handoff_original/Adamo Mobil es Dark.dc.html „2a/2c"      — mobil 390px változatok
     handoff_original/Adamo Mobil es Dark.dc.html „1d" + a meleg sáv sötét blokkja
                                                              — sötét felülírások
     01_design_tokens.md                                       — hex→token fordítás

   SÖTÉT MÓD: a kártyahátteret, a szöveget és a szegélyt a theme.css tokenjei
   viszik (a meleg sáv #2A231E kártyaszíne a scope-olt --surface felülírásból
   jön — 13 §2.4). Itt csak az marad, amit token nem fed: az ikonkeret
   üveg-háttere (a terv rgba(255,255,255,.06) értéke).
   ========================================================================= */
@layer components {

  /* ------------------------------------------------------------------------
     F0. KÖZÖS SZEKCIÓFEJ A FUNKCIÓ-RÉSZLETEZŐ BLOKKOKON
     A „Funkcio reszletek" képernyő minden szakaszcíme 30px/800, ls -0.02em
     (a globális .band__title 34px-e a főoldali szekciófej). A cím és a
     tartalom közti tervi távolság blokkonként más — lásd az egyes blokkoknál.
     ---------------------------------------------------------------------- */
  .band--before-after   .band__title,
  .band--process-steps  .band__title,
  .band--capability-grid .band__title,
  .band--detail-list    .band__title,
  .band--text-screenshot .band__title { font-size: 30px }

  /* ------------------------------------------------------------------------
     F1. FUNKCIÓTERÜLET-SÁV (feature_area_band) — terv „Funkciok"
     Fejléc: 46px ikonkeret (13px = --r-card, fehér, 1px színezett szegély) +
     „0N · FUNKCIÓTERÜLET" 11px/800 ls .12em + cím 22px/700 ls -0.01em.
     A kísérőszín sávfüggő: hideg sávon kék (#1E44CC = --blue-700 · szegély
     #DCE6FB = --blue-200), meleg sávon narancs (#C24F0E = --orange-700 ·
     szegély #FBD9BF = --orange-200). Sötétben ugyanezek a tokenek a 13 §2.2
     JAVÍTOTT értékeket adják — a terv nyers rgba-szegélyei helyett ezek a
     mérvadók (theme.css).
     ---------------------------------------------------------------------- */
  .feature-area-band__head {
    display: flex; align-items: center;
    gap: var(--sp-16);
    margin-bottom: var(--sp-22);
  }

  .feature-area-band__icon {
    width: 46px; height: 46px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface);
    border: 1px solid var(--blue-200);
    border-radius: var(--r-card);
  }
  .band--warm .feature-area-band__icon { border-color: var(--orange-200) }
  /* Az ikon (Lucide, később érkezik) a terület kísérőszínét kapja. */
  .feature-area-band__icon > svg { width: 18px; height: 18px; color: var(--blue-600) }
  .band--warm .feature-area-band__icon > svg { color: var(--orange-600) }

  .feature-area-band__titles { flex: 1; min-width: 0 }

  /* Felüljelzés — a globális .kicker (12.5px, narancs, 14px alsó margó)
     itt a terv szerint kisebb és a terület színét veszi fel. */
  .feature-area-band .kicker {
    margin: 0;
    font-size: 11px; font-weight: 800;
    color: var(--blue-700);
  }
  .band--warm .feature-area-band .kicker { color: var(--orange-700) }

  .feature-area-band .band__title {
    margin: 3px 0 0;
    font-size: 22px; font-weight: 700;
    line-height: 1.25; letter-spacing: -0.01em;
  }

  /* „A terület oldala →" — a terv fejsorában a számláló ELŐTT álló
     hivatkozás, ott, ahol a területnek saját lapja van. MÉRVE 2026-10-29. */
  .feature-area-band__area-link {
    flex: none; margin-left: auto;
    font-size: 14.5px; font-weight: 700;
    color: var(--blue-600);
    text-decoration: none;
  }
  .feature-area-band__area-link:hover { text-decoration: underline }
  .feature-area-band__area-link + .feature-area-band__count { margin-left: 16px }

  /* Jobb szélső „N funkció" számláló — derivált tartalom, a renderelő később
     adja; az osztály a terv 12.5px/600 --ink-400 értékeivel készen várja. */
  .feature-area-band__count {
    margin-left: auto; flex: none;
    font-size: 12.5px; font-weight: 600;
    color: var(--ink-500);
  }

  .feature-area-band .band__lead { margin: 0 0 var(--sp-22); max-width: 620px }

  /* Kártyarács — a gyermekoldalakból derivált kártyák konténere (a sablon ma
     még nem tölti; a rács és a kártya a README/terv szerint készen áll).
     Kártya: fehér (tokenből sötétben #111F3A ill. meleg sávban #2A231E),
     1px --border, 13px radius, 22px padding; hover: --blue-200 szegély +
     --sh-hover árnyék. */
  .feature-area-band__grid { display: grid; gap: var(--sp-16) }
  .feature-area-band--cols-2 .feature-area-band__grid { grid-template-columns: repeat(2, 1fr) }
  .feature-area-band--cols-3 .feature-area-band__grid { grid-template-columns: repeat(3, 1fr) }
  .feature-area-band--cols-4 .feature-area-band__grid { grid-template-columns: repeat(4, 1fr) }

  .feature-area-band__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--sp-22);
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow  var(--dur-base) var(--ease-out);
  }
  .feature-area-band__card:hover {
    border-color: var(--blue-200);
    box-shadow: var(--sh-hover);
  }

  /* A kártya belseje — a terv 15px/700 címe, alatta a leírás, a záró sor a
     kártya aljára tapad (flex oszlop + margin-top:auto), így az egyenetlen
     hosszúságú leírások mellett is egy vonalban áll a „Részletek". */
  .feature-area-band__card > a {
    display: flex; flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }
  .feature-area-band__card-title {
    margin: 0 0 6px;
    font-size: 15px; font-weight: 700;
    line-height: 1.35;
    color: var(--ink-900);
  }
  .feature-area-band__card-desc {
    margin: 0 0 10px;                        /* terv: 10px a link előtt */
    font-size: 13px; line-height: 1.55;      /* terv: 13px */
    color: var(--ink-500);
  }
  .feature-area-band__card-more {
    margin-top: auto;
    font-size: 12.5px; font-weight: 700;
    color: var(--blue-700);
  }
  .band--warm .feature-area-band__card-more { color: var(--orange-700) }

  /* ------------------------------------------------------------------------
     F2. ELŐTTE / UTÁNA (before_after) — terv „Funkcio reszletek · Mit old meg?"
     Rács: 3 hasáb, 18px köz. Kártya: 1px --border, 14px radius (--r-panel),
     24px padding. ELŐTTE felirat: 11.5px/700 ls .08em --orange-700;
     szöveg 14px/1.6 --ink-500. Választó: 1px --border-subtle. UTÁNA felirat:
     --blue-700; szöveg 14px/1.6 --ink-900, 600-as súllyal.
     ---------------------------------------------------------------------- */
  .band__title ~ .before-after { margin-top: var(--sp-22) }
  /* terv: cím → rács 24px — a 22px-es térköztoken helyett a terv nyers értéke */
  .band--before-after .band__title ~ .before-after { margin-top: 24px }

  .before-after {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-18);
  }

  .before-after__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
    padding: 24px;
  }

  .before-after__label {
    margin: 0 0 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase;
  }
  .before-after__label--before { color: var(--orange-700) }
  .before-after__label--after  { color: var(--blue-700); margin-bottom: var(--sp-8) }

  .before-after__text {
    margin: 0;
    font-size: 14px; line-height: 1.6;
  }
  .before-after__text--before { color: var(--ink-500); margin-bottom: var(--sp-16) }
  .before-after__text--after  { color: var(--ink-900); font-weight: 600 }

  /* A terv 1px választóvonala a két oldal között (16px fent és lent). */
  .before-after__text--before + .before-after__label--after {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--sp-16);
  }

  /* ------------------------------------------------------------------------
     F3. FOLYAMAT-LÉPÉSEK (process_steps) — terv „Hogyan működik?"
     Asztali: vízszintes idővonal — 2.5px gradient-vonal
     (--blue-600 → --blue-400 → --orange-600, a terv #2B5CFF→#7EA0FF→#F0691F
     hármasa), 36px korongok 4px SÁVSZÍNŰ kerettel (README „Grafikai
     motívumok"). Korongszín a terv szerint: alap --blue-600, utolsó előtti
     --blue-400, utolsó --orange-600. Mobilon FÜGGŐLEGES (lásd F8).
     A rács auto-fit: a tervi 4 lépés repeat(4,1fr)-t ad, 3–5 lépésre ugyanígy
     oszt (a payload 3–5 lépést enged).
     ---------------------------------------------------------------------- */
  .band__title ~ .process-steps { margin-top: 28px }   /* terv: cím → rács 28px */

  .process-steps {
    position: relative;
    display: grid;
    /* A SÁVSZÁM A LÉPÉSEK SZÁMA. A korábbi
       `repeat(auto-fit, minmax(0, 1fr))` elfajzó: nulla alsó korláttal az
       `auto-fit` nem tud megállni, és a böngésző 80 nulla szélességű sávot
       hoz létre. MÉRVE 2026-10-29: a terv `repeat(4, minmax(0,1fr))`,
       a mérőnk nálunk `racs/80`-at olvasott 12 sávon. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-16);
  }
  .process-steps[data-steps="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .process-steps[data-steps="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .process-steps[data-steps="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .process-steps[data-steps="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .process-steps::before {
    content: "";
    position: absolute;
    left: 6%; right: 6%; top: 17px;
    height: 2.5px;
    border-radius: var(--r-chip);
    background: linear-gradient(90deg, var(--blue-600), var(--blue-400), var(--orange-600));
  }

  .process-steps__step { position: relative }   /* a korong a vonal FÖLÉ kerül */

  .process-steps__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--blue-600);
    color: #FFFFFF;
    font-weight: 700; font-size: 14px;
    border: 4px solid var(--surface-alt);      /* sávszínű gyűrű — alap: alt sáv */
  }
  .process-steps__step:nth-last-child(2) .process-steps__num { background: var(--blue-400) }
  .process-steps__step:last-child        .process-steps__num { background: var(--orange-600) }
  /* A terv a fázist a jel SZÍNÉVEL jelöli; ez felülírja a helyzet szerinti alapot. */
  .process-steps__num--blue   { background: var(--blue-600) }
  .process-steps__num--orange { background: var(--orange-600) }
  .process-steps__num--green  { background: var(--green-600, #157A4B) }

  /* A gyűrű mindig a sáv hátterét ismétli (README: „4px fehér, illetve
     sávszínű kerettel"). */
  .band--white .process-steps__num { border-color: var(--surface) }
  .band--cool  .process-steps__num { border-color: var(--surface-cool) }
  .band--warm  .process-steps__num { border-color: var(--surface-warm) }
  .band--navy  .process-steps__num { border-color: var(--surface-dark) }

  .process-steps__title {
    margin: 10px 0 0;
    font-family: var(--font-body);
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: var(--ink-900);
  }
  .process-steps__desc {
    margin: 4px 0 0;
    font-size: 13px; line-height: 1.55;
    color: var(--ink-500);
  }

  /* ------------------------------------------------------------------------
     F4. KÉPESSÉGEK RÁCS (capability_grid)
     Két tervi arc, hasábszám szerint:
       · 3/4 hasáb — „UpkeepPro · Mit tud a modul?": kártya 1px --border,
         13px radius (--r-card), 22px padding; cím 15px/700, alatta 6px;
         leírás 13px/1.55 --ink-500.
       · 2 hasáb — „Funkcio reszletek · Képességek": fekvő kártya 20px 22px
         paddinggel, elöl 22px zöld pipa-korong (--green-100 / --green-700);
         cím 14.5px/700, alatta 3px; leírás 13px.
     ---------------------------------------------------------------------- */
  .band__title ~ .capability-grid { margin-top: 24px }   /* terv: cím → rács 24px */

  .capability-grid { display: grid; gap: var(--sp-16) }
  .capability-grid--cols-2 { grid-template-columns: repeat(2, 1fr) }
  .capability-grid--cols-3 { grid-template-columns: repeat(3, 1fr) }
  .capability-grid--cols-4 { grid-template-columns: repeat(4, 1fr) }

  /* SZABÁLYKÁRTYA (HA → AKKOR). A tervfájl jelöléséből MÁSOLVA 2026-10-30:
     a kártya `display:grid;grid-template-columns:1fr 24px 1fr;gap:12px;
     align-items:center`, `padding:18px 20px`, `border-radius:13px`;
     a feliratok 10,5px/700/.1em — a HA `#8A96AC`, az AKKOR `#1E44CC`;
     a nyíl `#F0691F`, 800, 16px.
     Korábban ezek a kártyák a rács ALAPÉRTELMEZETT alakját kapták: zöld
     buborékban pipa, és a két mondat egyetlen szövegblokkba olvadva. */
  .capability-grid--rule { gap: 14px }
  .capability-grid__rule {
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    gap: 12px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 18px 20px;
  }
  .capability-grid__rule-cell { min-width: 0 }
  .capability-grid__rule-label {
    display: block; margin-bottom: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    color: var(--ink-400);
  }
  .capability-grid__rule-label--then { color: var(--blue-700) }
  .capability-grid__rule-text {
    display: block;
    font-size: 13.5px; font-weight: 600; line-height: 1.45;
    color: var(--ink-900);
  }
  .capability-grid__rule-text--then {
    font-size: 13px; font-weight: 400; line-height: 1.5;
    color: var(--ink-700);
  }
  .capability-grid__rule-arrow {
    justify-self: center;
    color: var(--orange-600);
    font-weight: 800; font-size: 16px; line-height: 1;
  }
  @media (max-width: 700px) {
    .capability-grid__rule { grid-template-columns: 1fr; gap: 8px }
    .capability-grid__rule-arrow { justify-self: start; transform: rotate(90deg) }
  }

  .capability-grid__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--sp-22);
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow  var(--dur-base) var(--ease-out);
  }
  /* Hover-emelés csak akkor, ha a kártya valóban hivatkozás (terv „Funkciok"
     kártyái: szegély --blue-200 + --sh-hover). */
  .capability-grid__item:has(.capability-grid__link):hover {
    border-color: var(--blue-200);
    box-shadow: var(--sh-hover);
  }

  .capability-grid__title {
    margin: 0 0 var(--sp-6);
    font-family: var(--font-body);
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: var(--ink-900);
  }
  .capability-grid__desc {
    margin: 0;
    font-size: 13px; line-height: 1.55;
    color: var(--ink-500);
  }

  .capability-grid__link { color: inherit; text-decoration: none }
  .capability-grid__link:hover { color: var(--blue-600) }
  .capability-grid__link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* 2 hasábos „Képességek" arc: pipa-korong + szorosabb metrika. */
  .capability-grid--cols-2 .capability-grid__item {
    position: relative;
    padding: 20px 22px 20px 56px;            /* 22 + 22px korong + 12px köz */
  }
  .capability-grid--cols-2 .capability-grid__item::before {
    content: "✓";
    position: absolute; left: 22px; top: 20px;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-700);
    font-size: 12px; font-weight: 800; line-height: 1;
  }
  .capability-grid--cols-2 .capability-grid__title {
    margin-bottom: 3px;
    font-size: 14.5px;
  }

  /* ------------------------------------------------------------------------
     F5. LISTÁS RÉSZLETEK + OLDALSÁV (detail_list) — terv „Mit tartalmaz
     pontosan?": főhasáb + 340px oldalsáv, 36px köz. Cím 30px (F0), alatta
     6px-re a lead (14.5px), majd 18px-re a sorok. Sor: 15px 2px padding,
     1px --border-subtle felső vonal, 6px kék pötty, 14.5px/1.6 --ink-600.
     Oldalsáv: „tények" doboz (--surface-alt, 1px --border, --r-panel,
     22px 24px) i-korongokkal; chip-doboz (1px --border, --r-panel) --blue-50
     hátterű, --blue-700 feliratú chipekkel.
     ---------------------------------------------------------------------- */
  .detail-list {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-36);
    align-items: start;
  }

  .detail-list .band__title { margin: 0 0 var(--sp-6) }
  /* A leíró szelektor a __main-en át fut, hogy erősebb legyen a globális
     `h2.band__title + .band__lead` páros-szabálynál (0,2,1 < 0,3,0). */
  .detail-list .detail-list__main .band__lead {
    margin: 0 0 var(--sp-18);
    font-size: 14.5px;
    max-width: none;
  }

  .detail-list__rows { display: flex; flex-direction: column }
  .detail-list__row {
    position: relative;
    padding: 15px 2px 15px 22px;             /* 6px pötty + 14px köz + 2px él */
    border-top: 1px solid var(--border-subtle);
    font-size: 14.5px; line-height: 1.6;
    color: var(--ink-600);
  }
  .detail-list__row-title { display: block }
  /* A LEÍRÁS KORÁBBAN NEM JELENT MEG. A szótárban mindig ott volt (`items[].body`),
     a sablon viszont csak a címet írta ki — néma tartalomvesztés. */
  .detail-list__row-body {
    display: block; margin-top: 3px;
    font-size: 13.5px; line-height: 1.55; color: var(--ink-500);
  }
  .detail-list__row-kicker {
    display: block; margin-bottom: 3px;
    font-family: var(--font-display);
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-500);
  }

  /* KÁRTYARÁCS (terv: 2/3/4 hasáb). Rácsban a felsorolás-pötty és a
     vízszintes elválasztó helyett kártyakeret tagol. */
  .detail-list__rows[data-columns="2"],
  .detail-list__rows[data-columns="3"],
  .detail-list__rows[data-columns="4"] {
    display: grid; gap: var(--sp-12);
  }
  .detail-list__rows[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .detail-list__rows[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .detail-list__rows[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .detail-list__rows:not([data-columns="1"]) .detail-list__row {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .detail-list__rows:not([data-columns="1"]) .detail-list__row::before { content: none }
  .detail-list__rows:not([data-columns="1"]) .detail-list__row-title {
    font-family: var(--font-display);
    font-weight: 700; color: var(--ink-900);
  }
  @media (max-width: 900px) {
    .detail-list__rows[data-columns="3"],
    .detail-list__rows[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  }
  @media (max-width: 620px) {
    .detail-list__rows[data-columns="2"],
    .detail-list__rows[data-columns="3"],
    .detail-list__rows[data-columns="4"] { grid-template-columns: 1fr }
  }
  .detail-list__row::before {
    content: "";
    position: absolute; left: 2px; top: 23px;   /* terv: margin-top 8px a soron belül */
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--blue-600);
  }
  .detail-list__row-link { color: inherit; text-decoration: none }
  .detail-list__row-link:hover { color: var(--blue-600); text-decoration: underline }
  .detail-list__row-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .detail-list__aside { display: flex; flex-direction: column; gap: var(--sp-14) }

  .detail-list__facts {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
    padding: 22px 24px;
  }
  .detail-list__fact {
    position: relative;
    padding-left: 27px;                       /* 17px korong + 10px köz */
    font-size: 13.5px; line-height: 1.55;
    color: var(--ink-600);
    margin-bottom: var(--sp-12);
  }
  .detail-list__fact:last-child { margin-bottom: 0 }
  .detail-list__fact::before {
    content: "i";
    position: absolute; left: 0; top: 2px;
    width: 17px; height: 17px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--blue-100);
    color: var(--blue-700);
    font-size: 10px; font-weight: 800; line-height: 1;
    font-family: var(--font-body);
    font-style: normal;
  }

  .detail-list__chips {
    display: flex; flex-wrap: wrap;
    gap: var(--sp-8);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
    padding: 22px 24px;
  }
  .detail-list__chip {
    background: var(--blue-50);
    color: var(--blue-700);
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
    padding: 6px 12px;
    border-radius: var(--r-chip);
  }

  /* ------------------------------------------------------------------------
     F6. SZÖVEG + KÉPERNYŐFOTÓ (text_screenshot) — terv „Így néz ki a
     gyakorlatban": fehér kártyasor 18px radiusszal (--r-hero), 28px
     paddinggel, 36px belső és 26px sorok közti közzel. Szöveg: cím 22px/700
     (display), törzs 14.5px/1.65 --ink-500. Kép: 520px hasáb, 300px keret
     1px --border + 13px radius (--r-card) + --surface-cool alap; felirat
     12px, 9px-re. A kártyaárnyék tervi értéke (0 1px 3px rgba(12,27,51,.05))
     nem tokenérték — nyersen áll, lásd a jelentést; sötétben lekapcsol,
     ahogy a --sh-flat is (13: sötétben az eleváció-árnyék nem hordoz).
     ---------------------------------------------------------------------- */
  .band__title ~ .text-screenshot { margin-top: 30px }   /* terv: cím → sorok 30px */

  .text-screenshot { display: flex; flex-direction: column; gap: var(--sp-26) }

  .text-screenshot__row {
    display: flex; align-items: center;
    gap: var(--sp-36);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-hero);
    padding: 28px;
    box-shadow: 0 1px 3px rgba(12, 27, 51, .05);
  }
  /* A forrássorrend mindig szöveg → kép; a bal oldali képet a sorrend
     megfordítása adja (a sablon csak osztályt ad, elrendezést nem). */
  .text-screenshot__row--img-left { flex-direction: row-reverse }

  .text-screenshot__text { flex: 1; min-width: 0 }

  .text-screenshot__title {
    margin: 0 0 var(--sp-12);
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    line-height: 1.25; letter-spacing: -0.01em;
    color: var(--ink-900);
  }
  .text-screenshot__body {
    margin: 0;
    font-size: 14.5px; line-height: 1.65;
    color: var(--ink-500);
    text-wrap: pretty;
  }

  .text-screenshot__figure { width: 520px; flex: none }
  /* A képkeret. Amíg a média-kiszolgálás (7. szelet) nem ad <img>-et, a keret
     helyőrzőként áll; képpel a keret magát a képet fogja. */
  .text-screenshot__figure:not(:has(img))::before {
    content: "";
    display: block;
    height: 300px;
    background: var(--surface-cool);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
  }
  .text-screenshot__figure > img {
    width: 100%; height: 300px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
  }
  /* Felirat: a terv 12px #8A96AC-a helyett --ink-500 — a 10 §1.1 delta a
     13px alatti segédszöveget az 500-as fokozatra köti (kontraszt). */
  .text-screenshot__caption {
    margin-top: 9px;
    font-size: 12px; line-height: 1.5;
    color: var(--ink-500);
  }

  /* ------------------------------------------------------------------------
     F7. TECHNOLÓGIAI PARTNER (tech_partner) — terv „Funkcio reszletek",
     navy panel: --surface-dark alap, 18px radius (--r-hero), 32px 38px
     padding, bal szöveghasáb + 300px partnerhasáb 40px közzel. Cím 22px/700
     fehér; leírás 14px/1.6 rgba(255,255,255,.7). Partner-lemez:
     rgba(255,255,255,.07) háttér + rgba(255,255,255,.14) szegély (tervi nyers
     értékek — navy-n belüli üvegrétegek, tokentáblán kívül), 11px radius
     (--r-lg), 12px 16px padding, 13.5px/600 fehér felirat. Sötét módban a
     --surface-dark az emelt navy-t adja (theme.css), az üvegrétegek változatlanok.
     A márkajel-figura (no-recolor) képe a 7. szeletben érkezik; addig a lemez
     a partner nevét/helyét tartja.
     ---------------------------------------------------------------------- */
  .band--tech-partner .band__inner {
    background: var(--surface-dark);
    border-radius: var(--r-hero);
    padding: 32px 38px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--sp-8) 40px;                    /* terv: cím → leírás 8px */
    align-items: center;
  }

  .band--tech-partner .band__title {
    grid-column: 1;
    margin: 0;
    font-size: 22px; font-weight: 700;
    letter-spacing: normal;
    color: #FFFFFF;
  }
  /* A __inner közbeiktatása a globális `h2.band__title + .band__lead`
     szabálynál erősebb szelektort ad (0,3,0). */
  .band--tech-partner .band__inner .band__lead {
    grid-column: 1;
    margin: 0;                                /* a 8px közt a rács sorköze adja */
    font-size: 14px; line-height: 1.6;
    color: rgba(255, 255, 255, .7);
    max-width: none;
  }

  .tech-partner {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .tech-partner--row  { display: flex; flex-direction: column; gap: var(--sp-10) }
  .tech-partner--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-10);
  }

  .tech-partner__item {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-lg);
    padding: 12px 16px;
    color: #FFFFFF;
    font-size: 13.5px; font-weight: 600; line-height: 1.5;
  }
  .tech-partner__logo { min-height: 20px }
  .tech-partner__logo > img { max-height: 28px; width: auto }

  /* ------------------------------------------------------------------------
     F8. MOBIL (≤900px) — a 390px-es tervi vászon szabályai
     (Mobil es Dark 2a „funkciólista" + 2c „funkció-részletek").
     A sáv-padding 20px-re váltását a base réteg gutter-tokenje intézi;
     itt a rácsok 1 hasábra esése és a tervi mobil metrika áll.
     ---------------------------------------------------------------------- */
  @media (max-width: 900px) {

    /* Területsáv-fejléc — 2a: 42px ikonkeret 12px radiusszal, 13px köz,
       kicker 10.5px ls .1em, cím 17px. */
    .feature-area-band__head { gap: 13px; margin-bottom: var(--sp-16) }
    .feature-area-band__icon { width: 42px; height: 42px; border-radius: 12px }
    .feature-area-band .kicker { font-size: 10.5px; letter-spacing: .1em }
    .feature-area-band .band__title { margin-top: 2px; font-size: 17px }
    .feature-area-band__count { display: none }   /* a 2a terv nem mutatja */

    .feature-area-band--cols-2 .feature-area-band__grid,
    .feature-area-band--cols-3 .feature-area-band__grid,
    .feature-area-band--cols-4 .feature-area-band__grid {
      grid-template-columns: 1fr;
      gap: var(--sp-10);
    }
    .feature-area-band__card { padding: 16px 18px; border-radius: 12px }

    /* Szakaszcímek mobilon — 2c: 21px/800, ls -0.015em. */
    .band--before-after   .band__title,
    .band--process-steps  .band__title,
    .band--capability-grid .band__title,
    .band--detail-list    .band__title,
    .band--text-screenshot .band__title {
      font-size: 21px;
      letter-spacing: -0.015em;
    }

    /* Előtte/utána — 2c: 1 hasáb, 10px köz; kártya 16px 18px, 12px radius;
       felirat 10.5px; szöveg 13px; szűkebb belső ritmus. */
    .band--before-after .band__title ~ .before-after { margin-top: var(--sp-14) }
    .before-after { grid-template-columns: 1fr; gap: var(--sp-10) }
    .before-after__card { padding: 16px 18px; border-radius: 12px }
    .before-after__label { font-size: 10.5px; margin-bottom: 7px }
    .before-after__label--after { margin-bottom: var(--sp-6) }
    .before-after__text { font-size: 13px; line-height: 1.55 }
    .before-after__text--before { margin-bottom: var(--sp-12) }
    .before-after__text--before + .before-after__label--after { padding-top: var(--sp-12) }

    /* Folyamat-lépések — 2c: FÜGGŐLEGES idővonal. 30px korong, alatta 2px
       széles --blue-200 összekötő; a vízszintes gradient-vonal lekapcsol. */
    .band__title ~ .process-steps { margin-top: var(--sp-16) }
    .process-steps { display: block }
    .process-steps::before { content: none }
    .process-steps__step {
      padding-left: 44px;                     /* 30px korong + 14px köz */
      padding-bottom: var(--sp-18);
    }
    .process-steps__step:last-child { padding-bottom: 0 }
    .process-steps__num {
      position: absolute; left: 0; top: 0;
      width: 30px; height: 30px;
      font-size: 13px;
      border: 0;                              /* mobilon nincs sávszínű gyűrű */
    }
    .process-steps__step:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 14px; top: 34px; bottom: 4px;     /* 4px rés a korong alatt/fölött */
      width: 2px;
      background: var(--blue-200);
    }
    .process-steps__title { margin-top: 0; font-size: 14.5px }
    .process-steps__desc { margin-top: 3px; font-size: 12.5px; line-height: 1.5 }

    /* Képességrács — 1 hasáb, a 2a mobil kártyametrikával. */
    .band__title ~ .capability-grid { margin-top: var(--sp-14) }
    .capability-grid--cols-2,
    .capability-grid--cols-3,
    .capability-grid--cols-4 { grid-template-columns: 1fr; gap: var(--sp-10) }
    .capability-grid__item { padding: 16px 18px; border-radius: 12px }
    .capability-grid--cols-2 .capability-grid__item { padding: 16px 18px 16px 50px }
    .capability-grid--cols-2 .capability-grid__item::before { left: 18px; top: 16px }
    .capability-grid__title { font-size: 14.5px; margin-bottom: 5px }
    .capability-grid--cols-2 .capability-grid__title { margin-bottom: 3px }
    .capability-grid__desc { font-size: 12.5px }

    /* Részletlista — 2c: egyetlen hasáb, az oldalsáv a sorok alá kerül;
       doboz 16px 18px, 12px radius; sor 13px 0, szöveg 13.5px. */
    .detail-list { grid-template-columns: 1fr; gap: var(--sp-16) }
    .detail-list .detail-list__main .band__lead { margin-bottom: var(--sp-12); font-size: 13px }
    .detail-list__row {
      padding: 13px 0 13px 18px;              /* 6px pötty + 12px köz */
      font-size: 13.5px;
    }
    .detail-list__row::before { left: 0; top: 20px }
    .detail-list__facts { padding: 16px 18px; border-radius: 12px }
    .detail-list__fact { font-size: 13px; line-height: 1.5; margin-bottom: var(--sp-10) }
    .detail-list__chips { padding: 16px 18px; border-radius: 12px }

    /* Szöveg + képernyőfotó — 2c: oszloppá eső kártya, 18px padding,
       14px radius és sorköz; cím 17px, törzs 13px; keret 180px / 11px radius
       (--r-lg); felirat 11.5px. */
    .band__title ~ .text-screenshot { margin-top: var(--sp-16) }
    .text-screenshot { gap: var(--sp-14) }
    .text-screenshot__row,
    .text-screenshot__row--img-left {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: var(--sp-18);
      border-radius: var(--r-panel);
    }
    .text-screenshot__title { font-size: 17px; margin-bottom: 9px }
    .text-screenshot__body { font-size: 13px; line-height: 1.6; margin-bottom: var(--sp-14) }
    .text-screenshot__figure { width: 100% }
    .text-screenshot__figure:not(:has(img))::before {
      height: 180px;
      border-radius: var(--r-lg);
    }
    .text-screenshot__figure > img { height: 180px; border-radius: var(--r-lg) }
    .text-screenshot__caption { margin-top: var(--sp-8); font-size: 11.5px }

    /* Technológiai partner — a panel egyetlen hasábra esik. */
    .band--tech-partner .band__inner {
      grid-template-columns: 1fr;
      gap: 0;
      padding: 24px 20px;
    }
    .band--tech-partner .band__title { grid-column: auto }
    .band--tech-partner .band__inner .band__lead { grid-column: auto; margin-top: var(--sp-8) }
    .tech-partner {
      grid-column: auto; grid-row: auto;
      margin-top: var(--sp-18);
    }
    .tech-partner--grid { grid-template-columns: 1fr }
  }

  /* ------------------------------------------------------------------------
     F9. SÖTÉT MÓD — amit token nem fed: az ikonkeret üveg-háttere
     (1d/meleg-sötét terv: rgba(255,255,255,.06); a --surface itt a KÁRTYA
     tömör színét adná). A szegélyt a --blue-200/--orange-200 sötét (13 §2.2
     javított) értéke viszi, felülírás nélkül.
     ---------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .feature-area-band__icon {
      background: rgba(255, 255, 255, .06);
    }
  }
  :root[data-theme="dark"] .feature-area-band__icon {
    background: rgba(255, 255, 255, .06);
  }

  /* ------------------------------------------------------------------------
     F10. CSÖKKENTETT MOZGÁS — a hover-átmenetek a --dur-* tokeneken futnak
     (a tokens.css nullázza őket); ez a védőszabály a tokent kerülő jövőbeli
     kiegészítéseket is lefogja, a H12 mintája szerint.
     ---------------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .feature-area-band, .before-after, .process-steps,
    .capability-grid, .detail-list, .text-screenshot, .tech-partner {
      animation: none;
    }
    .feature-area-band *, .before-after *, .process-steps *,
    .capability-grid *, .detail-list *, .text-screenshot *, .tech-partner * {
      transition: none;
      animation: none;
    }
  }
}


/* ==== marketing-blokkok (designterv szerint) ====================================
   stats · story_cards · quote_carousel · reference_logos · faq
   ----------------------------------------------------------------------------
   Normatív forrás — minden px-érték a FRISS tervből
   (design_updates/Adamo Weboldal Prototipus.dc.html) jön:
     stats            — Fooldal „Miért éppen most?", Miert Adamo, Rolunk,
                        Iparag* hero-számsor; sötét: Mobil es Dark 1c/1d
     story_cards      — Fooldal „Bizonyított eredmények" (kanonikus kártya),
                        Esettanulmanyok, Magazin
     quote_carousel   — Fooldal „Ügyfeleink mondták" + README „Idézet-carousel";
                        mobil: Mobil es Dark 1a
     reference_logos  — Referenciak (kártyás logófal)
     faq              — Iparag* „Gyakori kérdések"
   A carousel lapozó állapota a 8. szelet JS-e — itt a JS NÉLKÜLI, statikus
   lista kap tervhű stílust; a `hidden` vezérlők stílusa is kész, hogy a JS
   bekapcsolásakor ne kelljen CSS-t pótolni.
   ============================================================================ */
@layer components {

  /* ------------------------------------------------------------------------
     M1. STATS — számadat-kártyák (dl > div > dt/dd)
     Terv (Rolunk / Miert Adamo / Fooldal): rács repeat(N,1fr), gap 18px;
     kártya fehér, 1px --border, 14px radius (--r-panel), 24px padding,
     --sh-flat; szám 34px/800 display --blue-600 (01_tokens: számadat
     26–48px/800); felirat 14px/700; magyarázat 12.5px --ink-500, lh 1.55.
     A DOM-sorrend dt(felirat)→dd(szám)→dd(magyarázat); a látvány számmal
     indul — a sorrendet flex `order` fordítja, a jelentés érintetlen.
     ---------------------------------------------------------------------- */
  .band__title ~ .stats__list { margin-top: 30px }   /* Miert Adamo: h2 után 30px */

  .stats__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .stats__list[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stats__list[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }

  .stats__item {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);           /* 14px */
    padding: 24px;
    box-shadow: var(--sh-flat);
  }
  /* ESETTANULMÁNYON A MÉRŐSZÁM NEM KÁRTYA. A terv az esettanulmány-lapok
     eredménycsíkját keret, háttér és árnyék nélkül rajzolja: csak a nagy szám
     és alatta a felirat. MÉRVE 2026-10-29: a terv `racs/3/3/-`, nálunk
     `racs/3/3/K` — négy esettanulmány-lapon. A funkció- és iparágoldalakon a
     kártyás alak marad, ott a terv is azt mutatja. */
  body[data-lap-tipus="case_study"] .stats__item {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  /* SÖTÉT MÉRŐSZÁM-KÁRTYA — a terv rácsának kiemelt, utolsó kártyája.
     Jelölés a tervfájlból: `background:#0C1B33`, a szám `#FF8A3D`,
     a felirat `rgba(255,255,255,.72)`. */
  .stats__item--dark {
    background: var(--surface-dark);
    border-color: var(--surface-dark);
  }
  .stats__item--dark .stats__value { color: var(--orange-300) }
  .stats__item--dark .stats__label { color: rgba(255, 255, 255, .72) }

  .stats__value {
    order: -1;                               /* a szám vizuálisan elöl */
    margin: 0;
    font-family: var(--font-display);
    font-size: 38px; font-weight: 800; line-height: 1;   /* terv: 38px */
    color: var(--blue-600);
  }
  .stats__label {
    /* Terv: a szám alatt EGYETLEN halvány sor (13px, --ink-500), nem
       félkövér cím — a doboz hangsúlya a számon marad. */
    margin: 8px 0 0;
    font-size: 13px; font-weight: 400; line-height: 1.55;
    color: var(--ink-500);
  }
  .stats__desc {
    margin: 5px 0 0;
    font-size: 12.5px; line-height: 1.55;
    color: var(--ink-500);
  }

  /* ------------------------------------------------------------------------
     M2. STORY CARDS — esettanulmány-/cikk-kártyák
     Terv (Fooldal „Bizonyított eredmények" — a kanonikus kártya):
     rács repeat(3,1fr), gap 18px, a szekciófej után 34px;
     kártya 1px --border, 16px radius (--r-block), 28px padding,
     flex-oszlop gap 10px, --sh-flat, hover --sh-lift;
     kicker-pirula --blue-50 / --blue-700 11.5px/700, 4px 11px, ls .06em;
     cím display 19px/700 lh 1.25; lead 13.5px/1.6 --ink-500 (flex:1 —
     a metrika minden kártyán az aljára ül); metrika display 28px/800 kék.
     ---------------------------------------------------------------------- */
  .band__title ~ .story-cards__list { margin-top: 34px }

  .story-cards__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .story-cards__list[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .story-cards__list[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }

  .story-card {
    display: flex; flex-direction: column; gap: 10px;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-block);           /* 16px */
    padding: 28px;
    box-shadow: var(--sh-flat);
    transition: box-shadow var(--dur-base) ease-out;
  }
  .story-card:hover { box-shadow: var(--sh-lift) }

  .story-card__kicker {
    align-self: flex-start;
    margin: 0;
    background: var(--blue-50);
    color: var(--blue-700);
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: var(--r-chip);
  }
  .story-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px; font-weight: 700; line-height: 1.25;
    color: var(--ink-900);
  }
  .story-card__link { color: inherit; text-decoration: none }
  .story-card__link:hover { color: var(--blue-700) }
  .story-card__link:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px }

  .story-card__lead {
    margin: 0;
    font-size: 13.5px; line-height: 1.6;
    color: var(--ink-500);
    flex: 1;                                 /* a metrika a kártya aljára ül */
    text-wrap: pretty;
  }
  .story-card__metric {
    margin: 0;
    font-family: var(--font-display);
    font-size: 28px; font-weight: 800; line-height: 1.1;
    color: var(--blue-600);
  }

  /* ------------------------------------------------------------------------
     M3. QUOTE CAROUSEL — statikus idézetlista (JS nélküli alapállapot)
     Terv (Fooldal „Ügyfeleink mondták" + README): kártya max 840px,
     középre igazítva, fehér, 1px --border, 18px radius (--r-hero),
     40px 48px padding, --sh-card; idézet 21px/700 Schibsted, lh 1.45,
     ls -.01em, alatta 24px; megszólaló-sor: 42px monogram-korong
     (--blue-50 / --blue-700, 700/14px) + név 14px/700 + szervezet
     12.5px --ink-400, 14px közzel; metrika-pirula --orange-100 /
     --orange-700 12px/700, 5px 12px. JS nélkül a kártyák egymás alatt,
     20px közzel (Esettanulmanyok listaütem) — semmi sincs elrejtve.
     ---------------------------------------------------------------------- */
  .band__title ~ .quote-carousel { margin-top: 36px }

  .quote-carousel__track {
    display: flex; flex-direction: column;
    gap: 20px;
  }
  .quote-carousel__slide { display: block }

  .quote-card {
    width: 100%; max-width: 840px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-hero);            /* 18px */
    padding: 40px 48px;
    box-shadow: var(--sh-card);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
  }
  .quote-card__quote {
    grid-column: 1 / -1;
    margin: 0 0 24px;
  }
  .quote-card__quote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 21px; font-weight: 700; line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    text-wrap: pretty;
  }

  .quote-card__author {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
  }
  .quote-card__initials {
    grid-row: 1 / span 2;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-700);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
  }
  /* Ha nincs szervezet, a monogram egysoros ráccsal is középen marad. */
  .quote-card__role {
    grid-column: 2;
    font-weight: 700; font-size: 14px; line-height: 1.35;
    color: var(--ink-900);
  }
  .quote-card__org {
    grid-column: 2;
    font-size: 12.5px; line-height: 1.4;
    /* 12,5px segedszoveg -> --ink-500 (lasd a tokens.css --ink-400 megkotest) */
    color: var(--ink-500);
  }
  .quote-card__metric {
    margin: 0;
    justify-self: end; align-self: center;
    background: var(--orange-100);
    color: var(--orange-700);
    font-size: 12px; font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--r-chip);
    white-space: nowrap;
  }

  /* Lapozó vezérlők — `hidden`-nel érkeznek, a 8. szelet JS-e veszi le.
     A stílus kész, hogy a JS bekapcsolása ne igényeljen CSS-pótlást. */
  .quote-carousel__nav {
    display: flex; justify-content: center; gap: 10px;
    margin: 22px 0 0;
  }
  .quote-carousel__nav[hidden] { display: none }
  .quote-carousel__btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-600);
    font-size: 15px;
    transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
  }
  .quote-carousel__btn:hover { background: var(--blue-50); color: var(--blue-700) }
  .quote-carousel__btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px }

  /* Pöttyindikátor — terv: 8px pötty, 8px köz, 26px-re a kártya alatt;
     aktív --blue-600, inaktív #D7DEEC (NEM tokenérték — jelentésben jelezve).
     A gomb 18px-es ütőfelület, a látható pötty ::before-ral rajzolt 8px. */
  .quote-carousel__dots {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin: 26px 0 0;
  }
  .quote-carousel__dots[hidden] { display: none }
  .quote-carousel__dot {
    position: relative;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
  }
  .quote-carousel__dot > span { /* a sorszám csak felolvasás-tartalék, nem látszik */
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .quote-carousel__dot::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #D7DEEC;                     /* terv-érték, nincs token rá */
    transition: background var(--dur-fast) ease-out;
  }
  .quote-carousel__dot:hover::before { background: var(--ink-300) }
  .quote-carousel__dot:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px }
  .quote-carousel__dot.is-active::before,
  .quote-carousel__dot[aria-current="true"]::before { background: var(--blue-600) }

  /* ------------------------------------------------------------------------
     M4. REFERENCE LOGOS — név-feliratos kártyák (media_id nélküli állapot)
     Terv (Referenciak): rács repeat(4,1fr), gap 16px; kártya fehér,
     1px --border, 14px radius (--r-panel), 96px magas, középre zárt
     tartalommal; a név 18px/700 --ink-500. IDEGEN MÁRKAJEL: a .no-recolor
     kártyán szűrő/átszínezés SOHA — sötétben is csak a kártyaalap vált.
     ---------------------------------------------------------------------- */
  .band__title ~ .reference-logos,
  .band__lead ~ .reference-logos { margin-top: 24px }

  .reference-logos__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .reference-logos__logo {
    position: relative;                      /* a link-overlay horgonya */
    margin: 0;
    min-height: 96px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);           /* 14px */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 12px 18px;
  }
  /* A link a kártya teljes felületét fogja (a 7. szeletben ide kerül a kép). */
  .reference-logos__link {
    position: absolute; inset: 0;
    border-radius: inherit;
  }
  .reference-logos__link:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px }
  .reference-logos__name {
    font-size: 18px; font-weight: 700; line-height: 1.3;
    color: var(--ink-500);
  }

  /* ------------------------------------------------------------------------
     M5. FAQ — details/summary harmonika
     Terv (Iparag* „Gyakori kérdések"): hasáb max 900px, elemköz 12px;
     kártya 1px --border, 12px radius (NEM tokenérték — a terv explicit
     12px-e, jelentésben jelezve), 20px 22px padding; kérdés 15px/700
     (body-család — a tervben nem display), nyitva 6px-re a válasz felett;
     válasz 13.5px/1.6 --ink-500. A nyíl ::after-rel rajzolt pehely-csévron,
     nyitáskor átfordul; reduced-motion alatt a --dur-* tokenek nullázódnak,
     és az M8 védőszabály is lefogja.
     ---------------------------------------------------------------------- */
  .band__title ~ .faq__list,
  .band__lead ~ .faq__list { margin-top: 24px }

  .faq__list {
    display: flex; flex-direction: column; gap: 12px;
    max-width: 900px;
  }
  .faq__entry {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;                     /* terv-érték, nincs token rá */
  }
  .faq__summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;                        /* natív marker le — saját csévron van */
  }
  .faq__summary::-webkit-details-marker { display: none }
  .faq__summary:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px }

  .faq__question {
    margin: 0;
    font-family: var(--font-body);           /* terv: a kérdés nem display-betűs */
    font-size: 15px; font-weight: 700; line-height: 1.4;
    color: var(--ink-900);
  }
  .faq__summary::after {                     /* lefelé mutató csévron */
    content: "";
    flex: none;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-right: 2px solid var(--ink-400);
    border-bottom: 2px solid var(--ink-400);
    transform: rotate(45deg);
    transition: transform var(--dur-base) ease-out;
  }
  .faq__entry[open] > .faq__summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }
  .faq__entry[open] > .faq__summary { padding-bottom: 6px }  /* terv: kérdés–válasz köz 6px */

  .faq__answer {
    padding: 0 22px 20px;
    font-size: 13.5px; line-height: 1.6;
    color: var(--ink-500);
  }
  .faq__answer p { margin: 0 }
  .faq__answer p + p { margin-top: 10px }

  /* ------------------------------------------------------------------------
     M6. SÖTÉT MÓD — amit a token-kaszkád nem fed:
     a tervben (Mobil es Dark 1c/1d) a számadatok sötéten NEM a sötét
     --blue-600-at (#5B84FF), hanem a 400-as fokozatot (#7EA0FF) kapják;
     a pötty-inaktív #D7DEEC sötét megfelelője nincs a tervben —
     analógiaként rgba-fehér (a --border-strong sötét mintája).
     A meleg sáv sötét kártyaszínét (#2A231E) a theme.css .band--warm
     scope-ja adja — itt nem kell megismételni.
     ---------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .stats__value,
    :root:not([data-theme="light"]) .story-card__metric { color: var(--blue-400) }
    :root:not([data-theme="light"]) .quote-carousel__dot::before { background: rgba(255, 255, 255, .22) }
  }
  :root[data-theme="dark"] .stats__value,
  :root[data-theme="dark"] .story-card__metric { color: var(--blue-400) }
  :root[data-theme="dark"] .quote-carousel__dot::before { background: rgba(255, 255, 255, .22) }
  :root[data-theme="dark"] .quote-carousel__dot.is-active::before,
  :root[data-theme="dark"] .quote-carousel__dot[aria-current="true"]::before { background: var(--blue-600) }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .quote-carousel__dot.is-active::before,
    :root:not([data-theme="light"]) .quote-carousel__dot[aria-current="true"]::before { background: var(--blue-600) }
  }

  /* ------------------------------------------------------------------------
     M7. MOBIL (≤900px — tervi 390px-es vászon; gutter 20px a base-ből)
     Források: Mobil es Dark 1a/1c. A rácsok 1 hasábra esnek — KIVÉVE a
     stats-ot, ahol a tervi mobil képernyő explicit 2 hasábot mutat
     (1a/1c: 1fr 1fr, gap 12px, kártya 16px padding / 12px radius,
     szám 26px, magyarázat 11.5px/1.45). Idézetkártya az 1a szerint:
     22px padding, 14px radius, idézet 16px/700 lh 1.5 + 16px,
     monogram 36px/12px, sor-gap 11px, pöttyök 7px/7px, 14px-re.
     ---------------------------------------------------------------------- */
  @media (max-width: 900px) {

    /* Stats — tervi mobil: 2 hasáb marad */
    .band__title ~ .stats__list { margin-top: 20px }
    .stats__list,
    .stats__list[data-columns="2"],
    .stats__list[data-columns="4"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .stats__item { padding: 16px; border-radius: 12px }
    .stats__value { font-size: 26px }
    .stats__label { font-size: 13px; margin-top: 6px }
    .stats__desc  { font-size: 11.5px; line-height: 1.45 }

    /* Story cards — 1 hasáb */
    .band__title ~ .story-cards__list { margin-top: 22px }
    .story-cards__list,
    .story-cards__list[data-columns="2"],
    .story-cards__list[data-columns="4"] {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .story-card { padding: 18px; border-radius: var(--r-card) }  /* 13px */
    .story-card__title { font-size: 17px }
    .story-card__metric { font-size: 24px }

    /* Idézetkártya — terv 1a */
    .band__title ~ .quote-carousel { margin-top: 20px }
    .quote-carousel__track { gap: 14px }
    .quote-card {
      grid-template-columns: 1fr;
      padding: 22px;
      border-radius: var(--r-panel);         /* 14px */
    }
    .quote-card__quote { margin-bottom: 16px }
    .quote-card__quote p { font-size: 16px; line-height: 1.5; letter-spacing: 0 }
    .quote-card__author { column-gap: 11px }
    .quote-card__initials { width: 36px; height: 36px; font-size: 12px }
    .quote-card__role { font-size: 12.5px }
    .quote-card__org  { font-size: 11.5px }
    .quote-card__metric { justify-self: start; margin-top: 12px }
    .quote-carousel__dots { margin-top: 14px; gap: 7px }
    .quote-carousel__dot::before { width: 7px; height: 7px }

    /* Logófal — 1 hasáb */
    .reference-logos__list { grid-template-columns: 1fr; gap: 12px }
    .reference-logos__logo { min-height: 72px }
    .reference-logos__name { font-size: 16px }

    /* GYIK — a hasáb amúgy is 1; a kártya-belméret szűkül */
    .faq__summary { padding: 16px 18px }
    .faq__entry[open] > .faq__summary { padding-bottom: 6px }
    .faq__answer { padding: 0 18px 16px; font-size: 13px }
    .faq__question { font-size: 14px }
  }

  /* ------------------------------------------------------------------------
     M8. CSÖKKENTETT MOZGÁS — a --dur-* tokenek nullázódnak (tokens.css),
     ez a védőszabály a tokent kerülő jövőbeli kiegészítéseket is lefogja
     (a F10 mintája szerint). A csévron nem forog, a hover-árnyék nem úszik.
     ---------------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .stats__list, .story-cards__list, .quote-carousel,
    .reference-logos, .faq__list {
      animation: none;
    }
    .stats__list *, .story-cards__list *, .quote-carousel *,
    .reference-logos *, .faq__list *,
    .quote-carousel *::before, .faq__list *::after {
      transition: none;
      animation: none;
    }
  }
}


/* ==== reszletoldalak (designterv szerint) ====================================
   Forrás: docs/design_updates/Adamo Weboldal Prototipus.dc.html
     - „Esettanulmany reszletoldal” képernyő → .case-hero…, .hero-embed…
     - „Magazin cikk” képernyő            → .article-head…, .article-cover…,
                                             .article-body…, .article-more…
   Sablonok: pages/case-study.blade.php és pages/article.blade.php.
   A blokk-CSS-hez (stats__, band__ …) csak SCOPE-OLT felülírás nyúl — az
   alap szakaszok érintetlenek.

   NYERS (nem tokenizált) értékek — mind a terv szó szerinti adata:
     #7183A1  az EREDMÉNYEK-kártya feliratszíne  (= a sötét téma --ink-400-a;
              a kártya világos módban IS sötét felület, ezért nem válthat tokenre)
     #9FADC6  a kártya statisztika-magyarázata   (= a sötét téma --ink-500-a)
     #FF8A3D  a kártya narancs kiemelt száma     (= a sötét téma --orange-600-a;
              a világos --orange-600 #F0691F a sötét kártyán kontraszthibás lenne)
     #D7DEEC  a metasor elválasztó pöttye        (a quote-carousel inaktív
              pöttyének tervi színe — M6 szakasz precedense)
     820px    a cikkfej/olvasóhasáb tervi szélessége (nincs token rá)
     72ch     a feladatkiírás olvasómértéke a törzsbekezdésekre
   ========================================================================= */
@layer components {

  /* ------------------------------------------------------------------------
     R1. HERO-EMBED — renderelt heading_text blokk sávkeretének semlegesítése
     (a .case-hero__intro és a .article-head__title-block közös alapja).
     A hosszú szelektorláncok oka: a H4/H5 hero-szabályok (:has-alapú,
     magas specificitású) itt NEM érvényesülhetnek — azonos vagy nagyobb
     specificitású, KÉSŐBBI szabállyal győzzük le őket.
     ---------------------------------------------------------------------- */
  .hero-embed .band,
  .hero-embed .band--heading-text:has(h1.band__title),
  .hero-embed .band--heading-text.band--sp-l:has(h1.band__title) {
    position: static;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
  }
  .hero-embed .band__inner { max-width: none }

  /* A sötét H4-felülírás (hero → --page-bg) a beágyazott blokkon nem élhet:
     a hátteret a befogadó (.case-hero / .article-head) adja. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero-embed .band--heading-text:has(h1.band__title) {
      background: none;
    }
  }
  :root[data-theme="dark"] .hero-embed .band--heading-text:has(h1.band__title) {
    background: none;
  }

  /* Kicker → kategória-chip (terv: --blue-50 alap, --blue-700 szöveg,
     11.5px/700, 4px 12px, pirula-radius, ls .06em, uppercase, body-betű). */
  .hero-embed .kicker,
  .hero-embed .band--heading-text.band--sp-l:has(h1.band__title) .kicker {
    display: inline-flex; align-items: center;
    margin: 0;
    padding: 4px 12px;
    background: var(--blue-50);
    border: 0;
    border-radius: var(--r-chip);
    font-family: var(--font-body);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--blue-700);
  }
  .hero-embed .kicker::before,
  .hero-embed .band--heading-text.band--sp-l:has(h1.band__title) .kicker::before {
    content: none;
  }

  /* Cím — terv: 42px/800, chip után 16px. */
  .hero-embed h1.band__title,
  .hero-embed .band--heading-text.band--sp-l h1.band__title {
    margin: 16px 0 0;
    font-size: 42px; line-height: 1.1; letter-spacing: -0.025em;
    max-width: none;
  }
  /* Lead — terv (esettanulmány): 18px-re a cím alatt, 16.5px/1.65, 620px. */
  .hero-embed .band__lead,
  .hero-embed h1.band__title + .band__lead,
  .hero-embed .band--heading-text.band--sp-l h1.band__title + .band__lead {
    margin: 18px 0 0;
    font-size: 16.5px; line-height: 1.65;
    color: var(--ink-500);
    max-width: 620px;
  }

  /* ------------------------------------------------------------------------
     R2. ESETTANULMÁNY-HERO — terv: 30px 48px 52px, gradiens (#fff→#F5F8FC =
     --surface → --surface-alt), rács 1fr 360px, gap 56px, középre igazítva.
     ---------------------------------------------------------------------- */
  .case-hero {
    padding: 30px var(--gutter) 52px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
  }
  .case-hero__inner { max-width: var(--canvas-max); margin: 0 auto }
  .case-hero__inner--with-results {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 56px;
    align-items: center;
  }

  /* Sötétben a hero a LAP alapszínén ül — a H4/H5 hero mintája szerint. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .case-hero { background: var(--page-bg) }
  }
  :root[data-theme="dark"] .case-hero { background: var(--page-bg) }

  /* --- „EREDMÉNYEK” kártya: a stats blokk sötét kártyaként ---------------
     Terv: #0C1B33 (= --surface-dark; sötét módban #16274B — emelt), 18px
     radius (--r-hero), 30px 34px padding, oszlop-flex 20px közzel. */
  .case-hero__results .band {
    padding: 30px 34px;
    background: var(--surface-dark);
    border: 0;
    border-radius: var(--r-hero);
  }
  .case-hero__results .band__inner { max-width: none }

  /* A blokkcím („Eredmények”) a terv feliratává válik:
     11px/700, ls .12em, uppercase, body-betű, #7183A1 (tervi nyers érték —
     a kártya világos módban is sötét felület, tokentábla-megfelelője nincs). */
  .case-hero__results h2.band__title,
  .case-hero__results .band__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: #7183A1;
  }
  .case-hero__results .band__title ~ .stats__list { margin-top: 20px }

  .case-hero__results .stats__list,
  .case-hero__results .stats__list[data-columns="2"],
  .case-hero__results .stats__list[data-columns="4"] {
    display: flex; flex-direction: column;
    gap: 20px;
  }
  /* Kártya-a-kártyában megszűnik: a sor terv szerint szám + felirat,
     alapvonalra igazítva, 12px közzel. */
  .case-hero__results .stats__item {
    flex-direction: row; align-items: baseline; gap: 12px;
    padding: 0;
    background: none;
    border: 0; border-radius: 0;
    box-shadow: none;
  }
  .case-hero__results .stats__value {
    font-size: 40px;                        /* terv: 40px/800 display */
    color: var(--blue-400);                 /* #7EA0FF — világosban és sötétben is */
  }
  /* A terv az UTOLSÓ számot narancszsal emeli ki. #FF8A3D = a sötét téma
     --orange-600-a; a világos #F0691F a sötét kártyán kontraszthibás lenne. */
  .case-hero__results .stats__item:last-child .stats__value { color: #FF8A3D }
  .case-hero__results .stats__label {
    margin: 0;
    font-size: 13px; font-weight: 400; line-height: 1.4;
    color: #9FADC6;                         /* tervi nyers érték (sötét felületen) */
  }
  .case-hero__results .stats__desc {
    margin: 0;
    font-size: 12px;
    color: #9FADC6;
  }

  /* ------------------------------------------------------------------------
     R3. CIKKFEJ — terv: fehér sáv, 34px felső padding, 820px középre zárt
     hasáb; metasor (chip + dátum + · + olvasási idő), cím, lead, szerző-sor.
     ---------------------------------------------------------------------- */
  .article-head {
    padding: 34px var(--gutter) 0;
    background: var(--surface);
  }
  .article-head__inner { max-width: 820px; margin: 0 auto }

  .article-head__meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  .article-head__chip {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    background: var(--blue-50);
    border-radius: var(--r-chip);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--blue-700);
  }
  /* Terv: 13px #8A96AC — a tokentábla kontraszt-szabálya szerint kis
     segédszövegnél --ink-500 a helyes fokozat (a morzsamenü precedense). */
  .article-head__date,
  .article-head__read { font-size: 13px; color: var(--ink-500) }
  .article-head__dot   { color: #D7DEEC }  /* tervi nyers érték (M6 precedens) */
  /* Sötétben a #D7DEEC-nek nincs tervi párja — az M6 (inaktív pötty)
     analógiája: rgba-fehér. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .article-head__dot { color: rgba(255, 255, 255, .22) }
  }
  :root[data-theme="dark"] .article-head__dot { color: rgba(255, 255, 255, .22) }

  /* Cikkcím a hero-embed alapról finomítva — terv: lh 1.12, ls -0.02em,
     lead 18px/1.65, 20px-re a cím alatt, teljes hasábszélességen. */
  .article-head .hero-embed h1.band__title,
  .article-head .hero-embed .band--heading-text.band--sp-l h1.band__title,
  .article-head h1.article-head__title {
    margin: 0;
    font-size: 42px; line-height: 1.12; letter-spacing: -0.02em;
    max-width: none;
  }
  .article-head .hero-embed .band__lead,
  .article-head .hero-embed h1.band__title + .band__lead,
  .article-head .hero-embed .band--heading-text.band--sp-l h1.band__title + .band__lead {
    margin: 20px 0 0;
    font-size: 18px; line-height: 1.65;
    color: var(--ink-500);
    max-width: none;
  }
  .article-head__title-block { margin-bottom: 26px }  /* terv: lead után 26px */

  .article-head__author {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
  }
  .article-head__avatar {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-700);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
  }
  .article-head__author-meta { flex: 1 }
  .article-head__author-name { font-size: 13.5px; font-weight: 700; color: var(--ink-900) }
  .article-head__author-role { font-size: 12px; color: var(--ink-500) }

  /* ------------------------------------------------------------------------
     R4. BORÍTÓKÉP-KERET — terv: 1020px, 380px magas, 18px radius (--r-hero),
     1px --border. A kép a 7. szelet — addig pöttyrácsos helyőrző.
     ---------------------------------------------------------------------- */
  .article-cover {
    padding: 32px var(--gutter) 0;
    background: var(--surface);
  }
  .article-cover__frame {
    max-width: 1020px; margin: 0 auto;
    height: 380px;
    border: 1px solid var(--border);
    border-radius: var(--r-hero);
    overflow: hidden;
    background-color: var(--surface-sunken);
    background-image: radial-gradient(circle, var(--dotgrid) 1.6px, transparent 1.6px);
    background-size: 22px 22px;
    display: grid; place-items: center;
  }

  /* ------------------------------------------------------------------------
     R5. OLVASÓHASÁB — a blokkok sávjai a cikkben 820px-es hasábra állnak
     (terv), a törzsbekezdés mértéke 72ch (feladatkiírás; a terv 16.5px/1.8
     törzsével ez a tervi hasábnál keskenyebb, olvasásbarát mérték).
     A cta_band kivétel: annak saját, teljes szélességű geometriája van.
     ---------------------------------------------------------------------- */
  .article-body .band:not(.band--cta-band) .band__inner {
    max-width: 820px;
    margin-inline: auto;
  }
  .article-body .band { padding-block: 22px }   /* tervi bekezdésritmus */
  .article-body > .band:first-child { padding-top: 44px }
  .article-body > .band:last-child  { padding-bottom: 24px }

  .article-body .band__body {
    max-width: 72ch;
    font-size: 16.5px; line-height: 1.8;
    color: var(--ink-600);
  }
  .article-body .band__lead {
    font-size: 16.5px; line-height: 1.8;
    max-width: 72ch;
  }
  /* Köztescím a cikkben — terv: 27px/800, ls -0.015em. */
  .article-body h2.band__title {
    font-size: 27px; line-height: 1.3; letter-spacing: -0.015em;
  }

  /* ------------------------------------------------------------------------
     R6. „TOVÁBBI CIKKEK” — VÁZ. Terv: 1020px hasáb, felső elválasztó
     (--border-subtle) + 36px; fejsor cím 22px/700 + „Összes cikk →”;
     rács 3×1fr, gap 16px; kártya 1px --border, 14px radius (--r-panel),
     20px padding, hover --sh-hover.
     ---------------------------------------------------------------------- */
  .article-more {
    padding: 40px var(--gutter) 64px;
    background: var(--surface);
  }
  .article-more__inner {
    max-width: 1020px; margin: 0 auto;
    border-top: 1px solid var(--border-subtle);
    padding-top: 36px;
  }
  .article-more__inner > .sample-flag { margin: 0 0 14px }

  .article-more__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }
  .article-more__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    color: var(--ink-900);
  }
  .article-more__all {
    font-size: 13.5px; font-weight: 700;
    color: var(--blue-600);
    text-decoration: none;
  }
  .article-more__all:hover { text-decoration: underline }
  .article-more__all:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px }

  .article-more__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .article-more__card {
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
    padding: 20px;
    background: var(--surface);
    transition: box-shadow var(--dur-base) var(--ease-out);
  }
  .article-more__card:hover { box-shadow: var(--sh-hover) }

  .article-more__chip {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    background: var(--blue-50);
    border-radius: var(--r-chip);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--blue-700);
  }
  .article-more__chip--warm {
    background: var(--orange-100);
    color: var(--orange-700);
  }
  .article-more__card-title {
    margin: 10px 0 0;
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: var(--ink-900);
  }

  /* ------------------------------------------------------------------------
     R7. MOBIL (≤900px — tervi 390px-es vászon; gutter 20px a base-ből).
     A friss terv e két képernyőhöz nem ad mobil vásznat — a tokentábla
     mobil skálája a forrás (H1 30–34px), a rácsok 1 hasábra esnek.
     ---------------------------------------------------------------------- */
  @media (max-width: 900px) {

    .case-hero { padding: 24px var(--gutter) 40px }
    .case-hero__inner--with-results {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .hero-embed h1.band__title,
    .hero-embed .band--heading-text.band--sp-l h1.band__title,
    .article-head .hero-embed h1.band__title,
    .article-head .hero-embed .band--heading-text.band--sp-l h1.band__title,
    .article-head h1.article-head__title {
      font-size: 32px; line-height: 1.15;
    }
    .hero-embed .band__lead,
    .hero-embed h1.band__title + .band__lead,
    .hero-embed .band--heading-text.band--sp-l h1.band__title + .band__lead,
    .article-head .hero-embed .band__lead,
    .article-head .hero-embed h1.band__title + .band__lead,
    .article-head .hero-embed .band--heading-text.band--sp-l h1.band__title + .band__lead {
      font-size: 15px; line-height: 1.6;
    }
    .case-hero__results .band { padding: 22px 24px }
    .case-hero__results .stats__list { gap: 14px }
    .case-hero__results .stats__value { font-size: 32px }
    .case-hero__results .stats__label { font-size: 12.5px }

    .article-head { padding-top: 24px }
    .article-cover { padding-top: 22px }
    .article-cover__frame { height: 220px; border-radius: var(--r-panel) }
    .article-body > .band:first-child { padding-top: 30px }
    .article-body .band__body,
    .article-body .band__lead { font-size: 15px; line-height: 1.7 }
    .article-body h2.band__title { font-size: 22px }

    .article-more { padding: 32px var(--gutter) 48px }
    .article-more__inner { padding-top: 28px }
    .article-more__grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }

  /* ------------------------------------------------------------------------
     R8. CSÖKKENTETT MOZGÁS — a --dur-* tokenek nullázódnak (tokens.css);
     ez a védőszabály a tokent kerülő jövőbeli kiegészítéseket is lefogja
     (az M8 mintája szerint).
     ---------------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .case-hero, .case-hero *,
    .article-head, .article-head *,
    .article-more__card, .article-more__card * {
      transition: none;
      animation: none;
    }
  }

  /* ------------------------------------------------------------------------
     R7. A CIKK-SZERKESZTŐVEL ÉRKEZETT FORMÁK — kicker, kép, idézet,
     felsorolás, melléklet, címkék (`Adamo CMS Cikk-szerkeszto.dc.html`).
     Mind a 820px-es olvasóhasábra állnak, a törzs ritmusát követve.
     ---------------------------------------------------------------------- */
  .article-head__kicker {
    margin: 0 0 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue-700);
  }

  .article-figure,
  .article-quote {
    max-width: 820px;
    margin: 28px auto;
    padding-inline: var(--gutter);
  }
  .article-figure img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
  }
  .article-figure figcaption,
  .article-quote figcaption {
    margin-top: 10px;
    font-size: 13px; line-height: 1.6;
    color: var(--ink-500);
  }

  /* Az idézet BAL OLDALI SÁVVAL válik el, nem idézőjel-grafikával: a tervlap
     így mutatja, és a sáv nyelvfüggetlen (a magyar idézőjel más, mint az angol). */
  .article-quote blockquote {
    margin: 0;
    padding-left: 18px;
    border-left: 3px solid var(--blue-600);
  }
  .article-quote blockquote p {
    margin: 0;
    font-size: 19px; line-height: 1.65; font-weight: 600;
    color: var(--ink-900);
  }

  .article-list {
    max-width: 72ch;
    margin: 20px auto;
    padding-inline: calc(var(--gutter) + 20px) var(--gutter);
    font-size: 16.5px; line-height: 1.8;
    color: var(--ink-600);
  }
  .article-list li + li { margin-top: 6px }

  .article-attachments {
    max-width: 820px;
    margin: 32px auto 0;
    padding-inline: var(--gutter);
  }
  .article-attachments__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 16px; font-weight: 700;
    color: var(--ink-900);
  }
  .article-attachments__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
  .article-attachments__list a {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
    background: var(--surface);
    text-decoration: none;
  }
  .article-attachments__list a:hover { border-color: var(--blue-200); background: var(--surface-sunken) }
  .article-attachments__name { font-size: 14px; font-weight: 700; color: var(--ink-900) }
  .article-attachments__meta { font-size: 12.5px; color: var(--ink-500) }

  .article-tags {
    max-width: 820px;
    margin: 28px auto 0;
    padding-inline: var(--gutter);
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  }
  .article-tags__label { font-size: 13px; color: var(--ink-500) }
  .article-tags__item {
    font-size: 12.5px; font-weight: 600;
    color: var(--ink-600);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 11px;
  }
}

/* ==== mobil hamburger (brief: a nyelvválasztó a hamburgeren KÍVÜL) ========== */
@layer components {
  .mobile-nav { display: none; position: relative; }

  .mobile-nav__toggle {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;              /* min. 44×44px hittarget (README, mobil) */
    height: 44px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    background: var(--surface);
  }
  .mobile-nav__toggle::-webkit-details-marker { display: none; }
  .mobile-nav__bar {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-600);
  }
  .mobile-nav[open] .mobile-nav__toggle { background: var(--blue-50); }

  .mobile-nav__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-block);
    box-shadow: var(--sh-pop);
  }
  .mobile-nav__panel a {
    padding: 11px 12px;
    border-radius: var(--r-md);
    color: var(--ink-900);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
  }
  .mobile-nav__panel a:hover { background: var(--blue-50); color: var(--blue-700); }
  .mobile-nav__cta {
    margin-top: 6px;
    background: var(--blue-600);
    color: #fff !important;
    text-align: center;
  }
  .mobile-nav__cta:hover { background: var(--blue-700) !important; color: #fff !important; }

  /* 1100px alatt: a desktop nav eltűnik (meglévő szabály), a hamburger belép. */
  @media (max-width: 1100px) {
    .mobile-nav { display: block; }
  }
}

/* ==== képhelyőrzők (a terv image-slot.js mintájára) ========================= */
@layer components {
  /* Csíkozott, feliratozott képhely — a terv helyőrző-dobozainak megfelelője.
     Ahol még nincs média, ez tartja meg a kompozíciót az üres lyuk helyett. */
  .image__frame--empty,
  .text-screenshot__frame:not(:has(img))::before,
  .hero-mockup {
    background:
      repeating-linear-gradient(45deg,
        var(--surface-cool), var(--surface-cool) 14px,
        var(--surface) 14px, var(--surface) 28px);
    border: 1px dashed var(--ink-200);
  }
  .image__frame--empty {
    display: grid;
    place-items: center;
    min-height: 240px;
    border-radius: var(--r-hero);
  }
  .image__placeholder-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    /* 11,5px felkover: a WCAG csak 18,66px-tol szamit nagy szovegnek, tehat itt is
       4,5:1 kell. MERVE: --ink-400 = 2,98:1 rossz -> --ink-500 = 5,41:1 rendben */
    color: var(--ink-500);
    background: var(--surface);
    padding: 6px 12px;
    border-radius: var(--r-chip);
    border: 1px solid var(--border);
  }

    @media (max-width: 1100px) {
  }
}

/* ==== főoldali finomítások (megbízói visszajelzés, 2026-08-20) =============== */
@layer components {
  /* Hero alatti logócsík: a title kicker-stílusban, a nevek egy sorban. */
  .band--reference-logos.band--sp-s .band__title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-bottom: 18px;
  }

  /* „Bizonyított eredmények" — a 3. kártya metrikája a terv szerint NARANCS.
     A valódi osztályok: .story-cards__item (kártya) és .story-card__metric. */
  .band--story-cards .story-cards__item:nth-child(3) .story-card__metric {
    color: var(--orange-700);
  }
  /* …és a 3. kártya kickere is a meleg pirulát kapja (terv: KERESKEDELEM). */
  .band--story-cards .story-cards__item:nth-child(3) .story-card__kicker {
    background: var(--orange-100);
    color: var(--orange-700);
  }

  /* Ügyfél-visszajelzés futósáv („Akik már az Adamóval dolgoznak"):
     a terv adamoSlide animációjának megfelelője. JS nélkül is fut (CSS),
     reduced-motion alatt megáll és statikus sor marad. */
  /* IDŐZÍTETT LAPOZÓ — megbízói döntés (2026-08-20): a folyamatosan úszó szalag
     helyett a terv időzített lapozója marad, mert praktikusabb (olvasható, nem
     mozog a szem alól). A vezérlőket a JS-modul teszi láthatóvá; JS nélkül
     minden idézet egymás alatt olvasható marad. */
  .band--quote-carousel .kicker,
  .band--quote-carousel .band__title {
    text-align: center;
    max-width: 620px;
    margin-left: auto; margin-right: auto;
  }
  .band--quote-carousel .quote-carousel { margin-top: 34px; }

  /* A modul betöltése után EGY kártya áll középen; a többi `hidden`. */
  .quote-carousel--ready .quote-carousel__track { display: block; }
  .quote-carousel--ready .quote-carousel__slide[hidden] { display: none; }
  .quote-carousel__nav,
  .quote-carousel__dots { justify-content: center; }
  /* Az aktuális pötty tele, a többi halvány (a terv 8px-es pöttyei). */
  .quote-carousel__dot.is-current { background: var(--blue-600); }
}

/* ==== feltöltött referencialogók ============================================ */
@layer components {
  /* A MÉRETET AZ ATTRIBÚTUM ADJA, nem ez a szabály. A terv optikai képlete
     (állandó látványterület) a megjelenítő rétegben fut — `App\Blocks\LogoMeret` —,
     és `width`/`height` attribútumként jön ki. A korábbi `max-height: 34px;
     max-width: 150px` ezt elrontotta: KORLÁT volt, nem beállítás, ezért a széles
     jelek a szélességi korláton akadtak el és pár képpont magasak lettek
     (MÉRVE: MediaMarkt 7,38:1 → 20 px magas). Itt már csak a túlcsordulást fogjuk. */
  .reference-logos__logo img {
    max-width: 100%;
    /* NINCS `height: auto` — de nem azért, amiért elsőre gondoltam. A `width`/
       `height` attribútum a betöltés ELŐTTI helyfoglalás (CLS); betöltés után a
       böngésző a kép natív arányát használja, mert az attribútumokból képzett
       `aspect-ratio: auto w/h` kulcsszava épp ezt írja elő. A kontraktus ugyanezt
       mondja: „r = a betöltött kép natív szélesség/magasság; a táblabeli r csak
       tartalék betöltés előtt." MÉRVE: ALFA 153×47,43 a számított 153×48 helyett
       — a WebP-változat kerekítése miatt. Ez EGYEZIK a tervvel, nem eltérés. */
    object-fit: contain;
    display: block;
  }
  /* Ha van kép, a névfelirat rejtve — a kép alt-ja hordozza a nevet. */
  .reference-logos__logo:has(img) .reference-logos__name { display: none; }
  /* Idegen védjegy: sötét módban NEM invertáljuk/színezzük — világos lemezen ül
     (kanonikus szabály: no_recolor → plate). */
  /* A sötét-detektálás KÉT mechanizmusa (a theme.css mintája): a puszta
     :root:not([data-theme=light]) media query nélkül VILÁGOSBAN is ütne. */
  /* A szelektor a főoldali csík (.band--sp-s) változatát IS meg kell fognia:
     az ott álló `background: none` specificitása (0,3,0) magasabb volt, mint a
     korábbi lemez-szabályé (0,2,1), ezért sötétben a színes védjegyek lemez
     nélkül, olvashatatlanul ültek a navy háttéren. MÉRVE a böngészőben. */
  /* A LEMEZ SZÍNE TOKENBŐL, NEM BEÉGETVE.
     A 13_dark_mode_delta §6.2 külön indokolja, miért nem tiszta fehér:
     „--plate sötétben NEM tiszta fehér (#E7EDF6), hogy ne vakítson OLED-en, de
     elég világos ahhoz, hogy a világos-háttérre tervezett logók a kézikönyvüknek
     megfeleljenek." A korábbi #FFFFFF ezt a megfontolást hagyta ki. */
  [data-theme="dark"] .band--reference-logos .reference-logos__logo:has(img) {
    background: var(--plate); border: 1px solid var(--plate-border);
    border-radius: var(--r-md); padding: 8px 14px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .band--reference-logos .reference-logos__logo:has(img) {
      background: var(--plate); border: 1px solid var(--plate-border);
      border-radius: var(--r-md); padding: 8px 14px;
    }
  }
}

/* ==== valódi Adamo-logó (fejléc + lábléc) =================================== */
@layer components {
  /* 30px, NEM 34: a terv a fejléc-logót `style="height:30px"`-szel deklarálja
     (lábléc 28px + fehér lemez). MÉRVE 2026-10-29 a tervfájl jelöléséből. */
  .logo__img { height: 30px; width: auto; display: block; flex: none; }
  .footer-logo__img {
    /* A TERV JELÖLÉSE SZERINT: `height:28px;background:#fff;padding:5px 8px;
       border-radius:8px`. Korábban 44px / 8px 12px / --r-md volt — MÉRVE
       2026-10-29, a terv láblécének logója ennél kisebb. */
    height: 28px;
    /* A MAGASSÁG A KÉPRE VONATKOZIK, NEM A LEMEZRE. A projekt globálisan
       `box-sizing: border-box`-ot használ, ettől a 28px-ből a 2x5px belső tér
       levonódott, és a logó 18px magasan renderelt. MÉRVE 2026-10-29:
       terv 88x28, nálunk 56x18. A terv jelölése natív `<img>`-re vonatkozik,
       tehát tartalomdobozra. */
    box-sizing: content-box;
    /* Kerekített sarok a láblécben — megbízói kérés. A logó szürke szövege a
       sötét navy láblécen olvashatatlan, ezért FEHÉR lemezen ül (a no_recolor
       védjegy-szabállyal is konzisztens). */
    background: #FFFFFF;
    border-radius: 8px;
    padding: 5px 8px;
  }
  /* Sötét fejléc (sötét mód): a szürke-szöveges PNG-t is fehér lemezre tesszük,
     hogy olvasható maradjon — a márkajel nem színezhető át. */
  [data-theme="dark"] .site-header .logo__img { background: #FFFFFF; border-radius: var(--r-sm); padding: 5px 9px; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header .logo__img { background: #FFFFFF; border-radius: var(--r-sm); padding: 5px 9px; }
  }
}

/* ==== hero alatti logócsík (reference_logos, spacing=s) ===================== */
@layer components {
  /* A terv „TÖBBEK KÖZÖTT NEKIK SEGÍTETTÜNK" csíkja: NEM a keretezett kártyafal,
     hanem tömör, középre zárt sor halványszürke cégnevekkel, fehér háttéren.
     Csak a spacing=s változatra (a főoldali csík) — a /referenciak fal marad rács. */
  .band--reference-logos.band--sp-s .band__title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* 11,5px felkover: a felkoveret a WCAG csak 18,66px-tol tekinti nagy szovegnek,
       tehat itt is 4,5:1 kell. MERVE: --ink-400 = 2,98:1 ✘ -> --ink-500 = 5,41:1 ✔ */
    color: var(--ink-500);
    text-align: center;
    margin-bottom: 16px;
  }
  .band--reference-logos.band--sp-s .reference-logos__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 20px 44px;                 /* a terv 44px vízszintes köze */
  }
  .band--reference-logos.band--sp-s .reference-logos__logo {
    min-height: 0;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .band--reference-logos.band--sp-s .reference-logos__name {
    font-size: 19px;
    font-weight: 700;
    /* A terv halvanyszurke logoszine #98A3B8 volt, de az feheren 2,54:1 — a 19px
       felkover NAGY szovegnek is 3:1 kell. A --border-strong ugyanolyan halvany
       marad, es atmegy: MERVE #818DA4 feheren = 3,34:1 ✔ */
    color: var(--border-strong);
  }
  /* Feltöltött kép esetén az egységes 34px-es magasság marad (a __img szabály). */
  @media (max-width: 900px) {
    .band--reference-logos.band--sp-s .reference-logos__list { gap: 14px 28px; }
    .band--reference-logos.band--sp-s .reference-logos__name { font-size: 16px; }
  }
}

/* ==== HERO app-mockup kompozíció (a terv Fooldal-képernyője) ================ */
@layer components {
  /* Kétoszlopos hero: balra a szöveg, jobbra a megépített termék-mockup.
     A terv: fehér sáv, 54px/800 H1 (1.06), 17px lead (max 480px), gombsor
     22px közzel, alatta 13px mikroszöveg. */
  .hero {
    display: grid;
    gap: 56px;
    align-items: center;
  }
  /* HERO-A — főoldal (normatív: README hero-variant táblázat). */
  .hero--a { grid-template-columns: 1.05fr 1fr; }
  /* HERO-A tipográfia (terv Fooldal): 54px/1.06, lead 17px max 480px. */
  .hero.hero--a .band__title { font-size: 54px; line-height: 1.06; max-width: 660px; }
  .hero.hero--a .band__lead { margin-top: 22px; font-size: 17px; max-width: 480px; }

  /* A badge a terv PIRULÁJA: világoskék mező, kék szöveg, narancs pötty. */
  .hero .kicker {
    display: inline-flex; align-items: center; gap: 7px;
    background: #F2F6FE;
    color: var(--blue-700);
    font-size: 12.5px; font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
  }
  .hero .kicker::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange-600);
  }

  .hero .band__title {
    font-size: 54px; font-weight: 800;
    line-height: 1.06; letter-spacing: -0.02em;
  }
  .hero .band__lead {
    font-size: 17px; line-height: 1.6;
    color: var(--ink-500);
    max-width: 480px;
  }

  .hero__actions { display: flex; align-items: center; gap: 22px; }
  .hero__more {
    font-size: 15px; font-weight: 700;
    color: var(--ink-900);
    text-decoration: none;
  }
  .hero__more:hover { text-decoration: underline; }
  .hero__note {
    margin: 14px 0 0; font-size: 13px;
    /* --ink-500, NEM --ink-400: a tokens.css sajat szabalya szerint az --ink-400
       vilagosban CSAK 14px+ felkover vagy nem-szoveges elem. MERVE (axe-core):
       #8A96AC feheren 2,98:1 (kell 4,5:1) ✘ -> #5B6B84 = 5,41:1 ✔ */
    color: var(--ink-500);
  }

  /* --- a hero vizuálja: EGY KÉP (médiatár) ------------------------------- */
  /* A hero grafikája KÉPFÁJL, nem jelölés — a sitebuildelt mockup CSS-e ezért
     teljesen kikerült. Két állapot van: kép, vagy a tervlap üres állapota. */
  .hero__visual { position: relative; min-height: 470px; }

  /* Kép: a rácsot a SABLON rajzolja a kép mögé (2026-10-19), ezért a képnek
     átlátszónak kell lennie és csak a kártyákat tartalmaznia. A magasságot a
     kép aránya adja — a min-height ilyenkor nem kötheti meg. */
  .hero__visual--img { min-height: 0; display: block; }
  .hero__img {
    display: block;
    width: 100%; height: auto;
    border-radius: 16px;
    /* A rács ABSZOLÚT pozicionált, tehát magasabb festési rétegben van, mint a
       folyamban lévő kép — e nélkül a pöttyök a KÁRTYÁKRA rajzolódnának. */
    position: relative;
  }

  /* Üres állapot a tervlap szerint: pöttyrács + középen csíkozott helyőrző. */
  .hero__visual--empty { display: grid; place-items: center; }

  /* Szögletes, keret nélküli rács — radius csak levágná a sarkait. */
  .hero-app__dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, #D3DFF8 1.6px, transparent 1.6px);
    background-size: 22px 22px;
  }
  [data-theme="dark"] .hero-app__dots {
    background-image: radial-gradient(circle, rgba(126, 160, 255, .22) 1.6px, transparent 1.6px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero-app__dots {
      background-image: radial-gradient(circle, rgba(126, 160, 255, .22) 1.6px, transparent 1.6px);
    }
  }

  /* A helyőrző kártya: csíkozott kitöltés, szaggatott keret, lágy árnyék —
     ugyanaz a minta, mint a többi képhelyen, hogy egy nyelvet beszéljen a lap. */
  .hero__slot {
    position: relative;
    width: min(340px, 66%);
    aspect-ratio: 3 / 2;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px dashed var(--ink-200);
    border-radius: 16px;
    background:
      repeating-linear-gradient(45deg,
        var(--surface-cool), var(--surface-cool) 14px,
        var(--surface) 14px, var(--surface) 28px);
    box-shadow: 0 18px 40px rgba(12, 27, 51, .07);
  }
  .hero__slot-label {
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; line-height: 1.5;
    text-align: center;
    color: var(--ink-500);
  }

  /* Keskeny nézetben a vizuál elmarad, a hero egyhasábos. */
  @media (max-width: 980px) {
    .hero { grid-template-columns: 1fr; gap: 0; }
    .hero__visual { display: none; }
    .hero .band__title { font-size: 38px; line-height: 1.12; }
  }

  /* --- pipás jellemző-chipek (Banki szintű biztonság sáv) ------------------ */
  .band__chips {
    list-style: none;
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 18px 0 0; padding: 0;
  }
  .band__chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 14px;                        /* terv: 7px 14px */
    font-size: 12.5px; font-weight: 600;
  }
  .band__chip::before { content: "✓ "; }
  .band--navy .band__chip {
    border-color: rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .85);
  }

  /* --- képesség-rács: kék gradiens promó-cella (Upkeep-Pro) ---------------- */
  .capability-grid__item--promo {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
    border: 0;
    color: #fff;
    display: flex; flex-direction: column; justify-content: center;
  }
  .capability-grid__item--promo .capability-grid__title { font-size: 18px; }
  .capability-grid__item--promo .capability-grid__title,
  .capability-grid__item--promo .capability-grid__link { color: #fff; }
  .capability-grid__item--promo .capability-grid__link { text-decoration: none; }
  .capability-grid__item--promo .capability-grid__link:hover { text-decoration: underline; }
  .capability-grid__item--promo .capability-grid__promo-more {
    margin: 10px 0 0;
    font-size: 13.5px; font-weight: 700;
    color: rgba(255, 255, 255, .92);
  }

  /* --- sávfejsor: cím + jobb szélső link (Összes esettanulmány →) ---------- */
  .band__head-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
  }
  .band__more {
    font-size: 14px; font-weight: 700;
    color: var(--blue-700);
    text-decoration: none;
    white-space: nowrap;
  }
  .band__more:hover { text-decoration: underline; }
}

/* ==== hero-variantok (NORMATÍV: README hero-variant táblázat) ============== */
@layer components {
  /* HERO-B — grafikás aloldal (Funkciók, Iparágak, Upkeep, részletoldalak):
     egységes oldalsáv a --hero-side tokenből, NEM oldalanként egyedi érték. */
  .hero--b { grid-template-columns: 1fr var(--hero-side); gap: 48px; }
  /* A terv aloldali H1-je 46px/800, lh 1.08, ls −0.025em. */
  .hero.hero--b .band__title { font-size: 46px; line-height: 1.08; letter-spacing: -0.025em; max-width: none; }
  .hero.hero--b .band__lead { margin-top: 20px; font-size: 16.5px; max-width: 620px; }
  /* Illusztrációs kártya: 240–250px (normatív), nem a főoldali 470px. */
  .hero--b .hero__visual,
  .hero--b .hero__visual--empty { min-height: 250px; }
  .hero--b .hero__slot { width: 100%; aspect-ratio: auto; height: 250px; }

  /* HERO-C — szöveges aloldal: egy hasáb, a cím kötött szövegszélességgel.
     A tipográfia a TERV aloldali értéke (46px/1.08, ls −0.025em) — a hero
     alap 54px-e a főoldalé. A három osztály azért kell, hogy a régi keret
     0,2,1-es szabályát felülírja (MÉRVE: enélkül 54px maradt). */
  .hero--c { grid-template-columns: 1fr; }
  .hero.hero--c .band__title {
    font-size: 46px; line-height: 1.08; letter-spacing: -0.025em;
    max-width: var(--hero-copy-max);
  }
  .hero.hero--c .band__lead { margin-top: 20px; font-size: 16.5px; max-width: 620px; }
  .hero--c .hero__visual { display: none; }

  /* HERO-D ugyanezt a méretet viszi, csak középre zárva. */
  .hero.hero--d .band__title {
    font-size: 46px; line-height: 1.08; letter-spacing: -0.025em;
    max-width: var(--hero-copy-max);
  }
  .hero.hero--d .band__lead { margin-top: 20px; font-size: 16.5px; }

  /* HERO-D — cikk/esettanulmány: középre zárt hasáb; a borítókép a hero ALATT
     áll (külön image blokk), ezért itt sincs oldalsáv. */
  .hero--d { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero--d .hero__copy { max-width: var(--hero-copy-max); }
  .hero--d .hero__visual { display: none; }
  .hero--d .hero__actions { justify-content: center; }

  @media (max-width: 980px) {
    .hero--b { grid-template-columns: 1fr; }
    .hero--b .band__title { font-size: 34px; }
  }
}

/* ==== felső bejelentő sáv (announcement) ==================================== */
@layer components {
  /* A terv legfelső eleme: kék, középre zárt, egysoros hír aláhúzott linkkel.
     A sáv a fejléc FÖLÖTT áll, és elrejthető — de a rejtés a 12. szelet dolga
     (sütimentes megoldás kell hozzá), ezért most állandó. */
  .announce {
    /* A TEMATOKENEKET hasznaljuk, nem a --blue-600-at. A theme.css maga irja le,
       miert: "NEM --blue-600: azon a feher 3,39:1 lenne". Pontosan ez a hiba volt
       itt - MERVE (axe-core, sotet tema): #FFFFFF a #5B84FF-on = 3,39:1 BUKAS.
       A tokenekkel: vilagosban #FFFFFF a #2B5CFF-on = 5,15:1, sotetben #F2F6FD a
       #16307A-n = 11,15:1 - mindketto rendben.
       A terv .announce-bar komponense (a harness hasznalja) mar helyesen ezeket
       olvasta; a Blade-ben rendereleodo .announce viszont beegetett szint kapott. */
    background: var(--announce-bg);
    color: var(--announce-fg);
    font-size: 12.5px; font-weight: 500;
    text-align: center;
    padding: 7px 16px;
  }
  .announce__link { color: var(--announce-fg); font-weight: 700; text-decoration: underline; }
  .announce__link:hover { text-decoration: none; }
}

/* ==== stats sáv: középre zárt fejrész (terv) ================================ */
@layer components {
  /* A terv fejrésze KÖZÉPRE ZÁRT, 640px-es szövegblokk, 36px-re a rács előtt.
     A kártyák belső szövege balra zárt marad — csak a fej központosul. */
  .band--stats .band__title,
  .band--stats .band__lead {
    text-align: center;
    max-width: 640px;
    margin-left: auto; margin-right: auto;
  }
  .band--stats .band__title { margin-bottom: 10px; }
  .band--stats .band__lead { margin-bottom: 36px; }
  .band--stats .band__lead ~ .stats__list,
  .band--stats .band__title ~ .stats__list { margin-top: 0; }
}

/* ==== geometrikus jelkészlet (shape-icon) =================================== */
@layer components {
  /* A terv 40px-es ikonkerete: lekerekített négyzet, hideg vagy meleg tónusban.
     A tónust a JEL választja, a terv kiosztása szerint: négyzet/hasáb/rombusz
     hideg, kör/százalék meleg. */
  .shape-icon {
    width: 40px; height: 40px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 3px;
    border-radius: 11px;
    margin-bottom: 16px;
    background: var(--blue-50);
  }
  /* A SZÍN MÁR NEM A FORMÁHOZ TARTOZIK.
     Korábban a kör és a százalékjel mindig narancs volt, a többi kék — tehát a
     szerkesztő nem dönthetett róla. Megbízói kérés (2026-09-24): bármelyik jel
     bármelyik színt kaphassa, és az ALAPÉRTELMEZÉS a kék legyen. A formához kötött
     narancs ezért kikerült; ami narancs marad, azt a `icon_tone` mondja meg.

     A VÁLASZTOTT SZÍN.
     Két szín van, a tervlap szerint: kék a halványkéken, narancs a halvány
     narancson. A tokenek megjegyzése is ezt mondja: `--blue-50` „ikonkeret",
     `--orange-600` „grafikai jel — CSAK kitöltés/ikon". */
  .shape-icon--tone-blue { background: var(--blue-50); }
  .shape-icon--tone-orange { background: var(--orange-100); }

  /* A BEÉPÍTETT SVG-JELEK SZÍNE. MÉRVE: ez hiányzott, ezért a jel a kártya
     szövegszínét örökölte (sötét kék) — nem azt, amit a terv mutat. */
  .shape-icon--svg { color: var(--blue-600); }
  .shape-icon--svg.shape-icon--tone-orange { color: var(--orange-600); }

  /* A CSS-formák vonalszíne a választott színt követi. A `currentColor` itt nem
     elég: a formákat szegély rajzolja, aminek a színét külön kell adni. */
  .shape-icon--tone-orange > span { border-color: var(--orange-600) !important; }
  .shape-icon--tone-orange.shape-icon--bars > span { background: var(--orange-600) !important; }
  .shape-icon--tone-orange.shape-icon--percent { color: var(--orange-600); }
  .shape-icon--tone-blue > span { border-color: var(--blue-600) !important; }
  .shape-icon--tone-blue.shape-icon--bars > span { background: var(--blue-600) !important; }
  .shape-icon--tone-blue.shape-icon--percent { color: var(--blue-600); }

  /* Körvonalas négyzet — 15px, 2.5px kék vonal, 4px sarok. */
  .shape-icon--square > span {
    width: 15px; height: 15px;
    border: 2.5px solid var(--blue-600);
    border-radius: 4px;
  }
  /* Három hasáb, a terv 16/10/14px magasságával; a középső világosabb kék. */
  .shape-icon--bars > span { width: 4px; border-radius: 2px; background: var(--blue-600); }
  .shape-icon--bars > span:nth-child(1) { height: 16px; }
  .shape-icon--bars > span:nth-child(2) { height: 10px; background: var(--blue-400); }
  .shape-icon--bars > span:nth-child(3) { height: 14px; }
  /* Körvonalas kör — narancs. */
  .shape-icon--circle > span {
    width: 15px; height: 15px;
    border: 2.5px solid var(--orange-600);
    border-radius: 50%;
  }
  /* Rombusz — 45°-ban fordított négyzet. */
  .shape-icon--diamond > span {
    width: 16px; height: 16px;
    border: 2.5px solid var(--blue-600);
    transform: rotate(45deg);
  }
  /* Százalékjel — betűjel, nem forma. */
  .shape-icon--percent {
    font-size: 16px; font-weight: 800; line-height: 1;
    color: var(--orange-700);
  }

  /* A promó-cellában nincs jel (a terv sem tesz oda). */
  .capability-grid__item--promo .shape-icon { display: none; }

  /* Fejsor kétoldali kiosztással: a bal blokk (cím+lead) és a jobb link között
     a hely szabadon nyúlik; szűk nézetben a link a cím alá kerül. */
  .band__head-row--split { align-items: flex-start; }
  .band__head-row--split .band__lead { margin-bottom: 0; }
  .band--capability-grid .band__head-row { margin-bottom: var(--sp-22); }
}

/* ==== technológiai partnerek — kártyás változat (terv) ====================== */
@layer components {
  /* A terv „KIEMELT TECHNOLÓGIAI PARTNEREINK" sávja: 3 hasáb, 16px köz,
     fehér kártyák 20/22-es belmérettel, a partner neve 15px/800, a leírás
     12.5px/1.55 --ink-500. */
  /* A `tech_partner` sáv ALAPÉRTELMEZETT elrendezése egy sötét panel, benne
     kétoszlopos rács (szöveg + 300px-es logóoszlop). A terv „KIEMELT
     TECHNOLÓGIAI PARTNEREINK" sávja MÁS: sima sáv, három kártyával. Ezért ha a
     blokk kártyákat visel, a burkoló rácsot egyhasábosra állítjuk, és a sötét
     panelt elhagyjuk. MÉRVE: enélkül a 300px-es oszlopba szorult a rács, és
     89px-es hasábok lettek. */
  .band--tech-partner .band__inner:has(.tech-partner--cards) {
    background: none;
    border-radius: 0;
    padding: 0;
    display: block;
  }
  /* A partner-sáv felüljelzése a terven SZÜRKE (#8A96AC), nem narancs — a
     globális .kicker narancsot ad, ezért itt felülírjuk. */
  .band--tech-partner .kicker { color: var(--ink-400); margin-bottom: 16px; }

  .tech-partner--cards {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .tech-partner__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 20px 22px;
  }
  .tech-partner__name {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 15px; font-weight: 800;
    color: var(--ink-900);
  }
  .tech-partner__desc {
    margin: 0;
    font-size: 12.5px; line-height: 1.55;
    color: var(--ink-500);
  }
  /* Opcionális logó a kártya fölött: márkajel, ezért nem színezzük át. */
  .tech-partner__card .tech-partner__logo { margin: 0 0 12px; }
  .tech-partner__card .tech-partner__logo img { max-height: 26px; width: auto; display: block; }

  @media (max-width: 900px) {
    .tech-partner--cards { grid-template-columns: 1fr; }
  }
}

/* ==== stats: kiemelt tónusok (terv) ======================================== */
@layer components {
  /* A kiemelt doboz TARTALMI döntés (`items[].tone`), nem sorrendi: az
     nth-child-es megoldás átrendezéskor más dobozt emelt volna ki. */
  .stats__item--dark {
    background: #0C1B33;
    border-color: #0C1B33;
  }
  .stats__item--dark .stats__value { color: #FF8A3D; }   /* terv: világos narancs */
  .stats__item--dark .stats__label,
  .stats__item--dark .stats__desc { color: rgba(255, 255, 255, .7); }
  [data-theme="dark"] .stats__item--dark { background: #05101F; border-color: var(--orange-600); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .stats__item--dark { background: #05101F; border-color: var(--orange-600); }
  }

  /* Meleg tónus: halvány krém alap, narancs szám (terv: „−30%" doboz). */
  .stats__item--warm { background: #FFF8F2; }
  .stats__item--warm .stats__value { color: var(--orange-700); }
  [data-theme="dark"] .stats__item--warm { background: #2A231E; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .stats__item--warm { background: #2A231E; }
  }
}

/* ==== képesség-rács: SOROS elrendezés (terv „MEGOLDÁSOK") =================== */
@layer components {
  /* Egy elem = egy sor: bal oldalon a jel (56px-es sáv a terv szerint), jobbra
     a cím és a leírás. A rácsos változat érintetlen. */
  .capability-grid--rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .capability-grid--rows .capability-grid__item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
  }
  .capability-grid--rows .shape-icon { margin-bottom: 0; }
  /* Jel nélküli sor is egyenesben marad: a rács első hasábja üresen áll. */
  .capability-grid--rows .capability-grid__title { grid-column: 2; font-size: 16px; margin-bottom: 4px; }
  .capability-grid--rows .capability-grid__desc { grid-column: 2; font-size: 13.5px; line-height: 1.6; }
  .capability-grid--rows .shape-icon { grid-row: 1 / span 2; }

  @media (max-width: 700px) {
    .capability-grid--rows .capability-grid__item { grid-template-columns: 1fr; }
    .capability-grid--rows .capability-grid__title,
    .capability-grid--rows .capability-grid__desc { grid-column: 1; }
    .capability-grid--rows .shape-icon { grid-row: auto; }
  }
}

/* ==== képesség-kártya: pipás lista + kártyazáró link (terv iparág-kártyák) === */
@layer components {
  .capability-grid__checks {
    list-style: none;
    margin: 10px 0 0; padding: 0;
    font-size: 13.5px; line-height: 1.9;
    color: var(--ink-500);
  }
  /* A pipa dekoráció: a lista szemantikája felsorolás marad. */
  .capability-grid__checks > li::before {
    content: "✓ ";
    color: var(--blue-600);
    font-weight: 700;
  }
  .capability-grid__cta { margin: 14px 0 0; }
  .capability-grid__cta > a {
    font-size: 13.5px; font-weight: 700;
    color: var(--blue-700);
    text-decoration: none;
  }
  .capability-grid__cta > a:hover { text-decoration: underline; }

  /* A pipás kártya a terv szerint nagyobb címet visel (19px a 17px helyett):
     ezek a kártyák egy-egy IPARÁGAT neveznek meg, nem képességet. */
  .capability-grid__item:has(.capability-grid__checks) .capability-grid__title {
    font-size: 19px;
  }
  .capability-grid__item:has(.capability-grid__checks) { padding: 28px; }
}

/* ==== fájdalompont-kártya (terv: iparág-oldalak) ============================ */
@layer components {
  /* A terv kártyája bal oldalon 3px-es narancs sávot visel: a probléma
     megnevezése, nem képesség — a színkód is ezt jelzi. */
  .capability-grid__item--pain {
    border-left: 3px solid var(--orange-600);
    border-radius: 12px;
    padding: 20px 22px;
  }
  .capability-grid__item--pain .capability-grid__title { font-size: 15.5px; margin-bottom: 5px; }
  .capability-grid__item--pain .capability-grid__desc { font-size: 13.5px; line-height: 1.6; }
}

/* ==== MAGAZIN — lista és cikkoldal (terv „Magazin" és „Magazin cikk") ======= */
@layer components {
  /* --- kategória-chip és metasor ------------------------------------------- */
  .magazine__chip {
    display: inline-block;
    background: var(--blue-50);
    color: var(--blue-700);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 11px;
    border-radius: 999px;
    text-decoration: none;
  }
  .magazine__chip--sm { font-size: 11px; padding: 3px 10px; }
  .magazine__chip:hover { background: var(--blue-100, #E3EBFD); }
  .magazine__date { font-size: 12.5px; color: var(--ink-500); }
  .magazine__dot { color: var(--ink-300, #B7C1D4); }
  .magazine__read { font-size: 12.5px; color: var(--ink-500); }
  .magazine__empty { margin: 0; font-size: 15px; color: var(--ink-500); }

  /* --- kiemelt cikk NAGY kártyán -------------------------------------------- */
  .magazine-lead {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-hero);
    padding: 48px;
    margin-bottom: 18px;
  }
  .magazine-lead__meta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px;
  }
  .magazine-lead__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 26px; font-weight: 700;
    line-height: 1.25; letter-spacing: -0.01em;
  }
  .magazine-lead__title > a { color: var(--ink-900); text-decoration: none; }
  .magazine-lead__title > a:hover { text-decoration: underline; }
  .magazine-lead__excerpt {
    margin: 0 0 18px;
    font-size: 14px; line-height: 1.6;
    color: var(--ink-500);
    max-width: 70ch;
  }
  .magazine-lead__more { margin: 0; }
  .magazine-lead__more > a {
    font-size: 14px; font-weight: 700;
    color: var(--blue-700);
    text-decoration: none;
  }
  .magazine-lead__more > a:hover { text-decoration: underline; }

  /* --- a többi cikk 3 hasábon ---------------------------------------------- */
  .magazine-grid {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .magazine-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 24px;
  }
  .magazine-card__meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 10px;
  }
  .magazine-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16.5px; font-weight: 700;
    line-height: 1.3;
  }
  .magazine-card__title > a { color: var(--ink-900); text-decoration: none; }
  .magazine-card__title > a:hover { text-decoration: underline; }
  .band--magazine .band__title { margin-bottom: 22px; }

  /* --- cikkfej ------------------------------------------------------------- */
  .article-head__lead {
    margin: 18px 0 0;
    font-size: 17px; line-height: 1.6;
    color: var(--ink-500);
    max-width: 68ch;
  }

  @media (max-width: 900px) {
    .magazine-grid { grid-template-columns: 1fr; }
    .magazine-lead { padding: 28px; }
    .magazine-lead__title { font-size: 22px; }
  }
}

/* ==== magazin-cikk törzse (prózás változat) ================================= */
@layer components {
  /* A régi `.article-body` szakasz BLOKKOKAT feltételez (band-okat). A valós
     cikkek törzse ezzel szemben egyszerű próza a cikktáblákból, ezért kap saját
     szövegmértéket és ritmust. A terv értékei: bekezdés 18px/1.65 --ink-500,
     H2 27px/800, H3 20px/700; a hasáb a cikkfejjel egy vonalban, 820px. */
  .article-body > p,
  .article-body > h2,
  .article-body > h3 {
    max-width: 820px;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .article-body > p {
    margin-block: 0 22px;
    font-size: 18px; line-height: 1.65;
    color: var(--ink-500);
    text-wrap: pretty;
  }
  .article-body > h2 {
    margin-block: 40px 14px;
    font-family: var(--font-display);
    font-size: 27px; font-weight: 800;
    line-height: 1.2; letter-spacing: -0.015em;
    color: var(--ink-900);
  }
  .article-body > h3 {
    margin-block: 32px 12px;
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700;
    line-height: 1.35;
    color: var(--ink-900);
  }
  .article-body > *:first-child { margin-top: 8px; }
  .article-body { padding-block: 8px 40px; }

  /* A cikkfej ugyanezen a hasábon áll. */
  .article-head__inner { max-width: 820px; margin-inline: auto; padding-inline: var(--gutter); }
  .article-head { padding-block: 44px 0; }
  .article-head__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
  .article-head__chip {
    background: var(--blue-50); color: var(--blue-700);
    font-size: 11.5px; font-weight: 700;
    padding: 4px 11px; border-radius: 999px; text-decoration: none;
  }
  .article-head__date,
  .article-head__read { font-size: 12.5px; color: var(--ink-500); }
  .article-head__dot { color: var(--ink-300, #B7C1D4); }
}

/* ==== esettanulmány-kártya SZÉLES változata (terv Esettanulmanyok) ========== */
@layer components {
  /* Egy kártya egy sor: balra a szöveg, jobbra 260px-es metrika-panel. */
  .story-cards__list--wide { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .story-cards__list--wide .story-card {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 36px;
    align-items: start;
    padding: 34px 38px;
  }
  /* A bal hasáb elemei egymás alatt; a panel a jobb hasáb teljes magasságában. */
  .story-cards__list--wide .story-card > *:not(.story-card__panel) { grid-column: 1; }
  .story-cards__list--wide .story-card__panel {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    background: var(--surface-cool);
    border-radius: var(--r-panel);
    padding: 22px 24px;
  }
  .story-cards__list--wide .story-card__title { font-size: 24px; margin: 14px 0 12px; }
  .story-cards__list--wide .story-card__metric { display: none; }  /* a panel viszi */

  .story-card__pmr {
    margin: 0 0 8px;
    font-size: 13.5px; line-height: 1.6;
    color: var(--ink-500);
  }
  .story-card__pmr > strong { color: var(--ink-900); }

  .story-card__panel-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 28px; font-weight: 800; line-height: 1.1;
    color: var(--blue-600);
  }
  .story-card__panel-label {
    margin: 4px 0 16px;
    font-size: 12.5px; line-height: 1.5;
    color: var(--ink-500);
  }
  .story-card__panel-label:last-child { margin-bottom: 0; }

  @media (max-width: 900px) {
    .story-cards__list--wide .story-card { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    .story-cards__list--wide .story-card__panel { grid-column: 1; grid-row: auto; }
  }
}

/* ==== csomagkártya: sötét változat és jelvény (terv Vasarlas) =============== */
@layer components {
  .capability-grid__item { position: relative; }

  /* A harmadik (nagyvállalati) csomag a terv szerint SÖTÉT panelen áll. */
  .capability-grid__item--dark {
    background: #0C1B33;
    border-color: #0C1B33;
  }
  .capability-grid__item--dark .capability-grid__title,
  .capability-grid__item--dark .capability-grid__title > a { color: #FFFFFF; }
  .capability-grid__item--dark .capability-grid__desc { color: rgba(255, 255, 255, .6); }
  .capability-grid__item--dark .capability-grid__checks { color: rgba(255, 255, 255, .82); }
  .capability-grid__item--dark .capability-grid__checks > li::before { color: var(--blue-400); }
  .capability-grid__item--dark .capability-grid__cta > a {
    display: block; text-align: center;
    border: 1.5px solid #FFFFFF; color: #FFFFFF;
    padding: 11px; border-radius: 10px;
  }

  /* „NÉPSZERŰ" jelvény a kártya felső szélén. */
  .capability-grid__badge {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    background: var(--blue-600);
    color: #fff;
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* A csomagkártya záró gombja teljes szélességű és keretes (terv Vasarlas).
     BLOKK-SZINTŰ beállításra szűkítve: a pipás lista magában NEM jelent
     csomagkártyát — az iparág-hub kártyáin a terv sima szöveglinket mutat, és
     egy `:has(.capability-grid__checks)` szabály azt is gombbá tette volna. */
  .capability-grid--cta-button .capability-grid__cta > a {
    display: block; text-align: center;
    border: 1.5px solid var(--blue-600);
    color: var(--blue-700);
    padding: 11px; border-radius: 10px;
    margin-top: 8px;
  }
}

/* ==== kapcsolati űrlap (lead_form) ========================================= */
@layer components {
  .lead-form {
    display: grid;
    gap: 18px 20px;
    max-width: 720px;
  }
  .lead-form--two_column { grid-template-columns: 1fr 1fr; }
  .lead-form--single { grid-template-columns: 1fr; }
  .lead-form.is-compact { gap: 12px 16px; }

  /* A hosszú mező (üzenet) és a jogi rész teljes szélességben. */
  .lead-form__field.is-wide,
  .lead-form__legal,
  .lead-form__actions,
  .lead-form__error--form { grid-column: 1 / -1; }

  .lead-form__field { display: flex; flex-direction: column; gap: 6px; }
  .lead-form__field > label {
    font-size: 12.5px; font-weight: 700;
    color: var(--ink-900);
  }
  .lead-form__req { color: var(--orange-700); }

  .lead-form input[type="text"],
  .lead-form input[type="email"],
  .lead-form input[type="tel"],
  .lead-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink-900);
    font: inherit;
    font-size: 14.5px;
  }
  .lead-form input:focus-visible,
  .lead-form textarea:focus-visible {
    outline: 2px solid var(--blue-600);
    outline-offset: 1px;
    border-color: var(--blue-600);
  }
  .lead-form [aria-invalid="true"] { border-color: #C0392B; }

  .lead-form__help { font-size: 12px; color: var(--ink-500); }
  .lead-form__error { font-size: 12.5px; font-weight: 600; color: #C0392B; }
  .lead-form__error--form {
    padding: 10px 14px;
    border: 1px solid #E8C4BF;
    border-radius: 10px;
    background: #FDF3F2;
  }

  /* MÉZESCSUPOR: vizuálisan rejtett, de VALÓDI mező — a robot kitölti.
     A `display: none` nem jó: azt sok robot felismeri és kihagyja. */
  .lead-form__trap {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .lead-form__check {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; line-height: 1.55;
    color: var(--ink-500);
  }
  .lead-form__check input { margin-top: 3px; flex: none; }
  .lead-form__check a { color: var(--blue-700); }

  .lead-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .lead-form__note { margin: 0; font-size: 12.5px; color: var(--ink-500); }

  @media (max-width: 700px) {
    .lead-form--two_column { grid-template-columns: 1fr; }
  }
}


/* ============================================================================
   A KILENC ÚJ BLOKKTÍPUS (10. dokumentum 5. lépés, K-6 megbízói döntés)

   Közös elv: a RÁCSOK mobilon egyoszloposak, és csak fölfelé bomlanak szét. Az
   EF-12.7 szerint minden blokknak 390px-en vízszintes görgetés nélkül kell
   megjelennie — ezt nem utólag igazítjuk, hanem az alapeset a keskeny nézet.

   Az oszlopszám a `data-columns` attribútumból jön, nem osztálynévből: a sablon
   így egyetlen zárt értékkészletet ad át, és nem kell osztálynevet összefűznie.
   ============================================================================ */
@layer components {

  /* --- Kapcsolódó funkciók ------------------------------------------------ */
  .related { display: grid; gap: var(--sp-16); list-style: none; margin: 24px 0 0; padding: 0 }
  .related__item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: var(--sp-22);
  }
  .related__link { font-weight: 600; color: var(--blue-700); text-decoration: none }
  .related__link:hover { text-decoration: underline }
  .related__lead { margin: 6px 0 0; font-size: 14px; color: var(--ink-600) }

  /* A kártya másodlagos hivatkozása („A funkció részletei →”): a tervben a
     leírás alatt, kék, félkövér, a kártya alján. Dekoratív ismétlés, ezért a
     sablon `aria-hidden`-nel adja ki — a stílus is ehhez igazodik. */
  .related__more {
    display: inline-block;
    margin: 10px 0 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--blue-600);
    text-decoration: none;
  }

  .related__more:hover { text-decoration: underline }

  /* --- Füles tartalom ----------------------------------------------------- */
  .tabs { margin-top: 24px; display: grid; gap: 8px }
  .tabs__panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card) }
  .tabs__summary { cursor: pointer; padding: 14px var(--sp-22); list-style: none }
  /* A böngésző saját nyila helyett a sajátunk, hogy a fókuszgyűrű ne csússzon el. */
  .tabs__summary::-webkit-details-marker { display: none }
  .tabs__summary::after { content: "＋"; float: right; color: var(--ink-400) }
  .tabs__panel[open] .tabs__summary::after { content: "－" }
  .tabs__title { display: inline; margin: 0; font-size: 16px; font-weight: 600 }
  .tabs__body { padding: 0 var(--sp-22) 18px }
  .tabs__image { max-width: 100%; height: auto; border-radius: var(--r-card); margin-top: 12px }

  /* --- Iparág-választó ---------------------------------------------------- */
  .industry { display: grid; gap: var(--sp-16); list-style: none; margin: 24px 0 0; padding: 0 }
  .industry__link {
    display: block; text-align: center; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: var(--sp-22);
    transition: border-color var(--dur-base) var(--ease-out);
  }
  .industry__link:hover { border-color: var(--blue-400) }
  .industry__image { max-width: 100%; height: auto; margin-bottom: 10px }
  .industry__title { font-weight: 600; color: var(--ink-900) }

  /* --- Videó -------------------------------------------------------------- */
  .video { display: grid; gap: var(--sp-22); margin-top: 8px }
  .video__link { display: block; position: relative; text-decoration: none }
  .video__poster { width: 100%; height: auto; border-radius: var(--r-card); display: block }
  .video__cta {
    display: inline-block; margin-top: 12px; font-weight: 600; color: var(--blue-700);
  }
  .video__link:hover .video__cta { text-decoration: underline }

  /* --- Letölthető anyag --------------------------------------------------- */
  .lead-magnet {
    display: grid; gap: var(--sp-22); align-items: center; margin-top: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: var(--sp-22);
  }
  .lead-magnet__poster { max-width: 200px; height: auto; border-radius: 8px }
  .lead-magnet__download { margin-top: 12px; display: inline-block }
  .lead-magnet__note { margin: 12px 0 0; font-size: 14px; color: var(--ink-500) }

  /* --- Idővonal ----------------------------------------------------------- */
  .timeline { display: grid; gap: var(--sp-22); list-style: none; margin: 24px 0 0; padding: 0; counter-reset: ido }
  .timeline__item {
    position: relative; padding-left: 22px;
    border-left: 2px solid var(--blue-200);
  }
  .timeline__date { display: block; font-size: 13px; font-weight: 600; color: var(--blue-700) }
  .timeline__title { margin: 4px 0 0; font-size: 16px }
  .timeline__body { margin: 6px 0 0; font-size: 14px; color: var(--ink-600) }

  /* --- Csapat ------------------------------------------------------------- */
  .team { display: grid; gap: var(--sp-22); list-style: none; margin: 24px 0 0; padding: 0 }
  .team__item { text-align: center }
  .team__photo { width: 100%; max-width: 160px; height: auto; border-radius: 50%; margin: 0 auto 10px; display: block }
  .team__name { margin: 0; font-weight: 600 }
  .team__role { margin: 2px 0 0; font-size: 14px; color: var(--ink-500) }

  /* --- Állásajánlatok ----------------------------------------------------- */
  .jobs { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px }
  .jobs--cards { gap: var(--sp-16) }
  .jobs__item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 16px var(--sp-22);
  }
  .jobs__link { font-weight: 600; color: var(--blue-700); text-decoration: none }
  .jobs__link:hover { text-decoration: underline }
  .jobs__location { margin: 4px 0 0; font-size: 14px; color: var(--ink-500) }
  /* Üres állapot: magyarázó szöveg, nem üres terület (EF-0.3 szelleme). */
  .jobs__empty { margin: 24px 0 0; color: var(--ink-500) }

  /* --- Térkép / elérhetőség ----------------------------------------------- */
  .map { display: grid; gap: var(--sp-22); margin-top: 8px }
  .map__address { font-style: normal; display: grid; gap: 6px }
  .map__street { font-weight: 600 }
  .map__phone, .map__email { color: var(--blue-700); text-decoration: none; justify-self: start }
  .map__phone:hover, .map__email:hover { text-decoration: underline }
  .map__hours { margin: 0; font-size: 14px; color: var(--ink-600) }
  .map__link a { color: var(--blue-700) }

  /* --- Rácsok szélesebb nézetben -----------------------------------------
     A töréspont fölött bomlanak oszlopokra. 390px-en minden egyoszlopos, tehát
     vízszintes görgetés nem keletkezhet (EF-12.7). */
  @media (min-width: 720px) {
    .related[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .related[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .industry[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .industry[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    .team[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .team[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }

    .video--beside { grid-template-columns: 1fr 1fr; align-items: center }
    .lead-magnet--card { grid-template-columns: auto 1fr }
    .map--left { grid-template-columns: 1fr 1fr }

    .timeline--horizontal { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr) }
    .timeline--horizontal .timeline__item { border-left: 0; border-top: 2px solid var(--blue-200); padding: 16px 12px 0 0 }

    .tabs--side { grid-template-columns: minmax(0, 1fr) }
  }
}


/* ==== referencialogó-futószalag (reference_logos, spacing=s) ================
   A terv `Logo Sav.dc.html` marquee-módja, értékről értékre:
     pálya        width:max-content, a sor KÉTSZER kirendelve
     animáció     translateX(0) -> translateX(-50%), lineáris, végtelen
     időtartam    max(20, round(n * 3,6)) s — OSZTÁLY hordozza, mert a CSP
                  `style-src-attr 'none'`, tehát inline style nem adható
     sávmagasság  100px, tételenként 0 30px belső térköz (a terv gapHalf-ja)
     szélek       maszkkal elhalványítva 7% / 93%-nál
   `prefers-reduced-motion` alatt a szalag MEGÁLL és olvasható sorrá nyílik —
   a terv 16. sorának megfelelője, egyben kötelező viselkedés (05_seo.md 8.).

   A SZELEKTOROK TELJESEN KIÍRVA. A `.band--reference-logos.band--sp-s
   .reference-logos__list` szabály fajsúlya (0,3,0) magasabb, mint egy puszta
   osztályé, ezért a rövid alak NEM ütne át rajta — ugyanez a csapda egyszer már
   megvolt ebben a fájlban a sötét lemeznél. Azonos fajsúlynál a későbbi nyer,
   ezért áll ez a blokk a fájl végén.
   ========================================================================== */
@layer components {
  @keyframes adamoLogoLoop {
    from { transform: translateX(0) }
    to   { transform: translateX(-50%) }
  }

  .reference-logos__ablak {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }

  .band--reference-logos .reference-logos--csik .reference-logos__sav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    gap: 0;
    animation-name: adamoLogoLoop;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .band--reference-logos .reference-logos--csik .reference-logos__item {
    flex: none;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
  }
  .band--reference-logos .reference-logos--csik .reference-logos__logo {
    min-height: 0;
    background: none;
    border: 0;
    padding: 0;
  }

  /* Hover és billentyűzetfókusz megállítja — a terv `style-hover` szabálya, és
     a 05_seo.md 8. kötelező viselkedése: a mozgó tartalom megállítható legyen. */
  .reference-logos__ablak:hover .reference-logos__sav,
  .reference-logos__sav:focus-within { animation-play-state: paused }

  /* A terv időzítése a logók száma szerint. */
  .reference-logos__sav--n2 { animation-duration: 20s }
  .reference-logos__sav--n3 { animation-duration: 20s }
  .reference-logos__sav--n4 { animation-duration: 20s }
  .reference-logos__sav--n5 { animation-duration: 20s }
  .reference-logos__sav--n6 { animation-duration: 22s }
  .reference-logos__sav--n7 { animation-duration: 25s }
  .reference-logos__sav--n8 { animation-duration: 29s }
  .reference-logos__sav--n9 { animation-duration: 32s }
  .reference-logos__sav--n10 { animation-duration: 36s }
  .reference-logos__sav--n11 { animation-duration: 40s }
  .reference-logos__sav--n12 { animation-duration: 43s }
  .reference-logos__sav--n13 { animation-duration: 47s }
  .reference-logos__sav--n14 { animation-duration: 50s }
  .reference-logos__sav--n15 { animation-duration: 54s }
  .reference-logos__sav--n16 { animation-duration: 58s }
  .reference-logos__sav--n17 { animation-duration: 61s }
  .reference-logos__sav--n18 { animation-duration: 65s }
  .reference-logos__sav--n19 { animation-duration: 68s }
  .reference-logos__sav--n20 { animation-duration: 72s }
  .reference-logos__sav--n21 { animation-duration: 76s }
  .reference-logos__sav--n22 { animation-duration: 79s }
  .reference-logos__sav--n23 { animation-duration: 83s }
  .reference-logos__sav--n24 { animation-duration: 86s }
  .reference-logos__sav--n25 { animation-duration: 90s }
  .reference-logos__sav--n26 { animation-duration: 94s }
  .reference-logos__sav--n27 { animation-duration: 97s }
  .reference-logos__sav--n28 { animation-duration: 101s }
  .reference-logos__sav--n29 { animation-duration: 104s }
  .reference-logos__sav--n30 { animation-duration: 108s }

  @media (prefers-reduced-motion: reduce) {
    /* A kikapcsolás fajsúlya is (0,3,0) kell legyen, különben a fenti
       `animation-name` átütne rajta és a szalag mozogna tovább. */
    .band--reference-logos .reference-logos--csik .reference-logos__sav {
      animation: none;
      flex-wrap: wrap;
      width: auto;
      justify-content: center;
    }
    /* Mozgás nélkül a duplikált sor fölösleges és zavaró lenne. */
    .band--reference-logos .reference-logos--csik .reference-logos__item[aria-hidden="true"] { display: none }
    .reference-logos__ablak { overflow: visible; -webkit-mask-image: none; mask-image: none }
  }
}

/* ==== megszűnt cégek jelölése (terv-kontraktus `megszunt`) ==================
   A terv a már nem létező cégek logóját szürkén és halványan mutatja — mind a
   szalagon, mind a logófalon. Ez NEM átszínezés a 13_dark_mode értelmében: a
   védjegyet nem a saját arculatához igazítjuk, hanem jelezzük, hogy a
   referencia múltbeli. A `no-recolor` tiltás a sötét-mód-szabályokra
   vonatkozik, nem erre.
   Értékek a kontraktusból: grayscale(1), opacity 0.55.
   ========================================================================== */
@layer components {
  .reference-logos__logo.is-megszunt img {
    filter: grayscale(1);
    opacity: .55;
  }
}

/* ==== kiemelő panel, elemsor, PMR-hármas (2026-10-28) ======================
   A tervexport `NINCS_MEGFELELO` blokkjaiból megépített három típus. A terv
   vizuális specifikációja ezekre MÉG NEM része a `terv-kontraktus.json`-nak,
   ezért a megjelenés a meglévő tokenekből épül: a panel a `--navy` sávok
   inverz készletét használja, a kerekítés és a térköz a `--r-*` tokenekből jön.
   Amint a kontraktus megadja a normatív értékeket, ez a blokk onnan frissül.
   ========================================================================== */
@layer components {
  /* --- kiemelő panel: sötét panel a sávon BELÜL ------------------------- */
  .highlight-panel {
    /* A sötét alap ugyanaz a token, amit a navy SÁV is használ — így a panel és
       a sáv nem tud elszíneződni egymástól egy témaváltáskor.

       A PANEL SAJÁT SZÍNKÉSZLETE. A panel MINDKÉT témában sötét, a globális
       szövegtokenek viszont témánként fordulnak. 2026-10-28-án mérve: sötét
       témában a `--blue-200` (szegélytoken, rgba .40) szövegként 1,82:1-et, a
       `--page-bg` gombszínként 1,25:1-et adott. Ezért a panel szövegszínei
       panel-lokálisak és FIXEK; mérve mindkét alapon (#0C1B33 / #16274B). */
    --hp-muted:  #C7D4EE;   /* 11,54:1 / 9,87:1 */
    --hp-value:  #FBB37E;   /*  9,71:1 / 8,31:1 */
    --hp-on:     #FFFFFF;   /* 17,21:1 / 14,73:1 */
    /* A KICKER A TERV NARANCSA. Korábban `--hp-muted` (halványkék) volt, azzal
       az indoklással, hogy a kickernek 4,5:1 kell — a terv `#FF8A3D`-je viszont
       MÉRVE 7,34:1 / 6,28:1, tehát bőven megfelel. Nem volt okom eltérni tőle.
       MÉRVE 2026-10-30. */
    --hp-kicker: #FF8A3D;   /*  7,34:1 / 6,28:1 */
    background: var(--surface-dark);
    color: var(--hp-on);
    border-radius: var(--r-block);
    padding: 36px 40px;
    display: grid;
    gap: 18px;
    justify-items: start;
  }
  .highlight-panel__kicker {
    margin: 0;
    /* A terv jelölése: 11,5px / 700 / .12em / #FF8A3D. */
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--hp-kicker);
  }
  /* A SZÍN ITT KÖTELEZŐ. A globális `h1..h6 { color: var(--ink-900) }` erősebb,
     mint az öröklés, és világos témában az --ink-900 SÖTÉT (#0C1B33) — vagyis a
     cím a sötét panelen láthatatlan lett volna. MÉRVE 2026-10-28: 1,00:1. */
  .highlight-panel__title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--hp-on) }
  /* A csatorna-panel címe a terven kisebb: 22px/700. */
  .highlight-panel:has(.highlight-panel__chips) .highlight-panel__title { font-size: 22px; font-weight: 700 }
  .highlight-panel:has(.highlight-panel__chips) .highlight-panel__lead { font-size: 14px }
  .highlight-panel__lead  { margin: 0; font-size: 16px; line-height: 1.6; max-width: 62ch }

  .highlight-panel__values {
    margin: 6px 0 0;
    display: flex; flex-wrap: wrap; gap: 20px 48px;
  }
  .highlight-panel__value-item { display: grid; gap: 4px }
  .highlight-panel__value {
    font-size: 34px; font-weight: 800; line-height: 1;
    /* A hangsúly a számon van; a kiemelő szín a terv narancsa. */
    color: var(--hp-value);
  }
  .highlight-panel__value-label { margin: 0; font-size: 13px; color: var(--hp-muted) }

  /* CSATORNA-DOBOZOK. A terv ezeket nem pasztillaként, hanem HÁROM HASÁBOS
     rácsban, keretes dobozokként mutatja. Jelölés a tervfájlból:
     `grid-template-columns:repeat(3,minmax(0,1fr));gap:10px`, a doboz
     `background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
      border-radius:11px;padding:12px 14px;font-size:13.5px;font-weight:600`.
     MÉRVE 2026-10-30. */
  .highlight-panel__chips {
    margin: 4px 0 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    width: 100%;
  }
  .highlight-panel__chip {
    font-size: 13.5px; font-weight: 600; line-height: 1.4;
    padding: 12px 14px;
    border-radius: 11px;
    background: rgb(255 255 255 / .07);
    border: 1px solid rgb(255 255 255 / .14);
  }
  @media (max-width: 760px) {
    .highlight-panel__chips { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  }

  /* KÉT HASÁB. A terven a szöveg balra, a csatorna-rács jobbra áll
     (`minmax(0,1fr) minmax(0,1.1fr)`, 40px köz, függőlegesen középre zárva).
     Csak ott, ahol van csatorna-rács — a sima kiemelő panel egyhasábos marad. */
  .highlight-panel:has(.highlight-panel__chips) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: center;
    padding: 32px 38px;
    justify-items: stretch;
  }
  .highlight-panel:has(.highlight-panel__chips) > :not(.highlight-panel__chips) {
    grid-column: 1;
  }
  .highlight-panel__chips { grid-column: 2; grid-row: 1 / -1; align-self: center }
  @media (max-width: 860px) {
    .highlight-panel:has(.highlight-panel__chips) { grid-template-columns: 1fr }
    .highlight-panel:has(.highlight-panel__chips) > * { grid-column: 1 }
    .highlight-panel__chips { grid-row: auto }
  }
  .highlight-panel__cta {
    margin-top: 6px;
    font-weight: 700;
    color: var(--hp-on);
    border-bottom: 2px solid var(--hp-value);
    padding-bottom: 2px;
  }
  .highlight-panel__cta:focus-visible { outline: 2px solid var(--hp-on); outline-offset: 3px }

  /* --- árcsomag-kártyák --------------------------------------------------
     A `/vasarlas` sávja. Három kártya: világos, kiemelt és sötét. A SÖTÉT
     kártya ugyanazzal az elvvel él, mint a kiemelő panel: mindkét témában
     sötét marad, ezért a szövegszínei panel-lokálisak és fixek, nem a
     témánként forduló globális tokenek. Mérve mindkét alapon.
     ---------------------------------------------------------------------- */
  .pricing-tiers {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
  }
  .pricing-tier {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 28px 26px;
    border-radius: var(--r-block);
    border: 1px solid var(--border);
    background: var(--surface);
    position: relative;
  }
  /* A kiemelt kártya nem MÉRETBEN nő — a terv narancs kerete emeli ki, így a
     sor magassága és a mobil sorrend változatlan marad. */
  .pricing-tier--accent { border: 2px solid var(--orange-600) }
  .pricing-tier--dark {
    --pt-muted: #C7D4EE;   /* 11,54:1 / 9,87:1 */
    --pt-on:    #FFFFFF;   /* 17,21:1 / 14,73:1 */
    background: var(--surface-dark);
    border-color: transparent;
    color: var(--pt-on);
  }
  .pricing-tier__badge {
    margin: 0; justify-self: start;
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-chip);
    background: var(--orange-600);
    /* Fehér szöveg a narancson csak 3,11:1 — ezért SÖTÉT szöveg: 5,53:1. */
    color: #0C1B33;
  }
  .pricing-tier__name { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2 }
  /* Ugyanaz, mint a panelnél: a globális h1..h6 szabály erősebb az öröklésnél. */
  .pricing-tier--dark .pricing-tier__name,
  .pricing-tier--dark .pricing-tier__price { color: var(--pt-on) }
  .pricing-tier__audience { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-500) }
  .pricing-tier--dark .pricing-tier__audience { color: var(--pt-muted) }
  .pricing-tier__price { margin: 4px 0 0; font-size: 26px; font-weight: 800; line-height: 1 }
  .pricing-tier__items {
    margin: 8px 0 0; padding: 0; list-style: none;
    display: grid; gap: 8px;
  }
  .pricing-tier__item {
    font-size: 15px; line-height: 1.5;
    padding-left: 24px;
    position: relative;
    color: var(--ink-600);
  }
  .pricing-tier--dark .pricing-tier__item { color: var(--pt-muted) }
  /* A pipa dekoráció: a tartalmat a szöveg hordozza, ezért rejtett a
     képernyőolvasó elől (nincs róla szöveges információ). */
  .pricing-tier__item::before {
    content: "";
    position: absolute; left: 2px; top: .45em;
    width: 12px; height: 7px;
    border-left: 2px solid var(--orange-600);
    border-bottom: 2px solid var(--orange-600);
    transform: rotate(-45deg);
  }
  .pricing-tier__cta {
    margin-top: 14px; justify-self: start;
    font-weight: 700;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--orange-600);
  }
  .pricing-tier--dark .pricing-tier__cta { color: var(--pt-on) }
  .pricing-tier__cta:focus-visible { outline: 2px solid var(--border-focusable); outline-offset: 3px }

  /* --- elemsor ---------------------------------------------------------- */
  .item-row {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 20px 28px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .item-row__kicker {
    margin: 0 0 4px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--orange-700);
  }
  .item-row__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3 }
  .item-row__body  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-600) }

  /* KAPCSOLÓDÓ MODUL sor. A tervfájl jelöléséből MÁSOLVA 2026-10-30:
     `margin-top:18px;display:flex;align-items:center;gap:18px;background:#fff;
      border:1px solid #DCE6FB;border-radius:14px;padding:18px 22px`;
     a jelvény 42x42, `border-radius:11px`, `#FEF0E6` alapon `#C24F0E`,
     800/11px; a kicker 10,5px/700/.12em `#C24F0E`; a szöveg 14px/1.55. */
  .detail-list__module {
    margin-top: 18px;
    display: flex; align-items: center; gap: 18px;
    background: var(--surface);
    border: 1px solid var(--blue-200);
    border-radius: var(--r-panel);
    padding: 18px 22px;
  }
  .detail-list__module-badge {
    width: 42px; height: 42px; flex: none;
    border-radius: 11px;
    background: var(--orange-100);
    color: var(--orange-700);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800; font-size: 11px;
  }
  .detail-list__module-text { flex: 1; min-width: 0 }
  .detail-list__module-kicker {
    display: block; margin-bottom: 3px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
    /* A sor FEHÉR alapon ül, ott a terv `#C24F0E`-je megfelel (4,75:1).
       MÉRVE 2026-10-30: a színréteg ezt az egy árnyalatnyi eltérést fogta meg. */
    color: var(--orange-700-light);
  }
  .detail-list__module-body {
    margin: 0;
    font-size: 14px; line-height: 1.55;
    color: var(--ink-700);
  }
  .detail-list__module-link {
    flex: none;
    font-size: 13.5px; font-weight: 700;
    color: var(--blue-600);
    text-decoration: none;
  }
  .detail-list__module-link:hover { text-decoration: underline }
  @media (max-width: 700px) {
    .detail-list__module { flex-wrap: wrap; gap: 12px }
  }

  /* Címke–érték párok: a terv EGY SORBAN, ponttal elválasztva mutatja őket. */
  .item-row--meta {
    display: flex; flex-wrap: wrap; gap: 6px 10px;
    font-size: 14px; color: var(--ink-600);
  }
  .item-row__pair { display: flex; gap: 6px; align-items: baseline }
  .item-row__pair + .item-row__pair::before { content: "·"; color: var(--ink-400); margin-right: 4px }
  .item-row__label { font-weight: 700; color: var(--ink-700) }
  .item-row__label::after { content: ":" }
  .item-row__value { margin: 0 }

  /* CSIPESZ-ALAK. A terv jelöléséből MÁSOLVA 2026-10-29:
     `display:flex;flex-wrap:wrap;gap:8px`, a címke
     `background:#fff;border:1px solid #E4EAF4;font-size:13px;font-weight:600;
      padding:8px 14px;border-radius:999px`.
     A `--surface` / `--border-subtle` tokenek pontosan ezek az értékek, ezért
     tokennel írom — sötét témában is helyes marad. */
  .item-row--chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    grid-template-columns: none;
  }
  .item-row__chip {
    background: var(--surface);
    border: 1px solid var(--border);     /* #E4EAF4, a terv kártyakerete */
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px; font-weight: 600;
    color: var(--ink-700);
  }

  /* --- Probléma / Megoldás / Eredmény ----------------------------------- */
  .psr { display: grid; gap: 18px }
  .psr__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange-600);
    border-radius: var(--r-card);
    padding: 22px 26px;
  }
  .psr__label {
    margin: 0 0 8px;
    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--orange-700);
  }
  .psr__body { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-700) }

  @media (max-width: 760px) {
    .highlight-panel { padding: 26px 22px }
    .highlight-panel__title { font-size: 23px }
    .highlight-panel__values { gap: 16px 28px }
    .highlight-panel__value { font-size: 28px }

    /* Telefonon a három csomag egymás alá kerül; a kiemelt 2px-es kerete
       változatlan marad, hogy a sorrend és a magasság ne ugorjon. */
    .pricing-tiers { grid-template-columns: 1fr; gap: 16px }
    .pricing-tier { padding: 24px 20px }
    .pricing-tier__name { font-size: 20px }
  }
}

@layer components {
  /* A terv a sáv fejlécében a cím mellett darabszám-címkét mutat („3 funkció"). */
  .related__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-12); flex-wrap: wrap;
  }
  .related__count {
    font-family: var(--font-display);
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-500);
  }

  .capability-grid__kicker {
    display: block; margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-500);
  }

  /* „PANEL A SÁVBAN". A terv ezeket nem önálló sávként, hanem a sávon belüli
     sötét panelként mutatja. A panel mindkét témában sötét, ezért a szövegszínt
     itt rögzítjük — a téma-tokenek világos témában fekete szöveget adnának. */
  .cta-band__panel,
  .tech-partner__panel {
    --panel-on: #FFFFFF;
    --panel-muted: #C7D4EE;
    padding: var(--sp-24) var(--sp-24);
    border-radius: var(--r-block);
    background: var(--surface-dark);
    border: 1px solid var(--border-strong);
  }
  .cta-band__panel .band__title,
  .tech-partner__panel .band__title,
  .cta-band__panel h2,
  .tech-partner__panel h2 { color: var(--panel-on) }
  .cta-band__panel .band__lead,
  .tech-partner__panel .band__lead,
  .cta-band__panel .kicker,
  .tech-partner__panel .kicker { color: var(--panel-muted) }

  /* VÍZSZINTES PANEL — a terv lapzáró felhívása a funkció-, iparág- és
     esettanulmány-lapokon. A tervfájl jelöléséből MÁSOLVA 2026-10-29:
     `display:flex;align-items:center;justify-content:space-between;gap:40px`,
     `padding:44px 52px`, `border-radius:22px`, kék színátmenet, cím 26px,
     a gomb `flex:none` fehér lemezen. */
  .cta-band__panel--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding: 44px 52px;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
    border: 0;
    text-align: left;
  }
  .cta-band__panel--row .band__title { font-size: 26px; margin: 0 }
  .cta-band__panel--row .band__lead  { margin: 8px 0 0; font-size: 14.5px; max-width: none }
  .cta-band__panel--row .band__cta   { margin: 0; flex: none }
  .cta-band__panel--row .btn--primary {
    background: #FFFFFF; color: var(--ink-900);
  }
  .cta-band__panel--row .btn--primary:hover { background: #EAF0FF }
  .band--cta-band:has(.cta-band__panel--row) .band__inner { text-align: left }

  /* MEGFELELÉSI JELVÉNYEK. A terv „Kiemelt biztonság" sávjának hét jelvénye:
     `border:1px solid rgba(255,255,255,.25)`, `12.5px/600`, `7px 14px`,
     `border-radius:999px`, középre zárt tördelő sor. */
  /* VÍZSZINTES KIEMELŐ PANEL — ugyanaz az alak, mint a cta_band `row`-é.
     A terv a funkciólapok zárófelhívását így rajzolja. */
  /* VÍZSZINTES LAPZÁRÓ PANEL. A terv jelöléséből MÁSOLVA 2026-10-30:
     `background:linear-gradient(135deg,#2B5CFF,#1E44CC)`, `border-radius:22px`,
     `padding:44px 52px`, cím 26px/800, bevezető 14,5px `rgba(255,255,255,.8)`,
     jobbra `flex:none` FEHÉR gomb sötét felirattal.

     A kék átmenetet korábban csak a `cta_band` `row` változatára írtam meg, a
     `highlight_panel`-ére nem — ezért ez a hét lapon SÖTÉT NAVY panelként
     renderelt, gomb nélküli szövegblokkal. Amit egy változatra megírok, a
     másikra is meg kell írnom. */
  .highlight-panel--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
    border-radius: var(--r-xl);
    padding: 44px 52px;
  }
  .highlight-panel--row .highlight-panel__title { margin: 0; font-size: 26px; font-weight: 800 }
  .highlight-panel--row .highlight-panel__lead  { margin: 8px 0 0; max-width: none; font-size: 14.5px; color: rgb(255 255 255 / .8) }
  .highlight-panel--row .highlight-panel__cta {
    flex: none; margin: 0;
    background: #FFFFFF;
    color: var(--ink-900);
    font-size: 14.5px; font-weight: 700;
    padding: 13px 26px;
    border-radius: 10px;
    border-bottom: 0;
  }
  .highlight-panel--row .highlight-panel__cta:hover { background: #EAF0FF }

  .cta-band__badges {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  }
  .cta-band__badge {
    border: 1px solid rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .85);
    font-size: 12.5px; font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
  }
  .band--cta-band:not(.band--navy) .cta-band__badge {
    border-color: var(--border);
    color: var(--ink-700);
  }
}