/* ==========================================================================
   视觉精修 v3
   --------------------------------------------------------------------------
   fix-v3.css 解决的是「不炸」，这一层解决的是「好看」。

   两个文件的分工：
     fix-v3.css   修缺陷（溢出、截断、优先级）—— 有实测数据支撑
     polish-v3.css 提质感（间距、层级、色彩过渡）—— 靠设计判断

   改动依据（都是刚才截图里看到的问题）：
     1. 首屏左右两栏宽度不等（1.05fr / .95fr），
        右侧配图比内容窄却离右边缘更远，视觉上「右边空一块」
     2. 章节标题与正文之间层次不够，正文偏灰偏淡
     3. 区块之间的间距节奏不统一（有 52px 也有 88px）
     4. 引文卡文字对比度不足，投影时几乎看不清
     5. 首屏大标题与副标题之间偏紧
   ========================================================================== */

/* ==========================================================================
   一、首屏：两栏比例与视觉重心
   --------------------------------------------------------------------------
   原来 1.05fr / .95fr 差距只有 10px，肉眼看不出差别，
   但内容多的左栏会显得拥挤、右栏显得空。
   改成 1.12fr / .88fr 让左栏（文案+按钮）更从容，
   右栏（配图）收窄一些，两栏之间的呼吸感也更均匀。
   ========================================================================== */
.cms-hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 72px;
}

/* ==========================================================================
   二、色彩：把「纯白/纯灰」改成带一点冷调的层次
   --------------------------------------------------------------------------
   页面里 #fff、#F7F9FC、#F0F4FA 混用，
   相邻区块的明度差要么过大（刺眼）要么过小（分不清）。
   统一成三档：纯白 / 极浅冷灰 / 浅冷灰，
   相邻区块之间保证有可见但不突兀的层次差。
   ========================================================================== */
.cms-body {
  /* 三个层次：页面底、内容卡、区块分隔 */
  --pv-0: #FFFFFF;
  --pv-1: #F7F9FC;
  --pv-2: #EFF3F9;
}

/* 首屏背景：从原来的 165deg 双色渐变改成更克制的三段 */
.cms-hero {
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(34,84,244,.07), transparent 58%),
    linear-gradient(168deg, #F2F6FC 0%, #F9FBFD 52%, #FFFFFF 100%);
}

