@charset "utf-8";
/* ==========================================================================
   ImmunoClone 官网 Demo —— 全站统一样式表（设计系统 v3：AcceGen 视觉体系复刻）
   --------------------------------------------------------------------------
   依据《网站架构任务书.md》v3 第一章「AcceGen 视觉体系复刻规范」建立：
     · 1.1 色板：深紫 #7469ae 主色 / 橙 #ff6f00 副色 / 白底为主 / 浅灰 #f8f8f8 交替
     · 1.2 字体：Noto Sans SC 栈；区块 h2 48px/500；卡片标题 32px/500；正文 17px
     · 1.3 七大核心组件：胶囊按钮 / 描边按钮 / 区块头（橙点）/ 色块标题卡 /
                        胶囊列表 / 圆形图片组件 / 顶部通知条
     · 1.4 版式：内容最大宽 1280px；区块 padding 96-134px；内页 banner 图片白字
     · 1.5 动效：所有交互元素 transition 0.3s；箭头位移；卡片 hover 全套变化
   参考站存档：调研素材/home.html + accegen_global.css / accegen_style.css / accegen_home.css
   说明：v2 深色系统（#071C2E / #0E6BA8 / #00C2A8）已整体移除，本表不含深色大区块。
   2026-09 首页板块删减：随首页「精选产品 / 促销活动 / 新闻与资讯」三板块移除，
   同步删除仅其使用的 .ac-tabs（原 13 节）与 .news-item 规则；12 页其余样式不变。
   2026-09 修订四（负责人反馈「产品线卡片与参考站几乎一样」）：首页产品线卡片由
   1.3④「色块标题卡」改为差异化视觉语言（详见第 11 节），参考站该招牌组件不再出现。
   2026-09-20 客户换标（rebrand）：全站 LOGO 换为客户 ImmunoClone PNG（`.logo-img` 定高 46px /
   auto 宽，≤900px 40px、≤640px 34px）；主题色绿→紫：primary → #7469ae、primary-dark → #5f568f、
   primary-light → #e9e5fc、primary-soft → #d9d2f2、primary-tint → #f4f1fd、浅紫装饰 → #dfdced；
   副色橙 → #ff6f00 系。原 AcceGen 绿色系色值全部停用，正文注释中的「绿」已同步为「紫」。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌（Design Tokens —— AcceGen 复刻）
   -------------------------------------------------------------------------- */
:root {
  /* —— 主色（深紫）—— */
  --primary: #7469ae;
  --primary-dark: #5f568f;
  --primary-light: #e9e5fc;
  --primary-soft: #d9d2f2;
  --primary-tint: #f4f1fd;  /* 产品线卡片图标底色（极浅紫圆角方块） */

  /* —— 副色（橙）—— */
  --accent: #ff6f00;
  --accent-dark: #d95f00;
  --accent-light: #fff1e0;

  /* —— 中性色（参考站取值）—— */
  --title-color: #0e202a;   /* 大标题深蓝黑 */
  --bg: #ffffff;            /* 主背景白 */
  --bg-light: #f8f8f8;      /* 区块交替浅色底 */
  --text: #353535;          /* 正文深灰 */
  --text-muted: #5d6970;    /* 描述中灰 */
  --text-soft: #999999;     /* 次要文字 */
  --text-soft2: #8e8e8e;
  --border: #ebebeb;
  --border-strong: #dcdcdc;
  --deco-green: #dfdced;    /* 浅紫装饰（服务区外圈虚线 / 分类树节点圆点） */

  /* —— 功能色（沿用 AcceGen 橙作为警示/促销）—— */
  --warn: #ff6f00;
  --warn-light: #fff1e0;

  /* —— 页脚（白底浅色，参考站 footer_main 为浅色体系）—— */
  --footer-bg: #f8f8f8;
  --footer-text: #5d6970;

  /* —— 字体 —— */
  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC",
    "Hiragino Sans GB", sans-serif;
  --font-en: "Jost", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

  /* —— 字号（对齐参考站）—— */
  --fs-h2: 48px;        /* 区块大标题：48px / 500（参考站 3rem, line-height 65px） */
  --fs-card-title: 32px;/* 卡片标题基准（2rem / 500）；产品线卡片 2026-09 差异化后改用 20px */
  --fs-h3: 26px;
  --fs-h1: 38px;
  --fs-body: 17px;      /* 正文 17px */
  --fs-sm: 15px;
  --fs-xs: 13px;

  /* —— 间距 —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 134px;       /* 参考站大留白 */

  /* —— 圆角（AcceGen：胶囊 100px / 卡片 10px）—— */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 10px;
  --radius-pill: 100px;

  /* —— 阴影（克制）—— */
  --shadow-sm: 0 2px 8px rgba(14, 32, 42, 0.05);
  --shadow: 0 6px 20px rgba(14, 32, 42, 0.08);
  --shadow-lg: 0 14px 40px rgba(14, 32, 42, 0.12);

  /* —— 布局 —— */
  --container: 1280px;   /* 参考站 .content max-width: 1280px */
  --container-wide: 1440px;
  --header-h: 84px;
  --transition: 0.3s ease; /* 参考站所有交互元素 transition 0.3s */

  /* —— 图片遮罩 —— */
  /* 首页纯图轮播：2026-09 去文字化后由「左侧深压暗」改为「上下轻收边」，
     仅为白色切换控件与中央搜索框提供对比，中部保持图片通透明亮 */
  --veil-banner: linear-gradient(180deg, rgba(30, 22, 60, 0.42) 0%, rgba(30, 22, 60, 0.12) 32%, rgba(30, 22, 60, 0.1) 58%, rgba(30, 22, 60, 0.5) 100%);
  --veil-page: linear-gradient(100deg, rgba(30, 22, 60, 0.82) 0%, rgba(30, 22, 60, 0.62) 52%, rgba(30, 22, 60, 0.42) 100%);
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 作者侧的 display 会覆盖 UA 的 [hidden]{display:none}：显式声明，保证 JS 的
   el.hidden = true（产品筛选分页、资讯选项卡筛选）真正生效 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-cn);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 参考站 h2 为 48px / 字重 500（中等字重是参考站特征，不是粗体） */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  line-height: 1.35;
  color: var(--title-color);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.35; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 20px; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
  transition: all var(--transition);
}
a:hover { color: var(--primary); }

img, svg { max-width: 100%; vertical-align: middle; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

button { cursor: pointer; border: none; background: none; }
select { cursor: pointer; appearance: none; -webkit-appearance: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 数字与英文使用 Jost 栈（参考站 head 字体为 Jost + Noto Sans SC） */
.en,
.num,
.cat-no,
.price,
.data-figure,
.stat-num,
.promo-value {
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. 布局工具
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  position: relative;
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--sp-8);
  position: relative;
}

/* 区块：参考站大留白 96-134px */
.section { padding: var(--sp-24) 0; }
.section-sm { padding: var(--sp-16) 0; }
.section-light { background: var(--bg-light); }
/* v3：不再使用深色区块（v2 深色系统已移除），旧 .section-dark 降级为浅紫强调底 */
.section-dark {
  background: var(--primary-light);
  color: var(--text);
}
.section-dark h2, .section-dark h3 { color: var(--title-color); }

/* --------------------------------------------------------------------------
   4. 区块头部（核心组件③：橙点 + 大写小标签 + 下边框线 + 48px/500 大标题）
   对应参考站：accegen_global.css .head .subtitle / .head h2
   -------------------------------------------------------------------------- */
.head,
.section-head {
  margin-bottom: var(--sp-10);
  max-width: 860px;
}
.head.center,
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.head h2,
.section-head h2 {
  margin-bottom: 0;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.35;
  color: var(--title-color);
}
.section-head p {
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: var(--sp-4) 0 0;
}
.section-head.v2 { max-width: 880px; margin-bottom: var(--sp-12); }
.section-head.v2 h2 { font-size: var(--fs-h2); }

/* 小标签：大写 + 橙色圆点 + 下边框线（参考站 .head .subtitle） */
.section-head .eyebrow,
.head .subtitle,
.eyebrow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-width: 190px;
  max-width: 100%;
  margin-bottom: var(--sp-4);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(61, 61, 61, 0.14);
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-soft2);
}
.section-head .eyebrow::before,
.head .subtitle::before,
.eyebrow::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent); /* 橙色圆点——参考站关键特征 */
}
.section-head.center .eyebrow { text-align: left; }

.section-foot {
  margin-top: var(--sp-10);
  text-align: center;
}

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.lead-lg { font-size: var(--fs-body); line-height: 1.7; }

/* 无障碍：仅供屏幕阅读器 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--primary);
  color: #fff;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   5. 顶部通知条（核心组件⑦：导航上方滚动通知条）
   对应参考站 header .header_notice / .header_notice_swiper
   -------------------------------------------------------------------------- */
.notice-bar {
  position: relative;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-sm);
  overflow: hidden;
}
.notice-bar .container-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  text-align: center;
}
.notice-bar::before {
  content: "";
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  position: relative;
}
.notice-bar p {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.95);
}
.notice-bar a {
  color: #fff;
  text-decoration: underline;
  font-weight: 500;
}
.notice-bar a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   6. 顶部信息条
   -------------------------------------------------------------------------- */
