/* ============================================================================
   OPHET · 奥普海特 — OCT 能力平台官网
   Design System「看见表面之下 / Beneath the Surface」
   ----------------------------------------------------------------------------
   美学方向：光学工作台 · 精密仪器 · 数据手册
   配色：暖黑(光学平台) / 骨白(文字) / hot伪彩(OCT图像经典色)
   字体：Chakra Petch(拉丁显示) + IBM Plex Mono(数据) + 中文系统栈
   规则：零圆角 · 发丝线 · 等宽数据 · 取景框角标 · 面包板孔阵
   ============================================================================ */

/* ---------- 0. Tokens ----------
   主题色依据《佛山大学视觉形象识别系统手册》：
   标准色 佛大红 #D7000F（R215 G0 B15）· 辅助色 专金 PANTONE 871C / 灰 / 黑
   默认亮主题（纸白 + 佛大红），html[data-theme="dark"] 切换暗主题 */
:root {
  /* 亮主题：纸面层级 */
  --ink-0: #faf7f5;
  --ink-1: #ffffff;
  --ink-2: #f3edeb;
  --ink-3: #eae2df;
  /* 线 */
  --line:   rgba(46, 28, 30, 0.13);
  --line-2: rgba(46, 28, 30, 0.24);
  /* 文字（亮主题为暖墨色） */
  --bone:   #241c1d;
  --bone-2: #5c5253;
  --bone-3: #6f696a;            /* 三级灰（次要标注）。原 VIS #8b8081 在纸面仅 3.6:1 不达 WCAG AA，
                                   故 token 级加深至 ~4.7:1 过 AA（评审 #11）。视觉仍为中性次要灰，
                                   VIS 偏差已登记待 v0.3 收录；高重要小字仍用 --bone-2。*/
  /* 佛大红体系 */
  --laser:  #d7000f;            /* 佛大红 标准色 */
  --laser-deep: #a30010;
  --gold:   #8c7440;            /* 专金 PANTONE 871C（屏显近似）——大字/描边/暗主题用 */
  --amber:  #8c7440;            /* 兼容旧引用 → 专金 */
  --gold-ink: #7a6334;          /* 专金「小字版」：纸面上 #8c7440 仅 4.2:1，此深一档过 WCAG AA，
                                   仅用于浅底小号金字（如规格 chip 值）；品牌主金不变（评审 B）*/
  --hot-hi: #7a0008;
  --hot-deep: #f6c9cc;
  --num:    #b0000c;            /* 大数字 */
  --glow:   215, 0, 15;         /* 佛大红辉光 RGB */
  --paper:  250, 247, 245;      /* 头部毛玻璃底 RGB */
  --dot:    rgba(46, 28, 30, 0.075);
  --grad-hot: linear-gradient(90deg, #f6c9cc 0%, #e8404b 30%, #d7000f 62%, #8f000a 100%);
  --hot-text: linear-gradient(90deg, #d7000f 0%, #b0000c 55%, #7a0008 100%);
  /* 仪器屏幕（B-scan/代码块/示意图面板：双主题恒为深色） */
  --screen-bg: #131011;
  --screen-bg-2: #1a1516;
  --screen-line: rgba(236, 230, 228, 0.14);
  --screen-fg: #efe7e6;
  --screen-fg-2: #b5a9a8;
  --screen-fg-3: #948c8b;       /* 仪器屏暗底注释/图注小字：原 #837a79 在暗底约 4.4:1，提亮一档过 WCAG AA（评审 #11）*/
  /* SVG 适配色（亮主题：示意图线稿在纸面上用墨色 + 佛大红色阶） */
  --d-hi: #2a2224;
  --d-mid: #6b6062;
  --d-dim: #95898b;
  --d-r0: #f3bcc0;
  --d-r1: #e9959b;
  --d-r2: #d7000f;
  --d-r3: #b0000c;
  --d-r4: #8f000a;
  --d-r5: #5e0006;
  --d-laser: #d7000f;
  /* 字体 */
  --cjk: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-disp: "Chakra Petch", var(--cjk);
  --font-body: "Chakra Petch", var(--cjk);
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "Cascadia Code", Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  /* 布局 */
  --w-max: 1280px;
  --pad-x: clamp(20px, 4vw, 48px);
  --sec-y: clamp(72px, 10vw, 140px);
  --head-h: 72px;
  /* 动效 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 1. Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink-0);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.015em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 面包板孔阵背景（光学平台 M6 孔，25mm 栅距的隐喻） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, var(--dot) 1px, transparent 1.6px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 0%, transparent 78%);
}

::selection { background: var(--laser); color: #fff; }

img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

main { position: relative; z-index: 1; }

/* ---------- 1b. a11y / 性能基线（共享层，仅用既有 token，不新增配色） ----------
   字体：Web font 经各页 <head> 的 Google Fonts URL 加载，URL 已带 &display=swap，
   即 font-display:swap —— 首屏先用系统字体兜底渲染、字体到位后再替换，避免国内访问
   fonts.gstatic 慢/被墙时白屏。若日后改为自托管字体，请在此处补 @font-face 并同样
   声明 font-display:swap，再删去各页 <head> 的 googleapis/gstatic <link>。 */

/* 键盘焦点环：仅键盘导航（:focus-visible）时显示，鼠标点击不显示，不破坏视觉。
   双主题各取 --laser（佛大红/亮红）描边 + --ink-1 间隔环，保证在任意底色上都清晰可见。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--laser);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 4px rgba(var(--glow), 0.28);
}
/* 兜底：不支持 :focus-visible 的旧浏览器仍保留可见焦点（不做 outline:none） */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* 屏幕阅读器专用：视觉隐藏但 AT 可读（用于空表头标签、skip-link 文本等） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 跳到主要内容（Bypass Blocks，WCAG 2.4.1）：默认移出视口，键盘聚焦时滑入。
   各页可在 <body> 首加 <a class="skip-link" href="#main">跳到主要内容</a>，
   并给 <main id="main" tabindex="-1">。仅用 --laser/--ink-1，不新增配色。 */
.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--laser);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- 2. Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-disp);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.03em;
}

