/* ================================================================
   智海国际 · 首屏精品化覆盖层   hero-v3.css        [2026-10-16]
   ================================================================
   为什么存在
     hero-v2.css 把「三色斜渐变 + 装饰网格 + 粒子 + 光斑」统一成纯色 #0a2d5e，
     成功去掉了 AI 味；但代价是首屏退化为一整块【平铺色块】：
       · 无纵深、无材质、无光影走向 —— 观感「单薄、像没画完」
       · 8 个页面视觉 100% 相同，首页与三级页没有层级差
       · 信息卡是「白线框 + 半透明底」，撑不起财税服务的专业信任感
     实测：8 页首屏 background-image 全为 none、background-color 全为
     rgb(10,45,94)，页面高度 403~495px。

   改什么（**纯观感升级：不动内容、不动结构、不动一行 HTML**）
     1. 背景 → 三层材质：多段深蓝渐变（有明暗走向）+ 双光源 + 精密网格 + 极细噪点
     2. 收边 → 1px 香槟金渐变细线（品牌签名）
     3. 排版 → 左对齐锚点 + 标题字号提升 + 中文字距/行高精修 + 光学对齐
     4. 按钮 → 金色实心（内高光 + 落地影）+ 幽灵次按钮，180ms 精确缓动
     5. 信息卡 → 玻璃材质（真实背景虚化 + 顶部金线 + 内外双向描边 + 一层柔和落地影）
     6. 标签 / 面包屑 → 金调细边，克制

   规范红线（与全站《去 AI 味》规范逐条自检）
     √ 圆角 4px          √ 1px 细边框        √ 无投影滥用（仅信息卡一层柔和落地影）
     √ 无无限动画         √ 无英文大写 kicker √ 不用渐变文字（金色一律纯色 #e0b85a）
     √ 无 emoji           √ 零外部请求（全部为 CSS 渐变 + 内联 SVG data URI，不加载任何图片）

   加载位置：必须排在 style.css 与 hero-v2.css **之后**（本文件是覆盖层）
   回滚：删除各页 HTML 中本文件的 <link> 即完全恢复原状（不改动 style.css / hero-v2.css 一行）
   ================================================================ */

:root {
  /* 极细噪点：消除大面积渐变在部分屏幕上的色带（banding），并给纯色面加一点「材质感」。
     140×140 平铺，feTurbulence 分形噪声，整体不透明度仅 5.5%，肉眼几乎不可见但抹掉塑料感。 */
  --zh-noise: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'%20opacity='.055'/%3E%3C/svg%3E");
}

/* ──────────────────────────────────────────────────────────────
   1. 底色：纯色 → 多段深蓝渐变（有方向、有明暗）
   ────────────────────────────────────────────────────────────── */
.page-banner,
.page-banner.hk-banner,
.hero {
  /* 146° 走向：左上最暗（#04142c）→ 右下最亮（#0d3f80），
     形成一束从左上打来的「光」，避免整块均质色 */
  background-color: #07203f !important;
  /* 用「大半径径向」替代斜向线性：径向上没有可见的分界切线，
     更接近摄影棚的柔和顶光，长页面横跨时不会出现斜向色带。 */
  background-image: radial-gradient(132% 150% at 88% 124%,
      #0d3f80 0%,
      #0b3873 22%,
      #0a2d5e 46%,
      #08224b 68%,
      #051a37 86%,
      #04142c 100%) !important;
  animation: none !important;
  isolation: isolate;   /* 让伪元素层不逸出到兄弟层 */
}

/* 香港页：同族色系但略偏暖（呼应「维港」气质），差异控制在 5% 以内，不破坏全站统一 */
.page-banner.hk-banner {
  background-image: radial-gradient(132% 150% at 88% 124%,
      #17457c 0%,
      #143f72 24%,
      #123a68 48%,
      #0d2c56 70%,
      #081e3c 88%,
      #06152c 100%) !important;
}

/* ──────────────────────────────────────────────────────────────
   2. 材质层（伪元素）：双光源 + 精密网格 + 噪点
   ────────────────────────────────────────────────────────────── */
.page-banner::before,
.hero::before {
  content: '' !important;
  display: block !important;             /* 覆盖 hero-v2 的 display:none */
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* ① 左上金色光源（品牌金，营造「贵金属」质感）
          淡出距离拉到 62%，避免椭圆边界形成可见的斜向分界弧 */
    radial-gradient(126% 104% at 8% -18%,
      rgba(224, 184, 90, .115) 0%, rgba(224, 184, 90, .035) 34%, rgba(224, 184, 90, 0) 62%),
    /* ② 右下冷蓝补光（制造纵深，避免上半亮下半死黑） */
    radial-gradient(96% 86% at 98% 116%,
      rgba(74, 143, 212, .155) 0%, rgba(74, 143, 212, .04) 42%, rgba(74, 143, 212, 0) 68%),
    /* ③ 纵向精密网格线（56px 间距，1px，仅 3.5% 白） */
    repeating-linear-gradient(to right,
      rgba(255, 255, 255, .035) 0 1px, rgba(255, 255, 255, 0) 1px 56px),
    /* ④ 横向精密网格线（2.8% 白，比纵向更弱，形成主次） */
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, .028) 0 1px, rgba(255, 255, 255, 0) 1px 56px),
    /* ⑤ 极细噪点（消色带 + 加材质） */
    var(--zh-noise);
  /* 自上而下渐隐：顶部材质最实，接近内容区与底部时收干净，绝不与正文抢注意力 */
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .30) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .30) 100%);
}

