/* ============================================================================
   禄存科技 LUCUNDA · 重设计 v2（GoodWe 主流企业官网风 + 禄存橙）
   ----------------------------------------------------------------------------
   · 本文件为新增样式，所有类名以 v2- 前缀隔离，不影响 home.css / subpage.css。
   · 通过 _Layout.cshtml 中的 <link> 引入（在 ~/bundles/css 之后，层叠优先）。
   · 字体：开源字体名优先的系统字体栈，不嵌入任何字体文件 → 100% 合规 + 离线稳定。
   ============================================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  --v2-brand:#E8660F;          /* 禄存橙（Logo 同源） */
  --v2-brand-deep:#C9510A;
  --v2-brand-tint:rgba(232,102,15,.09);
  --v2-ink:#1d1d1f;
  --v2-ink-2:#565660;
  --v2-ink-3:#9a9aa2;
  --v2-line:#eeeef2;
  --v2-bg:#ffffff;
  --v2-bg-soft:#f6f6f8;
  --v2-dark:#16181d;
  --v2-dark-2:#1e2127;
  --v2-cream:#f4f5f7;
  --v2-cream-2:rgba(244,245,247,.62);
  --v2-r-lg:20px;
  --v2-pill:999px;
  --v2-ease:cubic-bezier(.16,1,.3,1);
  --v2-font:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --v2-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --v2-shadow-nav:0 6px 24px rgba(20,20,30,.10);
  --v2-shadow-card:0 12px 32px rgba(20,20,30,.10);
}

/* ---------- 基础覆盖（仅作用于新结构） ---------- */
body{ font-family:var(--v2-font); }
.v2-wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
.v2-wrap::after{ content:""; display:block; clear:both; }

/* 通用标题/标签 */
.v2-eyebrow{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.16em;
  color:var(--v2-brand); text-transform:uppercase; margin-bottom:14px;
}
.v2-title{
  font-size:clamp(28px,3.4vw,38px); font-weight:900; color:var(--v2-ink);
  line-height:1.22; letter-spacing:.01em; margin:0;
}
.v2-title .accent{ color:var(--v2-brand); }
.v2-head-center{ text-align:center; max-width:660px; margin:0 auto 56px; }
.v2-head-center .v2-sub{ font-size:15px; color:var(--v2-ink-2); margin-top:14px; }
.v2-divider{ width:44px; height:4px; border-radius:2px; background:var(--v2-brand); margin:18px auto 0; }
.v2-sec{ padding:96px 0; }

/* 按钮 */
.v2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--v2-font); font-weight:700; font-size:15px;
  padding:14px 32px; border-radius:var(--v2-pill); cursor:pointer;
  border:1.5px solid transparent; text-decoration:none;
  transition:all .25s var(--v2-ease);
}
.v2-btn-solid{ background:var(--v2-brand); color:#fff; box-shadow:0 8px 22px rgba(232,102,15,.28); }
.v2-btn-solid:hover{ background:var(--v2-brand-deep); transform:translateY(-2px); box-shadow:0 14px 30px rgba(232,102,15,.36); }
.v2-btn-ghost-w{ border-color:rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.06); }
.v2-btn-ghost-w:hover{ background:#fff; color:var(--v2-ink); transform:translateY(-2px); }
.v2-btn-ghost{ border-color:var(--v2-line); color:var(--v2-ink); background:transparent; }
.v2-btn-ghost:hover{ border-color:var(--v2-brand); color:var(--v2-brand); transform:translateY(-2px); }
.v2-link-more{ font-weight:700; font-size:15px; color:var(--v2-brand); display:inline-flex; align-items:center; gap:6px; transition:gap .2s var(--v2-ease); }
.v2-link-more:hover{ gap:12px; }

/* ============================================================================
   导航（首页：悬浮胶囊→滚动实心 / 子页：实心条）
   ============================================================================ */
.v2-nav{ position:fixed; top:0; left:0; right:0; z-index:1000; }
.v2-nav-inner{
  position:relative; height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  padding:0 16px 0 22px; transition:all .3s var(--v2-ease);
}
/* 首页 Hero 模式：悬浮胶囊
   ★★ 2026-09-21（第十二轮）导航胶囊与内容网格 .v2-wrap **同源** —— 改一处必须同时改另一处。
   改前实测（1920 视口）：胶囊左 300 / LOGO 323 / 首屏标题 392 ⇒ 文案比 LOGO 右缩 **69px**；
   根因就是这里写 (1320 + 24)、.v2-wrap 写 (1200 + 32)，两套容器参数各写各的。
   现在统一成「max-width:1200px + padding:32px」，并把外层胶袋 padding 收成 0：
   外层 padding 会在「视口 < max-width + 胶袋」时把两者重新错开（实测 1100px 时错 15px、
   1240px 附近最多错 24px）。对称 padding 本来不影响居中，收掉它只是为了消掉这段残差。
   ★ 同步覆盖：.v2-wrap 的两个断点（≤1024 → 24px、≤600 → 18px）在下面都有对应规则。
   ★ 对齐目标：导航 LOGO 左边缘 == 首屏标题左边缘 == 下方各区块的内容左边缘。
     判据脚本 _probe_hero_align_20260921.js（8 个宽度，容差 1.5px）。 */
.v2-nav-hero{ padding:18px 0; transition:padding .3s var(--v2-ease); }
.v2-nav-hero .v2-nav-inner{
  max-width:1200px; margin:0 auto; border-radius:var(--v2-pill); box-shadow:0 8px 32px rgba(20,20,30,.08);
  padding-left:32px; padding-right:32px;
}
.v2-nav-hero.scrolled{ padding:0; }
.v2-nav-hero.scrolled .v2-nav-inner{
  max-width:100%; margin:0; border-radius:0;
  background:rgba(255,255,255,.82);
  border-left:0; border-right:0; border-top:0;
  box-shadow:0 2px 16px rgba(20,20,30,.06);
  /* 吸顶后是整条通栏，不再走内容网格 ⇒ 恢复基础内边距，与子页实心条（.v2-nav-solid）保持一致 */
  padding:0 16px 0 22px;
}
/* 子页：始终实心条（毛玻璃稍浓，保证可读性） */
.v2-nav-solid .v2-nav-inner{
  max-width:100%; margin:0; border-radius:0; height:66px;
  background:rgba(255,255,255,.85);
  border-left:0; border-right:0; border-top:0;
  box-shadow:0 2px 16px rgba(20,20,30,.06);
}

.v2-brand{ display:flex; align-items:center; gap:10px; }
.v2-brand img{ height:36px; width:auto; display:block; }
.v2-menu{ display:flex; gap:28px; }
.v2-menu a{
  font-size:15px; font-weight:500; color:var(--v2-ink-2); padding:6px 2px; position:relative;
  transition:color .2s var(--v2-ease);
}
/* hover 时变品牌橙色 + 下划线滑入（与 active 状态同色，但下划线动效不同：active 一直显示，hover 滑入） */
.v2-menu a::after{
  content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  width:0; height:3px; border-radius:2px; background:var(--v2-brand);
  transition:width .25s var(--v2-ease);
}
.v2-menu a:hover{ color:var(--v2-brand); }
.v2-menu a:hover::after{ width:18px; }
.v2-menu a.active{ color:var(--v2-brand); font-weight:700; }
.v2-menu a.active::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-4px;
  width:18px; height:3px; border-radius:2px; background:var(--v2-brand);
}
/* 产品中心的展开小箭头：打开时旋转 180° */
.v2-mega-trigger{ display:inline-flex !important; align-items:center !important; gap:4px !important; }
.v2-mega-caret{
  width:13px !important; height:13px !important; flex:none !important;
  transition:transform .3s var(--v2-ease) !important;
}
.v2-mega-trigger.is-open{ color:var(--v2-brand) !important; }
.v2-mega-trigger.is-open::after{ width:18px; }
.v2-mega-trigger.is-open .v2-mega-caret{ transform:rotate(180deg) !important; }

.v2-nav-cta{
  display:inline-flex; align-items:center; gap:8px; background:var(--v2-brand); color:#fff;
  font-weight:700; font-size:14px; padding:11px 22px; border-radius:var(--v2-pill);
  box-shadow:0 6px 18px rgba(232,102,15,.3); transition:all .25s var(--v2-ease); white-space:nowrap;
}
.v2-nav-cta:hover{ background:var(--v2-brand-deep); transform:translateY(-1px); }
/* ★ 2026-10-13：手机端菜单里的「联系我们」副本。
   桌面端隐藏 —— 桌面用右上角的橙色按钮 .v2-nav-cta，不需要重复一项。
   ⚠ 必须带 .v2-nav .v2-menu 前缀、并写成 !important：
     下面媒体查询里那条 `.v2-nav .v2-menu a{ padding:... }` 特异性更高，
     只用 .v2-menu-cta-m 会被它盖过、导致桌面端也显示出来。
   窄屏（≤1024px）由下面对应的 media query 打开它。 */
.v2-nav .v2-menu a.v2-menu-cta-m{ display:none !important; }
.v2-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:10px; }
.v2-burger span{ width:22px; height:2px; background:var(--v2-ink); border-radius:2px; transition:all .3s var(--v2-ease); }
.v2-burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.v2-burger.active span:nth-child(2){ opacity:0; }
.v2-burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================================
   产品 MEGA MENU（Teleport 方案：节点在 body 末尾，position:fixed，JS 实时定位）
   类名前缀 v2-mega-floating- 避免与页面内容冲突；用 !important 抗 subpage.css 污染
   ============================================================================ */
/* 关闭态：透明 + 上移 + 微缩；只用 opacity/transform，保证 60fps */
.v2-mega-floating{
  position:fixed !important; top:0; left:0; z-index:1100 !important;
  background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-10px) scale(.985);   /* 缩放幅度收小，避免读成"往下抻开" */
  transform-origin:var(--v2-mega-origin,120px) 0;  /* JS 按“产品中心”实际位置写入 */
  transition:opacity .2s ease-out, transform .36s var(--v2-ease), visibility .36s linear;
  will-change:opacity,transform;
}
.v2-mega-floating.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
}
.v2-mega-floating[hidden]{ display:none !important; }
/* 切换分类改变高度时裁掉溢出，避免瞬间露出下一排 */
.v2-mega-floating.is-resizing .v2-mega-floating-panel{ overflow:hidden !important; }

/* 面板打开时，导航下方内容压暗一点，视觉聚焦（不拦截鼠标事件） */
.v2-mega-scrim{
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:900;
  pointer-events:none; opacity:0;
  background:linear-gradient(180deg,rgba(15,16,20,.30) 0%,rgba(15,16,20,.14) 45%,rgba(15,16,20,.05) 100%);
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
  transition:opacity .34s var(--v2-ease);
}
.v2-mega-scrim.is-open{ opacity:1; }
.v2-mega-scrim[hidden]{ display:none !important; }

.v2-mega-floating-inner{
  display:grid !important; grid-template-columns:180px 1fr !important;
  background:#fff !important; border-radius:20px !important;
  box-shadow:
    0 32px 80px rgba(20,20,30,.22),
    0 0 0 1px rgba(255,255,255,.6) inset,
    0 8px 32px rgba(232,102,15,.08) !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.6) !important;
  width:100% !important; max-width:none !important; box-sizing:border-box !important;
  position:relative !important;
}
.v2-mega-floating-inner::before{
  content:"" !important; position:absolute !important; top:0; left:0; right:0; height:1px !important;
  background:linear-gradient(90deg,transparent 0%,rgba(232,102,15,.18) 50%,transparent 100%) !important;
  pointer-events:none !important;
}
/* 打开瞬间一道高光扫过（仅装饰，不挡点击） */
.v2-mega-floating-inner::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:2 !important;
  pointer-events:none !important; opacity:0;  /* 同样不能加 !important，否则会压掉 v2-mega-sweep 的关键帧 */
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%) !important;
}
.v2-mega-floating.is-open .v2-mega-floating-inner::after{
  animation:v2-mega-sweep .75s var(--v2-ease) .05s 1 !important;
}
.v2-mega-floating-cats{
  padding:14px 0 !important; background:#fafafb !important;
  border-right:1px solid var(--v2-line) !important; display:block !important;
}
.v2-mega-floating-cat{
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:11px 16px !important; font-size:13px !important; font-weight:600 !important;
  color:var(--v2-ink-2) !important; text-decoration:none !important;
  border-left:3px solid transparent !important; transition:color .2s,background .2s !important;
}
.v2-mega-floating-cat svg{ width:18px !important; height:18px !important; flex-shrink:0 !important; }
.v2-mega-floating-cat:hover{ color:var(--v2-ink) !important; background:#fff !important; }
.v2-mega-floating-cat.active{ color:var(--v2-brand) !important; background:#fff !important; border-left-color:var(--v2-brand) !important; }
.v2-mega-floating-panel{
  padding:22px 26px !important; display:block !important; min-width:0 !important;
  box-sizing:border-box !important;
  transition:height .36s var(--v2-ease) !important;
}
.v2-mega-floating-products{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important;
}
.v2-mega-floating-products[hidden]{ display:none !important; }
.v2-mega-floating-prod{
  display:block !important; text-decoration:none !important; text-align:center !important;
  background:transparent !important; padding:0 !important; margin:0 !important;
}
/* 逐项错峰上浮：--i 由 JS 写入（产品数量由后台决定，不写死）
   注意：基础态 opacity 千万不能加 !important，否则会压掉 animation 的关键帧（层叠级别：
   animation < important 声明），卡片会永远停在透明状态。 */
.v2-mega-floating.v2-mega-anim .v2-mega-floating-prod{ opacity:0; }
.v2-mega-floating.v2-mega-anim.is-open .v2-mega-floating-products:not([hidden]) .v2-mega-floating-prod{
  opacity:1;
  animation:v2-mega-item .42s var(--v2-ease) both;
  animation-delay:calc(70ms + var(--i,0) * 40ms);
}
/* 左侧分类也一起错峰进场 */
.v2-mega-floating.v2-mega-anim .v2-mega-floating-cat{ opacity:0; }
.v2-mega-floating.v2-mega-anim.is-open .v2-mega-floating-cat{
  opacity:1;
  animation:v2-mega-item .38s var(--v2-ease) both;
  animation-delay:calc(var(--i,0) * 60ms);
}
.v2-mega-floating-prod-img{
  height:110px !important; background:var(--v2-bg-soft) !important; border-radius:10px !important;
  padding:12px !important; display:flex !important; align-items:center !important;
  justify-content:center !important; overflow:hidden !important; margin-bottom:8px !important;
  border:1px solid transparent !important; transition:border-color .25s,box-shadow .25s !important;
}
.v2-mega-floating-prod-img img{
  max-width:100% !important; max-height:100% !important; object-fit:contain !important;
  transition:transform .4s var(--v2-ease) !important;
}
.v2-mega-floating-prod:hover .v2-mega-floating-prod-img{
  border-color:rgba(232,102,15,.25) !important; box-shadow:0 8px 22px rgba(20,20,30,.08) !important;
}
.v2-mega-floating-prod:hover .v2-mega-floating-prod-img img{ transform:scale(1.05) !important; }
.v2-mega-floating-prod-info{ display:block !important; }
.v2-mega-floating-prod-info .en{
  font-size:10px !important; font-weight:700 !important; letter-spacing:.08em !important;
  color:var(--v2-brand) !important; text-transform:uppercase !important;
}
.v2-mega-floating-prod-info h5{
  font-size:13px !important; font-weight:700 !important; color:var(--v2-ink) !important;
  margin:4px 0 0 !important;
}
@keyframes v2-mega-item{
  from{ opacity:0; transform:translateY(12px) scale(.97); }
  to{ opacity:1; transform:none; }
}
@keyframes v2-mega-sweep{
  0%{ transform:translateX(-115%); opacity:0; }
  22%{ opacity:.85; }
  100%{ transform:translateX(115%); opacity:0; }
}
/* 尊重系统「减少动效」设置：直接显示，不做位移 */
@media (prefers-reduced-motion: reduce){
  .v2-mega-floating,.v2-mega-scrim{ transition:opacity .01s linear !important; transform:none !important; }
  .v2-mega-floating.v2-mega-anim .v2-mega-floating-prod,
  .v2-mega-floating.v2-mega-anim .v2-mega-floating-cat{ opacity:1 !important; animation:none !important; }
  .v2-mega-floating.is-open .v2-mega-floating-inner::after{ animation:none !important; }
}
@media (max-width:1024px){
  .v2-mega-floating,.v2-mega-scrim{ display:none !important; }
}
@media (max-width:1200px) and (min-width:1025px){
  .v2-mega-floating-products{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:1100px) and (min-width:1025px){
  .v2-mega-floating-inner{ grid-template-columns:160px 1fr !important; }
  .v2-mega-floating-products{ grid-template-columns:repeat(3,1fr) !important; }
}

/* ============================================================================
   HERO（全幅实景轮播）
   ============================================================================ */
.v2-hero{ position:relative; height:100vh; min-height:600px; background:var(--v2-dark); }
/* ⚠ Swiper 版本坑（2026-09-17 实测修复）：
   项目里 Content/swiper-bundle.min.css + Scripts/swiper-bundle.min.js 都是 Swiper 6.4.15，
   而 v6 的容器类名是 `.swiper-container`（v7 才改名 `.swiper`）；
   本页 markup 用的是 v7+ 写法 `class="swiper"` → v6 那条
   `.swiper-container{overflow:hidden;position:relative;z-index:1}` **完全匹配不上**。
   后果：容器不裁剪，4~5 张 slide 并排把文档撑成「4 × 视口宽」（1440 → 5760、1024 → 4096、375 → 1500），
   全端可横向拖动、桌面出现横向滚动条，fixed 浮层在移动端浏览器还可能被撑到文档右侧。
   `.swiper-wrapper` / `.swiper-slide` 两版同名 → 轮播"看起来完全正常"，所以这个坑极难发现。
   这里补齐 v6 `.swiper-container` 的等价契约。 */
.v2-hero .swiper{
  position:relative; overflow:hidden; z-index:1; list-style:none; padding:0;
  height:100%;
}
.v2-slide{ position:relative; overflow:hidden; }
.v2-slide-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.05); transition:transform 6s var(--v2-ease);
}
.swiper-slide-active .v2-slide-bg{ transform:scale(1); }
/* 首屏压暗层 · 五页共用同一套（首页轮播 / 案例 / 售后 / 关于 / 联系）
   ————————————————————————————————————————————————————————————————
   这一条已经因为实拍反馈改过两次，沿革写在下面（★ 别再只看末值）：
     ① .82 / .52 / .16 三段横向
     ② .66 恒定到 46%，再快速衰减到 0
     ③ 本版：横向左缘斜坡 + 提前衰减，再乘一层纵向羽化（mask-image）

   ① → ② 修的是"暗得没道理"。逐列实测（文字列取横向 8.3%~44.4%、每列 p99，目标白字
   5.5:1）发现 ①**同时犯两个错**：左端 .82 是**白压**（把背景当纯白 255 算，5.5:1 也只需
   alpha .63，白多压了 .19，纯损画面）；文字列右端（40~46%）只有 .53~.56，**反而欠压** ——
   售后 / 联系 / 首页 B2 最低对比度只有 4.8~5.0:1，贴着 4.5:1 底线。根因：所需 alpha 沿横轴
   几乎**恒定 .63**（每张图每一列都有高光斑），而 ① 是"左重右轻"的斜线，形状与需求不符。

   ② → ③ 修的是"暗成一整块"。② 的对比度是够的（最低 6.16:1），但它是**矩形**：
   横向 0~46% 一样暗、纵向 900px 通高，照片被罩住一大片，46% 处还有一道可见的竖直分界
   ⇒ 反馈「文字那边是暗的 …… 不要搞暗，不然图片看着怪怪的」。

   ③ 的做法（不动平台值，只改"形状"）：
     · **左缘斜坡**：文字从 x=120(8.3%) 才开始，0~3% 那一条压根不需要暗
       ⇒ alpha 由 .22 → 3% 处 .50 → 7.5% 起进入平台。画面最左缘因此回到照片原样。
     · **纵向羽化**（mask-image，两维相乘）：上边缘 .12 → 21% 处满档 → 80% 起回落 →
       下边缘 .40。面包屑(y≈207)、标题(y≈251)、正文、按钮(y≈692) 全在满档区内，
       而照片的**上下边缘**和**四角**回到原样 —— 这是"不再像贴了一条暗胶带"的主因。
     · **横向衰减提前**：46% 平台 → 56% .47 → 66% .22 → 74% .06 → 82% 归零（② 到 88%）。
     · 平台值**仍是 .66** ⇒ 实测最低对比度与 ② 完全相同（见下），不拿可读性换亮度。

   ④ 本版（2026-10-08 三改）：**取消"矩形 / 条带"这个形状本身** —— 换成一片**椭圆柔光**。
      反馈原文：「能不能去掉暗的矩形，彻底去除暗区」。③ 虽已把平台从 0~46% 收窄、并做了
      纵向羽化，但横向仍是"左端平台 + 右端拐点"的条带，在高亮照片（首页 B1 几乎整幅浅蓝白）
      上仍会被看成"罩了一条"。
     · 形状：radial-gradient 椭圆，**无任何硬边界**。中心 (26%,44%) 落在文字块中心；
       水平半径 48%×1440=691、垂直半径 66%×900=594 ⇒ 文字块四缘的归一化距离落在 0.33~0.43，
       仍在 46% 平顶内 ⇒ **文字处的 alpha 与 ③ 完全等价（不拿可读性换观感）**。
     · 46% 平顶之外才衰减（64% .44 → 82% .16 → 100% 0）⇒ 右上 / 左下 / 四角回到照片。
     · **纵向羽化 mask-image 一并删除**：椭圆本就两维羽化，再乘一层 mask 是冗余，
       还多一个"改了基础规则忘改断点"的耦合点。
     · 平台值**仍是 .66**（= 对纯白也够 5.5:1 的可证明下界），一个数没动。
     · 实测（1440 视口）：五页「紧贴背景局部对比度 p25」的不达标项与 ③ **完全相同**
       （仍是 home/crumb 3.69 与 case/crumb 3.92，这两项在 ③ 之前就存在），title / lede
       逐页持平 ⇒ 这是一次**只换形状、不换可读性**的改动。
     ★★ 为什么不做"彻底零压暗"（把这一层整个删掉）：**实测过**。删掉后白字在亮照片上
       局部对比度只剩 1.1~2.9:1（首页标题 1.44、正文 1.13、面包屑 1.13），再加多层
       text-shadow、-webkit-text-stroke 描边、四向 1px 硬阴影，也只回到 1.5~2.3:1 ——
       **物理上补不回来**：白字与亮背景之间没有可用的亮度差，阴影只能压暗字的外沿几像素。
       真正能"零压暗"的只有两条路：① 把首屏文字改成**深色**（首页 / 售后 / 联系 三页
       实测达标，但**关于 / 案例 页照片明暗交错，深字会糊在暗处**）；② **换图**（换成
       整体偏亮、不带文字的干净实景）。⇒ 结论：**亮照片 + 白字 + 零压暗，三者不可兼得。**
       本轮选"椭圆柔光"：形状上不再是矩形，可读性一分不减，且不需要动照片。
   ★ 平台段取 .66：它 ≥ .63（= 把纯白背景压到 5.5:1 所需）⇒ 对任何图像都"可证明充分"。
   ★ 为什么不下探到 .60：按 **lede 真实色 rgba(255,255,255,.84)** 口径，.63 档只剩 4.47:1，
     已经跌破 4.5 —— 白字口径看着有富余，.84 口径并没有。这条比"看着够了"更值得信。
   ★ 椭圆**两维自带羽化**，不需要 mask-image（③ 曾用 mask-image 做纵向羽化，④ 已删；
     判据会检查 hero 压暗层里不再出现 mask-image）。
   ★ 窄屏（≤760）不走这条：那里五个类**统一**改走「纵向加深 .76→.88」（见下方断点）——
     椭圆在窄屏会被压扁成"只盖住文字左半"（水平半径 48%×390≈187px，文字排到 x≈366）。
   ★ 派生关系：改这一条必须**同步**改 .v2-cs-hero-mask / .v2-sv-hero-mask /
     .v2-ab-hero-mask / .v2-cp-hero-mask 四处，五处字符串必须逐字相同（判据脚本会比对）。
   ★ 实测（1440 视口，② → ③）：
       最低对比度    关于 6.16→6.16 / 案例 7.59→7.59 / 售后 6.24→6.24 / 联系 6.16→6.16
                     首页B1 6.18→6.18（**逐页不变**）
       四角均亮 96.3→115.8 (+19.5)   上条带 97.5→135.1 (+37.6)
       左缘条(x<108) 51.9→78.5 (+26.6)   整屏均亮 88.2→97.4　（五页均值） */
.v2-slide-overlay{
  position:absolute; inset:0;
  background:none;
}
.v2-hero-inner{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center;
}
.v2-crumb{
  display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.95);
  font-size:13px; font-weight:500; letter-spacing:.12em; margin-bottom:22px;
  -webkit-text-stroke:0.5px rgba(6,8,12,.5);
  paint-order:stroke fill;
  text-shadow:
    0 1px 2px rgba(0,0,0,.92),
    0 2px 6px rgba(0,0,0,.75);
}
.v2-crumb .dot{ width:6px; height:6px; border-radius:50%; background:var(--v2-brand); }
.v2-hero-title{
  color:#fff; font-weight:900; font-size:clamp(34px,5vw,62px); line-height:1.16;
  letter-spacing:.01em; max-width:15em; margin:0;
  -webkit-text-stroke:0.6px rgba(6,8,12,.55);
  paint-order:stroke fill;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 2px 6px rgba(0,0,0,.85),
    0 4px 16px rgba(0,0,0,.68),
    0 8px 34px rgba(0,0,0,.48),
    0 16px 60px rgba(0,0,0,.28);
}
.v2-hero-title .accent{ color:var(--v2-brand); text-shadow:inherit; -webkit-text-stroke:inherit; }
.v2-hero-lede{
  color:#fff; font-size:17px; max-width:520px; margin:24px 0 38px; line-height:1.85;
  -webkit-text-stroke:0.5px rgba(6,8,12,.5);
  paint-order:stroke fill;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 2px 6px rgba(0,0,0,.82),
    0 4px 14px rgba(0,0,0,.60);
}
.v2-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
/* Hero 内容载入动画 */
.v2-hero-inner > *{ opacity:0; transform:translateY(24px); animation:v2-rise .8s var(--v2-ease) forwards; }
.v2-hero-inner > *:nth-child(1){ animation-delay:.1s; }
.v2-hero-inner > *:nth-child(2){ animation-delay:.22s; }
.v2-hero-inner > *:nth-child(3){ animation-delay:.34s; }
.v2-hero-inner > *:nth-child(4){ animation-delay:.46s; }
@keyframes v2-rise{ to{ opacity:1; transform:none; } }
/* 轮播控件 */
.v2-hero .swiper-pagination{ bottom:32px !important; }
.v2-hero .swiper-pagination-bullet{
  width:22px; height:4px; border-radius:2px; background:rgba(255,255,255,.4); opacity:1; transition:all .3s;
}
.v2-hero .swiper-pagination-bullet-active{ background:var(--v2-brand); width:36px; }
.v2-arrow{
  width:52px !important; height:52px !important; margin-top:-26px !important;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.28); border-radius:50%;
  color:#fff; display:flex; align-items:center; justify-content:center; transition:all .25s var(--v2-ease);
}
.v2-arrow::after{ content:"" !important; display:none !important; }
.v2-arrow:hover{ background:var(--v2-brand); border-color:var(--v2-brand); transform:scale(1.06); }
.v2-hero .swiper-button-prev{ left:28px; }
.v2-hero .swiper-button-next{ right:28px; }

/* ============================================================================
   统计块（图标 + 数字 · 4 列）
   ----------------------------------------------------------------------------
   ★ 2026-09-24：原 `section.v2-stats`（WHY LUCUNDA「值得信赖的温度校准专家」那个
     独立的居中数据区）已**整段删除**，并入首页「关于禄存科技」（企业文化卡片下方）。
     ⇒ 它自己的容器样式（padding + 白底）随之删掉，因为已经没有这个 section 了。
   ★ `.v2-stats-grid` 这个名字**刻意保留**：合并后的那 4 项就挂在它上面，于是
     · 下面两条响应式断点（≤1024 两列 / ≤600 单列）不用改
     · Index.cshtml 里「数字滚动」的 IntersectionObserver 选择器也不用改
     （改名的话这两处都要跟着动，属于无收益的连带风险。）
   ============================================================================ */
