/* ==========================================================================
   SugárVill — styles.css
   Fényt viszünk az otthonába
   --------------------------------------------------------------------------
   Tartalom:
     01. Design tokenek
     02. Reset & alapok
     03. Tipográfia
     04. Layout: container, section, grid
     05. Dekoráció: aurora, rács, zaj, elválasztók
     06. Gombok
     07. Fejléc & navigáció
     08. (a navigáció mindkét megjelenése a 07. szekcióban)
     09. Hero
     10. Kártyák & komponensek
     11. Marquee / szalag
     12. Számlálók & képességsávok
     13. Vélemények
     14. Akkordeon (GYIK)
     15. Galéria & lightbox
     16. Árkalkulátor
     17. Űrlapok, egyedi select, modal
     18. Lábléc, cookie, lebegő hívógomb
     19. Animációk & scroll-reveal
     20. Mobil: teljes szélesség (faltól falig)
     21. Akadálymentesség, reduced-motion, nyomtatás
     22. Segédosztályok (u-* előtaggal)
     23. Szakaszsáv (tartalomjegyzék hosszú oldalakhoz)
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENEK
   ========================================================================== */

:root {
  /* --- ÁLLANDÓ MÁRKASZÍNEK (témától függetlenül azonosak) --- */
  --brand-amber: #f9a800;
  /* Ugyanaz a két márkaszín RGB-komponensekre bontva: az áttetsző
     változatokhoz (rgba) enélkül minden helyen a literált kellett ismételni,
     így egy színkorrekció 80+ helyen kézi átírást jelentett volna. */
  --brand-amber-rgb: 249, 168, 0;
  --brand-amber-300-rgb: 255, 196, 77;
  --bg-rgb: 5, 7, 12;
  --always-dark-2-rgb: 11, 17, 28;

  /* Rétegsorrend. A számok EGYMÁSHOZ képest jelentenek valamit, ezért itt
     állnak együtt — így látszik, mi takar mit, és nem kell a fájlban
     vadászni. A kis, egyszámjegyű értékek (0–5) komponenseken BELÜLI
     rétegzést jelentenek, azok maradnak a helyükön. */
  --z-szakaszsav: 40;
  /* A felcsúszó lapok (szolgáltatás, sürgősség) a FEJLÉC fölé kerülnek.
     Az ablakban ez mindegy volt (ott a modal saját rétege visz mindent), a
     Kapcsolat oldal BEÁGYAZOTT űrlapján viszont a fátyol a 900-as fejléc
     alatt festett: az oldal elsötétült, a fejléc világosan ott maradt, a
     hamburger és a „Hívjon most" gomb pedig kattintható volt a nyitott lap
     fölött. */
  --z-legordulo: 950;
  --z-muveletsav: 890;
  --z-fejlec: 900;
  /* A legördülő ALATT: a Kapcsolat oldal beágyazott űrlapján a kártya
     keresztbe feküdt a nyitott szolgáltatáslistán (1440 px alatt mérve), és a
     jobb oldali sávban a kattintást is elnyelte. Az ablakban ez nem látszott,
     mert ott a görgetés-zár amúgy is elrejti a sávot. A fejléc (900) és a
     mobil műveletsáv (890) fölött marad. */
  --z-suti: 940;

  /* A mezők határvonala. Külön token, mert a `--line` (1,20:1) és a
     `--line-strong` (1,50:1) egyaránt a WCAG 1.4.11 3:1-es küszöbe ALATT volt:
     sötét háttéren nem látszott, hol kezdődik a beírható terület. 0,36-tal
     3,20:1 — a küszöb legszűkebb teljesítése, hogy a formanyelv ne változzon
     jobban a kelleténél. */
  --mezo-keret: rgba(255, 255, 255, 0.36);
  /* Egérrel a mező fölé érve a keret ERŐSÖDIK (5,32:1). A `--line-strong`
     korábban itt állt, ami a mezőkeret 0,36-os alapja MELLETT már gyengítés
     lett volna: 3,31 → 1,58, épp a fókusz előtti pillanatban. */
  --mezo-keret-eros: rgba(255, 255, 255, 0.5);
  /* A `.burger` a `.header-actions` gyereke, ami 1120 px alatt saját
     rétegkontextust nyit — ez a szám tehát CSAK azon belül rendez, a fejléc
     900-as rétegéhez képest nem emel semmit. A gomb elérhetőségét nem ez adja,
     hanem az, hogy a menü a fejléc ALATT nyílik. */
  --z-burger: 1001;
  --z-modal: 1100;
  --z-nagyito: 1200;
  --z-zaj: 1400; /* dekoratív szemcse: mindenen, de nem fog kattintást */
  --z-gorgetesjelzo: 1500;
  --z-ugrolink: 1600; /* a legfelső: billentyűzettel ez az első elérhető elem */
  --danger-rgb: 255, 90, 95;
  --ok-rgb: 51, 214, 159;
  /* A márkaszínre (borostyán/kék) kerülő szöveg fix sötét árnyalata */
  --on-brand: #04060b;
  /* Fókuszgyűrű a sötét felületeken: a bekapcsolt állapot színétől független */
  --focus-ring: #ffffff;
  --brand-blue-rgb: 60, 158, 255;
  --brand-amber-300: #ffc44d;
  --brand-blue: #3c9eff;
  --brand-blue-300: #7dc0ff;

  --brand-gradient: linear-gradient(96deg, var(--brand-amber) 0%, var(--brand-amber-300) 50%, var(--brand-blue-300) 72%, var(--brand-blue) 92%);
  --brand-gradient-hard: linear-gradient(100deg, var(--brand-amber) 0%, var(--brand-blue) 100%);
  /* Az elsődleges gomb felülete SZÁNDÉKOSAN a borostyán családon belül marad.
     Korábban a márkagradienst használta (borostyán → kék), és hoverre
     átcsúszott kékbe — a „Hívás" gomb ilyenkor a másodlagos, kék gombra
     hasonlított, érintőn pedig a hover-állapot be is ragadt. A gomb
     identitása a szín; a visszajelzést a fényerő és a mélység adja. */
  --btn-primary-bg: linear-gradient(100deg, var(--brand-amber) 0%, var(--brand-amber-300) 100%);

  /* Állandó sötét felületek (fotós / hero blokkokhoz, világos témában is sötét) */
  --always-dark: #05070c;
  --always-dark-2: #0b111c;
  --always-dark-text: #eaf1fb;
  --always-dark-muted: #93a4bd;
  --always-dark-line: rgba(255, 255, 255, 0.1);

  /* Állapotszínek */
  --ok: #33d69f;
  --danger: #ff5a5f;

  /* --- TÉMA-FÜGGŐ TOKENEK — alapértelmezés: SÖTÉT --- */
  --bg: #05070c;
  --bg-2: #0a1019;
  --bg-3: #0d1421;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-solid: #0e1626;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #eaf1fb;
  --text-2: #c2cede;
  --muted: #8fa1ba;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 50px -18px rgba(0, 0, 0, 0.8);
  --shadow-3: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  --glow-amber: 0 0 0 1px rgba(var(--brand-amber-rgb), 0.28), 0 12px 44px -10px rgba(var(--brand-amber-rgb), 0.5);
  --glow-blue: 0 0 0 1px rgba(var(--brand-blue-rgb), 0.28), 0 12px 44px -10px rgba(var(--brand-blue-rgb), 0.5);
  --header-bg: rgba(var(--bg-rgb), 0.72);
  --grid-line: rgba(255, 255, 255, 0.045);
  --noise-opacity: 0.05;
  --aurora-opacity: 0.85;

  /* --- MÉRETEK --- */
  --container: 1220px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-full: 999px;

  --header-h: 76px;

  /* A rögzített alsó műveletsáv (csak telefonon látszik). A magassága a sáv
     paddingjából és a gombok méretéből adódik — mérve 74 px = 4,7rem. Négy hely
     hivatkozott rá korábban három különböző literállal; itt az egyetlen forrás.
     A „space" a sáv fölé kért levegőt és a képernyő biztonsági sávját is tartalmazza. */
  /* Töréspontok. CSS-ben nem lehet változót médialekérdezésben használni,
     ezért ezek a számok a @media szabályokban ismétlődnek — itt vannak
     megnevezve, hogy legyen egy hely, ahol keresni kell őket. A JS ugyanezt a
     hármat a scripts.js tetején, az MQ objektumban tartja.
       mobil:        max-width: 719.98px
       mobil felett: min-width: 720px
       asztali:      min-width: 1120px
     A 719.98/1119.98 érték szándékos: egész px-nél a két tartomány
     átfedne egy törtpixeles zoomnál. */

  --action-bar-h: 4.7rem;
  --action-bar-space: calc(var(--action-bar-h) + 0.7rem + env(safe-area-inset-bottom, 0px));

  /* --- MOZGÁS --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  --t-slow: 0.6s;

  color-scheme: dark;
}

/* ==========================================================================
   02. RESET & ALAPOK
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset, calc(var(--header-h) + 24px));
  /* Az alsó rögzített műveletsáv eltakarhatja azt az elemet, amire a böngésző
     görget — horgonyra ugráskor és billentyűzetes fókusznál is. A sáv csak
     telefonon látszik, ezért a tartalékot is csak ott kérjük (lásd 20. szekció). */
  /* Hely a görgetősávnak akkor is, ha éppen el van rejtve — így a menü/modal
     megnyitásakor nem ugrik oldalra a tartalom. */
  scrollbar-gutter: stable;
}

/* Görgetés-zár nyitott menü, modal vagy lightbox mellett.
   FONTOS: a zár a <html> elemen van, NEM a <body>-n. A `body { overflow: hidden }`
   scroll-konténerré tenné a body-t, ami a lap tetejére ugratná a látogatót —
   a <html>-en viszont a görgetés pozíciója megmarad. */
html.is-locked {
  overflow: hidden;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: 'ss01', 'cv05';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip (nem hidden): nem hoz letre scroll-konteneert, igy a fooldal
     gorgetese es a position:sticky is helyesen mukodik */
  overflow-x: clip;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

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

img {
  height: auto;
}

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

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

a {
  color: var(--brand-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: var(--brand-amber);
}

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

::selection {
  background: var(--brand-amber);
  color: var(--always-dark);
}

/* Fókusz-jelölés — WCAG 2.2 kontrasztos, minden interaktív elemen */
:focus-visible {
  outline: 3px solid var(--brand-amber);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Egyedi görgetősáv */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-2);
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--brand-amber), var(--brand-blue));
    border: 3px solid var(--bg-2);
    border-radius: var(--r-full);
  }
}

/* ==========================================================================
   03. TIPOGRÁFIA
   ========================================================================== */

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* A NAGY CÍMSOROK SORKÖZE — 1,18, nem a fenti 1,08.

   A tömör, plakátszerű 1,08 a MAGYAR szövegen nem működik: az egyik sor
   leszálló szárai (gy, j, p, y) és a következő sor ékezetei (á, é, ő, ű)
   ugyanabba a résbe lógnak bele. 1,08 mindössze 0,08 em szabad helyet hagy —
   telefonon 2,6 px, asztalin 4–5 px —, ami erre kevés.

   Hogy a hiba látszik-e, kizárólag azon múlik, hogy egy leszálló szár épp
   ékezet fölé esik-e. Ezért tűnt úgy, hogy „valahol jó, valahol nem”, és
   ezért nem a sorok számától függött: minden többsoros címsor egyformán
   szoros volt, csak nem mindegyiken találkozott össze a két jel.

   Csak a `h1`-re és `h2`-re: a kisebb címsorok (h3–h5) a kártyákban ülnek,
   ott a tömörebb sorköz a helyes. */
h1,
h2 {
  line-height: 1.18;
}

h1 {
  font-size: clamp(2.5rem, 7.2vw, 5.4rem);
}
h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}
h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  letter-spacing: -0.02em;
}
h4 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--text-2);
  line-height: 1.7;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.875rem;
}

.tx-grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tx-amber {
  color: var(--brand-amber);
}

/* Finom fényudvar. Korábban két árnyékréteg volt (34 px + 90 px), ami nagy
   méretű címsornál glifánként összefolyt, és téglalap alakú narancs foltként
   látszott a szöveg mögött. Egyetlen, halvány réteg maradt: sejteti a fényt,
   de nem rajzol keretet. */
.glow-amber {
  text-shadow: 0 0 26px rgba(var(--brand-amber-rgb), 0.2);
}
.glow-blue {
  text-shadow: 0 0 26px rgba(var(--brand-blue-rgb), 0.2);
}

/* Szekció-fejléc blokk */
.sec-head {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.sec-head.is-center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.95rem 0.42rem 0.6rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-amber);
  box-shadow: 0 0 0 4px rgba(var(--brand-amber-rgb), 0.16);
  animation: pulse-dot 2.4s var(--ease-in-out) infinite;
}

.eyebrow.is-blue::before {
  /* A pulzáló gyűrű színét is át kell adni: a `pulse-dot` animáció ebből a
     változóból olvassa, különben a kék pötty körül borostyán halo lüktetne. */
  --pulse-rgb: var(--brand-blue-rgb);
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(var(--brand-blue-rgb), 0.16);
}

@keyframes pulse-dot {
  0%,
  100% {
    /* `--pulse-rgb`, nem fix borostyán: az `is-blue` változat pöttye kék, a
       körülötte lüktető gyűrű viszont borostyán volt — az animált érték
       felülírja a szabályban deklaráltat. */
    box-shadow: 0 0 0 4px rgba(var(--pulse-rgb, var(--brand-amber-rgb)), 0.16);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(var(--pulse-rgb, var(--brand-amber-rgb)), 0);
  }
}

/* ==========================================================================
   04. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container.is-narrow {
  max-width: var(--container-narrow);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section.is-tight {
  /* A változón keresztül, hogy a horgonylandolás is ehhez az értékhez
     igazodhasson — lásd a 23. szakasz `scroll-margin-top` szabályát. */
  --section-y: clamp(3rem, 6vw, 5rem);
  padding-block: var(--section-y);
}

.section.is-alt {
  background: var(--bg-2);
}

.section.is-dark {
  position: relative;
  background: var(--always-dark);
  color: var(--always-dark-text);
  overflow: hidden;
  isolation: isolate;
}

.section.is-dark .muted,
.section.is-dark .lead {
  color: var(--always-dark-muted);
}

.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .split {
    grid-template-columns: 1.05fr 1fr;
  }
  .split.is-reverse > :first-child {
    order: 2;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.center {
  text-align: center;
}

/* ==========================================================================
   05. DEKORÁCIÓ
   ========================================================================== */

/* Mozgó "aurora" gradiens-háló */
.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  z-index: 0;
  opacity: var(--aurora-opacity);
  filter: blur(32px);
  contain: strict;
}

.aurora::before,
.aurora::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.aurora::before {
  width: 46vw;
  height: 46vw;
  min-width: 380px;
  min-height: 380px;
  top: -6%;
  left: -4%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--brand-amber-rgb), 0.55), rgba(var(--brand-amber-rgb), 0) 68%);
}

.aurora::after {
  width: 52vw;
  height: 52vw;
  min-width: 420px;
  min-height: 420px;
  top: 8%;
  right: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--brand-blue-rgb), 0.55), rgba(var(--brand-blue-rgb), 0) 68%);
}

/* A sodródás CSAK ott fut, ahol meg is lehet állítani: abban a heróban,
   amelyikben ott a szünet gomb. Az aurora kilenc helyen szerepel — a
   `.page-hero`-kban és a sötét szekciókban is —, oda viszont a
   `.hero.is-paused` szelektor sosem érne el, tehát ott megállíthatatlan
   mozgás lett volna. Statikus foltként ugyanúgy adja a színt és a mélységet.
   Ha egy új helyre is kell mozgás, előbb a vezérlőt kell odatenni. */
/* A `will-change` ARRA a két szabályra kerül, amelyik az animációt is adja.
   A közös blokkban minden oldalon és minden képernyőméreten külön réteget
   kért a böngészőtől — ott is, ahol a folt meg sem mozdul. */
.hero:has([data-hero-pause]) > .aurora::before {
  animation: drift-a 22s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

.hero:has([data-hero-pause]) > .aurora::after {
  animation: drift-b 26s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

/* A kikapcsoló a fenti szabályok UTÁN áll: azonos specificitásnál a sorrend
   dönt, és fordítva ez a blokk halott kód volt (az animáció telefonon is ment). */
@media (max-width: 719.98px) {
  .aurora::before,
  .aurora::after {
    animation: none;
    will-change: auto;
  }
}

@keyframes drift-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(16vw, 10vh, 0) scale(1.22);
  }
}

@keyframes drift-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
  100% {
    transform: translate3d(-14vw, -8vh, 0) scale(0.92);
  }
}

/* Technikai rács */
.grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 20%, transparent 78%);
}

/* Finom filmszemcse — megtöri a lapos gradienseket */
.noise {
  position: fixed;
  inset: 0;
  z-index: var(--z-zaj);
  pointer-events: none;
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Hero fényjáték — az egér alatt „feléled” a technikai rács

   Két réteg dolgozik együtt: a `.grid-bg.is-live` egy világosabb rácsmásolat,
   amit egy kör alakú maszk csak a kurzor környékén enged látszani, a
   `.hero-light` pedig egy lágy márkaszínű fényfolt ugyanott. A JS a
   `--mx` / `--my` egyéni tulajdonságokat állítja.
   -------------------------------------------------------------------------- */

.grid-bg.is-live {
  background-image: linear-gradient(rgba(var(--brand-amber-rgb), 0.95) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-blue-rgb), 0.9) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0;
  mask-image: radial-gradient(300px circle at var(--mx, -100px) var(--my, -100px), #000 0%, #000 22%, transparent 72%);
  -webkit-mask-image: radial-gradient(300px circle at var(--mx, -100px) var(--my, -100px), #000 0%, #000 22%, transparent 72%);
  transition: opacity 0.5s var(--ease);
}

/* A fényfolt FIX méretű doboz, amit transform mozgat — nem a gradiens
   középpontja vándorol egy teljes képernyős rétegen. Így az egér minden
   mozdulatánál a kompozitor tol el egy 880 px-es réteget, ahelyett hogy a
   böngésző újrafestené az egész heroát.
   (A .grid-bg.is-live szándékosan MARAD maszk-alapú: ott a maszk a 64 px-es
   rácshoz igazodik, és egy mozgó dobozban a rács elcsúszna a hátterétől.) */
.hero-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 880px;
  height: 880px;
  margin: -440px 0 0 -440px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(440px circle at 50% 50%,
      rgba(255, 205, 110, 0.2), rgba(var(--brand-amber-rgb), 0.13) 30%, rgba(var(--brand-blue-rgb), 0.09) 55%, transparent 74%);
  transform: translate3d(var(--mx, -1000px), var(--my, -1000px), 0);
  will-change: transform;
  transition: opacity 0.5s var(--ease);
}

.hero.is-lit .grid-bg.is-live,
.hero.is-lit .hero-light {
  opacity: 1;
}

/* Egérkövető fényfolt (csak nagy képernyőn, JS állítja a --mx/--my értéket) */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-blue-rgb), 0.1), rgba(var(--brand-amber-rgb), 0.06) 42%, transparent 70%);
  transform: translate3d(var(--mx, 50vw), var(--my, 50vh), 0);
  transition: opacity 0.5s var(--ease);
  will-change: transform;
}

body.has-pointer .cursor-glow {
  opacity: 1;
}

/* Hullámos / ferde SVG elválasztók */
/* HULLÁMOS SZEKCIÓ-ELVÁLASZTÓ

   Az `<svg>` útvonala a KÖVETKEZŐ szakasz színét viszi, a doboz háttere pedig
   az ELŐZŐ szakaszét: a hullám így az egyikből a másikba vezet át.

   EZ A HÁTTÉR SOKÁIG HIÁNYZOTT, és emiatt a sima változat (ami `is-alt`
   szakasz UTÁN áll) teljesen láthatatlan volt: a háttere átlátszó maradt,
   tehát a lap színét mutatta — ugyanazt, amivel az útvonal is ki van töltve.
   Egyszínű sáv volt, semmi más.

   A vonal a hullám mentén azért kell, mert a két háttérszín különbsége
   (#05070c ↔ #0a1019) önmagában alig olvasható. A `non-scaling-stroke` a
   `preserveAspectRatio="none"` nyújtás ellenére is egyenletes vastagságot ad.
   Az SVG szándékosan nagyobb a dobozánál: az útvonal ZÁRÓ élei (bal, jobb,
   alsó) így kilógnak és levágódnak — csak maga a görbe marad látható. */
.divider {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(48px, 6vw, 96px);
  color: var(--bg);
  background: var(--bg-2);
  overflow: hidden;
  pointer-events: none;
}

.divider svg {
  display: block;
  /* A globális `img, svg, video { max-width: 100% }` (2. szekció) különben
     visszanyesi a lenti túllógást pontosan 100 %-ra: a `margin-inline: -3px`
     ilyenkor nem szimmetrikusan lógat ki, hanem BALRA TOLJA az egészet — a
     jobb oldalon 3 px-cel beljebb ér véget, és ott az útvonal záró éle a
     látható dobozon BELÜL rajzolódik ki: világos függőleges vonalka fut le a
     hullámtól a sáv aljáig. */
  max-width: none;
  width: calc(100% + 6px);
  height: calc(100% + 3px);
  margin-inline: -3px;
}

.divider svg path {
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* A MÁSIK IRÁNY: `is-alt` szakasz ELŐTT áll, tehát az útvonal viszi az alt
   színt, a háttér pedig a lapét. */
.divider.is-alt {
  color: var(--bg-2);
  background: var(--bg);
}
/* Világító vízszintes vonal */
.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--brand-amber) 50%, var(--line-strong) 82%, transparent);
  opacity: 0.6;
}

/* ==========================================================================
   06. GOMBOK
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease),
    border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

/* Villanó fénycsík a gombokon */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(130%);
}

/* Elsődleges — márkagradiens + izzás */
.btn-primary {
  background: var(--btn-primary-bg);
  background-size: 200% 100%;
  color: var(--on-brand);
  box-shadow: 0 10px 34px -12px rgba(var(--brand-amber-rgb), 0.7), 0 0 0 1px rgba(var(--brand-amber-rgb), 0.35);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--on-brand);
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 20px 48px -14px rgba(var(--brand-amber-rgb), 0.85), 0 0 0 1px rgba(var(--brand-amber-300-rgb), 0.6);
}

/* Másodlagos — üveges */
.btn-ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--text);
  border-color: var(--brand-blue);
  background: var(--surface-2);
  transform: translateY(-3px);
  box-shadow: var(--glow-blue);
}

/* Szöveglink-gomb nyíllal */
/* A .btn:active fentebb áll, mint a variánsok :hover szabálya, és azonos a
   specificitása — így a lenyomás-visszajelzés sosem érvényesült. A variánsokra
   külön kiírva már látszik. */
.btn-primary:active,
.btn-ghost:active {
  transform: translateY(1px) scale(0.99);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  color: var(--brand-blue);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}

.btn-link svg {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--t) var(--ease);
}

.btn-link:hover svg {
  transform: translateX(5px);
}

.btn-sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.86rem;
}

.btn-lg {
  padding: 1.1rem 2rem;
  font-size: 1.05rem;
}

.btn-block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

/* ==========================================================================
   07. FEJLÉC & NAVIGÁCIÓ
   --------------------------------------------------------------------------
   EGYETLEN navigációs markup szolgálja ki mindkét megjelenést:
     · >= 1120px : vízszintes menüsáv a fejlécben
     · <  1120px : teljes képernyős panel a fejléc ALATT (a logó és a
                   hamburger végig látszik, és minden menüpont kifér egy
                   képernyőre — nincs görgetés)
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: var(--z-ugrolink);
  padding: 0.8rem 1.2rem;
  background: var(--brand-amber);
  color: var(--on-brand);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--t) var(--ease);
}

.skip-link:focus {
  top: 0;
  color: var(--on-brand);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-gorgetesjelzo);
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--brand-gradient-hard);
  box-shadow: 0 0 14px rgba(var(--brand-amber-rgb), 0.6);
  pointer-events: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fejlec);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.site-header.is-stuck {
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-1);
}

/* Nyitott menü mellett a fejléc mindig tömör hátteret kap */
/* FONTOS: a nem-`none` backdrop-filter tartalmazó blokkot hoz létre a `position: fixed`
   leszármazottaknak. A menüpanel a fejléc gyereke, ezért görgetés után (.is-stuck) a
   76 px magas fejléchez igazodott volna a viewport helyett — vagyis összelapult volna.
   Nyitott menü mellett ezért kikapcsoljuk az elmosást; a tömör háttér úgyis eltakarja. */
body.is-locked .site-header {
  background: var(--bg);
  border-bottom-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


@media (min-width: 1120px) {
  /* A fejléc és a lábléc kilép az 1220 px-es tartalomsávból: a logó és a
     „Hívjon most” gomb a képernyőszélhez kerül, a lábléc négy oszlopa pedig
     elfér tördelés nélkül. A két blokk ugyanazt a szélességet és belső
     térközt használja, így a széleik pontosan egy vonalba esnek. */
  .site-header .container,
  .site-footer .container,
  .hero .container {
    max-width: min(1700px, 100%);
    padding-inline: clamp(1.75rem, 3.5vw, 3.5rem);
  }

}

/* --- Fejlécsáv --- */

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  /* Egyetlen forrás: a --header-h tokenre több layout-számítás is épül
     (hero-térköz, ragadós eltolások); a 76px literál kettéosztotta. */
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  transition: transform var(--t) var(--ease);
}

.brand:hover {
  transform: scale(1.03);
}

