@charset "utf-8";

/* ==========================================================================
   自托管字体（子集化 woff2，全站并集字符集）
   —— 不请求任何外部字体服务：Google Fonts 在中国大陆访问不稳定，
      一旦回退即整站风格失效。此处内联 @font-face，路径相对 assets/css/。
   —— 拉丁 Barlow / Barlow Semi Condensed 承担"硬朗"（DIN 血统、方正偏窄），
      中文由 Noto Sans SC 400/700/900 承担（标题 900 取黑体最重一档）。
   ========================================================================== */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlowsemicondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlowsemicondensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/notosanssc-400.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/notosanssc-700.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/notosanssc-900.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibmplexmono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibmplexmono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibmplexmono-600.woff2') format('woff2'); }

/* ==========================================================================
   贵州中科华创科技有限公司 · 官网设计系统 v11「冷峻仪器 · Instrument Cool」
   --------------------------------------------------------------------------
   视觉主张：可信度来自测量，不来自修饰。界面是一台校准过的仪器：
   冷白场、直角、细分隔线，唯一的彩色是那支品牌蓝——它只标注"这一项与
   其余不同"，不参与任何装饰。
   —— 冷白场：底 #F6F8FB / 面 #FFFFFF / 沉 #EEF2F7 三档，全部偏蓝灰同温。
   —— 硬朗字面：拉丁 Barlow（正文）+ Barlow Semi Condensed（标题/读数）
      ——DIN 血统、方正偏窄；中文 Noto Sans SC，标题 900 字重。
   —— 字距契约：中文标题 letter-spacing 必须为 0；仅纯拉丁 display 字号可收紧。
   —— 容器策略：一律 border 线框（1px --line），hover 只把线换成品牌蓝；
      投影几乎扁平，仅卡片 hover 用 0 2px 12px rgba(11,95,165,.07)。
   —— 两条深带：顶栏与页脚是全站唯一的深色（--ink-900 平涂），
      用来给长页面"封头封底"；正文区不含任何深色块。
   —— 照片统一降饱和（saturate .88 / contrast 1.04）+ 冷白色蒙版。
   —— 已废弃：辉光、渐变描边、玻璃模糊、装饰性网格、四角准星、齿标刻度尺。
   —— 动效只用 transform / opacity（合成层）；尊重 prefers-reduced-motion。
   ========================================================================== */

/* ---------- 0. 令牌 ---------- */
:root {
  /* ---------- 品牌蓝阶（v11 冷峻仪器：取自企业标识，去掉青味，压向纯蓝） ---------- */
  --brand-50:  #EEF4FA;
  --brand-100: #E7F0F9;   /* primary-subtle：极浅底 */
  --brand-200: #D7E7F6;   /* primary-tint：浅底 */
  --brand-300: #9CC0E0;   /* 次级描边 */
  --brand-400: #4E8FC4;   /* 渐变高光端 */
  --brand-500: #0B5FA5;   /* 焦点环 = primary */
  --brand-600: #0A5390;
  --brand-700: #0B5FA5;   /* primary：全站唯一强调色 */
  --brand-800: #084C86;   /* primary-hover */
  --brand-900: #06365E;   /* primary-deep：深蓝带 */

  /* ---------- 深带（全站仅顶栏与页脚使用） ---------- */
  --ink-900: #0E1419;
  --on-dark: #E7ECF2;     /* 深带上的正文 */
  /* v11 不再使用青色，强调色收敛为品牌蓝一支；
     --glow 置为 transparent，使全站以它参与的 box-shadow 自动失效 */
  --glow: transparent;

  /* ---------- 冷白场 ----------
     三档同温（偏蓝灰）表面：底 / 面 / 沉。最深的一档仍是浅色，
     全站正文区不含任何深色块——深色只留给顶栏与页脚两条带。 */
  --surface: #F6F8FB;
  --surface-2: #EEF2F7;
  --surface-3: #E4EAF2;

  --txt: #0E1419;
  --muted: #454E5A;
  /* 在沉场 #E4EAF2 上约 5.4:1，小字标注满足 AA */
  --muted-2: #69727E;

  /* 细分隔线三级：冷灰，是本语言最主要的塑形工具 */
  --line: #DCE3EC;
  --line-2: #E9EEF5;
  --line-strong: #B8C2CF;

  /* 语义强调色：品牌蓝是全站唯一强调色，只用于链接、标注与关键数据 */
  --accent-text: #0B5FA5;
  --accent-text-2: #084C86;
  --accent-soft: rgba(11, 95, 165, 0.07);
  --tag-bg: rgba(11, 95, 165, 0.06);
  --tag-line: rgba(11, 95, 165, 0.22);
  --hair: rgba(11, 95, 165, 0.09);

  /* 语义色（与品牌蓝同温，避免出现高饱和的原色） */
  --danger: #B3261E;
  --success: #0F7B4F;
  --warning: #B26A00;

  /* 数字：编辑式排印用墨色实心，不做渐变填充。
     三个令牌取同一色值，使既有的 linear-gradient 文字填充自动退化为纯色。 */
  --num-a: #0E1419;
  --num-b: #0E1419;
  --num-c: #0E1419;
  --num-solid: #0E1419;

  /* 反白：落在品牌蓝/深带上的文字 */
  --on-primary: #FFFFFF;

  /* 半透明基色的 RGB 分量：供蒙版与叠色使用，避免在规则里硬编码色值 */
  --surface-rgb: 246, 248, 251;
  --ink-rgb: 14, 20, 25;
  --on-dark-rgb: 231, 236, 242;

  /* 图像处理令牌：照片统一降饱和 + 冷白蒙版 */
  --img-saturate: 0.88;
  --img-contrast: 1.04;
  --hero-img-saturate: 0.5;
  --scrim: 0.78;
  --hero-scrim: 0.76;   /* 首屏冷白蒙版浓度：0.76 让实拍照片可辨识，同时保证标题区对比度仍达 AA */

  --f-sans: "Barlow", "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  /* 标题与读数改用 Barlow Semi Condensed：DIN 血统、方正偏窄，
     中文回退 Noto Sans SC（标题取 900）。这是本次视觉语言换代最外显的一处。 */
  --f-disp: "Barlow Semi Condensed", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* 字号层级：标题改走窄体无衬线后，字号按"仪表读数"比例重新标定 */
  --fs-h1: clamp(32px, 4.3vw, 54px);
  --fs-h2: clamp(25px, 3.2vw, 42px);
  --fs-h3: clamp(17px, 1.5vw, 21px);
  --fs-h4: 16px;
  --fs-body: 16px;
  --fs-sm: 14.5px;
  --fs-xs: 13.5px;
  /* 等宽标注三层：标签 / 数据 / 元信息 */
  --fs-label: 11.5px;
  --fs-data: 12.5px;
  --fs-meta: 11.5px;
  --tr-label: 0.15em;
  --tr-data: 0.04em;
  --tr-meta: 0.02em;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  /* 编辑式排版靠层间距建立节奏，故区块间距比 v7 略放宽 */
  --sp: clamp(68px, 7.8vw, 120px);
  --sp-l: clamp(80px, 9.2vw, 142px);
  --sp-s: clamp(46px, 5.2vw, 76px);

  /* 圆角收紧：仪器语言的边界是"直角倒钝"而非"气泡"，故全站改用小圆角 */
  --r-sm: 3px;
  --r: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 投影：仪器语言几乎不用投影，层次交由细分隔线承担。
     只留 hover 时一层极轻的品牌蓝投影。 */
  --sh-1: 0 1px 2px rgba(14, 20, 25, 0.04);
  --sh-2: 0 2px 12px rgba(11, 95, 165, 0.07);
  --sh-3: 0 10px 28px -20px rgba(11, 95, 165, 0.22);

  /* 表头底：浅场一档 */
  --th-bg: linear-gradient(180deg, #EEF2F7 0%, #E9EEF5 100%);

  /* 打印：纸面与墨色（供打印媒体规则引用，避免暗色底被浏览器丢弃） */
  --print-paper: #FFFFFF;
  --print-ink: #000000;
}

/* v11 起：令牌在全站保持同一套浅色语义，正文区不出现深色块。
   唯一的深色是顶栏与页脚两条 --ink-900 带（给长页面封头封底），
   它们各自覆写自身子元素的颜色，不改动全局令牌。 */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--txt);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  font-weight: 400;
  /* 字距契约：中文占绝大多数字面，letter-spacing 必须为 0，
     否则 CJK 字间会被撑开成"假拉丁间距"。拉丁收紧只允许出现在
     --f-disp 的纯拉丁大字号上（见 .metric b / .readout 等）。 */
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
  /* 长串兜底：证书编号、统一社会信用代码、邮箱等不可断长串优先折行而非溢出 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
/* 标题：窄体无衬线（Barlow Semi Condensed + Noto Sans SC 900）。
   中文取黑体最重一档建立"硬朗"，字距 0；行距比正文收得更紧，
   让大字号标题本身成为版面里最重的墨块。 */
