/* ==========================================================================
   Happyview 质感升级层 v2.0  (hv-beautify-v2.css)
   方向：Industrial Precision + Editorial —— 暖调工业精密 / 编辑式排版
   --------------------------------------------------------------------------
   本层叠加在 hv-design-system.css 之上，只做三件事：
     1. 色温统一：把散落在旧层里的冷灰蓝(#7c828b/#6b7280/#f8fafc/#f4f6f8/…)
        收敛到一条暖调色阶，消除"暖橙 + 冷灰"的色温打架。
     2. 质感升级：氛围层(噪点/工程网格)、发丝分隔、三级暖阴影、
        卡片 hover 抬升、统计数字与车间编号的字重/描边。
     3. 手感：滚动入场编排(错峰 70ms)、顶部滚动进度条、焦点环、
        prefers-reduced-motion 全面降级。
   回退：本文件与 hv-beautify-v2.js、插件内常量 HV_BEAUTIFY_V 三者构成
        可开关的一层；把 HV_BEAUTIFY_V 置空即回到 v1.0 视觉。
   --------------------------------------------------------------------------
   作用域说明：Elementor 画布 body 无 data-theme，故一律用类钩子
   body.hvp-ds；双写类名(.hvp-ds.hvp-ds)用于稳定赢过旧层特异性。
   ========================================================================== */

:root {
  /* ---- 暖调色阶：替代旧层的冷灰族 ---- */
  --hv2-ink: #1f1e1c;
  --hv2-ink-soft: #35322e;
  --hv2-body: #4a4844;
  --hv2-muted: #6b665f; /* 5.1:1 on #faf9f7，旧 #78746e 仅 4.5:1 擦边 */
  --hv2-faint: #8a8379;
  --hv2-accent: #ee7800;
  --hv2-accent-deep: #c05f00;
  --hv2-accent-soft: #fff6ec;

  /* ---- 暖调表面：替代 #f8fafc / #f4f6f8 / #eef0f3 ---- */
  --hv2-bg: #faf9f7;
  --hv2-band: #f4f2ee;
  --hv2-panel: #f1efeb;
  --hv2-surface: #ffffff;

  /* ---- 暖调线条与阴影：替代 rgba(15,23,42,…) ---- */
  --hv2-line: rgba(31, 30, 28, 0.1);
  --hv2-line-soft: rgba(31, 30, 28, 0.06);
  --hv2-line-strong: rgba(31, 30, 28, 0.17);
  --hv2-shadow-1: 0 1px 2px rgba(31, 30, 28, 0.05), 0 2px 8px rgba(31, 30, 28, 0.045);
  --hv2-shadow-2: 0 4px 14px rgba(31, 30, 28, 0.06), 0 14px 34px rgba(31, 30, 28, 0.07);
  --hv2-shadow-3: 0 10px 26px rgba(31, 30, 28, 0.09), 0 34px 74px rgba(31, 30, 28, 0.1);

  --hv2-r-sm: 8px;
  --hv2-r-md: 12px;
  --hv2-r-lg: 18px;
  --hv2-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hv2-dur: 320ms;
}

/* ==========================================================================
   1. 色温统一 —— 文字
   旧层在几十处硬编码了冷灰；这里按"语义档位"整体重映射，而不是逐条打补丁。
   ========================================================================== */

/* 1.1 次级正文：#7c828b / #586274 / #596273 / #5d6676 / #566071 → 暖 body */
body.hvp-ds.hvp-ds .hvp-workshop-item p,
body.hvp-ds.hvp-ds .hvp-faq-item p,
body.hvp-ds.hvp-ds .hvp-gallery-panel p,
body.hvp-ds.hvp-ds .hvp-contact-cards span,
body.hvp-ds.hvp-ds .hvp-sub-hero p {
  color: var(--hv2-body) !important;
}

