:root{
  --bg:#080a0e;
  --bg2:#0b0f18;
  --panel:#0f121b;
  --line:#1f2633;
  --gold:#ffd54a;
  --gold-2:#ffef9b;
  --ink:#e9edf6;
  --muted:#9aa3b5;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 70% -10%,rgba(255,213,74,.08),transparent 60%),
    radial-gradient(800px 400px at 0% 100%,rgba(255,213,74,.06),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2) 60%,#06070a);
}

/* ===== NAV ===== */
.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  background:rgba(8,10,14,.55);
  backdrop-filter: blur(6px);
  border-bottom:1px solid #151a24;
}
.logo{font-weight:800; letter-spacing:.3px; color:var(--gold)}
.navbar nav a{
  color:var(--ink); text-decoration:none; margin-left:16px; font-weight:600; opacity:.9;
  position:relative; padding:6px 8px; border-radius:10px;
}
.navbar nav a:hover{
  color:var(--gold);
  box-shadow:0 0 0 1px rgba(255,213,74,.3), 0 0 14px rgba(255,213,74,.22) inset;
}

/* ===== HERO ===== */
.hero{position:relative; min-height:84vh; overflow:hidden; display:grid; place-items:center}
.hero canvas{position:absolute; inset:0}
#grid{mix-blend-mode:screen; opacity:.25}
#stars{opacity:.65}
#spiralCanvas{opacity:.9; filter:contrast(115%) saturate(108%)}
.hero-overlay{
  position:absolute; inset:0;
  background:radial-gradient(650px 350px at 50% 55%,rgba(255,213,74,.06),transparent 70%),
             radial-gradient(900px 500px at 10% 10%,rgba(255,213,74,.05),transparent 70%);
  pointer-events:none;
}
.hero-text{position:relative; text-align:center; padding:72px 16px}
.hero-text h1{font-size:clamp(32px,6vw,58px); margin:0 0 8px; letter-spacing:.2px}
.hero-text p{color:var(--muted); max-width:840px; margin:8px auto 18px; font-size:clamp(14px,2.6vw,18px)}
.cta-buttons{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  --g: var(--gold);
  display:inline-block; text-decoration:none; font-weight:800;
  background:linear-gradient(180deg,var(--g),#f7c62a);
  color:#111; padding:12px 18px; border-radius:14px; box-shadow:
    0 0 0 1px rgba(255,213,74,.35) inset,
    0 10px 24px -6px rgba(255,213,74,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
.btn.alt{
  background:transparent; color:var(--gold); border:1px solid var(--gold);
  box-shadow:0 0 18px rgba(255,213,74,.18) inset, 0 0 18px rgba(255,213,74,.12);
}

/* ===== SECTIONS ===== */
.section{padding:56px 18px}
.section h2{font-size:clamp(22px,4.2vw,30px); margin:0 0 10px}
.section p{color:var(--ink); opacity:.92; max-width:1000px; margin:0 auto}

/* Cards */
.card-grid{
  --w:280px;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(var(--w),1fr));
  margin-top:18px;
}
.card{
  position:relative; background:linear-gradient(180deg,#111521,#0d1018);
  border:1px solid #1f2734; border-radius:16px; padding:16px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,213,74,.08) inset;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:before{
  content:\"\"; position:absolute; inset:-2px; border-radius:18px;
  background:conic-gradient(from 180deg at 50% 50%, rgba(255,213,74,.0), rgba(255,213,74,.22), rgba(255,213,74,.0));
  filter: blur(16px); opacity:.0; transition:opacity .2s ease;
}
.card:hover{ transform:translateY(-2px); border-color:#2c3646;
  box-shadow:0 0 0 1px rgba(255,213,74,.18) inset, 0 10px 30px -8px rgba(255,213,74,.25);
}
.card:hover:before{opacity:.65}
.card h3{margin:0 0 6px}
.card p{color:#c7cedc; margin:0 0 8px}
.card a{color:var(--gold); text-decoration:none; font-weight:700}
.card a:hover{text-decoration:underline}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Footer */
footer{border-top:1px solid #151a24; padding:22px 18px; color:var(--muted); text-align:center}

/* Mobile tweaks */
@media (max-width:640px){
  .navbar{padding:10px 14px}
  .navbar nav a{margin-left:10px}
}