.brand img {
  height: 40px;
  width: auto;
}

@media (max-width: 420px) {
  .brand img {
    height: 32px;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* --- Navigáció: közös alap --- */

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-full);
  color: var(--text-2);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

/* Nagy képernyőn a menü levegősebb. FONTOS: ez a blokk a közös alap UTÁN áll —
   a médialekérdezés nem ad specificitást, tehát ha elé kerülne, a később álló
   alapszabály (azonos 0,1,0) némán felülírná, és a finomítás sosem érvényesülne. */
@media (min-width: 1120px) {
  .nav-list {
    gap: 0.3rem;
  }

  .nav-link {
    padding: 0.55rem 0.85rem;
  }
}

.nav-ico {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--brand-amber);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}

.nav-ico svg {
  width: 17px;
  height: 17px;
}

.nav-link:hover {
  color: var(--text);
  background: var(--surface);
}

.nav-link:hover .nav-ico {
  transform: translateY(-2px);
}

.nav-link[aria-current='page'] {
  color: var(--text);
}

.nav-foot {
  display: none;
}

/* --- Nagy képernyő: vízszintes sáv --- */

@media (min-width: 1120px) {
  .nav-link::after {
    content: '';
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.28rem;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-gradient-hard);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--t) var(--ease);
  }

  .nav-link:hover::after,
  .nav-link[aria-current='page']::after {
    transform: scaleX(1);
  }
}

/* --- Mobil / tablet: teljes képernyős panel a fejléc alatt --- */

@media (max-width: 1119.98px) {
  /* A logó és a hamburger a panel FÖLÖTT marad */
  .brand,
  .header-actions {
    position: relative;
    z-index: 3;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 0 max(1rem, env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  }

  .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(620px 420px at 88% 0%, rgba(var(--brand-blue-rgb), 0.15), transparent 62%),
      radial-gradient(560px 400px at 6% 100%, rgba(var(--brand-amber-rgb), 0.13), transparent 62%);
  }

  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  /* FIGYELEM: a flex/gap/max-height/justify-content értékeket a stíluslap
     végén lévő „Mobil menü: a menüpontok nem dobozok” blokk állítja be —
     ott keresd őket, ne itt. */
  .nav-list {
    position: relative;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-list li {
    display: flex;
  }

  /* A keret, a háttér és a belső térköz szintén a stíluslap végi mobil-blokkban
     dől el (listasoros megjelenés, nem dobozok). */
  .nav-link {
    flex: 1;
    gap: 0.85rem;
    color: var(--text);
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(0.98rem, 4vw, 1.12rem);
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .nav-link[aria-current='page'] {
    color: var(--brand-amber);
  }

  .nav-ico svg {
    width: 19px;
    height: 19px;
  }

  .nav-foot {
    position: relative;
    display: grid;
    gap: 0.55rem;
    flex: none;
  }

  .nav-foot .btn {
    padding-block: 0.78rem;
  }

  .nav-note {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
  }

  /* Alacsony kijelzőn tovább tömörítjük a sorokat — az a blokk SZÁNDÉKOSAN a
     fájl legvégén áll („ALACSONY KIJELZŐ: tömörebb mobilmenü”), mert innen a
     későbbi mobilmenü-szabályok azonos specificitással felülírnák. */
  }

/* --- Ikongomb (hamburger) --- */

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform var(--t) var(--ease),
    color var(--t) var(--ease);
}

.icon-btn:hover {
  border-color: var(--brand-amber);
  color: var(--brand-amber);
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}

.header-cta {
  display: none;
}

@media (min-width: 560px) {
  .header-cta {
    display: inline-flex;
  }
}

.burger {
  position: relative;
  z-index: var(--z-burger);
}

@media (min-width: 1120px) {
  .burger {
    display: none;
  }
}

.burger-lines {
  position: relative;
  width: 20px;
  height: 14px;
}

.burger-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease), width var(--t) var(--ease);
}

.burger-lines span:nth-child(1) {
  top: 0;
}
.burger-lines span:nth-child(2) {
  top: 6px;
  width: 70%;
}
.burger-lines span:nth-child(3) {
  top: 12px;
}

.burger[aria-expanded='true'] {
  border-color: var(--brand-amber);
  color: var(--brand-amber);
}

.burger[aria-expanded='true'] .burger-lines span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger[aria-expanded='true'] .burger-lines span:nth-child(2) {
  opacity: 0;
  transform: translateX(-12px);
}
.burger[aria-expanded='true'] .burger-lines span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   09. HERO
   ========================================================================== */

/* A hero pontosan egy képernyőt tölt ki — de `min-height`-tal, nem `height`-tal:
   ha a tartalom mégis magasabb (pl. fekvő telefon), a szekció megnő, semmi nem
   vágódik le. A `svh` egység a mobil böngészők ki-be csúszó címsorát is kezeli,
   így nem ugrál a magasság görgetés közben.
   A belső térközök `vh`-alapúak, hogy alacsony kijelzőn maguktól összehúzódjanak. */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + clamp(1.25rem, 4vh, 3.5rem)) clamp(1.5rem, 5vh, 4.5rem);
  background: var(--always-dark);
  color: var(--always-dark-text);
  overflow: hidden;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   Hero háttérvideó (CSAK telefonon)

   A felvétel a felszerelt szerelőbusz belsejéről szól: piros-fekete, tehát
   önmagában ütne a borostyán-kék márkaszínnel. Ezért nem „videó a heroban",
   hanem HÁTTÉRTEXTÚRA: erősen visszafogva, a lap saját sötét alapszínébe
   oldva, felül-alul lágy átmenettel — így nem doboz, hanem a hero mélysége.

   Nagy képernyőn `display: none` ÉS `preload="none"`, tehát egyetlen bájtot
   sem tölt le. A lejátszást a heroModule indítja.
   -------------------------------------------------------------------------- */
.hero-video {
  display: none;
}

@media (max-width: 719.98px) {
  .hero-video {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A visszafogás három rétegből áll: áttetszőség, enyhe telítettség-vétel,
       és a lap alapszínével azonos tónusra húzás. */
    opacity: 0.3;
    filter: saturate(0.72) contrast(0.95) brightness(0.85);
    /* Felül a fejléc, alul a műveletsáv felé teljesen elfogy — nincs éle. */
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
  }

  /* A lap alapszíne a videó FÖLÖTT is ott van, hogy a szöveg kontrasztja
     ne a felvétel pillanatnyi világosságától függjön. */
  .hero-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      var(--always-dark) 0%,
      rgba(var(--brand-blue-rgb), 0.06) 45%,
      var(--always-dark) 100%
    );
    opacity: 0.72;
  }
}

/* Mobilon az alsó műveletsáv eltakarná a hero utolsó sávját, ezért annyival
   rövidebb — így a kompozíció a látható területre illeszkedik. */
@media (max-width: 719.98px) {
  .hero {
    min-height: calc(100vh - var(--action-bar-h) - env(safe-area-inset-bottom, 0px));
    min-height: calc(100svh - var(--action-bar-h) - env(safe-area-inset-bottom, 0px));
  }
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0%, rgba(var(--bg-rgb), 0) 100%);
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1120px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(3rem, 6vw, 6rem);
    /* A fejléc-szélességű sávban a szöveg túl kint kezdődött; ez a behúzás
       visszahozza olvasható pozícióba, a logóhoz képest kicsit beljebb. */
    padding-left: clamp(0rem, 3vw, 4.5rem);
  }

  /* A szövegoszlop nem nyúlhat bele a jobb oldali sávba még akkor sem, ha a
     képernyő nagyon széles — így marad valódi levegő az ábra előtt. */
  .hero-grid > :first-child {
    max-width: 46rem;
  }
}

/* A főcím a szélesség ÉS a magasság közül a szűkösebbhez igazodik: széles, de
   alacsony ablakban (pl. fekvő laptop) a `vh` fogja vissza, keskeny mobilon a
   `vw`. Így sehol nem lóg ki és sehol nem marad aránytalanul kicsi. */
.hero h1 {
  margin-bottom: clamp(0.9rem, 2.2vh, 1.6rem);
  font-size: clamp(2.2rem, min(7.2vw, 9.5vh), 5.2rem);
}

.hero h1 .line {
  display: block;
  overflow: hidden;
}

/* A sorok késleltetése a sorrendjükből jön, nem inline stílusból. */
.hero h1 .line:nth-child(2) > span {
  --i: 1;
}

.hero h1 .line > span {
  display: block;
  transform: translateY(28%);
  opacity: 0;
  animation: line-up 0.7s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes line-up {
  to {
    transform: none;
    opacity: 1;
  }
}

.hero-sub {
  max-width: 56ch;
  margin-bottom: clamp(1.25rem, 3.4vh, 2.4rem);
  color: var(--always-dark-muted);
  font-size: clamp(0.98rem, min(1.5vw, 2.1vh), 1.22rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Hero vizuál: áramkör-panel

   Telefonon is megjelenik — ez a hero egyetlen látványeleme, és érintésre
   ugyanúgy működik —, de csak ha van hozzá hely. A hero kötelezően egy
   képernyőre illeszkedik, és a szöveg + az alsó műveletsáv egy alacsony
   készüléken (pl. iPhone SE, 667 px) már önmagában kitölti azt; ott a panel
   csak kitolná a heroból a szöveget. */
.hero-visual {
  position: relative;
  display: none;
}

@media (max-width: 1119.98px) and (min-height: 800px) {
  .hero-visual {
    display: block;
    margin-top: clamp(1.25rem, 4vh, 2.25rem);
  }
}

@media (min-width: 1120px) {
  .hero-visual {
    display: block;
  }
}

.circuit-panel {
  position: relative;
  aspect-ratio: 1 / 1;
  /* A panel a rendelkezésre álló magassághoz és az oszlop szélességéhez
     igazodik — nagy monitoron nagy, kisebbön arányosan kisebb. */
  max-height: min(62vh, 520px);
  margin-inline: auto;
  border: 1px solid var(--always-dark-line);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(var(--brand-blue-rgb), 0.08), rgba(var(--brand-amber-rgb), 0.05) 55%, transparent);
  /* backdrop-filter szándékosan NINCS: a panel örökké animált (float-panel),
     így a homályosítás minden képkockán újraszámolna — a saját gradiense
     fölött, a közel fekete hero-alapon viszont a hatása láthatatlan. */
  overflow: hidden;
  box-shadow: 0 50px 120px -50px rgba(var(--brand-blue-rgb), 0.55);
  animation: float-panel 9s var(--ease-in-out) infinite alternate;
}

/* Telefonon a hero szöveg + az alsó műveletsáv is elfér mellette, ezért a
   panel jóval kisebb korlátot kap. */
@media (max-width: 1119.98px) {
  .circuit-panel {
    max-height: min(30vh, 300px);
  }
}

@keyframes float-panel {
  0% {
    transform: translateY(-10px) rotate(-0.6deg);
  }
  100% {
    transform: translateY(10px) rotate(0.6deg);
  }
}

.circuit-panel svg {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Interaktív áramkör — „Kapcsolja fel”

   A villámra kattintva áram indul a vezetékeken, és a ház áramkörei sorra
   felkapcsolódnak. Ez a szlogen eljátszása: „Fényt viszünk az otthonába”.
   Szándékosan NEM kiégést mutat: az ügyfél épp attól tart, és a SugárVill
   pont azt előzi meg.
   -------------------------------------------------------------------------- */

/* Kattintható villám */
.bolt-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 23%;
  aspect-ratio: 1;
  /* NE kerüljön ide `translate: -50% -50%` „tartalékként”: a `translate` és a
     `transform` KÉT KÜLÖN tulajdonság, és mindkettő érvényesül — együtt −100 %-ot
     tolnak. Emiatt a gomb a látható villámtól fél gombnyival balra-fel volt
     kattintható: a villám közepére kattintva nem történt semmi. */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  z-index: 3;
}

.bolt-disc {
  fill: rgba(var(--always-dark-2-rgb), 0.85);
  stroke: rgba(255, 255, 255, 0.1);
  transition: fill var(--t) var(--ease);
}

/* A gomb és az SVG NEM testvérek (a gomb a panel végén áll, az SVG előtte),
   ezért a `~` sosem illeszkedett. A `:has()` a szülőn keresztül működik, és
   így a fő vezérlőnek végre van hover-visszajelzése. */
/* KÜLÖN szabály, nem vesszős lista: a `:has()` nem „megbocsátó”, tehát ha a
   böngésző nem ismeri, a TELJES szabályt eldobja — vele az egérrel ráhúzás
   visszajelzését is, ami pedig `:has()` nélkül is működne. */
.circuit-panel:has(.bolt-btn:hover) .bolt-disc {
  fill: rgba(20, 30, 48, 0.92);
}

.circuit-panel:hover .bolt-disc {
  fill: rgba(20, 30, 48, 0.92);
}

/* A villám a lenyomás pillanatában KIUGROTT a bal felső sarokba, majd
   elengedéskor vissza.

   Az ok: az SVG `transform` ATTRIBÚTUM és a CSS `transform` TULAJDONSÁG
   ugyanaz a tulajdonság — a CSS érték nem kiegészíti az attribútumot, hanem
   teljesen felülírja. A jelölésben `transform="translate(200 200)"` áll (a
   panel közepe), a lenyomás viszont csak `scale(0.94)`-et adott: az eltolás
   eltűnt, és a csoport az SVG origójába, a 0 0 pontba került. Ezért kell a
   translate-et a CSS-ben MEGISMÉTELNI, mindkét állapotban — így a `transition`
   is csak a méretre fut, nem egy 200 pontos ugrásra. */
.bolt-core {
  transform: translate(200px, 200px);
  transform-origin: 0 0;
  transition: transform var(--t) var(--ease);
}

.circuit-panel:has(.bolt-btn:active) .bolt-core {
  transform: translate(200px, 200px) scale(0.94);
}

/* Fogyasztók a vezetékek végén */
.fx {
  cursor: pointer;
}

/* Egérkattintásnál a böngésző fókuszkerete fehér téglalapot rajzolt a
   szerelvény köré. A fókusz látszik továbbra is — de a szerelvény saját
   keretének kiemelésével, csak billentyűzetes navigációnál. */
.fx:focus,
.fx:focus-visible {
  outline: none;
}

.fx:focus-visible .fx-plate {
  stroke: var(--brand-amber);
  stroke-width: 2.4;
}

/* Külön fókuszgyűrű a haló-négyzeten: független a bekapcsolt állapot
   színétől, ezért felkapcsolt szerelvényen is egyértelmű. */
.fx:focus-visible .fx-halo {
  stroke: var(--focus-ring);
  stroke-width: 2.4;
  fill: rgba(var(--brand-amber-rgb), 0.16);
}

.fx:hover .fx-plate {
  stroke: rgba(var(--brand-amber-rgb), 0.55);
}

/* A hat szerelvény VALÓDI vezérlő (role="button", aria-pressed, tabindex),
   ezért a WCAG 1.4.11 vonatkozik rá: a körvonalnak és az ikonnak legalább
   3:1 kontraszttal el kell válnia a paneltől. Az eredeti 0,12 / 0,32
   áttetszőség 1,36:1-et és 2,1:1-et adott — a csempe gyakorlatilag eltűnt a
   közel fekete panelen. */
.fx-plate {
  fill: rgba(var(--always-dark-2-rgb), 0.9);
  /* 0,38 az a legkisebb áttetszőség, ami a panel közel fekete alapján
     eléri a 3:1-et (mérve: 3,47:1). 0,3-nál még csak 2,55:1 volt. */
  stroke: rgba(255, 255, 255, 0.38);
  stroke-width: 1.2;
  transition: fill var(--t) var(--ease), stroke var(--t) var(--ease);
}

.fx-icon {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t) var(--ease);
}

.fx-halo {
  fill: rgba(var(--brand-amber-rgb), 0.001);
  transition: fill 0.55s var(--ease);
}

.fx.is-on .fx-plate {
  fill: rgba(var(--brand-amber-rgb), 0.16);
  stroke: rgba(var(--brand-amber-rgb), 0.6);
}

.fx.is-on .fx-icon {
  stroke: var(--brand-amber);
}

.fx.is-on .fx-halo {
  fill: rgba(var(--brand-amber-rgb), 0.12);
}

/* Villanás a teljes felkapcsoláskor */
.circuit-surge {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(var(--brand-amber-300-rgb), 0.55), transparent 62%);
}

.circuit-panel.is-complete .circuit-surge {
  animation: surge 1.1s var(--ease) 1;
}

@keyframes surge {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

.circuit-panel.is-complete {
  border-color: rgba(var(--brand-amber-rgb), 0.45);
  box-shadow: 0 50px 120px -50px rgba(var(--brand-amber-rgb), 0.6);
}

/* Felirat és számláló */
.circuit-hint,
.circuit-status {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  pointer-events: none;
}

.circuit-hint {
  top: 63%;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-amber);
  transition: opacity var(--t) var(--ease);
  animation: hint-pulse 2.6s var(--ease-in-out) infinite;
}

/* A lüktetés alsó pontja 0,5 volt, ott a 12 px-es szöveg 3,2:1-re esett.
   0,8-nál a legrosszabb pillanatban is 6,3:1 marad. */
@keyframes hint-pulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

.circuit-panel.is-touched .circuit-hint {
  opacity: 0;
  animation: none;
}

.circuit-status {
  bottom: 6%;
  font-size: 0.78rem;
  color: var(--always-dark-muted);
  font-variant-numeric: tabular-nums;
}

.circuit-status b {
  color: var(--brand-amber);
}

.cs-done {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--brand-amber);
  animation: cs-name 0.45s var(--ease);
}

/* A böngésző [hidden] szabálya csak `display: none` — egy osztályszabály
   display-értéke felülírja. Ezért a rejtést itt külön ki kell mondani,
   különben a szlogen a számláló mellett is látszik. */
.circuit-status [hidden] {
  display: none;
}

.circuit-status .cs-name {
  display: block;
  margin-top: 0.2rem;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--always-dark-text);
  animation: cs-name 0.4s var(--ease);
}

@keyframes cs-name {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Főkapcsoló: a biztosítéktábla karja — ez kapcsol le mindent egyszerre.
   A villámmal ellentétben ez nem „játék”, hanem a valódi eszköz képe. */
.breaker {
  position: absolute;
  top: 4.5%;
  left: 50%;
  /* Csak `transform` — lásd a `.bolt-btn` figyelmeztetését. A figyelemfelhívó
     animáció ezért ismétli meg benne az eltolást. */
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* A teljes gombra tett opacity a feliratot is elhalványította: 9 px-es
     szedésnél 2,7:1 kontrasztra esett (a minimum 4,5:1). A visszafogottságot
     most csak a dekoratív kapcsolótest viseli, a felirat teljes erővel áll. */
  transition: opacity var(--t) var(--ease);
}

/* Maga a kapcsoló: önálló, alig lekerekített szerelvény — nem doboz */
.breaker-body {
  position: relative;
  z-index: 2;
  width: 16px;
  height: 26px;
  flex: none;
  border: 1px solid var(--always-dark-line);
  border-radius: 4px;
  background: rgba(var(--always-dark-2-rgb), 0.94);
  opacity: 0.65;
  transition: border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}

.breaker:hover .breaker-body,
.breaker:focus-visible .breaker-body,
.circuit-panel.is-armed .breaker-body {
  opacity: 1;
}

.breaker-lever {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--always-dark-muted);
  transition: bottom 0.3s var(--ease), background 0.3s var(--ease);
}

/* A felirat a kapcsolóból nyúlik ki jobbra: bal oldala egyenes (a kapcsoló
   alá fut), jobb oldala teljesen lekerekített. */
.breaker-label {
  margin-left: -8px;
  padding: 0.3rem 0.7rem 0.3rem 1rem;
  border: 1px solid var(--always-dark-line);
  border-left: 0;
  border-radius: 0 var(--r-full) var(--r-full) 0;
  background: rgba(var(--always-dark-2-rgb), 0.82);
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--always-dark-muted);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

/* Ha van felkapcsolt áramkör, a kar felül áll és a főkapcsoló „él” */
.circuit-panel.is-armed .breaker-body,
.circuit-panel.is-armed .breaker-label {
  border-color: rgba(var(--brand-amber-rgb), 0.4);
}

.circuit-panel.is-armed .breaker-lever {
  bottom: 14px;
  background: var(--brand-amber);
}

.circuit-panel.is-armed .breaker-label {
  color: var(--always-dark-text);
}

/* Teli ház esetén a villám már nem tud mit felkapcsolni — ilyenkor a
   főkapcsolóra hívjuk fel a figyelmet, hogy ne tűnjön elakadtnak. */
.breaker.is-hinting {
  animation: breaker-hint 0.55s var(--ease) 2;
}

/* Az eltolást MEG KELL ISMÉTELNI: a kulcskocka `transform` értéke az egészet
   lecseréli, tehát nélküle a gomb az animáció alatt fél szélességnyit ugrana
   oldalra — pont amikor a figyelmet a helyére kellene vinnie. */
@keyframes breaker-hint {
  50% {
    transform: translateX(-50%) scale(1.14);
  }
}

.circuit-panel.is-complete .bolt-btn {
  cursor: default;
}

/* Áramló energia a vezetékeken */
.circuit-trace {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1.4;
}

.circuit-flow {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 26 300;
  filter: drop-shadow(0 0 6px currentColor);
  animation: flow 3.6s linear infinite;
}

.circuit-flow.f1,
.circuit-flow.f4,
.circuit-flow.f6 {
  color: var(--brand-amber);
  stroke: var(--brand-amber);
}

.circuit-flow.f2,
.circuit-flow.f3,
.circuit-flow.f5 {
  color: var(--brand-blue);
  stroke: var(--brand-blue);
}

.circuit-flow.f2 {
  animation-duration: 4.8s;
  animation-delay: -1.4s;
}
.circuit-flow.f3 {
  animation-duration: 5.6s;
  animation-delay: -2.6s;
}
.circuit-flow.f4 {
  animation-duration: 4.2s;
  animation-delay: -0.8s;
}
.circuit-flow.f5 {
  animation-duration: 5.2s;
  animation-delay: -3.2s;
}
.circuit-flow.f6 {
  animation-duration: 4.5s;
  animation-delay: -1.9s;
}

/* Amelyik áramkör már fel van kapcsolva, azon az áram tartósan gyorsabban és
   erősebben fut — a többin marad a lassú, „készenléti” áramlás. A szelektor
   specifikussága ugyanaz (0,2,0), mint a fenti .f1–.f6 szabályoké, ezért
   kötelezően UTÁNUK áll: döntetlennél a később jövő nyer. */
.circuit-flow.is-on {
  animation-duration: 1.1s;
  stroke-dasharray: 40 120;
  stroke-width: 2.8;
}

@keyframes flow {
  to {
    stroke-dashoffset: -326;
  }
}

/* Lebegő üvegkártyák a hero vizuál körül */
.float-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--always-dark-line);
  border-radius: var(--r);
  background: rgba(var(--always-dark-2-rgb), 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-2);
  font-size: 0.84rem;
  color: var(--always-dark-text);
}

.float-chip strong {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  line-height: 1.2;
}

.float-chip small {
  color: var(--always-dark-muted);
  font-size: 0.76rem;
}

.float-chip .chip-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-sm);
  background: rgba(var(--brand-amber-rgb), 0.14);
  color: var(--brand-amber);
}

.float-chip .chip-ico svg {
  width: 20px;
  height: 20px;
}

.float-chip.is-blue .chip-ico {
  background: rgba(var(--brand-blue-rgb), 0.14);
  color: var(--brand-blue);
}

/* Oldalfejléc belső oldalakhoz */
.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) clamp(3rem, 7vw, 5rem);
  background: var(--always-dark);
  color: var(--always-dark-text);
  overflow: hidden;
  isolation: isolate;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   ALOLDALAK: nagy jelkép a fejlécben

   Minden aloldal fejléce a saját jelképét kapja: ház villámmal, árcédula,
   képek, ember, telefon, pajzs, dokumentum. A látogató egyetlen pillantásból
   tudja, hova érkezett, még mielőtt a címet elolvasná — a jelkép halvány,
   tehát karaktert ad, de nem versenyez a szöveggel.

   Csak 900 px felett: keskeny kijelzőn a jelkép a szöveg alá kerülne, és
   ott már zavaró folt lenne. A `overflow: hidden` a szekción vágja le a
   kilógó részét, ettől kerül szoros kapcsolatba a doboz szélével.
   -------------------------------------------------------------------------- */
.hero-mark {
  display: none;
}

@media (min-width: 900px) {
  .page-hero .hero-mark {
    position: absolute;
    top: 50%;
    right: clamp(1rem, 5vw, 5.5rem);
    z-index: 1;
    display: block;
    width: clamp(13rem, 24vw, 21rem);
    aspect-ratio: 1;
    /* Csak `transform` — lásd a `.bolt-btn` figyelmeztetését. Kettősen a jelkép
       −92 %-ot kapott, kicsúszott a fejlécből, és a teteje levágódott. */
    transform: translateY(-46%);
    pointer-events: none;
  }

  /* A jelkép mögötti fénykör adja a mélységet: enélkül a vonalrajz egy
     lapos matricának hatna a sötét háttéren. */
  .page-hero .hero-mark::before {
    content: '';
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--brand-amber-rgb), 0.16), transparent 72%);
    filter: blur(18px);
  }

  .page-hero .hero-mark svg {
    position: relative;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.09);
  }
}

.page-hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  margin-bottom: 1rem;
}

