@charset "UTF-8";

/* =============================================================
   乾润科技官网 · tokens.css  v1.0
   -------------------------------------------------------------
   来源：02-设计令牌.md §9.2（可直接粘贴的令牌块）+ §3/§4/§5/§6/§8
   系统：BMW 主干 + IBM Carbon 排版/表格工程学 + Tesla 配置器交互
   基线：移动端优先（Vivo Fold6 折叠态 400px 为设计基准），向上增强
   断点：400 / 700 / 1024 / 1200

   ★★ 类名契约（全站稳定，勿改）★★
   其他页面（quote.html 等）请直接引用以下类名，不要另起一套：

   【布局】.container .section .section-head .section-title .eyebrow
           .grid .grid-2 .grid-3 .grid-4 .grid-products .grid-cases
   【文字】.num .unit .cur .tilde .accent .lead .caption .visually-hidden
   【按钮】.btn .btn-primary .btn-secondary .btn-ghost .btn-block .btn-lg
   【卡片】.card .card-link .card-body
   【徽标】.badge
   【表格】.tbl-wrap .tbl .tbl-stack（移动端转卡片） .is-win .is-total
   【对照表构件】.cmp-cards .cmp-card .cmp-card--win .kv
   【硬数据构件】.hardfacts .hardfacts--3 .hf .hf-value .hf-label .hf-note
   【折叠】.fold（原生 details）
   【阅读面】.reading（长文浅色例外面）
   【摘要】.answer-first
   【页头】.site-header .header-inner .brand .nav .nav-link .nav-more
           .lang-switch .lang-sep
   【底部悬浮条】.fabbar .fabbar-btn .fabbar-btn--primary
   【页脚】.site-footer .footer-cols .footer-col
   【图片】.shot .shot--hero .shot--card .shot--square .shot--wide .ph
   【报价页预留】.quote-layout .quote-result .price-range .stepper .step
                .field .field-label .opt-grid .opt .opt--on .disclaimer

   与本文档的偏差（已在代码内注明）：见文件末尾「偏差与待补」注释块。
   ============================================================= */

/* -------------------------------------------------------------
   1. 设计令牌（02-设计令牌.md §9.2）
   ------------------------------------------------------------- */
:root {
  /* ---- Accent（全站唯一强调色 · 香槟金 #C8A96A）----
     三重锁：低饱和 46% / 面积 <5% / 禁止金色与大圆角、阴影同时出现 */
  --accent-50:#FBF8F0; --accent-100:#F5EEDD; --accent-200:#EADDC0;
  --accent-300:#DCC799; --accent-400:#C8A96A; --accent-500:#AE8F52;
  --accent-600:#8E7442; --accent-700:#6B5733;
  --accent-a08:rgba(200,169,106,0.08);
  --accent-a18:rgba(200,169,106,0.18);
  --accent-a24:rgba(200,169,106,0.24);

  /* ---- Neutral（深色骨架）---- */
  --bg-base:#0E1116; --bg-recessed:#0A0D11; --bg-surface:#151A21;
  --bg-elevated:#1C222B; --bg-overlay:rgba(8,10,13,0.72);
  --bg-zebra:#12161C;                       /* 表格斑马纹（§4.4） */
  --border-subtle:#232A34; --border-default:#2E3743; --border-strong:#3A4552;
  --text-primary:#F2F4F7; --text-secondary:#A0A8B4;
  --text-tertiary:#7A828F; --text-disabled:#5A626E;

  /* ---- Reading Surface（长文例外 · 浅色，全站唯一浅色面）---- */
  --bg-reading:#F7F8F9; --bg-reading-alt:#FFFFFF; --border-reading:#E3E6EA;
  --text-on-reading:#1B2027; --text-on-reading-2:#5A626E;
  --accent-on-reading:#8E7442;              /* 浅底上禁用 --accent-400 */

  /* ---- Semantic（语义色与强调色永不并列同单元）---- */
  --color-success:#4EA685; --color-warning:#D98A3C;
  --color-danger:#D9544D;  --color-info:#5B93C9;

  /* ---- Fonts（一期：系统栈，零 Web Font，LCP < 2.5s）---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "HarmonyOS Sans SC", "MiSans",
    "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
    "Hiragino Sans GB", sans-serif;
  --font-num: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---- Type Scale（移动为基准；≥700 / ≥1024 逐级增强）---- */
  --fs-display:34px;   --fs-h1:28px;      --fs-h2:22px;   --fs-h3:18px;
  --fs-h4:16px;        --fs-body-l:17px;  --fs-body:16px; --fs-body-s:14px;
  --fs-caption:13px;   --fs-label:12px;
  --fs-num-display:40px; --fs-num-table:15px;

  /* ---- Line-height / Letter-spacing（中文值）---- */
  --lh-body:1.75;      --lh-heading:1.25;
  --ls-tight:-0.02em;  --ls-normal:0.01em; --ls-label:0.06em;

  /* ---- Spacing（4px 基准）---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;

  /* ---- Radius（工业精度 · 小圆角，功能组件 ≤8px）---- */
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px;
  --radius-lg:8px; --radius-pill:999px;

  /* ---- Elevation（深底：描边亮度分层为主，阴影为辅）---- */
  --elevation-0:none;
  --elevation-1:0 1px 2px rgba(0,0,0,0.40);
  --elevation-2:0 4px 12px rgba(0,0,0,0.45);
  --elevation-3:0 12px 32px rgba(0,0,0,0.55);
  --elevation-4:0 24px 64px rgba(0,0,0,0.65);

  /* ---- Z-index ---- */
  --z-base:0; --z-sticky:100; --z-header:200; --z-fab:300;
  --z-dropdown:400; --z-modal:500; --z-toast:600;

  /* ---- Component ---- */
  --btn-min-w:168px;                        /* 英文膨胀 30–60% 双侧安全 */
  --btn-h-mobile:48px; --btn-h-desktop:44px;
  --input-h:48px; --input-h-lg:56px;        /* 报价器下拉/多选 ≥56px */
  --header-h:64px; --fab-h:64px;
  --container-max:1200px;
  --i18n-switcher-w:72px;                   /* 语言切换器固定宽，防切换重排 */

  /* ---- 页边距（按断点覆盖）---- */
  --gutter:20px;
}

