/* ==========================================================================
   WINTOUCH-STYLE SITE COMPONENTS
   --------------------------------------------------------------------------
   组件层。所有颜色/尺寸只引用 tokens.css 的语义令牌。
   表面反转：给 <section> 加 class="stage" 或 "section-dark" 即可整体反白。

   表面交替规律（首页）：
     stage → paper → paper-2 → paper → paper-2 → paper → paper-2 → stage
   深蓝只用于首尾书挡 + 局部强调，不做整站暗色。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 全局基础
   --------------------------------------------------------------------------- */
html{ font-size:16px }
body{ font-size:.9375rem; overflow-x:hidden }
::selection{ background:var(--color-accent-soft); color:var(--color-accent-strong) }
a{ transition:color var(--duration-fast) var(--ease-out-soft) }

:focus-visible{ border-radius:4px }

/* 内联图标的默认档。
   svg_icon() 输出 class="icon" 的 24×24 SVG —— 这里给个基线，
   避免"没被任何上下文规则命中的图标"退回浏览器默认尺寸。
   各处显式写死大小的规则（.nav-link svg / .icon-btn svg …）特异性更高，
   仍照旧生效。 */
.icon{ width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.125em }

/* ---------------------------------------------------------------------------
   1. Topbar —— 浅色信息条（参照站：bg-paper-2 + hairline，不是深蓝条）
   --------------------------------------------------------------------------- */
.topbar{
  background:var(--color-paper-2);
  border-bottom:var(--rule-hair);
  color:var(--color-ink-muted);
  font-family:var(--font-display);
  font-size:.8125rem;
  font-weight:500;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  min-height:2.25rem;
}
.topbar-tagline{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  font-weight:600; text-transform:uppercase; letter-spacing:.08em;
}
.topbar-tagline .icon{ color:var(--color-accent) }
.topbar-contacts{ display:flex; align-items:center; gap:1.5rem; white-space:nowrap }
.topbar a{
  display:inline-flex; align-items:center; gap:.375rem;
  color:var(--color-ink-muted); font-weight:500;
}
.topbar a:hover{ color:var(--color-accent) }
.topbar-divider{ width:1px; height:1rem; background:var(--color-rule) }
.topbar-social{ display:inline-flex; align-items:center; gap:.25rem }
.topbar-social a{
  width:1.75rem; height:1.75rem; display:grid; place-items:center;
  border-radius:var(--radius-pill); color:var(--color-ink-muted);
  transition:background var(--duration-fast) var(--ease-out-soft),
             color var(--duration-fast) var(--ease-out-soft),
             transform var(--duration-fast) var(--ease-out-soft);
}
.topbar-social a:hover{
  background:var(--color-accent-soft); color:var(--color-accent-strong);
  transform:translateY(-.125rem);
}
.topbar svg{ width:.875rem; height:.875rem }

/* 语种切换挪进信息条后走信息条的样式：无边框、hover 只变色，和 .topbar-social
   的圆形钮同一套手感。原 .lang-switch 的 pill 边框是给 header 里那颗做的，
   放浅色信息条上显得太重；字沿用 .topbar 的 display 体 + 大写 + 字距。 */
.topbar .lang-switch{
  height:auto; padding-inline:.4rem; border:0; border-radius:var(--radius-pill);
  background:transparent; color:var(--color-ink-muted);
  font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  transition:color var(--duration-fast) var(--ease-out-soft);
}
.topbar .lang-switch:hover{ color:var(--color-accent); border-color:transparent }
.topbar .lang-switch > svg{ color:var(--color-accent) }
.topbar .lang-switch select{ max-width:7.5rem }

/* 移动端抽屉里的那份语种切换。topbar 在 lg 以下整条隐藏，跟着消失的那份
   必须在这里补回来 —— 否则手机上就没有换语种的入口了（见 base.html 里的注释）。
   默认 display:none，只在 .is-open-mobile 时显示，桌面上不占横向菜单的位置；
   .is-open-mobile 本身只在 ≤980px 出现，所以可见态不用再套媒体查询。 */
.nav-mobile-lang{ display:none }
.nav.is-open-mobile .nav-mobile-lang{
  display:flex; align-items:center;
  padding:.625rem .25rem .875rem; border-bottom:var(--rule-hair);
}
.nav.is-open-mobile .nav-mobile-lang .lang-switch{
  height:2.5rem; padding-inline:.75rem; font-size:.875rem;
}

/* ⚠️ 抽屉的 position:fixed 会被 .site-header 的 backdrop-filter 吃掉。
   backdrop-filter 非 none 的元素会把自己变成 fixed 后代的 containing block，
   于是「inset:0 全屏抽屉」被夹进 65px 高的 header 里 —— 手机上点汉堡只能看到
   顶上一小条，下面的菜单项根本翻不出来（量过：带滤镜时抽屉高 136px，拿掉后 844px）。
   只在抽屉打开期间摘掉滤镜，app.js 打开/关闭时挂 .is-menu-open；
   桌面 mega 面板不受影响，它们是 absolute 且挂在更近的 .header-inner 上。 */
.site-header.is-menu-open{ backdrop-filter:none; -webkit-backdrop-filter:none }

/* ---------------------------------------------------------------------------
   2. Header
   --------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:var(--rule-hair);
  transition:box-shadow var(--duration-normal) var(--ease-out-soft);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-card) }

/* .header-inner 是面板的定位容器（等价参照站的 <div class="relative">）。
   ★ 关键：面板必须挂在它身上而不是 .nav-item 上 ——
   挂在 nav-item 上会把通栏面板夹进一个 70px 的链接盒子里。 */
.header-inner{ position:relative }
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; min-height:4rem;
}

.brand{ display:inline-flex; align-items:center; gap:.5rem; flex:0 1 auto; min-width:0 }
.brand-mark{ width:2.25rem; height:2.25rem; flex:none; color:var(--color-brand-navy) }
/* brand-mark 里是内联 svg（不带 .icon 类），单独钉住尺寸 */
.brand-mark svg{ width:100%; height:100%; flex:none }
/* 品牌名是后台可改的。公司全名（DONGGUAN TONNY INSTRUMENT TECHNOLOGY CO., LTD）
   在 1440 下会把 header 撑出容器 163px，所以文字列必须能收缩，
   名字过长时用省略号而不是把导航挤出去。 */
.brand-text{ min-width:0; overflow:hidden }
.brand-name{
  font-family:var(--font-display); font-weight:700;
  font-size:1.125rem; letter-spacing:var(--tracking-heading);
  color:var(--color-ink-strong); line-height:1.1;
  display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-tag{
  display:block; font-size:.625rem; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--color-ink-faint); font-weight:600;
}
/* 公司全名较长（DONGGUAN TONNY INSTRUMENT TECHNOLOGY CO., LTD，45 字符）：
   1440 以下收字距 + 砍副标题，1100 以下缩小字号；再窄就直接砍掉文字只留图形。
   参照站在窄屏也是只留 logo 图形。后台把 brand 改成短名（如 TONNY MICRO TOOLING）
   后这段就自动用不上，不必删。 */
@media (max-width:1440px){
  .brand-name{ letter-spacing:0 }
  .brand-tag{ display:none }
}
@media (max-width:1100px){
  .brand-name{ font-size:.9375rem }
}

/* --- 主导航 --- */
.nav{ display:flex; align-items:center; gap:.25rem }
.nav-link{
  position:relative; display:inline-flex; align-items:center; gap:.375rem;
  min-height:2.75rem; padding:.5rem .5rem;
  font-family:var(--font-display); font-size:.875rem; font-weight:600;
  letter-spacing:-.01em; color:var(--color-ink-strong);
  background:none; border:0; cursor:pointer;
  transition:color var(--duration-fast) var(--ease-out-soft);
}
@media (min-width:1280px){ .nav-link{ padding-inline:.75rem } }
.nav-link:hover{ color:var(--color-accent) }
.nav-link.is-active{ color:var(--color-accent-strong) }
.nav-link .chev{ width:.75rem; height:.75rem; flex:none; opacity:.75;
  transition:transform var(--duration-fast) var(--ease-out-soft) }
.nav-link[aria-expanded="true"] .chev{ transform:rotate(180deg) }
/* 悬停/激活时从左往右扫出的 2px 下划线（参照站同款） */
.nav-underline{
  position:absolute; left:.75rem; right:.75rem; bottom:0;
  height:2px; background:var(--color-accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--duration-fast) var(--ease-out-soft);
}
.nav-link:hover .nav-underline,
.nav-link.is-active .nav-underline,
.nav-link[aria-expanded="true"] .nav-underline{ transform:scaleX(1) }

/* 移动端面板展开钮 —— 桌面隐藏（桌面靠 hover 开面板，
   触屏点链接会直接跳走，所以需要单独一个钮） */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  flex:none; width:1.75rem; height:1.75rem; padding:0;
  background:none; border:0; cursor:pointer; color:var(--color-ink-muted);
}
.nav-toggle .chev{ width:.875rem; height:.875rem;
  transition:transform var(--duration-fast) var(--ease-out-soft) }

/* 工具区：搜索 / CTA / 汉堡 */
.nav-tools{ display:flex; align-items:center; gap:.5rem; flex:none }
@media (min-width:768px){ .nav-tools{ gap:.75rem } }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  height:2.25rem; min-width:2.25rem; padding-inline:.7rem;
  border:var(--rule-hair); border-radius:var(--radius-pill);
  background:var(--color-paper); color:var(--color-ink-muted);
  font-size:.8125rem; cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-out-soft),
             color var(--duration-fast) var(--ease-out-soft);
}
.icon-btn:hover{ border-color:var(--color-ink-strong); color:var(--color-ink-strong) }
.icon-btn .icon{ width:.875rem; height:.875rem }
.icon-btn kbd{
  font-family:var(--font-mono); font-size:.6875rem;
  border:var(--rule-hair); border-radius:5px; padding:.1rem .3rem;
  color:var(--color-ink-faint); background:var(--color-paper-2);
}
/* 语种切换 —— 外形跟 .icon-btn 对齐（同一条胶囊边框），排在搜索按钮左边。
   这个类原本就写了、只是模板和 JS 从没接上；现在补齐。 */
.lang-switch{
  display:inline-flex; align-items:center; gap:.35rem;
  height:2.25rem; padding-inline:.6rem;
  border:var(--rule-hair); border-radius:var(--radius-pill);
  background:var(--color-paper); color:var(--color-ink-muted);
  font-size:.8125rem; cursor:pointer; flex:none;
  transition:border-color var(--duration-fast) var(--ease-out-soft),
             color var(--duration-fast) var(--ease-out-soft);
}
.lang-switch:hover{ border-color:var(--color-ink-strong); color:var(--color-ink-strong) }
.lang-switch > svg{ width:.875rem; height:.875rem; flex:none }
.lang-switch select{
  border:0; background:transparent; color:inherit;
  font:inherit; cursor:pointer; padding:0; max-width:6.5rem;
  -webkit-appearance:none; appearance:none;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:2.5rem; padding-inline:1.25rem;
  border-radius:var(--radius-pill);
  font-size:.875rem; font-weight:600; font-family:var(--font-body);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--duration-fast) var(--ease-out-soft),
             background var(--duration-fast) var(--ease-out-soft),
             box-shadow var(--duration-fast) var(--ease-out-soft),
             border-color var(--duration-fast) var(--ease-out-soft);
}
.btn .icon{ width:1rem; height:1rem }
.btn-primary{ background:var(--color-brand-navy); color:#fff }
.btn-primary:hover{ background:var(--color-stage-3); transform:translateY(-1px) }
.btn-accent{
  background:var(--color-accent); color:var(--color-accent-ink);
  font-family:var(--font-display); font-size:.8125rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; box-shadow:var(--shadow-card);
}
.btn-accent:hover{ background:var(--color-accent-hover); transform:translateY(-.125rem); box-shadow:var(--shadow-lift) }
.btn-accent .chev2{
  font-size:1.05em; line-height:0;
  transition:transform var(--duration-fast) var(--ease-out-soft);
}
.btn-accent:hover .chev2{ transform:translateX(.125rem) }
.btn-ghost{ background:transparent; border-color:var(--color-rule); color:var(--color-ink) }
.btn-ghost:hover{ border-color:var(--color-brand-navy); color:var(--color-ink-strong) }
.btn-invert{ background:#fff; color:var(--color-brand-navy) }
.btn-invert:hover{ background:var(--color-paper-3); transform:translateY(-1px) }
.btn-lg{ height:3.25rem; padding-inline:1.75rem; font-size:1rem }
.btn-block{ width:100% }

/* ==========================================================================
   2b. Mega Menu —— 通栏面板
   --------------------------------------------------------------------------
   结构（照抄参照站）：
     .header-inner (relative)
       ├─ .header-row            logo | nav | tools
       └─ .mega-panel            absolute inset-x-0 top-full  ← 通栏
            └─ .container-wide grid lg:grid-cols-12
                 ├─ .mega-main  col-span-9  eyebrow+title + 2 列卡片
                 └─ .mega-featured col-span-3  推荐产品卡
   ========================================================================== */
.mega-panel{
  position:absolute; inset-inline:0; top:100%;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom-right-radius:var(--radius-2xl);
  border-bottom-left-radius:var(--radius-2xl);
  background:var(--color-paper-2);
  background:color-mix(in srgb, var(--color-paper) 98%, transparent);
  box-shadow:var(--shadow-pop);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding-block:2rem;
  z-index:70;
  /* 收起态 */
  opacity:0; visibility:hidden; transform:translateY(.25rem);
  transition:opacity var(--duration-normal) var(--ease-out-soft),
             transform var(--duration-normal) var(--ease-out-soft),
             visibility 0s var(--duration-normal);
}
/* 展开态：.is-open 由 app.js 在 hover/focus 时写到面板上 */
.mega-panel.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity var(--duration-normal) var(--ease-out-soft),
             transform var(--duration-normal) var(--ease-out-soft),
             visibility 0s 0s;
}
.mega-panel .container{
  padding-inline:1.5rem;
  display:grid;
  grid-template-columns:1fr;   /* 移动端单列，featured 卡已单独隐藏 */
  gap:0;
}
/* 12 栅格：9 栏内容 + 3 栏推荐卡 —— 这是通栏面板的骨架 */
@media (min-width:1024px){
  .mega-panel .container{ grid-template-columns:repeat(12,minmax(0,1fr)) }
  .mega-main{ grid-column:span 9 }
  .mega-featured{ grid-column:span 3 }
}

.mega-main{ padding-inline:.5rem; min-width:0 }
.mega-head{
  border-top:1px solid rgba(0,0,0,.06); padding-top:1rem;
}
.mega-eyebrow{
  font-family:var(--font-display); font-size:.75rem; font-weight:600;
  color:var(--color-accent-strong);
}
.mega-title{
  margin-top:.25rem; font-family:var(--font-display);
  font-size:1.125rem; font-weight:600; letter-spacing:-.02em;
  color:var(--color-ink-strong); text-wrap:balance;
}
.mega-cards{ margin-top:1rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.625rem }

.mega-card{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  min-height:5.25rem; padding:.875rem 1rem;
  border-radius:var(--radius-md); background:var(--color-paper-2);
  transition:background var(--duration-fast) var(--ease-out-soft),
             transform var(--duration-fast) var(--ease-out-soft);
}
.mega-card:hover{ background:var(--color-accent-soft); transform:translateY(-.125rem) }
.mega-card-body{ min-width:0 }
.mega-card-title{
  font-family:var(--font-display); font-size:.875rem; font-weight:600;
  line-height:1.2; letter-spacing:-.015em; color:var(--color-ink-strong);
  transition:color var(--duration-fast) var(--ease-out-soft);
}
.mega-card:hover .mega-card-title{ color:var(--color-accent-hover) }
.mega-card-desc{
  margin-top:.25rem; font-size:.75rem; line-height:1.5;
  color:var(--color-ink-muted); text-wrap:pretty;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mega-count{
  flex:none; font-family:var(--font-mono); font-size:.6875rem;
  color:var(--color-ink-faint); background:var(--color-paper-3);
  padding:.15rem .5rem; border-radius:var(--radius-pill);
}
/* 右侧圆形箭头徽章 —— 参照站是 arrow-up-right + 白底圆，悬停翻金 */
.mega-arrow{
  flex:none; width:2rem; height:2rem; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:var(--color-paper);
  color:var(--color-ink-muted);
  transition:background var(--duration-fast) var(--ease-out-soft),
             color var(--duration-fast) var(--ease-out-soft),
             transform var(--duration-fast) var(--ease-out-soft);
}
.mega-arrow .icon{ width:.875rem; height:.875rem }
.mega-card:hover .mega-arrow{
  background:var(--color-accent); color:var(--color-brand-white);
  transform:rotate(3deg);
}

/* col-span-3 推荐产品卡 */
.mega-featured{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--radius-lg); background:var(--color-brand-white);
  box-shadow:var(--shadow-card);
  transition:transform var(--duration-normal) var(--ease-out-soft),
             box-shadow var(--duration-normal) var(--ease-out-soft);
}
.mega-featured:hover{ transform:translateY(-.125rem); box-shadow:var(--shadow-lift) }
.mega-featured-media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--color-brand-white);
  display:flex; align-items:center; justify-content:center;
}
.mega-featured-media img{
  width:100%; height:100%; object-fit:contain; padding:.25rem;
  transform:scale(1.14);
  transition:transform var(--duration-slow) var(--ease-out-soft);
}
.mega-featured:hover .mega-featured-media img{ transform:scale(1.18) }
/* 没有产品照片时的兜底：工具剪影 SVG（tool_icon 输出 .ticon）
   居中靠 .mega-featured-media 的 flex，不用 % margin ——
   % margin 按父容器"宽度"算，竖屏方向必然偏 */
