@charset "UTF-8";
/* ==========================================================================
   深圳杉壹医疗科技有限公司 · 官方网站
   唯一全局样式表 style.css
   目录：
     01. 设计令牌（CSS 变量）
     02. 基础重置与排版
     03. 布局容器与栅格
     04. 通用组件（按钮 / 标签 / 卡片 / 标题组）
     05. 头部与导航
     06. 页脚
     07. 首页 Hero 与数据条
     08. 内页 Banner 与面包屑
     09. 产品组件（产品卡 / 图文分栏 / 规格表 / 配件网格）
     10. 业务组件（时间线 / Tabs / 手风琴 / 胶囊 / 引用卡 / 客户名牌 / 界面切换器）
     11. 深色区块
     12. 表单
     13. 动效与工具类
     14. 响应式
   ========================================================================== */

/* == 01. 设计令牌 ========================================================== */
:root {
  /* 品牌色 */
  --brand: #3A3ADB;
  --brand-600: #2E2EB8;
  --brand-050: #EEEFFE;
  /* 中性色 */
  --ink: #0F172A;
  --ink-2: #1E293B;
  --text: #475569;
  /* 原值 #94A3B8 在白色上对比度仅 2.56、在 #F5F7FB 上 2.39，远低于 WCAG AA
     正文要求的 4.5（站内 117 处 12–16px 小字都吃这个色）。#5D6B82 在白底
     5.40、浅灰底 5.03，同时仍比 --text 浅，保留原有的层级感。
     页脚深色区用的是硬编码 #CBD5E1 / #94A3B8，不受本变量影响。 */
  --muted: #5D6B82;
  --line: #E6EAF2;
  /* 背景 */
  --bg: #FFFFFF;
  --bg-soft: #F5F7FB;
  /* 点缀 */
  --cyan: #22D3EE;
  --ok: #10B981;
  /* 渐变 */
  --grad: linear-gradient(135deg, #3A3ADB 0%, #6D5BF6 55%, #22D3EE 130%);
  --grad-dark: linear-gradient(160deg, #0F172A 0%, #16213C 60%, #1B2450 100%);
  --grad-soft: linear-gradient(135deg, #F7F8FF 0%, #EEEFFE 100%);
  /* 排版 */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 结构 */
  --radius: 16px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --header-h: 76px;
  --container: 1280px;
  --gutter: 24px;
  /* 阴影 */
  --shadow-sm: 0 2px 10px -6px rgba(15, 23, 42, .18);
  --shadow-card: 0 18px 40px -24px rgba(15, 23, 42, .28);
  --shadow-lift: 0 26px 50px -28px rgba(58, 58, 219, .38);
  /* 动效 */
  --ease: cubic-bezier(.22, .8, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t: .25s;
}

/* == 02. 基础重置与排版 ==================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  color: var(--ink);
  line-height: 1.28;
  letter-spacing: .01em;
  font-weight: 600;
}
h1 { font-size: clamp(30px, 4vw, 52px); font-weight: 700; letter-spacing: .005em; }
h2 { font-size: clamp(28px, 3.2vw, 42px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); }
h4 { font-size: clamp(18px, 1.8vw, 21px); }
h5 { font-size: 17px; }

p { margin: 0 0 1.1em; max-width: 72ch; text-align: left; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color var(--t) var(--ease); }
a:hover { color: var(--brand-600); }

img { max-width: 100%; height: auto; display: block; border: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.35em; }
li { margin-bottom: .4em; }

strong, b { color: var(--ink); font-weight: 600; }
/* 上面这条是**元素层**规则：它写在 <strong> 自己身上，不参与继承，所以会盖掉
   容器设定的浅色文字。首页透明页头（.is-overlay）右侧的服务热线数字就因此变成
   深底深字，压在深色 hero 上几乎看不见（2026-10 对比度审计发现）。
   凡容器已经把文字改成浅色的深色区块，一律让 <strong> 跟随容器。 */
.site-header.is-overlay .hotline strong,
.hero strong,
.page-hero strong,
.section-ink strong,
.site-footer strong { color: inherit; }

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

button, input, select, textarea { font: inherit; color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  z-index: 400;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  padding: 10px 22px;
  border-radius: 0 0 12px 12px;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: none; stroke-width: 1.6; }
.icon-sm { width: 18px; height: 18px; flex: none; stroke-width: 1.7; }
.icon-lg { width: 36px; height: 36px; flex: none; stroke-width: 1.5; }

/* == 03. 布局容器与栅格 ==================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow { max-width: 940px; }

.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-soft { background: var(--bg-soft); }
.section-ink { background: var(--grad-dark); color: #CBD5E1; }
.section-ink h1,
.section-ink h2,
.section-ink h3,
.section-ink h4 { color: #fff; }
.section-ink p { color: #CBD5E1; }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}
.split-top { align-items: start; }
.split-wide-left { grid-template-columns: 1.15fr .85fr; }
.split-wide-right { grid-template-columns: .85fr 1.15fr; }
.split-media { display: flex; align-items: center; justify-content: center; }

[data-anchor] { scroll-margin-top: 108px; }
[id] { scroll-margin-top: 108px; }

/* == 04. 通用组件 ========================================================== */
/* -- 4.1 Section Head -- */
.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}
.section-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
}
.section-head .kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}
.section-head h2 { margin-bottom: 16px; }
.section-head .lead {
  margin: 0 auto;
  max-width: 60ch;
  text-align: center;
  font-size: 17px;
  color: var(--text);
  line-height: 1.8;
}
.section-head-left { text-align: left; margin-left: 0; }
.section-head-left .lead { margin-left: 0; text-align: left; }
.section-ink .section-head .kicker { color: var(--cyan); }
.section-ink .section-head .kicker::before { background: var(--cyan); }
.section-ink .section-head .lead { color: #CBD5E1; }

/* -- 4.2 按钮 -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 28px;
  border-radius: 999px;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.btn .icon { width: 18px; height: 18px; }
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(58, 58, 219, .8);
}
.btn-primary:hover {
  background: var(--brand-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -16px rgba(58, 58, 219, .9);
}
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn-ghost:hover {
  background: var(--brand-050);
  color: var(--brand-600);
  border-color: var(--brand-600);
  transform: translateY(-2px);
}
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .7);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}
/* 按下反馈：全站按钮此前只有 hover，没有 :active，点击时缺少触感 */
.btn:active { transform: translateY(0) scale(.965); transition-duration: .08s; }
.btn-primary:active { box-shadow: 0 4px 12px -8px rgba(58, 58, 219, .9); }
.btn-sm { height: 38px; padding: 0 20px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.btn-row-center { justify-content: center; }

/* 文字箭头链接 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* -- 4.3 标签与胶囊 -- */
.badge {
  display: inline-block;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--brand-050);
  color: var(--brand);
}
.badge-soft { background: var(--bg-soft); color: var(--text); }
.badge-ok { background: rgba(16, 185, 129, .12); color: #0B815A; }

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pill:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.pill:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.pill.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 12px 26px -16px rgba(58, 58, 219, .9);
}
.pill-group-center { justify-content: center; }
.pill-static:hover { transform: none; box-shadow: none; border-color: var(--line); color: var(--text); }

/* -- 4.4 卡片 -- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
/* 只有真正可点击的卡片才抬升：纯内容卡也抬升会给用户「这里能点」的假暗示 */
a.card:hover,
a .card:hover {
  border-color: #BFD3F5;
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}
a.card:active,
a .card:active { transform: translateY(-1px) scale(.993); transition-duration: .09s; }
.card-flat:hover { transform: none; box-shadow: none; }
.card h3, .card h4 { margin-bottom: 10px; }
.card p { font-size: 15px; margin-bottom: 0; }
.card-top-line { border-top: 3px solid var(--brand); }

.card-icon { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.card-icon .icon { color: var(--brand); }
.card-icon-lg .icon { width: 42px; height: 42px; }

/* -- 4.5 特性条目 -- */
.feature-item { display: block; }
.feature-item .icon { color: var(--brand); margin-bottom: 14px; }
.feature-item h4 { margin-bottom: 8px; }
.feature-item p { font-size: 15px; margin-bottom: 0; }

.feature-list { display: grid; gap: 22px; }
.feature-row { display: flex; gap: 16px; align-items: flex-start; }
.feature-row .icon { color: var(--brand); margin-top: 3px; }
.feature-row h4 { margin-bottom: 4px; font-size: 17px; }
.feature-row p { font-size: 15px; margin-bottom: 0; }

/* -- 4.6 数据统计 -- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-value {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat-value .stat-suffix { font-size: .62em; font-weight: 600; }
.stat-desc { font-size: 15px; color: var(--text); line-height: 1.6; }
.stat-unit-static { font-size: 15px; color: var(--muted); }
.stat-link { font-size: 14px; font-weight: 600; color: var(--brand); }

/* -- 4.7 列表排版 -- */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.check-list li {
  position: relative;
  padding-left: 32px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-050);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3ADB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.check-list-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tick-list li {
  position: relative;
  padding-left: 24px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.tick-list-tight { gap: 6px; }
.tick-list-tight li { font-size: 14px; }

.num-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: nl; }
.num-list li {
  position: relative;
  padding-left: 40px;
  margin: 0;
  counter-increment: nl;
  font-size: 15px;
}
.num-list li::before {
  content: counter(nl, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .02em;
}

/* -- 4.8 图片处理 -- */
.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.media-frame img { width: 100%; height: auto; max-height: 620px; object-fit: contain; }
.media-plain { background: #fff; display: flex; align-items: center; justify-content: center; }
.media-plain img { object-fit: contain; max-height: 100%; }
.media-glow {
  filter: drop-shadow(0 30px 60px rgba(58, 58, 219, .35));
}
.media-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(15, 23, 42, .45);
  border: 1px solid var(--line);
}
.media-photo img { width: 100%; height: 100%; object-fit: cover; }
.media-ring {
  border-radius: var(--radius-lg);
  padding: 6px;
  background: linear-gradient(135deg, rgba(58, 58, 219, .5), rgba(34, 211, 238, .35));
  box-shadow: 0 26px 60px -34px rgba(58, 58, 219, .55);
}
.media-ring img { border-radius: 15px; width: 100%; background: #fff; }
.media-caption { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }

/* == 05. 头部与导航 ======================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}
.logo { display: inline-flex; align-items: center; flex: none; }
/* 横排锁定版（图形标 + 杉壹健康 + SYNOVA），源 550×96，2× 余量 */
.logo img { height: 52px; width: auto; }
.logo .logo-light { display: none; }
.logo .logo-dark { display: block; }

/* 首页透明浮层态 */
.site-header.is-overlay {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.site-header.is-overlay .logo .logo-light { display: block; }
.site-header.is-overlay .logo .logo-dark { display: none; }
.site-header.is-overlay .nav-link { color: rgba(255, 255, 255, .9); }
.site-header.is-overlay .nav-link:hover,
.site-header.is-overlay .nav-item.is-active > .nav-link { color: #fff; }
.site-header.is-overlay .hotline { color: #fff; }
.site-header.is-overlay .hotline .icon { color: var(--cyan); }
.site-header.is-overlay .lang a,
.site-header.is-overlay .lang span { color: rgba(255, 255, 255, .8); }
.site-header.is-overlay .lang .is-current { color: #fff; }
/* 「建设中」小胶囊自带浅色底，不能被上面的白色 span 规则染白（白字浅底＝看不见）。 */
.site-header.is-overlay .lang .lang-note { color: var(--brand-600); }
.site-header.is-overlay .lang { border-color: rgba(255, 255, 255, .3); }
.site-header.is-overlay .burger span { background: #fff; }

/* 滚动后 / 菜单打开后的实底态 */
.site-header.is-scrolled,
.site-header.is-menu-open {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .5);
}
.site-header.is-scrolled .logo .logo-light,
.site-header.is-menu-open .logo .logo-light { display: none; }
.site-header.is-scrolled .logo .logo-dark,
.site-header.is-menu-open .logo .logo-dark { display: block; }
.site-header.is-scrolled .nav-link,
.site-header.is-menu-open .nav-link { color: var(--text); }
.site-header.is-scrolled .nav-link:hover,
.site-header.is-menu-open .nav-link:hover { color: var(--brand); }
.site-header.is-scrolled .hotline,
.site-header.is-menu-open .hotline { color: var(--ink); }
.site-header.is-scrolled .hotline .icon,
.site-header.is-menu-open .hotline .icon { color: var(--brand); }
.site-header.is-scrolled .lang,
.site-header.is-menu-open .lang { border-color: var(--line); }
.site-header.is-scrolled .lang a,
.site-header.is-scrolled .lang span,
.site-header.is-menu-open .lang a,
.site-header.is-menu-open .lang span { color: var(--text); }
.site-header.is-scrolled .lang .is-current,
.site-header.is-menu-open .lang .is-current { color: var(--brand); }
.site-header.is-scrolled .burger span,
.site-header.is-menu-open .burger span { background: var(--ink); }

.nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; margin: 0; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 46px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--t) var(--ease);
}
.nav-link .icon { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.nav-link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.nav-item.is-active > .nav-link { color: var(--brand); font-weight: 600; }
.nav-item.is-active > .nav-link::after { opacity: 1; transform: scaleX(1); }
.site-header.is-overlay .nav-item.is-active > .nav-link::after { background: var(--cyan); }
.nav-item:hover > .nav-link { color: var(--brand); }
.nav-item.has-drop:hover > .nav-link .icon,
.nav-item.has-drop:focus-within > .nav-link .icon { transform: rotate(180deg); }

/* 二级下拉 */
.dropdown {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 250px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 26px 50px -26px rgba(15, 23, 42, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.45;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.dropdown a:hover { background: var(--brand-050); color: var(--brand); }
.dropdown a small {
  display: block;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 2px;
}
.dropdown a:hover small { color: var(--brand); }
.dropdown-wide { min-width: 296px; }

/* 右侧工具区 */
/* flex 必须是 0 1 auto（可收缩）而不是 none：写成 flex:none 时工具区按内容宽
   撑开、拒绝收缩，320px 视口下整个汉堡按钮会被挤到屏幕外（实测落在 x 345.7–389.7），
   再叠加 body{overflow-x:hidden} 连横向滚动自救都做不到，手机端将完全打不开菜单。
   窄屏的进一步压缩见文末 @media (max-width: 600px)。 */
.header-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 1 auto;
  min-width: 0;
}
.hotline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.hotline:hover { color: var(--brand); }
.hotline .icon { color: var(--brand); width: 18px; height: 18px; }
.hotline-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.site-header.is-overlay .hotline-label { color: rgba(255, 255, 255, .65); }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
  transition: border-color var(--t) var(--ease);
  /* 1024–1199px 顶栏里 logo 变宽后这里是最后一个会被 flex 挤压的元素，
     不锁住的话「中文」会折成两行。锁住宽度，宁可让导航项稍微收紧。 */
  flex: none;
  white-space: nowrap;
}
.lang .is-current { color: var(--brand); font-weight: 600; }
.lang .lang-sep { color: var(--muted); }
.lang .lang-pending { color: var(--muted); }
.lang span { color: var(--muted); cursor: default; }
/* English 版尚未上线：用可见的小字说明，避免「中文 / EN」看起来像能点的切换器 */
.lang .lang-note {
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--brand-050);
  color: var(--brand-600);
  font-weight: 500;
}

.burger {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.site-header.is-menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-menu-open .burger span:nth-child(2) { opacity: 0; }
.site-header.is-menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 移动端菜单面板 */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
  z-index: 90;
}
.mobile-backdrop.is-open { opacity: 1; visibility: visible; }

.mobile-panel {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 30px 50px -30px rgba(15, 23, 42, .5);
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  display: none;
}
.mobile-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav { list-style: none; margin: 0; padding: 14px 24px 26px; }
.mobile-nav > li { margin: 0; border-bottom: 1px solid var(--line); }
.mobile-nav > li:last-child { border-bottom: 0; }
.mobile-nav a,
.mobile-nav .mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.mobile-nav a:hover,
.mobile-nav .mobile-toggle:hover { color: var(--brand); }
.mobile-nav .is-active > a,
.mobile-nav .is-active > .mobile-toggle { color: var(--brand); font-weight: 600; }
.mobile-toggle .icon { width: 18px; height: 18px; color: var(--muted); transition: transform .3s var(--ease); }
.mobile-nav .is-open > .mobile-toggle .icon { transform: rotate(180deg); color: var(--brand); }
.mobile-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease);
}
.mobile-sub li { margin: 0; }
.mobile-sub a {
  padding: 11px 0 11px 16px;
  font-size: 14.5px;
  color: var(--text);
  border-left: 2px solid var(--line);
}
.mobile-sub a:hover { border-color: var(--brand); }
.mobile-foot {
  padding: 20px 24px 34px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.mobile-foot .hotline { font-size: 17px; margin-bottom: 6px; }
.mobile-foot p { font-size: 13px; color: var(--muted); margin: 0; max-width: none; }

/* == 06. 页脚 ============================================================== */
.site-footer {
  background: var(--grad-dark);
  color: #CBD5E1;
  padding-top: 72px;
  font-size: 14.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.35fr;
  gap: 48px;
  padding-bottom: 52px;
}
.footer-brand .footer-logo img { height: 46px; width: auto; }
.footer-slogan {
  margin: 20px 0 24px;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  letter-spacing: .02em;
}
.footer-brand .certs { max-width: 240px; height: auto; opacity: .85; }
.footer-col h2,
.footer-col .footer-col-title {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 18px;
  letter-spacing: .02em;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-links li { margin: 0; }
.footer-links a {
  color: #CBD5E1;
  font-size: 14.5px;
  /* 触控目标：WCAG 2.2 SC 2.5.8 要求至少 24×24 CSS px，纯文字链接高度只有 20px 左右 */
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  transition: color var(--t) var(--ease), padding-left var(--t) var(--ease);
}
.footer-links a:hover { color: #fff; padding-left: 4px; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.footer-contact li {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #CBD5E1;
  font-size: 14.5px;
  line-height: 1.65;
}
.footer-contact .icon { width: 17px; height: 17px; color: var(--cyan); margin-top: 3px; }
/* 电话/邮箱/网址这三行在移动端是主要操作入口，触控高度必须够。
   同 .footer-links a / .footer-bottom a：补到 28px（WCAG 2.2 SC 2.5.8 要求 ≥24×24）。 */
.footer-contact a { color: #CBD5E1; display: inline-flex; align-items: center; min-height: 28px; }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #94A3B8;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
/* 同 .footer-links a：把触控高度补到 28px，满足 WCAG 2.2 SC 2.5.8 */
.footer-bottom nav { align-items: center; }
.footer-bottom a {
  color: #94A3B8;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}
.footer-bottom a:hover { color: #fff; }

/* == 07. 首页 Hero 与数据条 ================================================ */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  /* 底部留出的 140px 与 .hero::after 的白色渐隐层等高，让数据条整体落在
     渐隐层**之上**的深色区里。曾经这里是 padding-bottom:0，数据条正好压进
     白色渐隐层，玻璃底 rgba(255,255,255,.07) + backdrop-filter 采到的就是
     身后那片白，白字压浅灰面板（实测文字 rgb(137,141,151) / 面板 rgb(171,175,181)），
     首页四个信任数字几乎读不出来。改 .hero::after 高度时必须同步改这个值。 */
  padding: calc(var(--header-h) + 72px) 0 140px;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/cart/bg-line.jpg");
  background-size: cover;
  background-position: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(15, 23, 42, .72);
}
/* 白→透明渐隐，把 hero 过渡到下方白底区块。
   高度必须等于 .hero 的 padding-bottom，数据条才不会被这层白雾盖住；
   两者是**一对**，改动请一起改。 */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  z-index: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 48px;
  align-items: center;
  padding-bottom: 40px;
}
.hero-copy { max-width: 620px; }
.hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 22px;
}
.hero .kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
}
.hero h1 {
  color: #fff;
  margin-bottom: 24px;
  letter-spacing: .005em;
  text-shadow: 0 2px 30px rgba(15, 23, 42, .35);
}
.hero-lead {
  color: rgba(226, 232, 240, .92);
  font-size: 17px;
  line-height: 1.85;
  max-width: 58ch;
  margin-bottom: 34px;
}
.hero-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}
/* 产品图已规范化为透明底 + 裁到内容，故按高度约束、宽度自适应。
   注意：这里刻意不加 filter: drop-shadow()。drop-shadow 是沿整条 alpha 轮廓
   生成的，而 studio 渲染在车轮下方留有一小块地面投影，轮廓会把那块投影一并
   描边发光，看上去像推车站在一个发亮的椭圆盘上。
   光晕改由 .hero-media-halo（独立径向渐变）提供，它不跟随轮廓。 */
.hero-media img {
  width: auto;
  max-width: 100%;
  max-height: 470px;
  height: auto;
  object-fit: contain;
}
.hero-media-halo {
  position: absolute;
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 58, 219, .55) 0%, rgba(34, 211, 238, .18) 45%, rgba(15, 23, 42, 0) 72%);
  z-index: -1;
  filter: blur(10px);
}

/* Hero 底部数据条 */
.hero-stats {
  position: relative;
  z-index: 1;
  padding-bottom: 0;
}
.stats-bar {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.stats-bar .stat {
  padding: 26px 28px;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.stats-bar .stat:last-child { border-right: 0; }
.stats-bar .stat-value { background: none; color: #fff; -webkit-text-fill-color: #fff; }
.stats-bar .stat-value .stat-suffix { color: var(--cyan); }
.stats-bar .stat-desc { color: rgba(203, 213, 225, .9); font-size: 14px; }
.hero + .section { padding-top: 80px; }

/* == 08. 内页 Banner 与面包屑 ============================================== */
.page-hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + 62px) 0 62px;
  min-height: 320px;
  display: flex;
  align-items: center;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/cart/bg-line-2.jpg");
  background-size: cover;
  background-position: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(15, 23, 42, .9) 0%, rgba(15, 23, 42, .74) 55%, rgba(27, 36, 80, .78) 100%);
}
.page-hero h1 { color: #fff; margin-bottom: 16px; }
.page-hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.page-hero .kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
}
.page-hero-lead {
  color: rgba(226, 232, 240, .9);
  font-size: 17px;
  line-height: 1.8;
  max-width: 62ch;
  margin: 0;
}
.page-hero-copy { max-width: 900px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: 13px;
  color: rgba(203, 213, 225, .8);
}
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before {
  content: "/";
  color: rgba(203, 213, 225, .45);
}
.breadcrumb a {
  color: rgba(226, 232, 240, .88);
  display: inline-flex;
  align-items: center;
  min-height: 28px;   /* 触控目标 ≥24px（WCAG 2.2 SC 2.5.8） */
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb .is-current { color: #fff; font-weight: 500; }
.breadcrumb-light { color: var(--muted); }
.breadcrumb-light a { color: var(--text); }

/* 锚点导航条 */
.anchor-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.anchor-bar .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.anchor-bar-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.anchor-bar .pill { padding: 7px 18px; font-size: 14px; }

/* == 09. 产品组件 ========================================================== */
/* -- 9.1 产品卡 -- */
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.product-card:hover {
  border-color: #BFD3F5;
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}
.product-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  padding: 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.product-card-media img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .4s var(--ease);
}
.product-card:hover .product-card-media img { transform: scale(1.045); }
.product-card-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card-body h3 { margin-bottom: 4px; font-size: 21px; }
.product-card-en {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.product-card-body p {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 20px;
  flex: 1;
}
.product-card-foot { margin-top: auto; }
.product-card-tall .product-card-media { height: 360px; }

/* 图卡（配件 / 组件 / 货位） */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 22px;
}
.tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.tile:hover {
  border-color: #BFD3F5;
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}
.tile-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  margin-bottom: 16px;
}
.tile-media img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.tile h4 { font-size: 15.5px; margin: 0 0 6px; }
.tile p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.6; }
.tile-tall .tile-media { height: 200px; }
.tile-flat { padding: 16px; }
.tile-flat .tile-media { height: 132px; margin-bottom: 12px; }

/* -- 9.2 产品线区块（总览页） -- */
.line-block { padding: 96px 0; }
.line-block.split { gap: 72px; }
.line-block-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  min-height: 420px;
  box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .35);
}
.line-block-media img {
  max-height: 420px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.line-block-body .kicker-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.line-block-body h2 { font-size: clamp(26px, 2.8vw, 36px); margin-bottom: 14px; }
.line-block-body > p { font-size: 16px; margin-bottom: 26px; }
.line-block-spec {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.section-soft .line-block-spec { background: #fff; }
.line-block-spec h4 {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 14px;
}

/* -- 9.3 规格表 -- */
.spec-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.spec-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}
.spec-table caption {
  caption-side: top;
  text-align: left;
  padding: 18px 24px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.spec-table th,
.spec-table td {
  padding: 14px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.65;
}
.spec-table thead th {
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}
.spec-table tbody tr:nth-child(even) { background: var(--bg-soft); }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  width: 168px;
}
.spec-table td:first-child:not([colspan]) { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.spec-table td { color: var(--ink-2); }
.spec-table .spec-group {
  background: var(--brand-050) !important;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
.spec-table-wide { min-width: 860px; }
.spec-table td .spec-strong { color: var(--ink); font-weight: 600; }
.spec-note {
  font-size: 13.5px;
  color: var(--muted);
  margin: 14px 0 0;
  line-height: 1.7;
}

/* 产品 article（详情页） */
.product-block { padding: 88px 0; }
.product-block.split { gap: 64px; }
.product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  min-height: 400px;
}
.product-media img {
  max-height: 420px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.product-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand-050);
  color: var(--brand);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}
.product-block h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 16px; }
.product-block .product-lede { font-size: 16px; margin-bottom: 26px; }
.spec-inline { margin-top: 28px; }

/* 交替方向：图文左右互换 */
.split-reverse > .split-media { order: 2; }
.split-reverse > .split-copy { order: 1; }

/* -- 9.4 场景图文卡（首页解决方案） -- */
.scene-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.scene-card:hover {
  border-color: #BFD3F5;
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}
.scene-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  padding: 22px;
  min-height: 240px;
  border-right: 1px solid var(--line);
}
.scene-card-media img {
  max-height: 220px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.scene-card-body { padding: 28px 30px; }
.scene-card-body h3 { font-size: 20px; margin-bottom: 10px; }
.scene-card-body p { font-size: 15px; margin: 0; }
/* 三列场景卡：内部改为上图下文纵向堆叠（.scene-media 自带 border-bottom） */
.grid-3 > .scene-card { grid-template-columns: 1fr; }

/* -- 9.5 引用式短评 -- */
.quote-card {
  margin: 0;                       /* 覆盖 blockquote 的 UA 默认 margin-inline:40px */
  padding: 24px 28px 24px 30px;    /* 竖线与正文之间留 30px，四周与 .card 的 28px 对齐 */
  background: var(--bg-soft);
  border-left: 3px solid var(--brand);
  border-radius: 4px var(--radius) var(--radius) 4px;
}
.quote-card h4 { font-size: 18px; margin-bottom: 8px; }
.quote-card p { font-size: 15px; }
.quote-note {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .02em;
}

/* -- 9.6 客户名牌 -- */
.client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.client-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 76px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.client-name .icon { color: var(--brand); opacity: .65; width: 20px; height: 20px; }
.client-name:hover {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
.client-name:hover .icon { opacity: 1; }
.section-ink .client-name {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: #E2E8F0;
}

/* -- 9.7 对照列表（难题 / 答案） -- */
.contrast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.contrast-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.contrast-col h3 { font-size: 20px; margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.contrast-col h3 .icon { color: var(--muted); width: 26px; height: 26px; }
.contrast-col-solution { border-color: rgba(58, 58, 219, .3); box-shadow: 0 26px 50px -36px rgba(58, 58, 219, .55); }
.contrast-col-solution h3 .icon { color: var(--brand); }
.contrast-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: cl; }
.contrast-list li { margin: 0; position: relative; padding-left: 42px; counter-increment: cl; }
.contrast-list li::before {
  content: counter(cl);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contrast-col-solution .contrast-list li::before { background: var(--brand); color: #fff; }
.contrast-list h4 { font-size: 16.5px; margin-bottom: 5px; }
.contrast-list p { font-size: 14.5px; margin: 0; }

/* -- 9.8 架构分层 -- */
.layer-list { display: grid; gap: 20px; }
.layer {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 24px 26px;
}
.layer h4 { font-size: 17px; margin-bottom: 8px; }
.layer p { font-size: 15px; margin: 0; }
.layer-2 { border-left-color: #6D5BF6; }
.layer-3 { border-left-color: var(--cyan); }

/* -- 9.9（已移除）缩略图切换（软件界面） --
   原 .shot-* 是智能耗材柜页「柜端软件界面」缩略图墙的样式。该区块已按需求删除
   （站内不放软件界面截图），13 页 HTML 里已无 shot-* 引用，样式成为死代码，已清除。
   相关的 main.js §08 initSwitcher 也一并移除。 */

/* == 10. 业务组件 ========================================================== */
/* -- 10.1 时间线 -- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.timeline-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 24px 22px;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.timeline-step:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: #BFD3F5; }
.timeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  box-shadow: 0 10px 20px -12px rgba(58, 58, 219, .9);
}
.timeline-step h4 { font-size: 16.5px; margin-bottom: 6px; }
.timeline-step p { font-size: 14px; color: var(--text); margin: 0; line-height: 1.65; }
.timeline-soft .timeline-step { background: #fff; }
.section-soft .timeline-step { background: #fff; }

/* -- 10.2 Tabs -- */
.tabs-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  margin: 0 auto 40px;
}
.tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab-btn {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  white-space: nowrap;
}
.tab-btn:hover { color: var(--brand); }
.tab-btn.is-active {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 12px 24px -14px rgba(58, 58, 219, .9);
}
.tab-panel { display: none; width: 100%; }
.tab-panel.is-active { display: block; animation: fade-up .45s var(--ease) both; }
.tab-panel.split { gap: 56px; }
.tab-panel-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  min-height: 420px;
}
.tab-panel-media img {
  max-height: 440px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.tab-panel h3 { font-size: clamp(21px, 2.2vw, 27px); margin-bottom: 14px; }
.tab-panel .tab-summary { font-size: 15.5px; margin-bottom: 22px; }

/* -- 10.3 手风琴 -- */
.accordion { display: grid; gap: 14px; }
.acc-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.acc-item.is-open { border-color: rgba(58, 58, 219, .35); box-shadow: 0 22px 46px -32px rgba(58, 58, 219, .5); }
.acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 26px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  transition: color var(--t) var(--ease);
}
.acc-btn:hover { color: var(--brand); }
.acc-item.is-open .acc-btn { color: var(--brand); }
.acc-btn .icon {
  width: 20px;
  height: 20px;
  flex: none;
  padding: 4px;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
  box-sizing: content-box;
  transition: transform .3s var(--ease), background-color var(--t) var(--ease);
}
.acc-item.is-open .acc-btn .icon { transform: rotate(45deg); background: var(--brand); color: #fff; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.acc-panel-inner { padding: 0 26px 24px; }
.acc-panel-inner p { font-size: 15px; margin: 0; }

/* -- 10.4 步骤流（横向） -- */
/* .flow 挂在 <ol> 上：必须显式清掉 list-style 与默认左内边距，
   否则浏览器会画出「1. 2. 3. …」的项目符号，与卡内的 .flow-num 圆圈、
   以及下面的 .flow-step::before 计数器叠成三重编号（2026-10 修复）。 */
.flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.flow-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 16px;
  text-align: center;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.flow-step:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.flow-step strong { display: block; font-size: 15.5px; color: var(--ink); font-weight: 600; }
.flow-step span { display: block; font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.flow-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.flow-9 .flow-step { padding: 18px 10px; }
.flow-9 .flow-step strong { font-size: 14.5px; }

/* -- 10.5 政策卡 -- */
.policy-card { border-left: 3px solid var(--brand); }
.policy-card h4 { font-size: 16.5px; line-height: 1.5; margin-bottom: 8px; }
.policy-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; letter-spacing: .02em; }
.policy-card p { font-size: 14.5px; }

/* -- 10.6 参考信息 -- */
.ref-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: rf; }
.ref-list li {
  position: relative;
  padding-left: 34px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
  counter-increment: rf;
}
.ref-list li::before {
  content: "[" counter(rf) "]";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
}
.ref-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* -- 10.7 CTA 条带 -- */
.cta-band { padding: 64px 0; }
.cta-inner {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 40px;
  align-items: center;
}
.cta-inner h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 16px; }
.cta-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cta-contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-size: 14.5px;
  color: #CBD5E1;
  line-height: 1.65;
}
.cta-contact .icon { color: var(--cyan); width: 18px; height: 18px; margin-top: 3px; }
.cta-contact a { color: #CBD5E1; }
.cta-contact a:hover { color: #fff; }
.cta-action { display: flex; justify-content: flex-end; }
.cta-action .btn { height: 52px; padding: 0 34px; font-size: 16px; }

/* -- 10.8 深色小卡 -- */
.ink-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.ink-card:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .28);
  transform: translateY(-4px);
}
.ink-card .icon { color: var(--cyan); margin-bottom: 14px; }
.ink-card h4 { font-size: 18px; margin-bottom: 8px; }
.ink-card p { font-size: 14.5px; color: #CBD5E1; margin: 0; }
.ink-stat-value {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 6px;
}
.ink-stat-value .stat-suffix { color: var(--cyan); }
.ink-card .stat-desc { color: rgba(203, 213, 225, .92); }

/* -- 10.9 联系卡 -- */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.contact-card .icon { color: var(--brand); width: 30px; height: 30px; margin-bottom: 8px; }
.contact-card h3 { font-size: 16px; margin: 0; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.contact-card .contact-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  word-break: break-word;
}
.contact-card a.contact-value:hover { color: var(--brand); }
.contact-card p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* 地图示意卡 */
.map-card {
  background: var(--grad-soft);
  border: 1px solid rgba(58, 58, 219, .18);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(58, 58, 219, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 58, 219, .07) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}
.map-card > * { position: relative; }
.map-pin {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px -18px rgba(58, 58, 219, .75);
  border: 1px solid var(--line);
}
.map-pin .icon { width: 30px; height: 30px; color: var(--brand); }
.map-card h3 { font-size: 19px; margin-bottom: 10px; }
.map-card p { font-size: 14.5px; color: var(--text); margin: 0 auto 24px; max-width: 42ch; }

/* == 11. 表单 ============================================================== */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 30px 60px -44px rgba(15, 23, 42, .4);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: #E11D48; margin-left: 2px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.7; font-family: inherit; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-right: 44px;
  cursor: pointer;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #C9D5EA; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(58, 58, 219, .12);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #E11D48;
  background: #FFF7F9;
}
.field-error {
  font-size: 13px;
  color: #E11D48;
  min-height: 0;
  display: none;
}
.field.has-error .field-error { display: block; }
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
}
.form-hint { font-size: 13px; color: var(--muted); margin: 0; }
.form-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
/* 「这个表单没有后台」的提示：放在提交按钮之前，用可见的底色确保不会被跳过 */
.form-note--warn {
  margin-top: 22px;
  margin-bottom: 0;
  padding: 14px 16px;
  border: 1px solid rgba(58, 58, 219, .22);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-050);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.7;
}
.form-note--warn a { color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.form-success {
  display: none;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px;
  border: 1px solid rgba(16, 185, 129, .35);
  background: rgba(16, 185, 129, .08);
  border-radius: var(--radius);
  margin-bottom: 26px;
}
.form-success.is-visible { display: flex; }
.form-success .icon { color: var(--ok); width: 26px; height: 26px; margin-top: 2px; flex: none; }
.form-success-title { font-size: 16.5px; font-weight: 600; margin: 0 0 6px; color: #0B815A; }
.form-success p { font-size: 14.5px; margin: 0; color: var(--ink-2); max-width: none; }
.form-success-body { min-width: 0; }
.form-success .btn-row { margin-top: 16px; gap: 12px; }

/* == 11.5 组件别名与补充（与页面标记一一对应） ============================= */
/* 产品卡：媒体区 / 文本区 / 底部箭头 */
.product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  padding: 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.product-media img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .4s var(--ease);
}
.product-card:hover .product-media img { transform: scale(1.045); }
.product-media-tall { height: 400px; }
.product-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-body h3 { margin-bottom: 4px; font-size: 21px; }
.product-body p { font-size: 15px; color: var(--text); margin-bottom: 20px; flex: 1; }
.product-en {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.product-foot { margin-top: auto; }
.product-grid { gap: 32px; align-items: start; }
.grid-3.product-grid { gap: 26px; }
.field .opt { font-size: 13px; color: var(--muted); font-weight: 400; }

/* 产品线区块：媒体 / 正文 / 规格速览 */
.line-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  min-height: 420px;
}
.line-media img {
  max-height: 420px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.line-body h2 { font-size: clamp(26px, 2.8vw, 36px); margin-bottom: 14px; }
.line-body > p { font-size: 16px; margin-bottom: 26px; }
.line-spec {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.line-spec h4 {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 14px;
}

/* 图卡内的产品照片 */
.tile-img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 图片尺寸档位 */
.media-width-lg { max-width: 900px; margin-left: auto; margin-right: auto; }
.media-width-md { max-width: 720px; margin-left: auto; margin-right: auto; }
.media-width-sm { max-width: 520px; margin-left: auto; margin-right: auto; }

/* 首页 Hero 产品主图 */
.hero-product { filter: drop-shadow(0 30px 60px rgba(58, 58, 219, .45)); }

/* 内容卡 + 图片卡（首页 数智视界） */
.card-media { overflow: hidden; padding: 0; }
.card-media img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* 数据条：栅格容器 + 浅色变体 */
.stats-bar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.stats-bar-light {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.stats-bar-light .stat { border-right-color: var(--line); }
.stats-bar-light .stat:last-child { border-right: 0; }
.stats-bar-light .stat-value { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; }
.stats-bar-light .stat-value .stat-suffix { color: var(--brand); }
.stats-bar-light .stat-desc { color: var(--text); }
.ink-grid { margin-top: 44px; }
.ink-stat-desc { font-size: 14px; color: rgba(203, 213, 225, .92); }
.ink-icon { display: inline-flex; color: var(--cyan); margin-bottom: 14px; }
.ink-lead { font-size: 17px; color: #CBD5E1; max-width: 60ch; margin: 0 auto; }

/* 产品详情：图文区 / 分组规格 / 小清单 */
.pb-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  min-height: 400px;
}
.pb-media img,
.pb-media-extra img { max-height: 400px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.pb-media-extra {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pb-body > h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 16px; }
.pb-body > p { font-size: 16px; margin-bottom: 22px; }
.pb-body h3 { font-size: 19px; margin: 30px 0 14px; }
.spec-group {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
   padding-top: 14px;
}
.spec-inline { display: inline-block; margin: 2px 0; }
.mini-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.mini-list li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--text); }
.mini-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand);
}

/* 三类柜体形态 / 焕能舱形态：左侧图 + 右侧说明 */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 44px;
  align-items: center;
  padding: 8px 0;
}
.form-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  min-height: 340px;
}
.form-media img { max-height: 340px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.form-body h3 { font-size: 22px; margin-bottom: 16px; }
.form-body > p { font-size: 15.5px; margin-bottom: 18px; }

/* 对照列表条目 */
.contrast-item { display: grid; gap: 10px; }
.contrast-item h4 { font-size: 16.5px; margin: 0; }
.contrast-item p { font-size: 14.5px; margin: 0; }
.contrast-item .icon { color: var(--muted); width: 24px; height: 24px; }
.is-answer .contrast-item .icon { color: var(--brand); }

/* 胶囊行 */
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pill-row.center { justify-content: center; }
.pill-row.mt-40 { margin-top: 40px; }
.pill-label { font-size: 14px; color: var(--text); align-self: center; margin-right: 4px; }

/* 柜端界面缩略图切换样式已随「柜端软件界面」区块移除（见 9.9 说明） */

/* 地图示意卡与联系信息 */
.map-name { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.map-addr { font-size: 14.5px; color: var(--text); margin: 0 0 20px; }
.contact-strong { font-weight: 600; color: var(--ink); }

/* 收尾提示与居中 */
.section-note,
.muted-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 20px auto 0;
  max-width: 72ch;
}
.section-note.center,
.muted-note.center { text-align: center; }
.highlight-line {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-left: 3px solid var(--brand);
  padding-left: 16px;
  margin: 24px 0;
}
.center { text-align: center; }
.check-list-columns { column-count: 2; column-gap: 32px; }
.note-mt { margin-top: 18px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.tile-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tick-list-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cert-block { text-align: center; }
.cert-image { max-width: 760px; width: 100%; height: auto; margin: 0 auto; }

/* 图文栅格：正文列 */
.split-body > h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 18px; }
.split-body > p { font-size: 16px; margin-bottom: 16px; }
.split-body > p:last-child { margin-bottom: 0; }
.split-body > h3 { font-size: 18px; margin: 28px 0 12px; }

/* 首页 Hero 背景图 */
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; }

