:root{--p:#256FED;--pd:#1D5FE0;--pdd:#103EAA;--pc:#E3EDFF;--feather:#99C3FA;--sky:#EAF3FF;--cloud:#F1F3F9;--accent:#F09642;--ink:#111438;--muted:#6B7280}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);line-height:1.7;background:#fff}
a{color:var(--p);text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:9;background:rgba(255,255,255,.95);border-bottom:1px solid var(--pc)}
header .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
header nav a{margin-left:22px;color:var(--ink)}header nav a:hover{color:var(--p)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--p);letter-spacing:2px}
.logo img{width:36px;height:36px;border-radius:9px}
.logo small{font-size:11px;color:var(--muted);font-weight:400;letter-spacing:0}
.hero{background:linear-gradient(135deg,#3B82F6,#1D5FE0);color:#fff;overflow:hidden}
.hero .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:56px;padding-bottom:56px}
.hero h1{font-size:46px;letter-spacing:3px}
.hero .slogan{font-size:24px;font-weight:700;margin-top:6px}
.hero p.sub{font-size:17px;opacity:.92;margin:10px 0 28px}
.hero img{width:360px;max-width:42%;border-radius:50%;filter:drop-shadow(0 12px 30px rgba(16,62,170,.35))}
.btn{display:inline-block;background:#fff;color:var(--p);padding:12px 34px;border-radius:24px;font-size:17px;font-weight:700}
.btn.soon{background:var(--pc);color:var(--pd);cursor:default}
section{padding:64px 0}section h2{text-align:center;font-size:28px;margin-bottom:32px;color:var(--ink)}
section h2::after{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--p);margin:10px auto 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--pc);border-radius:16px;padding:24px;box-shadow:0 4px 14px rgba(37,111,237,.06)}
.card h3{margin-bottom:8px;color:var(--pdd)}
.card .ico{display:inline-flex;width:40px;height:40px;border-radius:12px;background:var(--pc);color:var(--p);align-items:center;justify-content:center;font-weight:700;margin-bottom:12px}
.alt{background:var(--sky)}
.tags{text-align:center;margin-top:28px}.tags span{display:inline-block;background:#fff;color:var(--pd);border:1px solid var(--feather);border-radius:16px;padding:4px 14px;margin:4px;font-size:14px}
.faq dt{font-weight:700;margin-top:18px;color:var(--pdd)}.faq dd{color:#444}
.soonbox{text-align:center}.soonbox img{width:96px;border-radius:24px;margin-bottom:12px}
footer{background:var(--pdd);color:#C6DCFA;padding:28px 0;text-align:center;font-size:14px}
footer a{color:#fff;margin:0 8px}
.todo{color:#d9534f}
@media(max-width:700px){.hero .wrap{flex-direction:column-reverse;text-align:center}.hero img{max-width:70%}header nav a{margin-left:12px;font-size:14px}}