.mega-featured-media .ticon{
  width:72%; height:auto; display:block;
  transform:scale(1); transition:transform var(--duration-slow) var(--ease-out-soft);
}
.mega-featured:hover .mega-featured-media .ticon{ transform:scale(1.06) }
.mega-featured-tag{
  position:absolute; left:.75rem; top:.75rem;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.9);
  padding:.25rem .625rem; font-size:.625rem; font-weight:600;
  color:var(--color-ink-muted); box-shadow:0 1px 2px rgba(0,0,0,.08);
  backdrop-filter:blur(4px);
}
.mega-featured-body{
  border-top:1px solid rgba(0,0,0,.06); padding:1rem;
}
.mega-featured-code{
  font-size:.6875rem; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--color-accent-strong);
}
.mega-featured-name{
  margin-top:.25rem; font-family:var(--font-display); font-size:.875rem;
  font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--color-ink-strong);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-wrap:balance;
}
.mega-featured-desc{
  margin-top:.75rem; font-size:.75rem; line-height:1.5;
  color:var(--color-ink-muted); text-wrap:pretty;
}
.mega-featured-cta{
  margin-top:1rem; display:inline-flex; align-items:center; gap:.375rem;
  min-height:2.5rem; font-family:var(--font-display); font-size:.75rem;
  font-weight:600; color:var(--color-ink-strong);
  transition:color var(--duration-fast) var(--ease-out-soft);
}
.mega-featured-cta .icon{ width:.875rem; height:.875rem;
  transition:transform var(--duration-fast) var(--ease-out-soft) }
.mega-featured:hover .mega-featured-cta{ color:var(--color-accent) }
.mega-featured:hover .mega-featured-cta .icon{ transform:translate(2px,-2px) }

/* --- 移动端菜单按钮 --- */
.menu-toggle{ display:none }

/* ---------------------------------------------------------------------------
   3. Breadcrumb
   --------------------------------------------------------------------------- */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:.75rem; color:var(--color-ink-faint);
  padding-block:.75rem 0;
}
.crumbs a{ color:var(--color-ink-faint) }
.crumbs a:hover{ color:var(--color-ink) }
.crumbs .sep{ opacity:.5 }
.crumbs [aria-current="page"]{ color:var(--color-ink-muted) }

/* ---------------------------------------------------------------------------
   4. Section 通用
   --------------------------------------------------------------------------- */
.section{ padding-block:var(--space-section) }
.section-paper2{ background:var(--color-paper-2) }
.section-2col{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:2.5rem }
.container-wide{ } /* token 定义 */

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:3rem }
.section-head > div{ max-width:44rem }
.section-kicker{
  font-size:.6875rem; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--color-accent-strong); font-weight:600;
  margin-bottom:.75rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.section-kicker::before{
  content:""; width:1.5rem; height:1px; background:var(--color-accent);
}
.section-title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-display); line-height:var(--leading-display);
  letter-spacing:var(--tracking-display); color:var(--color-ink-strong);
  text-wrap:balance; max-width:24ch;
}
.section-lede{
  margin-top:1rem; color:var(--color-ink-muted);
  font-size:1rem; line-height:var(--leading-body); max-width:42ch;
}
.section-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.875rem; font-weight:600; color:var(--color-brand-navy);
  flex:none; white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-out-soft);
}
.section-link svg{ width:16px; height:16px;
  transition:transform var(--duration-fast) var(--ease-out-soft) }
.section-link:hover{ color:var(--color-accent-strong) }
.section-link:hover svg{ transform:translateX(3px) }

/* ---------------------------------------------------------------------------
   5. Hero（stage 深蓝 + 视频背景 + 编号指标带）
   --------------------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden }
.hero-media{
  position:absolute; inset:0; z-index:0;
  background:var(--color-brand-navy);
}
.hero-media video,
.hero-media img{ width:100%; height:100%; object-fit:cover }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,27,44,.72) 0%, rgba(7,27,44,.38) 46%, rgba(7,27,44,.82) 100%),
    radial-gradient(120% 80% at 12% 0%, transparent 0%, rgba(7,27,44,.5) 100%);
}
.hero-inner{
  position:relative; z-index:1;
  padding-block:calc(var(--space-section) + 2rem) var(--space-section);
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.75rem; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; font-weight:600;
  color:var(--color-stage-muted);
  background:rgba(255,255,255,.08);
  border:1px solid var(--color-stage-rule);
  padding:.4rem .85rem; border-radius:var(--radius-pill);
  margin-bottom:1.75rem;
}
.hero-title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-mega); line-height:var(--leading-mega);
  letter-spacing:var(--tracking-mega); color:#fff;
  text-wrap:balance; max-width:20ch;
}
.hero-title em{ font-style:normal; color:var(--color-accent) }
.hero-lede{
  margin-top:1.75rem; max-width:44rem;
  font-size:1.125rem; line-height:1.55; color:var(--color-stage-muted);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.875rem; margin-top:2.25rem }

.hero-tags{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8125rem; color:#fff;
  background:rgba(255,255,255,.09); border:1px solid var(--color-stage-rule);
  padding:.45rem .9rem; border-radius:var(--radius-pill);
}
.hero-tag svg{ width:14px; height:14px; color:var(--color-accent) }

/* 编号指标带 */
.metric-band{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:3.5rem; border-top:1px solid var(--color-stage-rule);
}
.metric-band > div{
  padding:1.25rem 1.5rem 0 0; border-right:1px solid var(--color-stage-rule);
}
.metric-band > div:last-child{ border-right:0 }
.metric-num{
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:var(--tracking-mono); color:var(--color-accent);
}
.metric-val{
  display:block; margin-top:.4rem;
  font-family:var(--font-display); font-weight:600; font-size:1.375rem;
  color:#fff; letter-spacing:var(--tracking-heading);
}
.metric-lab{
  display:block; margin-top:.2rem; font-size:.75rem;
  color:var(--color-stage-muted);
}

/* ---------------------------------------------------------------------------
   6. Trust bar
   --------------------------------------------------------------------------- */
.trust{ border-bottom:var(--rule-hair) }
.trust .container{
  display:grid; grid-template-columns:1.4fr repeat(4,minmax(0,1fr));
  gap:1.5rem; align-items:center; padding-block:1.5rem;
}
.trust-claim{ font-size:.9375rem; color:var(--color-ink); line-height:1.5 }
.trust-claim b{ color:var(--color-ink-strong); font-weight:600 }
.trust-badge{ display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center }
.trust-badge .mark{
  height:2rem; display:grid; place-items:center; color:var(--color-ink-muted);
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
}
.trust-badge .lab{ font-size:.6875rem; color:var(--color-ink-faint); letter-spacing:.06em; text-transform:uppercase }

/* ---------------------------------------------------------------------------
   7. Spotlight（单一新品聚焦）
   --------------------------------------------------------------------------- */
.spotlight{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center }
.spotlight-media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius-card); border:var(--rule-hair);
  background:var(--color-paper-3);
}
.spotlight-media img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform var(--duration-slow) var(--ease-out-soft) }
.spotlight-media:hover img{ transform:scale(1.06) }
.spotlight-flag{
  position:absolute; top:1rem; left:1rem; z-index:1;
  background:var(--color-accent); color:var(--color-accent-ink);
  font-size:.6875rem; font-weight:700; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; padding:.4rem .8rem; border-radius:var(--radius-pill);
}
.spotlight-body h2{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-display); line-height:var(--leading-display);
  letter-spacing:var(--tracking-display); color:var(--color-ink-strong);
  text-wrap:balance; max-width:20ch;
}
.spotlight-body p{ margin-top:1.25rem; color:var(--color-ink-muted); max-width:42ch }
.spotlight-facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  margin:1.75rem 0; background:var(--color-rule);
  border:var(--rule-hair); border-radius:var(--radius-card); overflow:hidden;
}
.spotlight-facts > div{ background:var(--color-paper); padding:.9rem 1.1rem }
.spotlight-facts dt{ font-size:.6875rem; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-ink-faint) }
.spotlight-facts dd{ margin-top:.25rem; font-family:var(--font-mono); font-size:.8125rem; color:var(--color-ink-strong) }

/* ---------------------------------------------------------------------------
   8. Family grid（产品家族卡）
   --------------------------------------------------------------------------- */
.family-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem }
.family-card{
  position:relative; display:flex; flex-direction:column;
  padding:1.5rem; border-radius:var(--radius-card);
  background:var(--color-paper); border:var(--rule-hair);
  box-shadow:var(--shadow-card);
  transition:transform var(--duration-normal) var(--ease-out-soft),
             box-shadow var(--duration-normal) var(--ease-out-soft),
             border-color var(--duration-normal) var(--ease-out-soft);
}
.family-card:hover{
  transform:translateY(-2px); box-shadow:var(--shadow-lift);
  border-color:var(--color-paper-4);
}
.family-media{
  aspect-ratio:16/10; margin:.25rem -.25rem 1.1rem; overflow:hidden;
  border-radius:16px; background:var(--color-paper-3);
}
.family-media img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.14); transition:transform var(--duration-slow) var(--ease-out-soft) }
.family-card:hover .family-media img{ transform:scale(1.18) }
.family-name{
  font-family:var(--font-display); font-weight:600; font-size:1.125rem;
  color:var(--color-ink-strong); letter-spacing:var(--tracking-heading);
}
.family-desc{ margin-top:.4rem; font-size:.8125rem; color:var(--color-ink-muted); line-height:1.5 }
.family-link{
  margin-top:auto; padding-top:1.1rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8125rem; font-weight:600; color:var(--color-brand-navy);
}
.family-link svg{ width:15px; height:15px; color:var(--color-accent);
  transition:transform var(--duration-fast) var(--ease-out-soft) }
.family-card:hover .family-link svg{ transform:rotate(3deg) translateX(2px) }
.family-count{
  margin-left:auto; font-family:var(--font-mono); font-size:.6875rem;
  color:var(--color-ink-faint); background:var(--color-paper-2);
  padding:.2rem .55rem; border-radius:var(--radius-pill);
}

/* ---------------------------------------------------------------------------
   9. Scenario grid（应用场景）
   --------------------------------------------------------------------------- */
.scenario-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem }
.scenario{ position:relative; overflow:hidden; border-radius:var(--radius-card); aspect-ratio:3/4; display:block }
.scenario img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform var(--duration-slow) var(--ease-out-soft) }
.scenario:hover img{ transform:scale(1.14) }
.scenario::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(7,27,44,.85) 100%);
}
.scenario-label{
  position:absolute; inset:auto 0 0 0; z-index:1; padding:1.25rem;
  color:#fff;
}
.scenario-label b{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.0625rem }
.scenario-label span{ display:block; margin-top:.25rem; font-size:.75rem; color:var(--color-stage-muted) }

/* ---------------------------------------------------------------------------
   10. Factory video
   --------------------------------------------------------------------------- */
.factory{ display:grid; grid-template-columns:1.5fr .9fr; gap:2.5rem; align-items:stretch }
.factory-video{
  position:relative; border-radius:var(--radius-card); overflow:hidden;
  background:var(--color-brand-navy); min-height:22rem; border:var(--rule-hair);
}
.factory-video img{ width:100%; height:100%; object-fit:cover; opacity:.9 }
.factory-play{
  position:absolute; inset:0; display:grid; place-items:center; z-index:1;
  background:rgba(7,27,44,.28);
}
.factory-play button{
  width:4.5rem; height:4.5rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.94); color:var(--color-brand-navy);
  border:0; display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow-pop);
  transition:transform var(--duration-fast) var(--ease-out-soft),
             background var(--duration-fast) var(--ease-out-soft);
}
.factory-play button:hover{ transform:scale(1.06); background:var(--color-accent) }
.factory-play svg{ width:20px; height:20px; margin-left:2px }
.factory-dur{
  position:absolute; right:1rem; bottom:1rem; z-index:1;
  font-family:var(--font-mono); font-size:.75rem; color:#fff;
  background:rgba(7,27,44,.72); padding:.25rem .6rem; border-radius:var(--radius-pill);
}
.factory-aside{ display:flex; flex-direction:column; justify-content:center }
.factory-stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--color-rule); border:var(--rule-hair);
  border-radius:var(--radius-card); overflow:hidden; margin-top:1.5rem;
}
.factory-stats > div{ background:var(--color-paper); padding:1rem 1.1rem }
.factory-stats b{ display:block; font-family:var(--font-display); font-size:1.375rem; font-weight:600; color:var(--color-ink-strong) }
.factory-stats span{ display:block; margin-top:.15rem; font-size:.75rem; color:var(--color-ink-muted) }
.factory-compliance{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.25rem }
.factory-compliance span{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em;
  border:var(--rule-hair); border-radius:var(--radius-pill);
  padding:.3rem .7rem; color:var(--color-ink-muted);
}

/* ---------------------------------------------------------------------------
   11. Cert wall（"Receipts, not promises."）
   --------------------------------------------------------------------------- */
.certs{ display:grid; grid-template-columns:repeat(4,minmin(0,1fr)); grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem }
.cert-step{ display:flex; flex-direction:column; gap:.75rem }
.cert-step-head{ display:flex; align-items:baseline; gap:.6rem }
.cert-step-num{
  font-family:var(--font-mono); font-size:.6875rem; color:var(--color-accent-strong);
  letter-spacing:var(--tracking-mono);
}
.cert-step-title{ font-size:.875rem; font-weight:600; color:var(--color-ink-strong) }
.cert-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem;
}
.cert-thumb{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border:var(--rule-hair); border-radius:14px; background:var(--color-paper-2);
  cursor:zoom-in; display:block; padding:0;
}
.cert-thumb img{ width:100%; height:100%; object-fit:cover;
  transition:transform var(--duration-slow) var(--ease-out-soft) }
.cert-thumb:hover img{ transform:scale(1.08) }
.cert-thumb::after{
  content:"+"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.25rem; color:#fff; opacity:0;
  background:rgba(7,27,44,.45);
  transition:opacity var(--duration-fast) var(--ease-out-soft);
}
.cert-thumb:hover::after{ opacity:1 }