.topbar {
  background: #fff;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.topbar .container-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: var(--sp-4);
}
.topbar-info {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(14, 32, 42, 0.85);
}
.topbar-item:hover { color: var(--primary); }
.topbar-item svg { flex: none; opacity: 0.8; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.lang-switch span {
  padding: 3px 12px;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.lang-switch .active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. 主导航（参考站：白底、深色文字、hover 橙色下划线；mega menu 保留多层分类树）
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.header-main {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* 2026-09-20 客户换标：LOGO 由「内联 SVG 图标 + 文字组合」整体换为客户提供的 PNG
   （原图白底已转透明，592×146）。定高不定宽（width:auto）→ 等比缩放，绝不拉伸变形。 */
.logo-img {
  display: block;
  height: 46px;
  width: auto;
}
.logo-sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
@media (max-width: 900px) {
  .logo-img { height: 40px; }
}
@media (max-width: 640px) {
  .logo-img { height: 34px; }
}

/* 主导航菜单：参考站 menu > li > a 24px/500 + ::before 橙色 3px 下划线 */
.main-nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.nav-item { position: relative; }
/* mega menu 宿主导航项：不建立定位上下文，让面板以 .site-header 为包含块（见 .mega-menu） */
.nav-item.mega-host { position: static; }
/* 含下拉的导航项（同时是 main.js initDropdowns 的交互钩子） */
.nav-item.has-dropdown > .nav-link { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: var(--header-h);
  font-size: 17px;
  font-weight: 500;
  color: var(--title-color);
  white-space: nowrap;
  position: relative;
  transition: all var(--transition);
}
.nav-link::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: var(--accent);
  position: absolute;
  left: 0;
  bottom: 12px;
  opacity: 0;
  transition: all var(--transition);
  pointer-events: none;
}
.nav-link:hover,
.nav-item:hover > .nav-link { color: var(--primary); }
.nav-link:hover::before,
.nav-item:hover > .nav-link::before { opacity: 1; }
.nav-link.active { color: var(--primary); font-weight: 500; }
.nav-link.active::before { opacity: 1; }
.nav-caret {
  width: 9px; height: 9px;
  flex: none;
  transition: transform var(--transition);
}
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* 下拉菜单：白底、深色文字、hover 深紫（任务书 2.2） */
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  padding: var(--sp-4) var(--sp-5);
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 12px 32px rgba(14, 32, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-wide { min-width: 480px; }
.dropdown-list { display: grid; gap: 2px; }
.dropdown-wide .dropdown-list { grid-template-columns: repeat(2, 1fr); gap: 2px var(--sp-4); }
.dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #4f4f4f;
  transition: all var(--transition);
}
.dropdown-link:hover,
.dropdown-link.active {
  background: var(--primary-light);
  color: var(--primary);
}
.dropdown-link .dot {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.dropdown-link .count {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.dropdown-link:hover .count { color: var(--primary); }
.dropdown-foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}

/* 头部搜索：参考站胶囊输入框 + 橙色圆形搜索按钮 */
.header-search {
  position: relative;
  flex: none;
  width: 260px;
}
.header-search input {
  width: 100%;
  height: 46px;
  padding: 0 56px 0 22px;
  background: #fff;
  border: 1px solid #b3b5b7;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--title-color);
  transition: all var(--transition);
}
.header-search input::placeholder { color: #757575; }
.header-search input:focus {
  border-color: var(--primary);
  outline: none;
}
.header-search button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  transition: all var(--transition);
}
.header-search button:hover { background: var(--primary); color: #fff; }

.header-cta { flex: none; }

/* 移动端菜单按钮 */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--primary);
  transition: all var(--transition);
}
.nav-toggle:hover { background: var(--primary-light); border-color: var(--primary-soft); }

/* 抽屉关闭按钮：由 main.js 在移动端注入；桌面端必须隐藏，
   否则会作为普通按钮出现在导航列表上方（撑高吸顶头部） */
.nav-close { display: none; }

/* --------------------------------------------------------------------------
   8. 按钮体系（核心组件① 胶囊按钮 / ② 描边按钮 / 圆形箭头链接）
   对应参考站 accegen_global.css .btn / .btn_more / .btn_cir
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  gap: 12px;
  padding: 18px 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill); /* 胶囊形——参考站关键特征 */
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  transition: all var(--transition);
}
/* 右侧箭头（参考站 .btn::after） */
.btn::after {
  content: "";
  display: block;
  flex: none;
  width: 18px;
  height: 10px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: all var(--transition);
}
.btn:hover {
  background: var(--accent); /* hover 变橙——参考站特征 */
  border-color: var(--accent);
  color: #fff;
}
.btn:hover::after { transform: translateX(5px); }
.btn svg { flex: none; }
.btn:active { transform: translateY(1px); }

/* 描边按钮（参考站 .btn_more） */
.btn-outline,
.btn_more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 34px;
  background: transparent;
  border: 1px solid rgba(14, 32, 42, 0.5);
  border-radius: var(--radius-pill);
  color: var(--title-color);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  transition: all var(--transition);
}
.btn-outline::after,
.btn_more::after {
  content: "";
  display: block;
  flex: none;
  width: 18px;
  height: 10px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%237469ae' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: all var(--transition);
}
.btn-outline:hover,
.btn_more:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-outline:hover::after,
.btn_more:hover::after {
  transform: translateX(5px);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* 深紫实心（默认 .btn 即深紫；此类用于语义补充） */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 橙色按钮（参考站副色点睛） */
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 兼容别名：v1 的 .btn-teal 在 v3 中等价于橙色点睛按钮 */
.btn-teal {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-teal:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 白底按钮（用于深紫/图片背景之上） */
.btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
}
.btn-light::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%237469ae' stroke-width='1.6'/%3E%3C/svg%3E");
}
.btn-light:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-light:hover::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* 图片/深色底上的白色描边按钮 */
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.btn-ghost-light::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
}
.btn-ghost-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
}
.btn-ghost-light:hover::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%237469ae' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* 尺寸（保持胶囊形态） */
.btn-sm { padding: 10px 22px; font-size: 15px; gap: 8px; }
.btn-sm::after { width: 14px; height: 8px; }
.btn-lg { padding: 20px 38px; font-size: 19px; }
.btn-block { width: 100%; }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 圆形箭头文字链接（参考站 .btn_cir） */
.link-arrow,
.btn_cir {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 500;
  color: var(--primary);
  transition: all var(--transition);
}
.link-arrow::after,
.btn_cir::after {
  content: "";
  display: block;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M4 2h6v6' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 34%, var(--primary);
  transition: all var(--transition);
}
.link-arrow:hover,
.btn_cir:hover { color: var(--accent); }
.link-arrow:hover::after,
.btn_cir:hover::after {
  transform: rotate(45deg);
  background-color: var(--accent);
}
.link-arrow svg { display: none; }

/* --------------------------------------------------------------------------
   9. 面包屑
   -------------------------------------------------------------------------- */
.breadcrumb {
  padding: var(--sp-4) 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before {
  content: "/";
  color: var(--border-strong);
}
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb [aria-current="page"] { color: var(--title-color); font-weight: 500; }

/* --------------------------------------------------------------------------
   10. Banner 轮播（首页 —— 纯图轮播 + 中央搜索组合块）
   2026-09 负责人审阅后改造：删除每屏的小标签/标题/描述/按钮文字层，改为纯图片展示；
   站内搜索框从导航栏复制一份到轮播正中央并横向放大（宽 680px / 高 60px）。
   导航栏搜索框保留不动，二者共用同一套提交逻辑（main.js initSiteSearch）。
   2026-09 修订四（负责人反馈「搜索框周围太空、太单调」）：搜索框上下补充搜索指引 ——
   上方主标题 + 检索说明，下方「热门搜索」标签胶囊（点击回填并聚焦，不跳转）。
   该组合块整体居中、垂直排布；轮播每屏仍是纯图，未恢复「每屏文案」结构。
   -------------------------------------------------------------------------- */
.ac-banner {
  position: relative;
  overflow: hidden;
  background: #0e202a;
}
.ac-slider {
  position: relative;
  width: 100%;
  /* 纯图轮播适度加高：桌面/平板 480-540px */
  height: clamp(480px, 36vw, 540px);
}
.ac-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.ac-slide.active { opacity: 1; visibility: visible; }
.ac-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 轻收边遮罩：不承载任何文字，只为图上白色控件与搜索框提供对比 */
.ac-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--veil-banner);
}

/* 中央搜索组合块：轮播水平垂直正中，浮动于图片之上；
   块内自上而下为「搜索指引（主标题 + 检索说明）→ 大搜索框 → 热门搜索标签」 */
.ac-search {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(680px, calc(100% - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* 轻量径向压暗衬底：只服务于本组合块的文字可读性，不构成每屏文案背景 */
.ac-search::before {
  content: "";
  position: absolute;
  inset: -44px -72px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(30, 22, 60, 0.42) 0%, rgba(30, 22, 60, 0.22) 58%, rgba(30, 22, 60, 0) 100%);
}
/* —— 搜索指引：主标题 + 检索说明（白字 + 轻文字阴影，保证图上可读） —— */
.ac-search-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ac-search-title {
  margin: 0;
  color: #fff;
  font-size: 29px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 12px rgba(30, 22, 60, 0.55);
}
.ac-search-sub {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(30, 22, 60, 0.5);
}
.ac-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-top: 22px;
  padding: 6px 6px 6px 22px;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 44px rgba(30, 22, 60, 0.32), 0 3px 10px rgba(30, 22, 60, 0.18);
  transition: box-shadow var(--transition);
}
.ac-search-form:focus-within {
  box-shadow: 0 20px 50px rgba(30, 22, 60, 0.36), 0 0 0 3px rgba(116, 105, 174, 0.3);
}
.ac-search-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--primary);
}
.ac-search-form input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px 0 12px;
  border: 0;
  background: transparent;
  font-size: var(--fs-body);
  color: var(--title-color);
  text-align: left; /* 组合块整体居中，输入内容仍左对齐（与左侧放大镜图标对齐） */
}
.ac-search-form input::placeholder { color: #757575; }
.ac-search-form input:focus { outline: none; }
.ac-search-form button {
  flex: none;
  height: 48px;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 500;
  transition: background var(--transition);
}
.ac-search-form button:hover { background: var(--accent); }

/* —— 搜索框下方：热门搜索标签（半透明白底胶囊 + 白字，hover 反转为白底深紫字） —— */
.ac-hot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 10px;
  margin-top: 16px;
}
.ac-hot-label {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(30, 22, 60, 0.5);
}
.ac-hot-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.ac-hot-tag {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(30, 22, 60, 0.4);
  transition: background var(--transition), color var(--transition), border-color var(--transition), text-shadow var(--transition);
}
.ac-hot-tag:hover,
.ac-hot-tag:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
  text-shadow: none;
}

/* 轮播控件（圆点 + 箭头）：纯图轮播仍需切换，样式做低调精致处理 */
.ac-arrows {
  position: absolute;
  right: var(--sp-8);
  bottom: var(--sp-8);
  z-index: 3;
  display: flex;
  gap: 14px;
}
.ac-arrows button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(30, 22, 60, 0.28);
  color: #fff;
  display: grid;
  place-items: center;
  transition: all var(--transition);
}
.ac-arrows button:hover {
  background: var(--primary);
  border-color: var(--primary);
}
.ac-arrows .ac-prev svg { transform: translateX(-1px); }
.ac-arrows .ac-next svg { transform: translateX(1px); }
.ac-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.ac-dots button {
  width: 28px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.45);
  transition: all var(--transition);
}
.ac-dots button:hover { background: rgba(255, 255, 255, 0.78); }
.ac-dots button.active { background: var(--accent); width: 44px; }