/* 法规清单（智能药柜） */
.policy-list { display: grid; gap: 18px; }
.policy-meta {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 10px;
}

/* 场景卡：图片区 / 文本区 */
.scene-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 28px;
  min-height: 240px;
  border-bottom: 1px solid var(--line);
}
.scene-media img { max-height: 220px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.scene-body { padding: 28px 30px; }
.scene-body h3 { font-size: 20px; margin-bottom: 10px; }
.scene-body p { font-size: 15px; margin: 0; }

/* 手风琴内层与步骤序号 */
.acc-body { padding: 0 26px 24px; }
.acc-body p { font-size: 15px; margin: 0; }
.flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 10px;
}
.flow-step h3 { font-size: 16px; margin: 0; }

/* == 12. 返回顶部 ========================================================== */
.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 18px 34px -16px rgba(58, 58, 219, .95);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color var(--t) var(--ease);
  z-index: 80;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand-600); transform: translateY(-3px); }
.to-top .icon { width: 20px; height: 20px; }

/* == 13. 动效与工具类 ====================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, .8, .28, 1), transform .6s cubic-bezier(.22, .8, .28, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .4s; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.mb-0 { margin-bottom: 0; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: 40px; }
.text-muted { color: var(--muted); }
.text-brand { color: var(--brand); }
.fw-600 { font-weight: 600; }
.lead-text { font-size: 17px; line-height: 1.8; }
.small-note { font-size: 13px; color: var(--muted); line-height: 1.7; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* == 14. 响应式 ============================================================ */
@media (min-width: 1440px) {
  :root { --container: 1360px; }
}