.t-hero {
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.06;
  letter-spacing: 0.02em;
}

.t-sec   { font-size: clamp(28px, 3.6vw, 48px); }
.t-sub   { font-size: clamp(20px, 2.2vw, 28px); }

.t-lead {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--bone-2);
  line-height: 1.9;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 下标（λ<sub>0</sub> 等）：避免 U+2080 回退到 CJK 字体出现空心圆环 */
sub {
  font-size: .62em;
  vertical-align: -0.18em;
  font-family: inherit;
  line-height: 0;
}

.hot {
  /* 文字版佛大红渐变（按主题取色，保证首字可读） */
  background: var(--hot-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accent { color: var(--laser); }
.dim    { color: var(--bone-2); }
.faint  { color: var(--bone-2); }  /* WCAG AA：数据标注小字用 VIS 更深灰阶（原 --bone-3 不达标）*/

/* 技术标注 tag（数据手册风格） */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.tag::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--laser);
  box-shadow: 0 0 8px rgba(var(--glow), 0.7);
}
.tag.center { justify-content: center; }
.tag.center::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--laser);
  box-shadow: 0 0 8px rgba(var(--glow), 0.7);
}

/* ---------- 3. Layout utilities ---------- */
.wrap {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--sec-y); position: relative; }
.section + .section { border-top: 1px solid var(--line); }
/* 低密度区块（新闻速递/技术札记等）：收紧纵向留白 */
.section--compact { padding-block: clamp(56px, 7vw, 96px); }

/* 区块标头：编号 + 中文标题 + EN 副标 */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 72px);
  flex-wrap: wrap;
}
.sec-head .sec-no {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--laser);
  display: block;
  margin-bottom: 14px;
}
.sec-head .sec-en {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone-2);   /* WCAG AA：区块英文副题为可读小字，用 VIS 更深灰阶（评审 #11）*/
  padding-bottom: 10px;
  white-space: nowrap;
}

.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid > * { background: var(--ink-0); }
/* 与 .stats 同款单发丝线：卡片自身边框与 1px 线缝叠成 3px 毛边，去掉卡片自有边框 */
.grid > .card { border: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.hairline-t { border-top: 1px solid var(--line); }
.hairline-b { border-bottom: 1px solid var(--line); }

/* 通用双栏分屏布局（全站统一，900px 折叠） */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.split.rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split.eq  { grid-template-columns: 1fr 1fr; }
/* 防溢出铁律：网格/弹性子项默认 min-width:auto 会被宽内容（代码块/长表）撑破，
   单列移动端尤甚（曾导致整页横向溢出、汉堡菜单被 overflow-x:hidden 裁出屏外）。
   令子项可收缩，宽内容交由各自的 overflow-x:auto 内部滚动。 */
.split > *, .grid > * { min-width: 0; }
.code { min-width: 0; max-width: 100%; }
.nav-item-mobile { display: none; }  /* 桌面隐藏，仅移动折叠菜单显示（见移动断点） */

/* 取景框角标（viewfinder corner brackets） */
.corner { position: relative; }
.corner::before, .corner::after,
.corner > .cb::before, .corner > .cb::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--line-2);
  transition: border-color 0.35s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.corner::before          { top: -1px; left: -1px;  border-top-width: 1px; border-left-width: 1px; }