/* 1.2 更浅的辅助说明：#8b9198 / #8b9 → 暖 faint */
body.hvp-ds.hvp-ds small,
body.hvp-ds.hvp-ds .hvp-v2 small {
  color: var(--hv2-faint) !important;
}

/* 1.3 小标题与编号：#7c828b → 暖近黑 */
body.hvp-ds.hvp-ds .hvp-workshop-item h3,
body.hvp-ds.hvp-ds .hvp-gallery-panel h2,
body.hvp-ds.hvp-ds .hvp-faq-group__title h2,
body.hvp-ds.hvp-ds .hvp-contact-cards strong,
body.hvp-ds.hvp-ds .hvp-contact-form h2 {
  color: var(--hv2-ink) !important;
}

/* 1.4 交互控件：#6b7280 家族 → 暖 body */
body.hvp-ds.hvp-ds .hv-nav__link,
body.hvp-ds.hvp-ds .hv-nav__caret,
body.hvp-ds.hvp-ds .hv-menu-toggle,
body.hvp-ds.hvp-ds .hv-language__label,
body.hvp-ds.hvp-ds .hv-language__current,
body.hvp-ds.hvp-ds .hv-language__caret,
body.hvp-ds.hvp-ds .hv-language__icon,
body.hvp-ds.hvp-ds .hv-theme-toggle__icon,
body.hvp-ds.hvp-ds .hvp-faq-index a {
  color: var(--hv2-body) !important;
}

/* 1.5 表单：label / option —— 联系页表单是唯一转化入口，必须清晰 */
body.hvp-ds.hvp-ds form label,
body.hvp-ds.hvp-ds .ff-el-input--label label,
body.hvp-ds.hvp-ds form select,
body.hvp-ds.hvp-ds form option,
body.hvp-ds.hvp-ds form input::placeholder,
body.hvp-ds.hvp-ds form textarea::placeholder {
  color: var(--hv2-muted) !important;
}

