/* =============================================================================
   Free Association — V2 stylesheet
   ----------------------------------------------------------------------------
   A vázlat (2025-08-28 PPT) + Antedote + Kadence-stílus felé hangolva:
   - Bal-jobb 50/50 kontrasztos szekciók
   - Antedote-szerű hero szín-csillámlás (gradient + background-clip text)
   - Hullám-átmenetek a szekciók között (SVG)
   - Klasszikus pörgő számláló nagy tipográfiával
   - Régi free-association.hu színpaletta + új arculati #3C9DBC

   A v1 CSS-től teljesen független, hogy a két verzió párhuzamosan élhessen.
============================================================================= */

:root {
  /* ============================================================
     Csak a free-association.hu oldal palettája + a Free logó
     színkód.PNG-ből az új arculati türkiz. Semmi más szín.
     ============================================================ */

  /* Türkiz család (a régi oldal CSS-éből + új arculat) */
  --v2-primary:         #3C9DBC;   /* új arculat türkize (Free logó színkód.PNG) */
  --v2-primary-deep:    #2994B5;   /* régi oldal primary türkize */
  --v2-primary-bright:  #00A5D5;   /* régi oldal élénk türkiz */
  --v2-primary-darker:  #12596D;   /* régi oldal mély türkiz */
  --v2-primary-darkest: #10495A;   /* régi oldal legmélyebb türkiz */
  --v2-primary-tint:    #E4F1F6;   /* halvány ég-türkiz (arculati #3C9DBC ~15% tint) — Filozófia section-háttér a fehér helyett */

  /* User-szigorított paletta 2026-05-15:
     a 4 elsődleges-vibrant: #80B83A (zöld), #7F599B (lila),
     #F6921B (narancs), #DE5396 (magenta-pink).
     A `#4589D2` kék eltávolítva. */
  --v2-green:           #80B83A;
  --v2-green-light:     #8BC53E;

  --v2-magenta:         #DE5396;
  --v2-magenta-bright:  #DE5396;

  --v2-purple:          #7F599B;
  --v2-purple-light:    #BFACCD;
  --v2-indigo:          #4A4693;   /* mély-lila (régi free-association.hu menu.css-ből) */
  --v2-teal:            #3499B6;   /* közepes türkiz a Mit csinálunk jobb cellához */

  --v2-orange:          #F6921B;

  /* Kék-paletta — világos backgroundokra megmarad, mély-kék #4589D2 TÖRÖLVE. */
  --v2-blue-light:      #cddff8;
  --v2-blue-mist:       #f7faff;

  --v2-yellow:          #FFE201;

  /* Neutrals (a régi oldal CSS-éből) */
  --v2-ink:             #221E1F;   /* fő szöveg */
  --v2-grey-deep:       #414245;
  --v2-grey:            #616265;
  --v2-grey-mid:        #7F8184;
  --v2-grey-light:      #BBBDBF;
  --v2-grey-fade:       #dddddd;
  --v2-paper:           #ffffff;

  /* Alias-ok kompatibilitásért — a v2.css fokozatos refaktorálása során
     maradt hivatkozások (--v2-line, --v2-ink-soft stb.). */
  --v2-line:            var(--v2-grey-fade);
  --v2-ink-soft:        var(--v2-grey-deep);
  --v2-primary-soft:    var(--v2-blue-light);
  --v2-primary-mist:    var(--v2-blue-mist);

  /* Tipográfia — DM Sans a logo-betűtípushoz közel álló elsődleges sans
     (kerek i-pont, Hanken-szerű humanist arányok). */
  --v2-font:      'DM Sans', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v2-font-hand: 'Indie Flower', 'Brush Script MT', 'Apple Chancery', cursive;
  /* Méretek ~10%-kal felnagyítva (user 2026-06-01) — kivéve a hero claim
     (saját font-size-ja van) és a „Főbb ügyfeleink" h2 (inline override
     az ugyfelek.php-ben). */
  --v2-fs-xs:   0.9rem;
  --v2-fs-sm:   1.0625rem;
  --v2-fs-base: 1.1875rem;
  --v2-fs-md:   1.375rem;
  --v2-fs-lg:   1.8rem;
  --v2-fs-xl:   2.5rem;
  --v2-fs-2xl:  3.6rem;
  --v2-fs-3xl:  4.5rem;
  --v2-fs-4xl:  6.5rem;
  --v2-fs-stat: clamp(4.5rem, 12vw, 10rem);

  --v2-s-1: 0.25rem;
  --v2-s-2: 0.5rem;
  --v2-s-3: 0.75rem;
  --v2-s-4: 1rem;
  --v2-s-5: 1.5rem;
  --v2-s-6: 2rem;
  --v2-s-7: 3rem;
  --v2-s-8: 4rem;
  --v2-s-9: 6rem;
  --v2-s-10: 9rem;

  --v2-container: 1320px;
  --v2-radius: 0;
  --v2-radius-sm: 0;
  --v2-nav-h: 72px;

  --v2-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  /* Kiegyensúlyozott, ODA-VISSZA AZONOS ÉRZETŰ átmenet — színváltáshoz.
     A --v2-ease (easeOutQuint) MOZGÁSHOZ jó (a mozgás lassan áll meg), de
     az indulása extrém gyors: az út 40%-át 50 ms alatt megteszi. Felvételnél
     ez azonnali visszajelzés, VISSZAváltásnál viszont „lekapcsolták” érzetet
     ad — a szín elrántódik, miközben a felvétel „beérik”. Matematikailag a
     két irány persze azonos, a PERCEPCIÓ nem az (user 2026-07-15: „ugyanolyan
     tempóval váltson vissza, mint ahogyan felvesz egy színt”). Ez a görbe
     mindkét irányban finoman indul és finoman áll be: 50 ms alatt 3%. */
  --v2-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --v2-t-fast:      220ms;
  --v2-t-med:       420ms;
  --v2-t-slow:      720ms;
  /* Kifinomult hover-átmenet — minden interaktív elemre 0.5 mp. */
  --v2-t-hover:     500ms;
}

/* -----------------------------------------------------------------------------
   Reset & base
----------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Reduce Motion mellett a natív smooth-görgetés is mozgásmentes — a JS
   anchor-kezelő ezt amúgy is így navigálja, ez a böngésző-natív utakra
   (kereső "találat", külső #hash-link) is kiterjeszti. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--v2-font);
  font-size: var(--v2-fs-base);
  line-height: 1.55;
  color: var(--v2-ink);
  background: var(--v2-paper);
  /* Cross-browser-konzisztens font-rendering (Chrome ≠ Safari fix):
     - `font-weight: 400` explicit — egyértelmű súly a variable-font axis-on.
     - `font-synthesis: none` — ne generáljon a böngésző fake bold/italic-ot
       (Chrome esetén ez okozhatott eltérést a Safari-tól).
     - `font-kerning: normal` — egyértelmű kerning policy.
     - `font-optical-sizing: auto` — variable opszi-tengely engedélyezett. */
  font-weight: 400;
  font-synthesis: none;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga', 'calt', 'tnum';
  /* Tördelés — ELSŐDLEGESEN nyelvtanilag helyes elválasztás (hyphens:auto: a
     böngésző a <html lang> szerint szótagol, magyarul ÉS angolul). User 2026-07-16:
     hosszú szavak (pl. „TERMÉKTULAJDONSÁGOK”) a szűk csempe-lenyílóban a szó
     KÖZEPÉN törtek, elválasztójel nélkül. A hyphens CSAK ott vág, ahol a szó
     amúgy sem férne ki egy sorba → a jól-férő szövegeket nem érinti. Az
     overflow-wrap:break-word marad VÉGSŐ védőháló a szótagolhatatlanokra
     (perjeles lánc, email, URL — pl. az 50 karakteres /-lánc, ami 390px-en
     481px-re nyitotta a #mit-csinalunk-ot). A nagy display-szöveget (hero-claim)
     lentebb kizárjuk (`hyphens:manual`) — ott csúnya lenne a szótagolás. */
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Csak a hosszabb szavakat szótagoljuk (min 6 karakteres szó, legalább 3-3
     karakter a törés két oldalán) — a rövid szavak (pl. „milyen”→„mi-lyen”)
     felesleges elválasztását kerüljük; a user a HOSSZÚ szavak törésére panaszkodott.
     Nem-támogató böngészőben a sima auto marad (elfogadható fallback). */
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--v2-s-4);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
}
h1 { font-size: var(--v2-fs-3xl); font-weight: 500; letter-spacing: -0.03em; }
/* A base h2 fluid (clamp), a bevált .v2-legal h1 mintát tükrözve: a felső ág
   (--v2-fs-2xl = 3.6rem) ~823px FÖLÖTT érvényes → >1080px pixelre változatlan,
   keskeny/zoom nézeten lefelé skálázódik. Latens csapda volt: a fix 57.6px h2 a
   media query-kel sosem íródott felül. A .v2-legal h2 nagyobb specificitású. */
h2 { font-size: clamp(2rem, 7vw, var(--v2-fs-2xl)); font-weight: 500; letter-spacing: -0.025em; }
/* A nagy hero-cím (claim) NE szótagoljon — ott a kötőjeles törés zavaró lenne,
   és a rövid claim-szavak amúgy is elférnek. Kivétel a body hyphens:auto-ja alól
   (user 2026-07-16). A h2/h3 + a folyó szöveg + csempe-szövegek maradnak auto —
   ott a nyelvtani elválasztás a kívánt (ezt a user elfogadta). */
.v2-hero__claim { hyphens: manual; -webkit-hyphens: manual; }
h3 { font-size: var(--v2-fs-xl); }
h4 { font-size: var(--v2-fs-lg); }
p { margin: 0 0 var(--v2-s-4); }
a { color: inherit; text-underline-offset: 3px; }
::selection { background: var(--v2-primary-soft); color: var(--v2-ink); }

*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.v2-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--v2-ink); color: var(--v2-paper);
  padding: var(--v2-s-3) var(--v2-s-4);
  z-index: 1000;
}
.v2-skip:focus { left: 0; }

/* -----------------------------------------------------------------------------
   Layout primitives
----------------------------------------------------------------------------- */

.v2-container {
  width: 100%;
  max-width: var(--v2-container);
  margin: 0 auto;
  padding: 0 var(--v2-s-5);
}

.v2-section {
  position: relative;
  padding: var(--v2-s-10) 0;
}

/* Anchor-landolás: a sticky fejléc (72px = --v2-nav-h) ALJA pont a célszekció
   TETEJÉVEL érintkezzen — user 2026-07-15. A szabály az azonosítóhoz kötődik,
   NEM osztályhoz: korábban a `.v2-section`-ön ült, de három nav-cél (#tenyek,
   #mit-csinalunk, #ugyfelek) `.v2-split` osztályú → náluk 0 volt az offset, és
   a fejléc rátakart a szekció tetejére. Így egy új szekció-típus sem marad ki.
   A JS (v2.js smoothScrollTo) ugyanezt a computed értéket olvassa vissza. */
section[id] {
  scroll-margin-top: var(--v2-nav-h);
}

/* --- BEJELENTKEZVE: WP admin bar ---------------------------------------------
   Csak a szerkesztő látja (a látogatónál nincs `body.admin-bar`), de a user így
   nézi az oldalt. A bar `position:fixed` a viewport tetején + `html{margin-top}`
   a dokumentumon. Két következménye van, MINDKETTŐ kezelendő:
   1) A `top:0`-s sticky fejléc a VIEWPORT tetejéhez ragad → a bar ALÁ bújik (a
      menüpontok felső fele levágódik). Ezért a fejlécet a bar alá toljuk.
   2) A landolás célja ezzel lejjebb kerül (a fejléc alja 32+72=104 px), ezért a
      scroll-margin is ennyivel nő. A v2.js `htmlMarginTop()`-ja külön kezeli,
      hogy az offsetTop-lánc nem látja a html margin-t — a kettő együtt ad 0 rést.
   A WP töréspontjai (wp-includes/css/admin-bar.css): 782px alatt 46px magas a
   bar, 600px alatt pedig `position:absolute` — ott elgörget, nem takar, tehát a
   fejléc mehet vissza a viewport tetejére. */
