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

/* Vízszintes-görgetés gát (kliens 2026-09-16, mobil): a dísz-/rács-elemek apró túllógása ne okozzon
   oldalszintű vízszintes görgetést mobilon. `clip` (nem `hidden`) → nem hoz létre görgető-konténert,
   így a position:sticky/fixed elemek (lebegő CTA, nyelvi sáv) továbbra is működnek. */
html { overflow-x: clip; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--paper);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }
/* Arculat: minden headline az arculati display-fontból (Raleway); a törzs/UI Montserrat (--font-body).
   Így a --font-display/--font-body szétválasztása után egyetlen headline sem esik vissza a törzsfontra. */
h1, h2, h3, h4 { font-family: var(--font-display); }

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

:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }

/* Elsődleges gomb (guide 7.): kék háttér, fehér felirat, 8px radius, hover → petrol. */
.btn {
	display: inline-block;
	background: var(--accent);
	color: var(--white);
	font-weight: 700;               /* Montserrat Bold — arculati gombfelirat (guide: ExtraBold) */
	font-size: 1rem;
	font-family: inherit;           /* Montserrat (a --font-body-ból) — <button> különben OS-fontot használna */
	line-height: 1.5;
	padding: 0.75rem 1.5rem;        /* 12×24 → ~48px magasság */
	border: none;                   /* <button class="btn"> natív, „beveles" keretének reset-je */
	border-radius: var(--radius-s); /* 8px */
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.18s ease-out;
}
.btn:hover { background: var(--accent-deep); }

/* Közös mozgókép-loop konténer — gradiens placeholder, amíg nincs asset */
.media-loop {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: linear-gradient(135deg, var(--petrol), var(--slate));
}
.media-loop video,
.media-loop .media-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.media-loop .media-poster:not([src]) { visibility: hidden; } /* JS-lazy poszter betöltés előtt: ne látsszon az alt-szöveg */


/* ============ 0 · Fejléc ============ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
/* Kliens (2026-09-15): a FŐOLDALON a fejléc a hero fölött úszik, átlátszó + inverz (fehér) színnel;
   görgetéskor (JS: .is-scrolled) fehér hátterűvé és sötét szövegűvé válik. Csak desktopon — mobilon a
   fejléc marad a tömör, sticky alap (a mobil hero természetes magasságú, nem full-screen). */
@media (min-width: 761px) {
	.site-header--overlay {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom-color: transparent;
		transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	}
	.site-header--overlay .site-logo,
	.site-header--overlay .site-nav a,
	.site-header--overlay .lang-switch-current { color: #fff; transition: color 0.25s ease; }
	.site-header--overlay .site-nav a:not(.site-nav-cta) { opacity: 0.92; }
	.site-header--overlay .lang-switch-current { border-color: rgba(255, 255, 255, 0.55); }
	.site-header--overlay.is-scrolled {
		background: rgba(255, 255, 255, 0.92);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-bottom-color: var(--line);
	}
	.site-header--overlay.is-scrolled .site-logo,
	.site-header--overlay.is-scrolled .site-nav a { color: var(--ink); }
	.site-header--overlay.is-scrolled .lang-switch-current { color: var(--petrol); border-color: var(--line); }
}
.site-header-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 64px;
}
/* A logó balra, minden más (nav + nyelvváltó) jobbra tömörödik. */
.site-logo { font-weight: 800; font-size: 1.35rem; letter-spacing: 0.02em; margin-right: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.5vw, 2.25rem); font-size: 0.95rem; }
.site-nav a:not(.site-nav-cta) { opacity: 0.85; }
.site-nav a:not(.site-nav-cta):hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
/* Fejléc-CTA: kisebb, mint az alap .btn, a nav-sorba illeszkedve. */
.site-nav-cta { padding: 0.55rem 1.15rem; font-size: 0.9rem; white-space: nowrap; }
/* Nyelvváltó (HU/EN) — diszkrét: csak az aktuális nyelv + kis nyíl; kattintásra legördül a többi.
   Natív <details>, JS nélkül; a fejléc világos, ezért a menü is paper-felület. */
.lang-switch { position: relative; flex: none; }
/* Arculatba illő nyelvváltó: diszkrét petrol pill + vékony chevron (a régi tömör ▾ helyett). */
.lang-switch-current {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--petrol);
	padding: 0.32rem 0.72rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	white-space: nowrap;
	user-select: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-switch-current::-webkit-details-marker { display: none; } /* alap háromszög elrejtése (WebKit) */
/* Vékony chevron: nyitáskor felfelé fordul. */
.lang-switch-current::after {
	content: "";
	width: 0.34em;
	height: 0.34em;
	margin-top: -0.16em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	opacity: 0.9;
}
.lang-switch-current:hover,
.lang-switch[open] .lang-switch-current { border-color: var(--accent); color: var(--accent); }
.lang-switch[open] .lang-switch-current::after { transform: rotate(-135deg); margin-top: 0.06em; }
.lang-switch-menu {
	position: absolute;
	top: calc(100% + 0.3rem);
	right: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 0.2rem;
	min-width: 2.6rem;
	z-index: 60;
}
.lang-switch-link { display: block; padding: 0.35rem 0.55rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; border-radius: 5px; opacity: 0.85; }
.lang-switch-link:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }

/* Desktopon a .site-menu „átlátszó" a layoutnak (display:contents), így a nav + nyelvváltó ugyanúgy
   a fejléc-sorba tömörül, mint eddig; a hamburger rejtve. Mobilon (lentebb) fordul meg. */
.site-menu { display: contents; }
.site-burger { display: none; }

@media (max-width: 760px) {
	/* Kliens #7: mobilon CSAK logó + hamburger; a linkek, a CTA és a nyelvváltó a legördülő menüben.
	   A logó margin-right:auto-ja (alap) jobbra tolja a hamburgert; a menü abszolút, a sor alá nyílik. */
	.site-header-inner { position: relative; }
	.site-burger {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0;
		background: none; border: 0; cursor: pointer; color: var(--ink);
	}
	.site-burger-box { position: relative; display: block; width: 22px; height: 2px; background: currentColor; transition: background 0.15s ease-out; }
	.site-burger-box::before, .site-burger-box::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform 0.2s ease-out; }
	.site-burger-box::before { top: -7px; }
	.site-burger-box::after { top: 7px; }
	.site-header.is-open .site-burger-box { background: transparent; }
	.site-header.is-open .site-burger-box::before { transform: translateY(7px) rotate(45deg); }
	.site-header.is-open .site-burger-box::after { transform: translateY(-7px) rotate(-45deg); }

	.site-menu { display: none; }
	.site-header.is-open .site-menu {
		display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--paper); border-bottom: 1px solid var(--line);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
		padding: 1rem var(--gutter) 1.35rem;
	}
	.site-header.is-open .site-nav { flex-direction: column; align-items: stretch; gap: 0.15rem; }
	.site-header.is-open .site-nav a:not(.site-nav-cta) { padding: 0.65rem 0; opacity: 1; font-size: 1.05rem; }
	.site-header.is-open .site-nav-cta { margin-top: 0.6rem; text-align: center; }
	.site-header.is-open .lang-switch { align-self: flex-start; margin-top: 0.25rem; }
}

/* ============ 1 · Hero — életlen full-bleed videó-háttér + kisebb éles videó-doboz,
   mellette identitás, alatta a három nagy szó (manyone + eidra minta) ============ */