body.hvp-ds.hvp-ds form input,
body.hvp-ds.hvp-ds form select,
body.hvp-ds.hvp-ds form textarea {
  color: var(--hv2-ink) !important;
  background: var(--hv2-surface) !important;
  border: 1px solid var(--hv2-line) !important;
  border-radius: var(--hv2-r-sm) !important;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

body.hvp-ds.hvp-ds form input:focus,
body.hvp-ds.hvp-ds form select:focus,
body.hvp-ds.hvp-ds form textarea:focus {
  border-color: var(--hv2-accent) !important;
  box-shadow: 0 0 0 3px rgba(238, 120, 0, 0.13) !important;
  outline: none !important;
}

/* 1.6 导航/子页 hero 内的品牌小字 */
body.hvp-ds.hvp-ds .hvp-shell-logo small,
body.hvp-ds.hvp-ds .hvp-shell-logo + small {
  color: var(--hv2-muted) !important;
}

/* 1.7 区块内部的描述小字（这些 span 嵌在 <article> 里，旧层给了冷灰 #7c828b） */
body.hvp-ds.hvp-ds .hvp-v2-video-proof__points article span,
body.hvp-ds.hvp-ds .hvp-v2-global__proof article span,
body.hvp-ds.hvp-ds .hvp-v2-checks article span,
body.hvp-ds.hvp-ds .hvp-v2-certifications__cards article span,
body.hvp-ds.hvp-ds .hvp-v2-points span {
  color: var(--hv2-muted) !important;
}

/* 1.8 旧导航的下拉子菜单与主题开关（语言菜单见 1.10） */
body.hvp-ds.hvp-ds .hv-nav__submenu a,
body.hvp-ds.hvp-ds .hv-nav__submenu a span,
body.hvp-ds.hvp-ds .hv-nav__trigger span,
body.hvp-ds.hvp-ds .hv-theme-toggle__label {
  color: var(--hv2-body) !important;
}

/* 1.9 品牌区（.hvp-shell-logo 及其内部 span）一律不碰，
   语言切换的"品牌锁定"与配色都由原有逻辑负责，这里不介入。 */

/* 1.10 语言切换器主按钮（注意：新导航用 hvp-language__*，旧主题用 hv-language__*，
   两套类名并存且都可能在页面上出现，故用子串匹配一并收口） */
body.hvp-ds.hvp-ds [class*="language__toggle"],
body.hvp-ds.hvp-ds [class*="language__toggle"] span,
body.hvp-ds.hvp-ds [class*="language__label"],
body.hvp-ds.hvp-ds [class*="language__current"],
body.hvp-ds.hvp-ds [class*="language__caret"] {
  color: var(--hv2-body) !important;
}
body.hvp-ds.hvp-ds [class*="language__option"],
body.hvp-ds.hvp-ds [class*="language__option"] span,
body.hvp-ds.hvp-ds .hv-language__option,
body.hvp-ds.hvp-ds .hv-language__option span {
  color: var(--hv2-body) !important;
}
body.hvp-ds.hvp-ds [class*="language__option"]:hover,
body.hvp-ds.hvp-ds [class*="language__option"]:hover span {
  color: var(--hv2-accent) !important;
}

/* 1.11 页脚底部信息行 —— 深色 chrome 区，用暖浅灰保证 4.5:1 以上 */
body.hvp-ds.hvp-ds .hv-footer__bottom,
body.hvp-ds.hvp-ds .hv-footer__bottom span,
body.hvp-ds.hvp-ds .hv-footer__bottom a,
body.hvp-ds.hvp-ds .hvp-site-footer__bottom,
body.hvp-ds.hvp-ds .hvp-site-footer__bottom span,
body.hvp-ds.hvp-ds .hvp-site-footer__bottom a {
  color: #b5a795 !important;
}

/* ==========================================================================
   2. 色温统一 —— 表面 / 阴影 / 边框
   ========================================================================== */

/* 2.1 首页固定氛围层的冷白底 + 冷灰模糊球（Tailwind 类名，用属性选择器命中） */
body.hvp-ds.hvp-ds [class*="bg-slate-50"] {
  background-color: var(--hv2-bg) !important;
}
body.hvp-ds.hvp-ds [class*="bg-slate-300"] {
  background-color: rgba(214, 206, 196, 0.3) !important;
}

/* 2.2 区块底色
   注意：首页是"白 / 暖砂"交替的节奏（capabilities·process·hero 为白，
   video-proof·quality·certifications 为暖砂 #f5f3f0），这是刻意设计，
   不要为了"统一"把白色区块也涂成砂色，否则节奏会塌成一片。
   真正需要修的只有 about 区块：旧值是冷白 #f8fafc。 */
body.hvp-ds.hvp-ds section.hvp-v2-about {
  background: var(--hv2-band) !important;
}

/* 2.2b 首页最底层的固定氛围层是冷白 #f8fafc，透过透明区块（global）会露出来。
   Tailwind 的 bg-slate-50 可能位于 @layer 中，而分层 !important 的优先级
   高于未分层 !important，故这里补一条同类分层兜底 + JS 内联兜底双保险。 */
body.hvp-ds.hvp-ds .hvp-root.hvp-root > [class*="bg-slate-50"] {
  background-color: var(--hv2-bg) !important;
}

body.hvp-ds.hvp-ds .hvp-v2-video-proof__media,
body.hvp-ds.hvp-ds .hvp-v2-video-proof__media video,
body.hvp-ds.hvp-ds .hvp-workshop-item figure,
body.hvp-ds.hvp-ds .hvp-gallery-panel figure {
  background: var(--hv2-panel) !important;
}

/* 2.3 子页 hero 底部收口：旧层渐变到冷白 #f8fafc，会与暖白页面形成一条冷带 */
body.hvp-ds.hvp-ds .hvp-sub-hero::after {
  background: linear-gradient(180deg, transparent, var(--hv2-bg) 86%) !important;
}

body.hvp-ds.hvp-ds .hvp-sub-hero {
  border-bottom: 1px solid rgba(238, 120, 0, 0.14);
}

/* 2.4 深色带：#eef0f3→#e5e8ec 的冷灰渐变 → 暖砂渐变 */
body.hvp-ds.hvp-ds .hvp-band {
  background: linear-gradient(135deg, #f3f0ec, #eae6df) !important;
  color: var(--hv2-body) !important;
  border-top: 1px solid var(--hv2-line-soft);
  border-bottom: 1px solid var(--hv2-line-soft);
}
body.hvp-ds.hvp-ds .hvp-band h2 {
  color: var(--hv2-ink) !important;
}
body.hvp-ds.hvp-ds .hvp-band p {
  color: var(--hv2-body) !important;
}

/* 2.5 玻璃卡片：冷蓝阴影 + 冷蓝描边 → 暖阴影 + 暖描边 */
body.hvp-ds.hvp-ds .hvp-proof-row article,
body.hvp-ds.hvp-ds .hvp-contact-cards article,
body.hvp-ds.hvp-ds .hvp-faq-item,
body.hvp-ds.hvp-ds .hvp-workshop-item,
body.hvp-ds.hvp-ds .hvp-gallery-panel,
body.hvp-ds.hvp-ds .hvp-faq-index {
  border-color: var(--hv2-line-soft) !important;
  box-shadow: var(--hv2-shadow-2) !important;
}

body.hvp-ds.hvp-ds .hvp-workshop-list .hvp-workshop-item:nth-child(3n) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78)) !important;
}