/* ──────────────────────────────────────────────────────────────
   3. 收边：1px 香槟金渐变细线（品牌签名，也是首屏与正文的分界）
   ────────────────────────────────────────────────────────────── */
.page-banner::after,
.hero::after {
  content: '' !important;
  display: block !important;             /* 覆盖 hero-v2 的 display:none */
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px !important;
  background: linear-gradient(90deg,
      rgba(224, 184, 90, 0) 0%,
      rgba(224, 184, 90, .38) 14%,
      rgba(224, 184, 90, .72) 50%,
      rgba(224, 184, 90, .38) 86%,
      rgba(224, 184, 90, 0) 100%) !important;
  z-index: 1;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────
   4. 呼吸感：上下留白各加 10~14px（「大气」主要来自留白，而非字号）
   ────────────────────────────────────────────────────────────── */
.hero           { padding: 90px 0 82px !important; }
.page-banner    { padding: 74px 0 68px !important; }
.page-banner.banner-solo { padding: 50px 0 46px !important; }

.page-banner .banner-inner {
  grid-template-columns: minmax(0, 1fr) 460px !important;
  gap: 62px !important;
}

/* ──────────────────────────────────────────────────────────────
   5. 排版精度
   ────────────────────────────────────────────────────────────── */

/* 子页标题上方：44×3px 香槟金短线 —— 左对齐锚点，替代已移除的英文大写 kicker */
.page-banner .banner-text::before {
  content: '' !important;
  display: block !important;
  width: 44px;
  height: 3px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e0b85a 0%, rgba(200, 155, 60, .22) 100%);
}

/* 子页主标题
   基线实测：改前渲染 44.8px（2.8rem，来自 style.css 后段规则）。
   这里提到 47.2px —— 配合下方金线，标题成为画面的第一视觉落点。 */
.page-banner h1,
.page-banner .banner-page-title {
  font-size: 2.95rem !important;
  line-height: 1.2 !important;
  letter-spacing: -.008em !important;      /* 大字号必须收字距，否则显松散 */
  margin-bottom: 0 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .22);
}

/* 首页主标题
   基线实测：改前 40px（2.5rem）→ 50.4px（3.15rem），与子页拉开明确层级。 */
.hero-content > h1 {
  font-size: 3.15rem !important;
  line-height: 1.17 !important;
  letter-spacing: -.012em !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .26);
}
/* 首页标题上方同款香槟金短线：与子页形成统一的「设计语言」 */
.hero-content > h1::before {
  content: '' !important;
  display: block !important;
  width: 44px;
  height: 3px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e0b85a 0%, rgba(200, 155, 60, .22) 100%);
}

/* 正文：字号微增、行高加大、最大宽度收到 566px（中文一行 26~30 字最舒适） */
.page-banner .banner-subtitle,
.hero-content > .hero-desc {
  max-width: 566px !important;
  font-size: 1.045rem !important;
  line-height: 1.88 !important;
  letter-spacing: .002em !important;
  color: rgba(255, 255, 255, .78) !important;   /* 纯白会「跳」，78% 才耐读 */
}
.page-banner .banner-subtitle { margin-top: 18px !important; }

.page-banner .banner-tags   { margin-top: 26px !important; }
.page-banner .breadcrumb    { margin-top: 26px !important; }

/* ──────────────────────────────────────────────────────────────
   6. 按钮（毫秒级：内高光 + 落地影 + 180ms cubic-bezier 缓动）
   ────────────────────────────────────────────────────────────── */
.hero-buttons .btn,
.page-banner .btn {
  transition: transform .18s cubic-bezier(.4, 0, .2, 1),
              box-shadow .18s cubic-bezier(.4, 0, .2, 1),
              background .18s cubic-bezier(.4, 0, .2, 1),
              border-color .18s cubic-bezier(.4, 0, .2, 1) !important;
}

