/* =========================================================
   VARGA NEXTGATE – Header + Hero (1672 × 941 referencia)
   Betöltés: custom.css UTÁN. Minden szabály a body.vn-home
   osztályra van szűkítve, így az aloldalakat nem érinti.
   (Teljes oldalra: töröld a ".vn-home " előtagot.)
   ========================================================= */

.vn-home {
	--vn-blue: #1283ff;
	--vn-blue-2: #0a6cf0;
	--vn-blue-glow: rgba(18, 131, 255, .55);
	--vn-ink: #070d18;
	--vn-text: #ffffff;
	--vn-muted: rgba(255, 255, 255, .72);
	--vn-line: rgba(255, 255, 255, .14);
	--vn-gutter: clamp(20px, 6.7vw, 128px);   /* 1672px-en = 112px */
	--vn-header-h: 93px;
	--vn-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	background: var(--vn-ink);
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */
.vn-home header.main-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 100;
	border-bottom: 0;
	background: none;
}

/* A glass háttér a .header-sticky-n van (nem a header-en),
   mert a backdrop-filter elrontaná a position:fixed sticky módot. */
.vn-home header.main-header .header-sticky {
	background: linear-gradient(180deg, rgba(5, 10, 20, .78), rgba(5, 10, 20, .52));
	-webkit-backdrop-filter: blur(14px) saturate(1.25);
	backdrop-filter: blur(14px) saturate(1.25);
	border-bottom: 1px solid var(--vn-line);
}
.vn-home header.main-header .header-sticky.active {
	background: rgba(6, 12, 24, .94);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}

.vn-home .navbar {
	padding: 0;
	min-height: var(--vn-header-h);
}
.vn-home .navbar > .container {
	width: 100%;
	max-width: 1760px;
	padding-inline: var(--vn-gutter);
	flex-wrap: nowrap;
	align-items: center;
}

.vn-home .navbar-brand {
	display: flex;
	align-items: center;
	margin-left: 16px;            /* a logó a képen 128px-nél indul */
}
.vn-home .navbar-brand img {
	height: clamp(32px, 2.95vw, 50px);   /* 1672px-en ≈ 183×49 */
	width: auto;
	display: block;
}

/* --- Menü --- */
.vn-home .main-menu .nav-menu-wrapper {
	margin-left: clamp(16px, 3vw, 56px);
}
.vn-home .main-menu .nav-menu-wrapper > ul {
	margin: 0;
	padding: 0;
}
.vn-home .main-menu .nav-menu-wrapper > ul > li > a {
	position: relative;
	display: block;
	font-family: var(--vn-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--vn-text);
	padding: 34px 20px !important;
	transition: color .25s ease;
}
.vn-home .main-menu .nav-menu-wrapper > ul > li > a:hover,
.vn-home .main-menu .nav-menu-wrapper > ul > li:hover > a,
.vn-home .main-menu .nav-menu-wrapper > ul > li.active > a {
	color: var(--vn-blue);
}