/* ==========================================================================
   3. 氛围层 —— 极淡工程网格 + 胶片噪点（工业精密的"底纹"，不是装饰）
   ========================================================================== */

body.hvp-ds.hvp-ds::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(31, 30, 28, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 30, 28, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 55%, transparent);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 55%, transparent);
}

/* 噪点走 body::before，低不透明度 + multiply，只在浅底上体现颗粒感 */
body.hvp-ds.hvp-ds::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 深色 footer 上方的氛围层改为暖橙极光，替代旧的冷灰模糊球 */
body.hvp-ds.hvp-ds .hvp-root > [class*="bg-brand-orange"] {
  background-color: rgba(238, 120, 0, 0.07) !important;
}

/* ==========================================================================
   4. 排版手感
   ========================================================================== */

/* 4.1 数字统一等宽对齐（工业仪表感） */
body.hvp-ds.hvp-ds .hvp-v2-stats strong,
body.hvp-ds.hvp-ds .hvp-v2-stats span,
body.hvp-ds.hvp-ds .hvp-proof-row strong,
body.hvp-ds.hvp-ds .hvp-workshop-item > div > span,
body.hvp-ds.hvp-ds .hvp-faq-group__title span,
body.hvp-ds.hvp-ds .hvp-v2-process strong {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1;
}

/* 4.2 中文标题不许被拆成"全链路工 / 厂"这类难看的断法 */
body.hvp-ds.hvp-ds h1,
body.hvp-ds.hvp-ds h2,
body.hvp-ds.hvp-ds h3,
body.hvp-ds.hvp-ds .hvp-contact-cards strong {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 4.3 标题字距收紧一档，编辑式排版的紧凑感 */
body.hvp-ds.hvp-ds .hvp-section-head h2,
body.hvp-ds.hvp-ds .hvp-band h2,
body.hvp-ds.hvp-ds .hvp-gallery-panel h2,
body.hvp-ds.hvp-ds .hvp-contact-form h2 {
  letter-spacing: -0.018em !important;
}

/* 4.4 签名元素：kicker 前一条橙色短横 —— 全站 8 个区块重复出现，形成节奏 */
body.hvp-ds.hvp-ds .hvp-section-head > span::before,
body.hvp-ds.hvp-ds .hvp-kicker::before,
body.hvp-ds.hvp-ds .hvp-v2-kicker::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  margin-right: 10px;
  vertical-align: 4px;
  background: var(--hv2-accent);
}
body.hvp-ds.hvp-ds .hvp-v2-kicker::before {
  vertical-align: middle;
}