h1, h2 { margin: 0; font-family: var(--f-disp); font-weight: 900; line-height: 1.22; letter-spacing: 0; text-wrap: balance; }
h3, h4, h5 { margin: 0; font-family: var(--f-sans); font-weight: 600; line-height: 1.45; letter-spacing: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }
strong { font-weight: 700; color: var(--txt); }
em { font-style: normal; color: var(--accent-text); font-weight: 700; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
::selection { background: var(--brand-200); color: var(--brand-900); }

/* 触控优化：去掉双击缩放延迟；点按高亮显式关闭（交互态由 hover / focus-visible 承担） */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, input, select, textarea, label { touch-action: manipulation; }

/* 页内锚点跳转时避开 68px 吸顶导航，聚焦元素不被遮挡 */
section[id] { scroll-margin-top: 96px; }

/* 跳转主内容：仅键盘聚焦时可见 */
.skip-link {
  position: fixed; left: 16px; top: -72px; z-index: 120;
  padding: 11px 18px; border-radius: var(--r-sm);
  background: var(--brand-700); color: var(--on-primary); font-size: 14px; font-weight: 600;
  border: 1px solid var(--brand-800); box-shadow: var(--sh-3);
  transition: top 0.25s var(--ease);
}
.skip-link:focus-visible { top: 14px; outline-color: var(--on-primary); }

/* ---------- 1. 排版元件 ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-n { max-width: 880px; }

/* 栏目眉标：改为"等宽小字 + 短蓝线"，去掉胶囊底、渐变与脉冲点。
   编辑式排版里，这种克制的标注比发光徽章更能建立"被认真编辑过"的可信感。 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text);
  padding: 0; border: 0; border-radius: 0; background: none;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--brand-700); flex: none;
}
.eyebrow .idx { color: var(--muted-2); letter-spacing: 0.06em; }

.h1 { font-size: var(--fs-h1); line-height: 1.3; }
.h2 { font-size: var(--fs-h2); line-height: 1.3; }
.h3 { font-size: var(--fs-h3); font-weight: 600; }
.h4 { font-size: var(--fs-h4); font-weight: 600; }

.lead { font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.92; color: var(--muted); max-width: 68ch; }
.hint { font-size: var(--fs-xs); color: var(--muted-2); line-height: 1.85; }

.sec-head { max-width: 800px; margin-bottom: clamp(32px, 4vw, 56px); }
/* 板块标题下的短蓝线：纸本语言里它是一条"压印线"——实心、无渐变、无辉光 */
.sec-head .h2::after {
  content: ""; display: block; width: 52px; height: 2px; margin-top: 20px;
  background: var(--brand-700);
}
.sec-head .h2 + .lead { margin-top: 16px; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; max-width: none; }

/* ---------- 区块标题的三个「声部」 ----------
   视觉疲劳的一大来源不是内容，而是每一屏都用同一套抬头：眉标 → 标题 → 短蓝线，
   连出现八次就变成了节拍器。这里按区块底色自动切换三种抬头形态，
   让相邻区块的起始节奏不一样——不需要改任何 HTML。 */

/* 声部②：深纸带 = 章节扉页。顶部压一条通栏重线，标题放大，
   编号从等宽小字变成衬线大数字，取消标题下的短蓝线。 */
.sec-paper3 .sec-head {
  max-width: none; margin-bottom: clamp(34px, 4vw, 56px);
  border-top: 2px solid var(--brand-700);
  padding-top: clamp(22px, 2.4vw, 32px);
}
.sec-paper3 .sec-head .h2 { font-size: clamp(28px, 3.7vw, 48px); }
.sec-paper3 .sec-head .h2::after { content: none; }
.sec-paper3 .sec-head .lead { max-width: 62ch; }
.sec-paper3 .sec-head .eyebrow { margin-bottom: 14px; }
.sec-paper3 .sec-head .eyebrow::before { display: none; }
.sec-paper3 .sec-head .eyebrow .idx {
  font-family: var(--f-disp); font-size: 30px; line-height: 1;
  letter-spacing: -0.02em; color: var(--brand-700);
}

/* 声部③：浅纸带（原 sec-ink）= 左边注。
   整块抬头向左缩进，用一根品牌蓝粗竖线标出，形成"被引出的一段"；
   同样取消短蓝线，缩短与上一区块的节拍。 */
.on-dark .sec-head {
  max-width: 800px;
  padding-left: clamp(18px, 2vw, 26px);
  border-left: 3px solid var(--brand-700);
}
.on-dark .sec-head .h2 { font-size: clamp(26px, 3.3vw, 42px); }
.on-dark .sec-head .h2::after { content: none; }

/* 刻度尺分隔：左侧刻度 + 右侧渐隐引导线 */
.rule-coord {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--muted-2); text-transform: uppercase;
}
/* 章节分隔：短蓝线 + 通栏细分隔线，取代原来的刻度尺与渐隐引导线 */
.rule-coord::before {
  content: ""; flex: none; width: 22px; height: 2px; background: var(--brand-700);
}
.rule-coord::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ---------- 2. 按钮 ---------- */
/* 主按钮：实心品牌蓝 + 白字（5.9:1）。仪器语言去掉渐变、扫光与投影，
   只保留"实心块 + 直角倒钝"的形态，靠色块本身说话。 */
.btn, .btn-solid, .btn-teal {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px;
  font-family: var(--f-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid var(--brand-700); border-radius: var(--r-sm);
  background: var(--brand-700);
  color: var(--on-primary); cursor: pointer; position: relative;
  transition: background 0.2s, border-color 0.2s, transform 0.12s var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform 0.32s var(--ease); }
.btn:hover, .btn-solid:hover, .btn-teal:hover {
  background: var(--brand-800); border-color: var(--brand-800); transform: translateY(-1px);
}
.btn:hover svg { transform: translateX(4px); }

/* 次按钮（描边式）：透明底 + 品牌蓝描边与文字，hover 转浅蓝底。
   替代原来的墨色实心反白——仪器语言不用"整块反色"制造对比。 */
.btn-ghost {
  background: transparent; color: var(--brand-700); border-color: var(--brand-700);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-700);
  transform: translateY(-1px);
}
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* 深蓝转化面板内的按钮：反白实心 + 半透明白描边（只作用于 .cta-in，
   不影响首屏——首屏虽然也挂 .on-dark，但它的按钮仍是品牌蓝实心） */
.cta-in .btn { background: var(--on-primary); color: var(--brand-900); border-color: var(--on-primary); }
.cta-in .btn:hover { background: var(--brand-200); border-color: var(--brand-200); color: var(--brand-900); }
.cta-in .btn-ghost { background: transparent; color: var(--on-primary); border-color: rgba(var(--on-dark-rgb), 0.5); }
.cta-in .btn-ghost:hover { background: rgba(var(--on-dark-rgb), 0.12); border-color: var(--on-primary); color: var(--on-primary); }

.link-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--accent-text);
  transition: gap 0.3s var(--ease), color 0.3s;
}
.link-more:hover { gap: 12px; color: var(--accent-text-2); }

/* 正文内联链接：全站统一由设计系统提供，避免在页面里硬编码颜色
   取 --accent-text（亮面 #0B5FA5 于 #F6F8FB 上 6.0:1，达 WCAG AA） */
.link-inline {
  color: var(--accent-text);
  border-bottom: 1px solid var(--tag-line);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.link-inline:hover { border-color: var(--brand-700); background: var(--accent-soft); }

/* ---------- 3. 头部导航 ---------- */
/* 顶栏：全站第一条深带（平涂 --ink-900）。用途是给页面"压一条封头线"，
   所以它极薄（36px）、只放资质与营业时间，不承载导航。 */
.topline {
  background: var(--ink-900);
  color: rgba(var(--on-dark-rgb), 0.72);
  font-family: var(--f-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta);
}
.topline .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; height: 36px; }
.topline a { color: var(--on-primary); font-weight: 500; }
.topline .tl-r { display: flex; gap: 24px; align-items: center; }
.topline .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-300); display: inline-block; margin-right: 9px; }