/* --------------------------------------------------------------------------
   11. 产品线卡片（2026-09 修订四：与参考站差异化改版）
   原实现是参考站 AcceGen「色块标题卡」的逐值复刻（深紫底标题块 + 右上 40px 圆角 +
   右上浅紫装饰块 + 箭头圆钮 + hover 整卡变紫）。负责人反馈「跟参考站几乎一样，
   怕像抄的」——本轮保留架构（3 列 6 卡：图标 + 标题 + 描述 + 品种数 + 了解更多），
   只替换视觉语言，打掉与参考站一模一样的特征：
     · 标题：深紫色块白字 32px → 深色文字 #0e202a / 20px / 600
     · 删除右上角浅紫装饰块（原 a::after）与右上箭头圆钮（原 a i）
     · 卡片：白底 + 14px 圆角 + 1px 浅边框 + 轻阴影
     · 图标：深紫 SVG 置于 60px 浅紫（--primary-tint #f4f1fd）圆角方块
     · hover：整卡变紫 → 上浮 4px + 阴影加深 + 描边变化（含蓄）
     · 底部：品种数 +「了解更多 →」深紫链接（箭头 hover 右移 5px）
   色板体系不变：深紫 #7469ae / 橙 #ff6f00 / 白底 / 标题 #0e202a。
   -------------------------------------------------------------------------- */
.ac-cat-grid {
  display: grid;
  gap: var(--sp-10) 2.5%;
  grid-template-columns: repeat(3, 1fr);
}
.ac-cat-grid > li { display: flex; }
.ac-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 34px 32px 26px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(14, 32, 42, 0.04);
  color: var(--text);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* hover：只上浮 + 阴影加深 + 描边微妙变化，不再整卡变紫 */
.ac-cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-soft);
  box-shadow: var(--shadow-lg);
}
/* 图标与标题同行（区别于参考站的「图标居中 + 色块标题」） */
.ac-cat-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ac-cat-icon {
  flex: none;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background-color: var(--primary-tint);
  color: var(--primary);
  transition: background-color var(--transition);
}
.ac-cat-icon svg { width: 30px; height: 30px; }
.ac-cat-card:hover .ac-cat-icon { background-color: var(--primary-light); }
/* 标题：深色文字（不再使用深紫色块 + 右上 40px 圆角 + 白字） */
.ac-cat-title {
  flex: 1;
  min-width: 0;
  color: var(--title-color);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  transition: color var(--transition);
}
.ac-cat-card:hover .ac-cat-title { color: var(--primary); }
.ac-cat-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 18px 0 24px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.75;
}
/* 底部条：品种数 +「了解更多」链接（深紫，箭头 hover 右移） */
.ac-cat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.ac-cat-count {
  font-size: 14px;
  color: var(--text-soft);
}
.ac-cat-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--primary);
  font-size: 15px;
  font-weight: 500;
  transition: color var(--transition);
}
.ac-cat-more-arrow {
  display: inline-flex;
  transition: transform var(--transition);
}
.ac-cat-card:hover .ac-cat-more { color: var(--primary-dark); }
.ac-cat-card:hover .ac-cat-more-arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   12. 服务区（核心组件⑤ 胶囊列表 + ⑥ 圆形图片组件）
   对应参考站 accegen_home.css .home_service
   -------------------------------------------------------------------------- */
.ac-service .main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  margin-top: var(--sp-14);
}
.ac-service .nav { flex: 1; max-width: 250px; }
.ac-service .nav ul { display: grid; gap: 22px; }
.ac-service .nav li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 7px 9.6%;
  border: 1px solid rgba(79, 79, 79, 0.18);
  border-radius: var(--radius-pill); /* 胶囊列表项 */
  cursor: pointer;
  transition: all var(--transition);
}
.ac-service .nav li .icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--primary);
  transition: all var(--transition);
}
.ac-service .nav li .title {
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  color: #5f6368;
  transition: all var(--transition);
}
.ac-service .nav li.active,
.ac-service .nav li:hover {
  border-color: var(--primary);
  background-color: var(--primary);
}
.ac-service .nav li.active .icon,
.ac-service .nav li:hover .icon { color: #fff; }
.ac-service .nav li.active .title,
.ac-service .nav li:hover .title { color: #fff; }

/* 圆形图片组件：圆形裁切 + 3px 深紫描边 + 外圈装饰旋转 */
.ac-service .imgs {
  position: relative;
  flex: none;
  width: 42.97%;
  aspect-ratio: 1 / 1;
  padding: 14px;
  z-index: 2;
}
.ac-service .imgs::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--deco-green);
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: ac-spin 30s linear infinite; /* 外圈装饰 30s 线性动画 */
}
@keyframes ac-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.ac-service .ac-circle {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid var(--primary); /* 3px 深紫描边 */
  background: var(--bg-light);
}
.ac-service .ac-circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ac-service .ac-circle img.active { opacity: 1; }
.ac-service .ac-circle:hover img.active { transform: scale(1.03); }

.ac-service .panel_c { width: 26.25%; flex: none; }
.ac-service .panel_c .ac-panel { display: none; }
.ac-service .panel_c .ac-panel.active { display: block; }
.ac-service .panel_c h3 { font-size: 38px; font-weight: 500; }
.ac-service .panel_c .desc {
  margin-top: 14px;
  font-size: var(--fs-body);
  line-height: 24px;
  color: #2d2d2d;
}
.ac-service .panel_c .links { margin-top: 28px; }
.ac-service .panel_c .links ul { display: grid; gap: 10px; }
.ac-service .panel_c .links a {
  display: inline-grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  max-width: max-content;
  font-size: 18px;
  font-weight: 500;
  color: var(--primary);
  transition: all var(--transition);
}
.ac-service .panel_c .links a::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M4 2h6v6' fill='none' stroke='%237469ae' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ac-service .panel_c .links a:hover { color: var(--accent); text-decoration: underline; }
.ac-service .panel_c .links a:hover::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M4 2h6v6' fill='none' stroke='%23ef8518' stroke-width='1.5'/%3E%3C/svg%3E");
}
.ac-service .panel_c .btn { margin-top: 30px; }

/* --------------------------------------------------------------------------
   12b. 产品中心整行大搜索框（2026-09 修订六，仅 products.html 使用）
   客户明确要求：产品中心页在「完整产品分类树」上方提供一个**大号、占整行**的搜索框，
   便于用户直接检索产品。与导航栏窄搜索框（.header-search，168-260px）明确区分：
     · 整行宽：置于 .container-wide 内、width:100%，与分类树区块同宽（1280/1440px 版心）
     · 大尺寸：高 60px（手机档 56px），输入区宽大舒适
     · 样式：白底 + 胶囊大圆角 + 浅边框 + 轻阴影；focus 态深紫 #7469ae 描边；
             左置放大镜图标、右侧内嵌深紫搜索按钮
   底色节奏：面包屑（浅灰）→ 本区块（浅灰，与面包屑连成页头浅色带）→ 分类树（白）。
   提交行为完全复用 main.js initSiteSearch 对 [role="search"] 的绑定（前端拦截提交、
   不跳转），本区块**零新增 JS**，与导航栏 / 首页搜索行为逐字一致。
   节号用 12b：13 号已在下方登记为随首页板块删减的 .ac-tabs 空号，不占用既有编号。
   -------------------------------------------------------------------------- */
.psearch-band {
  padding: var(--sp-10) 0 var(--sp-12);
  background: var(--bg-light);
}
.psearch-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 6px 6px 6px 22px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* focus 态：深紫描边 + 轻外发光（与首页大搜索框 .ac-search-form:focus-within 同一语言） */
.psearch-form:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(116, 105, 174, 0.14), var(--shadow);
}
.psearch-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--primary);
}
.psearch-form input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 16px 0 14px;
  border: 0;
  background: transparent;
  font-size: var(--fs-body);
  color: var(--title-color);
}
.psearch-form input::placeholder { color: #757575; }
.psearch-form input:focus { outline: none; }
/* 右侧内嵌按钮：深紫实底 + hover 变橙，与导航栏 / 首页搜索按钮同一套语言 */
.psearch-btn {
  flex: none;
  white-space: nowrap;
  height: 48px;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 500;
  transition: background var(--transition);
}
.psearch-btn:hover { background: var(--accent); }
/* 框下小号辅助说明（克制：只说明可检索字段，不加按钮 / 不加标签云） */
.psearch-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   13 号「胶囊选项卡 .ac-tabs（参考站 .home_news .nav ul .item）」整节已删除：
   该组件仅服务首页「新闻与资讯」板块的 tab 切换，随该板块删减一并移除，
   全站 12 页无任何元素引用 .ac-tabs；节号 14 起保持不变以保留既有引用编号。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   14. Hero（首页 banner 内容 + 内页页头 v2 保留类名兼容）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-bg svg { width: 100%; height: 100%; }
.hero .container,
.hero .container-wide { position: relative; z-index: 1; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-20) 0;
}
.hero-content { max-width: 660px; }
.hero h1 {
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: #fff;
  margin-bottom: var(--sp-5);
}
.hero-sub {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--sp-8);
  max-width: 580px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-5);
  padding: 6px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
}

/* Hero 数据条 */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  max-width: 580px;
}
.hero-stat-num {
  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}
.hero-stat-num .unit { font-size: 17px; font-weight: 500; color: var(--accent); }
.hero-stat-label { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); }

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
}
.hero-visual svg { width: 100%; max-width: 520px; height: auto; }

/* 内页 banner（.page-hero）：图片背景 + 白字（任务书 1.4） */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-24) 0 var(--sp-20);
  background: #0e202a;
  color: #fff;
}
.page-hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--veil-page);
  z-index: 1;
}
.page-hero .hero-bg img { z-index: 0; }
.page-hero .container-wide { position: relative; z-index: 1; }
.page-hero .eyebrow {
  width: auto;
  border-bottom-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.9);
}
.page-hero h1 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  margin-bottom: var(--sp-4);
}
.page-hero .page-title-xl {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}
.page-hero p {
  max-width: 760px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}
.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}
.page-hero-meta strong {
  font-family: var(--font-en);
  color: #ff9333; /* 亮一档的橙：保证在 banner 遮罩上的可读性 */
  font-size: 20px;
  font-weight: 500;
  margin-right: 6px;
}
/* 内页页头统一由 .page-hero 承担（v3 不再区分 v2 深色页头） */

/* --------------------------------------------------------------------------
   15. 卡片
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.card:hover {
  border-color: var(--primary-soft);
  box-shadow: var(--shadow);
}

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-light);
  overflow: hidden;
}
.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-media > :not(img) { position: relative; z-index: 1; }

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1;
}
.card-cat {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  color: var(--title-color);
}
.card-title a { color: var(--title-color); }
.card-title a:hover { color: var(--primary); }
.card-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.card-meta .cat-no {
  font-weight: 500;
  color: var(--primary);
}
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.card-price {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

/* 产品卡片 */
.product-card .card-media { aspect-ratio: 3 / 2; }
.product-card .card-media img { transition: transform 0.5s ease; }
.product-card:hover .card-media img { transform: scale(1.04); }
.product-card .card-badges {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  gap: 6px;
}

/* 分类入口卡片：hover 时标题转为深紫（参考站 .btn_more 描边底部） */
.cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.cat-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.cat-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  transition: all var(--transition);
}
.cat-card:hover .cat-icon { background: var(--primary); color: #fff; }
.cat-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--title-color);
  margin: 0;
}
.cat-card:hover .cat-name { color: var(--primary); }
.cat-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}
.cat-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.cat-count .num { font-weight: 500; color: var(--primary); }

