:root{
  --bg:#06080f; --fg:#e6edf3; --muted:#96a0ad;
  --blue:#3b82f6; --violet:#8b5cf6;
  --card:#0b1020; --card2:#0e1628; --border:rgba(255,255,255,.08);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  background:radial-gradient(1000px 400px at 70% -10%, rgba(59,130,246,.25), transparent 60%),
             radial-gradient(900px 500px at -10% 20%, rgba(139,92,246,.2), transparent 70%), #06080f; color:var(--fg)}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 22px}

/* NAV */
header{position:sticky;top:0;z-index:1000;background:rgba(6,8,15,.65);backdrop-filter:blur(10px) saturate(150%);border-bottom:1px solid var(--border)}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{height:92px;width:auto;display:block}
nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center}
.pill{padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--violet));color:white;border:0;
  box-shadow:0 10px 30px rgba(59,130,246,.45)}

/* HERO */
.hero{padding:84px 0 56px;background: radial-gradient(800px 400px at 95% 0%, rgba(96,165,250,.18), transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:24px}
.kicker{color:#9fb4ff;text-transform:uppercase;font-size:12px;letter-spacing:.14em;font-weight:700}
h1{font-size:56px;line-height:1.06;margin:10px 0 12px}
.lead{color:var(--muted);max-width:560px;font-size:18px}
.ctas{display:flex;gap:14px;align-items:center;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.04)}
.btn.glow{border:0;background:linear-gradient(135deg,var(--blue),var(--violet));color:white;box-shadow:0 16px 40px rgba(59,130,246,.45)}

.hero-right{display:grid;place-items:center}
.phone-stage{position:relative;filter: drop-shadow(0 40px 70px rgba(0,0,0,.6));}
.phone{border-radius:28px;overflow:hidden}
.reflect{transform: scaleY(-1); opacity:.35; margin-top: -6px; filter: blur(0.5px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
}

/* DARK BAND (replaces white) */
.band{background:var(--card);color:var(--fg);padding:48px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.band .kicker{color:#8aa0ff}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:16px}
.card{background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 12px 30px rgba(2,6,23,.25)}
.card .icon{font-size:20px}
.card h3{margin:8px 0 6px}
.card p{color:var(--muted)}

footer{padding:28px 0;border-top:1px solid var(--border);color:#a8b1bd}
@media(max-width:980px){.hero .wrap{grid-template-columns:1fr} h1{font-size:44px}}
@media(max-width:640px){.features{grid-template-columns:1fr}}