.page-hero p {
  max-width: 62ch;
  color: var(--always-dark-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

/* Morzsa */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  font-size: 0.82rem;
  color: var(--always-dark-muted);
}

.crumbs a {
  color: var(--always-dark-muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--brand-amber);
}

.crumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  opacity: 0.4;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================================================
   10. KÁRTYÁK & KOMPONENSEK
   ========================================================================== */

.card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
    background-color var(--t) var(--ease);
}

/* Egérkövető fényfolt a kártyán (JS állítja a --mx/--my-t) */
.card.is-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--brand-amber-rgb), 0.16), transparent 62%);
  transition: opacity var(--t) var(--ease);
}

.card.is-spot:hover::before {
  opacity: 1;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}

.card h3 {
  margin-bottom: 0.6rem;
}

.card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.section.is-dark .card {
  border-color: var(--always-dark-line);
  background: var(--surface);
}

.section.is-dark .card p {
  color: var(--always-dark-muted);
}

/* Szolgáltatás-kártya */
.svc {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.svc-ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, rgba(var(--brand-amber-rgb), 0.18), rgba(var(--brand-blue-rgb), 0.14));
  border: 1px solid var(--line);
  color: var(--brand-amber);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.svc-ico svg {
  width: 26px;
  height: 26px;
}

.card:hover .svc-ico {
  transform: translateY(-3px) rotate(-6deg);
  color: var(--brand-blue);
  box-shadow: var(--glow-blue);
}

.svc-list {
  display: grid;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.svc-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.svc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-amber);
  transform: rotate(45deg);
}

.card-index {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-family: 'Sora', sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  opacity: 0.055;
  pointer-events: none;
}

/* Kiemelt kártya (gradiens keret) */
/* A keret a háttérből jön (padding-box + border-box gradiens), ezért a keret
   maga átlátszó. A `border` rövidítés MÁSODIK helyen áll: fordítva a
   border-color-t felülírná — ahogy korábban tette. */
.card.is-featured {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
    var(--brand-gradient) border-box;
}

/* Ikonos jellemző-sor */
.feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.feature-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand-blue);
}

.feature-ico svg {
  width: 22px;
  height: 22px;
}

.feature h3 {
  margin-bottom: 0.25rem;
}

.feature p {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Folyamat-lépések */
.steps {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 2.6rem;
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brand-amber);
  letter-spacing: 0.06em;
}

.step::after {
  content: '';
  position: absolute;
  top: 1.55rem;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-amber), var(--line) 40%, transparent);
}

.step h3 {
  margin-bottom: 0.4rem;
}

.step p {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Nagy CTA sáv */
.cta-band {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  border-radius: var(--r-xl);
  background: var(--always-dark-2);
  color: var(--always-dark-text);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--always-dark-line);
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(600px 320px at 12% 12%, rgba(var(--brand-amber-rgb), 0.28), transparent 62%),
    radial-gradient(680px 360px at 88% 88%, rgba(var(--brand-blue-rgb), 0.3), transparent 62%);
}

.cta-band h2 {
  margin-bottom: 0.9rem;
}

.cta-band p {
  max-width: 56ch;
  margin-bottom: 2rem;
  color: var(--always-dark-muted);
}

/* Portré a Rólunk oldalon */
.portrait {
  position: relative;
  margin: 0;
  isolation: isolate;
}

/* Kivágott (háttér nélküli) portré. A fekete munkaruha beleolvadna a sötét
   háttérbe, ezért a figura mögé márkaszínű ragyogás kerül, és egy lágy
   vetett árnyék adja a térbeliséget — keret és lekerekítés nélkül. */
.portrait img {
  width: 100%;
  filter: drop-shadow(0 26px 55px rgba(0, 0, 0, 0.55));
}

/* --------------------------------------------------------------------------
   A Rólunk oldal portréja NAGY KÉPERNYŐN

   Az egész alakos fotó aránya 0,34 — háromszor olyan magas, mint amilyen
   széles. Ha a szélességből következne a magassága, egymaga hosszabb lenne,
   mint a mellette futó szöveg, és a szakasz kétszeresére nyúlna.

   Ezért a kép kilép a magasságszámításból (`position: absolute`), és a sor
   magasságát egyedül a szövegblokk szabja meg — a fotó pedig `contain`-nel
   annyi helyet foglal, amennyi van, a talpánál igazítva.
   -------------------------------------------------------------------------- */
@media (min-width: 940px) {
  .is-portrait .split {
    align-items: stretch;
  }

  /* A profilkép BALRA kerül, a szöveg jobbra. A jelölésben a szöveg áll
     elöl — telefonon az a helyes sorrend (előbb a mondanivaló, aztán az
     arc), és a felolvasók is ezt követik. Nagy képernyőn csak a
     MEGJELENÍTÉS cserél helyet. */
  .is-portrait .split > :last-child {
    order: -1;
  }

  .is-portrait .portrait {
    height: 100%;
    min-height: 26rem;
  }

  .is-portrait .portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
  }
}

.portrait-glow {
  position: absolute;
  inset: 6% -8% 8% -8%;
  pointer-events: none;
  border-radius: 50% 50% 42% 42% / 55% 55% 45% 45%;
  background: radial-gradient(closest-side at 42% 30%, rgba(var(--brand-amber-rgb), 0.26), transparent 72%),
    radial-gradient(closest-side at 66% 74%, rgba(var(--brand-blue-rgb), 0.24), transparent 72%);
  filter: blur(34px);
  animation: portrait-breathe 9s var(--ease-in-out) infinite alternate;
}

@keyframes portrait-breathe {
  0% {
    transform: scale(0.96) translateY(6px);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.05) translateY(-6px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-glow {
    animation: none;
  }
}

/* Rétegsorrend: ragyogás → névtábla → a kivágott alak. Így a figura válla
   eltakarja a névtábla bal szélét, mintha az mögötte állna. */
.portrait-glow {
  z-index: 0;
}

.portrait-cap {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  left: 1.2rem;
  z-index: 1;
}

.portrait img {
  position: relative;
  z-index: 2;
}

@media (min-width: 940px) {
  .portrait {
    max-width: 30rem;
    margin-inline: auto;
  }

  .portrait-cap {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
  }
}

/* Nagy képernyőn a névtábla a törzs magasságában, BALRA lóg ki a képből — a
   jobb széle a figura takarásába csúszik, mintha az előtte állna.

   A tábla a kép BAL oldalára került: a portré a Rólunk oldalon a bal hasábban
   ül, ott a jobbra lógó tábla a szöveg felé mutatott volna. A `right: 62%`
   miatt a takart zóna a kép szélességének kb. 8%-a, méretaránytól
   függetlenül; a 4,4 rem-es jobb belső térköz garantálja, hogy csak ez a
   zóna kerüljön takarásba, a szöveg soha. 1200 px alatt a tábla visszaül a
   kép aljára, hogy ne lógjon ki. */
@media (min-width: 1200px) {
  .portrait-cap {
    top: 26%;
    right: 62%;
    left: auto;
    bottom: auto;
    width: max-content;
    max-width: 15.5rem;
    padding: 0.85rem 4.4rem 0.85rem 1.05rem;
    text-align: right;
  }

  .portrait-cap .chip-ico {
    display: none;
  }

  /* A márkacsík a takart zónán KÍVÜL, a szöveg és a figura között villan ki. */
  .portrait-cap::after {
    content: '';
    position: absolute;
    inset: 0.8rem 3.4rem 0.8rem auto;
    width: 3px;
    border-radius: 2px;
    background: var(--brand-gradient-hard);
  }
}

/* --------------------------------------------------------------------------
   Fő területek — kiemelt navigációs kártyák a szolgáltatások oldal tetején
   Ezek a lap legfontosabb belépési pontjai, ezért kaptak nagy ikont, sorszámot
   és fényjátékot: egy sodródó ragyogást a kártya mögött, valamint egy felső
   márkacsíkot, ami hoverre húzódik végig.
   -------------------------------------------------------------------------- */

.quick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: clamp(1.7rem, 3vw, 2.2rem);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
}

/* Felső márkacsík — hoverre végigfut */
.quick::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand-gradient-hard);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}

.quick:hover::after,
.quick:focus-visible::after {
  transform: scaleX(1);
}

/* Lassan lélegző ragyogás az ikon mögött */
.quick-glow {
  position: absolute;
  top: -30%;
  left: -20%;
  z-index: -1;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--brand-amber-rgb), 0.22), transparent 68%);
  filter: blur(26px);
  opacity: 0.55;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  animation: quick-breathe 7s var(--ease-in-out) infinite alternate;
}

.quick:nth-child(even) .quick-glow {
  background: radial-gradient(circle, rgba(var(--brand-blue-rgb), 0.24), transparent 68%);
  animation-delay: -3.5s;
}

/* A `transform` itt HOLT lenne: a quick-breathe animáció ugyanezt a
   tulajdonságot írja minden képkockán, és az animáció nyer. Az opacity viszont
   más csatorna — az érvényesül, és a hover visszajelzéséhez elég. */
.quick:hover .quick-glow {
  opacity: 1;
}

@keyframes quick-breathe {
  0% {
    transform: translate3d(-6px, -4px, 0) scale(0.95);
  }
  100% {
    transform: translate3d(8px, 6px, 0) scale(1.1);
  }
}

.quick-num {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
}

.quick:hover .quick-num {
  opacity: 0.16;
  color: var(--brand-amber);
}

.quick-ico {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(140deg, rgba(var(--brand-amber-rgb), 0.2), rgba(var(--brand-blue-rgb), 0.14));
  color: var(--brand-amber);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.quick-ico svg {
  width: 28px;
  height: 28px;
}

.quick:hover .quick-ico {
  transform: translateY(-4px) rotate(-7deg);
  border-color: rgba(var(--brand-amber-rgb), 0.45);
  box-shadow: var(--glow-amber);
}

.quick h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.quick p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.quick-go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.35rem;
  color: var(--brand-blue);
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
}

.quick-go svg {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--t) var(--ease);
}

.quick:hover .quick-go svg {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .quick-glow {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Kapcsolati sáv — négy azonos súlyú, rövid elem

   Korábban négy teljes kártya állt itt. Mivel a rács egyenlő magasságúra
   nyújtja a cellákat, a leghosszabb tartalom (a két közösségi gomb) az összes
   többi kártyát megnyújtotta, és három doboz félig üresen állt. Itt ezért nem
   kártyák vannak, hanem rövid, egysoros-kétsoros tételek — egyik sem tud
   nagyobbra nőni a többinél.
   -------------------------------------------------------------------------- */

.contact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  /* Az elválasztók a RÁCSHÉZAGOK, nem szegélyek: a hézagban a doboz saját
     háttere látszik. Így a tördelt sorok közé is kerül vonal, a sor ELSŐ
     eleme elé viszont nem. Szegéllyel ez nem megoldható: a `li + li` nem tudja,
     hol tört a sor — 720 és 1000 px között a negyedik elem árva bal
     hajszálvonalat kapott a doboz kerete mellé, a két sor közé pedig semmi
     nem került. */
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  overflow: hidden;
}

.contact-strip > li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
}

.cs-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, rgba(var(--brand-amber-rgb), 0.18), rgba(var(--brand-blue-rgb), 0.12));
  color: var(--brand-amber);
}

.cs-ico svg {
  width: 20px;
  height: 20px;
}

.cs-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.cs-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.cs-value {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--brand-amber);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cs-value:hover {
  color: var(--brand-amber-300);
}

.cs-value.is-plain {
  color: var(--text);
}

.cs-note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

.cs-socials {
  display: flex;
  gap: 0.5rem;
  margin-block: 0.3rem 0;
}

.cs-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  transition: all var(--t) var(--ease);
}

.cs-socials svg {
  width: 22px;
  height: 22px;
}

.cs-socials a:hover {
  color: var(--on-brand);
  background: var(--brand-amber);
  border-color: var(--brand-amber);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Sürgősségi sáv — teljes szélességű figyelmeztetés az űrlap fölött

   Korábban lebegő kártya volt az űrlap mellett. Ott két baj volt vele:
   az űrlapot fél szélességre szorította, és a legfontosabb üzenet (SOS esetén
   telefonálj, ne írj) a periférián kötött ki. Itt közvetlenül az űrlap fölött
   áll, teljes szélességben — pont ott, ahol a látogató épp írni kezdene.
   -------------------------------------------------------------------------- */

.sos-band {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 1.25rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 1.9rem);
  border: 1px solid rgba(var(--danger-rgb), 0.32);
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, rgba(var(--danger-rgb), 0.12), rgba(var(--danger-rgb), 0.04) 55%, transparent);
  overflow: hidden;
}

/* Bal oldali jelzősáv */
.sos-band::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--danger);
}

.sos-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-sm);
  background: rgba(var(--danger-rgb), 0.16);
  color: var(--danger);
}

.sos-ico svg {
  width: 23px;
  height: 23px;
}

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

.sos-text strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}

.sos-text p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.sos-btn {
  flex: none;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.badge.is-amber {
  border-color: rgba(var(--brand-amber-rgb), 0.4);
  background: rgba(var(--brand-amber-rgb), 0.1);
  color: var(--brand-amber);
}

/* ==========================================================================
   11. MARQUEE / FUTÓSZALAG
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 2.6rem;
  /* Tartalék időzítés arra az esetre, ha a JS nem fut le. A tényleges értéket
     a scripts.js számolja állandó px/mp sebességre. */
  animation: marquee 110s linear infinite;
}

/* Az egér ráhúzására megáll a szalag, hogy el lehessen olvasni.
   Telefonon ez nem tud beragadni: ott nincs is CSS-animáció (a mozgást a JS
   vezeti a görgetési pozíción át). */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track li {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  font-family: 'Sora', sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-2);
  white-space: nowrap;
}

.marquee-track li::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand-amber);
  transform: rotate(45deg);
  flex: none;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   12. SZÁMLÁLÓK & KÉPESSÉGSÁVOK
   ========================================================================== */

.stats {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.stat {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}

.stat-num {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.bars {
  display: grid;
  gap: 1.5rem;
}

.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.55rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.bar-head b {
  font-family: 'Sora', sans-serif;
  color: var(--brand-amber);
  font-variant-numeric: tabular-nums;
}

.bar-track {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  background: var(--brand-gradient-hard);
  box-shadow: 0 0 18px rgba(var(--brand-amber-rgb), 0.5);
  transition: width 1.5s var(--ease);
}

/* ==========================================================================
   13. VÉLEMÉNYEK
   ========================================================================== */

.quote {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
}

.quote-mark {
  width: 34px;
  height: 34px;
  color: var(--brand-amber);
  opacity: 0.55;
}

.quote blockquote {
  flex: 1;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text-2);
}

.quote-foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.quote-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-gradient-hard);
  color: var(--on-brand);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
}

.quote-foot cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
}

.quote-foot small {
  color: var(--muted);
  font-size: 0.78rem;
}

/* A forrásprofilok linkje a szalag alatt.

   Nem díszítés: az oldal azt állítja, hogy a visszajelzések valódiak és
   ellenőrzöttek. Link nélkül ez ellenőrizhetetlen állítás lenne — pontosan
   azt a bizalmat gyengítené, amit építeni akar. */
.quote-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem 1rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.quote-sources a {
  color: var(--text);
  text-underline-offset: 3px;
}

.stars {
  display: flex;
  gap: 2px;
  color: var(--brand-amber);
}

.stars svg {
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------------------------------
   Vélemény-szalag — a kártyák körkörösen balra vándorolnak

   Rácsban a négy vélemény négy hasábot foglalt, és a látogató egyszerre látta
   mind a négyet — ami elsőre falnyi szövegnek hat. Szalagban egyszerre kettő-
   három látszik, a többi magától érkezik. Hoverre megáll, hogy el lehessen
   olvasni azt, amelyik megfogta.
   -------------------------------------------------------------------------- */

/* A kártyák hoverre megemelkednek — a szalag `overflow: hidden`-je levágná a
   tetejüket, ezért függőleges belső térközt kap, amit negatív külső margóval
   ellensúlyozunk, hogy az elrendezés ne mozduljon. */
.quote-rail {
  position: relative;
  padding-block: 22px;
  margin-block: -22px;
  overflow: hidden;
  /* A szalag a `.container`-en KÍVÜL áll, így magától a teljes tartalmi
     szélességet kapja. Szándékosan nem `100vw`-vel oldjuk meg: a `vw` a
     görgetősáv helyét is beleszámolja, amitől ~6 px vízszintes túllógás
     keletkezett. */
  /* Hosszabb, lágyabb elhalványodás a széleken — a korábbi 5%-os átmenet
     túl hirtelen sötétedett be. */
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.quote-rail-track {
  display: flex;
  width: max-content;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  animation: marquee 85s linear infinite;
}

/* A szüneteltető vezérlő nem jelenik meg a képernyőn: asztalin az egér
   ráhúzása állítja meg a szalagot, telefonon pedig szabadon görgethető, tehát
   nincs mit megállítani. A gomb attól még megvan a képernyőolvasónak és a
   billentyűzetnek — automatikusan mozgó tartalomhoz kell egy megnevezett
   vezérlő, csak épp nem kell látszania. */
.rail-controls {
  height: 0;
}

.rail-pause {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Billentyűzetes fókuszra előbukkan — különben láthatatlan fókuszcél lenne.
   Egérrel és érintéssel sosem jelenik meg. */
/* Fókuszban a szalag él-maszkja kikapcsol: különben a gomb keretét a
   halványodó szél félig elnyelné. */
.marquee:focus-within {
  mask-image: none;
  -webkit-mask-image: none;
}

.rail-pause:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.4rem 0.85rem;
  overflow: visible;
  clip-path: none;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--brand-amber);
  border-radius: var(--r-full);
  background: var(--surface-solid);
  color: var(--brand-amber);
  font-size: 0.78rem;
  font-weight: 600;
  outline: 3px solid var(--brand-amber);
  outline-offset: 2px;
}

.rail-pause svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.rail-pause .ico-play,
.rail-pause[aria-pressed='true'] .ico-pause {
  display: none;
}

.rail-pause[aria-pressed='true'] .ico-play {
  display: block;
}


.marquee.is-paused .marquee-track,
.quote-rail.is-paused .quote-rail-track {
  animation-play-state: paused;
}

.quote-rail:focus-within .quote-rail-track {
  animation-play-state: paused;
}

.quote-rail:hover .quote-rail-track {
  animation-play-state: paused;
}

/* ÉRINTŐN a `:hover` a koppintás után BERAGAD (iPadOS Safari, Android Chrome):
   az első koppintás megállítja a szalagot (helyes), a második leveszi az
   `is-paused`-ot, a beragadt `:hover` viszont tovább szünetelteti — a szalag
   állva marad, miközben a szünet gombja már „fut” állapotot jelent. A JS a
   koppintásos vezérlés első használatakor kirakja az `is-koppintva`-t; onnantól
   a `:hover` ezen a szalagon nem dönt, csak a gomb és a koppintás.
   A `@media (hover: hover)` NEM elég: érintőképernyős laptopon egér mellett
   `hover: hover` igaz, a beragadás mégis megtörténik. */
.marquee.is-koppintva:not(.is-paused) .marquee-track,
.quote-rail.is-koppintva:not(.is-paused) .quote-rail-track {
  animation-play-state: running;
}

.quote-rail .quote {
  flex: none;
  width: clamp(290px, 30vw, 390px);
  /* A `.quote` alapból `height: 100%` — flex-elemként ez MEGAKADÁLYOZZA a
     nyújtást, mert a stretch csak `auto` keresztmérettel működik. Ezért itt
     visszaállítjuk `auto`-ra: így minden kártya a legmagasabbhoz igazodik. */
  height: auto;
}

/* A szalag KÁRTYÁKKAL (Rólunk oldal, „Négy szabály”): ugyanaz a szerkezet és
   ugyanaz a JS, mint a véleményeknél — csak a kártyák mérete más. */
.quote-rail.is-cards .card {
  flex: none;
  width: clamp(300px, 32vw, 420px);
  height: auto;
}

/* Csökkentett mozgás esetén nem fut a szalag — helyette kézzel görgethető */
@media (prefers-reduced-motion: reduce) {
  .quote-rail-track {
    animation: none;
  }

  .quote-rail {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* A szalag itt kézzel görgethető listává alakul — a KLÓNOKAT viszont a JS
     akkor is elkészíti, mert azok a végtelen körfutáshoz kellenek. Görgetve a
     látogató másodszor is végigolvasná ugyanazt a négy véleményt. A mobil és a
     nyomtatási blokk már rejti őket; nagy képernyőn hiányzott. */
  .quote-rail-track > [aria-hidden='true'],
  .marquee-track > [aria-hidden='true'] {
    display: none;
  }
}

/* ==========================================================================
   14. AKKORDEON (GYIK)
   ========================================================================== */

.accordion {
  display: grid;
  gap: 0.7rem;
}

.acc-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.acc-item:hover {
  border-color: var(--line-strong);
}

.acc-item.is-open {
  border-color: rgba(var(--brand-amber-rgb), 0.4);
  background: var(--surface-2);
}

.acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.15rem 1.35rem;
  text-align: left;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}

.acc-icon {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.acc-icon::before,
.acc-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  /* Csak `transform` — lásd a `.bolt-btn` figyelmeztetését. Kettősen a két csík
     nem a közepén metszette egymást, és a „+” ikon „⌐” alakúra torzult. */
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}

.acc-icon::before {
  width: 11px;
  height: 2px;
}
.acc-icon::after {
  width: 2px;
  height: 11px;
}

.acc-item.is-open .acc-icon {
  background: var(--brand-amber);
  border-color: var(--brand-amber);
  color: var(--on-brand);
  transform: rotate(180deg);
}

.acc-item.is-open .acc-icon::after {
  opacity: 0;
}

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  /* A panel nulla magasságra csukódik, de a benne lévő telefonszám-link
     enélkül a tabsorrendben maradt: a billentyűzetes látogató fókusza egy
     0 px magas, aria-hidden elemre ugrott, ahol a képernyőolvasó semmit nem
     mond be. A visibility: hidden kiveszi a tabsorrendből, a késleltetett
     átmenet pedig megőrzi a nyíló-csukó animációt. */
  visibility: hidden;
  transition: grid-template-rows var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}

.acc-item.is-open .acc-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--t-slow) var(--ease), visibility 0s;
}

.acc-panel > div {
  overflow: hidden;
}

.acc-panel p {
  padding: 0 1.35rem 1.35rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ==========================================================================
   15. GALÉRIA & LIGHTBOX
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.2rem;
}

.filter-btn {
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--t) var(--ease);
}

.filter-btn:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

/* A kiválasztott szűrő ugyanabból a borostyán családból színez, mint az
   elsődleges gomb: kattintásra egyetlen vezérlő se váltson kékbe. A
   márkagradiens (borostyán → kék) a DEKORATÍV elemeké marad. */
.filter-btn[aria-pressed='true'] {
  background: var(--btn-primary-bg);
  border-color: transparent;
  color: var(--on-brand);
  box-shadow: 0 8px 26px -10px rgba(var(--brand-amber-rgb), 0.7);
}

.gallery {
  display: grid;
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-3);
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

/* Kattinthatónak CSAK az látsszon, amit a galéria tényleg megnyit: a
   nagyítást a JS a [data-full] csempékre köti. Enélkül minden csempe
   kurzort és kiemelést kapott, de a kattintásra nem történt semmi. */
.tile[data-full] {
  cursor: pointer;
}

.tile.is-hidden {
  display: none;
}
/* Az adagolásból még ki nem osztott csempe. Külön osztály a szűrő
   `is-hidden`-jétől: a kettő két külön tengely, és egyetlen közös osztállyal
   a szűrőváltás felülírná az adagolást. */
.tile.is-tulcsordulo {
  display: none;
}

.gallery-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.gallery-more[hidden] {
  display: none;
}

.gallery-more-count {
  margin-left: 0.15rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}


.tile[data-full]:hover {
  transform: translateY(-5px);
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-2);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter var(--t) var(--ease);
}

.tile[data-full]:hover img {
  transform: scale(1.07);
}

/* Kép nélküli helyőrző csempe — amíg nincs valódi fotó */
.tile-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
  background: linear-gradient(150deg, rgba(var(--brand-blue-rgb), 0.12), rgba(var(--brand-amber-rgb), 0.09)), var(--bg-3);
  color: var(--muted);
}

.tile-ph svg {
  width: 40px;
  height: 40px;
  color: var(--brand-blue);
  opacity: 0.65;
}

.tile-ph span {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* A felirat a referencia leírása — nem díszítés. Eddig csak egérrel volt
   előhívható, így érintőképernyőn és billentyűzettel olvashatatlan maradt.
   Alapból látszik; a hover/fókusz csak megerősíti. */
.tile-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem 1.1rem 1.1rem;
  background: linear-gradient(to top, rgba(var(--bg-rgb), 0.94), transparent);
  color: #fff;
  transform: none;
  opacity: 0.92;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.tile:hover .tile-meta,
.tile:focus-visible .tile-meta {
  opacity: 1;
  transform: none;
}

/* A csempe billentyűzetes fókusznál is jelezze magát — a felirat előbukkanása
   önmagában kevés, ha a fókusz éppen nincs a képernyőn.

   Ez a szabály korábban a HERO ÁRAMKÖR szekciójában állt, ~1800 sorral a
   galéria előtt, és a fölötte lévő komment egy egészen másik szabályt írt le
   (a `.tile-meta` mindig-látszó javítását, ami fent áll). */
.tile:focus-visible {
  outline: 2px solid var(--brand-amber);
  outline-offset: 3px;
}

.tile-meta strong {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
}

.tile-meta span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-nagyito);
  display: grid;
  /* A SOR ÉS AZ OSZLOP HATÁROZOTT MÉRETŰ. Enélkül a rács a tartalomhoz
     igazodna, a `<figure>` `max-height: 100%`-a pedig feloldhatatlan
     százalék lenne, tehát `none`-ra esne — a nagy kép natív méretében lógna
     ki a képernyőről. A `minmax(0, …)` az alsó határt is nullázza, különben
     a rácselem legkisebb mérete a tartalom lenne. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  /* HELY A SZÁMLÁLÓNAK (telefonon a nyilaknak is). Ezek a viewport aljához
     vannak rögzítve, a kép viszont a kitöltésen BELÜL középre kerül — extra
     alsó kitöltés nélkül alacsony ablakon a felirat rácsúszna a számlálóra. */
  padding-bottom: calc(clamp(1rem, 4vw, 3rem) + 2.9rem + env(safe-area-inset-bottom, 0px));
  background: rgba(3, 5, 9, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}

