/* =====================================================================
   Viral Groww — Gaurav Widgets : shared styles
   ===================================================================== */

/* ---- Brand font (Aeonik) used by the nav, bundled locally so it loads
   reliably on any domain (no cross-origin/CORS issues) ---- */
@font-face{
	font-family:'AeonikVG';
	src:url('../fonts/aeonik-regular.otf') format('opentype');
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'AeonikVG';
	src:url('../fonts/aeonik-bold.otf') format('opentype');
	font-weight:700; font-style:normal; font-display:swap;
}

/* ---- Design tokens (shared across all VG widgets) ---- */
:root{
	--vg-green:#052D23;
	--vg-lime:#DAFF99;
	--vg-lime-soft:#F4FFE0;
	--vg-purple:#F0BEFA;
	--vg-card:#F5F5F5;
	--vg-muted:#5b6360;
}

/* =====================================================================
   HEADER  (floating glass pill — pixel-perfect from Figma)
   bar: 1280×88, radius 29, bg rgba(5,45,35,.4), backdrop blur 12px
   ===================================================================== */
.vg-header{ --vg-hd-maxw:1280px; --vg-hd-top:24px; width:100%; z-index:1000; }
.vg-header *{ box-sizing:border-box; }

/* overlay: floats over the section below (doesn't take layout space) */
.vg-header--overlay{ position:absolute; top:var(--vg-hd-top); left:0; right:0; }
/* sticky: pinned to the viewport while scrolling */
.vg-header--sticky{ position:fixed; top:var(--vg-hd-top); left:0; right:0; }

.vg-header__bar{
	position:relative;
	max-width:var(--vg-hd-maxw);
	margin:0 auto;
	min-height:88px;
	padding:0 40px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	border-radius:29px;
	background:rgba(5,45,35,.40);
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
}

/* ---- logo ---- */
.vg-header__logo{ display:inline-flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.vg-header__logo-img{ display:block; width:auto; height:30px; }
.vg-header__logo-text{
	font-family:'Archivo',-apple-system,system-ui,sans-serif;
	font-weight:700; font-size:22px; line-height:1; letter-spacing:-.01em;
	color:#fff;
}

/* ---- nav (absolutely centered in the bar on desktop) ---- */
.vg-header__nav{
	display:flex; align-items:center; gap:40px;
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.vg-nav-item{ position:relative; }
.vg-nav-link{
	display:inline-flex; align-items:center; gap:6px;
	font-family:'AeonikVG','Archivo',sans-serif;
	font-size:18px; font-weight:400; line-height:20px;
	color:#fff; text-decoration:none;
	transition:color .18s ease, font-weight .18s ease;
	white-space:nowrap;
}
.vg-nav-link:hover{ color:var(--vg-lime); }
.vg-nav-link.is-active{ color:var(--vg-lime); font-weight:700; }
.vg-caret{ font-size:11px; line-height:1; opacity:.85; }

/* ---- dropdown ---- */
.vg-submenu{
	position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
	min-width:220px; list-style:none; margin:0; padding:8px;
	background:rgba(5,45,35,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
	border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.28);
	opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease; z-index:20;
}
.vg-nav-item.has-sub:hover .vg-submenu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.vg-submenu li a{
	display:block; padding:10px 14px; border-radius:10px;
	font-family:'AeonikVG','Archivo',sans-serif; font-size:15px; color:#eaf3ec; text-decoration:none;
	transition:background .15s ease, color .15s ease;
}
.vg-submenu li a:hover{ background:rgba(218,255,153,.14); color:var(--vg-lime); }

/* ---- right side / CTA ---- */
.vg-header__right{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.vg-header__cta{
	display:inline-flex; align-items:center; justify-content:center;
	font-family:'Archivo',sans-serif; font-weight:500; font-size:18px; line-height:1;
	color:var(--vg-green); background:var(--vg-lime);
	padding:12px 22px; border-radius:16px; text-decoration:none; white-space:nowrap;
	border:1.5px solid var(--vg-green);
	box-shadow:3px 4px 0 var(--vg-green);
	transition:transform .15s ease, box-shadow .15s ease;
}
.vg-header__cta:hover{ transform:translate(1px,2px); box-shadow:1px 2px 0 var(--vg-green); }
.vg-header__cta:active{ transform:translate(3px,4px); box-shadow:0 0 0 var(--vg-green); }

/* ---- mobile toggle (hidden on desktop) ---- */
.vg-header__toggle{
	display:none; flex-direction:column; justify-content:center; gap:5px;
	width:42px; height:42px; padding:9px; border:0; border-radius:12px;
	background:rgba(255,255,255,.10); cursor:pointer;
}
.vg-header__toggle span{ display:block; height:2px; border-radius:2px; background:#fff; transition:transform .25s ease, opacity .2s ease; }
.vg-header.is-open .vg-header__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.vg-header.is-open .vg-header__toggle span:nth-child(2){ opacity:0; }
.vg-header.is-open .vg-header__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* slight solidify when scrolled past the top (set by JS) */
.vg-header.is-scrolled .vg-header__bar{ background:rgba(5,45,35,.72); box-shadow:0 10px 30px rgba(0,0,0,.18); }

/* =====================================================================
   HEADER — responsive
   ===================================================================== */
@media(max-width:1024px){
	.vg-header__bar{ padding:0 20px; min-height:72px; }
	.vg-header__nav{ gap:26px; }
	.vg-header__toggle{ display:flex; }

	/* collapse nav into a dropdown panel under the bar */
	.vg-header__nav{
		position:absolute; top:calc(100% + 10px); left:0; right:0;
		flex-direction:column; align-items:stretch; gap:4px;
		max-width:var(--vg-hd-maxw); margin:0 auto; padding:14px;
		background:rgba(5,45,35,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
		border-radius:20px; box-shadow:0 18px 40px rgba(0,0,0,.28);
		opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease;
	}
	.vg-header.is-open .vg-header__nav{ opacity:1; visibility:visible; transform:translateY(0); }
	.vg-nav-link{ padding:12px 14px; border-radius:12px; }
	.vg-nav-link:hover{ background:rgba(218,255,153,.12); }
	.vg-submenu{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; background:transparent; padding:0 0 6px 14px; min-width:0; }
	.vg-nav-item.has-sub:hover .vg-submenu{ transform:none; }
}
@media(max-width:600px){
	.vg-header__bar{ padding:0 14px; min-height:64px; gap:12px; }
	.vg-header__cta{ font-size:15px; padding:10px 16px; }
	.vg-header__logo-text{ font-size:19px; }
	.vg-header__logo-img{ height:26px; }
}