body.admin-bar .v2-header { top: 32px; }
body.admin-bar section[id] { scroll-margin-top: calc(var(--v2-nav-h) + 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .v2-header { top: 46px; }
  body.admin-bar section[id] { scroll-margin-top: calc(var(--v2-nav-h) + 46px); }
}
@media screen and (max-width: 600px) {
  body.admin-bar .v2-header { top: 0; }
  body.admin-bar section[id] { scroll-margin-top: var(--v2-nav-h); }
}

/* Szekció-címke („TÉNYEK”, „CSAPAT”, …) — a menüpontok nevei a szekciókban.
   NAGYOBB, feltűnőbb méret (user 2026-07-15): volt fix --v2-fs-xs (0,9rem).
   Indokolt is: a szekciók h2-i ÜRESEK a strings-ben, tehát az eyebrow
   funkcionálisan a szekció EGYETLEN címe — nem egy h2 fölötti kishír.
   Reszponzív, mert uppercase + 0,22em ritkítás mellett a leghosszabb címke
   („ESETTANULMÁNYOK” / „OUR PHILOSOPHY”) fix 1,375rem-en már nem férne ki egy
   sorba 390px-en. A ritkítás nagyobb méreten arányosan sokat visz, ezért
   ott egy hajszállal visszavesszük belőle. */
.v2-eyebrow {
  display: inline-block;
  font-size: clamp(1.05rem, 2.2vw, 1.375rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--v2-s-4);
}

/* -----------------------------------------------------------------------------
   Header (sticky, áttetsző)
----------------------------------------------------------------------------- */

.v2-header {
  position: sticky;
  top: 0; left: 0; width: 100%;
  z-index: 100;
  /* Enyhe, fehéres glass blur — alacsony opacity, hogy a háttér átsejlik.
     Nincs border-szín a fejlécen.
     A blur-sugár tudatosan mérsékelt: a backdrop-filter a mögötte lévő —
     scroll alatt MINDEN frame-ben változó — tartalomból mintavételez, ezért
     a blur frame-enként újraszámolódik (nem cache-elhető); a GPU-költség a
     sugárral skálázódik. 10px vizuálisan ~azonos glass-hatás (a 0.55-ös
     fehér overlay dominál), de érdemben olcsóbb smooth-scroll alatt.
     User 2026-07-15: „a header kicsit kevésbé legyen átlátszó" → 0.55 → 0.70.
     A glass-karakter (blur + áttetszőség) megmarad, csak a mögötte úszó tartalom
     sejlik át visszafogottabban → a menü olvashatóbb a türkiz hero fölött. */
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: saturate(170%) blur(10px);
  -webkit-backdrop-filter: saturate(170%) blur(10px);
  border: 0;
  /* + betöltés-belépő: opacity/transform finoman a fa-loaded-re (a kiinduló
     állapot html.fa-loading .v2-header — felülről lecsúszik + fade). A
     translateZ(0) saját composited layer → a belépő-transform a blur-től
     izoláltan fut (nincs villódzás, mint a logó-hovernél). */
  transition: background var(--v2-t-hover) var(--v2-ease),
              opacity 800ms var(--v2-ease),
              transform 800ms var(--v2-ease);
  transform: translateZ(0);
}
.v2-header.is-scrolled {
  /* Görgetve eddig is tömörebb volt; a 0.70-es alaphoz igazítva arányosan
     feljebb (0.78 → 0.88) — így megmarad az „alap → görgetve" tömörödés íve. */
  background: rgba(255, 255, 255, 0.88);
}
.v2-header__inner {
  display: flex; align-items: center; gap: var(--v2-s-5);
  height: var(--v2-nav-h);
}
.v2-logo {
  display: inline-flex; align-items: center; line-height: 0; text-decoration: none;
  /* A "villogás + delay" gyökéroka nem az easing, hanem a rendering: a logó a
     header BACKDROP-FILTER-es (blur) rétegében ül, és amíg nincs saját
     composited layere, az opacity-fade minden frame-ben újrakomponáltatja a
     blur-t (→ villódzás), az első hovernél pedig a böngésző EKKOR hozza létre a
     layert (→ egyszeri delay/akadás). Megoldás: statikus saját layer
     (translateZ(0) + backface-visibility) → az opacity a compositoron fut, a
     blur-től izolálva, a layer előre kész. Az easing rövid, AZONNAL induló
     ease-out (nincs kezdeti lapos "delay"-szakasz, mint az ease-in-out-nál). */
  transition: opacity 240ms ease-out;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.v2-logo:hover { opacity: 0.78; }
.v2-logo img { height: 48px; width: auto; display: block; }

.v2-nav {
  display: flex; align-items: center; gap: var(--v2-s-1);
  margin-left: auto; flex-wrap: wrap;
}
.v2-nav__link {
  display: inline-flex; align-items: center;
  padding: var(--v2-s-2) var(--v2-s-3);
  font-size: var(--v2-fs-sm);
  font-weight: 700;
  color: var(--v2-ink);
  text-decoration: none;
  border-radius: 0;
  background: transparent;
  /* Oda-vissza azonos érzetű görbe: a menüpont ugyanolyan tempóval veszi fel a
     színt, ahogy visszaadja (user 2026-07-15). Egy szabály fedi MINDEN esetet —
     hover be/ki, aktív be/ki, és a hover↔aktív váltás is ezen fut. */
  transition: color var(--v2-t-hover) var(--v2-ease-inout);
}

/* Aktív (scroll-tracking) állapot — jelzi, hol jár épp a látogató a lapon.
   A szín a HOVERREL KÖZÖS random-láncból jön (user 2026-07-15: „ugyanazon a
   logikán alapuljon”): a v2.js aktív-váltáskor a --v2-navactive-ba írja a
   nextNavColor() húzását. Korábban itt szekcióhoz kötött FIX színek álltak —
   azok a lilákat is használták (amiket a user 2026-07-14-én kitiltott), és a
   Filozófiához rendelt lila azóta amúgy is elavult: az a szekció fehér lett.
   Fallback (no-JS): primary-deep. */
.v2-nav__link.is-active { color: var(--v2-navactive, var(--v2-primary-deep)); }

/* Hover: RANDOM szín a brand-palettából (a hero-claim nextColor-logikájával —
   lásd v2.js). A JS mouseenter-kor a --v2-navhover-be írja a kiválasztott
   színt; két egymást követő hover SOSEM azonos (a kizárás linkeken átível), így
   egy menüpontnak sincs egyetlen fix hover-színe. A színváltást a meglévő
   `transition: color` adja finoman. A szabály a .is-active UTÁN áll → amíg a
   kurzor a linken van, a random hover-szín az aktív színt is felülírja. NEM a
   hero meleg-palettáját használjuk: annak citromsárgája a világos, üvegfehér
   headeren olvashatatlan lenne. Fallback (no-JS): primary-deep. */
.v2-nav__link:hover { color: var(--v2-navhover, var(--v2-primary-deep)); }

/* Nincs keret a nyelvváltó körül — user 2026-07-14: keretes (nem kitöltött)
   linkelés ne legyen az oldalon; az aktív nyelv KITÖLTÖTT jelölése marad. */
.v2-langswitch {
  display: inline-flex; align-items: center;
  border-radius: 0; padding: 2px;
  font-size: var(--v2-fs-xs);
  margin-left: var(--v2-s-3);
}
.v2-langswitch__btn {
  position: relative;
  padding: 4px 10px; border-radius: 0;
  color: var(--v2-ink-soft); text-decoration: none;
  font-weight: 600; letter-spacing: 0.06em;
  transition: color var(--v2-t-hover) var(--v2-ease), background var(--v2-t-hover) var(--v2-ease);
}
/* Hover: csak szín + halvány háttér (a korábbi ::after aláhúzás-vonal törölve —
   user-kérés 2026-07-14: a nyelvváltó ne húzza alá a nyelvet hover-re). */
.v2-langswitch__btn:hover {
  color: var(--v2-ink);
  background: rgba(0, 0, 0, 0.04);
}
.v2-langswitch__btn.is-active { background: var(--v2-ink); color: var(--v2-paper); }

.v2-versionswitch {
  display: inline-flex; align-items: center;
  margin-left: var(--v2-s-2);
  padding: 4px 10px;
  font-size: var(--v2-fs-xs); font-weight: 600;
  letter-spacing: 0.06em;
  border: 1px dashed var(--v2-primary-deep);
  border-radius: 0;
  color: var(--v2-primary-deep);
  text-decoration: none;
  transition: background var(--v2-t-hover) var(--v2-ease), color var(--v2-t-hover) var(--v2-ease), border-color var(--v2-t-hover) var(--v2-ease);
}
.v2-versionswitch:hover { background: var(--v2-primary-deep); color: #fff; border-color: var(--v2-primary-deep); }

/* -----------------------------------------------------------------------------
   Hero — Antedote-stílus szín-csillámlás + papírrepülő-háttér
----------------------------------------------------------------------------- */

/* Hero — TELJES viewport-MAGASSÁGÚ banner (100vh), háttér #3496B6.
   A KÉP kisebb és JOBB-FELSŐ sarokba van helyezve: magassága ~70vh, a
   crop-doboz jobb széle pont a langswitch jobb szélével egy x-pozíción
   (így a kép-belüli, cropolt papírrepülő-csúcs is oda esik).
   A "crop" továbbra is a képen történik: a kép kissé túlméretezett a
   crop-dobozhoz képest, bal-alsóra horgonyozva — a jobb és felső kilógó
   rész overflow:hidden-rel levágva. A crop-doboz körül (bal oldalt + alul)
   a #3496B6 hero-háttér látszik.

   Számítás (tip_x = 0.91, kép-aspect 1195/896 ≈ 1.333):
     img_W  = 100% / tip_x ≈ 109.9%   (a crop-szélességre vetítve)
     img_H  = img_W / 1.333 ≈ 82.4%   (a crop-szélességre vetítve)
     crop_H = img_H − (img_W − 100%) ≈ 72.5%  → aspect 1000 / 725. */
.v2-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--v2-nav-h));
  overflow: hidden;
  /* MÉRVE (2026-07-15, canvas-pixelmintavétel a hero-bg.png-ből): a kép domináns
     háttér-kékje #3298B6 (a képpontok 47,6%-a). A CSS itt korábban #3496B6-ot
     mondott — közeli, de NEM azonos → a kép felső élénél technikai varrat.
     Ezért a háttér mostantól PONTOSAN a kép színe. NE írd át kézzel: ha a kép
     cserélődik, mintavételezd újra. */
  background: #3298B6;
}
.v2-hero__media {
  position: absolute;
  inset: 0;
}
/* Kép-crop doboz — jobb-felül, langswitch-jobb-széléhez igazítva, 70vh magas.
   aspect-ratio = cropolt-kép aránya (1000/725), így a szélesség adódik a
   magasságból. */
.v2-hero__crop {
  position: absolute;
  top: 0;
  right: max(var(--v2-s-5), calc((100vw - var(--v2-container)) / 2 + var(--v2-s-5)));
  height: 80%;
  aspect-ratio: 1000 / 725;
  overflow: hidden;
}
.v2-hero__img {
  position: absolute;
  display: block;
  width: calc(100% / 0.91);
  height: auto;
  bottom: 0;
  left: 0;
  user-select: none;
  pointer-events: none;
  /* A nagy PNG a SAJÁT betöltésére fade-el be (nincs pop-in / bevillanás),
     függetlenül a fa-loading-koreográfiától — így akkor is finom, ha a kép a
     webfontok UTÁN érkezik. A v2.js a load-ra teszi az is-loaded-et; no-JS
     esetén a header <noscript> style opacity:1-re állítja (mindig látszik). */
  opacity: 0;
  transition: opacity 900ms ease;
}
.v2-hero__img.is-loaded { opacity: 1; }
.v2-hero__content {
  position: absolute;
  top: 14%;
  left: max(var(--v2-s-5), calc((100vw - var(--v2-container)) / 2 + var(--v2-s-5)));
  right: max(var(--v2-s-5), calc((100vw - var(--v2-container)) / 2 + var(--v2-s-5)));
  max-width: 72ch;
  z-index: 2;
}
@media (max-width: 900px) {
  .v2-hero__content {
    top: 10%;
    max-width: 92%;
  }
  .v2-hero__crop { height: 65%; }
}
/* Egyetlen kivétel a "ne használj gradient" szabály alól:
   a hero főcím Antedote-szerű csillámlása (background-clip: text). */
/* (A korábbi `.v2-hero__bg` cella a markupból és innen is eltávolítva.) */

.v2-hero__brand { margin: 0 0 var(--v2-s-7); line-height: 0; }
.v2-hero__brand img { width: clamp(280px, 36vw, 520px); border-radius: 0; }

/* Hero claim — Antedote-stílus szín-csillámlás, csak türkiz-családon belül.
   Lassú (24s), ease-in-out — alig látható mozgás, mintha fény vonulna át. */
