/* ==========================================================================
   EMS Eyewear · design-tokens.css
   风格：C「瑞士光学图纸 Optical Blueprint」
   依据：design-blueprint.md（美学计划）· 契约 A · 站群登记表差异化
   版本：v1.1（Phase 1B 产出；用户 2026-08-16 选定 G5「高密度图纸」配色，本文件按 G5 落地）

   ⚠️ 铁律：
   - 全站颜色/间距/字体只能从本文件变量取，禁止硬编码 hex。
   - 规范红 --color-red / --red-bright 禁止用于正文小字（仅 ≥18px 标注/按钮底/装饰线/关键数字）。
   - 网格禁止 auto-fit；卡片数 = 列数整倍数；同网格配图一致性（全有图或全无图）。
   - 深色板块不得相邻（深色之间必须有白色/纸白板块过渡）。
   - 背景色一律 background-color: var(...)，禁止 background: var(...) 简写（会重置 background-image）。
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Karla:ital,wght@0,400;0,500;0,600;1,400&family=Azeret+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. 色板（组 1「图纸白标准」主推；其余候选见 style-c-swatches.html）
   -------------------------------------------------------------------------- */
:root {
  /* 主色（用户风格卡 C 确认 + G5 高密度图纸选定） */
  --paper:          #FFFFFF;  /* 纯白主底（G5：纯白高对比） */
  --cobalt:         #1B46C4;  /* 钴蓝：蓝图线/链接/图标/次按钮（G5 深钴 7.7:1） */
  --red:            #D7263D;  /* 规范红：唯一主 CTA 底 / 标注 / 关键数字高亮（禁正文小字） */

  /* 文字 */
  --ink:            #0A1428;  /* 墨蓝黑正文（唯一正文色）18.4:1 on paper */
  --ink-soft:       #3E4A63;  /* 弱化文字/图注 8.9:1 on paper */
  --on-dark:        #F4F7FF;  /* 深色块主文字 */
  --deep-soft:      #8B9CC0;  /* 深色块弱化字 */
  --blue-bright:    #4D7DF0;  /* 深色块上的钴蓝亮（链接/强调）4.50:1 on dark */
  --red-bright:     #FF5C70;  /* 深色块上的红亮（关键数字，禁正文小字）5.74:1 on dark */

  /* 背景 / 表面 */
  --surface:        #FFFFFF;  /* 卡片底（靠 1px 线框与纯白底区分） */
  --surface-alt:    #EDF1FA;  /* 交替区底（浅蓝灰过渡带，G5） */
  --dark:           #0A1428;  /* 深蓝黑块（数据带/quote/页尾/hero 遮罩，G5 更深） */
  --dark-2:         #101D38;  /* 深色块 alt */
  --blue-tint:      #E9EFFA;  /* 钴蓝浅底（选中/斑马纹） */
  --red-tint:       #FBE9EC;  /* 红浅底（关键标注背景，禁文字底对比依赖） */

  /* 线条 */
  --line:           #C3CBDD;  /* 网格线/分隔线/表格细线（1px，G5 更可见） */
  --line-strong:    #8FA0C0;  /* 图纸粗线/卡片外框/表头 */
  --line-deep:      #2A3D6B;  /* 深色块内线 */

  /* 语义映射（组件直接使用） */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-soft);
  --text-on-dark:   var(--on-dark);
  --text-on-dark-soft: var(--deep-soft);
  --bg-body:        var(--paper);
  --bg-card:        var(--surface);
  --bg-alt:         var(--surface-alt);
  --bg-dark:        var(--dark);
  --border:         var(--line);
  --border-strong:  var(--line-strong);
  --accent:         var(--red);      /* 唯一 CTA/强调 */
  --accent-hover:   #C11E33;         /* 主按钮 hover（加深红，白字对比升到 ~6:1） */
  --accent-dark:    var(--red-bright);/* 深底上的 CTA 用亮红 */
  --link:           var(--cobalt);
  --link-hover:     #142F8A;         /* 钴蓝 hover 加深（G5 深钴对应） */
  --link-on-dark:   var(--blue-bright);
  --focus-ring:     var(--cobalt);
}

