/* ============================================================
   上海百析 baixish.com — 设计系统 v2「流动质感」
   版本 2026-10-18 · 加载位置：全站 8 个公开页 </head> 前
   （位于 style.css / home.css / theme-light.css 之后，作为最终权威层）

   解决什么问题：
   ① 尺度收口 —— 原 11 种圆角（2/4/6/8/10/11/12/13/14/15/16px）、
      30+ 种字号、间距全为 5/7/13/14px 奇数，视觉是拼出来的
   ② 排版提升 —— 在保留 clamp() 响应式的前提下整体上移一档
   ③ 动效补齐 —— 子页此前 0 个 keyframes，现补齐悬浮呼吸 / 流光扫过 / 光晕脉动
   ④ 色彩统一 —— 品牌主色收敛为电光紫（子页原沿用旧蓝 #2563eb，与首页不一致）

   明确保持不变：配色语言（紫电 + 橙 CTA）、容器宽度、布局结构、产品数据
   ============================================================ */

/* ---------- 1. 尺度 Token（全站单一权威） ---------- */
:root{
  /* 圆角 3 级制 */
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  /* 品牌主色统一为电光紫 */
  --primary: #6d28d9;
  --primary-dark: #5b21b6;
  --primary-bright: #7c3aed;
  --primary-ink: #0f1b34;
  /* 动效曲线与时长 */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .42s;
  /* 阴影层次（更柔、更远、更有空气感） */
  --sh-1: 0 2px 8px rgba(20, 60, 120, .05);
  --sh-2: 0 10px 30px rgba(20, 60, 120, .08);
  --sh-3: 0 24px 62px rgba(20, 60, 120, .13);
}

/* ---------- 2. 排版阶梯（保留 clamp 响应式，整体上调） ---------- */
.hero-v2-title{
  font-size: clamp(42px, 6.2vw, 68px) !important;
  letter-spacing: -.038em !important;
  line-height: 1.04 !important;
}
.hero-v2-sub{
  font-size: clamp(16px, 1.9vw, 20px) !important;
  line-height: 1.75 !important;
}
.page-hero h1{
  font-size: clamp(32px, 4.4vw, 50px) !important;
  letter-spacing: -.025em !important;
  line-height: 1.18 !important;
}
.section-title{
  font-size: clamp(30px, 3.4vw, 40px) !important;
  line-height: 1.28 !important;
}
.section-desc{
  font-size: 16.5px !important;
  line-height: 1.8 !important;
  margin-top: 18px !important;
}
.feature-card p, .adv-card p, .quality-card p{
  font-size: 16px !important;
  line-height: 1.8 !important;
}
.scope-head p, .sp-head span{ font-size: 15px !important; }
.sp-head b{ font-size: 19px !important; }
.sp-card b{ font-size: 16px !important; }

/* ---------- 3. 卡片尺度统一 ---------- */
.adv-card,
.feature-card,
.product-card,
.quality-card,
.value-item,
.fb-card,
.product-detail,
.contact-item,
.ai-card,
.ai-metric{
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease) !important;
}
.adv-card{ padding: 32px 30px !important; border-radius: 20px !important; }
.feature-card{ padding: 40px 34px !important; border-radius: var(--radius-xl) !important; }
.value-item{ padding: 38px 22px !important; border-radius: var(--radius-xl) !important; }
.quality-card, .fb-card{ border-radius: var(--radius-xl) !important; }
.product-card{ border-radius: var(--radius-xl) !important; }
/* 小卡片（横向排列，仅小幅提升，避免撑破栅格） */
.sp-card{ padding: 15px 16px !important; border-radius: 14px !important; }
/* 子页主体块：产品大类 / 联系方式 / AI 合成指标 */
.product-detail{ border-radius: var(--radius-xl) !important; }
.contact-item{ padding: 28px 26px !important; border-radius: var(--radius-xl) !important; }
.ai-card{ padding: 32px 28px !important; border-radius: var(--radius-xl) !important; }
.ai-metric{ padding: 24px 20px !important; border-radius: var(--radius-lg) !important; }

/* 卡片悬停：位移加深 + 阴影抬升 */
.adv-card:hover,
.feature-card:hover,
.product-card:hover,
.quality-card:hover,
.value-item:hover,
.fb-card:hover,
.product-detail:hover,
.contact-item:hover,
.ai-card:hover{
  transform: translateY(-6px) !important;
  box-shadow: var(--sh-3) !important;
}
.ai-metric:hover{
  transform: translateY(-4px) !important;
  box-shadow: var(--sh-2) !important;
}
.sp-card:hover{ transform: translateX(3px) !important; }