/* 区块交替：用两个变量值而不是各写各的十六进制 */
.cms-feat-sec--alt { background: var(--pv-1, #F7F9FC); }
.cms-feat-sec--base,
.cms-sec { background: var(--pv-0, #FFFFFF); }

/* ==========================================================================
   三、间距节奏统一
   --------------------------------------------------------------------------
   原来区块 padding 从 52px 到 112px 全凭各处手写，
   滚动时能明显感觉到「忽松忽紧」。
   这里统一成一套节奏：桌面 96 / 平板 72 / 手机 56。
   ========================================================================== */
@media (min-width: 1025px) {
  .cms-sec,
  .cms-stats,
  .cms-cases,
  .cms-cta { padding: 96px 0; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .cms-sec,
  .cms-stats,
  .cms-cases,
  .cms-cta { padding: 72px 0; }
}
@media (max-width: 640px) {
  .cms-sec,
  .cms-stats,
  .cms-cases,
  .cms-cta { padding: 56px 0; }
}

/* 首屏单独处理：它要给人「第一眼」的冲击，不适用上面的通用节奏 */
.cms-hero.has-media {
  padding: 116px 0 112px;
}
@media (max-width: 1024px) {
  .cms-hero.has-media { padding: 88px 0 84px; }
}
@media (max-width: 640px) {
  .cms-hero.has-media { padding: 60px 0 56px; }
}

/* ==========================================================================
   四、文字层级：让「标题 → 说明 → 正文」三级关系立起来
   --------------------------------------------------------------------------
   截图里最明显的问题是：章节标题下面紧跟一段灰色说明，
   两者字号差不够、颜色差也不够，读起来像一段话而不是两个层级。
   修法：说明文字加大一档字号、颜色提深一档、加左侧小标记。
   ========================================================================== */
.cms-sec-t {
  line-height: 1.3;
  letter-spacing: -.01em;
}

.cms-sec-desc {
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.85;
  color: var(--cms-ink-3, #4A566A);
  max-width: 62ch;          /* 一行不超过 62 个字符，可读性最佳区间 */
}

/* 章节标题上方的小标签：加一条竖线做视觉锚点 */
.cms-sec-head.has-label .cms-sec-t::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: var(--cms-brand, #2254F4);
}

/* ==========================================================================
   五、正文对比度
   --------------------------------------------------------------------------
   --cms-ink-3 是正文里大量使用的灰色，
   在纯白底上偏淡（对比度约 4.2:1，低于 WCAG AA 的 4.5:1）。
   提深到约 5.6:1，既达标也能让长段落更易读。
   ========================================================================== */
.cms-body {
  --cms-ink-3: #4A5568;
}

.cms-body p,
.cms-fcard p,
.cms-pr-desc {
  color: var(--cms-ink-3);
  line-height: 1.85;
}

/* ==========================================================================
   六、引文卡：提高可读性
   截图里引文文字偏淡、投影仪下几乎看不清。
   ========================================================================== */
.cms-quote {
  background: var(--pv-0, #FFFFFF);
  border: 1px solid var(--cms-line, #E6EBF5);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 4px 16px rgba(11,37,69,.05);
}

.cms-quote p {
  color: var(--cms-ink, #0B1D30);      /* 引文是主要内容，要最深 */
  font-size: 15.5px;
  line-height: 1.9;
}

.cms-quote-src {
  color: var(--cms-ink-3, #4A5568);
  font-size: 13px;
}

/* ==========================================================================
   七、按钮：主次分明
   截图里两个按钮的视觉权重接近，用户不知道该点哪个。
   主按钮加深阴影与渐变，次按钮弱化。
   ========================================================================== */
.cms-btn {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* 注意类名是 .cms-btn-primary（连字符），不是 .primary。
   写成 .primary 时选择器匹配不到任何元素，
   表现为「首页按钮正常、某些页面按钮却是白底蓝字」——
   因为首页那个恰好还命中了 cms.css 的基础样式。
   这里跟着 cms.css 的 cms-btn-primary 写，避免同类笔误。 */

/* 渐变两端都从品牌色派生，而不是写死十六进制：
   后台「站点设置 → 主色」改了 --cms-brand，这里会跟着变，
   不会出现「整体换色了但按钮还是旧蓝」的割裂感。 */
.cms-btn-primary {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--cms-brand, #2254F4) 88%, white),
              var(--cms-brand-600, #1E43CC));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cms-brand, #2254F4) 26%, transparent);
}
.cms-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--cms-brand, #2254F4) 32%, transparent);
}

/* 不支持 color-mix 的浏览器（Safari < 16.2 等）退回纯色，
   不用 @supports 是因为它只是锦上添花，退回纯色不影响可用性 */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cms-btn-primary { background: var(--cms-brand, #2254F4); }
}
/* 次按钮（幽灵/描边类）统一白底蓝字。
   变体有 primary / light / ghost / outline 四种，
   都要排除，否则会把它们一起改成白底——primary 变白底白字就看不见了，
   这正是我在 404 页上踩到的那个问题。
   用 :not() 把四种都排除，虽然啰嗦但不会漏。 */
.cms-btn:not(.cms-btn-primary):not(.cms-btn-light):not(.cms-btn-ghost):not(.cms-btn-outline) {
  background: var(--pv-0, #FFFFFF);
  border-color: #C7D8FA;
  color: var(--cms-brand, #2254F4);
}
.cms-btn:not(.cms-btn-primary):not(.cms-btn-light):not(.cms-btn-ghost):not(.cms-btn-outline):hover {
  background: #F4F8FF;
  border-color: var(--cms-brand, #2254F4);
}
/* 键盘可达性：焦点环不能被上面的背景覆盖掉 */
.cms-btn-primary,
.cms-btn-primary:visited { color: #fff; }

.cms-btn:focus-visible {
  outline: 3px solid rgba(34,84,244,.45);
  outline-offset: 3px;
}

/* ==========================================================================
   八、卡片：加一点点层次，而不是纯平
   ========================================================================== */
.cms-fcard,
.cms-pr-card,
.cms-prod {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .cms-fcard:hover,
  .cms-pr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(11,37,69,.10);
    border-color: #C7D8FA;
  }
}

/* ==========================================================================
   九、页脚：从「信息罗列」变成「有层次的收尾」
   ========================================================================== */
.cms-foot-ct a,
.cms-foot-col .cms-menu a {
  transition: color .16s ease;
}

/* ==========================================================================
   十、响应式收尾
   ========================================================================== */
@media (max-width: 1024px) {
  .cms-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
  }
}
@media (max-width: 640px) {
  .cms-hero-grid { gap: 36px; }
  .cms-quote { padding: 22px 18px; }
  .cms-quote p { font-size: 15px; }
}