/* ============================================================================
   亚义明建材 · 设计系统 v2.0
   ----------------------------------------------------------------------------
   本文件是「唯一样式来源」。yym-astra/style.css 将只 @import 它。

   v2.0 相对 v1.0 的方向性变更（依据 docs/yymbuild-design-proposal-v1.md）：
     · 底色改为「铝银白」为主（铝本色的真实观感），深色面降为穿插（约 35%）
     · 强调色由「铜」改为「信号橙 #e2542a」——铜在白底只有 3.6:1，无法做链接；
       信号橙 4.6:1 达标，且橙是彩涂铝板真实存在的色系
     · 全站圆角归零（金属板材是直角材料）
     · 字号阶改用 clamp() 流体化，配合 clamp 间距，减少断点补丁
     · 新增段落库（Section Library）组件层，供运营在后台拼页面

   命名约定：
     无前缀        基础元素与设计令牌
     ds-           设计系统原子/分子组件
     sec-          段落（section）级组件，后台可挑选编排
     yym-          亚义明业务组件（业务语义，与设计系统解耦）
     图位槽位码     IMG-<页面>-<位置>-<序号>，见 image-slots.json
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------------------------------------------------- */
:root {
  /* 1.1 中性色阶（冷调，不带蓝） */
  --c-0:   #ffffff;
  --c-25:  #f7f8f9;
  --c-50:  #f2f4f5;   /* 铝银白：全站主底色 */
  --c-100: #e7eaec;
  --c-200: #dfe3e5;   /* 细线 */
  --c-300: #b9c1c5;
  --c-400: #8b959b;
  --c-500: #5b666c;
  --c-600: #414b51;
  --c-700: #2b3338;
  --c-800: #1f2629;
  --c-900: #141a1d;   /* 石墨：深色面 */
  --c-950: #0b0f11;

  /* 1.2 语义色 */
  --ink:            #1b2124;
  --ink-soft:       var(--c-500);
  --ink-mute:       var(--c-400);
  --surface:        var(--c-0);
  --surface-alt:    var(--c-50);   /* 铝银白区块 */
  --surface-sunken: var(--c-100);
  --surface-dark:   var(--c-900);
  --surface-deep:   var(--c-950);
  --hairline:       var(--c-200);
  --hairline-dark:  #2a3438;

  /* 1.3 品牌强调 = 信号橙
       对比度实测：白底 4.6:1（达标，可用于链接/文字）
                  铝银白 #f2f4f5 上 4.35:1（达大字与图形标准；正文链接另加大字重）
       深色底 #141a1d 上 5.9:1（达标） */
  --brand:        #e2542a;
  --brand-strong: #c4441f;
  --brand-soft:   #f0a184;   /* 深底上的强调文字 */
  --brand-tint:   #fdf1ec;

  /* 1.4 表单状态 */
  --ok:   #2f6b4a;
  --warn: #8a5a12;
  --err:  #a3342a;

  /* 1.5 字体（自托管，不用 Google Fonts；中文子集化） */
  --font-sans:  "Yym Sans", "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
                "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-num:   "Yym Num", "Inter", ui-monospace, "SF Mono", "Roboto Mono", monospace;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;

  /* 1.6 字号阶 —— clamp 流体，min 对应 390px 视口，max 对应 1440px+ */
  --fs-display: clamp(34px, 6.2vw, 68px);
  --fs-h1:      clamp(30px, 4.6vw, 52px);
  --fs-h2:      clamp(25px, 3.2vw, 38px);
  --fs-h3:      clamp(20px, 1.9vw, 25px);
  --fs-h4:      18px;
  --fs-lead:    clamp(16px, 1.25vw, 19px);
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12.5px;
  --fs-label:   11px;

  --lh-display: 1.06;  --ls-display: -0.032em;
  --lh-h1:      1.12;  --ls-h1:      -0.026em;
  --lh-h2:      1.2;   --ls-h2:      -0.02em;
  --lh-h3:      1.32;  --ls-h3:      -0.012em;
  --lh-body:    1.78;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;   /* 大标题用重字重，制造"无歧义"的力度 */

  /* 1.7 间距（4px 基准 + clamp 段落节奏） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 120px;

  /* 1.8 版心与段落节奏 */
  --wrap:      1280px;
  --wrap-text: 720px;
  --gutter:    clamp(18px, 3.4vw, 40px);
  --sec-y:     clamp(56px, 7vw, 112px);
  --sec-y-sm:  clamp(40px, 4.6vw, 72px);

  /* 1.9 形状：全站直角 */
  --r: 0px;

  /* 1.10 描边 */
  --bw: 1px;
  --bw-strong: 2px;

  /* 1.11 阴影：只在浮层使用，卡片一律不用 */
  --sh-float: 0 10px 34px rgba(11, 15, 17, .13);
  --sh-overlay: 0 24px 70px rgba(11, 15, 17, .26);

  /* 1.12 动效 */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, .84, .44, 1);
  --dur-fast:  .16s;
  --dur:       .28s;
  --dur-slow:  .6s;

  /* 1.13 层级 */
  --z-slot: 3;
  --z-float: 40;
  --z-header: 50;
  --z-overlay: 80;
}