/* 徽标 / 标签（胶囊化，与按钮体系统一） */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
}
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-accent { background: var(--accent-light); color: var(--accent-dark); }
.badge-warn { background: var(--accent-light); color: var(--accent-dark); }
.badge-solid { background: var(--primary); color: #fff; }
.badge-warn-solid { background: var(--accent); color: #fff; }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tag {
  padding: 4px 14px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 特色/优势卡片：白卡 + 橙色圆点标识（参考站区块头语言延伸到卡内） */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.feature:hover { border-color: var(--primary-soft); box-shadow: var(--shadow); }
.feature-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  transition: all var(--transition);
}
.feature:hover .feature-icon { background: var(--primary); color: #fff; }
.feature h3 { font-size: 20px; font-weight: 500; color: var(--title-color); }
.feature p { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); margin: 0; }

/* 编号统计卡 */
.stat-card {
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.stat-num {
  font-size: 44px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.2;
}
.stat-num .unit { font-size: 18px; color: var(--accent); }
.stat-label { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   16. 产品列表页（筛选 + 工具条 + 分页）
   -------------------------------------------------------------------------- */
.listing {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: var(--sp-8);
  align-items: start;
}

.filter-panel {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
}
.filter-head h2 { font-size: 17px; font-weight: 500; }
.filter-reset {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.filter-reset:hover { color: var(--primary); text-decoration: underline; }

.filter-group { border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: none; }
.filter-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--title-color);
  text-align: left;
  transition: all var(--transition);
}
.filter-group-head:hover { color: var(--primary); }
.filter-group-head .caret {
  width: 9px; height: 9px;
  transition: transform var(--transition);
  color: var(--text-soft);
}
.filter-group.open .filter-group-head .caret { transform: rotate(180deg); }
.filter-group-body {
  display: none;
  padding: 0 var(--sp-5) var(--sp-4);
}
.filter-group.open .filter-group-body { display: block; }

.filter-search {
  width: 100%;
  height: 38px;
  margin-bottom: var(--sp-3);
  padding: 0 14px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}
.filter-search:focus { border-color: var(--primary); outline: none; background: #fff; }

.filter-options {
  display: grid;
  gap: 2px;
  max-height: 230px;
  overflow-y: auto;
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-option:hover { background: var(--bg-light); }
.filter-option input {
  width: 15px; height: 15px;
  flex: none;
  accent-color: var(--primary);
  cursor: pointer;
}
.filter-option .count {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.filter-option.hidden { display: none; }

/* 列表工具条 */
.listing-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
}
.result-count { font-size: var(--fs-sm); color: var(--text-muted); }
.result-count .num { font-weight: 500; color: var(--primary); }

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--primary-light);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--primary);
}
.chip button {
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: var(--primary);
}
.chip button:hover { background: var(--primary); color: #fff; }

.sort-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.sort-btns { display: flex; gap: 6px; }
.sort-btn {
  padding: 6px 16px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: all var(--transition);
}
.sort-btn:hover { border-color: var(--primary); color: var(--primary); }
.sort-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 500;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.empty-state {
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  background: var(--bg-light);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.empty-state h3 { margin-bottom: var(--sp-2); }
.empty-state p { color: var(--text-muted); }

/* 分页：参考站 .navigation .nav-links（胶囊页码 + 深紫当前页） */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
}
.page-link {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: all var(--transition);
}
.page-link:hover { border-color: var(--primary); color: var(--primary); }
.page-link.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 500;
}
.page-link.disabled {
  color: #b9c1c7;
  pointer-events: none;
  background: var(--bg-light);
}
.page-ellipsis {
  padding: 0 4px;
  color: var(--text-soft);
  font-family: var(--font-en);
}
.page-info {
  width: 100%;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   17. 产品详情页
   -------------------------------------------------------------------------- */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-10);
  align-items: start;
}

.detail-gallery {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-light);
}
.detail-gallery img, .detail-gallery svg { width: 100%; height: auto; display: block; }
.detail-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.detail-thumb {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-light);
  transition: all var(--transition);
}
.detail-thumb:hover,
.detail-thumb.active { border-color: var(--primary); }
.detail-thumb img, .detail-thumb svg { width: 100%; height: auto; display: block; }

.detail-title { margin-bottom: var(--sp-3); }
.detail-catno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.detail-catno .cat-no {
  font-size: 17px;
  font-weight: 500;
  color: var(--primary);
}
.detail-lead {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-muted);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6);
}

/* 询价卡（侧栏） */
.inquiry-card {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.inquiry-card h3 { font-size: 22px; font-weight: 500; margin-bottom: var(--sp-2); }
.inquiry-price {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-bottom: var(--sp-5);
}
.inquiry-price strong { color: var(--primary); font-size: 20px; font-weight: 500; }
.inquiry-list {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.inquiry-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.inquiry-list svg { flex: none; margin-top: 4px; color: var(--accent); }
.inquiry-contact {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.inquiry-contact div { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.inquiry-contact svg { flex: none; color: var(--primary); }

/* 规格表 */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec-table th,
.spec-table td {
  padding: 13px var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: none; }
.spec-table th {
  width: 190px;
  background: var(--bg-light);
  font-weight: 500;
  color: var(--title-color);
}
.spec-table td { color: var(--text-muted); }
.spec-table td .en { color: var(--text); font-weight: 500; }

/* 详情内容 */
.detail-section { margin-top: var(--sp-10); }
.detail-section > h2 {
  font-size: 28px;
  font-weight: 500;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--primary);
  margin-bottom: var(--sp-5);
  display: inline-block;
}
.detail-block { margin-bottom: var(--sp-6); }
.detail-block h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: var(--sp-3);
}
.detail-block ul.check-list { display: grid; gap: var(--sp-2); }
.detail-block ul.check-list li {
  display: flex;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.detail-block ul.check-list svg { flex: none; margin-top: 4px; color: var(--accent); }

/* 选项卡（胶囊化，对齐参考站 .home_news .nav） */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: none;
  margin-bottom: var(--sp-6);
}
.tab-btn {
  padding: 8px 22px;
  border: 1px solid #dbdbdb;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #333333;
  transition: all var(--transition);
}
.tab-btn:hover { color: var(--primary); border-color: var(--primary); }
.tab-btn.active {
  color: #fff;
  font-weight: 500;
  border-color: var(--primary);
  background: var(--primary);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

/* --------------------------------------------------------------------------
   18. 表格 / 列表 / 流程
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.data-table th,
.data-table td {
  padding: 14px var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.data-table thead th {
  background: var(--primary-light);
  font-weight: 500;
  color: var(--title-color);
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafcfb; }
.data-table td { color: var(--text-muted); }
.data-table td strong { color: var(--title-color); font-weight: 500; }

/* 步骤流程 */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: var(--sp-10);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  background: var(--primary);
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}
.step h3 { font-size: 20px; font-weight: 500; margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); margin: 0; }
.steps-light .step::before { background: var(--accent); }

/* 时间线 */
.timeline {
  position: relative;
  padding-left: var(--sp-8);
  border-left: 2px solid var(--border);
}
.timeline-item { position: relative; padding-bottom: var(--sp-8); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-8) - 6px);
  top: 6px;
  width: 10px; height: 10px;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--accent);
}
.timeline-year {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 4px;
}
.timeline-item h3 { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.timeline-item p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   19. FAQ 折叠
   -------------------------------------------------------------------------- */
.faq-list { display: grid; gap: var(--sp-3); }
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.faq-item.open { border-color: var(--primary-soft); box-shadow: var(--shadow-sm); }
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: left;
  color: var(--title-color);
  transition: all var(--transition);
}
.faq-q:hover { color: var(--primary); }
.faq-q .icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 17px;
  line-height: 1;
}
.faq-item.open .faq-q .icon { background: var(--primary); color: #fff; }
.faq-a {
  display: none;
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
}
.faq-item.open .faq-a { display: block; }

/* --------------------------------------------------------------------------
   20. 表单
   -------------------------------------------------------------------------- */
.form-card {
  padding: var(--sp-8);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--title-color);
}
.form-field label .req { color: var(--accent); margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  transition: all var(--transition);
}
.form-field textarea { min-height: 110px; resize: vertical; line-height: 1.65; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #a0aeb8; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(116, 105, 174, 0.1);
  outline: none;
}
.form-field .hint { font-size: var(--fs-xs); color: var(--text-soft); }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.form-check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--primary); flex: none; }
.form-note {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-light);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.form-success {
  background: var(--primary-light);
  border: 1px solid var(--primary-soft);
  border-left: 3px solid var(--primary);
  color: var(--primary);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   21. 通用内容块
   -------------------------------------------------------------------------- */
.info-list { display: grid; gap: var(--sp-5); }
.info-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.info-item:hover { border-color: var(--primary-soft); box-shadow: var(--shadow-sm); }
.info-item .icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
}
.info-item h3 { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.info-item p { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); margin: 0; }
.info-item a { font-size: var(--fs-sm); color: var(--primary); }

/* 双栏图文 */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
.split-visual {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-light);
}
.split-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-visual svg { width: 100%; height: auto; display: block; }

/* 引用块 */
.quote {
  padding: var(--sp-6);
  background: var(--bg-light);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
}
.quote footer {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

/* 提示条 */
.notice {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--accent-light);
  border: 1px solid #ffd9ad;
  border-radius: var(--radius);
}
.notice svg { flex: none; margin-top: 2px; color: var(--accent); }
.notice h3 { font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.notice p { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); margin: 0; }

/* 合作伙伴 Logo 墙（参考站 home_partner：白卡 + hover 淡阴影） */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
}
.logo-cell {
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  transition: all var(--transition);
}
.logo-cell:hover {
  border-color: transparent;
  color: var(--primary);
  box-shadow: 0 0 15px rgba(161, 161, 161, 0.25);
}

/* 文章/新闻列表 */
.post-list { display: grid; gap: var(--sp-5); }
.post-item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.post-item:hover { border-color: var(--primary-soft); box-shadow: var(--shadow); }
.post-item-featured { grid-template-columns: 340px 1fr; padding: var(--sp-6); }
.post-item-featured .post-thumb { aspect-ratio: 4 / 3; }
.post-thumb {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-light);
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.post-item:hover .post-thumb img { transform: scale(1.04); }
.post-thumb svg { width: 100%; height: 100%; display: block; }
.post-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.post-meta .date { font-family: var(--font-en); }
.post-title { font-size: 22px; font-weight: 500; margin: 0; color: var(--title-color); }
.post-title a { color: var(--title-color); }
.post-title a:hover { color: var(--primary); }
.post-excerpt { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); margin: 0; }