.v2-hero__claim {
  font-size: clamp(2rem, 5vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0;
  position: relative;
  display: block;
  padding-bottom: 0.15em; /* descender g/p/j ne-vágódjon */
  padding-right: 0.5em;   /* a "Független." jobb széle elférj */
  overflow: visible;
}
/* Hero claim — kifinomult emelkedés: hosszan ívelő ease-out, alulról
   feljövő transform + opacity, sorok között finom staggerrel. A két sor
   alatti sub-szöveg is ugyanezzel az easinggel, később. A sorok alap-színe
   fehér; a mondatonkénti szín-kiemelést a .v2-hero__claim-part kezeli. */
.v2-hero__claim-row {
  display: block;
  white-space: nowrap;
  overflow: visible;
  color: #ffffff;
  /* Belépő a betöltés-koreográfiából (fa-loading → fa-loaded), TRANSITION-
     alapú (nem keyframe!) → a fájl-alji reduced-motion animation-stop NEM
     érinti, így reduced-motion mellett IS fut (az előző keyframe-verzió itt
     némán ki volt kapcsolva a reduced-motion catch-all miatt — ezért „nem
     kapott a hero belépőt"). Kiinduló állapot: html.fa-loading (lentebb); a
     webfontok betöltése után (fa-loaded) úszik be, a VÉGLEGES fonttal → nincs
     font-swap-villanás menet közben. */
  transition: opacity 900ms var(--v2-ease), transform 900ms var(--v2-ease);
}
.v2-hero__claim-row--1 { transition-delay: 100ms; }
.v2-hero__claim-row--2 { transition-delay: 240ms; }

/* Mondatonként léptetett szín. A tagline 4 "mondata" közül mindig pontosan
   EGY .is-active mondat színes, a többi fehér. A JS (v2.js: claim sentence
   cycle) ~2 mp-enként lépteti az aktív mondatot a következőre, random színnel
   (a szekció-hátterek vibrant kódjaiból, kék/rózsaszín/szürke/fekete nélkül).
   SZIGORÚAN csak a betű színeződik — NINCS halo/text-shadow körülötte. A
   megjelenés/eltűnés egy 700 ms-os TISZTA color-crossfade: a kilépő mondat
   lágyan fehérre úszik, a belépő a színére. A színt a JS a --v2-claim-active
   inline custom property-ben adja át. */
.v2-hero__claim-part {
  color: #ffffff;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.v2-hero__claim-part.is-active {
  color: var(--v2-claim-active, #FFE201);
}
@media (max-width: 700px) {
  .v2-hero__claim { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .v2-hero__claim-row { white-space: normal; }
}
/* ===== Betöltés-koreográfia — kiinduló (fa-loading) állapotok =====
   A <head>-ben inline felkerülő `fa-loading` alatt a kritikus above-the-fold
   elemek a belépő KIINDULÓ állapotában várnak; a v2.js `fa-loaded`-re váltja
   (webfontok készen), és az elemek saját transition-jei finoman beúsztatják
   őket. JS nélkül (nincs fa-loading) minden azonnal a végállapotban van →
   robusztus fallback. Mind TRANSITION-alapú → reduced-motion mellett IS fut
   (a reduced-motion animation-stop csak a keyframe-eket vágná — a régi hero
   belépő ezért nem futott reduced-motion-ön). A hero-KÉP nem itt van: az a
   SAJÁT betöltésére fade-el (lásd .v2-hero__img), hogy akkor se villanjon be,
   ha a nagy PNG a fontok UTÁN tölt be. */
html.fa-loading .v2-header          { opacity: 0; transform: translateY(-14px) translateZ(0); }
html.fa-loading .v2-hero__claim-row { opacity: 0; transform: translateY(28px); }
html.fa-loading .v2-hero__sub       { opacity: 0; transform: translateY(24px); }
/* (a régi .v2-hero__claim-text osztály eltávolítva — a .v2-hero__claim-row váltja le) */

/* Bekarikázós / aláhúzós kiemelés a hero-claim szavain — kikapcsolva
   (user 2026-05-15: „Az alapos ne legyen aláhúzva"). */
.v2-hero__claim-word {
  position: relative;
  display: inline-block;
}
.v2-hero__claim-word .v2-mark { display: none; }

.v2-hero__sub {
  display: inline-block;
  margin-top: var(--v2-s-5);
  max-width: 56ch;
  font-size: var(--v2-fs-md);
  color: var(--v2-ink);
  line-height: 1.5;
  /* Header-szerű glass-blur olvasható box, szögletes (border-radius 0). */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  padding: var(--v2-s-3) var(--v2-s-4);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Belépő a betöltés-koreográfiából (fa-loading → fa-loaded), TRANSITION-alapú
     (a hero-claim után 360 ms-mal, finom staggerrel). Kiinduló állapot:
     html.fa-loading .v2-hero__sub. Reduced-motion mellett is fut. */
  transition: opacity 900ms var(--v2-ease) 360ms, transform 900ms var(--v2-ease) 360ms;
}

/* -----------------------------------------------------------------------------
   Bal-jobb 2-osztású kontrasztos szekció (Kadence-vázlat)
   Sablon: <section class="v2-split v2-split--{nameleft} v2-split--{nameright}">
----------------------------------------------------------------------------- */

.v2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60vh;
}
/* Mit csinálunk — bal kisebb, jobb nagyobb. */
.v2-split--methods { grid-template-columns: 0.42fr 0.58fr; }
/* Tények — bal (számláló-tábla) széles, jobb (szöveges) keskeny hasáb.
   Az arány + a mérsékelt számméret együtt adja ki, hogy a két oszlop
   TARTALMA kb. egyforma magas legyen (user 2026-06-11 kérés). */
.v2-split--stats { grid-template-columns: 0.60fr 0.40fr; }
.v2-split--stats { --v2-fs-stat: clamp(4rem, 7vw, 5.3rem); }
/* EGYSÉGES TABLET-VÁLTÁS 1180px (2026-07-16): a kétoszlopos szekciók EGYSZERRE
   stackelnek a nav hamburgerré válásával (a nav breakpointja is 1180 — lásd az
   indoklást a .v2-navtoggle blokknál: a desktop nav MÉRVE ≥1132px kell hogy
   kiférjen, 1080-on a nyelvváltó tört). Korábban a szekciók 900px-en stackeltek
   → 901-1080 „holt zóna" (kétoszlopos panel + hamburger); majd 1080 → 1081-1131
   „nav-törés zóna" (desktop nav, de a nyelvváltó a 2. sorba esett). Mindkettő a
   user Safari-zoom bugja volt. A CSATOLT szabályok (ugyfelek cím-order-flip,
   .v2-stats-para, .v2-contact-grid, .v2-team-tiles + a nav/padding/érintőcélok)
   MIND 1180-ra mozogtak — LOCKSTEP. A >1180px desktop pixelre változatlan. */
@media (max-width: 1180px) {
  .v2-split { grid-template-columns: 1fr; min-height: auto; }
  .v2-split--methods { grid-template-columns: 1fr; }
  .v2-split--stats { grid-template-columns: 1fr; }
}
.v2-split__cell {
  padding: var(--v2-s-9) var(--v2-s-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Grid item default min-width:auto → a cella min-content-je (a tartalom
     leghosszabb törhetetlen sora, pl. perjeles szó-lánc) szétnyomná a tracket
     és vele az egész szekciót mobilon. min-width:0 → a track sosem nő a
     viewport fölé; a hosszú szót az overflow-wrap (body) töri. */
  min-width: 0;
}
.v2-split__cell--center { align-items: center; text-align: center; }

/* Szín-variánsok — csak a régi free-association.hu paletta + új arculati türkiz.
   A sötét fekete-szerű (#221E1F ink) és sötét-zöld (#006E39) NEM háttér.
   Az `--v2-ink` MARAD szöveg-színként (a textnek kontraszt kell). */
.v2-bg-primary         { background: var(--v2-primary); color: var(--v2-ink); }
.v2-bg-primary-deep    { background: var(--v2-primary-deep); color: #fff; }
.v2-bg-primary-bright  { background: var(--v2-primary-bright); color: var(--v2-ink); }
/* Élénk (telített) színek — minden szöveg FEHÉR (user 2026-05-15 kérés). */
.v2-bg-magenta         { background: var(--v2-magenta); color: #fff; }
.v2-bg-magenta-bright  { background: var(--v2-magenta-bright); color: #fff; }
.v2-bg-purple          { background: var(--v2-purple); color: #fff; }
.v2-bg-indigo          { background: var(--v2-indigo); color: #fff; }
.v2-bg-teal            { background: var(--v2-teal); color: #fff; }
.v2-bg-green           { background: var(--v2-green); color: #fff; }
.v2-bg-orange          { background: var(--v2-orange); color: #fff; }
.v2-bg-yellow          { background: var(--v2-yellow); color: var(--v2-ink); }

/* Halvány (pasztel) háttér-osztályok — ink sötét szöveg (kontraszt-AAA). */
.v2-bg-purple-light    { background: var(--v2-purple-light); color: var(--v2-ink); }
.v2-bg-green-light     { background: var(--v2-green-light); color: var(--v2-ink); }
.v2-bg-blue-light      { background: var(--v2-blue-light); color: var(--v2-ink); }
.v2-bg-blue-mist       { background: var(--v2-blue-mist); color: var(--v2-ink); }
.v2-bg-grey            { background: var(--v2-grey-light); color: var(--v2-ink); }
.v2-bg-grey-mid        { background: var(--v2-grey-mid); color: #fff; }
.v2-bg-grey-fade       { background: var(--v2-grey-fade); color: var(--v2-ink); }
.v2-bg-paper           { background: var(--v2-paper); color: var(--v2-ink); }
.v2-bg-sky             { background: var(--v2-primary-tint); color: var(--v2-ink); }

/* Kézzel írott számláló — Indie Flower.
   Pontos cross-browser konzisztencia (Chrome ↔ Safari):
   - `text-rendering: geometricPrecision` — KIKAPCSOLJA a platform-specifikus
     optimalizációkat (Skia / CoreText / DirectWrite egyaránt geometrikusan
     renderel). Ez az autoritatív megoldás Chrome ↔ Safari font-eltérésre.
   - `font-feature-settings: normal` — semmi OpenType-feature, semmi auto-kerning.
   - `font-synthesis: none` — ne syntheszáljon fake bold/italic variánst.
   - `letter-spacing: 0` — kerek érték, ne pixel-szubpixelnél eltérő.
   - A header-ben `<link rel="preload">` betölti az Indie Flower woff2-t,
     mielőtt a CSS parsing-ja eljutna ide — mindkét böngészőben kész a font
     mire a digit kirajzolódna. */
.v2-counter {
  display: inline-block;
  position: relative;
  font-family: var(--v2-font-hand);
  font-size: calc(var(--v2-fs-stat) * 1.08);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0;
  word-spacing: 0;
  padding-bottom: 18px;
  color: inherit;
  /* Maxim. cross-browser-konzisztens font-rendering (Chrome ↔ Safari):
     - geometricPrecision     — platform-specifikus optimalizáció OFF
     - font-kerning none      — semmi auto-kerning (böngészők eltérően)
     - font-variant-ligatures none — semmi ligature
     - font-variant-numeric tabular-nums — fix-width digit-ek
     - font-feature-settings normal — semmi extra OpenType-feature
     - font-synthesis none    — semmi fake bold/italic */
  text-rendering: geometricPrecision;
  font-kerning: none;
  font-variant: normal;
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.v2-counter__num { display: inline-block; white-space: nowrap; }
.v2-counter__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  width: 100%;
  height: 22px;
  pointer-events: none;
  overflow: visible;
}
/* Az aláhúzás (rough.js által generált) statikusan látszik — nincs
   stroke-dashoffset-alapú rajz-animáció. A kerekített cap-ek + non-scaling-
   stroke az Indie Flower betűtípus karakteréhez illesztik a vonalat. */
.v2-counter__rule path,
.v2-counter__rule line,
.v2-counter__rule polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v2-counter__label {
  /* Inline sor: a mondat + KÖZVETLENÜL a szó után az ikon (user 2026-07-14).
     A label saját 0.88 réteg-opacitása a szövegre és az ikonra egyaránt hat →
     azonos halványság, az ikon a szöveg szerves része, nem külön kísérő. */
  display: inline-flex;
  align-items: center;
  gap: var(--v2-s-2);
  font-size: var(--v2-fs-sm);
  font-weight: 500;
  margin-top: var(--v2-s-2);
  letter-spacing: 0.02em;
  opacity: 0.88;
}

/* Stats list — egyetlen oszlop, 5 stat egymás alatt. Tisztább struktúra
   (a korábbi 2-oszlopos grid zavaró volt — az utolsó full-width sor + az
   egy-jegyű "4" cellában sok üres rész → érthetetlen layout). */
.v2-stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-2);
  height: 100%;
}
.v2-stats-list__row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--v2-s-2);
  padding: var(--v2-s-3) var(--v2-s-4);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  flex: 1 1 auto;
}

/* -----------------------------------------------------------------------------
   Tények — a bal oldali számok + kézzel húzott aláhúzások belépő-koreográfiája.
   A szekció-reveal (.v2-reveal → .is-in) hozza be a KERETET (hátterek, eyebrow,
   h2, jobb blokk). A stat-sorok belépője viszont PER SOR indul: minden
   .v2-stats-list__row akkor animál, amikor Ő MAGA a viewportba ér (.is-drawn — a
   v2.js per-sor observere teszi rá), NEM a szekció egyszeri .is-in-jekor. Így a
   lentebbi sorok NEM futnak le, mielőtt a user odagörget (user 2026-07-14).
   Soronként: előbb a szám úszik be (fade + finom emelkedés), majd ~0,34 mp-cel
   később alá „húzódik" a toll-vonal (stroke-dashoffset draw-on).

   A VÉGÁLLAPOT azonos az eddigivel (opacity 1, nincs eltolás, teljes vonal). A
   --draw-length-et a v2.js írja be counterenként (a hero-claim draw-on-nal közös
   konvenció); a var-fallback (300) a JS lefutásáig REJTVE tartja a vonalat, így
   nincs felvillanás. A dash CSS-ben van (nem inline), ezért az .is-drawn tiszta
   kaszkáddal, !important nélkül vezérli a rajzolást. A lépcsőzést a per-sor
   scroll adja — nincs szükség nth-child transition-delay-re.
----------------------------------------------------------------------------- */
.v2-split--stats .v2-stats-list__row .v2-counter__num {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1000ms var(--v2-ease), transform 1000ms var(--v2-ease);
}
.v2-split--stats .v2-stats-list__row.is-drawn .v2-counter__num {
  opacity: 1;
  transform: translateY(0);
}
.v2-split--stats .v2-stats-list__row .v2-counter__rule path {
  stroke-dasharray: var(--draw-length, 300);
  stroke-dashoffset: var(--draw-length, 300);
  transition: stroke-dashoffset 880ms var(--v2-ease);
  transition-delay: 340ms;   /* a szám beúszása UTÁN húzódik alá a vonal */
}
.v2-split--stats .v2-stats-list__row.is-drawn .v2-counter__rule path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  /* User-döntés (2026-07-14): reduced-motion mellett IS fusson a belépő — a user
     maga reduced-motion-ön van, e nélkül nem látná a hatást (vö. a scroll-slide
     egységes felülírása mindenkinek, 2026-07-10). A nagy elmozdulást viszont
     kihagyjuk: a szám HELYBEN úszik be (a fade megmarad), az aláhúzás
     megrajzolódik (draw-on megmarad) — sem a fade, sem a helyben-rajzolódás nem
     vestibular-trigger, egyedül a rise az. Itt csak a transform-ot nullázzuk. */
  .v2-split--stats .v2-stats-list__row .v2-counter__num { transform: none; }
}

/* -----------------------------------------------------------------------------
   Körív-szekció-elválasztás — `.v2-bubble-top` osztály a szekciókon.
   A szekció felső sarkai elliptikus körívvel lekerekítve, és negatív margin-top
   miatt „belevág" az előző szekcióba. Mobilon kikapcsolva.
----------------------------------------------------------------------------- */

/* `v2-bubble-top` neutralizálva — a user 2026-05-15-i kérése:
   „a korives szekciokat hagyjuk egyelore inkabb, szogletes formakat
   hasznaljunk inkabb." A class megmarad a partial-ekben (clean refactor),
   de vizuálisan szögletes szekciókat ad. */
.v2-bubble-top { position: relative; }

/* -----------------------------------------------------------------------------
   Scroll-reveal — minden szekció finoman fade-fel a viewport-ba érve.
----------------------------------------------------------------------------- */

.v2-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--v2-ease), transform 900ms var(--v2-ease);
  will-change: opacity, transform;
}
/* A will-change CSAK a még nem-revealelt állapotban indokolt. Enélkül mind
   a 7 teljes-szélességű szekció PERMANENS composited layer maradna (retina
   @2x: több száz MB raster-memória) — memória-nyomás alatt a böngésző
   layereket dob el és scroll KÖZBEN raszterel újra → akadás-érzés. Az is-in
   utáni (statikus) szekció nem layer; az épp futó reveal-transition a
   transition idejére automatikusan compositinget kap. */
.v2-reveal.is-in { opacity: 1; transform: translateY(0); will-change: auto; }
/* Reduced-motion: a szekció-belépő SZÁNDÉKOSAN fut itt is (nincs kikapcsoló
   media-blokk) — user-kérés 2026-07-14: „reduce motion mellett is ugyanúgy".
   A user maga reduced-motion-ön van, enélkül sosem látná a belépőt. A fade +
   finom felúszás (28px) nem nagy elmozdulás. A szekción BELÜLI extra elem-
   rise-ok (stats-szám, principle-kártyák) viszont reduced-motion mellett
   kimaradnak (lásd ott) → a szekció egyben, EGYSZER úszik be, nincs dupla-
   mozgás („ne túlzásba véve"). A per-frame munka végig csak opacity+transform
   (compositor), IntersectionObserver-triggerrel — nem szaggat. */

/* Anchor-scroll (slide) animáció alatt a glass-blur szünetel: a backdrop-filter
   a mögöttes — minden frame-ben változó — tartalomból mintavételez, így scroll
   közben frame-enkénti újra-blur (az oldal legdrágább ismétlődő raster-
   tétele). Az animáció idejére majdnem-opak fehér fedi ki (a suhanó tartalom
   felett a különbség nem észlelhető); a class levételekor a background-fade
   (500 ms) alatt a visszakapcsolt blur a fehér mögül fokozatosan "jön elő",
   nincs látható ugrás. A class-t a smoothScrollTo kezeli (v2.js). */
html.v2-anim-scroll .v2-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.92);
  transition: none;
  /* A header kattintható marad slide közben is: egy újabb menü-kattintás a
     smoothScrollTo-ban lemondja az előző animációt és átcélzza a slide-ot. */
  pointer-events: auto;
}
/* A slide alatt letiltjuk a pointer-event hit-testinget: a stationer kurzor
   alatt suhanó tartalom különben frame-enként :hover-t triggerelne (nav-
   aláhúzás, kártya-hover) → fölösleges repaint. A header kivétel (fent). A
   wheel/touch scroll-interrupt window-listeneren fut + a wheel-görgetés nem
   pointer-event, így a megszakíthatóság és a görgethetőség megmarad. */
html.v2-anim-scroll { pointer-events: none; }

/* Körív-tetejű / körív-aljú szekciók — egyedi átmenet-megoldás.
   A felette lévő szekciót "fölül belevágja" egy hatalmas elliptikus körív. */
.v2-bubble-top {
  position: relative;
  z-index: 2;
  margin-top: -70px;
  border-top-left-radius: 50% 110px;
  border-top-right-radius: 50% 110px;
  padding-top: calc(var(--v2-s-10) + 40px);
}
.v2-bubble-bottom {
  position: relative;
  z-index: 1;
  border-bottom-left-radius: 50% 110px;
  border-bottom-right-radius: 50% 110px;
  padding-bottom: calc(var(--v2-s-10) + 40px);
  margin-bottom: -70px;
}
/* Bal-jobb 50/50 split bubble-top / bubble-bottom: együtt mozognak. */
.v2-split.v2-bubble-top { border-top-left-radius: 50% 110px; border-top-right-radius: 50% 110px; overflow: hidden; }
.v2-split.v2-bubble-bottom { border-bottom-left-radius: 50% 110px; border-bottom-right-radius: 50% 110px; overflow: hidden; }
@media (max-width: 700px) {
  .v2-bubble-top, .v2-bubble-bottom,
  .v2-split.v2-bubble-top, .v2-split.v2-bubble-bottom {
    border-radius: 0;
    margin-top: 0; margin-bottom: 0;
    padding-top: var(--v2-s-9); padding-bottom: var(--v2-s-9);
  }
}

/* -----------------------------------------------------------------------------
   Methods (Mit csinálunk) — bal lista jobbra ágazat-tag
----------------------------------------------------------------------------- */

.v2-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--v2-s-5);
}
/* A belső grid oszlopaira ugyanaz a min-width:auto csapda érvényes, mint a
   .v2-split__cell-re — enélkül az 1fr track a leghosszabb törhetetlen sorra
   (385px-es perjeles szó-lánc a KVAL listában) nyílna ki, és kitolná a cellából. */
.v2-methods-grid > * { min-width: 0; }
@media (max-width: 700px) { .v2-methods-grid { grid-template-columns: 1fr; } }
.v2-methods-list {
  list-style: none; padding: 0; margin: 0;
}
.v2-methods-list li {
  padding: var(--v2-s-2) 0;
  font-size: var(--v2-fs-sm);
  /* A korábbi border-bottom helyett a JS-ben rough.js-szel rajzolt SVG-vonal
     (`.v2-methods-divider`) jelenik meg minden non-last li-ben — kézzel
     rajzolt karakter, ugyanolyan halvány fehér szín mint régen. */
}
.v2-methods-divider {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: var(--v2-s-2);
  color: rgba(255, 255, 255, 0.4);
  overflow: visible;
}
.v2-methods-divider path,
.v2-methods-divider line,
.v2-methods-divider polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* (korábbi border-bottom-color override-ok eltávolítva — a divider most
   .v2-methods-divider SVG, rough.js által rajzolva) */
.v2-methods-list li strong { font-weight: 600; }

.v2-sectors {
  display: flex; flex-wrap: wrap; gap: var(--v2-s-2);
  margin-top: var(--v2-s-5);
}
.v2-sector-tag {
  display: inline-flex;
  padding: 4px 12px;
  font-size: var(--v2-fs-xs);
  border: 1px solid currentColor;
  border-radius: 0;
  opacity: 0.9;
}

/* -----------------------------------------------------------------------------
   Filozófia — fehér szekció, ink tartalom, vonalháló-tagolás
----------------------------------------------------------------------------- */

/* A 4 telített „ablak” színe kivéve (user 2026-07-15): fehér alap, fekete
   tartalom. A színes blokkokba ágyazva (fent `mit-csinalunk` zöld/teal, lent
   `csapat` indigó) ez a szekció a lélegzetvétel — ezért nem kap külső keretet
   sem, a határt a szomszédok telített színe adja. */
.v2-principles-section {
  background: var(--v2-paper);
  color: var(--v2-ink);
}

/* Full-bleed 2×2 rács: rés (gap:0) és középre-szűkítés nélkül tölti ki a
   szekciót. A cellákat hajszálvonal-háló tagolja, ami a CELLÁN ül (nem
   grid-gap-háttérként) — így a reveal-fade-del EGYÜTT úszik be; a gap-trükk a
   cellák opacity:0 kezdőállapotán átütve szürke rácsot villantana. */
.v2-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(40vh, auto);
  gap: 0;
  margin: 0;
}
.v2-principle {
  padding: var(--v2-s-9) var(--v2-s-7);
  min-width: 0;                 /* grid min-content védelem (mobil-overflow) */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* tartalom a cella függőleges közepén */
  border-right: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 900ms var(--v2-ease), transform 900ms var(--v2-ease);
  will-change: opacity, transform;
}
/* Csak a BELSŐ kereszt marad vonal — a rács külső széleire nem kerül. */
.v2-principle:nth-child(2n)  { border-right: 0; }
.v2-principle:nth-child(n+3) { border-bottom: 0; }

