*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#0b1220;color:#cbd5e1;font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:#38bdf8;text-decoration:none}
a:hover{color:#7dd3fc}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
.mono{font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace;letter-spacing:.02em}
.ta-r{text-align:right}

/* header */
.hd{background:#1e293b;border-bottom:1px solid #334155;position:sticky;top:0;z-index:50;height:56px}
.hd-wrap{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:56px;gap:32px}
.logo{display:flex;align-items:center;gap:8px;color:#f1f5f9;font-weight:700;font-size:16px}
.logo span{letter-spacing:.04em}
.nv{display:flex;gap:24px;flex:1}
.nv a{color:#94a3b8;font-size:13px;letter-spacing:.02em;padding:4px 0;border-bottom:1px solid transparent;transition:.2s}
.nv a:hover{color:#38bdf8;border-bottom-color:#38bdf8}
.cta{background:#38bdf8;color:#0b1220;padding:8px 16px;border-radius:4px;font-weight:600;font-size:13px;transition:.2s}
.cta:hover{background:#7dd3fc;color:#0b1220}

/* hero */
.hero{background:linear-gradient(180deg,#1e293b 0%,#0f1729 100%);padding:64px 24px;border-bottom:1px solid #334155}
.hero-wrap{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.status-row{display:flex;align-items:center;gap:10px;color:#64748b;font-size:12px;margin-bottom:16px}
.status-row .sep{color:#334155}
.hero h1{color:#f1f5f9;font-size:44px;font-weight:700;line-height:1.2;letter-spacing:-.01em;margin-bottom:16px}
.hero h1 .acc{color:#38bdf8;font-size:32px;font-weight:600}
.hero .lede{color:#94a3b8;font-size:15px;line-height:1.75;margin-bottom:24px;max-width:540px}
.cta-row{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 22px;border-radius:6px;font-weight:600;font-size:13px;transition:.2s;letter-spacing:.02em;border:1px solid transparent;cursor:pointer}
.btn-primary{background:#38bdf8;color:#0b1220;border-color:#38bdf8}
.btn-primary:hover{background:#7dd3fc;border-color:#7dd3fc;color:#0b1220}
.btn-ghost{border-color:#334155;color:#cbd5e1;background:transparent}
.btn-ghost:hover{border-color:#38bdf8;color:#38bdf8}
.btn-sm{padding:8px 18px;font-size:12px}
.btn-block{display:block;text-align:center;width:100%}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:20px 0;border-top:1px solid #334155;border-bottom:1px solid #334155;margin-bottom:20px}
.stat-num{color:#38bdf8;font-size:28px;font-weight:700;line-height:1}
.stat-lab{color:#64748b;font-size:11px;margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
.tag-row{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:4px 12px;border:1px solid #334155;border-radius:4px;color:#94a3b8;font-size:11px;background:#1e293b}
.hero-r img{width:100%;max-width:560px;margin-left:auto}

/* dot */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#64748b;margin-right:6px;vertical-align:middle}
.dot.live{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5)}
.dot.warn{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.4)}

/* sec */
.sec{padding:64px 24px;border-bottom:1px solid #1e293b}
.sec-alt{background:#0f172a}
.sec-wrap{max-width:1200px;margin:0 auto}
.sec-head{margin-bottom:32px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;border-bottom:1px solid #1e293b;padding-bottom:16px}
.sec-head h2{color:#f1f5f9;font-size:24px;font-weight:700;letter-spacing:.01em}
.sec-sub{color:#64748b;font-size:13px}

/* table */
.tbl-wrap{background:#0f172a;border:1px solid #1e293b;border-radius:6px;overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead{background:#1e293b}
.tbl th{padding:12px 16px;text-align:left;color:#94a3b8;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #334155}
.tbl td{padding:12px 16px;border-bottom:1px solid #1e293b;color:#cbd5e1}
.tbl tbody tr:hover{background:#1e293b}
.tbl tbody tr:last-child td{border-bottom:none}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.steps:before{content:"";position:absolute;top:32px;left:12%;right:12%;height:1px;background:#1e293b;z-index:0}
.step{position:relative;text-align:center;z-index:1}
.step-num{width:64px;height:64px;border-radius:50%;background:#1e293b;border:2px solid #38bdf8;color:#38bdf8;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.step-body h3{color:#f1f5f9;font-size:17px;margin-bottom:8px;font-weight:600}
.step-body p{color:#94a3b8;font-size:13px;line-height:1.7;max-width:280px;margin:0 auto}

/* devices */
.dv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dv{background:#0f172a;border:1px solid #1e293b;border-radius:8px;padding:24px 20px;text-align:center;transition:.2s}
.dv:hover{border-color:#38bdf8;transform:translateY(-3px)}
.dv img{margin:0 auto 16px}
.dv-name{color:#f1f5f9;font-size:16px;font-weight:600;margin-bottom:4px}
.dv-ver{color:#64748b;font-size:11px;margin-bottom:16px}

/* spec */
.spec-list{display:grid;gap:8px}
.spec{display:grid;grid-template-columns:140px 1fr 80px;gap:20px;align-items:center;padding:18px 20px;background:#0f172a;border:1px solid #1e293b;border-radius:6px;transition:.2s}
.spec:hover{border-color:#38bdf8}
.spec-k{color:#38bdf8;font-size:12px;font-weight:600;letter-spacing:.1em}
.spec-v{color:#cbd5e1;font-size:14px}
.spec-t{text-align:right;opacity:.7}

/* pricing */
.pri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pri{background:#0f172a;border:1px solid #1e293b;border-radius:8px;padding:24px 20px;position:relative;transition:.2s}
.pri:hover{border-color:#38bdf8}
.pri-hot{border-color:#38bdf8;background:linear-gradient(180deg,#0f172a 0%,rgba(56,189,248,.05) 100%)}
.pri-name{color:#94a3b8;font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.pri-bdg{background:#38bdf8;color:#0b1220;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:700}
.pri-amt{color:#f1f5f9;font-size:32px;font-weight:700;margin-bottom:16px;line-height:1}
.pri-u{color:#64748b;font-size:12px;font-weight:400;margin-left:4px}
.pri ul{margin-bottom:20px}
.pri li{color:#94a3b8;font-size:12px;padding:6px 0;border-bottom:1px dashed #1e293b}
.pri li:last-child{border-bottom:none}

/* footer */
.ft{background:#0a0f1c;border-top:1px solid #1e293b;padding:48px 24px 0}
.ft-wrap{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1.5fr;gap:48px;padding-bottom:32px;border-bottom:1px solid #1e293b}
.ft-col h4{color:#f1f5f9;font-size:14px;margin-bottom:16px;font-weight:600}
.ft-p{color:#64748b;font-size:13px;line-height:1.8;margin-bottom:12px}
.ft-mn{color:#38bdf8;font-size:11px;letter-spacing:.1em}
.ft-ul li{color:#94a3b8;font-size:13px;padding:5px 0}
.ft-link{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 16px}
.ft-link a{color:#64748b;font-size:12px;transition:.2s}
.ft-link a:hover{color:#38bdf8}
.ft-bot{max-width:1200px;margin:0 auto;padding:20px 0;display:flex;justify-content:space-between;color:#475569;font-size:12px}
.ft-bot a{color:#64748b}

@media (max-width:900px){
  .hero-wrap,.sec-head{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .hero h1 .acc{font-size:22px}
  .stat-grid,.steps,.dv-grid,.pri-grid{grid-template-columns:repeat(2,1fr)}
  .steps:before{display:none}
  .ft-wrap{grid-template-columns:1fr}
  .nv{display:none}
  .spec{grid-template-columns:1fr;gap:8px}
  .spec-t{text-align:left}
  .tbl th,.tbl td{padding:10px 8px;font-size:12px}
}