/* pályázat.app — bemutatkozó oldal. A design az app „Spatial” rendszere (frontend/components/redesign/):
   - színek, üveg, szegély, lekerekítés: a GENERÁLT `tokens.css` (`var(--rd-…)`, forrás: az app tokens.css-e — `tokenek.py`);
     ⛔ ebben a fájlban színliterál (hex, rgb(), hsl(), színnév) nincs — az őr (`check_landing.py`) bukik rá;
   - háttér: a `.rd-ter` (shell.css) — #0B0F19-alap + három elmosott fénygömb (ibolya, cián, kék; 70 px blur) + szemcsezaj;
   - kártya = `.rd-glass`, kiemelt = `.rd-glass--lift`, gomb = `.rd-btn--primary` / `.rd-btn`, jelvény = `.rd-badge--ai` (ui.css);
   - betűk: Bricolage Grotesque (cím), Manrope (szöveg) — helyben (`betuk/`, OFL), font-display: swap; a JetBrains Mono a landingen csak díszítés
     volt (lépésszám, 404-es kód) ⇒ kimarad (FONT a, 10-14), ott a címbetű áll;
   - a halvány szöveg itt `--rd-fg-2` (nem `--rd-fg-3`): a landing szövege közvetlenül a fénygömbökön áll, és ott az `fg-3` az AA alá esik
     (a mérés: check_landing.py `contrast_report`); a cián szöveg csak üvegkártyán vagy nagy méretben (404-es kód) áll;
   - mobil először; az egyetlen töréspont az appé (860 px, shell.css); prefers-reduced-motion: nincs mozgás. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/betuk/bricolage-grotesque/BricolageGrotesque-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-stretch: 100%; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/betuk/manrope/Manrope-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  /* az app `fonts.ts` változóinak megfelelője (ott a next/font tölti) — a tokens.css `--rd-f-*` láncai ezekre mutatnak */
  --rd-font-display: "Bricolage Grotesque";
  --rd-font-body: "Manrope";
  /* v2: a monospace feliratok a gép saját monospace betűjével (döntés 10-15: nincs letöltött mono-betű) */
  --rd-font-mono: ui-monospace;
  font-family: var(--rd-f-body);
  color: var(--rd-fg);
  background: var(--rd-bg);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; overflow-wrap: break-word; position: relative; isolation: isolate;
  background: radial-gradient(120% 60rem at 10% 0%, var(--rd-bg-hi) 0%, var(--rd-bg) 55%) no-repeat, var(--rd-bg);
}

/* ── háttér-fény (v2, 10-15): legfeljebb KÉT gömb — a nyitó bal-felső (`.ter`) és a bentó jobb oldali (`.bento__fenyek`); a szakaszok többsége
   mögött nincs fény; mobilon (≤ 860 px) rejtve. Színek: a token (`--rd-orb-c-color`, `--rd-orb-tenant-color`), erősség: `--rd-orb-c` / `--rd-orb-b`. ── */
.ter { position: absolute; inset: 0 0 auto 0; height: 900px; z-index: -1; pointer-events: none; overflow: hidden; }
.ter__gomb { position: absolute; border-radius: 50%; filter: blur(40px); }
.ter__gomb--a { width: 620px; height: 620px; left: -180px; top: -120px; opacity: var(--rd-orb-c);
  background: radial-gradient(circle, var(--rd-orb-c-color) 0%, transparent 62%); }

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

a { color: var(--rd-cyan); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rd-cyan); outline-offset: 3px; border-radius: 6px;
}

h1, h2, h3 { font-family: var(--rd-f-display); color: var(--rd-fg); line-height: 1.15; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }

.keret { width: min(100% - 32px, 72rem); margin-inline: auto; }