/* ==========================================================================
   5. 组件升级
   ========================================================================== */

/* 5.1 统计条 —— 首页最有说服力的三个数字，旧层给了冷灰 26-38px，太弱 */
body.hvp-ds.hvp-ds .hvp-v2-stats div {
  border-right-width: 1px !important;
  border-right-color: rgba(238, 120, 0, 0.42) !important;
  padding: 0 clamp(12px, 2vw, 32px);
  transition: background 200ms ease-out;
}
body.hvp-ds.hvp-ds .hvp-v2-stats div:hover {
  background: rgba(238, 120, 0, 0.035);
}
body.hvp-ds.hvp-ds .hvp-v2-stats strong {
  color: var(--hv2-ink) !important;
  font-size: clamp(30px, 3.2vw, 46px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}
body.hvp-ds.hvp-ds .hvp-v2-stats span {
  color: var(--hv2-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

/* 5.2 子页数据条（proof-row）—— 大数字已经不错，补一条顶部橙线做锚点 */
body.hvp-ds.hvp-ds .hvp-proof-row article {
  position: relative;
  overflow: hidden;
}
body.hvp-ds.hvp-ds .hvp-proof-row article::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--hv2-accent), rgba(238, 120, 0, 0));
  opacity: 0.85;
}
body.hvp-ds.hvp-ds .hvp-proof-row article strong {
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
}

/* 5.3 车间/能力条目 —— 编号升为展示级描边数字，制造"重叠"层次 */
body.hvp-ds.hvp-ds .hvp-workshop-item > div > span {
  display: inline-block;
  font-family: var(--hv-font-display) !important;
  font-size: clamp(40px, 4.6vw, 68px) !important;
  font-weight: 800 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.04em !important;
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(238, 120, 0, 0.55);
  transition: -webkit-text-stroke-color 260ms var(--hv2-ease), color 260ms var(--hv2-ease);
}
body.hvp-ds.hvp-ds .hvp-workshop-item:hover > div > span {
  color: rgba(238, 120, 0, 0.1) !important;
  -webkit-text-stroke-color: var(--hv2-accent);
}

/* 5.4 车间条目 —— hover 抬升 + 图片极缓推进 */
body.hvp-ds.hvp-ds .hvp-workshop-item {
  transition: transform var(--hv2-dur) var(--hv2-ease), box-shadow var(--hv2-dur) var(--hv2-ease),
    border-color var(--hv2-dur) var(--hv2-ease);
}
body.hvp-ds.hvp-ds .hvp-workshop-item:hover {
  transform: translateY(-3px);
  border-color: rgba(238, 120, 0, 0.24) !important;
  box-shadow: var(--hv2-shadow-3) !important;
}
body.hvp-ds.hvp-ds .hvp-workshop-item figure img {
  transition: transform 620ms var(--hv2-ease);
}
body.hvp-ds.hvp-ds .hvp-workshop-item:hover figure img {
  transform: scale(1.035);
}

