:root{
	/* Colors */
	--bg: #0a1625; --bgg: #123059;
	--text: #e8f1ff;
	--brand: #0b3d91;
	--accent: #12b3eb;
	--muted: #a9c1e8;
	/* Spacing Scale */
	--space-0: 0rem;
	--space-1: 0.25rem;	/*  4px */
	--space-2: 0.5rem;	/*  6px */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem;	/* 16px */
	--space-5: 1.5rem;	/* 24px */
	--space-6: 2rem;	/* 32px */
	--space-7: 3rem;	/* 48px */
	--space-8: 4rem;	/* 64px	*/
	--space-9: 5rem;	/* 72px */
	--space-10: 6rem;	/* 88px */
	--space-11: 7rem;	/*104px */
	/* Layout */
	--container-max: 72rem;	/* ~1152 px */
	--gutter: clamp(var(--space-4), 4vw, var(--space-5));	/* fluid side padding */
	--header-height:6rem;
	--section-pad:1.5rem;		/* vertical section spacing */
	/* Cards */
	--card-min:36rem;		/* ~576px */
	--radius:1.125rem;
	--card-pad:1.5rem;
	--gap:1rem;
	--shadow: 0 8px 28px rgba(0,0,0,.35);
}

/* PAGE SETUP */

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior: smooth;}
body{
	margin:0;
	background:
		/* radial-gradient( */
			/* 1200px 700px at 70% -10%, */
			/* var(--bgg) 0%,  */
			/* var(--bg) 80%, */
			/* var(--bg) 100%), */
		var(--bg);
	font:16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
	color:var(--text); 
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* LAYOUT PRIMITIVES */

/* Container: Centers content with consistent left-right gutters */
.container{
	max-width: var(--container-max);		/* maximum page width */
	margin-inline: auto;					/* centers (sets margin-left and margin-right) */
	padding-inline: var(--gutter);			/* sets left and right padding */
}
/* Sections: Vertical spacing for top-bottom margins */
.section {
	padding-block: var(--section-pad);
	scroll-margin-top: var(--header-height); /* leave room for sticky header */
} 
.section > .section-head {display:flex; align-items:center; gap:12px; margin:0 0 16px;}
.section > .section-head h2 {margin:0; font-size:24px; line-height:1.2;}
.section > .section-head .divider {height:1px; flex:1; background:linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.05));}
.section:target {
	outline: 2px solid rgba(18,179,235,.45);
	box-shadow: 0 0 0 4px rgba(18,179,235,.15);
	border-radius: var(--radius);
	transition: outline 0.6s ease, box-shadow 0.6s ease;
}
/* Stacks: Elements vertically within a section, generally text and grids */
.stack{
	display:flex;
	flex-direction:column;
	gap:var(--gap)}
/* Grids: Elements horizontally within a stack */
.grid{display:grid}
.cols-1{grid-template-columns:1fr}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
/* Cards within a grid */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  padding:var(--card-pad)}
.card h3{margin:.2rem 0 .4rem; font-size:20px}
.card-media{ overflow: hidden; }
.card-media > img, .card-media > .wave{
  width: 100%; height: 100%; display: block; object-fit: cover;
  border-radius: var(--radius);}
/* Widgets on a card */
.muted{color:#cfe0ff; opacity:.85}	/* basic text */
.chips{display:grid; gap:10px; margin:18px 0}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; background:rgba(18,179,235,.12); border:1px solid rgba(18,179,235,.25); color:#bfeaff; border-radius:999px; font-size:12px}
.badge{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#001224; background:#9bd8ff; padding:6px 10px; border-radius:999px}
.list{margin:0; padding-left:18px}
.list li{margin:6px 0}
.quote{display:flex; gap:16px; align-items:flex-start}
.quote svg{flex:0 0 auto}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px}
.stat{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px; text-align:center}
.stat b{font-size:22px; display:block}

/* NAVIGATION SECTION */

header{position:fixed; top:0; width:100%; backdrop-filter:saturate(150%) blur(8px); background:rgba(10,22,37,.7); border-bottom:1px solid rgba(255,255,255,.06); z-index:10}
.logo{width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg, var(--brand), #0068a0); box-shadow:inset 0 0 12px rgba(255,255,255,.15)}
.brand{display:flex; gap:12px; align-items:center}
.brand h1{font-size:18px; letter-spacing:.3px; margin:0}
.nav{display:flex; align-items:center; justify-content:space-between; padding-block: var(--gutter)}
.nav a{color:var(--text); opacity:.9; padding:8px 12px; border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.active{background:rgba(255,255,255,.12)}
.cta{background:linear-gradient(135deg, var(--accent), #4cc9f0); color:#001224; font-weight:700}
/* Small Screen (Mobile) Menu */
.menu-btn{display:none; gap:8px; align-items:center; color:var(--text); background:transparent; border:1px solid rgba(255,255,255,.2); padding:8px 12px; border-radius:10px}
.mobile-menu{display:none; padding:8px 0 18px}
.mobile-menu a{display:block; padding:10px; border-radius:10px}
.mobile-menu a:hover{background:rgba(255,255,255,.06)}

/* HERO SECTION */

.hero{
	padding-block: var(--header-height) var(--section-pad);
	display: grid;
	grid-template-columns:1.1fr .9fr;
	gap: var(--gap);
}
/* .card-pad{padding: var(--card-pad);} */

.hero h2{font-size:42px; line-height:1.15; margin:0 0 10px}
.kicker{display:inline-block; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-size:12px; margin-bottom:8px}
.illus{position:relative; overflow:hidden}
.wave{height:100%; width:100%; border-radius:var(--radius); background: radial-gradient( 600px 400px at 70% 20%, rgba(18,179,235,.28), transparent 60%), linear-gradient(180deg, #0b2545 0%, #06192b 100%)}
.wave::after{content:""; position:absolute; inset:0; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="none"><path d="M0,200 C200,260 400,140 600,200 C800,260 1000,140 1200,200 L1200,400 L0,400 Z" fill="%2312b3eb22"/></svg>') bottom/cover no-repeat}

/* FOOTER SECTION */

.footer{
	padding-inline:var(--gutter);
	color:#cfe0ff;
	opacity:.9}
.footer a{color:#a9c1e8}


/* MOBILE */
@media (max-width: 980px){
	header .links{display:none}
	header .menu-btn{display:inline-flex}
	.nav { flex-wrap: wrap; }           /* allow a second line */
	.mobile-menu {
		display: none;                  /* hidden by default */
		flex-basis: 100%;               /* take the full next line */
		padding: 8px 0 18px}            /* keep your spacing */
	.mobile-menu.open {display: block}	/* visible when toggled */
	
	.hero{grid-template-columns:1fr}
	.hero > .illus{display:none}
	
	.grid-3{grid-template-columns:1fr}
	.grid-2{grid-template-columns:1fr}
}