/* ==========================================================================
   科技蓝主题层
   --------------------------------------------------------------------------
   风格参照：ceotheme.com（国内 WordPress 主题厂商的官网风格）
     亮蓝主色 + 天蓝浅底 + 蓝色渐变按钮 + 白卡片 + 蓝色光晕。
     它的配色取自其主题 CSS，实际色值：
       主蓝 #2254f4 / #006eff    亮蓝 #13adff / #268df7
       天蓝底 #f4faff / #f5f7fd  浅蓝 #b5dfff   深墨蓝 #0B1D30

   与 dark 主题的差别：
     dark  是「暗墨底 + 金色」，贵、稳、适合 ToB 与高端；
     tech  是「亮底 + 亮蓝」，轻快、亲和、适合产品展示与源码销售。
     两套并存，config.php 的 SITE_THEME 一行切换。

   同样做成覆盖层：结构由 cms.css 决定，这里只管观感。
   ========================================================================== */

.cms-body {
  /* ---------- 蓝色体系 ---------- */
  --cms-brand: #2254F4;
  --cms-brand-600: #0B3FD1;
  --cms-accent: #FF6A2B;          /* 橙：只用在「限时/强调」这类小地方 */

  --blue-400: #13ADFF;
  --blue-500: #268DF7;
  --blue-600: #006EFF;
  --blue-700: #2254F4;
  --blue-050: #F4FAFF;
  --blue-100: #E4F1FF;
  --blue-200: #B5DFFF;

  /* ---------- 底色 ---------- */
  --cms-bg: #FFFFFF;
  --cms-bg-2: #F5F7FD;
  --cms-line: #E6EBF5;

  /* ---------- 文字 ---------- */
  --cms-ink: #0B1D30;             /* 带蓝调的黑，比纯黑柔和 */
  --cms-ink-2: #4A566A;
  --cms-ink-3: #5F6575;            /* 取自参考站的灰字 */
  --cms-ink-4: #9AA3B4;

  --glass: #FFFFFF;
  --blue-glow: rgba(34, 84, 244, .10);

  color: var(--cms-ink);
  background: var(--cms-bg);
}

/* 顶部的蓝色光晕 + 细网格：亮色页容易「平」，
   加一层极淡的蓝调层次，页面立刻有空气感 */
.cms-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1080px 480px at 50% -6%,
      rgba(38, 141, 247, .12), transparent 62%),
    radial-gradient(720px 420px at 88% 6%,
      rgba(34, 84, 244, .07), transparent 60%);
}
.cms-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .6;
  background-image:
    linear-gradient(rgba(34, 84, 244, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 244, .028) 1px, transparent 1px);
  background-size: 60px 60px;
  /* 网格向下淡出，避免整页都是格子显得脏 */
  -webkit-mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .3) 42%, transparent 78%);
          mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .3) 42%, transparent 78%);
}
.cms-body > * { position: relative; z-index: 1; }

/* ==========================================================================
   一、导航
   ========================================================================== */

.cms-head {
  background: rgba(255, 255, 255, .84);
  border-bottom: 1px solid var(--cms-line);
}
.cms-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.cms-head.is-scrolled::after { opacity: .9; }
.cms-head.is-scrolled { box-shadow: 0 10px 34px rgba(34, 84, 244, .09); }

.cms-logo {
  color: var(--blue-700);
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: .01em;
}
.cms-logo::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  transition: width .3s ease;
}
.cms-logo:hover::after { width: 100%; }

.cms-menu a { color: var(--cms-ink-2); font-weight: 500; }
.cms-menu a:hover {
  color: var(--blue-700);
  background: var(--blue-100);
}
.cms-submenu {
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--cms-line);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(34, 84, 244, .14);
}

/* ==========================================================================
   二、首屏
   ========================================================================== */

.cms-hero {
  position: relative;
  padding: 130px 0 118px;
  /* 参考站的 hero 是浅蓝渐变，这里同调但更淡，
     保证大标题的可读性 */
  background-image: linear-gradient(178deg, #F7FBFF 0%, #FFFFFF 58%, #F4F9FF 100%);
  background-color: #FFFFFF;
  background-repeat: no-repeat;
}
.cms-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(1180px, 92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 84, 244, .2), transparent);
}

.cms-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  border: 1px solid var(--blue-200);
  border-radius: 999px;
  background: var(--blue-050);
  color: var(--blue-700);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
}
.cms-hero .cms-eyebrow { margin-bottom: 28px; }