/* Aktív / hover aláhúzás (a képen 3px, a header aljához közel) */
.vn-home .main-menu .nav-menu-wrapper > ul > li > a::before {
	content: "";
	position: absolute;
	left: 13px; right: 13px;
	bottom: 10px;
	height: 3px;
	border-radius: 3px;
	background: var(--vn-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
}
.vn-home .main-menu .nav-menu-wrapper > ul > li.active > a::before,
.vn-home .main-menu .nav-menu-wrapper > ul > li > a:hover::before {
	transform: scaleX(1);
}

/* Lenyíló nyíl: vékony chevron (FontAwesome helyett SVG maszk) */
.vn-home .main-menu .nav-menu-wrapper > ul > li.submenu > a::after {
	content: "";
	display: inline-block;
	width: 12px; height: 12px;
	margin-left: 8px;
	vertical-align: -1px;
	background: currentColor;
	font-family: inherit;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s ease;
}
.vn-home .main-menu .nav-menu-wrapper > ul > li.submenu:hover > a::after {
	transform: rotate(180deg);
}

/* Lenyíló almenü: sötét üveg, jó kontraszt */
.vn-home .main-menu ul ul {
	width: 260px;
	top: 100%;
	border-radius: 16px;
	background: rgba(8, 15, 28, .96);
	border: 1px solid var(--vn-line);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
}
.vn-home .main-menu ul li:hover > ul { padding: 8px; }
.vn-home .main-menu ul ul li a {
	font-family: var(--vn-font);
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	border-radius: 10px;
	padding: 10px 14px !important;
	color: var(--vn-text);
}
.vn-home .main-menu ul ul li a:hover,
.vn-home .main-menu ul ul li a:focus {
	color: #fff;
	background: rgba(18, 131, 255, .22);
	padding: 10px 14px 10px 18px !important;
}

/* --- Header CTA --- */
.vn-header-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
	height: 56px;
	margin-left: 24px;
	padding: 0 22px 0 24px;
	border-radius: 12px;
	font-family: var(--vn-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, #1b92ff 0%, var(--vn-blue-2) 100%);
	box-shadow: 0 10px 28px -10px var(--vn-blue-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.vn-header-cta svg { width: 20px; height: 20px; flex: none; }
.vn-header-cta .vn-arrow { width: 18px; height: 18px; transition: transform .25s ease; }
.vn-header-cta:hover,
.vn-header-cta:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 16px 34px -10px var(--vn-blue-glow), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.vn-header-cta:hover .vn-arrow { transform: translateX(4px); }

/* Fókusz (A11y) */
.vn-home .main-menu a:focus-visible,
.vn-header-cta:focus-visible,
.vn-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.vn-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: clamp(700px, 100svh, 1040px);
	padding-bottom: clamp(32px, 7.5vh, 72px);
	background: var(--vn-ink);
	color: var(--vn-text);
	font-family: var(--vn-font);
	overflow: hidden;
}

.vn-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 62% center;
}

/* Olvashatóság: bal oldali + alsó + felső sötétítés */
.vn-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(5, 10, 20, .55) 0, rgba(5, 10, 20, 0) 16%),
		linear-gradient(0deg, rgba(5, 10, 20, .92) 0, rgba(5, 10, 20, .55) 14%, rgba(5, 10, 20, 0) 34%),
		linear-gradient(90deg, rgba(5, 10, 20, .86) 0, rgba(5, 10, 20, .62) 30%, rgba(5, 10, 20, .12) 56%, rgba(5, 10, 20, 0) 70%);
}

.vn-hero__inner {
	width: 100%;
	max-width: 1760px;
	margin-inline: auto;
	padding-inline: var(--vn-gutter);
	padding-top: calc(var(--vn-header-h) + clamp(56px, 10vh, 110px));
}

.vn-hero__eyebrow {
	margin: 0 0 22px;
	font-size: clamp(.75rem, .9vw, .95rem);   /* ≈15px */
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vn-blue);
}
.vn-hero__eyebrow .sep {
	margin: 0 .55em;
	color: rgba(18, 131, 255, .6);
}

.vn-hero__title {
	margin: 0;
	font-family: var(--vn-font);
	font-size: clamp(2.5rem, 4.1vw, 4.6rem);  /* ≈68px */
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.02em;
	color: #fff;
}
.vn-hero__title span { display: block; }
.vn-hero__title .accent { color: var(--vn-blue); }

.vn-hero__lead {
	max-width: 24.5em;
	margin: 16px 0 0;
	font-size: clamp(1.1rem, 1.32vw, 1.5rem);   /* ≈22px */
	font-weight: 500;
	line-height: 1.55;
	color: #fff;
}

.vn-hero__text {
	max-width: 31em;
	margin: 14px 0 0;
	font-size: clamp(.95rem, 1.02vw, 1.1rem);   /* ≈17px */
	font-weight: 400;
	line-height: 1.6;
	color: var(--vn-muted);
}