/* 导航：白面 + 极轻玻璃（滚动时透出下方内容，但不形成灰雾）+ 细分隔线。
   滚动进度线保留但改为实心品牌蓝——它是功能性指示，不是装饰。 */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(var(--surface-rgb), 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.site-head::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 2;
  background: var(--brand-700);
}
@supports (animation-timeline: scroll()) {
  .site-head::before { animation: hudProgress linear both; animation-timeline: scroll(root); }
}
@keyframes hudProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.site-head.is-stuck {
  background: rgba(var(--surface-rgb), 0.99); border-color: var(--line-strong);
  box-shadow: 0 1px 0 var(--line-2);
}
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 22px; height: 68px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark { width: 38px; height: 32px; object-fit: contain; flex: none; }
.brand-txt { line-height: 1.1; }
.brand-cn { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 18px; color: var(--txt); letter-spacing: 0; }
.brand-en { display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.22em; color: var(--muted-2); text-transform: uppercase; margin-top: 4px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative; padding: 22px 9px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  transition: color 0.3s; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 12px; height: 2px;
  background: var(--brand-700);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav a:hover { color: var(--txt); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--txt); font-weight: 600; }
.head-cta { display: flex; align-items: center; gap: 14px; flex: none; }
.head-cta .btn { padding: 10px 20px; font-size: 13.5px; }

.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r); cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--txt); border-radius: 2px; transition: 0.32s var(--ease); }
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 19.5px; }
.burger span:nth-child(3) { top: 25px; }
.burger.on span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 55;
  /* 明色化：抽屉改为最深一档纸，与纸白页首形成可辨的色阶，
     靠大字号与细分隔线建立层级，不再依赖整屏黑。 */
  background: var(--surface-3);
  color: var(--txt); padding: 108px 28px 40px; transform: translateY(-100%);
  /* 关闭态 visibility 隐藏：移出屏外的链接不再可被 Tab 聚焦；
     关闭时先播完滑出动画再隐藏，开启时立即恢复可见 */
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0s 0.5s;
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.on { transform: translateY(0); visibility: visible; transition: transform 0.5s var(--ease), visibility 0s; }
.drawer a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; color: var(--txt); transition: color 0.3s, padding-left 0.3s var(--ease); }
.drawer a:hover { color: var(--brand-700); padding-left: 6px; }
.drawer .d-foot { margin-top: 30px; font-family: var(--f-mono); font-size: 12px; color: var(--muted-2); line-height: 2; }

/* ---------- 4. 板块 ---------- */
.sec { padding: var(--sp) 0; position: relative; }
.sec-ink, .sec-ink-2 { padding: var(--sp-l) 0; }
.sec-tight { padding: var(--sp-s) 0; }
/* 阅读区：平涂纸白。纸本语言不再用背景渐变"造气氛"，
   分节改由上方细分隔线与标题层级完成。 */
.sec-paper, .sec-white { background: var(--surface); }
/* 深纸带：仅一档色差 + 一条压印细线，用于需要轻微分节的长页面。
   同时作为"章节扉页"，给更大的上下留白——与相邻区块形成松紧对比，
   避免整页以同一个节拍匀速下滚。 */
.sec-paper3 { background: var(--surface-2); border-top: 1px solid var(--line); padding: var(--sp-l) 0; }
/* 对比带：未挂 .on-dark 时退化为浅纸条带，保证不出现暗底暗字 */
.sec-ink:not(.on-dark), .sec-ink-2:not(.on-dark) {
  background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sec > .wrap { position: relative; z-index: 2; }

/* 明色强调带：.on-dark 不再表示"墨底"，只表示"比纸白深一到两档的条带"。
   首屏、内页页头、对比带、转化段统一由它着色，全站最深的表面止于浅纸。
   区块之间靠色差与细分隔线分层，不靠明暗对比。 */
.on-dark {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--txt);
  background-color: var(--surface-2);
}

/* 首屏的层次不靠底色：.on-dark 在 v11 已退化为浅条带，首屏的"场"由
   .hero-photo 的满铺照片 + 冷白蒙版单独建立（见第 5 节）。 */

/* 原「浮动极光」与「四角准星」两层装饰已整体移除：
   它们让每个墨色区块都呈现出同一张"技术仪表"脸，
   是页面之间缺乏辨识度的直接原因。类名保留，不再产生任何绘制。 */
.on-dark::before, .on-dark::after { content: none; }

/* 亮色区底纹：纸本语言不再使用工程网格与顶部光晕——这类装饰在多个页面
   重复出现，会持续削弱每页的辨识度，故整体移除（类名保留，不改 HTML）。 */
.grid-bg { position: relative; }
.grid-bg::before, .grid-bg::after,
.grid-bg-dark::before, .grid-bg-dark::after { content: none; }

.sec-ink .rule-coord, .sec-paper3 .rule-coord { color: var(--muted-2); }

/* ---------- 5. 首屏 ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(560px, 80vh, 840px);
  display: flex; align-items: center;
  background: var(--surface);
  /* 上下留白保持对称：导航是 sticky 且上方另有装饰条（合计 108px 已在文档流内），
     无需再用「上大下小」的 padding 去补偿固定导航，否则首屏文字会整体下沉约 40px */
  padding: clamp(60px, 6.5vw, 100px) 0;
}
/* 首屏题图：整幅满铺 + 冷白蒙版。
   照片在这里的角色是"底纹"而不是"插图"——先降到近单色（saturate .5），
   再压一层 86% 的场白，于是整块背景变成一片偏蓝灰的单色场，
   墨色大标题落上去对比度稳定，不会随照片内容忽明忽暗。 */
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
}
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  filter: saturate(var(--hero-img-saturate)) contrast(var(--img-contrast)) brightness(1.06);
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: var(--surface); opacity: var(--hero-scrim);
}
.hero .wrap { position: relative; z-index: 3; }
.hero-cols { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(330px, 1fr); gap: clamp(30px, 3.6vw, 58px); align-items: center; }
.hero-in { max-width: none; position: relative; }
.hero-in::before { content: none; }
.hero .h1 { color: var(--txt); margin-bottom: 24px; font-size: clamp(34px, 4.3vw, 64px); }
/* 第二行走品牌蓝：明色首屏需要一个有生气的高音，
   整行只有它用彩色，所以它成了首屏唯一的结论。 */
.hero .h1 .ln2 {
  display: block;
  color: var(--brand-700);
}
.hero-sub {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-label);
  color: var(--muted-2); margin-bottom: 22px; text-transform: uppercase;
}
.hero-sub::before {
  content: ""; width: 26px; height: 2px; flex: none; background: var(--brand-700);
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--muted);
  background: none;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.chip:hover { color: var(--accent-text); border-color: var(--brand-700); background: var(--accent-soft); }
.chip b { font-family: var(--f-mono); font-size: 10.5px; color: var(--accent-text); font-weight: 500; }

/* 亮面 chips（业务场景标签） */
.chip-light {
  color: var(--muted); border-color: var(--line); background: var(--surface); border-radius: var(--r-pill);
}
.chip-light:hover { color: var(--accent-text); border-color: var(--brand-700); background: var(--accent-soft); }
.chip-light b { color: var(--accent-text); }

/* 首屏右侧栏：一枚压在题图上的白面读数面板。
   仪器语言里它靠"白面 vs 冷场"的色差和一层极轻的品牌蓝投影浮起来，
   不用背景模糊（那会在照片上留下灰雾）。 */
.hero-side {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px);
  background: rgba(var(--surface-rgb), 0.94);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.hero-side .hero-badges { display: grid; gap: 0; margin: 0; }
.hero-side .chip {
  display: flex; align-items: center; width: 100%;
  color: var(--txt);
  padding: 11px 0; border: 0; border-bottom: 1px solid var(--line-2);
  border-radius: 0; background: none;
  transition: padding-left 0.3s var(--ease), color 0.3s, border-color 0.3s;
}
.hero-side .chip:last-child { border-bottom: 0; }
.hero-side .chip b { width: 28px; flex: none; color: var(--accent-text); }
.hero-side .chip:hover { padding-left: 6px; color: var(--accent-text); border-color: var(--line); background: transparent; }
.hero-side .hero-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  position: static; margin: 22px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.hero-side .hero-metric { padding: 0 0 16px; border: 0; background: none; }
.hero-side .hero-metric:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--line-2); }
.hero-side .hero-metric:nth-child(even) { padding-left: 16px; }
.hero-side .hero-metric:nth-last-child(-n+2) { padding-bottom: 0; }
.hero-side .hero-metric b { font-size: 24px; }