/* 促销卡片（浅底 + 深紫结构 + 橙点缀，无深色区块） */
.promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.promo-card:hover { box-shadow: var(--shadow); border-color: var(--primary-soft); }
.promo-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--primary);
}
.promo-value {
  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.15;
}
.promo-value .unit { font-size: 18px; color: var(--accent); }
.promo-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.promo-card .promo-value { font-size: 36px; }
.promo-card .promo-value .unit { color: var(--accent); }
/* 2026-09 首页板块删减：原先的 .promo-card-media / .promo-badge 规则本就无任何页面引用，
   属历史遗留死代码，本次一并删除（.promo-card 成套件其余规则保持不动） */
.promo-card .promo-period { border-top: 1px dashed var(--border); padding-top: var(--sp-3); }
.promo-card.expired { opacity: 0.62; filter: grayscale(0.5); }
.promo-card.expired::before { background: var(--border-strong); }

/* --------------------------------------------------------------------------
   22. 图片组件
   -------------------------------------------------------------------------- */
.img-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-light);
}
.img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-frame.bordered { border: 1px solid var(--border); }
.img-frame.themed { border: 1px solid var(--border); background: var(--primary-light); }
.img-frame.shadow { box-shadow: var(--shadow); }
.img-frame.r-16-10 { aspect-ratio: 16 / 10; }
.img-frame.r-3-2 { aspect-ratio: 3 / 2; }
.img-frame.r-1-1 { aspect-ratio: 1 / 1; }
.img-frame.r-16-9 { aspect-ratio: 16 / 9; }
.img-frame.r-21-9 { aspect-ratio: 21 / 9; }
.img-frame.r-3-4 { aspect-ratio: 3 / 4; }
.img-frame.tinted::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(30, 22, 60, 0.04) 0%, rgba(30, 22, 60, 0.3) 100%);
}
.img-frame .img-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  background: linear-gradient(180deg, rgba(30, 22, 60, 0) 0%, rgba(30, 22, 60, 0.82) 78%);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.92);
}

/* 图片 + 文字左右/上下组合 */
.media-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--sp-12);
}
.media-split.reverse > .img-frame { order: 2; }
.media-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-6);
  align-items: center;
}

/* 缩略图角标（图片上的分类标签）——胶囊白底，参考站标签语言 */
.img-tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--primary);
}
/* --------------------------------------------------------------------------
   23. 多层分类树（结构保持 v2，视觉换为 AcceGen 体系）
   -------------------------------------------------------------------------- */
.cat-tree { display: grid; gap: var(--sp-5); }
.tree-top {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 210px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.tree-top:hover { border-color: var(--primary-soft); box-shadow: var(--shadow); }
.tree-top.is-open { border-color: var(--primary); box-shadow: var(--shadow); }
.tree-top.span-full { grid-template-columns: 300px 1fr; }
/* 2026-09 批次一：20 个一级分类的展开 / 收起（v3 起：9 张有二级分类的卡默认展开；
   其余无二级细分的卡为 .is-single 静态单层卡） */
/* 2026-09 批次三（分类树卡片空白修复-任务书.md）：折叠态由单列全宽改回两列
   （300px 1fr，与展开态列宽一致）；右列不再留空，由 .tree-preview 承载
   「二级分类条目预览」。 */
/* 2026-09 批次四（分类树卡片v3改造-任务书.md）：11 张无二级细分的卡改为
   .tree-top.is-single —— 通栏上下两段（.tree-single-head 分类图文简介 /
   .tree-single-sub 细分分类区 + 胶囊 CTA），废弃旧「左窄栏 + 右提示块」。 */
.tree-top:not(.is-open) { grid-template-columns: 300px 1fr; min-height: 160px; }
.tree-top:not(.is-open) .tree-top-head { border-right: 1px solid var(--border); }
.tree-top:not(.is-open) .tree-branches { display: none; }
.tree-top:not(.is-open) .tree-hint { margin-top: 0; }
/* 静态单层卡：无 .tree-top-head / .tree-branches，不参与折叠交互（main.js 不绑定事件） */
.cat-tree .tree-top.is-single { grid-template-columns: 1fr; min-height: 0; }

/* —— 折叠态右列：预览区（与 .tree-branches 互斥显示） —— */
.tree-top.is-open .tree-preview { display: none; }
.tree-preview {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 内容垂直居中，避免条目少的卡片在列内留下单侧大空白 */
  gap: var(--sp-4);
  min-width: 0;
  padding: var(--sp-6);
  background: #fff;
}
.tree-preview-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--sp-4);
}
.tree-preview-eyebrow,
.tree-single-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.tree-preview-eyebrow::before,
.tree-single-eyebrow::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
/* 分支数 ≤1 的卡片：条目下方补轻量引导文字 */
.tree-preview-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.tree-preview-note::after { content: "→"; color: var(--primary); }

/* 分支条目胶囊：名称 + 品种数，逐条 1:1 对应 .tree-branches 第一层。
   用 auto-fit（而非 auto-fill）：条目少于轨道数时空轨道塌缩，
   剩余轨道拉伸铺满整行，避免该行右侧留下纵向贯通的空白带。 */
.tree-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tree-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 16px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: all var(--transition);
}
.tree-preview-item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--deco-green);
}
.tree-preview-item:hover { border-color: var(--primary-soft); background: var(--primary-light); }
.tree-preview-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-preview-num {
  flex: none;
  margin-left: auto;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.tree-preview-item:hover .tree-preview-num { color: var(--primary); }

/* —— 无二级细分（.tree-top.is-single）：通栏上下两段 ——
   上段｜分类图文简介：图标 + eyebrow + 中英文名 + 分类横图 + 品种数 + 提示（横向通栏）
   下段｜细分分类区：细分分类胶囊列表 + 胶囊 CTA（原独立 .tree-foot 已并入此处）
   2026-09 批次五（分类树卡片v4改造-任务书.md）：上段由 flex 改 4 列 grid，
   在「图标/名称区」与「数量区」之间的中部插入分类横图。
   2026-09 批次六（分类卡排版优化-任务书.md，v5）：上段三段均衡 ——
   第 2 列由 1fr 收为 max-content（名称块紧贴文本内容宽，消除「文字→横图」的
   巨大空隙），第 3 列由 0.82fr 改为 minmax(0,1fr) 吃满剩余空间；横图本体由
   .tree-single-pic 定宽上限 520px，从而「图宽跨 19 张卡恒定 520px」。
   v8：v5 的 margin-inline:auto（列内居中）按客户反馈改为 margin-inline:0（列内左对齐）。
   客户实测问题（1440 档锚点，卡片 1179px）：改前名称列 498px 而文字仅 ~110px，
   文字右缘→图左缘空隙 ~408px、图仅 409px（内容宽 36.7%）；改后空隙 ≤220px、图 520px。
   v9（分类卡图左缘垂直对齐-任务书.md）：客户反馈「左侧的细分标题用一个固定宽度模块，
   右侧图片不就左侧对齐了」——v8 只做到「图贴所在列左缘」，而列起点仍随名称 max-content
   逐卡漂移（实测 107–352px），故 19 张卡的图左缘并不在同一条垂直线上。
   现将前两列由 auto / max-content 改为**定宽轨道**，v10 再把第 4 列由 auto 收为定宽：
     列1 图标 = 58px（= .tree-icon 自身宽度，不再参与剩余空间分配）
     列2 名称模块 = 384px（v9 为 368px；批次三按 v9 报告 §9.3 加固 +16px，防无 Noto Sans SC 的机器回退 YaHei Bold 时最长名称 379.53px 折行）
     列3 图列 = minmax(0,1fr)（吃满剩余，图 min(100%,520px) 仍贴其左缘）
     列4 数量/提示 = 115px 定宽（v10；原 auto 随品种数位数变化：稳转「43,885」meta 114.27px、其余卡 104px
       → 图列宽 513 vs 520px、图右缘差 7.3px，故锁定为定宽，未来位数变化不再破坏图宽统一）
   由于列 3 之前的轨道全部定量，图左缘 = padding + 58 + gap + 384 + gap 与卡片内容无关
   → 19 张卡图左缘结构性重合（锚点帧 1243px 实测 539px，spread 0）；≤900px 通栏规则不含定宽轨道，不受影响。 */
.tree-single-head {
  position: relative;
  display: grid;
  /* v10：58px 384px minmax(0,1fr) 115px —— 1/2/4 列定宽，图列宽不再随 meta 位数变化 */
  grid-template-columns: 58px 384px minmax(0, 1fr) 115px;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--bg-light);
  overflow: hidden;
}
/* 右侧点阵装饰：沿用折叠态引导块的点阵语言。
   两侧淡出，避开左侧标题块与右侧品种数/提示文字，只在中段形成浅纹理 */
.tree-single-head::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 300px;
  pointer-events: none;
  background-image: radial-gradient(rgba(116, 105, 174, 0.14) 1.4px, transparent 1.5px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 62%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 34%, #000 62%, transparent);
}
.tree-single-head > * { position: relative; z-index: 1; }
/* 图标：圆角方块 + 极浅紫底，密度对齐首页 .ac-cat-icon */
.tree-single-head .tree-icon {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--primary-tint);
  border-color: var(--primary-soft);
}
.tree-single-id {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.tree-single-id .tree-top-name { font-size: 25px; font-weight: 600; }
.tree-single-id .en-name {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}
.tree-single-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
  gap: 6px;
  margin-left: auto;
  text-align: right;
}
.tree-single-meta .tree-hint { margin-top: 0; }

/* —— 分类产品图示横图（v4）：上段中部（图标/名称区 与 数量区 之间） ——
   高度与上段内容对齐（108px）；object-fit: cover + 8px 圆角，与卡片圆角语言一致。
   v5：宽度上限 520px（宽屏下恒定 520，跨 19 张卡统一）。
   v8（分类卡横图左对齐-任务书.md）：客户反馈「图片排版 左对齐」——
   margin-inline 由 auto 改为 0，图贴其所在 1fr 列的左缘（紧接名称块一侧），
   「文字→图」留白收敛为列间距 gap（20px），剩余空白单侧归集到图右侧。
   图宽 min(100%, 520px) 不变 —— 本改动只动水平位置，不改任何尺寸。
   ≤900px 通栏态（grid-column: 1 / -1; width: 100%）图本就贴行左缘，同一规则自然成立。 */