/* ── Fejléc (shell.css `.rd-shell__top`: lefelé halványuló sáv + elmosó réteg) ── */
.fejlec { position: sticky; top: 0; z-index: 10; background: linear-gradient(var(--rd-top-bg), transparent); }
.fejlec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  mask-image: linear-gradient(rgba(var(--rd-ink), 1) 55%, transparent); -webkit-mask-image: linear-gradient(rgba(var(--rd-ink), 1) 55%, transparent);
}
.menu a[aria-current="page"] { color: var(--rd-fg); text-decoration: underline; text-decoration-color: var(--rd-cyan); text-underline-offset: 6px; }
.fejlec__sor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 12px 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--rd-fg); }
.logo__jel { flex: none; }
.logo__sav { fill: var(--rd-brand-soft); }
.logo__fo { fill: var(--rd-brand-mark); }
.logo__nev { font-family: var(--rd-f-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.logo__nev span { color: var(--rd-fg-2); font-weight: 600; }
.menu { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 15px; font-weight: 600; }
.menu a { color: var(--rd-fg-2); text-decoration: none; padding: 4px 0; }
.menu a:hover { color: var(--rd-fg); }
/* a „Belépés” = `.rd-btn` (sm) — 10-19: a nav MELLETT áll (nem benne), hogy mobilon a menü külön sorba kerülhessen */
.menu__belepes {
  text-decoration: none; 
  color: var(--rd-fg); background: var(--rd-glass-2); border: 1px solid var(--rd-edge-2); border-radius: 9px; padding: 5px 12px; font-weight: 700;
}
.menu__belepes:hover { background: var(--rd-glass-3); border-color: rgba(var(--rd-ink), .22); }

/* ── Nyitó szakasz ── */
.hos { padding: 48px 0 36px; display: grid; gap: 20px; }
.hos h1 { font-size: clamp(32px, 8vw, 60px); font-weight: 800; letter-spacing: -.03em; max-width: 20ch; text-wrap: balance; }
.hos__alcim { font-size: clamp(16px, 2.4vw, 19px); color: var(--rd-fg-2); max-width: 62ch; }
.cta { display: grid; gap: 10px; justify-items: start; margin-top: 8px; }
.gombok { display: flex; flex-wrap: wrap; gap: 10px; }
.cta__megj { font-size: 14px; color: var(--rd-fg-2); }
.cta__mail { color: var(--rd-fg-2); text-decoration: underline; text-underline-offset: 3px; }

/* M3 — a kapcsolatfelvételi űrlap (/kapcsolat/); csak tokenek.
   LK (Attila 10-22, D-LK-1…4 a; docs/redesign/landing/urlap-design/javaslat.md): az app modal-mintája („Új termék”: ui.css .rd-modal, termek.css .rd-tk-*) —
   a kártya = .rd-modal; két oszlop (Cégnév | E-mail), ≤ 640 px egy; a rádió = .rd-chip; a lábléc = .rd-modal__foot; a köszönő és a hiba oldal ugyanez */
.kapcsolat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; max-width: 660px; color: var(--rd-fg-2);
  border-radius: 22px; padding: 26px; background: var(--rd-modal-bg); border: 1px solid var(--rd-edge-2);
  box-shadow: 0 0 0 1px rgba(var(--rd-cyan-rgb), .08), 0 40px 120px -30px rgba(var(--rd-shadow-rgb), .9),
    0 0 80px -30px rgba(var(--rd-violet-rgb), .6);
}
.kapcsolat > * { grid-column: 1 / -1; margin: 0; }
.kapcsolat > .kapcsolat__mezo--fel { grid-column: auto; }
.kapcsolat--egy { grid-template-columns: 1fr; gap: 14px; }
/* a `hidden` attribútum (a JS a sikerdobozt és az űrlapot ezzel váltja) erősebb a fenti display-nél */
.kapcsolat[hidden], .kapcsolat [hidden] { display: none; }
.szakasz .kapcsolat h1, .szakasz .kapcsolat h2 { font-size: clamp(24px, 4.4vw, 30px); }
.kapcsolat__mezo { display: grid; gap: 6px; align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; }
/* címke: kicsi, halvány, a mező fölött; a kötelezőnél cián csillag (a felolvasó a `required`-et mondja be) */
.kapcsolat__mezo legend, .kapcsolat__mezo > label { font-size: 13px; font-weight: 600; color: var(--rd-fg-2); padding: 0; margin-bottom: 2px; }
.kapcsolat__mezo:has([required]) > legend::after, .kapcsolat__mezo:has([required]) > label::after { content: " *"; color: var(--rd-cyan); }
.kapcsolat input[type="text"], .kapcsolat input[type="email"], .kapcsolat textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--rd-fg); background: var(--rd-glass-2); border: 1px solid var(--rd-edge-2);
  border-radius: 12px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s;
}
.kapcsolat input[type="text"]:hover, .kapcsolat input[type="email"]:hover, .kapcsolat textarea:hover { border-color: rgba(var(--rd-ink), .22); }
.kapcsolat textarea { resize: vertical; min-height: 110px; }
.kapcsolat input[type="text"]:focus-visible, .kapcsolat input[type="email"]:focus-visible, .kapcsolat textarea:focus-visible {
  outline: none; border-color: var(--rd-cyan); box-shadow: 0 0 0 3px rgba(var(--rd-cyan-rgb), .15);
}
.kapcsolat input[aria-invalid="true"], .kapcsolat textarea[aria-invalid="true"] { border-color: var(--rd-bad); box-shadow: 0 0 0 3px rgba(var(--rd-bad-rgb), .12); }
/* a rádió = chip: a natív input átlátszó, és a chip teljes felületét fedi (kattintható, fókuszálható, billentyűzettel ugyanúgy működik) */
.valasztok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.valaszto {
  position: relative; display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rd-edge-2);
  background: var(--rd-glass-2); color: var(--rd-fg-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s;
}
.valaszto:hover { color: var(--rd-fg); border-color: rgba(var(--rd-ink), .22); }
.valaszto input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.valaszto:has(input:checked) { color: var(--rd-fg); background: rgba(var(--rd-cyan-rgb), .1); border-color: rgba(var(--rd-cyan-rgb), .45); }
.valaszto:has(input:focus-visible) { outline: 2px solid var(--rd-cyan); outline-offset: 2px; }
.valaszto input:focus-visible { outline: none; }
.kapcsolat__hiba { margin: 0; font-size: 12.5px; color: var(--rd-bad); }
/* az összegző: az app lágy hibadoboza (.rd-auth__hiba) */
.kapcsolat__osszegzo {
  margin: 0; padding: 11px 14px; border-radius: 11px; font-size: 14px; color: var(--rd-bad);
  border: 1px solid rgba(var(--rd-bad-rgb), .35); background: rgba(var(--rd-bad-rgb), .07);
}
.kapcsolat__adatkezeles { margin: 0; }
.kapcsolat__figy { margin: 0 0 6px; color: var(--rd-fg-2); }
/* a honeypot: a képernyőn kívül, a felolvasók elől elrejtve (aria-hidden a HTML-ben), nem fókuszálható (tabindex="-1") */
.kapcsolat__csapda { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* lábléc (.rd-modal__foot): elválasztó vonal, balra a másodlagos szöveg, jobbra a gomb */
.kapcsolat__lab {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rd-edge);
}
.kapcsolat__lab--jobb { justify-content: flex-end; }
.kapcsolat__lab .kicsi { margin: 0; }
/* a köszönő és a hiba oldal: a kártya a hős helyén */
.szakasz--kapcsolat { padding-top: 40px; }
.kapcsolat__okok { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kapcsolat__okok li { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rd-edge); background: var(--rd-glass-2); font-size: 14px; }
.kapcsolat__okok h3 { font-size: 15px; margin: 0 0 4px; }
.kapcsolat__okok p { margin: 0; }
/* D-LK-4 a: rajzolt jelölő (SVG, currentColor) */
.kapcsolat__jel { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.kapcsolat__jel--ok { color: var(--rd-ok); background: rgba(var(--rd-ok-rgb), .1); border: 1px solid rgba(var(--rd-ok-rgb), .35); }
.kapcsolat__jel--hiba { color: var(--rd-bad); background: rgba(var(--rd-bad-rgb), .08); border: 1px solid rgba(var(--rd-bad-rgb), .35); }
@media (max-width: 640px) {
  .kapcsolat { grid-template-columns: 1fr; padding: 20px 16px; border-radius: 18px; }
  .kapcsolat > .kapcsolat__mezo--fel { grid-column: 1 / -1; }
  /* 16 px: az iOS fókuszkor nem nagyít */
  .kapcsolat input[type="text"], .kapcsolat input[type="email"], .kapcsolat textarea { font-size: 16px; }
  .kapcsolat__lab { flex-direction: column-reverse; align-items: stretch; }
  .kapcsolat__lab .gomb { width: 100%; }
  .kapcsolat__okok { grid-template-columns: 1fr; }
}

/* v2 (döntés 10-15): a fő gomb TÖMÖR ibolya, `--rd-on-accent` felirattal (kontraszt 6,28:1) — tudatos eltérés az app áttetsző `.rd-btn--primary`-jától:
   a landingen a fő cselekvésnek kell a legjobban látszania */
.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 48px;
  font-weight: 700; font-size: 16px; color: var(--rd-on-accent); white-space: nowrap;
  padding: 0 24px; border-radius: 12px; border: 1px solid rgba(var(--rd-violet-soft-rgb), .5);
  background: var(--rd-violet);
  box-shadow: 0 0 0 1px rgba(var(--rd-violet-rgb), .35), 0 12px 32px rgba(var(--rd-violet-rgb), .28);
}
.gomb:hover { filter: brightness(1.12); }
.gomb:focus-visible { outline: 2px solid var(--rd-cyan); outline-offset: 3px; }
/* a második gomb = `.rd-btn` (lg) */
.gomb--masod { background: var(--rd-glass-2); border-color: var(--rd-edge-2); box-shadow: none; color: var(--rd-fg); font-weight: 600; }
.gomb--masod:hover { background: var(--rd-glass-3); border-color: rgba(var(--rd-ink), .22); box-shadow: none; filter: none; }
/* D-LK-1 a (Attila 10-22): az űrlap-kártyák gombja a keretes `.rd-btn--primary` (áttetsző cián→ibolya) — a 10-15-i tömör CTA szűk kivétele;
   a landing többi CTA-ja tömör marad */