.lightbox.is-open {
  visibility: visible;
  opacity: 1;
}

/* A NYILAK ÉS A SZÁMLÁLÓ KIVÉTELE A RÁCSBÓL.
   A `.lightbox` `place-items: center` rácsot használ, tehát MINDEN
   folyamatban lévő gyereke saját sort kapna — a nyilak a kép alá-fölé
   kerülnének, és a kép sem középen állna. A képen kívül ezért mindent
   abszolút pozicionálunk; a rácsban egyedül a `<figure>` marad. */
/* A KÉP A MARADÉK HELYHEZ IGAZODIK, nem a viewport egy százalékához.
   A `82vh`-féle rögzített arány két helyen is elhasal: alacsony asztali
   ablakon (1280×650) a felirat rácsúszik a számlálóra, keskeny telefonon
   pedig az álló fotót úgyis a SZÉLESSÉG korlátozza, tehát a magassági
   határnak semmi hatása. Itt ehelyett a `<figure>` legfeljebb akkora, mint a
   rendelkezésre álló doboz (amiből a kitöltés már levonta a számláló és a
   nyilak helyét), a kép pedig azt kapja, ami a felirat után marad. */
.lightbox-fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  /* A kép a SAJÁT sorában is középen áll. Enélkül a rács alapértelmezése a
     sor tetejére húzná: álló fotónál ez nem látszik (kitölti a sort), fekvő
     fotónál viszont a kép fölött nem marad hely, alatta meg egy nagy üres
     sáv nyílik a feliratig — ami elrontásnak látszik, nem szándéknak. */
  place-items: center;
  gap: 0.9rem;
  width: 100%;
  height: 100%;
  margin: 0;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  border-radius: var(--r);
  box-shadow: var(--shadow-3);
  object-fit: contain;
}

/* Az áttűnést a JS újraindított animációval oldja meg (osztály le, reflow,
   osztály fel) — így a gyorsítótárból érkező kép is átúszik, nem villan. */
@keyframes nagyitoBe {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.lightbox img.is-be {
  animation: nagyitoBe 0.24s var(--ease) both;
}

.lightbox-cap {
  max-width: 62ch;
  text-align: center;
  color: #cfe0f5;
  font-size: 0.9rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.lightbox-close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  color: #fff;
}

/* --- Lapozás ------------------------------------------------------------ */

.lightbox-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  /* 52px: kényelmes egérrel is, és bőven a 44px-es érintési minimum fölött. */
  width: 52px;
  height: 52px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-full);
  background: rgba(12, 16, 24, 0.62);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

/* Egyetlen képnél a JS `hidden`-re állítja a gombokat. A `display: grid`
   fentebb ERŐSEBB, mint a `hidden` böngészői alapstílusa, ezért a rejtést
   külön ki kell mondani — enélkül a nyilak ott maradnának, és üresbe
   lapoznának. */
.lightbox-nav[hidden] {
  display: none;
}

.lightbox-nav svg {
  width: 24px;
  height: 24px;
}

.lightbox-nav.is-prev {
  left: clamp(0.5rem, 2.5vw, 2rem);
}

.lightbox-nav.is-next {
  right: clamp(0.5rem, 2.5vw, 2rem);
}

/* Széles képernyőn a nyilak OLDALT állnak, tehát a képnek ki kell térnie
   előlük — enélkül a gomb rákerül a fotóra, és pont azt takarja, amit nézni
   akarunk. A tartalék: a nyíl széle + az 52px-es gomb + egy kis levegő. */
@media (min-width: 900px) {
  .lightbox {
    padding-inline: calc(clamp(1rem, 4vw, 3rem) + 52px + 0.75rem);
  }
}

@media (hover: hover) {
  .lightbox-nav:hover {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(20, 26, 38, 0.82);
  }
  .lightbox-nav.is-prev:hover {
    transform: translateY(-50%) translateX(-2px);
  }
  .lightbox-nav.is-next:hover {
    transform: translateY(-50%) translateX(2px);
  }
}

.lightbox-count {
  position: absolute;
  bottom: calc(clamp(0.75rem, 2.5vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-full);
  background: rgba(12, 16, 24, 0.62);
  color: #cfe0f5;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* TELEFON ÉS ÁLLÓ TABLET: a nyilak ALULRA kerülnek, a számláló két oldalára.
   Oldalt maradva a fotó két szélét takarnák — pont azt, amit a látogató
   nézni akar —, alul viszont hüvelykujjal elérhetők. A kép magasságát ezért
   csökkenteni kell, hogy a sáv ne csússzon rá. A töréspont azért 900px,
   mert álló tableten (768×1024) az oldalt álló nyíl és a bezáró gomb is
   rácsúszna a magas fotóra. */
@media (max-width: 899.98px) {
  /* A nyilak is alul vannak, tehát nekik is kell hely — 5rem a 48px-es
     gomboknak és a számlálónak együtt. */
  .lightbox {
    /* Fent a bezáró gombnak kell hely: kis telefonon (360×640) a kép
       különben pont alá csúszna. */
    padding-top: 4.75rem;
    padding-bottom: calc(1rem + 5rem + env(safe-area-inset-bottom, 0px));
  }

  .lightbox-nav {
    top: auto;
    bottom: calc(clamp(0.5rem, 2vw, 1rem) + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: 48px;
    height: 48px;
  }

  .lightbox-nav.is-prev {
    right: auto;
    left: 50%;
    margin-left: -7rem;
  }

  .lightbox-nav.is-next {
    left: auto;
    right: 50%;
    margin-right: -7rem;
  }

  .lightbox-count {
    bottom: calc(clamp(1.2rem, 3.5vw, 1.7rem) + env(safe-area-inset-bottom, 0px));
  }

  .lightbox-cap {
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox img.is-be {
    animation: none;
  }
  .lightbox-nav.is-prev:hover,
  .lightbox-nav.is-next:hover {
    transform: translateY(-50%);
  }
}

/* Nagy kontrasztú módban a féláttetsző háttér Canvas-ra vált, és a gomb
   beleolvadna a képbe: a keretet rendszerszínnel mondjuk ki. */
@media (forced-colors: active) {
  .lightbox-nav,
  .lightbox-count {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   15/b. TIKTOK-VIDEÓSZALAG
   ==========================================================================

   A szalag MAGA a véleményszalag: `.quote-rail` + `.quote-rail-track`, tehát
   a körbefutás, a megállás egérre és fókuszra, a klónozás és a
   mozgáscsökkentés kódja közös. Itt csak a KÁRTYA más — álló, 9:16-os
   borítókép, rajta lejátszásjelzés és felirat.

   A kártya alapból link: JS nélkül a TikTokon nyílik meg. A JS teszi rá,
   hogy koppintásra HELYBEN, magában a kártyában játsszon — nincs külön
   nagyító-ablak. */

.quote-rail.is-tiktok .tiktok-card {
  flex: none;
  /* Álló videó: a kártya magasabb, mint amilyen széles. A felső határ 240px,
     mert 9:16-nál ez már 427px magas szalag — efölött a szakasz elnyeli a
     képernyő magasságát, és a látogatónak görgetnie kell, hogy lássa a
     kártya alját. */
  width: clamp(180px, 20vw, 240px);
  height: auto;
  padding: 0;
  /* AZ ARÁNY A KÁRTYÁN VAN, nem csak a linken. Lejátszás közben a link
     eltűnik (`display: none`), és ha a magasságot ő adná, a kártya
     összeesne — a szalag pedig ugrana egyet minden indításnál. */
  aspect-ratio: 9 / 16;
}

/* A kártya TELJES felülete egyetlen kattintható terület. Nem `<button>`,
   hanem `<a href>`: így JS nélkül is működik, és a látogató látja előre,
   hova visz (illetve új lapon nyithatja). */
.tiktok-open {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  color: #fff;
  text-decoration: none;
}

.tiktok-card img {
  display: block;
  width: 100%;
  height: 100%;
  /* A borítók nem mind 9:16-osak (van 576×824 is), a kártya viszont
     egységes — ezért vágunk, nem torzítunk. */
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

/* Sötétítő fátyol a felirat alatt: a borító alja bármilyen világos lehet,
   a fehér szöveg pedig e nélkül olvashatatlanná válna rajta. */
.tiktok-open::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(3, 5, 9, 0.92) 0%, rgba(3, 5, 9, 0.62) 38%, transparent 100%);
}

.tiktok-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-full);
  background: rgba(12, 16, 24, 0.55);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.tiktok-play svg {
  width: 22px;
  height: 22px;
  /* A háromszög optikai közepe jobbra esik a mértanitól. */
  margin-left: 3px;
}

.tiktok-meta {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0.9rem 0.95rem;
}

.tiktok-cimke {
  font-family: 'Sora', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

.tiktok-datum {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.66);
}

/* A kártya a szalagban fókuszálható elem: a körvonalnak a KÁRTYÁN kell
   látszania, nem a levágott linken belül. */
.tiktok-open:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (hover: hover) {
  .tiktok-card:hover img {
    transform: scale(1.05);
  }

  .tiktok-card:hover .tiktok-play {
    transform: translate(-50%, -50%) scale(1.08);
    border-color: rgba(var(--brand-amber-rgb), 0.75);
    background: rgba(var(--brand-amber-rgb), 0.9);
    color: var(--on-brand);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tiktok-card img,
  .tiktok-card:hover img {
    transform: none;
    transition: none;
  }
}

/* --- Lejátszás HELYBEN, a kártyában ------------------------------------- */

/* A lejátszó a borítókép HELYÉRE kerül, ugyanabba a dobozba: a szalag nem
   ugrik, a kártya nem nő, a szomszédok nem mozdulnak. Külön nagyító-ablak
   nincs — a videó ott indul, ahová a látogató koppintott. */
.tiktok-player {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
}

.tiktok-player[hidden] {
  display: none;
}

.tiktok-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lejátszás közben a borítókép nem csak takarva van, hanem KI IS KERÜL a
   dokumentumból: így nem marad mögötte egy láthatatlan, de fókuszálható és
   felolvasható link ugyanarra a videóra. */
.tiktok-card.is-lejatszas .tiktok-open {
  display: none;
}

/* A kártya alap `:hover` emelése lejátszás közben zavaró volna: a videó
   megugrana az egér alatt. */
.tiktok-card.is-lejatszas:hover {
  transform: none;
  box-shadow: none;
}

.tiktok-stop {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-full);
  background: rgba(8, 11, 17, 0.72);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}

/* A `display: grid` fentebb ERŐSEBB, mint a `hidden` böngészői alapstílusa —
   a rejtést külön ki kell mondani, különben a gomb minden kártyán ott ülne.
   (Ugyanez a csapda a nagyító lapozógombjainál is megvolt.) */
.tiktok-stop[hidden] {
  display: none;
}

.tiktok-stop svg {
  width: 17px;
  height: 17px;
}

@media (hover: hover) {
  .tiktok-stop:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(20, 26, 38, 0.9);
  }
}

/* --- Telefonos TikTok-doboz --------------------------------------------- */

/* Asztalin a SZALAG a megjelenés, tehát a doboz nincs. Alapból rejtett: a
   mobil blokk kapcsolja be, nem fordítva — így egy elfelejtett @media
   szabály nem a doboz VILLANÁSÁT okozza nagy képernyőn. */
.tiktok-box {
  display: none;
}
@media (forced-colors: active) {
  .tiktok-play,
  .tiktok-stop {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   16. ÁRKALKULÁTOR
   ========================================================================== */

.calc {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (min-width: 900px) {
  .calc {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.calc-result {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-lg);
  background: var(--always-dark-2);
  color: var(--always-dark-text);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--always-dark-line);
}

.calc-result::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px 240px at 80% 0%, rgba(var(--brand-amber-rgb), 0.28), transparent 65%),
    radial-gradient(420px 240px at 10% 100%, rgba(var(--brand-blue-rgb), 0.28), transparent 65%);
}

.calc-price {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.calc-note {
  font-size: 0.82rem;
  color: var(--always-dark-muted);
  line-height: 1.6;
}

.calc-breakdown {
  display: grid;
  gap: 0.5rem;
  padding-block: 1rem;
  border-block: 1px solid var(--always-dark-line);
  font-size: 0.86rem;
}

.calc-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--always-dark-muted);
}

.calc-breakdown div b {
  color: var(--always-dark-text);
  font-variant-numeric: tabular-nums;
}

/* ÉLŐ állapotjelző a tárolt adatok felsorolásában.

   A felsorolás maga szándékosan statikus: a tájékoztatónak azt kell leírnia,
   milyen adatot tárolhat az oldal — függetlenül attól, hogy egy adott
   látogatónál épp van-e ilyen. Ez a címke viszont megmutatja a TÉNYLEGES
   állapotot, és a törlés gomb hatását is láthatóvá teszi. */
.storage-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.35rem;
  padding: 0.08rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: middle;
}

.storage-state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.storage-state.is-on {
  border-color: rgba(var(--ok-rgb), 0.45);
  color: var(--ok);
}

/* Tárolt beállítások törlése (adatvédelmi tájékoztató) */
.storage-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.storage-clear p:empty {
  display: none;
}

/* A törlés visszafordíthatatlan művelet: a gomb ezt a színével is kimondja.
   Nem tömör piros, mert nem ez az oldal fő cselekvése — a keret és a felirat
   viszi a jelzést, kitöltést csak az egér alatt kap. */
.storage-clear .btn {
  border-color: rgba(var(--danger-rgb), 0.5);
  color: var(--danger);
}

.storage-clear .btn:hover,
.storage-clear .btn:focus-visible {
  border-color: var(--danger);
  background: rgba(var(--danger-rgb), 0.12);
  color: var(--danger);
}

.storage-clear p.is-done {
  color: var(--ok);
  font-weight: 600;
}

/* Ártáblázat */
.price-table {
  /* `max-content`, nem `100%`: ha a tartalom szélesebb a doboznál, a
     100 %-os táblázat a DOBOZ szélességét veszi fel, a cellák pedig túllógnak
     rajta — görgetéskor a fejléc háttere és a sorok elválasztó vonalai a
     látható rész szélénél véget értek, a szöveg viszont ment tovább. Így a
     táblázat a teljes tartalmát átfogja, a `min-width` pedig kitölteti vele a
     dobozt, ha a tartalom keskenyebb. */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

/* HÁROM HASÁBOS jogi táblázatok rögzített elrendezéssel.

   Az automatikus elrendezés a szóköz nélküli szövegeknek (URL-ek,
   `vercel.com/legal/privacy-policy`) adott minden helyet, és a mellette lévő
   „Feladat" oszlop szavanként tördelt, hat soros hasábbá szűkült. A rögzített
   arányok ezt eldöntik előre, az `anywhere` pedig engedi az URL-eket törni,
   így egyik hasáb sem szorul össze. */
.price-table.is-fix {
  /* Rögzített elrendezésnél a hasábok százalékos aránya a DOBOZ szélességéhez
     mér, tehát itt a 100 % a helyes — és nincs is túlcsordulás, mert a
     szöveg tördelhető. */
  width: 100%;
  table-layout: fixed;
}

.price-table.is-fix th,
.price-table.is-fix td {
  overflow-wrap: anywhere;
}

.price-table.is-fix thead th:nth-child(1) {
  width: 24%;
}

.price-table.is-fix thead th:nth-child(2) {
  width: 38%;
}

.price-table.is-fix thead th:nth-child(3) {
  width: 38%;
}

/* Ha az utolsó hasáb rövid, kategorikus érték (jogalap: „hozzájárulás",
   „jogos érdek”), akkor keskenyebb, és a JOBB szélhez igazodik: a szem így a
   táblázat két szélén találja a két kulcsadatot, középen a magyarázattal. */
.price-table.is-short-last thead th:nth-child(1) {
  width: 32%;
}

.price-table.is-short-last thead th:nth-child(2) {
  width: 46%;
}

.price-table.is-short-last thead th:nth-child(3) {
  width: 22%;
  text-align: right;
}

.price-table.is-short-last td:nth-child(3) {
  text-align: right;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

/* A görgetősáv a doboz ÍVÉN BELÜL fusson: a rendszer sávja a teljes alsó
   élt elfoglalja, tehát a 26 px-es lekerekített sarkokba is belelóg. A
   `margin-inline` a sarok sugaránál kezdi és fejezi be. */
.table-wrap::-webkit-scrollbar {
  height: 8px;
}

.table-wrap::-webkit-scrollbar-track {
  margin-inline: var(--r-lg);
  background: transparent;
}

.table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--r-full);
  background: var(--line-strong);
  background-clip: padding-box;
}

.table-wrap:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--brand-amber-rgb), 0.5);
  background-clip: padding-box;
}

/* Firefoxban nincsenek ezek a pszeudoelemek; Chrome-ban viszont a
   `scrollbar-width` jelenléte kikapcsolná a fenti finomhangolást. */
@supports not selector(::-webkit-scrollbar) {
  .table-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
}

.price-table th,
.price-table td {
  padding: 1rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  /* Az URL-ek (`vercel.com/legal/privacy-policy`) egyetlen, szóköz nélküli
     szónak számítanak: enélkül nem tördelhetők, és vagy szétfeszítik a
     hasábot, vagy kilógnak a kijelzőről. */
  overflow-wrap: break-word;
}

.price-table thead th {
  background: var(--surface-2);
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: 0;
}

.price-table tbody tr:hover {
  background: var(--surface-2);
}

.price-table td:last-child {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--brand-amber);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A JOGI táblázatokban az utolsó hasáb nem ár, hanem mondat: nem kap
   ár-tipográfiát. A `nowrap` volt az igazi baj — attól a hosszú URL-ek
   egyetlen, törhetetlen sorként 957 px-re feszítették a 780-as dobozt, és
   emiatt kellett vízszintesen görgetni.

   Az `is-fix` HÁROM hasábot ír le; a két hasábos adattáblák (a szolgáltató
   adatai, az adatkezelő) ezért nem kaphatják meg — viszont ugyanígy mondat áll
   az utolsó hasábjukban. Nekik való az `is-text-last`: enélkül a székhely és a
   kötvényszám borostyán Sorával, `nowrap`-pal jelent meg, és 320 px-en
   levágódott. */
.price-table.is-fix td:last-child,
.price-table.is-text-last td:last-child {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  white-space: normal;
  font-variant-numeric: normal;
}

/* Csúszka */
.range-wrap {
  display: grid;
  gap: 0.6rem;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-amber) 0%, var(--brand-blue) var(--pct, 30%), var(--surface-2) var(--pct, 30%));
  cursor: pointer;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: #fff;
  box-shadow: 0 0 0 1px var(--brand-amber), 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform var(--t-fast) var(--ease);
}

input[type='range']::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Firefox: ugyanaz a méret, árnyék és hover-visszajelzés, mint a WebKit ágon —
   a két álelem nem vonható össze egyetlen szabályba (ha az egyiket a böngésző
   nem ismeri, az EGÉSZ szabályt eldobja), ezért a párhuzam szándékos. */
input[type='range']::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: #fff;
  box-shadow: 0 0 0 1px var(--brand-amber), 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}

input[type='range']::-moz-range-thumb:hover {
  transform: scale(1.15);
}

/* Választható kártyák (rádió helyett) */
.choice-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.choice > span {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 0.85rem 1rem;
  /* Rádiógomb-helyettesítő kártya, tehát vezérlő: a határvonalának meg kell
     ütnie a 3:1-et. Telefonon ez listasorrá alakul, és ott a `--line` már
     ELVÁLASZTÓ szerepben van — azt a mobil szabály külön állítja. */
  border: 1px solid var(--mezo-keret);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}

/* Az ikont a nézetek kapcsolják be: telefonon a mobilblokk, 720 px felett a
   `.urgency` saját médiablokkja. Alapból rejtve marad, hogy egy jövőbeli,
   ikon nélküli kártyacsoport ne örököljön üres helyet. */
.choice-ico {
  display: none;
  width: 22px;
  height: 22px;
  flex: none;
}

/* A cím és a hozzá tartozó magyarázat MINDIG egymás alatt. Enélkül a <small>
   inline maradna, és egy sorba csúszna a címmel. */
.choice-txt {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

/* Az ikonok halvány, egymástól eltérő színt kapnak — a sürgősség növekedésével
   a hideg felől a meleg felé. Csak telefonon látszanak (lásd .choice-ico). */
.urgency .choice:nth-child(1) .choice-ico {
  color: rgba(var(--danger-rgb), 0.65);
}

.urgency .choice:nth-child(2) .choice-ico {
  color: rgba(var(--brand-amber-rgb), 0.7);
}

.urgency .choice:nth-child(3) .choice-ico {
  color: rgba(var(--brand-blue-rgb), 0.7);
}

.urgency .choice:nth-child(4) .choice-ico {
  color: rgba(var(--brand-blue-rgb), 0.45);
}

/* A kiválasztott lehetőség ikonja a saját, teljes erejű színét kapja: a
   sürgősség színe így a kártya legfeltűnőbb eleme marad. */
.urgency .choice input:checked + span .choice-ico {
  color: var(--brand-amber);
}

.urgency .u-sos input:checked + span .choice-ico {
  color: var(--danger);
}


.choice > span small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 400;
}

.choice input:hover + span {
  border-color: var(--line-strong);
}

.choice input:focus-visible + span {
  outline: 3px solid var(--brand-amber);
  outline-offset: 3px;
}

.choice input:checked + span {
  border-color: var(--brand-amber);
  background: rgba(var(--brand-amber-rgb), 0.1);
  box-shadow: var(--glow-amber);
}

/* ==========================================================================
   17. ŰRLAPOK, EGYEDI SELECT, MODAL
   ========================================================================== */

.form {
  display: grid;
  gap: 1.1rem;
}

.form-row {
  display: grid;
  gap: 1.1rem;
}

/* 720 px, nem 620: a 620-as érték holt volt, mert 620–719,98 px között a
   később álló mobilszabály (azonos specificitás) úgyis egy oszlopra váltott.
   Ez a feltétel a TÉNYLEGES viselkedést írja le. */
@media (min-width: 720px) {
  .form-row.is-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* A `.field` rácsában a sorok a saját magasságukat kapják. Enélkül a rács
   szétosztotta a maradék helyet: ahol nem volt hibaüzenet-sor (pl. a Helyszín
   mezőnél), ott a beviteli mező nyúlt meg 54-ről 64 px-re — csak ez az egy
   mező volt magasabb a többinél. */
.field {
  display: grid;
  align-content: start;
  gap: 0.42rem;
}

.field > label,
.field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
}

.field .req {
  color: var(--brand-amber);
}

.input,
.textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mezo-keret);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}

.textarea {
  min-height: 130px;
  resize: vertical;
}

/* A 0,75-ös áttetszőség 4,16:1-re vitte le a helyőrző kontrasztját (a
   minimum 4,5:1). Áttetszőség nélkül, a világosabb tokennel 6,9:1. */
.input::placeholder,
.textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.input:hover,
.textarea:hover {
  border-color: var(--mezo-keret-eros);
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand-amber);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(var(--brand-amber-rgb), 0.14);
}

.input[aria-invalid='true'],
.textarea[aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(var(--danger-rgb), 0.14);
}

/* A fókusz külön csatornán jelenik meg (körvonal), így a hibás állapot
   színezése nem tudja elnyelni — bármelyik szabály jön is később. */
.input:focus-visible,
.textarea:focus-visible {
  outline: 3px solid var(--brand-amber);
  outline-offset: 2px;
}

.field-error {
  min-height: 1.1em;
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 500;
}

/* Honeypot — csak botoknak látható */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  /* `visibility: hidden` is kell: enélkül az input programozottan
     FÓKUSZÁLHATÓ marad egy `aria-hidden="true"` fán belül — a méhkas így is
     működik (a botok a jelölésből olvasnak), az ellentmondás viszont eltűnik. */
  visibility: hidden;
}

/* Checkbox */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  cursor: pointer;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox .box {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 1px;
  /* A hozzájárulás jelölőnégyzete: bejelöletlenül a KERET az egyetlen jel,
     hogy ott doboz van (a pipa `opacity: 0`). A `--line-strong` 1,58:1-et
     adott, tehát a beküldés feltétele gyakorlatilag láthatatlan volt. */
  border: 1px solid var(--mezo-keret);
  border-radius: 6px;
  background: var(--surface);
  transition: all var(--t) var(--ease);
}

.checkbox .box svg {
  width: 13px;
  height: 13px;
  color: var(--on-brand);
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--t) var(--ease);
}

/* Hibás állapot: a jelölőnégyzet kerete is jelezze, ne csak a szöveg */
.checkbox input[aria-invalid='true'] + .box {
  border-color: var(--danger);
}

.checkbox input:checked + .box {
  background: var(--brand-amber);
  border-color: var(--brand-amber);
}

.checkbox input:checked + .box svg {
  opacity: 1;
  transform: none;
}

.checkbox input:focus-visible + .box {
  outline: 3px solid var(--brand-amber);
  outline-offset: 3px;
}