/* -------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--space-4));
}
body {
  margin:0;
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-normal);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p,dl,dd,dt,ul,ol,figure,blockquote,table,details {
  margin:0;
}
ul,ol { padding:0; list-style:none; }
img,svg,video { display:block; max-width:100%; height:auto; }
img { border:0; }
button,input,select,textarea { font:inherit; letter-spacing:inherit; color:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
a { color:var(--accent-400); text-decoration:none; }
a:hover { color:var(--accent-300); }
strong,b { font-weight:600; }                /* 深底禁用 700 中文字重 */
table { border-collapse:collapse; border-spacing:0; width:100%; }
hr { border:0; border-top:1px solid var(--border-subtle); margin:0; }
:target { scroll-margin-top:calc(var(--header-h) + var(--space-4)); }

/* 全局焦点可见性（全站统一，任何组件不得移除） */
:focus-visible {
  outline:2px solid var(--accent-400);
  outline-offset:2px;
  border-radius:2px;
}

/* 选择文本 */
::selection { background:var(--accent-a24); color:var(--text-primary); }

/* 深色滚动条（P2：深色主题下默认滚动条突兀） */
* { scrollbar-color:var(--border-strong) transparent; scrollbar-width:thin; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:4px; }
*::-webkit-scrollbar-track { background:transparent; }

/* -------------------------------------------------------------
   3. 排版基础
   ------------------------------------------------------------- */
h1,h2,h3,h4 { font-weight:600; line-height:var(--lh-heading); letter-spacing:var(--ls-tight); }
h1 { font-size:var(--fs-h1); }
h2 { font-size:var(--fs-h2); }
h3 { font-size:var(--fs-h3); }
h4 { font-size:var(--fs-h4); letter-spacing:0; }

p { line-height:var(--lh-body); }
p + p { margin-top:var(--space-4); }

/* 中英混排（一期中文） */
[lang="zh"],[lang="zh-CN"] {
  word-break:normal;
  overflow-wrap:anywhere;
  line-break:strict;
  text-spacing-trim:space-first;             /* 渐进增强，不支持则忽略 */
}
[lang="en"] {
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:auto;
  line-break:auto;
}

/* 等宽数字（一切承载数据的数字必须走这里） */
.num, table td.num, table th.num, .hf-value, .price-range {
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-variant-ligatures:none;
}

/* ---- 数字/单位/货币/区间工具类（§3.4）---- */
.num   { margin-inline:0.15em; }
.unit  { font-size:0.72em; color:var(--text-tertiary);
         margin-inline-start:0.12em; font-weight:400; }
.cur   { font-size:0.62em; color:var(--text-tertiary);
         margin-inline-end:0.1em; font-weight:500; }
.tilde { margin-inline:0.3em; color:var(--text-tertiary); font-weight:400; }
.accent{ color:var(--accent-400); }
.mono  { font-family:var(--font-mono); }

.lead    { font-size:var(--fs-body-l); color:var(--text-primary); }
.caption { font-size:var(--fs-caption); color:var(--text-tertiary); line-height:1.6; }
.label   { font-size:var(--fs-label); font-weight:500;
           letter-spacing:var(--ls-label); color:var(--text-secondary); }

.visually-hidden {
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:var(--space-4); top:-60px; z-index:var(--z-toast);
  background:var(--accent-400); color:var(--bg-base);
  padding:10px 16px; border-radius:var(--radius-sm); font-weight:600;
}
.skip-link:focus { top:var(--space-2); }