.gomb--urlap {
  min-height: 44px; padding: 0 20px; font-size: 15px; color: var(--rd-fg); border: 1px solid rgba(var(--rd-cyan-rgb), .45);
  background: linear-gradient(135deg, rgba(var(--rd-cyan-rgb), .22), rgba(var(--rd-violet-rgb), .22));
  box-shadow: 0 0 24px -6px rgba(var(--rd-cyan-rgb), .45);
}
.gomb--urlap:hover { filter: none; box-shadow: 0 0 30px -4px rgba(var(--rd-cyan-rgb), .6); }
.gomb--urlap:disabled, .gomb--urlap[aria-busy="true"] { opacity: .8; cursor: progress; }

/* aloldal-nyitó: kisebb cím, nagybetűs kisfelirat (`.rd-glass__eyebrow`) */
.hos--al { padding: 40px 0 24px; }
.hos--al h1 { font-size: clamp(30px, 6.6vw, 48px); max-width: 24ch; }
.hos__felirat { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--rd-fg-2); font-weight: 700; }
.tovabb { font-weight: 700; }
.tovabb a::after { content: " →"; }
.szakasz__bev { color: var(--rd-fg-2); max-width: 62ch; }

/* ── Szakaszok ── */
.szakasz { padding: 32px 0; display: grid; gap: 18px; }
/* horgonyra ugráskor a cím ne bújjon a ragadós fejléc (sáv + menü) alá — mobilon a menü két sorba törik */
.szakasz[id] { scroll-margin-top: 170px; }
.szakasz h2, .zaro h2 { font-size: clamp(26px, 4.6vw, 36px); font-weight: 800; letter-spacing: -.02em; }