/* ---------------------------------------------------------------------------
   12. CTA band（stage 反转）
   --------------------------------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden }
.cta-band .container{
  display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:center;
}
.cta-band h2{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-hero); line-height:var(--leading-display);
  letter-spacing:var(--tracking-display); color:#fff; text-wrap:balance; max-width:20ch;
}
.cta-band p{ margin-top:1rem; color:var(--color-stage-muted); max-width:42ch }
.cta-actions{ display:flex; flex-direction:column; gap:.75rem }
.cta-sla{
  margin-top:1rem; display:flex; flex-direction:column; gap:.5rem;
  font-size:.8125rem; color:var(--color-stage-muted);
}
.cta-sla li{ display:flex; gap:.55rem; align-items:flex-start }
.cta-sla svg{ width:15px; height:15px; color:var(--color-accent); flex:none; margin-top:2px }

/* ---------------------------------------------------------------------------
   13. 产品详情
   --------------------------------------------------------------------------- */
.pd-layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.75rem; align-items:start }

.pd-gallery{ position:sticky; top:6.5rem }
.pd-stage{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius-card); background:var(--color-paper-3);
  border:var(--rule-hair);
}
.pd-stage img{ width:100%; height:100%; object-fit:cover }
/* 没有实拍图时的舞台占位：类别剪影，和列表卡 .pc-visual 同一套视觉 */
.pd-silhouette{ width:100%; height:100%; display:grid; place-items:center }
.pd-silhouette .ticon{ width:190px; height:190px }
.pd-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:2.5rem; height:2.5rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.94); border:var(--rule-hair);
  display:grid; place-items:center; cursor:pointer; color:var(--color-ink-strong);
  box-shadow:var(--shadow-card);
  transition:background var(--duration-fast) var(--ease-out-soft),
             color var(--duration-fast) var(--ease-out-soft);
}
.pd-nav:hover{ background:var(--color-accent); color:var(--color-accent-ink) }
.pd-nav svg{ width:18px; height:18px }
.pd-nav.prev{ left:.875rem }
.pd-nav.next{ right:.875rem }
.pd-count{
  position:absolute; right:.875rem; bottom:.875rem; z-index:2;
  font-family:var(--font-mono); font-size:.75rem; color:#fff;
  background:rgba(7,27,44,.72); padding:.25rem .6rem; border-radius:var(--radius-pill);
}
.pd-thumbs{ display:flex; gap:.5rem; margin-top:.75rem; overflow-x:auto; padding-bottom:.25rem }
.pd-thumb{
  flex:none; width:5.5rem; aspect-ratio:1; overflow:hidden; padding:0; cursor:pointer;
  border-radius:12px; border:1px solid var(--color-rule); background:var(--color-paper-2);
  transition:border-color var(--duration-fast) var(--ease-out-soft);
}
.pd-thumb img{ width:100%; height:100%; object-fit:cover }
.pd-thumb[aria-current="true"]{ border-color:var(--color-brand-navy); box-shadow:0 0 0 1px var(--color-brand-navy) }

/* 尺寸药丸 */
.pd-info .eyebrow{ color:var(--color-accent-strong) }
.pd-title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-display); line-height:var(--leading-display);
  letter-spacing:var(--tracking-display); color:var(--color-ink-strong);
  margin-top:.75rem; text-wrap:balance;
}
.pd-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.875rem;
  font-size:.8125rem; color:var(--color-ink-muted);
}
.pd-meta .sku{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; color:var(--color-ink-faint); text-transform:uppercase }
.pd-lede{ margin-top:1.25rem; color:var(--color-ink-muted); line-height:1.6; max-width:44ch }

.size-picker{ margin-top:1.5rem }
.size-picker-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom:.6rem;
}
.size-picker-head b{ font-size:.875rem; color:var(--color-ink-strong); font-weight:600 }
.size-picker-head span{ font-size:.75rem; color:var(--color-ink-faint) }
.size-pills{ display:flex; flex-wrap:wrap; gap:.4rem }
.size-pill{
  font-family:var(--font-mono); font-size:.8125rem;
  padding:.45rem .9rem; border-radius:var(--radius-pill);
  border:var(--rule-hair); background:var(--color-paper);
  color:var(--color-ink-muted); cursor:pointer;
  transition:background var(--duration-fast) var(--ease-out-soft),
             color var(--duration-fast) var(--ease-out-soft),
             border-color var(--duration-fast) var(--ease-out-soft);
}
.size-pill:hover{ border-color:var(--color-brand-navy); color:var(--color-ink-strong) }
.size-pill[aria-pressed="true"]{ background:var(--color-brand-navy); color:#fff; border-color:var(--color-brand-navy) }
.size-pill.is-na{ opacity:.45; cursor:not-allowed; text-decoration:line-through }

.pd-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem }

.pd-facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  margin-top:2rem; background:var(--color-rule);
  border:var(--rule-hair); border-radius:var(--radius-card); overflow:hidden;
}
.pd-facts > div{ background:var(--color-paper); padding:.9rem 1.1rem }
.pd-facts dt{ font-size:.6875rem; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-ink-faint) }
.pd-facts dd{ margin-top:.2rem; font-size:.9375rem; color:var(--color-ink-strong) }

/* 构造细节图集 */
.detail-strip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.75rem; margin-top:.875rem }
.detail-strip figure{ margin:0 }
.detail-strip .frame{
  aspect-ratio:1; overflow:hidden; border-radius:14px;
  border:var(--rule-hair); background:var(--color-paper-3);
}
.detail-strip .frame img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.05); transition:transform var(--duration-slow) var(--ease-out-soft) }
.detail-strip figure:hover .frame img{ transform:scale(1.14) }
.detail-strip figcaption{ margin-top:.4rem; font-size:.6875rem; color:var(--color-ink-faint); line-height:1.4 }

/* 跨尺寸参数表 */
.spec-table-wrap{ overflow-x:auto; border:var(--rule-hair); border-radius:var(--radius-card) }
.spec-table{ width:100%; border-collapse:collapse; font-size:.8125rem; min-width:640px }
.spec-table caption{
  caption-side:top; text-align:left; padding:.9rem 1.25rem;
  font-size:.75rem; color:var(--color-ink-faint);
  border-bottom:var(--rule-hair); background:var(--color-paper-2);
}
.spec-table thead th{
  text-align:left; padding:.85rem 1.25rem;
  background:var(--color-paper-2);
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em;
  color:var(--color-ink-muted); font-weight:600;
  border-bottom:var(--rule-hair); white-space:nowrap;
}
.spec-table th.row-label{
  text-align:left; width:22%; padding:.8rem 1.25rem;
  font-weight:600; color:var(--color-ink-strong); background:var(--color-paper);
  border-bottom:1px solid var(--color-paper-3); vertical-align:top;
}
.spec-table td{
  padding:.8rem 1.25rem; border-bottom:1px solid var(--color-paper-3);
  color:var(--color-ink); vertical-align:top; font-family:var(--font-mono); font-size:.78125rem;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td{ border-bottom:0 }
.spec-table tr.is-specific td{ background:var(--color-accent-soft) }
.spec-table tr.is-specific th{ color:var(--color-accent-strong) }
.spec-table .na{ color:var(--color-ink-faint); font-style:normal }

/* 演示视频卡 */
.demo-video{
  position:relative; border-radius:var(--radius-card); overflow:hidden;
  border:var(--rule-hair); background:var(--color-brand-navy); aspect-ratio:16/9;
}
.demo-video img{ width:100%; height:100%; object-fit:cover; opacity:.85 }
.demo-video button.play{
  position:absolute; inset:0; margin:auto; width:3.75rem; height:3.75rem;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.94);
  border:0; cursor:pointer; display:grid; place-items:center;
  color:var(--color-brand-navy); box-shadow:var(--shadow-pop);
}
.demo-meta{
  display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:.875rem;
  font-size:.75rem; color:var(--color-ink-muted);
}
.demo-meta span b{ color:var(--color-ink-strong); font-weight:600 }

/* ---------------------------------------------------------------------------
   14. 集合页（筛选器 + 选型指南）
   --------------------------------------------------------------------------- */
.collection-layout{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:2.5rem; align-items:start }
/* 5 个 facet（直径段/涂层/刃数/旋向/几何）合起来 25+ 个勾选项，
   不加高度上限会把 sticky 侧栏撑得比视口还高 */
.filters{ position:sticky; top:6.5rem; max-height:calc(100vh - 8rem); overflow-y:auto; scrollbar-width:thin }
.filters-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.75rem; border-bottom:var(--rule-hair); margin-bottom:1rem;
}
.filters-head b{ font-size:.875rem; color:var(--color-ink-strong) }
.filters-clear{ font-size:.75rem; color:var(--color-ink-faint); background:none; border:0; cursor:pointer; text-decoration:underline }
.filters-clear:hover{ color:var(--color-ink) }
.facet{ margin-bottom:1.25rem }
.facet-title{ font-size:.6875rem; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-ink-faint); font-weight:600; margin-bottom:.5rem }
.facet-opt{
  position:relative;
  display:flex; align-items:center; gap:.6rem; padding:.25rem 0;
  font-size:.8125rem; color:var(--color-ink); cursor:pointer;
}
/* 原生 checkbox 会跟自绘的 .facet-box 叠成两个框 —— 隐藏它、只保留命中区域 */
.facet-opt input{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1.0625rem; height:1.0625rem; margin:0; padding:0;
  opacity:0; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.facet-opt:hover{ color:var(--color-ink-strong) }
.facet-box{
  flex:none; width:1.0625rem; height:1.0625rem; border-radius:4px;
  border:1px solid var(--color-paper-4); background:var(--color-paper);
  display:grid; place-items:center;
  transition:background var(--duration-fast) var(--ease-out-soft),
             border-color var(--duration-fast) var(--ease-out-soft);
}
.facet-box svg{ width:11px; height:11px; color:#fff; opacity:0;
  transition:opacity var(--duration-fast) var(--ease-out-soft) }
.facet-opt input:checked + .facet-box{
  background:var(--color-brand-navy); border-color:var(--color-brand-navy);
}
.facet-opt input:checked + .facet-box svg{ opacity:1 }
.facet-opt input:focus-visible + .facet-box{ outline:2px solid var(--color-accent); outline-offset:2px }
.facet-count{
  margin-left:auto; font-family:var(--font-mono); font-size:.6875rem; color:var(--color-ink-faint);
}

.card-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem }
.card-grid.is-empty > p{
  grid-column:1/-1; padding:3rem 1rem; text-align:center;
  color:var(--color-ink-faint); border:1px dashed var(--color-rule);
  border-radius:var(--radius-card);
}

/* 选型指南（How to specify） */
.guide-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem }
.guide-card{
  padding:1.5rem; border-radius:var(--radius-card);
  border:var(--rule-hair); background:var(--color-paper);
  box-shadow:var(--shadow-card);
}
.guide-num{
  font-family:var(--font-mono); font-size:.6875rem; color:var(--color-accent-strong);
  letter-spacing:var(--tracking-mono);
}
.guide-card h3{
  font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
  color:var(--color-ink-strong); margin-top:.5rem;
}
.guide-card p{ margin-top:.5rem; font-size:.8125rem; color:var(--color-ink-muted); line-height:1.55 }

/* 场景匹配 */
.match-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem }
.match-item{
  display:flex; gap:1rem; padding:1.25rem; border:var(--rule-hair);
  border-radius:var(--radius-card); background:var(--color-paper);
}
.match-item svg{ width:22px; height:22px; color:var(--color-accent-strong); flex:none; margin-top:2px }
.match-item b{ display:block; font-size:.9375rem; color:var(--color-ink-strong) }
.match-item p{ margin-top:.3rem; font-size:.8125rem; color:var(--color-ink-muted) }

/* ---------------------------------------------------------------------------
   15. Compare（3 槽 × 13 规格）
   --------------------------------------------------------------------------- */
.compare-bar{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
  padding:1.5rem; border:var(--rule-hair); border-radius:var(--radius-card);
  background:var(--color-paper-2); box-shadow:var(--shadow-card);
  margin-bottom:1.75rem;
}
.compare-slot label{ display:block; font-size:.6875rem; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-ink-faint); font-weight:600; margin-bottom:.4rem }
.compare-select{
  width:100%; height:2.75rem; padding:0 2.25rem 0 .9rem;
  border:var(--rule-hair); border-radius:var(--radius-pill);
  background:var(--color-paper); color:var(--color-ink);
  font-size:.875rem; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-ink-muted) 50%),
                   linear-gradient(135deg,var(--color-ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 1rem) 52%, calc(100% - 1.25rem) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.compare-select:focus-visible{ border-color:var(--color-brand-navy) }
.compare-tools{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.25rem; flex-wrap:wrap;
}
.compare-filter{ display:inline-flex; align-items:center; gap:.6rem; font-size:.8125rem; color:var(--color-ink-muted) }
.compare-reset{
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem;
  border:var(--rule-hair); border-radius:var(--radius-pill);
  background:var(--color-paper); color:var(--color-ink-muted);
  font-size:.8125rem; cursor:pointer;
}
.compare-reset:hover{ color:var(--color-ink-strong); border-color:var(--color-brand-navy) }
.compare-reset svg{ width:14px; height:14px }

.compare-table-wrap{ overflow-x:auto; border:var(--rule-hair); border-radius:var(--radius-card); background:var(--color-paper) }
.compare-table-wrap{ overflow-x:auto; border:var(--rule-hair); border-radius:var(--radius-card) }
.compare-table{ width:100%; border-collapse:collapse; font-size:.8125rem; min-width:760px }
.compare-table th,.compare-table td{
  text-align:left; padding:.9rem 1.25rem; vertical-align:top;
  border-bottom:1px solid var(--color-paper-3);
}
.compare-table thead th{
  position:sticky; top:0; z-index:1;
  background:var(--color-paper-2);
  border-bottom:var(--rule-hair);
}
.compare-table thead .slot-head{ min-width:11rem }
.compare-table thead .slot-head b{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:1rem; color:var(--color-ink-strong); letter-spacing:var(--tracking-heading);
}
.compare-table thead .slot-head .model{
  display:block; margin-top:.15rem; font-family:var(--font-mono);
  font-size:.75rem; color:var(--color-accent-strong); letter-spacing:.06em;
}
.compare-table thead .slot-head a{
  display:inline-block; margin-top:.3rem; font-size:.75rem;
  color:var(--color-brand-navy); font-weight:600; text-decoration:underline;
}
.compare-table td.row-label{
  font-weight:600; color:var(--color-ink-strong); width:14rem;
  background:var(--color-paper);
}
.compare-table td.val{ font-family:var(--font-mono); font-size:.8125rem; color:var(--color-ink) }
.compare-table tr.is-empty-row td{ color:var(--color-ink-faint); font-style:italic }
.compare-table tbody tr:last-child td{ border-bottom:0 }

/* ---------------------------------------------------------------------------
   16. FAQ —— 原生 <details>，零 JS
   --------------------------------------------------------------------------- */
.faq-list{ max-width:50rem }
.faq-item{ border-bottom:var(--rule-hair) }
.faq-item:first-child{ border-top:var(--rule-hair) }
.faq-item > summary{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.25rem 0; list-style:none; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
  color:var(--color-ink-strong); line-height:1.3;
}
.faq-item > summary::-webkit-details-marker{ display:none }
.faq-item > summary .faq-num{
  flex:none; font-family:var(--font-mono); font-size:.75rem;
  color:var(--color-ink-faint); padding-top:.2rem; width:1.75rem;
}
.faq-item > summary .faq-q{ flex:1; min-width:0 }
.faq-item > summary .faq-icon{
  flex:none; width:1.5rem; height:1.5rem; display:grid; place-items:center;
  border:var(--rule-hair); border-radius:var(--radius-pill);
  color:var(--color-ink-muted); margin-top:.05rem;
  transition:transform var(--duration-normal) var(--ease-out-soft),
             background var(--duration-normal) var(--ease-out-soft),
             color var(--duration-normal) var(--ease-out-soft);
}
.faq-item > summary .faq-icon svg{ width:14px; height:14px }
.faq-item[open] > summary .faq-icon{
  transform:rotate(45deg); background:var(--color-accent); color:var(--color-accent-ink);
}
.faq-item[open] > summary{ color:var(--color-brand-navy) }
.faq-a{ padding:0 0 1.25rem 2.75rem; color:var(--color-ink-muted); line-height:1.7; font-size:.9375rem }
.faq-a p + p{ margin-top:.75rem }

/* ---------------------------------------------------------------------------
   17. Article / prose + TOC
   --------------------------------------------------------------------------- */
.article-layout{ display:grid; grid-template-columns:minmax(0,1fr) 18rem; gap:3.5rem; align-items:start }
.article-head{ margin-bottom:2.5rem; padding-bottom:2rem; border-bottom:var(--rule-hair) }
.article-title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-hero); line-height:var(--leading-display);
  letter-spacing:var(--tracking-display); color:var(--color-ink-strong);
  text-wrap:balance; max-width:26ch;
}
.article-sub{ margin-top:1rem; font-size:1.0625rem; color:var(--color-ink-muted); line-height:1.6; max-width:56ch }
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem;
  margin-top:1.5rem; font-size:.8125rem; color:var(--color-ink-muted);
}
.article-meta time{ font-weight:600; color:var(--color-ink-strong) }
.article-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--color-ink-faint) }