/* ALSÓ SOR: a tartalom a cella TETEJÉTŐL induljon, ne középről — user
   2026-07-15: „a jobb alsó csempe tartalma egy síkban kezdődjön a mellette
   lévő csempe tartalmával”. A 03 szövege hosszú (a sor magasságát az adja, így
   ott a `center` amúgy is a padding-élre esik), a 04-é rövid → középre húzva
   74 px-el lejjebb kezdődött (mérve). A felső sor MARAD `center`: ott a 01
   eyebrow-ja miatt a flex-start NÖVELNÉ az eltérést (25 → ~50 px). */
.v2-principle:nth-child(n+3) { justify-content: flex-start; }
@media (max-width: 700px) {
  /* Egy oszlop: a függőleges vonal értelmét veszti, marad 3 vízszintes
     elválasztó (az utolsó pont alatt nincs). */
  .v2-principles { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .v2-principle:nth-child(2n)  { border-right: 0; }
  .v2-principle:nth-child(odd) { border-right: 0; }
  .v2-principle:nth-child(n+3) { border-bottom: 1px solid var(--v2-line); }
  .v2-principle:last-child     { border-bottom: 0; }
  /* A pontok mobilon EGYMÁS ALATT állnak, így a desktopra hangolt 6rem függőleges
     belső margóból két szomszédos pont KÖZÖTT 12rem üresség lett — túl szellős
     (user 2026-07-15). Feleannyi levegő (3rem): a pontok közelebb kerülnek
     egymáshoz, de a tartalom nem szorul össze, és a hajszálvonal-elválasztó is
     megőrzi a tagolást. Ez tudatosan felülírja a lentebbi „szélesség-kihasználás"
     blokk megjegyzését („a függőleges 96px marad") — az a korábbi kör döntése volt.
     CSAK a függőlegest állítjuk: a VÍZSZINTES paddingot az a blokk (≤1080px) viszi
     16px-re + safe-area — azt nem írjuk felül. */
  .v2-principle { padding-top: var(--v2-s-7); padding-bottom: var(--v2-s-7); }
}
.v2-reveal.is-in .v2-principle { opacity: 1; transform: translateY(0); }
.v2-reveal.is-in .v2-principle:nth-child(1) { transition-delay: 120ms; }
.v2-reveal.is-in .v2-principle:nth-child(2) { transition-delay: 260ms; }
.v2-reveal.is-in .v2-principle:nth-child(3) { transition-delay: 400ms; }
.v2-reveal.is-in .v2-principle:nth-child(4) { transition-delay: 540ms; }

/* KESKENY nézet (≤900px) — „ELŐHÍVÓDÁS”. A csempe a HELYÉN ül életlenül és
   kimosva, majd FÓKUSZBA húzódik (blur→0 + telítettség/opacity fel), ahogy a
   görgetés a nézési zónába hozza — mint egy fénykép a hívóban (a papír-motívumhoz
   is illő slow-cinema focus pull). Az `.is-shown`-t a v2.js per-elem observere
   teszi rá (initTileReveal).

   MIÉRT EZ, nem a régi fade+rise (a diagnózis 7 mért gyökéroka, 2026-07-15):
   • NINCS Y-mozgás: a translateY(24px) beleolvadt a görgetésbe (azonos vektor, a
     görgetés 34%-a) — nem lehetett rajta önálló eseményt jelezni.
   • --v2-ease-INOUT, NEM --v2-ease: az utóbbi (mozgás-görbe) az opacityn 150 ms
     alatt 70%-ra ugrott = pop; a 700 ms utolsó 57%-a üresjárat volt. Az inout
     görbe + hosszú (1100 ms) idő adja a slow-burn regisztert.
   • A csempe SOSEM tűnik el (opacity 0.42, nem 0) → nincs üres lyuk / tartalmatlan
     bevonuló sáv.
   • A blur méret-toleráns: a régi fix 24 px a csempe-mérethez képest 6-szoros
     szórást adott (32% az ügyfél-kártyán, 5% a nagy csempén); egy 7 px-es blur
     minden méreten „életlen”-nek olvasódik. */
@media (max-width: 900px) {
  .v2-principle {
    /* A `filter` (blur+saturate = az ÉLESEDÉS) 900ms, az opacity-beúszás marad
       1100ms (user 2026-07-16: „az elmosódás kicsit kevesebb ideig tartson,
       hamarabb élesedjen ki a tartalom — finoman"). Így a tartalom ~200ms-mal
       előbb kerül fókuszba, miközben a halk fade-in nyugalma megmarad. */
    transition: opacity 1100ms var(--v2-ease-inout), filter 900ms var(--v2-ease-inout);
    transition-delay: 0ms;
  }
  .v2-reveal.is-in .v2-principle { opacity: 0.42; transform: none; filter: blur(7px) saturate(0.5); }
  .v2-principle.is-shown,
  .v2-reveal.is-in .v2-principle.is-shown { opacity: 1; filter: blur(0) saturate(1); }
}

/* Reduced-motion: NINCS blur (az elmosás vizuálisan zavaró lehet, még ha nem is
   vestibular-trigger). Marad egy enyhe opacity-fade (a user 2026-07-14: reduce
   mellett is legyen belépő — ő maga azon van), blur nélkül. A `!important` a
   filter:none-ra kell, mert a keskeny `.v2-reveal.is-in .v2-principle` (0,3,0)
   verné a reduce (0,1,0)-t; az opacity-hez a specificitást szelektor-szinten
   fedjük. */
@media (prefers-reduced-motion: reduce) {
  .v2-principle,
  .v2-reveal.is-in .v2-principle { filter: none !important; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .v2-principle { transition: opacity 600ms var(--v2-ease-inout); }
  .v2-reveal.is-in .v2-principle { opacity: 0.55; }
  .v2-principle.is-shown,
  .v2-reveal.is-in .v2-principle.is-shown { opacity: 1; }
}
.v2-principle__h {
  font-size: var(--v2-fs-lg);
  margin-bottom: var(--v2-s-3);
}
/* Filozófia-ikonok — a logó nyelvén: szögletes, geometrikus vonalas rajz,
   `currentColor` stroke → a fehér szekcióban ink-fekete, a szöveggel azonos
   tónusban. Egységes viewBox + stroke-width adja a négy ikon kohézióját.
   (Nincs opacity-lágyítás: az a telített kártyák fehér ikonjaihoz kellett.) */
.v2-principle__icon {
  display: block;         /* span → block, hogy a fix méret érvényesüljön */
  width: 46px;
  height: 46px;
  margin-bottom: var(--v2-s-4);
  color: currentColor;
}
.v2-principle__icon svg { width: 100%; height: 100%; display: block; }

/* -----------------------------------------------------------------------------
   Ikon-wrapperek (fa_icon) — közös alaposztály + szekció-kontextusok.
   Minden ikon `currentColor` stroke-ú, a szülő szövegszínét veszi fel.
----------------------------------------------------------------------------- */
.v2-icon { display: block; width: 100%; height: 100%; }

/* Tények — az ikon a mondat végén, KÖZVETLENÜL a szó után (a .v2-counter__label
   inline sorában). A méret a szöveghez arányos (em), a halványságot a label
   0.88-as rétege adja → a szöveggel azonos tónus, az ikon a szöveg része. */
.v2-stat__icon { width: 1.25em; height: 1.25em; flex: none; }

/* Mit csinálunk — fejléc-ikon a h3 szövege előtt (a szöveghez skálázódik). */
.v2-h-icon { width: 1.15em; height: 1.15em; flex: none; }

/* Kapcsolat — cím-ikon (nagyobb) + csatorna-ikon (szöveg-méretű). */
.v2-contact-icon { width: 26px; height: 26px; flex: none; margin-top: 3px; }
/* A bejárat-info a fő cím ALATT, KÜLÖN sorban és kisebben (user 2026-07-16):
   kiegészítő tájékozódás, nem maga a cím → block (mindig új sor, akkor is, ha a
   fő cím épp kifér), a fő --v2-fs-md-nél kisebb --v2-fs-sm, halványabb szürke. */
.v2-contact-entrance {
  display: block;
  margin-top: var(--v2-s-1);
  font-size: var(--v2-fs-sm);
  color: var(--v2-grey);
  line-height: 1.35;
}
.v2-contact-ico { width: 1.05em; height: 1.05em; flex: none; }

/* -----------------------------------------------------------------------------
   Csapat — Leger-stílus, sötét háttér, hover-expand
----------------------------------------------------------------------------- */

.v2-team-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--v2-s-4);
}
/* 4→2 oszlop az egységes 1080px tablet-váltásnál (volt 1000px) — a csapat/eset
   csempék a többi szekcióval EGYSZERRE lépnek tablet-elrendezésbe. */
@media (max-width: 1180px) { .v2-team-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .v2-team-tiles { grid-template-columns: 1fr; } }

.v2-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  cursor: pointer;
  background: var(--v2-paper);
  border: 1px solid var(--v2-grey-fade);
  overflow: hidden;
  transition: transform var(--v2-t-hover) var(--v2-ease), box-shadow var(--v2-t-hover) var(--v2-ease);
}
.v2-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 44px -22px rgba(34, 30, 31, 0.45); }

/* KESKENY nézet — „ELŐHÍVÓDÁS” a csapat-/esettanulmány-csempéken és az ügyfél-
   kártyákon: ugyanaz a focus-pull, mint a filozófia-csempéken (blur+kimosás →
   éles+telített, NEM Y-mozgás). Az `.is-shown`-t a v2.js initTileReveal teszi rá.
   FONTOS: a belépő NEM használ `transform`-ot (a diagnózis szerint a régi
   translateY beleolvadt a görgetésbe), ezért a hover `translateY(-5px)` szabadon
   marad a transform-ágon — nem ütközik, nincs szükség külön :hover-visszaadásra. */