.hero-metric b {
  display: block; font-family: var(--f-disp); font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--num-solid);
  background-image: linear-gradient(140deg, var(--num-a) 0%, var(--num-b) 52%, var(--num-c) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-metric span { font-size: 12px; color: var(--muted); }

/* 资质单元格：文字与数字格区分，用品牌蓝标题 + 顶部短横 */
.hero-metric.is-cred b {
  font-size: 17.5px; line-height: 1.42; letter-spacing: 0; font-weight: 700;
  color: var(--accent-text);
  background-image: none; -webkit-text-fill-color: currentColor;
}
.hero-metric.is-cred b::before {
  content: ""; display: block; width: 24px; height: 2px; margin-bottom: 9px;
  background: var(--brand-700);
}

.scroll-cue { display: none; }

/* 玻璃面板上的四角刻度已随面板一并移除 */
.ticks::before { content: none; }

/* ---------- 6. 内页页头（浅纸扉页） ---------- */
.page-head {
  position: relative; overflow: hidden;
  padding: clamp(58px, 7vw, 104px) 0 clamp(44px, 5vw, 70px);
}
.page-head .wrap { position: relative; z-index: 2; }
.page-head .wrap::before { content: none; }
.page-head .h1 { font-size: clamp(28px, 3.6vw, 48px); max-width: 26ch; color: var(--txt); }
.page-head .lead { margin-top: 20px; }
.crumb { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); color: var(--muted-2); margin-bottom: 20px; text-transform: uppercase; }
.crumb a { color: var(--accent-text); }
.crumb a:hover { color: var(--brand-800); }
.crumb i { font-style: normal; margin: 0 9px; opacity: 0.45; }

/* 页头大字水印：极淡的品牌蓝暗纹，提示章节但不抢戏 */
.head-mark {
  position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%);
  font-family: var(--f-disp); font-size: clamp(56px, 9vw, 132px); font-weight: 700;
  color: var(--hair);
  letter-spacing: -0.05em; line-height: 1;
  z-index: 1; pointer-events: none; user-select: none;
}

/* ---------- 7. 栅格与卡片 ---------- */
.cards { display: grid; gap: 18px; }
.cards > * {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color 0.35s, box-shadow 0.4s, transform 0.4s var(--ease);
}
.cards > *:hover { border-color: var(--brand-700); box-shadow: var(--sh-2); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }

/* 纯文字卡片：改为纵向 flex + CTA 吸底，
   同一行里不论文案长短，右下角的"了解更多"都落在同一条水平线上 */
.cards > .card:not(.card-media),
.bento > .card:not(.card-media) {
  display: flex; flex-direction: column; align-items: flex-start;
}
.cards > .card:not(.card-media) .link-more,
.bento > .card:not(.card-media) .link-more {
  margin-top: auto; padding-top: 20px;
}

.card {
  display: block; height: 100%;
  background: var(--surface); padding: 30px 28px; position: relative;
  border-radius: var(--r-lg);
  transition: background 0.3s, border-color 0.35s, box-shadow 0.4s var(--ease);
}
/* 顶部生长线：hover 时由左向右铺满的实心蓝线，取代原来的渐变 + 辉光 */
.card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--brand-700);
  transition: width 0.55s var(--ease); pointer-events: none;
}
.card:hover { background: var(--surface-2); }
.card:hover::after { width: 100%; }
/* 卡片四角准星已移除：装饰层让位给细分隔线 */
.card:not(.card-media)::before { content: none; }

/* 卡片序号：由"胶囊徽章"改为"等宽小字 + 短蓝线"，与栏目眉标共用同一套语言 */
.card-num {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label); color: var(--accent-text);
  padding: 0; border: 0; border-radius: 0; background: none;
  margin-bottom: 18px;
}
.card-num::before { content: ""; width: 16px; height: 2px; background: var(--brand-700); flex: none; }
.card h3 { font-size: clamp(17px, 1.4vw, 20px); margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--muted); margin-bottom: 0; }
.card .link-more { margin-top: 20px; }
.card-ico { width: 40px; height: 40px; margin-bottom: 18px; color: var(--accent-text); }

/* Bento */
.bento { display: grid; gap: 18px; grid-template-columns: repeat(6, 1fr); }
.bento > * { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.bento > * { grid-column: span 2; }
.bento .b-wide, .bento .b-half { grid-column: span 3; }
.bento .b-full { grid-column: span 6; }
.bento .b-tall { grid-row: span 2; }
.bento .card:hover { border-color: var(--brand-700); box-shadow: var(--sh-2); }

/* 带图卡片 */
.card-media { padding: 0; }
.card-media .cm-img { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.card-media .cm-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)); transition: transform 0.9s var(--ease); }
.card-media:hover .cm-img img { transform: scale(1.04); }
.card-media .cm-body { display: block; padding: 26px 28px 28px; }
/* bento 内所有卡片媒体区统一比例：图片与生成式画布必须同高，否则下一行内容整体错位 */
.bento .card-media .cm-img,
.bento .card-media .ai-panel { aspect-ratio: 16 / 9; }

/* 带图卡片：正文区纵向撑满、CTA 吸底，避免同一行里因文案行数不同导致链接高低不齐 */
.card-media { display: flex; flex-direction: column; }
.card-media .cm-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.card-media .cm-body .link-more { margin-top: auto; }

.card-go { position: absolute; right: 20px; bottom: 20px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--muted-2); background: var(--surface); transition: 0.35s var(--ease); }
.card:hover .card-go { border-color: var(--brand-700); color: var(--accent-text); transform: translate(2px, -2px); }

/* ---------- 8. 数据与清单 ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* 侧栏窄列中的指标降为 2 列：4 列时数字与单位（如「2018 年」）会被拆行 */
@media (min-width: 901px) { .side-col .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric {
  position: relative; overflow: hidden;
  background: var(--surface); padding: 32px 26px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color 0.35s, box-shadow 0.4s, transform 0.4s var(--ease);
}
.metric::before {
  content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 2px;
  background: var(--brand-700);
}
.metric:hover { border-color: var(--brand-700); box-shadow: var(--sh-2); transform: translateY(-2px); }
.metric b {
  display: block; font-family: var(--f-disp); font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; font-weight: 700;
  color: var(--num-solid);
  background-image: linear-gradient(140deg, var(--num-a) 0%, var(--num-b) 52%, var(--num-c) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow-wrap: break-word;
}
.metric b small { font-size: 0.42em; margin-left: 3px; color: var(--muted-2); font-weight: 700; -webkit-text-fill-color: var(--muted-2); }
.metric span { display: block; margin-top: 12px; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
/* 冷场内的数据面板：保持白面，与卡片同一套表面语言（不再做半透明白） */
.on-dark .metric {
  background: var(--surface);
}

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: 13px 0 13px 30px; margin: 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; color: var(--muted); }
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: ""; position: absolute; left: 3px; top: 22px;
  width: 10px; height: 5.5px; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}
.check-list strong { color: var(--txt); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.4vw, 64px); }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.4vw, 40px); }
/* 侧栏布局：媒体/标题在左，正文在右。
   两栏宽度调到接近均分（1:1.1，原为 1:1.94）——
   原比例下左栏又窄又高、右栏又宽又短，整块看起来是斜的 */
.side-col { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(30px, 3.6vw, 62px); align-items: start; }
.side-sticky { position: sticky; top: 104px; }

.blk { margin-bottom: clamp(36px, 4vw, 60px); }
.blk:last-child { margin-bottom: 0; }
/* 区块小标题：下缘改为通栏细分隔线，取代原来的蓝青渐隐发丝线 */
.blk-h { position: relative; display: flex; align-items: baseline; gap: 13px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 0; }
.blk-h::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line);
}
.blk-h .n { font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); color: var(--accent-text); flex: none; }
.blk-h h2, .blk-h h3 { margin: 0; }

/* 定义型清单 */
.def-list { margin: 0; border-top: 1px solid var(--line); }
.def-list > div { padding: 15px 0; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: baseline; }
.def-list dt { font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); color: var(--muted-2); }
.def-list dd { margin: 0; font-size: 14.5px; color: var(--txt); }
/* 侧栏窄列里的定义清单：140px 标签列会把值挤成四五行的碎块，
   收窄标签列（标签都是 4 字）让值排得开、每行等长 */
@media (min-width: 901px) {
  .side-col .def-list > div { grid-template-columns: 104px 1fr; gap: 18px; }
}

/* 流程：行式，hover 出现左侧指示条 */
.flow { display: grid; border-top: 1px solid var(--line); }
.flow-step { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: baseline; padding: 18px 0 18px 0; border-bottom: 1px solid var(--line-2); transition: padding-left 0.35s var(--ease); }
.flow-step::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--brand-700); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease); }
.flow-step:hover { padding-left: 14px; }
.flow-step:hover::before { transform: scaleY(1); }
.flow-step .fn { font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); color: var(--accent-text); }
.flow-step h4 { margin: 0 0 5px; font-size: 16px; }
.flow-step p { margin: 0; font-size: 14px; color: var(--muted); }