.v2-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.v2-stat{ text-align:center; padding:10px; }
.v2-stat .ico{
  width:78px; height:78px; margin:0 auto 20px; border-radius:50%;
  background:var(--v2-brand-tint); display:flex; align-items:center; justify-content:center;
}
.v2-stat .ico svg{ width:38px; height:38px; }
.v2-stat .num{ font-size:clamp(32px,3.4vw,44px); font-weight:900; color:var(--v2-ink); line-height:1; }
.v2-stat .num i{ font-style:normal; color:var(--v2-brand); font-size:.66em; }
.v2-stat .lbl{ font-size:15px; color:var(--v2-ink-2); margin-top:10px; }

/* ============================================================================
   特性列（图标 + 短橙线 + 灰文）
   ============================================================================ */
.v2-feats{ padding:88px 0; background:var(--v2-bg-soft); }
.v2-feats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.v2-feat{ text-align:center; padding:0 12px; }
.v2-feat .fico{ width:70px; height:70px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; }
.v2-feat h4{ font-size:19px; font-weight:700; color:var(--v2-ink); margin:0; }
.v2-feat .fdiv{ width:34px; height:3px; border-radius:2px; background:var(--v2-brand); margin:16px auto; }
.v2-feat p{ font-size:14px; color:var(--v2-ink-2); line-height:1.8; margin:0; }

/* ============================================================================
   关于禄存 / 企业文化（对齐 GoodWe：标题压在深色带上，卡片跨越深 / 浅分界，
   右侧竖排圆点切换条目）
   ============================================================================ */
/* 两段式背景（对齐参考图）：上半条暖砂色带、下半纯白，卡片跨在分界线上 */
.v2-culture{
  position:relative; overflow:hidden; padding:88px 0 100px;
  background:#fff;   /* ★ 2026-09-24：原为灰 #f6f6f8 —— 那时它下方紧邻纯白的「核心产品系列」，靠灰/白拉开层次；产品区上移到 Banner 下方后，本块下方变成灰底的「应用行业」，灰压灰会连成一片没有分界 ⇒ 底色改白，重新压出「灰(特性) → 白(本块) → 灰(行业)」的台阶 */
  --v2-culture-bg:url("../images/v2/culture-band.jpg");  /* 相对本 CSS（Content/）→ 站点根 images/v2/ */
}
/* 色带：真的背景图 —— 深色渐变曲面 + 一道斜向光带（呼应卡片里的斜线）+ 品牌暖光 */
.v2-culture::before{
  content:""; position:absolute; top:0; left:0; right:0; height:340px; z-index:0; pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 44%),
    radial-gradient(720px 340px at 12% 122%, rgba(232,102,15,.20), transparent 62%),
    var(--v2-culture-bg) center top / cover no-repeat;
}
.v2-culture > *{ position:relative; z-index:1; }
.v2-culture-head{ text-align:center; max-width:720px; margin:0 auto 56px; padding:0 24px; }
.v2-culture-head .v2-title{ color:#fff; }

/* 备选：暖色实景色带（浅底 + 深标题） */
.v2-culture.is-band-warm{ --v2-culture-bg:url("../images/v2/culture-bg.jpg"); }
.v2-culture.is-band-warm::before{
  background:
    linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 46%),
    linear-gradient(180deg,rgba(247,242,234,.42) 0%,rgba(247,242,234,.80) 100%),
    var(--v2-culture-bg) center top / cover no-repeat;
}
.v2-culture.is-band-warm .v2-culture-head .v2-title{ color:var(--v2-ink); }


.v2-culture-card{
  position:relative;
  display:grid; grid-template-columns:1fr 1.15fr; min-height:360px;
  border-radius:36px; overflow:hidden;
  /* 卡片底＝右半边的"深调区"，与下面斜切的中调块形成明显的一层明暗台阶（层次感来源） */
  background:linear-gradient(150deg,#191c22 0%,#14171d 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 40px 90px rgba(8,10,16,.42), inset 0 1px 0 rgba(255,255,255,.07);
  transition:height .55s var(--v2-ease);   /* 条目内容长短不一时高度平滑收放 */
}
/* JS 接管高度后解除兜底高度（无 JS 时保留 420 的最小高度，内容不会溢出） */
.v2-culture-card.v2-js{ min-height:0; }
.v2-culture-photo{ position:relative; min-height:360px; }
.v2-culture-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.v2-culture-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(38,42,50,0) 48%,rgba(38,42,50,.72) 100%);
}
/* 图上的胶囊：显示当前条目（对齐参考图左下角那颗胶囊） */
.v2-culture-chip{
  position:absolute; left:22px; bottom:22px; z-index:2;
  display:inline-flex; align-items:center; gap:10px; max-width:calc(100% - 44px);
  padding:8px 20px 8px 9px; border-radius:var(--v2-pill);
  background:rgba(10,12,16,.5); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  color:#fff; font-size:14px; font-weight:700; white-space:nowrap;
}
.v2-culture-chip i{
  width:26px; height:26px; border-radius:50%; background:var(--v2-brand); flex:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.v2-culture-chip i::after{ content:""; width:9px; height:9px; border:2px solid #fff; border-radius:2px; }

.v2-culture-body{ position:relative; padding:48px 72px 48px 52px; }
/* 面板里叠两层大椭圆色块 —— 左缘鼓出压到图片上，形成"图片 → 中调弧 → 深调弧"的三层过渡
   （参考图那种层次感的关键：不是直角对切，而是弧形叠压） */
/* 面板＝两块斜切色板，做出"照片 → 中调斜板 → 深调底"的层次：
   ① 中调斜板：左缘压住照片（第一道斜线），右缘与深色底交界（第二道斜线）
   形状上下各外扩 20%，斜线才会贯穿整张卡片。
   15° 斜切：360px 高的卡片上斜线水平跑约 100px 才读得出是"斜线"（8° 只有 25px，看着像垂直线）。 */
.v2-culture-body::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-20%; bottom:-20%; left:-80px; right:205px;
  transform:skewX(-15deg);
  background:
    radial-gradient(90% 130% at 26% 22%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(118deg,#3a4150 0%,#2c323d 50%,#242932 100%);
}
/* ② 深调区里再补一道极淡的斜向高光，避免右半边死板 */
.v2-culture-body::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-20%; bottom:-20%; left:430px; right:-190px;
  transform:skewX(-15deg);
  background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 68%);
}
/* 只定 top/left/right，高度由内容撑开 —— JS 才能量到真实内容高度 */
.v2-culture-item{
  position:absolute; top:48px; left:52px; right:72px; z-index:2;  /* 压在两层弧之上 */
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .45s var(--v2-ease), transform .55s var(--v2-ease), visibility .55s linear;
}
.v2-culture-item.is-active{ opacity:1; visibility:visible; transform:none; }
.v2-culture-item .ico{
  width:64px; height:64px; border-radius:50%; margin-bottom:22px; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}
.v2-culture-item .ico svg{ width:30px; height:30px; }
.v2-culture-item h3{ font-size:22px; font-weight:900; letter-spacing:.02em; color:var(--v2-brand); margin:0 0 16px; }
.v2-culture-item p{ color:rgba(244,245,247,.74); font-size:15px; line-height:1.95; margin:0; max-width:520px; }

/* 卡片下方：关于禄存科技（居中标题 + 两端对齐正文，字号放大到正文级） */
.v2-about-intro{ text-align:center; max-width:1020px; margin:64px auto 0; }
.v2-about-intro h3{
  font-size:clamp(28px,3.2vw,38px); font-weight:900; color:var(--v2-ink);
  letter-spacing:.01em; line-height:1.3; margin:0 0 24px;
}
.v2-about-intro h3 .accent{ color:var(--v2-brand); }
/* 中文长段落用两端对齐，右侧不会出现参差的锯齿；字号 16.5px / 行高 1.95 才够舒展 */
.v2-about-intro p{
  font-size:16.5px; line-height:1.95; color:var(--v2-ink-2); margin:0 0 18px;
  text-align:justify; text-justify:inter-ideograph;
}
/* 2026-09-24 合并：4 项「图标 + 数字」栅格挂在这里。
   原来占这个位置的是 `.v2-ab-stats`（2 项纯文字数字条：20+年技术沉淀 / 20+行业应用），
   已随本次合并撤销 —— 连同 .v2-ab-stats 自己的那组规则一起删掉了。
   这里只补「与上下段落之间的呼吸」，其余（列数、图标、字号）全部复用全局 .v2-stat。 */
.v2-about-intro .v2-stats-grid{ margin:38px 0 34px; }
/* ★ 标签颜色**不在这里覆盖**：合并后标签走全局 `.v2-stat .lbl{color:var(--v2-ink-2)}`
   （#565660），打在 .v2-culture 的浅灰底 #f6f6f8 上是 6.71:1，过 WCAG AA。
   ★ 历史提醒（2026-09-18）：原先那条 13px 小字用的是 --v2-ink-3（#9a9aa2），
     同一底色下只有 **2.59:1**，远低于 4.5:1 —— 截图看着"灰得挺高级"，其实读不出来。
     但**别**为了这个去改全局 --v2-ink-3：它在页脚、面包屑那里是当"装饰性弱化"用的，
     整站一起加深会把层次感抹平。要修就一处一处修，每处都拿真实底色量一遍。 */

/* 右侧竖排圆点 */
.v2-culture-dots{
  position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; gap:14px;
}
/* 圆点：把 <span> 撑满整个 <button>，让浏览器的默认焦点环被实心 span 完全遮住。
   之前反复出现"红框/橙环"，根本原因是 Edge/Windows 的焦点指示器画在 button 边界，
   而 span 只有 8px，周围一圈 button 区域露出来，形成了空心环。
   现在 span 非激活态也是 18px 的半透明灰圆，激活态为 18px 实心橙圆，
   焦点环即使存在也会被 span 盖住，从根源上消除红框。
   非激活态用冷灰、低透明度，避免在暖色背景上被读成粉/橙色。 */
.v2-culture-dot,
.v2-culture-dot:focus,
.v2-culture-dot:focus-visible,
.v2-culture-dot:active,
.v2-culture-dot.is-active,
.v2-culture-dot:hover{
  width:18px; height:18px; padding:0; margin:0;
  border:0 !important; background:none; box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  border-radius:50%;
  outline:none !important;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
.v2-culture-dot span,
.v2-culture-dot:focus span,
.v2-culture-dot:focus-visible span,
.v2-culture-dot:active span,
.v2-culture-dot.is-active span,
.v2-culture-dot:hover span{
  display:block; width:100%; height:100%; border-radius:50%;
  background:rgba(190,196,208,.42); border:0 !important; box-shadow:none !important;
  transition:background .3s var(--v2-ease), opacity .3s var(--v2-ease);
}
/* hover 不再改颜色，保持非激活态统一为冷灰，避免出现第三种颜色 */
.v2-culture-dot:hover span{ background:rgba(190,196,208,.42); }
.v2-culture-dot.is-active span{ background:var(--v2-brand); opacity:1; }

/* ★★ 已废弃（2026-09-24）：`.v2-ab-stats` 是首页「关于禄存科技」原来那条 2 项纯文字
   数字条（20+年技术沉淀 / 20+行业应用）。本次合并把它换成了 `.v2-stats-grid`
   那套「图标 + 数字」，所以这里**只剩说明、没有规则**了。
   —— 之所以留着这段说明：关于页 /Home/About 上那条**紧贴首屏的深色数据带**叫
   `.v2-ab-band`，两者名字很像。2026-09-18 就因为重名出过事：那边一条无作用域的
   `background:#0f1014` 把首页这条染成黑底，而首页作用域里的 ink 色优先级更高
   ⇒ 变成「黑底深字」，整条完全读不出来（截图看着像"被压暗了"，其实是文字颜色输给了背景）。
   ⇒ 教训仍有效：**新写类名前，先在整份 v2.css 与全部视图里搜一遍再决定叫什么。** */

/* ============================================================================
   产品（圆角卡片）
   ============================================================================ */
.v2-products{ padding:96px 0; background:#fff; }
.v2-prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.v2-prod-card{
  background:#fff; border:1px solid var(--v2-line); border-radius:var(--v2-r-lg); overflow:hidden;
  display:block; transition:transform .3s var(--v2-ease),box-shadow .3s,border-color .3s;
}
.v2-prod-card:hover{ transform:translateY(-6px); box-shadow:var(--v2-shadow-card); border-color:rgba(232,102,15,.45); }
/* ★ 2026-10-10：与产品中心页 .v2-pg-card-media 对齐。
   原图是竖版白底、产品只占中间一小条，用 contain 会把整张图（含大片白边）塞进来，
   产品显得极小 —— 这就是"看着没填满"的根因。
   改用 cover：图片放大铺满容器，上下多出来的白边被裁掉，产品占比大幅提升。
   padding 归零，让图直接铺满。 */
.v2-prod-media{ background:var(--v2-bg-soft); aspect-ratio:4/3; overflow:hidden; }
.v2-prod-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--v2-ease); }
.v2-prod-card:hover .v2-prod-media img{ transform:scale(1.06); }
.v2-prod-info{ padding:24px 26px 28px; }
.v2-prod-info .model{ font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--v2-brand); text-transform:uppercase; }
.v2-prod-info h4{ font-size:18px; font-weight:700; color:var(--v2-ink); margin:8px 0 8px; }
.v2-prod-info p{ font-size:13px; color:var(--v2-ink-2); margin:0; }
.v2-prod-info .go{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13px; font-weight:700; color:var(--v2-ink-3); transition:color .2s,gap .2s; }
.v2-prod-card:hover .go{ color:var(--v2-brand); gap:10px; }

/* ============================================================================
   应用行业（圆角图像卡）
   ============================================================================ */
.v2-indus{ padding:96px 0; background:var(--v2-bg-soft); }
.v2-indus-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.v2-indus-card{ position:relative; border-radius:var(--v2-r-lg); overflow:hidden; aspect-ratio:3/4; display:block; }
.v2-indus-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--v2-ease); }
.v2-indus-card:hover img{ transform:scale(1.07); }
.v2-indus-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(15,16,20,.8) 0%,transparent 55%); }
/* 后台没传图时的兜底：给一块深色渐层，配上 ::after 的压暗，标题依然读得出来。
   比"显示一张默认配图"诚实 —— 不会让人误以为这就是该领域的实拍。 */
.v2-indus-card.noimg{ background:linear-gradient(150deg,#2b313b 0%,#15181e 100%); }
.v2-indus-info{ position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:2; color:#fff; }
.v2-indus-info .en{ font-size:11px; font-weight:700; letter-spacing:.16em; color:rgba(255,255,255,.72); text-transform:uppercase; }
.v2-indus-info h4{ font-size:19px; font-weight:700; margin:6px 0 0; }
.v2-indus-info .plus{
  position:absolute; right:18px; bottom:18px; width:32px; height:32px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; transition:all .3s var(--v2-ease);
}
.v2-indus-card:hover .plus{ background:var(--v2-brand); border-color:var(--v2-brand); transform:rotate(90deg); }

/* ============================================================================
   新闻
   ============================================================================ */
.v2-news{ padding:96px 0; background:#fff; }
.v2-news-layout{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; }
.v2-news-feat{ position:relative; border-radius:var(--v2-r-lg); overflow:hidden; min-height:400px; display:block; }
.v2-news-feat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--v2-ease); }
.v2-news-feat:hover img{ transform:scale(1.05); }
.v2-news-feat::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(15,16,20,.86),transparent 55%); }
.v2-news-feat .nf{ position:absolute; left:0; right:0; bottom:0; padding:30px; z-index:2; color:#fff; }
.v2-news-feat .nf-tag{ display:inline-block; font-size:12px; font-weight:700; background:var(--v2-brand); padding:5px 14px; border-radius:var(--v2-pill); }
.v2-news-feat h3{ font-size:23px; font-weight:900; margin:14px 0 8px; line-height:1.35; }
.v2-news-feat .nf-date{ font-size:13px; color:rgba(255,255,255,.72); }
.v2-news-item{ display:flex; gap:22px; padding:24px 10px; border-bottom:1px solid var(--v2-line); transition:background .25s,padding-left .25s var(--v2-ease); }
.v2-news-item:first-child{ padding-top:4px; }
.v2-news-item:hover{ background:var(--v2-bg-soft); padding-left:20px; border-radius:10px; }
.v2-news-item .d{ flex:0 0 auto; text-align:center; }
.v2-news-item .d b{ display:block; font-size:26px; font-weight:900; color:var(--v2-brand); line-height:1; }
.v2-news-item .d span{ font-size:12px; color:var(--v2-ink-3); }
.v2-news-item h4{ font-size:16px; font-weight:700; color:var(--v2-ink); line-height:1.5; margin:0; transition:color .2s; }
.v2-news-item:hover h4{ color:var(--v2-brand); }
.v2-news-item p{ font-size:13px; color:var(--v2-ink-3); margin:6px 0 0; }

/* ============================================================================
   荣誉客户
   ============================================================================ */
.v2-clients{ padding:80px 0; background:var(--v2-bg-soft); text-align:center; }
.v2-clients .v2-title{ font-size:26px; }
.v2-client-logos{ display:flex; justify-content:center; align-items:center; gap:70px; margin-top:44px; flex-wrap:wrap; }
/* ★ 2026-09-20：原为「常驻灰度 + 60% 透明，鼠标移上去才恢复彩色」。
   用户要求「用彩色的，不要鼠标移动到才有颜色」—— 理由站得住：
   ① 客户 LOGO 本身就是品牌资产，摆上来就是给人看的，藏起来等于白放；
   ② 一排灰度块让整个区块显得灰扑扑，与 v2 的暖色基调也冲突；
   ③ 「hover 才上色」在触屏上根本不存在（没有 hover），手机上永远看到的是灰的。
   现在常驻彩色、满不透明，hover 只留一个极轻微的放大作为「这里可以点」的反馈。 */
.v2-client-logos img{ height:44px; width:auto; opacity:1; transition:transform .3s var(--v2-ease); }
.v2-client-logos img:hover{ transform:scale(1.06); }

/* 没有上传 LOGO 的客户 → 直接显示客户名文字。
   ★ 为什么不给一个默认占位图：客户表允许只填名字（后台可以先录数据、LOGO 后补），
     占位图会让首页显得像"图裂了"，而文字与 LOGO 在视觉重量上更接近。
   ★ 2026-09-20：LOGO 改常驻彩色后，这里的 60% 透明必须一起去掉 ——
     否则同一排里「彩色 LOGO + 灰淡文字」会让文字看起来像没加载出来。
     颜色同时由 --v2-ink-3（#9a9aa2，浅底约 2.6:1）换成 --v2-ink-2（#565660，约 7:1）：
     客户名是要被读的内容，不该沿用装饰性的浅灰。 */
.v2-client-logos .v2-client-name{
  font-size:17px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  color:var(--v2-ink-2); opacity:1; transition:color .3s var(--v2-ease);
}
.v2-client-logos .v2-client-name:hover{ color:var(--v2-ink); }

/* ============================================================================
   CTA
   ============================================================================ */
.v2-cta{
  padding:96px 0; color:#fff; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--v2-brand) 0%,var(--v2-brand-deep) 100%);
}
.v2-cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(40rem 24rem at 85% -20%,rgba(255,255,255,.16),transparent 60%); }
.v2-cta .v2-wrap{ position:relative; }
.v2-cta h2{ font-size:clamp(28px,3.6vw,42px); font-weight:900; line-height:1.2; margin:0; }
.v2-cta p{ color:rgba(255,255,255,.88); font-size:16px; max-width:520px; margin:18px auto 38px; }
.v2-cta .v2-ctas{ justify-content:center; }

/* ============================================================================
   页脚（浅灰多栏）
   ============================================================================ */
/* ★ 底色 --v2-bg-soft 比上一段（我们的位置，已改白）深一档，靠色差自然分界；
   上边线另加深一档（--v2-line 在白底上几乎看不见），让"页脚从这开始"更明确。 */
.v2-footer{ background:var(--v2-bg-soft); padding:70px 0 0; border-top:1px solid #e4e4ea; }
.v2-foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:50px; }
.v2-foot-brand .fb-name{ font-size:22px; font-weight:900; letter-spacing:.14em; color:var(--v2-ink); }
.v2-foot-brand .slogan{ font-size:13px; color:var(--v2-ink-3); margin:12px 0 22px; }
.v2-foot-brand .cline{ font-size:13px; color:var(--v2-ink-2); margin-bottom:10px; display:flex; gap:8px; }
.v2-foot-brand .cline b{ color:var(--v2-brand); font-weight:700; flex:0 0 auto; }
.v2-foot-col h5{ font-size:15px; font-weight:700; color:var(--v2-ink); margin:0 0 20px; }
.v2-foot-col a{ display:block; font-size:13px; color:var(--v2-ink-2); margin-bottom:12px; transition:color .2s; }
.v2-foot-col a:hover{ color:var(--v2-brand); }
.v2-foot-qr{ display:flex; gap:16px; margin-top:8px; }
.v2-foot-qr .qr{ width:78px; text-align:center; }
.v2-foot-qr .qr img{ width:78px; height:78px; border-radius:8px; border:1px solid var(--v2-line); }
.v2-foot-qr .qr span{ font-size:11px; color:var(--v2-ink-3); display:block; margin-top:6px; }
.v2-foot-bottom{ border-top:1px solid var(--v2-line); padding:22px 0; display:flex; justify-content:space-between; font-size:12px; color:var(--v2-ink-3); flex-wrap:wrap; gap:8px; }
.v2-foot-bottom a{ color:var(--v2-ink-3); }
.v2-foot-bottom a:hover{ color:var(--v2-brand); }
/* 页脚「友情链接」一行（2026-09-20 加，数据来自后台「友情链接」菜单）。
   ★ 这里刻意**不加**自己的 border-top：紧挨着的 .v2-foot-bottom 已经有一条分隔线，
     再加一条会变成两条线贴在一起（20px 内双线，看着像渲染出错）。
   ★ 没有任何可见链接时整块不渲染（见 Views/Shared/_FriendLinks.cshtml），
     所以不需要写空态样式。
   ★ 文字色用 --v2-ink-2(#565660) 而不是 --v2-ink-3(#9a9aa2)：
     --v2-ink-3 在本节底色 #f6f6f8 上只有 **2.59:1**（12px 正文要求 4.5:1），
     这一行是**可点的链接**、不是装饰性弱化文字；--v2-ink-2 是 **6.72:1**，
     而且正好与上面各栏的 .v2-foot-col a 同色，观感统一。 */
.v2-foot-links{ padding:0 0 18px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 10px; }
.v2-foot-links .k{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--v2-ink); letter-spacing:.04em; }
.v2-foot-links .k::after{ content:"："; }
.v2-foot-links .v{ display:flex; flex-wrap:wrap; gap:8px 20px; flex:1 1 auto; min-width:0; }
.v2-foot-links .v a{ font-size:12px; color:var(--v2-ink-2); transition:color .2s; }
.v2-foot-links .v a:hover{ color:var(--v2-brand); }

/* ============================================================================
   入场动效（滚动触发）
   ============================================================================ */
.v2-reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s var(--v2-ease),transform .6s var(--v2-ease); }
.v2-reveal.in{ opacity:1; transform:none; }
.v2-reveal[data-d="1"]{ transition-delay:90ms; }
.v2-reveal[data-d="2"]{ transition-delay:180ms; }
.v2-reveal[data-d="3"]{ transition-delay:270ms; }
.v2-reveal[data-d="4"]{ transition-delay:360ms; }

/* ============================================================================
   响应式
   ============================================================================ */
@media (max-width:1024px){
  .v2-wrap{ padding:0 24px; }
  /* ★ 第十二轮：与上面的 .v2-wrap 同步 —— 导航胶囊内边距必须跟着内容网格走，别只改一边 */
  .v2-nav-hero .v2-nav-inner{ padding-left:24px; padding-right:24px; }
  .v2-menu{ display:none; }
  .v2-burger{ display:flex; }
  .v2-nav .v2-menu{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; gap:0; padding:8px 0; box-shadow:0 20px 40px rgba(20,20,30,.12);
    display:none;
  }
  .v2-nav .v2-menu.v2-menu-open{ display:flex; }
  .v2-nav .v2-menu a{ padding:14px 28px; border-top:1px solid var(--v2-line); }
  /* ★ 2026-10-13：手机端展开的菜单里显示「联系我们」（桌面端由 .v2-nav-cta 承担，见上） */
  .v2-nav .v2-menu a.v2-menu-cta-m{ display:block !important; color:var(--v2-brand); font-weight:700; }
  /* mega menu 已移除 */
  .v2-stats-grid,.v2-indus-grid{ grid-template-columns:repeat(2,1fr); }
  .v2-feats-grid,.v2-prod-grid{ grid-template-columns:repeat(2,1fr); }
  /* 企业文化卡：改为上下堆叠，切换条目回到正常文档流（避免绝对定位被卡片裁切） */
  .v2-culture{ padding:72px 0 80px; }
  .v2-culture::before{ height:300px; }
  .v2-culture-head{ margin-bottom:44px; }
  .v2-culture-card{ grid-template-columns:1fr; min-height:0; }
  .v2-culture-photo{ min-height:260px; }
  .v2-culture-photo::after{ background:linear-gradient(180deg,rgba(38,42,50,0) 58%,rgba(38,42,50,.9) 100%); }
  /* 上下堆叠时斜切失去意义，直接去掉 */
  .v2-culture-body::before,.v2-culture-body::after{ display:none; }
  .v2-culture-body{ padding:36px 28px 8px; }
  .v2-culture-item{
    position:static; top:auto; left:auto; right:auto;
    display:none; opacity:1; visibility:visible; transform:none;
  }
  .v2-culture-item.is-active{ display:block; }
  .v2-culture-item p{ font-size:14px; }
  .v2-culture-dots{
    position:static; transform:none; flex-direction:row; justify-content:center;
    gap:12px; padding:26px 0 34px;
  }
  .v2-culture-dot{ width:14px; height:14px; }
  .v2-about-intro{ margin-top:44px; }
  .v2-about-intro .v2-stats-grid{ gap:18px 14px; margin:30px 0 28px; }
  .v2-news-layout{ grid-template-columns:1fr; }
  .v2-foot-grid{ grid-template-columns:repeat(2,1fr); }
  .v2-nav-cta{ display:none; }
}
@media (max-width:1200px) and (min-width:1025px){
  /* 4 张特性卡在中等宽度下排 2×2，避免每列过窄导致文字频繁折行 */
  .v2-feats-grid{ grid-template-columns:repeat(2,1fr); gap:40px; }
}
@media (max-width:1100px) and (min-width:1025px){
  /* mega menu 已移除 */
}
@media (max-width:600px){
  .v2-wrap{ padding:0 18px; }
  .v2-sec{ padding:72px 0; }
  .v2-stats-grid,.v2-feats-grid,.v2-prod-grid,.v2-indus-grid,.v2-foot-grid{ grid-template-columns:1fr; }
  .v2-hero{ min-height:540px; }
  .v2-arrow{ display:none !important; }
  /* ★ 第十二轮：导航与 .v2-wrap 同步。手机端胶囊几乎占满宽度，有意义的对齐面是
     「胶囊外沿」而不是 LOGO —— 所以外层胶袋取 18px（== 内容网格的 padding），
     LOGO 再往里缩 18px，保留胶囊自身的呼吸感。 */
  .v2-nav-hero{ padding:14px 18px; }
  .v2-nav-hero .v2-nav-inner{ padding-left:18px; padding-right:18px; }
  .v2-culture-body{ padding:32px 22px 4px; }
  .v2-culture-photo{ min-height:210px; }
  .v2-culture-item h3{ font-size:19px; }
  .v2-about-intro{ margin-top:36px; }
  .v2-about-intro p{ font-size:15px; }
  .v2-about-intro .v2-btn{ width:100%; justify-content:center; }
}

/* ============================================================================
   动效降级
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  .v2-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .v2-hero-inner > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  .v2-slide-bg{ transform:none !important; transition:none !important; }
  .v2-culture-item{ transition:opacity .01s linear !important; transform:none !important; }
  .v2-pg-track{ animation:none !important; }
  .v2-pg-scroll{ animation:none !important; }
}

/* ============================================================================
   产品中心页（v2-pg- 前缀 · 独立命名空间，避免与首页样式冲突）
   结构对应效果图 product-page-v10-mockup.html
   ============================================================================ */
.v2-pg{ background:var(--v2-bg); overflow-x:hidden; }
.v2-pg-wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 40px; }

/* ---------- Hero：整块就是一张背景海报图 ----------
   ★ 唯一替换点：images/v2/product-hero.jpg
     把做好的「产品全家福」海报覆盖这个文件即可，不用改任何代码或样式。
     建议尺寸 ≥ 2560×1300（宽高比 2:1 左右），产品横向排开、主体居中。
     铺满策略是 object-fit:cover —— 窄屏会裁掉左右两侧，所以重要内容别贴边。 */