@media (max-width: 900px) {
  .v2-tile,
  .v2-client-card {
    opacity: 0.42;
    filter: blur(7px) saturate(0.5);
    /* filter 900ms (az élesedés), opacity 1100ms marad — a tartalom kicsit
       hamarabb élesedik ki, a beúszás finom (user 2026-07-16). Lásd .v2-principle. */
    transition: opacity 1100ms var(--v2-ease-inout),
                filter 900ms var(--v2-ease-inout),
                transform var(--v2-t-hover) var(--v2-ease),
                box-shadow var(--v2-t-hover) var(--v2-ease);
  }
  .v2-tile.is-shown,
  .v2-client-card.is-shown { opacity: 1; filter: blur(0) saturate(1); }

  /* Ügyfél-rács: a 3 oszlop egy sorban AZONOS triggeren indul (a diagnózis szerint
     0 ms szórással, 3-asával — „villanykapcsoló-sor”, nem hullám). Oszlop-alapú
     kis stagger → a fókusz balról jobbra fut végig a soron; a sorok közti lépcsőt
     a görgetés adja. A .v2-client-card-nak nincs hover-je, így a transition-delay
     nyugodtan az egész átmenetre mehet. */
  .v2-client-card:nth-child(3n+2) { transition-delay: 90ms; }
  .v2-client-card:nth-child(3n)   { transition-delay: 180ms; }
}

/* Reduced-motion: NINCS blur (lásd a .v2-principle indoklását), marad egy enyhe
   opacity-fade. A `!important` a filter-re a keskeny-ág verése miatt kell. */
@media (prefers-reduced-motion: reduce) {
  .v2-tile,
  .v2-client-card { filter: none !important; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .v2-tile,
  .v2-client-card {
    opacity: 0.55;
    transition: opacity 600ms var(--v2-ease-inout);
  }
  .v2-tile.is-shown,
  .v2-client-card.is-shown { opacity: 1; }
}

/* Csapat-szekcióban (indigo háttér) a csempék sötétebb tónussal,
   minden szöveg fehéren. */
.v2-bg-indigo .v2-tile {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255, 255, 255, 0.22);
}
.v2-bg-indigo .v2-tile__photo {
  background: var(--v2-purple);
}
.v2-bg-indigo .v2-tile__face,
.v2-bg-indigo .v2-tile__name {
  color: #ffffff;
}
.v2-bg-indigo .v2-tile__short {
  color: rgba(255, 255, 255, 0.78);
}

.v2-tile__photo {
  position: absolute;
  inset: 0;
  background: var(--v2-primary-deep);
}
.v2-tile__face,
.v2-tile__reveal {
  position: absolute;
  inset: 0;
  padding: var(--v2-s-5);
  display: flex; flex-direction: column;
  transition: opacity var(--v2-t-hover) var(--v2-ease), transform var(--v2-t-hover) var(--v2-ease);
}
.v2-tile__face { justify-content: flex-end; color: var(--v2-ink); }
.v2-tile__reveal {
  background: var(--v2-purple);
  color: #fff;
  opacity: 0;
  font-size: var(--v2-fs-sm);
  overflow: auto;
}

@media (hover: hover) {
  .v2-tile:hover .v2-tile__face,
  .v2-tile:focus-within .v2-tile__face { opacity: 0; }
  .v2-tile:hover .v2-tile__reveal,
  .v2-tile:focus-within .v2-tile__reveal { opacity: 1; }
}
.v2-tile.is-revealed .v2-tile__face { opacity: 0; }
.v2-tile.is-revealed .v2-tile__reveal { opacity: 1; }

/* A reveal-ben lévő belső elemek lépcsőzetesen jelennek meg (stagger). */
.v2-tile__reveal > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--v2-t-hover) var(--v2-ease), transform var(--v2-t-hover) var(--v2-ease);
}
@media (hover: hover) {
  .v2-tile:hover .v2-tile__reveal > *,
  .v2-tile:focus-within .v2-tile__reveal > * {
    opacity: 1;
    transform: translateY(0);
  }
}
.v2-tile.is-revealed .v2-tile__reveal > * {
  opacity: 1;
  transform: translateY(0);
}
.v2-tile__reveal > *:nth-child(1) { transition-delay: 100ms; }
.v2-tile__reveal > *:nth-child(2) { transition-delay: 180ms; }
.v2-tile__reveal > *:nth-child(3) { transition-delay: 260ms; }
.v2-tile__reveal > *:nth-child(4) { transition-delay: 340ms; }
.v2-tile:not(:hover):not(.is-revealed) .v2-tile__reveal > * { transition-delay: 0ms; }

/* Placeholder a bio nélküli kollégáknál („Bemutatkozó szöveg hamarosan”).
   A halványítást SZÍN adja, NEM opacity — user 2026-07-15: itt a szöveg
   „szaggatva” jelent meg. Ok: a markupban INLINE `opacity:0.7` állt, ami
   (inline > CSS) felülírta a fenti stagger-animáció opacity-részét is, így a
   span 0→1 fade helyett FIXEN 0,7-en állt. Mérve: a panel 90 ms alatt már
   0.89 opacity-n van (a --v2-ease gyors indulása), tehát a felirat AZONNAL
   felvillant, és utána még ~400 ms-ig csúszott felfelé — a fade és a mozgás
   szétcsúszott. A bio-val rendelkező csempéken ez nincs, mert ott az elemek
   opacity-ja együtt fut a transformmal; a user pont ezt a különbséget vette
   észre. Opacity nélkül a stagger visszakapja mindkét felét. */
.v2-tile__pending {
  font-size: var(--v2-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}

.v2-tile__name { font-size: var(--v2-fs-lg); font-weight: 600; margin: 0; }
/* Csapat-csempék név alatti kézzel rajzolt divider — JS rough.js-szel rajzolja. */
.v2-tile__name-divider {
  display: block;
  width: 70%;
  height: 10px;
  margin: 6px 0 4px;
  color: rgba(255, 255, 255, 0.55);
  overflow: visible;
}
.v2-bg-paper .v2-tile__name-divider,
.v2-case-tile .v2-tile__name-divider { color: rgba(0, 0, 0, 0.45); }
.v2-tile__name-divider path,
.v2-tile__name-divider line,
.v2-tile__name-divider polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v2-tile__short { font-size: var(--v2-fs-xs); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.78; margin-top: 0; }
.v2-tile__quote {
  font-style: italic;
  border-left: 2px solid rgba(255,255,255,0.5);
  padding-left: var(--v2-s-3);
  margin: var(--v2-s-3) 0;
}
.v2-tile__hobby { color: rgba(255,255,255,0.78); font-size: var(--v2-fs-xs); }

/* Esettanulmány-csempék — világos hátteren, színes label-lel */
.v2-case-tile {
  background: var(--v2-paper);
  color: var(--v2-ink);
  border: 1px solid var(--v2-line);
}
.v2-case-tile .v2-tile__photo {
  background: var(--v2-paper);
  background-image: none;
}
.v2-case-tile .v2-tile__face { color: var(--v2-ink); justify-content: space-between; }
.v2-case-tile .v2-tile__label {
  font-size: var(--v2-fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--v2-magenta);
}
.v2-case-tile .v2-tile__reveal { background: var(--v2-magenta); }

/* „+” jel a csempéken (csapat + esettanulmányok) — jelzi, hogy hoverre/tapre
   KINYÍLIK a csempe. A .v2-tile__face gyereke, ezért nyitáskor a face
   opacity:0-jával MAGÁTÓL eltűnik → nincs „×”-párja (user 2026-07-15). Dekoratív:
   pointer-events:none (a kattintás/tap magáé a csempéé). A currentColor a face
   szövegszínét veszi (mindkét szekcióban ink), diszkrét 0.5 opacitással. */
.v2-tile__more {
  position: absolute;
  top: var(--v2-s-4);
  right: var(--v2-s-4);
  width: 24px;
  height: 24px;
  color: currentColor;
  opacity: 0.5;
  pointer-events: none;
}
.v2-tile__more .v2-icon { display: block; width: 100%; height: 100%; }
/* Esettanulmányoknál a „+” a jobb-ALSÓ sarokba (a label FENT van a
   space-between-es face-ben) → átlós elrendezés, nem zsúfolódik a címmel. A
   csapat-csempéken MARAD a jobb-felső (ott a név/tartalom alul ül). User 2026-07-15. */
.v2-case-tile .v2-tile__more { top: auto; bottom: var(--v2-s-4); }

/* -----------------------------------------------------------------------------
   Ügyfelek — ABC-szűrő letter-gif-ekkel + grid
----------------------------------------------------------------------------- */

.v2-clients-letters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s-2);
  justify-content: flex-start;
  margin-bottom: var(--v2-s-7);
}
.v2-client-letter {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: transform var(--v2-t-hover) var(--v2-ease), border-color var(--v2-t-hover) var(--v2-ease), background var(--v2-t-hover) var(--v2-ease);
  border: 2px solid transparent;
}
.v2-client-letter img { width: 26px; height: 26px; }
.v2-client-letter:hover { transform: scale(1.1); border-color: var(--v2-primary-deep); }
.v2-client-letter.is-active { border-color: var(--v2-primary-deep); background: var(--v2-blue-light); }

.v2-client-grid {
  display: grid;
  /* auto-fit + minmax: a rács a SAJÁT KONTÉNERÉHEZ igazodik, nem a viewporthoz.
     Ez azért kell, mert ez a rács egy FÉL SZÉLESSÉGŰ split-panelben ül: 1024px-es
     viewportnál a konténer csak ~512px, így a viewport-alapú breakpoint (900px)
     nem lépett életbe, és 5 oszlop maradt → 82x55px-es csempék (mérve).
     Az auto-fit ezt magától megoldja MINDEN szélességen, breakpoint nélkül. */
  /* A 104px-es alsó határ HANGOLT, nem tetszőleges (mérve, 2026-07-15):
     a desktop-cella ~624px tartalom-sávjában pont 5 oszlopot ad → a csempék
     115px-esek, VÁLTOZATLANUL az eredeti `repeat(5,1fr)` designnal. 116px-nél
     már csak 4 fért be → a szekció 142px-rel magasabb lett (desktop-regresszió).
     Ugyanez a 104px a ~416px-es tablet-fekvő cellában 3 oszlopot ad (130px-es
     csempék) — ott volt a hiba (5 oszlop → 82px). Egy szám, mindkét eset jó. */
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--v2-s-3);
}
.v2-client-card {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v2-paper);
  border: 1px solid var(--v2-grey-fade);
  font-size: var(--v2-fs-sm);
  letter-spacing: 0.04em;
  color: var(--v2-grey-deep);
}

/* -----------------------------------------------------------------------------
   Kapcsolat — térkép + elérhetőségek
----------------------------------------------------------------------------- */

.v2-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
/* Egy oszlopban a térkép a kontakt-blokk MÖGÉ kerül (user 2026-07-15: „mobilon
   a térkép és a kapcsolati szekció cseréljen helyet”). A markupban a térkép áll
   elöl — desktopon az a bal hasáb, ott ez a helyes sorrend; egy oszlopban viszont
   előbb az elérhetőségek jöjjenek (az a lényegi tartalom), a térkép utána.
   `order`-rel, hogy a desktop elrendezés érintetlen maradjon. */
/* CSATOLT az egységes 1080px tablet-váltáshoz: a kapcsolat-rács a többi
   kétoszlopos szekcióval EGYSZERRE stackel (901-1080 holt zóna megszüntetése). */
@media (max-width: 1180px) {
  .v2-contact-grid { grid-template-columns: 1fr; }
  .v2-contact-map  { order: 2; }
}
.v2-contact-grid > * { padding: var(--v2-s-9) var(--v2-s-7); }
/* A térkép-cella a grid-sor teljes magasságára nyúlik (align-items: stretch),
   a min-height a padló. Az iframe abszolút inset:0-val tölti ki a cellát —
   a korábbi height:100% nem oldódott fel (nem-definit magasságú grid-cella),
   ezért a térkép beragadt a 480px min-height-re, kisebben mint a rendelkezésre
   álló hely. */
.v2-contact-map { padding: 0; position: relative; min-height: 480px; }
/* MapLibre GL vektor-térkép — a #fa-map abszolút inset:0-val tölti ki a grid-sor
   teljes magasságára nyúló cellát (Google Maps iframe helyett, kapu és süti
   nélkül, süti-mentes OpenFreeMap-forrásból). A MapLibre a konténer méretéből
   számol; a fa-map.js egy resize()-zal véd a késői layout ellen. */
.v2-contact-map #fa-map { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--v2-grey-fade); }
/* A térkép ÁTTŰNÉSSEL jelenik meg, nem pattan be (user 2026-07-15). Nem a #fa-map
   fade-el, hanem a MapLibre GYEREKEI: a szürke placeholder-háttér végig a helyén
   marad, a térkép abból úszik elő (nincs villanó üres lyuk). Az `.is-ready`-t a
   fa-map.js teszi rá a `load` eseményre.
   RÖVID (400 ms) és ease-INOUT: a diagnózis (2026-07-15) szerint a térkép nem
   akadozik (a fade tiszta 60 fps), a probléma a fade ELŐTTI hálózati holtidő volt
   — azt a preconnect + prewarm oldja meg. A korábbi 800 ms-os front-loaded fade
   (--v2-ease) csak fölösleges késleltetést adott a betűnéshez; itt már csak a
   load utáni csempe-ülepedést (~320 ms) takarja egy finom áttűnés mögé.
   Reduced-motion mellett is fut: áttűnés, nem elmozdulás. */
.v2-contact-map #fa-map > * {
  opacity: 0;
  transition: opacity 400ms var(--v2-ease-inout);
}
.v2-contact-map #fa-map.is-ready > * { opacity: 1; }
.v2-contact-map .maplibregl-map { font: inherit; }
/* A saját SVG-pin (HTML marker-element) — a MapLibre marker-wrapper reset. */
.v2-contact-map .fa-map-pin { background: none; border: 0; cursor: pointer; line-height: 0; }
/* Zoom-gombok + attribúció: szögletes sarkok (--v2-radius: 0). */
.v2-contact-map .maplibregl-ctrl-group { border-radius: 0; }
.v2-contact-map .maplibregl-ctrl-group button { border-radius: 0; }
/* Attribúciós doboz (ⓘ) — alapból BECSUKVA (a JS is leveszi a nyitó class-t),
   szögletes kinyíló panel, a ⓘ gomb is szögletes (a projekt radius:0-ja). */
.v2-contact-map .maplibregl-ctrl-attrib.maplibregl-compact,
.v2-contact-map .maplibregl-ctrl-attrib { border-radius: 0; }
.v2-contact-map .maplibregl-ctrl-attrib-button { border-radius: 0; }
/* Térkép-vezérlők FÓKUSZ-kerete. A MapLibre a `:focus`-ra fix LINK-KÉK box-shadow-t
   tesz (`0 0 2px 2px #0096ff`). A zoom-gomboknál kezeli a :focus-visible-t
   (`:focus:not(:focus-visible){box-shadow:none}` → egérre nincs keret), de a ⓘ
   (attribúció) gombnál EZT ELFELEJTETTE → az egérkattintás is bekeretezte kékkel
   (user 2026-07-14). Pótoljuk, egységesen mindkettőre: EGÉRRE nincs keret,
   BILLENTYŰZET-fókusznál (focus-visible) márka-türkiz — a hozzáférhető
   fókusz-jelzés megmarad, csak nem idegen link-kékkel. A `.v2-contact-map`
   prefix magasabb specificitást ad, mint a MapLibre saját szabálya (ami a
   v2.css UTÁN tölt), így nem kell !important. */