.flow-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font-size: 13.5px; font-weight: 500; color: var(--txt);
  transition: border-color 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;
}
.flow-pill:hover { border-color: var(--brand-700); background: var(--accent-soft); color: var(--accent-text); }
.flow-pill b { font-family: var(--f-mono); font-size: 10.5px; color: var(--accent-text); font-weight: 500; }
.flow-arrow { color: var(--muted-2); font-size: 12px; opacity: 0.6; }

/* 流程的网格化呈现：用于与服务页默认的胶囊链区分 */
.flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.flow-grid .mini { padding: 20px; }
@media (max-width: 900px) { .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flow-grid { grid-template-columns: 1fr; } }

/* ---------- 9. 对比表 ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-variant-numeric: tabular-nums; }
table.cmp th, table.cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); font-size: 14px; }
/* 表头：浅纸底 + 一条较重的压印线，取代原来的淡蓝渐变与浅蓝边 */
table.cmp thead th { background: var(--th-bg); color: var(--txt); font-size: var(--fs-xs); font-weight: 600; border-bottom: 1px solid var(--brand-700); white-space: nowrap; }
table.cmp thead th:first-child, table.cmp tbody th { width: 168px; }
table.cmp thead th:first-child { color: var(--muted-2); }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp tbody tr:hover { background: var(--accent-soft); }
table.cmp tbody th { font-weight: 500; color: var(--muted); font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); white-space: nowrap; }
table.cmp td strong { color: var(--accent-text); }

/* ---------- 10. 问答 ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line-2); background: transparent; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 46px 1fr 24px; gap: 14px; align-items: start;
  padding: 20px 0; transition: color 0.3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; width: 10px; height: 10px; margin-top: 8px;
  border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2);
  transform: rotate(45deg); transition: transform 0.35s var(--ease), border-color 0.3s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); border-color: var(--brand-700); }
.faq-item summary:hover .faq-q { color: var(--accent-text); }
.faq-q { font-weight: 600; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.6; transition: color 0.3s; }
.faq-n { font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); color: var(--accent-text); padding-top: 4px; }
.faq-a { padding: 0 0 22px 60px; font-size: var(--fs-sm); color: var(--muted); max-width: 66ch; }
.faq-a strong { color: var(--txt); }
.faq-a a { color: var(--accent-text); border-bottom: 1px solid var(--tag-line); }

.faq-tools { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.faq-tab {
  padding: 0 0 14px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; font-size: 14px; font-weight: 500; color: var(--muted-2); cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.faq-tab:hover { color: var(--txt); }
.faq-tab.on { border-bottom-color: var(--brand-700); color: var(--accent-text); font-weight: 600; background: transparent; }
.faq-group { display: none; }
.faq-group.on { display: block; }

/* ---------- 11. 时间线 ---------- */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -28px; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand-700);
}
.tl-date { font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); color: var(--accent-text); margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.tl-item h3 { font-size: 17px; margin-bottom: 7px; }
.tl-item p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- 12. 团队 ---------- */
.person {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; display: flex; gap: 16px; align-items: flex-start;
  transition: background 0.3s, border-color 0.35s, box-shadow 0.4s, transform 0.4s var(--ease);
}
.person:hover { background: var(--surface-2); border-color: var(--brand-700); box-shadow: var(--sh-2); transform: translateY(-2px); }
.person-av {
  width: 46px; height: 46px; border-radius: var(--r-sm); flex: none;
  background: var(--brand-700);
  color: var(--on-primary); display: grid; place-items: center; font-family: var(--f-disp); font-size: 16px; font-weight: 700;
}
.person h3 { font-size: 16.5px; margin-bottom: 3px; }
.person .role { font-family: var(--f-mono); font-size: 11.5px; color: var(--accent-text); margin-bottom: 9px; }
.person p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.8; }

/* ---------- 13. 联系 ---------- */
.cta-band { border-bottom: 0; }
/* 转化段：一块深蓝面板（--brand-900）落在冷场上，是全站正文区唯一的"重色块"，
   承担每页结尾的"落款"。面板内文字统一反白，标题走 display 900。 */
.cta-in {
  display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap;
  padding: clamp(32px, 3.6vw, 56px);
  border: 1px solid var(--brand-800); border-radius: var(--r-lg);
  background: var(--brand-900);
}
.cta-in .h2 { max-width: 19ch; color: var(--on-primary); }
/* 大号电话撤掉后，把导语收窄，让"导语 + 按钮组"两栏继续并排，不留大片空地 */
.cta-in .lead { max-width: 40ch; color: rgba(var(--on-dark-rgb), 0.82); }
.cta-in .ss-rule { color: rgba(var(--on-dark-rgb), 0.6); }
.cta-in .ss-rule::after { background: rgba(var(--on-dark-rgb), 0.28); }
.cta-in .ss-idx { color: var(--brand-200); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 72px); align-items: start; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.form-row label i { color: var(--danger); font-style: normal; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 15px; color: var(--txt);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--brand-700);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row textarea { min-height: 126px; resize: vertical; }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--muted-2); }
.form-row select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235E646D' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.form-note { font-size: 12.5px; color: var(--muted-2); margin-top: 14px; line-height: 1.8; }
.form-msg { display: none; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--tag-line); border-left: 3px solid var(--brand-700); border-radius: var(--r-sm); background: var(--accent-soft); font-size: 14px; color: var(--accent-text); }
.form-msg.on { display: block; }

.map-box { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.map-box iframe { display: block; width: 100%; height: 340px; border: 0; }
/* 位置示意图：明色化——纸底 + 品牌蓝标记，不再是一块黑图 */
.map-svg { display: block; width: 100%; height: auto; background: var(--surface-3); }
.map-svg .m-base { fill: var(--surface-3); }
.map-svg .m-accent { fill: var(--brand-700); }
.map-svg .m-halo { stroke: var(--brand-700); }
.map-svg .m-label { fill: var(--muted); }
.map-meta { padding: 16px 18px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--muted); display: flex; gap: 12px; align-items: center; }

/* ---------- 14. 内链导航块 ---------- */
.xlinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 14px; }
.xlink {
  position: relative; background: var(--surface); padding: 24px 22px; display: block;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: background 0.3s, border-color 0.35s, box-shadow 0.4s, transform 0.4s var(--ease);
}
.xlink span { display: block; font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); color: var(--muted-2); margin-bottom: 8px; text-transform: uppercase; }
.xlink b { font-size: 15.5px; font-weight: 700; color: var(--txt); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xlink b::after { content: "→"; color: var(--muted-2); transition: transform 0.35s var(--ease), color 0.3s; }
.xlink::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--brand-700);
  transition: width 0.55s var(--ease); pointer-events: none; }
.xlink:hover { background: var(--surface-2); border-color: var(--brand-700); box-shadow: var(--sh-2); transform: translateY(-2px); }
.xlink:hover::after { width: 100%; }
.xlink:hover b { color: var(--accent-text); }
.xlink:hover b::after { transform: translateX(4px); color: var(--accent-text); }

/* 业务索引：编辑式目录行（编号 / 名称 / 一句话）。
   首页用它替代与服务总览页同构的卡片栅格：
   首页只负责"点到"，详细能力清单留给总览页展开。 */
.svc-index { display: grid; border-top: 1px solid var(--line); }
.svc-index a {
  position: relative; display: grid;
  grid-template-columns: 54px minmax(0, 186px) minmax(0, 1fr);
  gap: 26px; align-items: baseline; padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
  transition: padding-left 0.35s var(--ease);
}
.svc-index a::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px;
  background: var(--brand-700); transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.svc-index a:hover { padding-left: 14px; }
.svc-index a:hover::before { transform: scaleY(1); }
.svc-index .si-n { font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.svc-index b { font-size: 17px; font-weight: 700; color: var(--txt); }
.svc-index .si-d { font-size: 14.5px; color: var(--muted); }
@media (max-width: 820px) {
  .svc-index a { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 16px; }
  .svc-index .si-d { grid-column: 2; }
}

/* ---------- 14.5 图像容器 ---------- */
.img-frame { position: relative; overflow: hidden; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-lg); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)); transition: transform 1s var(--ease); }
.img-frame:hover img { transform: scale(1.03); }
.img-frame.win { padding-top: 32px; }
/* 浏览器窗口装饰条：浅纸色标题栏 + 中性墨点 */
.img-frame.win::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 32px; z-index: 3;
  background-color: var(--surface-3);
  background-image:
    radial-gradient(circle at 18px 50%, rgba(var(--ink-rgb), 0.26) 3.2px, transparent 3.4px),
    radial-gradient(circle at 33px 50%, rgba(var(--ink-rgb), 0.17) 3.2px, transparent 3.4px),
    radial-gradient(circle at 48px 50%, rgba(var(--ink-rgb), 0.12) 3.2px, transparent 3.4px);
  border-bottom: 1px solid var(--line);
}
.img-frame.win img { height: calc(100% - 32px); }
.img-frame.h-260 { height: 260px; }
.img-frame.h-340 { height: 340px; }
.img-frame.h-420 { height: 420px; }
.img-frame.h-500 { height: 500px; }
.img-cap { padding: 12px 0 0; font-size: 13px; color: var(--muted-2); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.img-cap b { font-size: 14.5px; color: var(--txt); font-weight: 700; }
.img-cap span { font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); flex: none; font-variant-numeric: tabular-nums; }

