/* ==========================================================================
   广石精工 GEO 官网 · 全站样式
   设计系统对应 canvas「00 · Design System」
   双主题：
     深色工业科技（默认，data-theme="dark"）
     浅色科研（data-theme="light"，学术蓝强调）
   规则：所有颜色一律走 CSS 变量。SVG 用 currentColor + 类，禁止硬编码色值。
   ========================================================================== */

/* ---------- 主题 A：深色工业科技（默认）· 橙金主色 ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* 底与面板：深棕黑，呼应橙金主题 */
  --bg: #12100E;
  --bg-alt: #171410;
  --panel: #1C1814;
  --card: #221D18;
  --border: #332C24;
  --border-strong: #463C30;

  /* 唯一强调色：熔炉橙金（对应海报 #FF6B2C→#F5A623 渐变的中段） */
  --accent: #F0872A;
  --accent-hover: #FF9D3D;
  --accent-dim: #2E2314;
  /* 按钮/高亮块上的文字色（深底浅字） */
  --on-accent: #1A0F04;
  --warn: #E0457B;
  --warn-dim: #2C1620;
  --on-warn: #FFF0F5;

  /* 文字 */
  --text: #F7F1E8;
  --text-2: #B8A995;
  --text-3: #94836F;
  --text-4: #6B5D4D;

  /* 导航链接（比 text-2 略亮） */
  --link: #D6C7B3;
  /* 正文段落 */
  --body-text: #B5A794;
  /* 说明/提示区文字（带橙调） */
  --hint-text: #E8C9A0;
  /* 警示区文字 */
  --warn-text: #E7C2CE;

  /* 特殊面：读数面板、面板、FAQ 展开区、表格 hover */
  --surface: #16130F;
  --surface-2: #1D1913;
  /* 页脚底色 */
  --foot-bg: #0D0B09;

  /* 导航栏毛玻璃 */
  --nav-bg: rgba(18, 16, 14, 0.9);

  /* 半透明叠加（hover/边框用） */
  --overlay: rgba(255, 255, 255, 0.03);
  --overlay-2: rgba(255, 255, 255, 0.05);

  /* 图片占位斜纹 */
  --ph-a: #2A241C99;
  --ph-b: #221D18;
  --ph-c: #1C1814;

  /* 阴影 */
  --shadow: 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .35);

  /* SVG 图表用 */
  --svg-grid: #332C24;
  --svg-line: #F0872A;
  --svg-fill: #F0872A;
  --svg-fill-2: #B8A995;
  --svg-tick: #B8A995;
  --svg-warn: #E0457B;

  /* 橙金主色体系（见上方的 .p-hero 首屏） */
  --poster-grad-a: #FF6B2C;
  --poster-grad-b: #F5A623;
  --poster-grad-c: #FFB84D;
  --poster-ink: #1A0F04;
  --poster-line: rgba(255, 255, 255, .38);

  --maxw: 1440px;
  --pad: 72px;
  --radius: 14px;
  --radius-sm: 8px;
}

/* ---------- 主题 B：浅色（暖白+ 琥珀橙） ---------- */
[data-theme="light"] {
  color-scheme: light;

  /* 底与面板：暖白，呼应橙金主题 */
  --bg: #FDFBF7;
  --bg-alt: #F7F2E9;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --border: #E8DFD0;
  --border-strong: #D5C7B0;

  /* 琥珀橙：#B45309 降亮度后与白字达4.5:1（WCAG AA 正文），
     #F0872A 只用于图形填充与深底场景 */
  --accent: #B45309;
  --accent-hover: #92400E;
  --accent-dim: #FDF0E2;
  --on-accent: #FFFFFF;
  --warn: #C2410C;
  --warn-dim: #FFF7ED;
  --on-warn: #FFFFFF;

  /* 文字 */
  --text: #1C1611;
  --text-2: #5C5044;
  --text-3: #7D6F60;
  --text-4: #A8998A;

  --link: #4A3F34;
  --body-text: #5C5044;
  --hint-text: #A85410;
  --warn-text: #9A3412;

  /* 特殊面：纯白面板 + 极浅暖底 */
  --surface: #FFFFFF;
  --surface-2: #FBF7F0;
  --foot-bg: #F2EADF;

  --nav-bg: rgba(255, 253, 247, 0.9);

  /* 浅底上要反过来用黑色低透明 */
  --overlay: rgba(28, 22, 17, 0.03);
  --overlay-2: rgba(28, 22, 17, 0.05);

  --ph-a: #F5DFC399;
  --ph-b: #F7F2E9;
  --ph-c: #FBF7F0;

  /* 浅底阴影要更轻更散 */
  --shadow: 0 12px 32px rgba(92, 62, 20, .12);
  --shadow-sm: 0 4px 16px rgba(92, 62, 20, .07);

  /* SVG 图表：网格线要浅才不抢眼，数据线保持饱和橙 */
  --svg-grid: #E8DFD0;
  --svg-line: #B45309;
  --svg-fill: #B45309;
  --svg-fill-2: #7D6F60;
  --svg-tick: #7D6F60;
  --svg-warn: #C2410C;

  /* 海报风格首屏 */
  --poster-grad-a: #FF6B2C;
  --poster-grad-b: #F5A623;
  --poster-grad-c: #FFB84D;
  --poster-ink: #1A0F04;
  --poster-line: rgba(255, 255, 255, .45);
}

