/* ============================================================
   视觉增强层 —— 蓝主色 · 喜庆红与金点缀
   说明：本文件只做"外观增强"，不改动结构；删除本文件即回到基础配色。
   依赖：assets/css/style.css（变量在 style.css 中定义）
   ============================================================ */

/* ---------- 1. Hero：深蓝渐变 + 金色光晕 + 网格纹理 ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d2657 0%, #14409a 48%, #1a56db 100%);
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/decor/hero-grid.svg") repeat;
  opacity: .2;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -28%;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(233, 167, 43, .38) 0%, rgba(217, 43, 43, .16) 42%, transparent 66%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }

.hero-tag {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 214, 106, .55);
  color: #ffe9b8;
  backdrop-filter: blur(2px);
}
.hero-tag b {
  background: linear-gradient(135deg, #d92b2b, #f04a3a);
  color: #fff;
}
.hero h1 { color: #fff; }
.hero h1 em {
  background: linear-gradient(90deg, #ffd76a, #f3ab30);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffd76a; /* 不支持背景裁切时的兜底 */
}
.hero-lead { color: rgba(255, 255, 255, .88); }
.hero-note { color: rgba(255, 255, 255, .72); }
.hero-note::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ffd76a;
  vertical-align: middle;
}
.hero-stats .stat b {
  color: #ffd76a;
  text-shadow: 0 2px 12px rgba(255, 215, 106, .28);
}
.hero-stats .stat span { color: rgba(255, 255, 255, .78); }
.hero-art svg { filter: drop-shadow(0 26px 52px rgba(6, 26, 70, .45)); }

/* Hero 内的主按钮改为金橙渐变，更醒目 */
.hero .btn-primary {
  background: linear-gradient(135deg, #ffb627, #f08a1e);
  color: #40210a;
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 12px 26px rgba(240, 138, 30, .38);
}
.hero .btn-primary:hover {
  background: linear-gradient(135deg, #ffc247, #f59a2c);
  box-shadow: 0 16px 32px rgba(240, 138, 30, .48);
}
.hero .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #ffd76a;
  color: #ffd76a;
}

/* ---------- 2. 分区标题：金红渐变短饰线 ---------- */
.center .sec-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #e9a72b, #ffd76a 46%, #d92b2b);
}
.eyebrow { color: var(--festive); }
.eyebrow::before {
  background: linear-gradient(90deg, #d92b2b, #e9a72b);
  width: 26px;
}

/* ---------- 3. 图标块：蓝渐变 + hover 上浮 ---------- */
.sc-ico {
  background: linear-gradient(135deg, #eef3fe, #dbe6fd);
  color: var(--brand);
  box-shadow: 0 6px 16px rgba(26, 86, 219, .12);
}
.card:hover .sc-ico {
  background: linear-gradient(135deg, #1a56db, #3878ea);
  color: #fff;
  box-shadow: 0 12px 24px rgba(26, 86, 219, .3);
}
.sc-card {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.sc-card:hover {
  transform: translateY(-5px);
  border-color: rgba(233, 167, 43, .55);
  box-shadow: 0 18px 40px rgba(16, 35, 63, .12);
}
.card:hover { box-shadow: 0 16px 38px rgba(16, 35, 63, .1); }

/* ---------- 4. 通用按钮：蓝渐变 ---------- */
.btn-primary {
  background: linear-gradient(135deg, #1a56db, #2f6fe8);
  box-shadow: 0 8px 20px rgba(26, 86, 219, .26);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1648bd, #2f6fe8);
  box-shadow: 0 12px 26px rgba(26, 86, 219, .34);
}
.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-50);
}

/* ---------- 5. 底部号召区：蓝底 + 金红点缀 ---------- */
[data-cms-sec="cta"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #14409a, #0d2657);
  color: #fff;
}
[data-cms-sec="cta"]::before {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -40%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(217, 43, 43, .28), transparent 64%);
  pointer-events: none;
}
[data-cms-sec="cta"] .wrap { position: relative; z-index: 2; }
[data-cms-sec="cta"] h2,
[data-cms-sec="cta"] p { color: #fff; }
[data-cms-sec="cta"] .btn-primary {
  background: linear-gradient(135deg, #ffb627, #f08a1e);
  color: #40210a;
  border: 1px solid rgba(255, 255, 255, .45);
}

/* ---------- 6. 页脚：深蓝 + 金色分隔线 ---------- */
.ft {
  background: linear-gradient(180deg, #0d1f3d, #0a1730);
  color: #b9c8de;
}
.ft-bottom { border-top: 1px solid rgba(233, 167, 43, .32); }
.ft h5 { color: #fff; }
.ft li a:hover { color: #ffd76a; text-decoration-color: #ffd76a; }

/* ---------- 7. 顶部导航：蓝白 + 金色下划线 ---------- */
.hd { border-bottom: 1px solid var(--line); }
.hd a:hover { color: var(--brand); }

/* ---------- 8. 数据条：蓝金渐变 ---------- */
.hbar-t i { background: linear-gradient(90deg, #1a56db, #e9a72b); }

/* ---------- 9. 响应式兜底 ---------- */
@media (max-width: 720px) {
  .hero { padding-top: 64px; }
  .hero::after { width: 420px; height: 420px; right: -30%; }
}