/* -------------------------------------------------------------
   4. 布局
   ------------------------------------------------------------- */
.container {
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section { padding-block:var(--space-12); }          /* 移动 48px */
.section + .section { border-top:1px solid var(--border-subtle); }
.section--tight { padding-block:var(--space-8); }

.section-head { margin-bottom:var(--space-6); }
.eyebrow {
  font-size:var(--fs-label); font-weight:500; letter-spacing:var(--ls-label);
  color:var(--text-secondary); text-transform:none;
  margin-bottom:var(--space-2);
}
.section-title { font-size:var(--fs-h2); }
.section-sub {
  margin-top:var(--space-3);
  color:var(--text-secondary);
  font-size:var(--fs-body);
  max-width:62ch;
}

.grid { display:grid; gap:var(--space-4); grid-template-columns:1fr; }
.grid-products { display:grid; gap:var(--space-3); grid-template-columns:repeat(2,1fr); }
.grid-cases    { display:grid; gap:var(--space-4); grid-template-columns:1fr; }

/* -------------------------------------------------------------
   5. 按钮
   ------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-width:var(--btn-min-w);                /* 只设 min-width，不设固定宽 */
  min-height:var(--btn-h-mobile);
  padding:0 var(--space-6);
  border-radius:var(--radius-sm);            /* 4px：金 + 大圆角 禁止 */
  font-size:var(--fs-body); font-weight:600; letter-spacing:0.02em;
  line-height:1.4; text-align:center;
  box-shadow:none;                           /* 深底按钮不靠投影 */
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary   { background:var(--accent-400); color:var(--bg-base); border:1px solid var(--accent-400); }
.btn-primary:hover   { background:var(--accent-300); border-color:var(--accent-300); color:var(--bg-base); }
.btn-primary:active  { background:var(--accent-500); border-color:var(--accent-500); }
.btn-secondary { background:transparent; color:#E4E8EE; border:1px solid var(--border-strong); }
.btn-secondary:hover { border-color:var(--accent-400); color:var(--accent-400); }
.btn-secondary:active{ border-color:var(--accent-500); color:var(--accent-500); }
.btn-ghost     { background:transparent; color:var(--text-secondary); border:1px solid transparent;
                 min-width:0; padding:0 var(--space-4); }
.btn-ghost:hover { background:rgba(255,255,255,0.05); color:var(--text-primary); }
.btn-ghost:active{ background:rgba(255,255,255,0.08); }
.btn[disabled],.btn.is-disabled {
  background:var(--border-subtle); color:var(--text-disabled);
  border-color:transparent; pointer-events:none;
}
.btn-block { display:flex; width:100%; }
.btn-lg { min-height:var(--input-h-lg); padding-block:var(--space-2); white-space:normal; }
.btn-narrow { min-width:0; }
.btn > svg { flex:0 0 auto; width:18px; height:18px; }

/* -------------------------------------------------------------
   6. 卡片（分层靠描边亮度，不靠阴影）
   ------------------------------------------------------------- */
.card {
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  box-shadow:var(--elevation-0);
}
.card-body { padding:0; }
.card-link {
  display:block; color:inherit;
  transition:background-color .18s ease, border-color .18s ease;
}
.card-link:hover { background:var(--bg-elevated); border-color:var(--border-default); color:inherit; }
.card-link:hover .card-title { color:var(--accent-400); }
.card-title { font-size:var(--fs-h4); font-weight:600; margin-bottom:var(--space-2); }

/* -------------------------------------------------------------
   7. Badge
   ------------------------------------------------------------- */
.badge {
  display:inline-block;
  background:rgba(200,169,106,0.10);
  color:var(--accent-400);
  border:1px solid var(--accent-a24);
  border-radius:var(--radius-xs);
  padding:2px var(--space-2);
  font-size:var(--fs-label); font-weight:500; letter-spacing:var(--ls-label);
  line-height:1.4;
}
.badge-neutral { background:transparent; color:var(--text-secondary); border-color:var(--border-default); }

/* -------------------------------------------------------------
   8. 表格（★ 核心差异化组件，§4.4）
   ------------------------------------------------------------- */
.tbl-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl { width:100%; font-size:var(--fs-num-table); background:transparent; }
.tbl caption {
  caption-side:bottom; text-align:left;
  font-size:var(--fs-caption); color:var(--text-tertiary); padding-top:var(--space-2);
}
.tbl thead th {
  font-size:var(--fs-label); font-weight:500; letter-spacing:var(--ls-label);
  color:var(--text-secondary); background:var(--bg-recessed);
  text-align:left; padding:0 var(--space-3); height:40px;
  border-bottom:2px solid var(--border-strong);   /* 表头 2px 下边 */
  white-space:nowrap;
}
.tbl thead th.num { text-align:right; }
.tbl tbody td {
  height:48px; padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border-subtle);
  font-size:var(--fs-body-s); font-weight:400;
  vertical-align:middle;
}
.tbl tbody th[scope="row"] {
  text-align:left; font-weight:500; font-size:var(--fs-body-s);
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary); background:transparent;
}
.tbl tbody td.num {
  text-align:right; font-size:var(--fs-num-table); font-weight:500;
  font-family:var(--font-num); font-variant-numeric:tabular-nums lining-nums;
}
.tbl tbody tr:nth-child(even) { background:var(--bg-zebra); }
.tbl tbody tr:hover { background:var(--accent-a08); }
.tbl tbody tr:last-child td,
.tbl tbody tr:last-child th { border-bottom:0; }
.tbl td.is-key, .tbl td.num.is-key { color:var(--accent-400); font-weight:600; }
.tbl tr.is-total td { border-top:2px solid var(--border-strong); }
.tbl tr.is-total td.num { color:var(--accent-400); font-weight:600; }
.tbl tr.is-win { }                                    /* 桌面态由 .cmp-card--win 承担 */