/* TOC */
.toc{
  position:sticky; top:6.5rem;
  border-left:var(--rule-hair); padding-left:1.25rem;
}
.toc-title{
  font-size:.6875rem; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--color-ink-faint); font-weight:600;
  margin-bottom:.75rem;
}
.toc-list a{
  display:block; padding:.3rem 0; font-size:.8125rem;
  color:var(--color-ink-muted); line-height:1.4;
  border-left:2px solid transparent; padding-left:.6rem; margin-left:-calc(.6rem + 2px);
  transition:color var(--duration-fast) var(--ease-out-soft),
             border-color var(--duration-fast) var(--ease-out-soft);
}
.toc-list a:hover{ color:var(--color-ink-strong) }
.toc-list a.is-current{ color:var(--color-brand-navy); border-left-color:var(--color-accent); font-weight:600 }
.toc-list .lvl-3{ padding-left:1.2rem }

/* Prose */
.prose{ font-size:.9375rem; color:var(--color-ink); line-height:1.75; max-width:66ch }
.prose h2{
  font-family:var(--font-display); font-weight:700; font-size:var(--text-title);
  line-height:var(--leading-heading); letter-spacing:var(--tracking-heading);
  color:var(--color-ink-strong); margin:2.5rem 0 1rem;
  padding-top:1rem; scroll-margin-top:6.5rem;
}
.prose h3{
  font-family:var(--font-display); font-weight:600; font-size:1.125rem;
  color:var(--color-ink-strong); margin:2rem 0 .75rem;
  scroll-margin-top:6.5rem;
}
.prose p{ margin-bottom:1.1rem }
.prose p:first-child{ font-size:1.0625rem; color:var(--color-ink-strong) }
.prose ul,.prose ol{ margin-bottom:1.1rem; padding-left:1.5rem }
.prose ul{ list-style:disc }
.prose ol{ list-style:decimal }
.prose li{ margin-bottom:.5rem; color:var(--color-ink-muted) }
.prose li::marker{ color:var(--color-accent-strong) }
.prose li > b, .prose li > strong{ color:var(--color-ink-strong) }
.prose a{ color:var(--color-brand-navy); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--color-accent);
  text-underline-offset:3px;
}
.prose a:hover{ color:var(--color-accent-strong) }
.prose strong{ color:var(--color-ink-strong) }
.prose kbd{
  font-family:var(--font-mono); font-size:.8125em;
  border:var(--rule-hair); border-bottom-width:2px; border-radius:5px;
  padding:.05rem .35rem; background:var(--color-paper-2); color:var(--color-ink-strong);
}
.prose blockquote{
  margin:1.5rem 0; padding:.25rem 0 .25rem 1.25rem;
  border-left:3px solid var(--color-accent);
  color:var(--color-ink-strong); font-weight:500;
}
.prose figure{ margin:2rem 0 }
.prose figure img{ border-radius:var(--radius-card); border:var(--rule-hair) }
.prose figcaption{ margin-top:.6rem; font-size:.75rem; color:var(--color-ink-faint); text-align:center }
/* 富文本编辑器直出的裸 img / iframe：必须限宽，否则一张原图会把版面撑爆 */
.prose img{ max-width:100%; height:auto; display:block; margin:1.5rem 0;
  border-radius:var(--radius-card); border:var(--rule-hair) }
.prose iframe{ display:block; width:100%; aspect-ratio:16/9; border:0;
  border-radius:var(--radius-card); margin:2rem 0 }
.prose pre{ background:var(--color-paper-2); border:var(--rule-hair); border-radius:var(--radius-card);
  padding:1rem 1.25rem; overflow-x:auto; margin:1.5rem 0 }
.prose pre code{ font-family:var(--font-mono); font-size:.8125rem; background:none; padding:0 }
.prose code{ font-family:var(--font-mono); font-size:.875em; background:var(--color-paper-2);
  border:var(--rule-hair); border-radius:4px; padding:.1rem .3rem }
.prose table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.8125rem;
  border:var(--rule-hair); border-radius:var(--radius-card); overflow:hidden }
.prose th,.prose td{ text-align:left; padding:.7rem 1rem; border-bottom:1px solid var(--color-paper-3); vertical-align:top }
.prose th{ background:var(--color-paper-2); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--color-ink-muted) }
.prose tbody tr:last-child td{ border-bottom:0 }
.prose hr{ margin:2.5rem 0; border:0; border-top:var(--rule-hair) }
.prose dl{ margin-bottom:1.5rem }
.prose dt{ font-weight:600; color:var(--color-ink-strong); margin-top:.75rem }
.prose dd{ margin:.2rem 0 0; color:var(--color-ink-muted) }

/* 文章内嵌 FAQ */
.prose .faq-item{ margin:1rem 0 }

/* 阶段式时间轴（Week 1 → Week 12） */
.timeline{ position:relative; margin:1.5rem 0; padding-left:1.5rem; border-left:1px solid var(--color-rule) }
.timeline-item{ position:relative; padding-bottom:1.75rem }
.timeline-item:last-child{ padding-bottom:0 }
.timeline-item::before{
  content:""; position:absolute; left:calc(-1.5rem - 5px); top:.4rem;
  width:10px; height:10px; border-radius:50%;
  background:var(--color-accent); box-shadow:0 0 0 3px var(--color-accent-soft);
}
.timeline-when{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-accent-strong); font-weight:600;
}
.timeline-item h4{ font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--color-ink-strong); margin-top:.2rem }
.timeline-item p{ margin-top:.3rem; color:var(--color-ink-muted); font-size:.875rem }

/* 作者卡 */
.author-card{
  display:flex; align-items:center; gap:1rem;
  margin-top:2.5rem; padding:1.25rem;
  border:var(--rule-hair); border-radius:var(--radius-card);
  background:var(--color-paper-2);
}
.author-card img{ width:3rem; height:3rem; border-radius:50%; object-fit:cover }
.author-card b{ display:block; font-size:.9375rem; color:var(--color-ink-strong) }
.author-card span{ display:block; font-size:.75rem; color:var(--color-ink-faint); margin-top:.1rem }

/* 相关文章 */
.related-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem }
.related-card{ display:flex; flex-direction:column; padding:1.4rem;
  border:var(--rule-hair); border-radius:var(--radius-card); background:var(--color-paper);
  box-shadow:var(--shadow-card);
  transition:transform var(--duration-normal) var(--ease-out-soft),
             box-shadow var(--duration-normal) var(--ease-out-soft);
}
.related-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift) }
.related-tag{ font-size:.6875rem; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-accent-strong); font-weight:600 }
.related-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:var(--color-ink-strong); margin-top:.6rem; line-height:1.3 }
.related-card p{ margin-top:.5rem; font-size:.8125rem; color:var(--color-ink-muted); line-height:1.5 }
.related-card time{ margin-top:auto; padding-top:.9rem; font-size:.75rem; color:var(--color-ink-faint) }

/* ---------------------------------------------------------------------------
   18. 表单（询盘）
   --------------------------------------------------------------------------- */
.form-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:start }
.form-aside h2{
  font-family:var(--font-display); font-weight:700; font-size:var(--text-display);
  line-height:var(--leading-display); letter-spacing:var(--tracking-display);
  color:var(--color-ink-strong); text-wrap:balance;
}
.form-aside p{ margin-top:1rem; color:var(--color-ink-muted); max-width:40ch }
.form-steps{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.75rem }
.form-step{ display:flex; gap:.9rem; align-items:flex-start }
.form-step-num{
  flex:none; width:2rem; height:2rem; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.75rem; font-weight:600;
  background:var(--color-brand-navy); color:#fff;
}
.form-step b{ display:block; font-size:.9375rem; color:var(--color-ink-strong) }
.form-step span{ display:block; font-size:.8125rem; color:var(--color-ink-muted); margin-top:.1rem }

.inquiry{
  padding:2rem; border-radius:var(--radius-card);
  border:var(--rule-hair); background:var(--color-paper);
  box-shadow:var(--shadow-card);
}
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
.field{ display:flex; flex-direction:column; gap:.35rem }
.field.full{ grid-column:1 / -1 }
.field label{
  font-size:.75rem; font-weight:600; color:var(--color-ink-strong);
}
.field label .req{ color:var(--color-accent-strong) }
.field input,.field select,.field textarea{
  height:2.75rem; padding:0 .9rem;
  border:var(--rule-hair); border-radius:12px;
  background:var(--color-paper); color:var(--color-ink);
  font-size:.9375rem; font-family:var(--font-body);
  transition:border-color var(--duration-fast) var(--ease-out-soft),
             box-shadow var(--duration-fast) var(--ease-out-soft);
}
.field textarea{ height:auto; min-height:8rem; padding:.75rem .9rem; resize:vertical }
.field select{
  appearance:none; cursor:pointer; padding-right:2.25rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-ink-muted) 50%),
                   linear-gradient(135deg,var(--color-ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 1rem) 52%, calc(100% - 1.25rem) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--color-brand-navy);
  box-shadow:0 0 0 3px var(--color-accent-soft);
}
.field .hint{ font-size:.75rem; color:var(--color-ink-faint) }
.form-note{
  grid-column:1 / -1; margin-top:.5rem;
  font-size:.75rem; color:var(--color-ink-faint); line-height:1.5;
}
.form-msg{
  grid-column:1 / -1; padding:.9rem 1rem; border-radius:12px;
  font-size:.875rem; display:none;
}
.form-msg.is-ok{
  display:block; background:var(--color-accent-soft);
  border:1px solid var(--color-accent); color:var(--color-accent-strong);
}
.form-msg.is-err{
  display:block; background:#fdecec;
  border:1px solid #dc6e6e; color:#a33;
}
.form-foot{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.25rem }

/* ---------------------------------------------------------------------------
   19. Contact info / map
   --------------------------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem }
.contact-card{
  padding:1.5rem; border-radius:var(--radius-card);
  border:var(--rule-hair); background:var(--color-paper); box-shadow:var(--shadow-card);
}
.contact-card .ic{
  width:2.5rem; height:2.5rem; border-radius:var(--radius-pill);
  display:grid; place-items:center; margin-bottom:1rem;
  background:var(--color-brand-navy); color:#fff;
}
.contact-card .ic svg{ width:18px; height:18px }
.contact-card b{ display:block; font-size:.6875rem; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-ink-faint); font-weight:600 }
.contact-card .val{ display:block; margin-top:.35rem; font-size:.9375rem; color:var(--color-ink-strong); word-break:break-word }
.contact-card a.val:hover{ color:var(--color-accent-strong) }

.map-wrap{
  margin-top:1.5rem; border-radius:var(--radius-card); overflow:hidden;
  border:var(--rule-hair); aspect-ratio:21/6; background:var(--color-paper-2);
}
.map-wrap iframe{ width:100%; height:100%; border:0; display:block }

/* ---------------------------------------------------------------------------
   20. Gallery / VR
   --------------------------------------------------------------------------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem }
.gallery-card{ display:block; overflow:hidden; border-radius:var(--radius-card); position:relative; aspect-ratio:3/2 }
.gallery-card img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.05); transition:transform var(--duration-slow) var(--ease-out-soft) }
.gallery-card:hover img{ transform:scale(1.14) }
.gallery-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(7,27,44,.85)) }
.gallery-label{ position:absolute; inset:auto 0 0 0; z-index:1; padding:1.25rem; color:#fff }
.gallery-label b{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.125rem }
.gallery-label span{ display:block; margin-top:.2rem; font-size:.75rem; color:var(--color-stage-muted) }

.pano-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem }
.pano-card{ overflow:hidden; border-radius:var(--radius-card); border:var(--rule-hair); background:var(--color-brand-navy) }
.pano-frame{ aspect-ratio:16/10; background:var(--color-paper-3) }
.pano-frame img{ width:100%; height:100%; object-fit:cover }
.pano-body{ padding:1.4rem 1.5rem }
.pano-body b{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.125rem; color:var(--color-ink-strong) }
.pano-body p{ margin-top:.4rem; font-size:.8125rem; color:var(--color-ink-muted) }

/* ---------------------------------------------------------------------------
   21. Product list page（总目录）
   --------------------------------------------------------------------------- */
.range-group{ margin-bottom:3rem }
.range-group-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:.85rem; margin-bottom:1.25rem; border-bottom:var(--rule-hair);
}
.range-group-head h2{
  font-family:var(--font-display); font-weight:700; font-size:var(--text-title);
  letter-spacing:var(--tracking-heading); color:var(--color-ink-strong);
}
.range-group-head .count{ font-family:var(--font-mono); font-size:.75rem; color:var(--color-ink-faint) }
.range-intro{ font-size:.875rem; color:var(--color-ink-muted); margin-bottom:1.25rem; max-width:60ch }
.range-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem }

.product-card{
  display:flex; flex-direction:column; padding:1.5rem;
  border:var(--rule-hair); border-radius:var(--radius-card); background:var(--color-paper);
  box-shadow:var(--shadow-card);
  transition:transform var(--duration-normal) var(--ease-out-soft),
             box-shadow var(--duration-normal) var(--ease-out-soft);
}
.product-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift) }
.product-card .model{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-accent-strong); font-weight:600;
}
.product-card h3{
  font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
  color:var(--color-ink-strong); margin-top:.4rem; line-height:1.3;
}
.product-card .desc{ margin-top:.5rem; font-size:.8125rem; color:var(--color-ink-muted); line-height:1.5 }
.product-card .spec-mini{
  display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.9rem;
}
.product-card .spec-mini span{
  font-family:var(--font-mono); font-size:.6875rem;
  padding:.2rem .55rem; border-radius:var(--radius-pill);
  background:var(--color-paper-2); color:var(--color-ink-muted);
}
.product-card .foot{
  margin-top:auto; padding-top:1rem;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.8125rem; font-weight:600; color:var(--color-brand-navy);
}
.product-card .foot svg{ width:15px; height:15px; color:var(--color-accent) }

/* ---------------------------------------------------------------------------
   22. Application page
   --------------------------------------------------------------------------- */
.app-deliver{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--color-rule); border:var(--rule-hair);
  border-radius:var(--radius-card); overflow:hidden;
}
.app-deliver > div{ background:var(--color-paper); padding:1.25rem 1.5rem; display:flex; gap:1rem }
.app-deliver .n{
  flex:none; font-family:var(--font-mono); font-size:.75rem; color:var(--color-accent-strong);
}
.app-deliver b{ display:block; font-size:.9375rem; color:var(--color-ink-strong) }
.app-deliver span{ display:block; margin-top:.25rem; font-size:.8125rem; color:var(--color-ink-muted) }

/* ---------------------------------------------------------------------------
   23. Policy / editorial-policy（六节）
   --------------------------------------------------------------------------- */
.policy-list{ max-width:56rem }
.policy-item{ border-bottom:var(--rule-hair); padding:2rem 0 }
.policy-item:first-child{ border-top:var(--rule-hair) }
.policy-num{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:var(--tracking-mono);
  color:var(--color-accent-strong); font-weight:600;
}
.policy-item h2{
  font-family:var(--font-display); font-weight:700; font-size:var(--text-title);
  color:var(--color-ink-strong); margin-top:.4rem; letter-spacing:var(--tracking-heading);
}
.policy-item p{ margin-top:.75rem; color:var(--color-ink-muted); line-height:1.7; max-width:56ch }
.policy-item p + p{ margin-top:.75rem }

