/* ══════════════════════════════════════════════════════════════════════════
   SMARTSOLVEN — „MŰHELY" arculat (v8)
   ──────────────────────────────────────────────────────────────────────────
   A vezérmotívum a MÉRETVONAL: vékony vonal keresztvégekkel, fölötte a mért
   érték. Nem dísz: a cég állítása („fix ár írásos terv alapján, mért
   határidő") rajzban elmondva. Ár, határidő, terjedelem — mind mérve van.

   A második motívum a MODUL-JEL: 2×2 négyzet, a negyedik narancs. Ez a márka
   jele 2026-08 óta — a logóban, a felsorolásjelekben, a rácsban.

   HÁROM SZABÁLY (drágán tanultuk meg, lásd a projekt memóriáját):
   1. JS NÉLKÜL MINDEN LÁTSZIK. Rejtett kiinduló állapot csak `html.js` alatt.
   2. `prefers-reduced-motion` esetén minden KIKAPCSOL, nem lassul.
   3. Csak `transform` és `opacity` mozog. Animált blur/width/height nincs.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. BETŰK ──────────────────────────────────────────────────────────── */

/* Archivo — csak kijelzőre (címsor, szám, gomb). 700–900 változó tengely,
   a szélesség 100-ra rögzítve, magyar karakterkészletre szűkítve: 19,6 kB. */
@font-face {
  font-family: "Archivo";
  font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("/fonts/archivo-hu.woff2") format("woff2");
}
/* Inter Tight — kenyérszöveg. Már a szerveren volt, két darabban. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/InterTight-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/InterTight-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── 2. JELÖLŐK ────────────────────────────────────────────────────────── */

:root {
  /* Felületek. Grafit, nem fekete: tiszta feketén a narancs vibrál. */
  --tus:      #0B0E13;
  --tus-2:    #11161E;
  --tus-3:    #171E28;
  --vonal:    #232C3A;
  --vonal-2:  #33404F;

  /* Papír — a „dokumentum" felületek: a terv és az árlap. */
  --papir:    #F7F5F0;
  --papir-2:  #E9E5DC;
  --tinta:    #10141A;

  /* Szöveg. A `-p` végű változat a PAPÍR felületekre való: a grafitra
     hangolt halvány szín papíron 2,4:1-et adna, ami bukik. */
  --szoveg:   #E9EDF3;
  --halk:     #93A1B4;   /* 7,36:1 grafiton */
  --halk-p:   #57616F;   /* 5,76:1 papíron  */

  /* Jelszín. EGY van belőle, és csak cselekvésre + mérésre.
     ⚠️ A gombon SÖTÉT a felirat: fehérrel 2,86:1 lenne (bukik), tintával 6,46. */
  --lang:     #FF6A2B;
  --lang-vil: #FF8F5E;   /* 8,60:1 — kis narancs szöveg grafiton */
  --lang-p:   #C4400A;   /* 4,72:1 — kis narancs szöveg papíron  */
  /* ⚠️ A tervező jelölésének háttere a HALVÁNY NARANCS (#FFE3D2), nem a papír:
     ott a --lang-p már csak 4,2:1 (bukik). Az elem-szintű mérés hozta elő. */
  --lang-jel: #A63406;   /* 5,51:1 a #FFE3D2 jelölés-háttéren */

  /* Rajzvonal: a méretvonalak és a rács hűvös kékje. Sosem CTA. */
  --kek:      #6E8FB8;   /* 5,78:1 grafiton */
  --kek-p:    #3C5B80;   /* 6,42:1 papíron  */

  --betu:    "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kijelzo: "Archivo", "Inter Tight", system-ui, sans-serif;
  --mono:    ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --tart:    1240px;
  --gut:     clamp(20px, 4vw, 44px);
  --fejm:    64px;               /* fejléc magassága — a horgonyokhoz kell */

  /* Térköz-lépcső: a skill „standard" sűrűsége (16–64), két nagy fokkal
     a szakaszhatárokhoz. */
  --t1: 8px; --t2: 16px; --t3: 24px; --t4: 32px;
  --t5: 48px; --t6: 64px; --t7: clamp(72px, 9vw, 128px);

  --ido:  .22s;                  /* felületi visszajelzés */
  --ido2: .5s;                   /* beúszás */
  --gorbe: cubic-bezier(.22,.61,.36,1);

  color-scheme: dark;
}

/* ─── 3. ALAPOK ─────────────────────────────────────────────────────────── */

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

html {
  /* A horgonyok ne csússzanak a ragadós fejléc ALÁ — ez a hiba egyszer már
     megvolt egy korábbi körben. */
  scroll-padding-top: calc(var(--fejm) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tus);
  color: var(--szoveg);
  font: 400 17px/1.62 var(--betu);
  font-synthesis-weight: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--kijelzo);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;           /* a magára maradt utolsó szó ellen */
}
p { margin: 0; text-wrap: pretty; }

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

/* Látható fókusz MINDENHOL. A skill 1. prioritása. */
:focus-visible {
  outline: 3px solid var(--lang);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--lang); color: var(--tinta); }