/* ---- .tbl-stack：≤700px 转为「每张卡一行/一个主体」的纵向卡片 ----
   单 DOM 单数据源，不用 JS 重建，内容始终可被 AI 抓取。
   用法：<table class="tbl tbl-stack">，行首 <th scope="row">，
        其余 <td data-label="列名">。 */
@media (max-width:700px) {
  .tbl-stack thead {
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .tbl-stack,
  .tbl-stack tbody,
  .tbl-stack tr,
  .tbl-stack th,
  .tbl-stack td { display:block; width:auto; }
  /* 移动端：<caption> 转回正常块级说明文字，覆盖桌面态 caption-side:bottom
     （table 变 display:block 后 caption-side 失效，会被浏览器竖排/异形排版） */
  .tbl-stack caption {
    display:block; width:auto;
    caption-side:top;
    text-align:left;
    font-size:var(--fs-caption); color:var(--text-tertiary);
    line-height:1.6; padding:0 0 var(--space-4);
  }
  .tbl-stack tr {
    background:var(--bg-surface);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);
    margin-bottom:var(--space-3);
  }
  .tbl-stack tr:last-child { margin-bottom:0; }
  .tbl-stack tr.is-win { border-color:var(--accent-400); }
  .tbl-stack th[scope="row"] {
    font-size:var(--fs-h4); font-weight:600; color:var(--text-primary);
    padding:0 0 var(--space-2); border-bottom:0;
  }
  .tbl-stack td {
    display:flex; align-items:baseline; justify-content:space-between;
    gap:var(--space-3); height:auto;
    padding:var(--space-2) 0; border-bottom:0;
    font-size:var(--fs-body-s);
  }
  .tbl-stack td + td { border-top:1px solid var(--border-subtle); }
  .tbl-stack td::before {
    content:attr(data-label);
    flex:0 0 auto;
    color:var(--text-secondary);
    font-size:var(--fs-caption); font-weight:400;
  }
  .tbl-stack td.num { font-size:var(--fs-body); }
}

/* -------------------------------------------------------------
   9. 对照表构件（跨页复用 · 开钢模 vs 复模 / 服务范围对照）
   桌面：两栏对比卡；移动：上下堆叠（本身就是卡片，无需转置）
   ------------------------------------------------------------- */
.cmp-cards { display:grid; gap:var(--space-4); grid-template-columns:1fr; }
.cmp-card {
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-4);
}
.cmp-card--win { border-color:var(--accent-400); }     /* 胜出项金色描边 */
.cmp-card__title {
  font-size:var(--fs-h4); font-weight:600; margin-bottom:var(--space-1);
}
.cmp-card__tag { font-size:var(--fs-caption); color:var(--text-tertiary); margin-bottom:var(--space-3); }
.cmp-card--win .cmp-card__tag { color:var(--accent-400); }

/* 名值对列表（对照卡 / 报价成本拆解通用） */
.kv {
  display:grid; grid-template-columns:minmax(76px,auto) 1fr;
  column-gap:var(--space-3); margin:0;
}
.kv > dt {
  color:var(--text-secondary); font-size:var(--fs-caption);
  padding:var(--space-2) 0; border-top:1px solid var(--border-subtle);
}
.kv > dd {
  margin:0; text-align:right; font-size:var(--fs-body-s);
  padding:var(--space-2) 0; border-top:1px solid var(--border-subtle);
}
.kv > dt:nth-of-type(1), .kv > dd:nth-of-type(1) { border-top:0; }
.kv--lg > dd { font-size:var(--fs-body); }
.kv .is-key { color:var(--accent-400); font-weight:600; }

