/*! ============================================================
 *  Valverz v4 增强层 —— 全站真·3D 按钮 + 首屏 CTA 恢复 + 视觉收敛
 *  叠加在 valverz-theme.css / valverz-flixon.css 之上（foot 末尾加载，
 *  优先级最高），零侵入结构/SEO，安全降级（本层加载失败页面照旧）。
 *
 *  三大改动：
 *   ① 全站「真 3D 按钮」统一体系：多层立体（顶高光 + 侧面挤出 + 地面投影），
 *      三态 默认凸起 / hover 抬升 / active 下压（位移 = 厚度）；
 *   ② 恢复首屏 CTA 条（星空墙下方紧凑 hero 文案 + 两个 3D 按钮）；
 *   ③ 收敛重复：隐藏 JS 注入的 .vz-process 流程块，保留「核心能力」。
 *  另含：间距节奏统一、卡片层次强化、暗色模式同步、响应式。
 * ============================================================ */

/* ===================== 0. 3D 变量 ===================== */
:root{
  --vz4-h: 8px;                                   /* 默认按钮厚度（加强 3D） */
  --vz4-r: 13px;                                  /* 圆角 */
  --vz4-edge: rgba(255,255,255,.55);              /* 顶面高光 */
  --vz4-face-top: #3a8be8;                        /* 顶面 */
  --vz4-face-bot: #14539f;                        /* 底面 */
  --vz4-side: #0a2c58;                            /* 侧面挤出暗色 */
  --vz4-glow: rgba(15,66,140,.42);                /* 地面投影 */
}
:root[data-theme="dark"]{
  --vz4-edge: rgba(255,255,255,.30);
  --vz4-face-top:#2b6fd4; --vz4-face-bot:#10397a;
  --vz4-side:#071c39; --vz4-glow:rgba(0,0,0,.55);
}

/* ===================== 1. ★ 全站 3D 按钮统一体系 =====================
   仅覆盖「按钮型」元素；导航 .mainnav__item a / .more 容器保持纯文字
   （theme.css 第 3 节约束，绝不误伤）。 */
.vz-certwall__btn,
.btn-cta,
.vz-certwall__more,
.prev, .next, .page-num, .page-num-current, .page-btn,
.topbar__lang a,
button.btn, input[type="submit"], input[type="button"], .vz-search button,
.vz-fab, .vz-fab-top, .vz-fab-search,
.box-product .item .note,
.box-about .more a, .box-news .more a{
  position: relative !important;
  isolation: isolate;
  transform: translateY(0) !important;
  border-radius: var(--vz4-r) !important;
  box-shadow:
    inset 0 1px 0 var(--vz4-edge),
    inset 0 -3px 5px rgba(0,0,0,.20),
    0 var(--vz4-h) 0 var(--vz4-side),
    0 calc(var(--vz4-h) + 7px) 17px var(--vz4-glow) !important;
  transition:
    transform .14s cubic-bezier(.2,.8,.3,1.12),
    box-shadow .14s cubic-bezier(.2,.8,.3,1.12),
    background-color .2s ease, background .2s ease, filter .2s ease, color .2s ease !important;
  will-change: transform;
}

/* ★ 浮动球必须保持 fixed（统一 3D 体系里不能把 .vz-fab 强制 relative，
   否则会掉出视口、被 right:22px 顶到左边缘看不见）。这里单独复位其定位。 */
.vz-fab, .vz-fab-top, .vz-fab-search{
  position: fixed !important;
  right: 22px !important;
}

/* hover：抬升 + 厚度增大 */
@media (hover:hover) and (pointer:fine){
  .vz-certwall__btn:hover,
  .btn-cta:hover,
  .vz-certwall__more:hover,
  .prev:hover, .next:hover, .page-num:hover, .page-btn:hover,
  .topbar__lang a:hover,
  button.btn:hover, input[type="submit"]:hover, input[type="button"]:hover, .vz-search button:hover,
  .box-product .item .note:hover,
  .box-about .more a:hover, .box-news .more a:hover{
    transform: translateY(-3px) !important;
    box-shadow:
      inset 0 1px 0 var(--vz4-edge),
      inset 0 -3px 5px rgba(0,0,0,.20),
      0 calc(var(--vz4-h) + 3px) 0 var(--vz4-side),
      0 calc(var(--vz4-h) + 15px) 30px var(--vz4-glow) !important;
    filter: brightness(1.06);
  }
}