/* 5.5 标签胶囊 —— 收紧，工业标签感（旧层 999px 全圆，偏"消费级"） */
body.hvp-ds.hvp-ds .hvp-workshop-item li {
  border-radius: 6px !important;
  border-color: rgba(238, 120, 0, 0.22) !important;
  background: var(--hv2-accent-soft) !important;
  color: var(--hv2-accent-deep) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  padding: 7px 12px !important;
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
body.hvp-ds.hvp-ds .hvp-workshop-item li:hover {
  background: rgba(238, 120, 0, 0.14) !important;
  border-color: rgba(238, 120, 0, 0.4) !important;
}

/* 5.6 首页能力卡 —— 旧层是"一模一样的圆角白卡"，补差异化与 hover */
body.hvp-ds.hvp-ds .hvp-v2-card-row > * {
  transition: transform var(--hv2-dur) var(--hv2-ease), box-shadow var(--hv2-dur) var(--hv2-ease),
    border-color var(--hv2-dur) var(--hv2-ease);
}
body.hvp-ds.hvp-ds .hvp-v2-card-row > *:hover {
  transform: translateY(-4px);
  border-color: rgba(238, 120, 0, 0.26) !important;
  box-shadow: var(--hv2-shadow-3) !important;
}
body.hvp-ds.hvp-ds .hvp-v2-card-row img {
  transition: transform 620ms var(--hv2-ease);
}
body.hvp-ds.hvp-ds .hvp-v2-card-row > *:hover img {
  transform: scale(1.035);
}

/* 5.7 FAQ 手风琴 —— 用自绘 +/− 圆环替换浏览器默认的 ▼ 三角 */
body.hvp-ds.hvp-ds .hvp-faq-item {
  border: 1px solid var(--hv2-line-soft) !important;
  background: var(--hv2-surface) !important;
  transition: border-color 220ms ease-out, box-shadow 220ms ease-out;
}
body.hvp-ds.hvp-ds .hvp-faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none !important;
  padding: 22px 26px !important;
  position: relative;
  transition: color 180ms ease-out;
}
body.hvp-ds.hvp-ds .hvp-faq-item summary::-webkit-details-marker {
  display: none;
}
body.hvp-ds.hvp-ds .hvp-faq-item summary::marker {
  content: "";
}
body.hvp-ds.hvp-ds .hvp-faq-item summary::before {
  content: "";
  flex: 0 0 auto;
  order: 2;
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--hv2-line-strong);
  border-radius: 50%;
  background-image: linear-gradient(var(--hv2-accent), var(--hv2-accent)),
    linear-gradient(var(--hv2-accent), var(--hv2-accent));
  background-size: 11px 1.5px, 1.5px 11px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform 320ms var(--hv2-ease), border-color 220ms ease-out,
    background-color 220ms ease-out;
}
body.hvp-ds.hvp-ds .hvp-faq-item[open] summary::before {
  transform: rotate(135deg);
  border-color: var(--hv2-accent);
  background-color: rgba(238, 120, 0, 0.08);
}
body.hvp-ds.hvp-ds .hvp-faq-item summary:hover {
  color: var(--hv2-accent) !important;
}
body.hvp-ds.hvp-ds .hvp-faq-item[open] {
  border-color: rgba(238, 120, 0, 0.28) !important;
  box-shadow: var(--hv2-shadow-2) !important;
}
/* 展开态左侧橙色竖条 */
body.hvp-ds.hvp-ds .hvp-faq-item[open] {
  background-image: linear-gradient(90deg, var(--hv2-accent), var(--hv2-accent));
  background-size: 3px 100%;
  background-position: left top;
  background-repeat: no-repeat;
}