/* -------------------------------------------------------------
   10. 硬数据 <dl> 构件（跨页复用 · tabular-nums）
   用法：
   <dl class="hardfacts">
     <div class="hf"><dt class="hf-label">最小起订</dt>
       <dd class="hf-value"><span class="num">10</span><span class="unit">件</span></dd></div>
   </dl>
   ------------------------------------------------------------- */
.hardfacts {
  display:grid; gap:var(--space-2);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;
}
.hardfacts--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hardfacts--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }

.hf {
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-3);
  text-align:center;
  min-width:0;
}
.hf-label {
  font-size:var(--fs-caption); color:var(--text-secondary);
  line-height:1.4; margin-bottom:var(--space-1);
  /* 英文版标签膨胀：允许换行但不溢出 */
  overflow-wrap:break-word;
}
.hf-value {
  font-size:30px; font-weight:600; line-height:1.1;
  letter-spacing:0.02em; color:var(--accent-400);
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums lining-nums;
  overflow-wrap:anywhere;
}
.hardfacts--3 .hf-value { font-size:24px; }
.hardfacts--4 .hf-value { font-size:22px; }
.hf-note {
  font-size:var(--fs-caption); color:var(--text-tertiary);
  margin-top:var(--space-1); line-height:1.4;
}
.hf--neutral .hf-value { color:var(--text-primary); }

/* -------------------------------------------------------------
   11. 图片（工厂实拍优先 · §4.9）
   ------------------------------------------------------------- */
.shot { margin:0 0 var(--space-6); }
.shot > img,
.shot > .ph {
  width:100%;
  border-radius:var(--radius-md);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);   /* 防深底边缘糊 */
}
.shot--hero  > img, .shot--hero  > .ph { aspect-ratio:20/9;  border-radius:var(--radius-lg); }
.shot--card  > img, .shot--card  > .ph { aspect-ratio:4/3;   border-radius:var(--radius-md); }
.shot--square> img, .shot--square> .ph { aspect-ratio:1/1;   border-radius:var(--radius-md); }
.shot--wide  > img, .shot--wide  > .ph { aspect-ratio:3/2;   border-radius:var(--radius-lg); }
.shot figcaption {
  font-size:var(--fs-caption); color:var(--text-tertiary); margin-top:var(--space-2);
}
/* 实拍待补占位：虚线框 + 文字，不用灰块、不用通用插画 */
.ph {
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--border-default);
  border-radius:var(--radius-md);
  background:var(--bg-recessed);
  color:var(--text-tertiary);
  font-size:var(--fs-caption);
  text-align:center;
  padding:var(--space-3);
  line-height:1.5;
}
.ph--sm { min-height:72px; font-size:var(--fs-label); }

/* 二维码：白底 + 内边距，保证深色背景下可扫 */
.qr-box { width:168px; max-width:100%; }
.qr-img {
  display:block; width:100%; aspect-ratio:1/1;
  border-radius:var(--radius-md);
  background:#fff;                       /* 白底，二维码必须 */
  padding:8px;
  box-shadow:inset 0 0 0 1px var(--border-default);
}
.qr-cap {
  font-size:var(--fs-caption); color:var(--text-tertiary);
  margin-top:var(--space-2); line-height:1.5;
}
/* 待补行内标记（未填数据的字段用，已填的不要套） */
.inline-tbd {
  border-bottom:1px dashed var(--border-default);
  color:var(--text-tertiary);
}
/* -------------------------------------------------------------
   12. 折叠（原生 details，内容永不出 DOM —— GEO 红线）
   ------------------------------------------------------------- */