/* active：下压 = 厚度（视觉上「按进去」） */
.vz-certwall__btn:active,
.btn-cta:active,
.vz-certwall__more:active,
.prev:active, .next:active, .page-num:active, .page-btn:active,
.topbar__lang a:active,
button.btn:active, input[type="submit"]:active, input[type="button"]:active, .vz-search button:active,
.box-product .item .note:active,
.box-about .more a:active, .box-news .more a:active{
  transform: translateY(var(--vz4-h)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 3px 8px rgba(0,0,0,.32),
    0 0 0 var(--vz4-side),
    0 2px 7px var(--vz4-glow) !important;
  filter: brightness(.97);
  transition-duration: .06s !important;
}

/* 键盘可达：focus-visible 给出清晰描边 */
.vz-certwall__btn:focus-visible,
.btn-cta:focus-visible,
.vz-certwall__more:focus-visible,
.prev:focus-visible, .next:focus-visible, .page-num:focus-visible, .page-btn:focus-visible,
.topbar__lang a:focus-visible,
button.btn:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible,
.box-product .item .note:focus-visible,
.box-about .more a:focus-visible, .box-news .more a:focus-visible{
  outline: 3px solid #7fb0ea;
  outline-offset: 3px;
}

/* 光标跟随高光：鼠标滑过按钮时，高光聚在指针处（叠在文字下方，不抢色） */
.vz-certwall__btn, .btn-cta, .vz-certwall__more,
.box-product .item .note, .box-about .more a, .box-news .more a{
  background-image:
    radial-gradient(90px 90px at var(--mx,30%) var(--my,30%), rgba(255,255,255,var(--vz4-gv,.20)), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, var(--vz4-face-top), var(--vz4-face-bot)) !important;
  background-blend-mode: screen, normal;
}
/* 卡片 3D 倾斜的承载层 */
.vz4-tilt{ transform-style: preserve-3d; }

/* 点击涟漪 */
.vz4-ripple{
  position: absolute; z-index: 40; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.55); transform: scale(0); opacity: .8;
  animation: vz4Ripple .55s ease-out forwards;
}
@keyframes vz4Ripple{ to{ transform: scale(2.4); opacity: 0; } }