.v2-contact-map .maplibregl-ctrl-attrib-button:focus:not(:focus-visible),
.v2-contact-map .maplibregl-ctrl-group button:focus:not(:focus-visible) {
  box-shadow: none;
}
.v2-contact-map .maplibregl-ctrl-attrib-button:focus-visible,
.v2-contact-map .maplibregl-ctrl-group button:focus:focus-visible {
  box-shadow: 0 0 0 2px var(--v2-primary-deep);
}
/* A kék linkelés NE ragadjon rá SEMMILYEN esetben: az attribúció-linkek diszkrét
   szürkék (a kötelező OSM-forrás-link jogi okból marad, de nem site-kék), és a
   globális link/hover-szín (magenta) sem érinti — ezért !important minden state-re. */
.v2-contact-map .maplibregl-ctrl-attrib a,
.v2-contact-map .maplibregl-ctrl-attrib a:link,
.v2-contact-map .maplibregl-ctrl-attrib a:visited,
.v2-contact-map .maplibregl-ctrl-attrib a:hover,
.v2-contact-map .maplibregl-ctrl-attrib a:focus,
.v2-contact-map .maplibregl-ctrl-attrib a:active {
  color: var(--v2-grey) !important;
  text-decoration: none !important;
}
/* Pin-popup (a helyszín címe) — szögletes, az oldal tipográfiájával. */
.v2-contact-map .maplibregl-popup-content { border-radius: 0; font: inherit; padding: var(--v2-s-3) var(--v2-s-4); }
.v2-contact-map .maplibregl-popup-close-button { border-radius: 0; }
.v2-contact-map .maplibregl-popup-content a { color: var(--v2-primary-deep); }

.v2-contact-people { list-style: none; padding: 0; margin: 0; }
/* .v2-contact-person — NINCS border-bottom; a perszónák KÖZÖTTI elválasztást
   a JS-ben rough.js-szel rajzolt <svg class="v2-contact-divider"> végzi,
   ami minden non-last person LI utolsó gyermeke. */
.v2-contact-person {
  padding: var(--v2-s-3) 0;
}
.v2-contact-name {
  font-weight: 700; font-size: var(--v2-fs-md);
  display: block;
}
/* Kézzel rajzolt elválasztó vonal a researcher-ek között.
   A vonalat rough.js generálja a JS-ben (initContactDividers) — markánsabb
   roughness és bowing paraméterekkel, hogy egyértelmű kézzel-rajzolt hatást
   adjon. A currentColor a szülő szín-tónusát örökli (ink a sárgán). */
.v2-contact-divider {
  display: block;
  width: 100%;
  height: 18px;
  margin: var(--v2-s-4) 0 0;
  color: inherit;
  opacity: 0.55;
  overflow: visible;
}
.v2-contact-divider path,
.v2-contact-divider line,
.v2-contact-divider polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v2-bg-yellow .v2-contact-divider { opacity: 0.7; }
.v2-contact-channels { font-size: var(--v2-fs-sm); margin-top: 2px; }
.v2-contact-channels a {
  display: inline-flex; align-items: center; gap: 0.4em;
  text-decoration: none; margin-right: var(--v2-s-4);
}
/* Nincs hover-effekt / opacity- / színváltozás az elérhetőségeken (ikon, email,
   telefon) — user-kérés 2026-07-14. Statikus, teljes-opacity megjelenés. */

/* -----------------------------------------------------------------------------
   Footer
----------------------------------------------------------------------------- */

.v2-footer {
  background: var(--v2-paper);
  color: var(--v2-grey-deep);
  padding: var(--v2-s-7) 0 var(--v2-s-6);
  font-size: var(--v2-fs-sm);
  border-top: 1px solid var(--v2-grey-fade);
  position: relative;
}
.v2-footer__inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--v2-s-4);
}
.v2-footer a {
  color: var(--v2-primary-deep);
  text-decoration: none;
  transition: color var(--v2-t-hover) var(--v2-ease);
}
.v2-footer a:hover { color: var(--v2-magenta); }
/* Süti-beállítások gomb — gomb-reset, hogy a footer-linkekkel egyező legyen
   (a Complianz `cmplz-manage-consent` class nyitja a consent-managert). */
.v2-footer__cookie-btn {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; line-height: inherit; cursor: pointer;
  color: var(--v2-primary-deep);
  transition: color var(--v2-t-hover) var(--v2-ease);
}
.v2-footer__cookie-btn:hover { color: var(--v2-magenta); }

/* -----------------------------------------------------------------------------
   Complianz cookie-banner nyitás/zárás — az OLDAL animáció-nyelvén:
   fade + alulról-felcsúszás, `--v2-ease` (cubic-bezier), `--v2-t-hover` (0.5s).
   A Complianz alap `cmplz-hidden` = display:none (nem animálható), ezért a banner
   rejtett állapotát opacity+transform-ra írjuk át (display marad flex), így a
   megjelenés ÉS az eltűnés is átmenetes. A generált banner-CSS async, a v2.css
   után tölt → `!important` kell a felülíráshoz. Reduced-motion: azonnali.
----------------------------------------------------------------------------- */
/* Rejtett = ALAPÁLLAPOT (záráskor a Complianz csak a `cmplz-show`-t veszi le,
   a bannert ide ejtve), látható = `.cmplz-show` → az open ÉS a close is átmenetes. */
.cmplz-cookiebanner {
  opacity: 0 !important;
  transform: translateY(28px) !important;
  visibility: hidden !important;
  pointer-events: none;
  transition: opacity var(--v2-t-hover) var(--v2-ease),
              transform var(--v2-t-hover) var(--v2-ease),
              visibility var(--v2-t-hover) var(--v2-ease) !important;
  will-change: opacity, transform;
}
/* A Complianz `cmplz-hidden` (kezdeti) ÉS `cmplz-dismissed` (záráskor hozzáadott)
   is `display:none` — mindkettőt a banner EREDETI `grid`-jére írjuk (NEM flex!),
   hogy a be- ÉS kilépő fade lefusson, DE a banner elrendezése/526px szélessége
   megmaradjon. (flex-szel a tartalom egy sorba folyt → záráskor ~1177px-re
   szélesedett — bug-fix 2026-07-14.) A rejtettséget az alap opacity:0+visibility. */
.cmplz-cookiebanner.cmplz-hidden,
.cmplz-cookiebanner.cmplz-dismissed {
  display: grid !important;
}
.cmplz-cookiebanner.cmplz-show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto;
  animation: none !important;        /* a Complianz beépített fade/slide kikapcsolva */
}
/* Hover: a Complianz ráviteskor egy erősebb „extra" árnyékot adna (box-shadow
   0.3 / 19px 38px, 1s átmenettel) — a nyugodt oldalhoz fölösleges. A banner
   árnyéka maradjon VÁLTOZATLAN hover-re (user-kérés 2026-07-14). */
.cmplz-cookiebanner.cmplz-show:hover {
  box-shadow: rgba(0, 0, 0, 0.19) 0 10px 20px, rgba(0, 0, 0, 0.23) 0 6px 6px !important;
  transition-duration: var(--v2-t-hover) !important;
}
/* Reduced-motion: a banner belépője SZÁNDÉKOSAN fut itt is (nincs transition:none)
   — user-kérés 2026-07-14: a cookie-popup is finoman jelenjen meg reduced-motion
   mellett is. A belépő TRANSITION-alapú (rejtett alapállapot opacity:0 →
   cmplz-show opacity:1), ezért a fájl-alji animation-stop catch-all nem érinti. */

/* Nagyobb szünet a leírás (message, „…funkciókat korlátozhat.") és az első
   kategória-sáv („Szükséges") közé — user-kérés 2026-07-14. A banner grid, ezért
   a kategória-konténerre teszünk felső margint (magas specificitás + !important
   a Complianz async CSS-e fölé). */
#cmplz-cookiebanner-container .cmplz-categories {
  margin-top: var(--v2-s-5) !important;
}
/* A banner CÍME mobilon is látszódjon. A Complianz a GENERÁLT banner-CSS-ében
   (uploads/complianz/css/banner-1-optin.css) ≤425px-en elrejti — helytakarékosság
   miatt: `.cmplz-cookiebanner .cmplz-header .cmplz-title{display:none}`. User-kérés
   2026-07-15: a „Hozzájárulás kezelése" cím mobilon IS jelenjen meg. Az #id-prefix
   magasabb specificitást ad a plugin szabályánál, a !important pedig a generált
   (v2.css UTÁN betöltő) fájl ellen véd. */
@media (max-width: 425px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block !important;
  }
  /* …és a cím a banner VALÓDI közepén álljon. A Complianz rácsa ≤399px-en
     `auto 1fr auto`: a bal sáv az ÜRES .cmplz-logo → 0px, a jobb az X gomb →
     ~34px, így a középső cella (és vele a cím) 17px-rel balra csúszott (mérve:
     banner-közép 195 vs cím-közép 178). Egyenlő szélső sávok (1fr … 1fr) →
     a cím pontosan középre kerül, méret-hardcode nélkül (az X szélessége
     változhat). Az X-et a jobb szélén tartjuk. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
    grid-template-columns: 1fr auto 1fr !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-close {
    justify-self: end;
    /* …és az X a CÍM SÍKJÁBAN álljon. A Complianz a close-gombra
       `margin: -10px -10px 0 0`-t tesz (a saját 10px paddingját kompenzálva a
       sarokba húzza), ezért a gomb 5px-rel a cím fölé csúszott (mérve: cím-közép
       476 vs X-közép 471). A FELSŐ negatív margót nullázzuk → a rács
       `align-items: center`-e egy vonalba hozza a címmel. A jobb oldali -10px
       MARAD: az tartja a gombot a banner jobb széléhez. */
    margin-top: 0;
  }
}

/* Cookie-gombok — az „Elfogadom" és „Elutasítom" EGYSÉGES arculati türkiz
   (user-kérés 2026-07-14). A Complianz alapból két eltérő türkizt ad: accept
   #3C9DBC (= --v2-primary, Free-logó szín), deny #2994B5 (= --v2-primary-deep) —
   mindkettőt a brand-elsődlegesre húzzuk, egységes (kicsit mélyebb) hoverrel.
   A „Beállítások" (view-preferences) fehér/outline MARAD → megvan a hierarchia.
   A generált banner-1-optin.css async tölt a v2.css után → !important kell
   (a fenti banner-blokk is így override-ol). */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
  background-color: var(--v2-primary) !important;
  border-color: var(--v2-primary) !important;
  color: #fff !important;
  transition: background-color var(--v2-t-hover) var(--v2-ease),
              border-color var(--v2-t-hover) var(--v2-ease) !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
  background-color: var(--v2-primary-deep) !important;
  border-color: var(--v2-primary-deep) !important;
}

/* CTA-link: jobbra-csúszó hover (a Kapcsolat „Megnyitás Google Maps-ben" stb.). */
.v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--v2-t-hover) var(--v2-ease), color var(--v2-t-hover) var(--v2-ease);
}
.v2-cta:hover { transform: translateX(6px); }

/* CTA glass-blur variáns — fehéres áttetsző háttér + sötét szöveg, kontrasztos. */
.v2-cta--glass {
  padding: var(--v2-s-3) var(--v2-s-5);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-radius: 0;
  color: var(--v2-ink);
  transition: transform var(--v2-t-hover) var(--v2-ease), background var(--v2-t-hover) var(--v2-ease), color var(--v2-t-hover) var(--v2-ease);
}
.v2-cta--glass:hover {
  background: rgba(255, 255, 255, 0.78);
  transform: translateX(6px);
  color: var(--v2-ink);
}

/* -----------------------------------------------------------------------------
   Jogi oldalak (adatkezelési / süti tájékoztató) — front-page-legal.php
----------------------------------------------------------------------------- */
.v2-legal {
  padding: calc(var(--v2-nav-h) + var(--v2-s-8)) 0 var(--v2-s-10);
  background: var(--v2-paper);
  color: var(--v2-ink);
}
.v2-legal__inner { max-width: 60rem; }          /* olvasható sorhossz hosszú szöveghez */
/* Cím-méretek FLUIDAN. A fix 3.6rem (57.6px) egy 375px-es kijelzőn a hosszú
   magyar jogi címeknél („Süti- és nyomkövetési tájékoztató", „Adatkezelési
   tájékoztató") az egész első képernyőt elfoglalta — mérve: a h1 a teljes 343px
   tartalom-szélességet kitöltötte, több sorba törve (user, 2026-07-15).
   Technikai túlcsordulás NEM volt, tisztán arány-probléma. A clamp felső ága a
   régi értéket adja vissza (h1: ~823px, h2: ~654px viewport felett), tehát a
   DESKTOP MEGJELENÉS VÁLTOZATLAN — csak a kis kijelzőkön skálázódik le. */
.v2-legal h1 {
  font-size: clamp(2rem, 7vw, var(--v2-fs-2xl));
  font-weight: 600; letter-spacing: -0.025em;
  margin: 0 0 var(--v2-s-3);
}
.v2-legal h2 {
  font-size: clamp(1.4rem, 4.4vw, var(--v2-fs-lg));
  font-weight: 600;
  margin: var(--v2-s-8) 0 var(--v2-s-3);
}
.v2-legal h3 {
  font-size: var(--v2-fs-md);
  font-weight: 600;
  margin: var(--v2-s-5) 0 var(--v2-s-2);
}
/* Anchor-célpontok: a sticky header ne takarja a görgetés végén a címsort
   (a belső "N. pontra" hivatkozások a v2.js smooth-scrolljával ugranak ide). */