.fold {
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.fold > summary {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  min-height:var(--btn-h-mobile);
  padding:var(--space-3) var(--space-4);
  cursor:pointer; list-style:none;
  font-size:var(--fs-body); font-weight:600; color:var(--text-primary);
  -webkit-tap-highlight-color:transparent;
}
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::after {
  content:""; flex:0 0 auto;
  width:10px; height:10px;
  border-right:1.5px solid var(--text-secondary);
  border-bottom:1.5px solid var(--text-secondary);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.fold[open] > summary::after { transform:rotate(-135deg) translateY(-2px); }
.fold[open] > summary { border-bottom:1px solid var(--border-subtle); }
.fold__body { padding:var(--space-4); }

/* -------------------------------------------------------------
   13. Reading Surface（长文浅色例外面 · §2.4）
   仅 4 类容器可用：FAQ 答案 / 案例正文 / 工艺长文 / details 展开区
   ------------------------------------------------------------- */
.reading {
  background:var(--bg-reading);
  color:var(--text-on-reading);
  border:1px solid var(--border-reading);
  border-radius:var(--radius-md);
  padding:var(--space-4);
}
.reading p { color:var(--text-on-reading); }
.reading .caption, .reading figcaption { color:var(--text-on-reading-2); }
.reading strong { color:var(--text-on-reading); font-weight:600; }
.reading .accent, .reading .hf-value { color:var(--accent-on-reading); }
.reading a { color:var(--accent-on-reading); }
.reading .kv > dt { color:var(--text-on-reading-2); border-top-color:var(--border-reading); }
.reading .kv > dd { border-top-color:var(--border-reading); }
.reading hr, .reading .rule { border-top-color:var(--border-reading); }

/* -------------------------------------------------------------
   14. Answer-First 摘要块（★ 全站最重要可引用单元，置于 h1 正下方）
   ------------------------------------------------------------- */
.answer-first {
  font-size:var(--fs-body);                  /* 红线：正文不得 < 16px */
  line-height:1.75;
  color:var(--text-secondary);
  max-width:64ch;
}

/* -------------------------------------------------------------
   15. 页头
   栅格：logo | 导航 | 语言切换器(72px 列，一期 hidden) | CTA
   语言切换器列定义在栅格里，二期移除 hidden 即零重排。
   ------------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(14,17,22,0.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-subtle);
}
/* 默认（移动）：flex 换行。品牌靠左，汉堡靠右，导航开启时占整行 */
.header-inner {
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap:var(--space-3); row-gap:0;
  min-height:var(--header-h);
  padding-block:var(--space-2);
}
.brand { display:flex; align-items:baseline; gap:var(--space-2); min-width:0; margin-right:auto; order:0; }
.brand__name {
  font-size:17px; font-weight:600; color:var(--text-primary);
  letter-spacing:0.02em; white-space:nowrap;
}
.brand__sub {
  font-size:var(--fs-label); color:var(--text-tertiary); white-space:nowrap;
}
.brand:hover .brand__name { color:var(--text-primary); }

/* 汉堡（≤700px 显示） */
.nav-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; margin-right:-12px;
  color:var(--text-primary); border-radius:var(--radius-sm);
}
.nav-toggle:hover { background:rgba(255,255,255,0.05); }
.nav-toggle svg { width:22px; height:22px; }

.nav {
  display:none;
  order:3; flex:1 0 100%;
  border-top:1px solid var(--border-subtle);
  margin-top:var(--space-2); padding-top:var(--space-2);
  /* 英文膨胀 30–60%：禁止换行，容器预留冗余，溢出收「更多」 */
}
.nav.is-open { display:block; }
.nav-list { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.nav-link {
  display:flex; align-items:center;
  min-height:48px; padding-inline:var(--space-3);
  font-size:15px; font-weight:400; color:var(--text-secondary);
  white-space:nowrap;                        /* 红线：导航项禁止换行 */
  border-bottom:2px solid transparent;
}
.nav-link:hover { color:var(--text-primary); }
.nav-link[aria-current="page"] {
  color:var(--text-primary); font-weight:500;
  border-bottom-color:var(--accent-400);     /* 激活：2px 底边金 */
}
.nav-more { display:none; }                  /* 一期 hidden，二期/英文溢出时启用 */

/* 语言切换器（一期 DOM 保留但 hidden） */
.lang-switch {
  display:flex; align-items:center; justify-content:center;
  gap:var(--space-2); width:var(--i18n-switcher-w);
  order:1;
  font-size:var(--fs-caption); font-weight:500; letter-spacing:0.02em;
}
.lang-switch a { min-width:44px; min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; color:var(--text-tertiary); }
.lang-switch a.is-active { color:var(--text-primary); font-weight:500; }
.lang-sep { width:1px; height:12px; background:var(--border-strong); flex:0 0 auto; }

.header-cta { display:none; }

/* -------------------------------------------------------------
   16. 固定底部悬浮操作条（★ 全站转化中枢 · P0）
   左 微信 / 中 电话 / 右 在线报价（唯一 Primary 实底）
   仅在 ≤768px 显示；/quote/ 页用 body.no-fab 关闭
   ------------------------------------------------------------- */
.fabbar {
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-fab);
  grid-template-columns:1fr 1fr 1.2fr;
  align-items:stretch;
  min-height:var(--fab-h);
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(14,17,22,0.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--border-subtle);
}
.fabbar-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-width:96px; min-height:48px;
  padding:var(--space-1) var(--space-2);
  color:var(--text-secondary);
  font-size:var(--fs-label); font-weight:500; letter-spacing:0.02em;
  border-radius:0;
  -webkit-tap-highlight-color:transparent;
}
.fabbar-btn > svg { width:20px; height:20px; }
.fabbar-btn:hover { color:var(--text-primary); }
.fabbar-btn--primary {
  background:var(--accent-400); color:var(--bg-base);
  min-width:120px;
}
.fabbar-btn--primary:hover { background:var(--accent-300); color:var(--bg-base); }
.fabbar-btn--primary:active { background:var(--accent-500); }
.fabbar-btn--primary > svg { color:var(--bg-base); }

