/* ==========================================================================
   S02 模块库 · 源自 UI页面与样式参考-20260831/02-模块拆解库
   9 组 51 组件，每组件布局变体 A/B/C（B=换布局结构，C=紧凑/深色化）
   令牌取自 站点设计规范/S02-设计规范.md
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --navy-900:#061a33; --navy-800:#0a2547; --navy-700:#0f3460; --navy-500:#1e549f;
  --navy-100:#dbe7f6; --navy-50:#eef4fb;
  /* gold-600 是"金 = 文字色"的那一档（kicker / .more / .res / .arr / a:hover / 认证标记），
     必须满足白底 4.5:1。原值 #a8841a 在白底只有 3.51:1、在浅金底 3.31:1，实测不达标。
     #8a6a12 → 白底 5.06:1 / 浅金底 4.76:1 / 浅蓝底 4.57:1，全站达标。
     ◆ 改这个值前先跑 _diag_contrast2.py，它是像素实测而非估算。 */
  --gold-600:#8a6a12; --gold-500:#c9a227; --gold-300:#e8cc7a; --gold-50:#fdf8e8;
  --gray-900:#0f172a; --gray-700:#334155; --gray-600:#475569; --gray-400:#94a3b8;
  --gray-200:#e2e8f0; --gray-100:#f1f5f9; --gray-50:#f8fafc;
  /* --surface = "卡面底色"。所有卡面/表框/输入框一律引用它，**不要再写 background:#fff**。
     原因：主题层 D（黑金奢华）是深色主题，必须把每一个浅色卡面翻成深色。早期用「把
     background:#fff 的选择器逐个列进翻转名单」的做法，漏掉一个就是「深字压白卡」或
     「浅字压白卡」，实测已反复踩坑（.m-svc[data-v=c] .card / .m-feat[data-v=c] /
     .burger / .m-cookie …）。改成令牌后，换肤只需改这一处。 */
  --surface:#fff;
  --border:#d6e4f5;
  --font-sans:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
  --container:1200px; --header-h:72px;
  --radius:12px; --radius-lg:16px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(6,26,51,.06);
  --shadow:0 4px 14px rgba(6,26,51,.08);
  --shadow-lg:0 14px 34px rgba(6,26,51,.14);
  --shadow-gold:0 4px 14px rgba(201,162,39,.3);
  --sec-y:72px; --gap:24px;
}
@media (max-width:900px){ :root{ --sec-y:52px; --gap:18px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--gray-50); color:var(--gray-700);
  font-family:var(--font-sans); font-size:16px; line-height:1.65;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--navy-700); text-decoration:none; }
a:hover{ color:var(--gold-600); }
h1,h2,h3,h4{ color:var(--navy-700); line-height:1.25; margin:0 0 12px; font-weight:700; overflow-wrap:anywhere; }
p{ margin:0 0 14px; overflow-wrap:anywhere; }
ul,ol{ margin:0 0 14px; padding-left:22px; }
.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.mod{ padding:var(--sec-y) 0; }
.mod.alt{ background:var(--navy-50); }
.mod.dark{ background:linear-gradient(180deg,var(--navy-900),var(--navy-800)); color:var(--navy-100); }
.mod.dark h2,.mod.dark h3,.mod.dark h4{ color:#fff; }
.mod-head{ max-width:760px; margin:0 0 34px; }
.mod-head.c{ margin-left:auto; margin-right:auto; text-align:center; }
.mod-head h2{ font-size:clamp(24px,3vw,34px); margin-bottom:10px; }
.mod-head p{ color:var(--gray-600); }
.mod.dark .mod-head p{ color:var(--navy-100); }
.kicker{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-600); margin-bottom:10px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:700; font-size:15px;
  border:2px solid transparent; cursor:pointer; transition:.22s; text-align:center; }
.btn-gold{ background:var(--gold-500); color:var(--navy-900); box-shadow:var(--shadow-gold); }
.btn-gold:hover{ background:var(--gold-600); color:var(--navy-900); transform:translateY(-2px); }
.btn-line{ background:transparent; border-color:var(--border); color:var(--navy-700); }
.btn-line:hover{ border-color:var(--gold-500); color:var(--gold-600); }
.btn-line-w{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn-line-w:hover{ background:rgba(255,255,255,.12); color:#fff; }
.btn-sm{ padding:9px 18px; font-size:14px; }
.acts{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 图标（线稿风，避免 emoji） */
.ic{ width:26px; height:26px; stroke:currentColor; stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.ic-box{ display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:12px; background:rgba(201,162,39,.12); color:var(--gold-600); flex:0 0 auto; }
.ic-box.lg{ width:56px; height:56px; }
.ic-box.sm{ width:40px; height:40px; }

/* ---------- 2. 08/01 导航栏 Header (72px sticky) ---------- */
.util{ background:var(--navy-900); color:var(--navy-100); font-size:13px; }
.util .wrap{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
  justify-content:flex-end; min-height:38px; }
.util a{ color:var(--navy-100); }
.util a:hover{ color:var(--gold-300); }
.util .lang{ font-weight:700; color:var(--gold-300); }
.m-hdr{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.m-hdr .bar{ display:flex; align-items:center; gap:18px; min-height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px;
  color:var(--navy-700); flex:0 0 auto; }
.brand .mark{ width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-500)); color:var(--gold-300);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; }
.nav{ flex:1 1 auto; min-width:0; }
.nav>ul{ display:flex; flex-wrap:wrap; gap:2px; list-style:none; margin:0; padding:0; }
.nav>ul>li{ position:relative; }
.nav a.top{ display:block; padding:10px 12px; font-size:14.5px; font-weight:600;
  color:var(--navy-700); border-radius:8px; white-space:nowrap; }
.nav a.top:hover{ background:var(--navy-50); color:var(--gold-600); }
.mega{ position:absolute; top:100%; left:0; z-index:70; min-width:280px; width:max-content;
  max-width:min(720px,90vw); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:18px; display:none;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px 22px; }
.nav li:hover .mega,.nav li:focus-within .mega{ display:grid; }
.mega h4{ font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-600); margin:0 0 8px; }
.mega ul{ list-style:none; margin:0; padding:0; }
.mega a{ display:block; font-size:14px; padding:5px 0; color:var(--gray-600); }
.mega a:hover{ color:var(--gold-600); }
.hdr-cta{ display:flex; gap:10px; align-items:center; flex:0 0 auto; }
.burger{ display:none; width:44px; height:44px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); align-items:center; justify-content:center; cursor:pointer; }
@media (max-width:1080px){
  .nav{ display:none; }
  .nav.open{ display:block; position:absolute; top:100%; left:0; right:0; background:var(--surface);
    border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg); padding:14px 24px 20px; }
  .nav.open>ul{ flex-direction:column; }
  .mega{ position:static; display:grid!important; box-shadow:none; border:0;
    padding:6px 0 10px 10px; border-left:2px solid var(--gold-300); margin:6px 0 10px; }
  .burger{ display:flex; }
}
/* Header 变体 */
.m-hdr[data-v="b"]{ background:linear-gradient(180deg,rgba(6,26,51,.97),rgba(10,37,71,.94)); border-bottom-color:rgba(201,162,39,.35); }
.m-hdr[data-v="b"] .brand,.m-hdr[data-v="b"] .nav a.top{ color:#fff; }
.m-hdr[data-v="b"] .nav a.top:hover{ background:rgba(255,255,255,.1); color:var(--gold-300); }
.m-hdr[data-v="c"]{ background:var(--surface); }
.m-hdr[data-v="c"] .bar{ justify-content:space-between; }
.m-hdr[data-v="c"] .nav ul{ justify-content:center; }

/* ---------- 3. 09/01 面包屑 ---------- */
.m-crumb{ background:var(--navy-50); border-bottom:1px solid var(--border); padding:11px 0; font-size:13px; }
.m-crumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none;
  margin:0; padding:0; color:var(--gray-600); }
.m-crumb li{ display:flex; align-items:center; gap:6px; min-width:0; }
.m-crumb li+li::before{ content:"/"; color:var(--gray-400); }
.m-crumb a{ color:var(--gray-600); overflow-wrap:anywhere; }
.m-crumb a:hover{ color:var(--gold-600); }
.m-crumb [aria-current]{ color:var(--navy-700); font-weight:600; overflow-wrap:anywhere; }
.m-crumb[data-v="b"] li+li::before{ content:"›"; font-size:16px; }
.m-crumb[data-v="c"] ol{ gap:8px; }
.m-crumb[data-v="c"] li{ background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:3px 12px; }
.m-crumb[data-v="c"] li+li::before{ display:none; }

/* ---------- 4. 01/01 Hero ---------- */
.m-hero{ min-height:86vh; display:flex; align-items:center; padding:80px 0;
  background:linear-gradient(135deg,#061a33,#0a2547 60%,#0f3460); color:#fff; position:relative; overflow:hidden; }
.m-hero::after{ content:""; position:absolute; right:-140px; top:-120px; width:460px; height:460px;
  border-radius:50%; background:radial-gradient(circle,rgba(201,162,39,.34),transparent 68%); }
.m-hero .wrap{ position:relative; z-index:2; }
.m-hero h1{ color:#fff; font-size:clamp(30px,5.2vw,56px); font-weight:800; line-height:1.12;
  max-width:900px; margin-bottom:20px; }
.m-hero h1 em{ font-style:normal; color:var(--gold-300); }
.m-hero .lead{ font-size:17px; font-weight:500; color:#d6e4f5; max-width:760px; margin-bottom:32px; }
.m-hero .acts{ gap:16px; }
.m-hero .trust{ margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.18);
  font-size:14px; color:rgba(255,255,255,.72); display:flex; flex-wrap:wrap; gap:10px 22px; }
.m-hero.tall{ min-height:auto; padding:64px 0; }
.m-hero[data-v="b"]{ min-height:auto; padding:70px 0; background:var(--surface); color:var(--gray-700); }
.m-hero[data-v="b"]::after{ display:none; }
.m-hero[data-v="b"] h1{ color:var(--navy-700); }
.m-hero[data-v="b"] .lead{ color:var(--gray-600); }
.m-hero[data-v="b"] .trust{ border-top-color:var(--border); color:var(--gray-600); }
.m-hero[data-v="c"]{ min-height:auto; padding:52px 0; background:var(--navy-900); }
.m-hero[data-v="c"] h1{ font-size:clamp(26px,4vw,40px); }
.m-hero[data-v="c"] .lead{ font-size:16px; margin-bottom:24px; }

/* ---------- 5. 01/02 分类模块 ---------- */
.m-cat .grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.m-cat .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:16px; transition:.22s; }
.m-cat .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold-300); }
.m-cat .card h3{ font-size:19px; margin:0; }
.m-cat .card p{ font-size:14px; color:var(--gray-600); margin:0; flex:1 1 auto; }
.m-cat .more{ font-size:14px; font-weight:700; color:var(--gold-600); }
@media (max-width:1024px){ .m-cat .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .m-cat .grid{ grid-template-columns:minmax(0,1fr); } }
.m-cat[data-v="b"] .grid{ display:flex; flex-wrap:wrap; gap:12px; }
.m-cat[data-v="b"] .card{ flex-direction:row; align-items:center; padding:14px 20px;
  border-radius:999px; gap:12px; }
.m-cat[data-v="b"] .card p{ flex:0 1 auto; }
.m-cat[data-v="c"] .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.m-cat[data-v="c"] .card{ background:var(--navy-800); border-color:transparent; color:var(--navy-100); }
.m-cat[data-v="c"] .card h3{ color:#fff; }
.m-cat[data-v="c"] .card p{ color:var(--navy-100); }
/* 01/02 分类卡片：真实配图（顶部通栏 16:9，随卡片圆角裁切） */
.m-cat .card{ overflow:hidden; }
.m-cat .cthumb{ display:block; margin:-28px -28px 0; background:var(--navy-50); }
.m-cat .cthumb img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
/* 胶囊行变体（data-v="b"）：不适用通栏图，改为行首 48px 方图缩略 */
.m-cat[data-v="b"] .cthumb{ margin:0; flex:0 0 auto; background:transparent; }
.m-cat[data-v="b"] .cthumb img{ width:48px; height:48px; aspect-ratio:1; border-radius:12px; }

/* ---------- 6. 01/03 服务推荐卡片 ---------- */
.m-svc .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.m-svc .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:.22s; }
.m-svc .card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.m-svc .thumb{ aspect-ratio:16/9; background:var(--navy-50); display:flex; align-items:center;
  justify-content:center; color:var(--gold-600); border-bottom:1px solid var(--border); }
.m-svc .body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; }
.m-svc h3{ font-size:18px; margin:0; }
.m-svc .sell{ font-size:14px; color:var(--gray-600); margin:0; flex:1 1 auto; }
.m-svc .price{ font-size:19px; font-weight:800; color:var(--gold-600); }
.m-svc .hl{ border-color:var(--gold-500); box-shadow:var(--shadow-gold); }
.m-svc .flag{ position:absolute; }
.m-svc .card{ position:relative; }
.m-svc .tag{ position:absolute; top:14px; left:14px; z-index:2; background:var(--gold-500);
  color:var(--navy-900); font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; }