/* ---------------------------------------------------------------------------
   24. Certifications 详情页
   --------------------------------------------------------------------------- */
.cert-detail-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem }
.cert-detail{
  padding:1.5rem; border:var(--rule-hair); border-radius:var(--radius-card);
  background:var(--color-paper); box-shadow:var(--shadow-card);
}
.cert-detail .badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em;
  color:var(--color-accent-strong); font-weight:600;
}
.cert-detail h3{ font-family:var(--font-display); font-weight:600; font-size:1.125rem; color:var(--color-ink-strong); margin-top:.5rem }
.cert-detail p{ margin-top:.5rem; font-size:.8125rem; color:var(--color-ink-muted); line-height:1.6 }
.cert-detail img{ margin-top:1rem; border-radius:12px; border:var(--rule-hair) }

/* ---------------------------------------------------------------------------
   25. Footer —— 已搬到 home.css（2026-09-29 按 wintouchtech.com/en/ 改成
   浅色 + 3px accent 顶边 + 5 列栅格），这里的深色版已删，别再改这里。
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   25b. 浮层操作坞（滚动出现）
   参照站是一个固定的 "Get a quote" 药丸：fixed 右下、初始 opacity-0 +
   translate-y-4，滚动后才显示。这里在它左边补一个 WhatsApp 圆钮，
   保留 WhatsApp 入口的同时对齐参照站布局。
   --------------------------------------------------------------------------- */
.float-dock{
  position:fixed; inset-inline:0; bottom:0; z-index:40;
  padding:0 1.25rem 1rem 1rem;
  display:flex; align-items:flex-end; justify-content:center; gap:.625rem;
  pointer-events:none;
  opacity:0; transform:translateY(1rem);
  transition:opacity var(--duration-normal) var(--ease-out-soft),
             transform var(--duration-normal) var(--ease-out-soft);
}
.float-dock.is-visible{ opacity:1; transform:none }
@media (min-width:768px){
  .float-dock{ inset-inline:auto; right:6rem; padding:0; justify-content:flex-end }
}
.float-dock > *{ pointer-events:auto }

/* WhatsApp 圆钮 */
.float-wa{
  display:grid; place-items:center;
  width:3rem; height:3rem; border-radius:var(--radius-pill);
  background:var(--color-accent); color:var(--color-accent-ink);
  box-shadow:var(--shadow-lift);
  transition:transform var(--duration-fast) var(--ease-out-soft),
             background var(--duration-fast) var(--ease-out-soft),
             color var(--duration-fast) var(--ease-out-soft);
}
.float-wa:hover{
  transform:translateY(-.125rem);
  background:var(--color-ink-strong); color:var(--color-brand-white);
}
.float-wa svg{ width:1.375rem; height:1.375rem; flex:none }

/* Get a quote 药丸 —— 参照站同款 */
.float-quote{
  display:inline-flex; align-items:center; gap:.625rem;
  height:3rem; padding-inline:1.5rem;
  border-radius:var(--radius-pill);
  background:var(--color-accent); color:var(--color-accent-ink);
  font-family:var(--font-display); font-size:.875rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
  box-shadow:var(--shadow-lift);
  transition:transform var(--duration-fast) var(--ease-out-soft),
             background var(--duration-fast) var(--ease-out-soft),
             color var(--duration-fast) var(--ease-out-soft);
}
.float-quote:hover{
  transform:translateY(-.125rem);
  background:var(--color-ink-strong); color:var(--color-brand-white);
}
.float-quote svg{ width:1rem; height:1rem; flex:none }
@media (max-width:640px){
  .float-quote .lab{ display:none }
}

/* ---------------------------------------------------------------------------
   26. Search modal（⌘K）
   --------------------------------------------------------------------------- */
.search-backdrop{
  position:fixed; inset:0; z-index:90;
  background:rgba(7,27,44,.5); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center;
  padding-top:12vh; padding-inline:1rem;
}
.search-backdrop[hidden]{ display:none !important }
.search-backdrop.is-open{ display:flex }
.search-panel{
  width:100%; max-width:36rem; background:var(--color-paper);
  border-radius:var(--radius-card); box-shadow:var(--shadow-pop);
  border:var(--rule-hair); overflow:hidden;
}
.search-input-row{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.1rem; border-bottom:var(--rule-hair) }
.search-input-row svg{ width:18px; height:18px; color:var(--color-ink-faint); flex:none }
.search-input{
  flex:1; border:0; outline:none; background:transparent;
  font-size:1.0625rem; color:var(--color-ink-strong); padding:.25rem 0;
}
.search-esc{
  font-family:var(--font-mono); font-size:.6875rem;
  border:var(--rule-hair); border-radius:5px; padding:.15rem .4rem;
  color:var(--color-ink-faint); background:var(--color-paper-2);
}
.search-hint{ padding:.75rem 1.1rem; font-size:.75rem; color:var(--color-ink-faint); border-bottom:var(--rule-hair); background:var(--color-paper-2) }
.search-results{ max-height:56vh; overflow-y:auto; padding:.5rem }
.search-empty{ padding:2rem 1.1rem; text-align:center; color:var(--color-ink-faint); font-size:.875rem }
.search-group-label{
  font-size:.6875rem; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--color-ink-faint); font-weight:600;
  padding:.75rem 1.1rem .4rem;
}
.search-hit{
  display:flex; gap:.75rem; padding:.7rem 1.1rem; border-radius:12px;
  color:var(--color-ink); transition:background var(--duration-fast) var(--ease-out-soft);
}
.search-hit:hover,
.search-hit.is-active{ background:var(--color-paper-2) }
.search-hit .hit-type{
  flex:none; font-family:var(--font-mono); font-size:.6875rem;
  color:var(--color-accent-strong); width:4.5rem;
}
.search-hit .hit-body{ min-width:0; flex:1 }
.search-hit b{ display:block; font-size:.875rem; color:var(--color-ink-strong);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.search-hit span{ display:block; font-size:.75rem; color:var(--color-ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:.1rem }
.search-foot{
  display:flex; align-items:center; gap:1rem; padding:.6rem 1.1rem;
  border-top:var(--rule-hair); background:var(--color-paper-2);
  font-size:.6875rem; color:var(--color-ink-faint);
}
.search-foot kbd{
  font-family:var(--font-mono); border:var(--rule-hair); border-radius:4px;
  padding:.05rem .3rem; background:var(--color-paper);
}

/* ---------------------------------------------------------------------------
   27. Reveal on scroll（渐进增强）
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0; transform:translateY(1rem);
    transition:opacity var(--duration-slow) var(--ease-out-soft),
               transform var(--duration-slow) var(--ease-out-soft);
  }
  .reveal.is-visible{ opacity:1; transform:none }
}

/* ---------------------------------------------------------------------------
   27b. 暗底 stage 标题块 —— 所有内页开头都用（照参照站每个页面第一个 section 是 stage）
   用法：<section class="stage-hero" style="--stage-img:url('/static/.../x.webp')">
           <div class="stage-bg" aria-hidden="true"></div>
           <div class="container"> eyebrow / h1 / lede </div>
         </section>
   背景图走 --stage-img，不写就默认 spotlight.webp。
   .range-stage 是 /products 留下的旧类名，继续保留，别删。
   --------------------------------------------------------------------------- */
.stage-hero,.range-stage{
  position:relative; overflow:hidden;
  min-height:clamp(420px,48vw,640px);
  display:flex; align-items:center;
  background:var(--color-stage);
}
/* 底图 + 两道 stage 渐变（左深右浅 + 底部压暗），照参照站 */
.stage-hero > .stage-bg,.range-stage > .stage-bg{
  position:absolute; inset:0;
  background:var(--color-stage) var(--stage-img, url('/static/wintouch/img/spotlight.webp')) center/cover no-repeat;
}
.stage-hero > .stage-bg::after,.range-stage > .stage-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      var(--color-stage) 0%,
      color-mix(in srgb, var(--color-stage) 96%, transparent) 38%,
      color-mix(in srgb, var(--color-stage) 55%, transparent) 72%,
      color-mix(in srgb, var(--color-stage) 12%, transparent) 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--color-stage) 55%, transparent) 0%,
      transparent 42%);
}
.stage-hero > .container,.range-stage > .container{ position:relative; z-index:1; padding-block:var(--space-section) }

/* 各内页的 stage 底图 —— 用类名挂 --stage-img，别在模板里写三元表达式拼 style */
.stage-products   > .stage-bg{ --stage-img:url('/static/wintouch/img/spotlight.webp') }
.stage-about      > .stage-bg{ --stage-img:url('/static/wintouch/img/factory.webp') }
.stage-quality    > .stage-bg{ --stage-img:url('/static/wintouch/img/scenario-04.webp') }
.stage-resources  > .stage-bg{ --stage-img:url('/static/wintouch/img/tour.webp') }
.stage-applications > .stage-bg{ --stage-img:url('/static/wintouch/img/spotlight.webp') }
.stage-blog       > .stage-bg{ --stage-img:url('/static/wintouch/img/scenario-02.webp') }
.stage-certificates > .stage-bg{ --stage-img:url('/static/wintouch/img/scenario-03.webp') }
/* 单页（/about /manufacturing /quality /oem /faq ...）没单独指定时按 slug 兜底 */
.stage-page       > .stage-bg{ --stage-img:url('/static/wintouch/img/factory.webp') }
/* 模板里写 class="stage-hero stage-page {$page.slug}"，这里给各 slug 配图；
   没列到的 slug 落回 stage-page 的 factory.webp，不会裂图 */
.stage-manufacturing > .stage-bg{ --stage-img:url('/static/wintouch/img/tour.webp') }
.stage-quality       > .stage-bg{ --stage-img:url('/static/wintouch/img/scenario-04.webp') }
.stage-oem           > .stage-bg{ --stage-img:url('/static/wintouch/img/scenario-01.webp') }
.stage-faq           > .stage-bg{ --stage-img:url('/static/wintouch/img/scenario-02.webp') }
.stage-expertise     > .stage-bg{ --stage-img:url('/static/wintouch/img/family-custom.webp') }
.stage-editorial-policy > .stage-bg{ --stage-img:url('/static/wintouch/img/scenario-03.webp') }
.range-eyebrow{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-stage-muted);
}
.range-eyebrow::before{ content:''; width:2.25rem; height:1px; background:var(--color-stage-rule) }
.range-title{
  font-family:var(--font-display); font-weight:700; line-height:1.02;
  font-size:clamp(2.5rem,1.5rem + 3.2vw,4.5rem);
  color:var(--color-stage-ink); margin-top:1.25rem; max-width:46rem;
}
.range-title em{ font-style:normal; color:var(--color-accent) }
.range-lede{
  margin-top:1.25rem; max-width:64ch;
  font-size:1.0625rem; line-height:1.6; color:var(--color-stage-muted);
}
.range-cta{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem }
.range-stats{
  display:flex; flex-wrap:wrap; gap:2rem; margin-top:2rem;
  padding-top:1.25rem; border-top:1px solid var(--color-stage-rule); max-width:34rem;
}
.range-stats > div{ display:flex; flex-direction:column; gap:.125rem }
.range-stats dt{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-stage-faint);
}
.range-stats dd{ margin:0; font-family:var(--font-display); font-size:1.5rem;
  font-weight:700; color:var(--color-stage-ink) }

