:root{
  --bg:#07111f;
  --bg2:#0d1a2f;
  --panel:#10213c;
  --line:rgba(255,255,255,.12);
  --text:#eef4ff;
  --muted:#bfd0f5;
  --gold:#f3c969;
  --blue:#72b3ff;
  --glow:0 0 30px rgba(114,179,255,.18);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(79,124,255,.18), transparent 30%),
    linear-gradient(180deg, #050b15 0%, #081221 35%, #07111f 100%);
  line-height:1.65;
}

a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{width:min(var(--max), 92%); margin:0 auto}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(5,11,21,.78);
  border-bottom:1px solid var(--line);
}

.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:14px 0;
}

.brand{
  color:#fff;
  font-weight:700;
  letter-spacing:.5px;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:.96rem;
}

.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.hero-inner{
  position:relative;
  z-index:2;
  padding:88px 0 74px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:center;
}

.eyebrow{
  display:inline-block;
  color:var(--gold);
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-weight:700;
  margin-bottom:16px;
}

h1,h2,h3{
  margin:0 0 14px;
  line-height:1.15;
}

h1{
  font-size:clamp(2.2rem, 5vw, 4rem);
}

.hero p{
  max-width:64ch;
  color:#e8f0ff;
  font-size:1.08rem;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:24px;
}

.btn{
  display:inline-block;
  padding:13px 20px;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  transition:.2s ease;
}

.btn-primary{
  background:linear-gradient(90deg, #f3c969, #d6a53a);
  color:#0c1628;
  box-shadow:0 10px 30px rgba(243,201,105,.18);
}

.btn-secondary{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.2);
}

.btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
}

.hero-card,
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  box-shadow:var(--glow);
}

.hero-card h3{
  color:var(--gold);
  font-size:1.05rem;
  margin-bottom:10px;
}

.hero-card ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
}

section{
  padding:68px 0;
}

.section-head{
  max-width:790px;
  margin-bottom:28px;
}

.section-head p,
.card p,
.quote-note,
.mission p,
footer{
  color:var(--muted);
}

.card h3{
  font-size:1.16rem;
  margin-bottom:10px;
}

.accent{
  color:var(--gold);
}

.quote-band{
  background:linear-gradient(180deg, rgba(114,179,255,.08), rgba(255,255,255,0));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

blockquote{
  margin:0;
  padding:0;
  font-size:clamp(1.25rem, 2.5vw, 1.9rem);
  font-weight:700;
  line-height:1.35;
}

.quote-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}

.path-links,
.mini-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:18px;
}

.path-links a{
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
}

.mission{
  text-align:center;
  padding:76px 0 84px;
}

footer{
  border-top:1px solid var(--line);
  padding:26px 0 40px;
  font-size:.95rem;
}

@media (max-width: 960px){
  .hero-inner,
  .quote-wrap{
    grid-template-columns:1fr;
  }

  .nav{
    display:none;
  }
}