/* 主按钮：香槟金实心，深蓝字（对比度 8.9:1，远超 WCAG AA） */
.hero-buttons .btn-primary,
.page-banner .btn-primary {
  background: linear-gradient(180deg, #e6c470 0%, #d3a94a 52%, #c1922f 100%) !important;
  border-color: #c89b3c !important;
  color: #071e3d !important;
  font-weight: 700 !important;
  letter-spacing: .012em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42),
              0 10px 24px -12px rgba(200, 155, 60, .62) !important;
}
.hero-buttons .btn-primary:hover,
.page-banner .btn-primary:hover {
  background: linear-gradient(180deg, #edd07f 0%, #dcb254 52%, #c99a33 100%) !important;
  border-color: #e0b85a !important;
  color: #04152c !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52),
              0 16px 30px -14px rgba(200, 155, 60, .74) !important;
}
.hero-buttons .btn-primary:active,
.page-banner .btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 4px rgba(90, 60, 0, .30),
              0 6px 14px -10px rgba(200, 155, 60, .6) !important;
}

/* 次按钮：幽灵底 + 1px 细边；hover 时边框转金（呼应主按钮，不抢焦点） */
.hero-buttons .btn-outline,
.page-banner .btn-outline {
  background: rgba(255, 255, 255, .022) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  color: rgba(255, 255, 255, .94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}
.hero-buttons .btn-outline:hover,
.page-banner .btn-outline:hover {
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(224, 184, 90, .72) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
              0 12px 24px -16px rgba(0, 0, 0, .8) !important;
}

/* ──────────────────────────────────────────────────────────────
   7. 信息卡：从「白线框」→ 玻璃材质
   ────────────────────────────────────────────────────────────── */
.hv {
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, .075) 0%,
      rgba(255, 255, 255, .028) 100%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  /* 双向描边：内顶高光（受光面）+ 外落地影（把卡「压」在背景上） */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
              0 30px 60px -34px rgba(0, 0, 0, .72) !important;
  overflow: hidden !important;
}
/* 卡片顶部 2px 香槟金渐隐线：一眼识别「这是智海的卡片」 */
.hv::before {
  content: '' !important;
  display: block !important;
  height: 2px;
  background: linear-gradient(90deg,
      rgba(224, 184, 90, .88) 0%,
      rgba(224, 184, 90, .22) 58%,
      rgba(224, 184, 90, 0) 100%);
}

.hv-hd {
  padding: 15px 18px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  background: rgba(255, 255, 255, .02) !important;
}
.hv-hd b    { font-size: .95rem !important; letter-spacing: .002em !important; }
.hv-hd span { font-size: .735rem !important; letter-spacing: .025em !important;
              color: rgba(255, 255, 255, .55) !important; }