@media (max-width:900px){ .m-svc .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .m-svc .grid{ grid-template-columns:minmax(0,1fr); } }
.m-svc[data-v="b"] .grid{ grid-template-columns:minmax(0,1fr); }
.m-svc[data-v="b"] .card{ flex-direction:row; }
.m-svc[data-v="b"] .thumb{ width:220px; flex:0 0 auto; aspect-ratio:4/3; border-bottom:0;
  border-right:1px solid var(--border); }
@media (max-width:700px){ .m-svc[data-v="b"] .card{ flex-direction:column; }
  .m-svc[data-v="b"] .thumb{ width:auto; aspect-ratio:16/9; border-right:0; border-bottom:1px solid var(--border); } }
.m-svc[data-v="c"] .card{ background:var(--navy-50); border-color:var(--border); }
.m-svc[data-v="c"] .thumb{ background:var(--surface); }

/* ---------- 7. 01/04 Logo 走马灯 ---------- */
.m-logo{ padding:44px 0; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.m-logo .cap{ text-align:center; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gray-400); font-weight:700; margin-bottom:22px; }
.m-logo .view{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.m-logo .track{ display:flex; gap:56px; width:max-content; animation:marq 32s linear infinite; }
.m-logo .track:hover{ animation-play-state:paused; }
.m-logo .item{ height:60px; display:flex; align-items:center; font-size:17px; font-weight:700;
  letter-spacing:.04em; color:var(--navy-700); opacity:.6; filter:grayscale(1); white-space:nowrap; }
.m-logo .item:hover{ opacity:1; filter:none; color:var(--gold-600); }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.m-logo[data-v="b"] .track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:28px 44px; }
.m-logo[data-v="c"]{ background:var(--navy-800); border-color:transparent; }
.m-logo[data-v="c"] .item{ color:#fff; }
.m-logo[data-v="c"] .cap{ color:rgba(255,255,255,.55); }

/* ---------- 8. 01/05 信任标识区 ---------- */
.m-trust .row{ display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; justify-content:center; }
.m-trust .badge{ display:flex; align-items:center; gap:9px; padding:11px 18px; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--navy-700); }
.m-trust .badge .ic{ width:19px; height:19px; color:var(--gold-600); }
.m-trust[data-v="b"] .row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.m-trust[data-v="b"] .badge{ border-radius:var(--radius); justify-content:flex-start; }
.m-trust[data-v="c"] .badge{ background:var(--navy-800); border-color:rgba(201,162,39,.4); color:#fff; }

/* ---------- 9. 01/06 客户评价 ---------- */
.m-rev .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.m-rev .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:14px; }
.m-rev .stars{ color:var(--gold-500); font-size:15px; letter-spacing:2px; }
.m-rev blockquote{ margin:0; font-size:15.5px; color:var(--navy-700); flex:1 1 auto; }
.m-rev .who{ display:flex; align-items:center; gap:12px; margin-top:2px; }
.m-rev .av{ width:48px; height:48px; border-radius:50%; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:17px;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500)); }
.m-rev .who b{ display:block; color:var(--navy-700); font-size:15px; }
.m-rev .who span{ font-size:13px; color:var(--gray-600); }
.m-rev .src{ font-size:12.5px; color:var(--gray-400); }
@media (max-width:900px){ .m-rev .grid{ grid-template-columns:minmax(0,1fr); } }
.m-rev[data-v="b"] .grid{ grid-template-columns:minmax(0,1fr); }
.m-rev[data-v="b"] .card{ flex-direction:row; align-items:flex-start; gap:20px; }
.m-rev[data-v="b"] blockquote{ font-size:17px; }
.m-rev[data-v="c"] .card{ background:var(--navy-800); border-color:transparent; }
.m-rev[data-v="c"] blockquote{ color:#e8f0fb; }
.m-rev[data-v="c"] .who b{ color:#fff; }
.m-rev[data-v="c"] .who span,.m-rev[data-v="c"] .src{ color:var(--navy-100); }

/* ---------- 10. 01/07 Pull Quote ---------- */
.m-quote{ text-align:center; }
.m-quote .mark{ font-family:var(--font-serif); font-size:82px; line-height:.7; color:var(--gold-500); }
.m-quote blockquote{ margin:14px auto 18px; max-width:900px; font-size:clamp(20px,2.7vw,29px);
  font-style:italic; color:var(--navy-700); line-height:1.45; }
.m-quote .by{ font-size:15px; color:var(--gray-600); }
.m-quote .by b{ color:var(--navy-700); }
.m-quote[data-v="b"] blockquote{ color:#fff; }
.m-quote[data-v="b"]{ background:var(--navy-800); }
.m-quote[data-v="b"] .by,.m-quote[data-v="b"] .by b{ color:var(--navy-100); }
.m-quote[data-v="c"]{ text-align:left; }
.m-quote[data-v="c"] blockquote{ margin-left:0; border-left:4px solid var(--gold-500); padding-left:24px; }

/* ---------- 11. 01/08 数据统计 ---------- */
.m-stats .grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; text-align:center; }
.m-stats .n{ font-size:clamp(30px,4vw,44px); font-weight:800; color:var(--gold-500); line-height:1.1; }
.m-stats .l{ font-size:14px; color:#d6e4f5; margin-top:6px; }
.m-stats .cell{ padding:22px 12px; border-right:1px solid rgba(255,255,255,.16); }
.m-stats .cell:last-child{ border-right:0; }
@media (max-width:760px){ .m-stats .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .m-stats .cell{ border-right:0; } }
.m-stats[data-v="b"]{ background:var(--surface); }
.m-stats[data-v="b"] .n{ color:var(--navy-700); }
.m-stats[data-v="b"] .l{ color:var(--gray-600); }
.m-stats[data-v="b"] .cell{ border-right-color:var(--border); }
.m-stats[data-v="c"] .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* ---------- 12. 01/09 服务优势 ---------- */
.m-adv .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.m-adv .item{ display:flex; gap:14px; align-items:flex-start; }
.m-adv .ic{ width:40px; height:40px; color:var(--gold-600); flex:0 0 auto; }
.m-adv h3{ font-size:16.5px; margin:0 0 4px; }
.m-adv p{ font-size:14px; color:var(--gray-600); margin:0; }
@media (max-width:900px){ .m-adv .grid{ grid-template-columns:minmax(0,1fr); } }
.m-adv[data-v="b"] .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.m-adv[data-v="b"] .item{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px; flex-direction:column; }
.m-adv[data-v="c"] .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); counter-reset:a; }
.m-adv[data-v="c"] .item::before{ counter-increment:a; content:counter(a,decimal-leading-zero);
  font-size:15px; font-weight:800; color:var(--gold-500); flex:0 0 auto; }

/* ---------- 13. 01/10 特性图标卡片 ---------- */
.m-feat .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.m-feat .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; transition:.22s; }
.m-feat .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.m-feat .card:hover .ic-box{ background:rgba(201,162,39,.2); }
.m-feat h3{ font-size:17px; margin:14px 0 6px; }
.m-feat p{ font-size:13.5px; color:var(--gray-600); margin:0; }
@media (max-width:900px){ .m-feat .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .m-feat .grid{ grid-template-columns:minmax(0,1fr); } }
.m-feat[data-v="b"] .card{ display:flex; gap:16px; align-items:flex-start; }
.m-feat[data-v="b"] .card h3{ margin-top:0; }
.m-feat[data-v="b"] .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.m-feat[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); }
.m-feat[data-v="c"] .card{ border:0; border-bottom:1px solid var(--border); border-radius:0; padding:18px 0; }
.m-feat[data-v="c"]{ background:var(--surface); }

/* ---------- 14. 01/11 客户成功指标 ---------- */
.m-kpi .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.m-kpi .card{ background:var(--navy-800); border-radius:var(--radius-lg); padding:30px 26px; }
.m-kpi .n{ font-size:clamp(28px,3.6vw,42px); font-weight:800; color:var(--gold-500); }
.m-kpi h3{ color:#fff; font-size:16px; margin:8px 0 6px; }
.m-kpi p{ font-size:13.5px; color:var(--navy-100); margin:0; }
@media (max-width:900px){ .m-kpi .grid{ grid-template-columns:minmax(0,1fr); } }
.m-kpi[data-v="b"] .card{ background:var(--surface); border:1px solid var(--border); }
.m-kpi[data-v="b"] .n{ color:var(--navy-700); }
.m-kpi[data-v="b"] h3{ color:var(--navy-700); }
.m-kpi[data-v="b"] p{ color:var(--gray-600); }
.m-kpi[data-v="c"] .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* ---------- 15. 01/12 FAQ ---------- */
.m-faq .list{ max-width:800px; margin:0 auto; }
.m-faq details{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  margin-bottom:12px; overflow:hidden; }
.m-faq summary{ list-style:none; cursor:pointer; padding:18px 20px; font-size:16px; font-weight:600;
  color:var(--navy-700); display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.m-faq summary::-webkit-details-marker{ display:none; }
.m-faq summary::after{ content:"+"; color:var(--gold-500); font-weight:800; font-size:20px; line-height:1; flex:0 0 auto; }
.m-faq details[open] summary::after{ content:"–"; }
.m-faq summary:hover{ background:var(--navy-50); }
.m-faq .ans{ padding:0 20px 20px; font-size:14.5px; color:var(--gray-600); }
.m-faq[data-v="b"] details{ border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border-color:transparent; }
.m-faq[data-v="c"] details{ background:var(--navy-800); border-color:rgba(255,255,255,.14); }
.m-faq[data-v="c"] summary{ color:#fff; }
.m-faq[data-v="c"] summary:hover{ background:rgba(255,255,255,.06); }
.m-faq[data-v="c"] .ans{ color:var(--navy-100); }

/* ---------- 16. 01/13 CTA ---------- */
.m-cta{ background:linear-gradient(135deg,var(--navy-900),var(--navy-800));
  border-top:3px solid var(--gold-500); text-align:center; }
.m-cta h2{ color:#fff; font-size:clamp(22px,2.9vw,30px); margin:0 0 12px; }
.m-cta p{ color:var(--navy-100); max-width:660px; margin:0 auto 30px; }
.m-cta .acts{ justify-content:center; }
.m-cta[data-v="b"]{ background:var(--surface); border-top-color:var(--gold-500); }
.m-cta[data-v="b"] h2{ color:var(--navy-700); }
.m-cta[data-v="b"] p{ color:var(--gray-600); }
.m-cta[data-v="c"]{ text-align:left; }
.m-cta[data-v="c"] .acts{ justify-content:flex-start; }
.m-cta[data-v="c"] p{ margin-left:0; }

/* ---------- 17. 02/01 图库 ---------- */
.m-gal .grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; }
.m-gal .main{ aspect-ratio:16/10; background:var(--navy-50); border:1px solid var(--border);
  border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center;
  color:var(--gold-600); }
.m-gal .thumbs{ display:grid; gap:12px; grid-template-rows:repeat(3,minmax(0,1fr)); }
.m-gal .t{ aspect-ratio:4/3; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--gold-600); }
.m-gal .t:hover{ border-color:var(--gold-500); }
@media (max-width:760px){ .m-gal .grid{ grid-template-columns:minmax(0,1fr); }
  .m-gal .thumbs{ grid-template-rows:none; grid-template-columns:repeat(3,minmax(0,1fr)); } }
.m-gal[data-v="b"] .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.m-gal[data-v="b"] .main{ grid-column:1/-1; }
.m-gal[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); }

/* ---------- 18. 02/02 基础信息 ---------- */
.m-base dl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0;
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.m-base dt{ padding:13px 18px; background:var(--navy-50); font-size:13px; font-weight:700;
  color:var(--gray-600); border-bottom:1px solid var(--border); }
.m-base dd{ padding:13px 18px; margin:0; font-size:14.5px; color:var(--navy-700);
  border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
@media (max-width:620px){ .m-base dl{ grid-template-columns:minmax(0,1fr); }
  .m-base dt{ border-bottom:0; padding-bottom:4px; }
  .m-base dd{ padding-top:4px; } }
.m-base[data-v="b"] dl{ display:flex; flex-wrap:wrap; border:0; gap:12px; }
.m-base[data-v="b"] dt,.m-base[data-v="b"] dd{ border:0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:10px 16px; }
.m-base[data-v="c"] dl{ max-width:520px; }

/* ---------- 19. 02/03 参数规格表 ---------- */
.m-spec .tblwrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.m-spec table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.m-spec th,.m-spec td{ padding:13px 18px; text-align:left; border-bottom:1px solid var(--border);
  vertical-align:top; overflow-wrap:anywhere; }
.m-spec thead th{ background:var(--navy-800); color:#fff; font-size:13.5px; font-weight:700; }
.m-spec tbody tr:nth-child(even){ background:var(--gray-50); }
.m-spec tbody th{ font-weight:600; color:var(--navy-700); width:38%; }
.m-spec .foot{ margin-top:18px; }
.m-spec[data-v="b"] .tblwrap{ border:0; overflow:visible; }
.m-spec[data-v="b"] table,.m-spec[data-v="b"] tbody,.m-spec[data-v="b"] tr,
.m-spec[data-v="b"] th,.m-spec[data-v="b"] td{ display:block; width:auto; }
.m-spec[data-v="b"] thead{ display:none; }
.m-spec[data-v="b"] tbody th{ background:var(--navy-50); border-radius:var(--radius) var(--radius) 0 0; }
.m-spec[data-v="b"] tbody tr{ border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; margin-bottom:12px; }
.m-spec[data-v="c"] thead th{ background:var(--navy-900); }

/* ---------- 20. 02/04 卖点 Tab ---------- */
.m-tabs .navrow{ display:flex; flex-wrap:wrap; gap:6px; border-bottom:2px solid var(--border); margin-bottom:26px; }
.m-tabs .navrow a{ padding:12px 20px; font-size:15px; font-weight:600; color:var(--gray-600);
  border-bottom:3px solid transparent; margin-bottom:-2px; }
.m-tabs .navrow a:hover{ color:var(--gold-600); }
.m-tabs .navrow a.on{ color:var(--navy-700); border-bottom-color:var(--gold-500); }
.m-tabs .panel h3{ font-size:18px; }
.m-tabs .panel ul{ columns:2; column-gap:34px; }
@media (max-width:620px){ .m-tabs .panel ul{ columns:1; } }
.m-tabs[data-v="b"] .navrow{ border-bottom:0; }
.m-tabs[data-v="b"] .navrow a{ border:1px solid var(--border); border-radius:999px; }
.m-tabs[data-v="b"] .navrow a.on{ background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
.m-tabs[data-v="c"] .navrow{ flex-direction:column; border-bottom:0; border-left:2px solid var(--border); }
.m-tabs[data-v="c"] .navrow a{ border-bottom:0; border-left:3px solid transparent; margin:0 0 0 -2px; }
.m-tabs[data-v="c"] .navrow a.on{ border-left-color:var(--gold-500); }

/* ---------- 21. 02/05 定制选项 ---------- */
.m-cust .form{ max-width:640px; }
.m-cust fieldset{ border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin:0 0 18px; background:var(--surface); }
.m-cust legend{ font-size:14px; font-weight:700; color:var(--navy-700); padding:0 8px; }
.m-cust .opts{ display:flex; flex-wrap:wrap; gap:10px; }
.m-cust .opt{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--border);
  border-radius:999px; font-size:14px; cursor:pointer; background:var(--surface); }
.m-cust .opt:hover{ border-color:var(--gold-500); }
.m-cust[data-v="b"] .opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.m-cust[data-v="b"] .opt{ border-radius:var(--radius); padding:16px; }
.m-cust[data-v="c"] .form{ max-width:none; }
.m-cust[data-v="c"] fieldset{ background:var(--navy-50); }

/* ---------- 22. 02/06 相关推荐 ---------- */
.m-rel .grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.m-rel .card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.m-rel .card:hover{ border-color:var(--gold-500); box-shadow:var(--shadow); }
.m-rel .thumb{ aspect-ratio:16/9; background:var(--navy-50); display:flex; align-items:center;
  justify-content:center; color:var(--gold-600); }
.m-rel .body{ padding:16px; }
.m-rel h3{ font-size:15.5px; margin:0 0 6px; }
.m-rel p{ font-size:13px; color:var(--gray-600); margin:0 0 8px; }
.m-rel .arr{ font-size:13px; font-weight:700; color:var(--gold-600); }
@media (max-width:900px){ .m-rel .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .m-rel .grid{ grid-template-columns:minmax(0,1fr); } }
.m-rel[data-v="b"] .grid{ display:flex; overflow-x:auto; gap:16px; padding-bottom:8px; }
.m-rel[data-v="b"] .card{ flex:0 0 260px; }
.m-rel[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); }
.m-rel[data-v="c"] .card{ display:flex; align-items:center; gap:14px; }
.m-rel[data-v="c"] .thumb{ width:110px; flex:0 0 auto; aspect-ratio:1; }

/* ---------- 23. 表单基础（02/07 · 06/01 · 06/03 · 07/02） ---------- */
.m-form .form{ max-width:560px; margin:0 auto; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); }
.m-form.wide .form{ max-width:760px; }
.fld{ margin-bottom:16px; }
.fld label{ display:block; font-size:13.5px; font-weight:600; color:var(--navy-700); margin-bottom:6px; }
.fld .req{ color:#b42318; }
.fld input,.fld select,.fld textarea{ width:100%; padding:12px 14px; font-size:15px;
  font-family:inherit; color:var(--gray-900); border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface); }
.fld textarea{ min-height:120px; resize:vertical; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none;
  border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.15); }