.corner::after           { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.corner > .cb::before    { bottom: -1px; left: -1px;  border-bottom-width: 1px; border-left-width: 1px; }
.corner > .cb::after     { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.corner:hover::before, .corner:hover::after,
.corner:hover > .cb::before, .corner:hover > .cb::after {
  border-color: var(--laser);
  width: 22px;
  height: 22px;
}

/* CTA 横幅内的 .cb 移出文档流（::before/::after 本就绝对定位，角标坐标不变），
   避免其作为 grid/flex 子项参与布局导致文案漂移 */
.cta-band > .cb {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- 4. Header ---------- */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--head-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.site-head.is-scrolled {
  background: rgba(var(--paper), 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Logo：定制字标（签名 O · slit）+ 中文副标 */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex-shrink: 0;
}
.brand .wordmark {
  height: 17px;
  width: auto;
  color: var(--laser);
  display: block;
}
.brand .mark { width: 34px; height: 34px; }
.brand .name {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.14em;
}
.brand .name small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.4em;
  color: var(--bone-2);   /* WCAG AA：字标副题用 VIS 更深灰阶（原 --bone-3 在纸面 3.6:1 不达标）*/
  margin-top: 1px;
}

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav > .nav-item { position: relative; }
.site-nav a.nav-link, .site-nav button.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 14.5px;
  letter-spacing: 0.08em;
  color: var(--bone-2);
  transition: color 0.25s;
  white-space: nowrap;
}
.site-nav .nav-link:hover { color: var(--bone); }
.site-nav .nav-link.is-active { color: var(--bone); }
.site-nav .nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 1px;
  background: var(--laser);
  box-shadow: 0 0 6px rgba(var(--glow), 0.6);
}
.nav-link .caret {
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s;
}

/* 下拉 */
.nav-item .sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 8px;
  min-width: 240px;
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav-item:hover .sub, .nav-item:focus-within .sub, .nav-item.open .sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item:hover .caret, .nav-item.open .caret { transform: rotate(225deg) translateY(-2px); }
.sub a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 18px;
  font-size: 14px;
  color: var(--bone-2);
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
}
.sub a:hover { color: var(--bone); background: var(--ink-2); padding-left: 24px; }
.sub a .sub-en {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--bone-3);
  text-transform: uppercase;
}

/* 头部 CTA */
.head-cta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  padding: 10px 20px;
  border: 1px solid var(--line-2);
  color: var(--bone);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
  white-space: nowrap;
}
.head-cta:hover { border-color: var(--laser); background: var(--laser); color: #fff; }

/* 移动端汉堡 */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 110;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: var(--bone);
  transition: transform 0.35s var(--ease), opacity 0.25s, top 0.35s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
body.nav-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ---------- 5. 扫描进度线 + 深度标尺（JS 注入） ---------- */
.scanline {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 120;
  background: var(--grad-hot);
  box-shadow: 0 0 10px rgba(var(--glow), 0.5);
  pointer-events: none;
}

.depth-ruler {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  height: min(46vh, 420px);
  width: 40px;
  z-index: 90;
  pointer-events: none;
  font-family: var(--font-mono);
}
.depth-ruler .rail {
  position: absolute;
  top: 0; bottom: 0; right: 8px;
  width: 1px;
  background: var(--line-2);
}
.depth-ruler .tick {
  position: absolute;
  right: 8px;
  width: 7px;
  height: 1px;
  background: var(--line-2);
}
.depth-ruler .tick.major { width: 12px; }
.depth-ruler .probe {
  position: absolute;
  right: 4px;
  width: 9px; height: 9px;
  border: 1px solid var(--laser);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 10px rgba(var(--glow), 0.55);
  transition: top 0.1s linear;
}
.depth-ruler .readout {
  position: absolute;
  right: 22px;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--laser);
  white-space: nowrap;
  transition: top 0.1s linear;
}