/* A fehér fejléc-sáv MEGMARAD (tömör, sticky). A hero pontosan a képernyő maradék magasságát
   kapja a sáv alatt — fejléc-sáv + hero-videó együtt = egy teljes nézetnyi (nincs túllógás), és a
   videó kitölti a sáv alatti teljes magasságot. A --header-h a sáv valós magassága (main.js méri;
   mobilon a menü tördel, ezért magasabb) — a lenti értékek csak JS előtti tartalékok. */
:root { --header-h: 65px; }
@media (max-width: 760px) { :root { --header-h: 100px; } }
.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--petrol); /* mielőtt a videó/gradiens fest */
}
/* Életlen, teljes-szélességű háttér-videó */
.hero .hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 0;
}
.hero .hero-bg video,
.hero .hero-bg .media-poster {
	filter: blur(32px);
	transform: scale(1.1); /* a blur átlátszó széleit a vászon mögé tolja */
}
/* Sötét scrim a háttér fölött, a szöveg kontrasztjáért */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0; /* a videó (z0) fölött sötétít, de a mandala (.hero .grow-circle, z1) ALATT — különben az ::after ráfestene a mandalára és tompítaná (kliens 2026-09-18, félig áttetsző mandala) */
	background: linear-gradient(180deg, rgba(10, 18, 24, 0.5) 0%, rgba(10, 18, 24, 0.25) 40%, rgba(10, 18, 24, 0.62) 100%);
	pointer-events: none;
}
.hero-overlay {
	position: relative;
	z-index: 2;
}
/* Desktop: balra a szövegblokk (headline három sorban + folyószöveg), jobbra a kisebb
   éles videó, függőlegesen középen (manyone-minta). A grid teljes-magasságú, a tartalom
   a hero közepén ül. A .container normál blokk marad, hogy a margin:auto középre igazítás
   ne törjön el (flex/grid-elemként elszállna). */
/* Kliens (2026-09-14): a headline + videó egy sorban (fent), a folyószöveg alattuk, középen.
   Az egész blokkot feljebb tesszük (nem a videó ül vertikálisan középen, hanem a teljes blokk). */
.hero-inner {
	/* Kliens 2026-10-06 (#11): a sáv betöltéskor TELJESEN látsszon — inkább maradjon alatta ráhagyás, mint hogy
	   levágódjon. 2026-10-08: a tartalék NEM fehér sáv a logósáv alatt (a user szólt), hanem extra sárga a sávon belül
	   (.logostrip padding), így hero + sáv pontosan kitölti a nézetet; a WP admin-sávot (bejelentkezve) levonjuk. */
	min-height: calc(100svh - var(--header-h, 65px) - var(--logostrip-h, 92px) - var(--wp-admin--admin-bar--height, 0px)); /* kliens (2026-10-01): a hero-kép + a sárga logósáv EGYÜTT töltse ki a nézetet, a sáv a kép alján látsszon betöltéskor */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;                      /* kliens (2026-09-30): a szöveg+videó blokk függőlegesen KÖZÉPEN (a logók elkerültek, a felszabaduló alsó teret középre igazítjuk) */
	padding-block: clamp(3rem, 9vh, 6rem) clamp(2rem, 5vh, 3.25rem);
	gap: clamp(1.5rem, 4vh, 3rem);
}
.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;       /* kliens (2026-09-15): nagyobb videó → a headline oszlopa szűkül, a betűméretet a .hero-words cqw-je kompenzálja (desktop) */
	column-gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: center;                  /* a headline és a videó függőlegesen egy vonalban */
}
.hero-text {
	min-width: 0;
	align-self: center;
	container-type: inline-size; /* a headline cqw-je a SZÖVEGOSZLOP szélességéhez skálázódik (desktop ~fél, mobil teljes) — így a leghosszabb sor nowrap mellett is mindig elfér */
}
/* Headline: három sor egymás alatt, balra zárva, kihúzva a videóig (kliens: legyen nagyobb).
   A cqw a szövegoszlop szélességéhez skálázza a betűt. */
.hero-words {
	min-width: 0;
	display: flex;
	flex-direction: column;
	font-family: var(--font-display);
	font-weight: 600;                          /* kliens (2026-09-15): kisebb súly (Black→SemiBold) — szellősebb, elegánsabb; könnyen hangolható */
	font-size: clamp(1.4rem, 10cqw, 6.75rem); /* kliens (2026-09-15): ~10%-kal kisebb headline */
	line-height: 1.06;
	letter-spacing: -0.015em;                  /* könnyebb súly → valamivel szorosabb tracking is elég */
	color: #fff;
	white-space: nowrap;                       /* minden szó/sor egy sorban marad → pontosan 3 sor minden méretnél */
	text-shadow: 0 1px 30px rgba(0, 0, 0, 0.35);
}
/* A magyar ékezetek (á é í ó ö ő ú ü ű) a betű fölé nyúlnak, így egy ékezetes sor teteje magasabb,
   és a fölötte lévő sorral szemben szűkebbnek LÁTSZIK a köz. Csak az ékezetet TÉNYLEGESEN tartalmazó
   sorok (az elsőt kivéve — a fölött nincs sor) kapnak egy kevés felső helyet, hogy a sorköz
   vizuálisan egyenletes legyen. Az osztályt a PHP teszi ki (template-parts/home/block-1-hero.php). */
.hero-words .has-accent { margin-block-start: 0.1em; }
.hero-identity {
	min-width: 0;
	/* kliens (2026-09-15 v4): a folyószöveg a bal oszlopban, a headline ALATT (a bal oszlop szélességéig);
	   a teljes headline+szöveg | videó blokk a heró közepén ül (l. body.home .hero-inner). */
	max-width: none;
	margin-top: clamp(2rem, 4.5vh, 3.25rem); /* kliens (2026-09-15 v4): kicsivel több levegő a headline alatt */
	text-align: justify;
	color: rgba(255, 255, 255, 0.94);
	font-size: clamp(1rem, 1.15vw, 1.18rem); /* kliens (2026-09-15 v2): ~10-15%-kal nagyobb */
	font-weight: 500;                    /* kliens (2026-09-15 v2): kicsit vastagabb */
	line-height: 1.55;
	text-wrap: pretty;
	text-shadow: 0 1px 20px rgba(0, 0, 0, 0.35);
}
/* Kisebb, éles videó-doboz — lekerekített, árnyékolt kártya. Ha még nincs videó
   (fotózásból érkezik), a gradiens placeholderként tartja a helyet. */