/* --------------------------------------------------------------------------
   2. 字体（Display / Body / Utility 三角色）
   -------------------------------------------------------------------------- */
:root {
  --font-display: 'Oswald', system-ui, sans-serif;  /* 用户二改 2026-08-16：Saira 观感差，换 Oswald 瑞士表盘工业体 */
  --font-display-cond: 'Oswald', system-ui, sans-serif;
  --font-body: 'Karla', system-ui, sans-serif;
  --font-mono: 'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* 字号阶梯（1.25 比例） */
  --fs-hero:        clamp(1.8rem, 4vw, 2.75rem);       /* 首页 hero H1（用户反馈缩小） */
  --fs-h1:          clamp(1.6rem, 2.9vw, 2.25rem);    /* 页 H1（用户反馈缩小） */
  --fs-h2:          clamp(1.5rem, 2.6vw, 2.125rem);   /* section 标题 */
  --fs-h3:          clamp(1.25rem, 1.8vw, 1.5rem);    /* 卡片/区标题 */
  --fs-h4:          1.125rem;
  --fs-body:        1rem;                             /* 正文 16px，移动端不低于 16px */
  --fs-small:       0.875rem;                         /* 图注/辅助 14px */
  --fs-mono-label:  0.875rem;                         /* 眉标/标签 14px mono（移动端 ≥14px 铁律） */
  --fs-stat:        clamp(1.5rem, 2.6vw, 2.1rem);       /* 数据带大数字（防换行·用户二改） */

  /* 行高 */
  --lh-tight:       1.15;
  --lh-body:        1.6;                              /* 正文 1.5-1.75 */
  --lh-relaxed:     1.75;

  /* 字重 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 字距（图纸标注感：眉标/大标题适度拉开） */
  --ls-eyebrow: 0.14em;
  --ls-display: 0.01em;
  --ls-mono: 0.04em;
}

/* --------------------------------------------------------------------------
   3. 间距 / 圆角 / 阴影（4/8px 节奏）
   -------------------------------------------------------------------------- */
:root {
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --section-gap: clamp(3.5rem, 7vw, 6.5rem);   /* section 垂直间距 */
  --container: 1200px;
  --container-narrow: 840px;
  --gutter: clamp(1rem, 4vw, 2rem);            /* 侧边距 */

  /* 圆角：图纸风克制，卡片/按钮 2px，图表 0-2px（禁大圆角胶囊） */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;                        /* 仅用于徽章/端子点 */

  /* 阴影：极克制（图纸平面感），只用低投影区分浮层 */
  --shadow-xs: 0 1px 2px rgba(10, 20, 40, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 20, 40, 0.08);
  --shadow-md: 0 6px 20px rgba(10, 20, 40, 0.12);
  --shadow-modal: 0 12px 48px rgba(10, 20, 40, 0.28);

  /* 动效（150-300ms，尊重 reduced-motion） */
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 300ms;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

/* --------------------------------------------------------------------------
   4. 网格与密度（禁 auto-fit！固定列数 + 卡片数整倍数）
   -------------------------------------------------------------------------- */
:root {
  /* 固定列数网格（编码时用 .grid-2/.grid-3/.grid-4，卡片数必须整倍数：
     grid-2 → 2/4/6/8 卡；grid-3 → 3/6/9 卡；grid-4 → 4/8 卡 */
  --grid-gap: clamp(1rem, 2.5vw, 1.5rem);

  /* 图纸背景（hero/band/quote 底层网格点，签名元素用） */
  --blueprint-dot: radial-gradient(var(--line) 1px, transparent 1px);
  --blueprint-dot-size: 22px 22px;
  --blueprint-grid: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  --blueprint-grid-size: 44px 44px;
}

/* --------------------------------------------------------------------------
   5. 布局概念 / 断点
   -------------------------------------------------------------------------- */
:root {
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  --header-h: 72px;
  --z-nav: 100;
  --z-modal: 1000;
}

/* --------------------------------------------------------------------------
   6. Reset + 基础（图纸风全局）
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg-body);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-md);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-md); }

a { color: var(--link); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

::selection { background-color: var(--cobalt); color: var(--paper); }

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

/* --------------------------------------------------------------------------
   7. Utility
   -------------------------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-gap); }
.section--alt { background-color: var(--bg-alt); }
.section--dark { background-color: var(--bg-dark); color: var(--text-on-dark); }
.section--dark a { color: var(--link-on-dark); }
.section--dark a:hover { color: var(--on-dark); }

/* 图纸眉标（签名：mono 编号 + 尺寸线 + 红标注）——全站 ≤8 处 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: var(--space-md);
}
.eyebrow::before {
  content: '';
  width: 20px; height: 1px;
  background-color: var(--cobalt);
}
.eyebrow .eyebrow-red {
  color: var(--red);
  font-weight: var(--fw-semibold);
}
.section--dark .eyebrow { color: var(--blue-bright); }
.section--dark .eyebrow::before { background-color: var(--blue-bright); }
.section--dark .eyebrow .eyebrow-red { color: var(--red-bright); }

/* 尺寸标注签名线（section 顶部） */
.dim-line {
  position: relative;
  height: 1px;
  background-color: var(--line-strong);
  margin: var(--space-sm) 0 var(--space-2xl);
}
.dim-line::before, .dim-line::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 1px; height: 9px;
  background-color: var(--line-strong);
}
.dim-line::before { left: 0; }
.dim-line::after { right: 0; }
.dim-note {
  position: absolute;
  right: 0; top: -11px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  color: var(--red);
  background-color: var(--bg-body);
  padding: 0 var(--space-xs);
}
.section--dark .dim-line { background-color: var(--line-deep); }
.section--dark .dim-line::before, .section--dark .dim-line::after { background-color: var(--line-deep); }
.section--dark .dim-note { color: var(--red-bright); background-color: var(--bg-dark); }