/* `.rd-glass` (ui.css) */
.kartya {
  position: relative; background: var(--rd-glass); border: 1px solid var(--rd-edge); border-radius: var(--rd-r);
  padding: 18px 20px; color: var(--rd-fg-2);
  box-shadow: inset 0 1px 0 rgba(var(--rd-ink), .05), 0 10px 30px -18px rgba(var(--rd-shadow-rgb), .6);
}
.kartya h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.005em; }
.kartyak { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
/* `.rd-glass--lift` + cián szegély */
.kiemelt {
  background: var(--rd-glass-2); border-color: rgba(var(--rd-cyan-rgb), .45);
  box-shadow: inset 0 1px 0 rgba(var(--rd-ink), .08), inset 0 0 40px rgba(var(--rd-cyan-rgb), .05), 0 20px 50px -24px rgba(var(--rd-shadow-rgb), .7);
}
.kiemelt h3 { font-size: 20px; }

.lepesek { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.lepesek__szam {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; margin-bottom: 10px;
  font-family: var(--rd-f-display); font-weight: 700; font-size: 14px;
  color: var(--rd-cyan); border: 1px solid rgba(var(--rd-cyan-rgb), .3); background: rgba(var(--rd-cyan-rgb), .07);
}

.bemutato { display: grid; gap: 16px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.bemutato__szoveg { display: grid; gap: 8px; color: var(--rd-fg-2); }
.bemutato__szoveg h3 { font-size: 20px; }
.kep {
  margin: 0; border-radius: var(--rd-r); overflow: hidden; border: 1px solid var(--rd-edge-2); background: var(--rd-solid);
  box-shadow: 0 30px 80px -40px rgba(var(--rd-cyan-rgb), .35), 0 20px 50px -24px rgba(var(--rd-shadow-rgb), .7);
}

/* több listakártya egy keretben (a kirakat-képek): egymás alatt, kis réssel */
.kep--csoport { display: grid; gap: 10px; padding: 10px; background: var(--rd-solid); }
.kep--csoport img { border-radius: 12px; }
.idezet { margin: 0; border-left: 3px solid var(--rd-cyan); padding: 6px 0 6px 20px; }
.idezet blockquote { margin: 0; }
.idezet p { font-size: clamp(16px, 2.2vw, 19px); color: var(--rd-fg); font-style: italic; }
.idezet figcaption { margin-top: 12px; color: var(--rd-fg-2); font-size: 14px; }

/* `.rd-badge.rd-badge--ai` (ui.css) + a nagybetűs kisfelirat (`.rd-glass__eyebrow`: .16em, 11 px, 700) */
.cimke {
  display: inline-flex; align-items: center; justify-self: start; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--rd-cyan); border: 1px solid rgba(var(--rd-cyan-rgb), .3); background: rgba(var(--rd-cyan-rgb), .07);
  border-radius: 999px; padding: 3px 9px;
}

.gyik { display: grid; gap: 10px; }
.gyik details {
  background: var(--rd-glass); border: 1px solid var(--rd-edge); border-radius: 14px; padding: 14px 18px;
  box-shadow: inset 0 1px 0 rgba(var(--rd-ink), .05);
}
.gyik details[open] { background: var(--rd-glass-2); border-color: var(--rd-edge-2); }
.gyik summary { cursor: pointer; font-weight: 700; color: var(--rd-fg); }
.gyik details p { margin-top: 10px; color: var(--rd-fg-2); }
.gyik__tobb { margin: 14px 0 0; }
.gyik__tobb a { color: var(--rd-cyan); font-weight: 600; }

/* LR-1: összehasonlító tábla — mobilon a tábla a saját dobozában görgethető (az oldal nem görget vízszintesen) */
.osszevet__tarto { overflow-x: auto; border: 1px solid var(--rd-edge); border-radius: var(--rd-r); background: var(--rd-glass); }
.osszevet { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.osszevet th, .osszevet td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rd-edge); color: var(--rd-fg-2); }
.osszevet tbody tr:last-child th, .osszevet tbody tr:last-child td { border-bottom: 0; }
.osszevet thead th { font-family: var(--rd-f-display); font-size: 15px; color: var(--rd-fg); }
.osszevet tbody th { font-weight: 700; color: var(--rd-fg); }
.osszevet .osszevet__mi { color: var(--rd-fg); background: rgba(var(--rd-cyan-rgb), .08); }
.osszevet thead .osszevet__mi { color: var(--rd-cyan); }
.osszevet__hamarosan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 15px; color: var(--rd-fg-2); }