/* 跟随系统（用户未手动选择时）—— 必须与 [data-theme="light"] 保持一致，
   漏掉这一处 → 未手动选过的用户切系统主题时页面不跟随。 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #FDFBF7;
    --bg-alt: #F7F2E9;
    --panel: #FFFFFF;
    --card: #FFFFFF;
    --border: #E8DFD0;
    --border-strong: #D5C7B0;
    --accent: #D96B15;
    --accent-hover: #B85A0E;
    --accent-dim: #FDF0E2;
    --on-accent: #FFFFFF;
    --warn: #C2410C;
    --warn-dim: #FFF7ED;
    --on-warn: #FFFFFF;
    --text: #1C1611;
    --text-2: #5C5044;
    --text-3: #7D6F60;
    --text-4: #A8998A;
    --link: #4A3F34;
    --body-text: #5C5044;
    --hint-text: #A85410;
    --warn-text: #9A3412;
    --surface: #FFFFFF;
    --surface-2: #FBF7F0;
    --foot-bg: #F2EADF;
    --nav-bg: rgba(255, 253, 247, 0.9);
    --overlay: rgba(28, 22, 17, 0.03);
    --overlay-2: rgba(28, 22, 17, 0.05);
    --ph-a: #F5DFC399;
    --ph-b: #F7F2E9;
    --ph-c: #FBF7F0;
    --shadow: 0 12px 32px rgba(92, 62, 20, .12);
    --shadow-sm: 0 4px 16px rgba(92, 62, 20, .07);
    --svg-grid: #E8DFD0;
    --svg-line: #B45309;
    --svg-fill: #B45309;
    --svg-fill-2: #7D6F60;
    --svg-tick: #7D6F60;
    --svg-warn: #C2410C;
    --poster-grad-a: #FF6B2C;
    --poster-grad-b: #F5A623;
    --poster-grad-c: #FFB84D;
    --poster-ink: #1A0F04;
    --poster-line: rgba(255, 255, 255, .45);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* 窄屏安全阀：德语复合词 / 俄语长词 / 型号+信用代码这类不可断的串，
   在 390px 视口下会撑破容器引发整页横向滚动。
   统一允许在任意字符间断行（中日文无影响，那里本来就在字符间断）。*/