@media (max-width:768px) {
  .fabbar { display:grid; }
  body { padding-bottom:calc(var(--fab-h) + env(safe-area-inset-bottom)); }
}
body.no-fab .fabbar { display:none !important; }
body.no-fab { padding-bottom:0 !important; }

/* -------------------------------------------------------------
   17. 页脚
   ------------------------------------------------------------- */
.site-footer {
  border-top:1px solid var(--border-subtle);
  background:var(--bg-recessed);
  padding-block:var(--space-10) var(--space-8);
  font-size:var(--fs-body-s);
}
.footer-cols { display:grid; gap:var(--space-6); grid-template-columns:1fr; }
.footer-col__title {
  font-size:var(--fs-label); font-weight:500; letter-spacing:var(--ls-label);
  color:var(--text-secondary); margin-bottom:var(--space-3);
}
.footer-col li + li { margin-top:var(--space-2); }
.footer-col a { color:var(--text-secondary); }
.footer-col a:hover { color:var(--accent-400); }
.footer-bottom {
  margin-top:var(--space-8); padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4);
  justify-content:space-between;
  font-size:var(--fs-caption); color:var(--text-tertiary);
}

/* -------------------------------------------------------------
   18. 报价页预留布局（供 quote.html 直接引用，§8.3）
   ------------------------------------------------------------- */
.quote-layout { display:grid; gap:var(--space-6); grid-template-columns:1fr; }
.quote-result { }
.price-range {
  font-size:var(--fs-num-display); font-weight:600; line-height:1.05;
  letter-spacing:0.02em; color:var(--accent-400);
}
.disclaimer {
  font-size:var(--fs-caption); color:var(--text-tertiary); line-height:1.6;
}
.stepper { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-6); }
.step {
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-caption); color:var(--text-tertiary);
  padding-bottom:var(--space-2);
  border-bottom:2px solid var(--border-subtle);
}
.step__n {
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--fs-label); font-weight:600;
}
.step.is-active { color:var(--text-primary); border-bottom-color:var(--accent-400); }
.step.is-done { color:var(--text-secondary); border-bottom-color:var(--border-strong); }

.field { margin-bottom:var(--space-5); }
.field-label {
  display:block; font-size:var(--fs-caption); color:var(--text-secondary);
  margin-bottom:var(--space-2);
}
.field input, .field select, .field textarea {
  width:100%; height:var(--input-h-lg);            /* 报价器控件 ≥56px */
  padding:0 var(--space-3);
  background:var(--bg-recessed); color:var(--text-primary);
  border:1px solid var(--border-default); border-radius:var(--radius-sm);
  font-size:var(--fs-body);                        /* 16px，防 iOS 聚焦缩放 */
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--accent-400);
  box-shadow:0 0 0 3px var(--accent-a18);
}
.field input.is-error, .field select.is-error { border-color:var(--color-danger);
  box-shadow:0 0 0 3px rgba(217,84,77,0.16); }
.opt-grid { display:grid; gap:var(--space-2); grid-template-columns:repeat(2,minmax(0,1fr)); }
.opt {
  display:flex; align-items:center; justify-content:center;
  min-height:var(--input-h-lg); padding:0 var(--space-3);
  background:var(--bg-recessed); color:var(--text-secondary);
  border:1px solid var(--border-default); border-radius:var(--radius-sm);
  font-size:var(--fs-body-s); font-weight:500; text-align:center;
}
.opt--on { border-color:var(--accent-400); color:var(--accent-400); background:var(--accent-a08); }

/* -------------------------------------------------------------
   19. 断点体系：400 / 700 / 1024 / 1200
   ------------------------------------------------------------- */

/* ---- 400px：Vivo Fold6 折叠态基准（向下收紧）---- */
@media (max-width:400px) {
  :root { --gutter:20px; --fs-h1:26px; --fs-h2:20px; }
  /* 注意：必须写成 .hardfacts .hf-value（0,2,0），否则压不过
     .hardfacts--3 .hf-value 的基础定义（同为 0,2,0，靠后者胜） */
  .hardfacts .hf-value { font-size:26px; }
  .hardfacts--3 .hf-value { font-size:22px; }
  .hardfacts--4 .hf-value { font-size:26px; }
  .btn { padding:0 var(--space-4); }
}