/* 5.8 联系页三卡 —— 修中文标题断行 + 顶部橙线锚点 */
body.hvp-ds.hvp-ds .hvp-contact-cards article {
  position: relative;
  border-radius: var(--hv2-r-md) !important;
  padding: 22px 20px !important;
  transition: transform var(--hv2-dur) var(--hv2-ease), box-shadow var(--hv2-dur) var(--hv2-ease),
    border-color var(--hv2-dur) var(--hv2-ease);
}
body.hvp-ds.hvp-ds .hvp-contact-cards article::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hv2-accent), rgba(238, 120, 0, 0));
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 420ms var(--hv2-ease);
}
body.hvp-ds.hvp-ds .hvp-contact-cards article:hover {
  transform: translateY(-3px);
  border-color: rgba(238, 120, 0, 0.22) !important;
  box-shadow: var(--hv2-shadow-3) !important;
}
body.hvp-ds.hvp-ds .hvp-contact-cards article:hover::before {
  transform: scaleX(1);
}
body.hvp-ds.hvp-ds .hvp-contact-cards strong {
  font-family: var(--hv-font-display) !important;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  word-break: keep-all;
  text-wrap: balance;
}
body.hvp-ds.hvp-ds .hvp-contact-cards span {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

/* 5.9 表单外壳：给转化区一个明确的容器（发丝边框 + 暖阴影） */
body.hvp-ds.hvp-ds .hvp-form-shell {
  border: 1px solid var(--hv2-line-soft) !important;
  border-radius: var(--hv2-r-md) !important;
  box-shadow: var(--hv2-shadow-2) !important;
  background: var(--hv2-surface) !important;
}

/* 5.10 按钮 —— 主按钮箭头位移；次按钮 hover 填充（旧层 hover 只换边框色） */
body.hvp-ds.hvp-ds .hvp-primary,
body.hvp-ds.hvp-ds .hvp-v2-btn,
body.hvp-ds.hvp-ds .hvp-shell-quote,
body.hvp-ds.hvp-ds .hvp-sub-actions .hvp-primary {
  border-radius: 4px !important;
  transition: background-color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
  box-shadow: 0 1px 2px rgba(31, 30, 28, 0.08), 0 8px 20px rgba(238, 120, 0, 0.22);
}
body.hvp-ds.hvp-ds .hvp-primary:hover,
body.hvp-ds.hvp-ds .hvp-v2-btn:hover,
body.hvp-ds.hvp-ds .hvp-shell-quote:hover {
  background-color: var(--hv2-accent-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(31, 30, 28, 0.1), 0 12px 28px rgba(238, 120, 0, 0.3);
}
body.hvp-ds.hvp-ds .hvp-primary:active,
body.hvp-ds.hvp-ds .hvp-v2-btn:active {
  transform: translateY(0);
}
/* 次按钮 */
body.hvp-ds.hvp-ds .hvp-secondary {
  border: 1px solid var(--hv2-line-strong) !important;
  border-radius: 4px !important;
  color: var(--hv2-ink) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
body.hvp-ds.hvp-ds .hvp-secondary:hover {
  border-color: var(--hv2-ink) !important;
  background: var(--hv2-ink) !important;
  color: #fff !important;
}

/* 5.11 导航 —— 链接下划线扫过（旧层只有颜色变化） */
body.hvp-ds.hvp-ds .hvp-shell-menu a:not(.is-active) {
  position: relative;
}
body.hvp-ds.hvp-ds .hvp-shell-menu a:not(.is-active)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--hv2-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--hv2-ease);
}
body.hvp-ds.hvp-ds .hvp-shell-menu a:not(.is-active):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 5.12 焦点环 —— 旧层几乎不可见，键盘用户等于失明 */
body.hvp-ds.hvp-ds a:focus-visible,
body.hvp-ds.hvp-ds button:focus-visible,
body.hvp-ds.hvp-ds summary:focus-visible,
body.hvp-ds.hvp-ds [tabindex]:focus-visible,
body.hvp-ds.hvp-ds input:focus-visible,
body.hvp-ds.hvp-ds select:focus-visible,
body.hvp-ds.hvp-ds textarea:focus-visible {
  outline: 2px solid var(--hv2-accent) !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* ==========================================================================
   6. 区块节奏 —— 发丝分隔，替代"大白卡一块块堆叠"的松散感
   ========================================================================== */

/* 6.1 固定导航：旧层用的是"白色边框 + 冷蓝阴影"，在白底上几乎看不出边界。
   换成暖发丝线 + 暖阴影，滚动时才有一条清晰的分界。 */
body.hvp-ds.hvp-ds .hvp-shell-nav {
  border-bottom: 1px solid var(--hv2-line-soft) !important;
  box-shadow: 0 1px 0 rgba(31, 30, 28, 0.025), 0 10px 30px rgba(31, 30, 28, 0.05) !important;
}

/* 6.2 深色页脚顶部收口：一条橙色发丝线，把浅色主体与深色 chrome 分开 */
body.hvp-ds.hvp-ds .hvp-site-footer {
  border-top: 1px solid rgba(238, 120, 0, 0.22);
}

/* 6.3 主页脚链接 hover（旧层无反馈） */
body.hvp-ds.hvp-ds .hvp-site-footer a {
  transition: color 180ms ease-out;
}
body.hvp-ds.hvp-ds .hvp-site-footer a:hover {
  color: var(--hv2-accent) !important;
}

body.hvp-ds.hvp-ds .hvp-sub-section + .hvp-sub-section {
  border-top: 1px solid var(--hv2-line-soft);
}
body.hvp-ds.hvp-ds .hvp-sub-section {
  padding-top: clamp(56px, 6vw, 96px) !important;
  padding-bottom: clamp(56px, 6vw, 96px) !important;
}

/* 首页区块之间的发丝线（深浅交替时由背景色自然分隔，同色相邻才需要） */
body.hvp-ds.hvp-ds .hvp-v2-certifications {
  border-top: 1px solid var(--hv2-line-soft);
}

/* ==========================================================================
   7. 滚动进度条 —— 长页面的方位感（工业仪表）
   ========================================================================== */

#hv2-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 9999;
  background: linear-gradient(90deg, var(--hv2-accent), #ffa040);
  pointer-events: none;
  transition: width 90ms linear;
}

/* ==========================================================================
   8. 滚动入场（类名由 JS 打，保证禁用 JS 时内容照常可见）
   ========================================================================== */

.hv2-pre {
  opacity: 0;
  transform: translateY(18px);
}
.hv2-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--hv2-ease), transform 520ms var(--hv2-ease);
}