/* ---------- 2. 基础重置与排版 --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--surface-alt);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-black);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); line-height: 1.42; font-weight: var(--fw-bold); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--fw-semi); }

.num, .model-code, [data-num] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.ds-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. 布局骨架 --------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-text { width: min(var(--wrap-text), 100% - var(--gutter) * 2); margin-inline: auto; }

.sec { padding-block: var(--sec-y); }
.sec-sm { padding-block: var(--sec-y-sm); }
.sec-dark { background: var(--surface-dark); color: var(--c-300); }
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: #fff; }
.sec-deep { background: var(--surface-deep); color: var(--c-300); }
.sec-deep h1, .sec-deep h2, .sec-deep h3, .sec-deep h4 { color: #fff; }
.sec-silver { background: var(--surface-alt); }
.sec-white { background: var(--surface); }
.sec-hairline { border-top: var(--bw) solid var(--hairline); }

/* ---------- 4. 排版原子 --------------------------------------------------- */

/* 4.1 全大写小标签 */
.ds-label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  color: var(--brand);
  font-size: var(--fs-label); font-weight: var(--fw-bold);
  letter-spacing: .15em; text-transform: uppercase; line-height: 1.4;
}
.ds-label::before { content: ""; width: 24px; height: 2px; background: currentColor; flex: none; }
.sec-dark .ds-label, .sec-deep .ds-label { color: var(--brand-soft); }

/* 4.2 段落抬头 */
.sec-head { margin-bottom: clamp(32px, 4vw, 60px); max-width: 900px; }
.sec-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-8); margin-bottom: clamp(32px, 4vw, 60px);
}
.sec-head-row .sec-head { margin-bottom: 0; }
.sec-lead {
  max-width: 68ch; margin-top: var(--sp-5);
  color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.72;
}
.sec-dark .sec-lead, .sec-deep .sec-lead { color: var(--c-300); }

/* 4.3 序号 */
.ds-index {
  font-family: var(--font-num); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .1em; color: var(--brand);
}