.v2-pg-hero{
  position:relative; height:100vh; min-height:560px;
  overflow:hidden; background:#0a0a0a;
}
.v2-pg-hero-bg{ position:absolute; inset:0; }
.v2-pg-hero-bg img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* 底部一层很淡的暗角：海报偏浅色时，滚动箭头也还能看清 */
.v2-pg-hero-bg::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:190px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.38));
  pointer-events:none;
}
/* 海报文件还没放进去时显示的占位提示（放图后自动消失） */
.v2-pg-hero-empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:0 24px; text-align:center;
  background:
    radial-gradient(1180px 660px at 50% 40%, rgba(232,102,15,.18) 0%, rgba(232,102,15,0) 66%),
    linear-gradient(180deg,#0d0e11 0%,#141619 50%,#0a0b0d 100%);
}
.v2-pg-hero-empty b{ font-size:18px; font-weight:600; color:rgba(255,255,255,.74); letter-spacing:.02em; }
.v2-pg-hero-empty span{ font-size:14px; line-height:1.8; color:rgba(255,255,255,.46); }
.v2-pg-scroll{
  position:absolute; left:50%; bottom:34px; z-index:3;
  transform:translateX(-50%);
  color:rgba(255,255,255,.62); text-decoration:none;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
  animation:v2-pg-bob 2.4s var(--v2-ease) infinite;
}
@keyframes v2-pg-bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,9px); } }

/* ---------- 页头文案 + 指标 ---------- */
/* 下 padding 2026-09-24 由 0 改为 104px：原本这块靠 .v2-pg-metrics 的 72px 下 padding 收尾，
   产品页移除指标行后，白底区底部就会直接"贴"住灰底的目录区（灰白分界线紧挨标题）。
   本类只被产品页使用（关于页/案例页用的是 .v2-pg-metrics 自己那一套，不走这里）。 */
