/* ===========================================================================
   SCITEK Labware Cleaning Systems — storefront styles
   Mobile-first · WCAG 2.2 aware · no external fonts or images
   ---------------------------------------------------------------------------
   设计语言：工业深蓝 + 钢构灰 + 单一强调蓝，卡片留白克制，
   所有装饰图形走内联 SVG / 纯 CSS 渐变，不依赖任何外链资源。

   版式节奏取自参考站（Labconco 分类页）的 getComputedStyle 实测值，
   但配色全部换成 SCITEK 品牌色——绝不使用参考站的橙色强调色。
   实测出处与逐项映射见 ../_intake-labware/DESIGN.md：
     容器 1500px · 正文 17px/1.70 · H1 38px/800/负字距
     按钮圆角 7px · 卡片圆角 6px · 标题字重 800（对比强烈是这套设计的关键）
   =========================================================================== */

:root {
  /* 品牌色板 */
  --navy: #0f2c4c;
  --navy-2: #163a63;
  --navy-3: #0b2340;
  --accent: #1565c0;
  --accent-dark: #0d47a1;
  --accent-light: #4a9ae8;
  --steel: #7f9dbd;

  /* 中性色 */
  --bg: #ffffff;
  --bg-alt: #f4f6f8;
  --bg-sunken: #eef2f6;
  --text: #1b2733;
  --muted: #51606f;
  --line: #d9e0e6;
  --line-soft: #e8eef4;

  /* 功能色 */
  --ok: #1b7f4b;
  --warn: #b7791f;
  --err: #c62828;

  /* --- 多色相扩展色板 -----------------------------------------------------
     品牌主色仍是工业深蓝，但整站不再只有「蓝 + 灰」。
     每组色相给四个值：
       --aN    主色：用于白底上的文字 / 图标 / 边框（对白底 ≥ 5.3:1）
       --aN-t  「浅底上的字」：比主色更深一档，压住浅底后仍 ≥ 5.4:1
               （浅底上的小字若直接用主色，蓝/青两组只有 4.1~4.3:1，不达 AA）
       --aN-l  浅底色：图标底托、chip 背景、色条底；色相之间必须能分辨，
               所以饱和度刻意拉开，不能都用「几乎一样的浅蓝」
       --aN-d / --aN-d2  深底渐变的起止色（其上白字 ≥ 8:1）
     组件统一读 var(--ac) / var(--ac-t) / var(--ac-l) / var(--ac-d)，
     由 .ac-1 … .ac-6 赋值，没写 .ac-N 的地方自动回落到品牌蓝。 */
  --a1: #1565c0; --a1-t: #14508f; --a1-l: #d9e9fb; --a1-d: #0f2c4c; --a1-d2: #1565c0;  /* 品牌蓝 */
  --a2: #0b7285; --a2-t: #0a5c6b; --a2-l: #cfeef0; --a2-d: #06313c; --a2-d2: #0b7285;  /* 青 */
  --a3: #6741c0; --a3-t: #4f2f96; --a3-l: #e6dcfa; --a3-d: #241046; --a3-d2: #6741c0;  /* 紫 */
  --a4: #a15c00; --a4-t: #7d4700; --a4-l: #fbe7c6; --a4-d: #3f2400; --a4-d2: #a15c00;  /* 琥珀 */
  --a5: #17794e; --a5-t: #12603e; --a5-l: #d2f0df; --a5-d: #06301e; --a5-d2: #17794e;  /* 绿 */
  --a6: #b02a4c; --a6-t: #8c1f3c; --a6-l: #fbdbe4; --a6-d: #3d0c1a; --a6-d2: #b02a4c;  /* 玫红 */

  /* 圆角：按钮 7px、卡片 6px（参考站实测），小元件 4px */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-btn: 7px;
  --radius-pill: 999px;
  /* 标题字重：参考站 H1/H2/H3 全部 800，对比强烈是其设计特征 */
  --fw-display: 800;
  --ls-display: -.02em;
  --shadow-sm: 0 1px 2px rgba(15, 44, 76, .06), 0 1px 3px rgba(15, 44, 76, .08);
  --shadow-md: 0 6px 20px rgba(15, 44, 76, .12);
  --shadow-lg: 0 18px 48px rgba(15, 44, 76, .16);
  /* 容器 1500px（参考站实测：max-width 1500px，@1440 视口实际渲染 1360px）。
     正文改用 .container.narrow 收窄，避免行宽过长影响可读性。 */
  --maxw: 1500px;
  --maxw-read: 900px;
  --ring: 0 0 0 3px rgba(21, 101, 192, .32);
}

/* --- 色相选择器 -----------------------------------------------------------
   给任意容器加 .ac-N（N=1..6），其内部所有读取 --ac 的组件都会跟着换色。
   这样「一张分类卡 / 一个内页横幅 / 一组特性条目」可以在不改组件样式的前提下
   各自拥有不同色相。 */