/* Képernyőolvasónak marad, szemnek nem. */
.rejtve {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ⚠️ A `hidden` attribútum önmagában nem üt át egy `display:flex` szabályt. */
[hidden] { display: none !important; }

/* ⚠️ `fixed`, nem `absolute`: görgetés után az abszolút pozicionált ugrólink
   a lap TETEJÉN jelenne meg, a látótéren kívül. És NINCS átmenet rajta —
   a billentyűzetes látogató azonnal lássa, hova került a fókusz. */
.ugras {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  background: var(--lang); color: var(--tinta);
  padding: 12px 18px; font-weight: 700; text-decoration: none;
}
.ugras:focus { top: 12px; }

.tart {
  width: min(100% - var(--gut) * 2, var(--tart));
  margin-inline: auto;
}

/* ─── 4. KÖZÖS ELEMEK ───────────────────────────────────────────────────── */

/* Szakaszcímke — mono, ritkított, a szekció sorszámával. */
.cimke {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--halk);
}
.cimke b { color: var(--lang-vil); font-weight: 500; }
.papiron .cimke { color: var(--halk-p); }
.papiron .cimke b { color: var(--lang-p); }

/* MODUL-JEL: 2×2 négyzet, a negyedik narancs. A márka jele. */
.jel {
  display: inline-grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr);
  gap: 2px; width: 18px; height: 18px; flex: 0 0 auto;
}
.jel i { background: currentColor; border-radius: 1px; }
.jel i:nth-child(4) { background: var(--lang); }

/* Modul-felsorolásjel: pipa helyett tömör kis négyzet. */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista li { position: relative; padding-left: 22px; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--lang);
}

/* Gombok. Magasság ≥ 52px — a skill 2. prioritása (44×44 minimum). */
.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  font-family: var(--kijelzo); font-weight: 800; font-size: 16px;
  letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; background: none; color: var(--szoveg);
  transition: background var(--ido), color var(--ido), border-color var(--ido), transform var(--ido);
}
.gomb--fo { background: var(--lang); color: var(--tinta); }
.gomb--fo:hover { background: #FF7F49; }
.gomb--fo:active { transform: translateY(1px); }
.gomb--vonal { border-color: var(--vonal-2); }
.gomb--vonal:hover { border-color: var(--lang); color: var(--lang-vil); }
.papiron .gomb--vonal { border-color: #C9C3B6; color: var(--tinta); }
.papiron .gomb--vonal:hover { border-color: var(--lang-p); color: var(--lang-p); }
.gomb svg { width: 18px; height: 18px; }

/* ─── 5. MÉRETVONAL — a lap saját jegye ─────────────────────────────────── */

/* Vékony vonal, mindkét végén keresztvéggel, fölötte a mért érték.
   Görgetésre RAJZOLÓDIK (scaleX), mint egy műszaki rajzon. */
.mv { display: block; }
.mv__ertek {
  display: block; font-family: var(--kijelzo); font-weight: 900;
  line-height: 1; letter-spacing: -.03em;
  font-size: clamp(28px, 4.2vw, 52px);
  margin-bottom: 12px;
}
.mv__vonal {
  position: relative; display: block; height: 9px;
  border-left: 2px solid var(--kek); border-right: 2px solid var(--kek);
}
.mv__vonal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--kek);
  transform-origin: left center;
}
.mv__alatt {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 8px; font: 500 13px/1.3 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--halk);
}
.papiron .mv__vonal { border-color: var(--kek-p); }
.papiron .mv__vonal::before { background: var(--kek-p); }
.papiron .mv__alatt { color: var(--halk-p); }

/* ─── 6. FEJLÉC ─────────────────────────────────────────────────────────── */

.fejlec {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 14, 19, .88);
  border-bottom: 1px solid var(--vonal);
}
@supports (backdrop-filter: blur(1px)) {
  /* ⚠️ A backdrop-filter STACKING CONTEXTET hoz létre: a mobil menü ezért
     NEM lehet ennek a doboznak a gyereke — külön elemként, a fejléc UTÁN áll. */
  .fejlec { background: rgba(11, 14, 19, .74); backdrop-filter: blur(14px) saturate(1.3); }
}
.fejlec__be {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: var(--fejm);
}
.marka {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--kijelzo); font-weight: 900; font-size: 19px;
  letter-spacing: -.03em; text-decoration: none; color: var(--szoveg);
  min-height: 44px;                 /* koppintási felület */
}
.marka em { font-style: normal; color: var(--halk); }
.marka:hover em { color: var(--lang-vil); }

.menu { display: flex; align-items: center; gap: 2px; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
  font-size: 15px; font-weight: 500; text-decoration: none; color: var(--halk);
  transition: color var(--ido);
}
.menu a:hover { color: var(--szoveg); }
.menu a.aktiv { color: var(--szoveg); }
.menu a.aktiv::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 10px;
  height: 2px; background: var(--lang);
}
.menu a { position: relative; }
.menu a.menu__cta.aktiv::after { display: none; }
.menu .menu__cta {
  margin-left: 10px; padding: 0 18px; min-height: 44px;
  background: var(--lang); color: var(--tinta); font-weight: 700;
}
.menu .menu__cta:hover { background: #FF7F49; color: var(--tinta); }

.hamburger {
  display: none; width: 48px; height: 48px; align-items: center;
  justify-content: center; cursor: pointer;
  background: none; color: var(--szoveg); border: 1px solid var(--vonal-2);
  transition: border-color var(--ido), color var(--ido);
}
.hamburger:hover { border-color: var(--lang); color: var(--lang-vil); }
.hamburger svg { width: 22px; height: 22px; }

/* Mobil menü — a fejléc TESTVÉRE, nem gyereke (lásd a backdrop-filter jegyzetet). */
.mmenu {
  position: fixed; inset: var(--fejm) 0 auto 0; z-index: 99;
  background: var(--tus-2); border-bottom: 1px solid var(--vonal);
  padding: var(--t3) 0 var(--t4);
  max-height: calc(100dvh - var(--fejm)); overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--ido), transform var(--ido), visibility var(--ido);
}
body.menu-nyit .mmenu { transform: none; opacity: 1; visibility: visible; }
/* A menü alatti sötétítés. A `body::after`-en van, nem külön elemen: így a
   koppintás a `body`-ra érkezik, és a mu.js abból tudja, hogy zárni kell. */
