/* ============================================================
   MIAOJU 官网统一设计系统 · v1.0
   主题注册：页面 <body> 加 t-<product> 类 即切换整页主题色。
   新增产品 = 新增一组 token + /products/<page>.html，无需改系统。
   ============================================================ */

:root{
  --bg:#F7F8FA; --card:#FFFFFF; --line:#E5E7EB;
  --ink:#111827; --mut:#6B7280; --sub:#94A3B8;
  --chipBg:#EEF2F7; --radius:16px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --shadow:0 14px 36px rgba(15,23,42,.10);
}
/* -------- 主题注册表 -------- */
.t-home   {--dark:#0B1220;--dark2:#132A3A;--ac:#F59E0B;--acOn:#FCD34D;--acD:#B45309;--acP:#FEF3E2}
.t-a17    {--dark:#0F1F2A;--dark2:#16323F;--ac:#06B6D4;--acOn:#7DD3FC;--acD:#155E75;--acP:#E0F7FA}
.t-badge  {--dark:#101A2B;--dark2:#172554;--ac:#3B82F6;--acOn:#93C5FD;--acD:#1D4ED8;--acP:#EAF2FE}
.t-memoir {--dark:#1F1810;--dark2:#3B2A14;--ac:#F59E0B;--acOn:#FCD34D;--acD:#B45309;--acP:#FEF3E2}
.t-pillow {--dark:#241128;--dark2:#3D1B33;--ac:#EC4899;--acOn:#F9A8D4;--acD:#9D2463;--acP:#FDECF3}
.t-privacy{--dark:#0B1220;--dark2:#132A3A;--ac:#22D3EE;--acOn:#67E8F9;--acD:#0E7490;--acP:#E0F7FA}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.66}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1150px;margin:0 auto;padding:0 24px}

/* -------- 导航（含移动端汉堡） -------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.93);backdrop-filter:blur(10px);border-bottom:1px solid rgba(148,163,184,.12)}
.nav-inner{max-width:1150px;margin:0 auto;padding:0 24px;height:62px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:17px;letter-spacing:1px}
.brand i{width:9px;height:23px;background:var(--ac,#F59E0B);border-radius:2px}
.brand small{font-weight:400;color:#8FA3B8;font-size:11px}
.nav-menu{display:flex;gap:24px;align-items:center}
.nav-menu a{color:#C6D2DE;font-size:14px;transition:color .2s}
.nav-menu a:hover{color:var(--acOn,#FCD34D)}
.nav-menu a.active{color:#fff;font-weight:700}
.nav-menu a.cta{background:var(--ac,#F59E0B);color:#fff;padding:8px 18px;border-radius:20px;font-weight:600}
.nav-toggle,.burger{display:none}
@media(max-width:900px){
  .burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
  .burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.2s}
  .nav-menu{display:none;position:absolute;top:62px;left:0;right:0;background:#0B1220;flex-direction:column;align-items:flex-start;padding:16px 26px 22px;gap:16px;border-bottom:1px solid rgba(148,163,184,.15)}
  .nav-toggle:checked ~ .nav-menu{display:flex}
}

/* -------- Hero -------- */
.hero{background:radial-gradient(1200px 520px at 85% -10%,color-mix(in srgb,var(--ac) 16%,transparent),transparent),linear-gradient(160deg,var(--dark,#0B1220),var(--dark2,#132A3A));color:#fff;padding:86px 0 72px}
.kick{color:var(--acOn);font-size:13px;font-weight:700;letter-spacing:3px;margin-bottom:16px}
.hero h1{font-size:clamp(30px,4.6vw,44px);font-weight:800;line-height:1.28;max-width:880px}
.hero p.sub{margin-top:20px;color:#A6B7C6;font-size:16.5px;max-width:720px}
.chips{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.chips span{border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);color:var(--acOn);font-size:12.5px;padding:6px 16px;border-radius:18px;background:color-mix(in srgb,var(--ac) 7%,transparent)}

/* -------- 区块 -------- */
.sec{padding:70px 0}
.sec.tight{padding-top:0}
.sec-head{max-width:780px;margin:0 auto 42px;text-align:center}
.sec-head .k{color:var(--acD);font-size:12.5px;font-weight:800;letter-spacing:3px}
.sec-head h2{font-size:clamp(24px,3vw,29px);font-weight:800;margin-top:10px}
.sec-head p{color:var(--mut);margin-top:12px;font-size:14.5px}

/* -------- 栅格与卡片 -------- */
.grid2,.grid3,.grid4,.grid5,.grid6{display:grid;gap:20px}
.grid2{grid-template-columns:1fr 1fr}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}
.grid5{grid-template-columns:repeat(5,1fr)}
.grid6{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.grid2,.grid3,.grid4,.grid5,.grid6{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .25s,box-shadow .25s}
.card.hover:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card h3{font-size:17.5px;font-weight:800}
.card p{color:var(--mut);font-size:13.5px;margin-top:8px}
.card ul{list-style:none;margin-top:10px}
.card ul li{font-size:13.5px;color:#334155;padding:4px 0 4px 18px;position:relative}
.card ul li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--ac)}
.card.panel{border-left:4px solid var(--ac)}
.card .tag{display:inline-block;font-size:11.5px;font-weight:700;color:#fff;background:var(--ac);padding:3px 12px;border-radius:10px;margin-bottom:12px}
.card .tag.ghost{color:var(--acD);background:var(--acP)}
.ico{width:40px;height:40px;border-radius:50%;background:var(--ac);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:14px}
.stat{font-size:clamp(24px,3vw,30px);font-weight:800;color:var(--ac)}

/* -------- 表格 / 步骤 / 强调条 -------- */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;font-size:13.5px}
.tbl th{background:var(--dark);color:#fff;padding:13px 12px;font-size:13px;text-align:left}
.tbl th.hl{background:var(--ac)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);color:#334155}
.tbl td.k{font-weight:700;color:var(--mut);background:var(--chipBg)}
.tbl td.hl{background:var(--acP);font-weight:700;color:var(--acD)}
@media(max-width:720px){.tbl{display:block;overflow-x:auto}}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.steps.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.steps,.steps.c4{grid-template-columns:repeat(2,1fr)}}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;border-top:4px solid var(--ac)}
.step b{font-size:14.5px}
.step span{display:block;color:var(--mut);font-size:12.5px;margin-top:6px}
.big{background:var(--dark);color:#fff;border-radius:var(--radius);padding:24px 28px;font-size:15px;line-height:1.85}
.big b{color:var(--acOn)}
.band{background:var(--acP);border-radius:14px;padding:18px 26px;color:var(--acD);font-weight:700;font-size:14.5px;text-align:center}

/* -------- 层级图（云能力等） -------- */
.layers{display:grid;gap:12px;max-width:900px;margin:0 auto}
.layer{display:flex;border-radius:12px;overflow:hidden;border:1px solid rgba(148,163,184,.14)}
.layer .l-name{width:150px;min-width:126px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14.5px;color:#fff}
.layer .l-desc{flex:1;background:#101A2B;padding:14px 20px;color:#CBD5E1;font-size:14px;display:flex;align-items:center}
@media(max-width:700px){.layer{flex-direction:column}.layer .l-name{padding:10px}}

/* -------- 架构双栏 -------- */
.arch{display:grid;grid-template-columns:1fr 96px 1fr;align-items:center}
.arch .arrow{color:var(--ac);font-size:34px;text-align:center;font-weight:800}
.arch .proto{display:block;color:var(--mut);font-size:11.5px;text-align:center}
@media(max-width:900px){.arch{grid-template-columns:1fr}.arch .arrow{transform:rotate(90deg);margin:10px auto}}

/* -------- 规格条目（spec 速览格） -------- */
.spec-item{display:flex;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.spec-item .k{width:118px;min-width:100px;background:var(--acP);color:var(--acD);font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center;padding:14px 8px}
.spec-item .v{padding:14px 18px;font-size:13.5px;color:#334155;display:flex;align-items:center}

/* -------- CTA / 页脚 -------- */
.close{background:linear-gradient(160deg,var(--dark),var(--dark2));color:#fff;padding:70px 0;text-align:center}
.close h2{font-size:clamp(26px,3.4vw,32px);font-weight:800;line-height:1.45}
.close p{color:#A6B7C6;margin-top:16px;font-size:15.5px}
.btn{display:inline-block;background:var(--ac);color:#fff;font-weight:700;padding:13px 32px;border-radius:26px;margin-top:26px}
.btn:hover{filter:brightness(1.08)}
footer{background:var(--dark);color:#93A6B8;padding:28px 0;font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
footer a{color:#C6D2DE}
footer a:hover{color:var(--acOn)}