.hero .hero-frame {
	min-width: 0;
	min-height: 0;
	width: 100%;
	aspect-ratio: 1 / 1;   /* 2026-10-20: a kliens 1:1-es hero-videója (2026_032_webhome_1-1) — 4:3-ban levágta volna a fejeket */
	align-self: center;    /* a headline mellett függőlegesen középen */
	border-radius: var(--radius);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.65);
	background: linear-gradient(160deg, var(--petrol), var(--slate));
}
/* Hero-háttérképek (perf 2026-10-22): a kép mérete a nézethez igazodik — grow_hero_bg() (inc/blocks.php). */
[data-hero-bg] {
	background-image: var(--hero-grad), var(--hero-s);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (min-width: 761px) {
	[data-hero-bg] { background-image: var(--hero-grad), var(--hero-l); }
}
/* Kliens (2026-10-22): hangszóró-gomb a hero-videó jobb alsó sarkában (némítva indul, kattintásra hanggal). */
.video-sound {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}
.video-sound:hover,
.video-sound:focus-visible { background: rgba(0, 0, 0, 0.75); }
.video-sound:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.video-sound svg { width: 22px; height: 22px; }
.video-sound .is-on,
.video-sound[aria-pressed="true"] .is-off { display: none; }
.video-sound[aria-pressed="true"] .is-on { display: inline; }

/* Kliens (2026-09-15): a főoldalon a fejléc a hero fölött úszik (fixed, átlátszó), ezért a hero a teljes
   képernyőt kitölti (100svh) és a tartalma a fejléc alá tolva kezdődik. A szűkebb headline-oszlop (1fr)
   miatt a betűméretet a cqw 10→11-re emeljük, hogy a headline VÁLTOZATLAN maradjon. Csak desktop. */
@media (min-width: 761px) {
	body.home .hero-inner {
		min-height: calc(100svh - var(--logostrip-h, 92px) - var(--wp-admin--admin-bar--height, 0px)); /* kliens (2026-10-05, #9): a hero + a sárga logósáv EGYÜTT töltse ki a nézetet, a sáv a kép alján látsszon betöltéskor. A fejléc úszik, a felső padding-block már kitakarja, ezért csak a logósávot vonjuk le. */
		justify-content: center; /* kliens (2026-09-15 v4): a teljes blokk a heró közepén */
		padding-block: calc(var(--header-h, 64px) + 1rem) clamp(1.5rem, 4vh, 2.5rem);
	}
	.hero-words { font-size: clamp(1.4rem, 10.5cqw, 6.75rem); }
	/* A négyzetes videódoboz alacsony laptop-kijelzőn (pl. 1366×768) se tolja a logósávot a hajtás alá.
	   2026-10-20: kicsit kisebb (az oszlop / a nézet-magasság 85%-a), jobb széle a konténer szélén marad. */
	body.home .hero .hero-frame { width: min(85%, calc(0.85 * (100svh - var(--logostrip-h, 92px) - var(--header-h, 64px) - 5rem))); justify-self: end; }
}

@media (max-width: 760px) {
	/* Mobil: videó → headline → folyószöveg egymás alatt (természetes sorok, nem nyújtott). */
	.hero-inner { min-height: 0; padding-block: clamp(1.5rem, 6vh, 3rem); }
	.hero-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		align-items: normal;
		row-gap: clamp(1.5rem, 4vw, 2.25rem);
	}
	.hero .hero-frame { order: 1; height: auto; align-self: auto; }
	.hero-text { order: 2; align-self: auto; }
	.hero-identity { max-width: none; text-align: left; } /* mobilon a sorkizárt szöveg csúnya réseket adna */
	/* A .hero-words méretét mobilon is a fenti egyetlen cqw-szabály adja (a szövegoszlop
	   mobilon = teljes szélesség), külön override nélkül — így nincs breakpoint-ugrás. */
}

/* ============ 2 · Ügyfél-/referencia-logósáv — sárga sáv (kliens 2026-09-14) ============ */
/* Kliens (2026-09-15): vékonyabb sárga sáv, felirat nélkül, a logók középre igazítva. */
/* Kliens (2026-10-05): több levegő a logók fölött/alatt (16→28 px); a logók a sáv magasságának ~22–39%-át töltik ki. */
.logostrip { padding-block: clamp(1rem, 2.5vw, 1.75rem); background: var(--yellow); color: var(--petrol); }
/* 2026-10-08: tartalék a sávon BELÜL (extra sárga), nem fehér rés alatta — ha a nézet kicsit rövidebb (böngészősáv),
   csak sárga vágódik le, a logók látszanak. A JS (--logostrip-h) ezt is beleméri, így a hero ennyivel rövidebb. */
body.home .logostrip { padding-block: calc(clamp(1rem, 2.5vw, 1.75rem) + clamp(0.4rem, 1.5vh, 0.9rem)); }
/* Kliens (2026-10-05): balra zárva, NEM középre — a középre igazítás görgetés közben a sor
   VÉGÉT (az üres szélt) a nézetbe engedte (ez látszott nagy hézagként a SMC↔4iG seam-nél). A
   klónozó+loop (main.js) így zökkenőmentes, végtelen sáv, látható vég nélkül. */
.logostrip .marquee { display: flex; justify-content: flex-start; }
/* Kliens (2026-10-05): a térköz a kisebb, kiegyenlített logókhoz igazítva (~2× logómagasság / ~2× padding). */
.logostrip .marquee-track { gap: clamp(2.5rem, 4.5vw, 5rem); }
/* Kliens (2026-10-01): szolgálati közlemények a számsáv fölött (block-4-display) — egyetlen sor,
   egyesével loopolva (home-announce.js fade-el), középre zárva, a számok kékjével (petrol), kis betű. */
.home-announce {
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	min-height: 1.4em;
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	color: var(--petrol);
	transition: opacity 0.5s ease;
}
.home-announce + .display-stats { margin-top: clamp(1rem, 2.2vw, 1.6rem); }
.logostrip-title {
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	text-align: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--petrol);
	opacity: 0.85;
}
/* Kliens #5 (2026-09-10): kétsoros termékcím (Cím 1 / Cím 2). A 2. sor kisebb + halványabb; üresen nem renderel. */
.p-title-1 { display: block; }
.p-title-2 { display: block; margin-top: 0.15em; font-size: 0.82em; font-weight: 600; color: var(--ink-soft); }

.marquee { overflow: hidden; }
.marquee-track {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	width: max-content;
	will-change: transform;
}
/* Sárga sávon: a logók FEKETE sziluettként (kliens 2026-09-15: „csak fekete legyen").
   grayscale + nagyon erős contrast → küszöböl: a sötét rész feketévé, a világos fehérré válik;
   a multiply a fehéret (hátteret ÉS a világos részeket) a sárgára ejti → nem marad szürke/fehér.
   (A logók vegyesek: van átlátszó és fehér hátterű PNG is, ezért nem brightness(0)-t használunk.) */
.logostrip-item { flex: 0 0 auto; }
/* max-width:none: a globális img{max-width:100%} különben a max-content flex-sávban 0-ra húzná a logó szélességét (kliens 2026-09-16: „eltűntek a logók"). */
/* Kliens (2026-10-05): a magasság logónként a saját arányából jön (--lh, block-2-logos.php: 20–36 px), nem fix 38 px. */
.logostrip-item img { height: calc(var(--lh, 28) * var(--logo-scale, 1) * 1px); width: auto; max-width: none; filter: grayscale(1) contrast(6) brightness(0.85); mix-blend-mode: multiply; }

@media (max-width: 760px) {
	/* Spec (2. blokk, Mobil): "Azonos viselkedés, kisebb logómagassággal." → arányosan 75% (15–27 px). */
	.logostrip { --logo-scale: 0.75; }
}
.logostrip-ph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	height: 44px;
	padding-inline: 1rem;
	background: var(--mist);
	border-radius: var(--radius-s);
	color: var(--ink-soft);
	font-size: 0.8rem;
}