/* --- Nagy CTA gomb --- */
.vn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-width: min(420px, 100%);
	height: clamp(64px, 4.7vw, 80px);
	margin-top: 30px;
	padding: 0 clamp(24px, 3vw, 50px);
	border-radius: 14px;
	font-family: var(--vn-font);
	font-size: clamp(1.05rem, 1.3vw, 1.4rem);
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, #1b92ff 0%, var(--vn-blue-2) 100%);
	box-shadow: 0 18px 44px -14px var(--vn-blue-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
	transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.vn-btn svg { flex: none; }
.vn-btn .vn-grid { width: 30px; height: 30px; }
.vn-btn .vn-arrow { width: 22px; height: 22px; transition: transform .3s ease; }
.vn-btn:hover,
.vn-btn:focus-visible {
	color: #fff;
	transform: translateY(-3px);
	filter: brightness(1.08);
	box-shadow: 0 24px 54px -14px var(--vn-blue-glow), inset 0 1px 0 rgba(255, 255, 255, .34);
}
.vn-btn:hover .vn-arrow { transform: translateX(6px); }

/* --- Előnyök sáv --- */
.vn-hero__features {
	position: relative;
	width: 100%;
	max-width: 1760px;
	margin: auto auto 0;
	padding: 56px var(--vn-gutter) 0;
}
.vn-hero__features ul {
	display: grid;
	grid-template-columns: 405fr 447fr 596fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vn-feature {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.2vw, 37px);
	min-height: 52px;
}
.vn-feature:nth-child(1) { padding-left: 1.4vw; }
.vn-feature:nth-child(2) { padding-left: 5vw;  border-left: 1px solid rgba(255, 255, 255, .28); }
.vn-feature:nth-child(3) { padding-left: 5.3vw; border-left: 1px solid rgba(255, 255, 255, .28); }

.vn-feature svg {
	flex: none;
	width: clamp(34px, 2.9vw, 48px);
	height: clamp(34px, 2.9vw, 48px);
	fill: none;
	stroke: var(--vn-blue);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 10px rgba(18, 131, 255, .35));
}
.vn-feature strong {
	display: block;
	font-size: clamp(.95rem, 1.08vw, 1.2rem);
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}
.vn-feature span {
	display: block;
	margin-top: 3px;
	font-size: clamp(.8rem, .93vw, 1rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--vn-muted);
}

/* ---------------------------------------------------------
   Belépő animáció
   --------------------------------------------------------- */
@keyframes vn-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
.vn-rise {
	animation: vn-rise .8s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: var(--d, 0s);
}
@media (prefers-reduced-motion: reduce) {
	.vn-rise { animation: none; }
	.vn-btn, .vn-header-cta, .vn-btn .vn-arrow,
	.vn-header-cta .vn-arrow { transition: none; }
}

/* ---------------------------------------------------------
   RESZPONZÍV
   --------------------------------------------------------- */
@media (max-width: 1199px) {
	.vn-header-cta span { display: none; }
	.vn-header-cta { padding: 0 18px; gap: 10px; }
	.vn-home .main-menu .nav-menu-wrapper > ul > li > a { padding-inline: 14px !important; }
}

@media (max-width: 991px) {
	.vn-home { --vn-header-h: 76px; }
	.vn-header-cta { display: none; }
	.vn-home .navbar { min-height: var(--vn-header-h); }
	.vn-home .navbar > .container { flex-wrap: wrap; }
	.vn-home .navbar-brand { margin-left: 0; }

	.vn-hero { min-height: 0; }
	.vn-hero__bg { object-position: 72% center; }
	.vn-hero__overlay {
		background:
			linear-gradient(180deg, rgba(5, 10, 20, .6) 0, rgba(5, 10, 20, .35) 30%, rgba(5, 10, 20, .88) 70%, rgba(5, 10, 20, .96) 100%);
	}
	.vn-hero__inner { padding-top: calc(var(--vn-header-h) + 56px); }
	.vn-hero__title { font-size: clamp(2.2rem, 8.4vw, 3.4rem); }
	.vn-hero__lead  { font-size: clamp(1.05rem, 3.4vw, 1.3rem); max-width: 30em; }
	.vn-hero__text  { font-size: clamp(.95rem, 2.9vw, 1.05rem); max-width: 34em; }
	.vn-hero__eyebrow { font-size: clamp(.68rem, 2.5vw, .85rem); line-height: 1.8; }
	.vn-btn { width: 100%; min-width: 0; font-size: 1.05rem; gap: 16px; }

	.vn-hero__features { padding-top: 48px; }
	.vn-hero__features ul { grid-template-columns: 1fr; gap: 22px; }
	.vn-feature:nth-child(n) { padding-left: 0; border-left: 0; }
	.vn-feature svg { width: 40px; height: 40px; }
	.vn-feature strong { font-size: 1.05rem; }
	.vn-feature span { font-size: .9rem; }
}

@media (max-width: 480px) {
	.vn-hero__eyebrow .sep { margin: 0 .35em; }
	.vn-btn .vn-grid { width: 26px; height: 26px; }
}