/* Egyedi legördülő (nem natív select) */
.select {
  position: relative;
}

.select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mezo-keret);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  text-align: left;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

/* --------------------------------------------------------------------------
   Lépcsőzős űrlap (CSAK telefonon)

   A burkolók alapból `display: contents`: se asztalon, se JS nélkül nem
   léteznek, tehát az űrlap ugyanaz az egyoldalas rács marad. A lépcsőzést a
   telefonos blokk kapcsolja be, `.js-ready` mellett — enélkül minden lépés
   látszik egymás alatt, és az űrlap ugyanúgy kitölthető.
   -------------------------------------------------------------------------- */
.form-step {
  display: contents;
}

/* A haladásjelző, a lépésnavigáció és az összegzés CSAK lépcsőzős módban
   látszik. Szándékosan NEM `hidden` attribútummal rejtjük: a beágyazó
   felületek egy része `[hidden] { display: none !important }` szabályt visz,
   amit egy sima `display: grid` nem tud felülírni — és ha a JS bármiért nem
   veszi le az attribútumot, a vezérlők végleg eltűnnek. Egyetlen osztály
   kapcsolja az egész módot, így nincs mit elrontani. */
.step-bar,
.step-nav,
.step-summary {
  display: none;
}

/* A telefonos választógomb nagy képernyőn nem kell: ott a négy kártya
   egyszerre látszik, egy legördülő csak elrejtené a választékot.

   FONTOS: ez a szabály a `.select-btn` UTÁN áll — a gomb mindkét osztályt
   viseli, a specificitásuk azonos (0,1,0), tehát a forrássorrend dönt.
   Elé kerülve a `.select-btn { display: flex }` némán felülírná. */
.urgency-btn {
  display: none;
}

.select-btn:hover {
  border-color: var(--mezo-keret-eros);
}

.select-btn[aria-expanded='true'] {
  border-color: var(--brand-amber);
  box-shadow: 0 0 0 4px rgba(var(--brand-amber-rgb), 0.14);
}

.select-btn.is-placeholder {
  color: var(--muted);
}

.select-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
  transition: transform var(--t) var(--ease);
}

.select-btn[aria-expanded='true'] svg {
  transform: rotate(180deg);
  color: var(--brand-amber);
}

.select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-legordulo);
  max-height: 260px;
  padding: 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-solid);
  box-shadow: var(--shadow-3);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}

.select-list.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* A lista görgetősávja 720 px felett, ahol egeret is használnak: vékony,
   lekerekített csúszka a doboz saját színeiből, sín nélkül.

   A `margin-block` a lényeg: a rendszer görgetősávja a doboz teljes
   magasságát elfoglalja, tehát a felső és alsó lekerekített sarokba is
   belelóg — egy egyenes vonal egy 12 px-es íven belül. Ez a behúzás pont a
   sarok sugaránál kezdi és fejezi be a sávot, így az ív érintetlen marad.

   Telefonon nem érvényes: ott a lista alulról felcsúszó lap, és a rendszer
   saját, ujjhoz méretezett sávja a helyes. */
@media (min-width: 720px) {
  .select-list::-webkit-scrollbar {
    width: 6px;
  }

  .select-list::-webkit-scrollbar-track {
    margin-block: var(--r-sm);
    background: transparent;
  }

  .select-list::-webkit-scrollbar-thumb {
    border-radius: var(--r-full);
    background: var(--line-strong);
  }

  .select-list:hover::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-amber-rgb), 0.45);
  }

  /* Firefoxban nincsenek ezek a pszeudoelemek; ott a két szabványos
     tulajdonság a legjobb közelítés. Chrome-ban viszont NEM szabad megadni
     őket: a `scrollbar-width` puszta jelenléte kikapcsolja a fenti
     finomhangolást, és a sáv 12 px-es marad, sarokba lógó sínnel. */
  @supports not selector(::-webkit-scrollbar) {
    .select-list {
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }
  }
}

/* A sprite csak a szimbólumokat tárolja, nem jelenik meg */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.select-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

/* Szolgáltatás-ikonok: ugyanazok a jelek, mint a láblécben — a látogató
   ugyanazt a képet látja ott is, ahol a szolgáltatásokat felsoroljuk. */
.opt-ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}

.select-list li:hover .opt-ico,
.select-list li.is-active .opt-ico,
.select-list li[aria-selected='true'] .opt-ico {
  color: var(--brand-amber);
}

.select-list li.is-active {
  outline: 2px solid var(--brand-amber);
  outline-offset: -2px;
}

.select-list li:hover,
.select-list li.is-active {
  background: var(--surface-2);
  color: var(--brand-amber);
}

.select-list li[aria-selected='true'] {
  color: var(--brand-amber);
  font-weight: 600;
}

/* Sürgősség-választó */
.urgency {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

.urgency .u-sos input:checked + span {
  border-color: var(--danger);
  background: rgba(var(--danger-rgb), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--danger-rgb), 0.35), 0 12px 34px -14px rgba(var(--danger-rgb), 0.6);
}

/* A sürgősség ikonjai 720 px FELETT is látszanak, ugyanazokkal a halvány
   színekkel, mint telefonon: ikon balra, mellette a cím és a magyarázat.

   Miért külön médiablokkban, és nem az alapszabályban: a telefonos elrendezést
   a mobilblokk `.choice > span` szabálya adja, aminek a specificitása kisebb,
   mint ezé (`.urgency .choice > span`). Alapszabályként ez felülírná a
   telefonos térközt — így viszont a két nézet nem ér egymáshoz. */
@media (min-width: 720px) {
  .urgency .choice-ico {
    display: block;
  }

  .urgency .choice > span {
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
  }
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 9, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-panel {
  position: relative;
  width: min(100%, 640px);
  max-height: min(88vh, 860px);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow-3);
  overflow-y: auto;
  transform: translateY(24px) scale(0.97);
  transition: transform var(--t-slow) var(--ease);
}

.modal.is-open .modal-panel {
  transform: none;
}

/* --------------------------------------------------------------------------
   Az ajánlatkérő ablak NAGY KÉPERNYŐN: két hasáb

   640 px-es dobozban a nyolc mező egyetlen hosszú oszlopba állt, és a leírás
   mezője — amit a legtöbbet használnak — a hajtás alá került. Nagy képernyőn
   van hely: balra a rövid válaszok egymás alatt, jobbra a leírás, a
   hozzájárulás és a küldés. A látogató így egy képernyőn látja az egészet.
   -------------------------------------------------------------------------- */
@media (min-width: 1120px) {
  /* Az AJÁNLATKÉRŐ ablak nem doboz, hanem TELJES OLDAL: a szélein nem marad
     rés, a háttéroldal nem villan ki mellette. A hívás-ablak viszont
     névjegy, nem űrlap — az kifejezetten lebegő, lekerekített doboz marad,
     ezért mindkét szabály kizárja. */
  .modal:not(.call-modal) {
    padding: 0;
  }

  .modal-panel:not(.call-panel) {
    width: 100%;
    height: 100vh;
    height: 100svh;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: clamp(1.75rem, 3.2vh, 3rem) clamp(2rem, 5vw, 5rem);
  }

  /* `:not(.call-panel)` nem szépészeti finomítás, hanem a specificitás miatt
     kell: a médialekérdezés nem ad erőt, és az alapszabály (a fájlban KÉSŐBB)
     azonos (0,1,1) specificitással visszaadta volna a lekerekítést. A teljes
     oldalas ablak tetején így két látható bevágás maradt a márkacsík két
     sarkánál. */
  .modal-panel:not(.call-panel)::before {
    border-radius: 0;
  }

  /* Faltól falig futó űrlap egy 27 hüvelykes monitoron olvashatatlan lenne:
     a tartalom a lap közepén marad, a panel viszont a képernyő széléig ér. */
  .modal-panel .modal-head,
  .modal-panel .form {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
  }

  .modal-panel .form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 3vw, 3.25rem);
    /* Szűkebb sorköz, hogy az ablak alacsonyabb laptopképernyőn is
       görgetés nélkül kiférjen. */
    row-gap: 0.85rem;
    align-content: start;
  }

  /* A lépés-burkolók `display: contents`-ek, tehát a rács elemei NEM a form
     közvetlen gyerekei, hanem a burkolóké. Ezért mindkét útvonalat fel kell
     sorolni — egy `>` szelektor a DOM-hierarchiát nézi, nem a rácsot. */

  /* BAL hasáb: a rövid válaszok, kitöltési sorrendben.

     A `:has()`-os szelektorok KÜLÖN szabályban állnak. A `:has()` ugyanis nem
     „megbocsátó": ha a böngésző nem ismeri, a TELJES szabály érvénytelen — a
     mellette vesszővel felsorolt, egyébként tökéletesen támogatott
     szelektorokkal együtt. Egy szabályba írva tehát egy régebbi böngészőn
     (Firefox 121 előtt) egyetlen mező sem kapott volna hasábot, és a
     kétoszlopos rácsban cikcakkban szóródtak volna szét. Így legfeljebb a
     szolgáltatásválasztó csúszik a másik hasábba. */
  .modal-panel .form > .form-row,
  .modal-panel .form > [data-step] > .form-row,
  .modal-panel .form > fieldset,
  .modal-panel .form > [data-step] > fieldset {
    grid-column: 1;
  }

  .modal-panel .form > .field:has(.select),
  .modal-panel .form > [data-step] > .field:has(.select) {
    grid-column: 1;
  }

  /* A szolgáltatáslista FELFELÉ nyílik. Teljes képernyős ablakban a mező a
     bal hasáb közepén ül, alatta a sürgősség négy kártyája — lefelé nyílva a
     lista pont azokat takarta el, és a látogató a saját választása alatt
     elvesztette a szövegkörnyezetet. Fölötte viszont csak a két kitöltött
     mezősor van. A becsukott állapot elmozdulása is előjelet vált, hogy a
     lista abból az irányból ússzon be, amerre nyílik. */
  .modal-panel .select-list {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(8px);
  }

  .modal-panel .select-list.is-open {
    transform: none;
  }

  /* A zárt szolgáltatás-lista `position: absolute` és `visibility: hidden`,
     de a magasságát a görgető panel scrollHeight-ja így is beszámítja: 11 px
     túllógás elég volt egy értelmetlen görgetősávhoz a modál szélén. Zárva
     nem látszik, tehát nyugodtan összecsukható. */
  .modal-panel .select-list:not(.is-open) {
    height: 0;
    padding-block: 0;
    border-block-width: 0;
  }

  /* JOBB hasáb: a negyedik lépés burkolója EGYBEN a hasáb.

     Elemenkénti `grid-column: 2`-vel a leírás, a hozzájárulás és a küldés
     külön rácssorokba került, és a jobb hasáb 848 px-re nyúlt egy 714-es
     panelben — a küldés gomb a hajtás alá esett. A burkoló viszont már
     pontosan a jobb oldalra szánt négy elemet tartalmazza, így asztali
     nézetben nem `display: contents`, hanem maga az oszlop. */
  .modal-panel .form > [data-step]:has(.textarea) {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    grid-column: 2;
    grid-row: 1 / span 4;
    min-height: 0;
  }

  /* A leírás viszi a hasáb szabad magasságát, a küldés az aljára ül. */
  .modal-panel .form > [data-step]:has(.textarea) > .field:has(.textarea) {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto 1fr auto;
  }

  .modal-panel .form .textarea {
    min-height: 12rem;
    height: 100%;
    resize: none;
  }

  /* A sürgősség négy kártyája a keskenyebb hasábban kettesével fér el. */
  .modal-panel .urgency {
    grid-template-columns: 1fr 1fr;
  }
}

.modal-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--brand-gradient-hard);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
}

.modal-head h2 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  margin-bottom: 0.35rem;
}

.modal-head p {
  color: var(--muted);
  font-size: 0.9rem;
}

.modal-close {
  flex: none;
}

/* --------------------------------------------------------------------------
   HÍVÁS-ABLAK (nagy képernyő)

   Nem űrlap, hanem NÉVJEGY: a látogató itt dönti el, hogy felveszi-e a
   telefont. Ezért kap arcot — a kivágott, átlátszó hátterű fotó a panel
   aljáig ér, mögötte ugyanaz a kettős fénykör, mint a Rólunk oldalon —, és
   ezért a legnagyobb elem a szám maga.
   -------------------------------------------------------------------------- */
.call-panel {
  width: min(100%, 42rem);
  max-height: min(90vh, 42rem);
  padding: 0;
  /* Erős lekerekítés: ez az ablak névjegy, nem munkafelület — a lágy sarok
     ugyanazt mondja, mint a tartalom. */
  border-radius: 1.75rem;
  overflow: hidden;
}

.call-panel::before {
  border-radius: 1.75rem 1.75rem 0 0;
}

.call-panel .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
}

.call-figure {
  display: none;
}

.call-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.1rem);
}

.call-body h2 {
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  line-height: 1.1;
}

.call-role {
  margin-bottom: 1.1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* A szám a legnagyobb, legnyugodtabb elem: saját mezőben, tabuláris
   számjegyekkel, hogy a szemnek ne kelljen ugrálnia a csoportok között. */
.call-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.9rem 0.85rem 1.15rem;
  border: 1px solid rgba(var(--brand-amber-rgb), 0.32);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(var(--brand-amber-rgb), 0.12), rgba(var(--brand-amber-rgb), 0.04));
}

.call-num {
  color: var(--text);
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.call-num:hover {
  color: var(--brand-amber);
}

.call-copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(var(--bg-rgb), 0.5);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.call-copy svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.call-copy:hover {
  border-color: rgba(var(--brand-amber-rgb), 0.55);
  color: var(--brand-amber);
}

.call-copy.is-done {
  border-color: rgba(var(--ok-rgb), 0.55);
  color: var(--ok);
}

/* A visszajelzés élő régió, ezért mindig a fában marad — üresen nem foglal
   helyet, mert nincs saját magassága. */
.call-copied {
  min-height: 1.3em;
  margin-top: 0.5rem;
  color: var(--ok);
  font-size: 0.8rem;
  font-weight: 600;
}

.call-facts {
  display: grid;
  gap: 0.7rem;
  margin: 0.35rem 0 1.1rem;
  padding: 0;
  list-style: none;
}

.call-facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.call-facts strong {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--text);
  font-weight: 700;
}

.call-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-blue);
}

.call-ico.is-sos {
  color: var(--danger);
  border-color: rgba(var(--danger-rgb), 0.4);
  background: rgba(var(--danger-rgb), 0.1);
}

.call-ico svg {
  width: 17px;
  height: 17px;
}

/* A záró ajánlat SAJÁT dobozban, a törzs alján: külön súlyt kap, és a
   szemnek egyértelmű, hol ér véget az ablak. `margin-top: auto` viszi az
   aljára akkor is, ha a fölötte lévő tartalom rövidebb. */
.call-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding: 0.9rem 0.9rem 0.9rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--surface);
}

.call-cta p {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
}

.call-cta p span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
}

.call-cta .btn {
  flex: none;
  padding: 0.7rem 1.1rem;
  font-size: 0.88rem;
}

/* 900 px felett fér el a fotó a szöveg mellett. */
@media (min-width: 900px) {
  .call-panel {
    width: min(100%, 60rem);
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
    /* `stretch`, nem `end`: a fotó hasábja így a panel teljes magasságát
       megkapja, és a kép ahhoz igazodhat. `end` mellett a hasáb a KÉP
       magasságát vette fel, a kép pedig a hasábét — a kör úgy oldódott fel,
       hogy a kép 799 px lett egy 704-es panelben, és felül kilógott. */
    align-items: stretch;
  }

  .call-figure {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  /* A fotó a panel ALJÁIG ér és ott végződik — nincs alatta üres sáv, amitől
     „beragasztott képnek" hatna. */
  /* Az álló fotó a PANEL magasságához igazodik, nem az oszlop szélességéhez:
     egész alakos képnél a szélesség-alapú méretezés kilógna a doboz aljából.
     A `margin-bottom: -1px` a lekerekítés és a kép széle közti hajszálrést
     tünteti el. */
  /* A kép KILÉP a magasságszámításból: `position: absolute` mellett a sor
     magasságát egyedül a szöveg szabja meg, a fotó pedig `contain`-nel
     annyit foglal, amennyi van, a talpánál igazítva. Relatív elemként a
     477×1400-as fotó 874 px-re nyújtotta a 672-es panelt, és görgetni
     kellett benne. */
  .call-figure img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
  }

  .call-glow {
    position: absolute;
    inset: 12% -18% 0 -12%;
    z-index: 0;
    border-radius: 50% 50% 42% 42% / 55% 55% 45% 45%;
    background: radial-gradient(closest-side at 45% 35%, rgba(var(--brand-amber-rgb), 0.3), transparent 72%),
      radial-gradient(closest-side at 62% 78%, rgba(var(--brand-blue-rgb), 0.26), transparent 72%);
    filter: blur(38px);
  }

  .call-body {
    padding: clamp(2rem, 3vw, 2.75rem) clamp(2rem, 3vw, 2.75rem) clamp(2rem, 3vw, 2.75rem) 0;
  }
}

/* Űrlap-visszajelzés — élő régió, ezért MINDIG a fában marad (a display:none
   kivenné, és a megjelenéssel egyszerre beírt szöveg bemondatlan maradhatna). */
.form-status {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  line-height: 1.55;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.form-status.is-visible {
  height: auto;
  padding: 0.95rem 1.1rem;
  overflow: visible;
  opacity: 1;
}

.form-status svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
}

.form-status.is-ok {
  border: 1px solid rgba(var(--ok-rgb), 0.4);
  background: rgba(var(--ok-rgb), 0.1);
  color: var(--ok);
}

/* Folyamatban lévő küldés — se nem siker, se nem hiba.
   A rövidítést a testvérállapotokhoz hasonlóan ki kell írni: önmagában a
   border-color nem rajzol semmit, mert a border-style „none" marad. */
.form-status.is-info {
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}

.form-status:focus-visible {
  outline: 3px solid var(--brand-amber);
  outline-offset: 2px;
}

.form-status.is-err {
  border: 1px solid rgba(var(--danger-rgb), 0.4);
  background: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
}

/* Töltés-jelző a gombon */
.btn.is-loading {
  pointer-events: none;
  color: transparent !important;
}

.btn.is-loading::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(4, 6, 11, 0.3);
  border-top-color: var(--on-brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   18. LÁBLÉC, COOKIE, HÍVÓGOMB
   ========================================================================== */

.site-footer {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background: var(--always-dark);
  color: var(--always-dark-text);
  overflow: hidden;
  isolation: isolate;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(760px 320px at 50% 0%, rgba(var(--brand-blue-rgb), 0.13), transparent 62%);
}

.footer-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding-bottom: 2.6rem;
  border-bottom: 1px solid var(--always-dark-line);
}

/* Nagy képernyőn nem egyenlő oszlopok kellenek, hanem a TARTALOMHOZ mért
   arányok: a „Szolgáltatások” hosszú tételei és a kapcsolati sorok külön-külön
   más helyet igényelnek. Egyenlő 1fr mellett a „Budapest, Pest megye és
   környéke” kettétört, miközben a szomszéd oszlopban üresen állt a hely. */
@media (min-width: 1120px) {
  .footer-grid {
    grid-template-columns: 1.25fr 0.8fr 1.15fr 1.1fr;
    gap: clamp(2.5rem, 3.5vw, 4rem);
  }
}

/* A `width` HTML-attribútum (485) prezentációs tippként érvényesült, miközben a
   CSS csak a magasságot állította — a logó így 496×42-re nyúlt. A `width: auto`
   visszaadja az eredeti oldalarányt, ahogy a fejlécben is. */
.footer-brand img {
  height: 42px;
  width: auto;
  margin-bottom: 0.7rem;
}

/* A szlogen kikerült a logóképből — a fejlécben 40 px-es logónál olvashatatlan
   volt. Itt viszont van rá hely, ezért valódi szövegként, saját szedéssel. */
.footer-brand .footer-slogan {
  margin-bottom: 1rem;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--always-dark-text);
}

.footer-brand p {
  max-width: 34ch;
  color: var(--always-dark-muted);
  font-size: 0.9rem;
}

.footer-col h3 {
  margin-bottom: 1.1rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-amber);
}

.footer-col ul {
  display: grid;
  gap: 0.65rem;
}

.footer-col a,
.footer-col li {
  color: var(--always-dark-muted);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.footer-col a:hover {
  color: var(--brand-amber);
}

/* Ikonos lábléc-link */
.footer-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--brand-amber);
  opacity: 0.72;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.footer-link:hover svg {
  opacity: 1;
  transform: translateX(2px);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.footer-contact svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  color: var(--brand-blue);
}

.socials {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.4rem;
}

.social {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--always-dark-line);
  border-radius: var(--r-sm);
  color: var(--always-dark-text);
  transition: all var(--t) var(--ease);
}

.social svg {
  width: 18px;
  height: 18px;
}

.social:hover {
  color: var(--on-brand);
  background: var(--brand-amber);
  border-color: var(--brand-amber);
  transform: translateY(-3px);
  box-shadow: var(--glow-amber);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.7rem;
  color: var(--always-dark-muted);
  font-size: 0.82rem;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.footer-bottom a {
  color: var(--always-dark-muted);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--brand-amber);
}

/* Mobil műveletsáv — a képernyő alján, mindig látható
   A két legfontosabb művelet hüvelykujjal elérhető távolságban. Csak telefonon
   jelenik meg; nagyobb képernyőn a fejléc „Hívjon most” gombja tölti be a szerepét. */

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-muveletsav);
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--bg-rgb), 0.9);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 40px -20px rgba(0, 0, 0, 0.9);
}

.action-btn {
  width: 100%;
  padding: 0.82rem 0.6rem;
  font-size: 0.92rem;
  letter-spacing: -0.015em;
}

.action-btn svg {
  width: 1.05em;
  height: 1.05em;
}

/* A második gomb ne olvadjon a háttérbe: kék, üveges hangsúly */
.action-bar .btn-ghost {
  background: rgba(var(--brand-blue-rgb), 0.12);
  border-color: rgba(var(--brand-blue-rgb), 0.45);
  color: var(--brand-blue-300);
}

.action-bar .btn-ghost:hover,
.action-bar .btn-ghost:focus-visible,
.action-bar .btn-ghost:active {
  color: var(--brand-blue-300);
  background: rgba(var(--brand-blue-rgb), 0.2);
  border-color: var(--brand-blue);
}

.action-bar .btn:active {
  transform: scale(0.985);
}

@media (max-width: 719.98px) {
  .action-bar {
    display: grid;
  }

  /* A sáv ne takarja el a lábléc végét, se azt, amire a böngésző görget */
  body {
    padding-bottom: var(--action-bar-space);
  }

  html {
    scroll-padding-bottom: var(--action-bar-space);
  }

  /* Nyitott menü vagy modal mellett elrejtjük */
  body.is-locked .action-bar {
    display: none;
  }
}

/* Cookie-sáv */
/* --------------------------------------------------------------------------
   SÜTI-TÁJÉKOZTATÓ

   VILÁGOS kártya a sötét oldalon: a korábbi, oldal-színű sávot a látogató
   egyszerűen nem vette észre — beleolvadt a háttérbe. Nagy képernyőn a jobb
   alsó sarokban ül, kis dobozként; telefonon alul, faltól falig, és amíg
   látszik, az alsó műveletsáv elbújik: két réteg egyszerre a hüvelykujj
   sávjában zsúfolt és félreüthető.
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-suti);
  width: min(calc(100% - 2.5rem), 24.5rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 0.9rem;
  padding: 1.15rem 1.25rem 1.2rem;
  border-radius: 1.35rem;
  background: #f7f5f0;
  color: #16202e;
  box-shadow: 0 28px 70px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: translateY(160%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}

.cookie-ico {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(var(--brand-amber-rgb), 0.16);
  color: #9a6400;
}

.cookie-ico svg {
  width: 20px;
  height: 20px;
}

.cookie-title {
  margin-bottom: 0.15rem;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #101822;
}

.cookie p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: #43536a;
}

/* #a06600 a #f7f5f0 kártyán 4,39:1 — épp elmarad a 4,5-től. #9a6200: 4,68:1. */
.cookie a {
  color: #9a6200;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie a:hover {
  color: #7d4f00;
}

.cookie strong {
  color: #101822;
}

/* A gomb a szöveg alatt, a doboz teljes szélességében: a kártya keskeny,
   egy sorba zsúfolva a felirat kettétörne. */
.cookie-actions {
  grid-column: 2;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* Nyitott mobilmenüben vagy modálban a sáv a tartalom fölé került és elvitte
   a fókuszt. Amíg azok nyitva vannak, a sáv nem látszik. */
body.is-locked .cookie {
  transform: translateY(160%);
  visibility: hidden;
}

.cookie.is-visible {
  transform: none;
  visibility: visible;
  transition: transform var(--t-slow) var(--ease), visibility 0s;
}

/* JS nélküli tartalék */
.noscript-note {
  padding: 1rem var(--gutter);
  background: var(--brand-amber);
  color: var(--on-brand);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.noscript-note a {
  color: var(--on-brand);
}

/* ==========================================================================
   19. ANIMÁCIÓK & SCROLL-REVEAL
   ========================================================================== */

/* A rejtést a JS kapcsolja be (a .js-ready osztályt a scripts.js teszi a
   <html>-re). Enélkül egyetlen JS-hiba vagy blokkolt szkript esetén a
   főoldal 33 tartalmi blokkja véglegesen láthatatlan maradt volna. */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--delay, 0ms);
}