/* ============ 3 · Kiemelt ajánlatok — egy nagy 16:9 kiemelt + kis ikonok (kliens 2026-09-14) ============ */
.offers { padding-top: var(--space-section); }
/* Kliens (2026-09-28): statikus 1 nagy (bal, 2 sor) + max 4 kicsi (jobb, 2×2) rács — nincs forgatás. */
.offers-grid {
	display: grid;
	/* Kliens (2026-09-30): a nagy csempe ~16:9 (2 sort átfog, a jobb oldali 1:1 kicsik magasságát követve),
	   a 3.6fr:1fr:1fr arány adja a ~16:9-et. A kicsik 1:1-esek. */
	grid-template-columns: 3.6fr 1fr 1fr;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
/* Kevés (<4) publikált ajánlatnál nincs „nagy" csempe: egyenletes auto-fit rács, hogy ne maradjon
   féloldalas üres rész (a 2×2-es elrendezés csak pontosan 5 ajánlatnál telik meg szépen). */
.offers-grid--even { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.offer-tile {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	padding: clamp(1rem, 2.5vw, 2rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.4rem;
	color: #fff;
	text-decoration: none;
	background-size: cover;
	background-position: center;
	min-width: 0;
	min-height: 0;
	transition: transform 0.2s, box-shadow 0.2s;
}
/* Kliens (2026-09-30): a képek aljáról a feketébe-fade LEKERÜLT (nincs .offer-tile::after átmenet).
   A címek olvashatóságát a text-shadow adja (a képes csempéknek amúgy nincs feliratuk). */
.offer-tile > * { position: relative; z-index: 1; }
a.offer-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30, 67, 89, 0.18); }
a.offer-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.offer-tile--big { grid-column: 1; grid-row: 1 / span 2; } /* ~16:9 a 2 sor + oszlop-arány révén */
.offer-tile--small { aspect-ratio: 1 / 1; }
/* Szín-fallback a kép nélküli csempékhez (a legtöbb ajánlatnak van kiemelt képe). */
.offer-tile--c1 { background-color: var(--petrol); }
.offer-tile--c2 { background-color: var(--light); color: var(--black); }
.offer-tile--c3 { background-image: linear-gradient(135deg, var(--accent-deep), var(--accent)); }
/* text-shadow: fade nélkül is olvasható marad a felirat, ha egy képes csempére kerülne cím. */
.offer-title { max-width: 100%; font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 1px 10px rgba(10, 16, 22, 0.4); }
.offer-tile--c2 .offer-title { text-shadow: none; }
.offer-tile--small .offer-title { font-size: clamp(1.05rem, 1.6vw, 1.35rem); }
.offer-subtitle { max-width: 100%; font-size: 0.95rem; opacity: 0.9; overflow-wrap: break-word; }

/* Kliens 2026-10-05 (#10): szerkesztői ajánlat-kártyák (tcs.com hero-alatti stílus) — kép + szövegtörzs.
   Felváltja a fenti .offers-grid/.offer-tile galériás overlay-csempéket. */
/* Kliens 2026-10-06 (#12): egy sor, vízszintesen lapozható sáv (mint az .ins-track), a nyilak a cím mellett. */
.offers-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.offers-head .home-sec-title { margin-bottom: 0; text-align: left; }
.offers-head .carousel-arrows { margin-left: auto; }
.offers-cards {
	display: flex;
	gap: clamp(1rem, 2vw, 1.75rem);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	cursor: grab;
	--offers-inset: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	padding-inline: var(--offers-inset);
	scroll-padding-inline: var(--offers-inset);
	padding-bottom: 0.75rem; /* a hover-árnyéknak hely */
}
.offers-cards::-webkit-scrollbar { display: none; }
.offers-cards > .offer-card { flex: 0 0 clamp(16.5rem, 24vw, 19.5rem); scroll-snap-align: start; }
@media (max-width: 760px) { .offers-cards > .offer-card { flex-basis: 80vw; } }
[data-scroller].is-static .carousel-arrows { visibility: hidden; } /* minden kártya kifér → nincs mit lapozni */
.offer-card { display: flex; flex-direction: column; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
a.offer-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30, 67, 89, 0.18); }
a.offer-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.offer-card-media { display: block; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.offer-card--c1 { background-color: var(--petrol); }
.offer-card--c2 { background-image: linear-gradient(135deg, var(--light), var(--blue)); }
.offer-card--c3 { background-image: linear-gradient(135deg, var(--accent-deep), var(--accent)); }
.offer-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.1rem, 2.2vw, 1.6rem); flex: 1 1 auto; }
.offer-card-title { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: -0.01em; color: var(--petrol); text-wrap: balance; }
.offer-card-text { color: var(--ink-soft); line-height: 1.5; font-size: 0.98rem; }
.offer-card-cue { margin-top: auto; padding-top: 0.35rem; font-weight: 700; color: var(--accent); }
a.offer-card:hover .offer-card-cue { color: var(--accent-deep); }

/* Vízszintes carousel-nyilak (a megoldásterület-carousel is ezt használja) */
.carousel-arrows { display: flex; gap: 0.6rem; }
.carousel-arrows button {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(30, 67, 89, 0.6);
	background: var(--paper);
	color: var(--ink);
	font-size: 1.05rem;
	cursor: pointer;
	transition: border-color 0.2s;
}
.carousel-arrows button:hover { border-color: var(--ink); }

@media (max-width: 760px) {
	.offers-grid { grid-template-columns: 1fr; }
	.offer-tile--big { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
}

/* ============ 4 · Display-mondat + ábra ============ */
.display { padding-block: var(--space-section); }
/* A kollégák-marquee a display-szekcióba ágyazva (kliens 2026-09-14): a saját szekció-paddingja
   ne adódjon hozzá a display paddingjához → mértékletes térköz a szöveg és a számsáv között. */
.display .people { padding-block: clamp(1.75rem, 3.5vw, 3rem); }
.display-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
/* Kliens (2026-09-14): fejlesztési területek orbit-animációja a „fejlesztő szakemberek" szöveg mellett. */
.display-figure { max-width: 560px; margin-inline: auto; }
.grow-orbit {
	--go-bg: #ffffff;
	--go-petrol: #1e435a;
	--go-blue: #4189a6;
	--go-light: #b8d3d9;
	--go-yellow: #fed531;
	--go-font: var(--font-display), "Raleway", Arial, sans-serif;
	--go-spin: 22s;
	width: 100%;
}
.grow-orbit__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--go-font); font-weight: 900; }
.grow-orbit .petal { fill: none; stroke: var(--go-blue); stroke-width: 1.9; stroke-opacity: .9; stroke-dasharray: 841.9; stroke-dashoffset: 0; animation: go-draw 1.4s cubic-bezier(.4,0,.2,1) both; animation-delay: calc(.35s + var(--i) * 70ms); }
.grow-orbit .guide { fill: none; stroke: var(--go-light); stroke-width: 1.6; animation: go-fade .8s ease-out .9s both; }
.grow-orbit .core { fill: var(--go-petrol); animation: go-pop .7s cubic-bezier(.2,.9,.3,1.2) both; }
.grow-orbit .core-word { fill: #fff; font-size: 72px; letter-spacing: .04em; text-anchor: middle; dominant-baseline: central; animation: go-fade .6s ease-out .45s both; }
.grow-orbit .label { fill: var(--go-petrol); font-size: 22px; text-anchor: middle; paint-order: stroke; stroke: var(--go-bg); stroke-width: 7; stroke-linejoin: round; animation: go-fade .7s ease-out both; animation-delay: calc(1.25s + var(--i) * 50ms); }
.grow-orbit .orbit { animation: go-fade .9s ease-out 1.9s both, go-spin var(--go-spin) linear 1.9s infinite; }
.grow-orbit .arc-line, .grow-orbit .arc-head { fill: none; stroke: var(--go-yellow); stroke-width: 3.5; stroke-linecap: round; }
.grow-orbit .arc-word { fill: var(--go-petrol); font-size: 16px; letter-spacing: .18em; paint-order: stroke; stroke: var(--go-bg); stroke-width: 12; stroke-linejoin: round; dominant-baseline: central; }
@keyframes go-draw { from { stroke-dashoffset: 841.9; } to { stroke-dashoffset: 0; } }
@keyframes go-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes go-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes go-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.grow-orbit .petal, .grow-orbit .guide, .grow-orbit .core, .grow-orbit .core-word, .grow-orbit .label, .grow-orbit .orbit { animation: none; }
}
.display-lead {
	font-family: var(--font-display);            /* Raleway (headline) — a split után külön be kell kérni */
	font-size: clamp(2.3rem, 4.8vw, 4rem);       /* kliens #6: nagyobb, eidra-arányok */
	font-weight: 900;                            /* Raleway Black */
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.display-body { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--ink-soft); max-width: 62ch; line-height: 1.6; text-wrap: pretty; }