.hv-grid { gap: 1px !important; background: rgba(255, 255, 255, .09) !important; }
.hv-grid i {
  padding: 14px 16px !important;
  background: #0a2a55 !important;
  font-size: .825rem !important;
  letter-spacing: .002em !important;
  transition: background .18s cubic-bezier(.4, 0, .2, 1) !important;
}
.hv-grid i:hover { background: #0d3160 !important; }
.hv-grid i u {
  font-size: .665rem !important;
  letter-spacing: .07em !important;
  color: #c89b3c !important;
}

.hv-list i {
  padding: 12px 18px !important;
  border-bottom-color: rgba(255, 255, 255, .075) !important;
  font-size: .825rem !important;
  transition: background .18s cubic-bezier(.4, 0, .2, 1) !important;
}
.hv-list i:hover { background: rgba(255, 255, 255, .03) !important; }
.hv-list i u { color: #c89b3c !important; letter-spacing: .05em !important; }

.hv-ft {
  padding: 14px 18px !important;
  gap: 32px !important;
  border-top: 1px solid rgba(255, 255, 255, .11) !important;
  background: rgba(255, 255, 255, .035) !important;
}
.hv-ft div {
  font-size: .745rem !important;
  letter-spacing: .025em !important;
  color: rgba(255, 255, 255, .60) !important;
}
.hv-ft div b {
  margin-bottom: 3px !important;
  font-size: 1.06rem !important;
  letter-spacing: -.012em !important;   /* 数字大字号收字距，观感更「精密」 */
  color: #e0b85a !important;
}

/* 首页右侧事实卡（hero-stats）同材质 */
.hero-stats {
  position: relative !important;
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
              0 30px 60px -34px rgba(0, 0, 0, .66) !important;
}
/* 与 .hv 同款顶部 2px 香槟金渐隐线：全站信息卡必须有统一的品牌特征 */
.hero-stats::before {
  content: '' !important;
  display: block !important;
  grid-column: 1 / -1 !important;   /* 跨满两列，压在四个数字格之上 */
  height: 2px;
  background: linear-gradient(90deg,
      rgba(224, 184, 90, .88) 0%,
      rgba(224, 184, 90, .22) 58%,
      rgba(224, 184, 90, 0) 100%);
}
.hero-stat {
  padding: 24px 20px !important;
  background: rgba(9, 38, 74, .78) !important;
  transition: background .18s cubic-bezier(.4, 0, .2, 1) !important;
}
.hero-stat:hover { background: rgba(12, 48, 92, .86) !important; }
.hero-stat .stat-num {
  font-size: 1.72rem !important;
  letter-spacing: -.02em !important;
  color: #e0b85a !important;
}
.hero-stat .stat-label {
  margin-top: 7px !important;
  font-size: .815rem !important;
  letter-spacing: .025em !important;
  color: rgba(255, 255, 255, .62) !important;
}

/* ──────────────────────────────────────────────────────────────
   8. 标签 / 面包屑
   ────────────────────────────────────────────────────────────── */
.page-banner .banner-tag {
  padding: 8px 15px !important;
  background: rgba(224, 184, 90, .075) !important;
  border: 1px solid rgba(224, 184, 90, .30) !important;
  border-radius: 4px !important;
  font-size: .815rem !important;
  letter-spacing: .004em !important;
  color: rgba(255, 255, 255, .92) !important;
  transition: background .18s cubic-bezier(.4, 0, .2, 1),
              border-color .18s cubic-bezier(.4, 0, .2, 1) !important;
}
.page-banner .banner-tag:hover {
  background: rgba(224, 184, 90, .13) !important;
  border-color: rgba(224, 184, 90, .55) !important;
}

.page-banner .breadcrumb {
  font-size: .825rem !important;
  letter-spacing: .025em !important;
  color: rgba(255, 255, 255, .48) !important;
}
.page-banner .breadcrumb a { color: rgba(255, 255, 255, .72) !important; }
.page-banner .breadcrumb a:hover { color: #e0b85a !important; }

/* ──────────────────────────────────────────────────────────────
   9. 响应式
   ────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .hero        { padding: 64px 0 58px !important; }
  .page-banner { padding: 56px 0 52px !important; }
  .page-banner .banner-inner { grid-template-columns: 1fr !important; gap: 30px !important; }
  .page-banner .banner-text::before { margin-bottom: 16px; }
  .page-banner .banner-subtitle { margin-top: 16px !important; }
  .page-banner .banner-tags { margin-top: 22px !important; }
  /* 平板：标题回落到与改前持平的 38.4 / 41.6px，避免在窄栏里换行 */
  .hero-content > h1 { font-size: 2.6rem !important; }
  .page-banner h1,
  .page-banner .banner-page-title { font-size: 2.4rem !important; }
  .hero-content > h1::before { margin-bottom: 18px; }
}

@media (max-width: 560px) {
  .hero        { padding: 46px 0 42px !important; }
  .page-banner { padding: 42px 0 38px !important; }
  .hero-content > h1 { font-size: 1.74rem !important; letter-spacing: -.006em !important; }
  .page-banner h1,
  .page-banner .banner-page-title { font-size: 1.79rem !important; }
  .page-banner .banner-subtitle,
  .hero-content > .hero-desc { font-size: .965rem !important; line-height: 1.82 !important; }
  .hero-buttons .btn,
  .page-banner .btn { padding: 12px 22px !important; font-size: .92rem !important; }
  .hv-grid { grid-template-columns: 1fr !important; }
  .hv-ft   { gap: 18px !important; }
  .hv-ft div b { font-size: .98rem !important; }
  .hv-hd   { padding: 13px 15px !important; }
  .hv-grid i { padding: 12px 15px !important; }
  /* 移动端隐藏被 mask 裁切的装饰层，省电省内存（网格线在窄屏上收益为负） */
  .page-banner::before,
  .hero::before { background-image:
      radial-gradient(120% 90% at 10% -14%, rgba(224, 184, 90, .14) 0%, rgba(224, 184, 90, 0) 46%),
      radial-gradient(88% 78% at 97% 114%, rgba(74, 143, 212, .18) 0%, rgba(74, 143, 212, 0) 52%) !important; }
}

/* 无障碍：尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .page-banner .banner-text,
  .hero-content,
  .hero-buttons .btn,
  .page-banner .btn,
  .hv-grid i,
  .hv-list i,
  .hero-stat,
  .page-banner .banner-tag { animation: none !important; transition: none !important; }
  .hero-buttons .btn-primary:hover,
  .page-banner .btn-primary:hover,
  .hero-buttons .btn-outline:hover,
  .page-banner .btn-outline:hover { transform: none !important; }
}

/* 打印：首屏只留文字，去掉材质与投影（省墨） */
@media print {
  .page-banner::before, .page-banner::after,
  .hero::before, .hero::after { display: none !important; }
  .page-banner, .hero { background: #ffffff !important; color: #000 !important; }
  .hv, .hero-stats { box-shadow: none !important; }
}