/* ============================================================================
   MuMu 仿官网设计系统（母版 https://mumu.163.com）
   主色 #3485ff · 深色渐变 hero · 白/浅蓝交替区块 · 设备样机 · 游戏海报 · 深色页脚
   ============================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{--brand:#3485ff;--brand-d:#1f6fff;--brand-2:#007aff;--ink:#10131a;--muted:#5b6577;--line:#e6ebf3;--bg:#fff;--soft:#eef5ff;--soft2:#f4f8ff;--dark:#0b1326;--dark2:#16203a}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.68;font-size:16px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-d)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.01em}
section{position:relative}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border-radius:999px;background:var(--brand);color:#fff!important;font-weight:600;font-size:15px;border:0;cursor:pointer;transition:.18s;white-space:nowrap}
.btn:hover{background:var(--brand-d);transform:translateY(-1px);box-shadow:0 8px 22px rgba(52,133,255,.32)}
.btn.lg{padding:15px 38px;font-size:17px}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff!important;backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(255,255,255,.2)}
.btn.out{background:#fff;color:var(--brand)!important;border:1.5px solid var(--brand)}
.btn.out:hover{background:var(--soft)}

/* ---------- header (dark, sticky) ---------- */
.site-hd{position:sticky;top:0;z-index:50;background:rgba(9,14,28,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07)}
.site-hd .bar{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center}
.brand img{height:22px;width:auto}
.nav{display:flex;gap:26px;flex:1}
.nav a{color:#d7def0;font-size:15px;font-weight:500}
.nav a:hover{color:#fff}
.site-hd .btn{padding:8px 20px;font-size:14px}

/* ---------- hero (dark gradient + device mockup) ---------- */
.hero{background:radial-gradient(1200px 600px at 78% -10%,rgba(52,133,255,.42),transparent 60%),linear-gradient(160deg,#0a1226 0%,#101b39 46%,#16264d 100%);color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:32px;align-items:center;padding-top:64px;padding-bottom:72px}
.hero h1{font-size:46px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.hero .sub{font-size:20px;color:#aab8d8;font-weight:600;margin-bottom:18px}
.hero .tags{display:flex;flex-wrap:wrap;gap:8px 18px;color:#9fb0d4;font-size:14px;margin-bottom:26px}
.hero .tags span{display:inline-flex;align-items:center;gap:6px}
.hero .tags svg{color:var(--brand)}
.hero .cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero .ver{margin-top:14px;color:#8ea0c6;font-size:13px}
.hero-art{position:relative}
.hero-art img{border-radius:14px;width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.hero-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;background:rgba(52,133,255,.16);border:1px solid rgba(52,133,255,.4);color:#bcd2ff;font-size:13px;font-weight:600;margin-bottom:18px}

/* ---------- platform cards (float under hero) ---------- */
.platforms{background:linear-gradient(180deg,#16264d 0%,#16264d 50%,#fff 50%,#fff 100%)}
.platforms .wrap{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:0 24px}
.pcard{flex:1;min-width:150px;max-width:230px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px;text-align:center;box-shadow:0 16px 40px rgba(15,32,80,.12)}
.pcard .ic{width:46px;height:46px;margin:0 auto 12px;color:var(--brand)}
.pcard b{display:block;font-size:16px;margin-bottom:4px}
.pcard small{color:var(--muted);font-size:13px}

/* ---------- generic section ---------- */
.sec{padding:74px 0}
.sec.soft{background:var(--soft)}
.sec.soft2{background:linear-gradient(180deg,#fff,var(--soft2))}
.sec.dark{background:radial-gradient(900px 500px at 20% 0%,rgba(52,133,255,.22),transparent 60%),linear-gradient(180deg,#0c1530,#0a1124);color:#fff}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.dark .lead{color:#aab8d8}
.shead{text-align:center;max-width:760px;margin:0 auto 40px}
.shead .kicker{display:inline-block;color:var(--brand);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.shead h2{font-size:34px;font-weight:800}
.shead p{color:var(--muted);font-size:17px;margin-top:12px}
.sec.dark .shead p{color:#9fb0d4}

/* ---------- feature icon row ---------- */
.featrow{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.featrow .fitem{display:flex;flex-direction:column;align-items:center;gap:10px;width:150px;text-align:center}
.featrow .fic{width:56px;height:56px;border-radius:16px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.featrow b{font-size:15px}

/* ---------- feature showcase (image + copy) ---------- */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.showcase.rev{direction:rtl}.showcase.rev>*{direction:ltr}
.showcase .copy h3{font-size:27px;font-weight:800;margin-bottom:8px}
.showcase .copy .answer{font-size:17px;color:var(--ink)}
.showcase .shot{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(15,32,80,.16);border:1px solid var(--line)}
.sec.dark .showcase .shot{border-color:rgba(255,255,255,.12)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:.2s}
.fbox:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,32,80,.12);border-color:#cfe0ff}
.fbox .fic{width:48px;height:48px;border-radius:13px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--brand);margin-bottom:16px}
.fbox h3{font-size:19px;margin-bottom:8px}
.fbox p{color:var(--muted);font-size:15px}

/* ---------- game poster grid ---------- */
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gcard{border-radius:16px;overflow:hidden;position:relative;background:#101a33;border:1px solid rgba(255,255,255,.08)}
.gcard img{aspect-ratio:288/370;object-fit:cover;width:100%;transition:.3s}
.gcard:hover img{transform:scale(1.05)}
.gcard b{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-size:15px;background:linear-gradient(transparent,rgba(0,0,0,.78))}

/* ---------- article (pillar/blog/faq/download body) ---------- */
.article{padding:48px 0 64px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--brand)}
.article h1{font-size:38px;font-weight:800;margin-bottom:14px;letter-spacing:-.02em}
.article .lead{font-size:18px;color:#39414f;margin-bottom:26px;max-width:860px}
.artbody{display:grid;grid-template-columns:1fr 250px;gap:48px;align-items:start}
.prose{min-width:0}
.prose h2{font-size:26px;font-weight:800;margin:38px 0 4px;padding-top:8px}
.prose h3{font-size:20px;font-weight:700;margin:26px 0 4px;color:#1a2335}
.prose .answer{font-size:16.5px;color:#10131a;margin:6px 0 10px;border-left:3px solid var(--brand);background:linear-gradient(90deg,var(--soft2),transparent);padding:8px 0 8px 14px;border-radius:0 8px 8px 0}
.prose p{margin:10px 0;color:#2c3340}
.prose ul,.prose ol{margin:10px 0 14px 22px;color:#2c3340}
.prose li{margin:5px 0}
.prose img{border-radius:14px;border:1px solid var(--line);margin:20px 0;box-shadow:0 14px 34px rgba(15,32,80,.10)}
.prose .figure{margin:22px 0}
.prose .figure figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
.callout{background:var(--soft);border:1px solid #d6e6ff;border-radius:14px;padding:18px 20px;margin:22px 0}
.callout b{color:var(--brand-d)}
.sources{font-size:14px;color:var(--muted);margin:26px 0 8px;padding:16px 18px;background:#f7f9fc;border-radius:12px;border:1px solid var(--line)}
.sources b{color:var(--ink)}
.sources a{margin:0 2px}
.related{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;font-size:14px}

/* sidebar (TOC + CTA) */
.aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:18px}
.toc{border:1px solid var(--line);border-radius:14px;padding:18px}
.toc b{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.toc a{display:block;font-size:14px;color:#3a4252;padding:5px 0;border-bottom:1px dashed var(--line)}
.toc a:hover{color:var(--brand)}
.dlcard{background:linear-gradient(160deg,#11203f,#0b1326);color:#fff;border-radius:16px;padding:22px;text-align:center}
.dlcard b{display:block;font-size:17px;margin-bottom:6px}
.dlcard p{font-size:13px;color:#9fb0d4;margin-bottom:14px}

/* ---------- FAQ accordion + tabs ---------- */
.faqsec{max-width:880px;margin:0 auto}
.faqcat{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px}
.faqcat span{padding:7px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;color:var(--muted)}
.faqcat span.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq details[open]{border-color:#bcd6ff;box-shadow:0 8px 24px rgba(15,32,80,.07)}
.faq summary{padding:17px 22px;font-weight:600;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--brand);font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 22px 18px;color:#3a4250;font-size:15px}

/* ---------- download page cards ---------- */
.dlgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:8px 0 10px}
.dlbox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 24px;text-align:center;box-shadow:0 14px 38px rgba(15,32,80,.08)}
.dlbox .ic{width:54px;height:54px;margin:0 auto 14px;color:var(--brand)}
.dlbox h3{font-size:20px;margin-bottom:4px}
.dlbox .meta{color:var(--muted);font-size:13px;margin-bottom:16px}
.dlbox .btn{width:100%;justify-content:center}
.specs{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.specs th,.specs td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.specs th{background:var(--soft2);font-weight:700;width:38%}

/* ---------- tool / calculator ---------- */
.tool{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 16px 44px rgba(15,32,80,.10)}
.tool .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.tool label{display:block;font-size:14px;font-weight:600;margin-bottom:7px;color:#26303f}
.tool select,.tool input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fbfcfe;color:var(--ink)}
.tool .result{margin-top:18px;padding:20px;border-radius:14px;background:linear-gradient(160deg,var(--soft),#fff);border:1px solid #cfe0ff}
.tool .result .big{font-size:30px;font-weight:800;color:var(--brand-d)}
.tool .result .lvl{display:inline-block;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:8px;background:#dff0e0;color:#1f7a35}
.tool .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.tool .badges span{font-size:13px;padding:6px 12px;border-radius:8px;background:#fff;border:1px solid var(--line);color:#364053}

/* ---------- footer (dark) ---------- */
.site-ft{background:#0a1124;color:#cdd6e8;padding:46px 0 26px;margin-top:10px}
.ftgrid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.ftbrand{max-width:340px}
.ftbrand strong{font-size:18px;color:#fff;margin-left:8px;vertical-align:middle}
.ftmark{vertical-align:middle}
.fttag{color:#8a98b6;font-size:14px;margin-top:10px}
.site-ft .related{display:flex;gap:14px 22px;flex-wrap:wrap;max-width:540px}
.site-ft .related a{color:#aeb9d2;font-size:14px}
.site-ft .related a:hover{color:#fff}
.ftcopy{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#7886a4}

/* ---------- chips / misc ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.chip{font-size:13px;padding:6px 14px;border-radius:999px;background:var(--soft);color:var(--brand-d);font-weight:600}
.kv-list{list-style:none;margin:0;padding:0}
.kv-list li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.kv-list svg{color:var(--brand);flex:none;margin-top:4px}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;padding-top:42px;padding-bottom:48px}
  .hero h1{font-size:34px}.hero-art{order:-1}
  .artbody{grid-template-columns:1fr}.aside{position:static;flex-direction:row;flex-wrap:wrap}
  .showcase{grid-template-columns:1fr;gap:24px}.showcase.rev{direction:ltr}
  .fgrid,.dlgrid{grid-template-columns:1fr 1fr}.games{grid-template-columns:1fr 1fr}
  .nav{display:none}.tool .row{grid-template-columns:1fr}
  .platforms{background:#16264d}.platforms .wrap{padding-top:0}
}
@media(max-width:560px){
  .shead h2{font-size:26px}.article h1{font-size:28px}
  .fgrid,.dlgrid,.games{grid-template-columns:1fr}
}