.v2-pg-intro{ background:#fff; padding:104px 0 104px; }
.v2-pg-intro-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.v2-pg-intro-top .v2-title{ font-size:clamp(34px,3.9vw,54px); letter-spacing:-.02em; margin-bottom:16px; }
.v2-pg-sub{ font-size:17px; line-height:1.8; color:var(--v2-ink-2); margin:0; max-width:620px; }
.v2-pg-crumb{ font-size:14px; color:var(--v2-ink-3); }
.v2-pg-crumb a:hover{ color:var(--v2-brand); }
.v2-pg-crumb b{ color:var(--v2-ink); font-weight:600; }
.v2-pg-metrics{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:64px 0 72px; margin-top:56px; border-bottom:1px solid var(--v2-line);
}
.v2-pg-metric{ padding:0 36px; border-left:1px solid var(--v2-line); }
.v2-pg-metric:first-child{ border-left:0; padding-left:0; }
.v2-pg-metric-num{
  display:flex; align-items:baseline; gap:4px;
  font-family:var(--v2-mono); font-weight:600; letter-spacing:-.045em;
  font-size:clamp(34px,3.8vw,54px); line-height:1; color:var(--v2-ink);
}
.v2-pg-metric-num small{ font-size:.4em; font-weight:500; letter-spacing:0; color:var(--v2-ink-3); }
.v2-pg-metric-num .up{ color:var(--v2-brand); }
.v2-pg-metric-label{ margin-top:14px; font-size:15px; color:var(--v2-ink-2); }

/* ---------- 产品目录 ---------- */
.v2-pg-catalog{ background:var(--v2-bg-soft); padding:104px 0 122px; }
.v2-pg-catalog-head{ margin-bottom:42px; }
.v2-pg-filter{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:30px; }

/* 分类 Tab：由后台产品数据自动汇总，数量不固定 */
.v2-pg-tabs{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.v2-pg-tab{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 22px; border-radius:var(--v2-pill);
  background:#fff; border:1px solid var(--v2-line);
  font-size:15px; color:var(--v2-ink-2); text-decoration:none; white-space:nowrap;
  transition:background .3s var(--v2-ease), color .3s var(--v2-ease),
             border-color .3s var(--v2-ease), box-shadow .3s var(--v2-ease);
}
.v2-pg-tab:hover{ color:var(--v2-ink); border-color:rgba(0,0,0,.2); }
.v2-pg-tab em{ font-style:normal; font-family:var(--v2-mono); font-size:12px; color:var(--v2-ink-3); transition:color .3s var(--v2-ease); }
.v2-pg-tab.on{ background:var(--v2-ink); color:#fff; border-color:var(--v2-ink); box-shadow:0 8px 20px rgba(0,0,0,.14); }
.v2-pg-tab.on em{ color:rgba(255,255,255,.6); }

/* 搜索 */
.v2-pg-search{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.v2-pg-search input{
  width:230px; height:42px; padding:0 20px; border-radius:var(--v2-pill);
  border:1px solid var(--v2-line); background:#fff; color:var(--v2-ink);
  font-size:15px; font-family:var(--v2-font); outline:none;
  transition:border-color .3s var(--v2-ease), box-shadow .3s var(--v2-ease);
}
.v2-pg-search input::placeholder{ color:var(--v2-ink-3); }
.v2-pg-search input:focus{ border-color:var(--v2-brand); box-shadow:0 0 0 4px var(--v2-brand-tint); }
.v2-pg-search button{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--v2-ink); color:#fff; display:grid; place-items:center;
  transition:background .3s var(--v2-ease);
}
.v2-pg-search button:hover{ background:var(--v2-brand); }

.v2-pg-count{ font-size:14px; color:var(--v2-ink-3); margin:0 0 22px; }
.v2-pg-count b{ color:var(--v2-ink); font-weight:600; }
.v2-pg-tip{ margin-left:12px; }
.v2-pg-tip .badge{
  display:inline-block; padding:3px 10px; margin-right:6px; border-radius:var(--v2-pill);
  background:var(--v2-brand-tint); color:var(--v2-brand); font-size:13px;
}
.v2-pg-tip a{ color:var(--v2-ink-2); text-decoration:underline; margin-left:6px; }

/* 产品卡：极简 —— 图 + 名称 + 右上角箭头 */
/* ★ 2026-10-10：桌面端由 4 列改为 3 列。
   原因：产品图是竖版、产品主体占比小，4 列时每张卡只有约 1/4 行宽，
   图被压得很小 —— 与首页 3 列的 .v2-prod-grid 观感不一致（首页明显更饱满）。
   改 3 列后卡片宽度 +1/3，图片随之放大，两个列表终于同款。
   ⚠ 其它断点（≤某宽度转 2 列 / 1 列）保持不变，见下方 media query。 */
.v2-pg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.v2-pg-card{
  position:relative; display:block; text-decoration:none;
  background:#fff; border-radius:22px; overflow:hidden;
  transition:transform .55s var(--v2-ease), box-shadow .55s var(--v2-ease);
}
.v2-pg-card:hover{ transform:translateY(-6px); box-shadow:0 26px 58px rgba(0,0,0,.1); }
/* 产品图区：同样因为原图是竖版，改用 cover 裁掉上下大片白底，
   产品在卡片里占的比重大幅提升；padding 归零让图直接铺满 */
.v2-pg-card-media{
  position:relative; aspect-ratio:4/3; background:#fff; overflow:hidden;
}
.v2-pg-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--v2-ease); }
.v2-pg-card:hover .v2-pg-card-media img{ transform:scale(1.06); }
.v2-pg-card-arrow{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; color:var(--v2-ink-3);
  background:rgba(0,0,0,.035);
  transition:background .35s var(--v2-ease), color .35s var(--v2-ease), transform .45s var(--v2-ease);
}
.v2-pg-card:hover .v2-pg-card-arrow{ background:var(--v2-brand); color:#fff; transform:rotate(-45deg); }
.v2-pg-card-body{ padding:22px 22px 26px; }
.v2-pg-card-name{
  font-size:17px; font-weight:600; letter-spacing:-.012em;
  color:var(--v2-ink); margin:0; line-height:1.4;
}
.v2-pg-empty{ padding:80px 0; text-align:center; color:var(--v2-ink-2); font-size:15px; }

/* 分页 */
.v2-pg-pager{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:56px; }
.v2-pg-pager a, .v2-pg-pager span{
  min-width:44px; height:44px; padding:0 16px; border-radius:var(--v2-pill);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; text-decoration:none; background:#fff; color:var(--v2-ink-2);
  border:1px solid var(--v2-line);
  transition:background .3s var(--v2-ease), color .3s var(--v2-ease), border-color .3s var(--v2-ease);
}
.v2-pg-pager a:hover{ border-color:var(--v2-ink); color:var(--v2-ink); }
.v2-pg-pager .on{ background:var(--v2-ink); border-color:var(--v2-ink); color:#fff; }
.v2-pg-pager .off{ opacity:.42; }
.v2-pg-pager .dots{ background:none; border:0; min-width:auto; padding:0 4px; }

/* ---------- 系列区块 ---------- */
.v2-pg-series{ position:relative; overflow:hidden; padding:124px 0; background:#fff; }
.v2-pg-series.v2-pg-dark{ background:#0a0a0a; }
/* 深色章节里的文字必须整体翻白。
   ⚠ 踩坑：.v2-title 写死 color:var(--v2-ink)（近黑），直接放进 .v2-pg-dark 会变成
   「黑字压黑底」→ 标题几乎不可见。深色章节内所有文本色都要在这里显式覆盖。 */
.v2-pg-dark .v2-title{ color:#fff; }
.v2-pg-dark .v2-eyebrow{ color:var(--v2-brand); }
.v2-pg-series-head{ max-width:760px; margin-bottom:70px; }
.v2-pg-idx{
  display:flex; align-items:center; gap:14px;
  font-family:var(--v2-mono); font-size:13px; letter-spacing:.2em;
  color:var(--v2-brand); margin:0 0 20px;
}
.v2-pg-idx::after{ content:""; width:52px; height:1px; background:currentColor; opacity:.4; }
.v2-pg-patent{
  position:absolute; top:40px; right:-14px; z-index:0;
  font-family:var(--v2-mono); font-weight:600; letter-spacing:-.06em; line-height:1;
  font-size:clamp(144px,20vw,272px); color:transparent;
  -webkit-text-stroke:1px rgba(0,0,0,.05); pointer-events:none; user-select:none;
}
.v2-pg-dark .v2-pg-patent{ -webkit-text-stroke:1px rgba(255,255,255,.07); }
.v2-pg-cols{ position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr; gap:72px; align-items:center; }
.v2-pg-dark .v2-pg-cols{ grid-template-columns:.94fr 1.06fr; }
.v2-pg-dark .v2-pg-photo{ order:2; }
.v2-pg-dark .v2-pg-copy{ order:1; }
.v2-pg-photo{
  position:relative; border-radius:28px; overflow:hidden; aspect-ratio:5/4;
  background:var(--v2-bg-soft); display:flex; align-items:center; justify-content:center;
}
.v2-pg-photo img{ width:100%; height:100%; object-fit:cover; }
.v2-pg-dark .v2-pg-photo{ background:#131417; }
.v2-pg-lede{ font-size:17px; line-height:1.85; color:var(--v2-ink-2); margin:0; max-width:620px; }
.v2-pg-copy .v2-pg-lede{ margin-bottom:40px; }
.v2-pg-dark .v2-pg-lede{ color:rgba(255,255,255,.72); }
.v2-pg-points{ display:flex; flex-direction:column; }
.v2-pg-point{ display:flex; gap:18px; padding:23px 0; border-top:1px solid var(--v2-line); }
.v2-pg-dark .v2-pg-point{ border-top-color:rgba(255,255,255,.12); }
.v2-pg-point:last-child{ border-bottom:1px solid var(--v2-line); }
.v2-pg-dark .v2-pg-point:last-child{ border-bottom-color:rgba(255,255,255,.12); }
.v2-pg-point-ico{
  flex:0 0 40px; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; background:var(--v2-brand-tint); color:var(--v2-brand);
}
.v2-pg-dark .v2-pg-point-ico{ background:rgba(232,102,15,.16); }
.v2-pg-point-ico svg{ width:20px; height:20px; }
.v2-pg-point b{ display:block; font-size:16px; font-weight:600; color:var(--v2-ink); margin-bottom:4px; }
.v2-pg-dark .v2-pg-point b{ color:#fff; }
.v2-pg-point p{ margin:0; font-size:15px; line-height:1.7; color:var(--v2-ink-2); }
.v2-pg-dark .v2-pg-point p{ color:rgba(255,255,255,.66); }
.v2-pg-series-cta{ margin-top:40px; }

/* ---------- 弹幕（双向对开 · 无缝循环） ---------- */
.v2-pg-danmu{
  position:relative; z-index:1; margin-top:80px; padding:32px 0;
  background:#f2f2f6; border-radius:22px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.v2-pg-dark .v2-pg-danmu{ background:rgba(255,255,255,.04); }
.v2-pg-drow{ display:flex; width:max-content; }
.v2-pg-drow + .v2-pg-drow{ margin-top:16px; }
.v2-pg-track{ display:flex; gap:14px; padding-right:14px; animation:v2-pg-sl 34s linear infinite; }
.v2-pg-drow.rev .v2-pg-track{ animation-name:v2-pg-sr; animation-duration:40s; }
.v2-pg-danmu:hover .v2-pg-track{ animation-play-state:paused; }
/* 无缝循环：每行放两个内容完全相同的 .v2-pg-track 并排，
   整体平移自身宽度 100%（= 第二个轨道的起点）后复位，视觉上完全连续 */
@keyframes v2-pg-sl{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
@keyframes v2-pg-sr{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
.v2-pg-chip{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  height:50px; padding:0 28px; border-radius:var(--v2-pill);
  font-size:16px; font-weight:500;
}
.v2-pg-chip i{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; flex:0 0 auto; }
.v2-pg-chip.fill{ background:var(--v2-brand); color:#fff; box-shadow:0 10px 26px rgba(232,102,15,.3); }
/* 浅底章节里的第二种胶囊原本是 #ecedef 淡灰，压在浅色带上几乎看不见。
   改成「墨黑底 + 白字」，和橙色胶囊形成高对比的交替节奏，
   正好对应深色章节里的「橙 / 白」组合 —— 两处弹幕的视觉力度一致。 */
.v2-pg-chip.line{ background:#1d1d1f; color:#fff; }
.v2-pg-dark .v2-pg-chip.line{ background:#fff; color:#0a0a0a; }
.v2-pg-dark .v2-pg-chip.fill{ box-shadow:0 10px 30px rgba(232,102,15,.42); }

/* ---------- 全幅图（⚠ 2026-09-24 起全站无使用方）----------
   产品页已按需求移除「从单机测试到全线联网」区块，全站再无 .v2-pg-visual / .v2-pg-band。
   规则**保留**而不是删掉：它是一整套自洽的"全幅图文带"组件（圆角容器 + 背景图 + 压暗层 +
   左下文案），将来别的页面要复用直接拿即可。改它之前先确认确实要复活这个区块。 */
.v2-pg-visual{ padding:0 0 122px; background:var(--v2-bg-soft); }
.v2-pg-band{
  position:relative; height:500px; border-radius:28px; overflow:hidden;
  display:flex; align-items:flex-end; padding:60px;
  background:linear-gradient(135deg,#1a1c20 0%,#26292f 48%,#15171a 100%);
}
.v2-pg-band-img{ position:absolute; inset:0; }
.v2-pg-band-img img{ width:100%; height:100%; object-fit:cover; }
.v2-pg-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,11,13,.86) 0%,rgba(10,11,13,.5) 52%,rgba(10,11,13,.24) 100%),
             radial-gradient(760px 400px at 82% 18%, rgba(232,102,15,.24), transparent 66%);
}
.v2-pg-band-copy{ position:relative; z-index:2; max-width:560px; }
.v2-pg-band-copy h2{ color:#fff; margin-bottom:12px; }
.v2-pg-band-copy p{ margin:0; color:rgba(255,255,255,.62); font-size:16px; }

/* ---------- 底部 CTA ---------- */
.v2-pg-cta{ background:#fff; padding:122px 0; border-top:1px solid var(--v2-line); text-align:center; }
.v2-pg-cta .v2-title{ margin-bottom:16px; }
.v2-pg-cta p{ font-size:17px; color:var(--v2-ink-2); margin:0 auto 40px; max-width:620px; }
.v2-pg-cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.v2-pg-cta-note{ margin:32px 0 0 !important; font-size:14px !important; color:var(--v2-ink-3) !important; }

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .v2-pg-wrap{ padding:0 28px; }
  .v2-pg-grid{ grid-template-columns:repeat(3,1fr); }
  .v2-pg-cols, .v2-pg-dark .v2-pg-cols{ grid-template-columns:1fr; gap:50px; }
  .v2-pg-dark .v2-pg-photo, .v2-pg-dark .v2-pg-copy{ order:0; }
  .v2-pg-metrics{ grid-template-columns:repeat(2,1fr); gap:42px 0; }
  .v2-pg-metric:nth-child(3){ border-left:0; padding-left:0; }
}
@media (max-width:760px){
  .v2-pg-wrap{ padding:0 20px; }
  /* ★ 2026-10-13：手机端首屏不再用固定的 78vh。
     原 78vh 在竖屏手机上很高，而 hero 海报是横版 —— object-fit:cover 会裁掉两侧，
     海报主体与观感都"没自适应"。
     改为**宽度驱动**：aspect-ratio 跟海报接近（16:10），高度随屏宽等比收缩。
     min-height 兜住文字层：.v2-hero-inner 是 height:100% + 垂直居中（非绝对定位），
     高度一旦小于文字内容就会溢出，所以留一个下限（约等于标题+副文+按钮的最小占位）。 */
  .v2-pg-hero{ height:auto; aspect-ratio:16/10; min-height:380px; }
  .v2-pg-hero-bg::after{ height:130px; }
  .v2-pg-intro{ padding-top:74px; }
  .v2-pg-metrics{ padding:52px 0; margin-top:40px; }
  .v2-pg-metric{ padding:0 22px; }
  .v2-pg-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .v2-pg-card-body{ padding:16px 16px 18px; }
  .v2-pg-card-name{ font-size:15px; }
  .v2-pg-catalog{ padding:74px 0; }
  .v2-pg-series{ padding:82px 0; }
  .v2-pg-search{ margin-left:0; width:100%; }
  .v2-pg-search input{ flex:1; width:auto; }
  .v2-pg-band{ height:360px; padding:32px; border-radius:20px; }
  .v2-pg-danmu{ padding:24px 0; }
  .v2-pg-chip{ height:44px; padding:0 22px; font-size:15px; }
  .v2-pg-drow + .v2-pg-drow{ margin-top:12px; }
  .v2-pg-cta{ padding:82px 0; }
}
@media (max-width:480px){
  .v2-pg-grid{ grid-template-columns:1fr; }
  /* ★ 2026-10-13：≤480px 时海报更窄、aspect-ratio 算出的高度更矮，
     min-height 兜住文字层不被压扁（比 760 断点的 380px 略高，因为小屏文字换行更多）。 */
  .v2-pg-hero{ min-height:400px; }
}


/* ============================================================================

   产品明细页（ProductDetail）专属样式 —— 由设计稿 product-detail-v2.html 提取

   ★ 只在此处放 pd-* 与首屏 --hero-* token；公共类（v2-wrap/v2-btn/v2-title/

     v2-eyebrow/v2-divider/v2-sub/v2-reveal）一律沿用 v2.css 上方已有定义，不重复声明，

     否则会覆盖全站其它页面。

   ★ 全部展示内容由 View 从 Model 绑定，这里不含任何产品相关的字面量。

   ============================================================================ */

/* 首屏「水波纹」配色与圆心 —— 收敛到 .pd-hero 作用域，避免污染全站 */

.pd-hero{
  --hero-ink:#04070c;            /* 底色：近黑墨 */
  --hero-core:44,104,168;        /* 中心辉光 RGB（冷蓝，把右上的产品区提亮） */
  --hero-ripple:88,180,255;      /* 波纹 RGB */
  --hero-ripple-cx:74.8%;        /* 波纹圆心（图层盒内百分比）—— 见下方"圆心坐标换算" */
  --hero-ripple-cy:42.3%;
  --hero-link:#F7893F;
}


.v2-dash{
width:38px; height:3px; border-radius:2px; background:var(--v2-brand); margin-top:20px;
}


/* 章节序号 /01 /02 —— 编辑设计感 */
.v2-idx{
font-family:var(--v2-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.1em; color:var(--v2-ink-3); margin-left:4px;
}


.v2-btn-sm{
padding:10px 22px; font-size:14px;
}


/* ============================================================================
   1 · 首屏
   ========================================================================== */
/* 首屏 —— 深色「水面」+ 同心水波纹 + 磨砂玻璃产品面板
   （参考 GoodWe 深色产品页：安静的水面纹理铺满首屏，产品放进玻璃面板，
     左侧只留产品名 + 一行规格 + 两条小字链）

   背景由三层叠出来，全部是 CSS，没有图片：
     ① .pd-hero-bg    底色：深墨 + 右上角一团冷光（水面被光打亮的一侧）
     ② .pd-hero-ripple 波纹带：同心圆环，缓慢"呼吸"扩散 → 水波在动
     ③ .pd-hero-veil  暗幕：左侧压暗给白字让位 + 顶部承接导航 + 四角暗角
   ★ 产品单独一层 .pd-hero-prod（透明底 PNG），不烤进背景
     → 后台换 Model.ImageUrl 就能换产品，背景不用动。 */
.pd-hero{
position:relative; z-index:0; overflow:hidden;
  /* 把绘制范围锁死在首屏内：合成器据此可以做剔除，
     滚动时不必重绘整棵子树（对 2 倍视口大的波纹层尤其有意义）。 */
  contain:paint;
  min-height:100vh; padding:0 0 56px;
  display:flex; flex-direction:column;
  background:var(--hero-ink); color:#fff;
}


/* ① 底色 + 中心辉光：水面右侧被"光"打亮，左侧留在暗处。
   ★ 辉光别调太亮：它是一大团低频渐变，压过波纹之后整屏就只剩"雾"。
     早先 .42/.20/.07 时波纹几乎被埋掉，现在收到 .26/.10/.03。 */
.pd-hero-bg{
position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(108% 92% at 72% 48%,
      rgba(var(--hero-core),.26) 0%,
      rgba(var(--hero-core),.10) 28%,
      rgba(var(--hero-core),.03) 48%,
      transparent 64%),
    var(--hero-ink);
}


/* ② 水波纹：同心光带。
   · 用 repeating-radial-gradient 一个渐变就画出无限条环（不用叠 N 个 div）
   · ★ 关键是「暗带要宽、亮线要窄」：色标写成 0 →(长)0 →(短)峰值 →(中)0，
     也就是大部分半径是平的暗水面，只在某个半径上冒出一条亮线。
     早先写成简单的 0→峰值→0（等腰三角）插值，过渡带占到整个周期的一半，
     出来是一片模模糊糊的蓝雾 —— 用户反馈「水波纹特效怎么没有」就是这个原因。
   · 两层不同波长（300px / 190px）叠加 → 有干涉感，避免机械等距。
     波长要"大而少"：一个视口里 5~7 道才叫水波，十几道就成了催眠螺旋。
   · 波纹层整体倾斜 -13°（水面像被斜视，环就变成"斜向扫过的椭圆弧"）；
     纵向压扁 0.62 改由渐变的 ellipse 半径承担，不再用 scale ——
     这一处正是「一滑动波纹就没了」的根因，详见下方 .pd-hero-ripple 注释。
   · ★ 图层必须比首屏大，旋转后四角才不会露硬斜边；但"多大才够"是算出来的，
     不是拍脑袋的常量。约束：首屏四角经 M⁻¹ = S⁻¹R⁻¹ 映射后仍须落在图层盒内。
     早先认为 inset:-70%（2.4 倍）足够 —— 实测**不够**：1440×900 要 1.59 倍、
     2560×1080 要 1.97 倍。缺的那点角被暗幕盖住，所以一直没暴露。
     现在 inset:-55%（2.1 倍）是覆盖最坏情况后的取值（并含 22px 平移余量）。
     算法见 `_calc-ripple-inset.py` —— 改旋转角、圆心或平移量后请重跑一遍。
   · 坐标换算：inset:-55% ⇒ 图层盒 = 2.1W × 2.1H、盒原点在 -0.55W。
     盒内百分比 = (目标首屏百分比 + 0.55) / 2.1。
     transform-origin 与渐变圆心必须用同一个值，否则圆心会漂移。 */
.pd-hero-ripple{
position:absolute; inset:-55%; z-index:1; pointer-events:none;
  transform-origin:var(--hero-ripple-cx) var(--hero-ripple-cy);
  will-change:transform;              /* 常驻独立合成层：滚动时不被降级为即时重绘 */
  background:
    /* ★ 压扁交给渐变自己：ellipse 的纵半径 = 横半径 × 0.62。
       等价于原来的 scale(1,.62)，但 transform 只剩纯旋转 —— 图层余量
       因此从 2.4 倍降到 2.1 倍（面积 -33%）。见下方"为什么"注释。 */
    repeating-radial-gradient(ellipse 300px 186px at var(--hero-ripple-cx) var(--hero-ripple-cy),
      rgba(var(--hero-ripple),0)   0px,
      rgba(var(--hero-ripple),0)   168px,
      rgba(var(--hero-ripple),.19) 218px,
      rgba(var(--hero-ripple),0)   300px),
    repeating-radial-gradient(ellipse 190px 118px at var(--hero-ripple-cx) var(--hero-ripple-cy),
      rgba(var(--hero-ripple),0)   0px,
      rgba(var(--hero-ripple),0)   106px,
      rgba(var(--hero-ripple),.11) 138px,
      rgba(var(--hero-ripple),0)   190px);
  transform:rotate(-13deg);
  animation:pdRipple 10s cubic-bezier(.45,0,.55,1) infinite alternate;
}


/* ★ 水波纹的"涌动"动画。
   ⚠ 2026-09-17 连修两次 —— 这是两个**叠加**的坑，症状都是「特效一动不动」：
     ① 【关键帧根本不存在】从设计稿提取 CSS 时 @keyframes pdRipple 被漏掉。
        animation 里引用一个不存在的名字，浏览器**不报错、不退化、控制台干净**，
        整条 animation 静默失效。已补回。
     ② 【补回来了，但幅度小到看不出】第一次修完写的是 `13s / 22px`，
        而这一层是 2.1 倍视口大 —— 22px 在其中只占 0.5%，静态截图里完全一样。
        用户第二轮反馈「还是没水波纹特效」，就是这条。
        现在改成 **±48px（总行程 96px）**，周期收到 10s。
     —— 教训：修完「动画不跑」，**必须再确认一次「跑起来看不看得出来」**。
        给位移量定值时要换算成「相对波长的比例」，不能凭像素数拍脑袋：
        大环波长 300px，96px ≈ 1/3 波长，这才到「一眼能看出在流动」的量级。
   ★ 只动 translate、绝不动 scale：scale 会让合成器认为光栅尺度变了，
     这片 2.1 倍视口大的图层每次都要重新光栅化，滚动时抢不到预算就干脆不画
     —— 那正是「一滑动特效就没了」。translate 只改变换矩阵，是合成器上最便宜的动画。
     对同心环来说，平移圆心等价于弧线沿半径流动，观感反而更像水。
   ★ 时序函数用对称的 cubic-bezier(.45,0,.55,1)，**不要**用 --v2-ease：
     后者是强 ease-out（.16,1,.3,1），在"一去一回"的循环里回程会突然刹停。
   ★ 位移不露边的验算：图层 inset:-55% ⇒ 四边各有首屏 55% 的余量；
     48px 在 1440×900 下只占首屏高的 5.3%，远小于余量，旋转后四角不会露硬边。 */
@keyframes pdRipple{

  from{ transform:rotate(-13deg) translate3d(0,48px,0); }

  to  { transform:rotate(-13deg) translate3d(0,-48px,0); }

}


/* ③ 暗幕：白字对比度 + 导航衔接 + 暗角。
   左侧那道上→下的暗幕负责"给白字让位"，同时把左边的波纹自然压淡
   （所以波纹层不需要 mask —— mask 会在屏幕上留下一道椭圆的"岸线"）。
   ★ 左侧不能压得太狠：压到 .9 左边就一片死黑，波纹全没了；
     .82 时白字仍有约 12:1 对比度，水面纹理也还在。 */
.pd-hero-veil{
position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,7,12,.9) 0%, rgba(4,7,12,.34) 13%, rgba(4,7,12,0) 32%),
    linear-gradient(94deg, rgba(4,7,12,.82) 0%, rgba(4,7,12,.6) 26%, rgba(4,7,12,.26) 50%, rgba(4,7,12,.04) 72%, rgba(4,7,12,0) 100%),
    radial-gradient(150% 132% at 68% 48%, transparent 34%, rgba(4,7,12,.3) 74%, rgba(4,7,12,.62) 100%);
}


/* 水面上一道很淡的斜向高光（模拟光线扫过水面的走向，避免波纹过于机械对称）。
   强度压得很低 + 34px 模糊 —— 它只是给水面加一点"方向感"，
   一加强就变成一团盖住波纹的雾。 */
.pd-hero-veil::after{
content:""; position:absolute; inset:-20%;
  /* ★ 不用 filter:blur()。对一条线性渐变做高斯模糊，结果在数学上就等于
     一条"色标更密"的线性渐变 —— 但 blur 会让浏览器为这一大片区域建一个
     模糊合成层，滚动时极贵。这里直接把柔化写进色标：观感一致，开销归零。 */
  background:linear-gradient(118deg,
    transparent 24%,
    rgba(var(--hero-ripple),.012) 32%,
    rgba(var(--hero-ripple),.032) 40%,
    rgba(var(--hero-ripple),.058) 47%,
    rgba(var(--hero-ripple),.085) 52%,
    rgba(var(--hero-ripple),.058) 57%,
    rgba(var(--hero-ripple),.032) 64%,
    rgba(var(--hero-ripple),.012) 72%,
    transparent 80%);
}


@media (prefers-reduced-motion:reduce){

  .pd-hero-ripple{
    animation:none;
  }

}


/* ★ 全站已把首屏各层的负 z-index 改成显式正值 —— 负值子层在祖先被提升为
   合成层（滚动时就会发生）时素有"被丢帧"的毛病，改成 0/1/2/3/4 的显式栈后
   绘制顺序完全等价，但不再依赖那条容易踩的规则。 */
.pd-hero .v2-wrap{
position:relative; z-index:4; flex:1; display:flex; flex-direction:column; width:100%;
}


/* 信息区：靠左、限宽 —— 右边整块留给水面与玻璃面板，不做两列（两列会把水纹切成方块）。
   下方 96px 内边距是故意的：块在剩余高度里垂直居中，垫上它才能把整块内容
   提到约 38% 高度处（参考图的位置）；不垫就掉到 53%，太高就显得空洞。
   滚动提示用绝对定位挂在左下角，不参与居中计算 —— 否则 margin-top:auto
   会把上面整块内容顶到最上面。 */
.pd-hero-main{
position:relative;
  flex:1; display:flex; flex-direction:column; justify-content:center;
  max-width:min(600px,50%); padding:56px 0 96px;
}


.pd-crumb{
flex:none; padding:94px 0 0;      /* 顶部留白 = 让开悬浮导航（66px）+ 呼吸 */
  font-family:var(--v2-mono); font-size:12px; color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}


.pd-crumb a{
transition:color .2s;
}


.pd-crumb a:hover{
color:#fff;
}


.pd-crumb i{
color:rgba(255,255,255,.3); font-style:normal;
}


.pd-crumb b{
color:rgba(255,255,255,.94); font-weight:700;
}


/* ---- 产品层：悬浮玻璃卡（glassmorphism）----
   ★ 2026-09-17 第三版 —— 用户要求「右边的产品搞个悬浮效果卡片」。
     演进过程（三版都实测过，别再走回头路）：
       ① 「产品立在水面 + 倒影」：**必须**用透明底抠图，后台没传抠图首屏就整块空了
          （用户实际遇到「首屏右边产品图没有」）→ 否掉：不能用观感换一个必填字段。
       ② 「照片自己当圆角卡片」：无接缝、不裁切，但**贴在背景上、没有体积**，
          用户接着反馈要"悬浮感" → 否掉。
       ③ 【本版】外层玻璃卡 + 内层产品图：
          「浮」由**投影**表达（卡与水面之间明确隔着一层空气），
          「玻璃」由 backdrop-blur 表达（背后的波纹在卡内被虚化，一眼看出是透明材质）。
     ★ 关键：第②版否掉「面板」的理由在本版**不成立**，差别就在"实心 vs 半透明"：
       否掉的是「**实心浅色**面板里放图」—— 面板底色再准也压不住照片自身的影棚渐晕
       （实测各图四角亮度 214~255 浮动），照片四边必在实心面板上浮出一圈淡方框。
       而玻璃卡表面是半透明的，照片边缘与外层之间**不存在"两种实色相接"**，
       那个方框问题从根上消失了。
       —— 可复用结论：**要"卡片感"就让卡片透明**（半透明层不暴露色差）；
          要"实心面板"就必须接受照片自带底色会显形。
   ★ 尺寸：容器 aspect-ratio 定形，图片靠 max-width/max-height 自适应。
     ⚠ 千万别写 `width:100%` + `max-height:100%` 去兜竖图：
       本项目产品图是 440×600 竖版，两者同时命中时替换元素会**连宽度一起回缩**
       （实测 470px → 220px，产品在卡里只剩一小块）。
       正确写法 `width:auto; height:auto; max-width:100%; max-height:100%` ——
       元素盒因此**贴合图片本身**，图片上的圆角与白描边才贴得住产品；
       否则描边画在图片之外的空白上，看起来是个比产品大一圈的空框。 */
.pd-hero-prod{
position:absolute; z-index:3; pointer-events:none;
  right:clamp(18px,4vw,84px); top:50%; transform:translateY(-50%);
  /* ★ 尺寸由**素材**决定，不给容器写死比例。
     早先写 `width:clamp(…); aspect-ratio:1/1.06` 时，卡片形状是固定的，
     而后台可能传竖图也可能传横图 → 图片 contain 进固定比例的盒子，
     不匹配的那个方向就凭空多出一圈玻璃留白（实测 500 宽视口下横图上下各空 90px）。
     现在卡片的宽高都从图片推出来：竖图得竖玻璃卡、横图得横玻璃卡，留白恰好是一圈 padding。 */
  width:fit-content;
  /* 兜底最小尺寸：图片还没加载完时，fit-content 会让卡片塌成 2×padding + 2px 的小方块
     （实测 38×38，里面只有 alt 文字）。给一个保守下限，加载空窗期也不是个"小方点"。 */
  min-width:clamp(180px,17vw,240px);
  min-height:clamp(130px,12vw,180px);
  margin:0; box-sizing:border-box;
  padding:clamp(18px,2.2vw,38px);
  display:flex; align-items:center; justify-content:center;
  border-radius:clamp(24px,2.6vw,40px);
  /* 玻璃本体：左上偏亮 → 右下近乎透明。右下留透是刻意的 ——
     让背后的波纹透出来，卡片才不会糊成一块死板的板子。 */
  background:linear-gradient(150deg,
    rgba(214,232,255,.17) 0%,
    rgba(255,255,255,.06) 46%,
    rgba(255,255,255,.025) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    0 60px 120px -48px rgba(0,0,0,.95),   /* 大而软的远投影 —— "浮"的观感全靠它 */
    0 18px 40px -28px rgba(0,0,0,.7),     /* 近处一层，把卡片下缘从背景上"切"出来 */
    inset 0 1px 0 rgba(255,255,255,.42),  /* 顶沿高光 = 玻璃厚度 */
    inset 0 -1px 0 rgba(255,255,255,.06), /* 底沿微光：缺了它卡片下缘会显得发糊 */
    inset 0 0 90px rgba(255,255,255,.05); /* 卡内漫射光 */
}


.pd-hero-prod img{
display:block; width:auto; height:auto;
  /* ★ 限制放在**图片**上、而不是容器上：容器只负责"比产品大一圈"。
     ⚠ 千万别写 `width:100%` + `max-height:100%` 去兜竖图：
       本项目产品图是 440×600 竖版，两者同时命中时替换元素会**连宽度一起回缩**
       （实测 470px → 220px，产品在卡里只剩一小块）。
       这里 width/height 都是 auto —— 图片永不裁、永不变形，只按 max 收敛。 */
  max-width:clamp(240px,26vw,430px);
  max-height:clamp(220px,40vh,400px);
  border-radius:clamp(12px,1.4vw,22px);
  /* 贴住产品的一圈淡描边 + 一层近投影 → 读作「嵌在玻璃柜里的一张卡」，
     而不是"一张图飘在玻璃上"。★ 描边用 `0 0 0 1px` 的 spread（贴元素盒），
     所以必须配合上面 width/height:auto 的写法，否则描边会落在图片外的空白上。 */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 22px 44px -24px rgba(0,0,0,.75);
}


/* ---- 左：信息区（大字 + 留白） ---- */
/* 型号与品类拆两行：靠字号差拉开层级，既比单行 56px 更有气势，
   也避免长产品名在窄列里断在难看的位置 */
/* 首屏只留产品名 —— 型号与品类拆两行：靠字号差拉开层级，
   既比单行更有气势，也避免长产品名在窄列里断在难看的位置。
   深色实景上：型号纯白，品类降一档到 62% 白，保持主次。 */
.pd-h1{
margin:0; color:#fff;
  font-weight:900; line-height:1.02; letter-spacing:-.036em;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}


.pd-h1 .m{
display:block; font-size:clamp(48px,6vw,86px);
}


/* 品类行（如「在线监控系统」）—— 2026-09-17 按用户要求调轻调亮：
   字重 800→600（细）、字色 62%→86% 白（明）、字号上限 44→38px。
   深色水面 + 左侧暗幕会一起把灰字压得更暗，所以要"明"就得往亮里提，
   不能靠加粗 —— 加粗在深底上只会糊成一团。 */
.pd-h1 .c{
display:block; margin-top:.14em;
  font-size:clamp(24px,2.6vw,38px); font-weight:600;
  color:rgba(255,255,255,.86); letter-spacing:-.01em;
}


/* 标题下品牌短线（主流工业站通用的"标题锚点"手法） */
.pd-bond{
width:52px; height:3px; border-radius:2px; background:var(--v2-brand); margin:30px 0 22px;
}


/* 2026-09-17 移除：首屏标题下那行「24 通道 | 在线式」短规格（用户要求"不要"）。
   首屏只留 产品名 + 品牌短线 + 两条文字链，更接近参考图的留白量；
   规格信息一项都没丢，全部收在首屏正下方的通栏规格条（.pd-specstrip）里。
   .pd-sub / .pd-sub i 两条规则随之删除，不要留着当死代码。 */


.pd-act{
margin-top:46px; display:flex; align-items:center; gap:34px; flex-wrap:wrap;
}


/* ---- 规格条：3 项快览从首屏下移到这里 ----
   首屏只放产品名（用户明确要求"字太多了"），规格信息不能丢 → 紧跟首屏做一条通栏。
   视觉沿用原来的极简手法：无卡片、无阴影，只留一条上边线 + 竖分隔。 */
.pd-specstrip{
background:#fff; border-bottom:1px solid var(--v2-line);
}


.pd-specstrip-in{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:34px 0;
}


.pd-specstrip .q{
min-width:0; padding-right:24px;
}


.pd-specstrip .q + .q{
padding-left:38px; border-left:1px solid var(--v2-line);
}


.pd-specstrip .k{
display:block; font-family:var(--v2-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--v2-ink-3); margin-bottom:10px;
}


.pd-specstrip .v{
display:flex; align-items:baseline; gap:6px; min-width:0;
  font-size:18px; font-weight:800; color:var(--v2-ink); line-height:1.2;
  letter-spacing:-.012em;
}


.pd-specstrip .v b{
font-family:var(--v2-mono); font-size:28px; font-weight:800; letter-spacing:-.035em;
}


.pd-specstrip .v i{
font-style:normal; font-size:12px; font-weight:600; color:var(--v2-ink-3);
}


.pd-specstrip .v.or b{
color:var(--v2-brand);
}


/* 次级动作改文字链 —— 比按钮轻，一眼扫完"产品名 → 规格 → 两个动作"三段。
   参考图里两条链都是橙色小字（下载 PDF / 联系），这里沿用同一手法：
   深底上白字太抢，橙色既低干扰又能被一眼定位。 */
.pd-tlink{
position:relative; display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:700; color:var(--hero-link); padding-bottom:4px;
}


.pd-tlink svg{
color:currentColor; opacity:.9;
}


.pd-tlink::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; opacity:.55;
  transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--v2-ease);
}


.pd-tlink:hover::after{
transform:scaleX(1);
}


/* 底部滚动提示 —— 挂在信息区左下角（参考图的位置）。
   必须绝对定位：一旦留在文档流里，上面的 margin-top:auto 会把
   "产品名 / 规格 / 两条链"整块顶到首屏最上面。 */
.pd-scroll{
position:absolute; left:0; bottom:0;
  display:flex; align-items:center; gap:11px;
  font-family:var(--v2-mono); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(255,255,255,.48);
}


.pd-scroll i{
display:block; width:26px; height:26px; flex:none; position:relative;
  border:1px solid rgba(255,255,255,.2); border-radius:8px;
}


/* 双边框 + 45° 旋转 = 一个下箭头，比塞 SVG 轻 */
.pd-scroll i::after{
content:""; position:absolute; left:50%; top:8px; width:7px; height:7px; margin-left:-3.5px;
  border-right:1.6px solid var(--hero-link); border-bottom:1.6px solid var(--hero-link);
  transform:rotate(45deg);
  animation:pdScroll 2s var(--v2-ease) infinite;
}


@keyframes pdScroll{
0%  { opacity:0; transform:rotate(45deg) translate(-2px,-2px); }
  30% { opacity:1; }
  70% { opacity:1; }
  100%{ opacity:0; transform:rotate(45deg) translate(3px,3px); }
}


@media (prefers-reduced-motion:reduce){

  .pd-scroll i::after{
    animation:none; opacity:1;
  }

}


/* 服务承诺行 —— 已从首屏移出，改到询盘区底部作收尾（首屏只留核心信息） */
.pd-assure{
margin-top:34px; padding-top:30px; border-top:1px solid var(--v2-line);
  display:flex; gap:44px; flex-wrap:wrap; justify-content:center;
}


.pd-assure span{
display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--v2-ink-2);
}


.pd-assure svg{
color:var(--v2-brand); flex:none;
}


/* ============================================================================
   2 · 吸顶锚点条 + 滚动进度条
   ========================================================================== */
.pd-anchor{
position:sticky; top:66px; z-index:60;   /* 66px = 让开悬浮导航的高度 */
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--v2-line); border-bottom:1px solid var(--v2-line);
}


.pd-anchor-in{
height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}


.pd-anchor nav{
display:flex; gap:38px;
}


.pd-anchor nav a{
position:relative; font-size:15px; font-weight:700; color:var(--v2-ink-2);
  padding:21px 0; transition:color .22s;
}


.pd-anchor nav a em{
font-family:var(--v2-mono); font-style:normal; font-size:10.5px; font-weight:700;
  color:#c8cad2; margin-right:6px; transition:color .22s;
}


.pd-anchor nav a:hover{
color:var(--v2-ink);
}


.pd-anchor nav a.on{
color:var(--v2-brand);
}


.pd-anchor nav a.on em{
color:var(--v2-brand);
}


.pd-anchor nav a.on::after{
content:""; position:absolute; left:0; right:0; bottom:14px; height:2px;
  background:var(--v2-brand); border-radius:2px;
}


/* 滚动进度 */
.pd-prog{
position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,var(--v2-brand),#ff9a4d);
  box-shadow:0 0 10px rgba(232,102,15,.5);
  transition:width .1s linear;
}


/* ============================================================================
   3 · 功能特性 —— Bento 错落布局
   ========================================================================== */
.pd-func{
padding:100px 0 104px;
}


.pd-head{
display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px;
}


.pd-head-l{
max-width:660px;
}


.pd-fgrid{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;
}


.pd-fcard{
position:relative; padding:32px 30px 30px; background:#fff;
  border:1px solid var(--v2-line); border-radius:22px; overflow:hidden;
  transition:transform .42s var(--v2-ease), box-shadow .42s var(--v2-ease), border-color .42s;
  min-height:214px;
}


.pd-fcard:hover{
transform:translateY(-6px); border-color:rgba(232,102,15,.34);
  box-shadow:0 26px 52px -26px rgba(20,22,28,.34);
}


/* 编号：等宽 + 前景/背景双重层次 */
.pd-fcard .no{
position:absolute; top:26px; right:28px;
  font-family:var(--v2-mono); font-size:13px; font-weight:800; letter-spacing:.06em;
  color:#d9dce3; transition:color .42s var(--v2-ease);
}


.pd-fcard:hover .no{
color:var(--v2-brand);
}


.pd-fcard .ico{
width:48px; height:48px; border-radius:14px; margin-bottom:22px;
  background:var(--v2-brand-tint); color:var(--v2-brand);
  display:flex; align-items:center; justify-content:center;
  transition:all .42s var(--v2-ease);
}


.pd-fcard:hover .ico{
background:var(--v2-brand); color:#fff; transform:scale(1.06);
}


.pd-fcard h3{
font-size:17.5px; font-weight:800; margin-bottom:11px; letter-spacing:-.01em;
}


.pd-fcard p{
font-size:14px; color:var(--v2-ink-2); line-height:1.8;
}


/* 2026-09-17 移除「首张深色大卡 + 炉温曲线装饰」整套变体（.pd-fcard.big）：
   用户明确要求「不需要这个曲线图」。曲线是大卡存在的唯一理由 ——
   抽掉它之后，一张通栏深色大卡里只剩图标 + 标题 + 一行描述，右半屏全是空的，
   反而比普通卡更难看。所以把大卡整个去掉，功能卡一律等宽等大。
   同时删掉的还有：
     · .pd-fcard.big / .end 的 grid-column:span 2（不再有跨列卡）
     · @keyframes pdDraw / pdFade（只服务于曲线的绘制动画）
     · .pd-fcard.end 的橙色浅底收束（"末张加宽"在条数不固定时预测不出效果，
       比如 6 条在 4 列栅格里，第 6 张跨 2 列反而留出一个空洞）
   ★ 条数由后台决定 → 布局必须对任意条数都成立，不能依赖"首张/末张"的位置假设。 */


/* ============================================================================
   4 · 硬件参数 —— 等宽数值 + 逐行由后台维护
   ========================================================================== */
.pd-spec{
padding:100px 0 104px; background:var(--v2-bg-soft); position:relative;
}


.pd-spec::before{
content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(20,22,28,.07),transparent);
}


.pd-spec-top{
margin-bottom:50px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;
}


.pd-sgrid{
display:grid; grid-template-columns:.78fr 1.22fr; gap:52px; align-items:start;
}


/* sticky 图卡 */
.pd-sphoto{
/* 悬浮导航 66px + 吸顶锚点条 64px = 130px，粘住时必须让开，否则会被压住 */
  position:sticky; top:146px;
  /* ★ 底色必须等于产品图的实际背板色 #fcfcfc（不是纯白 #fff）。
     实拍背板实测是 (252,252,252)，配纯白卡会露出一块淡方框；
     multiply 也救不了 —— 它只会把 252 压得更暗（252×255/255=252，×252/255=249）。 */
  background:#fcfcfc; border-radius:22px; padding:30px 28px 24px;
  border:1px solid var(--v2-line);
  box-shadow:0 26px 58px -34px rgba(20,22,28,.3);
}


.pd-sphoto .cap{
display:flex; align-items:center; justify-content:space-between;
  font-family:var(--v2-mono); font-size:11px; letter-spacing:.08em; color:var(--v2-ink-3);
  padding-bottom:16px; border-bottom:1px solid var(--v2-line-2);
}


/* ★ 2026-10-10：原为 width:100%; height:auto —— 竖版原图（产品只占中间一条、
   四周大片白底）会整张按比例铺满卡片宽度，产品在卡里显得很小。
   现改为固定高度 + object-fit:cover：图片放大铺满该区域，上下多余白边被裁掉，
   产品占比明显提升。4:3 与首页 / 产品中心页的卡片比例保持一致。
   ★ 裁切以产品为中心：object-position 默认 center，本批原图产品基本居中，够用。 */
.pd-sphoto img{
width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
}


.pd-sphoto-meta{
margin-top:20px; padding-top:18px; border-top:1px solid var(--v2-line-2);
}


.pd-sphoto-meta b{
display:block; font-size:14.5px; font-weight:800; margin-bottom:5px;
}


.pd-sphoto-meta span{
font-family:var(--v2-mono); font-size:11.5px; color:var(--v2-ink-3); letter-spacing:.04em;
}


/* 参数表 */
.pd-rows{
background:#fff; border:1px solid var(--v2-line); border-radius:22px;
  padding:12px;
  box-shadow:0 26px 58px -40px rgba(20,22,28,.3);
}


.pd-rows-head{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px;
  padding:12px 18px 14px; border-bottom:1px solid var(--v2-line);
  font-family:var(--v2-mono); font-size:10.5px; letter-spacing:.12em;
  color:var(--v2-ink-3); text-transform:uppercase;
}


.pd-rows-head .r{
text-align:right;
}


.pd-row{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:baseline;
  padding:15px 18px; border-radius:12px; position:relative;
  transition:background .26s var(--v2-ease), padding-left .26s var(--v2-ease);
}


.pd-row:hover{
background:#fafafb; padding-left:24px;
}


.pd-row .k{
font-size:14px; color:var(--v2-ink-2);
}


.pd-row .v{
font-size:14.5px; font-weight:600; color:var(--v2-ink); text-align:right;
  font-variant-numeric:tabular-nums; letter-spacing:-.005em;
}


/* 2026-09-17 移除「前两行橙色强调」（.pd-row.key）与表下那行运维说明（.pd-spec-note）。
   用户的理由很直接：「硬件参数 1、2 不需要搞标识，和其他的一样显示就好了」。
   ★ 而且原来的强调是**按位置**给的（前两行），不是按语义给的 ——
     后台调整参数顺序、或增删一行，被强调的就变成另一条参数了，属于会自相矛盾的规则。
     参数条数既然由后台决定，行与行之间就不该有任何位置相关的差异。 */


/* ============================================================================
   5 · 相关产品
   ========================================================================== */
.pd-rel{
padding:100px 0 104px;
}


.pd-rgrid{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
}


.pd-rcard{
position:relative; border:1px solid var(--v2-line); border-radius:20px; overflow:hidden;
  background:#fff; transition:transform .42s var(--v2-ease), box-shadow .42s var(--v2-ease), border-color .42s;
}


.pd-rcard:hover{
transform:translateY(-6px); border-color:rgba(232,102,15,.3); box-shadow:0 26px 52px -28px rgba(20,22,28,.34);
}


/* 产品图已做紧致裁剪（pg-tight，宽高比约 2.2:1）→ 容器用 16:10 最贴合：
   图片按宽度适配即可占满内容区，既不裁边也不留大片空白。 */
/* ★ 2026-10-10：与产品中心页 .v2-pg-card-media 对齐（原图竖版白底、产品占比小）。
   原来 16:10 + padding + contain → 白边全留存，产品显得小。
   现改为：padding 归零、比例 4:3（与产品中心页一致）、img 用 cover 铺满并裁掉多余白边。
   background 沿用 #fcfcfc（与产品图背板同色，cover 裁切后边缘更自然）。 */
.pd-rcard .m{
aspect-ratio:4/3; overflow:hidden; background:#fcfcfc; position:relative;
}


.pd-rcard .m img{
width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--v2-ease);
}


.pd-rcard:hover .m img{
transform:scale(1.05);
}


.pd-rcard .m .idx{
position:absolute; left:14px; top:12px; z-index:2;
  font-family:var(--v2-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  color:#c3c6ce;
}


.pd-rcard .b{
padding:18px 20px 20px; border-top:1px solid var(--v2-line-2);
}


.pd-rcard h4{
font-size:15px; font-weight:800; margin-bottom:6px; letter-spacing:-.01em;
}


.pd-rcard p{
font-family:var(--v2-mono); font-size:11.5px; color:var(--v2-ink-3); letter-spacing:.03em;
}


/* hover 时底部橙线展开 */
.pd-rcard .b::after{
content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--v2-brand); transition:width .42s var(--v2-ease);
}


.pd-rcard:hover .b::after{
width:100%;
}


/* ============================================================================
   6 · 询盘 CTA + 极简页脚
   ========================================================================== */
.pd-cta{
padding:0 0 96px; position:relative; z-index:70;
}


.pd-cta-card{
position:relative; overflow:hidden; border-radius:30px;
  background:linear-gradient(118deg,#0b0d11 0%,#171a20 62%,#1d2128 100%);
  padding:70px 64px; display:flex; align-items:center; justify-content:space-between; gap:52px;
  box-shadow:0 40px 90px -50px rgba(11,13,17,.7);
}


.pd-cta-card::before{
content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.042) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.042) 0 1px, transparent 1px 40px);
  -webkit-mask-image:linear-gradient(120deg,#000,transparent 58%);
  mask-image:linear-gradient(120deg,#000,transparent 58%);
}


.pd-cta-card::after{
content:""; position:absolute; right:-110px; top:-120px; width:400px; height:400px;
  border-radius:50%; background:radial-gradient(closest-side, rgba(232,102,15,.36), transparent 70%);
  pointer-events:none;
}


.pd-cta-t{
position:relative; max-width:640px;
}


.pd-cta-t h3{
font-size:clamp(24px,2.7vw,34px); font-weight:900; color:#fff;
  line-height:1.26; letter-spacing:-.022em;
}


.pd-cta-t p{
margin-top:16px; font-size:15px; color:rgba(255,255,255,.62); line-height:1.78;
}


.pd-cta-a{
position:relative; display:flex; gap:12px; flex:none; z-index:2;
}


.pd-btn-w{
background:#fff; color:var(--v2-ink);
}


.pd-btn-w:hover{
background:var(--v2-brand); color:#fff; transform:translateY(-2px);
}


.pd-btn-ow{
border-color:rgba(255,255,255,.34); color:#fff; background:transparent;
}


.pd-btn-ow:hover{
background:#fff; color:var(--v2-ink); transform:translateY(-2px);
}


/* ============================================================================
   窄屏（≤1080px）：首屏改「上字下图」堆叠
   ⚠ 2026-09-17 补：这一整块在「从设计稿提取 CSS」时被漏掉了。
     后果很实际 —— 手机上产品面板仍然绝对定位在右侧，直接压在标题上。
     教训：派生/提取 CSS 之后，一定要回头核对**每个 @media 块是否都带过来了**，
     不能只看顶层规则数量对不对。顶层 172 条齐了，媒体块漏一个照样是坏的。
   ========================================================================== */
@media (max-width:1080px){

  /* 高度仍撑满一屏：用 svh 而不是 vh —— 移动端地址栏收起/展开时 svh 不会跳。
     写成 min-height:0 会让深色首屏在手机上半途断掉、下面接一片白，非常突兀。 */
  .pd-hero{
    min-height:100vh; min-height:100svh; padding:0 0 60px;
  }

  /* 把波纹圆心挪到下半屏（产品所在处）。盒内百分比换算（inset:-55% ⇒ 2.1 倍）：
     想落在首屏 (50%,62%) → (0.50+0.55)/2.1 = 50%、(0.62+0.55)/2.1 = 55.7%。
     只改圆心，波长与压缩比不变 —— 手机上看到的是同一片水面的另一块。 */
  .pd-hero-ripple{
    --hero-ripple-cx:50%;
    --hero-ripple-cy:55.7%;
    transform-origin:50% 55.7%;
  }

  /* 堆叠后文字落在图片上方，左侧那道横向暗幕不再需要（它会白压暗半屏） */
  .pd-hero-veil{
    background:
      linear-gradient(180deg, rgba(4,7,12,.9) 0%, rgba(4,7,12,.3) 16%, rgba(4,7,12,0) 40%),
      radial-gradient(134% 104% at 50% 58%, transparent 28%, rgba(4,7,12,.34) 76%, rgba(4,7,12,.6) 100%);
  }

  .pd-hero-main{
    max-width:none; padding:34px 0 8px;
  }

  .pd-h1 .m{ font-size:clamp(40px,9vw,64px); }

  .pd-h1 .c{ font-size:clamp(20px,4.6vw,30px); }

  /* ★ 产品面板退出绝对定位、落回文字下方居中 —— 本块最要紧的一条。
     width 跟着桌面端保持 fit-content（卡片由素材决定大小），
     margin:auto 在 static 下同样能居中。 */
  .pd-hero-prod{
    position:static; transform:none;
    width:fit-content; margin:36px auto 0;
  }

  /* 图片尺寸换一套：max-width 里的 26vw 在 400px 视口下只剩 104px，
     虽然有 240px 的下限兜底，但窄屏还是显小，这里单独放开一点。 */
  .pd-hero-prod img{
    max-width:min(370px,78vw); max-height:min(48vh,330px);
  }

  /* 堆叠后首屏高度由内容决定，滚动提示改回文档流（绝对定位会压到产品面板上） */
  .pd-scroll{ position:static; padding-top:30px; }

  .pd-fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .pd-sgrid{ grid-template-columns:1fr; gap:38px; }

  .pd-sphoto{ position:static; }

  .pd-rgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .pd-head{ flex-direction:column; align-items:flex-start; gap:22px; }

  .pd-cta-card{ flex-direction:column; align-items:flex-start; padding:54px 40px; }

}


@media (max-width:720px){

/* 窄屏首屏保持撑满一屏，只把底部留白收紧 */
  .pd-hero{
    padding-bottom:24px;
  }

  .pd-scroll{
    display:none;
  }

  .pd-crumb{
    padding-top:74px;
  }

  .pd-anchor{
    top:66px;
  }

/* 规格条：窄屏由三列改两列，避免字被挤断 */
  .pd-specstrip-in{
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 0; padding:26px 0;
  }

  .pd-specstrip .q{
    padding-right:16px;
  }

  .pd-specstrip .q + .q{
    padding-left:16px;
  }

  .pd-specstrip .q:nth-child(3){
    padding-left:0; border-left:0;
  }

  .pd-specstrip .k{
    font-size:9.5px; margin-bottom:7px; letter-spacing:.1em;
  }

  .pd-specstrip .v{
    font-size:15px;
  }

  .pd-specstrip .v b{
    font-size:24px;
  }

  .pd-act{
    margin-top:34px; gap:26px;
  }

  .pd-assure{
    gap:20px 28px; margin-top:28px; padding-top:24px;
  }

  .pd-fgrid{
    grid-template-columns:1fr;
  }

  .pd-rgrid{
    grid-template-columns:1fr;
  }

  .pd-anchor nav{
    gap:18px;
  }

  .pd-anchor nav a{
    font-size:14px;
  }

  .pd-anchor nav a em{
    display:none;
  }

  .pd-anchor .v2-btn{
    display:none;
  }

  .pd-rows{
    padding:8px;
  }

  .pd-row{
    padding:14px 12px; gap:16px;
  }

  .pd-rows-head{
    padding:10px 12px;
  }

  .pd-cta-card{
    padding:44px 28px;
  }

}


/* ----------------------------------------------------------------------------
   询盘弹窗（产品明细页所有 CTA 共用）
   ★ 原 ProductDetail 把弹窗样式写在视图内的 <style> 里，重写视图后随之消失，
     故统一收到这里；风格对齐 v2 体系（22px 圆角、品牌橙主按钮、细边框表单）。
   ---------------------------------------------------------------------------- */
.pd-modal{
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center;
  background:rgba(10,12,16,.52); padding:24px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.pd-modal.show{ display:flex; }

.pd-modal-box{
  position:relative; width:100%; max-width:460px; max-height:88vh; overflow-y:auto;
  background:#fff; border-radius:22px; padding:34px 32px 30px;
  box-shadow:0 40px 90px -30px rgba(12,14,20,.6);
}
.pd-modal-box h3{
  font-size:20px; font-weight:800; color:var(--v2-ink); letter-spacing:-.012em;
  margin-bottom:8px; padding-right:34px;
}
.pd-modal-sub{
  font-size:13px; color:var(--v2-ink-2); line-height:1.7; margin-bottom:22px;
}
.pd-modal-sub strong{ color:var(--v2-ink); }

.pd-modal-x{
  position:absolute; top:18px; right:18px; width:32px; height:32px;
  border:0; background:var(--v2-bg-soft); border-radius:50%;
  font-size:20px; line-height:1; color:var(--v2-ink-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .22s, color .22s;
}
.pd-modal-x:hover{ background:var(--v2-brand-tint); color:var(--v2-brand); }

.pd-mrow{ margin-bottom:15px; }
.pd-mrow label{
  display:block; font-size:13px; font-weight:600; color:var(--v2-ink);
  margin-bottom:7px;
}
.pd-mrow .req{ color:var(--v2-brand); font-weight:800; }
.pd-mrow input, .pd-mrow textarea{
  width:100%; box-sizing:border-box; padding:11px 13px;
  border:1px solid var(--v2-line); border-radius:12px;
  font-size:14px; color:var(--v2-ink); background:#fff;
  font-family:inherit; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.pd-mrow textarea{ resize:vertical; }
.pd-mrow input:focus, .pd-mrow textarea:focus{
  border-color:var(--v2-brand);
  box-shadow:0 0 0 3px var(--v2-brand-tint);
}

.pd-msubmit{
  width:100%; margin-top:10px; padding:13px;
  background:var(--v2-brand); color:#fff; border:0; border-radius:12px;
  font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:background .22s, transform .22s;
}
.pd-msubmit:hover{ background:var(--v2-brand-deep); transform:translateY(-1px); }


/* ============================================================================
   安装案例页（v2-cs- 前缀）
   ----------------------------------------------------------------------------
   和前几稿最大的区别：**不另起一套视觉语言**。骨架整套复用产品中心页 ——
     首屏   .v2-pg-hero + .v2-pg-hero-bg + .v2-pg-scroll
     文案层 .v2-hero-inner / .v2-crumb / .v2-hero-title / .v2-hero-lede / .v2-ctas（连逐行入场都是现成的）
     指标行 .v2-pg-metrics / .v2-pg-metric
     内容区 .v2-pg-catalog / .v2-pg-catalog-head / .v2-pg-filter / .v2-pg-tabs / .v2-pg-tab
            .v2-pg-count / .v2-pg-tip / .v2-pg-card 系 / .v2-pg-empty
     底部   .v2-pg-cta
   所以这里只剩三样真正属于「案例页」的东西：
     ① 首屏压暗层（照片是实景，白字要有底）② 卡片上的日期行 + 多图角标 ③ 图片放大层（相册）
   全站浅色，没有任何近黑底大区块 —— 唯一的深色是首屏照片自身的压暗层。
   ============================================================================ */

/* ---------- 1. 首屏 ---------- */
/* 压暗层数值与首页 .v2-slide-overlay **逐字相同**
   （2026-10-08 三改起为「椭圆柔光：46% 平顶 .66 → 100% 圆滑归零，无 mask-image」），
   保证两个页面的首屏观感是一套语言 */
.v2-cs-hero-mask{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:none;
}
/* ★ 替换点：把「现场安装实拍」覆盖到 ~/images/v2/case-hero.jpg 即可，不用改代码。
   建议 ≥2560×1440（16:9）。铺满是 object-fit:cover，窄屏裁掉左右两侧，主体别贴边。 */
.v2-cs-hero .v2-pg-hero-bg img{ object-position:center 46%; }

/* ---------- 2. 指标行：去掉产品页那 104px 的顶部大留白 ---------- */
.v2-cs-metrics{ background:#fff; }
.v2-cs-metrics .v2-pg-metrics{ margin-top:0; padding:86px 0 88px; }

/* 目录区副标题：.v2-pg-sub 自带 margin:0，贴标题太近 */
.v2-pg-catalog-head .v2-pg-sub{ margin-top:16px; }

/* ---------- 3. 案例卡 ---------- */
/* 3 列（对齐首页 .v2-prod-grid 的 3×26）：照片比产品主图更需要面积 */
.v2-cs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

/* 卡片是 <button>（点开相册，不是跳转），得先把按钮的默认外观抹掉才穿得上 .v2-pg-card */
.v2-cs-grid button.v2-pg-card{
  width:100%; padding:0; border:0; background:#fff;
  font-family:var(--v2-font); color:inherit; text-align:left;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  /* ★ transition 必须在这里写全（opacity + transform + box-shadow）：
     本规则优先级高于 .v2-reveal，只写 transform/box-shadow 会把 .v2-reveal 的
     opacity 过渡整个覆盖掉 —— 卡片变成「瞬间出现、只滑动」，不报错、也不难看，
     只是入场不够顺，所以极难被发现。 */
  transition:opacity .6s var(--v2-ease), transform .6s var(--v2-ease), box-shadow .55s var(--v2-ease);
}
.v2-cs-grid button.v2-pg-card:focus-visible{ outline:2px solid var(--v2-brand); outline-offset:3px; }

/* 入场延迟按列循环三档。用 nth-child 而不是 .v2-reveal[data-d]：
   卡片模板是共享 partial（_CaseCard.cshtml），用 data-d 就得让每个调用点都记得把索引传进去，
   漏一个地方就是「这批卡片一起蹦出来」。 */
.v2-cs-grid > .v2-reveal:nth-child(3n+2){ transition-delay:90ms; }
.v2-cs-grid > .v2-reveal:nth-child(3n+3){ transition-delay:180ms; }
/* transition-delay 是元素级属性，会连 hover 一起延迟 —— 鼠标移上去要等 90/180ms 才有反应。
   悬停时归零，只保留进场的错落。 */
.v2-cs-grid > .v2-pg-card:hover{ transition-delay:0s; }

.v2-cs-date{
  margin:9px 0 0; font-family:var(--v2-mono); font-size:12.5px;
  letter-spacing:.04em; color:var(--v2-ink-3);
}
/* 精选角标：压在图上左上角（右上角被产品卡自带的 hover 箭头占了） */
.v2-cs-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; height:26px; padding:0 12px;
  border-radius:var(--v2-pill); background:var(--v2-brand); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  box-shadow:0 6px 16px rgba(232,102,15,.34);
}
/* 多图角标「⧉ N」：一个案例挂的是一整组现场照片，不是一张。**只有 N>1 才渲染**。
   放右下角：左上角是精选徽章、右上角是卡片 hover 才出的箭头，只剩右下角不打架。
   ★ 半透明 + backdrop-filter 必须自带不透明底（rgba(12,14,18,.55)）：
     无 GPU 环境 backdrop 会采错下层，写成极淡值会直接翻白。 */
.v2-cs-shots{
  position:absolute; right:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px;
  border-radius:var(--v2-pill);
  background:rgba(12,14,18,.55); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:11.5px; font-weight:600; letter-spacing:.03em; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
  transition:background .3s var(--v2-ease);
}
.v2-cs-shots svg{ display:block; opacity:.9; }
.v2-cs-shots em{ font-family:var(--v2-mono); font-style:normal; font-size:12px; }
/* hover 整卡放大时角标转橙，暗示「这张后面还有一组」 */
.v2-pg-card:hover .v2-cs-shots{ background:var(--v2-brand); box-shadow:0 4px 16px rgba(232,102,15,.42); }

/* ---------- 4. 加载更多 + 进度 ---------- */
/* ★ 按钮落在 .v2-pg-catalog 的浅灰底上，ghost 按钮的浅边框在灰底上几乎看不见 → 改白底 */
.v2-cs-more{ margin-top:56px; text-align:center; }
.v2-cs-more .v2-btn{ min-width:230px; }
.v2-cs-more .v2-btn-ghost{ background:#fff; }
.v2-cs-prog{ margin:20px 0 0; font-size:13px; color:var(--v2-ink-3); }
.v2-cs-prog b{ font-family:var(--v2-mono); color:var(--v2-ink); font-weight:600; }
.v2-cs-prog .bar{ display:block; width:200px; height:3px; margin:14px auto 0; border-radius:2px; background:#e4e6ea; overflow:hidden; }
.v2-cs-prog .bar i{ display:block; height:100%; border-radius:2px; background:var(--v2-brand); transition:width .5s var(--v2-ease); }

/* ---------- 5. 图片放大层：浅色毛玻璃「白盒」，不用黑底 ---------- */
/* ★ 这一层必须是 .v2-pg 的**兄弟节点**，不能塞进 .v2-pg 里：
     祖先一旦带上 transform/filter，position:fixed 的包含块就从视口变成该祖先。
   z-index 必须 ≥2000（.v2-nav 是 1000，移动端菜单层 1100）。
   ★ 半透明 + backdrop-filter 必须自带一层明确的底（rgba(250,250,251,.95)）：
     无 GPU 环境下 backdrop 会采错下层，写成 rgba(255,255,255,.06) 这种极淡值会直接翻白。 */
.v2-cs-lb{
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center;
  background:rgba(250,250,251,.95);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
}
.v2-cs-lb.on{ display:flex; animation:v2-cs-fade .3s var(--v2-ease); }
@keyframes v2-cs-fade{ from{ opacity:0; } to{ opacity:1; } }
.v2-cs-lb-stage{ position:relative; max-width:84vw; text-align:center; }
.v2-cs-lb-stage img{
  display:block; margin:0 auto; max-width:84vw; max-height:60vh;
  border-radius:18px; background:#fff;
  box-shadow:0 30px 80px rgba(20,20,30,.26);
}
.v2-cs-lb-info{ margin-top:22px; }
.v2-cs-lb-info h3{ margin:0 0 8px; font-size:20px; font-weight:800; color:var(--v2-ink); }
.v2-cs-lb-info p{ margin:0 auto; max-width:620px; font-size:14px; line-height:1.85; color:var(--v2-ink-2); }
.v2-cs-lb-meta{ margin-top:14px; display:flex; align-items:center; justify-content:center; gap:12px; font-size:13px; color:var(--v2-ink-3); }
.v2-cs-lb-meta b{ color:var(--v2-brand); font-weight:700; }
.v2-cs-lb-meta i{ width:4px; height:4px; border-radius:50%; background:var(--v2-ink-3); opacity:.6; }
.v2-cs-lb-meta span{ font-family:var(--v2-mono); letter-spacing:.04em; }

/* 缩略条：当前案例这一组，选中张橙框。只有 1 张时整条隐藏（JS 控制） */
.v2-cs-lb-thumbs{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  margin:18px auto 0; max-width:84vw;
}
.v2-cs-lb-thumbs button{
  width:72px; height:54px; padding:0; overflow:hidden; position:relative;
  border:2px solid transparent; border-radius:10px; background:#fff;
  cursor:pointer; opacity:.5;
  transition:opacity .3s var(--v2-ease),border-color .3s var(--v2-ease),transform .3s var(--v2-ease);
  box-shadow:0 4px 14px rgba(20,20,30,.10);
}
.v2-cs-lb-thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.v2-cs-lb-thumbs button:hover{ opacity:.82; transform:translateY(-2px); }
.v2-cs-lb-thumbs button.on{ opacity:1; border-color:var(--v2-brand); }

.v2-cs-lb-counter{
  position:absolute; top:34px; left:44px;
  font-family:var(--v2-mono); font-size:14px; letter-spacing:.1em; color:var(--v2-ink-3);
}
.v2-cs-lb-counter b{ color:var(--v2-ink); }
.v2-cs-lb-counter u{ margin-left:8px; text-decoration:none; }
.v2-cs-lb-x, .v2-cs-lb-nav{
  position:absolute; z-index:3; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--v2-ink); background:#fff; border:1px solid var(--v2-line);
  box-shadow:0 8px 24px rgba(20,20,30,.12);
  transition:background .3s var(--v2-ease),color .3s var(--v2-ease),
             border-color .3s var(--v2-ease),transform .3s var(--v2-ease);
}
/* ★ z-index:3 不能省：stage（图 + 缩略条 + 说明）在 DOM 里排在按钮之后，
   同层级下 stage 会盖住箭头。桌面宽视口图两侧留白足够、看不出问题，
   一旦视口收窄（768 平板 / 390 手机），图宽逼近视口宽 → 箭头被压在照片底下点不到。 */
.v2-cs-lb-x:hover, .v2-cs-lb-nav:hover{ background:var(--v2-brand); border-color:var(--v2-brand); color:#fff; }
.v2-cs-lb-x{ top:26px; right:34px; width:46px; height:46px; border-radius:50%; font-size:20px; line-height:1; }
.v2-cs-lb-nav{ top:50%; width:52px; height:52px; border-radius:50%; transform:translateY(-50%); font-size:18px; }
.v2-cs-lb-nav:hover{ transform:translateY(-50%) scale(1.06); }
.v2-cs-lb-nav.prev{ left:34px; }
.v2-cs-lb-nav.next{ right:34px; }

/* ---------- 响应式（与 v2-pg 的 1080 / 760 / 480 三档同节奏） ---------- */
@media (max-width:1080px){
  .v2-cs-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
}
@media (max-width:760px){
  .v2-cs-grid{ gap:16px; }
  .v2-cs-metrics .v2-pg-metrics{ padding:60px 0; }
  .v2-cs-lb-x{ top:16px; right:18px; width:40px; height:40px; }
  .v2-cs-lb-counter{ top:22px; left:20px; font-size:13px; }
  .v2-cs-lb-counter u{ display:none; }          /* 窄屏先腾地方，位置信息由缩略条本身表达 */
  /* 窄屏箭头必然落在照片上（图宽逼近视口宽），改用半透明白底，别用实心白块挡内容 */
  .v2-cs-lb-nav{
    width:38px; height:38px; font-size:15px;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .v2-cs-lb-nav.prev{ left:10px; }
  .v2-cs-lb-nav.next{ right:10px; }
  .v2-cs-lb-stage img{ max-width:90vw; max-height:52vh; border-radius:12px; }
  .v2-cs-lb-thumbs{ gap:8px; margin-top:14px; }
  .v2-cs-lb-thumbs button{ width:58px; height:44px; border-radius:8px; }
  .v2-cs-lb-info{ margin-top:18px; }
  .v2-cs-lb-info h3{ font-size:17px; }
  .v2-cs-lb-info p{ font-size:13px; }
}
@media (max-width:480px){
  .v2-cs-grid{ grid-template-columns:1fr; }
  .v2-cs-badge, .v2-cs-shots{ height:24px; font-size:11px; }
}

/* ==========================================================================
   售后服务页 · /Home/Service
   --------------------------------------------------------------------------
   取向：**全页不用卡片、不用阴影**，只靠「编号 + 细线 + 大留白」组织信息，
   把服务当成一份可逐条核对的清单。

   首屏 = 全幅实景 + 压暗层，骨架整套复用产品中心页 / 案例页。
   ★ 因此本页**必须**在 _Layout 的 _isNavHero 名单里 —— 否则白色实心导航会压在
     深色照片上（导航要跟首页、案例页一样是悬浮胶囊）。

   复用（未新增）的现有类：
     .v2-pg-hero(+ -bg / -empty / -scroll) .v2-hero-inner .v2-crumb .v2-hero-title
     .v2-hero-lede .v2-ctas .v2-pg-wrap .v2-eyebrow .v2-idx .v2-title
     .v2-btn(-solid/-ghost-w)   .v2-reveal(+[data-d])
   ========================================================================== */

/* ---------- 章节头 ---------- */
.v2-sv-head{ margin-bottom:56px; }
.v2-sv-head .v2-title{ margin-bottom:16px; }
.v2-sv-sub{ font-size:16.5px; line-height:1.85; color:var(--v2-ink-2);
  max-width:660px; margin:0; }

/* ==========================================================================
   1 · 首屏：全幅实景 + 压暗层
   --------------------------------------------------------------------------
   骨架与产品中心页 / 案例页完全同构，所以这一节只剩两样真正属于自己的东西：
     ① 压暗层（照片是实景，白字要有底）② 紧贴下沿的深色数据条
   ★ 替换点：把售后 / 产线实拍覆盖到 ~/images/v2/service-hero.jpg 即可，不用改代码。
     建议 ≥2560×1440（16:9）。铺满是 object-fit:cover，窄屏裁掉左右两侧，主体别贴边。
   ========================================================================== */
/* 压暗层数值与首页 .v2-slide-overlay、案例页 .v2-cs-hero-mask **逐字相同**
   （2026-10-08 三改起为「椭圆柔光：46% 平顶 .66 → 100% 圆滑归零，无 mask-image」），
   三个页面的首屏观感才是一套语言 */
.v2-sv-hero-mask{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:none; }
.v2-sv-hero .v2-pg-hero-bg img{ object-position:center 55%; }

/* 首屏下沿紧贴的深色数据带：细线分隔 + 白字，延续「不用卡片」的语言。
   与首屏压暗层同色系 → 看上去像首屏往下延伸了一段，而不是另起一块。
   ★ 不叫 strip：效果稿 A 案有个同名的 v2-sv-strip（压在照片上的承诺条），
     两者同名不同义，改名避开（A 案已归档，但同名最容易被后来者搞混）。 */
.v2-sv-stats{ background:#0f1014; }
.v2-sv-stats-in{ display:grid; grid-template-columns:repeat(4,1fr); padding:44px 0 46px; }
.v2-sv-figure{ padding:0 34px; border-left:1px solid rgba(255,255,255,.14); }
.v2-sv-figure:first-child{ border-left:0; padding-left:0; }
.v2-sv-figure .n{ display:block; font-family:var(--v2-mono); font-weight:600;
  font-size:clamp(28px,3vw,38px); line-height:1; letter-spacing:-.04em; color:#fff; }
.v2-sv-figure .n small{ font-size:.44em; margin-left:.2em; color:var(--v2-brand); }
.v2-sv-figure .l{ display:block; margin-top:11px; font-size:13px; letter-spacing:.08em;
  color:rgba(255,255,255,.52); }

/* ==========================================================================
   2 · 服务清单：编号 + 标题 + 说明（只有细线，无卡片无阴影）
   ========================================================================== */
.v2-sv-list-sec{ padding:110px 0 0; }
.v2-sv-list{ border-top:1px solid var(--v2-ink); margin-top:8px; }
.v2-sv-row{ display:grid; grid-template-columns:88px 300px 1fr; gap:40px;
  padding:30px 0; border-bottom:1px solid var(--v2-line); align-items:baseline;
  transition:padding-left .4s var(--v2-ease); }
.v2-sv-row:hover{ padding-left:14px; }
.v2-sv-row-no{ font-family:var(--v2-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.1em; color:var(--v2-ink-3); transition:color .35s var(--v2-ease); }
.v2-sv-row:hover .v2-sv-row-no{ color:var(--v2-brand); }
.v2-sv-row h3{ margin:0; font-size:20px; font-weight:700; color:var(--v2-ink);
  letter-spacing:-.012em; }
.v2-sv-row h3 i{ font-style:normal; display:inline-block; margin-left:10px;
  vertical-align:2px; height:22px; padding:0 10px; border-radius:var(--v2-pill);
  background:var(--v2-brand-tint); color:var(--v2-brand);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; line-height:22px; }
.v2-sv-row p{ margin:0; font-size:15px; line-height:1.85; color:var(--v2-ink-2); }

/* ==========================================================================
   3 · 服务流程：mono 小字 + 细线 + 小圆点
   ========================================================================== */
.v2-sv-flow{ padding:96px 0 0; }
.v2-sv-flow-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:12px; }
.v2-sv-flow-grid::before{ content:""; position:absolute; left:5px; right:calc(25% - 5px);
  top:5px; height:1px; background:var(--v2-line); }
.v2-sv-flow-item{ padding-right:34px; position:relative; }
.v2-sv-flow-dot{ position:relative; z-index:1; width:11px; height:11px; border-radius:50%;
  background:#fff; border:1px solid var(--v2-ink-3); margin-bottom:26px;
  transition:background .4s var(--v2-ease), border-color .4s var(--v2-ease); }
.v2-sv-flow-item:hover .v2-sv-flow-dot{ background:var(--v2-brand);
  border-color:var(--v2-brand); }
.v2-sv-flow-k{ font-family:var(--v2-mono); font-size:12px; letter-spacing:.14em;
  color:var(--v2-ink-3); }
.v2-sv-flow-item h3{ margin:12px 0 10px; font-size:18px; font-weight:700;
  color:var(--v2-ink); letter-spacing:-.012em; }
.v2-sv-flow-item p{ margin:0; font-size:14.5px; line-height:1.8; color:var(--v2-ink-2); }

/* ==========================================================================
   4 · 收尾全幅带：把 CTA 直接压进图里
   ========================================================================== */
.v2-sv-band{ position:relative; margin-top:110px; height:540px; overflow:hidden;
  background:#0e1014; display:flex; align-items:center; }
.v2-sv-band-img{ position:absolute; inset:0; }
.v2-sv-band-img img{ width:100%; height:100%; object-fit:cover; object-position:center 54%; }
.v2-sv-band::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(8,9,12,.9) 0%,rgba(8,9,12,.6) 46%,rgba(8,9,12,.22) 100%); }
.v2-sv-band-in{ position:relative; z-index:2; }
.v2-sv-band h2{ margin:0 0 16px; font-size:clamp(28px,3.4vw,42px); font-weight:900;
  line-height:1.24; color:#fff; letter-spacing:.01em; max-width:16em; }
.v2-sv-band p{ margin:0 0 34px; font-size:16.5px; line-height:1.85;
  color:rgba(255,255,255,.72); max-width:560px; }

/* ==========================================================================
   5 · 常见问题：左右两栏（左栏吸顶）
   ========================================================================== */
.v2-sv-faq{ padding:104px 0; background:#fff; }
.v2-sv-faq-grid{ display:grid; grid-template-columns:.76fr 1.24fr; gap:72px;
  align-items:start; }
.v2-sv-faq-aside{ position:sticky; top:112px; }
.v2-sv-faq-card{ margin-top:32px; padding:26px 28px; border-radius:20px;
  background:var(--v2-bg-soft); }
.v2-sv-faq-card b{ display:block; font-size:15px; font-weight:700; color:var(--v2-ink);
  margin-bottom:6px; }
.v2-sv-faq-card p{ margin:0 0 16px; font-size:14px; line-height:1.7;
  color:var(--v2-ink-2); }
.v2-sv-faq-card a{ display:block; font-family:var(--v2-mono); font-size:15.5px;
  font-weight:600; color:var(--v2-brand); text-decoration:none; letter-spacing:-.01em; }
.v2-sv-faq-card a + a{ margin-top:6px; }

/* 手风琴：用 grid-template-rows 0fr→1fr 做高度动画，不用 max-height 猜数值。
   不支持该特性的浏览器会忽略这两条声明 → 视为一直展开，降级方向是安全的。 */
.v2-sv-qa{ border-top:1px solid var(--v2-line); }
.v2-sv-item{ border-bottom:1px solid var(--v2-line); }
.v2-sv-q{ width:100%; display:flex; align-items:center; gap:20px; padding:26px 0;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--v2-font); font-size:17px; font-weight:600; color:var(--v2-ink);
  letter-spacing:-.01em; transition:color .3s var(--v2-ease); }
.v2-sv-q:hover{ color:var(--v2-brand); }
.v2-sv-q .no{ flex:0 0 auto; font-family:var(--v2-mono); font-size:13px;
  font-weight:600; color:var(--v2-ink-3); }
.v2-sv-item.on .v2-sv-q .no{ color:var(--v2-brand); }
.v2-sv-q .t{ flex:1; }
.v2-sv-q .ic{ flex:0 0 30px; position:relative; width:30px; height:30px;
  border-radius:50%; background:var(--v2-bg-soft);
  transition:background .35s var(--v2-ease), transform .45s var(--v2-ease); }
.v2-sv-q .ic::before, .v2-sv-q .ic::after{ content:""; position:absolute;
  left:50%; top:50%; background:var(--v2-ink-2); border-radius:1px;
  transform:translate(-50%,-50%);
  transition:background .35s var(--v2-ease), transform .4s var(--v2-ease); }
.v2-sv-q .ic::before{ width:11px; height:1.6px; }
.v2-sv-q .ic::after{ width:1.6px; height:11px; }
.v2-sv-item.on .v2-sv-q .ic{ background:var(--v2-brand); }
.v2-sv-item.on .v2-sv-q .ic::before,
.v2-sv-item.on .v2-sv-q .ic::after{ background:#fff; }
/* ★ 展开态要把竖笔收掉变成「−」。只写 transform:rotate(90deg) 是没用的 ——
   加号转 90° 还是加号，展开/收起在视觉上完全一样（截图才发现）。 */
.v2-sv-item.on .v2-sv-q .ic::after{ transform:translate(-50%,-50%) scaleY(0); }
.v2-sv-a{ display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--v2-ease); }
.v2-sv-item.on .v2-sv-a{ grid-template-rows:1fr; }
.v2-sv-a > div{ overflow:hidden; }
.v2-sv-a p{ margin:0; padding:0 46px 28px 43px; font-size:15.5px; line-height:1.9;
  color:var(--v2-ink-2); }

/* ==========================================================================
   6 · 响应式（1080 / 760 / 480，与案例页同一套断点）
   ========================================================================== */
@media (max-width:1080px){
  /* 2 列时中间那条竖线要撤掉一条（4 项排 2×2） */
  .v2-sv-stats-in{ grid-template-columns:repeat(2,1fr); gap:34px 0; padding:40px 0 42px; }
  .v2-sv-figure{ padding:0 24px; }
  .v2-sv-figure:nth-child(3){ border-left:0; padding-left:0; }

  .v2-sv-row{ grid-template-columns:64px 1fr; gap:24px; }
  .v2-sv-row p{ grid-column:2; }
  /* 2 列时那条横线会从第二列中间穿过去 —— 撤掉 */
  .v2-sv-flow-grid{ grid-template-columns:repeat(2,1fr); gap:44px 0; }
  .v2-sv-flow-grid::before{ display:none; }

  .v2-sv-faq{ padding:80px 0; }
  .v2-sv-faq-grid{ grid-template-columns:1fr; gap:44px; }
  .v2-sv-faq-aside{ position:static; }
}

@media (max-width:760px){
  .v2-sv-head{ margin-bottom:36px; }
  .v2-sv-sub{ font-size:15.5px; }
  .v2-sv-figure{ padding:0 18px; }
  .v2-sv-list-sec{ padding:80px 0 0; }
  .v2-sv-row{ grid-template-columns:1fr; gap:12px; padding:26px 0; }
  .v2-sv-row p{ grid-column:1; }
  .v2-sv-flow{ padding:72px 0 0; }
  .v2-sv-flow-grid{ grid-template-columns:1fr; gap:34px 0; }
  /* 全幅带改成上图下文的流式：压暗换成纵向渐变，字才压得住 */
  .v2-sv-band{ margin-top:80px; height:auto; padding:76px 0; }
  .v2-sv-band::after{ background:linear-gradient(180deg,rgba(8,9,12,.78),
    rgba(8,9,12,.9)); }
  .v2-sv-faq{ padding:64px 0; }
  .v2-sv-q{ font-size:15.5px; padding:22px 0; gap:14px; }
  .v2-sv-a p{ padding:0 0 24px 32px; font-size:14.5px; }
}

@media (max-width:480px){
  /* ★ 不要塌成 1 列：4 项竖排会把这条带撑到 390px 高，一个屏的一大半没了。
     锁在 2×2（1080 断点已设好，这里只收紧内边距与字号）。 */
  .v2-sv-stats-in{ gap:28px 0; padding:32px 0 34px; }
  .v2-sv-figure{ padding:0 14px; }
  .v2-sv-figure .n{ font-size:28px; }
  .v2-sv-figure .l{ font-size:12px; }
  .v2-sv-row h3 i{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .v2-sv-row{ transition:none; }
}

/* ==========================================================================
   关于禄存页 · /Home/About   ·   联系我们页 · /Home/Contact
   --------------------------------------------------------------------------
   两页共用一段骨架，前缀分别是 v2-ab- / v2-cp-，都只属于各自那一页。

   取向（沿用产品中心页 / 案例页 / 售后页已定的语言）：
     · 首屏 = 全幅实景 + 压暗层，骨架整套复用
       （.v2-pg-hero / -bg / -empty / -scroll + .v2-hero-inner / .v2-crumb /
         .v2-hero-title / .v2-hero-lede / .v2-ctas），压暗层数值与
         .v2-sv-hero-mask、.v2-cs-hero-mask、首页 .v2-slide-overlay 完全一致 ——
         五个页面的首屏观感必须是一套语言。
     · 正文区全浅色，不用卡片、不用阴影，只靠「编号 + 细线 + 大留白」组织信息。
     · 深色只出现在两处：① 首屏照片自身的压暗层 ② 紧贴首屏下沿的数据带。

   ★ 这两页的首屏都是全幅实景 → **必须**在 _Layout 的 _isNavHero 名单里
     （已加入），否则白色实心导航会压在照片上。
   ========================================================================== */

/* ---------- 共用 · 首屏压暗层 ----------
   数值与 .v2-slide-overlay / .v2-cs-hero-mask / .v2-sv-hero-mask **逐字相同**（判据会比对）。
   2026-10-08：旧档位「0 .82 → 46% .52 → 100% .16」与
   后续那版「0~46% 恒定 .66 矩形平板」**都已废**，现为
   「椭圆柔光：46% 平顶 .66 → 100% 圆滑归零，无 mask-image」。原因见 .v2-slide-overlay 上方那段。
   ★ 旧注释说「改浅它会同时暴露放大损失」—— 那条**仍然成立，但只对右侧**：
     这两页的首屏图只有 1500~1700 宽（站内 ≥2200 的实拍只剩 T2/T3，已给售后页和案例页），
     新档位把右侧半屏提亮了 16~26，等于把放大后的柔化**露出来**了。
     ⇒ 根治办法依旧是换一张 ≥2560 宽、且**不带文字**的实拍（见下方断点的同一条结论）。
     当前取舍：宁可照片软一点，也不要整屏发闷。 */
.v2-ab-hero-mask,
.v2-cp-hero-mask{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:none;
}
/* 两张图的主体都在画面中下部（产线俯视 / 前台门头），纵向锚点统一往下压一点 */
.v2-ab-hero .v2-pg-hero-bg img{ object-position:center 54%; }
.v2-cp-hero .v2-pg-hero-bg img{ object-position:center 58%; }

/* ---------- 关于页 · 紧贴首屏下沿的深色数据带 ----------
   与售后页 .v2-sv-stats 是同一个构造（深底 + 细线分隔 + 白字）。
   ★★ 类名必须是 --band，不能叫 --stats。
      〔2026-09-18 的事故〕这里曾写成 .v2-ab-stats —— 那是**首页**「关于禄存科技」
      数字条的名字（白底深字）。这条无作用域的 background:#0f1014 把首页整条染黑，
      而首页作用域里的 ink 覆盖优先级更高 → 黑底深字、整条读不出来。
      〔2026-09-24 现状〕首页那条 `.v2-ab-stats` 已随「值得信赖的温度校准专家」
      并入「关于禄存科技」而**废弃**（改用 .v2-stats-grid）。也就是说这个重名源
      现在没有了 —— 但 `--band` 这个名字继续保留（改名没有收益，只会增加连带风险）。
   ⇒ 规矩不变：写 CSS 前先把新类名在**整份 v2.css 与全部视图**里搜一遍再定名。 */
.v2-ab-band{ background:#0f1014; }
/* 3 项而不是 4 项：第 4 项会让「24 通道」与下面的 .v2-pg-metrics 撞车 ——
   原「核心技术能力」和「为什么选择我们」就是把同一件事写了两遍，这一轮在消这种重复。 */
.v2-ab-band-in{ display:grid; grid-template-columns:repeat(3,1fr); padding:44px 0 46px; }
.v2-ab-figure{ padding:0 34px; border-left:1px solid rgba(255,255,255,.14); }
.v2-ab-figure:first-child{ border-left:0; padding-left:0; }
.v2-ab-figure .n{ display:block; font-family:var(--v2-mono); font-weight:600;
  font-size:clamp(28px,3vw,38px); line-height:1; letter-spacing:-.04em; color:#fff; }
.v2-ab-figure .n small{ font-size:.44em; margin-left:.2em; color:var(--v2-brand); }
.v2-ab-figure .l{ display:block; margin-top:11px; font-size:13px; letter-spacing:.08em;
  color:rgba(255,255,255,.52); }

/* ---------- 共用 · 左对齐章节头 ----------
   v2.css 现成的 .v2-head-center 是居中版；两页的章节头一律左对齐
   （编辑式排版靠左对齐的编号 + 细线起头），所以补一个左对齐版。
   ★ 有意做成**跨页共享**而不是各页一份：它描述的是版式位置，不是某一页的内容。 */
.v2-sec-head{ margin-bottom:56px; }
.v2-sec-head .v2-title{ margin-bottom:16px; }
.v2-sec-sub{ font-size:16.5px; line-height:1.85; color:var(--v2-ink-2); max-width:660px; margin:0; }

/* ==========================================================================
   关于禄存 · 1 公司简介
   ========================================================================== */
.v2-ab-intro{ background:#fff; padding:112px 0 0; }
.v2-ab-intro-grid{ display:grid; grid-template-columns:.86fr 1.14fr; gap:86px; align-items:start; }
.v2-ab-intro-grid .v2-title{ font-size:clamp(30px,3.6vw,44px); letter-spacing:-.02em; }
.v2-ab-intro-lead{ font-size:17px; line-height:1.9; color:var(--v2-ink); margin:0 0 22px; }
.v2-ab-intro-body{ font-size:15.5px; line-height:1.95; color:var(--v2-ink-2); margin:0 0 18px; }
.v2-ab-intro-body:last-of-type{ margin-bottom:0; }
/* 品牌名在正文里出现时给一点重量，但不上色（正文里的橙色会显得像链接） */
.v2-ab-intro-body b{ color:var(--v2-ink); font-weight:700; }
/* 左侧那列吸顶：右列正文比它长，滚到一半只剩右列会显得左边空 */
.v2-ab-intro-aside{ position:sticky; top:112px; }

/* 关键数字：与产品中心页的 .v2-pg-metrics 同一构造。
   那边是「上边框 + 下边框」夹住一行，这里在页尾收口 → 去掉下边框。 */
.v2-ab-metrics .v2-pg-metrics{
  margin-top:76px; padding:56px 0 0;
  border-top:1px solid var(--v2-line); border-bottom:0;
}

/* ==========================================================================
   关于禄存 · 2 核心技术能力（编辑式编号行，无卡片无阴影）
   --------------------------------------------------------------------------
   ★ 这一节合并了原来两个区块：「核心技术能力」+「为什么选择我们」。
     两组 8 条里有 6 条是同一件事换个说法（高精度 ×2、实时监控 ×2、智能算法 ×2），
     并排放在同一页等于自己重复两遍。合并后 5 条，只保留后者独有的「简单易用」。
   ========================================================================== */
.v2-ab-tech{ background:var(--v2-bg-soft); padding:112px 0 122px; margin-top:112px; }
.v2-ab-rows{ border-top:1px solid var(--v2-ink); }
/* ★ 凡是同时挂 .v2-reveal（淡入）和自定义 transition（悬停位移）的元素，
   都必须把所有要过渡的属性一起列出来。
   原因：.v2-reveal 的 transition 与这些选择器**特异性相同**，
   后者在 v2.css 里更靠后 → 会**整条覆盖** .v2-reveal 的 opacity/transform 过渡，
   结果淡入变成瞬间硬切。headless 截图会强制补 .in，所以这个坑在截图里看起来正常，
   只有真浏览器能看到。本段受影响的一共三处：.v2-ab-row / .v2-ab-yr / .v2-ab-app。 */
.v2-ab-row{ display:grid; grid-template-columns:88px 300px 1fr; gap:40px;
  padding:30px 0; border-bottom:1px solid var(--v2-line); align-items:baseline;
  transition:padding-left .4s var(--v2-ease),
             opacity .6s var(--v2-ease), transform .6s var(--v2-ease); }
.v2-ab-row:hover{ padding-left:14px; }
.v2-ab-row-no{ font-family:var(--v2-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.1em; color:var(--v2-ink-3); transition:color .35s var(--v2-ease); }
.v2-ab-row:hover .v2-ab-row-no{ color:var(--v2-brand); }
.v2-ab-row h3{ margin:0; font-size:20px; font-weight:700; color:var(--v2-ink); letter-spacing:-.012em; }
.v2-ab-row p{ margin:0; font-size:15px; line-height:1.85; color:var(--v2-ink-2); }

/* ==========================================================================
   关于禄存 · 3 应用行业（2 列编辑式网格）
   --------------------------------------------------------------------------
   6 段文案长短不一（第 3 段最长、第 6 段最短）。
   ★ 排成 2 列而不是 6 行通栏：通栏时每段要占满 1280px 宽、单行 90+ 字，读起来是
     一堵墙，整节还会拉到 1400px 高以上。2 列后单行 ~55 字，节高砍掉一半，
     扫读顺序仍是 01→06（grid 从左到右、从上到下）。
   ★ 网格顶部一条**深色**横线起头，其下每一项是浅色横线 —— 与 .v2-ab-rows
     同一套「深线起、浅线分」的语言。首行两项的横线去掉，否则会和深线叠成双线。 */
.v2-ab-apps{ background:#fff; padding:112px 0 122px; }
.v2-ab-apps-brand{ display:block; color:var(--v2-ink); font-weight:700; margin-bottom:6px; }
.v2-ab-apps-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:72px;
  border-top:1px solid var(--v2-ink); }
.v2-ab-app{ border-top:1px solid var(--v2-line); padding:34px 0 38px;
  transition:border-color .35s var(--v2-ease),
             opacity .6s var(--v2-ease), transform .6s var(--v2-ease); }
/* 首行两项：网格自己的深线已经在头顶了，再去掉各自的上边框 */
.v2-ab-app:nth-child(1),
.v2-ab-app:nth-child(2){ border-top:0; padding-top:38px; }
.v2-ab-app:hover{ border-top-color:var(--v2-brand); }
.v2-ab-app-h{ display:flex; align-items:baseline; gap:14px; margin-bottom:11px; }
.v2-ab-app-no{ font-family:var(--v2-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.1em; color:var(--v2-ink-3); transition:color .35s var(--v2-ease); }
.v2-ab-app:hover .v2-ab-app-no{ color:var(--v2-brand); }
.v2-ab-app-h h3{ margin:0; font-size:20px; font-weight:700; color:var(--v2-ink);
  letter-spacing:-.012em; }
/* 品类标签：细橙短线起头 + mono 小字。用短横线而不是 pill，
   是因为年表里「最新」已经用了 pill，同一页两种 pill 会互相削弱。 */
.v2-ab-app-tag{ display:flex; align-items:center; gap:9px;
  font-family:var(--v2-mono); font-size:12px; letter-spacing:.06em;
  color:var(--v2-ink-3); margin-bottom:15px; }
.v2-ab-app-tag::before{ content:""; width:16px; height:1px; flex:0 0 auto; background:var(--v2-brand); }
.v2-ab-app p{ margin:0; font-size:15px; line-height:1.9; color:var(--v2-ink-2); }
/* ★ 应用行业 · 描述先折 2 行（超出显示 …），点「展开全文」再看全部。
   三个"为什么"：
   ① 折行写在 CSS、按钮交给 JS —— CSS 是默认态，首屏不会"先铺全文、再缩回 2 行"；
      脚本万一没跑，版面仍是整齐的 2 行（视图里另有 <noscript> 兜底退回全文）。
   ② 用 -webkit-line-clamp 而不是 JS 截字符串 —— 截断点由渲染算，
      栏宽 / 字号 / 中英混排怎么变都对；且 DOM 里文本保持完整，
      搜索引擎、Ctrl+C、读屏拿到的都是全文，只是视觉上折了起来。
   ③ 拆成两个类 —— .v2-ab-app p 管排版（字号 / 行高 / 颜色），
      .v2-ab-app-desc 只管"折几行"，以后改行数不必碰排版规则。
   注意：这条选择器带 p，特异性 (0,1,1)，不会被 .v2-ab-app p 顶掉；
   写 .v2-ab-app-desc 单独一个类则可能被同段排版规则覆盖。 */
.v2-ab-app p.v2-ab-app-desc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
/* 展开态：取消折行。显式写 display:block（而不是 unset），
   免得残留的 -webkit-box 影响段落后续元素的基线对齐 */
.v2-ab-app p.v2-ab-app-desc.is-open{
  display:block; overflow:visible; -webkit-line-clamp:unset;
}
/* 展开 / 收起按钮：13.5px 属小字，用 #C4520A（白底 4.61:1）而不是品牌橙 #E8660F（3.31:1），
   与本页其它"浅底橙字"写法一致（见新闻列表 .v2-nw-feat-a:hover） */
.v2-ab-app-more{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:13px; padding:0; border:0; background:none;
  font-family:inherit; font-size:13.5px; font-weight:700; line-height:1;
  color:#C4520A; cursor:pointer;
  transition:color .25s var(--v2-ease);
}
/* ★ 必须显式写这条：作者样式表的 display:inline-flex 会盖掉 [hidden] 的
   UA 规则 display:none —— 少了它，宽屏下按钮会"该藏没藏" */
.v2-ab-app-more[hidden]{ display:none; }
/* hover 也只加深、不换成品牌橙 —— 同 L3237 那条约定：#E8660F 当字色白底仅 3.31:1，
   小字不达标。--v2-brand-deep(#C9510A) 是 4.50:1，深浅看起来几乎没差。 */
.v2-ab-app-more:hover{ color:var(--v2-brand-deep); }
.v2-ab-app-more:focus-visible{ outline:2px solid var(--v2-brand); outline-offset:3px; border-radius:3px; }
/* 箭头：一个 45° 小折角，展开时翻过来（朝上） */
.v2-ab-app-more::after{
  content:""; width:6px; height:6px; flex:0 0 auto;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s var(--v2-ease);
}
.v2-ab-app-more[aria-expanded="true"]::after{ transform:translateY(1px) rotate(-135deg); }
/* 第 6 项末尾的细分场景：原文是一串顿号，拆成标签扫读更快 */
.v2-ab-app-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.v2-ab-app-chips span{
  padding:5px 13px; border:1px solid var(--v2-line); border-radius:var(--v2-pill);
  font-size:12.5px; color:var(--v2-ink-2); line-height:1.5;
  transition:border-color .3s var(--v2-ease), color .3s var(--v2-ease);
}
.v2-ab-app:hover .v2-ab-app-chips span{ border-color:rgba(232,102,15,.3); }

/* ==========================================================================
   关于禄存 · 4 发展历程（填充轴线年表）
   --------------------------------------------------------------------------
   ★ 为什么是轴线而不是"每行一条下边框"：
     后者是一叠行，读不出时间在走。这里 .v2-ab-tl 上一根**连续轴线**，9 个年份共用它；
     轴线随滚动由橙线填充（.v2-ab-tl-prog 的 height 由页尾脚本算），
     节点跟着亮 —— 线 + 节点一起构成"走过多少"的读数。
   ★ 轴线本身**不能挂 .v2-reveal**：它是稳定结构，年份行才随进场淡入。
   ★ 年份必须正序（2006 在顶 / 2026 在底）：线由上往下长 = 时间往前走。
   --------------------------------------------------------------------------
   节点定位的算法（别手调，一调就错）：
     .v2-ab-tl 的 padding-left 是 --ab-pad（默认 64px），轴线 width:1px 在 left:0，
       所以轴线中线 x = 0.5；年份行内容盒左边缘 x = --ab-pad。
     ::before 的 left 相对**行**的左边缘 → 要让 9px 圆的中线落在 0.5：
       圆中线相对行 = 0.5 − pad  ⇒  left = 0.5 − pad − 4.5 = −(pad + 4)
       ⇒ left:calc(-1 * var(--ab-pad) - 4px)
     ★ 用变量而不是写死 -68px：窄屏要把 --ab-pad 收成 40px，写死就会让节点偏离轴线。
       悬停时行只改 padding-left，盒子左边缘不动 → 节点不会跑。
   ========================================================================== */
.v2-ab-years{ background:var(--v2-bg-soft); padding:112px 0 122px; }
.v2-ab-tl{ --ab-pad:64px; position:relative; padding-left:var(--ab-pad);
  border-top:1px solid var(--v2-ink); }
/* 轴线用 #e4e4ea 而不是令牌 --v2-line(#eeeef2)：本节底色是 --v2-bg-soft(#f6f6f8)，
   两者只差 8 个灰阶，1px 的线在 1x 下几乎看不见。轴线是这一节的结构脊柱，
   它要是看不见，整段就退回成"一叠行"了 —— 那正是这一版要修掉的问题。 */
.v2-ab-tl-axis{ position:absolute; left:0; top:8px; bottom:8px; width:1px; background:#e4e4ea; }
/* 填充线盖在轴线上，用橙色渐变：顶部亮、往下稍深，暗示"还在生长" */
.v2-ab-tl-prog{ position:absolute; left:0; top:8px; width:1px; height:0;
  background:linear-gradient(180deg,var(--v2-brand),var(--v2-brand-deep)); }

/* 阶段分组行：小字 + 一条细线拉满 + mono 年份区间 */
.v2-ab-era{ display:flex; align-items:center; gap:16px; padding:38px 0 10px; }
.v2-ab-era:first-of-type{ padding-top:30px; }
.v2-ab-era b{ font-size:13px; font-weight:700; letter-spacing:.28em; color:var(--v2-ink-3); }
.v2-ab-era i{ flex:1 1 auto; height:1px; background:#e4e4ea; }  /* 同轴线：浅底上 --v2-line 太淡 */
.v2-ab-era em{ font-family:var(--v2-mono); font-style:normal; font-size:12px;
  letter-spacing:.06em; color:var(--v2-ink-3); }

.v2-ab-yr{ position:relative; display:grid; grid-template-columns:132px 1fr; gap:40px;
  padding:24px 0;
  transition:padding-left .4s var(--v2-ease),
             opacity .6s var(--v2-ease), transform .6s var(--v2-ease); }
.v2-ab-yr:hover{ padding-left:12px; }
/* 轴上的节点 */
.v2-ab-yr::before{
  content:""; position:absolute; left:calc(-1 * var(--ab-pad) - 4px); top:32px;
  width:9px; height:9px; border-radius:50%; background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--v2-ink-3);
  transition:box-shadow .4s var(--v2-ease), background .4s var(--v2-ease);
}
.v2-ab-yr.in::before{ box-shadow:inset 0 0 0 1.5px var(--v2-ink-2); }
/* ★ .lit 由页尾脚本按填充线位置加：线长到哪，走过的年份就实心。
   规则顺序很重要（三者的特异性都是 0,2,0，靠先后定胜负）：
     .in（已进场，环稍深）→ .lit（已被线越过，橙实心）→ :hover（橙实心）→ .is-now（橙实心 + 光晕）
   所以 .lit 必须排在 :hover 之前、.is-now 之前。 */
.v2-ab-yr.lit::before{ background:var(--v2-brand);
  box-shadow:inset 0 0 0 1.5px var(--v2-brand); }
.v2-ab-yr:hover::before{ background:var(--v2-brand);
  box-shadow:inset 0 0 0 1.5px var(--v2-brand); }
/* 最新一年：常驻橙实心 + 橙色光晕，整段只有它带色 */
.v2-ab-yr.is-now::before,
.v2-ab-yr.is-now:hover::before{ background:var(--v2-brand);
  box-shadow:inset 0 0 0 1.5px var(--v2-brand), 0 0 0 5px var(--v2-brand-tint); }

.v2-ab-yr-y{ font-family:var(--v2-mono); font-size:29px; font-weight:600;
  letter-spacing:-.035em; line-height:1; color:var(--v2-ink-3);
  transition:color .35s var(--v2-ease); }
.v2-ab-yr:hover .v2-ab-yr-y{ color:var(--v2-brand); }
.v2-ab-yr.is-now .v2-ab-yr-y{ color:var(--v2-brand); }
.v2-ab-yr-b{ min-width:0; }
.v2-ab-yr.is-now h3::after{
  content:"最新"; display:inline-block; margin-left:12px; vertical-align:2px;
  height:22px; padding:0 10px; border-radius:var(--v2-pill);
  background:var(--v2-brand-tint); color:var(--v2-brand);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; line-height:22px;
}
.v2-ab-yr h3{ margin:0 0 8px; font-size:19px; font-weight:700; color:var(--v2-ink); letter-spacing:-.012em; }
.v2-ab-yr p{ margin:0; font-size:15px; line-height:1.85; color:var(--v2-ink-2); }

/* ==========================================================================
   联系我们 · 1 在线留言（左说明 + 右表单）
   ========================================================================== */
/* ★ 底色改浅灰（--v2-bg-soft）：与上方首屏（深色实景）形成缓冲，
   也与下方「我们的位置」（白色）拉开层次，整页不再是连续两段白。 */
.v2-cp-form{ background:var(--v2-bg-soft); padding:112px 0 0; }
.v2-cp-form-grid{ display:grid; grid-template-columns:.84fr 1.16fr; gap:84px; align-items:start; }
.v2-cp-form-grid .v2-title{ font-size:clamp(30px,3.6vw,42px); letter-spacing:-.02em; margin-bottom:16px; }
.v2-cp-form-note{ font-size:16.5px; line-height:1.9; color:var(--v2-ink-2); margin:0 0 44px; }

/* 直连方式：编辑式两栏小表，不用卡片（与「我们的位置」同一套语言） */
.v2-cp-quick{ border-top:1px solid var(--v2-ink); }
.v2-cp-quick-row{ display:grid; grid-template-columns:104px 1fr; gap:20px;
  padding:18px 0; border-bottom:1px solid var(--v2-line); align-items:baseline; }
.v2-cp-quick-k{ font-family:var(--v2-mono); font-size:12px; font-weight:600;
  letter-spacing:.12em; color:var(--v2-ink-3); }
.v2-cp-quick-v{ font-size:15.5px; color:var(--v2-ink); font-weight:600; text-decoration:none;
  transition:color .25s var(--v2-ease); }
a.v2-cp-quick-v:hover{ color:var(--v2-brand); }
.v2-cp-quick-v small{ display:block; margin-top:5px; font-size:13.5px; font-weight:400;
  color:var(--v2-ink-3); letter-spacing:0; }

/* 表单：输入框数值与产品明细页询盘弹窗 .pd-mrow 保持一致
   （12px 圆角 / 1px 边框 / focus 橙色 3px 光晕），但 .pd- 是弹窗专用前缀，
   跨页复用会让以后改弹窗的人误伤联系页，所以在 v2-cp- 命名空间里重写一份。 */
.v2-cp-fields{ background:var(--v2-bg-soft); border-radius:24px; padding:38px 38px 34px; }
.v2-cp-frow{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.v2-cp-field{ margin-bottom:18px; }
.v2-cp-field label{ display:block; font-size:13px; font-weight:600; color:var(--v2-ink); margin-bottom:8px; }
.v2-cp-field .req{ color:var(--v2-brand); font-weight:800; }
.v2-cp-field input,
.v2-cp-field textarea{
  width:100%; box-sizing:border-box; padding:13px 15px;
  border:1px solid #e2e4e9; border-radius:12px; background:#fff;
  font-size:14.5px; color:var(--v2-ink); font-family:inherit; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.v2-cp-field textarea{ resize:vertical; min-height:132px; line-height:1.75; }
.v2-cp-field input::placeholder,
.v2-cp-field textarea::placeholder{ color:#b6b9c0; }
.v2-cp-field input:focus,
.v2-cp-field textarea:focus{ border-color:var(--v2-brand); box-shadow:0 0 0 3px var(--v2-brand-tint); }
.v2-cp-submit{ width:100%; margin-top:6px; }
/* 提交结果留在页面上（不再 5 秒自动隐藏）—— 访客需要明确看到到底成没成 */
.v2-cp-msg{ display:none; margin-top:16px; padding:13px 16px; border-radius:12px;
  font-size:14px; line-height:1.7; }
.v2-cp-msg.ok{ display:block; background:rgba(24,160,88,.09); color:#14804a; }
.v2-cp-msg.err{ display:block; background:rgba(214,60,48,.08); color:#c0322a; }
.v2-cp-privacy{ margin:16px 0 0; font-size:12.5px; line-height:1.7; color:var(--v2-ink-3); }
/* 表单下方那句话里的《隐私政策》链接（2026-09-24 建隐私政策页时一起加的）。
   ★ 用 --v2-brand-deep 而非 --v2-brand：品牌橙在浅底只有 3.31:1，12.5px 下不达标。
   ★ 保留下划线：**不让颜色单独承载「这是链接」**（色觉障碍下也要认得出）。
   ★ 这里的容器色仍是 --v2-ink-3（原有样式，本轮只加链接、没动它）—— 那是「辅助说明」的既有约定。
     `.v2-cp-privacy` 目前**全站只有「联系我们」页这一处**使用（grep 已确认），
     所以想整句提高对比度是可控的；但那属于改设计 = 改契约，要单独确认，不顺手带上。 */
.v2-cp-privacy a{
  color:var(--v2-brand-deep); font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; text-decoration-color:rgba(201,81,10,.45);
}
.v2-cp-privacy a:hover{ text-decoration-color:currentColor; }

/* ==========================================================================
   联系我们 · 2 三个据点 + 地图
   --------------------------------------------------------------------------
   ★ 这里合并了原来重复的两处地址切换：上方的「查看地图 →」按钮组
     和下方的地图 tab（三条地址文字原本也完整重复了两遍）。
     现在只有一处：左边可点选的据点清单，右边地图跟着切。
   ========================================================================== */
/* ★ 底色从 --v2-bg-soft 改回白色：原来「我们的位置」与页脚用的是同一个
   --v2-bg-soft(#f6f6f8)，两块同色且直接相邻，中间没有任何分隔，
   视觉上糊成一整块、看不出页脚从哪开始。改白后与上方留言区同底，
   靠 margin-top 的大留白做分隔，页脚再以自身 border-top 起头。 */
.v2-cp-places{ background:var(--v2-bg); padding:112px 0 122px; margin-top:112px; }
.v2-cp-places-grid{ display:grid; grid-template-columns:1fr 1.08fr; gap:64px; align-items:start; }

.v2-cp-list{ border-top:1px solid var(--v2-ink); }
/* ★ 是 div[role=button] 而不是 <button>：行内要放可拨号的 tel: 链接，
   HTML 规范不允许 <button> 里嵌交互内容（<a href>），Chrome 下那种嵌套会让电话点不动。
   键盘可达性由视图里的 keydown（回车 / 空格）补上。 */
.v2-cp-place{
  display:block; width:100%; text-align:left; font-family:var(--v2-font); color:inherit;
  background:none; border:0; border-bottom:1px solid var(--v2-line); cursor:pointer;
  padding:24px 0 24px 0; position:relative;
  transition:padding-left .4s var(--v2-ease);
}
.v2-cp-place:hover{ padding-left:12px; }
.v2-cp-place:focus-visible{ outline:2px solid var(--v2-brand); outline-offset:2px; }
/* 选中态：左侧一道橙竖条 + 标题变橙。竖条用 ::before 而不是 border-left，
   否则切换时整行会横向跳 2px */
.v2-cp-place::before{
  content:""; position:absolute; left:-16px; top:24px; bottom:24px; width:2px;
  background:var(--v2-brand); opacity:0; transition:opacity .35s var(--v2-ease);
}
.v2-cp-place.on::before{ opacity:1; }
.v2-cp-place-h{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
/* 标题用 <span class="h3"> 而不是真 <h3>：<span> 在外层才能保证整行可点区域不断
   （<span> 里套 <h3> 的块级元素会被浏览器拆开），字号字重在这里补齐。 */
.v2-cp-place-h .h3{ font-size:20px; font-weight:700; color:var(--v2-ink);
  letter-spacing:-.012em; transition:color .35s var(--v2-ease); }
.v2-cp-place.on .v2-cp-place-h .h3{ color:var(--v2-brand); }
.v2-cp-place-chip{
  display:inline-flex; align-items:center; height:22px; padding:0 10px;
  border-radius:var(--v2-pill); background:var(--v2-brand-tint); color:var(--v2-brand);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; line-height:1;
}
.v2-cp-place-row{ display:grid; grid-template-columns:60px 1fr; gap:16px; margin-top:9px; }
.v2-cp-place-k{ font-family:var(--v2-mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--v2-ink-3); line-height:1.8; }
.v2-cp-place-v{ font-size:15px; line-height:1.75; color:var(--v2-ink-2); }
.v2-cp-place-v a{ color:var(--v2-ink); font-weight:600; text-decoration:none;
  font-family:var(--v2-mono); letter-spacing:-.01em; transition:color .25s var(--v2-ease); }
.v2-cp-place-v a:hover{ color:var(--v2-brand); }

/* 地图：高德 JS API 的容器。坐标与初始化全部在视图的 @section Scripts 里 */
.v2-cp-map{ position:sticky; top:112px; }
.v2-cp-map-canvas{
  position:relative; height:536px; border-radius:24px; overflow:hidden; background:#e8ebef;
}
.v2-cp-map-note{ margin:16px 0 0; font-size:13px; line-height:1.75; color:var(--v2-ink-3); }

/* ==========================================================================
   响应式（1080 / 760 / 480，与案例页、售后页同一套断点）
   ========================================================================== */
@media (max-width:1080px){
  .v2-ab-band-in{ grid-template-columns:repeat(2,1fr); gap:34px 0; padding:40px 0 42px; }
  .v2-ab-figure{ padding:0 24px; }
  .v2-ab-figure:nth-child(3){ border-left:0; padding-left:0; }

  .v2-ab-intro{ padding:80px 0 0; }
  .v2-ab-intro-grid{ grid-template-columns:1fr; gap:40px; }
  .v2-ab-intro-aside{ position:static; }
  .v2-ab-metrics .v2-pg-metrics{ margin-top:56px; }

  .v2-ab-tech{ padding:80px 0 88px; margin-top:80px; }
  .v2-ab-row{ grid-template-columns:64px 1fr; gap:24px; }
  .v2-ab-row p{ grid-column:2; }

  /* 应用行业：2 列 → 1 列。
     ★ 1 列后「首行两项无上边框」的例外只剩第一项，第 2 项的边框要还回来，
       否则第 1、2 项之间会少一条分隔线（2 列时它们并排，不需要分隔）。 */
  .v2-ab-apps{ padding:80px 0 88px; }
  .v2-ab-apps-grid{ grid-template-columns:1fr; column-gap:0; }
  .v2-ab-app:nth-child(2){ border-top:1px solid var(--v2-line); padding-top:34px; }

  .v2-ab-years{ padding:80px 0 88px; }
  .v2-ab-tl{ --ab-pad:52px; }

  .v2-cp-form{ padding:80px 0 0; }
  .v2-cp-form-grid{ grid-template-columns:1fr; gap:52px; }

  .v2-cp-places{ padding:80px 0 88px; margin-top:80px; }
  .v2-cp-places-grid{ grid-template-columns:1fr; gap:48px; }
  /* 单列后地图在上、清单在下更自然：先看到"在哪"，再读细节 */
  .v2-cp-map{ position:static; order:-1; }
  .v2-cp-map-canvas{ height:400px; }
}

@media (max-width:760px){
  /* ★ 移动端首屏压暗层：横向渐变 → 纵向加深（数值贴近 .v2-sv-band 在 ≤760 用的 .78→.9）。
     为什么必须换掉，说得具体一点：
       .v2-pg-hero 在 ≤760 是 height:78vh，390×844 视口下约 390×658，宽高比 0.59，
       远窄于源图（1.78）。object-fit:cover 的缩放系数 = max(390/W, 658/H)，
         联系页 1502×845 → max(.26, .78) = .78  → 缩放后高正好 658，**纵向零余量**
         关于页 1704×958 → max(.23, .69) = .69  → 同理
       ⇒ 移动端改 object-position 的纵向锚点**完全无效**（没有溢出可推），
         横向推又会让画面只剩一堵墙。
       而横向渐变在窄屏上等于"整个屏幕都在最亮那一端"：
         实测标题区背景均亮 关于 46 / 联系 88 —— 联系页那张前台照正中的
         「深圳市禄存科技有限公司」全名直接顶在「联系我们」标题下面。
       换成纵向 .76→.88 后：关于 27/σ10.4、联系 43/σ6.1，两页标题区都干净了。
     ★ 另一条路是横向推 object-position，**已经试过并否决**，别再试：
       推 0% 后标题区均亮确实从 89 降到 64，但 σ 反而从 29.8 升到 33.6 ——
       源图左侧（玻璃门 / 墙棱）本身也有结构，只是把"压着的字"换成了"压着的墙棱"。
     ⚠ 真正的根治办法是换一张**不带文字**的实拍（≥2560×1440）。 */
  .v2-slide-overlay,
  .v2-cs-hero-mask,
  .v2-sv-hero-mask,
  .v2-ab-hero-mask,
  .v2-cp-hero-mask{
    background:none;
  }

  /* ★ 2026-10-08 三改：本断点五个压暗层**统一**走「纵向加深」（原来只有 ab/cp 两页）。
     基础规则已换成**椭圆柔光**（radial-gradient，两维自带羽化）：椭圆在窄屏会被压扁成
     "只盖住文字左半"的形状（水平半径 48%×390≈187px，而文字一直排到 x≈366）
     ⇒ 窄屏必须换成整屏纵向加深才够。
     ★ 原来那条「把五个类的 mask-image 置 none」**已删** —— 基础规则不再有 mask-image，
       留着就是死规则，还会让后人误以为仍有羽化耦合。 */

  .v2-ab-figure{ padding:0 18px; }
  .v2-sec-head{ margin-bottom:36px; }
  .v2-sec-sub{ font-size:15.5px; }
  .v2-ab-row{ grid-template-columns:1fr; gap:12px; padding:26px 0; }
  .v2-ab-row p{ grid-column:1; }

  .v2-ab-app-h{ gap:11px; margin-bottom:10px; }
  .v2-ab-app-h h3{ font-size:18px; }
  .v2-ab-app p{ font-size:14.5px; line-height:1.85; }

  /* ★ 轴线内边距收窄时，节点位置必须跟着走 —— 它读的是同一个 --ab-pad 变量，
     所以这里只改变量、不动 left（见上面的定位算法注释）。 */
  .v2-ab-tl{ --ab-pad:40px; }
  .v2-ab-era{ gap:12px; padding:32px 0 8px; }
  .v2-ab-era b{ font-size:12px; letter-spacing:.22em; }
  .v2-ab-era em{ font-size:11px; }
  .v2-ab-yr{ grid-template-columns:1fr; gap:10px; padding:22px 0; }
  .v2-ab-yr-y{ font-size:24px; }
  .v2-ab-yr::before{ top:30px; }   /* 年份缩到 24px → 节点跟着上移到年份的视觉中线 */
  .v2-ab-yr h3{ font-size:17.5px; }
  .v2-ab-yr p{ font-size:14.5px; }

  .v2-cp-form-note{ font-size:15.5px; margin-bottom:32px; }
  .v2-cp-quick-row{ grid-template-columns:84px 1fr; gap:14px; }
  .v2-cp-fields{ padding:26px 22px 24px; border-radius:20px; }
  .v2-cp-frow{ grid-template-columns:1fr; gap:0; }
  .v2-cp-field input, .v2-cp-field textarea{ font-size:16px; }  /* ≥16px 才不会触发 iOS 聚焦缩放 */
  .v2-cp-place::before{ left:-10px; }
  .v2-cp-place-row{ grid-template-columns:52px 1fr; gap:12px; }
  .v2-cp-map-canvas{ height:320px; border-radius:18px; }
}

@media (max-width:480px){
  /* ★ 3 项在窄屏保持**一行 3 列**，不要沿用 1080 断点的 2 列：
     2 列时第 3 项会落单成半行，下面白多出近 100px 空白 ——
     这一节只是首屏下沿的一条带，撑高它等于把首屏以下的内容整段往下推。
     实测 390 宽下每列 130px、内容宽约 106px，28px 的「1000+」放得下。 */
  .v2-ab-band-in{ grid-template-columns:repeat(3,1fr); gap:0; padding:32px 0 34px; }
  .v2-ab-figure{ padding:0 12px; }
  /* 3 列时第 3 项回到右侧，左边框要还回来（1080 断点为 2 列把它去掉了） */
  .v2-ab-figure:nth-child(3){ border-left:1px solid rgba(255,255,255,.14); padding-left:12px; }
  .v2-ab-figure .n{ font-size:26px; }
  .v2-ab-figure .l{ font-size:11.5px; letter-spacing:.04em; }

  .v2-ab-app{ padding:28px 0 30px; }
  .v2-ab-app-chips{ gap:6px; margin-top:14px; }
  .v2-ab-app-chips span{ padding:4px 11px; font-size:12px; }

  .v2-ab-yr.is-now h3::after{ display:none; }
  .v2-ab-metrics .v2-pg-metrics{ padding:40px 0 0; }
}

@media (prefers-reduced-motion:reduce){
  .v2-ab-row, .v2-ab-yr, .v2-cp-place, .v2-ab-app{ transition:none; }
}

/* ==== NEWS-V2 BEGIN ==================================================
   新闻资讯列表页 / 新闻详情页的专有样式。
   ------------------------------------------------------------------
   ★ 这一段由 _ui-redesign-preview/_news-drafts/newsv2.css 追加生成。
     **不要直接在这里改** —— 下次重新追加会把你的改动覆盖掉。
     要改：改那个源文件，再跑 _news-drafts/_append_to_v2css.py。
   ★ 这段的 BEGIN / END 标记不是装饰：_verify_news_ns.py 靠它
     把本稿自己的样式从"站点既有类名"里剥出去，否则落地后重跑会报
     一堆"自己撞自己"的假红。删掉标记会让那道校验失效。
   ★ 想看这段改了什么：文件末尾的说明，或 _news-drafts/README 那节。
   ================================================================== */

/* ==========================================================================
   新闻资讯 / 新闻详情 · v2 效果稿样式
   --------------------------------------------------------------------------
   本文件只写**新闻两页专有**的类：v2-nw-*（列表）/ v2-nd-*（详情）。
   共用件一律沿用真实 Content/v2.css 里已有的，不在这里重复定义：
     .v2-pg / .v2-pg-wrap / .v2-wrap
     .v2-pg-hero / .v2-pg-hero-bg / .v2-hero-inner / .v2-crumb
     .v2-hero-title / .v2-hero-lede / .v2-ctas / .v2-pg-scroll
     .v2-eyebrow / .v2-idx / .v2-title / .v2-sec-head / .v2-sec-sub
     .v2-btn / .v2-btn-solid / .v2-btn-ghost-w / .v2-btn-sm
     .v2-pg-cta / .v2-pg-cta-actions / .v2-pg-cta-note / .v2-reveal

   ★★ 落地到真实 v2.css 之前，必须先把 v2-nw- / v2-nd- 在全站视图里搜一遍。
      2026-09-18 首页那条数字被染黑，就是因为给关于页的新区块起了个
      和首页 `.v2-ab-stats` 同名的类 —— 撞名的表现是
      「结构、语法、控制台全都正常，只有那一块颜色不对」，最难查的一类。
      〔2026-09-24〕首页那个类已废弃（并入 .v2-stats-grid），但这条规矩对
      任何新类名照样成立：重名的对象不一定还在，重名的代价一直都在。
   ========================================================================== */

/* ══════════════════════ 列表页 · 1 首屏 ══════════════════════ */

/* 压暗层：横向保证左侧文字可读，纵向底部再压一道，
   让下滑箭头和下一段白色区域之间的过渡不生硬。
   ★ 底图 images/cp_bg.jpg 本身是**暗调**厂房照（大面积暗部 + 上方一条黄色行车），
     第一版按关于页 / 联系页的档位压（.90/.66/.30 + .50/.14/.82）直接塌成一块黑，
     图完全看不出来。这里整体调轻：
       横向最右只留 .12（图上能看清行车与钢索）
       纵向顶部 .28（避免与导航胶囊的白色打架，但也不压死） */
.v2-nw-hero-mask{
  position:absolute; inset:0; z-index:1;
  background:none;
}

/* ══════════════════════ 列表页 · 2 分类筛选条 ══════════════════════ */

.v2-nw-tabs{ background:#fff; border-bottom:1px solid var(--v2-line); }
.v2-nw-tabs-in{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:40px;
  padding:30px 0 0;
}
.v2-nw-tab{
  position:relative; display:inline-flex; align-items:baseline; gap:8px;
  padding:4px 0 18px; text-decoration:none;
  font-size:16.5px; font-weight:800; letter-spacing:.01em;
  color:var(--v2-ink-3); transition:color .25s var(--v2-ease);
}
.v2-nw-tab .n{
  font-family:var(--v2-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.06em; color:var(--v2-ink-3); transition:color .25s var(--v2-ease);
}
.v2-nw-tab:hover{ color:var(--v2-ink-2); }
.v2-nw-tab:hover .n{ color:var(--v2-ink-2); }
.v2-nw-tab.on{ color:var(--v2-ink); }
.v2-nw-tab.on .n{ color:var(--v2-brand); }
.v2-nw-tab.on::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--v2-brand); border-radius:2px;
}
/* 筛选条右侧的说明，与 tab 同一基线 */
.v2-nw-tabs-note{
  margin:0 0 18px auto; font-size:13px; color:var(--v2-ink-3);
  font-family:var(--v2-mono); letter-spacing:.04em;
}

/* ══════════════════════ 列表页 · 3 头条横幅（G · 品牌橙） ══════════════════════

   ★ 2026-09-18 第三版，用户定稿「品牌橙」。三版演进 ——
       v1 深墨底 #0f1014            → 被否（用户原话：「不要这种黑色的背景」）
       v2 纯白底大图 + 白卡骑出 88px → 也否（不黑了，但仍是"一个盒子"的观感）
       v3 本版：浅橙渐变底 + 左文右图 + 白边相框 + 实心橙按钮
     五版非黑对照稿见 `_feat_variants2.html`（D~H），本版是其中的 G。

   ★ 为什么这版站得住：
     - 与 v1 深色版正好是两个极端 —— v1 靠「压暗」强调，这版靠「发暖」强调。
       全站其他页（关于 / 服务 / 案例）都是浅色编辑部调性，**暖色底比深色底连贯**。
     - 品牌识别度最高：底色 = 品牌色的两个极浅色阶，按钮 = 品牌色实心。
     - 白边相框是全篇唯一的装饰，且它承担结构功能 ——
       浅橙底上直接放图会糊成一片，10px 白边把图和底分开，省掉一层阴影。

   ⚠⚠ 橙色底上**不能用品牌橙当正文色**：#E8660F 在 #FFEDE0 上对比度只有 2.6:1，
       远低于 WCAG AA 的 4.5:1。正文一律用暖褐 #6b5a49（6.2:1 ✓）。
       品牌橙只允许出现在两处：① 胶囊标签的深橙字 #C4520A（5.0:1 ✓）
       ② 实心按钮的白字。**改这一块时别再往输入框里加 --v2-brand 当文字色。**
*/
.v2-nw-feat{
  background:linear-gradient(135deg,#FFF7F1 0%,#FFEDE0 100%);
  padding:92px 0 100px;
}
.v2-nw-feat-a{ display:block; color:inherit; text-decoration:none; }
.v2-nw-feat-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(44px,6vw,80px); align-items:center;
}
.v2-nw-feat-main{ min-width:0; }

/* 标签：浅橙底 + 深橙字。
   ⚠ 与详情页首屏那枚 .v2-nw-chip（实心橙 + 白字）**不是同一个东西，不要合并**：
     那枚要压在暗色照片上，必须够实才不会糊；这枚在浅橙底上，
     做实心橙会和底色打架，所以走「同色系浅底」这条路。 */
.v2-nw-feat-tag{
  display:inline-flex; align-items:center;
  margin-bottom:24px; padding:8px 16px; border-radius:100px;
  background:rgba(232,102,15,.13); color:#C4520A;
  font-size:11.5px; font-weight:800; letter-spacing:.14em;
}
.v2-nw-feat-title{
  margin:0 0 22px; font-size:clamp(27px,2.9vw,42px); font-weight:900;
  line-height:1.2; letter-spacing:-.025em; color:#1a1206;
  transition:color .3s var(--v2-ease);
  /* ★ 中文标题必须开断行均衡：16 字的「炉温测试仪在半导体行业的应用突破」
     在窄栏里会卡出一行只剩两三个字。balance 让浏览器在**不增加行数**的前提下
     把各行排等宽；不支持时降级为普通断行，不影响可用性。
     ⚠ 它只按宽度均衡、**不认词边界** —— 「半导体」这类词仍可能被拆开。
       这是浏览器的中文断行限制，不是这里写错了，别去"修"。 */
  text-wrap:balance;
}
/* hover 的橙字用 #C4520A 而不是 --v2-brand：#E8660F 在浅橙底上对比度 2.6:1，
   hover 时标题变浅色反而更难读 —— 这是个"越 hover 越糊"的陷阱。 */
.v2-nw-feat-a:hover .v2-nw-feat-title{ color:#C4520A; }
.v2-nw-feat-desc{
  margin:0 0 36px; max-width:30em;
  font-size:16px; line-height:1.9; color:#6b5a49;
  text-wrap:balance;
}
.v2-nw-feat-btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:16px 30px; border-radius:3px;
  background:var(--v2-brand); color:#fff;
  font-size:15px; font-weight:800;
  box-shadow:0 16px 34px -16px rgba(232,102,15,.85);
  transition:gap .3s var(--v2-ease), transform .3s var(--v2-ease);
}
.v2-nw-feat-btn svg{ flex:none; }
.v2-nw-feat-a:hover .v2-nw-feat-btn{ gap:17px; transform:translateY(-2px); }

/* 白边相框：用 box-shadow 画边框而**不用 border** ——
   border 占布局，图会被挤小 10px 且宽高比失真；box-shadow 不占布局，
   图能贴到容器边，白边向外扩。 */
.v2-nw-feat-img{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:#eef0f3;
  box-shadow:0 0 0 10px #fff, 0 34px 64px -30px rgba(60,30,10,.45);
}
.v2-nw-feat-img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--v2-ease);
}
.v2-nw-feat-a:hover .v2-nw-feat-img img{ transform:scale(1.05); }

/* ══════════════════════ 列表页 · 4 分类列表 ══════════════════════ */

.v2-nw-block{ padding:96px 0 104px; }
/* 交替底色用**显式类**，不用 :nth-of-type —— 后者数的是"同级第几个 section"，
   前面 hero / 筛选条 / 头条横幅各加一个 section，整条页面的白灰节奏就会翻反，
   而且改动页面结构时会静默错位。 */
.v2-nw-block.alt{ background:#F6F6F8; }
.v2-nw-block-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding-bottom:26px;
  border-bottom:1px solid var(--v2-line);
}
.v2-nw-block-head .v2-title{ font-size:clamp(24px,2.4vw,30px); }
.v2-nw-block-count{
  font-family:var(--v2-mono); font-size:12.5px; letter-spacing:.08em;
  color:var(--v2-ink-3); padding-bottom:6px;
}
.v2-nw-list{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:52px 30px; margin-top:44px;
}

/* 卡片：不用阴影卡片盒，靠图 + 细信息条 + 留白组织（与全站 v2 一致） */
.v2-nw-card{ display:block; text-decoration:none; color:inherit; }
.v2-nw-card-img{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:#E8E8EA; border-radius:3px;
}
.v2-nw-card-img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .65s var(--v2-ease);
}
.v2-nw-card:hover .v2-nw-card-img img{ transform:scale(1.055); }
.v2-nw-card-meta{ display:flex; align-items:center; gap:13px; margin:22px 0 13px; }
.v2-nw-cat{
  font-size:11px; font-weight:800; letter-spacing:.1em;
  color:var(--v2-brand);
}
.v2-nw-date{
  font-family:var(--v2-mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--v2-ink-3);
}
.v2-nw-card-title{
  font-size:18px; font-weight:800; line-height:1.52; color:var(--v2-ink);
  margin:0 0 12px; transition:color .25s var(--v2-ease);
}
.v2-nw-card:hover .v2-nw-card-title{ color:var(--v2-brand); }
.v2-nw-card-desc{
  font-size:14.5px; line-height:1.78; color:var(--v2-ink-2); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.v2-nw-empty{
  grid-column:1/-1; padding:90px 20px; text-align:center;
  color:var(--v2-ink-3); font-size:15px;
}

/* 卡片进场延迟：按列循环三档。
   用 nth-child 而不是 .v2-reveal[data-d="n"] —— 视图里是 @foreach 渲染的，
   用 data-d 就得让每个循环都算一遍索引（Razor 在 @foreach 的标记上下文里
   不能直接写 `i++`，得包 @{ }），多一处出错点、且换列数时三处要一起改。
   这里和案例页 .v2-cs-grid 用的是同一招（见 v2.css 里那段注释）。 */
.v2-nw-list > .v2-reveal:nth-child(3n+2){ transition-delay:90ms; }
.v2-nw-list > .v2-reveal:nth-child(3n+3){ transition-delay:180ms; }

/* 区块头右侧的「查看全部 N 篇」入口。
   条数超过控制器 pageSize（6）时替换掉纯统计文字的 —— 不替换的话，
   第 7 篇以后在首页永远看不到，也没有任何入口能过去。 */
.v2-nw-block-more{
  display:inline-flex; align-items:center; gap:7px;
  margin-bottom:6px; text-decoration:none;
  font-size:13.5px; font-weight:800; color:var(--v2-brand);
  transition:gap .25s var(--v2-ease);
}
.v2-nw-block-more::after{ content:'→'; }
.v2-nw-block-more:hover{ gap:11px; }

/* 头条图缺图时的占位（后台没传封面）：
   不裂图、也不留一块空洞的浅灰块，用品牌字标把相框撑住。 */
.v2-nw-feat-noimg{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--v2-mono); font-size:20px; font-weight:700;
  letter-spacing:.24em; color:#c9c2ba;
}

/* 分页条：只在**单一分类**视图、且页数 > 1 时出现（见 News.cshtml 底部）。
   "全部"视图下两个区块共用同一个 page 参数，排出来的页码对不上任何一边，
   所以那种情况走区块头的「查看全部」入口，不走这里。 */
.v2-nw-pager-wrap{ background:#fff; padding:0 0 96px; }
.v2-nw-pager{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--v2-line);
}
.v2-nw-pager-i{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px; border-radius:3px;
  border:1px solid var(--v2-line); text-decoration:none;
  font-family:var(--v2-mono); font-size:14px; font-weight:700; color:var(--v2-ink-2);
  transition:border-color .25s var(--v2-ease), color .25s var(--v2-ease),
             background .25s var(--v2-ease);
}
.v2-nw-pager-i:hover{ border-color:var(--v2-ink); color:var(--v2-ink); }
.v2-nw-pager-i.on{ background:var(--v2-brand); border-color:var(--v2-brand); color:#fff; }

/* ★ 末尾落单的卡：网格最后一行只剩 1 张时，它右边会空掉整行的 2/3，
   看起来像"页面没加载完"。这里让它铺满整行并横过来（图左信息右）——
   读起来是"最后一条给了更大版面"，而不是"少了一张"。
   落单判据 = :last-child:nth-child(**n**n+1)，**n 必须等于同区间的列数**：
     3 列时（n=3）  3 张 → 3%3=0 ✗ 不触发（刚好一整行）
                     6 张 → 6%3=0 ✗ 不触发（两整行）
                     4 张 → 4%3=1 ✓ 触发
     2 列时（n=2）  4 张 → 4%2=0 ✗ 不触发（两整行）
                     3 张 → 3%2=1 ✓ 触发
   ⚠⚠ 下面两块**必须成对修改**，且 n 必须与同区间的列数一致。
       列数定义在本文件后面：>1080 是默认的 repeat(3,1fr)；
       @media(max-width:1080) 改成 repeat(2,1fr)。≤760 是单列，不存在落单概念。
       ★ 这里踩过一个坑（2026-09-18）：第一版只写了 `min-width:1080px` 一块，
         结果**正好 1080px 宽**时 —— max-width:1080 与 min-width:1080 **同时命中** ——
         网格已经是 2 列，落单判据却按 3 列算，4 张卡被误判成"落单"而铺满整行。
         表现是 1080 档的文档高比 1440 档还多 280px（越窄反而越高）。
         所以三列那块的下界必须是 **1081**（>1080），与 2 列区间严格互补。
   ⚠ 落单卡的 margin 全清零：横排版里行距由 grid 的行分配负责，
     meta 原来那套 22/13 的 margin 会把文字挤到行底。 */
@media (min-width:1081px){
  .v2-nw-list > .v2-nw-card:last-child:nth-child(3n+1){
    grid-column:1 / -1; display:grid;
    grid-template-columns:minmax(300px,420px) 1fr;
    grid-template-rows:repeat(3,1fr);   /* 三等分 → 文字在图片高度上均匀分布 */
    column-gap:42px; align-items:center;
  }
  .v2-nw-list > .v2-nw-card:last-child:nth-child(3n+1) .v2-nw-card-img{
    grid-area:1 / 1 / 4 / 2;            /* 图占满整列、跨完 3 行，高度由 16:10 定 */
  }
  .v2-nw-list > .v2-nw-card:last-child:nth-child(3n+1) .v2-nw-card-meta{
    grid-area:1 / 2; margin:0;
  }
  .v2-nw-list > .v2-nw-card:last-child:nth-child(3n+1) .v2-nw-card-title{
    grid-area:2 / 2; margin:0; font-size:22px;
  }
  .v2-nw-list > .v2-nw-card:last-child:nth-child(3n+1) .v2-nw-card-desc{
    grid-area:3 / 2; -webkit-line-clamp:3; font-size:15px;
  }
}
@media (min-width:761px) and (max-width:1080px){
  .v2-nw-list > .v2-nw-card:last-child:nth-child(2n+1){
    grid-column:1 / -1; display:grid;
    grid-template-columns:minmax(280px,380px) 1fr;
    grid-template-rows:repeat(3,1fr);
    column-gap:34px; align-items:center;
  }
  .v2-nw-list > .v2-nw-card:last-child:nth-child(2n+1) .v2-nw-card-img{
    grid-area:1 / 1 / 4 / 2;
  }
  .v2-nw-list > .v2-nw-card:last-child:nth-child(2n+1) .v2-nw-card-meta{
    grid-area:1 / 2; margin:0;
  }
  .v2-nw-list > .v2-nw-card:last-child:nth-child(2n+1) .v2-nw-card-title{
    grid-area:2 / 2; margin:0; font-size:20px;
  }
  .v2-nw-list > .v2-nw-card:last-child:nth-child(2n+1) .v2-nw-card-desc{
    grid-area:3 / 2; -webkit-line-clamp:3; font-size:15px;
  }
}

/* ══════════════════════ 详情页 · 1 首屏 ══════════════════════ */

/* 详情页首屏用**这篇文章自己的封面图**，所以压暗要更狠一点：
   标题长短不可控，短标题后面也是图，得保证任何图上都读得出来。 */
.v2-nd-hero-mask{
  position:absolute; inset:0; z-index:1;
  background:none;
}
/* 详情页首屏比列表页矮一截：读者是来看文章的，不是来看图的。
   顺带也照顾了图片尺寸 —— 新闻封面是 1600×900，
   若按 100vh（1440 视口下约 900px）铺满，横向要放大 1.11 倍；
   72vh 下只需铺 1440×648，属于缩小，画质只赚不亏。 */
.v2-nd-hero{ height:72vh; min-height:520px; }
.v2-nd-hero .v2-hero-inner{ justify-content:flex-end; padding-bottom:96px; }
.v2-nd-hero .v2-hero-title{ max-width:19em; font-size:clamp(30px,3.9vw,50px); }
.v2-nd-hero-meta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px;
  -webkit-text-stroke:0.5px rgba(6,8,12,.5);
  paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(0,0,0,.92),0 2px 6px rgba(0,0,0,.75);
}
.v2-nd-hero-meta .v2-nw-chip{ letter-spacing:.1em; }
.v2-nd-hero-meta .d{
  font-family:var(--v2-mono); font-size:12.5px; letter-spacing:.1em;
  color:rgba(255,255,255,.64);
}

/* ══════════════════════ 详情页 · 2 正文 ══════════════════════ */

.v2-nd-article{ background:#fff; padding:92px 0 0; }
.v2-nd-inner{ max-width:820px; margin:0 auto; }
.v2-nd-lead{
  font-size:18.5px; line-height:1.95; color:var(--v2-ink);
  border-left:3px solid var(--v2-brand); padding:2px 0 2px 28px;
  margin:0 0 52px;
}
.v2-nd-body{ font-size:16.5px; line-height:1.98; color:var(--v2-ink-2); }
.v2-nd-body p{ margin:0 0 28px; }
.v2-nd-body h3{
  font-size:clamp(20px,2vw,23px); font-weight:900; color:var(--v2-ink);
  line-height:1.4; margin:52px 0 20px;
}
.v2-nd-body strong{ color:var(--v2-ink); font-weight:800; }
.v2-nd-body ul{ list-style:none; padding:0; margin:0 0 30px; }
.v2-nd-body li{
  position:relative; padding-left:24px; margin-bottom:14px; line-height:1.9;
}
.v2-nd-body li::before{
  content:''; position:absolute; left:2px; top:13px;
  width:6px; height:6px; border-radius:50%; background:var(--v2-brand);
}
.v2-nd-body blockquote{
  margin:46px 0; padding:30px 34px; background:#F6F6F8;
  border-left:3px solid var(--v2-brand); border-radius:0 4px 4px 0;
}
.v2-nd-body blockquote p{ margin:0; font-size:16.5px; color:var(--v2-ink); line-height:1.9; }
/* ★★ 富文本正文由后台编辑器生成，图/段落上带着内联 style（如
   style="width:45%; float:left; margin:0 20px 20px 0"）。内联样式优先级最高，
   外面的 CSS 兜不住它 —— 桌面端左右环绕是有意的排版，保留；
   但窄屏必须强制回落成整幅，否则 float + 百分比宽会把正文撑出视口。
   所以这里 **不能只管 max-width，还要在窄屏把 float 打掉**。 */
.v2-nd-body img{ max-width:100%; height:auto; border-radius:8px; }

.v2-nd-foot{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:32px; flex-wrap:wrap; margin:64px 0 0;
  padding-top:34px; border-top:1px solid var(--v2-line);
}
.v2-nd-tags{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.v2-nd-tags .k{
  font-size:12.5px; color:var(--v2-ink-3); letter-spacing:.06em; margin-right:2px;
}
.v2-nd-tag{
  display:inline-block; padding:6px 13px; border-radius:100px;
  background:#F6F6F8; color:var(--v2-ink-2);
  font-size:12.5px; font-weight:600; text-decoration:none;
  transition:background .25s var(--v2-ease), color .25s var(--v2-ease);
}
.v2-nd-tag:hover{ background:#EFEFF2; color:var(--v2-ink); }
.v2-nd-share{ display:flex; align-items:center; gap:11px; position:relative; }
.v2-nd-share .k{ font-size:12.5px; color:var(--v2-ink-3); letter-spacing:.06em; }
.v2-nd-share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--v2-line); background:#fff; color:var(--v2-ink-2);
  cursor:pointer; text-decoration:none;
  transition:all .25s var(--v2-ease);
}
.v2-nd-share-btn:hover{ border-color:var(--v2-ink); color:var(--v2-ink); }
/* 微信二维码：hover / focus 展开。不用第三方分享 SDK —— 那三个
   （twitter / linkedin / facebook）在国内网络下都打不开，等于三个死按钮。 */
.v2-nd-qr{
  position:absolute; right:0; top:calc(100% + 12px); z-index:5;
  width:168px; padding:14px; background:#fff;
  border:1px solid var(--v2-line); border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all .28s var(--v2-ease);
}
/* hover / 键盘聚焦 / 触屏点击三种都能展开 ——
   触屏没有 hover，只写 :hover 的话手机上二维码永远出不来。 */
.v2-nd-share:hover .v2-nd-qr,
.v2-nd-share:focus-within .v2-nd-qr,
.v2-nd-share.wx-on .v2-nd-qr{ opacity:1; visibility:visible; transform:none; }
.v2-nd-qr img{ display:block; width:140px; height:140px; object-fit:contain; }
.v2-nd-qr span{
  display:block; text-align:center; margin-top:9px;
  font-size:12px; color:var(--v2-ink-3);
}
.v2-nd-copied{
  position:absolute; right:0; bottom:calc(100% + 10px); white-space:nowrap;
  padding:7px 12px; border-radius:6px; background:var(--v2-ink); color:#fff;
  font-size:12px; opacity:0; transform:translateY(4px);
  transition:all .25s var(--v2-ease); pointer-events:none;
}
.v2-nd-copied.on{ opacity:1; transform:none; }

/* ══════════════════════ 详情页 · 3 上一篇 / 下一篇 ══════════════════════ */

.v2-nd-pn{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--v2-line); border-bottom:1px solid var(--v2-line);
  margin-top:92px;
}
.v2-nd-pn-item{
  display:flex; flex-direction:column; gap:11px;
  padding:42px 44px; text-decoration:none; color:inherit;
  transition:background .3s var(--v2-ease);
}
.v2-nd-pn-item + .v2-nd-pn-item{ border-left:1px solid var(--v2-line); }
.v2-nd-pn-item:hover{ background:#FAFAFB; }
.v2-nd-pn-item.next{ text-align:right; align-items:flex-end; }
.v2-nd-pn-dir{
  font-family:var(--v2-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--v2-brand);
}
.v2-nd-pn-title{
  font-size:17px; font-weight:800; line-height:1.55; color:var(--v2-ink);
  transition:color .25s var(--v2-ease);
}
.v2-nd-pn-item:hover .v2-nd-pn-title{ color:var(--v2-brand); }
.v2-nd-pn-date{
  font-family:var(--v2-mono); font-size:11.5px; color:var(--v2-ink-3);
}
/* 只有一侧有文章时，另一侧补一个空占位，保持两栏等宽不塌陷 */
.v2-nd-pn-ph{ visibility:hidden; }

/* ══════════════════════ 详情页 · 4 相关推荐 ══════════════════════ */

.v2-nd-rel{ background:#F6F6F8; padding:92px 0 104px; }
.v2-nd-rel-list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:44px 30px; margin-top:44px;
}
.v2-nd-rel-list .v2-nw-card-img{ background:#E4E4E7; }

/* ══════════════════════ 响应式 ══════════════════════ */

@media (max-width:1080px){
  /* 单列：文在上、图在下（图在 HTML 里本来就排在文字之后）。
     ★ 上一版（A 方案）这里踩过一个只有单列档才出现的坑，记下来免得再犯：
       卡片退回 static 后被 position:relative 的图整块盖住 ——
       **static 元素永远画在 positioned 元素之下，与 DOM 顺序无关**。
       表现是「图下面露出一条橙色碎片」，其实是被切掉的标签。
       本版文字是普通文档流、图也不重叠，不存在这个问题。 */
  .v2-nw-feat{ padding:72px 0 78px; }
  .v2-nw-feat-grid{ grid-template-columns:1fr; gap:38px; }
  .v2-nw-list{ grid-template-columns:repeat(2,1fr); gap:44px 26px; }
  .v2-nd-rel-list{ grid-template-columns:repeat(2,1fr); gap:38px 26px; }
  .v2-nw-block{ padding-top:80px; }
}

@media (max-width:760px){
  .v2-nw-tabs-in{ gap:26px; padding-top:22px; }
  .v2-nw-tabs-note{ display:none; }
  .v2-nw-tab{ font-size:15px; padding-bottom:14px; }
  .v2-nw-feat{ padding:64px 0 70px; }
  .v2-nw-feat-title{ font-size:26px; }
  .v2-nw-feat-desc{ font-size:15px; margin-bottom:28px; }
  /* 窄屏白边收细：10px 在 300px 宽的手机图上占比过大，像"贴了张纸" */
  .v2-nw-feat-img{ box-shadow:0 0 0 7px #fff, 0 22px 44px -22px rgba(60,30,10,.4); }
  .v2-nw-list{ grid-template-columns:1fr; gap:38px; margin-top:34px; }
  .v2-nw-block{ padding-top:64px; }
  .v2-nw-block:last-of-type{ padding-bottom:72px; }
  .v2-nd-hero .v2-hero-inner{ padding-bottom:64px; }
  .v2-nd-article{ padding-top:64px; }
  .v2-nd-lead{ font-size:17px; padding-left:20px; margin-bottom:38px; }
  .v2-nd-body{ font-size:16px; }
  .v2-nd-body h3{ margin-top:40px; }
  /* ★ 窄屏必须把富文本里的 float / 百分比宽打掉，否则图会顶出视口 */
  .v2-nd-body img{
    float:none !important; width:100% !important;
    margin:0 0 24px !important; max-width:100% !important;
  }
  .v2-nd-foot{ margin-top:48px; gap:24px; }
  .v2-nd-qr{ right:auto; left:0; }
  .v2-nd-pn{ grid-template-columns:1fr; margin-top:64px; }
  .v2-nd-pn-item + .v2-nd-pn-item{
    border-left:0; border-top:1px solid var(--v2-line);
  }
  .v2-nd-pn-item.next{ text-align:left; align-items:flex-start; }
  .v2-nd-pn-ph{ display:none; }
  .v2-nd-rel{ padding:64px 0 72px; }
  .v2-nd-rel-list{ grid-template-columns:1fr; gap:34px; margin-top:34px; }
}

@media (max-width:480px){
  .v2-nw-feat-title{ letter-spacing:0; }
  .v2-nw-card-title{ font-size:16.5px; }
  .v2-nw-card-desc{ font-size:14px; }
  .v2-nd-pn-item{ padding:30px 22px; }
}

/* ==== NEWS-V2 END ==== */

/* ==== FLOAT-V2 BEGIN ==== 浮动快捷栏（2026-09-20 重做：图标 SVG 化 + 配色对齐 v2）====
   改动三件事：
   ① 三个位图 PNG（电话.png / 关注.png / 向上.png）换成内联 SVG。
      PNG 是固定像素位图，24px 下边缘发糊，而且没法跟着 hover 换颜色 ——
      要换色就得再维护三张彩色版。SVG 用 currentColor，hover 直接变品牌深橙、零额外请求。
   ② 常态图标从「opacity:.7 的近黑」改成实色 #565660（--v2-ink-2）：
      0.7 透明度压在浅底上约等于 #4a4a4a，小图标看着发虚立不住。
      ★ 常态也不用品牌橙：白底上 #E8660F 只有 3.31:1，小图标偏弱；
        要橙就用在 hover，且取深橙 #C9510A（4.61:1）。
   ③ 回顶图标由细 chevron（一个孤零零的「^」）换成「带杆的 ↑」—— 原来那个语义太弱，
      放大看就是一根折线，不放大根本认不出是什么。
   尺寸仍沿用 home.css（桌面 56 / 窄屏 44），这里只覆盖配色与过渡，不改 home.css，
   所以「浮动栏在哪些页面出现」这条契约没动。 */

.float-buttons{ bottom:30px; right:30px; gap:14px; }

.float-item{
  background:#fff;
  border:1px solid rgba(20,20,30,.07);
  box-shadow:0 6px 18px rgba(20,20,30,.08);
  transition:transform .28s var(--v2-ease), box-shadow .28s var(--v2-ease),
             border-color .28s var(--v2-ease), background-color .28s var(--v2-ease);
}
.float-item:hover,
.float-item:focus-visible{
  background:#fff;
  border-color:rgba(232,102,15,.34);
  box-shadow:0 10px 24px rgba(232,102,15,.18);
  transform:translateY(-2px);
}
.float-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(232,102,15,.30), 0 10px 24px rgba(232,102,15,.18);
}
.float-item:active{ transform:translateY(-1px) scale(.96); }

.float-icon{ width:26px; height:26px; color:var(--v2-ink-2); }
.float-icon svg{ width:100%; height:100%; display:block; }
.float-item:hover .float-icon,
.float-item:focus-visible .float-icon{ color:var(--v2-brand-deep); }

/* 回顶的显隐契约仍是 .show（由 _Layout.cshtml 的脚本切换），这里只把过渡做柔一点。
   ★ 不要在这里写 transform —— 上面 .float-item:hover 已经用 transform 做上浮，
     两条规则特异度相同、谁在后面谁赢，混用会让「显隐位移」和「hover 上浮」互相打架。 */
.back-to-top{ transition:opacity .26s var(--v2-ease), visibility .26s var(--v2-ease); }

@media (max-width:768px){
  .float-buttons{ bottom:16px; right:16px; gap:10px; }
  .float-item{ width:44px; height:44px; }
  .float-icon{ width:21px; height:21px; }
}

/* ==== FLOAT-V2 END ==== */

/* ==== BTN-IC ==== 按钮内嵌的小图标（与浮动栏同一套字形）====
   .v2-btn 本身是 inline-flex + gap:8px，所以图标直接塞进 <a> 即可，不用额外定位。
   flex:none 很关键：按钮是 flex 容器，不加的话图标在窄屏会被压扁成椭圆。
   ⚠ 2026-09-24：首页 CTA 里那颗「直拨电话」按钮（唯一带话机图标的按钮）按用户要求删除，
     本类**当前没有任何使用方**。刻意保留 —— 它是通用工具类（按钮 + 小图标），
     且话机字形仍活在 _Layout.cshtml 右下角浮动栏（#phoneFloat），恢复直拨入口时可直接复用。
     ⇒ 所以：`grep -rn "v2-btn-ic"` 只命中本处定义，属**预期状态、不是漏改**。*/
.v2-btn-ic{ width:15px; height:15px; flex:none; display:block; }

/* ==== PRIVACY-PAGE ==== 隐私政策页（2026-09-24 第二十一轮新建 / 第二十二轮改体例）====
   全站唯一一份「告知型 / 文档型」页面，也是**首例没有首屏实景图的内页**：
   文档头是白色平面，靠「大标题 + 三条落款 + 细线」立住，不靠照片。

   ★ 第二十二轮改动（按客户提供的参考件改）：
     ① 正文由「9 条平行条款」改成「5 节 + 小数点子编号」（01 个人数据 / 02 隐私政策 2.1~2.6 /
        03 如何对外提供 3.1~3.7 / 04 政策更新 / 05 如何联系我们）⇒ 左栏目录同步 9 条 → 5 条；
     ② **删除底部深灰联系块**（.v2-pp-foot / -foot-in / -foot h2 / -foot p / -foot-btn 全套），
        联系方式搬进第 05 节正文；
     ③ 新增 .v2-pp-sub（2.1 式小标题）与 .v2-pp-list-num（3.1 式编号列表）两套样式；
     ④ .v2-pp-body 补 padding-bottom —— 页面收尾留白原本由底部联系块的 88px 承担，
        块删了就没人管了（改版式必查相邻区块，本项目铁律 12）。

   ★★ 导航模式：_Layout.cshtml 的 _isNavHero **刻意不含** Home/Privacy ⇒ 本页走
      .v2-nav-solid（白色实心条，66px）。哪天给本页加了深色首屏，必须同时把 Privacy
      加进那个列表，否则白色实心导航会压在深色首屏上（白底白字看不见）。
   ★★ 页面浅色是**设计决定、不是漏做**：全站只有首屏允许深色（项目约定）。
   ★★ 小字交互一律 --v2-brand-deep(#C9510A) 而非 --v2-brand(#E8660F)：
      品牌橙在白底只有 3.31:1，14px 以下不达标；正文灰用 --v2-ink-2(#565660)，
      **不用 --v2-ink-3(#9a9aa2)**（2.59:1，读过这份文件的都知道它只配做装饰件）。
   ============================================================================ */

/* ---- 1 · 文档头 ---- */
.v2-pp-head{ background:#fff; padding:104px 0 0; }   /* 104 = 让开 fixed 导航(66px) + 自有留白 */
/* ⚠ .v2-crumb 的基础样式是 color:rgba(255,255,255,.78) —— 那是给深色首屏写的，
   在白色底上等于白字白底。本页必须覆盖，否则面包屑整条看不见。 */
.v2-pp-head .v2-crumb{ color:var(--v2-ink-2); }
.v2-pp-head-in{ max-width:980px; }
.v2-pp-h1{
  font-size:clamp(34px,4.4vw,58px); font-weight:900; letter-spacing:-.02em;
  line-height:1.12; color:var(--v2-ink); margin:0 0 24px;
}
.v2-pp-h1 .accent{ color:var(--v2-brand); }
.v2-pp-lede{ font-size:16.5px; line-height:1.95; color:var(--v2-ink-2); margin:0; }
.v2-pp-lede strong{ color:var(--v2-ink); font-weight:700; }
.v2-pp-lede b{ color:var(--v2-ink); font-weight:800; }

/* 三条落款：细竖线分隔，与全站的「数据带」同一语言 —— 只是这里装的是文字元信息而非数字 */
.v2-pp-meta{
  display:grid; grid-template-columns:repeat(3,1fr); list-style:none;
  margin:52px 0 0; padding:0;
  border-top:1px solid var(--v2-line); border-bottom:1px solid var(--v2-line);
}
.v2-pp-meta li{ padding:22px 32px 24px 0; }
.v2-pp-meta li + li{ border-left:1px solid var(--v2-line); padding-left:32px; }
.v2-pp-meta span{
  display:block; font-family:var(--v2-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.16em; color:var(--v2-ink-2); margin-bottom:9px;
}
.v2-pp-meta b{ font-size:15.5px; font-weight:700; color:var(--v2-ink); }

/* ---- 2 · 正文：左目录（粘性）+ 右条款 ----
   ★ 容器用默认 align-items:stretch（**不能写 start**），让 .v2-pp-aside 撑满整行高；
     粘性加在内部的 .v2-pp-toc 上。若把 sticky 加在 aside 本身、又给容器 start，
     aside 高度被压成「内容高」，粘性没有可移动空间 = 等于没生效。 */
/* ★ padding-bottom:104px 是第二十二轮补的：初版页面收尾靠底部联系块 .v2-pp-foot 自己的
   88px padding，那块按客户要求删掉后，正文最后一行（第 05 节联系方式）会直接顶到页脚。 */
.v2-pp-body{ background:#fff; padding:88px 0 104px; }
.v2-pp-grid{ display:grid; grid-template-columns:236px 1fr; gap:88px; }

.v2-pp-toc{ position:sticky; top:104px; }
.v2-pp-toc-t{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-family:var(--v2-mono); font-size:11.5px; font-weight:700; letter-spacing:.16em;
  color:var(--v2-ink-2); padding-bottom:14px; border-bottom:1px solid var(--v2-line);
}
.v2-pp-toc-t i{ font-style:normal; letter-spacing:.08em; color:var(--v2-ink-2); }
.v2-pp-toc ol{ list-style:none; margin:6px 0 0; padding:0; }
.v2-pp-toc a{
  position:relative; display:grid; grid-template-columns:28px 1fr; align-items:baseline; gap:8px;
  padding:11px 0; border-bottom:1px solid var(--v2-line); text-decoration:none;
}
.v2-pp-toc a i{
  font-family:var(--v2-mono); font-style:normal; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; color:var(--v2-ink-2); transition:color .2s var(--v2-ease);
}
.v2-pp-toc a span{ font-size:14px; line-height:1.5; color:var(--v2-ink-2); transition:color .2s var(--v2-ease); }
/* 当前条：左侧一根橙色短杠（不改字号 —— 改字号会让整列跳动） */
.v2-pp-toc a::before{
  content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:2px; background:var(--v2-brand);
  transition:height .26s var(--v2-ease);
}
.v2-pp-toc a:hover span, .v2-pp-toc a:hover i{ color:var(--v2-brand-deep); }
.v2-pp-toc a.on span{ color:var(--v2-ink); font-weight:700; }
.v2-pp-toc a.on i{ color:var(--v2-brand-deep); }
.v2-pp-toc a.on::before{ height:18px; }

.v2-pp-doc{ max-width:760px; }
/* 锚点跳转时把条款头让开吸顶导航，否则标题正好被压住 */
.v2-pp-clause{ scroll-margin-top:104px; padding:0 0 54px; margin:0 0 54px; border-bottom:1px solid var(--v2-line); }
.v2-pp-clause:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.v2-pp-no{
  display:inline-block; font-family:var(--v2-mono); font-size:12px; font-weight:700;
  letter-spacing:.18em; color:var(--v2-brand-deep); margin-bottom:12px;
}
.v2-pp-clause h2{
  font-size:clamp(21px,2.1vw,26px); font-weight:800; color:var(--v2-ink);
  line-height:1.35; letter-spacing:-.01em; margin:0 0 18px;
}
.v2-pp-clause p{ font-size:16px; line-height:2; color:var(--v2-ink-2); margin:0 0 18px; }
.v2-pp-clause p:last-child{ margin-bottom:0; }
.v2-pp-clause b, .v2-pp-clause strong{ color:var(--v2-ink); font-weight:700; }
.v2-pp-clause ul{ list-style:none; margin:0 0 20px; padding:0; }
.v2-pp-clause ul li{
  position:relative; padding-left:20px; margin-bottom:10px;
  font-size:15.5px; line-height:1.9; color:var(--v2-ink-2);
}
.v2-pp-clause ul li::before{
  content:""; position:absolute; left:2px; top:.84em; width:5px; height:5px;
  border-radius:50%; background:var(--v2-brand);
}
.v2-pp-clause ul li:last-child{ margin-bottom:0; }

/* 「2.1 / 2.2」式子标题（第 02 节，第二十二轮新增）：编号独立成列，让 2.1 与 2.2.1 的左边缘对齐。
   ★ 用 flex + min-width 而不是「编号写在文字里」，否则 2.1（3 字符）与 2.2.1（5 字符）会错开。 */
.v2-pp-sub{
  display:flex; align-items:baseline; gap:12px;
  font-size:17px; font-weight:800; color:var(--v2-ink);
  line-height:1.5; margin:30px 0 12px;
}
.v2-pp-sub i{
  flex:none; min-width:44px; font-family:var(--v2-mono); font-style:normal;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--v2-brand-deep);
}
/* 「3.1~3.7」式编号列表：把橙色圆点换成行内编号 —— 编号本身就是条号，再配圆点是重复表达。
   ★ 三条必须一起写（padding-left / ::before / i）：只关圆点不收 padding，
     会留下 20px 悬空缩进，看图上很像是「列表没对齐」。 */
.v2-pp-clause ul.v2-pp-list-num li{ padding-left:0; margin-bottom:12px; }
.v2-pp-clause ul.v2-pp-list-num li::before{ display:none; }
.v2-pp-clause ul.v2-pp-list-num li i{
  font-family:var(--v2-mono); font-style:normal; font-size:12.5px; font-weight:700;
  letter-spacing:.06em; color:var(--v2-brand-deep); margin-right:10px;
}

/* 联系方式列表（第二十二轮从被删掉的底部联系块搬进第 05 节正文）。
   ★★ 必须显式关掉 .v2-pp-clause ul li 的橙圆点与 20px 左缩进：它是「标签 | 值」两列 grid，
      圆点会正好叠在标签文字上（本项目铁律 12「改了块的位置必查新邻居」的样式版）。 */
.v2-pp-clause ul.v2-pp-ways{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.v2-pp-clause ul.v2-pp-ways li{
  display:grid; grid-template-columns:84px 1fr; gap:16px; align-items:baseline;
  padding-left:0; margin-bottom:0;
}
.v2-pp-clause ul.v2-pp-ways li::before{ display:none; }
.v2-pp-clause ul.v2-pp-ways span{
  font-family:var(--v2-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; color:var(--v2-ink-2);
}
.v2-pp-clause ul.v2-pp-ways a{
  font-size:16px; font-weight:700; color:var(--v2-ink); text-decoration:none;
  border-bottom:1px solid var(--v2-line); padding-bottom:2px; word-break:break-all;
  transition:color .2s var(--v2-ease), border-color .2s var(--v2-ease);
}
.v2-pp-clause ul.v2-pp-ways a:hover{ color:var(--v2-brand-deep); border-bottom-color:var(--v2-brand); }
.v2-pp-clause ul.v2-pp-ways b{ font-size:15.5px; font-weight:700; color:var(--v2-ink); }
/* 附注：比正文退一档，用左侧细线而不是缩进 —— 缩进在窄屏会被挤成锯齿 */
.v2-pp-note{
  font-size:14.5px !important; line-height:1.85 !important; color:var(--v2-ink-2) !important;
  border-left:2px solid var(--v2-line); padding-left:18px; margin-top:22px !important;
}
/* 信息项两栏卡：靠 gap:1px + 底色做发丝线，比给每格写 border 少一半规则、也不会双线 */
.v2-pp-defs{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--v2-line);
  border:1px solid var(--v2-line); border-radius:14px; overflow:hidden; margin:26px 0 0;
}
.v2-pp-defs > div{ background:#fff; padding:26px 28px 22px; }
.v2-pp-defs .k{
  display:block; font-family:var(--v2-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; color:var(--v2-ink-2); margin-bottom:14px;
}
.v2-pp-defs ul{ margin:0; }
.v2-pp-defs ul li{ font-size:15px; margin-bottom:9px; }
.v2-pp-defs ul li:last-child{ margin-bottom:0; }
/* Cookie 表：名称 / 用途 / 是否必需 */
.v2-pp-cookie{ margin:26px 0 0; border-top:1px solid var(--v2-line); }
.v2-pp-cookie-row{
  display:grid; grid-template-columns:250px 1fr 62px; gap:24px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--v2-line);
}
.v2-pp-cookie-row .n{ font-family:var(--v2-mono); font-size:13px; color:var(--v2-ink); word-break:break-all; }
.v2-pp-cookie-row .d{ font-size:15px; line-height:1.75; color:var(--v2-ink-2); }
.v2-pp-cookie-row .f{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-align:right; color:var(--v2-ink-2); }
.v2-pp-cookie-row .f.req{ color:var(--v2-brand-deep); }

/* ---- 3 · 底部联系块 —— 已于第二十二轮**整体删除** ----
   ★★ 这里原本是「对这份声明有疑问？」的浅灰联系块，客户明确表示不要这一整块。
      删掉后三件事各自有了归属：
        ① 联系方式（邮箱/电话/地址）⇒ 搬进第 05 节正文，样式见上方 .v2-pp-clause ul.v2-pp-ways；
        ② 页面收尾留白          ⇒ 改由 .v2-pp-body 的 padding-bottom 承担；
        ③ 本文件里**不允许再出现 .v2-pp-foot**（产物层判据会扫，见 _clean_privacy_page_20260924.py）。
   ⚠ 该块用过的 --v2-bg-soft 在本页已无使用者 —— 它仍是全站其它区块的公共变量，**别顺手删**。
   ==================================================================== */

/* ---- 断点 ---- */
@media (max-width:1080px){
  /* 目录从「左栏粘性」变成「正文上方的两列清单」：窄屏没有 236px 的边栏可用，
     但也不该整块消失 —— 5 节条款列表本身就是有用的概览。 */
  .v2-pp-grid{ grid-template-columns:1fr; gap:0; }
  .v2-pp-toc{ position:static; margin-bottom:48px; }
  .v2-pp-toc ol{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:32px; }
  .v2-pp-toc a{ padding:10px 0; }
}
@media (max-width:760px){
  .v2-pp-head{ padding-top:88px; }
  .v2-pp-meta{ grid-template-columns:1fr; }
  .v2-pp-meta li{ padding:18px 0; }
  .v2-pp-meta li + li{ border-left:0; border-top:1px solid var(--v2-line); padding-left:0; }
  .v2-pp-body{ padding-top:64px; }
  .v2-pp-toc ol{ grid-template-columns:1fr; }
  .v2-pp-defs{ grid-template-columns:1fr; }
  .v2-pp-defs > div{ padding:22px 20px 18px; }
  .v2-pp-cookie-row{ grid-template-columns:1fr; gap:8px; }
  .v2-pp-cookie-row .f{ text-align:left; }
  /* 「标签 | 值」两列在窄屏会把中文标签折成两行，直接改成上下两行 */
  .v2-pp-clause ul.v2-pp-ways li{ grid-template-columns:1fr; gap:4px; }
}
@media (max-width:480px){
  .v2-pp-clause h2{ font-size:20px; }
  .v2-pp-clause p{ font-size:15.5px; line-height:1.95; }
  .v2-pp-sub{ font-size:16px; }
  .v2-pp-sub i{ min-width:38px; }
}
/* ==== PRIVACY-PAGE END ==== */