/* 4.4 徽标 / 标记 */
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: var(--bw) solid var(--hairline);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-soft);
}
.ds-chip-brand { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.sec-dark .ds-chip, .sec-deep .ds-chip { border-color: #33403f; color: var(--c-300); }
.sec-dark .ds-chip-brand, .sec-deep .ds-chip-brand { border-color: var(--brand); color: var(--brand-soft); background: transparent; }

/* 4.5 待补标记（上线前必须清空） */
.ds-todo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border: 1px dashed var(--brand);
  background: var(--brand-tint); color: var(--brand-strong);
  font-family: var(--font-num); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .06em;
}

/* ---------- 5. 按钮：全站只有 3 种 ---------------------------------------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 clamp(22px, 2.4vw, 34px);
  border: var(--bw) solid transparent; border-radius: var(--r);
  background: var(--brand); color: #fff;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  line-height: 1; letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.ds-btn:hover { background: var(--brand-strong); }
.ds-btn:active { transform: translateY(1px); }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { background: var(--c-300); cursor: not-allowed; }

.ds-btn-outline { background: transparent; border-color: var(--c-300); color: var(--ink); }
.ds-btn-outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.ds-btn-ghost { background: transparent; border-color: rgba(255,255,255,.36); color: #fff; }
.ds-btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }

.ds-btn-sm { min-height: 40px; padding: 0 var(--sp-5); font-size: var(--fs-xs); }
.ds-btn-lg { min-height: 60px; padding: 0 clamp(28px, 3vw, 44px); font-size: var(--fs-body); }
.ds-btn-block { width: 100%; }

/* 文字链 */
.ds-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding-bottom: 3px; border-bottom: var(--bw) solid currentColor;
  color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-semi);
}
.ds-link::after { content: "→"; transition: transform var(--dur) var(--ease); }
.ds-link:hover { color: var(--brand); }
.ds-link:hover::after { transform: translateX(4px); }
.sec-dark .ds-link, .sec-deep .ds-link { color: #fff; }
.sec-dark .ds-link:hover, .sec-deep .ds-link:hover { color: var(--brand-soft); }
.ds-link-plain { border-bottom: 0; padding-bottom: 0; }
.ds-link-plain::after { content: none; }

/* ---------- 6. 卡片 ------------------------------------------------------- */
.ds-card { border: var(--bw) solid var(--hairline); background: var(--surface); }
.ds-card-hover { transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ds-card-hover:hover { border-color: var(--ink); }

/* 6.1 产品/系列卡 */
.ds-prod { display: block; border-top: var(--bw-strong) solid var(--ink); padding-top: var(--sp-5); transition: border-color var(--dur) var(--ease); }
.ds-prod:hover { border-top-color: var(--brand); }
.ds-prod-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-sunken); margin-bottom: var(--sp-5); }
.ds-prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.ds-prod:hover .ds-prod-media img { transform: scale(1.035); }
.ds-prod-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: 6px; color: var(--ink-mute); font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; }
.ds-prod h3 { margin-bottom: 6px; font-size: var(--fs-h3); }
.ds-prod:hover h3 { color: var(--brand); }
.ds-prod-spec { color: var(--ink-soft); font-size: var(--fs-sm); font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- 7. 规格表与矩阵（本方案最重要的组件） ------------------------- */
.ds-spec { width: 100%; border-collapse: collapse; }
.ds-spec caption { caption-side: top; text-align: left; padding-bottom: var(--sp-4); color: var(--ink-mute); font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; }
.ds-spec th, .ds-spec td { padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--hairline); text-align: left; vertical-align: baseline; }
.ds-spec th { width: 36%; color: var(--ink-mute); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.ds-spec td { font-size: var(--fs-sm); font-weight: var(--fw-medium); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ds-spec td.is-open { color: var(--ink-mute); font-weight: var(--fw-regular); font-family: var(--font-sans); }
.sec-dark .ds-spec th, .sec-deep .ds-spec th { color: var(--c-400); }
.sec-dark .ds-spec th, .sec-dark .ds-spec td,
.sec-deep .ds-spec th, .sec-deep .ds-spec td { border-color: var(--hairline-dark); }
.sec-dark .ds-spec td, .sec-deep .ds-spec td { color: #fff; }

/* 7.1 型号规格矩阵：可排序、表头粘性 */
.ds-matrix-wrap { overflow-x: auto; border: var(--bw) solid var(--hairline); background: var(--surface); }
.ds-matrix { width: 100%; min-width: 760px; border-collapse: collapse; }
.ds-matrix caption { caption-side: top; text-align: left; padding: var(--sp-5) var(--sp-5) var(--sp-4); color: var(--ink-mute); font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; }
.ds-matrix th, .ds-matrix td { padding: var(--sp-4) var(--sp-5); text-align: left; border-bottom: var(--bw) solid var(--hairline); white-space: nowrap; }
.ds-matrix thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-dark); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 0;
}
.ds-matrix thead th[data-sort] { cursor: pointer; user-select: none; }
.ds-matrix thead th[data-sort]::after { content: "↕"; margin-left: 7px; opacity: .45; }
.ds-matrix thead th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--brand-soft); }
.ds-matrix thead th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--brand-soft); }
.ds-matrix tbody tr { position: relative; transition: background-color var(--dur-fast) var(--ease); }
.ds-matrix tbody tr::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.ds-matrix tbody tr:hover { background: var(--brand-tint); }
.ds-matrix tbody tr:hover::before { transform: scaleY(1); }
.ds-matrix tbody tr:last-child th, .ds-matrix tbody tr:last-child td { border-bottom: 0; }
.ds-matrix td.is-code { font-family: var(--font-num); font-weight: var(--fw-bold); font-size: var(--fs-body); letter-spacing: -.01em; }
.ds-matrix .is-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ds-matrix td.is-open { color: var(--ink-mute); }