.js-ready [data-reveal='left'] {
  transform: translateX(-32px);
}
.js-ready [data-reveal='right'] {
  transform: translateX(32px);
}
.js-ready [data-reveal='zoom'] {
  transform: scale(0.94);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Szakaszsáv-ugrás célja: azonnal beúszott állapot, átmenet nélkül. Animálva a
   tartalom a LANDOLÁS UTÁN mozdulna 26 px-et felfelé, és a szakasz címe
   utólag csúszna közelebb a sávhoz — pont annál a szakasznál, ahová ugrottunk. */
[data-reveal].is-in.is-instant {
  transition: none;
}

/* --------------------------------------------------------------------------
   A hero mozgásainak megállítása (WCAG 2.2.2)

   A gomb a .rail-pause mintát használja: rejtve él, billentyűzetes fókuszra
   bukkan elő. Az `is-paused` osztály a heróra kerül, és MINDEN magától induló
   mozgást megállít benne — a CSS-animációkat play-state-tel, a videót a JS.

   Telefonon szándékosan NEM látszik állandóan (ügyfélkérés): ott a vezérlő
   csak billentyűzetről érhető el. Érintőn így nincs megállítási mód a hurkolt
   háttérvideóhoz — tudatosan vállalt eltérés a WCAG 2.2.2-től. Enyhítés:
   mozgáscsökkentett módban a videó el sem indul.
   -------------------------------------------------------------------------- */
.hero-pause {
  top: calc(var(--header-h) + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
}

/* Nagy képernyőn a gomb LÁTSZIK. A szalagoknál a rejtés azért fér bele, mert
   ott az egér ráhúzása is megállítja a mozgást — a heróban nincs ilyen
   tartalék (és nem is lehet: a hero interaktív, a fölé húzott egér nem
   jelenthet szünetet). Egérrel dolgozó látogatónak enélkül semmilyen módja
   nem lenne megállítani a hat végtelen animációt.
   Telefonon szándékosan rejtve marad (ügyfélkérés) — lásd a 4.4 fejezetet. */
@media (min-width: 720px) {
  .hero-pause {
    top: auto;
    bottom: 1rem;
    left: auto;
    right: clamp(1.75rem, 3.5vw, 3.5rem);
    transform: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.35rem 0.75rem;
    overflow: visible;
    clip-path: none;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--always-dark-line);
    border-radius: var(--r-full);
    background: rgba(var(--bg-rgb), 0.5);
    color: var(--always-dark-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* 0,55-nél a festett szín rgb(83,93,109) lett a rgb(5,7,12) fölött: 3,03:1,
       a WCAG AA 4,5 helyett — épp azon a vezérlőn, ami a 2.2.2 miatt kell.
       0,75-tel 4,83:1. */
    opacity: 0.75;
    transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
  }

  .hero-pause:hover,
  .hero-pause:focus-visible {
    opacity: 1;
    color: var(--always-dark-text);
  }
}

/* Az `animation-play-state` NEM öröklődik, ezért minden animált elemet külön
   fel kell sorolni — a .bolt-flash például a panelen BELÜL él, tehát a panelre
   tett szünet nem hat rá. (A .grid-bg.is-live korábban itt szerepelt, pedig
   nincs animációja: csak átmenete.) */
.hero.is-paused .circuit-panel,
.hero.is-paused .circuit-hint,
.hero.is-paused .circuit-flow,
.hero.is-paused .bolt-flash,
.hero.is-paused .aurora::before,
.hero.is-paused .aurora::after {
  animation-play-state: paused;
}


/* Programozottan fókuszált UGRÓCÉL: a <main> és a szakaszsáv célszakaszai.
   A `tabindex="-1"` csak azért van rajtuk, hogy a fókusz odavihető legyen —
   a látogató nem „tabolt rá", ezért fókuszgyűrű sem jár neki.

   FONTOS: a szelektor nem lehet általános `[tabindex='-1']:focus`. Az azonos
   specificitású (0,2,0), de KÉSŐBB álló szabályként némán kiütötte a
   `.form-status:focus-visible` gyűrűjét — pedig az űrlap beküldése után épp
   oda visszük a fókuszt, tehát a billentyűzetes látogató jelzés nélkül maradt
   volna. Ezért csak a valódi ugrócélokat soroljuk fel. */
main[tabindex='-1']:focus,
section[tabindex='-1']:focus,
article[tabindex='-1']:focus,
h2[tabindex='-1']:focus {
  outline: none;
}

/* Villám-villanás dekoráció */
.bolt-flash {
  animation: bolt-flash 6s var(--ease-in-out) infinite;
}

@keyframes bolt-flash {
  0%,
  86%,
  100% {
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(var(--brand-amber-rgb), 0.5));
  }
  88% {
    opacity: 1;
    filter: drop-shadow(0 0 26px rgba(var(--brand-amber-rgb), 1));
  }
  90% {
    opacity: 0.5;
  }
  92% {
    opacity: 1;
    filter: drop-shadow(0 0 34px rgba(var(--brand-amber-300-rgb), 1));
  }
}

/* ==========================================================================
   20. MOBIL: TELJES SZÉLESSÉG (faltól falig)
   --------------------------------------------------------------------------
   Telefonon a „doboz a dobozban” elrendezés pazarolja a helyet és zsúfoltnak
   hat: egy 390 px széles kijelzőn a kártya kerete, lekerekítése és külső
   margója együtt ~40 px-t vesz el a tartalomtól.

   Ezért 720 px alatt minden kártya, panel és mező elveszíti a keretét, a
   lekerekítését és a külső margóját, és a képernyő két széléig ér. A szekciók
   így összefüggő listákká állnak össze, vízszintes hajszálvonalakkal elválasztva
   — ez az a felépítés, amit a natív mobilalkalmazások is használnak.

   EGY kivétel van: a SZÖVEG megtartja a `--gutter` méretű vízszintes behúzást.
   A háttér és az elválasztó vonal megy faltól falig, a betű nem — mert a
   képernyő pereméhez tapadó szöveget a lekerekített kijelzősarok levágja, és
   olvasni is rossz.

   A technika mindenütt ugyanaz:
       margin-inline: calc(var(--gutter) * -1);   → kilóg a container padding alól
       padding-inline: var(--gutter);             → a szöveg visszakapja a behúzást
   ========================================================================== */

@media (max-width: 719.98px) {
  /* --- Rácsok: a kártyák közötti rés megszűnik, listává állnak össze --- */
  .grid-2,
  .grid-3,
  .grid-4,
  .stats,
  .accordion,
  .gallery,
  .choice-grid,
  .urgency {
    gap: 0;
  }

  /* --- Kártyák → teljes szélességű listasorok --- */
  /* Az elválasztó vonal az elem TETEJÉN van, nem az alján — és az első
     elemről lekerül. Így az utolsó elem alatt szerkezetileg soha nem lehet
     vonal, akkor sem, ha utána még jön valami (pl. egy gomb) a blokkban.
     Alsó vonallal ez minden ilyen esetben külön kivételt igényelt volna. */
  .card,
  .stat,
  .acc-item {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .card:first-child,
  .stat:first-child,
  .acc-item:first-child {
    border-top: 0;
  }

  /* Mobilon nincs hover — a kártya ne mozogjon és ne kapjon hátteret */
  .card:hover,
  .card:active {
    transform: none;
    background: transparent;
    box-shadow: none;
    border-color: var(--line);
  }

  /* Az utolsó kártya alatt akkor sincs vonal, ha a blokkban utána még jön
     egy gomb vagy más elem — mert a vonal a következő kártya tetején ülne. */

  /* A kiemelt „fő terület” kártyák mobilon is megtartják a ragyogást és az
     ikont, csak a keretük és a sorszámuk lesz visszafogottabb. */
  .quick {
    padding-block: 1.4rem;
  }

  .quick-num {
    top: 1.3rem;
    right: var(--gutter);
    font-size: 2.2rem;
  }

  .quick-glow {
    left: -30%;
    opacity: 0.7;
  }

  /* Ha egy .stack kártyákat tartalmaz, mobilon nem lehet köztük rés: a rés
     elszakítja az elválasztó vonalat az előző kártya aljától, és a vonal
     magában lebeg (a kapcsolati oldal „Kövessen minket" blokkja fölött pont
     ez történt). A kártyák így összefüggő listát alkotnak, mint a rácsokban. */
  .stack:has(> .card) {
    gap: 0;
  }

  /* A lista után következő gomb viszont kapjon levegőt */
  .stack:has(> .card) > .btn {
    margin-top: 1.35rem;
  }

  .card.is-spot::before {
    display: none;
  }

  /* A kiemelt kártya gradiens kerete helyett bal oldali márkasáv */
  .card.is-featured:not(:first-child) {
    border-top: 1px solid var(--line);
  }

  .card.is-featured {
    position: relative;
    border: 0;
    background: rgba(var(--brand-amber-rgb), 0.05);
  }

  .card.is-featured::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand-gradient-hard);
  }

  .acc-item.is-open {
    background: rgba(var(--brand-amber-rgb), 0.05);
    border-color: var(--line);
  }

  .acc-trigger,
  .acc-panel p {
    padding-inline: 0;
  }

  /* --- Vélemények: idézőjel-kártya helyett tagolt szövegblokk --- */
  .quote-foot {
    border-top-color: var(--line);
  }

  /* --- Galéria: KÉT OSZLOP, faltól falig ---

     Korábban egy oszlop volt, teljes szélességű képekkel. Az egy fotó
     képernyőnként azt jelentette, hogy hatvannégy referenciához hatvannégy
     képernyőnyi görgetés kell — és közben a lusta betöltés sem tudta tartani
     a tempót, tehát üres dobozok futottak át a képen.

     Két oszlopban egy csempe ~190 CSS-pixel: négyszer kevesebb görgetés, és
     a fotó is négyszer kisebb fájlból jön (a `srcset` 400 px-es jelöltje).

     A rács faltól falig megy, a csempék között hajszálnyi réssel — a keret és
     a saroklekerekítés elmarad, mert két oszlopnál azok tizenhat vonalat
     rajzolnának egy képernyőre. A mozaik önmagát tagolja. */
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    margin-inline: calc(var(--gutter) * -1);
  }

  .tile {
    border: 0;
    border-radius: 0;
  }


  /* --- Táblázat és kalkulátor --- */
  .table-wrap,
  .calc {
    margin-inline: calc(var(--gutter) * -1);
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .calc {
    padding: 0;
    border: 0;
    gap: 2rem;
  }

  .calc > .stack {
    padding-inline: var(--gutter);
  }

  .calc-result {
    border: 0;
    border-radius: 0;
    padding-inline: var(--gutter);
  }

  /* --- CTA-sáv: faltól falig, keret nélkül --- */
  .cta-band {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    border: 0;
    border-radius: 0;
  }

  /* --- Választható sorok (munkatípus, sürgősség) --- */
  .choice-grid,
  .urgency {
    grid-template-columns: 1fr;
    margin-inline: calc(var(--gutter) * -1);
  }

  .choice > span {
    position: relative;
    padding: 0.85rem var(--gutter);
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
    border-top: 1px solid var(--line);
    background: transparent;
  }

  .choice:first-child span {
    border-top: 0;
  }

  .choice input:checked + span {
    background: rgba(var(--brand-amber-rgb), 0.08);
    border-color: var(--line);
    box-shadow: none;
    color: var(--brand-amber);
  }

  .choice input:checked + span::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand-amber);
  }

  .urgency .u-sos input:checked + span {
    background: rgba(var(--danger-rgb), 0.1);
    box-shadow: none;
    color: var(--danger);
  }

  .urgency .u-sos input:checked + span::before {
    background: var(--danger);
  }

  /* --- Űrlap: minden mező egymás alatt, keret helyett alávonás --- */
  .form-row.is-2 {
    grid-template-columns: 1fr;
  }

  /* Egy oszlopban a sor két mezője ugyanolyan messze legyen egymástól, mint
     bármelyik másik két mező — különben a ritmus a sor közepén megbicsaklik. */
  .form-row {
    gap: 2.2rem;
  }

  /* A közelség-elv: az összetartozó dolgok legyenek KÖZELEBB egymáshoz, mint
     a nem összetartozók. Korábban a címke és a mezőszöveg közti optikai
     távolság (7 px rés + 13,6 px belső margó ≈ 21 px) NAGYOBB volt, mint a
     két mező közti 18–22 px — ezért folyt egybe az egész űrlap.
     Most: csoporton belül ~11 px, csoportok között 35 px. */
  .form {
    gap: 2.2rem;
  }

  .field {
    gap: 0.25rem;
  }

  .input,
  .textarea,
  .select-btn {
    padding-block: 0.45rem 0.8rem;
  }

  /* A választós blokkok (sürgősség, hozzájárulás) önálló egységek: föléjük
     vékony vonal kerül, hogy a szem lássa, hol kezdődik az új kérdés.

     A vonal `box-shadow`, nem `border-top`: a <legend> a fieldset keretéből
     kivágja a saját helyét, és a maradék vonal a felirat MELLETT futna
     tovább — pontosan az a csúnya csík, ami a képernyőképen látszott. */
  .form > fieldset,
  .form > .checkbox {
    padding-top: 1.5rem;
    box-shadow: inset 0 1px 0 var(--line);
  }

  /* --------------------------------------------------------------------
     Lépcsőzős űrlap: egyszerre EGY kérdés
     -------------------------------------------------------------------- */
  .js-ready .form.is-stepped .form-step {
    display: none;
  }

  .js-ready .form.is-stepped .form-step.is-current {
    display: grid;
    gap: 2.2rem;
    /* A lépésváltás iránya érezhető legyen, de ne lassítsa a kitöltést. */
    animation: step-in 0.28s var(--ease) both;
  }

  @keyframes step-in {
    from {
      opacity: 0;
      transform: translateX(1.25rem);
    }
  }

  .js-ready .form.is-stepped.is-back .form-step.is-current {
    animation-name: step-in-back;
  }

  @keyframes step-in-back {
    from {
      opacity: 0;
      transform: translateX(-1.25rem);
    }
  }

  /* --------------------------------------------------------------------
     Lépcsőzős űrlap a FELUGRÓ ABLAKBAN

     Az ablak EGYBEN görög: a cím, a haladásjelző, a kérdés és a léptető is a
     tartalommal együtt mozog. A korábbi három sáv (fix fejléc — görgő kérdés
     — ragadó léptető) egy telefonkijelzőn három versengő réteget adott, és a
     kérdés a maradék néhány centiméterben szorongott.

     Egyedül a BEZÁRÁS marad a képernyőn: az kell, hogy bármikor kiléphessen a
     látogató, akárhol tart a görgetésben.
     -------------------------------------------------------------------- */
  .modal-panel:has(.is-stepped) {
    display: block;
    max-height: none;
    overflow-y: auto;
  }

  .js-ready .modal-panel .form.is-stepped {
    display: grid;
    gap: 1.2rem;
  }

  .js-ready .modal-panel .is-stepped .form-step.is-current {
    align-content: start;
    /* A görgetősáv ne vágja le a fókuszgyűrűt a mezők szélén. */
    padding-inline: 2px;
    margin-inline: -2px;
  }

  /* A bezárás a képernyő jobb felső sarkában marad, függetlenül attól, hol
     tart a görgetés. A fejléc jobb oldali térköze tartja neki a helyet. */
  .modal-panel .modal-close {
    position: fixed;
    top: calc(0.9rem + env(safe-area-inset-top, 0px));
    right: var(--gutter);
    z-index: 6;
  }

  .modal-panel .modal-head {
    padding-right: 3.4rem;
  }

  /* Haladásjelző: hányadik lépés, mi a címe, és meddig jutott. */
  .js-ready .is-stepped .step-bar {
    display: grid;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
  }

  .step-count {
    margin: 0;
    color: var(--brand-amber);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .step-title {
    margin: 0;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .step-track {
    height: 4px;
    border-radius: var(--r-full);
    background: var(--line);
    overflow: hidden;
  }

  .step-track span {
    display: block;
    height: 100%;
    width: 20%;
    border-radius: inherit;
    background: var(--btn-primary-bg);
    transition: width 0.28s var(--ease);
  }

  /* Lépésnavigáció: a hüvelykujj közelében, egymás mellett. */
  .js-ready .is-stepped .step-nav {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    padding-top: 0.4rem;
  }

  .js-ready .is-stepped .step-nav[data-first] {
    grid-template-columns: 1fr;
  }

  .js-ready .is-stepped .step-nav[data-first] [data-step-prev] {
    display: none;
  }

  /* Az utolsó lépésen a küldés gomb veszi át a „Tovább" helyét. */
  .js-ready .is-stepped .step-nav[data-last] [data-step-next] {
    display: none;
  }

  /* Összegzés az utolsó lépésen: a küldés előtt egyben látszik minden. */
  .js-ready .is-stepped .step-summary.is-empty {
    display: none;
  }

  .js-ready .is-stepped .step-summary {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
  }

  .step-summary-title {
    margin: 0 0 0.7rem;
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .step-summary dl {
    display: grid;
    gap: 0.55rem;
    margin: 0;
  }

  .step-summary div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.6rem;
  }

  .step-summary dt {
    color: var(--muted);
    font-size: 0.78rem;
  }

  .step-summary dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
  }

  .step-summary button {
    grid-column: 2;
    /* 24 px a WCAG 2.5.8 minimuma: a felirat 0,76 rem-mel ~20 px magas volt,
       és öt-hat ilyen gomb sorakozik egymás alatt az összegzésben. A negatív
       vízszintes margó megtartja a jobbra zárt szöveget, miközben a
       koppintható terület nagyobb. */
    min-height: 24px;
    padding: 0 0.4rem;
    margin-inline: 0 -0.4rem;
    border: 0;
    background: none;
    color: var(--brand-amber);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  /* --------------------------------------------------------------------
     A sürgősség telefonon is FELCSÚSZÓ LAP, ugyanúgy, mint a
     szolgáltatásválasztó. Négy, egymás alatti kártya egy 390 px-es kijelzőn
     túl sok helyet vett el, és a mezők közé ékelődve összefolyt velük.
     JS nélkül a gomb rejtve marad, a lista pedig sima választólistaként
     látszik — a választás így is működik.
     -------------------------------------------------------------------- */
  .js-ready .urgency-btn {
    display: flex;
  }

  .js-ready .urgency {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-legordulo);
    max-height: min(70vh, 30rem);
    max-height: min(70svh, 30rem);
    margin-inline: 0;
    padding: 0 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1.25rem 1.25rem 0 0;
    background: var(--surface-solid);
    box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, 0.85);
    overflow-y: auto;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.3s;
  }

  .js-ready [data-urgency].is-open .urgency {
    visibility: visible;
    transform: translateY(0);
  }

  /* Fogantyú — ugyanaz a jelzés, mint a szolgáltatáslapon. */
  .js-ready .urgency::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 4px;
    margin: 0.6rem auto 0.5rem;
    border-radius: var(--r-full);
    background: var(--line-strong);
  }

  /* A lap mögötti fátyol a fieldset ::before-ja: nem kell hozzá JS-ből
     beszúrt elem, és a rajta érkező koppintás magán a fieldseten landol. */
  .js-ready [data-urgency]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-legordulo) - 1);
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
  }

  .js-ready [data-urgency].is-open::before {
    opacity: 1;
    visibility: visible;
  }

  .choice-ico {
    display: block;
  }

  /* A felcsúszó lapon belül: ikon balra, szöveg jobbra, ujjal nyomható sorok.

     `.urgency`-re SZŰKÍTVE. Enélkül a szabály az árkalkulátor
     `.choice-grid` sorait is elkapta: ott nincs `.choice-txt` burkoló, tehát
     a `row` irány az alcímet a cím MELLÉ tette (nem alá), a fix
     `padding-inline` pedig kiütötte a `var(--gutter)`-t, amitől a kalkulátor
     sorai más behúzást kaptak, mint a körülöttük lévő mezőcímkék.

     A `.urgency`-vel a specificitás (0,2,1) egyezik a 4343. sori
     alapszabályéval, és mivel ez később áll, az `align-items: center` végre
     tényleg érvényesül a lapon — eddig a `flex-start` nyert, és az ikon
     magasan ült a kétsoros felirat mellett. */
  .urgency .choice > span {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.25rem;
  }

  /* A kérdés és a hozzá tartozó lista közelebb kerül egymáshoz, mint a
     szomszédos blokkokhoz — ugyanaz a közelség-elv, mint a többi mezőnél. */
  .form > fieldset > .field-label {
    margin-bottom: 0;
    padding-bottom: 0;
  }


  /* Fókuszkor a mező ne tapadjon a ragadós fejléchez vagy a billentyűzethez:
     a böngésző ennyi levegőt hagy fölötte-alatta, amikor odagörget. */
  .input,
  .textarea,
  .select-btn,
  .choice > span {
    scroll-margin-block: 7rem 2rem;
  }

  .input,
  .select-btn {
    padding-inline: 0;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--mezo-keret);
    background: transparent;
  }

  .input:hover,
  .select-btn:hover {
    background: transparent;
  }

  .input:focus,
  .select-btn[aria-expanded='true'] {
    border-bottom-color: var(--brand-amber);
    background: transparent;
    box-shadow: none;
  }

  .input[aria-invalid='true'] {
    border-bottom-color: var(--danger);
    box-shadow: none;
  }

  /* A leírás doboz marad doboz: a hibát a KERETE jelzi, nem alávonás. */
  .textarea[aria-invalid='true'] {
    border-color: var(--danger);
    box-shadow: none;
  }

  /* Telefonon a mezők keret helyett ALÁVONÁSSAL jelennek meg, ezért a fókuszt
     is az alávonás jelzi: borostyán színűre vált és megvastagszik. A körvonal
     itt egy sárga dobozt rajzolna a mező köré, ami kilóg ebből a
     tipográfiai formanyelvből.
     A fókusz így is EGYÉRTELMŰEN látszik (szín + vastagság együtt), tehát a
     WCAG 2.4.7 teljesül — a jelzést nem elhagytuk, hanem lecseréltük. */
  .input:focus-visible,
  .select-btn:focus-visible {
    outline: none;
    border-bottom-color: var(--brand-amber);
    border-bottom-width: 2px;
    /* A vastagabb vonal ne mozdítsa el a szöveget — DE a kompenzáció csak az
       1 px KÜLÖNBSÉGET vonja le, nem írja felül az egész belső margót. Abszolút
       1 px-ként a mező 46,03 px-ről 35,23-ra csuklott össze, és az egész űrlap
       10,8 px-et ugrott minden koppintásra. */
    padding-bottom: calc(0.8rem - 1px);
  }

  /* A leírás mező az EGYETLEN kivétel az alávonásos stílus alól: itt több sort
     ír a látogató, és egy körberajzolt doboz mutatja meg, meddig tart a
     terület. Alávonással csak egy vonal jelezte, ami egy hosszú szövegnél
     semmit nem határol.

     FONTOS: ez a blokk a közös mezőszabályok UTÁN áll. Azonos specificitásnál
     a forrássorrend dönt — elé kerülve az alávonásos szabály némán felülírná. */
  .textarea {
    padding: 0.9rem 1rem;
    border: 1px solid var(--mezo-keret);
    border-radius: var(--r-sm);
    background: var(--surface);
    min-height: 11rem;
    field-sizing: content;
    max-height: 60vh;
    max-height: 60svh;
  }

  .textarea:focus-visible {
    outline: none;
    border-color: var(--brand-amber);
    box-shadow: 0 0 0 3px rgba(var(--brand-amber-rgb), 0.18);
  }

  /* --------------------------------------------------------------------
     A szolgáltatásválasztó telefonon ALULRÓL FELCSÚSZÓ LAP (bottom sheet)

     Egy tízelemű listát egy 390 px széles kijelzőn lebegő dobozként mutatni
     rossz kompromisszum: vagy kilóg, vagy görgetni kell benne, és közben a
     mögötte lévő űrlap is látszik. A telefonos konvenció a felcsúszó lap:
     alulról jön, a hüvelykujj közelében nyílik, és a fátyol egyértelművé
     teszi, hogy amíg nyitva van, csak ez a döntés van soron.
     -------------------------------------------------------------------- */
  .select-list {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: min(70vh, 32rem);
    max-height: min(70svh, 32rem);
    padding: 0 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, 0.85);
    transform: translateY(100%);
    /* Lassabb és „nehezebb" görbe, mint a legördülőé: egy nagy felület
       mozgása másképp hat, mint egy kis dobozé. */
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.3s;
  }

  .select-list.is-open {
    transform: translateY(0);
  }

  /* Fogantyú: ránézésre elárulja, hogy ez egy lehúzható lap. */
  .select-list::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 4px;
    margin: 0.6rem auto 0.5rem;
    border-radius: var(--r-full);
    background: var(--line-strong);
  }

  /* Ujjal nyomható tételek. */
  .select-list li {
    padding: 0.95rem 1.25rem;
    border-radius: 0;
  }

  /* A lap mögötti fátyol. A `.select` ::before-ja, tehát nem kell hozzá
     JS-ből beszúrt elem; a rajta érkező koppintás magán a wrapperen landol,
     és a modul abból tudja, hogy zárni kell. */
  .select::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-legordulo) - 1);
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
  }

  .select.is-open::before {
    opacity: 1;
    visibility: visible;
  }

  /* --- Modal: teljes képernyős lap, nem lebegő doboz --- */
  .modal {
    padding: 0;
  }

  .modal-panel {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 1.5rem var(--gutter) 2.5rem;
    border: 0;
    border-radius: 0;
  }

  .modal-panel::before {
    border-radius: 0;
  }

  /* --- Süti-sáv: alsó, teljes szélességű csík --- */
  .cookie {
    left: 0;
    right: 0;
    /* Nem a műveletsáv fölé: amíg a tájékoztató nyitva van, a műveletsáv
       elbújik, tehát a sáv a képernyő aljára ülhet. */
    bottom: 0;
    width: 100%;
    padding: 1.15rem var(--gutter) calc(1.15rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1.35rem 1.35rem 0 0;
  }

  /* Amíg a süti-tájékoztató látszik, a hívás/ajánlatkérés sáv nem: két
     egymásra torlódó réteg a hüvelykujj sávjában zsúfolt és félreüthető. */
  body.suti-nyitva .action-bar {
    transform: translateY(130%);
    visibility: hidden;
  }

  /* A névtábla a kép FÖLÉ kerül, külön sorba. Telefonon a hívás és az
     ajánlatkérés az alsó műveletsávban mindig kéznél van, ezért a portré
     fölött nem gombok állnak, hanem az, hogy KI látható a képen. */
  .portrait {
    display: flex;
    flex-direction: column;
  }

  .portrait-cap {
    position: static;
    order: -1;
    margin-bottom: 1.1rem;
  }

  /* --- Galéria szűrői: egysoros, húzható sáv ---------------------------
     Tördelve a hét gomb két-három sort foglalt, és minden szűrés után
     átrendeződött — a lap alatta ugrált. Egyetlen sorban, vízszintesen
     görgetve viszont ugyanaz a viselkedés, mint a szakaszsávban: a
     megnyomott gomb a második helyre csúszik, és a felirat sosem törik
     ketté. A negatív külső margó a képernyő széléig engedi a sávot, a belső
     térköz pedig visszaadja a szöveg igazítását. */
  /* Ez a szabály KORÁBBAN kétszer szerepelt ugyanebben a médialekérdezésben,
     átfedő tulajdonságokkal; a régebbi, hiányosabb példány törölve, az egyetlen
     hasznos többlete (`padding-bottom`) ide került. */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;

    /* HELY AZ AKTÍV CHIP FÉNYÉNEK, A GÖRGETŐN BELÜL.

       Az `overflow-x: auto` a FÜGGŐLEGES tengelyt is vágóvá teszi: a CSS
       szerint ha az egyik tengely nem `visible`, a másik `visible` értéke
       `auto`-ra számítódik. A sáv 49 px magas volt, a chip 43 — a kijelölt
       chip borostyán fénye (`0 8px 26px -10px`) viszont ~11 px-t kíván
       alatta. Ezért a fény nem elhalványodott, hanem EGYENES VONALBAN
       elvágódott a sáv alján.

       A belső térköz ad neki helyet. FÖLÜL negatív külső margó veszi vissza,
       mert ott a fény nem lóg ki (az eltolás lefelé megy, a `spread` pedig
       negatív) — ott csak a fókuszgyűrűnek kell pár képpont. ALUL viszont
       NINCS negatív margó: azzal a galéria felkúszna a fény alsó felére, és
       ugyanúgy elvágná, csak egy másik éllel. A sáv így ~14 px-szel magasabb
       — pont annyival, amennyit a fény kér. */
    padding-block: 6px 20px;
    /* A `margin-block` RÖVIDÍTÉS az alsó értéket is állítja, tehát kiütötte az
       alapszabály `margin-bottom: 2.2rem`-ét, és a chipsor a galériához ért.
       Külön írva mindkettő a szándék szerint viselkedik. */
    margin-top: -6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline-start: var(--gutter);
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex: none;
    white-space: nowrap;
  }

  /* A „jelenleg tárolva” jelző a SAJÁT SORÁBA kerül, a szöveggel egy
     vonalban. Inline elemként a felsorolás szövege után sodródott — telefonon
     viszont a hosszú sor úgyis megtörik, tehát a jelző külön sorba került, és
     ott a 0,35 rem-es bal margója miatt 5,6 px-cel BELJEBB lógott a szövegnél,
     mintha véletlenül csúszott volna oda. Blokként a `<li>` tartalomdobozának
     bal széléhez igazodik — pontosan oda, ahol a szöveg is kezdődik (a
     rombusz-jelölő abszolút pozicionált, nem tolja el). */
  .storage-state {
    display: flex;
    width: fit-content;
    margin-left: 0;
    margin-top: 0.5rem;
  }

  /* --- Általános segédosztály: mobilon elrejtett blokk --- */
  .is-mobile-hidden,
  .divider.no-mobile {
    display: none;
  }

  /* --- Rólunk oldal: a portré érjen a következő szekcióhoz --- */
  /* A hullám és a szekció alsó térköze is elmarad, a névsáv így közvetlenül
     a következő szekció tetejéhez csatlakozik. A `main >` előtag azért kell,
     hogy megelőzze a `.section:has(+ .divider)` szabályt — az is 0,2,0. */
  main > .section.is-portrait {
    padding-bottom: 0;
  }

  /* A profilkép feljebb kerül: a szöveg és a kép közötti rés összébb húzva */
  .is-portrait .split {
    gap: 1.1rem;
  }

  /* Telefonon a vélemények maradnak a megszokott, egymás alatti listában —
     a vízszintes szalag csak asztali nézetben van értelmezve. A szalag
     minden viselkedése ki van kapcsolva, a klónozott kártyák pedig
     elrejtve, hogy ne duplázódjanak a vélemények. */
  .quote-rail {
    width: auto;
    padding-block: 0;
    /* A szalag a containeren kívül van, ezért mobilon ő adja a belső térközt —
       a kártyák negatív margója erre számít. */
    padding-inline: var(--gutter);
    margin-block: 0;
    margin-inline: 0;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .marquee {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .marquee::-webkit-scrollbar {
    display: none;
  }

  /* A mozgást telefonon a JS vezeti a görgetési pozíción át (setupTouchMarquee),
     hogy az ujj bármikor bele tudjon nyúlni — a CSS-animáció itt kikapcsol. */
  .marquee-track {
    animation: none;
  }

  .quote-rail-track {
    display: block;
    width: auto;
    animation: none;
  }

  .quote-rail-track > [aria-hidden='true'] {
    display: none;
  }

  .quote-rail .quote,
  .quote-rail.is-cards .card {
    width: auto;
    height: auto;
  }

  /* Telefonon a kártyák egymás alá kerülnek, a szalag nem fut. */
  .quote-rail.is-cards .quote-rail-track {
    display: grid;
    gap: 0.9rem;
  }

  /* A VIDEÓSZALAG TELEFONON MÁS, MINT A VÉLEMÉNYSZALAG.

     A vélemény egymás alatti listaként is olvasható — a videókártya viszont
     álló, 9:16-os: tíz darab egymás alatt fél kilométer görgetés lenne. Itt
     ezért marad a vízszintes sáv, csak nem magától fut, hanem UJJAL húzható,
     kártyánként pattanó megállással.

     Miért nem fut magától telefonon: a kártya kattintható. Mozgó célpontot
     hüvelykujjal eltalálni bosszantó, és a rossz koppintás rossz videót nyit
     meg — asztalin ezt az egér ráhúzása oldja meg, érintésen nincs ilyen. */
  .quote-rail.is-tiktok {
    padding-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .quote-rail.is-tiktok::-webkit-scrollbar {
    display: none;
  }

  .quote-rail.is-tiktok .quote-rail-track {
    display: flex;
    /* `max-content`: a sáv a kártyák együttes szélességét veszi fel, ez adja
       a görgethetőséget. A fenti általános szabály `auto`-ra állítja. */
    width: max-content;
    gap: 0.75rem;
    /* A szegély-térköz a PÁLYÁN van, nem a sávon: így az utolsó kártya után is
       marad levegő, és az első sem tapad a képernyő szélére. */
    padding-inline: var(--gutter);
  }

  .quote-rail.is-tiktok .tiktok-card {
    /* Telefonon szándékosan kilóg a második kártya széle a képernyőről: ez
       mutatja, hogy van tovább. Egy pont a szélességbe illő kártya azt
       sugallná, hogy ennyi az egész. */
    width: clamp(158px, 46vw, 196px);
    scroll-snap-align: center;
  }

  /* --- TIKTOK: TELEFONON DOBOZ, NEM SZALAG ---

     A videószalag asztali megjelenés: tíz álló kártya körbefutó mozgással,
     helyben induló lejátszóval. Telefonon ennek nincs értelme — ott a TikTok
     APP a jobb hely: nagyobb, gyorsabb, és a látogató ott van bejelentkezve,
     tehát egy koppintással követni is tud. Ezért a szalag helyére EGY kiemelt
     doboz kerül, ami átvisz a profilra.

     A szalag `display: none`, nem `visibility: hidden`: így a tíz borítókép
     le sem töltődik telefonon. A szüneteltető gomb és a forrás-hivatkozás is
     megy vele — mindkettő a szalagra vonatkozik, ami itt nincs. */
  #videok .quote-rail.is-tiktok,
  #videok .rail-controls,
  .tiktok-sources {
    display: none;
  }

  /* UGYANAZ A SÁV, MINT A KAPCSOLATI OLDAL SÜRGŐSSÉGI BLOKKJA: telefonon
     FALTÓL FALIG megy, saroklekerekítés és oldalsó keret nélkül. A `.container`
     vízszintes térközét negatív külső margóval oltjuk ki, és belső térközként
     adjuk vissza — így a háttér a képernyő széléig ér, a szöveg mégis a rácson
     marad. Ez a mobil nézet általános szabálya minden tömör blokkra.

     A SZÍN viszont nem ugyanaz: ott a piros azt jelenti, hogy vészhelyzet —
     ezt a jelentést nem hígítjuk fel egy közösségimédia-sávval. Itt a márka
     sárgája viszi ugyanazt a kiemelést. */
  .tiktok-box {
    position: relative;
    display: grid;
    gap: 0.9rem;
    margin-top: clamp(1.25rem, 5vw, 1.75rem);
    margin-inline: calc(var(--gutter) * -1);
    padding: clamp(1.1rem, 4.5vw, 1.4rem) var(--gutter);
    border-block: 1px solid rgba(var(--brand-amber-rgb), 0.3);
    border-inline: 0;
    border-radius: 0;
    background: linear-gradient(100deg, rgba(var(--brand-amber-rgb), 0.12), rgba(var(--brand-amber-rgb), 0.04) 55%, transparent);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
  }

  /* Bal oldali jelzősáv — ugyanaz a fogás, mint a sürgősségi doboznál. */
  .tiktok-box::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand-amber);
  }

  .tiktok-box-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    background: rgba(var(--brand-amber-rgb), 0.16);
    color: var(--brand-amber);
  }

  .tiktok-box-ico svg {
    width: 23px;
    height: 23px;
  }

  .tiktok-box-txt strong {
    display: block;
    margin-bottom: 0.25rem;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 1.02rem;
    letter-spacing: -0.015em;
  }

  .tiktok-box-txt > span {
    display: block;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
  }

  /* A gomb SPAN, nem gomb: a kattintható elem maga a doboz. Egy `<button>`
     vagy `<a>` idebent beágyazott vezérlő volna a linkben — érvénytelen
     jelölés, és a képernyőolvasó két külön célt jelentene ott, ahol egy van. */
  .tiktok-box-btn {
    width: 100%;
    pointer-events: none;
  }

  .tiktok-box-btn svg {
    width: 18px;
    height: 18px;
  }

  .tiktok-box:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }

  /* --- Kapcsolati / területi sáv: teljes szélességű lista --- */
  /* Mobilon lista lesz belőle: külső keret nélkül, csak a tételek KÖZÖTT
     elválasztóval — ugyanaz a szabály, mint a többi listánál. */
  .contact-strip {
    margin-inline: calc(var(--gutter) * -1);
    /* A hézag-alapú elválasztók ITT IS maradnak: a rács `auto-fit`-es, tehát
       460 px-től két, 690-től három hasáb áll ebben a blokkban is. A korábbi
       `border-top`-os megoldás emiatt épp fordítva sült el: a sor első eleme
       fölött nem volt vonal, a másodikéra viszont a doboz tetején lógott egy
       fél szélességű hajszálvonal, a szomszédos elemek közé pedig semmi nem
       került. Csak a külső keret és a lekerekítés kerül le, faltól falig. */
    border: 0;
    border-radius: 0;
  }

  .contact-strip > li {
    padding-inline: var(--gutter);
  }


  /* ==================================================================
     FALTÓL FALIG MENŐ BLOKKOK: NINCS KÖZTÜK ÜRES SÁV

     Telefonon ezek a blokkok a képernyő két széléig érnek (lásd a 20.
     szekciót): `.card`, `.stat`, `.acc-item`, `.tile`, `.table-wrap`,
     `.calc`, `.cta-band`, `.choice-grid`, `.urgency`, `.filters`,
     `.contact-strip`, `.sos-band`, `.portrait-cap`.

     Ahol két ilyen blokk követi egymást, a szakaszok belső térköze üres,
     sötét csíkot ékel közéjük — az nem térköznek látszik, hanem
     SZAKADÁSNAK: a képernyő két széléig érő doboz alatt a levegő nem
     tagol, hanem elvág.

     EZ EGY HELYEN DŐL EL, nem oldalanként. Mérve mind az öt olyan oldalon,
     ahol CTA-sáv zár (főoldal, szolgáltatások, árak, referenciák, rólunk):
     pontosan 48 px volt a sáv fölött, mindig az ELŐZŐ szakasz alsó
     térköze — a CTA szakasza már eleve 0-s (`is-tight is-cta`).

     MIÉRT `:has()`: a CSS-ben nincs „előző testvér” választó. A `:has()` nem
     „megbocsátó”, ezért KÜLÖN szabályban áll; ha a böngésző nem ismeri
     (Safari 15.4 alatt), csak a régi térköz marad — semmi nem törik el.

     Ha egy jövőbeli szakasz SZÖVEGGEL zárul a CTA-sáv előtt, annak kell majd
     visszaadni a térközt — nem ennek a szabálynak a helye kivételt tenni. */
  /* A ZÁRÓ LEVEGŐ A BLOKKON BELÜL VAN, nem a blokkok között.

     Alap: a szakasz megtartja az alsó térközét. Ez kell oda, ahol LAZA
     tartalom zár — egy gomb, egy bekezdés, vagy egy felsorolás utolsó sora —,
     mert az magától nem hoz levegőt, és a következő sáv a gomb aljához
     csapódna. */
  .section:has(+ .divider),
  .section:has(+ .section.is-cta) {
    padding-bottom: clamp(1.75rem, 6vw, 2.5rem);
  }

  /* KIVÉTEL: ha a szakaszt TÖMÖR, faltól falig menő doboz zárja — kártya,
     galéria, kapcsolati sáv, kalkulátor —, akkor a doboz MAGA a lezárás: van
     saját kerete és belső térköze, tehát érjen a következő sávhoz. Alá tett
     levegő ott nem tagolna, hanem szakadásnak látszana.

     A `.card:last-child` leszármazottként szerepel, mert a kártya többnyire
     rácsban vagy kéthasábos elrendezésben áll, nem közvetlenül a
     `.container` alatt. */
  /* A TikTok-sáv a videószakaszt zárja telefonon (a szalag ott rejtve van),
     és ugyanúgy faltól falig megy, mint a lista-blokkok — tehát alá sem kell
     levegő: a sáv MAGA a lezárás, érjen a hullámhoz. */
  .section:has(+ .divider):has(> .container > .tiktok-box:last-child),
  .section:has(+ .divider):has(> .container > .contact-strip:last-child),
  .section:has(+ .divider):has(> .container > .gallery:last-child),
  .section:has(+ .divider):has(> .container > .calc:last-child),
  .section:has(+ .divider):has(> .container > :last-child .card:last-child),
  .section:has(+ .section.is-cta):has(> .container > .contact-strip:last-child),
  .section:has(+ .section.is-cta):has(> .container > .gallery:last-child),
  .section:has(+ .section.is-cta):has(> .container > .calc:last-child),
  .section:has(+ .section.is-cta):has(> .container > :last-child .card:last-child),
  /* A vélemény-szalag a `.container`-en KÍVÜL áll (a teljes szélesség miatt),
     ezért a fenti `> .container >` utak nem érik el — pedig faltól falig menő
     kártyák zárják a szakaszt. */
  .section:has(+ .divider):has(> .quote-rail:last-child),
  .section:has(+ .section.is-cta):has(> .quote-rail:last-child) {
    padding-bottom: 0;
  }

  /* Ugyanez a helyzet a LAP ALJÁN: ha az utolsó szakasz faltól falig menő
     blokkal zárul, alá nem kell levegő — a lábléc saját felső térköze
     (3–5 rem) adja meg. A `.is-flush` a negyedik osztály a szelektorban,
     tehát (0,4,1); a fölötte álló „utolsó szakasz” szabály (0,3,1), így ez
     sorrendtől függetlenül nyer.

     Ma egyetlen oldal él vele: a Kapcsolat, ami telefonon a sürgősségi
     sávval ér véget (a beágyazott űrlap ott rejtve van). */
  main > .section.is-flush:last-child:not(.is-cta) {
    padding-bottom: 0;
  }

  /* --- Sürgősségi sáv --- */
  .sos-band {
    flex-direction: column;
    align-items: flex-start;
    /* A felső margó (1,25 rem) telefonon elmarad: itt a sáv és a fölötte lévő
       kapcsolati lista is FALTÓL FALIG megy, tehát a köztük lévő 20 px egy
       üres, sötét csík volt két teljes szélességű blokk között — nem térköz,
       hanem szakadás. Egymáshoz érve a kettő egy összefüggő listaként
       olvasódik, ugyanúgy, mint a mobil nézet többi faltól falig blokkja. */
    margin-top: 0;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    border-inline: 0;
    border-radius: 0;
  }

  .sos-btn {
    width: 100%;
  }

  /* --- Rólunk oldal portréja --- */
  /* A névtábla telefonon a kép FÖLÉ kerül, teljes szélességű sávként (az
     `order: -1`-et a fenti, „a kép fölé" szabály adja). Itt csak a sáv
     megjelenése áll be: keret és üveghatás nélkül, faltól falig.

     A korábbi komment még „a kép ALÁ" elrendezést írt le — az a szándék
     azóta megfordult, a szabály viszont ottmaradt, és félrevezetett. */
  .portrait-cap {
    position: static;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.85rem var(--gutter);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
  }

  /* --- A hero CTA-gombjai kimaradnak: ugyanez a két művelet fixen ott van a
         képernyő alján (.action-bar), így csak duplikáció lenne.

         KIVÉVE, ahol az alsó sáv NEM ugyanazt viszi: a 404-es oldalon a
         „Vissza a főoldalra” gomb az egyetlen kifelé vezető út a `<main>`-ben,
         a műveletsávban pedig hívás és ajánlatkérés áll. Enélkül telefonon a
         lap „pár kattintással helyrehozzuk”-ot ígért, közben elrejtette a
         hazavezető linket. --- */
  .hero-actions:not(.is-mobile-kept) {
    display: none;
  }

  /* Minden szekció-címke („Átlátható árazás”, „Vélemények”, „Kezdjük el” stb.)
     kimarad. Kis kijelzőn ezek a lekerekített pirulák csak lefelé tolják a
     lényeget, és nem mondanak semmit, amit a címsor ne mondana el. */
  .eyebrow {
    display: none;
  }

  /* A badge marad, mert információt hordoz („Becsült ársáv”, „Sürgős?”), de
     leveszi a pirula-formát: sima, kis nagybetűs felirat lesz belőle.
     A színváltozatokat is felül kell írni, különben a hátterük teljes
     szélességű színes sávvá nyúlna. */
  .badge,
  .badge.is-amber {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--brand-amber);
    text-transform: uppercase;
  }

  /* --- Szekciók: kicsit szorosabb függőleges ritmus --- */
  .section {
    padding-block: clamp(3rem, 11vw, 4.5rem);
  }

  .sec-head {
    margin-bottom: 2rem;
  }

  /* A SZAKASZCÍM ÉS A BEVEZETŐ KÖZÉ LEVEGŐ KELL.

     A `h2` alsó margója 0, a `.lead` felsője is — a bekezdés első sora tehát
     KÖZVETLENÜL a címsor alá kerül. Mérve mind az öt oldalon: 0 px, mindenhol.
     Két soros címnél még elmegy, háromsorosnál viszont a leszálló szárak (a
     „és környéke” y-ja és é-je a Rólunk oldalon) szinte hozzáérnek a
     bekezdéshez.

     Csak telefonon: nagy képernyőn a címsor 54 px-es, ott az arányosan
     nagyobb sorköz elvégzi ugyanezt. */
  .sec-head h2 + p {
    margin-top: 0.75rem;
  }

  /* A KAPCSOLATI OLDAL beágyazott ajánlatkérő űrlapja TELEFONON NEM JELENIK
     MEG — sem a szakaszcíme, sem maga az űrlap.

     ÜGYFÉLKÉRÉS: a képernyő alján fixen ott a műveletsáv „Ajánlatkérés”
     gombja, ami ugyanezt az űrlapot nyitja meg ablakban. Telefonon tehát a
     lapba ágyazott másodpéldány csak egy végtelen görgetést tett a
     kapcsolati adatok mögé — a látogató kétszer találkozott ugyanazzal.

     Az oldal így telefonon az elérhetőségekről és a sürgős hívásról szól, az
     ajánlatkérés pedig egyetlen, mindig kéznél lévő gombra egyszerűsödik.

     A `display: none` a fókuszsorrendből is kiveszi, tehát billentyűzettel
     sem lehet egy láthatatlan űrlapba tabolni. Az ablakban lévő példány
     (`prefix=f`) érintetlen — ez itt a `prefix=k` példány. */
  .sec-head.is-form-head,
  .sec-head.is-form-head + form[data-contact-form] {
    display: none;
  }

  /* ------------------------------------------------------------------
     Szekció-illesztések: a hullámos elválasztó veszi át a térköz szerepét

     Nagy képernyőn a bőséges szekció-térköz ritmust ad. Telefonon viszont
     ugyanaz a térköz + a hullám magassága + a következő szekció felső
     térköze együtt gyakran 300 px-nyi üres sávot adott ki — a látogató
     addig görget, hogy „elromlott-e valami”. Ezért ahol hullám van, ott az
     alatta-fölötte lévő térköz kimarad: a hullám maga AZ elválasztás.
     ------------------------------------------------------------------ */

  /* A HULLÁM TELEFONON KIMARAD — mert nem látszik.

     Lemérve: a sima `.divider` útvonala `--bg`-vel van kitöltve, a saját
     háttere pedig átlátszó, tehát szintén a lap hátterét mutatja — a teljes
     elem egyetlen, egyszínű fekete sáv. Az `is-alt` változat útvonala
     rgb(10,16,25) a rgb(5,7,12) fölött: a különbség telefonon nem olvasható.
     Ami tehát marad belőle, az szakaszhatáronként 38 px ÜRES GÖRGETÉS — a
     szolgáltatások oldalán öt ilyen van, együtt közel 200 px.

     Az átmenetet így a HÁTTÉRVÁLTÁS adja (`is-alt`): az `is-alt` szakasz sávja
     pontosan ott kezdődik, ahol az előző faltól falig menő blokk véget ér. Ez
     tisztább jel, mint egy nem látszó hullám.

     A `.divider + .section` felső térköze MARAD: az a saját sávjának belső
     levegője (hogy a címsor ne tapadjon a határhoz), nem a két blokk közötti
     rés. Az elem `aria-hidden`, tehát az elrejtése semmit nem vesz el a
     képernyőolvasótól. */
  .divider {
    display: none;
  }

  .divider + .section {
    padding-top: clamp(2rem, 7vw, 2.75rem);
  }

  /* A lábléc oszlopai alatti záróvonal mobilon elmarad — a lista ott amúgy is
     egymás alatt fut, a vonal csak bekeretezné. */
  .footer-grid {
    border-bottom: 0;
    padding-bottom: 1.25rem;
  }

  /* Az utolsó szekció és a lábléc érjen össze. Szöveggel záruló oldalon
     marad egy kis levegő, hogy a bekezdés ne tapadjon a lábléchez —
     de a CTA-sávos szekciót ki kell zárni (`:not(.is-cta)`), különben ez a
     szabály felülírná az alatta lévőt: mindkettő specificitása 0,2,1, és
     akkor a később jövő nyer. Pontosan ez ékelt be egy 28 px-es fekete
     csíkot a CTA-sáv és a lábléc közé. */
  main > .section:last-child:not(.is-cta) {
    padding-bottom: clamp(1.75rem, 6vw, 2.5rem);
  }


  /* A CTA-sáv saját belső térközzel dolgozik — a szekció ne toldjon rá még
     egyet, különben fölötte-alatta holt sáv keletkezik. */
  main > .section.is-cta {
    padding-block: 0;
  }

  /* ------------------------------------------------------------------
     Táblázatok: oldalra görgetés helyett egymás alatti sorok

     Egy 390 px széles kijelzőn három oszlop nem fér el, és a vízszintes
     görgetés a legrosszabb megoldás: a látogató nem is látja, hogy van még
     tartalom jobbra. Ezért minden sorból egy blokk lesz — cím, leírás, ár
     egymás alatt. A `data-label` attribútummal ellátott celláknál az
     oszlop neve is megjelenik, hogy a fejléc elvesztése ne okozzon zavart.
     ------------------------------------------------------------------ */

  .table-wrap {
    overflow-x: visible;
  }

  .price-table thead {
    display: none;
  }

  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td {
    display: block;
    width: auto;
  }

  .price-table tr {
    padding: 0.95rem var(--gutter);
    border-top: 1px solid var(--line);
  }

  .price-table tbody tr:first-child {
    border-top: 0;
  }

  /* A kártyás nézetben minden sor egymás alatt fut: a jobbra igazítás ott
     értelmét veszti, mert nincs mihez képest jobbra igazodni. */
  .price-table.is-short-last td:nth-child(3),
  .price-table.is-short-last thead th:nth-child(3) {
    text-align: left;
  }

  .price-table th,
  .price-table td {
    padding: 0;
    border: 0;
    /* A kártyás nézetben a cella a kijelző teljes szélessége: egy hosszú URL
       itt is kilógna, ha nem törhetne bárhol. */
    overflow-wrap: anywhere;
  }

  .price-table th[scope='row'] {
    margin-bottom: 0.2rem;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
  }

  .price-table td {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .price-table td + td {
    margin-top: 0.35rem;
  }

  /* Az árlistában az utolsó cella az ár — ez a sor lényege, ezért kiemelve.
     A megkülönböztetés a TÁBLÁZAT típusa (`.is-fix` = jogi), nem a
     `data-label` jelenléte: az árlista celláinak is kell oszlopnév telefonon,
     ahol a fejléc eltűnik, de az ár-tipográfiát meg kell tartaniuk. */
  .price-table:not(.is-fix):not(.is-text-last) td:last-child {
    margin-top: 0.45rem;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-amber);
  }

  /* Ahol a fejléc elvesztése zavaró lenne, kiírjuk az oszlop nevét */
  .price-table td[data-label] {
    color: var(--text-2);
  }

  .price-table td[data-label]::before {
    content: attr(data-label) ': ';
    color: var(--muted);
    font-weight: 600;
  }
}