.fld .hint{ font-size:12.5px; color:var(--gray-400); margin-top:5px; }
.fld.row2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.fld.row2>div{ min-width:0; }
@media (max-width:620px){ .fld.row2{ grid-template-columns:minmax(0,1fr); } }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--gray-600); }
.check input{ width:auto; margin-top:3px; flex:0 0 auto; }
.m-form .btn{ width:100%; margin-top:6px; }
.m-form .note{ font-size:12.5px; color:var(--gray-400); text-align:center; margin:14px 0 0; }
.m-form[data-v="b"] .form{ max-width:none; }
.m-form[data-v="b"]{ }
.m-form[data-v="c"] .form{ border:0; box-shadow:none; padding:0; }

/* ---------- 24. 02/08 资料下载 ---------- */
.m-dl .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.m-dl .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; display:flex; flex-direction:column; gap:12px; }
.m-dl .cover{ aspect-ratio:3/4; max-height:180px; width:auto; margin:0 auto; background:var(--navy-50);
  border:1px solid var(--border); border-radius:var(--radius-sm); display:flex;
  align-items:center; justify-content:center; color:var(--gold-600); }
.m-dl h3{ font-size:16px; margin:0; }
.m-dl .meta{ font-size:12.5px; color:var(--gray-400); }
.m-dl p{ font-size:13.5px; color:var(--gray-600); margin:0; flex:1 1 auto; }
@media (max-width:860px){ .m-dl .grid{ grid-template-columns:minmax(0,1fr); } }
.m-dl[data-v="b"] .grid{ grid-template-columns:minmax(0,1fr); }
.m-dl[data-v="b"] .card{ flex-direction:row; align-items:center; }
.m-dl[data-v="b"] .cover{ margin:0; width:64px; aspect-ratio:3/4; max-height:84px; flex:0 0 auto; }
.m-dl[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); }
.m-dl[data-v="c"] .cover{ display:none; }

/* ---------- 25. 03/01 定价卡片 ---------- */
.m-price .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.m-price .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 26px; position:relative; display:flex; flex-direction:column; gap:14px; }
.m-price .card.hl{ border-color:var(--gold-500); box-shadow:var(--shadow-gold); transform:scale(1.02); }
.m-price .tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gold-500); color:var(--navy-900); font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; border-radius:999px; white-space:nowrap; }
.m-price h3{ font-size:18px; margin:0; }
.m-price .amt{ font-size:34px; font-weight:800; color:var(--navy-700); line-height:1; }
.m-price .amt small{ font-size:14px; font-weight:600; color:var(--gray-600); }
.m-price ul{ list-style:none; margin:0; padding:0; font-size:14px; flex:1 1 auto; }
.m-price li{ padding:7px 0 7px 26px; position:relative; color:var(--gray-600); }
.m-price li::before{ content:"✓"; position:absolute; left:0; color:var(--gold-600); font-weight:800; }
.m-price .card.dk{ background:var(--navy-800); border-color:transparent; }
.m-price .card.dk h3,.m-price .card.dk .amt{ color:#fff; }
.m-price .card.dk .amt small,.m-price .card.dk li{ color:var(--navy-100); }
@media (max-width:900px){ .m-price .grid{ grid-template-columns:minmax(0,1fr); }
  .m-price .card.hl{ transform:none; } }
.m-price[data-v="b"] .grid{ grid-template-columns:minmax(0,1fr); max-width:640px; margin:0 auto; }
.m-price[data-v="b"] .card{ flex-direction:row; align-items:center; flex-wrap:wrap; }
.m-price[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); max-width:560px; margin:0 auto; }

/* ---------- 26. 03/02 功能清单勾选对比 ---------- */
.m-cmp .tblwrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.m-cmp table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:600px; }
.m-cmp th,.m-cmp td{ padding:13px 16px; border-bottom:1px solid var(--border); text-align:center; }
.m-cmp thead th{ background:var(--navy-800); color:#fff; font-size:13.5px; }
.m-cmp thead th small{ display:block; color:var(--gold-300); font-weight:600; }
.m-cmp tbody th{ text-align:left; font-weight:600; color:var(--navy-700); }
.m-cmp .yes{ color:var(--gold-600); font-weight:800; }
.m-cmp .no{ color:var(--gray-400); }
.m-cmp .hot{ background:rgba(201,162,39,.09); }
.m-cmp tfoot td{ padding:18px 16px; }

/* ---------- 27. 03/03 演示预览 ---------- */
.m-demo .grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.m-demo .card{ position:relative; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--surface); }
.m-demo .shot{ aspect-ratio:16/9; background:var(--navy-50); display:flex; align-items:center;
  justify-content:center; color:var(--gold-600); }
.m-demo .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.m-demo .play span{ width:64px; height:64px; border-radius:50%; background:rgba(6,26,51,.82);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; }
.m-demo .body{ padding:18px 20px; }
.m-demo h3{ font-size:16px; margin:0 0 6px; }
.m-demo p{ font-size:13.5px; color:var(--gray-600); margin:0; }
@media (max-width:760px){ .m-demo .grid{ grid-template-columns:minmax(0,1fr); } }
.m-demo[data-v="b"] .grid{ grid-template-columns:minmax(0,1fr); }
.m-demo[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); max-width:640px; margin:0 auto; }

/* ---------- 28. 03/04 倒计时 ---------- */
.m-count{ text-align:center; }
.m-count .clock{ display:flex; gap:12px; justify-content:center; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.m-count .u{ background:var(--navy-800); border-radius:var(--radius); padding:14px 18px; min-width:84px; }
.m-count .u b{ display:block; font-size:30px; font-weight:800; color:var(--gold-500); line-height:1.1; }
.m-count .u span{ font-size:12px; color:var(--navy-100); letter-spacing:.06em; text-transform:uppercase; }
.m-count .sep{ font-size:26px; font-weight:800; color:var(--gold-500); }
.m-count .note{ font-size:14px; color:var(--gray-600); margin-bottom:18px; }
.m-count[data-v="b"] .u{ border-radius:50%; width:104px; height:104px; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.m-count[data-v="c"] .u{ background:transparent; border:1px solid var(--border); }
.m-count[data-v="c"] .u b{ color:var(--navy-700); }
.m-count[data-v="c"] .u span{ color:var(--gray-600); }

/* ---------- 29. 04/01 案例卡片 ---------- */
.m-case .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.m-case .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; }
.m-case .card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); transition:.22s; }
.m-case .thumb{ aspect-ratio:16/9; background:var(--navy-50); display:flex; align-items:center;
  justify-content:center; color:var(--gold-600); position:relative; }
.m-case .ind{ position:absolute; top:12px; left:12px; background:var(--navy-800); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; }
.m-case .body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.m-case h3{ font-size:16.5px; margin:0; }
.m-case p{ font-size:13.5px; color:var(--gray-600); margin:0; flex:1 1 auto; }
.m-case .res{ font-size:13.5px; font-weight:700; color:var(--gold-600); }
@media (max-width:900px){ .m-case .grid{ grid-template-columns:minmax(0,1fr); } }
.m-case[data-v="b"] .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.m-case[data-v="b"] .card{ flex-direction:row; }
.m-case[data-v="b"] .thumb{ width:200px; flex:0 0 auto; aspect-ratio:auto; }
.m-case[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); }

/* ---------- 30. 04/02 案例详情 ---------- */
.m-cd .sec{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:26px;
  padding:22px 0; border-bottom:1px solid var(--border); }
.m-cd .sec:last-of-type{ border-bottom:0; }
.m-cd .sec h3{ font-size:17px; margin:0; }
.m-cd .sec>div:last-child{ min-width:0; }
@media (max-width:700px){ .m-cd .sec{ grid-template-columns:minmax(0,1fr); gap:8px; } }
.m-cd .out{ background:var(--navy-50); border-left:3px solid var(--gold-500);
  border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px; margin-top:20px; }