.v2-legal h2[id], .v2-legal h3[id] { scroll-margin-top: calc(var(--v2-nav-h) + var(--v2-s-4)); }
.v2-legal p  { margin: 0 0 var(--v2-s-4); line-height: 1.65; }
.v2-legal ul, .v2-legal ol { margin: 0 0 var(--v2-s-4); padding-left: 1.4em; line-height: 1.6; }
.v2-legal li { margin-bottom: var(--v2-s-2); }
.v2-legal a  { color: var(--v2-primary-deep); text-decoration: underline; text-underline-offset: 3px; transition: color var(--v2-t-hover) var(--v2-ease); }
.v2-legal a:hover { color: var(--v2-magenta); }
.v2-legal strong { font-weight: 700; }
.v2-legal code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.88em;
  background: var(--v2-primary-tint);
  padding: 0.1em 0.35em; border-radius: 3px;
}
.v2-legal hr { border: 0; border-top: 1px solid var(--v2-grey-fade); margin: var(--v2-s-6) 0; }
.v2-legal blockquote {
  margin: 0 0 var(--v2-s-4);
  padding: var(--v2-s-3) var(--v2-s-4);
  border-left: 3px solid var(--v2-primary);
  background: var(--v2-primary-tint);
}
.v2-legal blockquote p { margin: 0; }
/* Táblák — vízszintes scroll mobilon, keretezett cellák. */
.v2-legal__tablewrap { overflow-x: auto; margin: 0 0 var(--v2-s-5); -webkit-overflow-scrolling: touch; }
.v2-legal table {
  border-collapse: collapse;
  width: 100%; min-width: 30rem;
  font-size: var(--v2-fs-sm);
}
.v2-legal th, .v2-legal td {
  border: 1px solid var(--v2-grey-fade);
  padding: var(--v2-s-3);
  text-align: left; vertical-align: top; line-height: 1.5;
}
.v2-legal thead th { background: var(--v2-primary-tint); font-weight: 700; }
/* Címke|érték táblák (üres fejléc nélkül): a bal oszlop halvány kiemelés.
   A `table.` előtag NEM dísz: nélküle a `.v2-legal table { min-width: 30rem }`
   (0,1,1) VERTE ezt a szabályt (0,1,0), így a min-width:0 halott kód volt — a
   2 oszlopos kulcs|érték táblák is 480px-en maradtak, és 390px-en vízszintesen
   görögtek (mérve: számított min-width 480px). A `table.` felviszi (0,2,1)-re.
   A többoszlopos (fejléces) táblák szándékosan MEGTARTJÁK a 30rem-et: ott a
   görgetés jobb, mint az összenyomott cella. */
.v2-legal table.v2-legal__table--nohead { min-width: 0; }
.v2-legal__table--nohead td:first-child { width: 34%; background: var(--v2-primary-tint); font-weight: 600; }
@media (max-width: 700px) {
  .v2-legal { padding-top: calc(var(--v2-nav-h) + var(--v2-s-5)); }
  .v2-legal__table--nohead td:first-child { width: auto; }
}

/* -----------------------------------------------------------------------------
   Reduced motion
----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* CSAK az auto-animation-öket állítjuk meg (vestibular-trigger).
     A transition-okat (hover-feedback) MEGTARTJUK — kifinomult UX. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   MOBIL / TABLET NAVIGÁCIÓ  (2026-07-15)
   -----------------------------------------------------------------------------
   PROBLÉMA (mérve, WebKit/Blink/Gecko egyformán): a vízszintes menü
   `flex-wrap: wrap`-pel tördelődik, a `.v2-header__inner` viszont FIX
   `height: var(--v2-nav-h)` (72px) — így a tördelt menü NEM növeli a fejlécet,
   hanem KILÓG belőle a hero-ra. Mért töréspont: 1010px (HU és EN egyaránt);
   390px-en már 4 sor, 74px túlnyúlással.
   MEGOLDÁS: 1180px alatt hamburger + panel. A kapcsoló 1180-nál lép be.
   MIÉRT 1180 (nem 1080, 2026-07-16): a desktop nav (7 menüpont + HU/EN nyelvváltó)
   MÉRVE ≥1132px kell hogy EGY SORBAN kiférjen (1128px-en a nyelvváltó a 2. sorba
   tört — a user 115%-os Safari-zoom bugja: ~1113px CSS-vw-n desktop nav, de a
   nyelvváltó a logó alá csúszott). Az 1180 = a 1132-es fit-küszöb + ~48px margó
   (cross-engine font-eltérésre). Az 1080 túl alacsony volt → 1081-1131px sávban
   a desktop nav LÁTSZOTT, de TÖRT. FONTOS: az EGÉSZ „tablet mód" (szekció-
   stackelés, padding, érintőcélok, footer-nav) IS 1180-ra mozgott — LOCKSTEP,
   egy egységes desktop→tablet váltás. A desktop (>1180px) elrendezés VÁLTOZATLAN.
   ========================================================================== */

.v2-navtoggle { display: none; }

@media (max-width: 1180px) {

  /* — A kapcsoló (hamburger → X) — */
  .v2-navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;                 /* jobbra tolja (a nav kikerül a flow-ból) */
    width: 48px; height: 48px;         /* ≥44px érintőcél (Apple HIG / WCAG) */
    padding: 0; border: 0; background: transparent;
    color: var(--v2-ink); cursor: pointer;
    -webkit-tap-highlight-color: transparent;  /* iOS kék villanás ki */
  }
  .v2-navtoggle__box { position: relative; display: block; width: 24px; height: 16px; }
  /* Három vonal: a középső maga a .bar, a két szélső a ::before/::after. */
  .v2-navtoggle__bar,
  .v2-navtoggle__bar::before,
  .v2-navtoggle__bar::after {
    position: absolute; left: 0; width: 24px; height: 2px;
    background: currentColor;
    transition: transform 320ms var(--v2-ease), background 160ms linear;
  }
  .v2-navtoggle__bar { top: 7px; }
  .v2-navtoggle__bar::before { content: ''; top: -7px; }
  .v2-navtoggle__bar::after  { content: ''; top: 7px; }
  /* Nyitva: a középső eltűnik, a két szélső X-be fordul. */
  .v2-header.is-navopen .v2-navtoggle__bar { background: transparent; }
  .v2-header.is-navopen .v2-navtoggle__bar::before { transform: translateY(7px) rotate(45deg); }
  .v2-header.is-navopen .v2-navtoggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

  /* — A menü panellé válik — */
  .v2-nav {
    position: fixed;
    /* ⚠ FONTOS, MÉRÉSSEL IGAZOLT: a `.v2-header`-nek `backdrop-filter`-e ÉS
       `transform: translateZ(0)`-ja van — MINDKETTŐ CONTAINING BLOCK-ot hoz
       létre a `position: fixed` leszármazottaknak. Ezért ez a panel NEM a
       viewporthoz, hanem a 72px magas FEJLÉCHEZ pozicionálódik.
       Következmény: `top: var(--v2-nav-h); bottom: 0` NEM működik — a fejléc
       aljához kötne, és 0/24px magasságot adna (ezt mértük). Helyette:
         top: 100%  → a fejléc alja (= a containing block 100%-a),
         height     → EXPLICIT, viewport-alapú (a vh/dvh a viewportra
                      vonatkozik, nem a containing blockra).
       Ne cseréld `bottom: 0`-ra, amíg a fejlécen blur/transform van. */
    top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--v2-nav-h));   /* fallback régi böngészőre */
    height: calc(100dvh - var(--v2-nav-h));  /* mobil címsor-mozgást követi */
    margin: 0;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 0;
    /* safe-area: notch-os iPhone FEKVŐ módban a bal/jobb inset valós. */
    padding: var(--v2-s-4) calc(var(--v2-s-5) + env(safe-area-inset-right, 0px))
             calc(var(--v2-s-6) + env(safe-area-inset-bottom, 0px))
             calc(var(--v2-s-5) + env(safe-area-inset-left, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;      /* ne görgesse a mögöttes oldalt */
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(170%) blur(16px);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    /* ZÁRÁS (ez az alapállapot): rövidebb, gyorsuló ease-IN — a panel határozottan
       „elhúzódik" felfelé, nem lézeng. A visibility a fade VÉGÉN vált rejtettre
       (különben azonnal eltűnne, és nem látszana a záró átmenet).
       A -10px (a korábbi -6px helyett) épp annyi, hogy a mozgás iránya
       érzékelhető legyen, de ne legyen ugrálás — user: „kicsit kifinomultabban". */
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 220ms cubic-bezier(0.4, 0, 1, 1),
                transform 220ms cubic-bezier(0.4, 0, 1, 1),
                visibility 220ms;
  }
  .v2-header.is-navopen .v2-nav {
    opacity: 1; visibility: visible; transform: none;
    /* NYITÁS: hosszabb, lágyan leülepedő ease-OUT (--v2-ease) — a panel
       „megérkezik", nem koppan. Az aszimmetria (lassabb nyitás / gyorsabb zárás)
       bevett UX-minta: a megjelenés hívogató, a bezárás azonnali visszajelzés.
       A visibility AZONNAL látható, hogy a teljes fade végig látszódjon. */
    transition: opacity 360ms var(--v2-ease),
                transform 360ms var(--v2-ease),
                visibility 0s;
  }

  .v2-nav__link {
    padding: var(--v2-s-4) var(--v2-s-2);
    min-height: 48px;                  /* érintőcél */
    font-size: 1.125rem;
    border-bottom: 1px solid var(--v2-line);
  }
  .v2-nav__link:last-of-type { border-bottom: 0; }

  .v2-langswitch {
    margin: var(--v2-s-5) 0 0 var(--v2-s-2);
    align-self: flex-start;
  }
  /* 42x30 volt → érintőre alacsony. */
  .v2-langswitch__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 52px; min-height: 44px;
    font-size: var(--v2-fs-sm);
  }

  /* Notch (fekvő) — az egész oldal tartalma tartsa a biztonságos sávot. */
  .v2-container {
    padding-left: calc(var(--v2-s-5) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--v2-s-5) + env(safe-area-inset-right, 0px));
  }

  /* NINCS overflow-alapú görgés-zár — SZÁNDÉKOSAN (2026-07-15, user-bug).
     Korábban itt `html.v2-navlock, html.v2-navlock body { overflow: hidden }`
     állt. VALÓDI Safariban (RDM-ben is) ez eltörte az oldalt: az `overflow`
     hidden→visible billegtetése után a Safari NEM állítja helyre a
     `position: sticky`-t → a fejléc relatívvá válik és elgörög ("eltűnik a
     header"), a görgetés-konténer pedig összezavarodik ("nem görgethető").
     Headless WebKitben NEM reprodukálódik — a hiba Apple Safari-specifikus.
     A zár amúgy sem szükséges: a panel `position: fixed`, teljes képernyős és
     ÁTLÁTSZATLAN fehér, tehát a mögötte elmozduló háttér nem is látszik.
     NE vezesd vissza az overflow-zárat. */
}

/* Mobil FEKVŐ (≤ 500px magas): a panel legyen kompaktabb, hogy a 390px-es
   magasságba is beférjen a 7 menüpont + nyelvváltó görgetés nélkül. */
@media (max-width: 1180px) and (max-height: 500px) {
  .v2-nav__link { min-height: 40px; padding: var(--v2-s-2) var(--v2-s-2); font-size: 1rem; }
  .v2-nav { padding-top: var(--v2-s-2); padding-bottom: var(--v2-s-4); }
  .v2-langswitch { margin-top: var(--v2-s-3); }
}

/* A Complianz X-gombja mérve 20x20, sőt 7x7 px — érintőn eltalálhatatlan.
   A plugin markupját nem írjuk át; a kattintható felületet nagyítjuk fel. */
@media (max-width: 1180px) {
  .cmplz-cookiebanner .cmplz-close {
    width: 44px !important; height: 44px !important;
    display: flex !important; align-items: center; justify-content: center;
    padding: 10px; margin: -10px -10px 0 0;
  }
}

/* Érintőcél-minimumok touch/tablet nézeten (≤1080px, ahol a hamburger is aktív):
   a MapLibre zoom-vezérlők (mérve 29px) és a kapcsolat-linkek (email/telefon,
   mérve ~26px) az Apple HIG / WCAG 44px-es minimumára. Az ikonok középre
   igazítottak, a méret-növelés a tartalmat nem tolja el. */
@media (max-width: 1180px) {
  .v2-contact-map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .v2-contact-channels a { min-height: 44px; }
}

/* =============================================================================
   USER-KÉRÉSEK 2026-07-15 — menü-finomítás, szélesség-kihasználás, hero
   ========================================================================== */

@media (max-width: 1180px) {

  /* 1) A menü-panel háttere legyen TELJESEN FEHÉR (user), ne félig áttetsző.
        Opaque háttéren a blur semmit nem csinál, csak GPU-t eszik → kikapcsolva. */
  .v2-nav {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 2) A nyelvváltó a menüpontokkal AZONOS x-en kezdődjön (user).
        Mérve volt: a menüpont szövege 32px-nél, a „HU" szövege 47,2px-nél →
        15,2px elcsúszás. A menüpont: nav-padding(24) + link-padding-left(8) = 32.
        Ezért a nyelvváltó doboza 0 extra margóval indul (=24, mint a link doboza),
        a gomb vízszintes paddingja pedig a linkével AZONOS (s-2=8) → a „HU"
        szöveg is 32-re esik. Így a doboz ÉS a szöveg is illeszkedik. */
  .v2-langswitch {
    margin: var(--v2-s-5) 0 0;
    padding: 0;
    align-self: flex-start;
  }
  .v2-langswitch__btn {
    min-width: 0;
    min-height: 44px;
    padding: 10px var(--v2-s-2);
    justify-content: flex-start;
  }

  /* 3) Szélesség-kihasználás (user: „kicsit túl keskenyen van a tartalom").
        A konténer oldalpaddingja 24 → 16px, azaz +16px hasznos szélesség.
        A safe-area (notch, fekvő) továbbra is hozzáadódik. */
  .v2-container {
    padding-left: calc(var(--v2-s-4) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--v2-s-4) + env(safe-area-inset-right, 0px));
  }
  /* A hero szövegdoboza a konténer-logikát külön számolja (absolute) — igazítjuk,
     és a 72ch-s korlátot feloldjuk: nem-desktopon a szélesség a szűk erőforrás. */
  .v2-hero__content {
    left: var(--v2-s-4);
    right: var(--v2-s-4);
    max-width: none;
  }
}

/* 4) A hero-cím MÉRETE mobilon/tableten (user: „legyen még nagyobb", 2×).
      Út: clamp(1.6rem, 7vw, 2.4rem) [~27px] → clamp(2rem, 9vw, 3.4rem) [~35px]
      → a MOSTANI, a mért plafonhoz hangolt képlet [~38px @390px].

      MÉRVE (390px, WebKit): a hero-content sávja = 100vw − 2×16px = 358px, és a
      leghosszabb mondat („Személyre szabott.") 35.1px-es betűnél 311px → az
      ELMÉLETI plafon 40.4px, ahol pont kitölti a sávot.

      MIÉRT NEM nyers `vw`? A `.v2-hero__content` oldalpaddingja FIX 16px, nem
      vw-arányos → nyers vw-nél a kitöltési arány keskenyebb kijelzőn ROMLIK:
      320px-en 10vw=32px már csak ~4px tartalékot hagyna, és mivel a mondatokon
      `white-space: nowrap` van (a 4-soros elrendezéshez), az NEM tördelne, hanem
      VÍZSZINTESEN KILÓGNA. Ezért a betűméretet a TÉNYLEGES SÁVHOZ kötjük:
        betű = (100vw − 2×padding) × 0.107   → a sáv ~95%-át tölti ki,
      és ez az arány MINDEN szélességen azonos (320px-en is ~14px tartalék).
      A `min` 1.75rem (nem 2rem!): 2rem-nél a clamp alsó ága 320px-en felülírná a
      képletet 32px-re → visszajönne a túlcsordulás.
      A 3.4rem felső korlát SZÁNDÉKOSAN marad: a tabletet a user nem kérte
      nagyobbnak, és ez tartja a jelenlegi tablet-megjelenést. */