/* LR-1: a „kinek szól” sor és az ajánlott termék */
.hos2__kinek { margin: 0 0 -10px; font-size: 15px; font-weight: 600; color: var(--rd-fg-2); }
.kiiras__termek { margin: 6px 0 0; font-size: 13px; color: var(--rd-fg-2); }
.kiiras__termek b { color: var(--rd-fg); }

/* LR-1: mobilon (≤ 860 px) rögzített alsó sáv a „Kérj bemutatót” gombbal — JS nélkül; asztalin rejtve */
.mobil-cta { display: none; }

.zaro { padding: 44px 0 60px; display: grid; gap: 18px; justify-items: start; }

/* ── Lábléc ── */
.lablec { border-top: 1px solid var(--rd-edge); padding: 24px 0 32px; font-size: 14px; color: var(--rd-fg-2); }
.lablec__sor { display: grid; gap: 12px; }
.lablec__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lablec a { color: var(--rd-fg-2); }
.lablec a:hover { color: var(--rd-fg); }
/* LANDING-4 a (L4-1): az Impresszum és az Adatvédelem összecsukva — natív <details>, a summary billentyűzettel nyitható */
.lablec__jogi { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--rd-edge); }
.lablec__osszegzo { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--rd-fg-2); min-height: 44px; display: flex; align-items: center; }
.lablec__osszegzo:hover { color: var(--rd-fg); }
.lablec__osszegzo::-webkit-details-marker { display: none; }
.lablec__osszegzo::after { content: "+"; margin-left: 8px; font-weight: 700; }
.lablec__jogi[open] > .lablec__osszegzo::after { content: "−"; }
.lablec__osszegzo:focus-visible { outline: 2px solid var(--rd-fg); outline-offset: 2px; border-radius: 4px; }
.lablec__jog { display: grid; gap: 12px; padding-top: 4px; font-size: 13px; }
.lablec__jog p { margin: 0; }
.lablec__cim { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--rd-fg-2); }

/* ── 404 ── */
.hibaoldal main { min-height: 80vh; display: grid; place-items: center; }
.hibakartya { display: grid; gap: 14px; justify-items: start; padding: 40px 0; }
.hibakartya a { color: var(--rd-fg); }
.hibakod { font-family: var(--rd-f-display); font-size: 64px; font-weight: 800; color: var(--rd-cyan); line-height: 1; margin: 0; }

