/* ==========================================================================
   全站蓝色交互层 · blue.css · 2026-11-12
   必须在 site / home / inner / cases / showcase 之后加载。
   作用：
   1) 把前三份样式表里写死的中性黑 hover / 选中态统一改成品牌蓝；
   2) 标题、小标签、首屏网格加蓝色点缀，白底区不再只有黑白灰；
   3) 深色区改深蓝黑，页脚叠一层很淡的蓝色网格，消除大块死黑。
   ========================================================================== */

:root {
  --ink: #182338;
  --text: #333b4b;
  --muted: #6f7889;
  --muted-2: #8e98aa;
  --line: #e5ebf4;
  --line-2: #d2dcec;
  --soft: #f6f9fe;
  --dark: #0b1220;
  --accent: #1657f5;
  --accent-600: #0b3db8;
  --accent-soft: #eaf1ff;
  --accent-bright: #86aeff;
  --accent-ring: rgba(22, 87, 245, .16);
}

::selection { background: rgba(22, 87, 245, .18); color: var(--ink); }

/* ---------- 1. 通用按钮 ---------- */
.btn-primary,
.hx-cta-btn {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(22, 87, 245, .85);
  transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover,
.hx-cta-btn:hover {
  background: var(--accent-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px rgba(22, 87, 245, .95);
}
.btn-ghost:hover,
.subcat-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.btn-white:hover { background: var(--accent); color: #fff; }

/* ---------- 2. 顶部导航 ---------- */
.nav a.is-active::after {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(22, 87, 245, .2);
}
.site-header:not(.is-solid) .nav a:hover { color: var(--accent-bright); opacity: 1; }
.site-header.is-solid .nav a:hover { color: var(--accent); opacity: 1; }
.site-header:not(.is-solid) .hd-tel:hover { color: var(--accent-bright); opacity: 1; }
.site-header:not(.is-solid) .hd-cta:hover,
.site-header.is-solid .hd-cta:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---------- 3. 首页首屏：冷调底 + 蓝色网格 + 服务索引 ---------- */
.hx-hero {
  background: linear-gradient(180deg, #f6f8fe 0%, #eef3fc 48%, #f4f7fd 100%);
}
.hx-hero::before {
  background-image:
    linear-gradient(to right, rgba(22, 87, 245, .075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 87, 245, .075) 1px, transparent 1px);
}
.hx-hero::after {
  background: linear-gradient(to top, #f4f7fd 0%, rgba(244, 247, 253, .7) 45%, rgba(244, 247, 253, 0) 100%);
}
.hx-hero.has-3d::after {
  background: linear-gradient(to top, #f4f7fd 0%, rgba(244, 247, 253, .55) 62%, rgba(244, 247, 253, 0) 100%);
}
.hx-hero h1 .hx-hero-accent { color: var(--accent); }
.hx-hero-cta { color: var(--accent); border-bottom-color: var(--accent); }
.hx-hero-cta:hover { color: var(--accent-600); border-color: var(--accent-600); }
.hx-hero-tel:hover { color: var(--accent); }
.hx-new { background: var(--accent); }

.hx-hero-index { border-top-color: rgba(22, 87, 245, .25); }
.hx-hero-index li {
  position: relative;
  border-bottom-color: rgba(22, 87, 245, .18);
  transition: background-color .25s ease;
}
.hx-hero-index li:hover {
  background: linear-gradient(90deg, rgba(22, 87, 245, .09), rgba(22, 87, 245, 0) 82%);
}
.hx-hero-index li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 0; border-radius: 2px;
  background: var(--accent);
  transition: height .25s ease;
}
.hx-hero-index li:hover::before { height: 58%; }
.hx-hero-index a:hover .n,
.hx-hero-index a:hover .k { color: var(--accent); }

/* ---------- 4. 区块标题：统一的小蓝线 ---------- */
.hx-head h2,
.sec-head h2 { position: relative; }
.hx-head h2::after,
.sec-head h2::after {
  content: "";
  display: block;
  width: 46px; height: 3px; margin-top: 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(22, 87, 245, 0));
}
.eyebrow { color: var(--accent); }
.eyebrow::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 87, 245, .12);
}

/* ---------- 5. 首页卡片 / 轮播 / 新闻 / 引导 ---------- */
.hx-sol-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.hx-sol-more:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.hx-card:hover .hx-card-more,
.hx-card--light:hover .hx-card-more { background: var(--accent); color: #fff; }
.hx-news-all a:hover { color: var(--accent); border-color: var(--accent); }
.hx-guide-btn:hover,
.hx-about-btn:hover { border-color: var(--accent); color: var(--accent); }
.hx-guide-btn .plus,
.hx-about-btn .plus { background: var(--accent); color: #fff; }
.hx-guide-btn:hover .plus,
.hx-about-btn:hover .plus { background: var(--accent-600); }
.hx-faq-list summary:hover { color: var(--accent); }
.hx-faq-list summary::after { color: var(--accent); }
.hx-cta { background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); }

/* ---------- 6. 内页头 ---------- */
.page-hero::before {
  background:
    radial-gradient(110% 80% at 82% 0%, rgba(234, 241, 255, .95) 0%, rgba(234, 241, 255, 0) 58%),
    linear-gradient(180deg, #f4f7fd 0%, #e8eefa 100%);
}
.page-hero::after {
  background-image:
    linear-gradient(to right, rgba(22, 87, 245, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 87, 245, .07) 1px, transparent 1px);
}
.page-hero h1,
.cs-top h1,
.cd-top h1 { color: #172a55; }
.page-hero h1::after {
  content: "";
  display: block;
  width: 52px; height: 3px; margin-top: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(22, 87, 245, 0));
}
.sv-crumb a:hover { color: var(--accent); }
.sv-btn {
  border: 1px solid rgba(22, 87, 245, .26);
  background: rgba(255, 255, 255, .94);
}
.sv-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.sv-btn:hover svg circle { fill: #fff; }
.sv-btn:hover svg path { stroke: var(--accent); }
.sv-btn--line {
  border: 0; border-bottom: 1px solid rgba(22, 87, 245, .3);
  border-radius: 0; padding: 0 0 4px; background: none; box-shadow: none;
}
.sv-btn--line:hover {
  background: none; border-color: var(--accent); color: var(--accent); gap: 14px;
}

/* ---------- 7. 正文 / FAQ / 表单 / 问答卡 ---------- */
.prose a:hover { color: var(--accent); }
.page-prose h2 { color: #172a55; border-left: 3px solid var(--accent); }
.page-prose blockquote { border-left-color: var(--accent); }
.page-prose a,
.fact-grid dd a { color: var(--accent); }
.faq summary:hover,
.cd-faq-item summary:hover { color: var(--accent); }
.faq summary::after { color: var(--accent); }
.faq details[open] summary { color: var(--accent-600); }
.faq details[open] summary::after { color: var(--accent); }
.qa:hover { border-color: rgba(22, 87, 245, .35); background: var(--accent-soft); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.note { color: #243a63; }
.note b { color: var(--accent-600); }

/* ---------- 8. 新闻列表 / 分页 / 上下篇 ---------- */
.news-item:hover { background: var(--accent-soft); }
.news-pager a:hover { border-color: var(--accent); color: var(--accent); }
.news-pager .thisclass,
.news-pager .current { background: var(--accent); border-color: var(--accent); color: #fff; }
.article-nav-item:hover { border-color: rgba(22, 87, 245, .45); }
.article-nav-item a:hover,
.article-back a:hover { color: var(--accent); }

/* ---------- 9. 案例列表 / 详情 ---------- */
.cs-pilltab { background: var(--accent-soft); }
.cs-pilltab button:hover { color: var(--accent); }
.cs-pilltab button.is-on {
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(22, 87, 245, .8);
}
.cs-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cs-arrow:focus-visible { outline-color: var(--accent); }
.cs-progress { background: rgba(22, 87, 245, .16); }
.cs-progress i { background: var(--accent); }
.cs-more:hover { color: var(--accent); }
.cs-item:hover { background: #f3f7ff; }
.cs-item:hover h3 { color: var(--accent-600); }
.cs-item:hover .cs-item-tips span { background: #fff; color: var(--accent); }
.cd-nav-item:hover { border-color: var(--accent); }
.cd-prose h2::before { color: var(--accent); }
.cd-faq-item summary::after { color: var(--accent); }

/* ---------- 10. 深色 CTA / 悬浮条 / 手机底栏 ---------- */
.cta-band {
  background:
    radial-gradient(70% 120% at 90% 0%, rgba(22, 87, 245, .22), transparent 62%),
    var(--dark);
}
.cta-band .btn-white {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 12px 28px -14px rgba(22, 87, 245, .9);
}
.cta-band .btn-white:hover {
  background: var(--accent-600); color: #fff; border-color: var(--accent-600);
}
.cta-band .tel:hover { color: var(--accent-bright); }
.st-btn:hover,
.st-btn:focus-visible {
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 26px rgba(22, 87, 245, .35);
}
.st-tip,
.st-tip::after { background: var(--accent); }
.m-cta { background: var(--accent); box-shadow: 0 -4px 20px rgba(22, 87, 245, .28); }
.m-cta:active { background: var(--accent-600); }

/* ---------- 11. 页脚：深蓝黑 + 淡蓝网格 ---------- */
.site-footer {
  background:
    radial-gradient(64% 130% at 88% -18%, rgba(22, 87, 245, .26), transparent 62%),
    radial-gradient(58% 120% at -6% 115%, rgba(22, 87, 245, .14), transparent 68%),
    #0a1020;
  border-top-color: rgba(134, 174, 255, .18);
}
/* 大格 88px + 小格 44px，越往下越淡，避免抢文字 */
.site-footer::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(134, 174, 255, .085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(134, 174, 255, .085) 1px, transparent 1px),
    linear-gradient(to right, rgba(134, 174, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(134, 174, 255, .045) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px, 44px 44px, 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .25) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .25) 100%);
}
/* 网格交点的小亮点：只在上半部分可见 */
.site-footer::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(134, 174, 255, .22) 1px, transparent 1.2px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 92%);
}
.site-footer > .ft-wrap { position: relative; z-index: 1; }
.ft-title::after {
  content: "";
  display: block;
  width: 46px; height: 3px; margin-top: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-bright), rgba(134, 174, 255, 0));
}
.ft-tel:hover { color: var(--accent-bright); }
.ft-tags a:hover {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
  background: rgba(22, 87, 245, .16);
}
.ft-cols h4 { color: rgba(134, 174, 255, .72); }
.ft-cols li a:hover,
.ft-addr a:hover,
.ft-bottom a:hover { color: var(--accent-bright); }
.ft-main { border-bottom-color: rgba(134, 174, 255, .18); }

/* ---------- 12. 窄屏微调 ---------- */
@media (max-width: 900px) {
  .site-footer::before {
    background-size: 64px 64px, 64px 64px, 32px 32px, 32px 32px;
  }
  .site-footer::after { background-size: 32px 32px; }
  .hx-head h2::after,
  .sec-head h2::after { width: 38px; margin-top: 12px; }
}