/* 生成式 AI 视觉块：纸底细线图，与全站明色一致 */
.ai-panel {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ai-panel::before { content: none; }
.ai-panel canvas { display: block; position: relative; z-index: 1; width: 100% !important; height: 100% !important; }
.ai-panel::after {
  content: attr(data-label); position: absolute; left: 16px; bottom: 14px; z-index: 3;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
}

/* ---------- 14.6 优势条目（行式） ---------- */
.adv-list { display: grid; border-top: 1px solid var(--line); }
.adv { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line-2); transition: padding-left 0.4s var(--ease); }
.adv::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px; background: var(--brand-700); transform: scaleY(0); transform-origin: top; transition: transform 0.45s var(--ease); }
.adv:hover { padding-left: 14px; }
.adv:hover::before { transform: scaleY(1); }
.adv .an { font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); color: var(--accent-text); padding-top: 4px; }
.adv h3 { font-size: 17.5px; margin-bottom: 7px; }
.adv p { margin: 0; font-size: 14.5px; color: var(--muted); }

.scene { border-left: 2px solid var(--brand-700); padding: 2px 0 2px 18px; margin-bottom: 18px; }
.scene:last-child { margin-bottom: 0; }
.scene h3, .scene h4 { margin: 0 0 5px; font-size: 16px; }
.scene p { margin: 0; font-size: 14.5px; color: var(--muted); }

.mini-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mini { background: var(--surface); padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.35s, box-shadow 0.4s, transform 0.4s var(--ease); }
.mini:hover { border-color: var(--brand-700); box-shadow: var(--sh-2); transform: translateY(-2px); }
.mini b { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent-text); margin-bottom: 10px; }
.mini h3, .mini h4 { font-size: 16px; margin-bottom: 8px; }
.mini p { margin: 0; font-size: 14px; color: var(--muted); }

/* 案例图块 */
.shot { position: relative; display: block; overflow: hidden; background: var(--surface-3); aspect-ratio: 16 / 11; border: 1px solid var(--line); border-radius: var(--r-lg); }
.shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)); transition: transform 1s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(to top, rgba(var(--ink-rgb), 0.92), rgba(var(--ink-rgb), 0.28) 64%, transparent); }
.shot-cap b { display: block; font-size: 16.5px; font-weight: 700; color: var(--on-dark); }
.shot-cap span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(var(--on-dark-rgb), 0.72); text-transform: uppercase; }
.shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* 资质文件展示：扫描件未上传时显示占位框，上传后把 .cert-ph 换成 <img> 即可 */
.cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cert {
  margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color 0.35s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.cert:hover { border-color: var(--brand-700); box-shadow: var(--sh-2); transform: translateY(-2px); }
.cert-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface-3); }
.cert-media img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-2); }
.cert-ph {
  position: absolute; inset: 10px; display: grid; align-content: center; justify-items: center; gap: 9px;
  padding: 20px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r);
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--hair) 9px 18px);
}
.cert-ph span {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--accent-text);
}
.cert-ph b { font-size: 15px; font-weight: 600; color: var(--muted); }
.cert-ph em { font-style: normal; font-size: 12.5px; color: var(--muted-2); line-height: 1.7; }
.cert-cap { display: grid; gap: 7px; padding: 18px 20px 20px; border-top: 1px solid var(--line-2); }
.cert-cap b { font-size: 15.5px; font-weight: 700; color: var(--txt); }
.cert-cap span { font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); color: var(--muted-2); }
.cert-state {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--accent-text);
}
.cert-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-700); flex: none; }
@media (max-width: 700px) { .cert-grid { grid-template-columns: 1fr; } }

/* ---------- 14.7 表面层（纸本：细分隔线，无玻璃、无渐变描边） ----------
   原为「冷白填充 + 蓝→青渐变描边」的双层背景，hover 换成鲜明渐变描边，
   深底再叠一层 backdrop-filter 玻璃折射。纸本语言统一改为：
     纸底 + 1px 细分隔线；hover 只把这条线换成品牌蓝。
   层级表达交给留白与线，不再交给渐变和模糊。
   -------------------------------------------------------------------------- */

/* 卡片类容器统一表面：纸底 + 细线 */
.card, .mini, .xlink, .person, .metric, .rail-box, .post-nav a, .cert,
.news-feature, .cards > *, .bento > *, .tbl-wrap, .map-box {
  border: 1px solid var(--line);
  background: var(--surface);
}
/* 图片类容器：占位底色沿用深一档的纸 */
.img-frame, .shot {
  border: 1px solid var(--line);
  background: var(--surface-3);
}

/* hover：线转品牌蓝，不再有渐变描边与柔光 */
.card:hover, .mini:hover, .xlink:hover, .person:hover, .metric:hover, .cert:hover,
.news-feature:hover, .rail-box:hover, .post-nav a:hover,
.cards > *:hover, .bento > *:hover, .bento .card:hover {
  border-color: var(--brand-700);
}

/* 墨底容器：极淡的白色平铺，去掉背景模糊与渐变描边 */
.on-dark .card, .on-dark .mini, .on-dark .xlink, .on-dark .person, .on-dark .metric,
.on-dark .news-feature, .on-dark .rail-box, .on-dark .post-nav a, .on-dark .cert,
.on-dark .tbl-wrap, .on-dark .map-box, .on-dark .cards > *, .on-dark .bento > * {
  border: 1px solid var(--line);
  background: var(--surface);
}
.on-dark .img-frame, .on-dark .shot { border-color: var(--line); background: var(--surface); }
.on-dark .card:hover, .on-dark .mini:hover, .on-dark .xlink:hover, .on-dark .person:hover,
.on-dark .metric:hover, .on-dark .news-feature:hover, .on-dark .post-nav a:hover,
.on-dark .cert:hover {
  border-color: var(--line-strong);
}

/* ---------- 15. 页脚（深带 · 封底） ---------- */
.site-foot {
  position: relative; overflow: hidden; color: var(--on-dark);
  padding: clamp(48px, 6vw, 84px) 0 0; font-size: 14px;
  /* 全站第二条深带：每页收尾压一块 --ink-900，与页首深带呼应，
     页脚因此成为"封底"而不是"又一段浅色内容"。
     带内的所有文字色在此统一覆写，不翻转全局令牌。 */
  background-color: var(--ink-900);
  border-top: 1px solid rgba(var(--on-dark-rgb), 0.16);
}
.site-foot > .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.55fr; gap: clamp(26px, 3vw, 56px); padding: clamp(30px, 3.6vw, 52px) 0; }
.foot-brand .brand { margin-bottom: 18px; }
.site-foot .brand-cn { color: var(--on-primary); }
.site-foot .brand-en { color: rgba(var(--on-dark-rgb), 0.55); }
.foot-brand p { font-size: 13.5px; color: rgba(var(--on-dark-rgb), 0.65); line-height: 1.8; max-width: 34ch; }
.foot-h { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--brand-200); margin-bottom: 16px; }
.foot-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.foot-nav a { font-size: 13.5px; color: rgba(var(--on-dark-rgb), 0.8); transition: color 0.2s, padding-left 0.2s; }
.foot-nav a:hover { color: var(--on-primary); padding-left: 4px; }
.foot-nap { display: grid; gap: 12px; }
.foot-nap .nap-row { display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: baseline; }
.foot-nap .k { font-family: var(--f-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); color: rgba(var(--on-dark-rgb), 0.5); }
.foot-nap .v { color: rgba(var(--on-dark-rgb), 0.8); font-size: 13.5px; line-height: 1.75; overflow-wrap: break-word; }
.foot-nap .v strong { color: var(--on-primary); font-weight: 700; }
.foot-nap .v a:hover { color: var(--brand-200); }
.qr-row { display: flex; gap: 12px; margin-top: 20px; }
.qr-box { width: 74px; height: 74px; border: 1px dashed rgba(var(--on-dark-rgb), 0.28); border-radius: var(--r-sm); display: grid; place-items: center; text-align: center; font-size: 10px; font-family: var(--f-mono); color: rgba(var(--on-dark-rgb), 0.5); line-height: 1.4; padding: 6px; background: transparent; }

