:root{
  --bg:#0b0f16; --text:#e7edf5; --muted:#9aa7b5; --ring:rgba(255,255,255,.12);
  --card:#101725; --card-2:#0c1220; --brand-start:#60a5fa; --brand-end:#34d399;
  --safe1:#34d399; --safe2:#bbf7d0; --cau1:#fbbf24; --cau2:#fef3c7; --risk1:#f87171; --risk2:#ffe4e6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(52,211,153,.12), transparent 60%),
    radial-gradient(1200px 800px at -10% 10%, rgba(96,165,250,.20), transparent 60%),
    linear-gradient(180deg,#0b0f16,#0a0e15);
  background-attachment:fixed;
}
a{text-decoration:none; color:inherit}
.container{max-width:1080px; margin:0 auto; padding:24px}
header{position:sticky; top:0; background:rgba(11,15,22,.66); backdrop-filter:blur(8px); border-bottom:1px solid var(--ring); z-index:5}
nav{display:flex; justify-content:space-between; align-items:center; min-height:88px}
.brand{display:flex; align-items:center; gap:12px}
.brand-icon-img{height:64px; width:auto; display:block}
.brand-wordmark-img{height:30px; width:auto; display:block}
.links{display:flex; gap:18px}
.links a{padding:10px 12px; border-radius:10px}
.links a:hover{background:rgba(255,255,255,.04)}

.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:56px 0}
.kicker{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#a8b3c3}
h1{font-size:clamp(36px,6vw,64px); line-height:1.05; margin:.1em 0; background:linear-gradient(90deg,#fff,#cce7ff); -webkit-background-clip:text; background-clip:text; color:transparent}
p{font-size:clamp(16px,2.4vw,20px); color:var(--muted); margin:.6em 0 1.2em}

.input{appearance:none;outline:none;border:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:14px 16px;border-radius:12px;color:#e7edf5;min-width:260px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:12px; padding:18px 26px; border-radius:16px; border:1px solid var(--ring);
     background:linear-gradient(90deg,var(--brand-start),var(--brand-end)); color:#08111a; font-weight:800; font-size:1.15rem; text-decoration:none;
     box-shadow:0 12px 36px rgba(0,0,0,.32), 0 0 0 3px rgba(52,211,153,.22), 0 0 40px rgba(96,165,250,.28)}
.btn.secondary{background:transparent; color:var(--text)}

.device{perspective:1200px}
.phone{width:min(100%,380px); aspect-ratio:1125/2436; border-radius:36px; border:1px solid #1a2233; background:linear-gradient(180deg,#0f1726,#0a121f);
  padding:14px; position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 30px 60px rgba(0,0,0,.45); transform:rotateY(-8deg) rotateX(2deg)}
.screen{width:100%; height:100%; border-radius:28px; overflow:hidden;
  background:radial-gradient(120% 100% at 110% -10%, rgba(52,211,153,.2), transparent 60%),
             radial-gradient(150% 120% at -10% 60%, rgba(96,165,250,.24), transparent 60%), #0a0f18; border:1px solid #182237}
.mock{padding:18px; display:flex; flex-direction:column; gap:16px}
.mock .row{display:flex; justify-content:space-between; align-items:center; background:var(--card); border:1px solid #182237; border-radius:16px; padding:14px 16px}
.ticker{font-weight:800; letter-spacing:.5px}
.mos-badge{padding:6px 10px;border-radius:999px;font-weight:600;background:rgba(255,255,255,.06); color:#cbd5e1;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.mos-safe{background:rgba(255,255,255,.06); color:#cbd5e1}
.mos-caution{background:rgba(255,255,255,.06); color:#cbd5e1}
.mos-risk{background:rgba(255,255,255,.06); color:#cbd5e1}

section{padding:56px 0; border-top:1px solid var(--ring)}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card-2); border:1px solid #182237; border-radius:16px; padding:18px}
.muted{color:var(--muted)}
.feature{display:flex; gap:12px; align-items:flex-start}

.pricing{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.plan{background:var(--card); border:1px solid #182237; border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:10px}
.price{font-size:32px; font-weight:900}
footer{padding:40px 0; color:var(--muted); text-align:center}

@media (max-width: 860px){
  .hero{grid-template-columns:1fr; gap:24px}
  .device{order:2}
}