/* ==========================================================================
   9. 响应式
   ========================================================================== */

@media (max-width: 960px) {
  body.hvp-ds.hvp-ds .hvp-workshop-item > div > span {
    font-size: clamp(34px, 9vw, 48px) !important;
  }
  body.hvp-ds.hvp-ds .hvp-v2-stats strong {
    font-size: clamp(26px, 7vw, 36px) !important;
  }
  body.hvp-ds.hvp-ds .hvp-contact-cards {
    grid-template-columns: 1fr !important;
  }
  body.hvp-ds.hvp-ds .hvp-contact-cards strong {
    word-break: normal;
  }
}

@media (max-width: 640px) {
  body.hvp-ds.hvp-ds::after {
    background-size: 40px 40px;
    opacity: 0.35;
  }
  body.hvp-ds.hvp-ds .hvp-v2-stats div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(238, 120, 0, 0.32);
    padding-bottom: 16px;
  }
  body.hvp-ds.hvp-ds .hvp-v2-stats div:last-child {
    border-bottom: 0;
  }
}

/* ==========================================================================
   10. 降级 —— 所有动效与氛围在 reduce 下关闭
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hv2-pre,
  .hv2-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #hv2-progress {
    display: none;
  }
  body.hvp-ds.hvp-ds *,
  body.hvp-ds.hvp-ds *::before,
  body.hvp-ds.hvp-ds *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  body.hvp-ds.hvp-ds .hvp-workshop-item:hover,
  body.hvp-ds.hvp-ds .hvp-v2-card-row > *:hover,
  body.hvp-ds.hvp-ds .hvp-contact-cards article:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   11. 打印 —— 去掉氛围与动效，保留结构
   ========================================================================== */

@media print {
  body.hvp-ds.hvp-ds::before,
  body.hvp-ds.hvp-ds::after,
  #hv2-progress {
    display: none !important;
  }
  .hv2-pre {
    opacity: 1 !important;
    transform: none !important;
  }
}