:root{
  --bg:#0b0c10;
  --panel:#0e1116;
  --card:#0c0f14;
  --text:#e8eaed;
  --muted:#a2a8b3;
  --accent:#9be7ff; /* cyan */
  --accent2:#d4bfff; /* lilac */
  --ring:rgba(255,255,255,.10);
  --grad: radial-gradient(1200px 600px at 10% -10%, rgba(155,231,255,.10), transparent 60%),
          radial-gradient(900px 500px at 110% 10%, rgba(212,191,255,.10), transparent 60%);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.6; background-image:var(--grad);
}
a{color:inherit; text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:24px}
nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(8,10,14,.55); border-bottom:1px solid var(--ring);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:600; letter-spacing:.4px}
.brand img{width:34px; height:34px; border-radius:8px}
.menu{display:flex; gap:18px; flex-wrap:wrap}
.menu a{position:relative; padding:12px 8px; color:#dfe3ea}
.menu a:after{
  content:""; position:absolute; left:8px; right:8px; bottom:6px; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2)); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.menu a:hover:after{transform:scaleX(1)}
.btn, .btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px; border:1px solid var(--ring);
}
.btn{ background:linear-gradient(180deg,#121623,#0c1018); }
.btn:hover{ box-shadow:0 0 0 8px rgba(155,231,255,.06) inset }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--ring); color:var(--muted); font-size:.82rem;
  background: linear-gradient(180deg, #11151f, #0c1016);
}
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; padding:56px 0 18px }
.hero h1{ font-size:clamp(32px,5.6vw,60px); line-height:1.06; margin:8px 0 12px }
.kicker{ letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-size:.8rem }
.lede{ color:#b9c0cc; max-width:720px }
.hero-card{
  border:1px solid var(--ring); border-radius:18px; padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow:0 10px 50px rgba(0,0,0,.25);
}
.hero-decor{
  height:100%; border:1px solid var(--ring); border-radius:18px; position:relative;
  background: radial-gradient(600px 300px at 30% 0%, rgba(155,231,255,.08), transparent 60%),
              radial-gradient(600px 300px at 70% 100%, rgba(212,191,255,.08), transparent 60%);
  overflow:hidden;
}
.pulse{
  position:absolute; width:280px; height:280px; top:14%; left:16%;
  background:radial-gradient(circle, rgba(155,231,255,.35), rgba(155,231,255,0) 60%);
  filter:blur(12px); animation: float 7s ease-in-out infinite alternate;
}
.pulse.two{ top:58%; left:60%; background:radial-gradient(circle, rgba(212,191,255,.35), rgba(212,191,255,0) 60%); animation-duration:9.5s }
@keyframes float { from{ transform:translateY(-10px)} to{ transform:translateY(10px)} }

.section{ margin:36px 0 }
h2{ font-size:clamp(22px,3.4vw,32px); margin:0 0 10px }
.grid{ display:grid; gap:16px }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.card{
  border:1px solid var(--ring); border-radius:18px; padding:18px;
  background:linear-gradient(180deg, #0f131b, #0b0f15);
}
.feature{
  border:1px solid var(--ring); border-radius:16px; padding:14px 16px;
  display:flex; gap:12px; align-items:flex-start;
  background:linear-gradient(180deg, #101521, #0b1017);
}
.icon{ width:22px; height:22px; margin-top:2px; opacity:.95 }
.muted{ color:var(--muted) }
.marquee{
  display:flex; overflow:auto; gap:12px; padding:10px 0 2px; scrollbar-width:none;
}
.marquee::-webkit-scrollbar{ display:none }
.chip{ border:1px solid var(--ring); border-radius:999px; padding:8px 12px; color:#cdd3dc; white-space:nowrap; background:#0b0f15 }

.timeline{ position:relative; padding-left:24px }
.timeline::before{
  content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:linear-gradient(var(--accent), var(--accent2));
  opacity:.5;
}
.step{ position:relative; margin:0 0 12px }
.step::before{
  content:""; position:absolute; left:-3px; top:6px; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(180deg, var(--accent), var(--accent2)); box-shadow:0 0 0 4px rgba(155,231,255,.15);
}
.cta{
  border:1px solid var(--ring); border-radius:18px; padding:18px;
  background:linear-gradient(180deg, #101523, #0b0f16);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
footer{ margin:40px 0 20px; color:var(--muted); text-align:center }
@media(max-width:960px){
  .hero{ grid-template-columns:1fr }
  .grid-2, .grid-3{ grid-template-columns:1fr }
}
.reveal{ opacity:0; transform:translateY(10px); transition:all .6s ease }
.reveal.in{ opacity:1; transform:none }