@media (max-width: 768px) {
  html, body, .wrap, main, .doc, .pbody, .card, .panel, section, article {
    overflow-wrap: anywhere;
    min-width: 0;
  }
  /* grid 子项必须显式 min-width:0，否则 p-hero / tech / cta 的 1fr 列
     会被长标题与按钮文案顶开（实测 ru 首页 H1 宽 429px > 390px 视口）。*/
  .p-hero-grid, .tech, .p-hero-grid > *, .tech > *, .cta-btns, .cta-btns > *,
  .sec-head, .sec-head > *, .p-trust, .p-readout, .steps {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .btn { max-width: 100%; overflow-wrap: anywhere; }
  table { table-layout: fixed; width: 100%; }
  table td, table th { overflow-wrap: anywhere; }
  /* .tbl td.v 桌面端是 nowrap（参数值、型号、信用代码要保持一行），
     窄屏必须放开 —— 德文 "Unified Social Credit Code" 这类标签
     一旦 nowrap 会把整表撑到 800+px。*/
  .tbl td.v { white-space: normal; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- 字体 ---------- */
.mono, .num {
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.display {
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.kicker.warn { color: var(--warn); }

/* ---------- 导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 20px var(--pad);
  display: flex; align-items: center; gap: 40px;
}
/* 导航是 flex 容器，flex 项默认 flex-shrink:1 但 min-width:auto，
   俄语/德语的导航链接与 CTA 按钮（「Запросить спецификацию」）不可断行，
   会把 nav-in 顶出容器 —— 实测 ru/faq.html 在 1920px 下 docW=1990。*/
.nav-in > * { min-width: 0; }
.nav-in > .btn { flex-shrink: 0; overflow-wrap: anywhere; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 22px; width: auto; }
/* 商标：用 SVG 自身做遮罩，颜色由 background 提供 → 双主题自动跟随。
   ⚠️ 原来用 <img src="logo.svg">，而 logo.svg 内部是 stroke="currentColor"，
   但 <img> 加载的独立 SVG **不继承父页面 color**，currentColor 恒为黑色，
   导致深色导航栏上是黑线画黑底、几乎看不见。现改为 mask 方案。 */
.brand-logo {
  display: inline-block;
  /* 商标 = 商标注册证第 76559641 号图样（胶囊框 + 折线带 + 两颗钻石）。
     实测图形外框 358×186 → 比例 1.9247。
     （2026-10-11 换标经过两轮：先按用户给的《LOGO.jpeg》做了「短横 + 穹顶」版，
       后发现它与注册证图样不是同一图形，为合规改回注册证图样。
       现由 site/make_logo.py 从 brand/商标注册证图样-76559641.png 自动描摹，勿手改。）
     尺寸 61×32：容器比例要与 1.9247 对齐，mask 用 contain 自适应，
     比例差太多会把商标压扁或上下留白。导航里 .brand-txt 本就约 32px 高，
     所以 28→32 不会顶高导航栏。 */
  width: 61px; height: 32px; flex-shrink: 0;
  background-color: var(--text);
  -webkit-mask: url(/images/logo.svg?v=06b7130d) no-repeat center / contain;
  mask: url(/images/logo.svg?v=06b7130d) no-repeat center / contain;
}
.brand-txt { display: flex; flex-direction: column; gap: 1px; }
.brand-name { font-size: 17px; font-weight: 700; line-height: 1; }
.brand-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; color: var(--text-4); letter-spacing: 0.08em;
}
/* flex-wrap：德/俄语导航项更宽，允许换行避免撑破 nav-in */
.nav-links { display: flex; gap: 34px; align-items: center; flex: 1; flex-wrap: wrap; }
.nav-links a { font-size: 15px; color: var(--link); transition: color .2s; }
.nav-links a:hover { color: var(--accent); }
.nav-links a.on { color: var(--accent); font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  cursor: pointer; border: 1px solid transparent;
  transition: background .2s, border-color .2s, transform .2s;
}
.btn-p { background: var(--accent); color: var(--on-accent); }
.btn-p:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-s { border-color: var(--border-strong); color: var(--link); background: transparent; }
.btn-s:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn-ghost { padding: 17px 8px; color: var(--accent); }

/* ---------- 首屏（橙金渐变 · 左文右图的一屏式 Hero）----------
   2026-10-06 改版：原来是「橙金海报屏 + 深色产品屏」两块连着放（合计 1806px），
   卖点/按钮/信任标签逐字重复，首屏反而没有产品图。
   现在合并为一屏：左侧文案 + 右侧产品实拍与实测读数，底部一条承接范围。
   背景渐变铺满整宽，横向留白交给内层 .wrap（原来 .poster-hero 自己带
   padding 又套 .wrap，等于双侧双倍留白，与其它区块对不齐）。 */
.p-hero {
  position: relative;
  padding: 56px 0 60px;
  background: linear-gradient(150deg, var(--poster-grad-a) 0%, var(--poster-grad-b) 52%, var(--poster-grad-c) 100%);
  color: var(--poster-ink);
}
.p-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  gap: 52px; align-items: center;
}
.p-hero-main { min-width: 0; }

.p-eyebrow {
  display: inline-flex; align-items: center;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  color: var(--poster-ink);
}
/* 2026-10-11 改版：眉标左侧的圆形徽标（原子轨道 SVG）已移除——它和导航栏
   的注册商标 logo 是同一个图形，首屏再放一个纯属重复装饰。
   原「从原子到地球 · 成矿模拟实验室」中英标题整块也一并去掉，承诺句上位
   成为全站唯一 H1（保留单 H1 结构，SEO/GEO 不受影响）。 */
.p-promise {
  margin: 22px 0 0; font-size: 30px; line-height: 1.34; font-weight: 800;
  letter-spacing: .01em; color: var(--poster-ink); max-width: 620px;
  /* ⚠️ white-space: pre-line 必加：ja/ko/de/ru 的 hero.h1 里带 \n 手动断行
     （如 ja「72時間再現できる\n300MPaの実験データ」），不保留换行会被压成
     一行并在断点处留一个多余空格。 */
  white-space: pre-line;
}
.p-lead {
  margin-top: 16px; max-width: 580px;
  font-size: 15.5px; line-height: 1.95; color: var(--poster-ink); opacity: .9;
}
.p-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.p-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 10px;
  background: var(--poster-ink); color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.p-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.p-btn-ghost {
  background: rgba(255, 255, 255, .18); color: var(--poster-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.p-btn-ghost:hover { background: rgba(255, 255, 255, .28); }
.p-trust { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.trust-item {
  padding: 7px 12px; border-radius: 6px;
  background: var(--card); color: var(--text-2); font-size: 12px;
}
.p-trust .trust-item {
  background: rgba(255, 255, 255, .16); color: var(--poster-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}

/* 产品实拍 + 实测读数（读数不压在照片上，避免遮挡设备与面板） */
.p-visual {
  margin: 0; border-radius: 20px; overflow: hidden;
  background: rgba(14, 11, 8, .9);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
/* 完整设备必须整台可见：不再用固定 400px + cover 二次裁切，改为按原图比例
   （3:4 竖构图，源图 3024×4032 未做裁剪）自适应。 */
.p-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.p-readout {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(14, 11, 8, .92);
}
.p-ro { padding: 15px 16px; min-width: 0; }
.p-ro + .p-ro { border-left: 1px solid rgba(255, 255, 255, .16); }
.p-ro-v {
  display: block; font-family: "Inter Tight", Inter, sans-serif;
  font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.p-ro-v i { font-style: normal; font-size: 14px; font-weight: 500; margin-left: 3px; }
.p-ro-u { display: block; margin-top: 7px; font-size: 12px; color: rgba(255, 255, 255, .72); }
.p-ro:first-child .p-ro-v { color: var(--poster-grad-c); }

/* ---------- 关注我们（follow.html）：公众号 / 视频号二维码卡 ---------- */
.qr-grid { gap: 24px; }
.qr-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 34px 30px 30px;
}
.qr-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--text-3);
}
/* ⚠️ 二维码底板必须纯白：深色主题下 card 是暗色，若把码直接放在暗底上，
   对比度不足会扫不出来。这里用白底 + 内边距做静区（quiet zone）。 */
.qr-tile {
  width: 208px; max-width: 100%; margin: 18px 0 20px; padding: 10px;
  border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--border);
}
.qr-tile img { display: block; width: 100%; height: auto; }
.qr-name { font-size: 24px; margin-bottom: 8px; }
.qr-desc {
  font-size: 15px; color: var(--text-2); line-height: 1.85; margin-bottom: 16px;
}
.qr-steps {
  width: 100%; text-align: left; margin: 0; padding-left: 20px;
  font-size: 14px; color: var(--text-2); line-height: 2;
}
.qr-note {
  margin-top: 22px; text-align: center;
  font-size: 13px; color: var(--text-3); line-height: 1.9;
}

/* ---------- 区块 ---------- */
.sec { padding: 88px var(--pad); }
.sec-alt { background: var(--bg-alt); }
.sec-head { margin-bottom: 40px; }
.sec-head h2 { font-size: 42px; margin: 14px 0; }
.sec-head p { font-size: 16px; color: var(--text-2); line-height: 1.85; max-width: 780px; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: 32px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
}
.card-n { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--warn); margin-bottom: 14px; }
.card h3 { font-size: 22px; margin-bottom: 14px; }
.card p { font-size: 15px; color: var(--text-2); line-height: 1.87; }

/* 参数卡 */
.spec { padding: 30px; }
.spec.on { background: var(--panel); border-color: var(--accent); }
.spec-l { font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
.spec-v { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.spec-v b { font-size: 56px; line-height: 1; }
.spec-v i { font-style: normal; font-size: 20px; font-weight: 500; }
.spec.on .spec-v b, .spec.on .spec-v i { color: var(--accent); }
.spec-n { font-size: 14px; color: var(--text-2); line-height: 1.7; }

/* 场景卡 */
.scene { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.scene-img {
  height: 200px; display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--text-4); font-size: 14px;
}
.scene-b { padding: 26px; }
.scene-b h3 { font-size: 20px; margin-bottom: 10px; }
.scene-b p { font-size: 14px; color: var(--text-2); line-height: 1.85; }

/* ---------- 技术原理 ---------- */
.tech { display: grid; grid-template-columns: 1fr 560px; gap: 64px; align-items: center; }
.tech h2 { font-size: 40px; margin: 14px 0 22px; white-space: pre-line; line-height: 1.3; }
.tech p { font-size: 16px; color: var(--text-2); line-height: 1.9; margin-bottom: 22px; }
.tech .hl { color: var(--accent); }
.panel { border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: var(--panel);
  border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-2);
}
.pill { padding: 5px 10px; border-radius: 5px; background: var(--accent-dim); color: var(--accent); font-size: 11px; }
.curve { padding: 32px 24px 28px; }
.legend { display: flex; gap: 24px; padding: 0 24px 24px; font-size: 12px; color: var(--text-2); }
.legend span { display: flex; align-items: center; gap: 8px; }
.lg { width: 10px; height: 3px; border-radius: 2px; }
/* 图例色块：颜色走变量，双主题自动切换 */
.lg-ac { background: var(--accent); }
.lg-warn { background: var(--warn); }

/* ---------- SVG 语义色 ----------
   SVG 属性（stroke=/fill=）不认CSS 变量，页面里一律改用下面的类。
   命名：sk-* = stroke，fl-* = fill。禁止在 HTML 里写死色值。*/
.sk-ac { stroke: var(--svg-line); }
.fl-ac { fill: var(--svg-fill); }
.sk-grid { stroke: var(--svg-grid); }
.sk-mut { stroke: var(--svg-tick); }
.fl-mut { fill: var(--svg-fill-2); }
.sk-warn { stroke: var(--svg-warn); }

/* 正文内强调文字（原先是内联 color:#F2F6FA，深色底专用） */
.em-hl { color: var(--text); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border-top: 1px solid var(--border); }
.step { padding: 18px 20px; }
.step + .step { border-left: 1px solid var(--border); }
.step-n { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-4); letter-spacing: 0.1em; }
.step-t { font-size: 15px; font-weight: 600; margin-top: 4px; }

/* ---------- 数据背书 ---------- */
.stat { padding: 30px; }
.stat-v { font-size: 52px; line-height: 1; margin-bottom: 10px; }
.stat:first-child .stat-v { color: var(--accent); }
.stat-u { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.stat-n { font-size: 14px; color: var(--text-3); line-height: 1.7; }

/* ---------- 收尾行动区（交付背书 + CTA，合并成一屏） ---------- */
.sec-head.center { text-align: center; }
.sec-head.center p { margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ---------- FAQ ---------- */
.cats { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 40px; }
.cat {
  padding: 9px 18px; border-radius: 7px; font-size: 14px;
  background: var(--card); border: 1px solid var(--border); color: var(--link);
  cursor: pointer; transition: all .2s;
}
.cat.on, .cat:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

.faq {
  border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  margin-bottom: 16px;
}
.faq-q {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 28px; cursor: pointer; user-select: none;
}
.faq-q h3 { font-size: 20px; font-weight: 600; flex: 1; }
.faq-q .pm {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px; background: var(--accent-dim);
  color: var(--accent); font-size: 19px; font-weight: 600;
  transition: transform .25s, background .25s;
}
.faq.on .pm { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); }
.faq-a { display: none; padding: 0 28px 28px; background: var(--surface-2); }
.faq.on .faq-a { display: block; }
.faq-a p { font-size: 16px; color: var(--body-text); line-height: 1.9; white-space: pre-line; }
.src {
  display: inline-block; margin-top: 14px; padding: 6px 12px;
  border-radius: 6px; background: var(--accent-dim);
  color: var(--accent); font-family: "JetBrains Mono", monospace; font-size: 12px;
}

/* ---------- 提示块 ---------- */
.note {
  padding: 22px 26px; border-radius: 12px;
  background: var(--accent-dim); border: 1px solid var(--accent);
  font-size: 14px; color: var(--hint-text); line-height: 1.9;
}
.note h3 { color: var(--accent); font-size: 15px; margin-bottom: 10px; }
.note.warn { background: var(--warn-dim); border-color: var(--warn); color: var(--warn-text); }
.note.warn h3 { color: var(--warn); }

/* ---------- 页脚 ---------- */
.foot { background: var(--foot-bg); border-top: 1px solid var(--border); padding: 64px var(--pad) 40px; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 64px; }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.foot-brand img { height: 20px; }
.foot-name { font-size: 17px; font-weight: 700; }
.foot-desc { font-size: 14px; color: var(--text-3); line-height: 1.85; max-width: 420px; }
.foot-col h4 { font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.foot-col a, .foot-col p { display: block; font-size: 13px; color: var(--text-3); line-height: 2.2; }
.foot-col a:hover { color: var(--accent); }
.foot-bot {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-4);
}
/* ICP 备案号（工信部要求展示，链接到工信部查询系统） */
.icp { color: var(--text-4); transition: color .2s; }
.icp:hover { color: var(--text-2); }

/* ---------- 内页通用 ---------- */
/* 面包屑 + 页首 banner */
.crumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--text-4);
  padding-top: 34px;
}
.crumb a { color: var(--text-3); transition: color .2s; }
.crumb a:hover { color: var(--accent); }
.crumb i { font-style: normal; opacity: .5; }

.phead { padding: 34px var(--pad) 56px; }
.phead h1 { font-size: 50px; margin: 22px 0 20px; white-space: pre-line; line-height: 1.2; }
.phead p { font-size: 17px; color: var(--text-2); line-height: 1.95; max-width: 760px; }

/* 内页主体两栏（左侧目录 + 右侧内容）
   ⚠️ grid 列的 min-width 默认是 auto，内容宽度会顶开轨道。
   德语复合词 / 俄语长词不换行时，右侧 1fr 列会被撑到 1088px，
   整个页面出现横向滚动条（实测 de/about.html 在 1440px 下 docW=1464）。*/
.pbody { display: grid; grid-template-columns: 232px 1fr; gap: 72px; align-items: start; }
.pbody > * { min-width: 0; }
.toc { position: sticky; top: 108px; }
.toc-t {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  color: var(--text-4); letter-spacing: 0.16em; margin-bottom: 14px;
}
.toc a {
  display: block; padding: 8px 0 8px 14px; font-size: 14px;
  color: var(--text-3); border-left: 2px solid var(--border);
  transition: color .2s, border-color .2s;
}
.toc a:hover { color: var(--accent); border-left-color: var(--accent); }
.toc-box {
  margin-top: 28px; padding: 18px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
}
.toc-box p { font-size: 13px; color: var(--text-3); line-height: 1.8; margin-bottom: 12px; }
.toc-box .btn { width: 100%; padding: 10px; font-size: 13px; }

/* 内容区块 */
.blk { margin-bottom: 64px; scroll-margin-top: 108px; }
.blk:last-child { margin-bottom: 0; }
.blk-h {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 16px; margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.blk-h .n { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--warn); }
.blk-h h2 { font-size: 30px; }
.blk > p { font-size: 16px; color: var(--body-text); line-height: 1.95; margin-bottom: 16px; }
.blk > p .hl { color: var(--accent); }
.blk h3 { font-size: 19px; margin: 28px 0 12px; }
.blk ul { margin: 0 0 16px; list-style: none; }
.blk li {
  position: relative; padding-left: 22px;
  font-size: 15px; color: var(--text-2); line-height: 1.95; margin-bottom: 8px;
}
.blk li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* 参数表 */
/* table-layout:fixed + max-width:100%：表格默认按内容 auto 定列宽，
   一段长文本（公司全称、参数说明）就能把整表撑到近千px。
   fixed 布局强制列宽按容器比例分配，内容只在格内换行。*/
.tbl {
  width: 100%; max-width: 100%;
  table-layout: fixed; border-collapse: collapse;
  margin: 8px 0 4px;
}
.tbl th, .tbl td {
  padding: 15px 20px; text-align: left;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere; min-width: 0;
}
.tbl thead th {
  background: var(--panel); font-size: 12px; font-weight: 600;
  color: var(--text-3); letter-spacing: 0.08em; white-space: nowrap;
}
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl td { font-size: 15px; color: var(--text-2); }
/* table-layout:fixed 后列宽按此比例分配：
   首列是参数名（短），次列是参数值（长）。不给比例会均分，观感变差。*/
.tbl th:first-child, .tbl td:first-child { width: 34%; }
.tbl th:nth-child(2), .tbl td:nth-child(2) { width: 66%; }
.tbl td:first-child { color: var(--text); font-weight: 500; }
/* 参数值/型号/信用代码这类短串本来就在内容宽度内，不换行也不影响观感；
   一律用 normal + overflow-wrap，让俄/英公司全称等长串能在必要时断行。
   （早先的 white-space:nowrap 会让 td.v 撑到 958px，
     实测 ru/about.html @1440px docW=1442。）*/
.tbl td.v {
  font-family: "JetBrains Mono", monospace; color: var(--accent);
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.tbl caption {
  caption-side: bottom; text-align: left; padding-top: 14px;
  font-size: 12px; color: var(--text-4); line-height: 1.7;
}

/* 键值列表（用于规格摘要） */
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.kv > div { background: var(--card); padding: 20px 22px; }
.kv dt { font-size: 12px; color: var(--text-3); margin-bottom: 7px; }
.kv dd { font-family: "JetBrains Mono", monospace; font-size: 20px; color: var(--text); }
.kv dd.hl { color: var(--accent); }

/* 文章/白皮书正文 */
/* min-width:0 不可省：grid/flex 子项默认 min-width:auto，
   内容（本页max-width 780px）会把轨道撑到 780px，
   在 390px 视口下造成整页横向滚动。
   overflow-wrap:anywhere 让德语复合词（Hochtemperatur-Druckgerät）
   与俄语长词能在任意字符间断行 —— 桌面端同样需要，
   否则 1fr 网格列会被顶到 1088px。 */
.doc { max-width: 780px; min-width: 0; overflow-wrap: anywhere; }
.doc .lead {
  font-size: 19px; color: var(--link); line-height: 1.9;
  padding-left: 22px; border-left: 3px solid var(--accent); margin-bottom: 36px;
}
.doc h2 { font-size: 28px; margin: 48px 0 18px; }
.doc h3 { font-size: 20px; margin: 32px 0 12px; }
.doc p { font-size: 16px; color: var(--body-text); line-height: 2; margin-bottom: 18px; }
.doc figure { margin: 32px 0; }
.doc figcaption { margin-top: 12px; font-size: 13px; color: var(--text-4); line-height: 1.7; }
.doc blockquote {
  margin: 28px 0; padding: 20px 24px; border-radius: 10px;
  background: var(--card); border-left: 3px solid var(--warn);
  font-size: 15px; color: var(--link); line-height: 1.9;
}
.doc-meta {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid var(--border);
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--text-4);
}

/* 面包屑式 prev/next */
.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 72px; }
.pnav a { padding: 22px 26px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); transition: border-color .2s; }
.pnav a:hover { border-color: var(--accent); }
.pnav span { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-4); margin-bottom: 7px; }
.pnav b { font-size: 16px; font-weight: 600; }
.pnav a:last-child { text-align: right; }