/* ---------- 4. 图标悬浮呼吸（动效体系核心） ---------- */
@keyframes bxFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.adv-ic, .sp-ico, .spc-ic, .icon-badge{
  animation: bxFloat 5s ease-in-out infinite;
}

/* 相位错开，消除整齐划一的机械感 */
.adv-grid .adv-card:nth-child(2) .adv-ic{ animation-delay: -1.7s; }
.adv-grid .adv-card:nth-child(3) .adv-ic{ animation-delay: -3.4s; }
.adv-grid .adv-card:nth-child(4) .adv-ic{ animation-delay: -5.1s; }
.adv-grid .adv-card:nth-child(5) .adv-ic{ animation-delay: -6.8s; }
.adv-grid .adv-card:nth-child(6) .adv-ic{ animation-delay: -8.5s; }

.sp-cards .sp-card:nth-child(2) .spc-ic{ animation-delay: -1.2s; }
.sp-cards .sp-card:nth-child(3) .spc-ic{ animation-delay: -2.4s; }
.sp-cards .sp-card:nth-child(4) .spc-ic{ animation-delay: -3.6s; }
.sp-cards .sp-card:nth-child(5) .spc-ic{ animation-delay: -4.8s; }
.sp-cards .sp-card:nth-child(6) .spc-ic{ animation-delay: -6s; }

.scope-panel:nth-child(2) .sp-ico{ animation-delay: -2s; }
.scope-panel:nth-child(3) .sp-ico{ animation-delay: -4s; }

/* 子页图标相位错开 */
.value-item:nth-child(2) .icon-badge,
.contact-item:nth-child(2) .icon-badge{ animation-delay: -1.6s; }
.value-item:nth-child(3) .icon-badge,
.contact-item:nth-child(3) .icon-badge{ animation-delay: -3.2s; }
.value-item:nth-child(4) .icon-badge,
.contact-item:nth-child(4) .icon-badge{ animation-delay: -4.8s; }
.value-item:nth-child(5) .icon-badge{ animation-delay: -6.4s; }
.value-item:nth-child(6) .icon-badge{ animation-delay: -8s; }
.value-item:nth-child(7) .icon-badge{ animation-delay: -9.6s; }
.value-item:nth-child(8) .icon-badge{ animation-delay: -11.2s; }

