/* whole site dark (Béci, 2026-10-05 18.52): the opening band's palette is the base, emerald (18.55) the one accent */
  :root {
    color-scheme: dark;
    --bg: #0b0b0c;
    --bg-2: #1a1a1b;
    --card: #141415;
    --ink: #f5f5f3;
    --tinta: #0b0b0c;      /* dark text on the white buttons and on the accent */
    --grafit: #141415;
    --body: #cfcfcb;       /* 12.9:1 on --bg, 11.9:1 on --card */
    --mute: #a3a39f;       /* 7.9:1 on --bg, 7.3:1 on --card */
    --halvany: #777773;    /* large display text only: 4.2:1 on --bg, and still 3:1 over the brightest background-video frame */
    --line: #29292b;
    /* the one accent (Béci, 2026-10-05 18.55): emerald. Dots, marks, hover, focus, the gate's energy; never body text.
       On --bg: #10b981 is 8.4:1, #34d399 10.6:1; dark text --tinta on #10b981 is 8.4:1 */
    --smaragd: #10b981;
    --smaragd-vilagos: #6ee7b7;
    --smaragd-mely: #065f46;
    --shadow: 0 0 0 1px #232326;
    --r-pill: 9999px;
    --r-card: 24px;
    --fejlec-mag: 88px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--fejlec-mag) + 8px); }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  svg { display: block; }
  :focus-visible { outline: 2px solid var(--smaragd); outline-offset: 3px; border-radius: 6px; }
  .atugro { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--tinta); padding: 8px 14px; border-radius: var(--r-pill); z-index: 30; }
  .atugro:focus { left: 16px; }
  .keret { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
  .helyorzo { color: var(--mute); background: var(--bg-2); border: 1px dashed #3a3a3e; border-radius: 6px; padding: 0 6px; font-size: .92em; white-space: nowrap; }

  /* ---------- sticky top bar ---------- */
  .fejlec-sav { position: sticky; top: 0; z-index: 20; background: rgba(11, 11, 12, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .fejlec { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--fejlec-mag); }
  .nevjegy { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 800; font-size: 24px; letter-spacing: -.03em; text-decoration: none; color: var(--ink); }
  .nevjegy i { width: 8px; height: 8px; border-radius: 50%; background: var(--smaragd); display: inline-block; margin-left: 3px; transform: translateY(-1px); }
  .menu { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
  .menu a { text-decoration: none; color: var(--body); position: relative; padding: 6px 0; }
  .menu a:hover { color: var(--ink); }
  .menu a:hover::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--smaragd); }
  .fejlec-jobb { display: flex; align-items: center; gap: 10px; }
  .mobil-menu { display: none; position: relative; }
  .mobil-menu summary { list-style: none; width: 44px; height: 44px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
  .mobil-menu summary::-webkit-details-marker { display: none; }
  .mobil-menu ul { position: absolute; right: 0; top: 54px; list-style: none; margin: 0; padding: 8px; min-width: 220px; background: var(--card); border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.12); }
  .mobil-menu li a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; text-decoration: none; font-weight: 600; }
  .mobil-menu li a:hover { background: var(--bg); }

  .gomb {
    display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 600; font-size: 15px;
    background: #fff; color: var(--tinta); border-radius: var(--r-pill); padding: 8px 8px 8px 24px; min-height: 48px; white-space: nowrap;
    transition: background .2s;
  }
  .gomb .nyil { width: 32px; height: 32px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; transition: background .2s; }
  .gomb:hover { background: #ececea; }
  .gomb:hover .nyil { background: var(--smaragd); color: var(--tinta); }
  .szoveg-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); min-height: 48px; }
  .szoveg-link .kor { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: border-color .2s; }
  .szoveg-link:hover .kor { border-color: var(--smaragd); }

  /* ---------- hero: title left, "Miben segítünk" card right ---------- */
  .hero { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); align-items: center; gap: 48px; padding: 28px 0 64px; }
  .cimke {
    display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.5); border-radius: var(--r-pill);
    padding: 6px 16px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--body); font-weight: 600; margin: 0;
  }
  .cimke i { width: 6px; height: 6px; border-radius: 50%; background: var(--smaragd); }
  /* line-height stays above 1: Hungarian accents (Á, É) need the room between lines */
  .fo-cim { font-size: clamp(46px, 6.4vw, 92px); line-height: 1.04; font-weight: 800; letter-spacing: -.045em; text-transform: uppercase; margin: 24px 0 0; }
  .fo-cim span { display: block; white-space: nowrap; }
  .fo-cim .halvany { color: var(--halvany); }
  .bevezeto { color: var(--mute); font-size: 19px; line-height: 1.55; margin: 24px 0 32px; }
  .gombsor { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

  .segitunk-felirat { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin: 0 0 12px 4px; }
  .segitunk { list-style: none; margin: 0; padding: 8px 0; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); }
  .segitunk li + li { border-top: 1px solid var(--line); margin: 0 24px; }
  .segitunk li + li a { padding-left: 0; padding-right: 0; }
  .segitunk a { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 14px 24px; text-decoration: none; }
  .segitunk li:first-child a { padding-top: 16px; }
  .segitunk b { display: block; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
  .segitunk span.sor { display: block; font-size: 14px; line-height: 1.45; color: var(--mute); margin-top: 2px; }
  .kis-nyil { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: background .2s, border-color .2s; }
  .segitunk a:hover .kis-nyil, .kartya-link:hover .kis-nyil { background: var(--smaragd); border-color: var(--smaragd); color: var(--tinta); }

  /* ---------- sections ---------- */
  .szakasz { padding: 120px 0 0; }
  .szakasz-fej { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30em); gap: 20px 48px; align-items: end; margin-bottom: 48px; }
  .szakasz-cim { font-size: clamp(36px, 5vw, 64px); line-height: 1.06; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; margin: 0; }
  .szakasz-cim span { display: block; }
  .szakasz-cim .halvany { color: var(--halvany); }
  .szakasz-fej p { margin: 0; color: var(--mute); font-size: 17px; }

  /* 2. one line, four nodes, thin connector, accent dots; no boxes, no numbers */
  .ut-vege { margin-top: 48px; }

  /* 3. five areas: two columns, the fifth wide */
  .teruletek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .terulet { background: var(--card); border-radius: var(--r-card); padding: 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .terulet:last-child { grid-column: 1 / -1; }
  .terulet h3 { margin: 0; font-size: 24px; letter-spacing: -.02em; line-height: 1.25; }
  .terulet > p { margin: 0; color: var(--body); font-size: 16px; max-width: 40em; }
  .terulet ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--body); }
  .terulet li { display: flex; gap: 12px; }
  .terulet li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); margin-top: .7em; }
  .kartya-link { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; text-decoration: none; align-self: flex-start; min-height: 44px; }
  .kartya-link .kis-nyil { width: 28px; height: 28px; }

  /* 4. trust: three short points */
  .pontok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .pont { border-top: 1.5px solid var(--ink); padding-top: 24px; position: relative; }
  .pont::before { content: ''; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--smaragd); }
  .pont h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.02em; }
  .pont p { margin: 0; color: var(--mute); font-size: 16px; }

  /* 5. where it works today: two light panels */
  .panelek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .panel { background: var(--card); border-radius: var(--r-card); padding: 36px; box-shadow: var(--shadow); }
  .panel h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.02em; }
  .panel p { margin: 0; color: var(--body); font-size: 16px; }

  /* 6. contact */
  .kapcsolat { margin-top: 120px; background: var(--grafit); border: 1px solid var(--line); color: #fff; border-radius: 32px; padding: 72px 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: end; position: relative; overflow: hidden; }
  .kapcsolat .szakasz-cim .halvany { color: #8a8a8a; }
  .kapcsolat p { color: #cfcfcf; margin: 20px 0 0; font-size: 17px; max-width: 34em; }
  .kapcsolat a.level { color: #fff; text-underline-offset: 4px; text-decoration-color: var(--smaragd); font-weight: 600; }
  .kapcsolat .gomb { background: #fff; color: var(--tinta); }
  .kapcsolat .gomb .nyil { background: var(--tinta); color: #fff; }
  .kapcsolat .gomb:hover .nyil { background: var(--smaragd); color: var(--tinta); }
  .kapcsolat .gyuru { position: absolute; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.08); pointer-events: none; }

  .lablec { display: grid; gap: 14px; padding: 40px 0 48px; font-size: 14px; color: var(--mute); }
  .lablec-sor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
  .lablec nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .lablec a { text-decoration: none; }
  .lablec a:hover { color: var(--ink); }


  /* ================= dark opening band (design direction 2026-10-04) ================= */
  .sotet {
    --s-bg: #0b0b0c; --s-panel: #141415; --s-panel-2: #1a1a1b; --s-line: #29292b;
    --s-ink: #f5f5f3; --s-mute: #a3a39f;   /* 7.9:1 on --s-bg */
    --s-halvany: #777773;                  /* large display text only (see --halvany) */
    background: radial-gradient(1200px 520px at 72% 18%, rgba(255,255,255,.055), transparent 70%);   /* see-through: the page background video shows */
    color: var(--s-ink); margin-top: calc(-1 * var(--fejlec-mag)); padding: calc(var(--fejlec-mag) + 36px) 0 56px;
  }
  .nyito-racs { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); grid-template-areas: "szoveg kapu"; gap: 36px 56px; align-items: center; }
  .hero-szoveg { grid-area: szoveg; }
  .nyito-kapu { grid-area: kapu; }
  .segitunk-sav { grid-area: segit; }
  .sotet .cimke { border-color: var(--s-line); background: rgba(255,255,255,.03); color: #cfcfcb; }
  .sotet .fo-cim { font-size: clamp(44px, 5.4vw, 78px); color: var(--s-ink); margin-top: 22px; }
  .sotet .fo-cim .halvany { color: var(--s-halvany); }
  .sotet .bevezeto { color: var(--s-mute); font-size: 18px; margin: 22px 0 30px; }
  .gomb-vilagos { background: #fff; color: var(--tinta); }
  .gomb-vilagos .nyil { background: var(--tinta); color: #fff; }
  .gomb-vilagos:hover { background: #ececea; }
  .gomb-vilagos:hover .nyil { background: var(--smaragd); color: var(--tinta); }
  .sotet .szoveg-link { color: var(--s-ink); }
  .sotet .szoveg-link .kor { border-color: #3a3a3c; }

  /* the five areas as a dark row under the band */
  .sotet .segitunk-felirat { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--s-mute); font-weight: 600; margin: 0 0 12px 2px; }
  .sotet .segitunk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; background: none; box-shadow: none; border-radius: 0; }
  .sotet .segitunk li + li { border-top: 0; margin: 0; }
  .sotet .segitunk a, .sotet .segitunk li:first-child a, .sotet .segitunk li + li a { height: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--s-line); border-radius: 16px; transition: border-color .2s, background .2s; }
  .sotet .segitunk a:hover { border-color: #4a4a4c; background: rgba(255,255,255,.06); }
  .sotet .segitunk b { font-size: 15px; color: var(--s-ink); }
  .sotet .segitunk span.sor { font-size: 13px; color: var(--s-mute); margin-top: 4px; }
  .sotet .kis-nyil { width: 26px; height: 26px; border-color: #3a3a3c; color: var(--s-ink); }
  .sotet .segitunk a:hover .kis-nyil { background: var(--smaragd); border-color: var(--smaragd); color: var(--tinta); }

  /* header over the dark band; the script switches it back to light below the band */
  .fejlec-sav { transition: background .25s; }
  /* the dark header is opaque: it is a stacking context (sticky + z-index), so the button frame's screen blend only sees
     the header itself; any see-through header let the background video show everywhere except round the button */
  .fejlec-sav.sotet-mod { background: #0b0b0c; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fejlec-sav.sotet-mod .nevjegy { color: #fff; }
  /* wordmark glow like the share image (Béci 2026-10-06): off-white letters lit by an emerald halo, the dot glows */
  .fejlec-sav.sotet-mod .nevjegy { color: #f5f5f3;
    text-shadow: 0 0 2px color-mix(in srgb, var(--smaragd) 70%, transparent), 0 0 10px color-mix(in srgb, var(--smaragd) 60%, transparent), 0 0 26px color-mix(in srgb, var(--smaragd) 40%, transparent); }
  .fejlec-sav.sotet-mod .nevjegy i { background: #34d399; box-shadow: 0 0 6px 2px var(--smaragd), 0 0 18px 6px color-mix(in srgb, var(--smaragd) 60%, transparent); }
  .fejlec-sav.sotet-mod .menu a { color: #bdbdb9; }
  .fejlec-sav.sotet-mod .menu a:hover { color: #fff; }
  .fejlec-sav.sotet-mod .gomb { background: #fff; color: var(--tinta); }
  .fejlec-sav.sotet-mod .gomb .nyil { background: var(--tinta); color: #fff; }
  .fejlec-sav.sotet-mod .mobil-menu summary { background: #1c1c1d; color: #fff; box-shadow: none; border: 1px solid var(--s-line, #29292b); }
  .sotet :focus-visible, .fejlec-sav.sotet-mod :focus-visible { outline-color: var(--smaragd); }


  /* ================= 2. document example, round 2: the ring gate (16 s cycle, driven by the script below) ================= */
  .szakasz-fej.egy-oszlop { grid-template-columns: minmax(0, 1fr); }
  .dok-cim { font-size: clamp(26px, 8vw, 64px); }      /* "A DOKUMENTUMAIVAL" must fit one line even at 360 px */
  .dok-cim > span { text-wrap: balance; }
  .dok-cim .halvany { white-space: nowrap; }
  .dok-cim .egyben { display: inline; white-space: nowrap; }   /* never break at the hyphen of AI-csapat */
  .dok-zaro { margin: 32px 0 0; font-size: 19px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; color: var(--ink); max-width: 44em; }
  .dok-pelda { margin: 8px 0 0; font-size: 13px; color: var(--mute); }

  /* stage: the gate in the middle, the four agents in the corners (free space outside the ring) */
  /* overflow clip: the turning, swelling ring image must never widen the page (no horizontal scroll) */
  .kapu-szinpad { position: relative; width: min(100%, 760px); aspect-ratio: 760 / 600; margin: 0 auto 8px; overflow: clip; overflow-clip-margin: 24px; }
  /* no transform here: a transform would isolate the box, and the image's screen blend could not reach the page */
  .kapu-doboz { position: absolute; top: 13%; height: 74%; aspect-ratio: 1; left: 20.79%; }   /* 74% of 600 = 444 of 760 wide, centred; the room around it is for the seven names */
  /* the generated ring, fitted so its measured ring (centre 511.1/511.4, radius 349.7 of 1024 px) lands on the
     SVG's ring (centre 200/200, radius 150 of 400): crystals, burst and wordmark line up with it */
  .kapu-kep { position: absolute; left: -4.808%; top: -4.840%; width: 109.808%; aspect-ratio: 1; display: block; pointer-events: none;
    --kapu-feny: 1;
    /* the image's green is more neon than the brand: hue 121deg -> 159deg (emerald #10b981 is 160deg), a touch less saturated */
    filter: hue-rotate(40deg) saturate(.92) brightness(calc(1.06 * var(--kapu-feny)));
    /* the image's black background must not show as a square on the page's #0b0b0c: screen drops black,
       and the edges fade out in case the generated fog reaches them */
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
  /* the ring video sits in a square wrapper (.kapu-kep): the wrapper carries the fit (left/top/width), the turn, the
     burst scale, the colour filter and the blend; the video only fills it. Before, a 'video.kapu-kep { width: 100% }'
     rule overrode the 109.8 % fit, so the ring sat 4.8 % up and left of the crystals (seen on Béci's iPhone, and
     measured the same in Chromium). The ::before keeps the wrapper square where aspect-ratio is not supported. */
  .kapu-kep::before { content: ''; display: block; padding-top: 100%; }
  .kapu-kep-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
  .kapu-kep { transform-origin: 50% 50%; }          /* the script turns it while dialling and swells it on the burst */
  /* crystal image slots: two stacked images, the glowing one fades in when the agent locks */
  /* the slot blends (screen) as a whole: its transform isolates its children, so the blend must sit on the slot */
  .kristaly-hely { position: absolute; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--forgas)); pointer-events: none; mix-blend-mode: screen;
    filter: hue-rotate(40deg) saturate(.92); }   /* the same shift as the ring: image green -> emerald */
  .kristaly-hely picture, .kristaly-hely img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
  .kristaly-hely picture { transition: opacity .45s ease; }
  .kristaly-hely .k-izzo { opacity: 0; }
  .kristaly-hely.zarva .k-izzo { opacity: 1; }
  .kristaly-hely.zarva .k-halvany { opacity: 0; }
  /* energy ring (Béci, 2026-10-05 18.45): one neon ring, glints running round, haze and sparks on a canvas (emerald, Béci 18.55),
     floating crystal shards; the seven agent crystals light up when they lock in */
  /* the canvas reaches above and below the stage, so the haze and the burst fade out instead of hitting a hard edge */
  /* THE gate colour: change --kapu-szin here (one place); every other gate shade, the SVG gradients and the canvas
     haze and sparks are derived from it */
  .kapu-szinpad {
    --kapu-szin: var(--smaragd);
    --kapu-mag: color-mix(in srgb, #fff 82%, var(--kapu-szin));
    --kapu-vilagos: color-mix(in srgb, #fff 30%, var(--kapu-szin));
    --kapu-mely: color-mix(in srgb, #000 25%, var(--kapu-szin));
  }
  .g-mag { stop-color: var(--kapu-mag); } .g-szin { stop-color: var(--kapu-szin); } .g-mely { stop-color: var(--kapu-mely); }
  .dok-sotet .szakasz-fej, .dok-sotet .kapu-lepesek, .dok-sotet .dok-zaro, .dok-sotet .dok-pelda, .dok-sotet .ut-vege { position: relative; z-index: 1; }
  /* wordmark in the middle of the ring: an HTML box centred on the ring's centre (the box's centre is the ring's centre),
     sized to the box (container units), so it scales with the gate; same look as the header .nevjegy */
  .kapu-doboz { container-type: size; }
  /* The word "QapYo" is centred on the ring; the dot hangs after it (absolute), so it does not pull the word left.
     Position: the centre of .kapu-doboz, which is also the ring video's centre (the video wrapper is fitted to it).
     Size: px fallback first, then container units where supported. */
  .kozep-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0;
    display: block; white-space: nowrap; pointer-events: none; line-height: 1;
    font-family: var(--font); font-weight: 800; font-size: 34px; font-size: clamp(22px, 11.5cqw, 52px); letter-spacing: -.03em; color: #fff;
    color: #f5f5f3; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--kapu-szin) 75%, transparent));
    text-shadow: 0 0 .05em color-mix(in srgb, var(--smaragd) 70%, transparent), 0 0 .25em color-mix(in srgb, var(--smaragd) 55%, transparent), 0 0 .6em color-mix(in srgb, var(--smaragd) 35%, transparent); }
  .kozep-logo i { position: absolute; left: 100%; bottom: .08em; margin-left: .05em; width: .17em; height: .17em; border-radius: 50%; background: var(--smaragd);
    background: #34d399; box-shadow: 0 0 .15em .05em var(--smaragd), 0 0 .45em .15em color-mix(in srgb, var(--smaragd) 60%, transparent); }

  /* section 2 on the (now dark) page */
  .dok-sotet { color: #f5f5f3; }
  .dok-sotet .szakasz-cim { color: #f5f5f3; }
  .dok-sotet .szakasz-cim .halvany { color: #6c6c69; }
  .dok-sotet .dok-zaro { color: #f5f5f3; }
  .dok-sotet .dok-pelda { color: #a3a39f; }
  .ugynok { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: var(--r-pill);
    background: #fff; border: 1.5px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
    transition: border-color .3s, box-shadow .3s, transform .3s; }
  .ugynok svg { flex: none; width: 20px; height: 20px; }
  .ugynok { transform: translate(-50%, -50%); text-decoration: none; }     /* placed on an ellipse round the gate by inline left/top */
  a.ugynok:hover, a.ugynok:focus-visible { color: #fff; }
  a.ugynok:focus-visible { outline: 2px solid #fff; outline-offset: 8px; }
  .kapu-szinpad[data-nev-keret="be"] a.ugynok:hover, .kapu-szinpad[data-nev-keret="be"] a.ugynok:focus-visible { filter: hue-rotate(40deg) saturate(.92) brightness(1.5); opacity: 1; }
  .kapu-szinpad .ugynok { background: #121215; border-color: #2a2a2e; color: #e9e9e6; z-index: 2; }   /* solid: shards and sparks pass behind */
  .ugynok.be { border-color: var(--smaragd); }
  .ugynok.villan { box-shadow: 0 0 0 6px rgba(16,185,129,.22); transform: translate(-50%, -50%) scale(1.06); }

  /* the steps under the gate: dim until their chevron locks */
  .kapu-lepesek { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .kl-kicsi { width: 36px; height: 36px; border-radius: 11px; }
  .kl-kicsi svg { width: 17px; height: 17px; }
  .dok-sotet .kl-ember { border-color: var(--smaragd); color: var(--smaragd-vilagos); }   /* the one human step */
  .kl { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 22px 22px 24px; transition: opacity .5s, transform .5s, box-shadow .5s; }
  .dok-sotet .kl { background: rgba(255,255,255,.035); border: 1px solid #222226; box-shadow: none; }
  .dok-sotet .kl h3 { color: #f5f5f3; }
  .dok-sotet .kl p { color: #a3a39f; }
  .dok-sotet .kl-ikon, .dok-sotet .cel { border-color: #34343a; color: #e9e9e6; }
  .dok-sotet .mini-lap { background: #f5f5f3; }
  .kl.var { opacity: .32; transform: translateY(8px); }
  .kl.friss { box-shadow: 0 0 0 2px var(--smaragd); }
  .kl h3 { margin: 14px 0 6px; font-size: 18px; letter-spacing: -.01em; }
  .kl p { margin: 0; color: var(--mute); font-size: 14.5px; line-height: 1.5; }
  .kl-kep { display: flex; align-items: center; gap: 10px; height: 52px; }
  .kl-ikon { width: 44px; height: 44px; border-radius: 13px; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; }
  .mini-lap { position: relative; width: 32px; height: 42px; border: 1.5px solid #2b2b2e; border-radius: 3px; background: #fff; color: #111; flex: none; }
  .mini-lap i { position: absolute; left: 5px; right: 5px; top: 7px; height: 14px; border: 1px solid #666; border-radius: 2px; }
  .mini-lap b { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 700 7.5px/1 var(--font); }
  .lap-regi { border-color: #a3a39f; color: #8a8a86; }
  .lap-regi::after { content: ''; position: absolute; left: -5px; right: -5px; top: 50%; border-top: 2px solid #8a8a86; transform: rotate(-28deg); }
  .cimkes::before { content: ''; position: absolute; left: -7px; top: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--smaragd); box-shadow: inset 0 0 0 4px var(--smaragd), inset 0 0 0 7px #fff; }
  .pipas { border-color: var(--smaragd); }
  .pipas::after { content: ''; position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--smaragd-mely)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6.1 9.3 10.2 4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px; }
  .kl-cel { position: relative; display: flex; align-items: center; gap: 8px; padding-left: 42px; }   /* the drawing waits left of the database */
  .cel { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line); display: grid; place-items: center; transition: border-color .3s, box-shadow .3s, opacity .3s; }
  .becsuszo { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); transition: transform .9s cubic-bezier(.6,0,.3,1) .2s, opacity .5s .9s; }
  .kl.l4:not(.var) .becsuszo { transform: translate(46px, -50%) scale(.5); opacity: 0; }        /* the drawing slides into the database */
  .kl.l4:not(.var) .cel-db { border-color: var(--smaragd); box-shadow: 0 0 0 4px rgba(16,185,129,.16); }
  .kl.l4.friss .cel-mappa { animation: mappa-villan 1.6s ease-in-out .6s 1 both; }               /* the folder lights up faintly */
  @keyframes mappa-villan { 0%, 100% { border-color: var(--line); } 40%, 60% { border-color: rgba(16,185,129,.6); box-shadow: 0 0 0 4px rgba(16,185,129,.10); } }

  /* energy slots, off by default (see the HTML comment at .kapu-szinpad) */
  /* name frame: the pill itself takes the 9-slice image and blends (screen), so the image's black drops out and
     the white name stays; a child element could not blend through the pill's own stacking context */
  .kapu-szinpad[data-nev-keret="be"] .ugynok {
    background: transparent; border-color: transparent; mix-blend-mode: screen; padding: 7px 18px 7px 14px;
    border-image-source: url("kepek/nev-keret.jpg");
    border-image-source: image-set(url("kepek/nev-keret.avif") type("image/avif"), url("kepek/nev-keret.jpg") type("image/jpeg"));
    /* the corners are the capsule's round ends: 165 px of the 330 px tall image, drawn half the frame high, so the
       ends keep their shape and only the straight middle stretches with the name */
    border-image-slice: 165 fill; border-image-width: 50% 30px; border-image-outset: 13px 16px; border-image-repeat: stretch;
    filter: hue-rotate(40deg) saturate(.92); }   /* same shift as the ring; the white name is unaffected */
  .kapu-szinpad[data-nev-keret="be"] .ugynok:not(.be) { opacity: .7; }
  /* centre burst: grows from small to ~1.3x the ring's diameter, flares, shrinks and fades while the wordmark appears.
     Driven by the gate clock (script), so a frame can be drawn exactly. Screen blend on the outermost element. */
  .kozep-kitores { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0);
    opacity: 0; pointer-events: none; mix-blend-mode: screen; --kk-feny: 1; filter: hue-rotate(40deg) saturate(.92) brightness(var(--kk-feny)); }
  .kozep-kitores .k-kitores { opacity: 1; }
  .kapu-szinpad:not([data-kitores="be"]) .kozep-kitores { display: none; }
  .kitores-hely { position: absolute; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--forgas)); pointer-events: none; mix-blend-mode: screen; filter: hue-rotate(40deg) saturate(.92); display: none; }
  .kapu-szinpad[data-kitores="be"] .kitores-hely { display: block; }
  .k-kitores, .k-kitores img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
  .k-kitores { opacity: 0; }
  .kapu-szinpad[data-kitores="be"] .kitores-hely.zarva .k-kitores { animation: kristaly-kitores .7s cubic-bezier(.2,.7,.3,1) 1 both; }
  @keyframes kristaly-kitores { 0% { opacity: 0; transform: scale(.5); filter: brightness(1); } 22% { opacity: 1; transform: scale(1.7); filter: brightness(1.8); } 100% { opacity: 0; transform: scale(2.4); filter: brightness(1); } }

  /* name-capsule typeface candidates (Béci 20.45, choice pending). Self-hosted, SIL OFL, latin + latin-ext (ő ű Ő Ű).
     Off unless .kapu-szinpad has data-nev-betu="exo" or "grotesk"; a font file is only downloaded when it is used. */
  @font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url(kepek/fontok/exo2-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url(kepek/fontok/exo2-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url(kepek/fontok/spacegrotesk-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url(kepek/fontok/spacegrotesk-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  .kapu-szinpad[data-nev-betu="exo"] .ugynok { font-family: 'Exo 2', var(--font); font-weight: 600; letter-spacing: .02em; }
  .kapu-szinpad[data-nev-betu="grotesk"] .ugynok { font-family: 'Space Grotesk', var(--font); font-weight: 600; letter-spacing: .01em; }


  /* ================= page background video ================= */
  /* fixed behind everything (z-index -1 paints over the page colour, under all content); the dark overlay keeps every
     text at AA (measured over the video, see the report) */
  .hatter { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
  .hatter-video { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; opacity: .42;
    /* the clip is turquoise (hue 179deg): shift it to emerald (160deg) */
    filter: hue-rotate(-19deg) saturate(.95) brightness(1);
    animation: hatter-lelegzes 4.6s ease-in-out infinite, hatter-nagyitas 22s ease-in-out infinite; }
  .hatter::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(11,11,12,.4), rgba(11,11,12,.65)); }
  @keyframes hatter-lelegzes { 0%, 100% { filter: hue-rotate(-19deg) saturate(.95) brightness(.8); } 50% { filter: hue-rotate(-19deg) saturate(.95) brightness(1.18); } }
  @keyframes hatter-nagyitas { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
  /* weak phones (Save-Data or little memory): the poster breathes, the video does not load (set by the script) */
  .hatter.csak-poszter .hatter-video { display: none; }
  .hatter.csak-poszter { background: var(--bg) url("kepek/hatter-poszter.jpg") center / cover no-repeat; animation: hatter-lelegzes-poszter 4.6s ease-in-out infinite; }
  @keyframes hatter-lelegzes-poszter { 0%, 100% { filter: hue-rotate(-19deg) brightness(.45); } 50% { filter: hue-rotate(-19deg) brightness(.7); } }


  /* ================= energy-frame buttons (Béci 21.13): every .gomb and the round mobile menu button get the same
     generated capsule frame as the name capsules. The frame is a ::before layer (screen blend, emerald filter): its
     black centre leaves the white label untouched, and the button itself carries no filter, so the focus ring keeps
     its colour. Dark, see-through inside, white label (16:1+ on the dark fill). ================= */
  .gomb, .gomb-vilagos, .kapcsolat .gomb, .fejlec-sav.sotet-mod .gomb {
    position: relative; background: rgba(11, 11, 12, .55); color: #fff; border: 0; }
  .gomb:hover, .gomb-vilagos:hover, .kapcsolat .gomb:hover, .fejlec-sav.sotet-mod .gomb:hover { background: rgba(11, 11, 12, .7); }
  .gomb .nyil, .gomb-vilagos .nyil, .kapcsolat .gomb .nyil, .fejlec-sav.sotet-mod .gomb .nyil { background: #fff; color: var(--tinta); }
  .gomb:hover .nyil, .gomb-vilagos:hover .nyil, .kapcsolat .gomb:hover .nyil, .fejlec-sav.sotet-mod .gomb:hover .nyil { background: var(--smaragd); color: var(--tinta); }
  .gomb::before, .mobil-menu summary::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; border: 0 solid transparent;
    border-image-source: url("kepek/nev-keret.jpg");
    border-image-source: image-set(url("kepek/nev-keret.avif") type("image/avif"), url("kepek/nev-keret.jpg") type("image/jpeg"));
    border-image-slice: 165 fill; border-image-width: 50% 28px; border-image-outset: 12px 15px; border-image-repeat: stretch;
    filter: hue-rotate(40deg) saturate(.92) brightness(.95); transition: filter .25s; }
  .gomb:hover::before, .gomb:focus-visible::before, .mobil-menu summary:hover::before, .mobil-menu[open] summary::before {
    filter: hue-rotate(40deg) saturate(.92) brightness(1.7); }
  .gomb:focus-visible, .mobil-menu summary:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
  .mobil-menu summary, .fejlec-sav.sotet-mod .mobil-menu summary { position: relative; background: rgba(11, 11, 12, .55); border: 0; box-shadow: none; color: #fff; }
  .mobil-menu summary::before { border-image-width: 50%; border-image-outset: 10px; }


  /* energy veins: each slot runs from the crystal (left) to the ring's centre (right). Width = crystal radius
     (190/400 = 47.5 % of the box); image kepek/er.* cut from er-eredeti.jpg as a 4:1 band with the ray on its midline. The light "flows in" with a mask moving left to right. */
  .er-hely { position: absolute; left: 50%; top: 50%; width: 47.5%; aspect-ratio: 4 / 1; display: none; pointer-events: none;
    transform-origin: 100% 50%; transform: translate(-100%, -50%) rotate(var(--szog)); mix-blend-mode: screen;
    filter: hue-rotate(40deg) saturate(.92); --toltes: 0%; --er-feny: .55; }
  .kapu-szinpad[data-erek="be"] .er-hely { display: block; }
  .er-kep, .er-kep img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
  .er-kep { opacity: var(--er-feny);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--toltes) - 8%), transparent calc(var(--toltes) + 2%));
    mask-image: linear-gradient(90deg, #000 calc(var(--toltes) - 8%), transparent calc(var(--toltes) + 2%)); }


  /* ================= multi-page additions (Béci 22.00) ================= */
  /* placeholder text: clearly not final (italic, muted), still AA (#a3a39f on #0b0b0c is 7.9:1) */
  .lorem { color: var(--mute) !important; font-style: italic; }
  .morzsa { font-size: 14px; color: var(--mute); margin: 8px 0 0; }
  .morzsa ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .morzsa li + li::before { content: '›'; margin-right: 6px; color: var(--mute); }
  .morzsa a { color: var(--body); text-decoration: none; }
  .morzsa a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .morzsa [aria-current] { color: var(--ink); }
  .al-nyito { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; padding: 40px 0 24px; }
  .al-nyito h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.04; font-weight: 800; letter-spacing: -.045em; text-transform: uppercase; margin: 0; }
  .al-nyito .bevezeto { margin: 22px 0 0; max-width: 36em; }
  /* the activity's crystal from the gate, glowing (generated image; screen blend and the emerald shift as in the gate) */
  .al-kristaly { justify-self: center; width: min(100%, 260px); aspect-ratio: 1; mix-blend-mode: screen; filter: hue-rotate(40deg) saturate(.92);
    animation: al-kristaly-lelegzes 4.6s ease-in-out infinite; }
  .al-kristaly img { width: 100%; height: 100%; object-fit: contain; display: block; }
  @keyframes al-kristaly-lelegzes { 0%, 100% { filter: hue-rotate(40deg) saturate(.92) brightness(.9); transform: translateY(0); } 50% { filter: hue-rotate(40deg) saturate(.92) brightness(1.25); transform: translateY(-6px); } }
  .feladatlista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .feladatlista .terulet h3 { font-size: 20px; }
  .feladatlista .terulet:last-child { grid-column: auto; }   /* 2x2, not a full-width last card */
  .gyik { display: grid; gap: 12px; max-width: 900px; }
  .gyik details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
  .gyik summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; font-weight: 600; font-size: 17px; }
  .gyik summary::-webkit-details-marker { display: none; }
  .gyik summary::after { content: '+'; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 400; transition: transform .2s; }
  .gyik details[open] summary::after { transform: rotate(45deg); }
  .gyik summary:hover::after { border-color: var(--smaragd); }
  .gyik details p { margin: 0; padding: 0 24px 22px; font-size: 16px; }
  .jogi { max-width: 760px; padding: 40px 0 0; }
  .jogi h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.06; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; margin: 0 0 24px; }
  .jogi p { margin: 0 0 16px; }
  .jogi h2 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 32px 0 10px; }
  .jogi a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
  .fo-lablec { margin-top: 40px; }
  /* short pages (home, legal): the footer sits at the bottom of the screen, not in the middle */
  body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  body > main { flex: 1 0 auto; }
  @media (max-width: 1100px) { .al-nyito { grid-template-columns: minmax(0, 1fr); } .al-kristaly { width: 180px; } }
  @media (max-width: 767px) { .feladatlista { grid-template-columns: minmax(0, 1fr); } .al-nyito { padding-top: 16px; } .al-kristaly { width: 150px; } }

  /* ---------- responsive ---------- */
  /* very narrow phones (under 350 px): four capsules no longer fit round the ring; the crystals still light up and the
     same four links are right below in "Miben segítünk" */
  @media (max-width: 349px) { .kapu-szinpad .ugynok { display: none; } }
  @media (max-width: 1100px) {
    .kapu-lepesek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nyito-racs { grid-template-columns: minmax(0, 1fr); grid-template-areas: "szoveg" "kapu"; }
    .nyito-kapu { width: min(100%, 600px); justify-self: center; }
    .sotet .segitunk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .menu { display: none; }
    .fejlec > nav { display: none; }   /* the empty nav still took two 24 px gaps: at 320 px the header overflowed */
    .mobil-menu { display: block; }
    .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .szakasz-fej { grid-template-columns: minmax(0, 1fr); }
    .pontok { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  }
  @media (max-width: 767px) {
    :root { --fejlec-mag: 72px; }
    .keret { padding: 0 16px; }
    .fejlec .gomb { padding-left: 18px; min-height: 44px; font-size: 14px; gap: 10px; }
    .fejlec .gomb .nyil { width: 28px; height: 28px; }
    .nevjegy { font-size: 22px; }
    .hero { padding: 12px 0 40px; gap: 28px; }
    .hero .cimke { display: none; }
    .hero .gombsor { display: none; }      /* the header already carries "Kapcsolat" */
    .fo-cim { margin-top: 0; }
    .bevezeto { font-size: 17px; margin: 16px 0 0; }
    .segitunk-felirat { margin-bottom: 8px; }
    .segitunk { padding: 4px 0; border-radius: 20px; }
    .segitunk a { padding: 0 16px; min-height: 56px; }
    .segitunk li:first-child a { padding-top: 0; }
    .segitunk li + li { margin: 0 16px; }
    .segitunk span.sor { display: none; }  /* phone: name + arrow only; the short line stays in section 3 */
    .segitunk b { font-size: 16px; }
    .szakasz { padding-top: 88px; }
    .szakasz-fej { margin-bottom: 32px; }
    .teruletek, .panelek { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .terulet, .panel { padding: 24px; }
    .terulet h3 { font-size: 21px; }
    .kapcsolat { margin-top: 88px; padding: 44px 24px; grid-template-columns: minmax(0, 1fr); border-radius: 26px; }
    .lablec-sor { flex-direction: column; }
    /* the gate on phones: smaller, agents in the corners, steps one under the other */
    .kapu-szinpad { aspect-ratio: 1; }
    .kapu-szinpad { overflow-clip-margin: 0px; }        /* a clip margin would still count towards the page width here */
    .kapu-doboz { top: 10%; height: 80%; left: 10%; }   /* the image reaches 5% past the ring box and swells 14% on the burst */
    /* phone: the four capsules sit in the stage's corners (the inline ellipse places would leave the screen) */
    .kapu-szinpad .ugynok { transform: none; }
    /* inset by the frame's outset (16 px), so the stage's clip does not cut the energy frame */
    .kapu-szinpad .ugynok.u0 { left: auto !important; right: 16px; top: 14px !important; }
    .kapu-szinpad .ugynok.u1 { left: auto !important; right: 16px; top: auto !important; bottom: 14px; }
    .kapu-szinpad .ugynok.u2 { left: 16px !important; top: auto !important; bottom: 14px; }
    .kapu-szinpad .ugynok.u3 { left: 16px !important; top: 14px !important; }
    .kapu-szinpad[data-nev-keret="be"] .ugynok { padding: 4px 9px 4px 7px; font-size: 10.5px; gap: 5px; letter-spacing: 0; border-image-outset: 8px 10px; }
    .kapu-szinpad .ugynok svg { width: 15px; height: 15px; }
    .kapu-szinpad .ugynok.villan { transform: scale(1.06); }
    .ugynok { font-size: 12px; padding: 5px 10px 5px 6px; gap: 6px; }
    .ugynok svg { width: 16px; height: 16px; }
    .kapu-lepesek { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .dok-zaro { font-size: 17px; }
    /* phone: title, the five areas (first screen), then the flow */
    .sotet { padding: calc(var(--fejlec-mag) + 8px) 0 48px; }
    .nyito-racs { grid-template-areas: "szoveg" "kapu"; gap: 20px; }
    .sotet .cimke, .sotet .gombsor { display: none; }
    .sotet .fo-cim { margin-top: 0; }
    .sotet .bevezeto { font-size: 17px; margin: 16px 0 0; }
    .sotet .segitunk { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--s-line); border-radius: 18px; background: rgba(255,255,255,.035); overflow: hidden; }
    .sotet .segitunk li + li { border-top: 1px solid var(--s-line); }
    .sotet .segitunk a, .sotet .segitunk li:first-child a, .sotet .segitunk li + li a { align-items: center; min-height: 56px; padding: 0 16px; border: 0; border-radius: 0; background: none; }
  }
  /* no prefers-reduced-motion handling at all (Béci, 20.51): every animation runs for everyone */

  /* generated wordmark image (fal.ai, Béci chose v2 on 2026-10-06), transparent PNG/WebP with its own glow */
  .nevjegy img { display: block; height: 38px; width: auto; margin: -7px 0 -7px -6px; }
  .kozep-logo img { display: block; width: 3.6em; height: auto; }
  .kozep-logo { filter: none; text-shadow: none; }

  /* digital look (Béci 2026-10-06, ideas 1 + 3): generated dot-network still instead of the stardust video, breathing
     from code; the ring's veins are a generated circuit trace (already emerald, so no hue shift) */
  .hatter-halo { position: absolute; inset: -3%; background: url("kepek/halo.jpg") center / cover no-repeat;
    animation: halo-lelegzes 4.6s ease-in-out infinite, hatter-nagyitas 22s ease-in-out infinite; }
  @keyframes halo-lelegzes { 0%, 100% { filter: brightness(.9); } 50% { filter: brightness(1.45); } }
  .hatter::after { background: radial-gradient(ellipse at 50% 40%, rgba(11,11,12,.05), rgba(11,11,12,.45)); }
  /* veins: the circuit image is shifted to the old vein hue, so the original filter matches crystals and ring */

  /* Kapcsolat buttons without the energy frame (Béci 2026-10-06 18.39): a quiet hairline border instead;
     the round mobile menu button keeps its frame */
  .gomb::before { content: none; }
  .gomb, .gomb-vilagos, .kapcsolat .gomb, .fejlec-sav.sotet-mod .gomb { border: 1px solid rgba(255, 255, 255, .22); }
  .gomb:hover, .gomb-vilagos:hover, .kapcsolat .gomb:hover, .fejlec-sav.sotet-mod .gomb:hover { border-color: var(--smaragd); }

  /* landing: the opening screen fills the space between header and footer and sits in its vertical middle,
     so a tall desktop window has no empty band at the bottom (Béci 2026-10-06 18.39) */
  @media (min-width: 821px) {
    body > main:has(> #nyito) { display: flex; flex-direction: column; }
    #nyito { flex: 1 0 auto; display: flex; align-items: center; }
    #nyito > .keret { width: 100%; }
  }
  /* no frame around any button (Béci 18.41): the round mobile menu button gets the same hairline as Kapcsolat */
  .mobil-menu summary::before { content: none; }
  .mobil-menu summary, .fejlec-sav.sotet-mod .mobil-menu summary { border: 1px solid rgba(255, 255, 255, .22); }
  .mobil-menu summary:hover, .mobil-menu[open] summary { border-color: var(--smaragd); }
  /* no outline at all (Béci 18.44: Kapcsolat had a hairline, "Hogyan dolgozunk" none): label + round arrow only */
  .gomb, .gomb-vilagos, .kapcsolat .gomb, .fejlec-sav.sotet-mod .gomb,
  .gomb:hover, .gomb-vilagos:hover, .kapcsolat .gomb:hover, .fejlec-sav.sotet-mod .gomb:hover { border: 0; background: transparent; }
  .gomb { padding-left: 0; }
  .mobil-menu summary, .fejlec-sav.sotet-mod .mobil-menu summary, .mobil-menu summary:hover, .mobil-menu[open] summary { border: 0; background: transparent; }

  /* live neural network (halo.js): the canvas over the still network; with it running the still only tints */
  .hatter-halo-elo { position: absolute; inset: 0; display: block; }
  .hatter.halo-elo .hatter-halo { opacity: .35; }

  /* gate data layer (kapu-adat.js): data points onto the ring, then the results coming out of the centre */
  .kapu-adat { position: absolute; left: -22%; top: -22%; width: 144%; height: 144%; pointer-events: none; z-index: 3; }
  .kapu-kimenet { position: absolute; left: 0; top: 0; z-index: 4; opacity: 0; pointer-events: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px;
    background: rgba(11, 11, 12, .78); color: #f5f5f3; font: 600 13px/1 var(--font);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, .35), 0 0 18px rgba(16, 185, 129, .35); }
  .kapu-kimenet svg { color: #34d399; flex: none; }
  @media (max-width: 1100px) {   /* phone and narrow two-column (821-1100, the ring is ~225 px there): icon-only badges
                                   on the ring, the names (up to "Ajánlat-összehasonlítás") would hit the capsules */
    .kapu-kimenet { font-size: 0; gap: 0; padding: 8px; }
  }

  /* resizing (Béci 19.00, "csúnyán követi"): the opening screen kept two columns only above 1100 px and then jumped
     to text-over-ring in one step, pushing the ring below the fold. Now it stays side by side down to 821 px and
     shrinks smoothly (the headline is already fluid); it stacks only on tablet/phone widths. */
  @media (min-width: 821px) and (max-width: 1100px) {
    .nyito-racs { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); grid-template-areas: "szoveg kapu"; gap: 28px 32px; }
    .nyito-kapu { width: 100%; justify-self: stretch; }
    .sotet .fo-cim { font-size: clamp(40px, 5.6vw, 64px); }
    .kapu-szinpad .ugynok { font-size: 12px; padding: 7px 12px; gap: 6px; }
    .kapu-szinpad .ugynok svg { width: 16px; height: 16px; }
  }

  /* ================= subpages on one screen (fulek.js, Béci 2026-10-06 19.04) ================= */
  .al-sav, .al-fulek { display: none; }
  body.al-fules .al-panel .szakasz-cim { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.al-fules .al-panel .szakasz-fej:not(:has(> :not(.szakasz-cim))) { display: none; }
  body.al-fules .al-panel { padding: 0; margin: 0; }
  body.al-fules .al-panel .szakasz-fej { margin-bottom: 20px; }
  .al-kapcsolat { margin-top: 28px; }
  .al-sav { width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; background: none; border: 0;
    border-top: 1px solid var(--line); color: var(--ink); font: 700 18px/1.2 var(--font); text-align: left; cursor: pointer; }
  .al-sav::after { content: '+'; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 400; transition: transform .2s; }
  .al-sav[aria-expanded="true"]::after { transform: rotate(45deg); border-color: var(--smaragd); }
  .al-sav:focus-visible, .al-ful:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

  /* wide and tall enough: two columns, tabs on the right, the page itself does not scroll */
  @media (min-width: 1024px) and (min-height: 700px) {
    body.al-fules { height: 100vh; height: 100dvh; overflow: hidden; }
    body.al-fules > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    body.al-fules > main > .keret { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
    .al-racs { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 8px 0 20px; }
    .al-bal { display: flex; flex-direction: column; min-height: 0; }
    .al-bal .al-nyito { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); align-content: center; padding: 16px 0; gap: 8px; }
    .al-bal .al-nyito h1 { font-size: clamp(38px, 4.2vw, 64px); }
    .al-bal .al-kristaly { order: -1; justify-self: start; width: clamp(90px, 14vh, 150px); }
    .al-jobb { display: flex; flex-direction: column; min-height: 0; }
    .al-fulek { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; align-self: flex-start; margin-bottom: 22px; background: rgba(11, 11, 12, .6); }
    .al-ful { border: 0; background: none; color: var(--mute); font: 600 15px/1 var(--font); padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
    .al-ful:hover { color: var(--ink); }
    .al-ful[aria-selected="true"] { background: #f5f5f3; color: var(--tinta); }
    .al-panelek { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #2a2a2e transparent; }
    .al-panelek .feladatlista { gap: 14px; }
    .al-panelek .terulet, .al-panelek .panel { padding: 24px; }
    .al-panelek .kapu-lepesek { gap: 12px; }
    .al-panelek .pontok { gap: 28px; }
    .al-panelek .kapcsolat { margin-top: 0; padding: 44px 40px; }
    .al-panelek .kapcsolat .szakasz-cim { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; font-size: clamp(30px, 3.2vw, 48px); }
    body.al-fules .lablec { padding: 14px 0 18px; gap: 6px; }
  }
  /* narrow or short: accordion, the page scrolls as usual */
  @media (max-width: 1023px), (max-height: 699px) {
    .al-sav { display: flex; }
    .al-panelek { margin-top: 24px; border-bottom: 1px solid var(--line); }
    .al-panelek .al-panel { padding: 4px 0 28px; }
    .al-panelek .kapcsolat { margin-top: 0; }
  }

  /* the gate box clipped the capsules' energy frame at some widths (Béci 19.06, Folyamat-automatizálás cut on the
     right): from 821 px nothing is clipped there; the page itself clips sideways so nothing can widen it */
  html, body { overflow-x: clip; }
  @media (min-width: 821px) { .kapu-szinpad { overflow: visible; } }
  /* 821-1100 px: the capsules move closer to the ring so their frames stay inside the window (measured) */
  @media (min-width: 821px) and (max-width: 1100px) {
    .kapu-szinpad .ugynok.u0, .kapu-szinpad .ugynok.u1 { left: 74% !important; }
    .kapu-szinpad .ugynok.u2, .kapu-szinpad .ugynok.u3 { left: 26% !important; }
  }
  /* 320-380 px phones: a smaller wordmark, so logo + Kapcsolat + menu fit the header (measured 12 px over at 320) */
  @media (max-width: 380px) { .nevjegy img { height: 30px; margin: -5px 0 -5px -5px; } }
  .al-panel[hidden] { display: none !important; }
  @media (min-width: 1024px) and (min-height: 700px) {
    /* the seven steps as compact rows (icon left, text right), two columns, so the tab fits without scrolling */
    .al-panelek .kapu-lepesek { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .al-panelek .kl { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 16px; }
    .al-panelek .kl-kep { grid-row: span 2; height: auto; }
    .al-panelek .kl-kep .mini-lap, .al-panelek .kl-kep .kl-cel, .al-panelek .kl-kep > :not(.kl-ikon):not(.kl-cel) { display: none; }
    .al-panelek .kl-ikon { width: 38px; height: 38px; border-radius: 11px; }
    .al-panelek .kl h3 { margin: 2px 0 4px; font-size: 16px; }
    .al-panelek .kl p { font-size: 13.5px; line-height: 1.45; }
  }
  @media (min-width: 1024px) and (min-height: 700px) {
    .al-panelek .kl-kep > :not(:first-child) { display: none !important; }   /* one icon per step, the columns line up */
    .al-panelek .kl { padding: 12px 14px; }
    .al-panelek .kl p { font-size: 13px; line-height: 1.42; }
    .al-panelek #hogyan .gomb { display: none; }   /* the Kapcsolat button stands on the left already */
  }
  @media (min-width: 1024px) and (min-height: 700px) {
    .al-panelek #hogyan .ut-vege { display: none; }
    .al-panelek .dok-zaro { margin: 16px 0 4px; font-size: 16px; }
    .al-panelek .dok-pelda { margin: 0; font-size: 13px; }
  }
  /* Kapcsolat tab: keeps its own card padding and its heading (the generic panel reset took both) */
  body.al-fules .al-panel.kapcsolat { padding: 44px 40px; }
  body.al-fules .al-panel.kapcsolat .szakasz-cim { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; font-size: clamp(30px, 3.2vw, 48px); margin-bottom: 16px; }
  @media (max-width: 1023px), (max-height: 699px) { body.al-fules .al-panel.kapcsolat { padding: 32px 24px; margin-bottom: 24px; } }

  @media (min-width: 1024px) and (min-height: 700px) {
    body.al-fules .lablec > nav, body.al-fules .lablec .lablec-nav { display: none; }   /* the footer's page links repeat the header menu */
  }
  /* laptops (700-860 px tall): everything in the tabs a step tighter */
  @media (min-width: 1024px) and (min-height: 700px) and (max-height: 860px) {
    .al-racs { padding: 4px 0 12px; gap: 40px; }
    .al-fulek { margin-bottom: 14px; }
    .al-ful { padding: 9px 15px; font-size: 14px; }
    .al-panelek .terulet, .al-panelek .panel { padding: 18px 20px; gap: 8px; }
    .al-panelek .terulet h3, .al-panelek .panel h3 { font-size: 17px; }
    .al-panelek .terulet p, .al-panelek .panel p { font-size: 14.5px; line-height: 1.5; }
    .al-panelek .kl { padding: 10px 12px; }
    .al-panelek .kl-ikon { width: 32px; height: 32px; }
    .al-panelek .kl h3 { font-size: 15px; margin: 0 0 2px; }
    .al-panelek .kl p { font-size: 12.5px; line-height: 1.4; }
    .al-panelek .dok-zaro { margin-top: 10px; font-size: 15px; }
    .al-panelek .pontok h3 { font-size: 18px; }
    .al-panelek .gyik summary { padding: 15px 20px; font-size: 16px; }
    body.al-fules .al-panel.kapcsolat { padding: 32px 32px; }
    .al-bal .al-kristaly { width: clamp(70px, 11vh, 110px); }
  }
  /* the longest subpage title (FOLYAMAT-AUTOMATIZÁLÁS) was 27 px wider than a 320 px phone: it scales with the width */
  @media (max-width: 430px) { .al-nyito h1 { font-size: min(40px, 9.2vw); } }
  @media (min-width: 1024px) and (min-height: 700px) and (max-height: 860px) { .al-panelek .dok-pelda { display: none; } }
  @media (min-width: 1024px) and (max-width: 1199px) and (min-height: 700px) { .al-racs { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; } }
  @media (min-width: 1024px) and (min-height: 700px) and (max-height: 760px) { .al-panelek .kapu-lepesek { gap: 8px; } .al-panelek .kl { padding: 9px 12px; } .al-fulek { margin-bottom: 10px; } }

  /* phones / narrow / short windows (Béci 19.28): page by page. The opening and every part fill a screen, scrolling
     snaps to the next one, the footer only comes at the very end; the parts show their own headings again. */
  @media (max-width: 1023px), (max-height: 699px) {
    html:has(body.al-fules) { scroll-snap-type: y mandatory; scroll-padding-top: var(--fejlec-mag); }
    body.al-fules .al-sav { display: none; }
    body.al-fules .al-panelek { margin-top: 0; border-bottom: 0; }
    body.al-fules .al-bal, body.al-fules .al-panel { min-height: calc(100svh - var(--fejlec-mag)); scroll-snap-align: start;
      display: flex; flex-direction: column; justify-content: center; padding: 32px 0; box-sizing: border-box; }
    body.al-fules .al-panel.kapcsolat { display: flex; justify-content: center; margin: 0 0 24px; min-height: auto; }
    body.al-fules .al-panel .szakasz-cim { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; }
    body.al-fules .al-panel .szakasz-fej:not(:has(> :not(.szakasz-cim))) { display: block; }
    body.al-fules .lablec { scroll-snap-align: end; }
  }
  /* page turn: the new tab slides in from the direction of the scroll */
  @media (min-width: 1024px) and (min-height: 700px) {
    .al-panelek[data-irany="le"] .al-panel:not([hidden]) { animation: al-le .45s cubic-bezier(.2, .7, .2, 1); }
    .al-panelek[data-irany="fel"] .al-panel:not([hidden]) { animation: al-fel .45s cubic-bezier(.2, .7, .2, 1); }
    @keyframes al-le { from { opacity: 0; transform: translateY(28px); } }
    @keyframes al-fel { from { opacity: 0; transform: translateY(-28px); } }
  }

  /* ================= plain long pages, like lusha.com (Béci 2026-10-06 20.20) =================
     Subpages: no tabs, no snapping; the parts follow each other and the page scrolls naturally to the footer
     (fulek.js is no longer loaded). Home: the opening fills the whole screen, the footer only shows on scrolling. */
  #nyito { min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
  #nyito > .keret { width: 100%; }

  /* tighter rhythm (Béci 2026-10-06 20.32, "nincsenek felesleges térközök", aibusinesslab.hu as the reference) */
  .szakasz { padding-top: 80px; }
  .szakasz-fej { margin-bottom: 32px; }
  .kapcsolat { margin-top: 80px; }
  .al-nyito { padding: 24px 0 0; }
  .lablec { padding-top: 32px; }
  @media (max-width: 767px) {
    .szakasz { padding-top: 56px; }
    .szakasz-fej { margin-bottom: 22px; }
    .kapcsolat { margin-top: 56px; }
  }

  /* ================= one page (Béci 2026-10-06 20.40, "legyen egyben az egész oldal, ne fülenként") =================
     The home page carries the four areas one after the other (each: what it does, how it runs, an example), then the
     shared Átnézve, Kérdések and Kapcsolat. The menu and the ring capsules scroll to the area. Inside an area the
     process and example headings are a step smaller, so the area name stays the main heading. */
  .egyoldal .terulet-nyito .szakasz-cim { font-size: clamp(40px, 5.6vw, 72px); }
  .egyoldal .terulet-nyito { padding-top: 112px; }
  .egyoldal .terulet-nyito:first-of-type { padding-top: 88px; }
  .egyoldal .al-resz { padding-top: 64px; }
  .egyoldal .al-resz .szakasz-cim { font-size: clamp(26px, 3vw, 40px); }
  @media (max-width: 767px) {
    .egyoldal .terulet-nyito { padding-top: 80px; }
    .egyoldal .terulet-nyito:first-of-type { padding-top: 56px; }
    .egyoldal .al-resz { padding-top: 44px; }
  }

  /* ================= new opening sections (marketing copy, 2026-10-06 night) =================
     "Ahová elmegy a hét" (five recognisable situations), the difference from a chat AI, and the
     "Amit nem csinálunk" list under Átnézve, which now sits right after the opening. */
  .fajdalom-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
  .fajdalom-lista li { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 22px 24px; color: var(--body); font-size: 16px; line-height: 1.5; }
  .fajdalom-zaro, .kiemelt-sor { margin: 28px 0 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: var(--ink); max-width: 40em;
    padding-left: 18px; border-left: 3px solid var(--smaragd); }
  .kiemelt-sor { margin-top: 0; }
  .nem-lista { margin-top: 40px; }
  .nem-lista h3 { margin: 0 0 14px; font-size: 20px; }
  .nem-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .nem-lista li { display: flex; gap: 12px; color: var(--body); font-size: 16px; }
  .nem-lista li::before { content: '\00d7'; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--smaragd); color: var(--smaragd);
    display: grid; place-items: center; font-size: 14px; line-height: 1; margin-top: 1px; }
  @media (max-width: 767px) { .fajdalom-lista li { padding: 18px 20px; font-size: 15px; } .nem-lista { margin-top: 28px; } }
  /* the headline is a full sentence now: a step smaller, so it stays beside the ring */
  .sotet .fo-cim { font-size: clamp(34px, 3.7vw, 58px); }
  @media (min-width: 1100px) { .fajdalom-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .fo-cim span { white-space: normal; text-wrap: balance; }

  /* ================= area tiles (Béci 2026-10-07, 7. pont; csempek.js) ================= */
  .csempek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .csempe { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px;
    background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow), 0 0 0 1px var(--line); color: var(--body);
    transition: box-shadow .2s, transform .2s; min-width: 0; }
  .csempe:hover { box-shadow: var(--shadow), 0 0 0 1px #3a3a3c; transform: translateY(-2px); }
  .csempe:focus-visible { outline: 2px solid var(--smaragd); outline-offset: 3px; }
  .csempe[aria-expanded="true"] { box-shadow: var(--shadow), 0 0 0 1.5px var(--smaragd), 0 0 28px rgba(16, 185, 129, .18); }
  .csempe-ikon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #34d399;
    background: rgba(16, 185, 129, .1); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .3); }
  .csempe-nev { color: var(--ink); font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
  .csempe-lead { font-size: 14.5px; line-height: 1.5; }
  .csempe-pontok { display: grid; gap: 6px; margin-top: 2px; font-size: 13.5px; color: var(--mute); }
  .csempe-pontok span { display: flex; gap: 8px; }
  .csempe-pontok span::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #34d399; margin-top: .55em; }
  .csempe-tovabb { margin-top: auto; padding-top: 8px; color: var(--ink); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
  .csempe-tovabb::after { content: '→'; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 400; transition: transform .2s, border-color .2s; }
  .csempe:hover .csempe-tovabb::after { transform: translateX(3px); border-color: var(--smaragd); }
  .csempe[aria-expanded="true"] .csempe-tovabb::after { transform: rotate(45deg); border-color: var(--smaragd); }
  body.csempes .terulet-panel { display: none; }
  body.csempes .terulet-panel.nyitva { display: block; animation: panel-be .35s ease-out; }
  @keyframes panel-be { from { opacity: 0; transform: translateY(12px); } }
  body.csempes .terulet-panel .terulet-nyito { padding-top: 56px; }

  /* mid-page call to action (research report 2026-10-07, point 4) */
  .kozep-hivas { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 40px; padding: 26px 28px;
    border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
  .kozep-hivas-szoveg { margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.45; max-width: 640px; }
  @media (max-width: 600px) { .kozep-hivas { padding: 22px 20px; } .kozep-hivas-szoveg { font-size: 16.5px; } }
  @media (max-width: 1100px) { .csempek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .csempek { grid-template-columns: minmax(0, 1fr); } .csempe { padding: 20px 18px 16px; } }