/* --------------------------------------------------------------------------
   8. CTA 按钮（契约硬规则：2-3 词 / 禁图标前缀 / 移动端 sticky）
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                 /* 触控 ≥44px */
  padding: 0.65rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }

/* 主 CTA：规范红实底 + 白字（对比 4.96:1 ✓） */
.btn--primary {
  background-color: var(--accent);
  color: #FFFFFF;
}
.btn--primary:hover {
  background-color: var(--accent-hover);
  color: #FFFFFF;
}

/* 深色板块上的主 CTA：用亮红 */
.section--dark .btn--primary,
.quote-band .btn--primary {
  background-color: var(--accent-dark);
  color: var(--dark);
}
.section--dark .btn--primary:hover,
.quote-band .btn--primary:hover {
  background-color: #FF7A8C;
  color: var(--dark);
}

/* 次 CTA：钴蓝描边 */
.btn--secondary {
  background-color: transparent;
  border-color: var(--cobalt);
  color: var(--cobalt);
}
.btn--secondary:hover { background-color: var(--cobalt); color: #FFFFFF; }

/* 深色块上次 CTA：亮蓝描边 */
.section--dark .btn--secondary,
.quote-band .btn--secondary {
  border-color: var(--blue-bright);
  color: var(--blue-bright);
}
.section--dark .btn--secondary:hover,
.quote-band .btn--secondary:hover {
  background-color: var(--blue-bright);
  color: var(--dark);
}

/* 按钮文字规则：主 CTA ≤3 词（Get Quote / Send Inquiry / Request Sample），副 CTA ≤2 词；
   禁止 <svg> 图标前缀、禁止长句、禁止 email emoji。 */

/* 移动端底部 sticky CTA 条（每页启用：.sticky-cta） */
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 90;
  display: none;
  background-color: var(--dark);
  padding: var(--space-sm) var(--gutter);
  box-shadow: 0 -2px 12px rgba(10, 20, 40, 0.15);
}
.sticky-cta .btn { width: 100%; }
@media (max-width: 767px) {
  .sticky-cta { display: block; }
}

/* --------------------------------------------------------------------------
   9. 组件：卡片 / 网格 / 表格 / spec-card / quote band / hero 遮罩
   -------------------------------------------------------------------------- */

/* 固定列数网格（禁 auto-fit） */
.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* 图纸卡片：白底 + 1px 线框 + 极窄圆角 + mono 编号角标 */
.card {
  position: relative;
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card .card-no {
  position: absolute;
  top: var(--space-sm); right: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--text-secondary);
  letter-spacing: var(--ls-mono);
}
.card h3 { font-size: var(--fs-h3); }
.card .card-img { margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-lg); }