.tree-single-pic {
  margin: 0;
  margin-inline: 0;
  width: min(100%, 520px);
  min-width: 0;
  height: 108px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-light);
}
.tree-single-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tree-single-sub {
  position: relative;
  display: grid;
  /* v5：左侧圆形图标钮（.tree-single-sub-icon，无功能、挤占列表宽度）已删除，
     原第 1 列 auto 撤除 —— 说明文字/条目列表区直接吃满左侧。
     padding-left 的 +4px 是给左侧 4px 渐变竖条让位（非图标位），保留。 */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5) var(--sp-6) var(--sp-5) calc(var(--sp-6) + 4px);
  border-top: 1px dashed var(--primary-soft);
  background: linear-gradient(90deg, var(--primary-tint), #fff 78%);
  overflow: hidden;
}
/* 左侧渐变竖条：紫 → 橙，呼应主色与橙色点语言 */
.tree-single-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.tree-single-text { margin: 0; font-size: var(--fs-body); color: var(--text); }
.tree-single-text strong {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 500;
  color: var(--primary);
}
.tree-single-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* v5：align-self:center → start。CTA 顶部对齐，与「共 N 个细分分类」标题行齐平，
     消除中部漂浮；无细分卡（单行文字 + CTA）顶部对齐即自然同行。 */
  align-self: start;
  margin-left: auto;
  padding: 12px 26px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(116, 105, 174, 0.18);
  transition: all var(--transition);
}
.tree-single-cta > span { transition: transform var(--transition); }
.tree-single-cta:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 10px 24px rgba(116, 105, 174, 0.26);
  transform: translateY(-2px);
}
.tree-single-cta:hover > span { transform: translateX(4px); }

/* —— 有二级细分卡（.tree-single-sub.is-multi）：细分分类条目默认展开静态展示 ——
   条目名称 + 品种数 1:1 迁移自改造前的 .tree-branches 第一层。
   v6：客户明确「不要有 3 级细分了」——分类树固定两层（一级分类 → 细分分类），
   所有细分条目形态完全一致：不再有条目跨全行、条目内更不再挂子条目。 */
.tree-single-sub-body { display: grid; gap: 10px; min-width: 0; }
.tree-single-sub-body .tree-single-text { margin: 0; }
/* v5：胶囊列由 repeat(auto-fit, minmax(280px,1fr)) 改为固定 2 列。
   auto-fit 会让列数随视口漂移（宽屏 3 列），导致长名称（MSC 等）换行参差、
   数量对齐不齐、奇数条目末行留半行空洞；固定 2 列后列宽可预期、跨卡一致。
   条目数=1 时由 :only-child 占满整行；奇数条目最后一行左对齐、不拉伸。 */
.tree-sub-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tree-sub-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
  /* v5：统一最小高度 ≥46px，行内由 grid 默认 stretch 等高 */
  min-height: 46px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: all var(--transition);
}
/* 条目数 = 1：该条占满整行（不留半行空洞） */
.tree-sub-item:only-child { grid-column: 1 / -1; }
.tree-sub-item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--deco-green);
}
.tree-sub-item:hover { border-color: var(--primary-soft); background: var(--primary-light); }
.tree-sub-name { min-width: 0; overflow-wrap: anywhere; }
.tree-sub-num {
  flex: none;
  /* v5：数字恒贴胶囊右缘（margin-left:auto）+ 垂直居中（align-self:center）；
     名称换行成 2 行时数字仍居中，不随首行顶部漂移 */
  margin-left: auto;
  align-self: center;
  padding-left: 8px;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-soft);
}
.tree-sub-item:hover .tree-sub-num { color: var(--primary); }

/* 折叠态预览区响应式：≤900px 退化为纵向堆叠（左列在上、预览区在下），无横向溢出 */
@media (max-width: 900px) {
  .tree-top:not(.is-open) { grid-template-columns: 1fr; min-height: 0; }
  .tree-top:not(.is-open) .tree-top-head { border-right: none; border-bottom: 1px solid var(--border); }
  .tree-preview { padding: var(--sp-5); }
  .tree-preview-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  /* is-single 上段：图标/名称一行 → 横图通栏一行 → 数量/提示一行 */
  .tree-single-head {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .tree-single-head::after { width: 150px; }
  .tree-single-id { grid-column: 2; }
  /* v5：桌面档 520px 上限仅用于「三段并列」布局；≤900 横图改为通栏，
     恢复 width:100% 吃满整行（保持 v4 的平板观感，不因 520 上限在行内留空） */
  .tree-single-pic { grid-column: 1 / -1; width: 100%; height: 120px; }
  .tree-single-meta {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-5);
    margin-left: 0;
    text-align: left;
  }
  .tree-single-sub { padding: var(--sp-5); padding-left: calc(var(--sp-5) + 4px); }
  .tree-sub-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tree-preview { gap: var(--sp-3); padding: var(--sp-4); }
  .tree-preview-list { grid-template-columns: 1fr; }
  .tree-single-head { gap: var(--sp-3) var(--sp-4); padding: var(--sp-4); }
  .tree-single-head::after { width: 110px; }
  .tree-single-head .tree-icon { width: 48px; height: 48px; border-radius: 14px; }
  .tree-single-id .tree-top-name { font-size: 19px; }
  .tree-single-pic { grid-column: 1 / -1; height: 110px; }
  .tree-single-sub {
    grid-template-columns: 1fr;
    align-items: start;
    padding: var(--sp-4);
    padding-left: calc(var(--sp-4) + 4px);
  }
  .tree-single-text { font-size: var(--fs-sm); }
  .tree-single-cta { justify-content: center; width: 100%; }
}

.tree-top-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  width: 100%;
  padding: var(--sp-6);
  text-align: left;
  background: var(--bg-light);
  border-right: 1px solid var(--border);
  transition: all var(--transition);
}
.tree-top-head:hover { background: var(--primary-light); }
/* 展开态：切换到深紫实底（AcceGen 主色结构性强调，非深色大区块） */
.tree-top.is-open .tree-top-head { background: var(--primary); border-right-color: var(--primary); }
.tree-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--primary);
}
.tree-top.is-open .tree-icon { background: rgba(255, 255, 255, 0.16); border-color: transparent; color: #fff; }
.tree-top-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--title-color);
  line-height: 1.4;
}
.tree-top.is-open .tree-top-name { color: #fff; }
.tree-top-head .en-name {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.tree-top.is-open .tree-top-head .en-name { color: rgba(255, 255, 255, 0.75); }
.tree-top-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.tree-top-count .num {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 500;
  color: var(--primary);
}
.tree-top.is-open .tree-top-count { color: rgba(255, 255, 255, 0.85); }
.tree-top.is-open .tree-top-count .num { color: #fff; }
.tree-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.tree-top.is-open .tree-hint { color: rgba(255, 255, 255, 0.75); }

/* 二级分支 */
.tree-branch { min-width: 0; }
.tree-branches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-6);
}
.tree-branch-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--title-color);
}
.tree-branch-name::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent); /* 橙点，与区块头同一语言 */
}
.tree-branch-name .en-name {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

/* 三级下钻面板 */
.tree-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--title-color);
}
.tree-details > summary::-webkit-details-marker { display: none; }
.tree-details > summary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.tree-details > summary::after {
  content: "展开下钻";
  margin-left: auto;
  padding: 3px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-soft);
}
.tree-details[open] > summary::after { content: "收起"; border-color: var(--primary); color: var(--primary); }
.tree-details[open] > summary { color: var(--primary); }
.tree-details .en-name {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-soft);
}

/* 子分类链接 */
.tree-links { display: grid; gap: 2px; }
.tree-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: all var(--transition);
}
.tree-link:hover { background: var(--primary-light); color: var(--primary); }
.tree-link::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--deco-green);
}
.tree-link:hover::before { background: var(--accent); }
.tree-link .count {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.tree-link:hover .count { color: var(--primary); }
.tree-link .en-name { color: var(--text-soft); font-size: var(--fs-xs); }
.tree-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--bg-light);
  font-size: var(--fs-sm);
}
.tree-top.is-open ~ .tree-foot { background: var(--primary-light); }

/* 分类树侧栏 */
.product-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.product-row:hover { border-color: var(--primary-soft); box-shadow: var(--shadow); }
.product-row .img-frame { aspect-ratio: 4 / 3; }
.product-row-body { display: flex; flex-direction: column; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   24. Mega Menu（导航多层下拉，结构保持 v2；视觉换为 AcceGen 白底深紫）
   -------------------------------------------------------------------------- */
/* 产品中心 mega menu：用 position:fixed 相对吸顶 header 定位（header 是包含块），
   保证面板始终完整落在视口内，不会像居中于导航项那样被裁掉左侧分类列 */
/* 2026-09 批次一（产品体系切换，12 页导航统一为 mega menu）：
   定位缺陷修复 —— 原 position:fixed 的包含块是视口，top:100% 会把面板放到首屏之外
   （面板在浏览器中永不可见）。改为以 .site-header（sticky 定位祖先）为包含块，
   面板紧贴导航栏下沿；水平仍是「内容宽 ≤1320px 居中」，与原写法意图一致。
   宿主导航项 .nav-item.mega-host 置为 static，避免 nav-item 成为包含块。 */
.mega-menu {
  position: absolute;
  top: 100%; /* header 底边下方 */
  left: 0;
  right: 0;
  width: auto;
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 18px 48px rgba(14, 32, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition);
}
/* 2026-09 批次十九：mega 面板高度封顶 + 细窄紫色滚动条。
   批次十八补到 63 个链接后，面板在 1258×800 视口实测 1707px；这里按任务书
   封顶为 calc(100vh - 96px)，超高时面板内部滚动，overscroll-behavior: contain
   防止滚到底带动页面。overflow-y:auto 保证内容不超高时不出现滚动条痕迹。 */
.nav-item.mega-host .dropdown.mega-menu {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin; /* Firefox：细窄滚动条 */
  scrollbar-color: rgba(116, 105, 174, 0.55) transparent;
}
/* WebKit / Blink：6px 细窄紫色半透明滚动条，替换系统默认灰粗条 */
.nav-item.mega-host .dropdown.mega-menu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.nav-item.mega-host .dropdown.mega-menu::-webkit-scrollbar-track {
  background: transparent;
}
.nav-item.mega-host .dropdown.mega-menu::-webkit-scrollbar-thumb {
  background: rgba(116, 105, 174, 0.45);
  border-radius: 999px;
}
.nav-item.mega-host .dropdown.mega-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(116, 105, 174, 0.7);
}
.nav-item.mega-host .dropdown.mega-menu::-webkit-scrollbar-corner {
  background: transparent;
}
.nav-item:hover > .mega-menu,
.nav-item:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 右对齐变体：保留类名契约（面板已改为视口内自适应，无需再偏移） */
.mega-menu.mega-right { transform: translateY(8px); }
.nav-item:hover > .mega-menu.mega-right,
.nav-item:focus-within > .mega-menu.mega-right { transform: translateY(0); }