/* ---------- 6. Hero（首页）与 Page-hero（内页） ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--head-h) + 40px);
  padding-bottom: 60px;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-copy .tag { margin-bottom: 28px; }
.hero-copy h1 { margin-bottom: 24px; }
.hero-copy .t-lead { max-width: 46ch; margin-bottom: 40px; }

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}
.chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--bone-2);
  border: 1px solid var(--line);
  padding: 7px 13px;
  white-space: nowrap;
}
.chip b { color: var(--gold-ink); font-weight: 500; }  /* 小字金值用 AA 版专金（评审 B）*/

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* B-scan 画布面板（仪器屏幕：双主题恒为深色） */
.scan-panel {
  position: relative;
  background: var(--screen-bg);
  border: 1px solid var(--screen-line);
}
.scan-panel canvas { width: 100%; height: auto; }
.scan-panel .panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--screen-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--screen-fg-3);
}
.scan-panel .panel-bar .accent,
.scan-panel .accent { color: #ff3b47; }
.scan-panel .panel-bar .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--screen-fg-2);
}
.scan-panel .panel-bar .live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff3b47;
  box-shadow: 0 0 8px #ff3b47;
  animation: blink 1.6s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* 内页 hero */
.page-hero {
  padding-top: calc(var(--head-h) + clamp(56px, 9vw, 120px));
  padding-bottom: clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  top: 0; right: -10%;
  width: 55%; height: 100%;
  background: radial-gradient(ellipse 70% 60% at 70% 30%, rgba(var(--glow), 0.07), transparent 70%);
  pointer-events: none;
}
.page-hero .crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: 26px;
}
.page-hero .crumb a { color: var(--bone-3); transition: color 0.2s; }
.page-hero .crumb a:hover { color: var(--laser); }
.page-hero .crumb .sep { color: var(--laser); }
.page-hero h1 { font-size: clamp(34px, 5vw, 64px); margin-bottom: 18px; }
.page-hero .t-lead { max-width: 62ch; }
.page-hero .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

/* 页内锚点子导航（welding/spectrometer 长页） */
.subnav {
  position: sticky;
  top: var(--head-h);
  z-index: 40;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  background: rgba(var(--paper), .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.subnav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  padding: 12px 14px;
  color: var(--bone-2);   /* WCAG AA：页内导航是可读链接，用 VIS 更深灰阶（评审 #11）*/
  white-space: nowrap;
}
.subnav a.on {
  color: var(--laser);
  box-shadow: inset 0 -2px 0 var(--laser);
}

/* ---------- 7. 按钮 ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  font-family: var(--font-disp);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  border: 1px solid var(--laser);
  color: #fff;
  background: var(--laser);
  overflow: hidden;
  transition: color 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s;
}
.btn .arr { transition: transform 0.3s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 0.6s var(--ease);
}
.btn:hover::before { transform: translateX(110%); }

.btn.ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--bone);
}
.btn.ghost:hover { border-color: var(--laser); color: var(--laser); }
.btn.ghost::before { display: none; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--gold-ink);   /* WCAG AA：小字金链用 AA 版专金（评审 #11 系统化）*/
  transition: gap 0.25s var(--ease), color 0.25s;
}
.link-more:hover { gap: 16px; color: var(--laser); }

/* ---------- 8. 卡片 ---------- */
.card {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  background: var(--ink-1);
  border: 1px solid var(--line);
  transition: border-color 0.35s, background 0.35s, transform 0.35s var(--ease);
}
.card:hover { border-color: var(--line-2); background: var(--ink-2); }
.card .card-no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--laser);
  display: block;
  margin-bottom: 18px;
}
.card h3 { font-size: clamp(19px, 1.8vw, 24px); margin-bottom: 6px; }
.card .card-en {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-2);   /* WCAG AA：卡片英文副题是可读小字（评审 #11 系统化）*/
  display: block;
  margin-bottom: 18px;
}
.card p { color: var(--bone-2); font-size: 14.5px; }
.card .card-foot { margin-top: 26px; }

/* 产品卡（含 CSS 仪器视觉位） */
.prod-card { display: flex; flex-direction: column; min-height: 100%; }
.prod-card .prod-visual {
  position: relative;
  height: 190px;
  margin: -10px -10px 24px;
  background: var(--screen-bg);
  border: 1px solid var(--screen-line);
  overflow: hidden;
}
.prod-card .prod-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 10, 11, 0.85));
}
ul.feat {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 9px;
}
ul.feat li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--bone-2);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
ul.feat li::before { content: "+"; color: var(--gold); }
.prod-card .card-foot { margin-top: auto; padding-top: 26px; }

/* 首页应用卡缩略屏（仪器屏幕：双主题恒为深色） */
.card-thumb {
  display: block;
  height: 96px;
  background: var(--screen-bg);
  border: 1px solid var(--screen-line);
  margin-bottom: 16px;
}
.card-thumb svg { width: 100%; height: 100%; display: block; }

