/* ============================================================================
   inner.css —— 二级页面专属样式（v7：脱离 PPT 版式，接入首页「深空蓝」体系）
   ----------------------------------------------------------------------------
   加载关系：内页 body = `site-public inner`
      · home.base.css  → 参考站的 Tailwind-preflight + 令牌（自带完整 reset）
      · inner.css      → 本文件，内页全部组件样式
     ⚠ 内页**不再加载 style.css / theme-night.css**：
        preflight 会把 h1~h6 的 font-size 归零，两套 reset 同时上会互相打架。
        页头 / 页脚 / 导航因此在本文件里一并重写（类名保持与 main.js 一致）。
   ⚠ home.base.css 的 reset 清掉了标题字号、段落边距、链接下划线，
     本文件必须把用到的每一项都显式写回。
   ========================================================================== */

/* ---------------------------------------------------------------- 1 令牌 */
.inner{
  --night:#080d13;
  --night-2:#0e1620;
  --night-3:#16202b;
  --ink:#1b2026;
  --ink-2:#414b55;
  --muted:#6f747a;
  --blue:#55b8f3;
  --blue-2:#2ca9f4;
  --blue-deep:#0b6aa8;
  --paper:#f6f6f4;
  --paper-2:#eef1f3;
  --line:#e0e3e5;
  --line-2:#edf0f2;
  --gold:#c9a86a;
  --radius:18px;
  --wrap:min(1240px, 92vw);
  --f: Inter, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-disp: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  font-family: var(--f);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.inner img{ max-width:100%; display:block; }
/* ⚠ 图标 svg 由 site_lib.icon() 输出、不带 width/height；preflight 里
   svg{display:block} 会让它撑满容器（曾把一处图标渲染成整屏的巨型字母）。
   这里给一个 em 兜底，各组件再按需覆盖具体尺寸。 */
.inner svg{ width:1.1em; height:1.1em; flex:0 0 auto; vertical-align:middle; }
.inner a{ color:inherit; text-decoration:none; }
.inner ul,.inner ol{ list-style:none; }
.inner p{ margin:0; }
.inner h1,.inner h2,.inner h3,.inner h4{ margin:0; font-weight:300; letter-spacing:-.03em; }
.inner button{ font:inherit; color:inherit; background:none; cursor:pointer; }
.inner strong,.inner b{ font-weight:700; }

/* ---------------------------------------------------------------- 2 页头 */
/* ⚠ 2026-09-18 老板：「内页和首页的整个顶部菜单栏是不一样的，点到内页以后菜单栏的位置
   都会变化，感觉你是用了两套菜单栏」—— 他判断得没错，此前确实是**两套**：
   内页多包了一层 `<div class="container header-inner">`、导航靠 `margin-left:auto`
   右推、CTA 塞在 `<ul>` 末尾、LOGO 直接是 `<a class="brand">`。
   `probe_header.py`（1440 视口）实测差异：
       项        首页                        内页
       导航 x    239（居中，列宽 951）        509（靠右，margin-left 284）
       导航项    padding 25/0/23              padding 25/14/23（每项两侧多 28px）
       CTA       1232,15 120×42 蓝色胶囊      1207,14 104×44 **直角、16px**
   ⇒ 本轮把内页 header 的 **DOM 结构改成与首页逐字同构**（见 `site_lib.header()` 注释），
     于是这里**只剩三件事**要写：
       ① 内页特有的「吸顶」定位与底色（首页是 fixed 覆盖在整屏首屏上）；
       ② 下拉菜单（首页没有这东西）；
       ③ 窄屏抽屉里把下拉展开成静态列表。
     **高度 72px / 左右 71.2px 内边距 / `auto 1fr auto` 三列 / 导航居中 /
     导航项 25px·0·23px · 16px / 汉堡 44×44 / CTA 蓝色胶囊 —— 一律不再在此声明**，
     直接由 `home.base.css` 的 `.site-public .site-header` 生效。
     复核命令：`python probe_header.py 1440`（首页与内页逐项对比）。 */
.inner .site-header{
  position:sticky; top:0; z-index:80;
  background:#080d13f2;                 /* 与首页同值（原来是 .88，两页并排能看出色差） */
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid #ffffff1a;
}

/* 导航项间距：首页靠 `.site-header nav` 的 flex gap，内页中间多了一层
   `<ul class="nav-list">`，所以要把同一条间距补在 ul 上 ——
   否则旧值 4px 会让整条导航比首页窄一圈（旧版还额外给每项 +14px 横向内边距）。 */
.inner .nav-list{ display:flex; align-items:center; gap:clamp(18px,2.2vw,36px); }
.inner .nav-list > li{ position:relative; }
.inner .nav-list > li > a{
  display:flex; align-items:center; gap:5px;
  padding:25px 0 23px; border-radius:0;
  font-size:16px; color:#d7dce1; transition:color .2s;
}
.inner .nav-list > li > a:hover{ color:#fff; background:transparent; }
.inner .nav-list > li.is-active > a{ color:#fff; }
/* ---------------------------------------------------------------- 2b 导航提示条
   ⚠ home.base.css 里那条 `.site-public .site-header nav a:after{ bottom:16px; ... }`
   是按**顶部导航**写的，而 `nav a` 会把**二级菜单项也一起命中**（下拉项 hover 时
   会画一条穿过文字的蓝线）⇒ 内页仍需要一层更高优先级的接管。
   本轮的差异：内页导航项已与首页同高（`padding:25px 0 23px`、a 高 72px），
   所以 `bottom:16px` 不再需要修正，只要把**左右缩进由 14px 收成 0**
   （导航项已无横向内边距，提示条要与文字等宽，首页就是 0）。

   → 作用域多带一段 `.site-header`（3 类 vs home.base 的 2 类）以压过它；
     出条方式从「动 right」改成「scaleX」，免得和 home.base 的 `a:hover:after{right:0}` 打架
     （那条只在 hover 时生效）—— 所以 hover 态要顺手把 left/right/bottom/height 再声明一次。 */
.inner .site-header .nav-list > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:16px; height:2px;
  background:var(--blue); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .25s ease;
}
.inner .site-header .nav-list > li > a:hover::after,
.inner .site-header .nav-list > li > a:focus-visible::after,
.inner .site-header .nav-list > li.is-active > a::after{
  left:0; right:0; bottom:16px; height:2px; transform:scaleX(1);
}
/* 二级菜单项不该有这条下划线（home.base 的 `nav a:after` 也会命中它们，
   hover 时会画一条穿过文字的蓝线 —— 顺手一起治掉） */
.inner .site-header .nav-sub a::after{ display:none; }
.inner .caret{ width:11px; height:11px; opacity:.6; transition:transform .2s; }
.inner .has-sub:hover .caret{ transform:rotate(180deg); }
.inner .nav-sub{
  /* ⚠ `min-width` 290 → **368**（2026-09-18，加第 5 个解决方案之后）。
     这个面板是绝对定位、宽度 shrink-to-fit，而包含块（`li`）只有几十像素宽
     ⇒ 实际宽度**就等于这个 min-width**。290px 时副标普遍换行、每项撑成 3 行：
     6 项的「解决方案」下拉总高 **603px**、底边 663px —— 在 768 高的笔记本上
     （浏览器视口约 660px）会**顶出屏幕，最后两项点不到**。放宽到 368 后副标基本单行。
     ⚠ `max-height` 是**兜底**：以后继续加方案时只会面板内滚动，不会顶出视口。
     ⚠ 1080px 以下这条被覆盖成静态列表（抽屉模式），改这里不影响窄屏。 */
  position:absolute; top:calc(100% + 10px); left:0; min-width:368px;
  max-height:calc(100vh - 130px); overflow-y:auto; overscroll-behavior:contain;
  background:#101922; border:1px solid rgba(255,255,255,.09); border-radius:14px;
  padding:8px; box-shadow:0 24px 56px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.2s;
}
.inner .has-sub:hover .nav-sub,.inner .has-sub:focus-within .nav-sub{
  opacity:1; visibility:visible; transform:none;
}
/* ⚠ 选择器必须**比 `.site-public .site-header nav a` 更高**（那条特异性 0,2,2）。
   `home.base.css` 给顶部导航的**所有** a 统一设了 `padding:25px 0 23px; font-size:16px`
   —— 它连二级菜单项一起命中；而这里原来写的是 `.inner .nav-sub a`（特异性 0,2,1），**压不住它**
   ⇒ 每个下拉项实际被撑成 **98px 高**（实测：padding 真是 25/23、字号真是 16px，
   与 CSS 里写的 10/12、15px 完全不符）。5 个方案时下拉 506px 勉强能忍，
   加到第 6 项（会议室 / 报告厅）后变 **601px、底边 663px**，在 768 高的笔记本上会顶出屏幕。
   补一层 `.nav-list` 把特异性提到 0,3,1 即可 —— 与文件里既有的
   `.inner .site-header .nav-sub a::after{display:none}` 是同一个套路的修法。 */
.inner .nav-list .nav-sub a{
  display:block; padding:10px 12px; border-radius:9px; font-size:15px; color:#e6ecf2;
}
.inner .nav-sub a small{ display:block; margin-top:3px; font-size:15px; color:#7d8996; line-height:1.5; }
.inner .nav-sub a:hover{ background:rgba(85,184,243,.12); }
/* 页头 CTA（「获取方案」）：DOM 改成 header 的**第三列**之后，它不再是
   `<ul class="nav-list">` 里的 `<li> <a>`，因此**不会再被 `.inner .nav-list > li > a`
   那条导航项样式命中** —— 那正是过去它渲染成「16px / 直角 / 104×44」的原因
   （`.inner .nav-list > li > a` 特异性 0,2,1 压过 `.inner .nav-cta` 0,2,0）。
   现在按首页 `.header-cta` 的值原样重述一遍即可。 */
.inner .nav-cta{
  min-height:42px; color:var(--night); background:var(--blue);
  border-radius:999px; align-items:center; justify-content:center; gap:10px;
  padding:0 18px; font-size:15px; font-weight:700; display:inline-flex;
}
.inner .nav-cta:hover{ background:#85cdf8; }
/* 汉堡：与首页 `.menu-button` 同画法（44×44、无边框、两条 23×2 横杠）。
   ⚠ 类名保持 `nav-toggle` —— 内页 `assets/js/main.js` 靠它找按钮、给 `<nav>` 加 `is-open`。 */
.inner .nav-toggle{
  display:none; width:44px; height:44px; padding:0; background:none; border:0;
  flex-direction:column; align-items:center; justify-content:center;
}
.inner .nav-toggle i{ display:block; width:23px; height:2px; margin:6px auto; background:#fff; }

/* ---------------------------------------------------------------- 2c 旧版页头兼容层
   ⚠⚠ 为什么要有这一段（2026-09-18 实测踩到）：
   把页头 DOM 合并成一套之后重新发布，**CDN 边缘缓存里仍留着上一版的 products.html**，
   而它引用的 `inner.css`（同一个文件路径）**已经换成新版** ⇒ 旧 HTML + 新 CSS
   = 页头散架（LOGO 还带着「AI 健康声场」、导航换行、CTA 变成一块生蓝矩形）。
   实测：17 个页面里 16 个已刷新，唯独 `products.html` 这一个 key 一直命中旧缓存
   （条件请求拿到 304 —— 本地文件 mtime 没变，缓存判定"未修改"）。
   工具侧没有"清 CDN"这件事可做，所以这里补一层**只对旧结构生效**的兜底规则：
   形状一旦与新版对上，缓存过期后就自动成为死代码（新 HTML 里没有 `.header-inner` /
   `.brand-sub` / `.nav-list > li > .nav-cta` / `.nav-toggle span`）。

   核心一条是 `display:contents` —— 它让旧的那层包裹 `<div class="container header-inner">`
   **完全不产生盒子**，里面的 LOGO / 汉堡 / 导航直接成为 `.site-header` 的网格子项，
   等价于新版的扁平结构。其余几条只是把旧元素补成新样式。 */
.inner .site-header > .header-inner{
  display:contents;
}
.inner .site-header .brand-sub{ display:none; }          /* 旧版 LOGO 后面的「AI 健康声场」 */
.inner .site-header .brand-logo{ width:126px; height:auto; }
/* 旧版的「获取方案」还在 `<ul>` 末尾 ⇒ 会被 `.inner .nav-list > li > a` 的导航项样式盖掉，
   这里用 (0,3,1) 把它拉回胶囊（新版它已不在 `<ul>` 里，此条对新版无副作用）。 */
.inner .nav-list > li > .nav-cta{
  min-height:42px; border-radius:999px; padding:0 18px; font-size:15px; font-weight:700;
  display:inline-flex; align-items:center; gap:10px;
  color:var(--night); background:var(--blue);
}
/* 旧版汉堡是 3 个 `<span>`（新版是 2 个 `<i>`）。 */
.inner .nav-toggle span{ display:block; width:23px; height:2px; margin:6px auto; background:#fff; }

/* ---------------------------------------------------------------- 3 页脚 */
/* ⚠ home.base.css 把 .site-footer 设成了 3 列 grid（1240px + 两个装饰列），
   justify-content 默认 start → 里面 .container 的 margin:0 auto 失效、整块顶到 x=0，
   页脚 LOGO / 版权行会被视口左边裁掉。这里必须把 display 拉回 block，
   再把居中宽度放到 .container 上（.footer-grid / .footer-bottom 保持 100%）。 */
.inner .site-footer{
  display:block;
  background:var(--night); color:#98a4b0;
  padding:clamp(52px,5.5vw,78px) 0 30px; font-size:15px;
}
.inner .site-footer > .container{ display:block; width:var(--wrap); margin:0 auto; }
.inner .footer-grid{
  width:100%;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px;
}
.inner .footer-brand img{ height:22px; width:auto; margin-bottom:18px; }
.inner .footer-brand p{ margin:0 0 12px; line-height:1.85; color:#8b97a4; }
.inner .footer-slogan{ color:#cbd5df !important; font-size:15px; }
.inner .footer-grid h3{
  margin:0 0 16px; font-size:15px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#fff;
}
.inner .footer-links li{ margin-bottom:10px; }
.inner .footer-links a{ color:#8b97a4; transition:color .2s; }
.inner .footer-links a:hover{ color:var(--blue); }
.inner .footer-bottom{
  width:100%; margin:44px auto 0; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:15px; color:#6b7683;
}
/* 2026-11-05：加了公安备案号后右侧内容变长，span 内部不再断行，
   由 flex-wrap 决定两个 span 是并排还是各占一行（避免图标与文字被拆开）*/
.inner .footer-bottom span{ white-space:nowrap !important; }

.inner .to-top{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:44px; height:44px; border-radius:50%;
  background:rgba(16,25,34,.9); border:1px solid rgba(255,255,255,.14);
  color:#fff; display:none; align-items:center; justify-content:center;
  transition:.25s;
}
.inner .to-top.is-on{ display:flex; }
.inner .to-top:hover{ background:var(--blue); color:#04121e; border-color:transparent; }

/* ---------------------------------------------------------------- 4 页面首屏 */
.inner .i-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 92% at 78% 8%, rgba(44,169,244,.20) 0%, rgba(8,13,19,0) 58%),
    linear-gradient(168deg,#0b131c 0%,#080d13 62%,#0a1119 100%);
  color:#fff;
  padding:clamp(64px,7.6vw,104px) 0 clamp(58px,6.4vw,88px);
}
.inner .i-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(100% 70% at 70% 0%,#000 0%,transparent 80%);
  mask-image:radial-gradient(100% 70% at 70% 0%,#000 0%,transparent 80%);
}
.inner .i-hero > .i-wrap{ position:relative; z-index:2; }
.inner .i-hero-grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,64px); align-items:end; }
.inner .i-hero-grid--solo{ grid-template-columns:1fr; }
.inner .i-crumbs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:15px; color:#93a1ae; margin-bottom:22px;
}
.inner .i-crumbs a{ color:#a3b3c2; transition:color .2s; }
.inner .i-crumbs a:hover{ color:var(--blue); }
.inner .i-crumbs span::before{ content:"/"; margin-right:9px; color:#5b6a78; }
.inner .i-hero h1{
  font-size:clamp(34px,4.5vw,62px); font-weight:300;
  letter-spacing:-.045em; line-height:1.1;
}
/* 首屏副标：2026-09-17 老板「小字太小、看不清」⇒ 12.5/14.5→17 提到 16.5→19.5，颜色再提亮一档。
   ⚠ 首屏高度统一 422px（§25）是这个字号下的实测值，再动字号必须重跑 probe_hero.py。 */
.inner .i-hero-sub{
  margin-top:20px; max-width:640px;
  font-size:clamp(16.5px,1.3vw,19.5px); line-height:1.8; color:#aab7c4;
}
.inner .i-hero-sub b{ color:#eaf0f5; font-weight:600; }
.inner .i-hero-side{ padding-bottom:6px; }
.inner .i-hero-facts{ border-left:1px solid rgba(255,255,255,.12); padding-left:26px; }
.inner .i-hero-facts > div{ margin-bottom:16px; }
.inner .i-hero-facts dt{
  font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:#8b98a5;
  line-height:1.35;   /* 见 §25 注释：这是把 4 项指标页压回 422 的关键，别改回去 */
}
.inner .i-hero-facts dd{ margin:5px 0 0; font-size:19.5px; color:#fff; font-weight:400; }
.inner .i-hero-facts dd small{ font-size:15px; color:#9daab7; margin-left:6px; }

/* ---------------------------------------------------------------- 5 区块 / 容器 / 标题 */
.inner .i-sec{ padding:clamp(58px,6.6vw,104px) 0; position:relative; }
.inner .i-sec--paper{ background:var(--paper); }
.inner .i-sec--white{ background:#fff; }
.inner .i-sec--night{
  background:
    radial-gradient(96% 70% at 84% 0%, rgba(44,169,244,.13) 0%, rgba(8,13,19,0) 62%),
    var(--night);
  color:#c3ccd6;
}
.inner .i-sec--night .i-h2{ color:#fff; }
.inner .i-sec--night .i-lead{ color:#94a1ae; }
.inner .i-sec--night .i-eyebrow{ color:var(--blue); }
.inner .i-sec--tight{ padding-top:clamp(40px,4.4vw,64px); }
.inner .i-wrap{ width:var(--wrap); margin:0 auto; }
.inner .i-eyebrow{
  font-size:15px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue-deep); margin-bottom:16px;
}
.inner .i-h2{
  font-size:clamp(26px,3vw,42px); font-weight:300; letter-spacing:-.035em; line-height:1.16;
  color:var(--ink);
}
.inner .i-h3{ font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.inner .i-lead{
  margin-top:18px; max-width:760px;
  font-size:clamp(14.5px,1.08vw,16.5px); line-height:1.9; color:var(--muted);
}
.inner .i-sec-head{ margin-bottom:clamp(30px,3.6vw,52px); }
.inner .i-sec-head--center{ text-align:center; }
.inner .i-sec-head--center .i-lead{ margin-left:auto; margin-right:auto; }
.inner .i-sec-head--split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:end;
}
.inner .i-sec-head--split .i-lead{ margin-top:0; }
.inner .i-rule{ height:1px; background:var(--line); border:0; margin:0; }
.inner .i-sec--night .i-rule{ background:rgba(255,255,255,.1); }

/* ---------------------------------------------------------------- 6 产品卡 */
.inner .i-pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.inner .i-pgrid--2{ grid-template-columns:repeat(2,1fr); gap:26px; }
.inner .i-pgrid--4{ grid-template-columns:repeat(4,1fr); gap:18px; }
.inner .i-pcard{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
.inner .i-pcard:hover{
  transform:translateY(-5px); border-color:#c7d3dd;
  box-shadow:0 22px 48px rgba(8,30,52,.12);
}
.inner .i-pcard-media{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:#eef1f4;
}
.inner .i-pcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.inner .i-pcard:hover .i-pcard-media img{ transform:scale(1.035); }
.inner .i-pcard-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:5px 11px; border-radius:999px; font-size:15px; font-weight:600;
  background:var(--blue); color:#04121e;
}
.inner .i-pcard-model{
  position:absolute; right:14px; bottom:12px; z-index:2;
  font-size:15px; letter-spacing:.06em; color:#6c7885;
  background:rgba(255,255,255,.86); padding:3px 9px; border-radius:6px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.inner .i-pcard-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.inner .i-pcard-body h3{ font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.inner .i-pcard-body .i-pcard-en{
  font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:#9aa5b0; margin:0 0 9px;
}
.inner .i-pcard-desc{
  margin-top:13px; font-size:15px; line-height:1.8; color:var(--muted); flex:1;
}
.inner .i-pcard-specs{
  margin-top:16px; padding-top:15px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:7px 8px;
}
.inner .i-pcard-specs li{
  font-size:15px; color:#4d5860; background:var(--paper);
  padding:4px 10px; border-radius:6px;
}
.inner .i-pcard-link{
  margin-top:18px; display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:600; color:var(--blue-deep);
}
.inner .i-pcard-link::after{ content:"→"; transition:transform .25s; }
.inner .i-pcard:hover .i-pcard-link::after{ transform:translateX(4px); }

/* 深色区块里的产品卡 */
.inner .i-sec--night .i-pcard{ background:#0f1922; border-color:rgba(255,255,255,.09); }
.inner .i-sec--night .i-pcard:hover{ border-color:rgba(85,184,243,.5); box-shadow:0 22px 48px rgba(0,0,0,.45); }
.inner .i-sec--night .i-pcard-media{ background:#0a1119; }
.inner .i-sec--night .i-pcard-body h3{ color:#fff; }
.inner .i-sec--night .i-pcard-desc{ color:#8e9ba8; }
.inner .i-sec--night .i-pcard-specs{ border-top-color:rgba(255,255,255,.09); }
.inner .i-sec--night .i-pcard-specs li{ background:rgba(255,255,255,.06); color:#b6c2cd; }
.inner .i-sec--night .i-pcard-model{ background:rgba(10,17,25,.86); color:#95a2af; }
.inner .i-sec--night .i-pcard-link{ color:var(--blue); }

/* 产品主图（详情页左侧大图） */
.inner .i-prod-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px);
  align-items:center;
}
.inner .i-prod-shot{
  border-radius:var(--radius); overflow:hidden; background:#eef1f4;
  border:1px solid var(--line);
}
.inner .i-sec--night .i-prod-shot{ background:#0a1119; border-color:rgba(255,255,255,.09); }
.inner .i-prod-shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.inner .i-prod-meta{ display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.inner .i-prod-model{
  font-size:15px; font-weight:700; letter-spacing:.1em; color:var(--blue-deep);
  border:1px solid rgba(11,106,168,.28); border-radius:999px; padding:5px 12px;
}
.inner .i-sec--night .i-prod-model{ color:var(--blue); border-color:rgba(85,184,243,.4); }

/* ---------------------------------------------------------------- 7 规格 */
/* ⚠ 分隔线用「每格 border」而不是「gap + 容器底色」：
   7 条规格排 4 列时会空出 1 格，若用容器底色画线，那个空格会显示成一块浅色补丁；
   用 per-cell border 时空格就是容器底色，与卡片融为一体。 */
.inner .i-spec{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.inner .i-spec > div{
  background:#fff; padding:18px 20px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* 固定列数（i-spec--c4 / --c5）：断点必须同步降列，否则窄屏挤成细柱。 */
.inner .i-spec--c4{ grid-template-columns:repeat(4,1fr); }
.inner .i-spec--c5{ grid-template-columns:repeat(5,1fr); }
.inner .i-sec--night .i-spec{ background:#0f1922; border-color:rgba(255,255,255,.1); }
.inner .i-sec--night .i-spec > div{
  background:#0f1922;
  border-right-color:rgba(255,255,255,.08); border-bottom-color:rgba(255,255,255,.08);
}
.inner .i-spec dt{
  font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:#94a0ac; margin-bottom:8px;
}
.inner .i-spec dd{ margin:0; font-size:15px; line-height:1.7; color:var(--ink); font-weight:500; }
.inner .i-sec--night .i-spec dd{ color:#e4ebf1; }
.inner .i-spec-list{ display:grid; gap:0; }
.inner .i-spec-row{
  display:grid; grid-template-columns:190px 1fr; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line-2); align-items:baseline;
}
.inner .i-spec-row:last-child{ border-bottom:0; }
.inner .i-spec-row dt{ font-size:15px; color:#8a95a0; }
.inner .i-spec-row dd{ margin:0; font-size:15px; line-height:1.8; color:var(--ink-2); }
.inner .i-sec--night .i-spec-row{ border-bottom-color:rgba(255,255,255,.08); }
.inner .i-sec--night .i-spec-row dd{ color:#c3ccd6; }

/* ---------------------------------------------------------------- 8 对比表 */
.inner .i-cmp{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.inner .i-cmp-row{
  display:grid; grid-template-columns:172px 1.35fr 1.35fr;
  border-bottom:1px solid var(--line-2);
}
.inner .i-cmp-row:last-child{ border-bottom:0; }
.inner .i-cmp-row > div{ padding:17px 20px; font-size:15px; line-height:1.78; }
.inner .i-cmp-k{
  font-weight:600; color:var(--ink); background:var(--paper);
  display:flex; align-items:center; gap:9px;
}
.inner .i-cmp-k svg{ width:17px; height:17px; color:var(--blue-deep); flex:0 0 auto; }
.inner .i-cmp-a{ background:rgba(85,184,243,.07); color:var(--ink-2); border-left:1px solid var(--line-2); position:relative; }
.inner .i-cmp-a::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue);
}
.inner .i-cmp-b{ color:#7b858f; border-left:1px solid var(--line-2); }
.inner .i-cmp-a b{ color:var(--blue-deep); }
.inner .i-cmp-head > div{
  font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding-top:14px; padding-bottom:14px;
}
.inner .i-cmp-head .i-cmp-k{ background:var(--night-2); color:#fff; }
.inner .i-cmp-head .i-cmp-a{ background:var(--night-2); color:var(--blue); }
.inner .i-cmp-head .i-cmp-b{ background:var(--night-2); color:#8a95a0; }
.inner .i-sec--night .i-cmp{ background:#0f1922; border-color:rgba(255,255,255,.1); }
.inner .i-sec--night .i-cmp-row{ border-bottom-color:rgba(255,255,255,.07); }
.inner .i-sec--night .i-cmp-k{ background:#0b131c; color:#fff; }
.inner .i-sec--night .i-cmp-a{ background:rgba(85,184,243,.09); color:#c3ccd6; }
.inner .i-sec--night .i-cmp-b{ color:#8592a0; border-left-color:rgba(255,255,255,.07); }
.inner .i-sec--night .i-cmp-head .i-cmp-k{ background:rgba(255,255,255,.05); }

/* ---------------------------------------------------------------- 9 数据表 */
.inner .i-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.inner .i-table{ width:100%; border-collapse:collapse; font-size:15px; }
.inner .i-table th{
  background:var(--night-2); color:#fff; font-weight:600; font-size:15px;
  text-align:left; padding:15px 20px; white-space:nowrap;
}
.inner .i-table td{
  padding:13px 20px; border-top:1px solid var(--line-2); color:var(--ink-2); line-height:1.75;
}
.inner .i-table tbody tr:nth-child(even) td{ background:#fafbfc; }
.inner .i-table tbody tr:hover td{ background:rgba(85,184,243,.06); }
.inner .i-table td b{ color:var(--ink); }
/* 型号列（<b>JY-M01A</b>）必须整块不折：默认 table-layout 会在连字符处断开成
   "JY-" / "M01A"。给了 nowrap，浏览器就不得不为这一列留出足够宽度。 */
.inner .i-table td b{ white-space:nowrap; }
.inner .i-sec--night .i-table-wrap{ background:#0f1922; border-color:rgba(255,255,255,.1); }
.inner .i-sec--night .i-table th{ background:rgba(255,255,255,.06); }
.inner .i-sec--night .i-table td{ color:#b6c2cd; border-top-color:rgba(255,255,255,.07); }
.inner .i-sec--night .i-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.025); }
.inner .i-sec--night .i-table td b{ color:#fff; }
/* 关键行（剂量表的 75 dB(A) / 80 dB(A) 一行）。
   早期用的是暖金 rgba(201,168,106,.14)，但全站唯一的强调色是蓝，
   孤立的一抹金在纯蓝语系里显得像"没调好的残留"→ 改蓝底 + 左侧蓝条。 */
.inner .i-table tr.is-key td{ background:rgba(85,184,243,.11); }
.inner .i-table tr.is-key td:first-child{
  font-weight:700; color:var(--blue-deep); box-shadow:inset 3px 0 0 var(--blue);
}
.inner .i-sec--night .i-table tr.is-key td{ background:rgba(85,184,243,.16); }
.inner .i-sec--night .i-table tr.is-key td:first-child{ color:var(--blue); }
.inner .i-table-note{ margin-top:14px; font-size:15px; line-height:1.8; color:#8b96a1; }

/* ---------------------------------------------------------------- 10 数据带 */
.inner .i-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
}
.inner .i-stats--light{ border-color:var(--line); }
.inner .i-stats > div{
  padding:30px 24px; border-right:1px solid rgba(255,255,255,.12);
}
.inner .i-stats > div:last-child{ border-right:0; }
.inner .i-stats--light > div{ border-right-color:var(--line); }
.inner .i-stat-num{
  font-size:clamp(30px,3.4vw,44px); font-weight:300; letter-spacing:-.04em; color:#fff; line-height:1;
}
.inner .i-stats--light .i-stat-num{ color:var(--ink); }
.inner .i-stat-num small{ font-size:.5em; font-weight:400; margin-left:3px; color:var(--blue); }
.inner .i-stat-lb{ margin-top:12px; font-size:15px; color:#c3ccd6; }
.inner .i-stats--light .i-stat-lb{ color:var(--ink-2); }
.inner .i-stat-sub{ margin-top:6px; font-size:15px; color:#7f8b98; line-height:1.6; }
.inner .i-stats--light .i-stat-sub{ color:#939ea9; }

/* ---------------------------------------------------------------- 11 步骤流 / 时间线 */
.inner .i-steps{ display:grid; gap:0; }
.inner .i-steps--4{ grid-template-columns:repeat(4,1fr); }
.inner .i-steps--3{ grid-template-columns:repeat(3,1fr); }
.inner .i-step{ position:relative; padding:26px 22px 26px 0; border-top:2px solid var(--line); }
.inner .i-step::before{
  content:""; position:absolute; top:-2px; left:0; width:44px; height:2px; background:var(--blue);
}
.inner .i-sec--night .i-step{ border-top-color:rgba(255,255,255,.14); }
.inner .i-step-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.inner .i-step-h svg{ width:20px; height:20px; color:var(--blue-deep); }
.inner .i-sec--night .i-step-h svg{ color:var(--blue); }
.inner .i-step-h h3{ font-size:16.5px; font-weight:600; color:var(--ink); }
.inner .i-sec--night .i-step-h h3{ color:#fff; }
.inner .i-step p{ font-size:15px; line-height:1.85; color:var(--muted); }
.inner .i-sec--night .i-step p{ color:#8e9ba8; }
.inner .i-timeline{ position:relative; padding-left:26px; }
.inner .i-timeline::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line);
}
.inner .i-sec--night .i-timeline::before{ background:rgba(255,255,255,.14); }
.inner .i-tl-item{ position:relative; padding-bottom:26px; }
.inner .i-tl-item:last-child{ padding-bottom:0; }
.inner .i-tl-item::before{
  content:""; position:absolute; left:-26px; top:7px; width:11px; height:11px;
  border-radius:50%; background:#fff; border:2px solid var(--blue-deep);
}
.inner .i-sec--night .i-tl-item::before{ background:var(--night); border-color:var(--blue); }
.inner .i-tl-year{ font-size:15px; font-weight:700; letter-spacing:.08em; color:var(--blue-deep); }
.inner .i-sec--night .i-tl-year{ color:var(--blue); }
.inner .i-tl-item h3{ margin-top:6px; font-size:16px; font-weight:600; color:var(--ink); }
.inner .i-sec--night .i-tl-item h3{ color:#fff; }
.inner .i-tl-item p{ margin-top:7px; font-size:15px; line-height:1.82; color:var(--muted); }
.inner .i-sec--night .i-tl-item p{ color:#8e9ba8; }

/* ---------------------------------------------------------------- 12 提示 / CTA / 下载 */
.inner .i-notice{
  display:flex; gap:14px; padding:18px 22px; border-radius:14px;
  background:rgba(85,184,243,.09); border:1px solid rgba(85,184,243,.28);
  font-size:15px; line-height:1.85; color:var(--ink-2);
}
.inner .i-notice svg{ width:20px; height:20px; color:var(--blue-deep); flex:0 0 auto; margin-top:2px; }
.inner .i-notice--warn{ background:rgba(234,88,12,.08); border-color:rgba(234,88,12,.3); }
.inner .i-notice--warn svg{ color:#c2410c; }
.inner .i-sec--night .i-notice{ background:rgba(85,184,243,.1); color:#c3ccd6; }
.inner .i-notice b{ color:var(--ink); }
.inner .i-sec--night .i-notice b{ color:#fff; }

.inner .i-cta{
  position:relative; overflow:hidden; border-radius:22px;
  background:
    radial-gradient(90% 130% at 88% 12%, rgba(44,169,244,.30) 0%, rgba(8,13,19,0) 60%),
    linear-gradient(140deg,#0d1721 0%,#080d13 100%);
  color:#fff; padding:clamp(34px,4.2vw,56px);
  display:grid; grid-template-columns:1.25fr .75fr; gap:32px; align-items:center;
}
.inner .i-cta h2{ font-size:clamp(23px,2.5vw,34px); font-weight:300; letter-spacing:-.035em; color:#fff; }
.inner .i-cta p{ margin-top:14px; font-size:15px; line-height:1.85; color:#98a5b2; max-width:620px; }
.inner .i-cta-btns{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.inner .i-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-size:15px; font-weight:600;
  transition:.24s; border:1px solid transparent;
}
.inner .i-btn--primary{ background:var(--blue); color:#04121e; }
.inner .i-btn--primary:hover{ background:#7ac9f7; transform:translateY(-2px); }
.inner .i-btn--ghost{ border-color:rgba(255,255,255,.24); color:#fff; }
.inner .i-btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); }
.inner .i-btn--dark{ background:var(--ink); color:#fff; }
.inner .i-btn--dark:hover{ background:#000; }
.inner .i-btn--line{ border-color:var(--line); color:var(--ink); background:#fff; }
.inner .i-btn--line:hover{ border-color:var(--blue-deep); color:var(--blue-deep); }
.inner .i-btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

.inner .i-dl{ display:grid; gap:12px; }
.inner .i-dl-item{
  display:grid; grid-template-columns:52px 1fr auto; gap:20px; align-items:center;
  padding:22px 24px; border:1px solid var(--line); border-radius:14px; background:#fff;
  transition:.24s;
}
.inner .i-dl-item:hover{ border-color:#c7d3dd; box-shadow:0 14px 34px rgba(8,30,52,.09); }
.inner .i-dl-ico{
  width:52px; height:52px; border-radius:13px; background:var(--paper);
  display:grid; place-items:center; color:var(--blue-deep);
}
.inner .i-dl-ico svg{ width:23px; height:23px; }
.inner .i-dl-item h3{ font-size:16.5px; font-weight:600; color:var(--ink); }
.inner .i-dl-item p{ margin-top:7px; font-size:15px; line-height:1.8; color:var(--muted); }
.inner .i-dl-meta{ margin-top:8px; font-size:15px; color:#9aa5b0; }


/* ---------------------------------------------------------------- 13 方案卡 */
.inner .i-solgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.inner .i-sol{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}
.inner .i-sol:hover{ transform:translateY(-5px); box-shadow:0 22px 48px rgba(8,30,52,.13); }
.inner .i-sol-media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#eef1f4; }
.inner .i-sol-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.inner .i-sol:hover .i-sol-media img{ transform:scale(1.04); }
.inner .i-sol-area{
  position:absolute; top:14px; left:14px; padding:5px 12px; border-radius:999px;
  background:rgba(8,13,19,.72); color:#fff; font-size:15px; font-weight:600;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.inner .i-sol-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.inner .i-sol-body h3{ font-size:20px; font-weight:600; color:var(--ink); }
/* ⚠ 只有描述段吃弹性高度（flex:1）。早期写成 `.i-sol-body > p{flex:1}`，
   会把下面的 .i-sol-config 一起命中 → 富余高度被两段平分 →
   同一行两张卡的「方案详情」链接高度参差不齐。配置行必须 flex:0 0 auto。 */
.inner .i-sol-desc{ margin-top:12px; font-size:15px; line-height:1.82; color:var(--muted); flex:1; }
.inner .i-sol-config{
  flex:0 0 auto;
  margin-top:16px; padding-top:15px; border-top:1px solid var(--line-2);
  font-size:15px; line-height:1.85; color:#4d5860;
}
.inner .i-sol-config b{ color:var(--blue-deep); font-weight:600; }
.inner .i-sol .i-pcard-link{ margin-top:16px; }

/* ---------------------------------------------------------------- 14 图带 / 资质 */
.inner .i-media{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:#0f1922; border:1px solid var(--line);
}
.inner .i-media img{ width:100%; aspect-ratio:21/9; object-fit:cover; }
/* ⚠ 渐变必须"提前"变浓：图注是白字，而配置示意图（cfg-*.jpg）的中段是浅灰影棚底。
   早期写成 padding:26px + linear-gradient(transparent, .92)，标题正好落在**全透明**的
   顶部 26px 里 → 白字压浅灰 = 看不见。现在用 88px 顶部内边距把文字推进浓区，
   再补一层 text-shadow 兜底。 */
.inner .i-media-cap{
  position:absolute; left:0; right:0; bottom:0; padding:72px 28px 24px;
  background:linear-gradient(180deg,
    rgba(6,11,17,0) 0%, rgba(6,11,17,.62) 38%, rgba(6,11,17,.9) 66%, rgba(6,11,17,.97) 100%);
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.inner .i-media-cap h3{ font-size:20px; font-weight:600; }
.inner .i-media-cap p{ margin-top:8px; font-size:15px; color:#b6c2cd; line-height:1.75; }
.inner .i-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.inner .i-chips li{
  font-size:15px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.1); color:#dbe4ec; border:1px solid rgba(255,255,255,.14);
}
.inner .i-chips--light li{ background:var(--paper); color:var(--ink-2); border-color:var(--line); }
.inner .i-proof{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,52px); align-items:center;
}
.inner .i-cert-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.inner .i-cert-strip img{
  width:100%; border-radius:10px; border:1px solid var(--line); background:#fff;
}
.inner .i-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.inner .i-tags li{
  font-size:15px; padding:7px 14px; border-radius:8px; background:#fff;
  border:1px solid var(--line); color:var(--ink-2);
}
.inner .i-sec--night .i-tags li{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#c3ccd6; }

/* 锚点偏移：内页有 sticky 页头，跳转不要贴顶 */
.inner [id]{ scroll-margin-top:88px; }

/* ---------------------------------------------------------------- 15 响应式 */
@media (max-width:1080px){
  .inner .i-pgrid{ grid-template-columns:repeat(2,1fr); }
  .inner .i-pgrid--4{ grid-template-columns:repeat(2,1fr); }
  .inner .i-spec--c4,.inner .i-spec--c5{ grid-template-columns:repeat(2,1fr); }
  .inner .i-stats{ grid-template-columns:repeat(2,1fr); }
  .inner .i-stats > div:nth-child(2){ border-right:0; }
  .inner .i-stats > div:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.12); }
  .inner .i-stats--light > div:nth-child(-n+2){ border-bottom-color:var(--line); }
  .inner .i-steps--4{ grid-template-columns:repeat(2,1fr); }
  .inner .i-pgrid--4{ grid-template-columns:repeat(2,1fr); }
  .inner .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .inner .i-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .inner .i-hero-facts{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.12); padding-top:22px; }
  .inner .i-hero-facts > div{ display:inline-block; margin-right:34px; }
  .inner .i-spec-row{ grid-template-columns:150px 1fr; }
  .inner .i-cta{ grid-template-columns:1fr; }
  .inner .i-cta-btns{ justify-content:flex-start; }
  .inner .i-prod-hero,.inner .i-proof{ grid-template-columns:1fr; }
  .inner .i-sec-head--split{ grid-template-columns:1fr; gap:16px; align-items:start; }
}
/* 与首页同阈值收间距（home.base / home.css 在 1020px 把 `nav` 的 gap 收到 16px，
   内页的 gap 挂在 `<ul class="nav-list">` 上，要单独跟一条）。 */
@media (max-width:1020px){
  .inner .nav-list{ gap:16px; }
}
/* ⚠ 折叠阈值由 860 → **900**，与首页一致（首页在 `home.css` 的 `@media (max-width:900px)` 切抽屉）。
   阈值不同的那 860–900px 区间里，首页已是汉堡菜单、内页还是整条导航，并排看就是「两套菜单栏」。

   ⚠⚠ 抽屉的**整套外观必须在这里自带**，不能指望 `home.css`：
      · 内页只加载 `home.base.css` + `inner.css`，**不加载 `home.css`** ——
        而 `home.css` 那条 900px 的抽屉规则在内页根本不存在；
      · `home.base.css` 只在 **760px** 才切抽屉；
      · 而且基类 `.site-public .site-header nav{ display:flex }`（特异性 **0,2,1**）
        比 `.inner .site-nav`（0,2,0）更高 —— 光写 `.inner .site-nav{display:none}` 会被它压掉，
        导航在窄屏会**一直摊开着**（本次实测 880px 就是这个症状）。
      ⇒ 选择器统一升到 `.inner .site-header .site-nav`（0,3,0）才压得住；
        数值与 `home.css` 的 900px 那套逐条对齐（64px 高、`1fr auto`、top:70px、左 12px 右 12px）。 */
@media (max-width:900px){
  .inner .site-header{ height:64px; grid-template-columns:1fr auto; gap:16px; }
  .inner .nav-toggle{ display:flex; }
  .inner .nav-cta{ display:none; }        /* 与首页 `.header-cta` 一致：窄屏只留汉堡 */
  .inner .site-header .site-nav{
    position:absolute; top:70px; left:12px; right:12px; z-index:90;
    display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px;
    color:var(--white); background:#0d141cfa;
    border:1px solid #ffffff1f; border-radius:14px; box-shadow:0 20px 50px #00000059;
    max-height:calc(100vh - 92px); overflow-y:auto; overscroll-behavior:contain;
  }
  /* main.js 给 `<nav>` 加的是 `is-open`（首页是 `open`），写在后面 ⇒ 这条负责「打开」。 */
  .inner .site-header .site-nav.is-open{ display:flex; }
  .inner .nav-list{ flex-direction:column; align-items:stretch; gap:2px; }
  /* ⚠ 必须带 `.site-header`（0,3,1）：基类 `.site-public .site-header nav a`
     （0,2,2）给导航项写死了 `padding:25px 0 23px; font-size:16px`，压不过它就没法收成紧凑行。 */
  .inner .site-header .nav-list > li > a{ min-height:46px; padding:14px; font-size:15px; }
  .inner .site-header .nav-list > li > a::after{ display:none; }
  .inner .nav-sub{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; padding:0 0 8px 12px; min-width:0;
    max-height:none; overflow:visible;   /* 覆盖桌面版给 .nav-sub 加的 max-height+overflow：窄屏它是抽屉里的静态列表，不能再限高 */
  }
  .inner .i-solgrid{ grid-template-columns:1fr; }
  .inner .i-cmp-row{ grid-template-columns:1fr; }
  .inner .i-cmp-row > div{ border-left:0 !important; }
  .inner .i-cmp-k{ background:var(--night-3) !important; color:#fff !important; }
  .inner .i-cmp-head .i-cmp-a,.inner .i-cmp-head .i-cmp-b{ background:var(--night-2) !important; }
  .inner .i-dl-item{ grid-template-columns:44px 1fr; gap:14px; }
  .inner .i-dl-item > .i-dl-action{ grid-column:2; }
}
@media (max-width:640px){
  .inner .i-pgrid,.inner .i-pgrid--2,.inner .i-pgrid--4,.inner .i-solgrid{ grid-template-columns:1fr; }
  .inner .i-spec--c4,.inner .i-spec--c5{ grid-template-columns:1fr; }
  .inner .i-steps--4,.inner .i-steps--3{ grid-template-columns:1fr; }
  .inner .i-step{ padding-right:0; }
  .inner .i-stats{ grid-template-columns:1fr; }
  .inner .i-stats > div{ border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .inner .i-stats--light > div{ border-bottom-color:var(--line); }
  .inner .i-stats > div:last-child{ border-bottom:0; }
  .inner .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .inner .i-cert-strip{ grid-template-columns:repeat(2,1fr); }
  .inner .i-spec-row{ grid-template-columns:1fr; gap:4px; }
  .inner .i-hero{ padding-top:44px; }
  .inner .i-hero h1{ font-size:32px; }
  .inner .i-hero-facts > div{ display:block; margin-right:0; }
  .inner .i-btn{ padding:12px 20px; font-size:15px; }
  .inner .i-dl-item{ padding:18px; }
  .inner .i-cta{ padding:26px 22px; border-radius:18px; }
  .inner .i-media img{ aspect-ratio:4/3; }
  /* ⚠ 不要写成 padding:18px —— 那等于把图注重新推回渐变的全透明区，白字压浅图看不见。
     顶部内边距必须保留，只收窄左右和底部。 */
  .inner .i-media-cap{ padding:52px 18px 18px; }
  .inner .i-table th,.inner .i-table td{ padding:11px 14px; font-size:15px; }
  /* 表格窄屏兜底：不给 min-width 的话浏览器会把列压扁，出现
     "远场矩形麦" → "远场/矩形/麦"、"JY-M01A" → "JY-/M01A" 这种折字。
     维持最小可读宽度，让 .i-table-wrap 横向滚动。列数越多给得越宽。 */
  .inner .i-table-wrap{ -webkit-overflow-scrolling:touch; }
  /* CJK 默认可以在任意字之间断行，于是 auto 布局会把"形态"这类短列压到只剩
     一个字宽（"矩形吊" / "顶"）。keep-all 让词内不断行，列宽才回到可读水平。
     只对 ≥4 列的表格生效：2~3 列表本来就不挤，且它们的单元格里有长句无标点的
     情况（如"噪声暴露致听力损失的关键阈值"），keep-all 反而会逼出横向滚动。 */
  .inner .i-table--c4 td,.inner .i-table--c5 td,.inner .i-table--c6 td{ word-break:keep-all; }
  .inner .i-table--c4{ min-width:480px; }
  .inner .i-table--c5{ min-width:620px; }
  .inner .i-table--c6{ min-width:720px; }
}

/* ---- 补充：v7 组件用到的零散样式（与上面各节配套）---- */
.inner .i-prod-form{ font-size:15px; color:#8a95a0; }
.inner .i-sec--night .i-prod-form{ color:#8b98a5; }
.inner .i-step-tag{
  font-size:15px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#9aa5b0; margin-bottom:10px;
}
.inner .i-sec--night .i-step-tag{ color:#6f7d8b; }
.inner .i-media--band{ border-radius:0; border:0; border-top:1px solid rgba(255,255,255,.06); }
.inner .i-media--band img{ aspect-ratio:21/9; }
.inner .i-media--tall img{ aspect-ratio:16/9; }
.inner .i-media--band .i-media-cap{ padding:clamp(40px,5vw,76px) 0 clamp(34px,4vw,60px); }
.inner .i-media--band .i-media-cap h2{
  font-size:clamp(25px,3vw,40px); font-weight:300; letter-spacing:-.035em; line-height:1.18;
}
.inner .i-media--band .i-media-cap p{ margin-top:16px; max-width:720px; font-size:15px; line-height:1.85; color:#b6c2cd; }
.inner .i-media--band .i-eyebrow{ color:var(--blue); }
.inner .i-sec--night .i-spec-list .i-spec-row dt{ color:#7f8b98; }

/* ---------------------------------------------------------------- 16 深色区块兜底
   ⚠ 这一组不是"锦上添花"，是**必修**：内页的标题层级写在组件样式里（h2/h3 默认 --ink
     近黑），而 section() 可以把任意组件放进 tone='night' 的深色底。
     只要漏掉一条，就会出现"深灰字压在深蓝底上"——实测 product-host 的「核心规格」
     一度完全看不见。凡新增组件，务必回这里补一条 night 覆盖。 */
.inner .i-sec--night h3,
.inner .i-sec--night .i-h3{ color:#fff; }
.inner .i-sec--night h4{ color:#eef3f7; }
.inner .i-sec--night .i-table-note{ color:#8e9ba8; }
.inner .i-sec--night .i-media-cap h3{ color:#fff; }
.inner .i-sec--night .i-media-cap p{ color:#94a1ae; }
.inner .i-sec--night .i-chips li{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#c3ccd6; }
.inner .i-sec--night .i-dl-item{ background:#0f1922; border-color:rgba(255,255,255,.09); }
.inner .i-sec--night .i-dl-item h3{ color:#fff; }
.inner .i-sec--night .i-dl-item p{ color:#8e9ba8; }
/* 注意 .i-dl-meta 默认就是 #9aa5b0（浅色），放到深色底已经够亮——
   这里**不要**再压暗，否则是负优化。 */
.inner .i-sec--night .i-sol{ background:#0f1922; border-color:rgba(255,255,255,.09); }
.inner .i-sec--night .i-sol h3{ color:#fff; }
.inner .i-sec--night .i-sol p{ color:#8e9ba8; }
.inner .i-sec--night .i-sol-config{ color:#b6c2cd; }
.inner .i-sec--night .i-btn--ghost{ color:#e6ecf2; border-color:rgba(255,255,255,.28); }
.inner .i-sec--night .i-btn--ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.5); }

/* ================================================================ 17 产品卡变体 · 大图弹窗 · 图注在下方
   老板 2026-09-16 那批反馈新增的三块，改动理由写在各自注释里。 */

/* ---- 17.1 卡片瘦身 ----
   卡里已去掉「参数标签」与「查看详情」链接（见 site_lib.product_card）：
   页面下方本来就有选型对照表，卡里再列一遍是重复；「查看详情」指向的就是本页，点了等于没跳。
   剩下的 h3 + 副标 + 描述已经够用，卡身自然变短。 */
.inner .i-pcard-body{ padding:20px 22px 22px; }
.inner .i-pcard-desc{ margin-top:12px; }

/* 「补充形态」的弱化档：两款无线麦。媒体区压成 16/10、字号与留白各收一档，
   在同排卡片里明显比主力单品轻，又不至于小到像附件。 */
/* 补充形态的网格：整体收窄并居中。
   ⚠ 单靠卡片变矮还不够 —— 2 列铺满整宽时，一张无线麦卡片仍比一张远场麦主卡大。
   把网格本身收窄（每列 ≈ 400px）之后，"补充"的视觉分量才对得上文案。 */
.inner .i-pgrid--minor{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; }
.inner .i-pcard--minor .i-pcard-media{ aspect-ratio:16/10; }
.inner .i-pcard--minor .i-pcard-body{ padding:17px 19px 19px; }
.inner .i-pcard--minor .i-pcard-body h3{ font-size:17px; }
.inner .i-pcard--minor .i-pcard-en{ margin-bottom:6px; font-size:15px; }
/* 无线麦卡片上排的是 SKU 参数串（「A · B · C · D」）。默认 CJK 会在任意字之间断行，
   实测把「铝合金防尘充电底座」拆成「…充」/「电底座」。keep-all 让断行只落在分隔符处，
   再留 break-word 兜底防止个别长词溢出。 */
.inner .i-pcard--minor .i-pcard-desc{
  margin-top:9px; font-size:15px; line-height:1.75;
  word-break:keep-all; overflow-wrap:break-word;
}

/* ---- 17.1b 三大类入口卡：整张产品图可点 ----
   客户反馈「只能点底部那行蓝字才跳转，点图片没反应」。在媒体区铺一层锚点即可；
   ⚠ 角标（款式数）已经抬到 z-index:4，这里用 3 压不上去。 */
.inner .i-card-cover{ position:absolute; inset:0; z-index:3; display:block; }
.inner .i-card-cover:focus-visible{ outline:2px solid var(--blue); outline-offset:-3px; }

/* ---- 17.2 产品图可点 → 弹大图 ----
   触点铺满整个图片区；圆环放大镜提示只在 hover / 键盘聚焦时出现，
   避免静态观感上多出一个构件。
   ⚠ 角标（型号 / 推荐）要抬到触点之上，否则会被整块按钮盖住。 */
.inner .i-pcard-badge,
.inner .i-pcard-model{ z-index:4; }
.inner .i-pcard-zoom{
  position:absolute; inset:0; z-index:3; width:100%; height:100%;
  margin:0; padding:0; border:0; background:transparent; cursor:zoom-in;
}
.inner .i-pcard-zoom:focus-visible{ outline:2px solid var(--blue); outline-offset:-3px; }
.inner .i-pcard-zoom::after{
  content:""; position:absolute; top:14px; right:14px; width:34px; height:34px;
  border-radius:50%; background:rgba(8,13,19,.68);
  border:1px solid rgba(255,255,255,.34);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.2'/><path d='M15.3 15.3 20.5 20.5'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:17px 17px;
  opacity:0; transform:scale(.86); transition:opacity .24s, transform .24s;
}
.inner .i-pcard-zoom:hover::after,
.inner .i-pcard-zoom:focus-visible::after{ opacity:1; transform:none; }

/* ---- 17.3 大图弹窗 ----
   深色壳子 + 图注条（产品名 / 外观尺寸）。尺寸用主题亮蓝强调，一眼能读到。 */
.inner .i-lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,48px);
}
.inner .i-lightbox[hidden]{ display:none; }
.inner .i-lightbox-mask{
  position:absolute; inset:0; background:rgba(5,9,14,.86);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
.inner .i-lightbox-box{
  position:relative; margin:0; width:min(940px,100%); max-height:100%;
  display:flex; flex-direction:column;
  background:#0f1922; border:1px solid rgba(255,255,255,.13); border-radius:16px;
  overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.62);
}
.inner .i-lightbox-box:focus{ outline:none; }
.inner .i-lightbox-img{
  display:block; width:100%; height:auto;
  max-height:min(68vh,600px); object-fit:contain; background:#0b1219;
}
.inner .i-lightbox-cap{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:9px 24px; padding:17px 22px; border-top:1px solid rgba(255,255,255,.1);
}
.inner .i-lightbox-cap h3{ font-size:18px; color:#fff; margin:0; }
.inner .i-lightbox-dim{ display:flex; align-items:baseline; gap:10px; margin:0; }
.inner .i-lightbox-dim span{ font-size:15px; letter-spacing:.12em; color:#7d8996; }
.inner .i-lightbox-dim b{ font-size:16px; font-weight:600; color:var(--blue); }
.inner .i-lightbox-x{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.24); border-radius:50%;
  background:rgba(8,13,19,.66); color:#fff; cursor:pointer; transition:.2s;
}
.inner .i-lightbox-x:hover{ background:var(--blue); border-color:transparent; color:#04121e; }
body.i-lb-open{ overflow:hidden; }

/* ---- 17.4 全家福：图注放到图下方 ----
   ⚠ 产品中心那张「一条完整的声音路径」的全家福，产品正好落在画面下半部。
   原来用的是叠在图上、底部压暗的 .i-media-cap —— 那层压暗会把产品的下半截吃掉
   （客户反馈"看不清楚全貌"）。这里改成**图注另起一行放在图下方**，图保持原样。 */
.inner .i-family{ margin:0; }
.inner .i-family img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius); border:1px solid var(--line); background:#fff;
}
.inner .i-family-note{ margin-top:20px; }
.inner .i-family-note h3{ font-size:17px; color:var(--ink); margin-bottom:8px; }
.inner .i-family-note p{ font-size:15px; line-height:1.85; color:var(--muted); margin:0; }
.inner .i-sec--night .i-family img{ border-color:rgba(255,255,255,.1); }
.inner .i-sec--night .i-family-note h3{ color:#fff; }
.inner .i-sec--night .i-family-note p{ color:#8e9ba8; }

/* ---- 17.5 页脚联系方式（已废）----
   老板 2026-09-17：页脚品牌列的地址 / 电话 / 邮箱删除，这些信息只留在「关于我们」。
   规则一并移除；曾补过一句「详见关于我们」的说明，同日老板又要求删掉，`.footer-contact-note`
   规则也一并清掉（页脚品牌列现在只剩公司名 + 一句业务描述 + slogan）。 */

@media (max-width:640px){
  /* ⚠ 这条必须放在**文件最末尾**，不能只写在上面的 640 断点里：
     §17 的 `.inner .i-pgrid--minor{ grid-template-columns:repeat(2,1fr) }` 是普通规则，
     同优先级、位置更靠后 → 会把断点里的收列规则整条盖掉，手机端就还是两列挤在一起。
     （和 skill 里记的「媒体查询被后面追加的同名规则盖掉」是同一个坑，追加样式时必查。） */
  .inner .i-pgrid--minor{ grid-template-columns:1fr; max-width:none; }
}

/* ================================================================ 18 系统运行架构
   客户 2026-09-16 给了一张位图架构图（1280×720、自带标题）问「怎么处理」。
   结论：**不贴位图，重做成原生组件** —— 理由与取舍写在 site_lib.arch_flow() 的 docstring。 */

.inner .i-arch{ margin-top:clamp(28px,3.4vw,46px); }

/* ---- 18.1 主链路：拾音 → 处理 → 扩声（三段 + 两个箭头）
   ⚠ 箭头那两列必须是 auto（内容宽度），不能给 1fr —— 否则窄屏时箭头会被拉成最宽的一列。 */
.inner .i-arch-row{
  display:grid; align-items:center; gap:clamp(12px,1.7vw,28px);
  grid-template-columns:minmax(0,1.5fr) auto minmax(0,1fr) auto minmax(0,1.1fr);
  padding:clamp(18px,2.2vw,30px); border:1px solid var(--line);
  border-radius:var(--radius); background:#fff;
}
.inner .i-arch-col{ min-width:0; }
.inner .i-arch-tag{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; margin:0 0 14px;
  font-size:15px; font-weight:600; color:var(--ink);
}
.inner .i-arch-tag em{ font-style:normal; font-weight:400; font-size:15px; color:var(--muted); }
.inner .i-arch-grid{
  display:grid; gap:10px; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.inner .i-arch-grid--1{ grid-template-columns:minmax(0,1fr); }
.inner .i-arch-node{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
/* 容器 4/3 = 产品图本身的比例（1200×900）⇒ contain 正好铺满，四边无缝、不裁切。
   底色只是兜底（万一以后换成非 4:3 的素材）。 */
.inner .i-arch-pic{
  display:block; width:100%; aspect-ratio:4/3; overflow:hidden;
  border-radius:9px; background:#e9e9e7;
}
.inner .i-arch-pic img{ display:block; width:100%; height:100%; object-fit:contain; }
.inner .i-arch-node b{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.4; }
.inner .i-arch-node em{ font-style:normal; font-size:15px; color:var(--muted); line-height:1.4; }
.inner .i-arch-node--big b{ font-size:15px; }

/* ---- 18.2 箭头：一条线 + 一个实心三角 + 下方标签（用 currentColor，一处改色全局生效） */
.inner .i-arch-link{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:9px;
  color:var(--blue-deep);
}
.inner .i-arch-link i{ position:relative; display:block; width:100%; min-width:56px; height:2px; background:currentColor; }
.inner .i-arch-link i::after{
  content:""; position:absolute; right:-1px; top:-5px;
  border-left:11px solid currentColor;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.inner .i-arch-link em{ font-style:normal; font-size:15px; letter-spacing:.06em; color:var(--muted); }

/* ---- 18.3 兼容接入层：虚线框 + 四个可选设备（图标而非照片 = 层级本来就比主设备低） */
.inner .i-arch-compat{
  margin-top:16px; padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  border:1px dashed var(--line-2); border-radius:var(--radius); background:var(--paper-2);
}
.inner .i-arch-compat-h{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 16px;
  font-size:15px; font-weight:600; color:var(--ink);
}
.inner .i-arch-compat-h > svg{ width:16px; height:16px; flex:0 0 auto; color:var(--blue-deep); }
.inner .i-arch-compat-h em{ font-style:normal; font-weight:400; font-size:15px; color:var(--muted); }
.inner .i-arch-compat-list{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
  list-style:none; margin:0; padding:0;
}
.inner .i-arch-compat-list li{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.inner .i-arch-ico{
  display:flex; align-items:center; justify-content:center;
  height:58px; margin-bottom:7px;
}
.inner .i-arch-ico img{ max-width:100%; max-height:100%; object-fit:contain; }
.inner .i-arch-compat-list b{ font-size:15px; font-weight:600; color:var(--ink-2); }
.inner .i-arch-compat-list em{ font-style:normal; font-size:15px; color:var(--muted); }

/* ---- 18.4 图例：实线 = 必备链路，虚线 = 可选兼容 */
.inner .i-arch-legend{
  display:flex; flex-wrap:wrap; gap:20px; list-style:none; margin:16px 0 0; padding:0;
  font-size:15px; color:var(--muted);
}
.inner .i-arch-legend li{ display:flex; align-items:center; gap:9px; }
.inner .i-arch-legend li::before{ content:""; width:26px; border-top:2px solid var(--blue-deep); }
.inner .i-arch-legend li.is-dash::before{ border-top-style:dashed; border-top-color:var(--line-2); }

/* ---- 18.5 深色区块兜底（本组件当前只在 tone='white' 用，但按项目规矩先补齐 ——
   漏了这条的组件在深底上就是「深灰字压深蓝」，等于隐形） */
.inner .i-sec--night .i-arch-row{ background:#0f1922; border-color:rgba(255,255,255,.1); }
.inner .i-sec--night .i-arch-pic{ background:#0a1119; }
.inner .i-sec--night .i-arch-tag,
.inner .i-sec--night .i-arch-node b,
.inner .i-sec--night .i-arch-compat-h,
.inner .i-sec--night .i-arch-compat-list b{ color:#fff; }
.inner .i-sec--night .i-arch-tag em,
.inner .i-sec--night .i-arch-node em,
.inner .i-sec--night .i-arch-link em,
.inner .i-sec--night .i-arch-compat-h em,
.inner .i-sec--night .i-arch-compat-list em,
.inner .i-sec--night .i-arch-ico,
.inner .i-sec--night .i-arch-legend{ color:#8e9ba8; }
.inner .i-sec--night .i-arch-compat{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.14); }
.inner .i-sec--night .i-arch-link{ color:var(--blue); }

/* ⚠⚠ 下面两条媒体查询**必须留在文件最末尾**（本项目已经踩过一次：
   §17 的 .i-pgrid--minor 普通规则位置更靠后，把断点里的收列整条盖掉了）。
   以后往 inner.css 追加内容时，请追加**在这两条之前**。 */
@media (max-width:1023px){
  /* 主链路转纵向：箭头线变竖直、三角朝下 */
  .inner .i-arch-row{ grid-template-columns:1fr; }
  .inner .i-arch-link{ padding:2px 0; }
  .inner .i-arch-link i{ width:2px; min-width:0; height:46px; }
  .inner .i-arch-link i::after{
    right:auto; left:-5px; top:auto; bottom:-1px;
    border-left:6px solid transparent; border-right:6px solid transparent;
    border-top:11px solid currentColor; border-bottom:0;
  }
}
@media (max-width:700px){
  .inner .i-arch-compat-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; }
  .inner .i-arch-node b{ font-size:15px; }
}

/* ================================================================ 19 系统运行架构（定稿图）
   桌面显示客户 2026-09-16 定稿的位图（稿 A · 浅白底），窄屏切回 DOM 组件 ——
   位图在 390px 会缩到 0.2 倍、字全糊，而站内每页都要过移动端。理由见
   `build_site.arch_figure_block()` 的注释。 */
.inner .i-archfig{ margin-top:clamp(28px,3.4vw,44px); }
.inner .i-archfig-pic{ margin:0; }
.inner .i-archfig-pic img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius); border:1px solid var(--line);
}
.inner .i-archfig-dom{ display:none; }

/* ⚠⚠ 这条断点必须留在**文件最末尾**。§18 已经踩过一次：同优先级的普通规则位置更靠后，
   会把前面断点里的覆盖整条盖掉。以后追加内容请加在下面之前。 */
@media (max-width:1023px){
  .inner .i-archfig-pic{ display:none; }
  .inner .i-archfig-dom{ display:block; }
}

/* ================================================================ 20 解决方案页（2026-09-16 重做）
   二级页：4 类标配卡片 + 速查表 + 可选扩展（校园全域联动）；三级页：概览 + 其他方案。 */

/* ---- 20.1 卡片：面积角标要压住整块触点，否则被 <a> 盖住 */
.inner .i-sol-area{ z-index:4; }
/* 卡片只讲"解决什么"，配置在下方速查表 —— 描述允许稍长，断行只落在词间 */
.inner .i-sol-desc{ word-break:keep-all; overflow-wrap:break-word; }

/* ---- 20.2 可选扩展：图 + 文的宽卡组合（校园全域联动） */
.inner .i-solopt{
  display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);
  gap:clamp(24px,3vw,54px); align-items:center;
}
.inner .i-solopt-fig{ position:relative; margin:0; }
.inner .i-solopt-fig img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius); border:1px solid var(--line); background:#fff;
}
.inner .i-solopt-body h3{ font-size:clamp(21px,2.3vw,27px); color:var(--ink); margin:10px 0 0; }
.inner .i-solopt-desc{ margin-top:14px; font-size:15px; line-height:1.9; color:var(--muted); }
.inner .i-solopt-cfg{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2);
  font-size:15px; line-height:1.8; color:#4d5860;
}
.inner .i-solopt-body .i-btn{ margin-top:20px; }

/* ---- 20.3 三级页的「方案定位」小注 —— 说明本档在四类里的位置与升降档关系 */
.inner .i-sol-note{
  margin-top:22px; padding:15px 18px;
  border-left:3px solid var(--blue); border-radius:0 8px 8px 0;
  background:var(--paper-2);
  font-size:15px; line-height:1.85; color:var(--ink-2);
}

/* ---- 20.4 深色区块兜底（本项目规矩：新增组件必须补一条，否则深灰字压深蓝底＝隐形） */
.inner .i-sec--night .i-solopt-fig img{ border-color:rgba(255,255,255,.1); }
.inner .i-sec--night .i-solopt-body h3{ color:#fff; }
.inner .i-sec--night .i-solopt-desc{ color:#8e9ba8; }
.inner .i-sec--night .i-solopt-cfg{ color:#b6c2cd; border-top-color:rgba(255,255,255,.12); }
.inner .i-sec--night .i-sol-note{
  background:rgba(255,255,255,.04); color:#c3ccd6; border-left-color:var(--blue);
}

/* ⚠ 断点必须留在**本段末尾**（追加内容请加在下面之前）—— §17/§18 都踩过
   「同优先级普通规则位置更靠后、把断点里的覆盖整条盖掉」。 */
@media (max-width:900px){
  .inner .i-solopt{ grid-template-columns:1fr; }
}

/* ================================================================ 21 表格字号上调（老板 2026-09-16）
   「方案与配置速查」那类长文本表格，13.5px 在 1440 下读起来吃力。正文提到 15.5px、
   表头 15px、表下小字 14px。⚠ 放在**文件最末尾**（前面 §9 的 13.5px 是后写的覆盖，
   同优先级只有位置更靠后才能压住它）。 */
.inner .i-table th{ font-size:15px; padding:15px 20px; }
.inner .i-table th,.inner .i-table td{ font-size:15.5px; padding:14px 20px; }
.inner .i-table-note{ font-size:15px; }
@media (max-width:900px){
  /* 窄屏本来就靠横向滚动，字号不再降级，只收紧内边距 */
  .inner .i-table th,.inner .i-table td{ padding:11px 14px; }
}

/* ================================================================ 22 内页结尾 CTA（改用首页同款）
   老板 2026-09-17：「所有二级页面的页尾…和首页的不一样，全部改成按首页那样的」。
   结构从 `site_lib.cta_contact()` 出，样式 99% 复用 home.base.css 里的 `.contact*`
   （内页 body 带 `site-public`，天然命中）。这里只补**两条原本放在 home.css 的规则** ——
   内页不加载 home.css，缺了它们品牌标会退回 base 里给普通 img 的 124px。 */
.inner .contact-content .cta-lock{ display:inline-flex; align-items:flex-start; margin-bottom:30px; }
/* 品牌标口径：取标题视觉字高的 ~0.7 ⇒ 标宽 = 3.09×h2 字号 → clamp(182px,15.8vw,234px)。
   ⚠ 下限 182px 不能降：窄屏 h2 只有 7.6vw，纯按比例会掉到 92px，比原来还小。 */
.inner .contact-content .cta-lock img{
  width:clamp(182px,15.8vw,234px); height:auto; display:block;
  aspect-ratio:1532.574/279.467;
}

/* ================================================================ 23 暴露剂量条形图
   ⚠⚠ 这组图（`_dose_bars()`）此前在页面上**没有任何样式**：原样式写在已停用的
   `style.css` 里，而且类名还是旧前缀（`.dose-bar` vs 现在生成的 `.i-dose-bar`），
   两处都对不上 ⇒ 渲染出来就是一串裸 span（数字和方块裸排），这就是技术页「乱」的主因。
   这里按深空蓝体系重做一版（不用旧青绿配色）。 */
.inner .i-dose-figure{
  margin:34px 0 0; padding:28px 30px 24px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
}
.inner .i-dose-cap{ margin:0 0 20px; font-size:16px; font-weight:700; color:var(--ink); }
.inner .i-dose-bars{ display:grid; gap:11px; }
.inner .i-dose-bar{
  display:grid; grid-template-columns:104px minmax(0,1fr) 122px;
  gap:16px; align-items:center; font-size:15px;
}
.inner .i-dose-x{ color:#5c6771; font-variant-numeric:tabular-nums; }
.inner .i-dose-track{ height:14px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.inner .i-dose-fill{
  display:block; height:100%; width:var(--w); border-radius:inherit;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue));
  transform-origin:left; animation:i-dose-in .9s ease both;
}
@keyframes i-dose-in{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.inner .i-dose-v{
  text-align:right; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
}
/* 满额基准那一档（75 dB(A)/40 h）用橙色 —— 橙在本站是「警示」语义，正好表达"剂量满额" */
.inner .i-dose-bar.is-key .i-dose-x,
.inner .i-dose-bar.is-key .i-dose-v{ color:#c2410c; font-weight:700; }
.inner .i-dose-bar.is-key .i-dose-fill{ background:linear-gradient(90deg,#ea580c,#fb923c); }
.inner .i-dose-figure .i-table-note{ margin-top:18px; }

/* ================================================================ 24 并排卡片等高 + 页脚说明
   `.i-pgrid--2` 默认 stretch（卡片等高），但卡片内容顶对齐时底部会空一块。
   `i-card--fill` 让**最后一块内容吸底**，两张卡片的收尾就对齐了。 */
.inner .i-card--fill{ display:flex; flex-direction:column; justify-content:center; }
/* ⚠ 别改成 `> *:last-child{margin-top:auto}`（吸底）：并排时短的那张卡会被拉高，
   中间就会留出一大块「漏填」的空白（实测 H.870 卡片、政策卡都很明显）。
   垂直居中是正解 —— 上下留白对称，看着是「设计过的留白」而不是「没填满」。 */


/* ---- 24.1 条款区 .i-clause（政策条文）
   ⚠ 与 §23 同类问题：v7 迁移时类名从 `.clause-box` 改成 `.i-clause`，但样式没跟着搬，
   条款一直是**裸文本**（跟正文混在一起，读不出「这是引用原文」）。这里补一版深空蓝配色。 */
.inner .i-clause{
  margin:20px 0 4px; border:1px solid var(--line-2); border-radius:12px; overflow:hidden;
}
.inner .i-clause p{
  display:flex; gap:14px; margin:0; padding:14px 18px;
  font-size:15px; line-height:1.8; background:#fff;
}
.inner .i-clause p + p{ border-top:1px solid var(--line-2); }
.inner .i-clause b{ flex:none; min-width:96px; color:var(--blue-deep); }
.inner .i-clause span{ color:var(--ink-2); }

/* ---- 24.2 时间线两列 .i-timeline-2col
   5 项竖排会占掉 ~800px 高、右侧空出一大片（老板 2026-09-17 反馈「排版有点乱」）。
   ⚠ 必须拆成**两个独立的 .i-timeline 容器**（竖线是容器的 ::before）——
      给一个容器加 grid 的话，竖线只有最左一条，第二列就没有线了。 */
.inner .i-timeline-2col{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 46px;
}

/* ⚠⚠ 断点必须留在这段（§22–§24）之后，且整份文件的最末尾 ——
   同优先级的普通规则只要位置更靠后，就会把断点里的覆盖整条盖掉（§17/§18 各踩过一次）。 */
@media (max-width:900px){
  .inner .i-dose-bar{ grid-template-columns:76px minmax(0,1fr) 88px; gap:10px; font-size:15px; }
  .inner .i-dose-figure{ padding:22px 18px 18px; }
  .inner .i-timeline-2col{ grid-template-columns:1fr; gap:0; }
  /* 两列并成 1 列后，第二段的第 1 项要补回上间距（否则两个容器首尾粘在一起） */
  .inner .i-timeline-2col > .i-timeline + .i-timeline{ margin-top:26px; }
}
@media (max-width:700px){
  .inner .i-clause p{ flex-direction:column; gap:5px; }
  .inner .i-clause b{ min-width:0; }
}

/* ================================================================ 25 二级页首屏高度统一
   老板 2026-09-17：「所有二级页面的深色首图，我发现高度都不同。这点应该处理好。」

   量出来的成因（`probe_hero.py`）——首屏高 = 上下内边距(192px) + 内容区，而**内容区高度是浮动的**：
     · 左列：面包屑 + h1(68) + 副标（2 行 = 59 / 3 行 = 89）
     · 右列：指标项数决定（0 项 = 119 / 3 项 = 187 / 4 项 = 254；`.i-hero-side` 另加 6px）
   实测四种结果：386 / 401 / 415 / 468。

   修法 = **给内容区一个统一的最小高度**，同时把内边距收一档抵掉增高（不牺牲观感）：
     · 内边距 clamp 上限 104+88 → 88+76（1440 下 192 → 164，省 28）
     · 指标项间距 16 → 12（4 项页省 16）
     · 内容区 min-height 258 ⇒ 首屏 = 164 + 258 = **422px（全部 14 个内页一致）** */
.inner .i-hero{
  padding:clamp(56px,6.4vw,88px) 0 clamp(52px,5.6vw,76px);
}
/* ⚠ `:last-child{margin-bottom:0}` 很关键：末项的 margin 会算进 `.i-hero-side` 的高度
   （实测 +9px），4 项指标页上这 9px 就是「组间距只能给 9px」的元凶。去掉后组间距可以给到 12px。 */
.inner .i-hero-facts > div{ margin-bottom:12px; }
.inner .i-hero-facts > div:last-child{ margin-bottom:0; }

/* ---- 4 项指标的首屏（只有「政策与标准」）改 **2×2 网格**（2026-09-17）
   4 项 (dt+dd) 竖排要 218px + 组间距，硬塞进 258px 后组间距只剩 12px、读起来是一团；
   改 2 列后同样的内容只占 ~125px，余量充足、层级也清楚。
   ⚠ 只在**恰好 4 项**时触发（`:has(> div:nth-child(4))`）：3 项的页排成 2+1 会难看得多。
   ⚠ 只加在 ≥901px：窄屏是单列堆叠，不需要也不该分栏。 */
@media (min-width:901px){
  .inner .i-hero-facts:has(> div:nth-child(4)){
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 28px;
  }
  .inner .i-hero-facts:has(> div:nth-child(4)) > div{ margin-bottom:0; }
}
/* 右侧栏自身的内补白 6 -> 4px：4 项指标的页刚好因此比 min-height 多 2px，
   收掉之后所有内页首屏都精确等于 422px。
   ⚠ 历史（改这几行前必读）：
     · 第 1 轮「首屏小字加大」（面包屑 12.5→14 / 副标 →19.5 / dt 12→13.5 / chips →14）
       ⇒ 「政策与标准」右列 258 → 270 ⇒ 首屏 434，把指标项间距 12 → **9** 压回 258。
     · 第 2 轮「全站字号统一 ≥15px」⇒ 右列再涨到 **267 ⇒ 首屏 431**
       （其余 13 页都是 3 项指标，仍在 258 的地板下、不受影响）。
       ❌ 先试过把间距 9 → 5 —— 数字上能压回 258，但**两组指标之间只剩 5px、几乎贴在一起**，
          而一组内 dt→dd 的间距也是 5px ⇒ 「分组感」全没了，比超高更难看。
       ✅ 正解两条：① 压 **dt 行高** 1.5 → 1.35（15px 的 dt 从 23px 变 20px，4 项省 12px）；
          ② **末项 margin 归零**（省 9px）。之后组间距给到 **12px**、组内 5px，层级清楚，
          右栏 252 < 258 ⇒ 全站 422，且留 6px 余量。
   ⚠ 只有「政策与标准」是 **4 项**指标，是全站唯一会被右列撑高的页 —— 动首屏字号/行高后
     **务必复跑 `probe_hero.py`** 复核 14 个内页是否仍清一色 422。 */
.inner .i-hero-side{ padding-bottom:0; }

/* ⚠ min-height 只给宽屏：窄屏首屏是单列堆叠，内容本来就更高，不需要也不该被拉齐。 */
@media (min-width:901px){
  .inner .i-hero-grid{ min-height:258px; }
}

/* ================================================================ 26 案例中心（2026-09-17 重做 + 当天第 2 轮精简）
   结构：首图（覆盖场景 **6** chips）→ 学校项目（照片 + 名称卡）→ 学校名单 → 案例持续收录 → CTA。
   第 2 轮老板删掉两块：**校徽墙**（「不用校徽墙了」）与**安装实景**；
   后者的照片没有丢，已按校归属转到「学校项目」卡片的照片位（`build_site.build_cases` 有说明）。
   版式参考合作方站点，但落在本站的深空蓝体系里；素材缺的位置统一留占位，不编造。 */

/* ---- 26.1 首屏「覆盖场景」标签
   6 项如果用 i-hero-facts（dt/dd 两行一条）会把首屏撑高 —— 首屏高度统一 422px（§25）。
   用 chips 两列排布，6 项只占 3 行。 */
.inner .i-hero-chips-title{
  margin:0 0 12px; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:#8b98a5;
}
.inner .i-hero-chips{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px; list-style:none; margin:0; padding:0;
}
.inner .i-hero-chips li{
  padding:8px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px;
  font-size:15px; color:#cfd8e1; text-align:center; white-space:nowrap;
}

/* ---- 26.2 校徽墙 ⚠ **暂未使用** —— 老板 2026-09-17「不用校徽墙了」，
   案例页已不再渲染 `.i-logowall`；规则留库备用（要恢复就把 build_cases 里那段加回去）。
   校徽图仍在 assets/img/schools/。 */
.inner .i-logowall{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(14px,2vw,26px); list-style:none; margin:0; padding:0;
}
.inner .i-schoollogo{
  display:flex; align-items:center; justify-content:center; aspect-ratio:1;
  padding:18px; background:#fff; border:1px solid var(--line); border-radius:16px;
}
.inner .i-schoollogo img{ max-width:100%; max-height:100%; object-fit:contain; }
.inner .i-schoollogo--empty{ background:var(--paper-2); border-style:dashed; }
.inner .i-schoollogo--empty span{
  font-size:19px; font-weight:600; color:#9aa6b2; letter-spacing:.04em;
}

/* ---- 26.2b 学校卡片（案例页专用）
   站内通用 .i-pcard-media 是 4:3（当初为冷灰影棚底的产品图定的）；校园实拍源图多为 16:9，
   按 4:3 裁要切掉两侧各 12.5% 的画面 ⇒ 这一个变体放宽到 16:10（只切 5%），教室实拍看着更完整。
   ⚠ 只作用于案例页的 .i-pcard--campus，别去动全局 .i-pcard-media。 */
.inner .i-pcard--campus .i-pcard-media{ aspect-ratio:16/10; }

/* ---- 26.3 学校照片占位（照片由老板提供，未到位先留空） */
.inner .i-media-ph{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; background:var(--paper-2);
  color:#9aa6b2; font-size:15px; letter-spacing:.1em;
}
/* 产品卡媒体区是固定比例的，占位块自然填满；这里只保证它不被压扁 */
.inner .i-pcard-media{ position:relative; }
.inner .i-pcard-media .i-media-ph{ position:absolute; inset:0; }

/* ---- 26.4 学校名单 */
.inner .i-schoollist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.inner .i-schoollist li{
  display:grid; grid-template-columns:46px minmax(0,1fr) auto;
  gap:16px; align-items:baseline; padding:17px 4px; border-bottom:1px solid var(--line);
}
.inner .i-schoollist-no{ font-size:15px; font-weight:700; letter-spacing:.1em; color:var(--blue-deep); }
.inner .i-schoollist-name{ font-size:16px; color:var(--ink); }
.inner .i-schoollist-meta{ font-size:15px; color:var(--muted); white-space:nowrap; }

/* ---- 26.5 深色区块兜底（本页目前没用在深底上，但按项目规矩先补齐，
   漏了这条的组件放到 night 区块上就会变成「深灰字压深蓝」＝隐形） */
.inner .i-sec--night .i-schoollogo{ background:#0f1922; border-color:rgba(255,255,255,.1); }
.inner .i-sec--night .i-schoollogo--empty{ background:rgba(255,255,255,.04); }
.inner .i-sec--night .i-schoollogo--empty span{ color:#6d7b89; }
.inner .i-sec--night .i-media-ph{ background:rgba(255,255,255,.04); color:#6d7b89; }
.inner .i-sec--night .i-schoollist{ border-top-color:rgba(255,255,255,.12); }
.inner .i-sec--night .i-schoollist li{ border-bottom-color:rgba(255,255,255,.12); }
.inner .i-sec--night .i-schoollist-name{ color:#fff; }
.inner .i-sec--night .i-schoollist-no{ color:var(--blue); }
.inner .i-sec--night .i-schoollist-meta{ color:#8e9ba8; }

/* ---- 27. 获取方案表单（about 页「联系我们」右卡）2026-09-18 新增 ----
   老板：「获取方案的逻辑要改一下，应该加上让客户提交相关资料和联系方式，提交给后台，
   我们的工作人员再联系客户。」⇒ 原来只是一段"请提供以下信息"的**静态提示**（客户看完
   还得自己去找联系方式），现在改成**真表单**；提交动作由同页内联脚本拼成结构化邮件
   发给公司邮箱（逻辑见 `build_site.build_about`，端点常量集中在那一处，便于以后换后端）。
   ⚠ 字号一律 ≥15px（本项目硬规矩）；输入框必须显式 `font-family:inherit`
     —— 否则 Chrome 会把 input/select/textarea 回落成默认字体，与卡片正文不一致。 */
.inner .i-form{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.inner .i-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.inner .i-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.inner .i-field > span{ font-size:15px; font-weight:600; color:var(--ink); }
.inner .i-field > span i{ font-style:normal; color:#c0392b; margin-left:2px; }
.inner .i-field input, .inner .i-field select, .inner .i-field textarea{
  width:100%; padding:11px 13px; font-size:15px; font-family:inherit; line-height:1.5;
  color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px;
  transition:border-color .2s, box-shadow .2s;
}
.inner .i-field textarea{ min-height:84px; resize:vertical; line-height:1.7; }
.inner .i-field input::placeholder, .inner .i-field textarea::placeholder{ color:#a8b2ba; }
.inner .i-field input:focus, .inner .i-field select:focus, .inner .i-field textarea:focus{
  outline:none; border-color:var(--blue-deep); box-shadow:0 0 0 3px rgba(11,106,168,.13);
}
.inner .i-form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:2px; }
/* ⚠ `.i-btn` 原本只用在 `<a>` 上；这里首次用在 `<button type="submit">`，
   要显式清掉 button 的 UA 默认（字体不继承、自带 border/背景）—— 否则提交按钮
   会变成一个灰底方框，和旁边的 `<a>` 按钮完全不同款。 */
.inner button.i-btn{ font-family:inherit; font-size:15px; border:0; cursor:pointer; }
.inner .i-form-note{ margin:0; font-size:15px; line-height:1.75; color:var(--muted); }
.inner .i-form-note a{ color:var(--blue-deep); }
.inner .i-form-note.is-warn{ color:#b4551f; font-weight:600; }
.inner .i-form-note.is-ok{ color:#0f766e; font-weight:600; }

/* ---- 27.1 深色区块兜底（本项目规矩：新增组件必须补一条，
   漏了就会「深灰字压深蓝底」＝隐形） */
.inner .i-sec--night .i-field > span{ color:#fff; }
.inner .i-sec--night .i-field input, .inner .i-sec--night .i-field select,
.inner .i-sec--night .i-field textarea{
  color:#eef4f8; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
}
.inner .i-sec--night .i-field input::placeholder,
.inner .i-sec--night .i-field textarea::placeholder{ color:#7d8b98; }
.inner .i-sec--night .i-form-note{ color:#8e9ba8; }
.inner .i-sec--night .i-form-note a{ color:var(--blue); }

/* ---- 28. 5A 核心算法：缩写徽章 + 中文名 + 对症痛点（主机页）2026-09-18 新增 ----
   老板转来同事反馈「全站找不到 5A 的解释」⇒ 补这个区块，让"5A"在站内**第一次有了中文释义**。
   ⚠ 用 `auto-fit` 而不是固定列数：5 张卡在窄屏要能自动降到 4/3/2 列；
     写死 `repeat(5,1fr)` 会在 1024px 以下把卡片压到"一行放不下两个字"。 */
.inner .i-algo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.inner .i-algo-abbr{
  display:inline-block; padding:3px 10px; border-radius:6px;
  background:rgba(11,106,168,.1); color:var(--blue-deep);
  font-size:16px; font-weight:700; letter-spacing:.06em;
}
.inner .i-algo-name{ margin-top:12px; font-size:17px; font-weight:600; color:var(--ink); }
.inner .i-algo-pain{ margin-top:10px; font-size:15px; line-height:1.75; color:var(--muted); }

/* ---- 28.1 深色区块兜底 */
.inner .i-sec--night .i-algo-abbr{ background:rgba(85,184,243,.14); color:var(--blue); }
.inner .i-sec--night .i-algo-name{ color:#fff; }
.inner .i-sec--night .i-algo-pain{ color:#8e9ba8; }

/* ⚠ 断点放本段末尾（追加内容请加在下面之前）：同优先级的普通规则位置更靠后，
   会把断点里的覆盖整条盖掉（§17/§18/§22 各踩过一次）。 */
@media (max-width:1023px){
  .inner .i-logowall{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:900px){
  .inner .i-schoollist li{ grid-template-columns:34px minmax(0,1fr); row-gap:5px; }
  .inner .i-schoollist-meta{ grid-column:2; white-space:normal; }
}
@media (max-width:760px){
  .inner .i-form-row{ grid-template-columns:1fr; }   /* 表单双栏 → 单栏 */
}
@media (max-width:640px){
  .inner .i-logowall{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .inner .i-hero-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}