/* 6/b · Számsáv a cégleírás alján — négy fix mutató, vékony felső vonallal elválasztva. */
.display-stats {
	list-style: none;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: clamp(2rem, 4vw, 3rem) 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.display-stat { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; } /* kliens (2026-09-14): számsáv középre igazítva */
.display-stat-num {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--petrol);
}
.display-stat-num--pending { color: var(--line); } /* becsült szám még nem kerül ki */
.display-stat-label { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.35; }

@media (max-width: 860px) {
	/* Mobil: headline felül, ábra alatta, folyószöveg a blokk alján. */
	.display-grid { grid-template-columns: 1fr; }
	.display-copy { display: contents; }
	.display-lead { order: 1; }
	.display-figure { order: 2; }
	.display-body { order: 3; }
}
@media (max-width: 620px) {
	.display-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============ 5 · Megoldásterület-kártyák ============ */
.areas {
	padding-top: calc(var(--space-section) * 0.5); /* kliens (2026-09-14): kisebb térköz a kártyák fölött */
	/* A kártyák full-bleed behúzása — a fejléc is EZT használja, hogy a cím a kártyákkal EGY vonalban kezdődjön. */
	--areas-inset: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
/* Kliens (2026-09-15/2026-09-19): a szekció-cím a kártyák bal élével egy vonalban, balra igazítva
   (nem a szűkebb, középre zárt .container-ben) — a nyilak a jobb szélen. */
.areas-head {
	display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: wrap;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	text-align: left;
	max-width: none;                       /* felülírja a .container szűkítését */
	margin-inline: 0;
	padding-inline: var(--areas-inset);    /* = a kártyák bal éle */
}
.areas-head .home-sec-title { margin-bottom: 0; text-align: left; }
.areas-head .carousel-arrows { margin-left: auto; } /* a nyilak a jobb szélen maradnak */
/* Kliens (2026-09-15): a nyilak régi helyén (a kártyák alatt, középen) most a kék International-gomb áll. */
/* Kliens (2026-09-28): a megoldásterületek FÖLÖTT ne duplázódjon a térköz — a .display alsó
   paddingja és a .areas felső paddingja együtt túl nagy volt bizonyos ablakszélességeknél. */
@media (min-width: 769px) {
	.display + .areas { padding-top: 0; }
}
/* Az EN cím melletti International gomb ne nyúljon szét a fejléc-sorban. */
.areas-intl-btn--inline { flex: 0 0 auto; }

/* ── Kliens (2026-09-18): görgetés-vezérelt vízszintes lapozás (home-areas-scroll.js) ──
   Alap: a wrapperek „átlátszóak" (display:contents) → marad a natív nyilas/swipe carousel. */
.areas-scrolljack, .areas-pin { display: contents; }
/* Aktív (desktop + reduced-motion nélkül; a JS teszi rá az is-scrolljack osztályt). A wrapper magas,
   a pin sticky-vel a viewportban marad, közben a kártyák translateX-szel végiglapoznak. */
.areas.is-scrolljack .areas-scrolljack {
	display: block;
	position: relative;
	height: var(--areas-scroll-h, 300vh);
}
.areas.is-scrolljack .areas-pin {
	position: sticky;
	top: var(--header-h, 65px);
	height: calc(100svh - var(--header-h, 65px));
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.areas.is-scrolljack .carousel-arrows { display: none; } /* a görgetés vezérel, nem a nyilak */
.areas.is-scrolljack .areas-track {
	overflow: visible;       /* a transform mozgatja, nem a natív görgetés */
	cursor: default;
	scroll-snap-type: none;
	will-change: transform;
}
.areas-track {
	display: flex;
	gap: clamp(1rem, 2vw, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	cursor: grab;
	/* full-bleed sáv, az első kártya a konténerhez igazítva */
	--areas-inset: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	padding-inline: var(--areas-inset);
	/* A scroll-snap a snapporthoz (a doboz padding-boxához) igazít, ami
	   figyelmen kívül hagyja a saját padding-jét — enélkül a böngésző
	   betöltéskor automatikusan túlgörgeti a bal oldali rést, és az első
	   kártya a képernyő szélére tapad a szándékolt behúzás helyett. */
	scroll-padding-inline: var(--areas-inset);
}
.areas-track::-webkit-scrollbar { display: none; }
/* Kliens (2026-09-28): natív görgetésnél a flex-konténer eldobja a záró padding-inline-end-et,
   így az utolsó kártya után nincs rés — egy záró spacer pótolja (az első előtti behúzással egyenlő).
   Scroll-jack (transform) módban a padding-inline-end már érvényesül, ott a spacer kikapcsol. */
.areas-track::after { content: ""; flex: 0 0 var(--areas-inset); }
.areas.is-scrolljack .areas-track::after { display: none; }
.area-card {
	position: relative;
	flex: 0 0 clamp(280px, 32vw, 420px);
	aspect-ratio: 3 / 4;
	border-radius: var(--radius);
	overflow: hidden;
	scroll-snap-align: start;
	color: #fff;
}
.area-card .media-loop { position: absolute; inset: 0; border-radius: 0; }
.area-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 16, 22, 0.5), transparent 45%);
}
/* Placeholder-hátterek a paletta petrol/slate/blue színeiből, amíg nincsenek terület-loopok */
.area-card--1 .media-loop { background: linear-gradient(160deg, var(--petrol), var(--slate)); }
.area-card--2 .media-loop { background: linear-gradient(160deg, var(--slate), var(--blue)); }
.area-card--3 .media-loop { background: linear-gradient(160deg, var(--petrol), var(--blue)); }
.area-card--4 .media-loop { background: linear-gradient(160deg, var(--slate), var(--petrol)); }
.area-card--5 .media-loop { background: linear-gradient(160deg, var(--petrol), #2c6178); }
/* A területképek fekvő 16:9-esek, a fő szereplők a JOBB oldalon (a hero is így komponál:
   szöveg balra, emberek jobbra). Az álló (3:4) kártyák alap 50%-os középvágása az üres bal
   oldalt mutatná; jobbra igazítjuk a fókuszt, hogy az emberek kerüljenek a képbe — a
   hero-kompozícióval egyezően, mind az 5 területkártyán. (A magasság végig látszik, csak a
   vízszintes fókusz számít.)
   ponytail: közös jobbos érték minden kártyára; ha egy jövőbeli képen máshol állnak az
   emberek, arra a kártyára külön object-position kell. */
.area-card .media-poster, .area-card video { object-position: 78% 50%; }
.area-lockup {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	right: 1.5rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.area-brand { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 800; letter-spacing: -0.01em; }
.area-headline { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 600; line-height: 1.25; text-wrap: balance; }
.area-arrow {
	position: absolute;
	left: 1.5rem;
	bottom: 1.35rem;
	z-index: 1;
	font-size: 1.5rem;
	transition: transform 0.2s;
}
.area-card:hover .area-arrow { transform: translateX(6px); }

@media (max-width: 760px) {
	.area-card { flex-basis: 82vw; }
}

/* ============ 3/b · „Megközelítéseink" — a 8 fejlesztéstípus-aloldal kártyái (kliens 2026-09-11).
   Az area „Amiben segítünk" (.as-solution) kártyanyelve SZÁMOZÁS NÉLKÜL; asztali 4×2 rács,
   tableten 2 oszlop, mobilon (≤768px) rejtve; a teljes kártya kattintható (link az aloldalra). == */
.megk { padding-block: var(--space-section); }
.megk-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
/* Kliens (2026-09-14): szekció-cím a főoldali kártyablokkok (megoldásterületek, kiemelt ajánlatok) fölé. */
.home-sec-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.megk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2rem; }
.megk-card { display: flex; flex-direction: column; background: var(--mist); border-radius: var(--radius); padding: clamp(1.25rem, 2vw, 1.75rem); color: inherit; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.megk-card:hover, .megk-card:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(30, 67, 89, 0.14); }
/* Kliens (2026-09-15): kis nyíl a kártya jobb alsó sarkában (a kártya kattintható). */
.megk-arrow { align-self: flex-end; margin-top: auto; padding-top: 0.75rem; font-size: 1.25rem; line-height: 1; color: var(--accent); transition: transform 0.18s ease; }
.megk-card:hover .megk-arrow, .megk-card:focus-visible .megk-arrow { transform: translateX(4px); }
.megk-card-h { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.megk-card-p { margin-top: 0.6rem; color: var(--ink-soft); line-height: 1.5; font-size: 0.95rem; }
@media (max-width: 1024px) { .megk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .megk { display: none; } }

/* ============ 4 · Kvíz-csík — headline + alcím + gomb ============ */
.quicktest {
	margin-top: var(--space-section);
	background: var(--accent);
	color: #fff;
}
.quicktest-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
	flex-wrap: wrap;
}
.quicktest-copy { min-width: 0; }
.quicktest-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.quicktest-sub { margin-top: 0.4rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: #fff; max-width: 60ch; }
.quicktest-btn { flex-shrink: 0; background: var(--white); color: var(--accent-deep); font-weight: 700; }
.quicktest-btn:hover { background: rgba(255, 255, 255, 0.88); }

/* ============ 7 · Kollégák-carousel ============ */
.people { padding-block: var(--space-section); }
/* Kliens (2026-09-15): desktopon túl nagy a térköz a középső szekciók között. A .people (portréfotók)
   a .display szekción BELÜL ül a számok után; a .megk (megközelítések) a .display UTÁN következik.
   számok↔megközelítések és megközelítések↔kiemelt ajánlatok: a dupla (alsó+felső) padding helyett a
   következő szekció felső paddingját nullázzuk → egyszeres ~96px ritmus. portréfotók↔számok: a display-en
   belüli .people felső térközét csökkentjük. (A mobil ritmus változatlan.) */
@media (min-width: 769px) {
	.display + .megk,
	.megk + .offers { padding-top: 0; }
	.display .people { padding-top: clamp(1rem, 2vw, 1.5rem); }
}
.people-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	flex-wrap: wrap;
}
.people-line { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.people-link { margin-left: auto; color: var(--accent); font-weight: 600; white-space: nowrap; } /* kliens 2026-10-14: mindig jobbra (üres/tördelt sor mellett is) */
.people-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.marquee--people .marquee-track { gap: clamp(1.25rem, 2.5vw, 2rem); align-items: flex-start; }
.person { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.person-media {
	width: clamp(150px, 16vw, 190px);
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-s);
}
.person-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--white);
	background: linear-gradient(160deg, var(--slate), var(--petrol));
}
.person-name { font-size: 0.9rem; color: var(--ink-soft); }

/* Kollégák-archív (/csapat/) — teljes csapat rácsban */
.team-archive { padding-block: var(--space-section); }
.team-archive-head { max-width: 46ch; margin-bottom: clamp(3rem, 6vw, 4.5rem); } /* a fejléc→csoportok törés nagyobb, mint a csoportok közötti */
.team-archive-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.team-archive-lead { margin-top: 0.75rem; font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.35; }
.team-archive-sub { margin-top: 0.75rem; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
/* Kliens 2026-10-06 (#10): kategória-címek a Csapatunk oldalon. */
.team-group-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: clamp(2.5rem, 6vw, 3.5rem) 0 clamp(1rem, 2.5vw, 1.5rem); }
.team-group-title:first-of-type { margin-top: 0; }
/* Kliens 2026-10-08 (3. kör): fejléc két hasábban — cím + bemutatkozó szöveg | videó; mobilon egymás alatt. */
.team-archive-head.has-video { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
/* Kliens 2026-10-09: minden oldal-videó 1:1 (grow_video_embed); max ~480px, hogy a négyzet ne nyomja szét a hasábot. */
.grow-video { width: 100%; max-width: 30rem; margin-inline: auto; }
.grow-video iframe, .grow-video video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border: 0; border-radius: var(--radius); background: #000; }
@media (max-width: 860px) {
	.team-archive-head.has-video { grid-template-columns: 1fr; }
}
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}
.team-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; }
.team-card-photo {
	width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
	background: var(--mist); transition: transform 0.25s ease;
}
.team-card:hover .team-card-photo { transform: translateY(-4px); }
.team-card-ph {
	display: grid; place-items: center; font-size: 2.5rem; font-weight: 700;
	color: var(--accent); background: var(--mist);
}
.team-card-name { font-weight: 700; letter-spacing: -0.01em; }
.team-card-role { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.35; margin-top: -0.4rem; } /* név + szerep egy egység: szorosabb, mint fotó→név */

/* ============ Programok-archív (/programok/, kliens 2026-10-08): kereső + táblázat ============ */
.programs-archive { padding-block: var(--space-section); }
.programs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.programs-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.programs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; flex: 0 1 30rem; }
.programs-search { flex: 1 1 16rem; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0.8rem 1rem; transition: border-color 0.2s; }
.programs-search:hover, .programs-search:focus { border-color: var(--accent); }
.programs-count { color: var(--ink-soft); font-size: 0.9rem; white-space: nowrap; }
.programs-table { width: 100%; border-collapse: collapse; }
.programs-table thead th { text-align: left; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; padding: 0 1rem 0.75rem 0; border-bottom: 2px solid var(--ink); }
.programs-table tbody th, .programs-table td { text-align: left; vertical-align: top; padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.programs-table tbody th { font-weight: 700; width: 40%; }
.programs-table td { color: var(--ink-soft); }
.programs-table a { color: var(--ink); text-decoration: none; }
.programs-table a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.programs-table tr[hidden] { display: none; } /* a mobilos display:block felülírná a [hidden]-t */
.programs-empty { margin-top: 1.5rem; color: var(--ink-soft); }
/* Mobilon soronként egy „kártya": a program neve fent, alatta a három adat felirattal (a fejléc vizuálisan rejtve, a felolvasónak megmarad). */
@media (max-width: 760px) {
	.programs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.programs-table tbody, .programs-table tr, .programs-table tbody th, .programs-table td { display: block; width: auto; }
	.programs-table tr { padding: 1rem 0; border-bottom: 1px solid var(--line); }
	.programs-table tbody th, .programs-table td { border: 0; padding: 0.1rem 0; }
	.programs-table tbody th { margin-bottom: 0.35rem; }
	.programs-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink); }
	.programs-table tr[hidden] { display: none; }
}