.mega-head {
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.mega-head strong { display: block; font-size: 22px; font-weight: 500; color: var(--title-color); }
.mega-head span { font-size: var(--fs-sm); color: var(--text-muted); }
.mega-grid {
  display: grid;
  /* 批次十九：4 列 → 5 列。人/动物原代各占 2 个轨道（内部再分 2 个子列），
     18 个轨道按 5+5+5+3 排 4 行；列宽约 216-232px，中英文标签不超过 2-3 行。
     minmax(0,1fr) 防止长英文名把轨道撑出横向滚动。 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-6);
}
.mega-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* v8（分类卡横图左对齐-任务书.md 改动 B）：12 页资源中心 mega 使用
   class="mega-grid cols-4"，但此前 css 缺 .cols-4 定义（死类）——靠当时的 .mega-grid
   默认 4 列偶然生效。此处显式化，与 .cols-3 / .cols-5 形成完整类名体系。
   注意：本规则选择器权重 (0,2,0) 高于分档覆盖里的 .mega-grid (0,1,0)，
   故 ≤1200 与 ≤1024 两处响应式覆盖必须同步列出 .cols-4，否则资源中心面板会在
   窄档仍保持 4 列（抽屉态溢出）。 */
.mega-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 批次十九：网格项允许收缩到 0，长英文名不得把 5 列轨道撑出横向滚动 */
.mega-col { min-width: 0; }
.mega-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--title-color);
}
.mega-col-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent); /* 橙点 */
}
.mega-col-title .en-name {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-soft);
}
.mega-col ul { display: grid; gap: 1px; }
/* 批次十九：人原代 / 动物原代拆列。外层 .mega-col 占 2 个轨道，
   内层复用 .mega-grid + .mega-col 形成两个并排子列；子列标题是不可点的
   分组标题（无 <a>），父分类链接只保留外层 1 个 → 链接总数仍为 63。 */
.mega-col.is-split { grid-column: span 2; min-width: 0; }
.mega-col.is-split > .mega-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
}
.mega-col.is-split > .mega-grid > .mega-col { min-width: 0; }
.mega-col.is-split > .mega-grid .mega-col-title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.mega-col.is-split > .mega-grid .mega-col-title::before {
  width: 4px;
  height: 4px;
}
.dropdown-link .en-name {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--text-soft);
  margin-left: 4px;
}
.dropdown-link:hover .en-name { color: var(--primary); }
.mega-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.mega-foot-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.mega-foot-links a { color: var(--text-muted); }
.mega-foot-links a:hover { color: var(--primary); }

/* --------------------------------------------------------------------------
   25. 资讯 / 领域 / 产品线卡片
   -------------------------------------------------------------------------- */
.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.news-card:hover { border-color: var(--primary-soft); box-shadow: var(--shadow); }
.news-card .img-frame { border-radius: 0; aspect-ratio: 16 / 9; }
.news-card-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.news-card .post-title { font-size: 20px; }
.news-card .post-excerpt { flex: 1; }

/* 横向资讯行 .news-item 样式已删除：仅服务首页「新闻与资讯」板块，随该板块删减一并移除 */

/* 研究领域卡 */
.area-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.area-card:hover { border-color: var(--primary-soft); box-shadow: var(--shadow); }
.area-card .img-frame { border-radius: 0; aspect-ratio: 16 / 10; }
.area-card-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.area-card .cat-name { font-size: 20px; }
.area-card .cat-desc { flex: 1; }
.area-card .cat-count { padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.area-card:hover .cat-name { color: var(--primary); }

/* --------------------------------------------------------------------------
   26. 数据/统计区（v3：浅色底 + 深紫数字，替代 v2 深色数据带）
   -------------------------------------------------------------------------- */
.stats-band {
  position: relative;
  overflow: hidden;
  padding: var(--sp-24) 0;
  background: var(--bg-light);
  color: var(--text);
}
.data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
}
.data-figure {
  display: block;
  font-size: 52px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.data-figure.plain { color: var(--title-color); }
.data-figure .unit { font-size: 20px; font-weight: 500; color: var(--accent); }
.data-label {
  display: block;
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid #e5e5e5;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}
.ac-rule { height: 1px; border: 0; margin: var(--sp-8) 0 0; background: var(--border); }
.ac-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   27. 底部 CTA（v3：深紫实底 + 橙点缀；不使用 v2 深蓝大区块）
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: var(--sp-24) 0;
  background: var(--primary);
  color: #fff;
  text-align: center;
}
.cta-band .hero-bg { display: none; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-weight: 500; margin-bottom: var(--sp-3); }
.cta-band p {
  max-width: 680px;
  margin: 0 auto var(--sp-8);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-body);
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}
/* CTA 位于深紫实底上：按钮须与底色形成对比（白底 / 白描边） */
.cta-band .btn:not(.btn-light):not(.btn-ghost-light) {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
}
.cta-band .btn:not(.btn-light):not(.btn-ghost-light)::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%237469ae' stroke-width='1.6'/%3E%3C/svg%3E");
}
.cta-band .btn:not(.btn-light):not(.btn-ghost-light):hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cta-band .btn:not(.btn-light):not(.btn-ghost-light):hover::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
}
.cta-band .cta-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
}

.ac-rule { height: 1px; border: 0; margin: var(--sp-8) 0 0; background: var(--border); }
.ac-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   29. 页脚（参考站 footer_main 浅色体系：浅底 + 深色文字 + 深紫 hover）
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: var(--sp-8);
  padding: var(--sp-24) 0 var(--sp-16);
}
.footer-brand .logo-sub { color: var(--text-soft); }
.footer-brand p {
  margin: var(--sp-5) 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-muted);
}
.footer-contact { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.footer-contact a,
.footer-contact span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-muted);
}
.footer-contact a:hover { color: var(--primary); }
.footer-contact svg { flex: none; margin-top: 4px; opacity: 0.8; }

.footer-col h3 {
  margin-bottom: var(--sp-4);
  font-size: 18px;
  font-weight: 500;
  color: var(--title-color);
  position: relative;
  padding-bottom: 12px;
}
.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--accent); /* 橙点缀 */
}
.footer-col ul { display: grid; gap: var(--sp-3); }
.footer-col a { color: var(--text-muted); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--primary); }

.footer-subscribe p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.subscribe-form { display: flex; gap: var(--sp-2); }
.subscribe-form input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--title-color);
  font-size: var(--fs-sm);
}
.subscribe-form input::placeholder { color: var(--text-soft); }
.subscribe-form input:focus { border-color: var(--primary); outline: none; }
.subscribe-form button {
  flex: none;
  height: 46px;
  padding: 0 28px;
  background: var(--primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
  transition: all var(--transition);
}
.subscribe-form button:hover { background: var(--accent); }
.footer-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--primary); }
.footer-bottom .copyright { color: var(--text-soft); }

/* --------------------------------------------------------------------------
   30. 返回顶部（圆形，与圆钮体系一致）
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: var(--primary);
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   31. 滚动进入动画（参考站 wow fadeInLeft 的轻量 CSS 实现）
   -------------------------------------------------------------------------- */
.ac-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.ac-reveal.ac-in { opacity: 1; transform: none; }
.ac-reveal.from-left { transform: translateX(-32px); }
.ac-reveal.from-left.ac-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ac-reveal { opacity: 1; transform: none; transition: none; }
  .ac-service .imgs::before { animation: none; }
  .ac-slide { transition: none; }
}

/* --------------------------------------------------------------------------
   32. 响应式 —— 1400 / 1200 / 1024 / 768 / 480
   -------------------------------------------------------------------------- */
/* 桌面窄档：压缩导航与搜索框宽度，避免头部在 1025-1429px 区间横向溢出 */
@media (max-width: 1429px) {
  .header-main { gap: var(--sp-5); }
  .nav-link { padding: 0 8px; font-size: 15px; }
  .header-search { width: 168px; }
  .header-search input { height: 42px; padding: 0 50px 0 18px; }
  .header-search button { width: 32px; height: 32px; }
  .header-cta { padding: 9px 18px; font-size: 14px; }
}