/* ══ v2 főoldal (Attila, 10-15 — a `scratchpad/landing-v2-mockup-referencia.html` szerkezete; minden szín token, inline stílus nincs) ══ */
.kicsi { font-size: 14px; line-height: 1.5; color: var(--rd-fg-3); }
.felirat { font-family: var(--rd-f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-fg-3); margin: 0 0 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--rd-edge-2); color: var(--rd-fg-2); white-space: nowrap;
}
.chip--pont::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--ok { color: var(--rd-ok); border-color: rgba(var(--rd-ok-rgb), .4); background: rgba(var(--rd-ok-rgb), .1); }
.chip--warn { color: var(--rd-warn); border-color: rgba(var(--rd-warn-rgb), .4); background: rgba(var(--rd-warn-rgb), .1); }
.chip--bad { color: var(--rd-bad); border-color: rgba(var(--rd-bad-rgb), .4); background: rgba(var(--rd-bad-rgb), .1); }
.chip--uj { color: var(--rd-blue); border-color: rgba(var(--rd-blue-rgb), .4); }
.chip--cian { color: var(--rd-cyan); border-color: rgba(var(--rd-cyan-rgb), .4); background: rgba(var(--rd-cyan-rgb), .08); }
.chip--kicsi { padding: 2px 8px; }
.chip--ajanlat { white-space: normal; text-align: center; justify-content: center; }
.chipsor { display: flex; flex-wrap: wrap; gap: 8px; }
.pipa { display: inline-block; vertical-align: -2px; color: var(--rd-ok); }
.pelda {
  position: absolute; top: 10px; right: 12px; font-family: var(--rd-f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rd-fg-3);
}
.ikon {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px;
  color: var(--rd-cyan); background: rgba(var(--rd-cyan-rgb), .1);
}
.ikon--warn { color: var(--rd-warn); background: rgba(var(--rd-warn-rgb), .1); }
.ikon--bad { color: var(--rd-bad); background: rgba(var(--rd-bad-rgb), .1); }

/* 1. Nyitó: két oszlop (6/6) — bal a szöveg, jobb a „Ma reggel” HTML-komponens (NEM kép) */
.hos2 { padding: 40px 0 32px; }
.hos2__racs { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hos2__szoveg { display: grid; gap: 22px; justify-items: start; }
.hos2__cimke { margin: 0 0 -8px; white-space: normal; }
.hos2__cim { font-size: 40px; font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.hos2__alcim { font-size: 17px; line-height: 1.55; color: var(--rd-fg-2); max-width: 520px; }
.hos2__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
.hos2__link { font-size: 15px; font-weight: 600; }
.hos2__link::after { content: " →"; }
.reggel {
  position: relative; display: grid; gap: 10px; padding: 18px; border-radius: var(--rd-r); border: 1px solid var(--rd-edge-2);
  background: var(--rd-modal-bg); box-shadow: inset 0 1px 0 rgba(var(--rd-ink), .06), 0 30px 80px -40px rgba(var(--rd-shadow-rgb), .8);
}
.reggel__fej { font-size: 14px; font-weight: 600; color: var(--rd-fg-2); padding: 2px 110px 8px 4px; }
.kiiras {
  position: relative; display: grid; gap: 10px; padding: 16px 18px 16px 22px; border-radius: 14px; border: 1px solid var(--rd-edge);
  background: var(--rd-solid); overflow: hidden;
}
.kiiras::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rd-ok); }
.kiiras--warn::before { background: var(--rd-warn); }
.kiiras--bad::before { background: var(--rd-bad); }
.kiiras__chipek { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kiiras__cim { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--rd-fg); }
.kiiras__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--rd-fg-3); }
.kiiras__meta b { color: var(--rd-fg-2); font-weight: 600; }
.kiiras__indok { font-size: 13px; color: var(--rd-fg-3); }

/* 2. Bizonyíték-sáv (5/7): források + számok; felül-alul egy-egy edge-vonal */
.bizonyitek { padding: 16px 0 40px; }
.bizonyitek__racs {
  display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 22px 0;
  border-top: 1px solid var(--rd-edge); border-bottom: 1px solid var(--rd-edge);
}
.szamok { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.szamok__friss { grid-column: 1 / -1; margin: 0; }
.szam { font-family: var(--rd-f-display); font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--rd-fg); }

