/* CSS reset & variables */
:root{
  --bg: #0b1020;
  --panel: #0f152a;
  --muted: #94a3b8;
  --text: #e2e8f0;
  --brand: #4f46e5;
  --brand-2: #06b6d4;
  --ring: rgba(79,70,229,.35);
  --card: #0f172a;
  --border: #1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -20%, rgba(79,70,229,.15), transparent 60%) , var(--bg);
  line-height:1.6;
}
.container{width:min(1100px, 92%); margin-inline:auto}
a{color:inherit;text-decoration:none}
.btn{
  display:inline-block; padding:.9rem 1.1rem; border-radius:14px; font-weight:700;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:white; box-shadow: 0 10px 28px rgba(79,70,229,.35);
  transition: transform .15s ease, box-shadow .2s ease; will-change: transform;
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 12px 34px rgba(79,70,229,.45)}
.btn.secondary{
  background:transparent; border:1px solid var(--border); color:var(--text); box-shadow:none
}
nav{
  position:sticky; top:0; backdrop-filter: blur(8px);
  background: rgba(11,16,32,.55); border-bottom:1px solid rgba(255,255,255,.06); z-index:50
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding: .8rem 0}
nav .links{display:flex; gap:1.2rem}
.logo{display:flex; align-items:center; gap:.7rem}
.logo img{height:28px; width:auto}
.logo span{font-weight:800; letter-spacing:.2px}
.hero{
  padding: 6rem 0 3rem; text-align:center
}
.hero h1{
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height:1.1; margin:0 0 1rem; letter-spacing:-.02em
}
.sub{color:var(--muted); max-width:780px; margin:0 auto 1.8rem}
.hero-ctas{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}
.badge{
  display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .6rem; border:1px solid var(--border);
  border-radius:999px; color:var(--muted); font-size:.85rem; background: rgba(79,70,229,.1)
}
.grid{display:grid; gap:1.2rem}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:2.2rem 0}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:16px; padding:1.2rem;
}
.card h3{margin:.2rem 0 .3rem}
.kicker{letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; color:var(--muted)}
.section{padding: 3.5rem 0}
.section h2{font-size: clamp(1.5rem, 3.6vw, 2.2rem); margin:0 0 .6rem}
.card .dots{height:120px; border-radius:12px; background:
  radial-gradient(10px 10px at 8px 8px, rgba(79,70,229,.5), transparent 60%),
  radial-gradient(10px 10px at 48px 28px, rgba(6,182,212,.5), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  border:1px dashed rgba(255,255,255,.08); margin:.6rem 0
}
.features li{margin:.4rem 0}
footer{
  border-top:1px solid var(--border); color:var(--muted); padding:2.2rem 0 4rem; margin-top:2rem
}
.cta-banner{
  margin-top:2rem; padding:1.6rem; border:1px solid var(--border); border-radius:18px;
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(6,182,212,.08));
}
.small{font-size:.9rem; color:var(--muted)}
input, textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--border); background:#0b1226; color:var(--text)
}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
form .row > *{min-width:0}
form button{margin-top:.6rem}
.notice{padding:.75rem 1rem; border-radius:12px; background:#0b1226; border:1px solid var(--border); color:var(--muted)}