.m-cd .out .n{ font-size:26px; font-weight:800; color:var(--gold-600); }
.m-cd[data-v="b"] .sec{ grid-template-columns:minmax(0,1fr); }
.m-cd[data-v="b"]{ position:relative; }
.m-cd[data-v="c"] .sec{ border-bottom:0; border-left:2px solid var(--border); padding-left:20px; }

/* ---------- 31. 04/03 筛选 ---------- */
.m-filter .bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.m-filter .bar a{ padding:9px 18px; border:1px solid var(--border); border-radius:999px;
  font-size:14px; font-weight:600; color:var(--gray-600); background:var(--surface); }
.m-filter .bar a:hover{ border-color:var(--gold-500); color:var(--gold-600); }
.m-filter .bar a.on{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; }
.m-filter[data-v="b"] .bar{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; }
.m-filter[data-v="c"] .bar{ gap:8px; }
.m-filter[data-v="c"] .bar a{ border-radius:var(--radius-sm); }

/* ---------- 32. 05/01 公司简介图文 ---------- */
.m-about .grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px; align-items:center; }
.m-about .fig{ aspect-ratio:16/10; background:var(--navy-50); border:1px solid var(--border);
  border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:var(--gold-600); }
.m-about .txt{ min-width:0; }
.m-about ul{ margin:14px 0 0; }
@media (max-width:860px){ .m-about .grid{ grid-template-columns:minmax(0,1fr); gap:26px; } }
.m-about[data-v="b"] .grid{ grid-template-columns:minmax(0,1fr); }
.m-about[data-v="b"] .fig{ aspect-ratio:21/9; }
.m-about[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.m-about[data-v="c"] .txt ul{ columns:2; }
@media (max-width:860px){ .m-about[data-v="c"] .txt ul{ columns:1; } }

/* ---------- 33. 05/02 团队 ---------- */
.m-team .grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; text-align:center; }
.m-team .av{ width:80px; height:80px; border-radius:50%; margin:0 auto 12px; display:flex;
  align-items:center; justify-content:center; font-size:26px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500)); }
.m-team h3{ font-size:15.5px; margin:0 0 3px; }
.m-team p{ font-size:13px; color:var(--gray-600); margin:0; }
@media (max-width:900px){ .m-team .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .m-team .grid{ grid-template-columns:minmax(0,1fr); } }
.m-team[data-v="b"] .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.m-team[data-v="b"] .av{ width:120px; height:120px; border-radius:var(--radius-lg); }
.m-team[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); text-align:left; }
.m-team[data-v="c"] .av{ margin:0; width:56px; height:56px; font-size:19px; }
.m-team[data-v="c"] .card{ display:flex; gap:14px; align-items:center; }