.cms-hero h1 {
  color: var(--cms-ink);
  font-size: clamp(34px, 5.4vw, 62px);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.18;
}
/* 强调词用蓝色渐变字 */
.cms-hero h1 em {
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--blue-600), var(--blue-400) 52%, var(--blue-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.cms-hero .cms-lead { color: var(--cms-ink-3); }

.cms-hero-badges span { color: var(--cms-ink-3); }
.cms-hero-badges span::before {
  background: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(38, 141, 247, .16);
}

/* ==========================================================================
   三、按钮
   ========================================================================== */

.cms-btn {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1),
              box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
/* 悬停时一道高光扫过 */
.cms-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  transition: transform .62s cubic-bezier(.2, .8, .3, 1);
}
.cms-btn:hover::after { transform: translateX(120%) skewX(-18deg); }
.cms-btn:hover { transform: translateY(-2px); }

.cms-btn-primary {
  background: linear-gradient(118deg, var(--blue-600), var(--blue-700) 54%, #3B6BF0);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(34, 84, 244, .28);
}
.cms-btn-primary:hover {
  background: linear-gradient(118deg, var(--blue-400), var(--blue-600) 54%, var(--blue-700));
  box-shadow: 0 14px 34px rgba(34, 84, 244, .38);
}

.cms-btn-ghost {
  background: #fff;
  border-color: var(--blue-200);
  color: var(--blue-700);
}
.cms-btn-ghost:hover {
  background: var(--blue-050);
  border-color: var(--blue-500);
  box-shadow: 0 10px 28px rgba(34, 84, 244, .14);
}

/* ==========================================================================
   四、区块与标题
   ========================================================================== */

.cms-sec { padding: 84px 0; }
.cms-sec--alt { background: var(--cms-bg-2); }

.cms-sec-t {
  position: relative;
  color: var(--cms-ink);
  font-weight: 800;
  letter-spacing: -.02em;
}
.cms-sec-t::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 auto 18px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
}

.cms-sec-sub { color: var(--cms-ink-3); }

/* ==========================================================================
   五、信任标识墙
   ========================================================================== */

.cms-logos { background: #fff; }
.cms-logos-t { color: var(--cms-ink-3); letter-spacing: .16em; }
.cms-logo-item {
  color: var(--cms-ink-3);
  opacity: .62;
  font-weight: 600;
  transition: opacity .24s ease, color .24s ease, transform .24s ease;
}
.cms-logo-item:hover { opacity: 1; color: var(--blue-700); transform: translateY(-2px); }

/* ==========================================================================
   六、卡片
   白卡片 + 蓝色描边 + 悬停浮起加蓝晕，
   这是参考站产品卡与优势卡的核心处理。
   ========================================================================== */

.cms-card,
.cms-post,
.cms-prod,
.cms-quote {
  position: relative;
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(11, 29, 48, .04);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1),
              border-color .3s ease, box-shadow .3s ease;
}
/* 顶部一道会随鼠标移动的蓝色高光 */
.cms-card::before,
.cms-post::before,
.cms-prod::before,
.cms-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
      rgba(38, 141, 247, .58), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.cms-card:hover::before,
.cms-post:hover::before,
.cms-prod:hover::before,
.cms-quote:hover::before { opacity: 1; }

.cms-card:hover,
.cms-post:hover,
.cms-prod:hover,
.cms-quote:hover {
  transform: translateY(-6px);
  border-color: var(--blue-200);
  box-shadow: 0 18px 44px rgba(34, 84, 244, .13);
}

.cms-card h3,
.cms-post h3 { color: var(--cms-ink); }
.cms-card p,
.cms-post .cms-sum { color: var(--cms-ink-2); }
.cms-post h3 a { color: var(--cms-ink); }
.cms-post h3 a:hover { color: var(--blue-700); }
.cms-prod b { color: var(--cms-ink); }
.cms-prod span { color: var(--cms-ink-3); }

.cms-card-ic {
  background: linear-gradient(140deg, var(--blue-100), var(--blue-050));
  color: var(--blue-700);
  border: 1px solid var(--blue-200);
}
.cms-card-go { color: var(--blue-600); }

.cms-tag {
  background: var(--blue-050);
  color: var(--blue-700);
  border: 1px solid var(--blue-200);
}
.cms-date { color: var(--cms-ink-4); }
.cms-post-cover { box-shadow: 0 10px 30px rgba(11, 29, 48, .1); }

/* ==========================================================================
   七、特性分栏
   ========================================================================== */