/* 紧凑产品卡 —— 无实拍图，用类别剪影占位，避免空 img 撑出巨大空白 */
.prod-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem }
.prod-card{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--radius-card); border:1px solid var(--color-rule);
  background:var(--color-paper); box-shadow:var(--shadow-card);
  color:inherit; text-decoration:none; cursor:pointer;
  transition:transform var(--duration-normal) var(--ease-out-soft),
             box-shadow var(--duration-normal) var(--ease-out-soft);
}
.prod-card:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }
.prod-card:hover{ transform:translateY(-.25rem); box-shadow:var(--shadow-lift) }
.pc-top{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.625rem 1rem; border-bottom:1px solid var(--color-rule);
}
.pc-code{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-ink-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.pc-arrow{
  flex:none; color:var(--color-ink-muted);
  transition:color var(--duration-fast) var(--ease-out-soft),
             transform var(--duration-fast) var(--ease-out-soft);
}
.prod-card:hover .pc-arrow{ color:var(--color-accent); transform:translate(2px,-2px) }
.pc-visual{
  display:flex; align-items:center; justify-content:center;
  padding:1.125rem 1rem; background:var(--color-paper-2);
}
.pc-visual .ticon{ width:64px; height:64px; flex:none }
.pc-body{ flex:1 1 auto; padding:.875rem 1rem .5rem; min-width:0 }
.pc-line{
  font-family:var(--font-mono); font-size:.6563rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-accent-strong);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pc-name{
  margin-top:.25rem; font-size:.9375rem; font-weight:600; line-height:1.3;
  color:var(--color-ink-strong);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pc-lede{
  margin-top:.375rem; font-size:.8125rem; color:var(--color-ink-muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* 2 列规格 mini 表 —— 参照站卡片底部的 grid-cols-2 gap-px */
.pc-specs{
  margin-top:.75rem; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  border-top:1px solid var(--color-rule);
  background:color-mix(in srgb, var(--color-rule) 40%, transparent);
}
/* min-width:0 必须有 —— grid 项默认 min-width:auto，nowrap 的规格值会把
   列撑宽，390 宽下整卡溢出容器 */
.pc-specs > div{ background:var(--color-paper); padding:.5rem 1rem; min-width:0; overflow:hidden }
.pc-specs span{
  display:block; font-family:var(--font-mono); font-size:.625rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-ink-faint);
}
.pc-specs b{
  display:block; margin-top:.125rem; font-weight:600; font-size:.75rem;
  color:var(--color-ink); font-family:var(--font-mono);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------------------------------------------------------------------------
   28. Responsive
   --------------------------------------------------------------------------- */
@media (max-width:1100px){
  .collection-layout{ grid-template-columns:200px minmax(0,1fr); gap:1.75rem }
  .article-layout{ grid-template-columns:minmax(0,1fr) 15rem }
  .prod-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:1023px){
  /* 参照站：topbar 在 lg 以下整条隐藏（hidden ... lg:block） */
  .topbar{ display:none }
}
@media (max-width:980px){
  .nav{ display:none }
  /* 隐藏键盘快捷键提示：触屏/平板上没有 ⌘K，留着只会把 header 挤溢出容器 */
  #search-btn .label,
  #search-btn kbd{ display:none }
  .nav.is-open-mobile{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; inset:0; z-index:80;
    background:var(--color-paper); padding:5.5rem 1.25rem 3rem; overflow-y:auto;
  }
  .nav.is-open-mobile .nav-item{ border-bottom:var(--rule-hair) }
  .nav.is-open-mobile .nav-link{
    justify-content:space-between; padding:.875rem .25rem;
    min-height:0; font-size:1rem;
  }
  .nav.is-open-mobile .nav-underline{ display:none }
  .nav.is-open-mobile .nav-toggle{
    display:inline-flex; width:1.5rem; height:1.5rem;
  }
  .nav.is-open-mobile .nav-item.is-open-panel .nav-toggle .chev{ transform:rotate(180deg) }
  /* 面板从通栏绝对定位降级成内联块，默认收起，点箭头展开 */
  .nav.is-open-mobile .mega-panel{
    position:static; inset:auto; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-radius:0; padding:0;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    display:none;
  }
  .nav.is-open-mobile .nav-item.is-open-panel .mega-panel{ display:block; padding:.625rem 0 1.125rem }
  .nav.is-open-mobile .mega-panel .container{ padding-inline:0 }
  .nav.is-open-mobile .mega-main{ padding-inline:0 }
  .nav.is-open-mobile .mega-head{ border-top:0; padding-top:.875rem }
  .nav.is-open-mobile .mega-cards{ grid-template-columns:1fr }
  .nav.is-open-mobile .mega-featured{ display:none }
  .menu-toggle{ display:inline-flex }
  .nav-cta{ display:none }
  .trust .container{ grid-template-columns:1fr; gap:.75rem }
  .trust-badge{ flex-direction:row; gap:.75rem }
  .trust-badge .lab{ max-width:14ch }
  .spotlight,.factory,.form-layout,.cta-band .container,.pd-layout,.article-layout{
    grid-template-columns:1fr;
  }
  .pd-gallery,.filters,.toc{ position:static }
  .collection-layout{ grid-template-columns:1fr }
  .collection-layout .filters{ position:static }
  .family-grid,.range-grid,.gallery-grid,.related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .scenario-grid,.guide-grid,.contact-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .certs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .compare-bar{ grid-template-columns:1fr }
  .pano-grid,.cert-detail-grid,.app-deliver,.detail-strip{ grid-template-columns:1fr }
  .detail-strip{ grid-template-columns:repeat(2,minmin(0,1fr)); grid-template-columns:repeat(2,minmax(0,1fr)) }
  .metric-band{ grid-template-columns:1fr; gap:1.25rem }
  .metric-band > div{ border-right:0; padding-right:0 }
}
@media (max-width:640px){
  /* 注意：.container 也要带上 —— 它才是模板实际用的类名 */
  .container,.container-base,.container-tight,.container-wide{ padding-inline:1.1rem }
  /* wordmark 在窄屏放不下（"Dongguan Dongming Technology" 约 324px），
     只留 logo 图形，右侧腾出位置给搜索和汉堡按钮 */
  .brand > span:last-child{ display:none }
  .section-head{ flex-direction:column; align-items:flex-start; gap:1rem }
  .hero-title{ font-size:clamp(2.25rem,11vw,3.5rem) }
  .family-grid,.range-grid,.gallery-grid,.related-grid,.card-grid,
  .scenario-grid,.guide-grid,.contact-grid,.pano-grid,.cert-detail-grid,
  .app-deliver,.form-grid,.detail-strip{ grid-template-columns:1fr }
  /* 窄屏 prod-card 保持 2 列：单列会把标题挤成 40ch 宽，卡片变成巨长条 */
  .prod-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem }
  .pc-top,.pc-body,.pc-specs > div{ padding-inline:.625rem }
  .certs{ grid-template-columns:1fr }
  .metric-band{ grid-template-columns:1fr }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.5rem }
  .faq-item > summary{ font-size:1rem; gap:.75rem }
  .faq-a{ padding-left:0 }
  .faq-item > summary .faq-num{ display:none }
  .inquiry{ padding:1.25rem }
  .spotlight-facts,.pd-facts,.factory-stats{ grid-template-columns:1fr }
  /* 抽屉里那份语种切换在窄屏收窄 —— topbar 那份在 lg 以下已整条隐藏，
     这里这条只作用于移动端抽屉里的 .lang-switch，别把它隐藏掉 */
  .nav.is-open-mobile .nav-mobile-lang .lang-switch{
    height:2rem; padding-inline:.45rem; gap:.3rem; font-size:.75rem;
  }
  .icon-btn .label{ display:none }
  .nav-cta{ display:none }
  .crumbs{ font-size:.6875rem }
}

/* ==========================================================================
   28. 收口 CTA 带 —— 补背景（原来只有 position / overflow）
   ==========================================================================
   ⚠️ 修的是全站可见性 bug：.cta-band h2 写死 color:#fff、p 用
   --color-stage-muted，但 .cta-band 自己从没定义背景，于是白色标题直接落在
   外层 .section / .section-paper2 的浅色底上 —— "Ask the specification engineer."
   整段 CTA 在 /products /resources /support …… 共 12 个页面上基本看不见。
   这里补暗底，并把语义令牌反白（同 tokens.css 里 .stage 的做法），不靠模板加类。
   12 处用法外层都是 <section class="section"> → <div class="container"> →
   <div class="cta-band">，正好落成一个居中的收口板。
   参照站是 full-bleed 深蓝，要做成通栏得改 12 个模板的外层 section，暂不做。
*/
.cta-band{
  position:relative; overflow:hidden;
  border-radius:var(--radius-card);
  background:
    radial-gradient(115% 135% at 100% 0%, var(--color-stage-3) 0%, rgba(39,57,71,0) 58%),
    var(--color-stage);
  padding:clamp(2.25rem, 3.2vw, 3.5rem);
  color:var(--color-stage-ink);
  /* 容器内语义令牌反白，组件无需感知自己身在暗底 */
  --color-paper:       var(--color-stage);
  --color-paper-2:     var(--color-stage-2);
  --color-paper-3:     var(--color-stage-3);
  --color-ink:         var(--color-stage-ink);
  --color-ink-strong:  var(--color-stage-ink);
  --color-ink-muted:   var(--color-stage-muted);
  --color-ink-faint:   var(--color-stage-faint);
  --color-rule:        var(--color-stage-rule);
  --color-rule-strong: var(--color-stage-ink);
}
.cta-band .container{ position:relative; z-index:1 }
/* accent 顶边，和页脚 .footer-inner 的 3px 顶边呼应 */
.cta-band::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent) 34%, rgba(242,169,0,0) 100%);
}

/* ==========================================================================
   28b. 筛选 chip
   ==========================================================================
   .size-chip 在 4 处模板里用（/resources 栏目、/blog 栏目、文章标签、文章分页），
   但 wintouch 主题里一直没定义 —— /resources 的栏目 chip 之前是裸链接。
   .is-active 给 /blog 的 ?category= 筛选用。
*/
.size-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .85rem; border-radius:var(--radius-pill);
  border:var(--rule-hair); background:var(--color-paper);
  font-size:.8125rem; font-weight:600; color:var(--color-ink);
  text-decoration:none; line-height:1.2; white-space:nowrap;
  transition:transform var(--duration-fast) var(--ease-out-soft),
             border-color var(--duration-fast) var(--ease-out-soft),
             color var(--duration-fast) var(--ease-out-soft),
             background-color var(--duration-fast) var(--ease-out-soft);
}
.size-chip small{ font-family:var(--font-mono); font-size:.6875rem; font-weight:500; color:var(--color-ink-faint) }
.size-chip:hover{ transform:translateY(-1px); border-color:var(--color-brand-navy); color:var(--color-ink-strong) }
.size-chip.is-active{ background:var(--color-brand-navy); border-color:var(--color-brand-navy); color:#fff }
.size-chip.is-active small{ color:rgba(255,255,255,.72) }

/* ==========================================================================
   28c. Blog —— /blog
   ==========================================================================
   结构照 wintouchtech.com/en/blog/：stage 标题 → 1 张 featured 大卡 →
   归档网格 → 收口。文章没有任何配图（articles.image 全空），所以卡片是
   纯排版的：分类 + 标题 + 摘要 + 日期/读感，不用空 <img> 撑出大空白。
   ⚠️ 卡片内部一律用 .pg- 前缀 —— .pc- 已经被 prod-card 占用了。
*/
.blog-feature{
  display:grid; grid-template-columns:1.45fr .85fr; gap:0;
  border:var(--rule-hair); border-radius:var(--radius-card);
  background:var(--color-paper); box-shadow:var(--shadow-lift);
  overflow:hidden; margin-top:2.5rem;
}
.bf-main{ display:flex; flex-direction:column; gap:1rem; min-width:0; padding:clamp(1.75rem, 2.6vw, 2.75rem) }
.bf-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem }
.bf-cat{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; color:var(--color-accent-strong);
}
.bf-cat.is-muted{ color:var(--color-ink-faint) }
.bf-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem, 1.05rem + 1.35vw, 2.5rem); line-height:1.12;
  letter-spacing:var(--tracking-display); color:var(--color-ink-strong); text-wrap:balance;
}
.bf-title a{ color:inherit; text-decoration:none }
.bf-lede{ color:var(--color-ink-muted); line-height:1.65; max-width:58ch }
.bf-meta{
  display:flex; flex-wrap:wrap; gap:1.1rem; font-size:.8125rem;
  color:var(--color-ink-faint);
}
.bf-meta > span{ display:inline-flex; align-items:center; gap:.35rem }
.bf-meta .icon{ width:14px; height:14px; flex:none }
.bf-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.5rem }
/* 右栏"数据表盖章"：没有配图，用读感数据顶掉那个位置 */
.bf-aside{
  display:flex; flex-direction:column; gap:1.5rem; min-width:0;
  background:var(--color-paper-2); border-left:var(--rule-hair);
  padding:clamp(1.75rem, 2.6vw, 2.75rem);
}
.bf-stamp{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:0 }
.bf-cell{ display:flex; flex-direction:column; gap:.35rem; padding-bottom:1rem; border-bottom:var(--rule-hair) }
.bf-cell dt{
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-ink-faint);
}
.bf-cell dd{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:1.75rem; line-height:1.05; color:var(--color-ink-strong);
}
.bf-cell dd small{ font-family:var(--font-body); font-weight:600; font-size:.8125rem; color:var(--color-ink-muted) }
.bf-note{
  font-size:.8125rem; line-height:1.6; color:var(--color-ink-muted);
  border-left:2px solid var(--color-accent); padding-left:.875rem;
}
.bf-icon{ margin-top:auto; color:var(--color-ink-faint); opacity:.45 }
.bf-icon .icon{ width:64px; height:64px }

/* 归档网格：纯排版卡，整卡是一个链接 */
.post-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem }
.post-card{
  display:flex; flex-direction:column; min-width:0;
  padding:1.5rem; border:var(--rule-hair); border-radius:var(--radius-card);
  background:var(--color-paper); box-shadow:var(--shadow-card);
  text-decoration:none;
  transition:transform var(--duration-normal) var(--ease-out-soft),
             box-shadow var(--duration-normal) var(--ease-out-soft),
             border-color var(--duration-normal) var(--ease-out-soft);
}
.post-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--color-accent) }
.pg-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin-bottom:.9rem;
}
.pg-cat{
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; color:var(--color-accent-strong);
}
.pg-mins{
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap;
  font-family:var(--font-mono); font-size:.6875rem; color:var(--color-ink-faint);
}
.pg-mins .icon{ width:13px; height:13px; flex:none }
.pg-title{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  line-height:1.28; letter-spacing:var(--tracking-display);
  color:var(--color-ink-strong); text-wrap:pretty;
}
.post-card:hover .pg-title{ color:var(--color-accent-strong) }
.pg-lede{ margin-top:.7rem; font-size:.875rem; line-height:1.55; color:var(--color-ink-muted) }
.pg-foot{
  margin-top:auto; padding-top:1.1rem; display:flex; align-items:center;
  justify-content:space-between; gap:.75rem; border-top:var(--rule-hair);
  font-size:.75rem; color:var(--color-ink-faint);
}
.pg-read{
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap;
  font-size:.8125rem; font-weight:600; color:var(--color-brand-navy);
}
.post-card:hover .pg-read{ color:var(--color-accent-strong) }
.pg-read .icon{ width:14px; height:14px; flex:none; transition:transform var(--duration-fast) var(--ease-out-soft) }
.post-card:hover .pg-read .icon{ transform:translateX(3px) }

/* ==========================================================================
   28d. 响应式
   ========================================================================== */
@media (max-width:1100px){
  .blog-feature{ grid-template-columns:1fr }
  .bf-aside{ border-left:0; border-top:var(--rule-hair) }
  .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  .cta-band{ padding:1.75rem }
  .bf-main,.bf-aside{ padding:1.5rem }
  .post-grid{ grid-template-columns:1fr }
  .pg-head{ flex-direction:column; align-items:flex-start; gap:.4rem }
}

/* ==========================================================================
   28e. .reveal 吃掉卡片 hover 位移的补偿
   ==========================================================================
   .reveal 在 ~1522 行写死了 transform（translateY(1rem) → none），而且位置在所有
   卡片规则之后；和 .family-card:hover / .prod-card:hover / .post-card:hover 这些
   (0,1,0) 选择器比特异性时，.reveal.is-visible 的 (0,2,0) 更高 —— 这些卡片的
   hover 位移其实一直是失效的，只有阴影和边框在变。补一条更具体的规则还回来。
*/
@media (prefers-reduced-motion:no-preference){
  .family-card.reveal.is-visible:hover,
  .prod-card.reveal.is-visible:hover,
  .post-card.reveal.is-visible:hover,
  .related-card.reveal.is-visible:hover{ transform:translateY(-2px) }
}

/* ==========================================================================
   29. /about —— 照 wintouchtech.com/en/about/ 的 9 区块
   --------------------------------------------------------------------------
   模板 view/themes/wintouch/about/index.html，数据全在
   app/controller/home/About.php（数字来自 configs / 数据库，模板不写死事实）。
   类名统一 ab- 前缀 —— 别和首页 hm-*、通用 card-* / section-* 混。

   区块顺序（和模板一一对应）：
     S1 ab-hero    stage hero + 8 格统计条
     S2 ab-grid-48 + ab-fig       工厂视频引言
     S3 ab-gallery                车间相册
     S4 ab-lines / ab-pair        产品线 + 两张说明卡
     S5 ab-prose                  公司故事
     S6 ab-stages                 自有工序
     S7 ab-banner / ab-apps       应用行业
     S8 ab-cta-band               参观 CTA（accent 底）
     S9 ab-certs                  合规带
   ========================================================================== */

/* ---------- 通用：区块标题 ---------- */
.ab-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:2.5rem; margin-bottom:3rem;
}
.ab-head-txt{ max-width:46rem }
/* 两套 eyebrow：accent 色的 .ab-kicker（浅色底）+ 灰色的 .ab-eyebrow-dark */
.ab-kicker{
  font-family:var(--font-display); font-weight:600;
  font-size:.875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-accent-strong);
}
.ab-eyebrow-dark{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-ink-muted);
}
.ab-eyebrow-dark::before{ content:''; width:2.25rem; height:1px; background:var(--color-ink-faint) }
.ab-h2{
  margin-top:.75rem; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.875rem, 1.4rem + 1.6vw, 3rem);
  line-height:1.08; letter-spacing:var(--tracking-display);
  color:var(--color-ink-strong);
}
.ab-sub-mut{
  margin-top:1rem; max-width:56ch;
  font-size:1rem; line-height:1.65; color:var(--color-ink-muted);
}
.ab-note{
  max-width:22rem; font-size:.9375rem; line-height:1.6;
  color:var(--color-ink-muted);
}
/* 参照站第 3、5 块顶部有一条深色实线，标题压在它下面 */
.ab-rule-top{ border-top:1px solid var(--color-ink-strong); padding-top:2rem }

/* 小写等宽「查看更多」链接（相册 / 证书库后面那条） */
.ab-more{ margin-top:2rem; display:flex; justify-content:flex-end }
.ab-more-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-ink-muted);
  transition:color var(--duration-fast) var(--ease-out-soft);
}
.ab-more-link svg{ width:1rem; height:1rem; transition:transform var(--duration-fast) var(--ease-out-soft) }
.ab-more-link:hover{ color:var(--color-accent-strong) }
.ab-more-link:hover svg{ transform:translate(2px,-2px) }
.ab-more-link-inline{ margin-bottom:.5rem }

/* 4/8 分栏（S2 视频、S5 故事） */
.ab-grid-48{ display:grid; grid-template-columns:minmax(0,1fr); gap:3rem; align-items:start }
@media (min-width:1024px){
  .ab-grid-48{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:4rem }
}