/* ============ 8 · Zárás ============ */
.closing {
	background: var(--mist);
	border-top: 1px solid var(--line);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.closing-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.closing h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; }
.closing p { color: var(--ink-soft); margin-top: 0.4rem; }

/* ============ 8/b · Videó-sáv — YouTube lite-embed kártyák (telex-minta) ============ */
.videos { padding-block: var(--space-section); }
.videos-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	flex-wrap: wrap;
}
.videos-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
.videos-head-right { display: flex; align-items: center; gap: 1.25rem; }
.videos-all { color: var(--accent); font-weight: 600; white-space: nowrap; }
.videos-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.videos-track {
	display: flex;
	gap: clamp(0.85rem, 1.6vw, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	cursor: grab;
	--videos-inset: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	padding-inline: var(--videos-inset);
	scroll-padding-inline: var(--videos-inset);
}
.videos-track::-webkit-scrollbar { display: none; }
.video-card {
	position: relative;
	flex: 0 0 clamp(210px, 22vw, 270px);
	aspect-ratio: 9 / 16;
	border-radius: var(--radius);
	overflow: hidden;
	scroll-snap-align: start;
	background: var(--slate) center / cover no-repeat;
	color: #fff;
	cursor: pointer;
}
.video-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 16, 22, 0.12), rgba(10, 16, 22, 0.65));
	transition: background 0.25s;
}
.video-card:hover::after { background: linear-gradient(180deg, rgba(10, 16, 22, 0.04), rgba(10, 16, 22, 0.55)); }
.video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s;
}
.video-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--petrol);
}
.video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-card-title {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 1;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.video-card--ph { cursor: default; background: linear-gradient(160deg, var(--slate), var(--petrol)); }
.video-card--ph .video-card-title { opacity: 0.7; }
/* Kattintásra betöltött iframe — kitölti a kártyát, a poszter/play eltűnik. */
.video-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.video-card.is-playing .video-play,
.video-card.is-playing::after { display: none; }
@media (max-width: 760px) {
	.video-card { flex-basis: 68vw; }
}

/* ============ Inspiráció — legfrissebb blog-cikkek carousel (EY „Sajtóközlemények" minta) ============
 * A site videó-sávjának carousel-infrastruktúráját használja (data-scroller + [data-track] + nyilak +
 * peek-inset a main.js scroller()-jéből), a kártya-nyelv a blog-kártyáé. */
.ins { padding-block: var(--space-section); }
.ins-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	flex-wrap: wrap;
}
.ins-kicker { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); margin-bottom: 0.4rem; }
.ins-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.ins-sig { display: inline-block; width: 0.34em; height: 0.34em; margin-left: 0.22em; border-radius: 50%; background: var(--yellow); vertical-align: 0.06em; }
.ins-head-right { display: flex; align-items: center; gap: 1.25rem; }
.ins-all { color: var(--accent); font-weight: 600; white-space: nowrap; text-decoration: none; }
.ins-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.ins-track {
	display: flex;
	gap: clamp(0.85rem, 1.6vw, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	cursor: grab;
	--ins-inset: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	padding-inline: var(--ins-inset);
	scroll-padding-inline: var(--ins-inset);
}
.ins-track::-webkit-scrollbar { display: none; }
.ins-card {
	flex: 0 0 clamp(260px, 25vw, 320px);
	display: flex;
	flex-direction: column;
	background: var(--mist);
	border-radius: var(--radius);
	overflow: hidden;
	scroll-snap-align: start;
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ins-card:hover, .ins-card:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(30, 67, 89, 0.16); }
.ins-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ins-card-media { aspect-ratio: 16 / 9; background: #dfe9eb; overflow: hidden; }
.ins-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ins-card:hover .ins-card-img { transform: scale(1.04); }
.ins-card-media--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--light), var(--blue)); color: #fff; }
.ins-card-media--ph span { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; opacity: 0.9; }
.ins-card-body { display: flex; flex-direction: column; flex: 1; padding: clamp(1rem, 1.6vw, 1.35rem); }
.ins-card-cat { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--petrol); margin-bottom: 0.4rem; }
.ins-card-title {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.015em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ins-card-date { margin-top: auto; padding-top: 0.9rem; color: var(--ink-soft); font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) {
	.ins-card, .ins-card-img { transition: none; }
	.ins-card:hover { transform: none; }
	.ins-card:hover .ins-card-img { transform: none; }
}

/* ============ 9 · Lábléc — sötét petrol felület (guide 2.), fehér szöveg ============ */
.site-footer {
	background: var(--petrol);
	color: var(--white);
	padding-block: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
	font-size: 0.95rem;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; } /* kliens 2026-10-08: 3 oszlop (Kiemelt + GROW összevonva) */
.footer-brand { font-weight: 800; font-size: 1.2rem; display: block; margin-bottom: 0.5rem; }
.footer-tagline { font-style: italic; color: var(--light); margin: 0 0 0.75rem; }
.footer-brand-col p { margin: 0.3rem 0; color: rgba(255, 255, 255, 0.8); }
.footer-brand-col a { color: rgba(255, 255, 255, 0.9); }
.footer-brand-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Kliens 2026-10-16: a cím alatt a jogi linkek (a telefon/e-mail helyén). */
.footer-legal-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-top: 0.9rem; font-size: 0.88rem; }
.footer-col-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.7rem; font-weight: 700; }
nav.footer-col { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.footer-col a { color: rgba(255, 255, 255, 0.88); }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-social-ph { opacity: 0.5; }
.footer-legal {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
	line-height: 1.7;
}
.footer-legal a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.footer-grid { grid-template-columns: 1fr; }
}