.cms-feat-sec { padding: 104px 0; }
.cms-feat-sec--alt { background: var(--cms-bg-2); }
.cms-feat-sec--dark {
  background: linear-gradient(155deg, #0B1D30, #123A6B);
}

.cms-feat-visual {
  background: linear-gradient(150deg, var(--blue-050), #DCEBFF);
  border: 1px solid var(--blue-200);
  box-shadow: 0 14px 40px rgba(34, 84, 244, .1);
}
/* 序号用蓝色渐变 */
.cms-feat-visual--n {
  color: transparent;
  background: linear-gradient(160deg, var(--blue-600), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.04em;
}
.cms-feat+.cms-feat { border-top-color: var(--cms-line); }
.cms-feat-body h3 { color: var(--cms-ink); }
.cms-feat-body p { color: var(--cms-ink-2); }
.cms-feat-go { color: var(--blue-700); font-weight: 600; }
.cms-feat-go:hover { color: var(--blue-400); }
.cms-feat-sec--dark .cms-feat-body h3 { color: #fff; }
.cms-feat-sec--dark .cms-feat-body p { color: rgba(255, 255, 255, .78); }
.cms-feat-sec--dark .cms-feat-go { color: var(--blue-400); }
.cms-feat-sec--dark .cms-feat-visual {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
}

/* ==========================================================================
   八、流程步骤
   ========================================================================== */

.cms-steps { background: #fff; }
.cms-step { transition: background .26s ease; }
.cms-step:hover {
  background: var(--blue-050);
  border-radius: 12px;
}
.cms-step::before {
  background: linear-gradient(90deg, var(--blue-600), transparent);
}
.cms-step+.cms-step { border-left-color: var(--cms-line); }
.cms-step-n { color: var(--blue-700); }
.cms-step h3 { color: var(--cms-ink); }
.cms-step p { color: var(--cms-ink-2); }

/* ==========================================================================
   九、数据指标：参考站的数字区块用蓝色渐变，这里同调
   ========================================================================== */

.cms-stats { background: #fff; border-block: 1px solid var(--cms-line); }
.cms-stats--base { background: #fff; }
.cms-stats--alt { background: var(--cms-bg-2); }
.cms-stats--brand {
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(38, 141, 247, .16), transparent 70%),
    linear-gradient(180deg, #F5F9FF, #FFFFFF);
}
.cms-stats-t { color: var(--cms-ink); }
.cms-stat b {
  background: linear-gradient(118deg, var(--blue-600), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
/* 说明文字的对比度要单独盯：
   cms.css 里这行是 rgba(255,255,255,.68)（白字，因为它原本是深底），
   亮色主题下沿用就变成「浅底白字」——数字看得见、说明看不见。
   亮色下统一用 ink-2，比 ink-3 更深一档，14px 小字才够清楚。 */
.cms-stat span { color: var(--cms-ink-2); }
.cms-stats--base .cms-stat span,
.cms-stats--alt  .cms-stat span,
.cms-stats--brand .cms-stat span { color: var(--cms-ink-2); }

/* ==========================================================================
   十、评价 / FAQ
   ========================================================================== */

.cms-quotes-sec { background: #fff; }
.cms-quote blockquote { color: var(--cms-ink-2); }
.cms-quote-who b { color: var(--cms-ink); }
.cms-quote-who span { color: var(--cms-ink-4); }
.cms-quote-ic {
  position: relative;
  background: var(--blue-050);
  color: var(--blue-600);
  border-color: var(--blue-200);
  overflow: hidden;
  /* 用两条伪元素画引号：❝ 字符在很多中文字体里没有字形，
     会渲染成空心方框。CSS 画的不依赖字体。 */
  font-size: 0;
}
.cms-quote-ic::before,
.cms-quote-ic::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 13px;
  border: 2px solid var(--blue-500);
  border-radius: 0 0 0 8px;
  opacity: .8;
}
.cms-quote-ic::before { left: 11px; top: 13px; }
.cms-quote-ic::after  { left: 23px; top: 13px; }

.cms-faq-sec { background: var(--cms-bg-2); }
.cms-faq,
.cms-faq:first-of-type { border-color: var(--cms-line); }
.cms-faq summary { color: var(--cms-ink); }
.cms-faq summary:hover { color: var(--blue-700); }
.cms-faq-ic::before,
.cms-faq-ic::after { background: var(--blue-500); }
.cms-faq-a { color: var(--cms-ink-2); }

/* ==========================================================================
   十一、图集
   ========================================================================== */

.cms-gal { background: #fff; border-color: var(--cms-line); }
.cms-gal:hover {
  border-color: var(--blue-200);
  box-shadow: 0 18px 46px rgba(34, 84, 244, .16);
}
.cms-gal figcaption { color: var(--cms-ink-2); }

/* ==========================================================================
   十二、CTA 与联系
   ========================================================================== */

.cms-cta {
  background:
    radial-gradient(720px 320px at 50% 0%, rgba(38, 141, 247, .18), transparent 70%),
    linear-gradient(160deg, #0B1D30, #143A6E);
}
.cms-cta h2 { color: #fff; }
.cms-cta p { color: rgba(255, 255, 255, .8); }
.cms-cta-note { color: rgba(255, 255, 255, .55); }

.cms-btn-light {
  background: #fff;
  color: var(--blue-700);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.cms-btn-light:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.cms-btn-outline { border-color: rgba(255, 255, 255, .55); color: #F2F7FF; }
.cms-btn-outline:hover { background: rgba(255, 255, 255, .14); }

.cms-contact { background: var(--cms-bg-2); }
.cms-crow {
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(11, 29, 48, .04);
}
.cms-crow b { color: var(--cms-ink-3); }
.cms-crow span { color: var(--blue-700); }

/* ==========================================================================
   十三、页头 / 页脚 / 富文本 / 兜底
   ========================================================================== */

.cms-pagehead {
  background: linear-gradient(180deg, var(--blue-050), #FFFFFF);
  border-bottom: 1px solid var(--cms-line);
}
.cms-pagehead h1 { color: var(--cms-ink); }
.cms-lead { color: var(--cms-ink-2); }

.cms-foot {
  background: #0B1D30;
  border-top: 3px solid var(--blue-600);
}
.cms-menu--foot a { color: rgba(255, 255, 255, .78); }
.cms-menu--foot a:hover { color: #fff; background: rgba(38, 141, 247, .2); }
.cms-copy { color: rgba(255, 255, 255, .58); }

.cms-richtext h2,
.cms-richtext h3,
.cms-rt h2 { color: var(--cms-ink); }
.cms-richtext p,
.cms-richtext ul,
.cms-richtext ol,
.cms-rt-body { color: var(--cms-ink-2); }
.cms-richtext a,
.cms-article-body a { color: var(--blue-600); }
.cms-richtext blockquote,
.cms-article-body blockquote {
  background: var(--blue-050);
  border-left-color: var(--blue-500);
  color: var(--cms-ink-2);
}
.cms-richtext th { background: var(--blue-050); color: var(--cms-ink); }
.cms-richtext td,
.cms-richtext th { border-color: var(--cms-line); }
.cms-richtext code,
.cms-article-body code {
  background: var(--blue-050);
  color: var(--blue-700);
}
.cms-richtext img,
.cms-article-body img { box-shadow: 0 10px 30px rgba(11, 29, 48, .12); }

.cms-fallback {
  background: #fff;
  border: 1px solid var(--cms-line);
  box-shadow: 0 10px 34px rgba(34, 84, 244, .1);
}
.cms-fallback h1 { color: var(--cms-ink); }
.cms-fallback p { color: var(--cms-ink-3); }
.cms-empty {
  background: var(--cms-bg-2);
  border-color: var(--blue-200);
  color: var(--cms-ink-3);
}

/* ==========================================================================
   十四、文章详情页
   ========================================================================== */

.cms-crumb { color: var(--cms-ink-4); }
.cms-crumb a { color: var(--cms-ink-3); }
.cms-crumb a:hover { color: var(--blue-700); }
.cms-crumb .sep { color: var(--blue-200); }
.cms-crumb .cur { color: var(--cms-ink); }
.cms-article-title { color: var(--cms-ink); }
.cms-post-meta { border-bottom-color: var(--cms-line); color: var(--cms-ink-4); }
.cms-post-meta span+span::before { background: var(--blue-200); }
.cms-article-body { color: var(--cms-ink-2); }
.cms-article-body h2 {
  color: var(--cms-ink);
  border-bottom-color: var(--cms-line);
}
.cms-article-body h3,
.cms-article-body h4 { color: var(--cms-ink); }
.cms-article-body pre {
  background: #0B1D30;
  border: 1px solid #143A6E;
  color: #DCE7F5;
}
.cms-article-body hr { border-top-color: var(--cms-line); }

.cms-post-nav a {
  background: #fff;
  border-color: var(--cms-line);
}
.cms-post-nav a:hover {
  border-color: var(--blue-200);
  box-shadow: 0 14px 38px rgba(34, 84, 244, .13);
}
.cms-post-nav small { color: var(--blue-600); }
.cms-post-nav b { color: var(--cms-ink); }
.cms-post-nav .off {
  background: var(--cms-bg-2);
  border-color: var(--cms-line);
}
.cms-post-nav .off b { color: var(--cms-ink-4); }

/* ==========================================================================
   十五、留资悬浮组件
   ========================================================================== */

.cms-body .glw-fab {
  box-shadow: 0 10px 30px rgba(34, 84, 244, .3),
              0 0 0 1px rgba(34, 84, 244, .2);
}
.cms-body .glw-panel {
  background: rgba(255, 255, 255, .98);
  border-color: var(--cms-line);
  box-shadow: 0 24px 70px rgba(34, 84, 244, .2);
}
/* 引导气泡：白字在 --blue-600 上实测 4.49:1，差 0.01 达不到 AA。
   把底色压深一档到 blue-700 就稳过。 */
.cms-body .glw-bub { background: var(--blue-700); color: #fff; }

/* ==========================================================================
   十六、响应式
   ========================================================================== */

@media (max-width: 900px) {
  .cms-hero { padding: 90px 0 82px; }
  .cms-sec { padding: 60px 0; }
  .cms-feat-sec { padding: 70px 0; }
  .cms-step+.cms-step { border-left: 0; border-top: 1px solid var(--cms-line); }
}
@media (max-width: 640px) {
  .cms-hero { padding: 66px 0 60px; }
  .cms-hero h1 { letter-spacing: -.02em; }
  .cms-eyebrow { font-size: 11.5px; padding: 6px 14px; }
  .cms-cards--2, .cms-cards--3, .cms-cards--4,
  .cms-gals--2, .cms-gals--3, .cms-gals--4 { grid-template-columns: 1fr; }
  .cms-card:hover, .cms-post:hover,
  .cms-prod:hover, .cms-quote:hover { transform: translateY(-3px); }
}

/* 浅色页的动效降级：淡入一样保留，只关掉位移与跟随 */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cms-btn::after { display: none; }
  .cms-card::before, .cms-post::before,
  .cms-prod::before, .cms-quote::before { display: none; }
  .cms-btn:hover, .cms-card:hover, .cms-post:hover,
  .cms-prod:hover, .cms-quote:hover { transform: none; }
}

/* ==========================================================================
   移动端导航折叠 · 科技蓝适配
   ========================================================================== */

.cms-nav-toggle {
  background: #fff;
  border-color: var(--blue-200);
}
.cms-nav-toggle:hover {
  border-color: var(--blue-500);
  background: var(--blue-050);
}
.cms-nav-toggle-bars i { background: var(--blue-700); }
.cms-nav-toggle:focus-visible { outline-color: var(--blue-600); }

.cms-nav-mask {
  /* 不加 backdrop-filter：它会让本元素的 fixed 定位失效 */
  background: rgba(11, 18, 30, .52);
}

.cms-head .cms-wrap > .cms-menu--top {
  background: rgba(255, 255, 255, .98);
  border-bottom-color: var(--cms-line);
  box-shadow: 0 18px 44px rgba(34, 84, 244, .16);
}
.cms-menu--top > li { border-bottom-color: var(--cms-line); }
.cms-menu--top > li > a { color: var(--cms-ink); }
.cms-menu--top > li > a:hover { color: var(--blue-700); }

.cms-sub-btn-ic { border-color: var(--cms-ink-4); }
.cms-sub-btn[aria-expanded="true"] .cms-sub-btn-ic { border-color: var(--blue-600); }
.cms-sub-btn:focus-visible { outline-color: var(--blue-600); }

.cms-submenu { border-left-color: var(--blue-200); }
.cms-submenu a { color: var(--cms-ink-3); }
.cms-submenu a::before { background: var(--blue-200); }
.cms-submenu a:hover {
  color: var(--blue-700);
  background: var(--blue-050);
}

/* ---------- 窄屏手风琴：让位给 cms.css ----------
   cms.css 的 @media (max-width:900px) 里把 .cms-submenu 改成了
   手风琴（background:none; border:0; position:static）。
   但本主题在 cms.css 之后加载，上面那条 .cms-submenu 的卡片样式
   会把它盖回去——表现是子菜单变成一张浮在右侧的白卡片。
   这里显式在窄屏下还原成流式手风琴。 */
@media (max-width: 900px) {
  .cms-submenu {
    position: static;
    background: none;
    border: 0;
    border-left: 2px solid var(--cms-line);
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   十七、首屏左右分栏与右侧示意配图（配合 layout-v2.css）
   本文件在 layout-v2.css 之后加载，只负责把配图染成科技蓝的调子。
   ========================================================================== */

.cms-hero.has-media {
  /* 右侧有配图时，顶部光晕往右偏一点，跟配图的重心对上 */
  background-image: linear-gradient(172deg, #F7FBFF 0%, #FFFFFF 62%, #F2F8FF 100%);
}
.cms-hero.has-media::before {
  left: auto;
  right: -6%;
  transform: none;
  width: min(720px, 62%);
  background: linear-gradient(90deg, transparent, rgba(34, 84, 244, .16), transparent);
}

.cms-hero-art {
  background: linear-gradient(158deg, #FFFFFF, #EFF5FF);
  border-color: var(--blue-200);
  box-shadow: 0 26px 68px rgba(34, 84, 244, .17);
}
.cms-hero-art::before {
  background: radial-gradient(closest-side, rgba(38, 141, 247, .22), transparent 72%);
}
.cms-hero-cap { color: var(--cms-ink-3); }

.cms-art-panel { border-color: var(--blue-200); }
.cms-art-head { background: var(--blue-050); border-bottom-color: var(--blue-200); }
.cms-art-list li + li { border-top-color: var(--blue-100); }
.cms-art-tag--ok { background: var(--blue-100); color: var(--blue-700); }
.cms-art-bar2 { background: var(--blue-050); border-top-color: var(--blue-200); }

.cms-art-code { border-color: #14375F; }
.cms-art-l.k { color: #7CD5FF; }
.cms-art-l.p { color: #A8BEDA; }

.cms-art-tile { border-color: var(--blue-200); }
.cms-art-chart { border-color: var(--blue-200); }
.cms-art-bars i {
  background: linear-gradient(180deg, var(--blue-600), rgba(38, 141, 247, .26));
}

/* ---------- 三列特性卡片 ---------- */
.cms-fcard {
  border-color: var(--cms-line);
  box-shadow: 0 2px 10px rgba(11, 29, 48, .04);
}
.cms-fcard:hover {
  border-color: var(--blue-200);
  box-shadow: 0 20px 48px rgba(34, 84, 244, .14);
}
.cms-fcard-n,
.cms-feat-badge {
  background: linear-gradient(150deg, var(--blue-100), var(--blue-050));
  border: 1px solid var(--blue-200);
  color: var(--blue-700);
}

/* 窄屏下配图不再并排，让它自然落到文案下方 */
@media (max-width: 1080px) {
  .cms-hero.has-media::before { right: -20%; width: 80%; }
}

/* ---------- 窄屏让位 ----------
   cms.css 在窄屏隐藏了 .cms-logo::after 装饰线、压低了头部高度，
   但本主题在它之后加载，.cms-logo::after 的 display 会被覆盖回 block，
   装饰线又冒出来把 header 顶高。这里显式让位。 */
@media (max-width: 900px) {
  .cms-logo::after { display: none; }
}


/* ==========================================================================
   十八、页脚三栏（配合 footer-v2.css）
   footer-v2.css 负责结构与布局，这里只做科技蓝主题下的颜色微调。
   ========================================================================== */

.cms-foot-col h4 { color: #fff; }
.cms-foot-name { color: var(--blue-400); }
.cms-foot-slogan { color: rgba(255, 255, 255, .56); }
.cms-foot-ct li { color: rgba(255, 255, 255, .66); }
.cms-foot-ct-k { color: rgba(255, 255, 255, .36); }
.cms-foot-ct a { color: rgba(255, 255, 255, .8); }
.cms-foot-ct a:hover { color: var(--blue-400); }
.cms-foot-col .cms-menu a { color: rgba(255, 255, 255, .66); }
.cms-foot-col .cms-menu a:hover { color: var(--blue-400); }
.cms-foot-soc a {
  border-color: rgba(19, 173, 255, .26);
  color: rgba(255, 255, 255, .74);
}
.cms-foot-soc a:hover {
  border-color: var(--blue-400);
  background: rgba(19, 173, 255, .12);
  color: #fff;
}
.cms-foot-bot { border-top-color: rgba(19, 173, 255, .16); }
.cms-copy { color: rgba(255, 255, 255, .48); }
.cms-legal { color: rgba(255, 255, 255, .4); }
.cms-legal a { color: rgba(255, 255, 255, .56); }