/* ---------- 5. 主按钮流光扫过（不改动底色与渐变） ---------- */
@keyframes bxSweep{
  0%{ left: -60%; }
  55%, 100%{ left: 140%; }
}
.btn-primary, .nav-cta, .hm-nav .nav-cta{
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.nav-cta::after,
.hm-nav .nav-cta::after{
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  animation: bxSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- 6. 氛围光晕呼吸 ---------- */
@keyframes bxGlow{
  0%, 100%{ opacity: .55; transform: scale(1); }
  50%{ opacity: .95; transform: scale(1.07); }
}
.cta-orb{ animation: bxGlow 6.5s ease-in-out infinite; }
.cta-orb.o2{ animation-delay: -3.2s; }

/* ---------- 7. 滚动进场（配合 reveal.js；无 JS 时内容始终可见） ---------- */
.js .reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}
.js .reveal.in{ opacity: 1; transform: none; }

/* ---------- 8. 响应式：小屏收敛尺度，避免撑破 ---------- */
@media (max-width: 968px){
  .adv-card{ padding: 26px 24px !important; }
  .feature-card{ padding: 32px 26px !important; }
  .value-item{ padding: 30px 18px !important; }
  .contact-item{ padding: 24px 20px !important; }
  .ai-card{ padding: 26px 22px !important; }
  .hero-v2-title{ font-size: clamp(34px, 7vw, 48px) !important; }
}
@media (max-width: 680px){
  .adv-card{ padding: 22px 20px !important; border-radius: 16px !important; }
  .feature-card{ padding: 26px 20px !important; border-radius: 18px !important; }
  .sp-card{ padding: 13px 14px !important; }
  .product-detail{ border-radius: 18px !important; }
  .contact-item, .ai-card{ border-radius: 18px !important; }
  .adv-ic, .sp-ico, .spc-ic, .icon-badge{ animation: none; }
  .cta-orb{ animation: none; }
}

/* ============================================================
   10. 排版收口（2026-10-18 全站复查修复）
   目标：消除"视觉层级与语义层级脱节"，让整站排版落在一把尺子上
   ============================================================ */

/* ---------- 10.1 卡片等高：行高拉齐，消除同栏卡片高低不一 ---------- */
/* adv-grid 原为 grid-auto-rows:auto → 每行各自取最高，行间参差（259 vs 230） */
.adv-grid{ grid-auto-rows: 1fr !important; }
/* 卡片内部改为纵向弹性：图标标题固定，段落吃掉剩余空间，内容长短不再影响卡高 */
.adv-card{ display: flex; flex-direction: column !important; }
.adv-card p{ flex: 1 1 auto; }
/* 同类问题：其他卡片网格一并拉齐 */
.qv-grid,
.featured-grid,
.value-grid{ grid-auto-rows: 1fr !important; }
.feature-card,
.quality-card,
.value-item{ display: flex; flex-direction: column !important; }
.feature-card p,
.quality-card p,
.value-item p{ flex: 1 1 auto; }

/* ---------- 10.1b 首页经营范围三栏等高 ---------- */
/* 原 align-items:start 导致 685 / 743 / 497px，边框参差 246px，是最显眼的排版硬伤 */
.scope-panels{ align-items: stretch !important; }
.scope-panel{ display: flex; flex-direction: column !important; }
/* 内部小卡片等分剩余高度：内容少的栏（4 类业务）不再底部空一大块，
   改为整列疏朗铺开，与内容多的栏视觉密度保持一致 */
.scope-panel .sp-cards{ flex: 1 1 auto; justify-content: space-between; }
.scope-panel .sp-card{ flex: 1 1 auto; max-height: 104px; align-items: center; }

/* ---------- 10.2 AI 页左右栏等高 ---------- */
/* 原 align-items:start 导致左栏 408px / 右栏 235px，落差 173px */
.ai-wrap{ align-items: stretch !important; }
.ai-card{ display: flex; flex-direction: column !important; }

/* ---------- 10.3 修复缺失规则：section-title-dark / section-desc-dark ---------- */
/* 这两个类名只出现在 index.html，但全库 CSS 从未定义 → 回退到 h2 默认 24px，
   而同页其他 h2 为 40~42px，造成深底区块标题明显塌陷。此处补齐并与之对齐。 */
.section-title-dark{
  font-size: clamp(30px, 3.4vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  letter-spacing: -.025em !important;
  color: var(--ink) !important;
}
.section-desc-dark{
  font-size: 16.5px !important;
  line-height: 1.8 !important;
  margin-top: 18px !important;
  color: var(--gray-600) !important;
}

/* ---------- 10.4 详情页主标题（产品名称）过小 ---------- */
/* 原 21px，作为页面 h1 视觉分量不足，与下方规格表主次不分 */
.pd-name{
  font-size: clamp(23px, 2.4vw, 29px) !important;
  line-height: 1.22 !important;
  letter-spacing: -.02em !important;
}

/* ---------- 10.5 可读下限：正文与标签一律 ≥12px ---------- */
/* 移动端 9.5~11.5px 的标签在高 DPI 下勉强可见，但小屏+低亮度时易糊，统一抬到 12px */
/* AI 指标标签 / 详情页规格键名 / 详情页标签与价格单位 */
.ai-metric .m-label,
.pd-spec .k,
.pd-smiles .k,
.pd-attr .k,
.label-brand-en,
.label-company,
.label-url,
.prod-price .from{
  font-size: 12px !important;
}
/* 耗材卡片：编号 / 前缀 / 状态徽标 / 规格 chip / 速查表单位 */
.cat-no,
.cat-prefix,
.cat-live,
.cat-none,
.pc-status,
.cat-hot .h,
.cat-specs span,
.qk-tb .qk-ct small{
  font-size: 12px !important;
}
/* 合成路线类型标记 */
.retro-mtype{ font-size: 12px !important; }
.struct-pending small{ font-size: 12px !important; }

/* ---------- 10.5b 联系方式卡片：二维码改右侧并排，消除 75px 高度断层 ---------- */
/* 原结构为 <p> 内 img + <br> + 文字 纵向堆叠，二维码 92px 直接把卡片顶到 210px，
   而其余卡片仅 135px。改为浮动并排后，卡片高度由文字行数决定，整列趋于齐平。 */
.contact-item p{ display: flow-root; }
.contact-item .wechat-qr-link{
  float: right;
  margin: 0 0 6px 14px;
  line-height: 0;
}
/* 去掉二维码后的强制换行，让说明文字绕排到左侧，卡片不再被纵向撑高 */
.contact-item p:has(.wechat-qr-link) br{ display: none; }
.contact-item .qr-thumb{
  width: 84px; height: 84px;
}

/* ---------- 10.5c 移除耗材页与短下划线冲突的全宽渐变线 ---------- */
/* consumables.css 给 .section-header.animate-in 加了一条 left:0→right:0 的 2px 全宽渐变线，
   与本设计系统为 .section-title 加的 64px 短签名下划线同时出现，形成"双下划线"割裂感。
   保留短签名（更克制），移除全宽线。 */
.section-header.animate-in::before{ display: none !important; }

/* ---------- 10.5d 耗材页锚点条视觉降级 ---------- */
/* 页面上方 sticky 的 .cs-nav（锚点跳转）与下方 .grp-tabs（分区筛选）样式几乎一致，
   两排胶囊上下叠放造成认知负担。此处把锚点条降为轻量文字式，与筛选按钮拉开层级。 */
.cs-nav-in .nv-chip{
  background: transparent !important;
  border-color: transparent !important;
  padding: 4px 9px !important;
  font-size: 12.5px !important;
  min-height: 32px; /* 视觉变轻，但点击区仍不低于 32px 的可用下限 */
}
.cs-nav-in .nv-chip:hover{
  background: rgba(109, 40, 217, .07) !important;
  box-shadow: none !important;
}
/* 当前所在分区：底部细线标识，而非整块高亮，避免与筛选按钮抢视觉 */
.cs-nav-in .nv-chip.on{
  background: transparent !important;
  color: var(--primary) !important;
  border-color: transparent !important;
  border-bottom: 2px solid var(--primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cs-nav-in .nv-chip.on .ic,
.cs-nav-in .nv-chip.on .n{ color: var(--primary) !important; opacity: 1; }

/* ---------- 10.5e 关于页「我们的故事」正文 ---------- */
/* 原 15px / 段距 16px：字号偏小，且与 1.85 倍行距相比段距过近，三段糊成一片 */
.about-text p{
  font-size: 16px !important;
  line-height: 1.88 !important;
  margin-bottom: 20px !important;
}
.about-text p:last-child{ margin-bottom: 0 !important; }

/* ---------- 10.5f 正文规格收口为 4 档 ----------
   收口前全站出现 12/14/15/16/16.5/17/20px 共 7 档字号，其中 15px 与 17px 是
   "中间态"——既非正文也非标题，纯属历史遗留。现统一为：
     16.5px 区块副标题 / 17px→16.5px hero 副标题
     16px   正文说明
     14px   卡片内小字
     12.5px 注释与单位
   ------------------------------------------------------------------ */

/* 正文说明统一 16px（原 15px） */
.pd-text p,
.pd-text > p,
.contact-info > p,
.ai-retro-head p{
  font-size: 16px !important;
  line-height: 1.86 !important;
}

/* 内页 hero 副标题统一 16.5px（原 17px，与 section-desc 合流） */
.page-hero p,
.page-hero .page-sub{
  font-size: 16.5px !important;
  line-height: 1.8 !important;
}

/* 注释类微字统一 12.5px */
.ai-hint,
.pd-pricing-note{
  font-size: 12.5px !important;
  line-height: 1.7 !important;
}

/* ---------- 10.5g 栏内标题统一 32px ----------
   全站标题层级定为四层：页面主标题 50/68 → 区块标题 40 → 栏内标题 32 → 卡片标题 18-21
   其中"栏内标题"（左图右文、联系信息、AI 结果区）此前分别为 32/30/24px，现归位。 */
.about-text h2,
.contact-info h2,
.ai-retro-head h2{
  font-size: 32px !important;
  line-height: 1.3 !important;
  letter-spacing: -.02em !important;
}

/* about 页底部 CTA 区块标题：原 30px，与首页同类区块（40px）不一致 */
.cta-band h2{
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.25 !important;
}

/* ---------- 10.6 行宽控制 + 孤字治理 ---------- */
.section-desc,
.scope-head p,
.pd-desc{
  max-width: 62ch;
}
/* text-wrap:pretty 会让浏览器避免段落末行只剩 1~4 个字的"孤字成行"
   （如"每一个环节"单独占一行）。仅 Chrome 117+ 生效，其余浏览器自动忽略，
   属渐进增强，不影响任何既有布局。 */
.section-desc,
.scope-head p,
.hero-v2-sub,
.feature-card p,
.adv-card p,
.value-item p,
.pd-related-title{
  text-wrap: pretty;
}
/* 区块标题也做均衡断行，避免长标题尾行孤字 */
.section-title,
.section-title-dark,
.page-hero h1,
.scope-head h2{
  text-wrap: balance;
}

/* ---------- 10.6b 屏幕阅读器专用（不占视觉空间，用于补齐语义缺失的 h1） ---------- */
.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;
}

/* ---------- 10.8 无障碍：skip 跳转 + 统一焦点态 ---------- */
.skip-link{
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%) translateY(-160%);
  z-index: 9999; padding: 10px 22px; border-radius: 999px;
  background: var(--primary, #6d28d9); color: #fff; font-weight: 700;
  box-shadow: 0 10px 30px rgba(20,60,120,.25);
  transition: transform .25s var(--ease, ease);
}
.skip-link:focus{
  transform: translateX(-50%) translateY(0);
  outline: 3px solid #fff; outline-offset: 2px;
}
/* 键盘焦点统一高亮，鼠标点击不显示（避免误触时的蓝框） */
:focus-visible{
  outline: 3px solid var(--primary, #6d28d9);
  outline-offset: 2px;
  border-radius: 6px;
}
a:focus, button:focus, input:focus, select:focus, textarea:focus,
[tabindex]:focus{ outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--primary, #6d28d9); outline-offset: 2px;
}

/* ---------- 10.7 小屏留白再收敛，防止大屏尺度在手机上过撑 ---------- */
@media (max-width: 680px){
  .section-title,
  .section-title-dark{
    font-size: clamp(24px, 6.4vw, 30px) !important;
  }
  .pd-name{ font-size: 22px !important; }
  .ai-wrap{ grid-template-columns: 1fr !important; }
}

/* ---------- 9. 无障碍：尊重系统「减少动效」偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  .adv-ic, .sp-ico, .spc-ic, .icon-badge, .cta-orb{ animation: none !important; }
  .btn-primary::after,
  .nav-cta::after,
  .hm-nav .nav-cta::after{ display: none !important; }
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   11. 设计系统 v3「深空紫极光」（2026-10-23）
   ------------------------------------------------------------
   气质：深空底 + 极光渐变 + 玻璃质感，强化高级感与情绪张力。
   - 首屏：4 类 hero 统一为深空极光（首页 hero-v2 / 子页 page-hero /
     搜索 search-hero / 耗材 cs-strip）
   - 导航：全站深色玻璃导航，白色 logo（filter 反白），橙色 CTA 保留
   - 内容层：保持浅色，但卡片升级为渐变微光白 + 分层柔和阴影 + 渐变图标
   兼容：所有覆盖均带 !important，确保压过 theme-light / home / consumables
   ============================================================ */

/* ---------- 11.1 深色玻璃导航（全站） ---------- */
.navbar,
.navbar.hm-nav,
.navbar.scrolled{
  background: rgba(8, 9, 22, .82) !important;
  backdrop-filter: blur(22px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: none !important;
}
.navbar.scrolled{
  background: rgba(8, 9, 22, .94) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .38) !important;
}
/* 导航 logo 使用官方白版（logo-white.svg），无需反色滤镜 */
/* 链接文字转浅 */
.navbar .nav-links a,
.navbar.hm-nav .nav-links a{ color: rgba(255, 255, 255, .82) !important; }
.navbar .nav-links a:hover,
.navbar.hm-nav .nav-links a:hover{ color: #fff !important; }
.navbar .nav-links a.active,
.navbar.hm-nav .nav-links a.active{ color: #fff !important; }
.navbar .nav-links a.active::after,
.navbar.hm-nav .nav-links a.active::after{
  background: linear-gradient(90deg, #22d3ee, #a78bfa) !important;
}
.navbar .nav-search-btn,
.navbar.hm-nav .nav-search-btn{
  color: rgba(255, 255, 255, .85) !important;
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}
.navbar .nav-search-btn:hover{
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .28) !important;
}
.navbar .nav-toggle span,
.navbar.hm-nav .nav-toggle span{ background: #fff !important; }
.navbar .nav-cta,
.navbar.hm-nav .nav-cta{
  background: linear-gradient(135deg, #f97316, #fb923c) !important;
  color: #fff !important;
}

/* ---------- 11.2 首页首屏：深空极光 + 粒子网络 ----------
   底层 linear-gradient 负责「深紫首屏 → 浅色内容区」的过渡：
   前 74px 保持纯深色，其后 74px 内插值到页面底色 #eef4fb。
   不要在深色上再叠半透明浅色层——那会让中段灰化发浑。      */
.hero-v2{
  background:
    radial-gradient(1120px 700px at 78% -8%, rgba(139, 92, 246, .66), transparent 60%),
    radial-gradient(940px 580px at 4% 84%, rgba(59, 130, 246, .52), transparent 58%),
    radial-gradient(800px 560px at 52% 24%, rgba(34, 211, 238, .30), transparent 62%),
    radial-gradient(660px 460px at 98% 74%, rgba(244, 114, 182, .24), transparent 66%),
    linear-gradient(180deg,
      #20164f 0%,
      #20164f calc(100% - 74px),
      #2a1f63 calc(100% - 60px),
      #3a2f74 calc(100% - 44px),
      #6b6690 calc(100% - 28px),
      #aab4cf calc(100% - 12px),
      #eef4fb 100%) !important;
  color: #fff !important;
}
/* 底部向浅色内容区过渡 */
.hero-v2::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(180deg, transparent 0%, #eef4fb 100%);
  z-index: 1; pointer-events: none;
}
.hero-v2 .hero-v2-glow{
  background: radial-gradient(circle, rgba(124, 58, 237, .35), transparent 65%) !important;
}
.hero-v2-title{ color: #fff !important; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.hero-v2-title .hl{
  background: linear-gradient(100deg, #22d3ee 0%, #a78bfa 48%, #f472b6 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
.hero-v2-sub{ color: rgba(226, 232, 246, .80) !important; }
.hero-v2-badge{
  color: #c4b5fd !important;
  background: rgba(124, 58, 237, .16) !important;
  border-color: rgba(167, 139, 250, .40) !important;
  backdrop-filter: blur(6px);
}
.hero-v2-search{
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45) !important;
  border-radius: 16px !important;
}
.hero-v2-search:focus-within{
  border-color: rgba(167, 139, 250, .8) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .22), 0 24px 70px rgba(0, 0, 0, .45) !important;
}
.hero-v2-search input{ color: #fff !important; }
.hero-v2-search input::placeholder{ color: rgba(203, 213, 225, .60) !important; }
.hero-v2-search .hs-ico{ color: #a5b4fc !important; }
.hero-v2-search button{
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  box-shadow: 0 10px 26px rgba(124, 58, 237, .50) !important;
  border-radius: 12px !important;
}
.hero-v2-stats .hvs .num{
  background: linear-gradient(120deg, #ffffff, #c4b5fd) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
.hero-v2-stats .hvs span{ color: rgba(203, 213, 225, .65) !important; }
.hero-v2-scroll{ border-color: rgba(255, 255, 255, .38) !important; }
.hero-v2-scroll span{ background: #a78bfa !important; }

/* ---------- 11.3 子页首屏：page-hero / search-hero 深空极光 ---------- */
.page-hero,
.search-hero{
  background:
    radial-gradient(940px 500px at 84% -22%, rgba(124, 58, 237, .52), transparent 60%),
    radial-gradient(780px 480px at 0% 122%, rgba(37, 99, 235, .42), transparent 58%),
    radial-gradient(560px 380px at 58% 42%, rgba(6, 182, 212, .18), transparent 64%),
    #080714 !important;
  background-size: 100% 100% !important;
  color: #fff !important;
}
.page-hero::before,
.post-hero::before,
.search-hero::before{ opacity: .55 !important; }
.page-hero h1,
.search-hero h1{ color: #fff !important; }
.page-hero p,
.search-hero p{ color: rgba(226, 232, 246, .78) !important; }
.page-hero h1 .hl,
.page-hero h1 em,
.search-hero h1 .hl{
  background: linear-gradient(100deg, #22d3ee 0%, #a78bfa 52%, #f472b6 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
.page-hero .section-tag,
.search-hero .section-tag{
  color: #c4b5fd !important;
  background: rgba(124, 58, 237, .16) !important;
  border-color: rgba(167, 139, 250, .40) !important;
}

/* ---------- 11.4 耗材页顶部信息条：深空工具条 ---------- */
.cs-strip{
  background:
    radial-gradient(720px 240px at 92% -60%, rgba(124, 58, 237, .55), transparent 70%),
    radial-gradient(520px 200px at 6% 150%, rgba(6, 182, 212, .26), transparent 70%),
    linear-gradient(120deg, #0a0a1c, #120e2e) !important;
  border-bottom: 0 !important;
}
.cs-brand{
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(167, 139, 250, .40) !important;
  color: #e9d5ff !important;
  box-shadow: none !important;
}
.cs-mini i{ color: rgba(203, 213, 225, .72) !important; }
.cs-mini i b{
  background: linear-gradient(135deg, #a78bfa, #60a5fa) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  filter: none !important;
}
.cs-mini i.hl b{
  background: linear-gradient(135deg, #4ade80, #22d3ee) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
}
.cs-mini .sep{ background: rgba(255, 255, 255, .16) !important; }
.cs-mini-search{
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: none !important;
}
.cs-mini-search input{ color: #fff !important; }
.cs-mini-search input::placeholder{ color: rgba(203, 213, 225, .55) !important; }
.cs-mini-search .ic{ color: #a5b4fc !important; }
.cs-mini-search button{
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
}

/* ---------- 11.5 内容层：卡片材质升级 ---------- */
.adv-card,
.feature-card,
.product-card,
.quality-card,
.value-item,
.fb-card,
.contact-item,
.ai-card,
.ai-metric,
.product-detail{
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
  border: 1px solid rgba(124, 58, 237, .10) !important;
  box-shadow:
    0 1px 2px rgba(20, 60, 120, .04),
    0 18px 44px -20px rgba(30, 45, 110, .20) !important;
}
.adv-card:hover,
.feature-card:hover,
.product-card:hover,
.quality-card:hover,
.value-item:hover,
.fb-card:hover,
.contact-item:hover,
.ai-card:hover,
.product-detail:hover{
  border-color: rgba(124, 58, 237, .22) !important;
  box-shadow:
    0 2px 4px rgba(20, 60, 120, .05),
    0 30px 66px -22px rgba(30, 45, 110, .30) !important;
}
/* 渐变图标徽章 */
.adv-ic,
.sp-ico,
.spc-ic,
.icon-badge{
  background: linear-gradient(140deg, #7c3aed 0%, #2563eb 100%) !important;
  color: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 26px -10px rgba(124, 58, 237, .55) !important;
}
.adv-ic svg, .sp-ico svg, .spc-ic svg, .icon-badge svg{ color: #fff !important; }

/* ---------- 11.6 移动端：深色导航下拉 + 首屏收敛 ---------- */
@media (max-width: 968px){
  .navbar .nav-links,
  .navbar.hm-nav .nav-links{
    background: rgba(10, 11, 26, .98) !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5) !important;
  }
  .navbar .nav-links a,
  .navbar.hm-nav .nav-links a{ color: rgba(255, 255, 255, .88) !important; }
  .navbar .nav-links a.active{ color: #fff !important; }
}
@media (max-width: 680px){
  .hero-v2{ padding-top: 104px !important; padding-bottom: 74px !important; }
  .hero-v2::after{ height: 120px; }
}

/* ---------- 11.7 打印/兜底：确保进场元素永不可见为空白 ---------- */
@media print{
  .js .reveal{ opacity: 1 !important; transform: none !important; }
}

/* ---------- 11.8 内容可见性兜底（关键修复） ----------
   原站 .animate-in 默认 opacity:0，依赖滚动观察器加 .visible 才显现。
   一旦观察器未触发（锚点直跳 / JS 异常 / 爬虫渲染 / 打印 / 快速滚动），
   整块内容会永久隐身，出现大段空白。
   此处改为「自带 CSS 动画、播完即定格可见」：
   - 动画 0.6s 播完自动停在 opacity:1（fill both）
   - 不支持动画 / 减少动效时，基线 opacity:1 直接可见
   滚动揭示的 JS 仍保留但不影响可见性，双保险。               */
.animate-in{
  opacity: 1;
  transform: none;
  animation: v3Rise .62s var(--ease) both;
}
@keyframes v3Rise{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .animate-in{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- 11.9 深色页脚：与首屏首尾呼应 ---------- */
.footer{
  background:
    radial-gradient(900px 420px at 86% -30%, rgba(124, 58, 237, .26), transparent 64%),
    radial-gradient(760px 380px at -6% 120%, rgba(37, 99, 235, .20), transparent 62%),
    #07060f !important;
  color: rgba(226, 232, 246, .66) !important;
  border-top: 0 !important;
}
.footer-grid{ border-bottom: 1px solid rgba(255, 255, 255, .10) !important; }
.footer-brand p{ color: rgba(203, 213, 225, .66) !important; }
.footer h4{ color: #fff !important; }
.footer-links a{ color: rgba(203, 213, 225, .70) !important; }
.footer-links a .ico{ color: #a78bfa !important; }
.footer-links a:hover{ color: #fff !important; }
.footer-bottom{ color: rgba(203, 213, 225, .45) !important; border-top: 1px solid rgba(255, 255, 255, .08) !important; }
.footer-bottom .icp, a.icp{ color: rgba(203, 213, 225, .55) !important; }
.footer-qr span{ color: rgba(203, 213, 225, .55) !important; }
/* 深色页脚上的二维码需白底保证可扫 */
.footer-qr img{ background: #fff !important; padding: 7px !important; border-radius: 12px !important; box-shadow: 0 8px 22px rgba(0,0,0,.35) !important; }

/* ---------- 11.10 耗材页：顶栏归位（移除遗留 26px「预览条」偏移） ----------
   consumables.css 仍保留 .dev-ribbon 的 26px 偏移（HTML 中已无该元素），
   导致顶部空出一条浅色带。此处归零，让深色导航直贴顶部。            */
body:has(.cs-strip){ padding-top: 73px !important; }
body:has(.cs-strip) .navbar,
body:has(.cs-strip) .navbar.scrolled{ top: 0 !important; }
.cs-nav{ top: 73px !important; }
#list, #cats, #quick{ scroll-margin-top: 145px !important; }

/* ---------- 11.11 产品矩阵：图片区改为 4:3 ----------
   .pd-visual 原先固定 260px 高、图片绝对定位，等于一条 2.18:1 的横条，
   方形的产品摄影图会被 cover 从中间切掉一半（色谱柱、pH 计被拦腰截断）。
   改为 4:3 后只裁 25%，产品主体完整，卡片也更有分量。          */
.product-detail .pd-visual,
.product-detail:nth-child(even) .pd-visual{
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  height: auto !important;
}
/* 产品图为棚拍浅灰底，去掉紫色蒙版，让材质本色呈现 */
.product-detail .pd-visual::after{ background: none !important; }

@media (max-width: 968px){
  .product-detail .pd-visual,
  .product-detail:nth-child(even) .pd-visual{ aspect-ratio: 16 / 10; }
}

/* ---------- 11.12 首屏对齐方向 A：数据卡玻璃质感 + 消除底部灰雾 ----------
   1) 数据指标加半透明玻璃卡片（mockup 方向 A 的关键细节，裸文字显单薄）
   2) 首屏底部过渡原用 linear-gradient(transparent → #eef4fb)。
      CSS 的 transparent 等于 rgba(0,0,0,0)（透明黑），与浅色混合时
      中段必然灰化，视觉上是一条脏灰雾带。改为同色系透明
      rgba(238,244,251,0)，全程只在浅色系内变化，过渡干净。   */

/* 1) 数据卡 */
.hero-v2-stats{
  gap: 14px !important;
  align-items: stretch;
}
.hero-v2-stats .hvs{
  display: flex; flex-direction: column; justify-content: center;
  padding: 16px 24px 15px;
  min-width: 134px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: border-color .3s ease, transform .3s ease;
}
.hero-v2-stats .hvs:hover{
  border-color: rgba(167, 139, 250, .42);
  transform: translateY(-2px);
}
.hero-v2-stats .hvs .num{ font-size: 30px !important; line-height: 1.05; }
.hero-v2-stats .hvs span{ margin-top: 8px !important; font-size: 12.5px !important; }

/* 2) 底部过渡：去掉透明黑导致的灰雾 */
.hero-v2::after{
  height: 170px !important;
  background: linear-gradient(180deg, rgba(238,244,251,0) 0%, rgba(238,244,251,.55) 62%, #eef4fb 100%) !important;
}

/* 移动端：4 个数据卡换 2×2，避免挤成一行 */
@media (max-width: 768px){
  .hero-v2-stats{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    width: 100%;
  }
  .hero-v2-stats .hvs{ padding: 13px 16px 12px; min-width: 0; border-radius: 13px; }
  .hero-v2-stats .hvs .num{ font-size: 25px !important; }
  .hero-v2-stats .hvs span{ font-size: 11.5px !important; margin-top: 6px !important; }
  .hero-v2::after{ height: 120px !important; }
}

/* ---------- 11.13 首屏叠加层收敛 ----------
   背景过渡已由 11.2 的 linear-gradient 承担，此处只需：
   ① 关掉旧的伪元素叠加层（半透明浅色压在深紫上会灰化）
   ② 粒子画布底部渐隐，避免白点漂进浅色过渡带
   ③ 光晕同样收敛，防止浅底上留色斑
   ④ 滚动提示在浅色过渡带里会变成白圈，方向 A 不保留        */
.hero-v2::after{ display: none !important; }

/* 粒子画布底部渐隐，避免白点漂进浅色过渡带 */
.hero-v2 .hero-net{
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,.35) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,.35) 88%, transparent 100%);
}
/* 深色极光光晕同样收敛，防止在浅底上留下色斑 */
.hero-v2 .hero-v2-glow{
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
}
/* 滚动提示落在浅色过渡带里会变成白圈，方向 A 不保留 */
.hero-v2-scroll{ display: none !important; }