/* ============ 404 ============ */
.not-found { padding-block: var(--space-section); text-align: center; }
.not-found h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; }
.not-found p { margin-top: 1rem; color: var(--ink-soft); }
.not-found-links { margin-top: 2rem; display: flex; gap: 1.5rem; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
	.display-orbit { animation: none; }
	/* Videó helyett poszterkép / placeholder (spec: Reduced motion szabály) */
	.media-loop video,
	.video-sound { display: none; }
}

/* ============ Lebegő visszahívás-CTA sáv (feladatlista 16) ============ */
.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40; /* tartalom fölött, de a fejléc (50) és a modal alatt */
	background: var(--petrol);
	color: var(--white);
	box-shadow: 0 -4px 20px rgba(10, 18, 24, 0.18);
	transform: translateY(100%); /* alaphelyzetben a viewport alatt (JS nélkül is rejtve) */
	transition: transform 0.25s ease-out;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 0.7rem;
}
.sticky-cta-text { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-right: auto; }
.sticky-cta-btn { flex-shrink: 0; padding: 0.7rem 1.25rem; } /* ≥44px magas, kényelmes tapintható gomb (QA-009) */
.sticky-cta-close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;  /* teljes 44×44 tapintható találati terület (QA-009) */
	height: 44px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.sticky-cta-close:hover { color: var(--white); }