.foot-compliance { border-top: 1px solid rgba(var(--on-dark-rgb), 0.16); padding: 20px 0; font-size: 12.5px; color: rgba(var(--on-dark-rgb), 0.5); line-height: 1.9; }
.foot-compliance b { color: rgba(var(--on-dark-rgb), 0.8); font-weight: 700; }
.foot-bar { border-top: 1px solid rgba(var(--on-dark-rgb), 0.16); padding: 18px 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--f-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); color: rgba(var(--on-dark-rgb), 0.45); font-variant-numeric: tabular-nums; }
.foot-bar a:hover { color: var(--on-primary); }

/* 右侧固定联系栏：纸卡片 + 细线，hover 反白为品牌蓝。明色站点不再用深色浮块 */
.float-cta { position: fixed; right: 18px; bottom: 26px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.float-cta a {
  width: 56px; height: 58px; border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--txt);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 10px; line-height: 1; box-shadow: var(--sh-2);
  transition: 0.35s var(--ease);
}
.float-cta a svg { width: 17px; height: 17px; }
.float-cta a:hover {
  background: var(--brand-700); border-color: var(--brand-700);
  color: var(--on-primary); transform: translateY(-2px);
}
.float-cta a.top { opacity: 0; pointer-events: none; transition: 0.35s var(--ease); }
.float-cta a.top.on { opacity: 1; pointer-events: auto; }

/* ---------- 15.5 公司资讯（列表 + 图文详情） ---------- */

/* 元信息行：分类 · 日期 · 来源（列表卡与文章头共用） */
.news-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--f-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data);
  color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.news-meta .dot-s { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-700); flex: none; }
.page-head .news-meta { margin-top: 20px; }
.cm-body .news-meta { margin-top: 14px; }

/* 头条：图文左右组合，移动端自动上下堆叠 */
.news-feature {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); position: relative;
  transition: border-color 0.35s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.news-feature:hover { border-color: var(--brand-300); box-shadow: var(--sh-2); transform: translateY(-2px); }
.news-feature .nf-img { position: relative; overflow: hidden; background: var(--surface-3); min-height: 330px; }
.news-feature .nf-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(var(--img-saturate)) contrast(var(--img-contrast)); transition: transform 1s var(--ease); }
.news-feature:hover .nf-img img { transform: scale(1.035); }
.news-feature .nf-body { padding: clamp(28px, 3vw, 46px); display: flex; flex-direction: column; align-items: flex-start; }
.news-feature .nf-body h3 { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.4; margin: 14px 0 12px; }
.news-feature .nf-body p { font-size: 15px; color: var(--muted); }
.news-feature .nf-body .link-more { margin-top: auto; padding-top: 24px; }

/* 文章容器与正文排版 */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: clamp(30px, 3.6vw, 66px); align-items: start; }
.article { max-width: 860px; }
.article-rail { position: sticky; top: 104px; display: grid; gap: 22px; }
.rail-box { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 22px 20px; }
.rail-h {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px;
}
.rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail-list a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.6; color: var(--muted);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.rail-list a:hover { background: var(--surface-2); color: var(--accent-text); }
.rail-list a[aria-current="true"] {
  background: var(--accent-soft); color: var(--accent-text); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand-500);
}
.rail-nap { display: grid; gap: 11px; font-size: 13.5px; }
.rail-nap .k { font-family: var(--f-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); color: var(--muted-2); display: block; margin-bottom: 3px; }
.rail-nap .v { color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.rail-nap .v a:hover { color: var(--accent-text); }
.rail-box .btn { width: 100%; margin-top: 18px; }
.article-head .h1 { margin-bottom: 18px; }
.article-body { font-size: 16px; line-height: 1.98; color: var(--muted); }
.article-body p { margin: 0 0 1.15em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body h2, .article-body h3 { color: var(--txt); position: relative; padding-left: 16px; }
.article-body h2::before, .article-body h3::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 3px; height: 1em; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-700));
  box-shadow: 0 0 10px var(--glow);
}
.article-body h2 { font-size: clamp(19px, 1.6vw, 23px); margin: 2em 0 0.7em; }
.article-body h3 { font-size: clamp(16.5px, 1.35vw, 19px); margin: 1.7em 0 0.6em; }
.article-body > h2:first-child, .article-body > h3:first-child { margin-top: 0; }
.article-body ul, .article-body ol { margin: 0 0 1.2em; }
.article-body li { margin-bottom: 0.55em; }
.article-body strong { color: var(--txt); }

/* 导语：左侧强调条 */
.article-lead {
  font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.9; color: var(--txt);
  border-left: 2px solid var(--brand-700); padding-left: 18px; margin-bottom: 1.5em;
}
.article-figure { margin: clamp(24px, 3vw, 38px) 0; }

/* 要点提示块 */
.article-note {
  margin: clamp(24px, 3vw, 34px) 0; padding: 18px 22px;
  border: 1px solid var(--tag-line); border-left: 3px solid var(--brand-700);
  border-radius: var(--r); background: var(--accent-soft);
  font-size: 14.5px; color: var(--accent-text); line-height: 1.9;
}
.article-note b { color: var(--accent-text); }
.article-note p:last-child { margin-bottom: 0; }

/* 待定稿提示：正文为结构占位时显示，正式发布前替换稿件并删除本块 */
.draft-note {
  display: grid; gap: 8px; margin: 0 0 clamp(26px, 3vw, 36px);
  padding: 18px 22px; border: 1px dashed var(--line-strong);
  border-radius: var(--r); background: var(--surface-2);
}
.draft-note b {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--accent-text);
}
.draft-note p { margin: 0; font-size: 14px; color: var(--muted); }

/* 文章尾部：上一篇 / 下一篇 */
.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.post-nav a {
  display: grid; gap: 6px; padding: 20px 22px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color 0.35s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.post-nav a:hover { border-color: var(--brand-300); box-shadow: var(--sh-2); transform: translateY(-2px); }
.post-nav span {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted-2);
}
.post-nav b { font-size: 15.5px; font-weight: 600; color: var(--txt); line-height: 1.5; }
.post-nav a.next { text-align: right; }

@media (max-width: 900px) {
  .news-feature { grid-template-columns: 1fr; }
  .news-feature .nf-img { min-height: 0; aspect-ratio: 16 / 9; }
  .news-feature .nf-body .link-more { padding-top: 20px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav a.next { text-align: left; }
  .article-layout { grid-template-columns: 1fr; }
  .article-rail { position: static; }
}
@media (max-width: 560px) {
  .article-body { font-size: 15.5px; }
}

/* ==========================================================================
   v10 组件库「明亮科技」
   --------------------------------------------------------------------------
   下面这些是 v10 新引入的区块组件，供首页与新版服务页使用。
   与 v9 的旧组件（card / mini / metric / def-list…）并存，
   便于按页面分批迁移——迁移完成的页面不再引用旧组件。
   ========================================================================== */

/* ---------- 可见栅格：已按反馈移除 ----------
   曾用 .measure 把 12 等分分栏线画在版面之上。实测它让页面读起来"工程味过重"，
   与"明亮、干净"的目标相抵，故整体删除；栅格仍存在于版式规则里，
   只是不再被画出来。 */

/* ---------- 刻度区块标头：一条坐标量线 + 读数 ----------
   左侧是区段名，右侧是"第几段 / 共几段"的坐标读数。
   已按反馈移除齿标（等距刻度齿）：它让每个区块都长同一张"仪表脸"，
   密度过大反而稀释了仪器感，只留一条细线与一个读数即可。
   .ss-rule 可独立使用（如放在侧栏里），不必套 .sec-scale。 */
.sec-scale { margin-bottom: clamp(30px, 3.6vw, 52px); max-width: 880px; }
.ss-rule {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 12px; margin-bottom: 22px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-2);
}
.ss-rule::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--line-strong);
}
.ss-rule::before { content: none; }
.ss-idx { font-weight: 700; color: var(--brand-700); font-size: 12px; }
.ss-rt { margin-left: auto; font-variant-numeric: tabular-nums; }
.sec-scale .h2 { font-size: clamp(26px, 3.3vw, 44px); }
.sec-scale .lead { margin-top: 18px; }
/* 窄屏放不下右侧坐标时折行 */
@media (max-width: 600px) { .ss-rule { flex-wrap: wrap; gap: 6px 12px; } .ss-rt { margin-left: 0; } }