/* ---------- 9. 数据手册 / 规格表 ---------- */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-3);
  padding-bottom: 14px;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: top;
}
.spec-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-2);   /* WCAG AA：表头小字可读（评审 #11）*/
  border-bottom: 1px solid var(--line-2);
}
.spec-table tbody th {
  font-weight: 400;
  color: var(--bone-2);
  white-space: nowrap;
  width: 32%;
}
.spec-table tbody td { font-family: var(--font-mono); color: var(--bone); letter-spacing: 0.02em; }
.spec-table tbody tr { transition: background 0.2s; }
.spec-table tbody tr:hover { background: rgba(233, 225, 212, 0.025); }
.spec-table .unit { color: var(--bone-2); font-size: 12px; }   /* WCAG AA：单位小字可读（评审 #11）*/

/* 窄屏规格表横向滚动兜底（全站统一包裹层） */
.table-scroll { overflow-x: auto; }
.table-scroll .spec-table { min-width: 540px; }

/* ---------- 10. 平台分层图（一个平台 · 三种交付形态） ---------- */
.platform {
  display: grid;
  grid-template-columns: 150px repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  font-size: 14px;
}
.platform > div {
  background: var(--ink-0);
  padding: 16px 18px;
  position: relative;
}
.platform .ph-corner { background: var(--ink-1); }
.platform .ph-col {
  background: var(--ink-1);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 18px 14px;
}
.platform .ph-col small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-top: 4px;
}
.platform .ph-layer {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--bone-2);
  display: flex;
  align-items: center;
}
.platform .cell { min-height: 56px; display: flex; align-items: center; justify-content: center; }
/* 「内置」格：白底打底 + 强填充（解决佛大红被暖纸底吃成灰粉），
   描边只画左右两道，上下沿由 run-* 辅助类按列收口，整列读作一个红框区域 */
.platform .cell.on {
  background:
    linear-gradient(180deg, rgba(var(--glow), .12), rgba(var(--glow), .26)),
    var(--ink-1);
  box-shadow:
    inset 1px 0 0 rgba(var(--glow), .55),
    inset -1px 0 0 rgba(var(--glow), .55);
}
.platform .cell.on.run-start {
  box-shadow:
    inset 1px 0 0 rgba(var(--glow), .55),
    inset -1px 0 0 rgba(var(--glow), .55),
    inset 0 1px 0 rgba(var(--glow), .55);
}
.platform .cell.on.run-end {
  box-shadow:
    inset 1px 0 0 rgba(var(--glow), .55),
    inset -1px 0 0 rgba(var(--glow), .55),
    inset 0 -1px 0 rgba(var(--glow), .55);
}
/* 盖掉同列连续内置格之间的 1px 纸缝 */
.platform .cell.on.run-mid::before,
.platform .cell.on.run-end::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: rgba(var(--glow), .2);
}
.platform .cell.on::after {
  content: "●";
  font-size: 13px;
  color: var(--laser);
  text-shadow: 0 0 8px rgba(var(--glow), 0.8);
}
/* 「不含」格：细斜纹，实/虚一眼成形 */
.platform .cell.off {
  background: repeating-linear-gradient(45deg, transparent 0 7px, var(--line) 7px 8px);
}
.platform .cell.off::after {
  content: "—";
  color: var(--bone-3);
  opacity: 0.4;
}
.platform-note {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--bone-3);
}
.platform-note i { font-style: normal; margin-right: 6px; }
.platform-note span:first-child i {
  color: var(--laser);
  text-shadow: 0 0 8px rgba(var(--glow), .6);
}
.platform-note span:last-child i {
  color: var(--bone-3);
  opacity: .6;
}

/* ---------- 11. 代码块（仪器屏幕：双主题恒为深色） ---------- */
.code {
  background: var(--screen-bg);
  border: 1px solid var(--screen-line);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
}
.code .code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--screen-line);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--screen-fg-3);
}
.code .code-bar .dot { color: #ff3b47; }
.code pre {
  padding: 22px 24px;
  overflow-x: auto;
  color: var(--screen-fg-2);
}
.code .k { color: #ff5a64; }           /* keyword：佛大红亮调 */
.code .f { color: #d9b36a; }           /* function：专金亮调 */
.code .s { color: #c9b58c; }           /* string */
.code .c { color: var(--screen-fg-3); }/* comment */
.code .n { color: #ffe9ea; }           /* number */

/* ---------- 12. 下载行 / 资源列表 ---------- */
.dl-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  padding: 20px clamp(16px, 2vw, 28px);
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--ink-1);
  transition: background 0.25s, border-color 0.25s;
}
.dl-list > .dl-row:first-child { border-top: 1px solid var(--line); }
.dl-row:hover { background: var(--ink-2); }
.dl-row .dl-ico {
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--gold-ink);   /* WCAG AA：9.5px 小字金标用 AA 版专金（#8c7440 仅 4.48:1 < 4.5；评审 #11 系统化）*/
}
.dl-row .dl-name { font-weight: 600; font-size: 15px; }
.dl-row .dl-name small {
  display: block;
  font-weight: 400;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--bone-3);
  letter-spacing: 0.06em;
  margin-top: 3px;
}
.dl-row .dl-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--bone-3);
  white-space: nowrap;
}
.dl-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 9px 18px;
  border: 1px solid var(--line-2);
  color: var(--bone);
  transition: all 0.25s;
  white-space: nowrap;
}
.dl-btn:hover { border-color: var(--laser); color: var(--laser); }