/* --- Mobil menü: a menüpontok nem dobozok, hanem listasorok --- */

@media (max-width: 1119.98px) {
  .nav {
    padding-inline: 0;
  }

  .nav-list {
    flex: 0 0 auto;
    gap: 0;
    max-height: none;
    margin-block: 0;
    justify-content: flex-start;
  }

  .nav-link {
    padding: 0.95rem var(--gutter);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }

  .nav-list li:first-child .nav-link {
    border-top: 0;
  }

  /* Az `[aria-current]` szabály AZONOS specificitású (0,2,0) és később áll,
     tehát alapszabályként elnyelné ezt: a jelenlegi oldal menüsora volt az
     egyetlen, ami koppintásra nem adott visszajelzést. */
  .nav-link:hover,
  .nav-link:active,
  .nav-link[aria-current='page']:hover,
  .nav-link[aria-current='page']:active {
    background: var(--surface);
    border-color: var(--line);
  }

  .nav-link[aria-current='page'] {
    position: relative;
    background: rgba(var(--brand-amber-rgb), 0.07);
    border-color: var(--line);
  }

  .nav-link[aria-current='page']::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand-amber);
  }

  .nav-ico {
    border: 0;
    border-radius: 0;
    background: none;
    width: 26px;
    height: 26px;
  }

  .nav-foot {
    margin-top: auto;
    padding-inline: var(--gutter);
  }
}