/* ---------- 刻度数字带：一组可逐项核对的关键读数 ---------- */
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.metric-strip > * { position: relative; padding: 24px 26px 26px 0; border-right: 1px solid var(--line-2); }
.metric-strip > *:last-child { border-right: 0; padding-right: 0; }
.metric-strip > *::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 2px; background: var(--brand-700); }
.metric-strip b {
  display: block; font-family: var(--f-disp); font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; color: var(--txt);
}
.metric-strip b small { font-size: 0.44em; margin-left: 4px; color: var(--muted-2); -webkit-text-fill-color: currentColor; }
.metric-strip span { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip > *:nth-child(2n) { border-right: 0; padding-right: 0; }
  .metric-strip > *:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); padding-bottom: 22px; }
}
@media (max-width: 560px) {
  .metric-strip { grid-template-columns: 1fr; }
  .metric-strip > * { border-right: 0; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
  .metric-strip > *:last-child { border-bottom: 0; }
}

/* ---------- 能力矩阵：无缝单元格 + 编号 + 状态标记 ----------
   这是 v10 的标志性组件：用表格化的网格承载能力清单，
   比卡片栅格更"说明书"，也更容易逐项核对。 */
.capmatrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.capmatrix > * {
  position: relative; display: block; padding: 26px 26px 28px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface); transition: background 0.3s;
}
.capmatrix > *:nth-child(3n) { border-right: 0; }
.capmatrix > *::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 0;
  background: var(--brand-700); transition: height 0.42s var(--ease);
}
.capmatrix > *:hover { background: var(--surface-2); }
.capmatrix > *:hover::before { height: 100%; }
.cm-id { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted-2); margin-bottom: 16px; }
.capmatrix b { display: block; font-size: 16.5px; font-weight: 700; color: var(--txt); margin-bottom: 9px; }
.cm-desc { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.78; }
.cm-state {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-700);
}
.cm-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-700); flex: none; }
@media (max-width: 900px) {
  .capmatrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capmatrix > *:nth-child(3n) { border-right: 1px solid var(--line); }
  .capmatrix > *:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .capmatrix { grid-template-columns: 1fr; }
  .capmatrix > * { border-right: 0; }
}

/* ---------- 文档双栏：左侧粘性目录 + 右侧内容 ----------
   服务页用它取代"每页同一套区块序列"：目录让长页可被快速索引，
   同时给页面一个别处没有的骨架。 */
.doc-layout { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
/* 右栏常放 .tbl-wrap（内含 min-width:640px 的 table.cmp）。网格项默认 min-width:auto，
   会把表格的最小宽度当成整列的自动最小值，于是窄屏整列被撑到 642px 并顶出视口。
   这里把列宽下限钉到 0，让 .tbl-wrap 自己横向滚动。 */
.doc-layout > * { min-width: 0; }
.side-index { position: sticky; top: 104px; }
.side-index .si-h {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2); padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line-strong);
}
.side-index a {
  display: flex; gap: 10px; align-items: baseline; padding: 10px 0 10px 12px;
  font-size: 13.5px; color: var(--muted); border-left: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s, padding-left 0.3s var(--ease);
}
.side-index a i { font-family: var(--f-mono); font-size: 10.5px; font-style: normal; color: var(--muted-2); flex: none; }
.side-index a:hover { color: var(--brand-700); }
.side-index a.on { color: var(--txt); font-weight: 600; border-left-color: var(--brand-700); padding-left: 16px; }
.side-index a.on i { color: var(--brand-700); }
@media (max-width: 980px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .side-index {
    position: static; display: flex; flex-wrap: wrap; gap: 2px 20px;
    padding-bottom: 16px; margin-bottom: 30px; border-bottom: 1px solid var(--line);
  }
  .side-index .si-h { display: none; }
  .side-index a { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 0; }
  .side-index a.on { border-bottom-color: var(--brand-700); padding-left: 0; }
}

/* ---------- 数据条：按比例的长度条，用于构成与对比 ---------- */
.bar-row { display: grid; gap: 16px; }
.bar-row .br { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 16px; align-items: end; }
.bar-row .br-key { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.bar-row .br-track { position: relative; height: 6px; background: var(--surface-3); }
.bar-row .br-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-700); }
.bar-row .br-val { font-family: var(--f-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--txt); text-align: right; line-height: 1; }

/* ---------- 首屏读数面板（v10 版）----------
   嵌在栅格里的数据面板：左侧轴线 + 读数行，取代 v9 的浮动卡片。 */
.readout { border-left: 1px solid var(--line-strong); }
.readout .ro-h {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2); padding: 0 0 12px clamp(18px, 1.9vw, 28px);
}
.readout .ro-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0 13px clamp(18px, 1.9vw, 28px);
  border-bottom: 1px solid var(--line-2); transition: background 0.3s;
}
.readout .ro-row:last-child { border-bottom: 0; }
.readout .ro-row:hover { background: var(--surface-2); }
.readout .ro-k { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--txt); }
.readout .ro-k i { font-family: var(--f-mono); font-size: 10.5px; font-style: normal; color: var(--muted-2); flex: none; }
.readout .ro-v { font-family: var(--f-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--accent-text); flex: none; }

/* ---------- 16. 动效 ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.06s; }
.rv-d2 { transition-delay: 0.12s; }
.rv-d3 { transition-delay: 0.18s; }
.rv-d4 { transition-delay: 0.24s; }
.rv-d5 { transition-delay: 0.3s; }

.hero-anim { opacity: 0; transform: translateY(20px); animation: heroIn 1s var(--ease) forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
.hero-anim.d1 { animation-delay: 0.1s; }
.hero-anim.d2 { animation-delay: 0.22s; }
.hero-anim.d3 { animation-delay: 0.34s; }
.hero-anim.d4 { animation-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .hero-anim { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .on-dark::before, .site-foot::before { animation: none !important; }
  .eyebrow::before { animation: none !important; }
  .site-head::before { animation: none !important; }
}

/* ---------- 17. 响应式 ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: block; }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento > *, .bento .b-wide, .bento .b-half { grid-column: span 2; }
  .bento .b-full { grid-column: span 4; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero { flex-wrap: wrap; }
  .hero .wrap { flex: 1 1 100%; }
  .hero-cols { grid-template-columns: 1fr; gap: 44px; }
  .hero-side { max-width: 560px; }
}
@media (max-width: 900px) {
  .two-col, .three-col, .side-col, .contact-grid { grid-template-columns: 1fr; }
  .side-sticky { position: static; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento > *, .bento .b-wide, .bento .b-half, .bento .b-full { grid-column: span 1; }
  .mini-3 { grid-template-columns: 1fr; }
  .shot-grid { grid-template-columns: 1fr; }
  .head-mark { display: none; }
  .cta-in { flex-direction: column; align-items: flex-start; }
  .topline { font-size: 11px; }
  .topline .wrap { height: 34px; gap: 12px; }
  .topline .tl-cert-t { display: none; }
  .topline .wrap > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topline .tl-r { gap: 12px; flex: none; }
  .topline .tl-r span { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .metrics { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .def-list > div { grid-template-columns: 1fr; gap: 4px; }
  .faq-item summary { grid-template-columns: 30px 1fr 20px; gap: 12px; }
  .faq-a { padding-left: 42px; }
  .brand-mark { width: 33px; height: 28px; }
  .brand-cn { font-size: 17px; }
  .hero-badges { gap: 6px; }
  .hero-side { max-width: none; padding: 20px 18px; }
  .hero-side .hero-metric b { font-size: 21px; }
  .on-dark::after { inset: 8px; --ca: 10px; }
  .float-cta { right: 10px; bottom: 12px; gap: 6px; }
  .float-cta a { width: 46px; height: 46px; border-radius: 12px; font-size: 0; gap: 0; }
  .float-cta a svg { width: 18px; height: 18px; }
}

/* ---------- 18. 打印 ---------- */
@media print {
  .site-head, .topline, .float-cta, .drawer, .hero-photo { display: none !important; }
  .on-dark::before, .on-dark::after, .site-foot::before, .grid-bg::after { display: none !important; }
  /* 打印介质只有黑白：统一归一化到纯墨/纯纸，避免投影与深带被打印机转成灰块 */
  body, .sec-paper, .sec-paper3, .sec-ink, .page-head, .cta-band, .site-foot, .hero, .on-dark {
    background: var(--print-paper) !important; color: var(--print-ink) !important;
  }
  .hero .h1, .hero .h1 .ln2, .cta-in .h2, .page-head .h1 { color: var(--print-ink) !important; -webkit-text-fill-color: var(--print-ink) !important; }
  .metric b, .hero-metric b, .head-mark {
    -webkit-text-fill-color: var(--print-ink) !important; color: var(--print-ink) !important; background-image: none !important; filter: none !important;
  }
}