/* ---------- 34. 05/03 时间线 ---------- */
.m-tl .list{ position:relative; max-width:860px; margin:0 auto; padding-left:34px; }
.m-tl .list::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  background:var(--border); }
.m-tl .it{ position:relative; padding:0 0 28px; }
.m-tl .it::before{ content:""; position:absolute; left:-30px; top:6px; width:14px; height:14px;
  border-radius:50%; background:var(--gold-500); border:3px solid #fff; box-shadow:0 0 0 2px var(--border); }
.m-tl .yr{ font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--gold-600); }
.m-tl h3{ font-size:16.5px; margin:4px 0 6px; }
.m-tl p{ font-size:14px; color:var(--gray-600); margin:0; }
.m-tl[data-v="b"] .list{ padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.m-tl[data-v="b"] .list::before{ display:none; }
.m-tl[data-v="b"] .it{ padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.m-tl[data-v="b"] .it::before{ position:static; display:inline-block; margin-bottom:10px; }
.m-tl[data-v="c"] .list::before{ background:var(--gold-300); }

/* ---------- 35. 05/04 资质证书 ---------- */
.m-cert .grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.m-cert .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; text-align:center; }
.m-cert .ic{ width:34px; height:34px; color:var(--accent-ink); margin:0 auto 10px; }
.m-cert h3{ font-size:14.5px; margin:0 0 4px; }
.m-cert p{ font-size:12.5px; color:var(--gray-600); margin:0; }
.m-cert .v{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700;
  color:var(--accent-ink); margin-top:8px; }
@media (max-width:900px){ .m-cert .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.m-cert[data-v="b"] .grid{ display:flex; overflow-x:auto; }
.m-cert[data-v="b"] .card{ flex:0 0 190px; }
.m-cert[data-v="c"] .card{ background:var(--navy-800); border-color:transparent; }
/* [54.21] 变体 c 的深卡必须作用域收敛（全量 750 页门禁才发现的缺陷）
   (1) 原写法 `.m-cert[data-v="c"] p{color:var(--navy-100)}` 选择器过宽：本意只作用于
       **深色卡片内**的说明文字，却命中了卡片之外 .mod-head 里的 p —— 该处底色是浅的
       --navy-50(#eef4fb)，--navy-100(#dbe7f6) 落上去只有 1.13:1。
       与 §52 记录的 `.m-kpi p` 是同一种错法（选择器过宽），同一种改法：收敛到 .card。
   (2) .ic / .v 改用 --accent-ink（它们已是深卡上的强调色，见 §51 深底名单新增项）。 */
.m-cert[data-v="c"] .card h3{ color:#fff; }
.m-cert[data-v="c"] .card p{ color:var(--navy-100); }

/* ---------- 36. 06/02 日历预约 ---------- */
.m-cal .card{ max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px; }
.m-cal .mo{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin:16px 0; }
.m-cal .mo div{ aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:13.5px; border-radius:var(--radius-sm); border:1px solid transparent; }
.m-cal .mo .hd{ color:var(--gray-400); font-size:11.5px; font-weight:700; text-transform:uppercase; }
.m-cal .mo .dy{ background:var(--gray-50); color:var(--navy-700); }
.m-cal .mo .dy.on{ background:var(--gold-500); color:var(--navy-900); font-weight:800; }
.m-cal .slots{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.m-cal .slots span{ padding:9px 16px; border:1px solid var(--border); border-radius:999px; font-size:14px; }
.m-cal[data-v="b"] .slots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.m-cal[data-v="c"] .card{ max-width:none; }

/* ---------- 37. 06/03 多选问卷 ---------- */
.m-survey .qs{ display:grid; gap:22px; }
.m-survey fieldset{ border:1px solid var(--border); border-radius:var(--radius); padding:20px; background:var(--surface); margin:0; }
.m-survey legend{ font-size:15px; font-weight:700; color:var(--navy-700); padding:0 8px; }
.m-survey .opts{ display:flex; flex-wrap:wrap; gap:10px; }
.m-survey .opt{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border:1px solid var(--border); border-radius:999px; font-size:14px; background:var(--surface); cursor:pointer; }
.m-survey .opt:hover{ border-color:var(--gold-500); background:var(--gold-50); }
.m-survey[data-v="b"] .qs{ grid-template-columns:minmax(0,1fr); }
.m-survey[data-v="c"] .opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:560px){ .m-survey[data-v="c"] .opts{ grid-template-columns:minmax(0,1fr); } }

/* ---------- 38. 07/01 目录锚点 ---------- */
.m-toc .layout{ display:grid; grid-template-columns:minmax(0,250px) minmax(0,1fr); gap:34px; align-items:start; }
.m-toc .layout>*{ min-width:0; }
.m-toc .side{ position:sticky; top:calc(var(--header-h) + 18px); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.m-toc .side h4{ font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-600); margin:0 0 10px; }
.m-toc .side ul{ list-style:none; margin:0; padding:0; font-size:14px; }
.m-toc .side li{ padding:6px 0; }
.m-toc .side a{ color:var(--gray-600); display:block; overflow-wrap:anywhere; }
.m-toc .side a:hover{ color:var(--gold-600); }
.m-toc .body>*{ min-width:0; }
@media (max-width:900px){ .m-toc .layout{ grid-template-columns:minmax(0,1fr); }
  .m-toc .side{ position:static; } }
.m-toc[data-v="b"] .layout{ grid-template-columns:minmax(0,1fr); }
.m-toc[data-v="b"] .side{ position:static; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.m-toc[data-v="b"] .side ul{ display:flex; flex-wrap:wrap; gap:10px; }
.m-toc[data-v="b"] .side li{ border:1px solid var(--border); border-radius:999px; padding:5px 14px; }
.m-toc[data-v="c"] .side{ background:var(--navy-50); }

/* ---------- 39. 07/02 资源下载锁 ---------- */
.m-gate .card{ max-width:520px; margin:0 auto; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:30px; text-align:center; }
.m-gate .lock{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:rgba(201,162,39,.12); color:var(--gold-600); display:flex;
  align-items:center; justify-content:center; }
.m-gate h3{ font-size:18px; margin:0 0 8px; }
.m-gate p{ font-size:14px; color:var(--gray-600); }
.m-gate .inline{ display:flex; gap:10px; margin-top:16px; }
.m-gate .inline input{ flex:1 1 auto; min-width:0; padding:12px 14px; border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:15px; font-family:inherit; }
@media (max-width:520px){ .m-gate .inline{ flex-direction:column; } }
.m-gate[data-v="b"] .card{ text-align:left; }
.m-gate[data-v="b"] .lock{ margin-left:0; }
.m-gate[data-v="c"] .card{ background:var(--navy-800); border-color:transparent; }
.m-gate[data-v="c"] h3{ color:#fff; }
.m-gate[data-v="c"] p{ color:var(--navy-100); }

/* ---------- 40. 07/03 博客卡片 ---------- */
.m-blog .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.m-blog .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; }
.m-blog .card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); transition:.22s; }
.m-blog .thumb{ aspect-ratio:16/9; background:var(--navy-50); display:flex; align-items:center;
  justify-content:center; color:var(--gold-600); }
.m-blog .body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.m-blog .meta{ font-size:12.5px; color:var(--gray-400); display:flex; gap:10px; flex-wrap:wrap; }
.m-blog h3{ font-size:16.5px; margin:0; }
.m-blog p{ font-size:13.5px; color:var(--gray-600); margin:0; flex:1 1 auto; }
@media (max-width:900px){ .m-blog .grid{ grid-template-columns:minmax(0,1fr); } }
.m-blog[data-v="b"] .grid{ grid-template-columns:minmax(0,1fr); }
.m-blog[data-v="b"] .card{ flex-direction:row; }
.m-blog[data-v="b"] .thumb{ width:190px; flex:0 0 auto; aspect-ratio:auto; }
.m-blog[data-v="c"] .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:620px){ .m-blog[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- 41. 08/02 页脚 ---------- */
.m-ftr{ background:var(--navy-900); color:var(--navy-100); padding:60px 0 0; font-size:14px; }
.m-ftr .cols{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px; }
.m-ftr .cols>*{ min-width:0; }
.m-ftr h4{ color:#fff; font-size:14px; margin:0 0 14px; }
.m-ftr ul{ list-style:none; margin:0; padding:0; }
.m-ftr li{ margin-bottom:9px; }
.m-ftr a{ color:var(--navy-100); overflow-wrap:anywhere; }
.m-ftr a:hover{ color:var(--gold-300); }
.m-ftr .brandblk{ min-width:0; }
.m-ftr .brandblk .brand{ color:#fff; }
.m-ftr .brandblk p{ font-size:13px; color:var(--navy-100); margin-top:12px; }
.m-ftr .bottom{ margin-top:44px; border-top:1px solid rgba(255,255,255,.14); padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; font-size:13px; }
.m-ftr .bottom nav{ display:flex; flex-wrap:wrap; gap:10px 18px; }
@media (max-width:960px){ .m-ftr .cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .m-ftr .cols{ grid-template-columns:minmax(0,1fr); } }
.m-ftr[data-v="b"]{ background:#000; }
.m-ftr[data-v="c"]{ background:var(--gray-100); color:var(--gray-600); }
.m-ftr[data-v="c"] h4{ color:var(--navy-700); }
.m-ftr[data-v="c"] a{ color:var(--gray-600); }
.m-ftr[data-v="c"] .brandblk .brand{ color:var(--navy-700); }
.m-ftr[data-v="c"] .brandblk p{ color:var(--gray-600); }
.m-ftr[data-v="c"] .bottom{ border-top-color:var(--border); }

/* ---------- 42. 08/03 客服 / 08/05 回顶 / 08/06 Cookie ---------- */
.float-r{ position:fixed; right:24px; z-index:55; }
.m-chat{ bottom:96px; }
.m-chat .bub{ width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--navy-700); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); position:relative; }
.m-chat .bub:hover{ background:var(--gold-500); color:var(--navy-900); }
.m-chat .dot{ position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%;
  background:#e5484d; border:2px solid #fff; }
.m-chat .pane{ position:absolute; bottom:68px; right:0; width:320px; max-width:calc(100vw - 48px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; display:none; }
.m-chat .pane.on{ display:block; }
.m-chat .pane .hd{ background:var(--navy-800); color:#fff; padding:14px 18px; font-size:15px; font-weight:700; }
.m-chat .pane .bd{ padding:16px 18px; }
.m-chat .pane .bd p{ font-size:13.5px; color:var(--gray-600); margin:0 0 12px; }
.m-chat .quick{ display:flex; flex-wrap:wrap; gap:8px; }
.m-chat .quick a{ font-size:12.5px; border:1px solid var(--border); border-radius:999px; padding:6px 12px; }
.m-top{ bottom:24px; width:48px; height:48px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--navy-700); cursor:pointer; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--shadow); }
.m-top:hover{ border-color:var(--gold-500); color:var(--gold-600); }
.m-cookie{ position:fixed; left:0; right:0; bottom:0; z-index:58; background:var(--navy-900);
  color:var(--navy-100); padding:16px 0; font-size:13.5px; }
.m-cookie .wrap{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.m-cookie a{ color:var(--gold-300); text-decoration:underline; }
.m-cookie .b{ display:flex; gap:10px; flex-wrap:wrap; }
.m-modal{ position:fixed; inset:0; z-index:80; background:rgba(6,26,51,.6); display:none;
  align-items:center; justify-content:center; padding:24px; }
.m-modal .box{ background:var(--surface); border-radius:20px; padding:30px; max-width:460px; width:100%; text-align:center; }
.m-modal .x{ float:right; border:0; background:transparent; font-size:22px; cursor:pointer; color:var(--gray-400); }

/* ---------- 43. 08/07 404 / 08/08 搜索 ---------- */
.m-404{ text-align:center; padding:90px 0; }
.m-404 .code{ font-size:clamp(70px,14vw,140px); font-weight:800; line-height:1;
  color:var(--navy-700); letter-spacing:-.03em; }
.m-404 h1{ font-size:clamp(20px,3vw,28px); margin:12px 0 12px; }
.m-404 p{ max-width:620px; margin:0 auto 26px; color:var(--gray-600); }
.m-404 .links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }
.m-404 .links a{ font-size:13.5px; border:1px solid var(--border); border-radius:999px; padding:8px 16px; background:var(--surface); }
.m-search .box{ max-width:660px; margin:0 auto 26px; display:flex; gap:10px; }
.m-search .box input{ flex:1 1 auto; min-width:0; padding:14px 18px; font-size:16px;
  border:1px solid var(--border); border-radius:999px; font-family:inherit; }
.m-search .box button{ border-radius:999px; }
.m-search .cnt{ text-align:center; font-size:14px; color:var(--gray-600); margin-bottom:24px; }
.m-search .res{ display:grid; gap:16px; max-width:860px; margin:0 auto; }
.m-search .it{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.m-search .it h3{ font-size:16.5px; margin:0 0 6px; }
.m-search .it p{ font-size:14px; color:var(--gray-600); margin:0 0 8px; }
.m-search .it .u{ font-size:12.5px; color:var(--gold-600); overflow-wrap:anywhere; }
mark{ background:var(--gold-50); color:var(--navy-900); padding:0 2px; }

/* ---------- 44. 09/02 产品对比 ---------- */
.m-pcmp .tblwrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.m-pcmp table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
.m-pcmp th,.m-pcmp td{ padding:13px 16px; border-bottom:1px solid var(--border); text-align:center; }
.m-pcmp thead th{ background:var(--navy-50); color:var(--navy-700); }
.m-pcmp thead th b{ display:block; font-size:15.5px; }
.m-pcmp thead th .pr{ font-size:13px; color:var(--gold-600); font-weight:700; }
.m-pcmp tbody th{ text-align:left; color:var(--navy-700); font-weight:600; }
.m-pcmp .hot{ background:rgba(201,162,39,.09); border-left:2px solid var(--gold-500); border-right:2px solid var(--gold-500); }
.m-pcmp tfoot td{ padding:16px; }

/* ---------- 45. 09/03 安全合规徽章 ---------- */
.m-badge3 .row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.m-badge3 .b{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 18px; font-size:13.5px; color:var(--navy-700); font-weight:600; }
.m-badge3 .b .ic{ width:20px; height:20px; color:var(--gold-600); }
.m-badge3[data-v="b"] .b{ background:var(--navy-800); color:#fff; border-color:transparent; }
.m-badge3[data-v="c"] .row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

/* ---------- 46. 09/04 分页 ---------- */
.m-pager{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  margin-top:40px; list-style:none; padding:0; }
.m-pager a,.m-pager span{ display:flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px; border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--gray-600); background:var(--surface); }
.m-pager a:hover{ border-color:var(--gold-500); color:var(--gold-600); }
.m-pager .on{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; }
.m-pager[data-v="b"] a,.m-pager[data-v="b"] span{ border:0; background:transparent; }
.m-pager[data-v="b"] .on{ background:var(--gold-500); color:var(--navy-900); }
.m-pager[data-v="c"]{ justify-content:flex-start; }

/* ---------- 47. 09/05 标签徽章 ---------- */
.m-tag{ display:inline-flex; align-items:center; font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
  line-height:1.5; }
.m-tag.new{ background:#e0f2fe; color:#075985; }
.m-tag.hot{ background:#ffedd5; color:#9a3412; }
.m-tag.pop{ background:var(--gold-50); color:var(--gold-600); border:1px solid var(--gold-300); }
.m-tag[data-v="b"]{ background:transparent; border:1px solid currentColor; }
.m-tag[data-v="c"]{ border-radius:var(--radius-sm); }

/* ---------- 48. 屏序号/视觉节奏辅助 ---------- */
.band{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.band .ln{ flex:1 1 auto; height:1px; background:var(--border); }
.m-secnum{ font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--gold-600); }
.lede{ font-size:16.5px; color:var(--gray-600); max-width:820px; }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start; }
.split>*{ min-width:0; }
@media (max-width:860px){ .split{ grid-template-columns:minmax(0,1fr); } }
.pillrow{ display:flex; flex-wrap:wrap; gap:10px; }
.pillrow span{ font-size:13.5px; border:1px solid var(--border); border-radius:999px;
  padding:7px 15px; background:var(--surface); color:var(--gray-600); }
.dark .pillrow span{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:var(--navy-100); }

/* ---------- 49. 减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
.m-logo .track{ will-change:transform; }

/* ---------- 50. 长 token / 占位符防溢出（治本） ----------
   根因：占位符 {{PH_...}} 与运营主体名是不可断行长 token，
   会撑大 min-content，使 grid/flex 轨道超宽。
   注意：overflow-wrap:break-word 不改变 min-content，必须用 anywhere。 */
html,body{ overflow-x:hidden; }
body,p,li,td,th,dt,dd,summary,span,a.h1,h1,h2,h3,h4,blockquote,figcaption,label,legend,option,button{
  overflow-wrap:anywhere;
}
.brand{ min-width:0; flex:0 1 auto; }
.brand span{ overflow-wrap:anywhere; }
.m-hdr .bar{ flex-wrap:wrap; }
.m-hdr .bar>*{ min-width:0; }
.util .wrap>*{ min-width:0; }
.wrap>*,.grid>*,.cols>*,.split>*,.layout>*,.mod-head>*,.acts>*,.band>*,.row>*,.bar>*,.navrow>*{
  min-width:0;
}
.m-ftr p,.m-ftr a,.m-ftr li,.m-ftr h4{ overflow-wrap:anywhere; }
.m-cookie p{ overflow-wrap:anywhere; }
.m-chat .pane,.m-modal .box{ max-width:100%; }
.tblwrap{ min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.m-spec table,.m-cmp table,.m-pcmp table{ max-width:100%; }
.m-spec .tblwrap,.m-cmp .tblwrap,.m-pcmp .tblwrap{ width:100%; }
@media (max-width:520px){
  .m-hero{ padding:56px 0; }
  .m-hero .trust{ font-size:13.5px; }
  .m-price .card,.m-form .form,.m-gate .card,.m-cal .card{ padding:22px 18px; }
  .m-cd .sec{ gap:6px; }
  .m-tl .list{ padding-left:26px; }
  .m-tl .it::before{ left:-26px; }
}

/* ---------- 50. 长 token / 占位符防溢出（治本） ----------
   根因：占位符 {{PH_...}} 与运营主体名是不可断行长 token，
   会撑大 min-content，使 grid/flex 轨道超宽。
   注意：overflow-wrap:break-word 不改变 min-content，必须用 anywhere。 */
html,body{ overflow-x:hidden; }
body,p,li,td,th,dt,dd,summary,span,a.h1,h1,h2,h3,h4,blockquote,figcaption,label,legend,option,button{
  overflow-wrap:anywhere;
}
.brand{ min-width:0; flex:0 1 auto; }
.brand span{ overflow-wrap:anywhere; }
.m-hdr .bar{ flex-wrap:wrap; }
.m-hdr .bar>*{ min-width:0; }
.util .wrap>*{ min-width:0; }
.wrap>*,.grid>*,.cols>*,.split>*,.layout>*,.mod-head>*,.acts>*,.band>*,.row>*,.bar>*,.navrow>*{
  min-width:0;
}
.m-ftr p,.m-ftr a,.m-ftr li,.m-ftr h4{ overflow-wrap:anywhere; }
.m-cookie p{ overflow-wrap:anywhere; }
.m-chat .pane,.m-modal .box{ max-width:100%; }
.tblwrap{ min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.m-spec table,.m-cmp table,.m-pcmp table{ max-width:100%; }
.m-spec .tblwrap,.m-cmp .tblwrap,.m-pcmp .tblwrap{ width:100%; }
@media (max-width:520px){
  .m-hero{ padding:56px 0; }
  .m-hero .trust{ font-size:13.5px; }
  .m-price .card,.m-form .form,.m-gate .card,.m-cal .card{ padding:22px 18px; }
  .m-cd .sec{ gap:6px; }
  .m-tl .list{ padding-left:26px; }
  .m-tl .it::before{ left:-26px; }
}

/* ---------- 51. 强调色对比度：按「表面」声明 --accent-ink（WCAG AA 治本） ----------
   根因（实测，非推测）：
     a) 品牌金 gold-600 #a8841a 在白/浅底仅 3.51:1，gold-500 #c9a227 仅 2.42:1，
        深蓝底上 gold-600 也只有 3.56:1 —— 各方向都不达「正文 4.5 / 大字 3.0」。
     b) hero/CTA 的 variant B 是白底画布，而 .btn-line-w 写死 color:#fff
        → 白字白底对比度 1.00，描边按钮完全不可见。
     c) 特异性冲突：.m-rev .who span(0,2,1) 压过 .m-rev .av(0,2,0)，
        头像首字母被染成 gray-600，落在深蓝圆形渐变上对比度 1.02（几乎不可见）。
     d) 大量 12.5px 辅助文字用 gray-400 #94a3b8，白底仅 2.56:1。
   做法：不再逐个选择器打补丁（深底表面无穷枚举），改为「表面声明变量、文字引用变量」：
        :root 默认 --accent-ink = 浅底深金；每个深底表面把它改写为浅金 gold-300。
        变量按 DOM 继承就近生效，白卡嵌在深底内部时也能正确回落。 */
:root{ --gold-ink:#8a6a12; --accent-ink:var(--gold-ink); }

/* —— 深底表面：强调色改写为浅金 gold-300 —— */
.mod.dark,.util,.mega,.m-hdr[data-v="b"],.m-hero,.m-hero[data-v="c"],
.m-logo[data-v="c"],.m-cat[data-v="c"] .card,.m-rev[data-v="c"] .card,
.m-trust[data-v="c"] .badge,.m-quote[data-v="b"],.m-kpi .card,
.m-faq[data-v="c"] details,.m-cta,.m-spec thead th,.m-cmp thead th,
.m-tabs[data-v="b"] .navrow a.on,.m-ftr:not([data-v="c"]),.m-cookie,
.m-chat .pane .hd,.m-modal .box .hd,
/* [§51 补] `.m-cert[data-v="c"] .card` 是变体 c 的深色卡面（--navy-800），它的
   .ic / .v 若继续用 --gold-600 作墨，白底配色下只有 3.03:1、E 主题下 1.40:1
   （全量 750 页门禁发现）。归入深底名单，强调色自动翻成 gold-300（9.8 / 5.04）。 */
.m-price .card.hl,.m-pcmp thead th.hot,.m-sop .cat .k,
.m-cert[data-v="c"] .card{ --accent-ink:var(--gold-300); }

/* 注意：.m-pcmp thead th 不在上面的深底名单里 —— 它的底色是 --navy-50（浅底），
   曾被误列为深底，导致 .pr 的强调色变成 gold-300，实测落在浅蓝底上只有 1.42:1。 */

/* —— 浅底表面：显式回落深金（覆盖「白卡嵌在深底内」的继承） —— */
.m-hero[data-v="b"],.m-cta[data-v="b"],.m-hdr:not([data-v="b"]),.m-ftr[data-v="c"],
.m-kpi[data-v="b"] .card,.m-faq details,.m-spec .tblwrap,.m-cmp .tblwrap,
.m-pcmp .tblwrap,.m-cat .card,.m-svc .card,.m-rev .card,.m-feat .card,
.m-price .card,.m-form .form,.m-base,.m-gal .t,.m-cust fieldset,.m-dl .card,
.m-blog .card,.m-tabs,.m-stats[data-v="b"],.m-feat[data-v="c"],.m-adv .item{
  --accent-ink:var(--gold-ink);
}

/* —— 强调文字统一引用变量（含此前不达标的大字号展示数字） —— */
.kicker,.m-cat .more,.m-rel .arr,.m-case .res,.m-cmp .yes,.m-pcmp thead th .pr,
.m-search .it .u,.m-tl .yr,.m-secnum,.m-tag.pop,.m-cert p,.m-badge3 .b .ic,
.m-rev .stars,.m-stats .n,.m-kpi .n,.m-count .u b,.m-count .sep,.m-svc .price,
.m-cd .out .n,.m-cmp thead th small{ color:var(--accent-ink); }

/* —— 描边按钮兜底：浅底变体下若仍误用 btn-line-w（写死 #fff）→ 回到 navy —— */
.m-hero[data-v="b"] .btn-line-w,.m-cta[data-v="b"] .btn-line-w,.m-hdr[data-v="c"] .btn-line-w,
.m-stats[data-v="b"] .btn-line-w,.m-feat[data-v="c"] .btn-line-w{
  color:var(--navy-700); border-color:rgba(15,52,96,.35);
}
.m-hero[data-v="b"] .btn-line-w:hover,.m-cta[data-v="b"] .btn-line-w:hover{
  background:rgba(15,52,96,.07); color:var(--navy-700);
}

/* —— 辅助文字 gray-400(2.56:1) → gray-600(7.5:1) ——
   均为真实可读文字或承载语义的符号（✗/关闭键），非纯装饰。 */
.m-rev .src,.fld .hint,.m-form .note,.m-dl .meta,.m-blog .meta,
.m-cmp .no,.m-cal .mo .hd,.m-modal .x,.m-logo .cap{ color:var(--gray-600); }
.m-logo[data-v="c"] .cap{ color:rgba(255,255,255,.72); }

/* —— 头像首字母：修正特异性冲突，避免被 .who span 的 gray-600 压掉 —— */
.m-rev .who span.av{ color:#fff; }
.m-team .grid span.av{ color:#fff; }

/* ---------- 52. 对比度收口（第二轮实测发现，均为真实缺陷） ---------- */

/* a) gold-ink 在 navy-50(#eef4fb) 上仅 4.43:1，压深一档到 5.2:1；白底 5.8:1 */
:root{ --gold-ink:#7f6213; }

/* b) 选择器过宽：.m-kpi p / .m-kpi h3 本意只作用于深蓝卡片内的文字，
      却命中了卡片之外 .mod-head 里的 p → 浅底上渲染 navy-100，对比度 1.20（不可见）。
      收敛到 .card 作用域。 */
.m-kpi .card p{ color:var(--navy-100); }
.m-kpi .card h3{ color:#fff; }
.m-kpi[data-v="b"] .card p{ color:var(--gray-600); }
.m-kpi[data-v="b"] .card h3{ color:var(--navy-700); }
.m-kpi > .wrap > .mod-head p{ color:var(--gray-600); }
.mod.dark .m-kpi > .wrap > .mod-head p{ color:var(--navy-100); }

/* c) .m-cmp .hot 的半透明金底色把深蓝表头底色顶掉（透明度 .09 需合成，
      合成后表头落到 .tblwrap 的白底上），导致表头 th 的 color:#fff
      变成白字近白底、以及 .hot 列 small 的浅金文字全部不可读。
      表头列改用浅一档深蓝保持「深底契约」，表体仍保留半透明金高亮。 */
.m-cmp thead th.hot{ background:var(--navy-700); }

/* d) TOC 侧栏标题与 hover（白卡片内，原 gold-600 仅 3.51:1） */
.m-toc .side h4{ color:var(--accent-ink); }
.m-toc .side a:hover{ color:var(--accent-ink); }

/* ==========================================================================
   54. 设计标准对齐层（对齐 02-模块拆解库 的 51 个 设计标准.md + S02-设计规范.md）
   —— 上一版只落了配色，几何/字重/间距/动效未按规范；本层逐条补齐。
   规范来源：UI页面与样式参考-20260831/02-模块拆解库/<组>/<模块>/设计标准.md
   ========================================================================== */

/* ---------- 54.1 全局动效基类（规范多次要求「进入视口淡入上移」） ---------- */
/* 只在 JS 可用时隐藏初态：html 未加 .js（脚本被禁用/加载失败）时内容必须照常可见，
   否则整页会变成空白。 */
html.js .rv{ opacity:0; transform:translateY(18px); }
html.js .rv.in{ opacity:1; transform:none; transition:opacity .6s ease,transform .6s ease; }
html.js .rv-l1.in{ transition-delay:.06s } html.js .rv-l2.in{ transition-delay:.12s }
html.js .rv-l3.in{ transition-delay:.18s } html.js .rv-l4.in{ transition-delay:.24s }
html.js .rv-l5.in{ transition-delay:.30s } html.js .rv-l6.in{ transition-delay:.36s }
@media (prefers-reduced-motion:reduce){
  html.js .rv{ opacity:1; transform:none }
}

/* ---------- 54.2 [01/01] Hero 首屏横幅 ---------- */
.m-hero h1{ font-size:clamp(40px,6vw,64px); font-weight:800; line-height:1.1; letter-spacing:-.01em; }
.m-hero h1 em{ font-style:normal; color:var(--gold-500);
  background:linear-gradient(92deg,var(--gold-300),var(--gold-500) 55%,var(--gold-300));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.m-hero .lead{ font-weight:500; }
.m-hero .acts{ margin-top:32px; }
.m-hero .acts .btn{ padding:16px 32px; font-size:16px; }
/* 金色细条（S02-设计规范：Hero 深蓝三层渐变 + 金色细条 + 渐变标题） */
.m-hero .kicker{ position:relative; padding-left:34px; }
.m-hero .kicker::before{ content:""; position:absolute; left:0; top:50%; width:24px; height:2px;
  background:var(--gold-500); transform:translateY(-50%); }

/* ---------- 54.3 [01/02] 产品服务分类模块 ---------- */
.m-cat .card{ padding:28px; gap:16px; }
.m-cat .card h3{ font-size:20px; font-weight:700; }
.m-cat .card p{ font-size:14px; }
.m-cat .card .ic-box{ width:48px; height:48px; transition:transform .22s ease; }
.m-cat .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg);
  border-color:var(--gold-300); }
.m-cat .card:hover .ic-box{ transform:scale(1.08); }

/* ---------- 54.4 [01/03] 爆款服务推荐卡片 ---------- */
.m-svc .card{ border-radius:var(--radius-lg); }
.m-svc .card h3{ font-size:18px; font-weight:700; }
.m-svc .price{ font-size:26px; font-weight:800; }
.m-svc .thumb{ overflow:hidden; }
.m-svc .thumb .ic{ transition:transform .3s ease; }
.m-svc .card:hover{ transform:translateY(-6px); }
.m-svc .card:hover .thumb .ic{ transform:scale(1.12); }

/* ---------- 54.5 [01/04+01/05] Logo 走马灯 / 信任标识区 ---------- */
.m-logo .item{ height:60px; opacity:.6; filter:grayscale(1); transition:opacity .25s,filter .25s; }
.m-logo .item:hover{ opacity:1; filter:none; }
.m-trust .badge{ min-height:52px; }
.m-trust .badge .ic{ width:19px; height:19px; }

/* ---------- 54.6 [01/06+01/07] 评价轮播 / 引用证言 ---------- */
.m-rev .av{ width:48px; height:48px; }
.m-rev blockquote{ font-size:15.5px; line-height:1.65; }
.m-quote q,.m-quote blockquote{ font-size:clamp(24px,3vw,32px); line-height:1.35; font-style:normal; }
.m-quote::before{ content:"\201C"; display:block; font-family:Georgia,serif; font-size:96px;
  line-height:.6; color:var(--gold-300); margin-bottom:12px; }

/* ---------- 54.7 [01/08+01/11] 数据统计 / 成功指标（大数字 40-48px 800） ---------- */
.m-stats .n{ font-size:clamp(40px,4.6vw,48px); font-weight:800; }
.m-kpi .n{ font-size:clamp(36px,4.2vw,48px); font-weight:800; }
.m-stats .cell{ border-right:1px solid rgba(255,255,255,.16); }
.m-stats .cell:last-child{ border-right:0; }

/* ---------- 54.8 [01/09+01/10] 服务优势 / 特性图标卡片 ---------- */
.m-feat .card{ padding:24px; }
.m-feat .card h3{ font-size:17px; font-weight:700; }
.m-feat .card p{ font-size:13.5px; }
.m-feat .ic-box{ width:44px; height:44px; transition:transform .22s ease,background .22s ease; }
.m-feat .card:hover .ic-box{ transform:translateY(-3px); background:rgba(201,162,39,.2); }

/* ---------- 54.9 [01/12] FAQ 折叠面板 ---------- */
.m-faq details{ border-radius:var(--radius); }
.m-faq summary{ font-size:16px; font-weight:600; padding:18px 20px; }
.m-faq summary::after{ transition:transform .22s ease; }
.m-faq details[open] summary::after{ transform:rotate(90deg); }
.m-faq .ans{ font-size:14.5px; line-height:1.6; }

/* ---------- 54.10 [01/13] CTA 转化区块 ---------- */
.m-cta{ padding:80px 0; }
.m-cta h2{ font-size:clamp(24px,3vw,28px); }
.m-cta .acts .btn{ padding:16px 32px; font-size:16px; }

/* ---------- 54.11 [02/01] 图库组件（按 设计标准「落地参考 S02 实装」） ---------- */
.m-gal .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.m-gal .gcard{ border-radius:var(--radius-lg); overflow:hidden; min-height:170px; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(145deg,var(--navy-100),var(--navy-50)); border:1px solid var(--border);
  transition:transform .22s ease,box-shadow .22s ease; }
.m-gal .gcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.m-gal .gvisual{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:18px; }
.m-gal .docicon{ width:72px; height:88px; border-radius:6px; background:var(--surface); color:var(--gold-600);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.m-gal .gcap{ background:rgba(255,255,255,.82); backdrop-filter:blur(6px); padding:10px 14px;
  font-size:14px; font-weight:700; color:var(--navy-700); display:flex;
  flex-direction:column; gap:2px; }
.m-gal .gcap small{ font-size:12px; font-weight:500; color:var(--gray-600); }

/* ---------- 54.12 [02/03] 参数规格表 ---------- */
.m-spec thead th{ background:linear-gradient(135deg,var(--navy-800),var(--navy-500)); color:#fff; }
.m-spec tbody tr:nth-child(odd){ background:var(--navy-50); }
.m-spec tbody tr:nth-child(even){ background:var(--surface); }
.m-spec tbody td:first-child{ width:34%; font-weight:700; color:var(--navy-700); }

/* ---------- 54.13 [02/07+06/01] 询盘 / 预约表单 ---------- */
.fld input,.fld select,.fld textarea{ padding:12px 14px; border-radius:4px; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(201,162,39,.15); }
.m-form .form{ max-width:560px; }
.m-form .fld{ margin-bottom:16px; }
.m-form .submit,.m-form .form button[type=submit]{ width:100%; }

/* ---------- 54.14 [03/01+03/02] 定价卡片 / 功能清单勾选对比 ----------
   ★ 注意：本节追加在文件末尾，会**覆盖前面同特异性的规则**。
   早期版本这里写成 `.m-cmp thead th.hot{ background:rgba(201,162,39,.14) }`，
   把前面第 1024 行「thead th.hot 改回不透明深蓝」的对比度修复顶掉了：
   半透明金底合成后是浅金，白字落在上面实测只有 1.12:1。
   同时 `.hl` 卡加了深底却没配浅色文字，导致 li/meta 变成 18:1 反过来的深灰压深蓝。
   改这里必须同时确认这两件事。 */
.m-price .amt{ font-size:40px; font-weight:800; }
.m-price .card{ padding:32px; }
.m-price .card.hl{ background:var(--navy-800); border:2px solid var(--gold-500); }
.m-price .card.hl h3, .m-price .card.hl .amt{ color:#fff; }
.m-price .card.hl li, .m-price .card.hl p, .m-price .card.hl p.meta,
.m-price .card.hl .amt small{ color:var(--navy-100); }
.m-price .card.hl li::before{ color:var(--gold-300); }
.m-cmp thead th.hot,.m-pcmp thead th.hot{ background:var(--navy-700); }
/* .m-pcmp thead th 的字色是 navy-700，而 .hot 列把底色也改成了 navy-700
   → 文字与底色同色，实测 1.00:1，把高亮列的标题彻底抹掉。必须显式回白。 */
.m-pcmp thead th.hot{ color:#fff; }
.m-pcmp thead th.hot .pr{ color:var(--gold-300); }
.m-cmp thead th.hot small,.m-pcmp thead th.hot small{ color:var(--gold-300); }

/* ---------- 54.15 [03/04] 倒计时组件（数字块 + 深蓝胶囊） ---------- */
.m-count .u b{ font-size:clamp(28px,3.4vw,40px); font-weight:800; color:var(--gold-500);
  background:rgba(10,37,71,.55); border:1px solid rgba(201,162,39,.35);
  border-radius:var(--radius); padding:10px 16px; display:block; min-width:1.6em; text-align:center; }
.m-count .sep{ font-size:clamp(24px,3vw,34px); color:var(--gold-300); }

/* ---------- 54.16 [08/01] 导航栏（菜单 15px 500，间距 24px，CTA padding 10px 18px） ---------- */
.nav a.top{ font-size:15px; font-weight:500; padding:10px 12px; }
.nav>ul{ gap:12px; }
.hdr-cta .btn{ padding:10px 18px; font-size:14.5px; }

/* ---------- 54.17 [08/03] 在线客服（面板 320px） ---------- */
.m-chat .bub{ width:56px; height:56px; background:var(--gold-500); color:var(--navy-900); }
.m-chat .pane{ width:320px; }

/* ---------- 54.18 [08/04] 弹窗组件（圆角 20px） ---------- */
.m-modal .box{ border-radius:20px; }

/* ---------- 54.19 [09/05] 标签徽章（New 蓝 / Hot 橙 / Popular 金） ----------
   规范写 Hot 用 #d97706 + 白字（实测 3.31:1 不达 AA），压深一档到 #b45309 + 白字（5.01:1）。 */
.m-tag{ font-size:11px; font-weight:800; }
.m-tag.pop{ background:var(--gold-500); color:var(--navy-900); border:0; }
.m-tag.new{ background:#2d6bbf; color:#fff; }
.m-tag.hot{ background:#b45309; color:#fff; }

/* ---------- 54.20 [02/06] 相关推荐 / [04/01] 案例卡片 ---------- */
.m-rel .card,.m-case .card{ border-radius:14px; }
.m-rel .grid,.m-case .grid{ gap:20px; }

/* ==========================================================================
   55. D/E 品牌主题层（模块库 风格变体.md 的通用第 4/5 套）
   README 说明：A/B/C 为每组件结构变体；D/E 为「覆盖不同品牌站点选型」的通用主题。
   S02 主站按 S02-设计规范 使用「深蓝+金」，故 D/E 以 <html data-th="d|e">
   整体换肤的方式实现，供同一套 51 组件在其它品牌站复用；首页 SOP 区块用
   .th-demo[data-th] 局部演示两种主题的真实色板。
   ========================================================================== */

/* ---------- 55.1 D · 黑金奢华（高级品牌：近黑 + 金） ----------
   设计要点：D 是**深色主题**，光换强调色不够——必须同时
   (1) 反转灰阶（否则 var(--gray-600) 的正文在深底上不可读）；
   (2) 翻转所有 `background:#fff` 的卡面（否则深字落在白卡上，
       而卡片本身的边框/阴影又假定浅底）；
   (3) 用 `html[data-th="d"] [data-v] h1..h4` 提权到 (0,2,2) 才压得住
       `.m-hero[data-v="b"] h1{color:var(--navy-700)}` 这类 (0,2,1) 的变体规则
       —— 否则变体 b 的白底 Hero 换肤后标题仍是近黑，直接看不见。
   */
html[data-th="d"]{
  --navy-900:#0a0a0a; --navy-800:#141414; --navy-500:#3a3320;
  /* [D 修4] --navy-700 的极性必须整体翻转。
     它在基础层同时承担两个角色：(a) 深色**表面**（.m-cmp/.m-pcmp thead th.hot、
     .m-sop .cat .k、.m-chat .bub、.m-rev .av 渐变）；(b) 深色**墨色**——全站 40+ 条
     `color:var(--navy-700)`（.brand / .nav a.top / .m-cmp tbody th / .m-cal .mo .dy /
     .m-base dd / .m-spec tbody th / .m-rev blockquote / .m-survey legend / .m-trust .badge
     / .fld label / .m-price .amt / .m-faq summary / .m-tabs a.on / .m-ftr[data-v=c] …）。
     D 把表面翻成近黑后，若 --navy-700 仍是 #1c1c1c，这些墨色全部变成**深字压深底**
     （实测 1.06–1.13:1，全站 300+ 页命中）。
     由于浅色表面已由 var(--surface) 统一接管，深色主题下这个令牌的"表面"语义只剩
     下面显式钉住的几处，故正确做法是把它翻成浅墨，再逐处回钉表面用法。 */
  --navy-700:#e9e2cc;
  --navy-100:#e9e2cc; --navy-50:#141414;
  --gold-600:#b8912a; --gold-500:#d4af37; --gold-300:#efdc9a; --gold-50:#241f11;
  /* [D 修1] 「浅底深金墨」令牌必须跟着表面一起翻。
     §51 用 --accent-ink 承载强调文字色，默认值是 --gold-ink(#7f6213)；D 把表面
     翻成近黑后 --gold-ink 仍是深金 → kicker / .m-rel .arr / .m-tl .yr /
     .m-case .res 等成「深金压深底」，实测 3.15–3.36:1。
     两处声明（--gold-ink 与 --accent-ink:var(--gold-ink)）都挂在 html 上，
     var() 在层叠之后才替换，故改 --gold-ink 一处即可覆盖两条取值路径。 */
  --gold-ink:#e8cc7a;
  --gray-900:#f4efe2; --gray-700:#d8d1c0; --gray-600:#b3aa96; --gray-400:#7d7565;
  --gray-200:#2e2e2e; --gray-100:#1e1e1e; --gray-50:#0f0f0f;
  --surface:#161616;
  --border:#3a3a3a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:0 14px 34px rgba(0,0,0,.55);
  --shadow-gold:0 4px 18px rgba(212,175,55,.35);
}
html[data-th="d"] [data-v] h1, html[data-th="d"] [data-v] h2,
html[data-th="d"] [data-v] h3, html[data-th="d"] [data-v] h4{ color:#f4efe2; }
html[data-th="d"] a{ color:var(--gold-300); }
html[data-th="d"] a:hover{ color:#fff; }
/* [D 修2] 金色实底上的文字必须回到深色。
   `html[data-th="d"] a{color:var(--gold-300)}` 特异性 (0,1,1) 压过
   `.btn-gold{color:var(--navy-900)}` (0,1,0)，实测金色实底上是浅金字 1.54:1。
   这里用 (0,2,1) 显式回深，不依赖 !important。 */
html[data-th="d"] a.btn-gold,
html[data-th="d"] button.btn-gold{ color:#141007; }
html[data-th="d"] a.btn-gold:hover,
html[data-th="d"] button.btn-gold:hover{ color:#000; }
/* [D 修3] --navy-700 在 D 是 #1c1c1c（近黑）。它同时充当
   .m-cmp/.m-pcmp thead th.hot 与 .m-sop .cat .k 的**表面色**，不能整体翻浅；
   而下面三处是把它当**文字色**用在已翻转的深表面上，只能定点改浅：
     .m-price .amt   卡面 #161616 上的价格数字（实测 1.11:1）
     .m-faq summary  details（已翻 #161616）内的问句（实测 1.12:1）
     .fld label      .m-form .form（已翻 #161616）内的字段名（实测 1.12:1） */
html[data-th="d"] .m-price .amt,
html[data-th="d"] .m-faq summary,
html[data-th="d"] .fld label{ color:#f4efe2; }
html[data-th="d"] .m-price .amt small{ color:#b3aa96; }
html[data-th="d"] .m-faq summary:hover{ background:rgba(255,255,255,.06); }
/* [D 修5] --navy-700 的**表面**用法逐处回钉成深色（写完 [D 修4] 翻转后它们会变成
   浅底 + 白/浅字，对比度 1.0x）。共 6 处，由 `grep -n "var(--navy-700)" | grep background` 可复核：
     .m-cmp thead th.hot / .m-pcmp thead th.hot  表头高亮列
     .m-sop .cat .k                              首页 SOP 分类角标
     .m-chat .bub                                 在线客服圆钮
     .m-rev .av / .m-team .av                     头像圆形（渐变，navy-700 是它的暗端） */
html[data-th="d"] .m-cmp thead th.hot,
html[data-th="d"] .m-pcmp thead th.hot,
html[data-th="d"] .m-sop .cat .k,
html[data-th="d"] .m-chat .bub{ background:#1c1c1c; }
html[data-th="d"] .m-chat .bub:hover{ background:#2a2a2a; }
html[data-th="d"] .m-rev .av,
html[data-th="d"] .m-team .av{
  background:linear-gradient(135deg,#1c1c1c,var(--navy-500)); }
html[data-th="d"] .m-cmp thead th.hot small,
html[data-th="d"] .m-pcmp thead th.hot .pr{ color:var(--gold-300); }
/* [已收敛] 卡面翻转不再逐个列举选择器。
   原先这里维护一张「哪些表面在基础层写死 background:#fff」的名单，翻成 #161616。
   实测反复踩坑：漏一个就是「深字压白卡」或「浅字压白卡」（.m-svc[data-v=c] .card、
   .m-feat[data-v=c]、.burger、.m-cookie … 都发生过）。现在基础层所有卡面一律引用
   var(--surface)，本主题把 --surface 设为 #161616 即可**结构性地**覆盖全部卡面，
   不再存在"漏列"这一失败模式。 */
html[data-th="d"] .m-spec tbody tr:nth-child(even){ background:#121212; }
html[data-th="d"] .m-cmp .tblwrap, html[data-th="d"] .m-pcmp .tblwrap,
html[data-th="d"] .m-spec .tblwrap, html[data-th="d"] .m-form .form,
html[data-th="d"] .m-faq details, html[data-th="d"] .m-sop .steps > li,
html[data-th="d"] .m-sop .cat, html[data-th="d"] .m-sop .vcard,
html[data-th="d"] .m-toc .side, html[data-th="d"] .m-modal .box{
  border-color:#3a3a3a;
}
html[data-th="d"] .btn-line{ border-color:#4a4433; color:#e9e2cc; }
html[data-th="d"] .btn-line:hover{ border-color:var(--gold-500); color:var(--gold-300); }
html[data-th="d"] .m-sop{ background:linear-gradient(180deg,#0f0f0f,#141414); }

/* ---------- 55.2 E · 薄荷清新（轻快现代：浅薄荷 + 翠绿） ----------
   设计要点：E 是**浅色主题**，令牌重映射即可，绝不能再写
   `html[data-th="e"] h1{color:...}` 这类全局标题色——它的特异性 (0,1,2)
   会压过 `.mod.dark h2{color:#fff}` (0,1,1)，把深色区块的标题染成深绿，
   深绿落在墨绿底上直接不可读（实测已复现）。深色区块的 `#fff` 标题必须保有优先权。
   */
html[data-th="e"]{
  --navy-900:#064e3b; --navy-800:#065f46; --navy-700:#047857; --navy-500:#0d9488;
  --navy-100:#d1fae5; --navy-50:#ecfdf5;
  --gold-600:#047857; --gold-500:#10b981; --gold-300:#6ee7b7; --gold-50:#f0fdf4;
  --border:#a7f3d0;
  --surface:#fff;
  --shadow-sm:0 1px 2px rgba(6,78,59,.06);
  --shadow:0 4px 14px rgba(6,78,59,.09);
  --shadow-lg:0 14px 34px rgba(6,78,59,.14);
  --shadow-gold:0 4px 14px rgba(16,185,129,.3);
}
html[data-th="e"] body{ background:#f6fffb; color:var(--gray-700); }
html[data-th="e"] a:hover{ color:var(--gold-600); }
/* 金色实心按钮：令牌重映射后底色是 --gold-500(#10b981)，
   若沿用 --navy-900(#064e3b) 作字色只有 3.4:1 且不足大字号阈值，
   改用加深一档的 --gold-600 作底 + 白字（4.9:1）。 */
html[data-th="e"] .btn-gold{ background:var(--gold-600); color:#fff; }
html[data-th="e"] .btn-gold:hover{ background:#065f46; color:#fff; }
/* [E 修1] .hot 表头底在 E 是 --navy-700(#047857)，其上的 small/.pr 沿用
   --gold-300(#6ee7b7) → 实测 3.60:1（fs 11–13，需 4.5）。
   改引 --navy-100(#d1fae5)：同底色 4.90:1。
   这里必须写全 (0,4,2) 才压得住 §54.14 的 `.m-cmp thead th.hot small` (0,3,1)。 */
html[data-th="e"] .m-cmp thead th.hot small,
html[data-th="e"] .m-pcmp thead th.hot .pr{ color:var(--navy-100); }
/* [E 修2] 「--gold-500 实底 + --navy-900 深字」这一族在 E 里只有 3.83:1。
   E 的 --gold-500 是亮翠绿 #10b981，无论配深字（#064e3b，3.83）还是白字（2.56）
   都不足 4.5。把它压深一档到 --gold-600(#047857) 再配白字 → 5.55:1，与 §55.2 的
   .btn-gold 处理一致。§54.19 的 .m-tag.pop 走同一逻辑。 */
html[data-th="e"] .m-svc .tag,
html[data-th="e"] .m-price .tag,
html[data-th="e"] .m-tag.pop,
html[data-th="e"] .m-pager[data-v="b"] .on,
html[data-th="e"] .m-cal .mo .dy.on,
html[data-th="e"] .m-chat .bub,
html[data-th="e"] .m-chat .bub:hover{ background:var(--gold-600); color:#fff; }
/* [E 修3] 渐变的最亮端不能用 --navy-500。
   E 的 --navy-500 是 #0d9488（较亮），压白字只有 3.74:1、压 --gold-300(#6ee7b7) 只有
   2.46:1。把这两处渐变收窄到 navy-900→navy-800：
     白字    → 9.63 / 8.47
     gold-300 → 8.47 / 5.04
   均在 4.5 以上。 */
html[data-th="e"] .m-rev .av,
html[data-th="e"] .m-team .av{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800)); }
html[data-th="e"] .m-spec thead th{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700)); }
/* [E 修4] 两处「渐变里混进 --navy-500 亮端」之外，还有两个点需要压深：
     .m-sop .cat .k  —— 底是 --navy-700(#047857)，墨是 --gold-300(#6ee7b7)，3.64:1
                        改底为 --navy-800(#065f46) → 5.04:1
     .brand .mark    —— 底渐变含 --navy-500(#0d9488) 亮端，墨是 --gold-300，亮端仅 2.46:1
                        收窄到 navy-900→navy-800 → 8.47 / 5.04 */
html[data-th="e"] .m-sop .cat .k{ background:var(--navy-800); }
html[data-th="e"] .brand .mark{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800)); }

/* ---------- 55.3 首页「模块 SOP」区块 ---------- */
.m-sop{ background:linear-gradient(180deg,#fff,var(--navy-50)); }
.m-sop .steps{ list-style:none; margin:0 0 44px; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:sop; }
/* 必须用子选择器：嵌套的 ul>li 也会被后代选择器命中，把子条目误渲染成卡片 */
.m-sop .steps > li{ position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:26px 22px 22px; box-shadow:var(--shadow-sm);
  border-top:3px solid var(--gold-500); }
.m-sop .steps .n{ display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; background:var(--gold-50); color:var(--gold-600);
  font-weight:800; font-size:14px; margin-bottom:12px; }
.m-sop .steps h3{ font-size:17px; margin-bottom:8px; }
.m-sop .steps p{ font-size:14px; color:var(--gray-600); margin:0 0 10px; }
.m-sop .steps ul{ list-style:none; margin:0; padding:0; font-size:13px;
  color:var(--gray-600); display:grid; gap:6px; }
.m-sop .steps ul li{ position:relative; padding-left:16px; line-height:1.5; }
.m-sop .steps ul li::before{ content:""; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--gold-500); }
.m-sop .steps > li::after{ content:"→"; position:absolute; right:-14px; top:50%;
  transform:translateY(-50%); color:var(--gold-500); font-weight:800; font-size:16px; }
.m-sop .steps > li:last-child::after{ display:none; }
.m-sop .cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px; }
.m-sop .cat{ display:flex; gap:14px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px;
  box-shadow:var(--shadow-sm); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.m-sop .cat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold-300); }
.m-sop .cat .k{ flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  background:var(--navy-700); color:var(--gold-300); display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:15px; }
.m-sop .cat h3{ font-size:15px; margin:0 0 3px; }
.m-sop .cat .c{ font-size:12px; font-weight:700; color:var(--gold-600); letter-spacing:.06em;
  text-transform:uppercase; }
.m-sop .cat p{ font-size:13px; color:var(--gray-600); margin:6px 0 0; }
.m-sop .vrow{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.m-sop .vcard{ border-radius:var(--radius); padding:16px; border:1px solid var(--border);
  background:var(--surface); text-align:center; }
.m-sop .vcard b{ display:block; font-size:13px; font-weight:800; color:var(--navy-700); margin-bottom:4px; }
.m-sop .vcard span{ font-size:12px; color:var(--gray-600); }
.m-sop .swatch{ height:44px; border-radius:8px; margin-bottom:12px; }
.m-sop .swatch.a{ background:linear-gradient(135deg,#faf7f0 50%,#c9a227 50%); }
.m-sop .swatch.b{ background:linear-gradient(135deg,#0b0f14 50%,#22d3ee 50%); }
.m-sop .swatch.c{ background:linear-gradient(135deg,#f5f4f1 50%,#0f3460 50%); }
.m-sop .swatch.d{ background:linear-gradient(135deg,#0a0a0a 50%,#d4af37 50%); }
.m-sop .swatch.e{ background:linear-gradient(135deg,#ecfdf5 50%,#10b981 50%); }
.m-sop .foot{ margin-top:26px; font-size:14px; color:var(--gray-600); text-align:center; }

@media (max-width:1000px){
  .m-sop .steps{ grid-template-columns:repeat(2,1fr); }
  .m-sop .steps > li:nth-child(2n)::after{ display:none; }
  .m-sop .cats{ grid-template-columns:repeat(2,1fr); }
  .m-sop .vrow{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .m-sop .steps{ grid-template-columns:1fr; }
  .m-sop .steps > li::after{ display:none; }
  .m-sop .cats{ grid-template-columns:1fr; }
  .m-sop .vrow{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   57. 变体组合缺陷收口（第三轮实测：主题层 × 变体层交互）
   ——为什么要有这一层——
   前三轮门禁只跑了「基础主题」，变体与主题的**交互**没被覆盖。补跑 D/E 主题
   实测页后暴露出一类新缺陷：不是某个主题写错，而是「变体 c 的浅底语义」与
   「§54.15 给元素自己加的暗带」冲突，三主题同时中招（base 3.41 只是靠大字号
   阈值侥幸过线）。此处按变体语义修正，而不是按主题打补丁。
   ========================================================================== */

/* ---------- 57.1 [03/04] 倒计时 · 变体 c 的深字压暗带 ----------
   §54.15（第 1176 行）给 `.m-count .u b` 自己加了
   `background:rgba(10,37,71,.55)` 暗带 + 金描边；而变体 c（第 561 行）把 `.u`
   改成 transparent + 描边，它的数字色是 --navy-700 深色 —— 深字落在自己那条
   半透明暗带上。合成后实测：base 3.41（40px 大字号，勉强过 3.0）、
   E 1.48、D 1.11，均为真实缺陷。
   变体 c 的语义是「浅底描边胶囊」，暗带与它语义冲突 → 在变体 c 下撤掉 b 的
   暗带与内边距，让数字回到浅底；D 是深色主题，再定点把数字改浅金。 */
.m-count[data-v="c"] .u b{ background:none; border:0; padding:0; }
html[data-th="d"] .m-count[data-v="c"] .u b{ color:var(--gold-300); }

/* ---------- 57.2 [03/04] 倒计时 · 分隔符 .sep 的浅金压浅底 ----------
   §54.15（第 1179 行）把 .sep 定为 --gold-300，而 §51（第 991 行）本意是
   --accent-ink。.sep 的内容是单字符「:」，门禁的 `txt.length < 2` 过滤把它
   整个跳过了 —— 属于**门禁盲区**，不是没有缺陷：base 浅底 1.57:1。
   回到 --accent-ink：它在浅底是深金（#7f6213，5.8:1），在深底由表面声明翻成
   浅金（gold-300），两端都成立。 */
.m-count .sep{ color:var(--accent-ink); }

/* ==========================================================================
   56. 变体响应对齐层（修复移动端真裁切）
   ——为什么必须有这一层——
   各模块的 [data-v="x"] 变体规则写在基础媒体查询**之后**，且多带一个属性选择器：
     .m-case[data-v="b"] .grid  特异性 (0,3,0)
     @media 内 .m-case .grid    特异性 (0,2,0)
   于是移动端折叠被更高特异性的变体规则覆盖，网格在 390px 屏上仍按 2-3 列排布，
   卡片被 body 的 overflow-x:hidden 静默裁掉（内容不可见、也不出现滚动条）。
   _diag_mobile_gate.py 的「真裁切」判定就是在这个前提下发现在 m-case 上的。
   这里用同特异性（含变体选择器）的规则在媒体查询内显式折叠，专门压过顶层变体规则。
   ========================================================================== */

/* 3 列变体：平板起降到 2 列 */
@media (max-width:900px){
  .m-gal[data-v="b"] .grid,
  .m-team[data-v="b"] .grid,
  .m-cal[data-v="b"] .slots{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* 2 列变体：手机起降到 1 列（m-stats/m-kpi 为短数字，保留 2 列） */
@media (max-width:640px){
  .m-cat[data-v="c"] .grid,
  .m-cust[data-v="b"] .opts,
  .m-adv[data-v="b"] .grid,
  .m-adv[data-v="c"] .grid,
  .m-feat[data-v="b"] .grid,
  .m-case[data-v="b"] .grid,
  .m-about[data-v="c"] .grid{ grid-template-columns:minmax(0,1fr); }

  .m-gal[data-v="b"] .grid,
  .m-team[data-v="b"] .grid,
  .m-cal[data-v="b"] .slots{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* 变体 b 的案例卡是「横排 + 固定 200px 缩略图」，卡片降到 1 列后
     200px 缩略图会把卡片撑破，必须同时还原成竖排自适应图。 */
  .m-case[data-v="b"] .card{ flex-direction:column; }
  .m-case[data-v="b"] .thumb{ width:auto; flex:1 1 auto; aspect-ratio:16/9; }
}

@media (max-width:420px){
  .m-gal[data-v="b"] .grid,
  .m-team[data-v="b"] .grid,
  .m-cal[data-v="b"] .slots{ grid-template-columns:minmax(0,1fr); }
}

/* ==================== 图片槽位降级块 ====================
   图库（assets/img）为空时，img_slot() 输出 .img-ph 而不是 <img>：
     · 不产生裂图，也不引用任何外部资源 → 满足「资源外链数 = 0」；
     · 盒尺寸与 aspect-ratio 与真实图片一致 → 换成真图时不产生 CLS；
     · role="img" + aria-label 由渲染器写入，语义不丢。
   填入图片后本段样式不再命中，无需改动渲染器。 */
.img-ph{
  display:block; width:100%; height:100%; align-self:stretch; flex:1 1 auto;
  min-height:0; position:relative; overflow:hidden; border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 9px, rgba(255,255,255,0) 9px 18px),
    var(--navy-100);
}
.img-ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 95% at 20% 14%, rgba(255,255,255,.34), transparent 62%);
}
.img-ph--wide{ aspect-ratio:16/9; }
.img-ph--tall{ aspect-ratio:3/4; }
.img-ph--square{ aspect-ratio:1/1; }

/* 深底容器内（如案例卡、深色 CTA）降级块用深一档底色，避免白块刺眼 */
.m-case .img-ph,.m-blog .img-ph{ background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 9px, rgba(255,255,255,0) 9px 18px),
    var(--navy-50); }

.m-hero{position:relative;overflow:hidden}.m-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}.m-hero-shade{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.65))}

img.img-ph{object-fit:cover;display:block;width:100%;height:100%}

/* === lingomere logo rollout 2026-09-28 === */
a.brand, header .brand, .main-header .brand, .site-header .brand, .m-hdr .brand {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.brand-logo, .brand .mark, .brand .lg, .brand .brand-mark {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  padding: 0 !important;
  max-width: none !important;
}
.brand-logo-img, .brand .mark img, .brand .lg img, .brand .brand-mark img {
  height: 36px !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
}
.brand-text, .brand .mark + span, .brand .lg + span, .brand .brand-mark + span {
  display: none !important;
}
.brand-logo::after, .brand .mark::after, .brand .lg::after, .brand .brand-mark::after {
  display: none !important;
}

/* ---------- 2026-09-28 大卡片改造：m-trust 徽章区 -> 信息大卡片（S27 info-block 样式移植） ---------- */
.m-trust .trust-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.m-trust .trust-grid[data-cols="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.m-trust .trust-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.m-trust .trust-card .trust-img{ line-height:0; }
.m-trust .trust-card .trust-img img{ width:100%; height:160px; object-fit:cover; display:block; border-radius:0; }
.m-trust .trust-card h3{ font-size:1.02rem; line-height:1.3; color:var(--navy-800); margin:0; padding:14px 18px 8px; }
.m-trust .trust-card p{ font-size:.92rem; line-height:1.55; color:var(--gray-600); margin:0; padding:0 18px 18px; }
@media (max-width:900px){
  .m-trust .trust-grid,.m-trust .trust-grid[data-cols="3"]{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
}

/* cotizacion anchor (20260930) */
html{scroll-behavior:smooth}
#cotizacion{scroll-margin-top:96px}