/* 浮动球：圆球也带厚度与抬升（与方按钮一致语言） */
.vz-fab, .vz-fab-top, .vz-fab-search{
  border-radius: 50% !important;
  background-image:
    radial-gradient(40px 40px at var(--mx,30%) var(--my,30%), rgba(255,255,255,var(--vz4-gv,.25)), rgba(255,255,255,0) 72%),
    linear-gradient(165deg,#1558b0 0%,#0e8f9e 100%) !important;
  background-blend-mode: screen, normal;
}
.vz-fab:hover, .vz-fab-top:hover, .vz-fab-search:hover{
  filter: none;
}

/* 「了解更多 +」内容链接：做成小号 3D 胶囊按钮（实心蓝 + 白字） */
.box-product .item .note{
  display: inline-flex !important; align-items: center; justify-content: center;
  gap: 6px; margin-top: 10px !important; padding: 7px 16px !important;
  background: var(--vz-grad) !important; color: #fff !important; border: 0 !important;
  font-weight: 700 !important; font-size: 13px !important; letter-spacing: .3px;
}
.box-product .item .note:hover{ color: #fff !important; }
.box-about .more a, .box-news .more a{
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 9px 22px !important; background: var(--vz-grad) !important;
  color: #fff !important; border: 0 !important; font-weight: 700 !important;
  text-decoration: none !important;
}
.box-about .more a:hover, .box-news .more a:hover{ color: #fff !important; }

/* ===================== 2. ★ 首屏 CTA 条恢复 =====================
   #banner 在 body.vz-certwall-on 下被整体隐藏（theme.css 1481）。
   此处只保留 hero 文案条，隐藏 slick 轮播，让首屏找回主视觉与转化入口。 */
body.vz-certwall-on #banner{
  display: block !important; height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; overflow: visible !important;
}
body.vz-certwall-on #banner .slickbanner,
body.vz-certwall-on #banner .slick-list,
body.vz-certwall-on #banner .slick-track,
body.vz-certwall-on #banner .slick-dots{ display: none !important; }

body.vz-certwall-on #banner .hero-caption{
  position: static !important; inset: auto !important;
  display: block !important; height: auto !important; min-height: 0 !important;
  padding: 16px 0 !important; overflow: visible !important;
  /* 星空背景（酒红/紫金星云），与上方蓝青认证墙明显错开色相 */
  background:
    radial-gradient(1000px 230px at 76% -30%, rgba(236,72,153,.48), rgba(236,72,153,0) 68%),
    radial-gradient(780px 200px at 12% 135%, rgba(245,158,11,.26), rgba(245,158,11,0) 72%),
    radial-gradient(2px 2px at 12% 28%, rgba(255,255,255,.96), rgba(255,255,255,0) 60%),
    radial-gradient(1.8px 1.8px at 27% 72%, rgba(255,255,255,.82), rgba(255,255,255,0) 60%),
    radial-gradient(2px 2px at 48% 32%, rgba(255,255,255,.88), rgba(255,255,255,0) 60%),
    radial-gradient(1.6px 1.6px at 66% 75%, rgba(255,255,255,.72), rgba(255,255,255,0) 60%),
    radial-gradient(2px 2px at 87% 42%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#210d35 0%,#35113f 56%,#1b1238 100%) !important;
  border-top: 2px solid rgba(244,114,182,.72) !important;
  border-bottom: 2px solid rgba(245,158,11,.78) !important;
}
body.vz-certwall-on #banner .hero-caption__inner{
  max-width: 1180px !important; margin: 0 auto !important; padding: 15px 20px !important;
  display: flex !important; align-items: center !important; gap: 14px 26px !important;
  flex-wrap: wrap !important;
}
body.vz-certwall-on #banner .hero-caption__card{
  display: flex !important; align-items: center !important; gap: 10px 20px !important;
  flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; flex-wrap: wrap !important;
  padding: 0 !important; background: none !important; border: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.vz-certwall-on #banner .hero-caption__kicker{
  font-size: 11px !important; padding: 4px 10px !important; border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,220,170,.72) !important;
  color: #ffe6bd !important; letter-spacing: 1.2px !important; font-weight: 700 !important;
  white-space: nowrap;
}
body.vz-certwall-on #banner .hero-caption__title{
  font-size: clamp(16px,1.6vw,20px) !important; margin: 0 !important;
  color: #fff7ed !important; font-weight: 800 !important; letter-spacing: .3px !important; flex: 0 1 auto;
  text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
}
body.vz-certwall-on #banner .hero-caption__sub,
body.vz-certwall-on #banner .hero-caption__trust{ display: none !important; }
body.vz-certwall-on #banner .hero-caption__btns{
  display: flex !important; gap: 12px !important; margin: 4px auto 0 !important; flex: 0 0 auto;
  justify-content: center !important;
}
/* 首屏 CTA 按钮放大一点，凸显转化位 */
body.vz-certwall-on #banner .hero-caption__btns .btn-cta{
  min-height: 44px !important; padding: 11px 24px !important; font-size: 15px !important;
  text-align: center !important;
}
/* CTA 配色更合理：主按钮蓝→青渐变实心，次按钮玻璃描边更清晰可见 */
body.vz-certwall-on #banner .hero-caption__btns .btn-cta--primary{
  background: linear-gradient(165deg,#2f7be8 0%,#0e8f9e 100%) !important;
  color: #fff !important; border: 0 !important;
}
body.vz-certwall-on #banner .hero-caption__btns .btn-cta--ghost{
  /* 差异化背景：青绿色实心，与主按钮的蓝色形成清晰对比 */
  background: linear-gradient(165deg,#0e8f9e 0%,#086872 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 var(--vz4-h) 0 #05505a,
    0 calc(var(--vz4-h) + 7px) 17px rgba(14,143,158,.38) !important;
}
/* 首屏 CTA 悬停抬升（高特异性覆盖统一体系的 :hover，确保两个按钮都有立体抬升） */
body.vz-certwall-on #banner .hero-caption__btns .btn-cta:hover{
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 calc(var(--vz4-h) + 3px) 0 var(--vz4-side),
    0 calc(var(--vz4-h) + 16px) 30px var(--vz4-glow) !important;
  filter: brightness(1.06);
}

/* ===================== 3. 收敛重复区块 =====================
   隐藏 JS 注入的 .vz-process 流程块（与模板 .box-process 重复），保留「核心能力」.vz-cap。 */
body.vz-certwall-on .vz-process .title-product,
body.vz-certwall-on .vz-process .vz-process__line,
body.vz-certwall-on .vz-process .vz-process__list{ display: none !important; }

