:root{
  --ink:#0f0d15; --ink-2:#403c4d; --ink-3:#6e6980; --ink-4:#9c98a8;
  --bg:#ffffff; --bg-soft:#faf9fc; --line:#eceaf2; --line-2:#f4f2f8;
  --accent:#6d3df0; --accent-2:#8b5cf6; --accent-soft:#f3eeff;
  --radius:16px;
  --max:1120px; --prose:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}
.prose{max-width:var(--prose)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line-2)}
.nav-in{display:flex; align-items:center; height:68px; gap:36px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-.4px}
.brand .mark{width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid; place-items:center; color:#fff; font-size:14px; font-weight:800; letter-spacing:0}
.nav-links{display:flex; gap:28px; font-size:14.5px; color:var(--ink-2); font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px;
  border-radius:10px; font-size:14.5px; font-weight:600; transition:.18s}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:#231f30}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{color:var(--ink)}
.btn-lg{height:48px; padding:0 24px; font-size:15.5px; border-radius:12px}
.btn-line{border:1px solid var(--line); background:#fff; color:var(--ink)}
.btn-line:hover{border-color:#d9d5e6}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:112px 0 96px; background:
  radial-gradient(900px 420px at 72% -8%, #efe8ff 0%, rgba(239,232,255,0) 62%),
  radial-gradient(700px 360px at 8% 4%, #f3f7ff 0%, rgba(243,247,255,0) 60%);}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center}
.hero-center{text-align:center; max-width:780px; margin:0 auto}
.hero-center h1{font-size:62px; letter-spacing:-2.6px}
.hero-center p.lede{margin-left:auto; margin-right:auto; max-width:33em; font-size:19px}
.hero-center .hero-actions{justify-content:center}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; letter-spacing:.1px;
  color:var(--accent); background:var(--accent-soft); border:1px solid #e4daff; border-radius:99px; padding:6px 14px}
.eyebrow .dot{width:6px; height:6px; border-radius:99px; background:var(--accent)}
h1{margin:22px 0 0; font-size:58px; line-height:1.08; letter-spacing:-2.2px; font-weight:800}
.hero p.lede{margin:22px 0 0; font-size:18.5px; line-height:1.7; color:var(--ink-2); max-width:30em}
.hero-actions{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.hero-note{margin-top:20px; font-size:13.5px; color:var(--ink-4)}

/* phone mock */
.device{width:300px; margin:0 auto; border-radius:40px; padding:11px; background:#17141f;
  box-shadow:0 36px 90px -24px rgba(29,16,66,.42), 0 2px 10px rgba(0,0,0,.14)}
.screen{border-radius:30px; background:#0d0b12; padding:20px 16px 18px; color:#f3f2f6}
.s-eyebrow{font-size:9.5px; letter-spacing:1.3px; color:#8e8a9c; font-weight:600}
.s-big{font-size:34px; font-weight:700; letter-spacing:-1.4px; margin-top:4px; display:flex; align-items:baseline; gap:5px}
.s-big span{font-size:14px; color:#9b97a8; font-weight:500}
.s-sub{font-size:10.5px; color:#8e8a9c; margin-top:5px}
.s-tabs{display:flex; gap:3px; background:#1a1722; border-radius:9px; padding:3px; margin:14px 0 12px}
.s-tab{flex:1; text-align:center; font-size:10px; font-weight:600; padding:6px 0; border-radius:7px; color:#8e8a9c}
.s-tab.on{background:var(--accent-2); color:#fff}
.s-cards{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.s-card{background:#15121c; border:1px solid #221e2d; border-radius:11px; padding:8px}
.s-thumb{height:46px; border-radius:7px; display:grid; grid-template-columns:1fr 1fr; gap:2px; overflow:hidden}
.s-thumb i{display:block; background:#262232}
.s-title{font-size:10.5px; font-weight:600; margin-top:7px}
.s-meta{font-size:9px; color:#8e8a9c; margin-top:2px}

/* product module */
.module{display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:44px 46px}
.module .tag{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:650;
  color:var(--accent); background:var(--accent-soft); border-radius:99px; padding:5px 12px}
.module h3{font-size:27px; letter-spacing:-1px; margin:16px 0 0}
.module p{margin:14px 0 0; color:var(--ink-2); font-size:16px; line-height:1.72; max-width:34em}
.module .device{width:260px}
.next{margin-top:24px; background:var(--bg-soft); border:1px dashed #ddd8ea; border-radius:22px; padding:38px 46px}
.next h3{font-size:20px}
.next p{margin:12px 0 0; color:var(--ink-3); font-size:15.5px; line-height:1.74; max-width:46em}

/* ---------- sections ---------- */
section{padding:92px 0}
.sec-soft{background:var(--bg-soft); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.kicker{font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent)}
h2{margin:14px 0 0; font-size:38px; line-height:1.18; letter-spacing:-1.3px; font-weight:800}
h3{margin:0; font-size:17.5px; letter-spacing:-.3px; font-weight:700}
.sec-lede{margin:18px 0 0; font-size:17.5px; color:var(--ink-2); max-width:34em; line-height:1.72}
.sec-head{margin-bottom:54px}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
.feature{padding:30px; background:#fff; border:1px solid var(--line); border-radius:var(--radius)}
.sec-soft .feature{background:#fff}
.ficon{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:18px}
.ficon i{display:block; border-radius:3px; background:var(--accent)}
.feature p{margin:10px 0 0; font-size:15px; color:var(--ink-3); line-height:1.7}

.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.bullets{margin:26px 0 0; padding:0; list-style:none}
.bullets li{position:relative; padding-left:26px; margin-bottom:13px; color:var(--ink-2); font-size:15.5px}
.bullets li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:2px;
  background:var(--accent)}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.stat{padding:30px 28px; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block; font-size:30px; letter-spacing:-1px; font-weight:800}
.stat span{display:block; margin-top:5px; font-size:14px; color:var(--ink-3)}

/* cta */
.cta{background:var(--ink); color:#fff; border-radius:22px; padding:56px 52px; display:flex; gap:40px;
  align-items:center; justify-content:space-between; flex-wrap:wrap}
.cta h2{margin:0; font-size:30px; letter-spacing:-1px; color:#fff}
.cta p{margin:12px 0 0; color:#a8a3b8; font-size:16px}
.cta .btn-primary{background:#fff; color:var(--ink)}
.cta .btn-primary:hover{background:#eceaf2}

/* ---------- doc pages ---------- */
.page-head{padding:72px 0 10px; background:
  radial-gradient(700px 300px at 20% -20%, #f1ebff 0%, rgba(241,235,255,0) 65%)}
.page-head h1{font-size:46px; letter-spacing:-1.8px; margin:16px 0 0}
.page-head .meta{margin-top:16px; color:var(--ink-4); font-size:14.5px}
.doc{padding:48px 0 20px}
.doc h2{font-size:21px; letter-spacing:-.4px; margin:40px 0 12px}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 14px; color:var(--ink-2); font-size:15.5px; line-height:1.78}
.doc ul{margin:0 0 16px; padding-left:22px; color:var(--ink-2); font-size:15.5px; line-height:1.78}
.doc li{margin-bottom:7px}
.doc .en{color:var(--ink-4); font-size:14.5px}
.doc a{color:var(--accent); font-weight:500}
.doc a:hover{text-decoration:underline}

.facts{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.fact{display:grid; grid-template-columns:230px 1fr; gap:20px; padding:16px 22px; border-bottom:1px solid var(--line-2); font-size:15px}
.fact:last-child{border-bottom:0}
.fact dt{color:var(--ink-4); margin:0}
.fact dd{margin:0}
.fact dd b{font-weight:650}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:64px 0 48px; background:var(--bg-soft)}
.f-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:44px}
.f-brand p{margin:14px 0 0; color:var(--ink-3); font-size:14.5px; max-width:30em; line-height:1.7}
.f-col h4{margin:0 0 16px; font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-4); font-weight:700}
.f-col a{display:block; margin-bottom:11px; font-size:14.5px; color:var(--ink-2)}
.f-col a:hover{color:var(--accent)}
.f-legal{border-top:1px solid var(--line); padding-top:26px; font-size:13px; color:var(--ink-4); line-height:1.9}
.f-legal b{color:var(--ink-3); font-weight:600}

@media (max-width:920px){
  .module{grid-template-columns:1fr; gap:36px; padding:32px 26px}
  .module .device{margin:0 auto}
  .hero-center h1{font-size:40px; letter-spacing:-1.6px}
  .next{padding:28px 26px}
  .hero-grid,.split{grid-template-columns:1fr; gap:48px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0; border-bottom:1px solid var(--line)}
  .f-top{grid-template-columns:1fr 1fr; gap:30px}
  h1{font-size:42px; letter-spacing:-1.5px}
  h2{font-size:30px; letter-spacing:-1px}
  section{padding:68px 0}
  .nav-links{display:none}
  .fact{grid-template-columns:1fr; gap:4px}
  .cta{padding:40px 30px}
}