/* ==========================================================================
   21. AKADÁLYMENTESSÉG / REDUCED MOTION / NYOMTATÁS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Windows nagy kontraszt (forced-colors)

   Ebben a módban a rendszer FELÜLÍRJA a háttereket és a kereteket, tehát a
   kiválasztott állapotot jelző saját színeink eltűnnek. A rendszer saját
   `Highlight` színével rajzolunk körvonalat — azt a mód nem írja felül.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .choice input:checked + span,
  .filter-btn[aria-pressed='true'],
  .select-list li[aria-selected='true'],
  .section-nav a.is-active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  /* A szünet gombok állapota is látszódjon */
  [data-rail-pause][aria-pressed='true'],
  [data-hero-pause][aria-pressed='true'] {
    outline: 2px solid Highlight;
  }

  /* A JELENLEGI OLDAL a fő navigációban. A szakaszsáv aktív tétele meg volt
     oldva, a menü nem: asztalin a jelölés egy színátmenetes aláhúzás
     (`::after`), telefonon egy borostyán sáv (`::before`) — mindkettő HÁTTÉR,
     tehát itt nyomtalanul eltűnik. A szövegszín sem segít: az aktuális és a
     többi menüpont egyaránt `LinkText`-re esik. A gyengénlátó, de LÁTÓ
     felhasználó így nem tudta, melyik oldalon áll. */
  .nav-link[aria-current='page'] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  /* --- Ami `background`-gal RAJZOL, az kényszerített színmódban eltűnik ---

     A böngésző ilyenkor minden hátteret a rendszer `Canvas` színére ír át, a
     `currentColor` sem menti meg. Ami tehát háttérrel rajzol egy alakzatot,
     az láthatatlan lesz — nem halványabb, hanem SEMMI. Ezeknek kimondjuk a
     rendszer szövegszínét. */
  /* A hullám-elválasztó kényszerített színmódban TÖMÖR sávvá válna: a
     kitöltése `currentColor`, ami itt `CanvasText`-re esik — a finom
     átvezetés helyett a lap leghangsúlyosabb eleme lenne. Dekoratív és
     `aria-hidden`, tehát elhagyható; a szakaszhatárt a rendszer saját
     kontrasztja adja. */
  .divider {
    display: none;
  }

  .burger-lines span,
  .acc-icon::before,
  .acc-icon::after,
  .storage-state::before {
    background-color: CanvasText;
  }

  /* A süti-kártyát csak `box-shadow` határolta el, ami itt `none` lesz — a
     világos kártya (LOCKED_DECISIONS 5.) beleolvadt volna a lapba, és ez az
     első, amit a látogató lát. */
  .cookie {
    border: 1px solid CanvasText;
  }

  /* A csúszka sínje `linear-gradient`, tehát nyomtalanul eltűnik: a kalkulátor
     fogantyúja a semmiben lebegett, és nem látszott, meddig húzható. */
  input[type='range'] {
    border: 1px solid CanvasText;
    border-radius: var(--r-full);
  }

  /* A kapcsolati sáv elválasztói RÁCSHÉZAGOK, amikben a doboz háttere látszik
     — ugyanaz a helyzet, mint nyomtatásban. A háttérszínt a mód lecseréli,
     RENDSZERSZÍN-kulcsszót viszont nem ír felül (ezt a fenti hamburger-javítás
     is kihasználja), tehát elég a doboz hátterét CanvasText-re állítani. Így a
     hézag marad 1 px — szegélyre váltva a szomszédos tételek kerete összeért
     volna, és a hajszálvonal 2 px-esre hízik. */
  .contact-strip {
    background-color: CanvasText;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero h1 .line > span {
    transform: none;
  }

  .aurora,
  .cursor-glow,
  .noise {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   NYOMTATÁS

   Az oldal sötét témára készült: 75 helyen áll explicit, világos szövegszín.
   A böngésző nyomtatáskor a HÁTTERET alapból elhagyja, a színeket viszont
   nem — a korábbi `body { color: #000 }` ezeket nem érte el, és a kinyomtatott
   lapon a bekezdések nagy része halványszürke maradt, a színátmenetes
   címszavak pedig FEHÉREN (tehát sehogy).

   Ezért itt a TOKENEKET írjuk át, nem az elemeket: így minden komponens
   automatikusan követi, és nem kell egyenként utánamenni.

   Az adatkezelési tájékoztatót és az impresszumot szokták kinyomtatni —
   éppen az a két oldal, ahol a legtöbb `.muted` bekezdés van.
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --bg: #fff;
    --bg-2: #fff;
    --text: #000;
    --text-2: #1a1a1a;
    --muted: #3a3a3a;
    --line: #ccc;
    --line-strong: #999;
    --surface: transparent;
    --surface-2: transparent;
    --surface-solid: #fff;
    --always-dark: #fff;
    --always-dark-2: #fff;
    --always-dark-text: #000;
    --always-dark-muted: #3a3a3a;
    --always-dark-line: #ccc;
    --brand-amber: #8a5a00;
    --brand-blue: #14477d;
  }

  /* Dekoráció és vezérlők, amiknek papíron nincs értelmük. A szalagok
     tartalmát a JS megduplázza, tehát nyomtatásban kétszer jelennének meg,
     félbevágva. */
  .site-header,
  .site-footer,
  .cookie,
  .action-bar,
  .modal,
  .nav,
  .noise,
  .cursor-glow,
  .aurora,
  .scroll-progress,
  .marquee,
  .section-nav,
  .rail-controls,
  .filters,
  .step-bar,
  .step-nav,
  .circuit-panel,
  .hero-visual,
  .hero-mark,
  .divider,
  .grid-bg,
  .portrait-glow {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  /* A vélemények papíron is kellenek — csak a szalag KLÓNJAIT rejtjük el (a
     modul megduplázza a tartalmat a végtelen futáshoz), és a sávot állóvá
     tesszük, hogy ne vágódjon el és ne halványuljon a széle. */
  .quote-rail {
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .quote-rail-track {
    display: block !important;
    width: auto !important;
    animation: none !important;
  }

  .quote-rail-track > [aria-hidden='true'] {
    display: none !important;
  }

  .quote-rail .quote,
  .quote-rail.is-cards .card {
    width: auto !important;
    break-inside: avoid;
  }

  /* A videószalag papíron nem jelent semmit: mozgókép állóképe, lejátszás
     nélkül. A szakasz egészét elhagyjuk, nem csak a szalagot — különben a
     címsor és a felvezető ott maradna egy üres blokk fölött. */
  #videok {
    display: none !important;
  }

  /* A BEÚSZÓ elemek papíron: a `[data-reveal]` alapból `opacity: 0`, és az
     `is-in` osztályt kizárólag a láthatóság-figyelő adja hozzá — arra, ami a
     képernyőn tényleg átment. Aki görgetés nélkül nyomtat, annak a lap alsó
     kétharmada ÜRESEN jött ki: az árlistán 18, a szolgáltatásokon 29 blokk. */
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* A GYIK válaszai összecsukva vannak (rács-sorral rejtve), papíron viszont
     a válasz a lényeg. */
  .acc-panel {
    grid-template-rows: 1fr !important;
    visibility: visible !important;
  }

  .acc-panel > div {
    overflow: visible !important;
  }

  /* A referenciák feliratai fehér szöveggel, sötét színátmenetre készültek:
     a háttér nyomtatásban nincs, tehát fehéren maradnának. A csempe rögzített
     képaránya és a „Fotó hamarosan" helykitöltő is megy: statikussá tett
     felirat mellett a kettő EGYMÁSRA íródott volna. */
  .tile-meta,
  .tile-meta * {
    color: #000 !important;
    background: none !important;
    position: static !important;
  }

  .tile-ph {
    display: none !important;
  }

  .tile {
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  /* A portré névtáblája is a képre volt pozicionálva, üvegháttérrel — az
     eltűnik, a fekete felirat viszont a fotón maradna. */
  .portrait-cap {
    position: static !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* A színátmenetes kiemelés `color: transparent`-tel és háttérrel dolgozik:
     háttér nélkül a szó egyszerűen eltűnik a papírról. Minden szakaszcímben
     van belőle egy-két szó — és ugyanez a minta viszi a statisztikák számait
     meg a kalkulátor kiírt árát is. */
  .tx-grad,
  .glow-amber,
  .stat-num,
  .calc-price {
    background: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
  }

  /* A kapcsolati sáv elválasztói RÁCSHÉZAGOK, amikben a doboz háttere
     látszik — a böngésző viszont nyomtatáskor alapból elhagyja a háttereket,
     tehát a négy tétel közötti vonalak eltűnnének, és a sáv egyetlen,
     tagolatlan dobozként jönne ki. Itt a háttér INFORMÁCIÓ, nem dekoráció. */
  .contact-strip {
    background: #999 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .contact-strip > li {
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* A táblázatok kerete és teljes szélessége papíron is kell. */
  .table-wrap {
    overflow: visible !important;
    border-color: #999;
  }

  /* Az árlista `width: max-content`, hogy a képernyőn a fejléc háttere és az
     elválasztó vonalak a görgetett tartalom teljes szélességét átfogják. A
     görgetés feloldása papíron ezt túlcsordulássá tette: A4-en 871 px-es
     táblázat egy ~718 px-es lapon. Papíron nincs mit görgetni, tehát a doboz
     szélessége a helyes — a szöveg inkább törjön. (A jogi táblázatok
     `is-fix`-ek, azok eleve 100 %-osak, őket ez nem érinti.) */
  .price-table {
    width: 100% !important;
    min-width: 0 !important;
  }

  .price-table th,
  .price-table td {
    border-color: #ccc;
  }

  /* A KAPCSOLAT OLDAL ŰRLAP-CÍME PAPÍRON IS KELL.

     Az A4 tartalmi szélessége a szokásos margóval ~718 px, a mobil töréspont
     719,98 — a mobil szabályok tehát PAPÍRON IS érvényesek. Az űrlap
     elrejtése viszont KÉPERNYŐRE szólt (ügyfélkérés, LOCKED_DECISIONS 14.):
     így a kinyomtatott Kapcsolat oldalról az írásos ajánlatkérés minden nyoma
     eltűnt, mert a műveletsáv papíron amúgy sincs.

     A cím és a bevezető visszakerül; maga az ŰRLAP marad rejtve — egy
     kitölthetetlen mezősor papíron csak zaj. */
  .sec-head.is-form-head {
    display: block !important;
  }

  /* A hero papíron egy majdnem üres első oldal lenne. */
  .hero {
    min-height: 0 !important;
    padding-block: 1.5rem !important;
  }

  /* A hét aloldal NEM `.hero`-t használ, hanem `.page-hero`-t, aminek a felső
     belső margója a rögzített fejléc magasságát is beszámítja. Papíron a
     fejléc `display: none`, a 3,5 cm-es üres sáv viszont ott maradt a lap
     tetején — épp az adatvédelmi tájékoztatón és az impresszumon, amit a
     leginkább kinyomtatnak. */
  .page-hero {
    padding-block: 1.5rem !important;
  }

  /* Szakaszok: papíron elég a fele levegő. */
  .section {
    padding-block: 1.2rem !important;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
  }
}

/* --------------------------------------------------------------------------
   22. SEGÉDOSZTÁLYOK

   Az inline `style` attribútumot a stíluslap nem tudja felülírni: egy későbbi
   dizájnváltoztatás némán hatástalan marad. Ezért a gyakran ismételt inline
   értékek osztályokká váltak. Új inline stílust ne vezessünk be.
   -------------------------------------------------------------------------- */

.u-mb-1 { margin-bottom: 1rem; }

/* A csúszka értékkijelzője (a címkén kívül, hogy a nevét ne változtassa) */
.field-value {
  margin: -0.35rem 0 0.5rem;
  font-size: 1.05rem;
}
.u-mb-25 { margin-bottom: 2.5rem; }
.u-mb-09 { margin-bottom: 0.9rem; }
.u-mt-2 { margin-top: 2rem; }
.u-mt-16 { margin-top: 1.6rem; }
.u-my-legal { margin-block: 1.2rem 1.6rem; }
.u-my-25 { margin-block: 2.5rem; }
.u-reset { border: 0; padding: 0; margin: 0; }
/* A jogi oldalakon EZ a címsor a szakaszsáv horgonya (ott több címsor osztozik
   egy szekción, tehát a szekció nem lehet mindegyikük célja). A felső margó
   adja a levegőt a sáv alatt — a böngésző saját horgonyugrásának ezt a
   scroll-margin-top mondja meg, a sáv saját görgetése pedig kiolvassa. */
.u-h-legal {
  font-size: 1.6rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  scroll-margin-top: 2.5rem;
}
/* A jogi oldalak ALCÍME: egy számozott szakaszon belüli résztéma (pl. a
   sütikön belül a beágyazott videók). Kisebb, mint a szakaszcím, de nem
   olvad bele a folyószövegbe — és a szakaszsávnak NEM horgonya, mert az
   csak a h2-ket gyűjti. */
.u-h-legal-3 {
  font-size: 1.1rem;
  margin-top: 1.8rem;
  margin-bottom: 0.7rem;
}
.u-pb-042 { padding: 0 0 0.42rem; }
.u-pb-06 { padding: 0 0 0.6rem; }
.u-ml-auto { margin-left: auto; }
.u-jc-center { justify-content: center; }
.u-layer { position: relative; z-index: 2; }

.u-mb-04 { margin-bottom: 0.4rem; }

.u-gap-07 { gap: 0.7rem; }
.u-gap-09 { gap: 0.9rem; }
.u-gap-16 { gap: 1.6rem; }
.u-gap-18 { gap: 1.8rem; }
.u-mt-12 { margin-top: 1.2rem; }
.u-mt-22 { margin-top: 2.2rem; }
.u-mt-24 { margin-top: 2.4rem; }
.u-mt-26 { margin-top: 2.6rem; }
.u-mt-clamp { margin-top: clamp(3rem, 6vw, 4.5rem); }
.u-mb-08 { margin-bottom: 0.8rem; }
.u-mb-16 { margin-bottom: 1.6rem; }
.u-mb-24 { margin-bottom: 2.4rem; }
.u-my-1214 { margin-block: 1.2rem 1.4rem; }
.u-my-122 { margin-block: 1.2rem 2rem; }
/* Két gomb egymás mellett, AZONOS szélességgel. A telefonszám felirata
   hosszabb, mint az „Ajánlatot kérek", ezért a két gomb 210 és 172 px lett —
   egymás mellett a rövidebbik kisebbnek, másodrangúnak hatott. A rács minden
   oszlopot a leghosszabb tartalomhoz igazít, a `fit-content` pedig
   megakadályozza, hogy a sor a szövegoszlop teljes szélességére nyúljon.

   CSAK 720 px felett: a `.row.is-even` (0,2,0) erősebb, mint a mobilos
   `.is-mobile-hidden` (0,1,0), és alapszabályként némán visszahozta a
   telefonon szándékosan elrejtett gombsort. */
@media (min-width: 720px) {
  .row.is-even {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: fit-content;
    max-width: 100%;
  }
}

.u-mx-auto { margin-inline: auto; }
.u-lead-center { margin-top: 1.4rem; max-width: 70ch; margin-inline: auto; }
.u-col-1 { grid-template-columns: 1fr; }
.u-amber { color: var(--brand-amber); }
.u-minh-80 { min-height: 80vh; min-height: 80svh; }
/* A `.hero h1` (0,1,1) ERŐSEBB, mint a puszta `.u-huge` (0,1,0) — a segédosztály
   emiatt némán hatástalan volt: a 404-es szám 83 px-en jelent meg a szándékolt
   160 helyett, és a `margin-bottom` is a hero szabályából jött. Az elemtípussal
   kiegészített szelektor kiegyenlíti a specificitást, és mivel ez a szabály áll
   később, ez nyer. Ugyanaz a csapda, mint fentebb a `.row.is-even`-nél. */
.u-huge,
h1.u-huge { font-size: clamp(4rem, 16vw, 10rem); line-height: 0.9; margin-bottom: 1.2rem; }
.u-row-tight { gap: 1rem; flex-wrap: nowrap; align-items: flex-start; }


/* --------------------------------------------------------------------------
   23. SZAKASZSÁV — tartalomjegyzék hosszú oldalakhoz

   A fejléc alá bedokkoló, vékony sáv az oldal szakaszaival. A JS építi az
   oldal saját címsoraiból (lásd scripts.js, 02/c), és csak ott jelenik meg,
   ahol legalább négy tartalmi szakasz van.
   -------------------------------------------------------------------------- */

.section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-szakaszsav);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--bg-rgb), 0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.section-nav::-webkit-scrollbar {
  display: none;
}

.section-nav ul {
  display: flex;
  gap: 0.15rem;
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  /* A vízszintes térköz EGYETLEN forrása: a töréspontok csak ezt a változót
     írják át, a paddingot nem — így nem tudja egy későbbi, azonos
     specificitású szabály némán felülírni. A sáv utolsó tételei nem érik el a
     bal szélt (elfogy a görgetési út) — ez szándékos, a sáv végén nem marad
     üres hely. */
  --sav-terkoz: clamp(1rem, 4vw, 3rem);
  padding: 0 var(--sav-terkoz);
  list-style: none;
}

.section-nav a {
  position: relative;
  display: block;
  padding: 0.85rem 0.85rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.section-nav a::after {
  content: '';
  position: absolute;
  inset: auto 0.85rem 0 0.85rem;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand-amber);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t) var(--ease);
}

.section-nav a:hover {
  color: var(--text);
}

.section-nav a.is-active {
  color: var(--brand-amber);
}

.section-nav a.is-active::after {
  transform: scaleX(1);
}

@media (min-width: 1120px) {
  .section-nav ul {
    max-width: min(1700px, 100%);
    --sav-terkoz: clamp(1.75rem, 3.5vw, 3.5rem);

    /* A tételek a heró alatt balra indulnak — a fölöttük lévő tartalom is
       balról kezdődik —, és görgetés közben kúsznak be középre: mire a sáv a
       fejléc alá tapad, pontosan középen állnak. A helyet a bal térköz adja,
       nem `justify-content`: így a mozgás egyetlen interpolálható érték.

       A `--sav-kuszas` (0..1) és a `--sav-szabad` (px) a scripts.js 02/c
       moduljából jön; ha a JS nem fut, a két tartalék érték a mostani, balra
       igazított sávot adja. A hozzáadott hely a szabad hely FELE, tehát a sáv
       sosem lesz szélesebb a dobozánál — nem keletkezik görgetési út. */
    padding-left: calc(var(--sav-terkoz) + var(--sav-kuszas, 0) * var(--sav-szabad, 0px));
  }

  /* A szakaszok felső belső margója itt ~130 px. Horgonyzáskor ez az egész
     üres helyként állt a sáv alatt, a cím pedig a képernyő közepe táján. A
     landolás ebből ennyit hagy meg — a szakasz éle a sáv fölé kerül, tehát az
     előző szakasz háttere így sem látszik ki.

     Miért `scroll-margin-top` és nem JS-konstans: ez a böngésző SAJÁT
     horgonyugrására is hat (megosztott link, betöltés #hash-sel), és a sáv
     saját görgetése ugyanezt az értéket olvassa ki — egy forrás, kétféle
     ugrás, azonos landolás. Telefonon és tableten nem érvényes. */
  .section[id] {
    scroll-margin-top: calc(2rem - var(--section-y));
  }
}

/* Telefonon faltól falig, ujjal húzható — a boxos megjelenítést itt is
   kerüljük, ahogy az oldal többi részén. */
@media (max-width: 719.98px) {
  /* Telefonon a fejléc, ez a sáv és az alsó műveletsáv EGYSZERRE, egymás
     fölött homályosított — három teljes szélességű réteg, ami minden görgetési
     képkockán újraszámol. Átlátszatlan háttérrel ugyanaz a hatás, számítás
     nélkül; a homály 720 px felett marad. */
  .section-nav,
  .action-bar,
  .site-header.is-stuck {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* A filmszemcse 5%-os átlátszatlansággal egy telefonkijelzőn nem látszik,
     viszont teljes képernyős, fixált `mix-blend-mode` réteget tart életben
     minden görgetési képkockán. */
  .noise {
    display: none;
  }

  .section-nav ul {
    --sav-terkoz: var(--gutter);
  }

  .section-nav a {
    padding-inline: 0.7rem;
    font-size: 0.82rem;
  }

  .section-nav a::after {
    inset-inline: 0.7rem;
  }
}

.u-h-legal-sm { font-size: 1.1rem; margin-block: 1.4rem 0.6rem; }


/* --------------------------------------------------------------------------
   ALACSONY KIJELZŐ: tömörebb mobilmenü

   Fekvő telefonon vagy alacsony ablakban a menü nem fér ki, és görgetni kell
   benne. Ez a blokk ezért szorosabbra veszi a sorokat.

   MIÉRT ITT, A FÁJL VÉGÉN: korábban a 05. szakaszban állt, a mobilmenü
   újratervezése (a 20. szakasz végén, „Mobil menü: a menüpontok nem dobozok”)
   viszont több ezer sorral LEJJEBB, azonos
   specificitással írja felül ugyanezeket a tulajdonságokat — a sorrend
   döntött, tehát az itteni szándék soha nem érvényesült. A `padding-block`-ot
   ráadásul a későbbi `padding` RÖVIDÍTÉS nullázta. Ami elavult közben (a
   `gap` és az ikonméret: az új listasoros terv amúgy is szorosabb), az
   kikerült.
   -------------------------------------------------------------------------- */
@media (max-width: 1119.98px) and (max-height: 680px) {
  .nav-list {
    max-height: none;
  }

  .nav-link {
    padding-block: 0.58rem;
    font-size: 0.95rem;
  }

  .nav-foot .btn {
    padding-block: 0.68rem;
  }

  .nav-note {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   NAGYON KESKENY KIJELZŐ: a gombok felirata törhet

   A `.btn` alapszabálya `white-space: nowrap` — helyesen, mert egy kétsorosra
   tört gomb a szokásos szélességeken csúnya. 380 px alatt viszont ez levágja a
   feliratot: mérve 320 px-en az „Összes szolgáltatás megtekintése” 342 px
   széles egy 308 px-es nézetablakban, tehát 54 px kilóg — és mivel a `body`
   `overflow-x: clip`, oda GÖRGETNI SEM lehet. Az „Ingyenes ajánlatot kérek”
   feliratából ugyanitt 18 px vágódott le a gomb saját `overflow: hidden`-je
   alatt. Érinti a 320 px-es iPhone SE-t, a Galaxy Fold borítókijelzőjét és
   minden böngészőt 400 %-os nagyításon (WCAG 1.4.10).

   MIÉRT ITT, A FÁJL VÉGÉN: a `.btn` szabályok azonos specificitásúak (0,1,0),
   tehát a sorrend dönt. Beljebb elhelyezve a későbbi `.btn` szabályok némán
   visszahoznák a `nowrap`-ot.
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}