/* ===================== 4. 视觉节奏与层次 ===================== */
/* 区块上下间距统一收敛（去重复后页面更紧凑） */
.box-product, .box-process, .box-about, .box-news{
  padding-top: clamp(40px,5vw,64px) !important;
  padding-bottom: clamp(40px,5vw,64px) !important;
}
/* 区块标题统一：长条星空底 + 3D 质感（与认证墙呼应） */
.vz-certwall__title{ text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.title-product b, .title-about b, .title-news b, .title-process b{
  position: relative; display: inline-block;
  background: linear-gradient(165deg,#1558b0 0%,#0e8f9e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
/* 卡片层次强化 */
.box-product .item, .news .item, .wrap-right .item{
  border-radius: 16px !important; overflow: hidden;
  box-shadow: 0 8px 22px rgba(11,26,46,.10) !important;
  border: 1px solid var(--vz-line);
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease !important;
}
.box-product .item:hover, .news .item:hover{
  box-shadow: 0 18px 40px rgba(11,26,46,.18) !important;
}
/* 卡片图片轻微 3D 抬升（沿用 theme 体系，统一语言） */
a.img-box{ border-radius: 16px 16px 0 0; overflow: hidden; }

/* ===================== 4b. 加强 3D 卡片（立体底沿） ===================== */
/* 内容卡片加一道底部「厚度」暗沿 + 顶面高光，与 3D 按钮语言统一 */
.box-product .item, .news .item, .wrap-right .item{
  position: relative !important;
  border-bottom: 3px solid rgba(11,26,46,.10) !important;
}
.box-product .item::before, .news .item::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; z-index:2; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  opacity:.7;
}

/* ===================== 4b2. 认证项目卡片：明显边框（整体感） ===================== */
/* 每张 认证项目 卡片用更明显的边框 + 顶部品牌色色带，让它作为独立单元一眼可辨 */
.box-product .item{
  /* 琥珀金外框：避开卡片内部蓝色图片/底色，明确勾勒整张卡片 */
  border: 3px solid #d48a16 !important;
  border-top: 7px solid #8c4b12 !important;
  box-shadow: 0 12px 30px rgba(11,26,46,.14), 0 0 0 1px rgba(255,220,150,.65) !important;
}
.box-product .item:hover{
  border-color: #b86d0d !important;
  border-top-color: #713909 !important;
  box-shadow: 0 24px 50px rgba(11,26,46,.24), 0 0 0 1px rgba(245,158,11,.48) !important;
}

/* ===================== 4c. 彩色分隔线（整体布局分隔效果） ===================== */
/* 大区块之间：居中渐变彩线（首屏认证墙之后第一块不加） */
.content > .box + .box{ position: relative; }
.content > .box + .box::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(1180px,92%); height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(47,123,232,0) 0%, #2f7be8 16%, #0e8f9e 50%, #2f7be8 84%, rgba(47,123,232,0) 100%);
  opacity:.5;
}
/* 认证项目：标题行 ↔ 产品行 ↔ CTA 行 之间各加一道彩色分隔线 */
.box-product .title-product{ position:relative; padding-bottom:22px !important; margin-bottom:26px !important; }
.box-product .title-product::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#2f7be8,#0e8f9e); opacity:.55;
}
.box-product .product{ position:relative; padding-bottom:24px !important; }
.box-product .product::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(47,123,232,0), #0e8f9e 50%, rgba(47,123,232,0)); opacity:.42;
}

/* ===================== 5. 减少动效偏好 ===================== */
@media (prefers-reduced-motion: reduce){
  .vz-certwall__btn, .btn-cta, .vz-certwall__more, .prev, .next, .page-num, .page-btn,
  .topbar__lang a, button.btn, input[type="submit"], input[type="button"],
  .box-product .item .note, .box-about .more a, .box-news .more a{
    transition: none !important;
  }
}

/* ===================== 6. 底部居中浮动按钮组（与右侧栏并存） =====================
   右侧栏保留（深色切换 / 搜索 / 回顶）；这里在视口底部居中再加一组「搜索 / 回到顶部」，
   提升触达。dock 内的按钮用 .vz-fab--dock 复位定位，避免被统一 3D 体系的 right:22px 顶到右侧。 */
.vz-fab-dock{
  position: fixed !important; left: 50% !important; bottom: max(16px, env(safe-area-inset-bottom)) !important;
  transform: translate(-50%, 14px) !important;
  display: flex !important; align-items: center; gap: 14px !important;
  z-index: 60 !important; padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(11,26,46,.24), inset 0 0 0 1px rgba(47,123,232,.22) !important;
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}
.vz-fab-dock.is-visible{
  transform: translate(-50%, 0) !important;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}
:root[data-theme="dark"] .vz-fab-dock{
  background: rgba(13,28,52,.88) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(127,176,234,.28) !important;
}
/* dock 内按钮：复位为相对定位（供涟漪锚定），取消 right:22px，尺寸略小 */
.vz-fab-dock .vz-fab--dock{
  position: relative !important; right: auto !important; bottom: auto !important;
  left: auto !important; margin: 0 !important;
  width: 46px !important; height: 46px !important;
  display: inline-flex !important; align-items: center; justify-content: center !important;
  color: #ffffff !important;
  background-color: #26305e !important;
  background-image: linear-gradient(155deg,#344783 0%,#35205f 56%,#4c1f62 100%) !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 6px 0 #21143d, 0 11px 22px rgba(29,18,58,.42) !important;
}
.vz-fab-dock .vz-fab--dock:hover{
  filter: brightness(1.18) !important;
  transform: translateY(-2px) !important;
}
.vz-fab-dock .vz-fab--dock svg{ width: 23px !important; height: 23px !important; display: block !important; stroke: #ffffff !important; }