/* ---------- 13. FAQ / 折叠 ---------- */
details.faq {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--ink-1);
}
.faq-list > details.faq:first-child { border-top: 1px solid var(--line); }
details.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 15.5px;
  transition: color 0.2s;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--laser);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-body {
  padding: 0 24px 22px;
  color: var(--bone-2);
  font-size: 14.5px;
  max-width: 75ch;
}

/* ---------- 14. 时间线（about） ---------- */
.timeline { position: relative; padding-left: 36px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line-2);
}
.timeline .tl-item { position: relative; padding-bottom: 40px; }
.timeline .tl-item:last-child { padding-bottom: 0; }
.timeline .tl-item::before {
  content: "";
  position: absolute;
  left: -32px; top: 9px;
  width: 9px; height: 9px;
  background: var(--ink-0);
  border: 1px solid var(--laser);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(var(--glow), 0.45);
}
.timeline .tl-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--laser);
  display: block;
  margin-bottom: 8px;
}
.timeline h3, .timeline h4 { font-size: 17px; margin-bottom: 6px; }
.timeline p { color: var(--bone-2); font-size: 14.5px; max-width: 60ch; }

/* ---------- 15. 数字统计 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stats .stat { background: var(--ink-1); padding: clamp(22px, 3vw, 36px); }
.stats .stat .v {
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  color: var(--num);
  line-height: 1.1;
}
.stats .stat .v.long { font-size: clamp(22px, 2.4vw, 34px); white-space: nowrap; }
.stats .stat .v i { font-style: normal; color: var(--laser); font-size: 0.55em; margin-left: 2px; }
.stats .stat .l {
  margin-top: 10px;
  font-size: 13px;
  color: var(--bone-2);
  letter-spacing: 0.04em;
}

/* ---------- 16. CTA 横幅 ---------- */
.cta-band {
  position: relative;
  border: 1px solid var(--line-2);
  padding: clamp(44px, 6vw, 96px) clamp(28px, 5vw, 72px);
  background:
    radial-gradient(ellipse 60% 100% at 85% 50%, rgba(var(--glow), 0.10), transparent 65%),
    var(--ink-1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  overflow: hidden;
}
.cta-band h2 { font-size: clamp(28px, 3.4vw, 48px); margin-bottom: 12px; text-wrap: balance; }
.cta-band p { color: var(--bone-2); max-width: 52ch; }
.cta-band .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .cta-band { grid-template-columns: 1fr; }
}

/* ---------- 17. Footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
  background: var(--ink-2);
}
/* 品牌回声：每页收束回到同一句话，双主题随 --bone-3 自适配 */
.site-foot::before {
  content: "看见表面之下 SEE BENEATH THE SURFACE";
  display: block;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(56px, 8.5vw, 132px);
  line-height: 1.05;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--bone-3);
  opacity: .08;
  padding: clamp(28px, 4vw, 52px) var(--pad-x) 0;
  pointer-events: none;
}
.site-foot .foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(48px, 6vw, 80px);
}
.site-foot .foot-brand p {
  color: var(--bone-2);   /* WCAG AA：页脚正文（#f3edeb 底）用 VIS 更深灰阶 */
  font-size: 13.5px;
  max-width: 36ch;
  margin-top: 16px;
}
.site-foot h5, .site-foot .foot-h {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-2);   /* WCAG AA：页脚栏目标题（原 --bone-3 在 #f3edeb 上 3.3:1）*/
  margin-bottom: 20px;
}
.site-foot ul { list-style: none; display: grid; gap: 12px; }
.site-foot ul a {
  font-size: 14px;
  color: var(--bone-2);
  transition: color 0.2s, padding-left 0.25s var(--ease);
}
.site-foot ul a:hover { color: var(--laser); padding-left: 6px; }
.site-foot ul li.foot-text { font-size: 13.5px; color: var(--bone-2); font-family: var(--font-mono); letter-spacing: 0.03em; }
.site-foot .foot-bar {
  border-top: 1px solid var(--line);
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bone-2);   /* WCAG AA：版权/备案行（原 --bone-3 在 #f3edeb 上 3.3:1）*/
}
.site-foot .foot-bar a { color: var(--bone-2); }
.site-foot .foot-bar a:hover { color: var(--laser); }  /* 恢复 hover 反馈（评审 #12，曾误扫成与静态同色）*/