@media (max-width: 1199px) {
  .logo img { height: 44px; }
  .nav-link { padding: 0 11px; font-size: 14.5px; }
  .nav-link::after { left: 11px; right: 11px; }
  .header-inner { gap: 16px; }
  .header-tools { gap: 12px; }
  .hotline-label { display: none; }
  /* 1024–1199px：logo 换成横排锁定版后顶栏只剩约 20px 余量，
     「EN 建设中」这枚 45px 的说明徽标先让位（页脚与移动菜单底部仍保留入口）。 */
  .lang-note { display: none; }
  .split { gap: 44px; }
  .line-block { padding: 80px 0; }
  .line-block.split { gap: 48px; }
  .product-block { padding: 72px 0; }
  .product-block.split { gap: 44px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 34px; }
  .flow-9 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  :root { --header-h: 68px; }
  .logo img { height: 40px; }
  .nav { display: none; }
  .burger { display: block; }
  .mobile-panel { display: block; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 42px; }
  .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split,
  .split-wide-left,
  .split-wide-right { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split-reverse > .split-media { order: 0; }
  .stats-bar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-bar .stat { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .stats-bar .stat:nth-child(2n) { border-right: 0; }
  .stats-bar .stat:nth-child(n + 3) { border-bottom: 0; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .hero { padding-top: calc(var(--header-h) + 48px); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-media { min-height: 280px; order: 2; }
  /* min(..., 100%) 不能省：这两条断点规则会**顶掉**基础规则里的
     max-width:100%，只写死像素值的话 320px 视口下图片会被父容器裁掉
     10px（几何审计 index.html@320 抓到过）。 */
  .hero-media img { max-width: min(480px, 100%); }
  .hero-copy { max-width: none; order: 1; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-card { grid-template-columns: 1fr; }
  .scene-card-media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 200px; }
  .cta-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cta-action { justify-content: flex-start; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-bottom: 40px; }
  .line-block-media { min-height: 340px; }
  .line-block-media img { max-height: 340px; }
  .product-card-media { height: 280px; }
  .product-card-tall .product-card-media { height: 300px; }
  /* .product-media 基类是固定 height:320px + padding:24px，
     这里若只把 img 的 max-height 抬到 320px，图片会高出内容盒 48px 被 overflow:hidden 裁掉。
     改成 height:auto + min-height，让盒子跟着图片长，不裁切。 */
  .product-media { height: auto; min-height: 320px; }
  .product-media img { max-height: 320px; }
  .form-card { padding: 30px 26px; }
  .section-head-left { text-align: left; }
}

@media (max-width: 767px) {
  body { font-size: 15.5px; line-height: 1.72; }
  :root { --gutter: 18px; --radius: 14px; --radius-lg: 16px; }
  .logo img { height: 38px; }
  /* 手机顶栏一行要塞下 logo + 电话 + 中文/EN + 汉堡，再加「建设中」小胶囊就会把
     汉堡挤出视口（实测 390px 下文档宽被撑到 441px，汉堡整体不可见、菜单点不开）。
     窄屏隐去胶囊；语义仍由容器 aria-label 与 span[lang=en] 保留。 */
  .lang-note { display: none; }
  .header-inner { min-width: 0; }
  .header-tools { min-width: 0; flex-wrap: nowrap; }
  .section { padding: 64px 0; }
  .section-sm { padding: 48px 0; }
  .section-head { margin-bottom: 34px; }
  .section-head h2 { font-size: clamp(23px, 6.4vw, 30px); }
  .section-head .lead { font-size: 15.5px; }
  h1 { font-size: clamp(26px, 7.4vw, 36px); }
  h2 { font-size: clamp(23px, 6.2vw, 30px); }
  h3 { font-size: clamp(20px, 5.2vw, 24px); }
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: 20px; }
  .split { gap: 28px; }
  .stat-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .stat-value { font-size: clamp(32px, 10vw, 42px); }
  .page-hero { padding: calc(var(--header-h) + 40px) 0 44px; min-height: 0; }
  .page-hero-lead { font-size: 15.5px; }
  .breadcrumb { font-size: 12.5px; margin-top: 16px; }
  .hero { padding-top: calc(var(--header-h) + 34px); }
  .hero-lead { font-size: 15.5px; }
  .hero-media { min-height: 220px; }
  .hero-media img { max-width: min(340px, 100%); }
  .hero::after { height: 130px; }
  .hero + .section { padding-top: 56px; }
  .stats-bar { border-radius: var(--radius); }
  .stats-bar-grid { grid-template-columns: minmax(0, 1fr); }
  .stats-bar .stat {
    padding: 20px 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .stats-bar .stat:last-child { border-bottom: 0; }
  .stats-bar .stat-value { font-size: clamp(30px, 9vw, 38px); }
  .btn { height: 44px; padding: 0 22px; font-size: 14.5px; }
  .btn-row { gap: 12px; }
  .btn-row .btn { flex: 1 1 auto; }
  .anchor-bar { padding: 10px 0; }
  .anchor-bar .container { gap: 10px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .anchor-bar-label { display: none; }
  .anchor-bar .pill { flex: none; padding: 7px 15px; font-size: 13.5px; }
  .line-block { padding: 60px 0; }
  .line-block-media { min-height: 250px; padding: 20px; }
  .line-block-media img { max-height: 250px; }
  .line-block-spec { padding: 18px 18px; }
  .product-block { padding: 56px 0; }
  .product-media { min-height: 230px; padding: 18px; }
  .product-media img { max-height: 240px; }
  .product-card-media { height: 230px; padding: 18px; }
  .product-card-tall .product-card-media { height: 250px; }
  .product-card-body { padding: 20px 20px 22px; }
  .scene-card-media { min-height: 170px; padding: 16px; }
  .scene-card-media img { max-height: 170px; }
  .scene-card-body { padding: 22px 20px; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tile { padding: 14px; }
  .tile-media { height: 130px; margin-bottom: 12px; }
  .tile h4 { font-size: 14.5px; }
  .tile p { font-size: 12.5px; }
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .flow, .flow-9 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .flow-step { padding: 16px 12px; }
  .flow-step strong { font-size: 14.5px; }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .client-name { min-height: 66px; font-size: 14.5px; padding: 12px 10px; }
  .contrast-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contrast-col { padding: 24px 20px; }
  .tabs-bar { width: 100%; border-radius: var(--radius); justify-content: center; gap: 4px; padding: 5px; margin-bottom: 26px; }
  .tab-btn { flex: 1 1 auto; text-align: center; padding: 9px 14px; font-size: 14px; }
  .tab-panel-media { min-height: 260px; padding: 18px; }
  .tab-panel-media img { max-height: 260px; }
  .tab-panel h3 { font-size: 20px; }
  .accordion { gap: 10px; }
  .acc-btn { padding: 18px 18px; font-size: 15.5px; }
  .acc-panel-inner { padding: 0 18px 20px; }
  .cta-band { padding: 52px 0; }
  .cta-contact { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cta-action .btn { width: 100%; }
  .ink-card { padding: 22px 20px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-bottom: 30px; }
  .site-footer { padding-top: 52px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .form-card { padding: 24px 18px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .map-card { padding: 30px 20px; }
  .contact-card .contact-value { font-size: 16px; }
  .spec-table { min-width: 560px; font-size: 14.5px; }
  .spec-table th, .spec-table td { padding: 12px 16px; }
  .spec-table tbody th { width: 120px; }
  .spec-table-wide { min-width: 720px; }
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  .product-card-en { font-size: 11.5px; }
  .mobile-nav { padding: 10px 18px 20px; }
  .mobile-foot { padding: 18px 18px 28px; }
}

/* 320–600px：顶栏只留「logo + 电话图标 + 中文/EN + 汉堡」。
   号码文字在极窄屏收起（电话入口保留为图标链接，可点即拨），
   完整号码在移动菜单底部（.mobile-foot .hotline）与页脚里都在。 */
@media (max-width: 600px) {
  .header-inner { gap: 16px; }
  .header-tools { gap: 12px; }
  .logo img { height: 34px; }
  .hotline { gap: 0; }
  .hotline strong { display: none; }
  /* 号码隐藏后这个链接就只剩图标了，必须自己撑够点击面积：
     WCAG 2.5.8 要求目标至少 24×24 CSS px，实测只给 20×20 的图标时
     链接盒就是 20×20（a11y 审计报 A.hotline w=20 h=20 不达标），
     这里给到 40×40 —— 它同时也是窄屏上「一键拨号」的唯一入口。 */
  .hotline { min-width: 40px; min-height: 40px; justify-content: center; }
  .hotline .icon { width: 20px; height: 20px; }
  .lang { font-size: 13.5px; }
}

@media (max-width: 420px) {
  .logo img { height: 30px; }
  /* 320–420px 这一段顶栏要同时容纳 logo、一键拨号图标与汉堡按钮，宽度不够。
     语言切换目前只是「EN 建设中」的占位（页脚与移动菜单底部仍保留入口），
     窄屏先给它让位——否则汉堡按钮会被 flex 压到 6px 宽（低于 24×24 触控下限）。 */
  .lang { display: none; }
  .tile-grid { grid-template-columns: minmax(0, 1fr); }
  .tile-media { height: 150px; }
  .client-grid { grid-template-columns: minmax(0, 1fr); }
  .flow, .flow-9 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
  .logo img { height: 26px; }
}

@media print {
  .site-header, .to-top, .mobile-panel, .mobile-backdrop { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* == 15. 设备查询页（device.html 与客户服务页入口区块） ================== */
/* 类名统一 device- 前缀。颜色全部取自既有令牌（--brand / --brand-050 / --cyan /
   --line / --bg-soft / --ink 等），错误态沿用站内既有的 #E11D48 与 #FFF7F9。 */

/* -- 15.1 [hidden] 兜底：.btn 的 display:inline-flex 会压过 UA 的 [hidden] -- */
#query[hidden], #result[hidden], #where[hidden],
#query [hidden], #result [hidden], #where [hidden] { display: none !important; }

/* -- 15.1b 禁用态反馈：浏览器不支持二维码识别时脚本会禁用扫码/上传按钮。
     站点其它页面从无禁用按钮，故不改全局，只在本页作用域内补齐视觉反馈。 -- */
.device-panel .btn:disabled {
  opacity: .45;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.device-panel .btn:disabled:hover { transform: none; box-shadow: none; }
.device-panel .btn-primary:disabled:hover { background: var(--brand); }
.device-panel .btn-ghost:disabled:hover {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}

/* -- 15.2 查询区两栏 -- */
.device-query-grid { align-items: stretch; }
.device-panel { display: flex; flex-direction: column; gap: 16px; }
/* 面板内含输入与按钮，取消卡片悬浮抬升，改为描边强调，避免操作时画面抖动 */
.device-panel:hover { transform: none; border-color: #BFD3F5; box-shadow: var(--shadow-card); }
.device-panel-head { display: flex; align-items: flex-start; gap: 16px; }
.device-panel-head .card-icon { margin-bottom: 0; flex: none; }
.device-panel-head h3 { margin-bottom: 6px; }
.device-panel-desc { font-size: 14px; color: var(--text); margin: 0; }
.device-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }

/* -- 15.3 取景框：纯 CSS 绘制，不使用任何图片 -- */
.device-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.device-scan-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.device-scan-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(64%, 240px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.device-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 14px rgba(34, 211, 238, .35);
}
.device-corner-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius-sm); }
.device-corner-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: var(--radius-sm); }
.device-corner-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: var(--radius-sm); }
.device-corner-br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius-sm); }
.device-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(34, 211, 238, 0),
    rgba(34, 211, 238, .55),
    rgba(34, 211, 238, 0));
  background-size: 100% 18%;
  background-position: 0 50%;
  background-repeat: no-repeat;
  animation: device-scan 2.8s linear infinite;
  will-change: transform;
}
@keyframes device-scan {
  0% { transform: translateY(-100%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* -- 15.4 状态行与输入框 -- */
.device-status { min-height: 21px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.device-status:not(:empty) { color: var(--brand-600); }
.device-input {
  width: 100%;
  min-height: 84px;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  resize: vertical;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.device-input::placeholder { color: var(--muted); }
.device-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(58, 58, 219, .12); }
.device-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 28px 0 0;
  padding: 16px 20px;
  background: var(--brand-050);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-600);
}
.device-privacy .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }

/* -- 15.5 结果卡 -- */
.device-result {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
  animation: device-rise .45s var(--ease-out) both;
}
@keyframes device-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.device-result-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.device-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.device-badge-ok { background: rgba(16, 185, 129, .12); color: #0B815A; }
.device-badge-warn { background: var(--brand-050); color: var(--brand-600); }
.device-badge-error { background: rgba(225, 29, 72, .1); color: #E11D48; }
.device-result-title { margin: 0; font-size: 26px; line-height: 1.32; color: var(--ink); }
.device-result-line { margin: 0; font-size: 15px; color: var(--text); }
.device-result-line a { color: var(--brand); font-weight: 600; border-bottom: 1px solid rgba(58, 58, 219, .28); }
.device-result-line a:hover { border-bottom-color: var(--brand); }
.device-result-tagline { color: var(--muted); }
.device-result-tagline::before { content: "　·　"; }

/* -- 15.6 字段区 -- */
.device-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.device-field { padding: 16px 18px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.device-field-wide { grid-column: 1 / -1; }
.device-field-label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.device-field-value { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.device-field-note { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); }
.device-sn-box { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.device-sn {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  word-break: break-all;
}
.device-copy { flex: none; }

/* -- 15.7 出厂资料与提示 -- */
.device-model-block { margin-top: 28px; }
.device-model-block h4 { margin: 0 0 14px; font-size: 17px; color: var(--ink); }
.device-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.device-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 14px;
  color: var(--text);
}
.device-issues {
  margin: 20px 0 0;
  padding: 14px 20px 14px 36px;
  background: #FFF7F9;
  border: 1px solid rgba(225, 29, 72, .16);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.device-issues li::marker { color: #E11D48; }
.device-notice {
  display: flex;
  align-items: flex-start;
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.65;
}
.device-notice-warn { background: var(--brand-050); color: var(--brand-600); }
.device-notice-info { background: var(--bg-soft); color: var(--text); }
.device-format-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.device-format-list li {
  padding: 14px 18px;
  background: var(--bg-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.device-disclaimer {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* -- 15.8 客户服务页的设备查询入口区块 -- */
.device-entry { display: grid; gap: 24px; align-items: center; }
.device-entry-body h3 { margin-bottom: 10px; }
.device-entry-body p { font-size: 15px; color: var(--text); }
.device-entry-body .tick-list { margin-top: 14px; }
.device-entry-action { display: flex; }

/* -- 15.9 响应式 -- */
@media (min-width: 1440px) {
  .device-scan-frame { width: min(60%, 280px); }
}
@media (max-width: 1199px) {
  .device-result { padding: 30px; }
}
@media (max-width: 991px) {
  .device-query-grid { grid-template-columns: minmax(0, 1fr); }
  .device-panel { gap: 14px; }
  .device-entry { grid-template-columns: minmax(0, 1fr); }
  .device-entry-action { justify-content: flex-start; }
  .device-result { padding: 26px; }
  .device-result-title { font-size: 23px; }
}
@media (max-width: 767px) {
  .device-panel { padding: 20px; }
  .device-fields { grid-template-columns: minmax(0, 1fr); }
  .device-scan-frame { width: min(74%, 200px); }
  .device-corner { width: 24px; height: 24px; }
  .device-privacy { padding: 14px 16px; font-size: 13.5px; }
  .device-result { padding: 22px 18px; }
  .device-result-title { font-size: 21px; }
  .device-sn { font-size: 14px; }
  .device-entry-body .btn { width: 100%; }
}
@media (max-width: 420px) {
  .device-result { padding: 20px 16px; }
  .device-sn { font-size: 13px; }
  .device-corner { width: 20px; height: 20px; }
  .device-notice, .device-issues, .device-format-list li { padding-left: 14px; padding-right: 14px; }
}

/* -- 15.10 尊重「减少动态效果」偏好：关闭扫描线与结果卡入场 -- */
@media (prefers-reduced-motion: reduce) {
  .device-scanline { display: none; }
  .device-result { animation: none; }
}

/* ==========================================================================
   16. 焕能舱页（products-energy-pod.html）专属样式
   全部为新增类名，不修改任何既有类；.cta-inner--media 是 .cta-inner 的修饰类，
   只在焕能舱页「体验与合作」深色区块上使用。
   ========================================================================== */

/* -- 16.1 深色区块「文字 + 舱体渲染图」两列版式 -- */
.cta-inner--media {
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px);
  gap: 56px;
  align-items: center;
}
/* 黑底产品图为纯黑背景，用 screen 混合叠在深色渐变上，避免出现黑方块。
   注意：混合必须发生在「图片自身之上」——若把 mix-blend-mode 放在图片上，
   而其祖先带有 .reveal（will-change: opacity/transform 会创建层叠上下文），
   浏览器会在隔离层内合成，screen 失效并露出黑方块。因此本页把 .blend-screen
   加在 .cta-media 列容器上，图片本身不再包 .reveal。 */
.blend-screen { display: block; width: 100%; height: auto; mix-blend-mode: screen; }
.cta-media { max-width: 560px; margin-inline: auto; }

/* -- 16.2 「一次体验的体感类比」三列栅格（体感描述，非数值统计） -- */
.stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.stat-value.stat--quiet { font-size: clamp(24px, 2.6vw, 32px); }

/* -- 16.3 响应式 -- */
@media (max-width: 1199px) {
  .cta-inner.cta-inner--media { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cta-media { max-width: 520px; }
}
@media (max-width: 991px) {
  .cta-inner.cta-inner--media { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cta-media { max-width: 460px; }
  .stat-grid--3 { gap: 28px; }
}
@media (max-width: 767px) {
  .cta-inner.cta-inner--media { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cta-media { max-width: 100%; }
  .stat-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .stat-value.stat--quiet { font-size: clamp(22px, 6.4vw, 28px); }
}

/* ==========================================================================
   17. 条款与说明页（privacy.html / terms.html / sitemap.html）专属样式
   全部为新增类名，不影响任何既有页面。
   ========================================================================== */

/* -- 17.1 长文正文：限制行宽便于阅读 -- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text);
}
.legal-lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-2);
  padding: 20px 22px;
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-050);
  margin-bottom: 40px;
}
.legal h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 40px 0 14px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; line-height: 1.75; }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--brand-600); }
.legal strong { color: var(--ink); }
.legal > h2 + p { margin-top: 0; }
.legal-meta {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}

/* -- 17.2 网站地图的链接清单 -- */
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
}
.sitemap-list ul { list-style: none; margin: 4px 0 14px; padding: 0 0 0 14px; border-left: 1px solid var(--line); }
.sitemap-list ul a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 14px;
  color: var(--text);
}
.sitemap-list ul a:hover,
.sitemap-list > li > a:hover { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }
.sitemap-list-inline { display: flex; flex-wrap: wrap; gap: 8px 28px; }

@media (max-width: 767px) {
  .legal-lead { font-size: 15.5px; padding: 16px 18px; }
  .legal h2 { font-size: 18px; margin-top: 32px; }
}

/* ==========================================================================
   18. 移动工作站页 · 设计品质（第二十轮：自「走进杉壹」迁移；图标改为行内图标块）
   新增类：.feature-grid-2 / .feature-ico；.feature-row 复用既有定义，仅补 h3 与图标块规则。
   ========================================================================== */
.feature-list.feature-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
.feature-row .feature-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand-050);
  color: var(--brand);
}
.feature-row .feature-ico .icon { margin: 0; color: inherit; }
.feature-row h3 { margin-bottom: 4px; font-size: 17px; }
.feature-row p { font-size: 15px; margin-bottom: 0; color: var(--text); }

@media (max-width: 991px) {
  .feature-list.feature-grid-2 { grid-template-columns: 1fr; gap: 22px; }
}

/* ==========================================================================
   19. 焕能舱页 · 体验与合作（第二十一轮：桌面版左对齐收紧 + 页面底部小字免责声明）
   只新增修饰类与页面级类：.cta-tight / .page-fineprint；
   .cta-inner--media 下的三条规则只作用于该修饰类，不改 .cta-inner 与 .cta-action 本身。
   ========================================================================== */
.section-ink.cta-tight { padding: 72px 0; }
.cta-inner--media { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 48px; }
.cta-inner--media h2 { margin-bottom: 12px; }
.cta-inner--media .ink-lead { margin: 0; max-width: none; text-align: left; }
.cta-inner--media .cta-action { justify-content: flex-start; margin-top: 26px; }
.cta-inner--media .cta-action .btn { height: 48px; padding: 0 30px; font-size: 15.5px; }

.page-fineprint {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.page-fineprint p {
  margin: 0;
  max-width: 100ch;
  font-size: 12.5px;
  line-height: 1.8;
  color: rgba(203, 213, 225, .8);
}

@media (max-width: 767px) {
  .section-ink.cta-tight { padding: 56px 0; }
  .page-fineprint { margin-top: 40px; }
}

/* ==========================================================================
   20. 咨询表单：后端接口上线后的状态样式（第二十二轮）
   新增类：.hp-field（蜜罐隐藏）/ .form-note--err（失败提示）；不改既有表单样式。
   ========================================================================== */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note--err { color: #B42318; }
.form-note--err a { color: inherit; text-decoration: underline; }
.btn[disabled] { opacity: .65; cursor: progress; }

/* ==========================================================================
   21. 设备查询结果卡：出厂配置一条一行后的行高与窄屏适配（第二十轮设备改造）
   新增类：无（只作用于 .device-result 作用域内），不改共享 .spec-table 规则。
   - 行高 10px：一条一行后行数变多，压缩纵向高度；
   - min-width: 0：手机上两列表格按容器宽度收缩、文字换行，避免横向滚动。
   ========================================================================== */
.device-result .spec-table { min-width: 0; }
.device-result .spec-table th,
.device-result .spec-table td { padding: 10px 18px; vertical-align: top; }
.device-result .spec-table tbody th { width: 132px; }
.device-result .spec-table td:first-child:not([colspan]) { color: var(--ink-2); font-size: 13px; letter-spacing: 0; }

@media (max-width: 560px) {
  .device-result .spec-table th,
  .device-result .spec-table td { padding: 9px 12px; }
  .device-result .spec-table tbody th { width: 104px; }
}