/* ---------- S1  stage hero ---------- */
.ab-hero{ position:relative; overflow:hidden }
.ab-hero-bg{ position:absolute; inset:0; z-index:0 }
.ab-hero-bg > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:right center;
}
/* 两道渐变：左深右浅（文字侧压住底图）+ 底部压暗（统计条读得清） */
.ab-hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      var(--color-stage) 0%,
      color-mix(in srgb, var(--color-stage) 96%, transparent) 38%,
      color-mix(in srgb, var(--color-stage) 55%, transparent) 72%,
      color-mix(in srgb, var(--color-stage) 14%, transparent) 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--color-stage) 55%, transparent) 0%,
      transparent 42%);
}
.ab-hero > .container{ position:relative; z-index:1 }
.ab-hero-in{ padding-block:var(--space-section) var(--space-half) }
.ab-eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-stage-muted);
}
.ab-eyebrow::before{ content:''; width:2.25rem; height:1px; background:var(--color-stage-rule) }
.ab-title{
  margin-top:1.5rem; max-width:46rem;
  font-family:var(--font-display); font-weight:700; line-height:1.03;
  font-size:clamp(2.375rem, 1.3rem + 3.3vw, 4.5rem);
  letter-spacing:var(--tracking-display); color:var(--color-stage-ink);
}
.ab-lede{
  margin-top:1.25rem; max-width:64ch;
  font-size:1.0625rem; line-height:1.65; color:var(--color-stage-muted);
}
.ab-sub{
  margin-top:1rem; max-width:64ch;
  font-size:.875rem; line-height:1.6; color:var(--color-stage-faint);
}
.ab-cta{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem }
.ab-arr{ font-size:1.1em; line-height:0; transition:transform var(--duration-fast) var(--ease-out-soft) }
.ab-cta a:hover .ab-arr,
.ab-cta-primary:hover .ab-arr{ transform:translateX(.125rem) }
/* .btn-ghost 的 hover 是 navy 边框 —— 落在 navy 底上看不见，这里单独覆盖 */
.ab-ghost-on-dark{ border-color:var(--color-stage-rule); color:var(--color-stage-ink) }
.ab-ghost-on-dark:hover{
  border-color:var(--color-stage-ink);
  background:color-mix(in srgb, var(--color-stage-ink) 10%, transparent);
  color:var(--color-stage-ink); transform:translateY(-1px);
}

/* 统计条：1px 网格线做分隔，2 列 → md 4 列 */
.ab-hero-stats{ padding-block:0 }
.ab-stats{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px; background:var(--color-stage-rule);
  border-top:1px solid var(--color-stage-rule);
}
.ab-stat{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--color-stage); padding:2rem 1.5rem;
}
.ab-stat dt{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-stage-muted);
}
.ab-stat dd{
  margin:0; font-family:var(--font-display); font-weight:600; line-height:1.2;
  font-size:clamp(1.125rem, .9rem + .8vw, 1.5rem); color:var(--color-stage-ink);
}
@media (min-width:768px){ .ab-stats{ grid-template-columns:repeat(4, minmax(0,1fr)) } }

/* ---------- S2  工厂视频 ---------- */
.ab-body{ font-size:1rem; line-height:1.7; color:var(--color-ink-muted) }
/* 参照站这里用 2 列，但它的值都很短；本站的值有整句的（Coverage），
   塞进 4/12 宽分栏的一半会折成 4 行 —— 收成单列，让文字自然成行 */
.ab-dl{
  display:grid; grid-template-columns:1fr;
  gap:1.25rem;
  margin-top:2rem; padding-top:1.5rem; border-top:var(--rule-hair);
}
.ab-dl > div{ display:flex; flex-direction:column; gap:.3rem }
.ab-dl dt{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-ink-muted);
}
.ab-dl dd{ margin:0; font-family:var(--font-mono); font-size:.875rem; color:var(--color-ink-strong) }

.ab-fig{
  position:relative; overflow:hidden; aspect-ratio:16/9;
  background:var(--color-paper-3); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.ab-fig > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.ab-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:5.5rem; height:5.5rem; border-radius:var(--radius-pill);
  display:grid; place-items:center; color:#fff; z-index:1;
  border:1px solid rgba(255,255,255,.4);
  background:color-mix(in srgb, var(--color-brand-navy) 55%, transparent);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:transform var(--duration-normal) var(--ease-out-soft),
             background var(--duration-fast) var(--ease-out-soft);
}
.ab-fig:hover .ab-play{ transform:translate(-50%,-50%) scale(1.06) }
.ab-play svg{ width:2rem; height:2rem; margin-left:.2rem }
.ab-figcap{
  position:absolute; inset-inline:0; bottom:0; z-index:1;
  padding:3rem 1.5rem 1.25rem; font-size:.875rem; color:#fff;
  background:linear-gradient(0deg, color-mix(in srgb, var(--color-brand-navy) 85%, transparent), transparent);
}

/* ---------- S3  车间相册 ---------- */
.ab-gallery{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem }
@media (min-width:640px){ .ab-gallery{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
@media (min-width:1024px){ .ab-gallery{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
.ab-tile{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius-sm); background:var(--color-paper-3);
}
.ab-tile > img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .5s var(--ease-out-soft);
}
.ab-tile:hover > img{ transform:scale(1.03) }
.ab-tile-n{
  position:absolute; top:.625rem; left:.625rem; z-index:1;
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.1em;
  padding:.2rem .5rem; border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--color-brand-navy) 70%, transparent); color:#fff;
}

/* ---------- S4  产品线卡 + 说明卡 ---------- */
.ab-lines{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:640px){ .ab-lines{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:1024px){ .ab-lines{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
.ab-line{ min-width:0 }
.ab-line-a{
  position:relative; display:flex; flex-direction:column;
  height:100%; min-height:13.5rem; padding:1.5rem;
  border-radius:var(--radius-card); border:var(--rule-hair);
  background:var(--color-paper); box-shadow:var(--shadow-card);
  transition:transform var(--duration-normal) var(--ease-out-soft),
             box-shadow var(--duration-normal) var(--ease-out-soft);
}
.ab-line-a:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lift) }
/* hover 时左侧那道 accent 竖条（参照站 milestone 卡的做法） */
.ab-accent-bar{
  position:absolute; top:1.5rem; bottom:1.5rem; left:0;
  width:2px; border-radius:2px; background:var(--color-accent);
  opacity:0; transition:opacity var(--duration-normal) var(--ease-out-soft);
}
.ab-line-a:hover .ab-accent-bar{ opacity:1 }
.ab-line-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase;
}
.ab-line-group{ font-weight:600; color:var(--color-accent-strong) }
.ab-line-idx{ flex:none; color:var(--color-ink-muted) }
.ab-line-num{
  display:block; margin-top:1.25rem;
  font-family:var(--font-mono); font-weight:600; font-size:1.75rem;
  color:var(--color-ink-strong);
}
.ab-line-num-u{
  display:block; margin-top:.125rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-ink-muted);
}
.ab-line-name{
  margin-top:.75rem; font-family:var(--font-display); font-weight:600;
  font-size:1rem; line-height:1.25; color:var(--color-ink-strong);
}
.ab-line-desc{
  margin-top:.625rem; flex:1;
  font-size:.8125rem; line-height:1.6; color:var(--color-ink-muted);
}
.ab-line-go{
  display:inline-flex; align-items:center; gap:.375rem; margin-top:1rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-accent-strong);
}
.ab-line-go svg{ width:.875rem; height:.875rem }

.ab-pair{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3.5rem }
@media (min-width:768px){ .ab-pair{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.ab-card{
  padding:1.75rem; border-radius:var(--radius-card);
  border:var(--rule-hair); background:var(--color-paper); box-shadow:var(--shadow-card);
}
.ab-card-kicker{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-accent-strong);
}
.ab-card-title{
  margin-top:.5rem; font-family:var(--font-display); font-weight:600;
  font-size:1.125rem; color:var(--color-ink-strong);
}
/* 三行式行：名称 + 右对齐元信息 + 整行描述（参照站 Group brands 那张卡的行） */
.ab-rows{ margin-top:1.25rem; list-style:none }
.ab-rows > li{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.375rem 1rem; padding:.875rem 0; border-top:var(--rule-hair);
}
.ab-rows > li:first-child{ border-top:0; padding-top:.25rem }
.ab-row-k{ font-family:var(--font-mono); font-size:.8125rem; font-weight:600; color:var(--color-ink-strong) }
.ab-row-m{
  margin-left:auto; flex:none;
  font-family:var(--font-mono); font-size:.75rem; color:var(--color-accent-strong);
  text-align:right;
}
.ab-row-d{ flex-basis:100%; font-size:.75rem; line-height:1.55; color:var(--color-ink-muted) }

/* ---------- S5  公司故事 ---------- */
.ab-badge{
  display:inline-flex; align-items:center; gap:.625rem; margin-top:2rem;
  padding:.625rem 1rem; border:var(--rule-hair); background:var(--color-paper);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-ink-muted);
}
.ab-badge-dot{ width:.375rem; height:.375rem; border-radius:50%; background:var(--color-accent) }
.ab-prose{ display:flex; flex-direction:column; gap:1.5rem }
.ab-prose > p{ font-size:1.0625rem; line-height:1.75; color:var(--color-ink) }

/* ---------- S6  自有工序 ---------- */
.ab-stages{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:640px){ .ab-stages{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:1024px){ .ab-stages{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
.ab-stage{
  display:flex; flex-direction:column; padding:1.5rem;
  border-radius:var(--radius-lg); border:var(--rule-hair);
  background:var(--color-paper); box-shadow:var(--shadow-card);
  transition:transform var(--duration-normal) var(--ease-out-soft),
             box-shadow var(--duration-normal) var(--ease-out-soft);
}
.ab-stage:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lift) }
.ab-stage-num{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-ink-muted);
}
.ab-stage-name{ margin-top:.75rem; font-size:1rem; font-weight:600; color:var(--color-ink-strong) }
.ab-stage-desc{
  margin-top:.625rem; flex:1;
  font-size:.8125rem; line-height:1.6; color:var(--color-ink-muted);
}
.ab-stage-bar{ margin-top:1.25rem; display:block; height:1px; width:2rem; background:var(--color-accent) }

/* ---------- S7  应用行业 ---------- */
.ab-banner{
  overflow:hidden; border:var(--rule-hair); border-radius:var(--radius-card);
  background:var(--color-paper); box-shadow:var(--shadow-card);
}
.ab-banner > img{ display:block; width:100%; height:auto }
.ab-apps{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.5rem }
@media (min-width:640px){ .ab-apps{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:1024px){ .ab-apps{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
.ab-app{
  display:flex; flex-direction:column; padding:1.25rem 1.5rem;
  border:var(--rule-hair); border-radius:var(--radius-card);
  background:var(--color-paper);
  transition:border-color var(--duration-fast) var(--ease-out-soft),
             box-shadow var(--duration-fast) var(--ease-out-soft),
             transform var(--duration-fast) var(--ease-out-soft);
}
.ab-app:hover{ border-color:var(--color-accent); box-shadow:var(--shadow-card); transform:translateY(-1px) }
.ab-app-name{ font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--color-ink-strong) }
.ab-app-blurb{ margin-top:.5rem; flex:1; font-size:.8125rem; line-height:1.6; color:var(--color-ink-muted) }
.ab-app-go{
  display:inline-flex; align-items:center; gap:.375rem; margin-top:1rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-accent-strong);
}
.ab-app-go svg{ width:.875rem; height:.875rem }

/* ---------- S8  参观 CTA 带（accent 底） ---------- */
.ab-cta-band{
  position:relative; overflow:hidden;
  background:var(--color-accent); padding-block:var(--space-section);
  text-align:center; color:var(--color-accent-ink);
}
.ab-cta-in{ max-width:52rem; margin-inline:auto; padding-inline:1.5rem }
.ab-cta-eyebrow{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--color-brand-navy) 70%, transparent);
}
.ab-cta-title{
  margin-top:1.25rem; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.875rem, 1.3rem + 2vw, 3rem); line-height:1.08;
  letter-spacing:var(--tracking-display); color:var(--color-accent-ink);
}
.ab-cta-lede{
  margin:1.5rem auto 0; max-width:42rem;
  font-size:1rem; line-height:1.65;
  color:color-mix(in srgb, var(--color-brand-navy) 78%, transparent);
}
.ab-cta-btns{ margin-top:2.5rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem }
.ab-cta-primary{
  height:3.5rem; padding-inline:2rem;
  background:#fff; color:var(--color-brand-navy);
  font-family:var(--font-display); font-weight:600; font-size:1rem;
}
.ab-cta-primary:hover{ background:var(--color-brand-navy); color:#fff }
.ab-cta-ghost{
  height:3.5rem; padding-inline:2rem;
  background:transparent; border:1px solid var(--color-brand-navy); color:var(--color-brand-navy);
  font-family:var(--font-display); font-weight:600; font-size:1rem;
}
.ab-cta-ghost:hover{ background:var(--color-brand-navy); color:#fff }

/* ---------- S9  合规带 ---------- */
.ab-certs{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px; background:var(--color-rule);
  border:var(--rule-hair); border-radius:var(--radius-card); overflow:hidden;
}
@media (min-width:768px){ .ab-certs{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
@media (min-width:1024px){ .ab-certs{ grid-template-columns:repeat(6, minmax(0,1fr)) } }
.ab-cert{
  padding:2.5rem 1rem; text-align:center;
  font-family:var(--font-mono); font-weight:600; font-size:1rem;
  color:var(--color-ink-strong); background:var(--color-paper);
  transition:background var(--duration-fast) var(--ease-out-soft);
}
.ab-cert:hover{ background:var(--color-accent-soft) }

/* ---------- 面包屑条（贴在页脚前） ---------- */
.ab-crumbs-bar{
  background:var(--color-paper-2); border-top:var(--rule-hair);
  padding-block:.875rem;
}

/* ---------- 响应式收口 ---------- */
@media (max-width:640px){
  .ab-hero-in{ padding-block:3.5rem 2rem }
  .ab-stat{ padding:1.25rem 1rem }
  .ab-line-a{ min-height:12rem; padding:1.25rem }
  .ab-card{ padding:1.25rem }
  .ab-figcap{ padding-inline:1.1rem }
  .ab-head{ margin-bottom:2rem }
  .ab-pair{ margin-top:2.5rem }
}

/* ==========================================================================
   30. /contact —— 照 wintouchtech.com/en/contact/ 的三块版式
   ==========================================================================
   S2 是 4/8 分栏：左列「How we reply」说明 + 事实 dl + 直达联系卡，
   右列询盘表单卡；S3 Find us 同结构：4 列地址卡 + 8 列地图。

   两个容易踩的点：
     1. .ct-4 / .ct-8 默认都是 span 12，分栏只在 lg 以上打开 —— 单列布局下
        写 grid-column:span 4 会把那一列压成 4/12 宽然后溢出。
     2. .ct-form-card 里嵌的是 common/contact_form.html，那个 form 自带
        .inquiry 卡片样式，这里压平成纯内容，否则就是卡中卡。
   参照站的 rule-top pt-8 是"内容上方一条 hairline + 32px 留白"的母题，
   左列比右列内容低 32px 是参照站本来的样子，别当 bug 去对齐。
*/
.ct-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:2rem }
.ct-4,.ct-8{ grid-column:span 12; min-width:0 }
@media (min-width:1024px){
  .ct-grid{ gap:4rem }
  .ct-4{ grid-column:span 4 }
  .ct-8{ grid-column:span 8 }
}

/* stage hero 里的锚链 —— .section-link 默认深蓝，落在深底上看不见 */
.ct-stage-cta{ margin-top:1.5rem; color:var(--color-stage-ink) }
.ct-stage-cta:hover{ color:var(--color-accent) }
.ct-stage-cta svg{ width:16px; height:16px }

/* 面包屑单独一条，别占满整个 section 的高度 */
.ct-crumbs{ padding-block:1.5rem }

/* 小标签（参照站的 t-eyebrow：mono 大写 + 前导短横） */
.ct-eyebrow{
  display:flex; align-items:baseline; gap:.75rem;
  margin:0;
  font-family:var(--font-mono); font-size:.75rem; font-weight:600;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--color-ink-muted);
}
.ct-eyebrow::before{
  content:""; flex:none; width:2.25rem; height:1px;
  background:var(--color-rule-strong);
}
.ct-rule-top{ padding-top:2rem; border-top:var(--rule-hair) }

.ct-h2{
  margin-top:1rem; margin-bottom:0;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-title); line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading); color:var(--color-ink-strong);
  text-wrap:balance;
}
.ct-h2 em{ font-style:normal; color:var(--color-ink-muted) }

.ct-lede{
  margin-top:1rem; color:var(--color-ink-muted);
  font-size:1rem; line-height:var(--leading-body); max-width:42ch;
}