@media (max-width: 900px) {
  .v2-hero__claim {
    font-size: clamp(1.75rem, calc((100vw - 2 * var(--v2-s-4)) * 0.107), 3.4rem);
  }
}

/* 5) MOBIL PORTRÉ: a 4 mondat KÜLÖN-KÜLÖN sorban, HOSSZ SZERINT CSÖKKENŐEN
      (user). Az `order`-t a hero.php számolja nyelvenként (HU és EN sorrendje
      eltér!) és inline adja — itt csak flex-konténerré tesszük a claim-et,
      hogy az order egyáltalán hasson.
      A `display: contents` a sorokon azért kell, hogy a 4 mondat a claim
      KÖZÖS flex-kontextusába kerüljön — különben az order csak soron belül
      hatna, és nem lehetne sorok között átrendezni. */
@media (max-width: 700px) and (orientation: portrait) {
  .v2-hero__claim {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .v2-hero__claim-row { display: contents; }
  .v2-hero__claim-part { display: block; white-space: nowrap; }

  /* A `display: contents` miatt a sor-doboz NEM renderel → a rá kötött
     belépő-animáció (opacity/transform) sem látszana. Ezért itt a MONDATOK
     kapják meg ugyanazt a belépőt, hogy a betöltés-koreográfia megmaradjon
     (nincs pop-in). A color-transition sorrendje miatt a delay-lista is 3 tagú. */
  .v2-hero__claim-part {
    transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 800ms var(--v2-ease),
                transform 800ms var(--v2-ease);
    transition-delay: 0ms, 140ms, 140ms;
  }
  html.fa-loading .v2-hero__claim-part { opacity: 0; transform: translateY(28px); }

}

/* 6) PORTRÉ (mobil + tablet): a hero magassága a TARTALOMBÓL adódjon, és a kép
      a cím ALÁ, TELJES szélességben kerüljön.
      MÉRVE, a régi (100vh − fejléc) elrendezésben:
        390×844  → hero 772 px = a viewport 91%-a, ebből 174 px ÜRES sáv a cím
                   alja és a kép teteje közt; a NAGY repülő 88 px-nyit a
                   viewporton KÍVÜLRE lógott
        430×932  → 92%, 196 px üres, 99 px kilóg
        768×1024 → 93%, 47 px kilóg
      Két user-kérés, egy gyökérok (2026-07-15): „mobilon a hero túl magas
      feleslegesen, itt nem kell a viewport height" + „érvényesülni tudjon a
      háttér-képen lévő tartalom (papírrepülők)". A crop SZÉLESSÉGE ugyanis az
      aspect-ratio-n át a MAGASSÁGÁBÓL adódott (46% → 490 px egy 390 px-es
      kijelzőn) — ezért lógott ki a nagy repülő, és ezért maradt üres a közép.
      Megoldás: a média-réteg a normál flow-ba kerül (nem absolute), a crop
      szélessége 100%, a magasságát az aspect-ratio adja. Így a kép MINDIG
      befér (mindkét repülő teljes egészében látszik), a cím fölötte marad
      (egyik repülő sem lóg bele), a hero pedig pont akkora, amekkorát a
      tartalom kíván. A kép-belüli crop-logika (a kis repülő orra a jobb szélen
      végződik) változatlan — azt a .v2-hero__img 109,9%-os szélessége adja. */
@media (max-width: 900px) and (orientation: portrait) {
  .v2-hero { height: auto; }
  /* Flow + explicit order: a markupban a crop ELŐBB áll (a .v2-hero__content
     absolute pozicionálása miatt ott a DOM-sorrend nem számított) — flow-ban
     viszont a kép a cím FÖLÉ kerülne. Az order tartja a cím-fölül sorrendet
     anélkül, hogy a markuphoz nyúlnánk (a desktop elrendezés arra épül). */
  .v2-hero__media {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .v2-hero__content {
    order: 1;
    position: relative;
    top: auto; left: auto; right: auto;
    padding: var(--v2-s-8) var(--v2-s-4) 0;
    max-width: none;
  }
  .v2-hero__crop {
    order: 2;
    position: relative;
    top: auto; bottom: auto; right: auto;
    width: 100%;
    height: auto;              /* a magasságot az aspect-ratio adja */
    margin-top: var(--v2-s-7);
  }
}

/* 7) FEKVŐ (mobil + tablet): itt a képernyő SZÉLES és ALACSONY — a portré
      elrendezés 844 px-en 612 px magas képet adna, ezért ott a kép a cím
      MELLETT marad, jobbra. MÉRVE (844×390) a 65%-os cropnál a NAGY repülő
      (556…677 × 187…256) BELELÓG a cím szövegébe (100…235). A kép a crop
      ALJÁHOZ van horgonyozva (.v2-hero__img bottom:0), ezért NAGYOBB croppal a
      repülő LEJJEBB kerül — a cím sávja alá. */
@media (max-width: 900px) and (orientation: landscape) {
  .v2-hero__crop { height: 100%; }
}

/* >900px PORTRÉ / majdnem-négyzetes nézet (pl. iPad Pro 12.9" 1024×1366 portré,
   elforgatott monitor): itt a desktop-hero crop marad érvényben, ami magas
   portré-viewporton ARÁNYTALANUL nagyra nőne. A `min(80%, 55vw)` FEKVŐN sosem
   aktív (fekvőn a 80% nyer minden szokásos arányon → desktop pixelre változatlan),
   portrén viszont az 55vw-korlát tartja a repülőt a jobb-felső sarokban. */
@media (min-width: 901px) and (orientation: portrait) {
  .v2-hero__crop { height: min(80%, 55vw); }
}

/* Tények — jobb hasáb bekezdései. Korábban INLINE `max-width:29ch` volt a
   markupban (tenyek.php); azért került ide, hogy media query-vel feloldható
   legyen. A 29ch indoka: a KÉTOSZLOPOS desktop elrendezésben a jobb hasáb
   magassága így adja ki nagyjából a bal stat-listáét (user 2026-06-11). */
.v2-stats-para {
  color: #fff;
  font-size: var(--v2-fs-md);
  line-height: 1.78;
  max-width: 29ch;
}
/* Egyoszlopos tördelésnél (a .v2-split itt 1fr-re vált) a magasság-egyeztetés
   indoka MEGSZŰNIK, a 29ch viszont maradt volna → tableten 236px üres sáv a
   jobb oldalon (mérve: cella 672px tartalom-sáv, bekezdés 436px). A szélesség
   nem-desktopon a szűk erőforrás → feloldjuk, de a sorhosszt egy laza,
   OLVASHATÓ korláton tartjuk (nem hagyjuk 800px-es sorokra nyúlni). */
/* CSATOLT az egységes 1080px tablet-váltáshoz: a .v2-split--stats 1080-nál
   stackel → a 29ch magasság-egyeztetés indoka is ott szűnik meg. */
@media (max-width: 1180px) {
  .v2-stats-para { max-width: 60ch; }
}

/* =============================================================================
   Maradék reszponzív audit-találatok javítása (2026-07-15)
   ========================================================================== */

/* — ÜGYFELEK: a címblokk ne kerüljön a rács ALÁ egyoszlopos tördelésnél. —
   A DOM-ban a rács-cella (v2-bg-teal) van elöl, a címblokk (v2-bg-magenta-bright)
   utána — desktopon ez a szándék (rács balra, cím jobbra). Amikor a .v2-split
   1fr-re vált, ez azt jelentené, hogy a szekció CÍME a tartalma UTÁN jön: rossz
   olvasási sorrend. Az `order` a gridben is működik → mobilon a cím előre. */
/* CSATOLT az egységes 1080px tablet-váltáshoz: az ugyfelek szekció 1fr-re a
   .v2-split-tel EGYÜTT 1080-nál vált → a cím-előre order-flipnek is 1080-nál
   kell aktiválódnia, különben 901-1080px-ben a cím a rács ALÁ kerülne. */
@media (max-width: 1180px) {
  #ugyfelek .v2-split__cell.v2-bg-magenta-bright { order: -1; }
}

/* — KAPCSOLAT: a térkép ne legyen magasabb a képernyőnél fekvő módban. —
   Fixen 480px volt → a 390px magas mobil-fekvő nézetben a térkép EGYBEN nem
   fér ki (mérve). A min() a desktopot nem érinti (900px-es viewportnál 62vh =
   558px > 480 → marad 480), de alacsony nézetben magától lekicsinyíti. */
.v2-contact-map { min-height: min(480px, 62vh); }

/* — LÁBLÉC: flex-sor CSS-elválasztóval + érintőbarát célok. —
   Az elválasztó a link ::before-ja → tördeléskor a linkkel EGYÜTT mozog, nem
   tud árván a sor elejére csúszni (ez volt a hiba). */
.v2-footer__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v2-s-3);
}
.v2-footer__nav > * + *::before {
  content: '·';
  margin-right: var(--v2-s-3);
  color: var(--v2-grey-deep);
  opacity: 0.6;
}
/* Érintőfelület MINDEN érintős nézetben (nem csak a legkeskenyebben): a
   lábléc-linkek és a süti-gomb mérve ~26px magasak voltak. A vízszintes
   elrendezés marad — 768/844px-en van elég hely, csak a cél kell nagyobb. */
@media (max-width: 1180px) {
  .v2-footer__nav > * {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (max-width: 700px) {
  /* A legkeskenyebb nézetben FÜGGŐLEGES lista: itt a vízszintes sor amúgy is
     tördelne → nincs mit tördelni, nincs árva elválasztó sem. */
  .v2-footer__nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .v2-footer__nav > * + *::before { content: none; }
}

/* =============================================================================
   USER 2026-07-15 (2) — lábléc mobilon középre + szélesség-kihasználás
   ========================================================================== */

/* — LÁBLÉC copyright-sor —
   A copyright-sor egyetlen span (`.v2-footer__copyline`); a korábbi „Minden jog
   fenntartva" span és a „·" elválasztó eltávolítva (user, 2026-07-15). */
.v2-footer__copy { display: inline; }

@media (max-width: 700px) {
  /* Mobilon a teljes lábléc-tartalom KÖZÉPEN (user). A .v2-footer__inner
     alapból `space-between` flex-sor → itt oszlop + középre igazítva. */
  .v2-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* A copyright és a „minden jog fenntartva" KÜLÖN SORBAN, elválasztó NÉLKÜL (user).
     + A copyright a LINKEK ALÁ kerül (user 2026-07-15, egyetértve): a linkek
     cselekvők (navigáció), a copyright statikus lábjegyzet → függőleges listában
     a cselekvő tartalom megy előre. A DOM-sorrend NEM változik (desktopon a
     copyright van elöl, de ott vízszintes `space-between` van → az kiegyensúlyozás,
     nem rangsor; amint függőlegesbe tördel, a „balra = előbb" elveszti a
     jelentését). Csak a MOBIL vizuális sorrendet fordítjuk `order`-rel.
     Betűméret: --v2-fs-xs (14.4px) = apróbetű, a skála meglévő lépcsője.
     A menüpontok/süti-gomb SZÁNDÉKOSAN maradnak 17px-en (user kérése). */
  .v2-footer__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 1;
    margin-top: var(--v2-s-5);
    font-size: var(--v2-fs-xs);
  }
  .v2-footer__nav { align-items: center; }
}

/* — SZÉLESSÉG-KIHASZNÁLÁS: a szekciók tartalma ne 48px-nél kezdődjön (user) —
   Mérve (390px-es mobil): a hero/csapat/esettanulmányok 16px-nél kezdett (azok a
   .v2-container-t használják, amit már 16px-re vettünk), DE a tények /
   mit-csinálunk / filozófia / ügyfelek / kapcsolat 48px-nél — mert NEM a
   konténert használják, hanem saját `padding: var(--v2-s-9) var(--v2-s-7)`-t
   (96px/48px). Ez egyszerre volt keskeny ÉS következetlen (16 vs 48).
   Itt mindhárom saját-paddinges burkolót a konténerrel AZONOS 16px-re hozzuk,
   így minden szekció ugyanonnan indul. A függőleges 96px marad (az levegő, nem
   veszteség). A safe-area (notch, fekvő) hozzáadódik. */
@media (max-width: 1180px) {
  .v2-split__cell,
  .v2-principle,
  .v2-contact-grid > * {
    padding-left: calc(var(--v2-s-4) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--v2-s-4) + env(safe-area-inset-right, 0px));
  }
}

/* — HERO mobil/tablet PORTRÉ: a KÉK érjen le a képernyő aljáig (user) —
   A user korábban azt kérte, hogy „mobilon a hero túl magas feleslegesen, itt
   nem kell a viewport height" → ezért lett `height: auto` (tartalom-magasságú),
   viszont így a KÖVETKEZŐ szekció már a hajtás FÖLÖTT megjelent. Aztán: „mégis
   maga a HÁTTÉR-SZÍN (kék) legyen 100%-os viewport height".
   A kettő NEM mond ellent: nem a TARTALMAT nyújtjuk vissza, hanem a KÉK
   FELÜLETET → `min-height` (nem `height`): a cím+kép kompakt marad felül, a
   maradékot kitölti a kék, és a következő szekció PONT a hajtásnál kezdődik.

   MIÉRT `100vh - fejléc` ÉS NINCS negatív margó?
   Először `margin-top: -72px` + `min-height: 100vh` volt, hogy a kék a képernyő
   TETEJÉTŐL tartson. DE: a fejléc áttetsző üveg (rgba fehér + blur) → a mögé
   került kék ÁTSZŰRŐDÖTT rajta (user: „a header mögött nem kéne látnom kék
   színt"). Ez így egyszerűbb ÉS jobb: a hero a fejléc ALATT kezdődik (a fejléc
   mögött nincs semmi, amit átszűrhetne — marad a tiszta üveg-hatás), a kék
   pedig a fejléc aljától a képernyő aljáig tart = vizuálisan pont tele.
   NE tedd vissza a negatív margót, amíg a fejléc áttetsző. */
@media (max-width: 900px) and (orientation: portrait) {
  .v2-hero { min-height: calc(100vh - var(--v2-nav-h)); }
  /* A kép KÖZELEBB a címhez (user): a flow-elrendezésben a távolságot a crop
     `margin-top`-ja adja — NEM `bottom`/`top` (a crop `position: relative`,
     ott az eltolás nem venné el a helyet, csak üres sávot hagyna alatta). */
  .v2-hero__crop { margin-top: var(--v2-s-4); }
}
}