:root{
  --brand:#0B5FFF;
  --brand-600:#0A54E6;
  --bg:#0b1220;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
  --ring: rgba(11,95,255,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background: linear-gradient(180deg, #050914 0%, #0b1220 100%);
  color: var(--text);
  line-height: 1.6;
}

.container{max-width:1120px;margin:0 auto;padding:0 20px}

header{
  position: sticky; top:0; z-index: 40;
  backdrop-filter: blur(8px);
  background: rgba(5, 9, 20, .6);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.nav a{color:var(--text); text-decoration:none; opacity:.9}
.nav .cta{padding:10px 16px; background:var(--brand); border-radius:12px; color:white; font-weight:600; border:1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(11,95,255,.25)}
.nav .cta:hover{background:var(--brand-600)}

.hero{
  padding:72px 0 36px;
}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; background:rgba(11,95,255,.12);
  border:1px solid rgba(11,95,255,.25); color:#cfe0ff; border-radius:999px;
  font-size:14px;
}
.hgrid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center;
}
h1{
  font-size:40px; line-height:1.15; margin:16px 0 12px;
}
.sub{font-size:16px; color:#cbd5e1}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px}
.kpi{background:var(--card); border:1px solid rgba(255,255,255,.06); padding:16px; border-radius:16px}
.kpi .big{font-size:24px; font-weight:800}
.kpi .small{font-size:12px; color:var(--muted)}

.card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

.section{padding:28px 0}
.section h2{font-size:22px; margin:0 0 12px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.list{margin:0; padding-left:18px}
.list li{margin:6px 0}

.tag{display:inline-block; font-size:12px; padding:4px 8px; background:#12223d; color:#b6caff; border:1px solid rgba(255,255,255,.06); border-radius:999px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; background:var(--brand); color:white; border:none; border-radius:14px; font-weight:700; cursor:pointer; text-decoration:none; border:1px solid rgba(255,255,255,.08)}
.btn.secondary{background:#12223d; color:#cfe0ff}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.12); color:#cfe0ff}
.btn:focus{outline:2px solid var(--ring)}

.feature{display:flex; gap:12px}
.feature .icon{width:36px; height:36px; border-radius:10px; background:#0e1b33; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.06)}

.timeline{position:relative; padding-left:16px}
.timeline::before{content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:rgba(255,255,255,.08)}
.ti{position:relative; padding-left:24px; margin:14px 0}
.ti::before{content:""; position:absolute; left:0; top:8px; width:12px; height:12px; background:var(--brand); border-radius:999px; box-shadow:0 0 0 4px rgba(11,95,255,.2)}

.faq-item{border:1px solid rgba(255,255,255,.06); border-radius:14px; background:#0e1a2e; overflow:hidden}
.faq-q{padding:14px 16px; cursor:pointer; display:flex; align-items:center; justify-content:space-between}
.faq-a{padding:0 16px 14px; display:none; color:#cbd5e1}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q{background:rgba(255,255,255,.03)}

footer{padding:24px 0; color:#94a3b8; border-top:1px solid rgba(255,255,255,.06); margin-top:40px}

.notice{font-size:12px; color:#a8b3c7}

.brand-swatches{display:flex; gap:10px; flex-wrap:wrap}
.swatch{width:42px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.1)}

@media (max-width: 920px){
 .hgrid{grid-template-columns:1fr}
 .kpis{grid-template-columns:repeat(2,1fr)}
 .grid2{grid-template-columns:1fr}
 .grid3{grid-template-columns:repeat(2,1fr)}
 h1{font-size:32px}
}