:root{
  --bg1:#0b1020;
  --bg2:#11183a;
  --accent:#7c9cff;
  --accent2:#6ef3ff;
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.18);
  --text:#e9ecff;
  --muted:#aab0d6;
}

*{ box-sizing:border-box }

body{
  margin:0;
  font-family: system-ui, sans-serif;
  color:var(--text);

  background:
    radial-gradient(1200px 800px at 10% 10%, #1a237a 0%, transparent 50%),
    radial-gradient(900px 600px at 90% 20%, #0ea5e9 0%, transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* NAV */

.nav{
  display:flex;
  justify-content:space-between;
  padding:20px 28px;
  backdrop-filter: blur(16px);
  border-bottom:1px solid var(--border);
}

.brand{ font-weight:800 }

/* HERO */

.hero{
  display:grid;
  place-items:center;
  padding:100px 20px 60px;
  text-align:center;
}

h1{
  font-size:clamp(40px,6vw,72px);
  margin:0 0 16px;
}

.sub{
  color:var(--muted);
  max-width:720px;
  margin:auto;
}

.btn{
  display:inline-block;
  margin-top:28px;
  padding:16px 24px;
  border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(124,156,255,.25), rgba(124,156,255,.05));
  backdrop-filter: blur(14px);
  text-decoration:none;
  color:var(--text);
  font-weight:600;
}

footer{
  padding:40px;
  text-align:center;
  color:var(--muted);
}