/* 卡片网格图位：同一网格内全部有图或全部无图；图位显式 aspect-ratio */
.card-img { position: relative; overflow: hidden; background-color: var(--bg-alt); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }

/* 图位尺寸约定：横版 1536x1024 → 3/2；竖版 1024x1536 → 2/3；方形 1024x1024 → 1/1 */
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-2-3 { aspect-ratio: 2 / 3; }
.ar-1-1 { aspect-ratio: 1 / 1; }

/* 1/1 图防裁切（用户排除清单：必须加 .img-1-1 类 + 特异性覆盖） */
.frame-img img.img-1-1 { aspect-ratio: 1 / 1; }

/* 图文分屏 split：图随文字列同高（用户偏好 2026-08-16） */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
}
.split .split-media { position: relative; overflow: hidden; min-height: 100%; }
.split .split-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;   /* 同高铺满静态展示（用户最终定案） */
}
.split .split-body { padding: var(--space-2xl) var(--space-xl); align-self: center; }
.split.rev .split-media { order: 2; }
.split.rev .split-body { order: 1; }
@media (max-width: 767px) {
  .split { grid-template-columns: 1fr; }
  .split .split-media { min-height: 260px; }
  .split.rev .split-media { order: 0; }
  .split.rev .split-body { order: 1; }
}

/* spec-card 规格卡（hero 侧板/产品速览：mono 标签 + 数值表） */
.spec-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.spec-card table { width: 100%; border-collapse: collapse; }
.spec-card th, .spec-card td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
  vertical-align: top;
}
.spec-card th {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  width: 45%;
}
.spec-card td { font-family: var(--font-mono); color: var(--text-primary); }
.spec-card tr:last-child th, .spec-card tr:last-child td { border-bottom: 0; }

/* 数据表（datasheet：≥10 行参数表/≥6 行对比表） */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.data-table th {
  background-color: var(--bg-alt);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-strong);
}
.data-table td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  color: var(--text-primary);
  background-color: var(--bg-card);
}
.data-table td.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.data-table tr:nth-child(even) td { background-color: var(--blue-tint); }
.data-table .hl { color: var(--red); font-family: var(--font-mono); font-weight: var(--fw-semibold); }

/* stats 数据带（深蓝黑底 + mono 大数字；数字必须真实参数） */
.stats-band { background-color: var(--bg-dark); color: var(--text-on-dark); }
.stats-band .stat { text-align: center; padding: var(--space-lg) var(--space-md); }  /* 用户反馈：压高度 */
.stats-band .stat-num {
  font-family: var(--font-mono);
  font-size: var(--fs-stat);
  font-weight: var(--fw-semibold);
  color: var(--on-dark);
  letter-spacing: var(--ls-mono);
  white-space: nowrap;      /* 27.6–40g 等区间数字禁止折行（用户反馈） */
}
.stats-band .stat-num .red { color: var(--red-bright); }
.stats-band .stat-label { color: var(--deep-soft); font-size: var(--fs-small); margin-top: var(--space-xs); }

/* 步骤条 steps（禁时间数字，编号点 ≤24px） */
.steps { display: grid; grid-template-columns: repeat(var(--steps, 4), 1fr); gap: var(--space-lg); counter-reset: step; }
.steps .step { position: relative; padding-top: var(--space-2xl); }
.steps .step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cobalt);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--cobalt);
}
.steps .step h3 { font-size: var(--fs-h4); }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .steps { grid-template-columns: 1fr; } }

/* quote band（CTA 卡片：深底 + 低透明度 cta-bg 纹理 + 亮色按钮） */
.quote-band {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  text-align: center;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* 垂直居中，高度按用户反馈缩减 */
  padding-block: var(--space-3xl);
}
.quote-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--blueprint-grid);
  background-size: var(--blueprint-grid-size);
  opacity: 0.14;
  z-index: 0;
}
.quote-band > * { position: relative; z-index: 1; }
.quote-band h2 { color: var(--on-dark); }
.quote-band p { color: var(--deep-soft); max-width: 640px; margin-inline: auto; }  /* 文字居中且不贴边 */