.ac-1 { --ac: var(--a1); --ac-t: var(--a1-t); --ac-l: var(--a1-l); --ac-d: var(--a1-d); --ac-d2: var(--a1-d2); }
.ac-2 { --ac: var(--a2); --ac-t: var(--a2-t); --ac-l: var(--a2-l); --ac-d: var(--a2-d); --ac-d2: var(--a2-d2); }
.ac-3 { --ac: var(--a3); --ac-t: var(--a3-t); --ac-l: var(--a3-l); --ac-d: var(--a3-d); --ac-d2: var(--a3-d2); }
.ac-4 { --ac: var(--a4); --ac-t: var(--a4-t); --ac-l: var(--a4-l); --ac-d: var(--a4-d); --ac-d2: var(--a4-d2); }
.ac-5 { --ac: var(--a5); --ac-t: var(--a5-t); --ac-l: var(--a5-l); --ac-d: var(--a5-d); --ac-d2: var(--a5-d2); }
.ac-6 { --ac: var(--a6); --ac-t: var(--a6-t); --ac-l: var(--a6-l); --ac-d: var(--a6-d); --ac-d2: var(--a6-d2); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.70;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

h1, h2, h3, h4 {
  line-height: 1.18; color: var(--navy);
  font-weight: var(--fw-display); letter-spacing: var(--ls-display);
}
/* 参考站 H1 38px / 1.15 / 800 / ls -0.76px(≈-2%)，这里用 clamp 适配小屏 */
h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; margin: 0 0 .4em; }
h2 { font-size: clamp(24px, 3.5vw, 32px); line-height: 1.15; margin: 0 0 .5em; }
h3 { font-size: 1.28rem; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
/* 长段落收窄到 ~90 字符，1500 容器下直接通栏会难读 */
.container.narrow { max-width: var(--maxw-read); }
.section { padding: 52px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: .35em; }
/* 区块标题前的短色条：给每个区块一个明确的色彩锚点 */
.section-head h2::before {
  content: ""; display: block; width: 44px; height: 4px; border-radius: 3px;
  background: var(--ac, var(--accent)); margin-bottom: 10px;
}
.h-sm { font-size: 1.15rem; }
.lead { font-size: 1.06rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.link-more { font-weight: 600; white-space: nowrap; }
.count-badge {
  background: var(--ac-l, var(--bg-sunken)); color: var(--ac-t, var(--navy)); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: .84rem; font-weight: 600;
}
.stat-inline { color: var(--muted); font-size: .95rem; }
.stat-inline strong { color: var(--navy); font-size: 1.15rem; }

/* Accessibility helpers ---------------------------------------------------- */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 8px; top: 8px; }
.visually-hidden, .hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Header / nav ------------------------------------------------------------ */
.site-header {
  background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
/* 顶端多色细线：整站配色的「索引」，滚动时一直可见 */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--a1), var(--a2), var(--a5), var(--a4), var(--a6), var(--a3));
}
.header-inner { display: flex; align-items: center; gap: 12px; min-height: 66px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; color: #fff; font-weight: 700; font-size: 1.1rem; }
.brand img { height: 40px; width: auto; }
.brand:hover { text-decoration: none; }
.nav-toggle {
  margin-left: auto; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-sm); font-size: 1.2rem; min-width: 44px; min-height: 44px; cursor: pointer;
}
.primary-nav { display: none; width: 100%; }
.primary-nav.open { display: block; }
.primary-nav ul { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.primary-nav a { color: #fff; display: block; padding: 12px 10px; min-height: 44px; border-radius: var(--radius-sm); }
.primary-nav a:hover, .primary-nav a:focus { background: rgba(255, 255, 255, .12); text-decoration: none; }
.lang-switch { display: none; }   /* 站点已改为英文单语，语言切换器不再使用 */
/* 页头常驻询盘按钮（原语言切换器所在位置）——琥珀色在全蓝页头里形成明确的行动点 */
.nav-cta { min-height: 39px; padding: 9px 16px; font-size: 15px; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 39px; padding: 9px 16px; border-radius: var(--radius-btn); font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; font-size: 15px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s;
}
/* 触摸设备上把按钮抬到 44px：参考站是 39px 桌面尺寸，但手指需要更大的目标
   （WCAG 2.2 SC 2.5.8 只要 24px，44px 是更舒服的移动端实践） */
@media (pointer: coarse) {
  .btn { min-height: 44px; padding: 11px 18px; }
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-dark); }
/* 询盘/报价类主行动：琥珀色，与品牌蓝互补，在整片冷色里形成视觉锚点 */
.btn-cta { background: var(--a4); color: #fff; box-shadow: var(--shadow-sm); }
.btn-cta:hover { background: #8a4e00; }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost:hover { background: rgba(255, 255, 255, .18); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: #eaf1f8; }
.btn-sm { padding: 7px 13px; min-height: 34px; font-size: 14px; background: #fff; color: var(--navy); border-color: var(--line); }
.btn-sm:hover { border-color: var(--accent); color: var(--accent-dark); }

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, #081d33 0%, var(--navy) 32%, #123f6b 62%, var(--accent) 100%);
}
/* 三团彩色光晕：把原本单一深蓝的主视觉拉开色相层次（青 / 紫 / 蓝） */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 320px at 8% 14%, rgba(74, 154, 232, .40), transparent 68%),
    radial-gradient(440px 300px at 80% 6%, rgba(13, 148, 136, .34), transparent 70%),
    radial-gradient(520px 340px at 62% 96%, rgba(103, 65, 192, .30), transparent 72%),
    radial-gradient(360px 240px at 32% 88%, rgba(176, 42, 76, .18), transparent 72%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: url("/assets/img/banner/hero.svg");
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.hero-inner { display: grid; gap: 28px; padding: 56px 18px 60px; align-items: center; position: relative; }
.hero h1 { color: #fff; margin-bottom: .35em; text-wrap: balance; }
.hero-kicker {
  display: inline-block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: #b9d5f2; border: 1px solid rgba(185, 213, 242, .4); border-radius: 999px;
  padding: 5px 14px; margin: 0 0 16px;
}
.hero-sub { font-size: 1.08rem; color: #dbe6f2; max-width: 56ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.hero-media { display: flex; justify-content: center; }
.hero-media img {
  border-radius: var(--radius); background: #fff; padding: 14px; box-shadow: var(--shadow-lg);
  max-width: 420px; width: 100%;
}
.hero-stats {
  list-style: none; padding: 0; margin: 30px 0 0;
  /* 用 grid + auto-fit 而不是 flex-wrap：4 项在窄栏里会撑不下并「3 + 1」错行，
     grid 会自适应成 4 列或 2×2，间距始终均等。 */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 18px 20px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 20px;
}
.hero-stats li { display: flex; flex-direction: column; gap: 2px; }
.hero-stats strong { font-size: 1.5rem; color: #fff; line-height: 1.1; }
.hero-stats span { font-size: .82rem; color: #b9d5f2; }
/* 每个统计数字给一个不同色相——深底上必须用浅色调才够对比度 */
.hero-stats li:nth-child(1) strong { color: #9ecbff; }
.hero-stats li:nth-child(2) strong { color: #7fe3d4; }
.hero-stats li:nth-child(3) strong { color: #cdb8ff; }
.hero-stats li:nth-child(4) strong { color: #ffcf8a; }

/* ===== 首页 Banner 轮播（多图 / 文字叠加 / 透明 PNG / 可调显示宽度） ===== */
.hero-banner { padding: 0; }
.banner-carousel { position: relative; overflow: hidden; }
.banner-stage { position: relative; }
.banner-slide { display: none; position: relative; }
.banner-carousel.is-single .banner-slide { display: block; }
.banner-img {
  width: 100%; height: auto; display: block; margin: 0 auto;
  /* 透明 PNG / 空白图时给一个品牌渐变底，避免露出白块 */
  background: linear-gradient(135deg, #081d33 0%, var(--navy) 60%, var(--accent) 100%);
}
.banner-overlay {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0 6vw; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,29,51,.80) 0%, rgba(8,29,51,.42) 44%, rgba(8,29,51,0) 72%);
}
.banner-cap { max-width: 600px; pointer-events: auto; }
.banner-cap h1, .banner-cap h2 {
  color: #fff; margin: 0 0 .35em; text-wrap: balance;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem); line-height: 1.12;
}
.banner-sub { font-size: 1.05rem; color: #dbe6f2; max-width: 52ch; margin: 0 0 18px; }
.banner-cap .btn { pointer-events: auto; }
.bnr-radio { position: absolute; opacity: 0; pointer-events: none; }
/* 纯 CSS 轮播：选中某 radio 即显示对应 slide（选中规则由模板按 banner 数生成） */
.banner-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; gap: 10px; justify-content: center; z-index: 5; }
.bnr-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; border: 2px solid transparent; transition: background .15s, border-color .15s; }
.bnr-dot:hover { background: #fff; }
@media (max-width: 640px) {
  .banner-overlay {
    align-items: flex-end; padding: 0 5vw 56px;
    background: linear-gradient(0deg, rgba(8,29,51,.84) 0%, rgba(8,29,51,.30) 60%, rgba(8,29,51,0) 100%);
  }
  .banner-cap { max-width: 100%; }
}

/* 信任条 */
.trust-strip { background: var(--navy-3); color: #cfe0f1; border-top: 1px solid rgba(255, 255, 255, .08); }
.trust-inner {
  display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 14px 18px;
  font-size: .88rem; justify-content: center;
}
.trust-inner span { display: inline-flex; align-items: center; gap: 8px; }
.trust-inner span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light);
  flex: none;
}
/* 信任项逐条换色，比一色的圆点更有节奏 */
.trust-inner span:nth-child(1)::before { background: #7fc4ff; box-shadow: 0 0 0 3px rgba(127, 196, 255, .20); }
.trust-inner span:nth-child(2)::before { background: #6fdcc9; box-shadow: 0 0 0 3px rgba(111, 220, 201, .20); }
.trust-inner span:nth-child(3)::before { background: #ffc46b; box-shadow: 0 0 0 3px rgba(255, 196, 107, .20); }
.trust-inner span:nth-child(4)::before { background: #b79bff; box-shadow: 0 0 0 3px rgba(183, 155, 255, .20); }
.trust-inner span:nth-child(5)::before { background: #8ee0ac; box-shadow: 0 0 0 3px rgba(142, 224, 172, .20); }
.trust-inner span:nth-child(6)::before { background: #ff9fb6; box-shadow: 0 0 0 3px rgba(255, 159, 182, .20); }

/* 内页顶部横幅 ------------------------------------------------------------ */
.page-band {
  position: relative; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, var(--ac-d, var(--navy)) 0%, var(--ac-d2, var(--navy-2)) 100%);
  padding: 34px 0 34px;
}
/* 横幅底部亮色收边：让相邻页面的色彩身份一眼可辨 */
.page-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--ac, var(--accent)), rgba(255, 255, 255, .45));
}
.page-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: url("/assets/img/banner/page.svg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.page-band h1 { color: #fff; margin-bottom: .25em; }
.hero-brief { color: #dbe6f2; max-width: 70ch; margin: 0; }
/* 横幅内用「白色系 + 透明度分级」，而不是按深蓝底配的浅蓝（#a9c6e4）。
   横幅底色是 var(--ac-d)→var(--ac-d2) 的六组色相渐变，琥珀(#a15c00)、
   绿、玫红这类中等亮度背景下，浅蓝的对比度会掉到 3:1 以下。 */
.page-band .breadcrumb { margin: 0 0 14px; color: rgba(255, 255, 255, .86); }
.page-band .breadcrumb a { color: rgba(255, 255, 255, .92); }
.page-band .breadcrumb a:hover { color: #fff; }
.page-band .breadcrumb span[aria-current] { color: #fff; }
/* 分隔符的弱化只靠颜色，不再叠加 opacity —— 双重削弱会让它在中等亮度的横幅上消失 */
.page-band .breadcrumb .sep { opacity: 1; color: rgba(255, 255, 255, .62); }
/* 横幅是深底，正文用的中性色在这里会失去对比度 —— 统一提亮 */
.page-band .stat-inline { color: #b9d5f2; }
.page-band .stat-inline strong { color: #fff; }
.page-band .muted, .page-band .lead { color: #cfe0f1; }
.cat-title { display: flex; align-items: center; gap: 16px; }
.cat-icon {
  flex: none; width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
}
/* 分类图标用 CSS mask 上色，而不是 <img>：
   <img> 里的 SVG 是独立文档，currentColor 解析不到父级颜色，永远只有一种色，
   整片分类网格就会「有边框颜色、没图标颜色」。用 mask 让图标随 --ac 换色。 */
.cat-icon::before {
  content: ""; width: 32px; height: 32px; background: #fff;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

/* Breadcrumb -------------------------------------------------------------- */
.breadcrumb { font-size: .88rem; color: var(--muted); margin: 18px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent-dark); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb span[aria-current] { color: var(--text); font-weight: 600; }

/* 型号速览条 —— 底色跟随所属分类的色相 */
.model-strip { background: var(--ac-l, var(--bg-sunken)); border-bottom: 1px solid var(--line); }
.model-strip .container {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px;
  max-height: 108px; overflow: hidden;
}
.strip-label { font-size: .85rem; font-weight: 700; color: var(--ac-t, var(--navy)); margin-right: 4px; }

/* 型号 chips -------------------------------------------------------------- */
.chip {
  display: inline-block; background: #fff; border: 1px solid var(--line); color: var(--navy);
  border-radius: 999px; padding: 4px 12px; font-size: .84rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chip-sm { padding: 2px 10px; font-size: .78rem; background: #fff; }
.model-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.chips-label { font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* Cards / grids ----------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 22px; }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }

.card {
  background: #fff; border: 1px solid var(--line-soft); border-top: 3px solid var(--ac, var(--accent));
  border-radius: var(--radius); overflow: hidden;
  color: var(--text); display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover {
  text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-3px);
  border-color: var(--ac, #c2d2e2);
}
.card img { aspect-ratio: 4/3; object-fit: contain; background: var(--bg-alt); padding: 16px; width: 100%; }
.card h3 { margin: 14px 16px 6px; font-size: 1rem; letter-spacing: 0; }
.card p { margin: 0 16px 10px; color: var(--muted); font-size: .92rem; }
.card .btn-sm { margin: 6px 16px 16px; align-self: flex-start; }
.card-brief { color: var(--navy) !important; font-weight: 600; font-size: .88rem !important; }
.card-models {
  font-size: .8rem !important; color: var(--muted) !important;
  font-variant-numeric: tabular-nums; margin-bottom: 8px !important;
}

/* 分类卡（图标式）——每张卡自带一个色相（模板里给 .ac-N），整片网格自然变彩色 */
.cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cat-card { padding: 20px 18px 18px; text-align: left; }
/* Browse by Category 现在显示该分类下第一款产品的主图缩略图（无产品时回落 SVG 图标）。
   图片做成固定比例的色块，避免不同尺寸产品图把卡片撑得高低参差。 */
.cat-media {
  display: block; width: 100%; aspect-ratio: 4 / 3; margin: 0 0 14px;
  background: var(--bg-alt); border-radius: var(--radius-sm); overflow: hidden;
}
.cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-media .cat-icon-lg { width: 100%; height: 100%; border-radius: 0; margin: 0; background: var(--ac-l, #eaf1f9); }
.cat-icon-lg {
  display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 16px;
  background: var(--ac-l, #eaf1f9); margin-bottom: 14px;
}
/* 同上：图标用 mask 取色，才能跟着卡片色相走 */
.cat-icon-lg::before {
  content: ""; width: 30px; height: 30px; background: var(--ac-t, var(--accent-dark));
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.cat-card:hover { border-color: var(--ac, #c2d2e2); }
.cat-card h3 { margin: 0 0 6px; font-size: 1rem; }
.cat-card p { margin: 0 0 12px; font-size: .88rem; }
.cat-count {
  margin-top: auto; font-size: .8rem; font-weight: 700; color: var(--ac, var(--accent-dark));
  font-variant-numeric: tabular-nums;
}

.feature { background: var(--bg-alt); border-radius: var(--radius); padding: 20px; border: 1px solid var(--line-soft); border-top: 3px solid var(--accent); }
.feature h3 { margin: 0 0 8px; color: var(--navy); }
.feature p { margin: 0; color: var(--muted); font-size: .94rem; }
/* 「选择我们的理由」逐条换色，避免一整排同色卡片 */
.feature:nth-of-type(6n+1) { border-top-color: var(--a1); }
.feature:nth-of-type(6n+2) { border-top-color: var(--a2); }
.feature:nth-of-type(6n+3) { border-top-color: var(--a3); }
.feature:nth-of-type(6n+4) { border-top-color: var(--a4); }
.feature:nth-of-type(6n+5) { border-top-color: var(--a5); }
.feature:nth-of-type(6n+6) { border-top-color: var(--a6); }

/* Tables ------------------------------------------------------------------ */
.table-wrap {
  overflow-x: auto; margin-top: 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch;
}
/* 参数表可以横向滚动，就必须能被键盘聚焦，否则键盘用户根本滚不动它（WCAG 2.1.1）。 */
.table-wrap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
table.matrix, table.spec-table { width: 100%; border-collapse: collapse; }
table.matrix { min-width: 680px; }
table.spec-table { min-width: 680px; font-size: .93rem; table-layout: fixed; }

table.matrix th, table.matrix td { border-bottom: 1px solid var(--line); padding: 13px 14px; text-align: left; vertical-align: top; }
table.matrix thead th { background: linear-gradient(135deg, var(--ac-d, var(--navy)) 0%, var(--ac-d2, var(--navy-2)) 100%); color: #fff; font-size: .86rem; letter-spacing: .03em; white-space: nowrap; }
table.matrix tbody tr:nth-child(even) { background: var(--bg-alt); }
table.matrix tbody tr:hover { background: #eaf1f9; }
table.matrix a { font-weight: 600; }
.cell-model { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 参数表（product spec matrix）──────────────────────────────────────────
   设计取向：**参数内容为主体，型号表头只做轻量标签**。
   原先表头是深蓝渐变大色块，视觉权重压过了它下面真正要读的参数值，
   而且第一列参数名吃掉 30% 宽度，把型号值挤成一行一个字。
   现在：表头改成浅色紧凑条（小字号 + 小内距）、参数名列收窄并在横滚时固定。
   ⚠ `.table-wrap` 保留 overflow-x（型号多时必须能横滚），
     所以表头用的是 position:sticky left（横滚固定），不是 top（竖滚吸顶）——
     overflow 容器里的 top:sticky 只会相对容器滚动，而容器高度等于内容高度，
     在页面上滚时表头照样会走掉，写了等于骗自己。 */
table.spec-table thead th {
  background: var(--bg-alt);
  color: var(--navy); text-align: left; padding: 7px 11px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; border-bottom: 1px solid var(--line);
}
/* 表头左上角那个空单元格（"Model" 标签跨列）也跟着横滚固定，
   否则横滚时它会在固定住的参数名列上方留下一个空洞。 */
/* 列宽分配（由渲染器输出的 <colgroup> 硬约束）：
   左侧参数名/标签区（红框）合计 ≤ 整表 1/3，
   右侧型号数值区（蓝框）合计 = 2/3。table-layout:fixed 保证
   型号再多、内容再长都不会突破这个比例。这里不再写 width，避免和 colgroup 打架。 */
table.spec-table thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--bg-alt); }
table.spec-table thead th:not(:first-child) { white-space: normal; font-size: .72rem; }
table.spec-table tbody th {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg-alt); color: var(--ac, var(--navy)); font-weight: 600; text-align: left;
  padding: 10px 11px; white-space: normal;
  box-shadow: inset 3px 0 0 var(--ac, var(--navy));
}
table.spec-table tbody td { padding: 10px 12px; border-left: 1px solid var(--line-soft); color: var(--text); }
table.spec-table tbody tr { border-bottom: 1px solid var(--line-soft); }
table.spec-table tbody tr:last-child { border-bottom: 0; }
/* hover 换色只作用于数值列：第一列是 sticky 的，换色会露出一条没被覆盖的边。 */
table.spec-table tbody tr:hover td { background: #f8fbfe; }
.spec-notes { margin: 12px 0 0; padding-left: 20px; color: var(--muted); font-size: .88rem; }
/* 型号列较多时提示可以横向滑动 —— 没有提示的话，用户只会以为"内容就这些"。 */
.spec-hint { display: flex; align-items: center; gap: 7px; margin: 14px 0 -6px; color: var(--muted); font-size: .84rem; }
.spec-hint::before { content: "⇄"; font-size: 1rem; color: var(--ac, var(--navy)); }

@media (max-width: 640px) {
  table.spec-table { font-size: .88rem; }
  table.spec-table tbody th { padding: 9px 10px; }
  table.spec-table tbody td { padding: 9px 10px; }
  table.spec-table thead th { padding: 6px 9px; font-size: .74rem; }
}

/* Product hero ------------------------------------------------------------ */
.product-hero { display: grid; gap: 30px; align-items: start; margin-top: 8px; }
.product-info { display: flex; flex-direction: column; }
.eyebrow {
  align-self: flex-start; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ac-t, var(--accent-dark)); background: var(--ac-l, #eaf1f9);
  border-radius: 999px; padding: 5px 13px; margin-bottom: 14px;
}
.eyebrow:hover { text-decoration: none; filter: brightness(.95); }

.key-specs {
  display: grid; grid-template-columns: 1fr; gap: 1px; margin: 0 0 22px;
  background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
/* 参数键值对
   这段排版的约束来自真实数据：中文标签最短 2 字、最长 4 字；数值最长的形如
   「580x445x400 / 600x445x400 / 640x480x450 / 690x480x450」。
   - 用 grid 双列时，每个键值对只剩约 300px，长数值放不下，
     而 .key-specs 为了圆角设了 overflow:hidden，会直接把数值裁掉 →
     因此默认单列，只有到 1280px 以上才切双列。
   - dt 用 keep-all：中文只在词边界换行，避免「外形尺寸」被逐字竖排。
   - dd 用 break-word（而非 anywhere）：只在空格处换行，不拆断尺寸串。 */
.key-specs {
  display: grid; grid-template-columns: 1fr; gap: 1px; margin: 0 0 22px;
  background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.ks-item { background: #fff; padding: 11px 14px; display: flex; align-items: baseline; gap: 12px; }
.ks-item dt {
  color: var(--muted); font-size: .87rem; line-height: 1.45;
  flex: 0 1 auto; min-width: 7em; max-width: 45%;
  word-break: keep-all; overflow-wrap: break-word;
}
.ks-item dd {
  margin: 0; font-weight: 700; color: var(--navy); text-align: right;
  font-variant-numeric: tabular-nums;
  flex: 1 1 auto; min-width: 0;
  word-break: normal; overflow-wrap: break-word;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.micro-note { font-size: .82rem; color: var(--muted); margin: 0; }

/* 图集：纯 CSS 单选切换 ---------------------------------------------------- */
.gallery { position: relative; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.gal-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gal-stage { position: relative; background: #fff; border-radius: var(--radius-sm); display: grid; place-items: center; min-height: 280px; }
.gal-img { width: 100%; max-height: 460px; object-fit: contain; padding: 10px; }
.gal-img[class*="gal-i"] { display: none; }
.gal-img.gal-i0 { display: block; }

/* 选中态：1..6 张图（超过 6 张时前 6 张可切换，其余仍可点击放大） */
.gal-radio:nth-of-type(1):checked ~ .gal-stage .gal-i0,
.gal-radio:nth-of-type(2):checked ~ .gal-stage .gal-i1,
.gal-radio:nth-of-type(3):checked ~ .gal-stage .gal-i2,
.gal-radio:nth-of-type(4):checked ~ .gal-stage .gal-i3,
.gal-radio:nth-of-type(5):checked ~ .gal-stage .gal-i4,
.gal-radio:nth-of-type(6):checked ~ .gal-stage .gal-i5 { display: block; }

.gal-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gal-thumb {
  cursor: pointer; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; padding: 6px; width: 76px; height: 76px; display: grid; place-items: center;
  transition: border-color .15s;
}
.gal-thumb img { object-fit: contain; max-height: 100%; }
.gal-thumb:hover { border-color: var(--steel); }

.gal-radio:nth-of-type(1):checked ~ .gal-thumbs .gal-thumb:nth-child(1),
.gal-radio:nth-of-type(2):checked ~ .gal-thumbs .gal-thumb:nth-child(2),
.gal-radio:nth-of-type(3):checked ~ .gal-thumbs .gal-thumb:nth-child(3),
.gal-radio:nth-of-type(4):checked ~ .gal-thumbs .gal-thumb:nth-child(4),
.gal-radio:nth-of-type(5):checked ~ .gal-thumbs .gal-thumb:nth-child(5),
.gal-radio:nth-of-type(6):checked ~ .gal-thumbs .gal-thumb:nth-child(6) { border-color: var(--accent); }

/* 亮点 -------------------------------------------------------------------- */
.highlights { margin-top: 34px; background: var(--bg-alt); border: 1px solid var(--line-soft); border-left: 4px solid var(--ac, var(--accent)); border-radius: var(--radius); padding: 22px 24px; }
.highlights h2 { margin-top: 0; }
.hl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hl-list li { position: relative; padding-left: 28px; font-size: .96rem; }
.hl-list li::before {
  content: ""; position: absolute; left: 4px; top: .58em; width: 9px; height: 9px;
  border-radius: 2px; background: var(--ac, var(--accent)); transform: rotate(45deg);
}
/* 亮点逐条换色，读起来有节奏 */
.hl-list li:nth-child(6n+1)::before { background: var(--a1); }
.hl-list li:nth-child(6n+2)::before { background: var(--a2); }
.hl-list li:nth-child(6n+3)::before { background: var(--a3); }
.hl-list li:nth-child(6n+4)::before { background: var(--a4); }
.hl-list li:nth-child(6n+5)::before { background: var(--a5); }
.hl-list li:nth-child(6n+6)::before { background: var(--a6); }

/* 本页导航 ---------------------------------------------------------------- */
.toc-bar {
  position: sticky; top: 66px; z-index: 40; background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(1.4) blur(6px); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.toc-inner { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 9px 18px; }
.toc-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-right: 8px; white-space: nowrap; }
.toc-inner a {
  font-size: .88rem; font-weight: 600; color: var(--navy); padding: 6px 12px;
  border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.toc-inner a:hover { background: var(--ac-l, var(--bg-sunken)); border-color: var(--ac, var(--line)); text-decoration: none; }

/* 特性卡 —— 左侧色条逐条换色，勾选圆点同色 */
.feature-cards { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.feature-cards li {
  display: flex; gap: 12px; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-left: 3px solid var(--ac, var(--accent));
  border-radius: var(--radius-sm); padding: 14px 16px; font-size: .96rem;
}
.tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ac-l, #e8f2fb);
  color: var(--ac-t, var(--accent-dark)); display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}
.feature-cards li:nth-child(6n+1) { border-left-color: var(--a1); }
.feature-cards li:nth-child(6n+2) { border-left-color: var(--a2); }
.feature-cards li:nth-child(6n+3) { border-left-color: var(--a3); }
.feature-cards li:nth-child(6n+4) { border-left-color: var(--a4); }
.feature-cards li:nth-child(6n+5) { border-left-color: var(--a5); }
.feature-cards li:nth-child(6n+6) { border-left-color: var(--a6); }
.feature-cards li:nth-child(6n+1) .tick { background: var(--a1-l); color: var(--a1-t); }
.feature-cards li:nth-child(6n+2) .tick { background: var(--a2-l); color: var(--a2-t); }
.feature-cards li:nth-child(6n+3) .tick { background: var(--a3-l); color: var(--a3-t); }
.feature-cards li:nth-child(6n+4) .tick { background: var(--a4-l); color: var(--a4-t); }
.feature-cards li:nth-child(6n+5) .tick { background: var(--a5-l); color: var(--a5-t); }
.feature-cards li:nth-child(6n+6) .tick { background: var(--a6-l); color: var(--a6-t); }

/* 应用场景 chips —— 浅色底 + 同色描边，六色轮转 */
.app-chips { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.app-chips li {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: .92rem; color: var(--navy); font-weight: 500;
}
.app-chips li:nth-child(6n+1) { background: var(--a1-l); border-color: transparent; color: var(--a1-t); }
.app-chips li:nth-child(6n+2) { background: var(--a2-l); border-color: transparent; color: var(--a2-t); }
.app-chips li:nth-child(6n+3) { background: var(--a3-l); border-color: transparent; color: var(--a3-t); }
.app-chips li:nth-child(6n+4) { background: var(--a4-l); border-color: transparent; color: var(--a4-t); }
.app-chips li:nth-child(6n+5) { background: var(--a5-l); border-color: transparent; color: var(--a5-t); }
.app-chips li:nth-child(6n+6) { background: var(--a6-l); border-color: transparent; color: var(--a6-t); }

/* FAQ --------------------------------------------------------------------- */
.faq-list { margin-top: 20px; display: grid; gap: 10px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.faq-item[open] { border-color: var(--ac, #c2d2e2); box-shadow: var(--shadow-sm); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 600;
  color: var(--navy); position: relative; font-size: .99rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--ac, var(--accent)); line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { background: var(--bg-alt); }
.faq-body { padding: 0 18px 18px; color: var(--muted); font-size: .95rem; }
.faq-body p:last-child { margin-bottom: 0; }

/* 求助/转化 box ----------------------------------------------------------- */
.help-box {
  display: grid; gap: 18px; align-items: center; background: var(--bg-alt);
  border: 1px solid var(--line); border-left: 4px solid var(--ac, var(--accent));
  border-radius: var(--radius); padding: 26px;
}
.help-box h2 { margin-top: 0; }
.help-box p { margin: 0; color: var(--muted); }

/* 主视觉收尾横幅：深蓝 → 品牌蓝 → 青，比单一渐变更有层次 */
.cta-band { background: linear-gradient(115deg, #081d33 0%, var(--navy) 30%, var(--accent) 70%, var(--a2) 100%); color: #fff; }
.cta-band .cta-inner {
  display: grid; gap: 20px; align-items: center; padding: 44px 18px;
  position: relative; isolation: isolate;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none;
  background-image: url("/assets/img/banner/cta.svg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: #dbe6f2; margin: 0; max-width: 68ch; }
.cta-band .btn { justify-self: start; position: relative; }

/* Article / prose --------------------------------------------------------- */
.prose { margin-top: 20px; max-width: 78ch; }
.prose h2 { margin-top: 34px; }
.prose h3 { margin-top: 26px; font-size: 1.05rem; }
.prose p { margin: 12px 0; }
.prose ul, .prose ol { margin: 12px 0; padding-left: 24px; }
.prose li { margin: 7px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose th { background: var(--bg-alt); color: var(--navy); }
.prose img { border-radius: var(--radius-sm); }
.lead-prose p { font-size: 1.04rem; }
.article-cover { border-radius: var(--radius); margin: 18px 0; background: var(--bg-alt); padding: 10px; max-width: 520px; }

/* Forms ------------------------------------------------------------------- */
.inquiry-form, .admin-form { margin-top: 18px; }
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  width: 100%; min-height: 46px; background: #fff; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { color: var(--muted); font-size: .85rem; }
.form-note { color: var(--muted); font-size: .9rem; margin-top: 14px; }
.req { color: var(--err); }
.notice { padding: 13px 16px; border-radius: var(--radius-sm); margin: 14px 0; }
.notice-ok { background: #e6f4ea; color: #14532d; border: 1px solid #a5d6a7; }
.notice-err { background: #fdecea; color: #7f1d1d; border: 1px solid #ef9a9a; }

/* Contact page ------------------------------------------------------------ */
.contact-layout { display: grid; gap: 30px; align-items: start; }
.contact-info { display: grid; gap: 16px; align-content: start; }
/* 联系信息卡：每张一个色相（模板里给 .ac-N），顶部色条 + 同色小标题 */
.info-card {
  background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--ac, var(--accent));
  border-radius: var(--radius); padding: 20px 22px;
}
.info-card h2 { margin: 0 0 10px; color: var(--ac, var(--navy)); }
.info-card p:last-child { margin-bottom: 0; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .94rem; }
.info-list li { display: flex; gap: 10px; align-items: baseline; }
.info-key {
  flex: 0 0 5.2em; color: var(--muted); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}

/* Footer ------------------------------------------------------------------ */
.site-footer { position: relative; background: var(--navy); color: #cdd9e6; margin-top: 48px; padding: 42px 0 20px; }
/* 页脚顶部多色细线，与页头呼应，给整页收个彩色尾 */
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--a4), var(--a6), var(--a3), var(--a1), var(--a2), var(--a5));
}
.site-footer a { color: #cfe0f1; }
.site-footer a:hover { color: #fff; }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 26px; }
.footer-brand strong { color: #fff; font-size: 1.1rem; display: block; margin-bottom: 8px; }
.footer-brand p { color: #a9bed4; font-size: .9rem; max-width: 46ch; }
.footer-contact h2, .footer-nav h2 { color: #fff; font-size: 1.02rem; margin: 0 0 10px; }
/* 页脚小标题加一道同色短线，替代纯白标题的单调 */
.footer-contact h2::after, .footer-nav h2::after {
  content: ""; display: block; width: 30px; height: 3px; border-radius: 2px; margin-top: 8px;
}
.footer-contact h2::after { background: var(--a4); }
.footer-nav h2::after { background: var(--a2); }
.footer-contact p { margin: 0 0 6px; font-size: .92rem; }
/* 深底上的字段标签。不要复用 .info-key —— 那是白底卡片配色（#51606f），
   放到 --navy 上只有 2.19:1。这里的 #a9bed4 对 --navy 是 7.4:1，达 AA。 */
.footer-key {
  display: inline-block; margin-right: 6px;
  color: #a9bed4; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: .92rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 22px; padding-top: 14px; color: #9fb2c6; }

/* 页脚社媒图标：统一圆底 + currentColor 图标，hover 整块提亮 */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.footer-social a {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #eaf2fb; transition: background .2s ease, transform .12s;
}
.footer-social a:hover, .footer-social a:focus { background: var(--a4); color: #fff; text-decoration: none; transform: translateY(-2px); }
.footer-social svg { fill: currentColor; }

/* 悬浮 WhatsApp 快捷入口（右下角，固定定位） */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
/* 可选：垂直居中（后台「悬浮 WhatsApp → 垂直居中显示」勾选时加 .vcenter） */
.wa-float.vcenter { top: 50%; bottom: auto; transform: translateY(-50%); }
.wa-float:hover, .wa-float:focus { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .32); text-decoration: none; color: #fff; }
.wa-float.vcenter:hover, .wa-float.vcenter:focus { transform: translateY(calc(-50% - 2px)); }
/* 仅图标：圆形按钮（图标整体放大 30%） */
.wa-float-icon { width: 73px; height: 73px; justify-content: center; padding: 0; }
.wa-float-icon .wa-float-svg { width: 39px; height: 39px; }
.wa-float-icon .wa-float-img { width: 49px; height: 49px; object-fit: contain; border-radius: 50%; }
/* 图标 + 文字气泡（图标整体放大 30%） */
.wa-float-bar { padding: 12px 20px 12px 14px; }
.wa-float-bar .wa-float-svg { width: 36px; height: 36px; flex: 0 0 auto; }
.wa-float-bar .wa-float-img { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; flex: 0 0 auto; }
.wa-float-text { font-weight: 600; font-size: .95rem; white-space: nowrap; }
@media (max-width: 480px) {
  .wa-float { right: 12px; bottom: 12px; }
  .wa-float-bar .wa-float-text { font-size: .85rem; }
}

/* Desktop ----------------------------------------------------------------- */
@media (min-width: 640px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .primary-nav { display: flex; align-items: center; width: auto; margin-left: auto; }
  .primary-nav ul { flex-direction: row; gap: 4px; }
  .primary-nav a { padding: 8px 13px; }
  .lang-switch { padding: 0 0 0 12px; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; padding: 74px 18px 78px; }
  .card-grid { grid-template-columns: repeat(var(--cols, 3), 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .product-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .help-box { grid-template-columns: 1fr auto; }
  .cta-band .cta-inner { grid-template-columns: 1fr auto; padding: 52px 18px; }
  .cta-band .btn { justify-self: end; }
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr; }
  .contact-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .section { padding: 64px 0; }
}
/* 导航居中（≥900px）——客户要求「导航栏居中显示」（原来贴着右边）。
   用 grid 的 `1fr auto 1fr` 让中间列**真正**居中（两侧轨道等宽）；
   不要用 flex 的 `margin: 0 auto` 代替：那只会在 brand 右侧的剩余空间里居中，
   在有左侧 brand 的情况下看起来仍然偏右，客户一眼就会看出来没居中。
   900px 是「brand(140px) + 导航含 CTA(约 700px)」不重叠的下限；
   再窄就退回上面 768px 断点的贴右布局，那里还留着 12px 的 gap 余量。 */
@media (min-width: 900px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .brand { justify-self: start; }
  .primary-nav { display: flex; align-items: center; justify-self: center; margin-left: 0; width: auto; }
  .primary-nav ul { flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
  /* 容器已放宽到 1500px。参考站的产品卡在 1500 容器下是 **3 列**（卡宽约 440px）；
     若沿用 4 列，每卡只剩约 350px，产品图会明显偏小、留白被压缩。
     分类只有 3 个，同样固定 3 列，避免第 4 格空着。 */
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: repeat(var(--cols, 3), 1fr); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  /* 这里曾经把 .hero-stats 的 gap 拉到 46px：
     grid 的列数由 minmax(112px,1fr) 和 gap 共同决定，gap 一变大就只剩 3 列，
     第四项「OEM」被挤到第二行。保持 20px 才能 4 项一行。 */
}
/* 说明：.key-specs 不做多列。它嵌在 product-hero 的右半栏里，
   即使 1440px 视口，双列后每个键值对也只剩约 220px，
   长数值（580x445x400 / 600x445x400 / …）会被压成一行一个词。
   单列时每行都是整栏宽度，反而更短更好读。 */

/* ===========================================================================
   图集轮播（关于我们页 / .slider）
   ---------------------------------------------------------------------------
   实现前提：所有 <figure class="slide"> 都由服务端渲染出来，只有第一张带 is-active。
   所以这里用「绝对定位 + opacity」而不是 display:none 来隐藏非当前张：
     · 用 display:none 会让懒加载的图片永远没有布局盒，切过去时要等一次网络往返；
     · opacity 过渡还能顺便做出淡入效果，比生硬切换自然。
   无 JS 时退化为「只看到第一张」，这是有意接受的降级——图片与图注本身都在 HTML 里，
   爬虫与读屏用户拿到的信息是完整的。
   =========================================================================== */
.slider {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 620px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  /* 允许内部 figure 绝对定位 */
  isolation: isolate;
}
.slider .slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.slider .slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility 0s;
  z-index: 1;
}
.slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 图注压在图片底部：必须给对比度兜底，否则浅色图上白字完全不可读。
   用「底部渐变 + 纯白字」而不是半透明黑底，更贴近工业设备的画面调性。 */
.slider .slide figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 22px 16px;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
  background: linear-gradient(180deg, rgba(11, 35, 64, 0) 0%, rgba(11, 35, 64, .82) 62%, rgba(11, 35, 64, .92) 100%);
}

.slider-ctl { display: flex; gap: 8px; }
.slider-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--navy);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.slider-btn:hover { background: var(--bg-alt); border-color: var(--ac, var(--accent)); }
.slider-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.slider-btn[aria-pressed="true"] { background: var(--bg-sunken); border-color: var(--ac, var(--accent)); }
.slider-btn-play { font-size: .72rem; letter-spacing: -.02em; }

.slider-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.slider-dots button {
  /* 视觉圆点 11px，但点击热区撑到 44px：WCAG 2.2 目标尺寸 + 手指可点。
     用 transparent border 撑热区，而不是把圆点做大。 */
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.slider-dots button::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--line);
  transition: background .2s, transform .2s;
}
.slider-dots button:hover::before { background: var(--ac, var(--accent-light)); }
.slider-dots button[aria-selected="true"]::before { background: var(--ac, var(--accent)); transform: scale(1.25); }
.slider-dots button:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-pill); }

@media (max-width: 620px) {
  .slider { aspect-ratio: 4 / 3; max-height: none; }
  .slider .slide figcaption { padding: 38px 16px 12px; font-size: .88rem; }
  .section-head .slider-ctl { width: 100%; }
}

/* 用户在系统里关掉了动效：轮播本身不再过渡（JS 侧同时停掉自动播放） */
@media (prefers-reduced-motion: reduce) {
  .slider .slide, .slider .slide.is-active { transition: none; }
  .slider-dots button::before { transition: none; }
}

/* ===========================================================================
   通用两列栅格（表单字段 / 图文并排）
   =========================================================================== */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ===========================================================================
   方案正文里的「推荐设备」链接清单（由 bin/build_solutions.py 生成）
   =========================================================================== */
.link-list {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 760px) { .link-list { grid-template-columns: 1fr 1fr; } }
.link-list li {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ac, var(--accent));
  border-radius: var(--radius);
  background: var(--bg-alt);
  font-size: .97rem;
}
.link-list a { font-weight: 700; color: var(--ac-t, var(--accent-dark)); }

/* 方案页 FAQ —— 与产品页的 details 保持一致的外观，但用方案自己的色相 */
.faq-list { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 0;
}
.faq-list summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--navy);
  border-radius: var(--radius);
  min-height: 44px;
  display: flex; align-items: center;
}
.faq-list summary:focus-visible { outline: none; box-shadow: var(--ring); }
.faq-list details[open] summary { border-bottom: 1px solid var(--line-soft); }
.faq-list .faq-a { padding: 14px 18px 16px; color: var(--text); }

/* 方案页正文 + 侧栏（推荐设备 / 适用行业） */
.solution-layout { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .solution-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.solution-aside { display: grid; gap: 16px; align-content: start; }
.solution-aside .info-card { margin: 0; }
.solution-aside .link-list { grid-template-columns: 1fr; margin: 0; }
.solution-src { font-size: .82rem; color: var(--muted); }

/* Print ------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .toc-bar, .cta-band, .trust-strip, .gal-thumbs, .skip-link { display: none !important; }
  .page-band, .hero { color: #000; background: none !important; }
  .page-band h1, .hero h1 { color: #000; }
  .gallery { border: 0; }
  .gal-img[class*="gal-i"] { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}