/* ---------- 18. Reveal 动效 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 19. 移动端 ---------- */
@media (max-width: 1080px) {
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(var(--paper), 0.97);
    backdrop-filter: blur(18px);
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
  }
  body.nav-open .site-nav { opacity: 1; visibility: visible; }
  .site-nav a.nav-link, .site-nav button.nav-link { font-size: 20px; padding: 12px 20px; }
  .site-nav .nav-link.is-active::after { left: 20px; right: 20px; }
  .nav-item .sub {
    position: static;
    min-width: 0;
    background: transparent;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    text-align: center;
  }
  .nav-item.open .sub { display: block; }
  .sub a { justify-content: center; font-size: 15px; }
  .nav-toggle { display: block; }
  .head-cta { display: none; }
  .nav-item-mobile { display: block; }              /* 折叠菜单内的「联系咨询/账户」入口 */
  .nav-item-mobile .nav-link { color: var(--laser); }/* 与导航项区分，呼应 CTA 红 */
  .depth-ruler { display: none; }

  .hero .wrap { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-top: calc(var(--head-h) + 64px); }

  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .site-foot .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .split, .split.rev, .split.eq { grid-template-columns: 1fr; }
}

/* ---------- 19.5 产品实拍图（透明底 + CSS 阴影，阴影分离铁律） ---------- */
.product-photo { display: flex; align-items: center; justify-content: center; }
.product-photo img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(30, 15, 16, 0.18));
}
html[data-theme="dark"] .product-photo img {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
}