/* 时间线（关于页） */
.tl { position: relative; padding-left: 32px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.tl-i { position: relative; padding-bottom: 32px; }
.tl-i:last-child { padding-bottom: 0; }
.tl-i::before {
  content: ""; position: absolute; left: -32px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.tl-d { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--warn); margin-bottom: 6px; }
.tl-i h3 { font-size: 19px; margin-bottom: 8px; }
.tl-i p { font-size: 15px; color: var(--text-2); line-height: 1.85; }

/* 团队/能力网格小卡 */
.mini { padding: 22px 24px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.mini h4 { font-size: 16px; margin-bottom: 8px; }
.mini p { font-size: 14px; color: var(--text-3); line-height: 1.8; }

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  :root { --pad: 40px; }
  .p-hero-grid, .tech { grid-template-columns: minmax(0, 1fr); }
  .p-promise { font-size: 26px; }
  .p-visual { max-width: 420px; margin-inline: auto; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .pbody { grid-template-columns: 1fr; gap: 40px; }
  .toc { position: static; }
  /* 窄屏侧栏目录转为横向标签行。
     ⚠️ 德/英/俄的长词组（如 "Registered trademarks"）不会在空格处断行，
        会把 flex 容器撑到几百 px 造成整页横向滚动。
        → 必须允许 a 内部换行，并给 li 一个可收缩的基准宽度。*/
  .toc ul { display: flex; gap: 10px 18px; flex-wrap: wrap; }
  .toc li { min-width: 0; max-width: 100%; }
  .toc a {
    border-left: 0; border-bottom: 2px solid var(--border); padding: 6px 0;
    white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  }
}
@media (max-width: 768px) {
  :root { --pad: 20px; }
  .nav-in { padding: 14px var(--pad); gap: 16px; }
  .nav-links { display: none; }
  /* 窄屏只留品牌，右侧 CTA 收起 —— 否则 390px 下会把布局撑破 */
  .nav-in > .btn { display: none; }
  /* 主题按钮必须保留：窄屏下它是唯一的主题切换入口 */
  .theme-btn:not(.theme-btn-float) { display: inline-flex; margin-left: auto; }
  .brand-sub { display: none; }
  .p-promise { font-size: 22px; }
  .p-lead { font-size: 14.5px; }
  .p-hero { padding: 36px 0 40px; }
  .p-btn { padding: 13px 22px; font-size: 14px; }
  .p-visual { max-width: 400px; margin-inline: auto; }
  .p-ro-v { font-size: 22px; }
  .p-ro-u { font-size: 11px; }
  .sec-head h2, .tech h2 { font-size: 30px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .qr-tile { width: 172px; }
  .qr-card { padding: 28px 22px 26px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
  .foot-bot { flex-direction: column; gap: 8px; text-align: center; }
  .spec-v b { font-size: 44px; }
  /* .btn 基础规则带 white-space: nowrap（防短按钮折行），而那条规则定义在
     本文件后段 —— 同优先级下后定义者胜，所以在前面 (max-width:768px) 块里
     写 .btn 覆盖会被它顶掉（实测改了等于没改）。必须写在 nowrap 之后。
     不放开的话，俄语长文案「Получить руководство и предложение」在 390px 下
     顶破容器：实测 ru/index.html docW=403 > 390。*/
  .btn { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  .phead h1 { font-size: 34px; }
  .blk-h h2 { font-size: 24px; }
  .kv, .pnav { grid-template-columns: 1fr; }
  .pnav a:last-child { text-align: left; }
  /* 德语复合词（Hochtemperatur-Druckgerät）与俄语长词在 390px 下不换行，
     会把容器撑到 500-900px 造成整页横向滚动。
     overflow-wrap:anywhere 允许在任意字符间断行（中文/日文无影响，
     因为那里本来就在字符间断行）。 */
  .doc, .doc p, .doc li, .doc td, .doc th,
  .lead, .blk p, .blk li, .p-promise, .p-lead,
  .sec-head h2, .sec-head p, .tech h2, .tech p,
  .kicker, .mono, .num, .pill {
    overflow-wrap: anywhere;
  }
  .tbl thead { display: none; }
  /* table-layout:fixed + width:100% 必加：窄屏下 tr/td 改成 block/flex 后，
     <table> 仍按auto 布局计算列宽，<td> 又是 flex 容器，
     「Unified Social Credit Code」「91420704MA49PCMP62」这类不换行内容
     会把整表撑到 800-900px（实测 de/about.html 894px、ru/about.html 938px）。
     fixed 布局强制列宽按容器分配，内容只能在格内换行。*/
  .tbl { table-layout: fixed; width: 100%; max-width: 100%; }
  /* 窄屏 tr 变 block、固定列宽失效，这里必须重置回auto，
     否则首列 34% 会被拉伸成长条。 */
  .tbl th:first-child, .tbl td:first-child,
  .tbl th:nth-child(2), .tbl td:nth-child(2) { width: auto; }
  .tbl tbody tr { display: block; border-bottom: 1px solid var(--border); padding: 6px 0; }
  .tbl td {
    display: flex; justify-content: space-between; gap: 20px;
    border: 0; padding: 8px 0; min-width: 0; max-width: 100%;
    overflow-wrap: anywhere; word-break: break-word;
  }
  .tbl td > * { min-width: 0; }
  .tbl td:first-child { flex: 0 0 45%; }
  .tbl td.v { text-align: right; white-space: normal; }
}

/* ---------- 无障碍 ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   多语言 · 语言切换器
   ⚠️ 布局约束（实测踩坑）：1440px 下横排 6 个语言名（English/日本語/한국어/
      Deutsch/Русский）实测占约 620px，会把右侧 CTA 按钮挤出容器。
      → 切换器在 >=1440px 就必须用下拉形态，不能等768px。
   ========================================================================== */
.lang {
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0; margin-left: auto;
  padding: 3px; border-radius: 8px;
  background: var(--overlay);
  border: 1px solid var(--border);
}
/* LANG 字样在横排时是纯占位浪费空间，只在 ≥1600px 有余量时才显示 */
.lang-t { display: none; }
.lang a, .lang button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 9px; border-radius: 6px;
  font-size: 12.5px; line-height: 1; white-space: nowrap;
  color: var(--text-3); background: none; border: 0;
  font-family: inherit; cursor: pointer;
  transition: color .2s, background-color .2s;
}
.lang a:hover, .lang button:hover { color: var(--text); background: var(--overlay-2); }
.lang a.on, .lang button.on {
  color: var(--on-accent); background: var(--accent); font-weight: 600;
}
/* aria-current 标记当前语言（比 .on 更语义化，双保险） */
.lang a[aria-current="true"], .lang button[aria-current="true"] { color: var(--on-accent); background: var(--accent); }
.lang-sep { width: 1px; height: 14px; background: var(--border); margin: 0 3px; }

/* ---------- 主题切换按钮 ---------- */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  margin-left: 8px; padding: 0;
  border-radius: 8px; cursor: pointer;
  color: var(--text-3);
  background: var(--overlay);
  border: 1px solid var(--border);
  transition: color .2s, background-color .2s, border-color .2s;
}
.theme-btn:hover { color: var(--accent); border-color: var(--border-strong); }
.theme-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* 两个图标叠放，按当前主题显示对应的一个 */
.theme-ico { position: absolute; pointer-events: none; }
.theme-btn { position: relative; }
.theme-btn .theme-ico-sun { display: none; }

/* 深色模式：显示太阳（点击去浅色） */
[data-theme="dark"] .theme-btn .theme-ico-sun { display: block; }
[data-theme="dark"] .theme-btn .theme-ico-moon { display: none; }
/* 浅色模式：显示月亮（点击去深色） */
[data-theme="light"] .theme-btn .theme-ico-sun { display: none; }
[data-theme="light"] .theme-btn .theme-ico-moon { display: block; }

/* 未手动选择时（跟随系统）：系统浅色时显示月亮 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-btn .theme-ico-sun { display: none; }
  :root:not([data-theme]) .theme-btn .theme-ico-moon { display: block; }
}

/* 404 等无导航栏页面：浮动在右下角 */
.theme-btn-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  width: 40px; height: 40px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

/* 宽屏（≥1560px）才横排——实测 1440px 横排会把 CTA 挤出容器 */
@media (min-width: 1560px) {
  .lang-t { display: block; font-family: "JetBrains Mono", monospace;
    font-size: 9px; letter-spacing: 0.14em; color: var(--text-4);
    padding: 0 6px; text-transform: uppercase; }
}

/* 默认（下拉形态）：当前语言按钮 + 展开列表 */
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; }
.lang-toggle::after {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.lang { position: relative; padding: 0; background: none; border: 0; }
.lang-list { display: none; }
.lang[data-open="true"] .lang-list {
  display: flex; position: absolute; right: 0; top: calc(100% + 8px); z-index: 200;
  flex-direction: column; gap: 2px; padding: 6px; min-width: 148px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow);
}
.lang-list a { width: 100%; justify-content: flex-start; height: 30px; }
.lang-sep { display: none; }
.lang[data-open="true"] .lang-toggle { color: var(--text); border-color: var(--accent); }

/* 超宽屏横排：列表变回一行，toggle 隐藏 */
@media (min-width: 1560px) {
  .lang { padding: 3px; background: var(--overlay); border: 1px solid var(--border); }
  .lang-toggle { display: none; }
  .lang-list {
    display: flex !important; position: static; flex-direction: row;
    padding: 0; min-width: 0; background: none; border: 0; box-shadow: none;
  }
  .lang-list a { width: auto; height: 26px; justify-content: center; }
  .lang-sep { display: block; }
}

/* ---------- 多语言排版微调 ----------
   德/俄语字符宽度普遍大于中文，同字号下更容易撑破卡片；
   日/韩语没有真正的 bold 字重，600/700 会假性加粗，故压到 500。*/
:lang(ja) .brand-name,
:lang(ja) .foot-name,
:lang(ja) h1, :lang(ja) h2 { font-weight: 500; letter-spacing: .01em; }
:lang(ko) .brand-name,
:lang(ko) .foot-name,
:lang(ko) h1, :lang(ko) h2 { font-weight: 500; letter-spacing: -.01em; }
:lang(de) .nav-links { gap: 26px; }
:lang(de) .nav-links a { font-size: 14px; }
:lang(ru) .nav-links { gap: 28px; }
:lang(ru) .nav-links a { font-size: 14px; }
/* ==========================================================================
   实拍图与实验案例图（2026-10-06）
   产品实物照放产品页，显微/图表放案例页。
   全部走 <picture>：WebP 优先 + JPEG 兜底，两者宽高一致不会跳版。
   ========================================================================== */

.shot {
  margin: 26px 0 30px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot figcaption {
  padding: 13px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.shot figcaption b {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}

/* 设备实拍：竖图靠左，右侧留白给文字（桌面双栏） */
.shot-dev {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.shot-dev .shot { margin: 0; }
/* ⚠️ 必须限高：设备照多是 3:4 竖图，宽度放开会让高度失控，
   侧栏里一张图就能撑出几千像素，把右侧文字顶到屏幕外。 */
.shot-dev .shot img {
  max-height: 560px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.shot-dev-info {
  min-width: 0;
  padding-top: 4px;
}
.shot-dev-info .kicker { margin-bottom: 12px; }
.shot-dev-info h3 { margin: 0 0 12px; font-size: 22px; }
.shot-dev-info p { color: var(--body-text); font-size: 15px; line-height: 1.9; }

/* 设备参数小标签 */
.shot-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.shot-tag {
  padding: 7px 13px;
  border-radius: 6px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 案例图组：两张并排 */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 30px;
}
.shot-grid .shot { margin: 0; }
/* ⚠️ 设备竖图（3:4/ 极窄）并排时必须限高，否则两张 1400px 高的图叠在一起极长 */
.shot-grid .shot img { max-height: 620px; width: auto; max-width: 100%; margin: 0 auto; }
/* 四联显微图 / 图表这类小图：容器限宽720px，图铺满即可，不限高 */
.shot-grid-1 { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.shot-grid-1 .shot img { max-height: none; width: 100%; max-width: 100%; }
.shot-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 设备类实拍单独标记：竖图，需限高（不靠容器类型猜，用 .shot-dev-photo 显式指定） */
.shot-grid-1.shot-dev-photo { max-width: 420px; }
.shot-grid-1.shot-dev-photo .shot img { max-height: 600px; width: auto; }

@media (max-width: 900px) {
  .shot-dev { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .shot-dev .shot { max-width: 420px; }
  .shot-grid { grid-template-columns: minmax(0, 1fr); }
  .shot-grid-3 { grid-template-columns: minmax(0, 1fr); }
}