*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter,system-ui,Arial,sans-serif;
  background:#050816;
  color:white;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 20%, rgba(99,102,241,.35), transparent 25%),
    radial-gradient(circle at 80% 30%, rgba(56,189,248,.25), transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(168,85,247,.25), transparent 25%);
  filter:blur(40px);
  z-index:-1;
}
.nav{
  position:sticky;top:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 48px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logo{font-weight:800;letter-spacing:.18em}
nav a{
  color:#dbe4ff;text-decoration:none;margin-left:28px;font-size:.95rem
}
nav a:hover{color:white}
.hero{
  min-height:82vh;
  display:flex;align-items:center;justify-content:center;
  padding:48px 24px;
}
.hero-content{max-width:860px;text-align:center}
.eyebrow{
  display:inline-block;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#c7d2fe;
  margin-bottom:24px;
}
h1{
  font-size:clamp(3rem,7vw,6.2rem);
  line-height:.95;
  margin-bottom:24px;
}
.subtitle{
  color:#cbd5e1;
  font-size:1.12rem;
  line-height:1.8;
  max-width:720px;
  margin:0 auto 36px;
}
.actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{
  padding:14px 22px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
}
.primary{
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  color:white;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
}
.secondary{
  color:white;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
}
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
  padding:24px 48px 72px;
}
.card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:28px;
  backdrop-filter:blur(10px);
  transition:transform .25s ease,border-color .25s ease;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(148,163,184,.35);
}
.card h3{margin-bottom:12px}
.card p{color:#cbd5e1;line-height:1.7}
.footer{
  padding:28px;
  text-align:center;
  color:#94a3b8;
  border-top:1px solid rgba(255,255,255,.08);
}
.page{
  max-width:900px;
  margin:80px auto;
  padding:0 24px;
}
.page h1{font-size:3rem;margin-bottom:18px}
.page p{color:#cbd5e1;line-height:1.8;margin-bottom:16px}
@media (max-width:700px){
  .nav{padding:18px 20px}
  nav a{margin-left:16px;font-size:.9rem}
  .features{padding:24px 20px 56px}
}