/* ---- 700px：Fold6 展开态 / 平板竖屏 → 两栏 ---- */
@media (min-width:700px) {
  :root {
    --gutter:32px;
    --fs-h1:34px; --fs-h2:24px; --fs-h3:19px; --fs-h4:16px;
    --fs-body-l:18px;
    --fs-num-display:48px;
  }
  .section { padding-block:var(--space-16); }
  .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .grid-products { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
  .grid-cases { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cmp-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
  .hardfacts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
  .hardfacts--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hardfacts--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hf-value { font-size:36px; }
  .hardfacts--3 .hf-value { font-size:32px; }
  .hardfacts--4 .hf-value { font-size:28px; }
  .footer-cols { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8); }
  .opt-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

  /* 页头：切回四列栅格（logo | 导航 | 语言切换器 72px | CTA），
     语言切换器列已写死在栅格里，二期移除 hidden 即零重排 */
  .header-inner {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) var(--i18n-switcher-w) auto;
    align-items:center;
    column-gap:var(--space-4); row-gap:0;
    padding-block:0;
  }
  .brand { margin-right:0; order:0; }
  .nav {
    display:flex; justify-content:flex-end;
    order:0; flex:0 1 auto;
    border-top:0; margin-top:0; padding-top:0;
    min-width:0; overflow:hidden;                 /* 冗余宽度保护 */
  }
  .nav-list { flex-wrap:nowrap; gap:var(--space-1); }
  .nav-link { padding-inline:var(--space-3); min-height:var(--header-h); }
  .nav-toggle { display:none; }
  .header-cta { display:inline-flex; }
  .header-cta .btn { min-height:var(--btn-h-desktop); min-width:0; padding:0 var(--space-5); font-size:var(--fs-body-s); }
  .lang-switch { justify-content:flex-end; }

  /* 报价器：左输入右结果同屏（§8.3 展开态） */
  .quote-layout {
    grid-template-columns:minmax(0,5fr) minmax(0,4fr);
    gap:var(--space-6); align-items:start;
  }
  .quote-result { position:sticky; top:calc(var(--header-h) + var(--space-6)); }
}

/* ---- 1024px：平板横屏 / 小桌面 → 多栏回收 ---- */
@media (min-width:1024px) {
  :root {
    --fs-display:48px; --fs-h1:38px; --fs-h2:26px; --fs-h3:20px; --fs-h4:17px;
    --fs-num-display:52px;
    --lh-body:1.7;
  }
  .grid-products { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .grid-cases { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hardfacts { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .hardfacts--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hardfacts--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hf-value { font-size:40px; }
  .hardfacts--3 .hf-value { font-size:40px; }
  .hardfacts--4 .hf-value { font-size:34px; }
  .footer-cols { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .header-cta .btn { min-width:var(--btn-min-w); padding:0 var(--space-6); font-size:var(--fs-body); }
}

/* ---- 1200px：桌面容器上限 ---- */
@media (min-width:1200px) {
  :root {
    --fs-display:56px; --fs-h1:40px; --fs-h2:28px; --fs-h3:21px;
    --fs-num-display:56px;
  }
  .section { padding-block:var(--space-20); }
  .container { padding-inline:var(--space-8); }
}

/* ---- 矮屏保护：保证首屏 P0 三要素不被挤掉（Hero ≤60dvh）---- */
@media (max-height:700px) and (max-width:700px) {
  .hero { padding-block:var(--space-3) var(--space-2); }
  .hero h1 { font-size:20px; }
  .hero-tagline { font-size:var(--fs-body); }
  .answer-first { font-size:var(--fs-caption); }
  .bizcard { min-height:60px; padding:var(--space-2) var(--space-3); }
}
/* 极矮屏（如 560px 高的老机型）：解除 60dvh 上限。
   宁可让首屏多滚一指，也不裁掉 Answer-First 摘要块——那是最贵的一段 GEO 内容。 */
@media (max-height:620px) and (max-width:700px) {
  .hero { max-height:none; }
}

/* ---- 动效降级 ---- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =============================================================
   偏差与待补（诚实标注 · 与 02-设计令牌.md 的差异）
   -------------------------------------------------------------
   1. 断点：文档 §8.1 用 481/768/1025，任务书要求 400/700/1024/1200。
      本文件以 400/700/1024/1200 为准（唯一例外：底部悬浮条沿用文档
      的 ≤768px 显示，因 §8.1 明确「FAB 条保留至 768px」）。
   2. 文档 §9.2 只给了移动端字号与 ≥1025px 覆盖，中间档（700–1024）
      是空的。本文件在 ≥700px 补了一档中间值，避免 Fold6 展开态
      （≈700px）用 375px 的字号。
   3. --fs-num-display 文档给 40/56。硬数据条 3 格在 400px 宽下放不下
      40px 的「±0.1mm」，故 .hf-value 在窄屏降到 26/24px，≥1024px
      回到文档值 40px。报价区间大数字仍用 --fs-num-display 原值。
   4. 文档未给「语言切换器 hidden 时栅格列如何保留」的实现，
      本文件用 grid-template-columns 里写死 72px 列实现零重排。
   5. 文档未定义 .tbl-stack（表格转卡片）与 .cmp-cards 的具体类名，
      本文件定为这两个，供全站复用。
   ============================================================= */