@media (max-width: 760px) { /* a téma mobil töréspontja (kliens 2026-09-18: „mobilon a gomb középen") */
	.sticky-cta-inner { justify-content: center; }
	.sticky-cta-text { display: none; } /* mobilon a hosszú szöveg helyett a gomb elég */
	.sticky-cta-btn { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sticky-cta { transition: none; }
}

/* ── Kliens #9: „A csapat mögött a GROW Csoport" bizalmi blokk (globális, több aloldalon) ── */
/* A blokk az előző szekció ELÉ szúrt önálló szekció → a saját felső paddingje az előző szekció alsó
   paddingjére RÁÜLT (dupla térköz, túl nagy hézag felette). A felső paddingot elvesszük, így a fölötte
   lévő szekció alsó paddingje adja a normál (egyszeres) térközt — mint a többi szekciónál. */
.grow-trust-sec { padding-top: 0; padding-bottom: var(--space-section); }
/* Kliens: teljes szélesség (a jobb oldali üres sáv helyett); a bekezdés olvashatósági korláttal. */
.grow-trust-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 1rem; }
.grow-trust-lead { margin: 0 0 1.75rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink); max-width: 80ch; }
.grow-trust-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grow-trust-pillar strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--petrol); margin-bottom: 0.4rem; }
.grow-trust-pillar p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 760px) {
	.grow-trust-pillars { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── „GROW Circle" mandala-motívum (a GROW_Circle v02.mp4 SVG+CSS újraalkotása) az aloldali hérók
   hátterén. A pöttyök currentColor-ral tintázottak; a forgatást gyűrűnként a CSS adja. ── */
.grow-circle { position: absolute; pointer-events: none; color: var(--light); }
.grow-circle-ring { transform-box: view-box; transform-origin: 50% 50%; will-change: transform; }
@keyframes grow-circle-cw  { to { transform: rotate(360deg); } }
@keyframes grow-circle-ccw { to { transform: rotate(-360deg); } }
.grow-circle-ring--0 { animation: grow-circle-cw  120s linear infinite; }
.grow-circle-ring--1 { animation: grow-circle-ccw 150s linear infinite; }
.grow-circle-ring--2 { animation: grow-circle-cw  175s linear infinite; }
.grow-circle-ring--3 { animation: grow-circle-ccw 135s linear infinite; }
.grow-circle-ring--4 { animation: grow-circle-cw  160s linear infinite; }
/* Pötty-„twinkle": a pöttyök lépcsőzötten kicsinyülnek+halványulnak, majd vissza → a videóhoz hasonló
   élő, churning feltűnés/eltűnés (a merev forgás mellé). Nyugalmi állapot = teljes (reduced-motion-safe). */
.grow-circle-dot { transform-box: fill-box; transform-origin: center; animation: grow-circle-twinkle var(--tw, 6s) ease-in-out var(--td, 0s) infinite; }
@keyframes grow-circle-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.34); opacity: 0.12; } }
@media (prefers-reduced-motion: reduce) { .grow-circle-ring, .grow-circle-dot { animation: none; } }

/* Elhelyezés az aloldali hérókon: a mandala jobbra kihúzva (a szöveg balra tiszta marad), a
   teljes héró-magasságnál nagyobb, halvány. z-index 0 → a szöveg (.X-hero-inner z-1) fölötte van. */
.as-hero .grow-circle,
.ay-hero .grow-circle,
.genf-hero .grow-circle,
.hib-hero .grow-circle {
	top: 50%;
	right: -12%;
	transform: translateY(-50%);
	height: 168%;
	aspect-ratio: 1;
	z-index: 0;
	opacity: 0.3;
}
@media (max-width: 760px) {
	.as-hero .grow-circle, .ay-hero .grow-circle, .genf-hero .grow-circle, .hib-hero .grow-circle {
		right: -32%; height: 130%; opacity: 0.24;
	}
}
/* Kliens (2026-09-18): a mandala a FŐOLDALI hero hátterén is (a videó-háttér fölött, a szöveg alatt),
   ugyanolyan félig áttetszően, mint az aloldalakon. z-index 1 → a blur-videó (z0) fölé, a tartalom (z2) alá. */
.hero .grow-circle {
	top: 50%;
	right: -12%;
	transform: translateY(-50%);
	height: 168%;
	aspect-ratio: 1;
	z-index: 1;
	opacity: 0.3;
}
@media (max-width: 760px) {
	.hero .grow-circle { right: -32%; height: 130%; opacity: 0.24; }
}

/* ── Nyelvi sáv: nem-magyar böngészőknek a GROW International oldal (main.js mutatja meg; alap: hidden) ── */
.grow-intl-banner { background: var(--petrol); color: #fff; }
.grow-intl-banner-in {
	display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.25rem;
	padding-block: 0.7rem;
}
.grow-intl-banner-txt {
	margin: 0; flex: 1 1 18rem;
	font-family: var(--font-body); font-size: 0.95rem; line-height: 1.45;
}
.grow-intl-banner-cta {
	flex: none; display: inline-flex; align-items: center; gap: 0.4rem;
	background: var(--yellow); color: var(--petrol);
	font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
	padding: 0.5rem 1.1rem; border-radius: var(--radius-s); text-decoration: none;
	transition: background 0.18s ease-out;
}
.grow-intl-banner-cta:hover { background: #f2c800; }
.grow-intl-banner-x {
	flex: none; margin-left: auto;
	background: transparent; border: none; color: #fff; cursor: pointer;
	font-size: 1.5rem; line-height: 1; padding: 0 0.3rem; opacity: 0.75;
	transition: opacity 0.18s ease-out;
}
.grow-intl-banner-x:hover { opacity: 1; }
@media (max-width: 560px) {
	.grow-intl-banner-txt { flex-basis: 100%; }
	.grow-intl-banner-x { position: absolute; top: 0.5rem; right: 0.6rem; margin-left: 0; }
	.grow-intl-banner-in { position: relative; padding-right: 2.2rem; }
}

/* ============ Complianz — a lebegő „Süti-beállítások" fül elrejtése ============ */
/* Kliens (2026-09-16): a Complianz elfogadás után is fixen kint maradó „Süti-beállítások" fület
   elrejtjük. A beleegyezés a lábléc „Süti-beállítások" linkjéről módosítható (a link
   .cmplz-manage-consent osztályt kap → a Complianz JS-e ott is újranyitja a bannert), így a GDPR
   szerinti visszavonhatóság megmarad, csak diszkrétebb helyen. */
#cmplz-manage-consent { display: none !important; }
/* A lábléc „Süti-beállítások" linkje a többi jogi linkkel egyezzen (ne kapja meg a Complianz-gomb stílusát). */
.footer-legal a.cmplz-manage-consent { display: inline; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-transform: none; letter-spacing: normal; cursor: pointer; }