@media (max-width: 1200px) {
  :root {
    --fs-h2: 40px;
    --fs-card-title: 26px;
    --fs-h1: 32px;
  }
  /* 收紧导航，保证 1025px 视口下头部仍不溢出 */
  .nav-link { padding: 0 7px; font-size: 15px; }
  .header-search { width: 168px; }
  .header-main { gap: var(--sp-4); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-5 { grid-template-columns: repeat(4, 1fr); }
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
  /* v8：同步列出 .cols-4 —— 否则 .mega-grid.cols-4 (0,2,0) 会盖过 .mega-grid (0,1,0)，
     1200 档资源中心面板仍留 4 列（原设计为 3 列回退） */
  .mega-grid,
  .mega-grid.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .data-grid { gap: var(--sp-6); }
  .ac-cat-grid { gap: var(--sp-8) 2%; }
  .ac-service .panel_c { width: 30%; }
}

@media (max-width: 1024px) {
  :root {
    --fs-h1: 29px;
    --fs-h2: 32px;
    --fs-card-title: 22px;
    --fs-h3: 22px;
    --sp-16: 56px;
    --sp-20: 64px;
    --sp-24: 72px;
    --header-h: 72px;
  }
  .container, .container-wide { padding: 0 var(--sp-5); }

  /* 产品中心整行大搜索框：平板档保持整行宽，仅收窄按钮与左侧留白 */
  .psearch-form { padding-left: 20px; }
  .psearch-btn { padding: 0 28px; }

  /* 移动端导航折叠 */
  .nav-toggle { display: grid; }
  .header-cta { display: none; }
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 300;
    width: min(340px, 86vw);
    height: 100vh;
    margin: 0;
    padding: var(--sp-16) var(--sp-5) var(--sp-8);
    background: #fff;
    box-shadow: -6px 0 28px rgba(14, 32, 42, 0.16);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
  }
  .main-nav.open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--border); }
  .nav-link {
    height: auto;
    padding: var(--sp-4) 0;
    font-size: 16px;
    justify-content: space-between;
  }
  .nav-link::before { display: none; }
  .nav-link.active { color: var(--primary); }
  .dropdown {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 var(--sp-3);
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .nav-item:hover > .dropdown,
  .nav-item:focus-within > .dropdown { transform: none; }
  .nav-item.open > .dropdown { display: block; }
  .dropdown-wide .dropdown-list { grid-template-columns: 1fr; }
  .dropdown-link { padding: 9px 10px; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(14, 32, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
  }
  .nav-backdrop.show { opacity: 1; visibility: visible; }

  /* 移动端抽屉关闭按钮（由 main.js 注入） */
  .nav-close {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
  }
  .nav-close:hover { background: var(--primary-light); color: var(--primary); }

  /* Banner 与内页页头（纯图轮播：平板档高度 480px） */
  .ac-slider { height: 480px; }
  .ac-arrows { right: var(--sp-5); bottom: var(--sp-5); }
  /* 搜索指引：平板档收紧字号，保证组合块不挤压轮播图片展示区 */
  .ac-search-title { font-size: 25px; }
  .ac-search-sub { font-size: 14px; }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    padding: var(--sp-16) 0 var(--sp-12);
  }
  .hero-visual { order: -1; }
  .hero-visual svg { max-width: 400px; }

  /* 产品线卡片：双列 */
  .ac-cat-grid { grid-template-columns: repeat(2, 1fr); }

  /* 服务区：纵向堆叠，圆形组件居中 */
  .ac-service .main { flex-direction: column; align-items: stretch; gap: var(--sp-8); }
  .ac-service .nav { max-width: none; }
  .ac-service .nav ul { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ac-service .nav li { min-height: 60px; padding: 7px 18px; gap: 12px; }
  .ac-service .imgs { width: 60%; margin: 0 auto; }
  .ac-service .panel_c { width: 100%; }

  .listing { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .filter-group-body { max-height: none; }

  .detail-layout { grid-template-columns: 1fr; }
  .inquiry-card { position: static; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .post-item-featured { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--sp-8); }
  .split-visual { order: -1; }

  .media-split { grid-template-columns: 1fr; gap: var(--sp-8); }
  .media-split > .img-frame { order: -1; }
  .media-split.reverse > .img-frame { order: -1; }
  .media-row { grid-template-columns: 1fr; }

  .tree-top { grid-template-columns: 1fr; min-height: 0; }
  .tree-top-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .tree-hint { margin-top: 0; margin-left: auto; }
  .tree-branches { grid-template-columns: 1fr; padding: var(--sp-5); }

  .product-row { grid-template-columns: 140px 1fr; }

  .data-grid { grid-template-columns: repeat(2, 1fr); }

  /* 移动端抽屉内 mega menu 折叠为单列（与 .dropdown 同一交互契约） */
  .mega-menu {
    position: static;
    width: auto;
    transform: none;
    padding: 0 0 var(--sp-3);
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: none;
    background: transparent;
  }
  /* 批次十九：抽屉内不再二次限高，统一交给 .main-nav 自身滚动。
     选择器与桌面封顶规则同权重（0,4,0）且位于媒体查询内，确保覆盖。 */
  .nav-item.mega-host .dropdown.mega-menu {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
  }
  .nav-item:hover > .mega-menu,
  .nav-item:focus-within > .mega-menu { transform: none; }
  .nav-item.open > .mega-menu { display: block; }
  .mega-menu.mega-right,
  .nav-item.open > .mega-menu.mega-right { left: auto; right: auto; transform: none; }
  .mega-head { display: none; }
  /* v8：.cols-4 必须列入本折叠列表（抽屉态单列），否则 4 列会溢出抽屉 */
  .mega-grid,
  .mega-grid.cols-4,
  .mega-grid.cols-3,
  .mega-grid.cols-5 { grid-template-columns: 1fr; gap: var(--sp-3); }
  .mega-col { padding-left: var(--sp-3); border-left: 2px solid var(--border); }
  /* 批次十九：抽屉内拆列还原为单列，避免嵌套滚动 / 横向挤压 */
  .mega-col.is-split { grid-column: auto; }
  .mega-col.is-split > .mega-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .mega-col.is-split > .mega-grid > .mega-col { padding-left: 0; border-left: 0; }
  .mega-foot { margin-top: var(--sp-3); padding-top: var(--sp-3); }
  .mega-foot-links { display: none; }

  .footer-main { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-6); }
  .footer-subscribe { grid-column: 1 / -1; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 25px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-card-title: 20px;
    --fs-body: 16px;
    --sp-10: 32px;
    --sp-12: 36px;
    --sp-16: 44px;
    --sp-20: 48px;
    --sp-24: 56px;
  }
  body { font-size: var(--fs-body); }
  .header-main { min-height: 62px; gap: var(--sp-4); }
  .header-search { display: none; }
  .logo-sub { font-size: 9px; }

  .notice-bar .container-wide {
    min-height: 40px;
    font-size: var(--fs-xs);
  }

  .topbar .container-wide {
    flex-direction: row;
    justify-content: center;
    min-height: 36px;
    font-size: var(--fs-xs);
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .topbar-info { gap: var(--sp-4); justify-content: center; }
  .topbar-right { display: none; }

  /* 产品线卡片降为单列；触屏无 hover，仅保留静态层级 */
  .ac-cat-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .ac-cat-card { padding: 26px 24px 22px; }
  .ac-cat-icon { width: 56px; height: 56px; border-radius: 13px; }
  .ac-cat-icon svg { width: 28px; height: 28px; }
  .ac-cat-title { font-size: 18px; }
  .ac-cat-desc { margin: 14px 0 18px; }

  /* 纯图轮播：手机档高度 440px；搜索组合块收窄，热门标签自然换行 */
  .ac-slider { height: 440px; }
  .ac-search { width: min(560px, calc(100% - 40px)); }
  .ac-search-title { font-size: 22px; }
  .ac-search-sub { font-size: 14px; }
  .ac-search-form { height: 58px; margin-top: 18px; padding: 5px 5px 5px 18px; }
  .ac-search-form button { height: 48px; padding: 0 24px; }
  .ac-hot { margin-top: 14px; gap: 8px; }
  .ac-hot-tag { padding: 5px 13px; font-size: 13px; }
  .ac-arrows button { width: 46px; height: 46px; }
  .ac-dots { bottom: 16px; }

  /* 产品中心整行大搜索框：手机档仍占整行宽，高度 58px、按钮同步收窄（不挤不溢出） */
  .psearch-form { height: 58px; padding: 5px 5px 5px 18px; }
  .psearch-form input { padding: 0 12px; }
  .psearch-btn { height: 48px; padding: 0 24px; }
  .psearch-note { margin-top: var(--sp-2); }

  .ac-service .nav ul { grid-template-columns: 1fr; }
  .ac-service .imgs { width: 78%; }
  .ac-service .panel_c h3 { font-size: 28px; }

  .page-hero { padding: var(--sp-16) 0 var(--sp-12); }
  .page-hero h1, .page-hero .page-title-xl { font-size: 26px; }
  .page-hero-meta { gap: var(--sp-4) var(--sp-5); margin-top: var(--sp-6); padding-top: var(--sp-5); }
  .page-hero-meta strong { font-size: 17px; }

  .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .hero-actions .btn { flex: 1 1 auto; }

  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .grid-3.keep-two { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--sp-5); }
  .step { padding-top: var(--sp-10); }

  .listing-toolbar { flex-direction: column; align-items: stretch; }
  .sort-group { justify-content: space-between; }

  .post-item { grid-template-columns: 1fr; gap: var(--sp-4); }
  .post-thumb { aspect-ratio: 16 / 9; }
  .post-thumb svg { height: 100%; }
  .post-title { font-size: 19px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: var(--sp-5); }

  .detail-thumbs { grid-template-columns: repeat(4, 1fr); }
  .spec-table th { width: 40%; }
  .spec-table th, .spec-table td { padding: 11px var(--sp-3); }

  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr; gap: var(--sp-8); padding: var(--sp-16) 0 var(--sp-10); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
  .subscribe-form { flex-direction: column; }
  .subscribe-form button { width: 100%; }

  .breadcrumb ol { font-size: var(--fs-xs); }
  .tabs { gap: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { white-space: nowrap; padding: 8px 16px; }

  .tree-top-head { padding: var(--sp-5); }
  .tree-branches { padding: var(--sp-4); gap: var(--sp-4); }
}

@media (max-width: 480px) {
  :root {
    --fs-h1: 23px;
    --fs-h2: 23px;
    --fs-body: 16px;
    --sp-6: 18px;
  }
  .container, .container-wide { padding: 0 var(--sp-4); }
  .hero-stats { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero-stat-num { font-size: 26px; }
  .grid-3.keep-two { grid-template-columns: 1fr; }
  .btn { min-width: 0; padding: 15px 26px; font-size: 16px; }
  .btn-lg { padding: 16px 28px; font-size: 17px; }
  .btn-sm { padding: 9px 18px; font-size: var(--fs-sm); }
  .btn-outline, .btn_more { padding: 13px 26px; font-size: var(--fs-sm); }
  .card-body { padding: var(--sp-4); }
  .detail-thumbs { grid-template-columns: repeat(3, 1fr); }
  .logo-wall { grid-template-columns: 1fr; }
  .sort-btns { flex-wrap: wrap; }
  .pagination { gap: 5px; }
  .page-link { min-width: 36px; height: 36px; padding: 0 11px; font-size: var(--fs-xs); }
  .to-top { right: 14px; bottom: 14px; }
  .data-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .product-row { grid-template-columns: 1fr; }
  .tree-link { padding: 8px 10px; }
  .mega-col { padding-left: var(--sp-2); }
  .ac-arrows { display: none; }
  /* 小屏：搜索组合块留白收窄至 32px，标题/说明/标签同步缩小 */
  .ac-search { width: calc(100% - 32px); }
  .ac-search-title { font-size: 19px; }
  .ac-search-sub { font-size: 13px; }
  .ac-search-form { height: 56px; margin-top: 16px; padding: 4px 4px 4px 14px; }
  .ac-search-form input { padding: 0 8px; font-size: var(--fs-sm); }
  .ac-search-form button { height: 46px; padding: 0 20px; font-size: var(--fs-sm); }
  .ac-hot { margin-top: 12px; gap: 7px; }
  .ac-hot-label { font-size: 13px; }
  .ac-hot-tag { padding: 4px 12px; font-size: 13px; }
  /* 产品中心整行大搜索框：小屏保持整行宽（页边距 16px），按钮 46px 高、二字按钮不换行 */
  .psearch-form { height: 56px; padding: 4px 4px 4px 14px; }
  .psearch-form input { padding: 0 10px; font-size: var(--fs-sm); }
  .psearch-btn { height: 46px; padding: 0 20px; font-size: var(--fs-sm); }
}

/* --------------------------------------------------------------------------
   33. 打印
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .topbar, .to-top, .cta-band, .notice-bar,
  .ac-arrows, .ac-dots, .ac-search, .psearch-band, .hero-bg { display: none; }
  .ac-slide { position: static; opacity: 1; visibility: visible; }
  .ac-slide img { position: static; height: auto; }
  .ac-slider { height: auto; }
  .ac-service .panel_c .ac-panel { display: block; }
}

/* --------------------------------------------------------------------------
   34. 留言表单提交提示（批次五a，文件末尾追加，不改既有规则）
   -------------------------------------------------------------------------- */
.form-notice { margin: 0 0 20px; padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.6; }
.form-notice-ok { background: #f1eefb; border-left: 4px solid #7469ae; color: #3f3568; }
.footer-subscribe .form-notice { margin: 12px 0 0; padding: 10px 12px; font-size: 13px; color: #3f3568; }