/* 3. Ismerős? — kártya nélkül: ikon-doboz + bekezdés */
.ismeros { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.ismeros__elem { display: flex; gap: 14px; align-items: flex-start; }
.ismeros__elem p { font-size: 16px; color: var(--rd-fg-2); }

/* 5. Két termék — bento */
.bento { position: relative; }
.bento__fenyek { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bento__gomb {
  position: absolute; right: -220px; top: 40px; width: 560px; height: 560px; border-radius: 50%; filter: blur(40px);
  background: radial-gradient(circle, var(--rd-orb-tenant-color) 0%, transparent 62%); opacity: var(--rd-orb-b);
}
.bento__racs { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 14px; }
.termek {
  display: grid; gap: 18px; padding: 26px; border-radius: var(--rd-r); background: var(--rd-glass-2); border: 1px solid var(--rd-edge-2);
  scroll-margin-top: 110px;
}
.termek--kozb { border-color: rgba(var(--rd-cyan-rgb), .25); }
.termek--pal { border-color: rgba(var(--rd-violet-soft-rgb), .3); }
.termek__fej { display: flex; align-items: center; gap: 10px; }
.termek__fej h3 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.termek__pont { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.termek--kozb .termek__pont { background: var(--rd-cyan); box-shadow: 0 0 12px rgba(var(--rd-cyan-rgb), .7); }
.termek--pal .termek__pont { background: var(--rd-violet-soft); box-shadow: 0 0 12px rgba(var(--rd-violet-soft-rgb), .7); }
.termek__szoveg { font-size: 15px; color: var(--rd-fg-2); }
.feltetelek { position: relative; padding: 16px 18px; border-radius: 14px; background: var(--rd-solid); border: 1px solid var(--rd-edge); }
.feltetelek__cim { font-size: 14px; font-weight: 600; color: var(--rd-fg); margin: 0 110px 4px 0; }
.feltetelek__al { font-size: 14px; color: var(--rd-fg-3); margin-bottom: 8px; }
.feltetel {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px;
  border-bottom: 1px solid var(--rd-edge);
}
.feltetel:last-child { border-bottom: 0; }
.feltetel__l { color: var(--rd-fg-2); }
.feltetel__r { color: var(--rd-fg-3); font-size: 13px; text-align: right; }
.kiskartyak { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.kiskartya { padding: 16px; border-radius: var(--rd-r); background: var(--rd-glass); border: 1px solid var(--rd-edge); }
.kiskartya h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--rd-fg); }
.kiskartya p { font-size: 14px; color: var(--rd-fg-3); }

/* 6. Alapító — fotó nélkül (Attila, 10-15): felül az idézet, alatta a név és a bemutatkozás */
.alapito {
  display: grid; gap: 22px; padding: 28px; border-radius: var(--rd-r); background: var(--rd-glass-2); border: 1px solid var(--rd-edge-2);
}
.alapito__alairas { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--rd-cyan); }
.alapito__nev { font-weight: 700; font-size: 16px; color: var(--rd-fg); }
.idezet--v2 { border-left: 0; padding: 0; }
.idezet--v2 p { font-family: var(--rd-f-display); font-style: normal; font-size: 19px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }

/* 7. Miért bízhatsz benne — 4 kártya */
.bizalom4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.bizalom4 .kartya { display: grid; gap: 10px; align-content: start; }
.bizalom4 h3 { font-size: 16px; font-weight: 700; }
.bizalom4 p { font-size: 14px; color: var(--rd-fg-3); }

/* 8. Indulás + CTA — egy középre zárt kártya, halvány ibolya → cián átmenettel */
.indulas2 {
  display: grid; justify-items: center; text-align: center; gap: 18px; padding: 40px 22px; border-radius: var(--rd-r); border: 1px solid var(--rd-edge-2);
  background: linear-gradient(160deg, rgba(var(--rd-violet-rgb), .14), rgba(var(--rd-cyan-rgb), .06)), var(--rd-glass-2);
}
.indulas2 h2 { font-size: 30px; }
.indulas2__szoveg { font-size: 17px; color: var(--rd-fg-2); max-width: 560px; }
.indulas2 .gombok { justify-content: center; }
/* a CTA-kártya átmenetén az fg-3 4,12:1 lenne (a zöld gömb csúcsán) ⇒ itt a halvány sor is fg-2 */
.indulas2 .kicsi { color: var(--rd-fg-2); }
.indulas2 .indulas2__felt { margin-top: -10px; font-size: 13px; }

/* ── Asztali nézet: az app töréspontja (shell.css: 860 px alatt mobil) ── */
@media (min-width: 861px) {
  .kartyak--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartyak--3, .lepesek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hos { padding: 88px 0 56px; }
  .hos2 { padding: 64px 0 40px; }
  .hos2__racs { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; }
  .hos2__cim { font-size: 58px; }
  .hos2__alcim { font-size: 19px; }
  .bizonyitek__racs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .szamok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ismeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .bento__racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kiskartyak { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alapito { padding: 40px 48px; }
  .idezet--v2 p { font-size: 22px; }
  .bizalom4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .indulas2 { padding: 48px 40px; }
  .indulas2 h2 { font-size: 40px; }
  .kiskartya { backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); }
  .szakasz[id] { scroll-margin-top: 110px; }
  .szakasz { padding: 48px 0; }
  .lablec__sor { grid-template-columns: auto 1fr; align-items: start; }
  .lablec__sor nav { grid-column: 2; }
  .lablec__jog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .lablec__lista { justify-content: flex-end; }
  .hos--al { padding: 64px 0 32px; }
  .bemutato { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
  .bemutato--fordit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .bemutato--fordit .bemutato__szoveg { order: 2; }
  /* az üvegkártyák elmosása (`.rd-glass`: blur 12 px) csak asztalon — mobilon a fénygömbök már elmosottak, és a sok
     backdrop-filter görgetéskor drága (mérés: docs/meresek/landing-design.md) */
  .kartya, .gyik details { backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); }
}

/* ── Mobil fejléc (Attila, 10-14: a) — ≤ 860 px-en a menü két sorba törik, ezért a sáv tömör (`--rd-top-bg`), halványulás nélkül; az elmosás
   az egész fejlécre szól. Tudatos eltérés az app felső sávjától (ott a sáv egysoros), a szín token. ── */
@media (max-width: 860px) {
  .fejlec { background: var(--rd-top-bg); border-bottom: 1px solid var(--rd-edge); }
  .fejlec::before { mask-image: none; -webkit-mask-image: none; }
  /* 10-19 (1. javító menet): mobilon a három menülink egy második, kisebb betűs sorban (JS és hamburger nélkül); a Belépés a logó sorában marad */
  .logo { order: 0; }
  .menu__belepes { order: 1; }
  .menu { order: 2; flex: 0 0 100%; margin-left: 0; gap: 2px 16px; font-size: 13px; }
  .menu a { padding: 2px 0; }
  .ter, .bento__fenyek { display: none; }
  /* az összehasonlító tábla mobilon soronként kártya: a sor neve, alatta a három oszlop a saját címkéjével (data-cimke, CSS-ből) */
  .osszevet { min-width: 0; }
  .osszevet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .osszevet tr, .osszevet th, .osszevet td { display: block; }
  .osszevet tbody tr { border-bottom: 1px solid var(--rd-edge); padding: 6px 0; }
  .osszevet tbody th, .osszevet td { border-bottom: 0; padding: 6px 14px; }
  .osszevet td { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; }
  .osszevet td::before { content: attr(data-cimke); color: var(--rd-fg-2); font-size: 13px; }
  .osszevet td.osszevet__mi::before { color: var(--rd-cyan); font-weight: 700; }
  .mobil-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--rd-top-bg); border-top: 1px solid var(--rd-edge);
  }
  .mobil-cta .gomb { display: flex; justify-content: center; width: 100%; }
  /* D-LK-3 a: a kapcsolat-oldalakon a sáv önmagára mutatna */
  .mobil-cta--rejtve { display: none; }
  .mobil-cta--rejtve + .lablec { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  /* a lábléc tartalmát a sáv ne takarja: a lábléc alá a sáv magasságának megfelelő hely */
  .lablec { padding-bottom: calc(32px + 72px + env(safe-area-inset-bottom)); }
}