/* hero 遮罩（P1c 大图铺底：白渐变遮罩 + 左文右留白；配位按图文判定） */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--bg-body);
}
.hero > .container { width: 100%; }  /* 修复：flex 中 container 塌缩导致 hero 文字块整体居中（用户反馈） */
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 白渐变遮罩：左侧文字区可读，右侧透出主体（主体在右 → 对齐左 30-40%；
   若判定主体在左 → 右对齐 + 左遮罩；禁止固定 center 30%） */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 34%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0) 78%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; max-width: 560px; padding-block: var(--space-4xl); }
.hero h1 { font-size: var(--fs-hero); }
.hero .hero-sub { font-size: clamp(1rem, 1.6vw, 1.125rem); color: var(--text-secondary); max-width: 54ch; }
.hero .hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); }

/* 深色主题子页 hero 按钮对比度（用户反馈：蓝字蓝线在深底上看不清） */
.hero--dark .btn--secondary { border-color: var(--blue-bright); color: var(--blue-bright); }
.hero--dark .btn--secondary:hover { background-color: var(--blue-bright); color: var(--dark); }
.hero--dark .btn--primary { background-color: var(--accent-dark); color: var(--dark); }
.hero--dark .btn--primary:hover { background-color: #FF7A8C; color: var(--dark); }

/* 深色主题子页 hero（P1e）：深蓝黑底 + 主题图 + 白字 */
.hero--dark { background-color: var(--bg-dark); color: var(--text-on-dark); }
.hero--dark::before {
  background: linear-gradient(90deg, rgba(10, 20, 40, 0.96) 0%, rgba(10, 20, 40, 0.8) 45%, rgba(10, 20, 40, 0.35) 100%);
}
.hero--dark .hero-sub { color: var(--deep-soft); }

/* 轻 hero（P1d：信息页 faq/contact/legal/blog/参数——纯色 + 眉标 + 面包屑，无图） */
.hero--light {
  min-height: auto;
  padding-block: var(--space-3xl) var(--space-2xl);
  background-color: var(--bg-body);
  border-bottom: 1px solid var(--border);
}
.hero--light::before { display: none; }
.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}
.breadcrumb a { color: var(--cobalt); }
.breadcrumb .crumb-current { color: var(--red); font-weight: var(--fw-semibold); }

/* 蓝图叠加签名层（hero/band 可选：网格点 + 十字准星角标） */
.blueprint-overlay {
  position: absolute; inset: 0; z-index: 1;
  background-image: var(--blueprint-dot);
  background-size: var(--blueprint-dot-size);
  pointer-events: none;
}
.blueprint-overlay.is-grid {
  background-image: var(--blueprint-grid);
  background-size: var(--blueprint-grid-size);
}

/* 认证徽章墙（cert-wall：文本/SVG 徽章，禁虚构 logo 图；固定列数） */
.cert-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.cert-wall .cert {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 96px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-mono);
  color: var(--ink);
  text-align: center;
  padding: var(--space-md);
}
.cert-wall .cert .cert-sub { font-size: var(--fs-mono-label); font-weight: var(--fw-normal); color: var(--text-secondary); margin-top: var(--space-2xs); }
@media (max-width: 1023px) { .cert-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .cert-wall { grid-template-columns: 1fr; } }