body.menu-nyit { overflow: hidden; }
body.menu-nyit::after {
  content: ""; position: fixed; inset: 0; z-index: 98;
  background: rgba(6, 8, 12, .74);
}
.mmenu a {
  display: flex; align-items: center; min-height: 54px;
  font-family: var(--kijelzo); font-weight: 800; font-size: 21px;
  text-decoration: none; border-bottom: 1px solid var(--vonal);
}
.mmenu__gombok { display: grid; gap: 12px; margin-top: var(--t3); }
.mmenu__gombok .gomb { width: 100%; }

/* ─── 7. HERO ───────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vh, 72px) 0 var(--t6);
  border-bottom: 1px solid var(--vonal);
}
/* Rajztábla-rács. Statikus háttérkép, nulla futásidejű költséggel. */
.hero::before {
  content: "";
  /* Túlnyúlik a szakaszon, hogy az egérkövető eltolás ne mutassa meg a szélét. */
  position: absolute; inset: -60px; pointer-events: none;
  /* Csak `transform` mozog — a mu.js állítja a két változót. */
  transform: translate3d(var(--racs-x, 0px), var(--racs-y, 0px), 0);
  background-image:
    linear-gradient(to right, rgba(110,143,184,.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(110,143,184,.15) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(135% 105% at 62% 0%, #000 0%, transparent 76%);
          mask-image: radial-gradient(135% 105% at 62% 0%, #000 0%, transparent 76%);
}
.hero > * { position: relative; }

.hero__racs {
  display: grid; grid-template-columns: 1.16fr .84fr;
  grid-template-areas: "szoveg beviteli" "tenyek beviteli";
  gap: clamp(32px, 4.4vw, 60px) clamp(32px, 4.4vw, 60px); align-items: start;
}
.hero__szoveg { grid-area: szoveg; }
.terv-be      { grid-area: beviteli; }
.hero__tenyek { grid-area: tenyek; }
.hero h1 {
  /* A méret a képernyő MAGASSÁGÁHOZ is kötve: egy korábbi körben a nagy
     címsor lenyomta a gombokat a hajtás alá (mérve, 349 px-rel). */
  font-size: min(clamp(36px, 4.5vw, 66px), 10.5vh);
  margin: var(--t3) 0 0;
}
.hero h1 em { font-style: normal; color: var(--lang); }
.hero__alcim {
  max-width: 46ch; margin-top: var(--t3);
  font-size: clamp(17px, 1.4vw, 19px); color: var(--halk);
}
.hero__tenyek {
  display: grid; gap: var(--t3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.teny { border-top: 2px solid var(--vonal-2); padding-top: 14px; }
.teny b {
  display: block; font-family: var(--kijelzo); font-weight: 900;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1; letter-spacing: -.03em;
}
.teny span { display: block; margin-top: 8px; font-size: 14px; color: var(--halk); }

/* ─── 8. A TERVEZŐ ──────────────────────────────────────────────────────── */

/* A hero jobb oldalán ül a beviteli mező: ez a lap fő cselekvése. Nem dísz —
   a cég valódi eszköze, és rögtön dolgozik. */
.terv-be {
  background: var(--tus-2); border: 1px solid var(--vonal);
  padding: var(--t4);
}
.terv-be h2 {
  font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.02em;
}
.terv-be__seged { margin-top: 10px; font-size: 15px; color: var(--halk); }
.terv-be textarea {
  width: 100%; margin-top: var(--t3); padding: 14px 16px; min-height: 116px;
  background: var(--tus); border: 1px solid var(--vonal-2); color: var(--szoveg);
  font-size: 16px;             /* 16px alatt az iOS ráközelít a mezőre */
  line-height: 1.5; resize: vertical;
}
.terv-be textarea::placeholder { color: #6E7C8F; }
.terv-be textarea:focus { border-color: var(--lang); outline: none; box-shadow: 0 0 0 3px rgba(255,106,43,.22); }

.mintak { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--t3); }
.mintak__cim {
  width: 100%; font: 500 13px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--halk); margin-bottom: 2px;
}
.minta {
  min-height: 44px; padding: 0 15px; cursor: pointer;
  background: var(--tus-3); border: 1px solid var(--vonal-2);
  font-size: 14px; color: var(--szoveg);
  transition: border-color var(--ido), color var(--ido);
}
.minta:hover { border-color: var(--lang); color: var(--lang-vil); }

.terv-be__tel {
  margin-top: var(--t3); padding-top: var(--t3);
  border-top: 1px solid var(--vonal); font-size: 15px; color: var(--halk);
}
.terv-be__tel a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin-left: 6px; font-weight: 700; color: var(--lang-vil); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.terv-be__tel a:hover { border-bottom-color: var(--lang); }
.terv-be__tel svg { width: 17px; height: 17px; }

/* A tervező EREDMÉNYE — saját szakasz, papíron: ez a „terv" dokumentum. */
.terv {
  background: var(--papir); color: var(--tinta);
  padding: var(--t7) 0; border-bottom: 1px solid var(--papir-2);
}
.terv__racs {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 60px); align-items: start; margin-top: var(--t5);
}
.terv h2 { font-size: clamp(30px, 3.8vw, 52px); margin-top: var(--t2); }
.terv__egy { max-width: 54ch; margin-top: var(--t3); color: var(--halk-p); font-size: 18px; }

.terv__doboz { border: 2px solid var(--tinta); background: #FFF; }
.terv__fej {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 14px 18px; border-bottom: 2px solid var(--tinta);
  font: 500 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.terv__fej b { color: var(--lang-p); font-weight: 500; }
.terv__test { padding: var(--t3) var(--t4) var(--t4); }

/* A felismert modulok — egyesével kerülnek be. */
.talalatok { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.talalat {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center;
  gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--papir-2);
}
.talalat > span { min-width: 0; }
.talalat:last-child { border-bottom: 0; }
.talalat svg { width: 22px; height: 22px; color: var(--kek-p); }
.talalat b { font-weight: 600; font-size: 16px; display: block; }
.talalat small { display: block; color: var(--halk-p); font-size: 13px; margin-top: 2px; }
.talalat u {
  text-decoration: none; background: #FFE3D2; color: var(--lang-jel);
  padding: 2px 7px; font: 500 13px/1.6 var(--mono); white-space: nowrap;
  /* Egy hosszú felismert szó (pl. „vállalatirányítási") különben kifeszítené
     a sort — 320 px-en ez 66 px kilógást okozott. */
  max-width: 38vw; overflow: hidden; text-overflow: ellipsis;
}
.talalat--alap b { color: var(--lang-p); }
.talalat--jar u { background: var(--papir-2); color: var(--halk-p); }

.terv__ures { color: var(--halk-p); font-size: 16px; padding: 6px 0 2px; }

/* Az összeg: két méretvonal — az ár és a határidő. */
.terv__meres {
  display: grid; gap: var(--t4); margin-top: var(--t4);
  padding-top: var(--t4); border-top: 2px solid var(--tinta);
}
.terv__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--t4); }
.terv__lab { margin-top: var(--t3); font-size: 13px; color: var(--halk-p); max-width: 54ch; }

/* KÉPERNYŐTERV — a jobb hasáb. Vázlat, ami a modulokból épül össze. */
.kep {
  position: sticky; top: calc(var(--fejm) + 24px);
  background: var(--tinta); border: 2px solid var(--tinta);
}
.kep__fej {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  background: var(--tus-3); color: var(--halk);
  font: 500 13px/1 var(--mono); letter-spacing: .06em;
}
.kep__pont { width: 9px; height: 9px; border-radius: 50%; background: var(--vonal-2); flex: 0 0 auto; }
.kep__cim { margin-left: 6px; color: var(--szoveg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kep__fulek {
  display: flex; overflow-x: auto; background: var(--tus-2);
  border-bottom: 1px solid var(--vonal); scrollbar-width: thin;
}
.kep__ful {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--halk); white-space: nowrap;
}
.kep__ful[aria-selected="true"] { color: var(--szoveg); border-bottom-color: var(--lang); }
.kep__test {
  padding: 18px; background: var(--tus); min-height: 296px;
  display: grid; gap: 12px; align-content: start;
}

/* A vázlat építőkockái. Tudatosan absztraktak: ez TERV, nem kész képernyő. */
.nezet { display: grid; gap: 12px; align-content: start; }
.vk { display: grid; gap: 8px; }
.vk__doboz { background: var(--tus-3); border: 1px solid var(--vonal); }
.vk__csik { height: 9px; background: var(--vonal-2); }
.vk__csik--k { width: 55%; }
.vk__csik--kk { width: 34%; }
.vk__csik--lang { background: var(--lang); width: 42%; }
.vk--eszkoz { grid-template-columns: 1fr auto auto; gap: 8px; grid-auto-flow: column; }
.vk--eszkoz .vk__doboz { height: 36px; }
.vk--eszkoz .vk__doboz:nth-child(2) { width: 62px; }
.vk--eszkoz .vk__doboz:nth-child(3) { width: 44px; background: var(--lang); border-color: var(--lang); }
.vk--kartya { grid-template-columns: repeat(3, 1fr); }
.vk--kartya .vk__doboz { height: 80px; padding: 10px; display: grid; gap: 7px; align-content: start; }
.vk--tabla .vk__doboz { padding: 12px; display: grid; gap: 10px; }
.vk--grafikon .vk__doboz { height: 130px; display: flex; align-items: flex-end; gap: 7px; padding: 12px; }
.vk--grafikon i { flex: 1; background: var(--vonal-2); }
.vk--grafikon i:nth-child(4) { background: var(--lang); }
.vk--naptar .vk__doboz { padding: 12px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.vk--naptar u { display: block; aspect-ratio: 1; background: var(--vonal); }
.vk--naptar u.on { background: var(--lang); }
.vk--urlap .vk__doboz { padding: 12px; display: grid; gap: 11px; }
.vk--lista .vk__doboz { padding: 12px; display: grid; gap: 9px; }
.vk--adat { grid-template-columns: repeat(3, 1fr); }
.vk--adat .vk__doboz { height: 64px; padding: 10px; display: grid; gap: 7px; align-content: start; }

/* ─── 9. MUNKÁINK (bizonyíték) ──────────────────────────────────────────── */

.munkak { padding: var(--t7) 0; border-bottom: 1px solid var(--vonal); }
.munkak__fej { display: grid; gap: var(--t2); max-width: 62ch; }
.munkak h2 { font-size: clamp(30px, 3.8vw, 52px); margin-top: var(--t2); }
.munkak__egy { color: var(--halk); }
.munkak__lista { display: grid; gap: var(--t7); margin-top: var(--t6); }

.munka {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.munka--forditva .munka__kep { order: 2; }
.munka__kep { position: relative; border: 1px solid var(--vonal); background: var(--tus-2); }
.munka__kep img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  transition: transform .45s var(--gorbe), filter var(--ido);
  filter: saturate(.92) brightness(.94);
}
.munka__kep { overflow: hidden; }
.munka:hover .munka__kep img { transform: scale(1.025); filter: none; }
.munka__cimke {
  position: absolute; left: 0; top: 0; padding: 8px 14px;
  background: var(--lang); color: var(--tinta);
  font: 700 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.munka h3 { font-size: clamp(24px, 2.7vw, 36px); margin-top: 8px; }
.munka__mit { margin-top: var(--t2); color: var(--halk); }
.munka .lista { margin-top: var(--t3); }
.munka__link {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  margin-top: var(--t3); font-weight: 700; color: var(--lang-vil);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.munka__link:hover { border-bottom-color: var(--lang); }
.munka__link svg { width: 17px; height: 17px; }

/* ─── 10. AMIT MEGOLDUNK ────────────────────────────────────────────────── */

.modulok { padding: var(--t7) 0; background: var(--tus-2); border-bottom: 1px solid var(--vonal); }
.modulok h2 { font-size: clamp(30px, 3.8vw, 52px); margin-top: var(--t2); }
.modulok__egy { max-width: 58ch; margin-top: var(--t3); color: var(--halk); font-size: 18px; }
.modulok__racs {
  display: grid; gap: 1px; margin-top: var(--t5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr));
  background: var(--vonal); border: 1px solid var(--vonal);
}
.modul {
  position: relative; text-align: left; cursor: pointer;
  background: var(--tus-2); border: 0; padding: var(--t3) var(--t3) var(--t4);
  display: grid; gap: 10px; align-content: start; color: inherit;
  transition: background var(--ido);
}
.modul:hover { background: var(--tus-3); }
/* ⚠️ A jelszín akkor jelszín, ha ritka: alapállapotban a modul-ikon HŰVÖS
   KÉK, és csak a tervbe KERÜLT elem vált narancsra. Korábban mind a 16 ikon
   narancs volt, és emiatt egyik sem jelentett semmit. */
.modul svg { width: 26px; height: 26px; color: var(--kek); transition: color var(--ido); }
.modul:hover svg { color: var(--lang-vil); }
.modul b { font-size: 16px; font-weight: 600; }
.modul__ar { font: 500 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--halk); }

/* Kiválasztott állapot: narancs keret befelé + narancs ikon + pipa a sarokban. */
.modul[aria-pressed="true"] { background: var(--tus-3); box-shadow: inset 0 0 0 2px var(--lang); }
.modul[aria-pressed="true"] svg { color: var(--lang); }
.modul[aria-pressed="true"] .modul__ar { color: var(--lang-vil); }
.modul__pipa {
  position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  background: var(--lang); color: var(--tinta);
  display: none; align-items: center; justify-content: center;
}
.modul[aria-pressed="true"] .modul__pipa { display: flex; }
/* ⚠️ A `.modul[aria-pressed="true"] svg` szabály (osztály+attribútum+elem)
   ERŐSEBB, mint a `.modul__pipa svg` — nélküle a pipa narancs lenne narancs
   alapon, tehát láthatatlan. Ezért kell ide is a teljes lánc. */
.modul__pipa svg { width: 15px; height: 15px; stroke-width: 2.6; }
.modul[aria-pressed="true"] .modul__pipa svg,
.modul[aria-pressed="true"]:hover .modul__pipa svg { color: var(--tinta); }

/* Élő összegzés a rács alatt — visszajelzés anélkül, hogy elrángatnánk
   a látogatót a tervhez. */
.modulok__osszeg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin-top: var(--t4); padding: var(--t3);
  background: var(--tus-3); border-left: 4px solid var(--lang);
}
.modulok__osszeg b { font-family: var(--kijelzo); font-weight: 900; font-size: 19px; letter-spacing: -.02em; }
.modulok__osszeg span { color: var(--halk); font-size: 15px; }
.modulok__osszeg a {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-weight: 700; color: var(--lang-vil); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.modulok__osszeg a:hover { border-bottom-color: var(--lang); }
.modulok__osszeg a svg { width: 16px; height: 16px; }

/* ─── 11. HOGYAN ZAJLIK ─────────────────────────────────────────────────── */

.folyamat { padding: var(--t7) 0; border-bottom: 1px solid var(--vonal); }
.folyamat h2 { font-size: clamp(30px, 3.8vw, 52px); margin-top: var(--t2); }
.lepesek {
  display: grid; gap: var(--t4); margin-top: var(--t6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lepes { position: relative; padding-top: var(--t4); border-top: 2px solid var(--vonal-2); }
/* A sorszám a vonalon ül — mint egy méretpont a rajzon. */
.lepes::before {
  content: ""; position: absolute; left: 0; top: -6px;
  width: 10px; height: 10px; background: var(--lang);
}
.lepes__sz { font: 500 13px/1 var(--mono); letter-spacing: .16em; color: var(--lang-vil); }
.lepes h3 { font-size: clamp(19px, 1.8vw, 23px); margin-top: 12px; }
.lepes p { margin-top: 10px; color: var(--halk); font-size: 15px; }
.lepes__ido {
  display: inline-block; margin-top: var(--t2);
  font: 500 13px/1 var(--mono); letter-spacing: .06em; color: var(--halk);
  border: 1px solid var(--vonal-2); padding: 8px 10px;
}

/* ─── 12. ÁRAK ──────────────────────────────────────────────────────────── */

.arak { padding: var(--t7) 0; background: var(--papir); color: var(--tinta); }
.arak h2 { font-size: clamp(30px, 3.8vw, 52px); margin-top: var(--t2); }
.arak__egy { max-width: 58ch; margin-top: var(--t3); color: var(--halk-p); font-size: 18px; }
.arak__racs {
  display: grid; gap: var(--t3); margin-top: var(--t6);
  grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
}
.ar {
  position: relative;
  background: #FFF; border: 2px solid var(--tinta);
  padding: var(--t4) var(--t3) var(--t3);
  display: grid; gap: var(--t3); align-content: start;
}
.ar--kiemelt { background: var(--tinta); color: var(--papir); }
.ar--kiemelt .mv__vonal { border-color: var(--kek); }
.ar--kiemelt .mv__vonal::before { background: var(--kek); }
.ar--kiemelt .mv__alatt, .ar--kiemelt .ar__sub { color: var(--halk); }
.ar--kiemelt .lista li::before { background: var(--lang); }
.ar__fej { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ar h3 { font-size: clamp(21px, 2vw, 26px); }
/* A kártyában keskenyebb a hasáb, mint a tervezőben: kisebb betű kell,
   különben a „550 e – 2,2 M Ft" két sorra törik. */
.ar .mv__ertek { font-size: clamp(26px, 2.7vw, 40px); }
/* A jobb oldali címke („Első használható változat: 2–3 hét") keskeny
   kártyában félbetört a bal oldali alatt. Külön sorba engedjük. */
.ar .mv__alatt { flex-wrap: wrap; }
.ar .mv__alatt span:first-child { flex: 0 0 auto; }
.ar .mv__alatt span:last-child { flex: 1 1 auto; text-align: right; min-width: 12ch; }
.ar__sub { margin-top: 8px; color: var(--halk-p); font-size: 15px; }
.ar__jeloles {
  position: absolute; top: 0; right: var(--t3); transform: translateY(-50%);
  font: 700 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: var(--lang); color: var(--tinta); padding: 8px 11px; white-space: nowrap;
}
.arak__lab { margin-top: var(--t5); color: var(--halk-p); font-size: 15px; max-width: 66ch; }
.arak__lab a { color: var(--lang-p); }

/* ─── 13. KÉRDÉSEK ──────────────────────────────────────────────────────── */

.kerdesek { padding: var(--t7) 0; border-bottom: 1px solid var(--vonal); }
.kerdesek h2 { font-size: clamp(30px, 3.8vw, 52px); margin-top: var(--t2); }
.kerdesek__racs { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.kerdesek__egy { margin-top: var(--t3); color: var(--halk); }
.kerdesek__tobb { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: var(--t3); color: var(--lang-vil); font-weight: 700; text-decoration: none; }
.kerdesek__tobb svg { width: 17px; height: 17px; }
.gyik { border-top: 1px solid var(--vonal); }
.gyik details { border-bottom: 1px solid var(--vonal); }
.gyik summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
  font-family: var(--kijelzo); font-weight: 800; font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: -.015em;
}
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  border-right: 2px solid var(--lang); border-bottom: 2px solid var(--lang);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--ido);
}
.gyik details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.gyik p { padding-bottom: var(--t3); color: var(--halk); max-width: 68ch; }

/* ─── 14. KAPCSOLAT ─────────────────────────────────────────────────────── */

.zaras { padding: var(--t7) 0; background: var(--tus-2); }
.zaras__racs { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.zaras h2 { font-size: clamp(30px, 3.8vw, 52px); margin-top: var(--t2); }
.zaras__egy { margin-top: var(--t3); color: var(--halk); font-size: 18px; max-width: 44ch; }

.nagytel {
  /* Az ikon a SZÁMHOZ igazodjon, ne a szám+alcím blokk közepéhez: középre
     állítva félig a két sor közé csúszott. */
  display: inline-flex; align-items: flex-start; gap: 16px; margin-top: var(--t5);
  text-decoration: none; min-height: 56px;
}
.nagytel svg { width: 26px; height: 26px; color: var(--lang); flex: 0 0 auto; margin-top: .18em; }
.nagytel b { display: block; font-family: var(--kijelzo); font-weight: 900; font-size: clamp(23px, 2.4vw, 32px); letter-spacing: -.03em; }
.nagytel small { display: block; color: var(--halk); font-size: 14px; margin-top: 3px; }
.nagytel:hover b { color: var(--lang-vil); }

.zaras__lista { display: grid; gap: 10px; margin-top: var(--t4); color: var(--halk); font-size: 15px; }
.zaras__lista a { color: var(--lang-vil); }

.urlap { background: var(--tus); border: 1px solid var(--vonal); padding: var(--t4); }
.mezo { display: block; margin-bottom: var(--t3); }
.mezo > span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--halk); }
.mezo input, .mezo textarea {
  width: 100%; padding: 13px 15px; background: var(--tus-2);
  border: 1px solid var(--vonal-2); color: var(--szoveg); font-size: 16px;
  transition: border-color var(--ido), box-shadow var(--ido);
}
.mezo textarea { resize: vertical; line-height: 1.55; }
.mezo input:focus, .mezo textarea:focus { border-color: var(--lang); outline: none; box-shadow: 0 0 0 3px rgba(255,106,43,.22); }
.mezo input.rossz, .mezo textarea.rossz { border-color: #FF6B6B; }
.parban { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--t3); }

/* A hibaüzenet a MEZŐ MELLETT marad — a skill űrlap-szabálya: az összesítő
   nem helyettesíti, kiegészíti. */
.hiba { display: block; margin-top: 7px; font-size: 14px; color: #FF8B8B; }

/* A jelölőnégyzet koppintási felülete maga a CÍMKE (≥44px). */
.egyetert { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 15px; color: var(--halk); }
.egyetert input {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; cursor: pointer;
  background: var(--tus-2); border: 2px solid var(--vonal-2);
  transition: background var(--ido), border-color var(--ido);
}
.egyetert:hover input { border-color: var(--lang); }
.egyetert input:checked {
  border-color: var(--lang);
  background: var(--lang) center / 13px 13px no-repeat
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%2310141A'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%208.4%203.3%203.3L13%205'/%3E%3C/svg%3E");
}
.egyetert a { color: var(--lang-vil); }

.jelzes { padding: 14px 16px; margin-bottom: var(--t3); font-size: 15px; border-left: 4px solid; }
.jelzes--ok { background: rgba(77,200,150,.12); border-color: #4DC896; color: #A8E8CC; }
.jelzes--baj { background: rgba(255,107,107,.1); border-color: #FF6B6B; color: #FFB8B8; }
.jelzes h2 { font-family: var(--betu); font-size: 15px; font-weight: 700; letter-spacing: 0; margin-bottom: 6px; }
.jelzes ul { margin: 0; padding-left: 18px; }
.jelzes a { color: inherit; }

/* ─── 15. LÁBLÉC ────────────────────────────────────────────────────────── */

.lablec { padding: var(--t5) 0; border-top: 1px solid var(--vonal); background: var(--tus); }
.lablec__sor { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.lablec__sor a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--halk); text-decoration: none; }
.lablec__sor a:hover { color: var(--szoveg); }
.lablec__jog { margin-top: var(--t3); font-size: 13px; line-height: 1.7; color: #7B899C; }

/* ─── 16. ALOLDALAK ─────────────────────────────────────────────────────── */

.oldalfej { padding: var(--t6) 0 var(--t5); border-bottom: 1px solid var(--vonal); }
.morzsa { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--halk); margin-bottom: var(--t3); flex-wrap: wrap; }
.morzsa a { display: inline-flex; align-items: center; min-height: 44px; color: var(--halk); text-decoration: none; }
.morzsa a:hover { color: var(--lang-vil); }
.morzsa svg { width: 15px; height: 15px; }
.oldalfej h1 { font-size: clamp(34px, 5.2vw, 66px); }
.oldalfej p { margin-top: var(--t3); color: var(--halk); font-size: 18px; max-width: 62ch; }

.szoveg { padding: var(--t6) 0 var(--t7); max-width: 74ch; }
.szoveg h2 { font-size: clamp(24px, 2.5vw, 31px); margin-top: var(--t6); }
.szoveg h2:first-child { margin-top: 0; }
.szoveg h3 { font-size: 20px; margin-top: var(--t4); }
.szoveg p, .szoveg ul { margin-top: var(--t2); color: var(--halk); }
.szoveg ul { padding-left: 20px; display: grid; gap: 8px; }
.szoveg a { color: var(--lang-vil); }
.szoveg table { width: 100%; border-collapse: collapse; margin-top: var(--t3); font-size: 15px; }
.szoveg th, .szoveg td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--vonal); vertical-align: top; }
.szoveg th { width: 34%; color: var(--halk); font-weight: 600; }
/* Az adatlap-cellában álló CSUPASZ link (e-mail, telefon) önálló koppintási
   cél — a mondatba ágyazottal ellentétben. 19 px volt, a minimum 44. */
.szoveg td > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* „Röviden" párok a /gyik tetején — a kereső és az AI-válasz ezt idézi. */
.parok {
  display: grid; gap: var(--t4); margin-top: var(--t6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.par { border-top: 2px solid var(--vonal-2); padding-top: var(--t2); }
.par h3 { font-size: 19px; }
.par p { margin-top: 10px; color: var(--halk); font-size: 15px; }

.gyik-oldal { padding: var(--t6) 0 var(--t7); }
.gyik-csoport { margin-bottom: var(--t6); }
.gyik-csoport > h2 { font-size: clamp(22px, 2.3vw, 29px); margin-bottom: var(--t3); }

/* 404 */
.hiba-oldal { padding: clamp(64px, 13vh, 150px) 0; text-align: center; }
.hiba-oldal .kod { font-family: var(--kijelzo); font-weight: 900; font-size: clamp(80px, 18vw, 190px); line-height: .84; letter-spacing: -.05em; color: var(--lang); }
.hiba-oldal h1 { font-size: clamp(28px, 4vw, 46px); margin-top: var(--t3); }
.hiba-oldal p { margin: var(--t3) auto 0; color: var(--halk); max-width: 46ch; }
.hiba-oldal .gombok { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--t5); }

/* ─── 17. SÜTI-SÁV ──────────────────────────────────────────────────────── */

.suti {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 150;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  background: var(--tus-3); border: 1px solid var(--vonal-2);
  padding: 14px 16px;
}
.suti p { flex: 1 1 260px; font-size: 14px; color: var(--halk); }
.suti a { color: var(--lang-vil); }
.suti button { min-height: 44px; padding: 0 22px; background: var(--lang); color: var(--tinta); border: 0; font-weight: 700; cursor: pointer; }

/* ─── 18. MOZGÁS ────────────────────────────────────────────────────────── */

/* ⚠️ A rejtett kiinduló állapot KIZÁRÓLAG `html.js` alatt él. JS nélkül a lap
   teljes tartalommal jelenik meg, mozgás nélkül. */
.js [data-fel] { opacity: 0; transform: translateY(14px); }
.js [data-fel].latszik {
  opacity: 1; transform: none;
  transition: opacity var(--ido2) var(--gorbe), transform var(--ido2) var(--gorbe);
  transition-delay: calc(var(--kesl, 0) * 55ms);
}

/* A méretvonal rajzolódása. Alapból kihúzva; a `.js` alatt indul nulláról. */
.js .mv .mv__vonal::before { transform: scaleX(0); }
.js .mv.latszik .mv__vonal::before,
.js .latszik .mv .mv__vonal::before {
  transform: scaleX(1);
  transition: transform .85s var(--gorbe) .1s;
}

/* A tervezőbe egyesével beúszó találatok. */
.talalat.uj { animation: beall .34s var(--gorbe) both; }
.vk.uj { animation: beall .3s var(--gorbe) both; }
@keyframes beall { from { opacity: 0; transform: translateY(-8px); } }

/* ─── 18b. A KIFESZÜLÉS ELLEN ───────────────────────────────────────────── */

/* ⚠️ A rács- és flexelem alapból `min-width: auto`, tehát NEM zsugorodik a
   tartalma alá: egy hosszú szó, egy táblázat vagy egy vízszintesen görgethető
   fülsor kifeszíti a sávot. A `body { overflow-x: hidden }` ezt csak ELREJTI,
   nem javítja — a mátrixos audit 320 px-en 66 px kilógást mért.
   Lásd: feedback-mobil-minwidth-overflow. */
.hero__racs > *, .terv__racs > *, .kerdesek__racs > *, .zaras__racs > *,
.munka > *, .arak__racs > *, .lepesek > *, .modulok__racs > * { min-width: 0; }

/* A képernyővázlat fülsora szándékosan görgethető — de a görgetés BENNE
   maradjon, ne feszítse ki a lapot. */
.kep, .kep__fulek, .kep__test { min-width: 0; max-width: 100%; }

/* ─── 19. RESZPONZÍV ────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .hero__racs, .terv__racs, .kerdesek__racs, .zaras__racs { grid-template-columns: 1fr; }
  .hero__racs { grid-template-areas: "szoveg" "beviteli" "tenyek"; }
  .kep { position: static; }
  .lepesek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arak__racs { grid-template-columns: 1fr; }
  .munka { grid-template-columns: 1fr; }
  .munka--forditva .munka__kep { order: 0; }
}

@media (max-width: 880px) {
  .menu { display: none; }
  .hamburger { display: inline-flex; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --fejm: 60px; }
  .hero__tenyek { grid-template-columns: 1fr; gap: var(--t2); }
  .lepesek { grid-template-columns: 1fr; }
  .parban { grid-template-columns: 1fr; }
  .terv-be, .urlap { padding: var(--t3); }
  .terv__test { padding: var(--t3); }
  .suti { flex-direction: column; align-items: stretch; }
  .suti button { width: 100%; }
  /* ⚠️ 390 px-en az adatlap-táblázat kilógott — címkés kártyákra bomlik. */
  .szoveg table, .szoveg tbody, .szoveg tr, .szoveg th, .szoveg td { display: block; width: 100%; }
  .szoveg tr { border-bottom: 1px solid var(--vonal); padding: 12px 0; }
  .szoveg th, .szoveg td { border: 0; padding: 2px 0; }
  .szoveg th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
}

@media (max-width: 380px) { :root { --gut: 16px; } }

/* ─── 20. CSÖKKENTETT MOZGÁS ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js [data-fel] { opacity: 1; transform: none; }
  .js .mv .mv__vonal::before { transform: scaleX(1); }
  /* A rajztábla-rács sem követi az egeret. */
  .hero::before { transform: none !important; }
}

/* ─── 21. MAGAS KONTRASZT ───────────────────────────────────────────────── */

/* Aki kifejezetten erős kontrasztot kér, ne a hangulatot kapja: a halvány
   szövegek és a szegélyek felerősödnek. */
@media (prefers-contrast: more) {
  :root {
    --halk:    #C3CDD9;
    --halk-p:  #3D4553;
    --vonal:   #3B4757;
    --vonal-2: #55637A;
    --kek:     #9BB6D6;
  }
  .hero::before { opacity: .5; }
}

/* ─── 22. NYOMTATÁS ─────────────────────────────────────────────────────── */

/* A lap „dokumentum" felületei tényleg dokumentumként viselkedjenek: a
   tervezőből kijövő terv és az árlap kinyomtatható. A képernyő-díszlet
   (fejléc, sütisáv, képernyővázlat, gombok) lekerül. */
@media print {
  .fejlec, .mmenu, .suti, .ugras, .kep, .terv-be, .mintak,
  .terv__cta, .munka__link, .kerdesek__tobb, .lablec__sor,
  .modulok__osszeg, .urlap, .nagytel, .hero::before { display: none !important; }

  :root { --tus: #fff; --tus-2: #fff; --tus-3: #fff; --papir: #fff;
          --szoveg: #000; --tinta: #000; --halk: #333; --halk-p: #333;
          --vonal: #bbb; --vonal-2: #888; --kek: #555; --kek-p: #555;
          --lang: #000; --lang-vil: #000; --lang-p: #000; --lang-jel: #000; }

  body { background: #fff; color: #000; font-size: 11pt; }
  section { padding: 12pt 0 !important; border: 0 !important; break-inside: avoid; }
  .hero { min-height: 0; }
  h1 { font-size: 24pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 12pt; }
  .terv__doboz, .ar { border: 1pt solid #000; }
  .modul { box-shadow: none !important; border: 1pt solid #ccc; }
  .talalat u { background: none; border: 1pt solid #999; }
  /* A gyakori kérdések nyomtatásban legyenek nyitva. */
  .gyik details > p { display: block !important; }
  /* A hivatkozás célja legyen olvasható papíron is. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}