/* 事实表：dt 左 dd 右，一行一条，上下 hairline */
.ct-dl{ margin:2rem 0 0; border-top:var(--rule-hair) }
.ct-dl > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.75rem 0; border-bottom:var(--rule-hair);
}
.ct-dl dt{
  flex:none;
  font-family:var(--font-mono); font-size:var(--text-mono-xs); font-weight:600;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--color-ink-muted);
}
.ct-dl dd{
  margin:0; text-align:right;
  font-family:var(--font-mono); font-size:.8125rem; font-weight:600;
  color:var(--color-ink-strong);
}
/* 竖排变体（Find us 的地址卡：dt 在上 dd 在下） */
.ct-dl-stack{ margin-top:0; border-top:0 }
.ct-dl-stack > div{ flex-direction:column; align-items:stretch; gap:.4rem; padding:1.1rem 0 }
.ct-dl-stack > div:first-child{ padding-top:0 }
.ct-dl-stack dd{ margin-top:.15rem; text-align:left }

/* 卡片 */
.ct-card{
  margin-top:2rem; padding:1.5rem;
  border:var(--rule-hair); border-radius:var(--radius-card);
  background:var(--color-paper); box-shadow:var(--shadow-card);
}
@media (min-width:768px){ .ct-card{ padding:1.75rem } }
.ct-mono{
  margin:0 0 1.25rem;
  font-family:var(--font-mono); font-size:var(--text-mono-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-ink-muted);
}

/* 直达联系入口（参照站是 WhatsApp / Email 两个 pill 行） */
.ct-channels{ display:grid; gap:.75rem; margin:0; padding:0; list-style:none }
.ct-chan{
  display:flex; align-items:center; gap:1rem; padding:.875rem 1rem;
  border:var(--rule-hair); border-radius:var(--radius-md);
  background:var(--color-paper-2); text-decoration:none;
  transition:border-color var(--duration-fast) var(--ease-out-soft),
             box-shadow var(--duration-fast) var(--ease-out-soft);
}
.ct-chan:hover{ border-color:var(--color-accent); box-shadow:var(--shadow-card) }
.ct-chan-ic{
  flex:none; width:2rem; height:2rem; border-radius:var(--radius-pill);
  display:grid; place-items:center;
}
.ct-chan-ic svg{ width:15px; height:15px }
.ct-chan.is-solid .ct-chan-ic{ background:var(--color-accent); color:var(--color-accent-ink) }
.ct-chan.is-soft .ct-chan-ic{ background:var(--color-accent-soft); color:var(--color-accent-strong) }
.ct-chan-lbl{
  display:block;
  font-family:var(--font-mono); font-size:var(--text-mono-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--color-ink-muted);
}
.ct-chan-val{
  display:block; margin-top:.125rem;
  font-size:.875rem; font-weight:600; color:var(--color-ink-strong);
}
.ct-chan:hover .ct-chan-val{ color:var(--color-accent-strong) }

/* 工作时间条 */
.ct-sla{
  display:flex; align-items:center; gap:.625rem;
  margin:1.25rem 0 0; padding:.75rem 1rem;
  background:var(--color-accent-soft); border-radius:var(--radius-md);
  font-family:var(--font-mono); font-size:var(--text-mono-xs); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--color-ink-muted);
}
.ct-dot{
  flex:none; width:.5rem; height:.5rem;
  border-radius:var(--radius-pill); background:var(--color-accent);
}

/* 表单卡：外层是卡，里面的 form 压平成纯内容 */
.ct-form-card{
  padding:1.5rem;
  border:var(--rule-hair); border-radius:var(--radius-card);
  background:var(--color-paper); box-shadow:var(--shadow-card);
}
@media (min-width:768px){ .ct-form-card{ padding:2.5rem } }
@media (max-width:640px){ .ct-form-card{ padding:1.25rem } }
.ct-form-card .ct-lede{ margin-bottom:2rem; max-width:52ch }
.ct-form-card .inquiry{ padding:0; margin:0; border:0; background:none; box-shadow:none }

/* Find us */
.ct-head{ margin-bottom:3rem }
.ct-maps-btn{ margin-top:1.5rem; width:100%; justify-content:center }
.ct-map{
  position:relative; height:360px; width:100%;
  overflow:hidden; border-radius:var(--radius-card);
  border:var(--rule-hair); box-shadow:var(--shadow-card);
  background:var(--color-paper-2);
}
@media (min-width:768px){ .ct-map{ height:460px } }
/* 垫层垫在 iframe 下面（z-index:0）。机房不通外网时 Google 的瓦片拉不下来，
   iframe 本体是透明的，露出的就是这一层 —— 看到设计好的地址面板而不是死灰块；
   能连外网时 Google 会画不透明背景把它盖住，那就是真地图。 */
.ct-map iframe{ position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; display:block }
.ct-map-fallback{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:2rem; text-align:center;
  background:
    linear-gradient(180deg, var(--color-paper-2) 0%, var(--color-paper) 100%);
}
.ct-map-fallback .ct-map-ic{ color:var(--color-accent-strong) }
.ct-map-fallback .ct-map-ic svg{ width:40px; height:40px }
.ct-map-fallback p{
  margin:0; font-family:var(--font-mono); font-size:.9375rem;
  color:var(--color-ink-strong);
}
.ct-map-fallback .ct-map-link{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--color-brand-navy); font-size:.875rem; font-weight:600;
}
.ct-map-fallback .ct-map-link:hover{ color:var(--color-accent-strong) }
.ct-map-fallback .ct-map-link svg{ width:16px; height:16px }

/* ==========================================================================
   31. /products —— 按工序分组的产品线列表
   ==========================================================================
   替代原来的「All configurations」149 张卡片墙：买家是带目标来的（知道要钻
   还是铣），不该靠往下翻去找。按 group 分块、行列表全部摊开，竖排扫名字。

   试过用直径段做筛选，删掉了：产品行的 min/max 是这条配置的直径跨度而不是
   单个尺寸（一个 Black Coated Drill 就是 0.03–8 mm），各线跨度高度重叠，
   「Ø 0.1–1 mm」和「Ø ≥ 1 mm」两个段都覆盖全部线 —— 点了压暗 0 条，
   等于一个坏掉的控件。直径只作为每行的数据展示（买家本来就是要读它）。
*/
.rg-alt{
  display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; flex:none;
}
@media (max-width:900px){
  .rg-alt{ flex-direction:row; align-items:center; gap:1.25rem }
}

/* ---------- 工序块 ---------- */
.rg-group{ margin-top:2.75rem }
.rg-group:first-of-type{ margin-top:3rem }
.rg-group-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
  padding-bottom:.875rem;
  border-bottom:1px solid var(--color-brand-navy);
}
.rg-group-name{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-title); line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading); color:var(--color-ink-strong);
}
.rg-group-n{
  font-family:var(--font-mono); font-size:var(--text-mono-sm);
  color:var(--color-ink-faint); white-space:nowrap;
}

/* ---------- 产品线行 ---------- */
.rg-lines{ list-style:none; margin:0; padding:0 }
.rg-item{ border-bottom:var(--rule-hair) }
.rg-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:1.25rem;
  padding:1.25rem .75rem;
  text-decoration:none;
  transition:background-color var(--duration-fast) var(--ease-out-soft);
}
@media (min-width:1024px){
  .rg-row{ grid-template-columns:auto minmax(0,1fr) 13rem auto }
}
.rg-ic{
  width:3rem; height:3rem; flex:none;
  display:grid; place-items:center;
  border-radius:var(--radius-md);
  background:var(--color-paper-2); color:var(--color-ink-muted);
}
/* tool_icon() 输出的 svg 自带 width/height=150，不显式覆盖会炸成 150x150 */
.rg-ic svg{ width:24px; height:24px }
.rg-mid{ min-width:0 }
.rg-name{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:1.0625rem; line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading); color:var(--color-ink-strong);
}
.rg-desc{
  display:block; margin-top:.25rem;
  font-size:.8125rem; line-height:1.5; color:var(--color-ink-muted);
}
.rg-specs{
  display:flex; flex-direction:column; gap:.2rem;
  text-align:right;
}
.rg-dia,.rg-n{
  font-family:var(--font-mono); font-size:var(--text-mono-sm);
  font-weight:600; color:var(--color-ink-strong); white-space:nowrap;
}
.rg-n{ font-weight:400; color:var(--color-ink-faint) }
.rg-go{
  display:inline-flex; align-items:center; gap:.4rem; flex:none;
  font-size:.8125rem; font-weight:600; color:var(--color-brand-navy);
  white-space:nowrap;
}
.rg-go svg{ width:16px; height:16px; transition:transform var(--duration-fast) var(--ease-out-soft) }
.rg-row:hover{ background:var(--color-accent-soft) }
.rg-row:hover .rg-go{ color:var(--color-accent-strong) }
.rg-row:hover .rg-go svg{ transform:translateX(3px) }

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .rg-row{ grid-template-columns:auto minmax(0,1fr); row-gap:.5rem; padding:1.1rem .5rem }
  .rg-ic{ width:2.5rem; height:2.5rem }
  .rg-ic svg{ width:20px; height:20px }
  .rg-specs{ grid-column:2 / -1; flex-direction:row; gap:1rem; text-align:left }
  .rg-go{ grid-column:2 / -1 }
}

/* ==========================================================================
   32. WhatsApp 悬浮（全站右下角；/contact 页整块不渲染，见 base.html）

   照 wintouchtech.com 的 WhatsAppFAB：橙圆钮 + 上方弹出的卡片面板。
   参照站的 SSR HTML 里只有圆钮、面板是 JS 挂载的 —— 这里服务端把整块
   渲染出来，用 visibility 关掉（不用 display:none：关掉后布局槽还在，
   圆钮不会跟着跳一下）。打开时的位移/缩放来自 .wa-panel 的关闭态
   transform，和参照站 keyframes wtWaCard 的 0% 一模一样。

   .wa-fab-in 是纵向 flex 栏 —— 面板在上、圆钮在下，整栏贴右缘对齐。
   面板关掉后仍然占布局槽（320px 宽），所以圆钮的位置始终在右下不动。

   ★ 三层 pointer-events —— 容器和 flex 栏必须是 none：
     隐藏面板仍占着 320×431 的布局槽，而那个槽会被命中测试命中
     （实测 elementFromPoint 整块返回 .wa-fab-in），页脚在它底下的链接
     就全点不了。参照站外层 pointer-events-none、内层 auto 躲开这个问题，
     是因为它的面板只在打开时才进 DOM —— 这里面板常驻，所以只能把容器
     和栏都设 none、再在面板和圆钮上单独开回来。
========================================================================== */
.wa-fab{
  position:fixed; z-index:40;
  right:max(1.25rem, env(safe-area-inset-right));
  bottom:max(1.25rem, env(safe-area-inset-bottom));
  pointer-events:none;
}
.wa-fab-in{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:.875rem;
  pointer-events:none;
}

/* ---------- 面板 ---------- */
.wa-panel{
  width:min(20rem, calc(100vw - 3rem));
  padding:1.25rem;
  background:var(--color-paper);
  border:var(--rule-hair);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-pop);
  transform-origin:100% 100%;
  /* 关闭态 */
  opacity:0;
  transform:translate(12px) scale(.95);
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity    var(--duration-fast) var(--ease-out-soft),
    transform  var(--duration-fast) var(--ease-out-soft),
    /* visibility 延迟半个时长才翻，否则收起时直接消失、看不到淡出 */
    visibility 0s linear var(--duration-fast);
}
.wa-fab.is-open .wa-panel{
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity    var(--duration-fast) var(--ease-out-soft),
    transform  var(--duration-fast) var(--ease-out-soft),
    visibility 0s;
}
.wa-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding-bottom:.875rem; margin-bottom:.875rem;
  border-bottom:var(--rule-hair);
}
.wa-panel-title{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700;
  font-size:1.0625rem; line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading); color:var(--color-ink-strong);
}
.wa-panel-title svg{ width:1.25rem; height:1.25rem; flex:none }
.wa-panel-close{
  flex:none;
  width:1.75rem; height:1.75rem;
  display:grid; place-items:center;
  border:var(--rule-hair); border-radius:var(--radius-sm);
  background:none; color:var(--color-ink-muted);
  cursor:pointer;
  transition:color var(--duration-fast),
             border-color var(--duration-fast),
             background-color var(--duration-fast);
}
.wa-panel-close:hover{ color:var(--color-accent-strong); border-color:var(--color-accent) }
.wa-panel-close svg{ width:1rem; height:1rem }
.wa-panel-lead{
  font-size:.9375rem; line-height:1.5;
  font-weight:600; color:var(--color-ink-strong);
}
.wa-panel-note{
  margin-top:.5rem;
  font-size:.8125rem; line-height:1.55; color:var(--color-ink-muted);
}
.wa-panel-num{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  margin-top:1rem; padding-top:.875rem;
  border-top:var(--rule-hair);
}
.wa-panel-lbl{
  font-size:var(--text-mono-xs); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; font-weight:600; color:var(--color-ink-faint);
}
.wa-panel-val{
  font-family:var(--font-mono); font-feature-settings:"tnum" 1,"ss01" 1;
  font-size:1.125rem; font-weight:600; color:var(--color-ink-strong);
  white-space:nowrap;
}
.wa-panel-cta{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:1rem; padding:.75rem 1rem;
  border-radius:var(--radius-md);
  background:var(--color-accent); color:var(--color-accent-ink);
  font-size:.9375rem; font-weight:600; text-decoration:none;
  transition:background-color var(--duration-fast) var(--ease-out-soft);
}
.wa-panel-cta:hover{ background:var(--color-accent-hover) }
.wa-panel-cta svg{ width:1.125rem; height:1.125rem; flex:none }
.wa-panel-alt{
  margin-top:.75rem;
  font-size:.8125rem; color:var(--color-ink-muted);
}
.wa-panel-alt a{ color:var(--color-brand-navy); font-weight:600 }
.wa-panel-alt a:hover{ color:var(--color-accent-strong) }

/* ---------- 圆钮 + 脉冲 ---------- */
.wa-fab-btn-wrap{ position:relative; flex:none }
.wa-fab-halo{
  position:absolute; inset:0; z-index:-1;
  border-radius:var(--radius-pill);
  background:var(--color-accent);
  /* 脉冲放大到 1.6 倍时圆环会伸到圆钮外面 16px。opacity 不影响命中测试，
     不加这条的话那一圈会挡住页脚在它底下的链接（参照站这个 span 上也是
     写死的 pointer-events-none）。 */
  pointer-events:none;
  animation:waPulse 2.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes waPulse{
  0%{ opacity:.55; transform:scale(1) }
  70%{ opacity:0; transform:scale(1.6) }
  to{ opacity:0; transform:scale(1.6) }
}
.wa-fab-btn{
  position:relative;
  width:3.5rem; height:3.5rem;
  display:grid; place-items:center;
  border:0; border-radius:var(--radius-pill);
  background:var(--color-accent); color:var(--color-accent-ink);
  box-shadow:var(--shadow-lift);
  cursor:pointer;
  /* 祖先 .wa-fab / .wa-fab-in 都是 pointer-events:none，这里得开回来 */
  pointer-events:auto;
  transition:transform var(--duration-fast) var(--ease-out-soft),
             background-color var(--duration-fast) var(--ease-out-soft);
}
.wa-fab-btn:hover{ background:var(--color-accent-hover); transform:scale(1.05) }
.wa-fab-btn:active{ transform:scale(.95) }
.wa-fab-btn:focus-visible{ outline-offset:3px }
.wa-fab-btn svg{ width:1.75rem; height:1.75rem }
/* 右上角小角标 —— 参照站是白圆里嵌一个橙色 ● */
.wa-fab-dot{
  position:absolute; right:-.25rem; top:-.25rem;
  width:1rem; height:1rem;
  display:grid; place-items:center;
  border-radius:var(--radius-pill);
  background:var(--color-paper); color:var(--color-accent-strong);
  font-size:8px; font-weight:600; line-height:1;
  box-shadow:0 1px 2px var(--color-paper-4);
}

@media print{ .wa-fab{ display:none } }