/* ---------- 20. 主题体系 ---------- */
/* 暗主题：暖黑 + 佛大红色阶（亮调） */
html[data-theme="dark"] {
  --ink-0: #0c0a0a;
  --ink-1: #121010;
  --ink-2: #181415;
  --ink-3: #221b1c;
  --line:   rgba(236, 229, 228, 0.10);
  --line-2: rgba(236, 229, 228, 0.20);
  --bone:   #efe7e6;
  --bone-2: #b3a8a7;
  --bone-3: #7e7475;
  --laser:  #ff3b47;
  --laser-deep: #d7000f;
  --gold:   #c9a96e;
  --gold-ink: #c9a96e;          /* 暗主题小字金：暗底上亮金本就达标（评审 B）*/
  --amber:  #c9a96e;
  --hot-hi: #ffe9ea;
  --hot-deep: #3a0004;
  --num:    #ffe9ea;
  --glow:   255, 59, 71;
  --paper:  12, 10, 10;
  --dot:    rgba(236, 229, 228, 0.055);
  --grad-hot: linear-gradient(90deg, #3a0004 0%, #8f000a 28%, #d7000f 55%, #ff6470 82%, #ffe9ea 100%);
  --hot-text: linear-gradient(90deg, #e8404b 0%, #ff5a64 45%, #ff98a0 75%, #ffe9ea 100%);
  --d-hi: #efe7e6;
  --d-mid: #b5a9a8;
  --d-dim: #837a79;
  --d-r0: #6e0008;
  --d-r1: #a30010;
  --d-r2: #d7000f;
  --d-r3: #f4424e;
  --d-r4: #ff7a84;
  --d-r5: #ffe9ea;
  --d-laser: #ff3b47;
}

/* 恒深色乐章：CTA 横幅双主题恒深 + 任意 section 加 .band-dark 整体切换暗 token。
   注意 color 必须显式声明——子元素继承的是 body 的已计算颜色，仅重声明 token 不会生效 */
.cta-band, .section.band-dark {
  --ink-0: #0c0a0a;
  --ink-1: #121010;
  --ink-2: #181415;
  --ink-3: #221b1c;
  --line:   rgba(236, 229, 228, 0.10);
  --line-2: rgba(236, 229, 228, 0.20);
  --bone:   #efe7e6;
  --bone-2: #b3a8a7;
  --bone-3: #7e7475;
  --laser:  #ff3b47;
  --laser-deep: #d7000f;
  --gold:   #c9a96e;
  --gold-ink: #c9a96e;          /* 暗主题小字金：暗底上亮金本就达标（评审 B）*/
  --amber:  #c9a96e;
  --hot-hi: #ffe9ea;
  --hot-deep: #3a0004;
  --num:    #ffe9ea;
  --glow:   255, 59, 71;
  --paper:  12, 10, 10;
  --dot:    rgba(236, 229, 228, 0.055);
  --grad-hot: linear-gradient(90deg, #3a0004 0%, #8f000a 28%, #d7000f 55%, #ff6470 82%, #ffe9ea 100%);
  --hot-text: linear-gradient(90deg, #e8404b 0%, #ff5a64 45%, #ff98a0 75%, #ffe9ea 100%);
  --d-hi: #efe7e6;
  --d-mid: #b5a9a8;
  --d-dim: #837a79;
  --d-r0: #6e0008;
  --d-r1: #a30010;
  --d-r2: #d7000f;
  --d-r3: #f4424e;
  --d-r4: #ff7a84;
  --d-r5: #ffe9ea;
  --d-laser: #ff3b47;
  color: var(--bone);
}

/* band-dark 深底必须自带背景：token 重定义不会自动改 background，
   单列 .section.band-dark（不并入上方合并选择器，避免覆盖 .cta-band 自己的径向渐变背景） */
.section.band-dark {
  background:
    radial-gradient(ellipse 70% 90% at 80% 0%, rgba(var(--glow), .07), transparent 65%),
    var(--ink-0);
}

/* SVG 主题适配层：CSS 规则优先级高于 SVG 表现属性，
   原（橙色系）调色板 hex 一律路由到主题变量，无需改动任何页面内联 SVG */
[stroke="#ede6d8"] { stroke: var(--d-hi); }    [fill="#ede6d8"] { fill: var(--d-hi); }
[stroke="#b3aa99"] { stroke: var(--d-mid); }   [fill="#b3aa99"] { fill: var(--d-mid); }
[stroke="#7d7669"] { stroke: var(--d-dim); }   [fill="#7d7669"] { fill: var(--d-dim); }
[stroke="#8c1a00"] { stroke: var(--d-r0); }    [fill="#8c1a00"] { fill: var(--d-r0); }
[stroke="#c82a00"] { stroke: var(--d-r1); }    [fill="#c82a00"] { fill: var(--d-r1); }
[stroke="#e84a00"] { stroke: var(--d-r2); }    [fill="#e84a00"] { fill: var(--d-r2); }
[stroke="#ff8c28"] { stroke: var(--d-r3); }    [fill="#ff8c28"] { fill: var(--d-r3); }
[stroke="#ffb347"] { stroke: var(--d-r4); }    [fill="#ffb347"] { fill: var(--d-r4); }
[stroke="#ffe9c4"] { stroke: var(--d-r5); }    [fill="#ffe9c4"] { fill: var(--d-r5); }
[stroke="#ff4d1c"] { stroke: var(--d-laser); } [fill="#ff4d1c"] { fill: var(--d-laser); }

/* 仪器屏幕容器内：SVG 适配色固定为深底亮线（双主题一致） */
.scan-panel, .prod-visual, .code, .card-thumb {
  --d-hi: #efe7e6;
  --d-mid: #b5a9a8;
  --d-dim: #837a79;
  --d-r0: #6e0008;
  --d-r1: #a30010;
  --d-r2: #d7000f;
  --d-r3: #f4424e;
  --d-r4: #ff7a84;
  --d-r5: #ffe9ea;
  --d-laser: #ff3b47;
}

/* 主题切换按钮（main.js 注入到头部） */
.theme-toggle {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  color: var(--bone-2);
  transition: color 0.25s, border-color 0.25s, transform 0.4s var(--ease);
}
.theme-toggle:hover { color: var(--laser); border-color: var(--laser); transform: rotate(40deg); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: block; }

/* 暗主题下仪器屏幕找回嵌入感：提亮 --screen-line（panel-bar/code-bar 内分隔线一并生效）
   + 纯黑挡圈 + 顶缘高光 */
html[data-theme="dark"] .scan-panel,
html[data-theme="dark"] .code,
html[data-theme="dark"] .card-thumb,
html[data-theme="dark"] .prod-card .prod-visual {
  --screen-line: rgba(236, 230, 228, .24);
  border-color: var(--screen-line);
  box-shadow: 0 0 0 3px #000, inset 0 1px 0 rgba(255, 255, 255, .05);
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .platform { grid-template-columns: 84px repeat(3, minmax(0, 1fr)); font-size: 12px; }
  .platform > div { padding: 10px 8px; }
  .platform .ph-layer { font-size: 10px; }
  .dl-row { grid-template-columns: 1fr auto; }
  .dl-row .dl-ico, .dl-row .dl-meta { display: none; }
  .site-foot .foot-grid { grid-template-columns: 1fr; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}