/* FAQ 手风琴 */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--space-sm); background-color: var(--bg-card); }
.faq-item summary {
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  font-weight: var(--fw-medium);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  color: var(--cobalt);
  font-size: var(--fs-h4);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item .faq-body { padding: 0 var(--space-lg) var(--space-lg); color: var(--text-secondary); }

/* 询盘弹窗（左图右表双栏，硬约束 22） */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background-color: rgba(10, 20, 40, 0.6);
  display: none; align-items: center; justify-content: center;
  padding: var(--space-md);
}
.modal-overlay.open { display: flex; }
.modal-dialog {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 760px; max-height: 92vh; overflow: hidden;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
}
.modal-image-panel { position: relative; overflow: hidden; min-height: 100%; }
.modal-image-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal-image-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,20,40,0.85) 0%, rgba(10,20,40,0.1) 55%); }
.modal-image-text {
  position: absolute; left: var(--space-lg); right: var(--space-lg); bottom: var(--space-lg);
  color: var(--on-dark); z-index: 2;
}
.modal-image-text .mi-label { font-family: var(--font-mono); font-size: var(--fs-mono-label); letter-spacing: var(--ls-eyebrow); color: var(--blue-bright); }
.modal-image-text .mi-value { font-size: var(--fs-h4); font-weight: var(--fw-medium); }
.modal-image-text .mi-value strong { color: var(--red-bright); }
.modal-form-panel { padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; justify-content: center; }
.modal-form-panel form { display: grid; gap: var(--space-sm); }
.modal-form-panel label { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.modal-form-panel input, .modal-form-panel textarea, .modal-form-panel select {
  width: 100%; min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background-color: var(--bg-body);
}
.modal-form-panel input:focus, .modal-form-panel textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.modal-close {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 10;
  width: 40px; height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  font-size: var(--fs-h3);
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 640px) {
  .modal-dialog { grid-template-columns: 1fr; max-width: 420px; }
  .modal-image-panel { min-height: 160px; max-height: 200px; }
  .modal-image-text { display: none; }
}

/* 页脚蓝图底纹（签名系统级） */
.site-footer { background-color: var(--bg-dark); color: var(--text-on-dark); padding-top: var(--space-3xl); }
.site-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2xl); }
@media (max-width: 1023px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }
.site-footer a { color: var(--deep-soft); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer .footer-bottom {
  border-top: 1px solid var(--line-deep);
  margin-top: var(--space-2xl);
  padding-block: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  color: var(--deep-soft);
  display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
}

/* 头部导航（协调者补充：白底 + 底线框 + 图纸风下拉；mobile 汉堡抽屉） */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background-color: var(--bg-body);
  border-bottom: 1px solid var(--border-strong);
}
.header-inner {
  display: flex; align-items: center; gap: var(--space-lg);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--text-primary); min-height: 44px; }  /* 触控目标 ≥44px */
.brand img { width: 36px; height: 36px; object-fit: contain; }
.brand .brand-name { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-display); font-size: 1.05rem; }
.brand .brand-sub { font-family: var(--font-mono); font-size: var(--fs-mono-label); letter-spacing: var(--ls-mono); color: var(--text-secondary); }

#mainNav { margin-left: auto; }
#mainNav > ul { display: flex; align-items: center; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
#mainNav .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-decoration: none;
  position: relative;
}
#mainNav .nav-link:hover { color: var(--link); }
#mainNav .nav-link[aria-current="page"] { color: var(--red); }
#mainNav .nav-link[aria-current="page"]::after {
  content: '';
  position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: 4px;
  height: 2px; background-color: var(--red);
}
.has-dropdown { position: relative; }
.has-dropdown > .nav-link::after { content: '▾'; font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); }
.has-dropdown .dropdown {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: var(--space-xs) 0;
  list-style: none; margin: 0;
  display: none; z-index: 120;
}
.has-dropdown.open .dropdown { display: block; }
.has-dropdown .dropdown a {
  display: block; padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-small); color: var(--text-primary);
  text-decoration: none;
}
.has-dropdown .dropdown a:hover { color: var(--link); background-color: var(--blue-tint); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background-color: var(--cobalt); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  #mainNav {
    position: absolute; top: 100%; left: 0; right: 0;
    background-color: var(--bg-body);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
    display: none;
    margin-left: 0;
  }
  #mainNav.open { display: block; }
  #mainNav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-sm) var(--gutter) var(--space-md); }
  #mainNav .nav-link { width: 100%; min-height: 48px; }
  .has-dropdown .dropdown { position: static; min-width: 0; border: 0; border-left: 2px solid var(--cobalt); border-radius: 0; box-shadow: none; padding-left: var(--space-sm); }
  .has-dropdown .dropdown a { padding: var(--space-sm); }
  .nav-cta { display: none; }
}

/* 版式印刷说明：本文件是 token 与共享组件的唯一来源；
   页面特有样式写子页 <style>，index.html 不得内嵌大段 <style>。 */