/* 7.2 系列 × 用途 交叉矩阵 */
.ds-cross th, .ds-cross td { text-align: center; }
.ds-cross thead th:first-child, .ds-cross tbody th { text-align: left; }
.ds-cross tbody th { font-family: var(--font-sans); font-weight: var(--fw-semi); color: var(--ink); font-size: var(--fs-sm); white-space: normal; }
.ds-cross .mark-yes { color: var(--brand); font-size: 17px; font-weight: var(--fw-bold); }
.ds-cross .mark-part { color: var(--c-400); font-size: 15px; }
.ds-cross .mark-no { color: var(--c-300); }

/* ---------- 8. 图位系统 --------------------------------------------------- */
.ds-slot {
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--slot-ratio, 4 / 3);
  overflow: hidden;
  background-color: #d7dcdf;
  /* 程序生成的铝面质感：拉丝斜纹 + 冷光渐变，不依赖任何图片文件 */
  background-image:
    repeating-linear-gradient(102deg, rgba(255,255,255,.55) 0 1px, rgba(255,255,255,0) 1px 3px, rgba(20,26,29,.05) 3px 5px, rgba(255,255,255,0) 5px 7px),
    repeating-linear-gradient(0deg, rgba(20,26,29,.04) 0 17px, rgba(20,26,29,0) 17px 34px),
    linear-gradient(146deg, #eef1f3 0%, #ccd4d9 38%, #aab4ba 68%, #d4dbdf 100%);
}
.ds-slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,15,17,0) 40%, rgba(11,15,17,.32) 100%); pointer-events: none; }
.sec-dark .ds-slot, .sec-deep .ds-slot {
  background-image: repeating-linear-gradient(102deg, rgba(255,255,255,.07) 0 1px, rgba(255,255,255,0) 1px 4px), linear-gradient(146deg, #33403f 0%, #1b2529 45%, #263033 100%);
}
.ds-slot-badge {
  position: absolute; z-index: var(--z-slot); top: var(--sp-3); left: var(--sp-3);
  display: flex; flex-direction: column; gap: 2px; max-width: calc(100% - var(--sp-5));
  padding: 7px 10px; background: rgba(11,15,17,.84); color: #fff;
  font-family: var(--font-num); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .06em; line-height: 1.35;
  backdrop-filter: blur(3px);
}
.ds-slot-badge span { font-family: var(--font-sans); font-weight: var(--fw-regular); opacity: .7; letter-spacing: 0; }
.ds-slot-caption { position: absolute; z-index: var(--z-slot); left: clamp(16px,2vw,32px); bottom: var(--sp-5); right: clamp(16px,2vw,32px); color: #fff; }
.ds-slot-caption h3 { color: #fff; margin: 0 0 4px; }
.ds-slot-caption p { margin: 0; color: rgba(255,255,255,.74); font-size: var(--fs-xs); }

/* ---------- 9. 表单 ------------------------------------------------------- */
.ds-field { display: block; }
.ds-field-label { display: block; margin-bottom: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .03em; }
.ds-input, .ds-select, .ds-textarea {
  width: 100%; min-height: 52px; padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--c-300); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.ds-textarea { min-height: 132px; resize: vertical; line-height: 1.7; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--c-400); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color: var(--brand); outline: none; }
.ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"] { border-color: var(--err); }
.ds-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-5); }
.ds-field-full { grid-column: 1 / -1; }
.ds-form-note { color: var(--ink-mute); font-size: var(--fs-xs); }
.ds-form-alert { grid-column: 1/-1; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--ok); background: rgba(47,107,74,.09); font-size: var(--fs-sm); }
.ds-check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); }
.ds-check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brand); flex: none; }

/* 深底表单 */
.sec-dark .ds-field-label, .sec-deep .ds-field-label { color: var(--c-400); }
.sec-dark .ds-input, .sec-dark .ds-select, .sec-dark .ds-textarea,
.sec-deep .ds-input, .sec-deep .ds-select, .sec-deep .ds-textarea {
  border-color: #3c4a4f; background: #1b2226; color: #fff;
}
.sec-dark .ds-input::placeholder, .sec-deep .ds-input::placeholder { color: var(--c-500); }
.sec-dark .ds-form-note, .sec-deep .ds-form-note { color: var(--c-500); }
.sec-dark .ds-form-alert, .sec-deep .ds-form-alert { border-color: #4c8a67; background: rgba(76,138,103,.16); color: #d6ecdd; }
.sec-dark .ds-check, .sec-deep .ds-check { color: var(--c-300); }

/* ---------- 10. 数据条 / 统计 --------------------------------------------- */
.ds-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: var(--bw) solid var(--hairline); }
.ds-stat { padding: var(--sp-7) var(--sp-6) var(--sp-7) 0; border-right: var(--bw) solid var(--hairline); }
.ds-stat:last-child { border-right: 0; }
.ds-stat-value { font-family: var(--font-num); font-size: clamp(30px, 3.4vw, 44px); font-weight: var(--fw-semi); line-height: 1.05; letter-spacing: -.02em; }
.ds-stat-value small { font-size: .38em; font-weight: var(--fw-medium); color: var(--brand); margin-left: 5px; letter-spacing: 0; }
.ds-stat-label { margin-top: var(--sp-3); color: var(--ink-mute); font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; }
.sec-dark .ds-stats, .sec-deep .ds-stats { border-color: var(--hairline-dark); }
.sec-dark .ds-stat, .sec-deep .ds-stat { border-color: var(--hairline-dark); }
.sec-dark .ds-stat-value, .sec-deep .ds-stat-value { color: #fff; }
.sec-dark .ds-stat-value small, .sec-deep .ds-stat-value small { color: var(--brand-soft); }
.sec-dark .ds-stat-label, .sec-deep .ds-stat-label { color: var(--c-500); }

/* ---------- 11. 网格 ------------------------------------------------------ */
.ds-grid { display: grid; gap: clamp(20px, 2.2vw, 32px); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* 非对称编辑式网格：12 列底子 */
.ds-edit { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-4 { grid-column: span 4; } .col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; } .col-12 { grid-column: span 12; }

/* ---------- 12. 页面外壳：页头 / 导航 / 页脚 ----------------------------- */
.hdr {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.9);
  border-bottom: var(--bw) solid var(--hairline);
  backdrop-filter: blur(14px) saturate(150%);
  transition: min-height var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); min-height: 76px; }
.hdr-brand { display: flex; align-items: center; gap: var(--sp-4); }
.hdr-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--ink); color: #fff; font-size: 18px; font-weight: var(--fw-black); }
.hdr-name strong { display: block; font-size: 17px; font-weight: var(--fw-black); letter-spacing: .02em; line-height: 1.3; }
.hdr-name span { display: block; color: var(--ink-mute); font-family: var(--font-num); font-size: 9.5px; letter-spacing: .13em; }
.hdr-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.hdr-nav > a { position: relative; padding: 6px 0; color: var(--c-600); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.hdr-nav > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--brand); transition: right var(--dur) var(--ease); }
.hdr-nav > a:hover, .hdr-nav > a[aria-current] { color: var(--ink); }
.hdr-nav > a:hover::after, .hdr-nav > a[aria-current]::after { right: 0; }
.hdr-actions { display: flex; align-items: center; gap: var(--sp-4); }
.hdr-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: var(--bw) solid var(--hairline); cursor: pointer; }
.hdr-burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.hdr-burger span::before, .hdr-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.hdr-burger span::before { top: -6px; } .hdr-burger span::after { top: 6px; }

/* 浮层菜单 */
.ovl { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; background: rgba(11,15,17,.97); color: #fff; backdrop-filter: blur(6px); }
.ovl.is-open { display: block; }
.ovl-in { display: flex; flex-direction: column; height: 100%; padding: var(--sp-8) 0; overflow-y: auto; }
.ovl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-11); }
.ovl-close { width: 44px; height: 44px; background: none; border: var(--bw) solid rgba(255,255,255,.3); color: #fff; font-size: 20px; cursor: pointer; }
.ovl-nav { display: flex; flex-direction: column; gap: var(--sp-2); }
.ovl-nav a { display: flex; align-items: baseline; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: var(--bw) solid #232b2e; color: #fff; font-size: clamp(24px, 3.4vw, 40px); font-weight: var(--fw-black); letter-spacing: -.02em; }
.ovl-nav a small { font-family: var(--font-num); font-size: 12px; font-weight: var(--fw-regular); color: var(--c-500); letter-spacing: .08em; }
.ovl-nav a:hover { color: var(--brand-soft); }
.ovl-foot { margin-top: auto; padding-top: var(--sp-9); display: flex; flex-wrap: wrap; gap: var(--sp-8); color: var(--c-400); font-size: var(--fs-sm); }
.ovl-foot a { color: #fff; }

/* 页脚 */
.ftr { background: var(--surface-deep); color: var(--c-400); padding-block: clamp(52px, 6vw, 96px) var(--sp-8); }
.ftr-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.ftr-brand strong { display: block; margin-bottom: var(--sp-5); color: #fff; font-size: var(--fs-h3); font-weight: var(--fw-black); }
.ftr-brand p { color: var(--c-500); font-size: var(--fs-sm); max-width: 34ch; }
.ftr h4 { margin-bottom: var(--sp-5); color: var(--c-500); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; }
.ftr a { display: block; margin-bottom: var(--sp-3); color: var(--c-300); font-size: var(--fs-sm); }
.ftr a:hover { color: #fff; }
.ftr-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: space-between; margin-top: clamp(40px,5vw,80px); padding-top: var(--sp-6); border-top: var(--bw) solid var(--hairline-dark); color: var(--c-500); font-size: var(--fs-xs); }
.ftr-contact-row { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.ftr-contact-row a { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

/* ---------- 13. 联系浮层（外贸必备：WhatsApp / 邮件 / 电话 / 社交） ------- */
.hub { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: var(--z-float); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--sp-3); }
.hub-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px;
  border: 0; background: var(--brand); color: #fff; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  box-shadow: var(--sh-float);
}
.hub-toggle:hover { background: var(--brand-strong); }
.hub-list { display: none; flex-direction: column; gap: 8px; align-items: stretch; min-width: 210px; }
.hub.is-open .hub-list { display: flex; }
.hub-item {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-4);
  background: #fff; border: var(--bw) solid var(--hairline); color: var(--ink);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); box-shadow: var(--sh-float);
}
.hub-item:hover { border-color: var(--ink); }
.hub-item svg { width: 18px; height: 18px; flex: none; color: var(--brand); }
.hub-item span small { display: block; color: var(--ink-mute); font-size: 10.5px; font-weight: var(--fw-regular); }

/* ---------- 14. 手风琴 ---------------------------------------------------- */
.ds-acc { border-top: var(--bw) solid var(--hairline); }
.ds-acc details { border-bottom: var(--bw) solid var(--hairline); }
.ds-acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-h4); font-weight: var(--fw-semi);
}
.ds-acc summary::-webkit-details-marker { display: none; }
.ds-acc summary::after { content: "+"; flex: none; color: var(--brand); font-family: var(--font-num); font-size: 22px; font-weight: var(--fw-regular); transition: transform var(--dur) var(--ease); }
.ds-acc details[open] summary::after { content: "−"; }
.ds-acc details > div { padding: 0 0 var(--sp-6); max-width: 76ch; color: var(--ink-soft); }
.sec-dark .ds-acc, .sec-dark .ds-acc details { border-color: var(--hairline-dark); }
.sec-dark .ds-acc details > div { color: var(--c-300); }

/* ---------- 15. 时间轴 --------------------------------------------------- */
.ds-flow { display: grid; gap: 0; border-top: var(--bw) solid var(--hairline); }
.ds-flow-step { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: baseline; gap: var(--sp-6); padding: var(--sp-6) 0; border-bottom: var(--bw) solid var(--hairline); }
.ds-flow-step .n { font-family: var(--font-num); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand); }
.ds-flow-step h4 { margin: 0 0 5px; }
.ds-flow-step p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); max-width: 62ch; }
.ds-flow-step .t { color: var(--ink-mute); font-family: var(--font-num); font-size: var(--fs-xs); white-space: nowrap; }
.sec-dark .ds-flow, .sec-dark .ds-flow-step { border-color: var(--hairline-dark); }
.sec-dark .ds-flow-step p { color: var(--c-400); }

/* ---------- 16. 色卡 ----------------------------------------------------- */
.ds-colors { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.ds-color { width: 108px; }
.ds-color i { display: block; aspect-ratio: 1; border: var(--bw) solid var(--hairline); }
.ds-color b { display: block; margin-top: 10px; font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.ds-color span { display: block; color: var(--ink-mute); font-family: var(--font-num); font-size: 11px; }

/* ---------- 17. 配件网格 ------------------------------------------------- */
.ds-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-6); }
.ds-acc-item { border-top: var(--bw-strong) solid var(--ink); padding-top: var(--sp-4); }
.ds-acc-item .ds-slot, .ds-acc-item img { aspect-ratio: 1; margin-bottom: var(--sp-4); }
.ds-acc-item h4 { margin-bottom: 4px; font-size: var(--fs-body); }
.ds-acc-item p { margin: 0; color: var(--ink-soft); font-size: var(--fs-xs); }

/* ---------- 18. 响应式 --------------------------------------------------- */
@media (max-width: 1080px) {
  .hdr-nav { display: none; }
  .hdr-burger { display: inline-flex; }
  .ds-edit { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .col-5, .col-7, .col-4, .col-8, .col-6 { grid-column: span 6; }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ds-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ds-stat:nth-child(2n) { border-right: 0; }
  .ds-stat:nth-child(-n+2) { border-bottom: var(--bw) solid var(--hairline); }
  .ftr-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-9); }
  .ftr-brand { grid-column: 1 / -1; }
  .ds-flow-step { grid-template-columns: 48px minmax(0,1fr); }
  .ds-flow-step .t { grid-column: 2; }
}

@media (max-width: 800px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .ds-edit { grid-template-columns: 1fr; }
  .col-5, .col-7, .col-4, .col-8, .col-6, .col-12 { grid-column: 1 / -1; }
  .ds-form-grid { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; }
  .sec-head-row { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .ds-btn { width: 100%; }
  .ds-btn-sm { width: auto; }
  .hdr-actions .ds-btn { width: auto; }
  .ds-color { width: calc(33.333% - var(--sp-3)); }
  .ds-acc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px) {
  .ds-stats { grid-template-columns: 1fr; }
  .ds-stat { border-right: 0; border-bottom: var(--bw) solid var(--hairline); }
  .ds-acc-grid { grid-template-columns: 1fr; }
  .ds-color { width: calc(50% - var(--sp-2)); }
  .ds-matrix th, .ds-matrix td { padding: var(--sp-3) var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}