/* ── Mozgás: csak ha a felhasználó nem kérte a csökkentését ── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .gomb, .menu a, .gyik details { transition: background .2s, border-color .2s, box-shadow .2s, color .2s; }
}

/* TERKEP a (Attila 10-20) — a bizonyíték-sáv térképe: balra a források + a számok, jobbra a térkép (átfedés nincs). A statikus SVG egyforma, halvány
   pontokat mutat; a megyénkénti fényerőt és az 5 legaktívabb megye pulzus-gyűrűjét CSAK a szamok.js adja, érvényes, friss adatból. */
.bizonyitek__bal { display: grid; gap: 22px; align-content: center; min-width: 0; }
.terkep { position: relative; min-width: 0; pointer-events: none; }
.terkep .tk-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; overflow: visible; }
.tk-gyuru { opacity: 0; }
.terkep__felirat { margin: 8px 0 0; text-align: center; }
@media (min-width: 760px) {
  .bizonyitek__racs--terkep { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
  .bizonyitek__racs--terkep .szamok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .terkep .tk-svg { max-width: 680px; }
}
/* mozgás CSAK, ha a látogató nem kért csökkentett mozgást — és csak asztali szélességen (mobilon statikus) */
@media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
  .tk-gyuru { transform-box: fill-box; transform-origin: center; animation: tk-pulzus 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
  .tk-pont[data-k="1"] .tk-gyuru { animation-delay: -.7s; } .tk-pont[data-k="2"] .tk-gyuru { animation-delay: -1.4s; }
  .tk-pont[data-k="3"] .tk-gyuru { animation-delay: -2.1s; } .tk-pont[data-k="4"] .tk-gyuru { animation-delay: -2.8s; }
  .tk-mag { animation: tk-pislog 5.2s ease-in-out infinite; }
  .tk-pont[data-k="1"] .tk-mag { animation-delay: -1.1s; } .tk-pont[data-k="2"] .tk-mag { animation-delay: -2.3s; }
  .tk-pont[data-k="3"] .tk-mag { animation-delay: -3.4s; } .tk-pont[data-k="4"] .tk-mag { animation-delay: -4.4s; }
}
@keyframes tk-pulzus { 0% { transform: scale(.35); opacity: .75; } 70% { opacity: .12; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes tk-pislog { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }