/* ==========================================================================
   CMS 前台样式
   与后台 admin.css 相互独立：前台给访客看，后台给自己看，
   两边变量名不重叠，改样式不会互相打架。
   ========================================================================== */

.cms-body {
  --cms-brand: #0B2545;
  --cms-brand-600: #071A33;
  --cms-accent: #B8934A;
  --cms-ink: #0A1524;
  --cms-ink-2: #3D4A5C;
  --cms-ink-3: #7C8899;
  --cms-line: #E6EAF0;
  --cms-bg: #FBFBFD;
  --cms-bg-2: #F5F7FA;

  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: var(--cms-ink);
  background: var(--cms-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.cms-body * { box-sizing: border-box; }

.cms-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 头部 ---------- */
.cms-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cms-line);
}
.cms-head .cms-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 72px;
  /* 留资组件的引导气泡绝对定位在 logo 右上方，
     头部太矮会把气泡顶出容器、压到 logo 文字上 */
  padding-top: 10px;
  padding-bottom: 10px;
}
.cms-head .cms-wrap > .cms-menu { margin-left: auto; }

.cms-logo {
  position: relative;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--cms-brand);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  /* 气泡组件 z-index 9998，头部要压得住它 */
  position: relative;
  z-index: 10000;
}
.cms-logo:hover { color: var(--cms-accent); }

.cms-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.cms-menu li { position: relative; }
.cms-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--cms-ink-2);
  text-decoration: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.cms-menu a:hover { color: var(--cms-brand); background: var(--cms-bg-2); }

/* 二级菜单：悬停才展开 */
.cms-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 20;
}
.cms-menu li:hover > .cms-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cms-submenu a { padding: 8px 10px; font-size: 14px; }

/* ---------- 页头 ---------- */
.cms-pagehead {
  padding: 72px 0 56px;
  background: linear-gradient(180deg, #F0F4FA 0%, var(--cms-bg) 100%);
  border-bottom: 1px solid var(--cms-line);
}
.cms-pagehead h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.22;
}
.cms-eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cms-accent);
}
.cms-lead {
  max-width: 720px;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--cms-ink-2);
}

/* ---------- 通用区块 ---------- */
.cms-sec { padding: 64px 0; }
.cms-sec--alt { background: var(--cms-bg-2); }
.cms-sec--custom { padding-top: 0; }

.cms-sec-t {
  margin: 0 0 32px;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 700;
  letter-spacing: -.015em;
  text-align: center;
}

/* ---------- 按钮 ---------- */
.cms-btn {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid var(--cms-line);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cms-brand);
  text-decoration: none;
  background: #fff;
  transition: transform .16s, box-shadow .16s, background .16s;
}
.cms-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(11, 37, 69, .12);
}
.cms-btn-primary {
  border-color: var(--cms-brand);
  background: var(--cms-brand);
  color: #fff;
}
.cms-btn-primary:hover { background: var(--cms-brand-600); }
.cms-btn-light {
  border-color: rgba(255, 255, 255, .4);
  background: #fff;
  color: var(--cms-brand);
}

/* ---------- 公告条 ---------- */
.cms-notice {
  padding: 11px 24px;
  background: var(--cms-brand);
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.cms-notice a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 首屏 ---------- */
.cms-hero {
  padding: 96px 0;
  text-align: center;
  background: linear-gradient(165deg, #F0F4FA 0%, #FBFBFD 70%);
}
.cms-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.cms-hero .cms-lead { margin: 0 auto 30px; }
.cms-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- 图文正文 ---------- */
.cms-rt--text { padding: 64px 0; }
.cms-rt--side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}
.cms-rt-img {
  width: 100%;
  border-radius: 16px;
  display: block;
}
.cms-rt--text .cms-rt-img { margin-bottom: 32px; max-width: 900px; }
.cms-rt h2 {
  margin: 0 0 18px;
  font-size: clamp(21px, 3.2vw, 28px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.cms-richtext { max-width: 820px; }
.cms-richtext h2 { margin: 40px 0 14px; font-size: 24px; font-weight: 700; }
.cms-richtext h3 { margin: 30px 0 12px; font-size: 19px; font-weight: 600; }
.cms-richtext p { margin: 0 0 16px; line-height: 1.9; color: var(--cms-ink-2); }
.cms-richtext ul, .cms-richtext ol { margin: 0 0 16px; padding-left: 24px; color: var(--cms-ink-2); }
.cms-richtext li { margin-bottom: 7px; }
.cms-richtext img { max-width: 100%; height: auto; border-radius: 12px; }
.cms-richtext a { color: var(--cms-brand); text-underline-offset: 3px; }
.cms-richtext blockquote {
  margin: 20px 0;
  padding: 4px 20px;
  border-left: 3px solid var(--cms-accent);
  background: var(--cms-bg-2);
  border-radius: 0 8px 8px 0;
  color: var(--cms-ink-2);
}
.cms-richtext table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; }
.cms-richtext th, .cms-richtext td { padding: 10px 14px; border: 1px solid var(--cms-line); text-align: left; }
.cms-richtext th { background: var(--cms-bg-2); font-weight: 600; }
.cms-rt-body { color: var(--cms-ink-2); line-height: 1.9; }
.cms-rt-body p { margin: 0 0 16px; }
.cms-rt-body ul, .cms-rt-body ol { padding-left: 24px; margin: 0 0 16px; }

/* ---------- 卡片网格 ---------- */
.cms-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.cms-card {
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: 14px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cms-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .08);
  border-color: rgba(11, 37, 69, .18);
}
.cms-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.cms-card p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--cms-ink-3); }

/* ---------- 文章网格 ---------- */
.cms-grid { display: grid; gap: 20px; }
.cms-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cms-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cms-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cms-grid--6 { grid-template-columns: repeat(6, 1fr); }

.cms-post {
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: 14px;
  transition: transform .18s, box-shadow .18s;
}
.cms-post:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16, 24, 40, .08); }
.cms-post-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; margin-bottom: 16px; }
.cms-post h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; line-height: 1.5; }
.cms-post h3 a { color: var(--cms-ink); text-decoration: none; }
.cms-post h3 a:hover { color: var(--cms-brand); }
.cms-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 9px;
  border-radius: 20px;
  background: #F0F4FA;
  font-size: 12px;
  color: var(--cms-brand);
}
.cms-sum { margin: 0 0 10px; font-size: 14px; line-height: 1.75; color: var(--cms-ink-3); }
.cms-date { margin: 0; font-size: 12.5px; color: #A8B2C0; }

.cms-more { margin-top: 30px; text-align: center; }

/* ---------- 产品 ---------- */
.cms-prod {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: 12px;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cms-prod:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(16, 24, 40, .08);
  border-color: rgba(11, 37, 69, .2);
}
.cms-prod b { font-size: 15px; font-weight: 600; color: var(--cms-ink); }
.cms-prod span { font-size: 12.5px; color: var(--cms-ink-3); }

/* ---------- 数据指标 ---------- */
.cms-stats {
  padding: 52px 0;
  background: var(--cms-brand);
  color: #fff;
}
.cms-stats .cms-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
  text-align: center;
}
.cms-stat b {
  display: block;
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.cms-stat span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .68); }

/* ---------- 行动号召 ---------- */
.cms-cta {
  padding: 76px 0;
  background: linear-gradient(135deg, #0B2545 0%, #1B4180 100%);
  color: #fff;
  text-align: center;
}
.cms-cta h2 { margin: 0 0 14px; font-size: clamp(24px, 4vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.cms-cta p { max-width: 620px; margin: 0 auto 30px; font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, .82); }

/* ---------- 联系方式 ---------- */
.cms-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.cms-crow {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: 12px;
}
.cms-crow b { display: block; margin-bottom: 6px; font-size: 13px; color: var(--cms-ink-3); font-weight: 500; }
.cms-crow span { font-size: 16px; font-weight: 600; color: var(--cms-ink); word-break: break-all; }

/* ---------- 页脚 ---------- */
.cms-foot {
  padding: 44px 0 32px;
  background: var(--cms-brand-600);
  color: rgba(255, 255, 255, .68);
}
.cms-menu--foot { justify-content: center; margin-bottom: 20px; }
.cms-menu--foot a { color: rgba(255, 255, 255, .72); }
.cms-menu--foot a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.cms-copy { margin: 0; font-size: 13px; text-align: center; color: rgba(255, 255, 255, .45); }

/* ---------- 兜底页 ---------- */
.cms-fallback {
  max-width: 560px;
  margin: 0 auto;
  padding: 120px 24px;
  text-align: center;
}
.cms-fallback h1 { margin: 0 0 14px; font-size: 28px; font-weight: 800; }
.cms-fallback p { margin: 0 0 20px; color: var(--cms-ink-3); line-height: 1.85; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .cms-rt--side { grid-template-columns: 1fr; gap: 28px; }
  .cms-grid--3, .cms-grid--4, .cms-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .cms-hero { padding: 68px 0; }
  .cms-pagehead { padding: 52px 0 40px; }
  .cms-sec { padding: 48px 0; }
}

@media (max-width: 640px) {
  .cms-wrap { padding: 0 18px; }
  .cms-head .cms-wrap { flex-direction: column; gap: 8px; padding: 12px 18px; }
  .cms-menu--top { justify-content: center; }
  .cms-grid--2, .cms-grid--3, .cms-grid--4, .cms-grid--6 { grid-template-columns: 1fr; }
  .cms-cta { padding: 56px 0; }
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .cms-body * { animation: none !important; transition: none !important; }
  .cms-btn:hover, .cms-card:hover, .cms-post:hover, .cms-prod:hover { transform: none; }
}

/* ==========================================================================
   文章详情页
   ========================================================================== */

/* 正文比列表页窄一档，长文读起来不累 */
.cms-wrap--narrow{max-width:780px;}

/* ---------- 面包屑 ---------- */
.cms-crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:22px;font-size:13.5px;color:var(--cms-ink-3);
}
.cms-crumb a{color:var(--cms-ink-3);text-decoration:none;transition:color .15s;}
.cms-crumb a:hover{color:var(--cms-brand);}
.cms-crumb .sep{color:#C8D0DC;}
.cms-crumb .cur{color:var(--cms-ink-2);max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- 标题与元信息 ---------- */
.cms-article{padding:44px 0 64px;}
.cms-article-title{
  margin:0 0 16px;font-size:clamp(26px,4.6vw,40px);font-weight:800;
  letter-spacing:-.022em;line-height:1.28;
}
.cms-post-meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--cms-line);
  font-size:13.5px;color:var(--cms-ink-3);
}
.cms-post-meta span{position:relative;}
.cms-post-meta span+span::before{
  content:"";position:absolute;left:-11px;top:50%;
  width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#C8D0DC;
}

/* ---------- 封面大图 ---------- */
.cms-post-hero{margin:0 0 32px;}
.cms-post-hero img{
  display:block;width:100%;max-height:420px;object-fit:cover;border-radius:14px;
}

/* ---------- 正文排版 ---------- */
.cms-article-body{font-size:16.5px;line-height:1.95;color:var(--cms-ink-2);}
.cms-article-body p{margin:0 0 20px;}
.cms-article-body h2{
  margin:40px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--cms-line);
  font-size:23px;font-weight:700;color:var(--cms-ink);letter-spacing:-.01em;
}
.cms-article-body h3{margin:30px 0 12px;font-size:19px;font-weight:600;color:var(--cms-ink);}
.cms-article-body h4{margin:24px 0 10px;font-size:17px;font-weight:600;color:var(--cms-ink);}
.cms-article-body ul,.cms-article-body ol{margin:0 0 20px;padding-left:26px;}
.cms-article-body li{margin-bottom:9px;}
.cms-article-body img{max-width:100%;height:auto;border-radius:12px;margin:6px 0;}
.cms-article-body a{color:var(--cms-brand);text-underline-offset:3px;}
.cms-article-body blockquote{
  margin:24px 0;padding:16px 22px;border-left:3px solid var(--cms-accent);
  background:var(--cms-bg-2);border-radius:0 10px 10px 0;color:var(--cms-ink-2);
}
.cms-article-body blockquote p:last-child{margin-bottom:0;}
.cms-article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;}
.cms-article-body th,.cms-article-body td{padding:11px 15px;border:1px solid var(--cms-line);text-align:left;}
.cms-article-body th{background:var(--cms-bg-2);font-weight:600;}
.cms-article-body code{
  padding:2px 6px;border-radius:5px;background:var(--cms-bg-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--cms-brand);
}
.cms-article-body pre{
  margin:22px 0;padding:18px 20px;border-radius:12px;overflow-x:auto;
  background:var(--cms-brand-600);color:#E4EAF4;font-size:14px;line-height:1.7;
}
.cms-article-body pre code{background:none;color:inherit;padding:0;font-size:inherit;}
.cms-article-body hr{border:0;border-top:1px solid var(--cms-line);margin:34px 0;}

/* ---------- 上下篇 ---------- */
.cms-post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:52px;padding-top:28px;border-top:1px solid var(--cms-line);
}
.cms-post-nav a,.cms-post-nav .off{
  display:block;padding:16px 20px;border:1px solid var(--cms-line);border-radius:12px;
  background:#fff;text-decoration:none;transition:border-color .16s,transform .16s,box-shadow .16s;
}
.cms-post-nav a:hover{border-color:var(--cms-brand);transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,24,40,.07);}
.cms-post-nav .off{background:var(--cms-bg-2);border-style:dashed;}
.cms-post-nav small{display:block;font-size:12.5px;color:var(--cms-ink-3);margin-bottom:5px;}
.cms-post-nav b{
  display:block;font-size:14.5px;font-weight:600;color:var(--cms-ink);line-height:1.55;
}
.cms-post-nav .off b{color:var(--cms-ink-4);font-weight:400;}
.cms-post-nav .next{text-align:right;}

/* ---------- 空状态 ---------- */
.cms-empty{
  padding:52px 24px;text-align:center;color:var(--cms-ink-3);font-size:15px;
  background:var(--cms-bg-2);border:1px dashed var(--cms-line);border-radius:12px;
}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .cms-article{padding:30px 0 48px;}
  .cms-article-body{font-size:16px;}
  .cms-post-nav{grid-template-columns:1fr;}
  .cms-post-nav .next{text-align:left;}
  .cms-crumb .cur{max-width:100%;}
}

/* ==========================================================================
   高端首页模块样式（2026-10-02 扩充）
   目标：大留白、强层次、克制的金色点缀 —— 撑得住「高端大气」四个字
   ========================================================================== */

/* ---------- 首屏增强 ---------- */
.cms-hero{position:relative;overflow:hidden;padding:112px 0 104px;background-size:cover;background-position:center;}
.cms-hero::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,37,69,.12),transparent);
}
.cms-hero--left .cms-wrap{text-align:left;}
.cms-hero--center .cms-wrap{text-align:center;}
.cms-hero--center .cms-lead{margin-left:auto;margin-right:auto;}
.cms-hero--center .cms-hero-btns{justify-content:center;}
.cms-hero h1{max-width:16em;}
.cms-hero--center h1{max-width:none;}
.cms-hero h1 em{
  font-style:normal;position:relative;white-space:nowrap;
  background:linear-gradient(180deg,transparent 66%,rgba(184,147,74,.24) 66%);
}
.cms-hero .cms-lead{max-width:640px;}
.cms-hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;}
.cms-hero-badges{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;
  font-size:13.5px;color:var(--cms-ink-3);
}
.cms-hero-badges span{position:relative;padding-left:16px;}
.cms-hero-badges span::before{
  content:"";position:absolute;left:0;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:var(--cms-accent);
}

.cms-btn-ghost{background:transparent;border-color:rgba(11,37,69,.22);color:var(--cms-brand);}
.cms-btn-ghost:hover{background:rgba(11,37,69,.05);box-shadow:none;}
.cms-btn-outline{background:transparent;border-color:rgba(255,255,255,.42);color:#fff;}
.cms-btn-outline:hover{background:rgba(255,255,255,.12);box-shadow:none;}

/* ---------- 区块副标题 ---------- */
.cms-sec-sub{
  max-width:640px;margin:-16px auto 40px;text-align:center;
  font-size:16px;line-height:1.8;color:var(--cms-ink-3);
}

/* ---------- 信任标识墙 ---------- */
.cms-logos{padding:44px 0;border-bottom:1px solid var(--cms-line);background:#fff;}
.cms-logos-t{
  margin:0 0 24px;text-align:center;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cms-ink-4);
}
.cms-logos-row{display:flex;flex-wrap:wrap;gap:14px 48px;align-items:center;justify-content:center;}
.cms-logo-item{
  font-size:17px;font-weight:600;letter-spacing:.02em;color:var(--cms-ink-4);
  opacity:.72;transition:opacity .18s,color .18s;white-space:nowrap;
}
.cms-logo-item:hover{opacity:1;color:var(--cms-brand);}

/* ---------- 特性分栏 ---------- */
.cms-feat-sec{padding:96px 0;}
.cms-feat-sec--base{background:#fff;}
.cms-feat-sec--alt{background:var(--cms-bg-2);}
.cms-feat-sec--dark{background:var(--cms-brand);color:#fff;}
.cms-feat{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.cms-feat+.cms-feat{margin-top:88px;padding-top:88px;border-top:1px solid rgba(16,24,40,.08);}
.cms-feat-sec--dark .cms-feat+.cms-feat{border-top-color:rgba(255,255,255,.12);}
.cms-feat-visual{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,#F0F4FA,#DCE6F5);
}
.cms-feat-visual img{width:100%;height:100%;object-fit:cover;}
.cms-feat-visual--n{
  font-size:clamp(52px,8vw,88px);font-weight:800;letter-spacing:-.03em;
  color:rgba(11,37,69,.14);line-height:1;
}
.cms-feat-body h3{margin:0 0 14px;font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.015em;}
.cms-feat-body p{margin:0;font-size:16px;line-height:1.9;color:var(--cms-ink-2);}
.cms-feat-go{
  display:inline-block;margin-top:20px;font-size:14.5px;font-weight:600;
  color:var(--cms-brand);text-decoration:none;
}
.cms-feat-go:hover{color:var(--cms-accent);}
.cms-feat-sec--dark .cms-feat-body h3{color:#fff;}
.cms-feat-sec--dark .cms-feat-body p{color:rgba(255,255,255,.76);}
.cms-feat-sec--dark .cms-feat-go{color:var(--cms-accent-300);}
.cms-feat-sec--dark .cms-feat-visual{background:rgba(255,255,255,.08);}

/* ---------- 流程步骤 ---------- */
.cms-steps{background:#fff;}
.cms-steps-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;}
.cms-step{position:relative;padding:34px 30px 30px;}
.cms-step::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--cms-accent),transparent);
  opacity:0;transition:opacity .2s;
}
.cms-step:hover::before{opacity:1;}
.cms-step+.cms-step{border-left:1px solid var(--cms-line);}
.cms-step-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;}
.cms-step-n{
  font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--cms-accent);font-variant-numeric:tabular-nums;
}
.cms-step h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;}
.cms-step p{margin:0;font-size:14.5px;line-height:1.85;color:var(--cms-ink-3);}
.cms-step-img{width:100%;margin-top:18px;border-radius:10px;}

/* ---------- 图集 ---------- */
.cms-gals{display:grid;gap:18px;}
.cms-gals--2{grid-template-columns:repeat(2,1fr);}
.cms-gals--3{grid-template-columns:repeat(3,1fr);}
.cms-gals--4{grid-template-columns:repeat(4,1fr);}
.cms-gal{
  display:block;margin:0;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid var(--cms-line);text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.cms-gal:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(16,24,40,.1);}
.cms-gal img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.cms-gal figcaption{padding:14px 18px;font-size:14px;color:var(--cms-ink-2);}

/* ---------- 常见问题（details 手风琴） ---------- */
.cms-faq-sec{background:var(--cms-bg-2);}
.cms-faq{border-bottom:1px solid var(--cms-line);}
.cms-faq:first-of-type{border-top:1px solid var(--cms-line);}
.cms-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 4px;font-size:16.5px;font-weight:600;color:var(--cms-ink);
  cursor:pointer;list-style:none;transition:color .16s;
}
.cms-faq summary::-webkit-details-marker{display:none;}
.cms-faq summary:hover{color:var(--cms-brand);}
.cms-faq-ic{
  position:relative;flex:none;width:18px;height:18px;
}
.cms-faq-ic::before,.cms-faq-ic::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--cms-accent);
  transform:translate(-50%,-50%);transition:transform .22s,opacity .22s;
}
.cms-faq-ic::before{width:14px;height:1.5px;}
.cms-faq-ic::after{width:1.5px;height:14px;}
.cms-faq[open] .cms-faq-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.cms-faq-a{padding:0 4px 24px;font-size:15px;line-height:1.9;color:var(--cms-ink-2);}

/* ---------- 客户评价 ---------- */
.cms-quotes-sec{background:#fff;}
.cms-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.cms-quote{
  display:flex;flex-direction:column;margin:0;padding:32px 30px;
  background:var(--cms-bg-2);border-radius:16px;border:1px solid var(--cms-line);
}
.cms-quote blockquote{
  flex:1;margin:0 0 24px;font-size:16px;line-height:1.9;color:var(--cms-ink-2);
}
.cms-quote-who{display:flex;align-items:center;gap:13px;}
.cms-quote-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;}
.cms-quote-ic{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--cms-accent);font-size:20px;
  border:1px solid var(--cms-line);
}
.cms-quote-who b{display:block;font-size:14.5px;font-weight:600;color:var(--cms-ink);}
.cms-quote-who span{display:block;font-size:12.5px;color:var(--cms-ink-3);margin-top:2px;}

/* ---------- 卡片增强 ---------- */
.cms-cards--2{grid-template-columns:repeat(2,1fr);}
.cms-cards--3{grid-template-columns:repeat(3,1fr);}
.cms-cards--4{grid-template-columns:repeat(4,1fr);}
.cms-cards--border .cms-card{border-width:1px;background:#fff;}
.cms-cards--border .cms-card:hover{box-shadow:0 10px 30px rgba(16,24,40,.07);}
.cms-cards--solid .cms-card{background:var(--cms-brand);border-color:var(--cms-brand);}
.cms-cards--solid .cms-card h3{color:#fff;}
.cms-cards--solid .cms-card p{color:rgba(255,255,255,.72);}
.cms-cards--solid .cms-card-ic{background:rgba(255,255,255,.12);color:var(--cms-accent-300);}
.cms-card-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:20px;border-radius:12px;
  background:var(--cms-brand-50);color:var(--cms-brand);
  font-size:21px;line-height:1;
}
.cms-card-go{
  display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;
  color:var(--cms-accent-600);
}
a.cms-card{text-decoration:none;}

/* ---------- 数据指标增强 ---------- */
.cms-stats-t{
  margin:0 0 40px;text-align:center;font-size:clamp(21px,3vw,28px);
  font-weight:700;letter-spacing:-.015em;
}
.cms-stats--base{background:#fff;color:var(--cms-ink);}
.cms-stats--base .cms-stats-t{color:var(--cms-ink);}
.cms-stats--base .cms-stat span{color:var(--cms-ink-3);}
.cms-stats--alt{background:var(--cms-bg-2);color:var(--cms-ink);}
.cms-stats--alt .cms-stats-t{color:var(--cms-ink);}
.cms-stats--alt .cms-stat span{color:var(--cms-ink-3);}
.cms-stats--brand{background:var(--cms-brand);color:#fff;}
.cms-stats--brand .cms-stats-t{color:#fff;}
.cms-stats--brand .cms-stat span{color:rgba(255,255,255,.68);}
.cms-stat b{background:none;-webkit-background-clip:initial;}

/* ---------- CTA 增强 ---------- */
.cms-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.cms-cta-note{margin:26px 0 0;font-size:13px;color:rgba(255,255,255,.55);}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .cms-hero{padding:76px 0 68px;}
  .cms-feat{padding:0;gap:30px;margin-top:56px !important;padding-top:56px !important;}
  .cms-feat-sec{padding:68px 0;}
  .cms-cards--3,.cms-cards--4{grid-template-columns:repeat(2,1fr);}
  .cms-step+.cms-step{border-left:0;border-top:1px solid var(--cms-line);}
}
@media (max-width:640px){
  .cms-hero{padding:56px 0 52px;}
  .cms-hero-badges{gap:8px 18px;font-size:12.5px;}
  .cms-feat{grid-template-columns:1fr;}
  .cms-feature-visual{aspect-ratio:16/9;}
  .cms-cards--2,.cms-cards--3,.cms-cards--4{grid-template-columns:1fr;}
  .cms-gals--2,.cms-gals--3,.cms-gals--4{grid-template-columns:1fr;}
  .cms-quote{padding:26px 22px;}
  .cms-logos-row{gap:12px 26px;}
  .cms-logo-item{font-size:15px;}
}

/* ==========================================================================
   landing 版式（首页/活动页）微调
   ========================================================================== */

/* 首页本身有超大标题，导航与 logo 相应放大一号，撑得住首屏 */
.cms-body--landing .cms-logo{font-size:19px;}
.cms-body--landing .cms-head .cms-wrap{min-height:76px;}

/* 引导气泡在 landing 页不显示：
   首屏已经有明确的大标题与按钮，再挂一个气泡既冗余，
   滚动到顶部时还会正好压住品牌名。留资入口按钮本身保留。 */
.cms-body--landing .glw-bub{display:none !important;}

/* 首页留资按钮离右下角远一点，避开页脚内容 */
.cms-body--landing .glw-p-br .glw-host{right:28px;bottom:28px;}

/* ==========================================================================
   移动端导航折叠
   --------------------------------------------------------------------------
   为什么要做：
   10 个顶级菜单项在 390px 宽度上铺开会占三行、约 250px 高，
   首屏内容被整体推到折叠线以下——手机上进站第一眼看到的
   不是内容，而是一堵菜单墙。

   做法是「桌面端完全不变，窄屏才折叠」：
   断点以下汉堡按钮出现、菜单变成顶部抽屉；
   断点以上这套规则全部不生效，桌面端行为与从前完全一致。

   二级菜单在移动端改成手风琴：桌面靠 hover 展开，
   触屏没有 hover，所以必须给一个能点的箭头，
   否则二级链接在手机上永远打不开。
   ========================================================================== */

/* 读屏专用文字：视觉上隐藏但读屏软件能读 */
.cms-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 汉堡按钮与遮罩：桌面端不存在 ---------- */
.cms-nav-toggle,
.cms-nav-mask,
.cms-sub-btn { display: none; }

/* ---------- 桌面端：把菜单「贴」回 header 里 ----------
   菜单 <ul> 为了避开 backdrop-filter 的包含块问题被移到了
   </header> 外面，窄屏时它是 fixed 抽屉、没问题；
   但宽屏时它就该像原来一样待在导航条里。

   这段必须放进 min-width 媒体查询里，不能只靠「写在窄屏规则之后」：
   同特异性的两条规则是「后写的赢」，一旦调整文件里的段落顺序，
   桌面端的 sticky 就会反过来盖掉窄屏的 fixed——
   表现为抽屉既不固定也不折叠，变成一条浮在内容里的普通列表。
   用互斥的媒体查询从根上避免这种顺序依赖。 */
@media (min-width: 901px) {
  /* 桌面端：菜单回到导航条里。
     用 absolute + 负 margin 把它「挂」在 header 的下沿，
     视觉与原来完全一致，同时保住sticky（header 滚动时菜单跟着动）。

     为什么不用 sticky + 负 margin 就完事：
     菜单已经移出 .cms-wrap（为了避开 backdrop-filter 的包含块问题），
     而 max-width:1180px 与居中都是 .cms-wrap 提供的。
     直接让 ul 变成全屏宽，它会顶到屏幕左右边缘、盖住 logo。
     所以这里用 left/right 把宽度重新约束回内容区：
     与 .cms-wrap 的 padding 对齐，视觉上仍然是一整条导航。 */
  /* sticky + 负 margin：菜单接在 header 之后，
     用负 margin 把自身高度「还」给 header，视觉上就落在导航条里。
     宽度自己声明（原来靠 .cms-wrap 提供，现在它已移出 wrap），
     margin-left:auto 把菜单项推到右侧。 */
  .cms-head + .cms-menu--top {
    position: sticky;
    top: 0;
    z-index: 99;
    width: 100%;
    max-width: 1180px;
    margin: -76px auto 0;
    padding: 0 24px;
    background: transparent;
    justify-content: flex-end;
  }
  /* 不用 pointer-events 做镂空：那会让 li之间的空隙吃掉 hover，
     .cms-menu li:hover > .cms-submenu 永远等不到鼠标，
     表现为「桌面端二级菜单打不开」。
     菜单整行透明本来就不可见，不镂空没有副作用。 */
}

/* ---------- 窄屏：折叠布局 ---------- */
@media (max-width: 900px) {

  /* ---------- 窄屏把头部压矮 ----------
     桌面上72-76px 有两处来由：给留资气泡留位置、logo 下方的
     金色装饰线。手机上气泡本来就隐藏了，装饰线在这么窄的地方
     也很挤——实测把 header 顶到 104px，白占掉一屏 12%。
     所以窄屏下：收掉装饰线、压回56px，
     抽屉的起点也正好贴在下沿。 */
  .cms-head .cms-wrap {
    min-height: 52px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .cms-body--landing .cms-head .cms-wrap { min-height: 58px; }
  /* logo 下方的装饰线在窄屏是负担，去掉它省 6px */
  .cms-logo::after { display: none; }
  .cms-body--landing .cms-logo { font-size: 17px; }

  /* 汉堡按钮：三条横线 -> 展开后变叉 */
  .cms-nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: none;
    /* 38px 是「还能顺手点到」的下限；再小就难点了。
       实测 42px 会把 52px 的头部顶到 62px，白占一屏。 */
    width: 38px;
    height: 38px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--cms-line);
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, border-color .2s, transform .2s;
  }
  .cms-nav-toggle:hover { border-color: var(--cms-brand); }
  .cms-nav-toggle:active { transform: scale(.94); }
  /* 键盘聚焦时要有明显提示，鼠标点击不要 */
  .cms-nav-toggle:focus-visible {
    outline: 2px solid var(--cms-brand);
    outline-offset: 2px;
  }

  .cms-nav-toggle-bars {
    position: relative;
    display: block;
    width: 19px;
    height: 13px;
  }
  .cms-nav-toggle-bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--cms-ink);
    transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), opacity .2s, width .3s;
  }
  .cms-nav-toggle-bars i:nth-child(1) { top: 0; }
  .cms-nav-toggle-bars i:nth-child(2) { top: 5.5px; width: 74%; }
  .cms-nav-toggle-bars i:nth-child(3) { top: 11px; }

  /* 展开态：上下两条向中间靠拢并旋转 45 度，中间那条淡出 */
  .cms-nav-toggle[aria-expanded="true"] .cms-nav-toggle-bars i:nth-child(1) {
    top: 5.5px;
    transform: rotate(45deg);
  }
  .cms-nav-toggle[aria-expanded="true"] .cms-nav-toggle-bars i:nth-child(2) {
    opacity: 0;
    transform: scaleX(.2);
  }
  .cms-nav-toggle[aria-expanded="true"] .cms-nav-toggle-bars i:nth-child(3) {
    top: 5.5px;
    transform: rotate(-45deg);
  }

  /* 遮罩：压暗背景，点它收起。
     注意：这个元素虽然写在 <header> 里，但样式上必须靠外层选择器
     提高优先级——它的父级 .cms-head 有 backdrop-filter，
     而 backdrop-filter 会创建包含块，把position:fixed 的子元素
     从「相对视口」改成「相对父级」定位。结果就是遮罩被压成
     header 那么多高、抽屉被顶到屏幕外看不见。
     这里统一用 .cms-nav-mask（不带 .cms-head 前缀）绕开。 */
  .cms-nav-mask {
    display: block;
    /* !important 不是因为选择器不够强，而是因为浏览器会把它改回 relative：
       页面里 .cms-body::before/::after 是 fixed + backdrop-filter，
       它们给 body 建立了包含块，导致本元素的 fixed 失去「相对视口」的基准。
       与其去拆那个包含块（会牵连网格纹理与光晕），
       不如直接用 100% 宽高自己铺满——反正父级就是 body。 */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 90;
    /* 这里刻意不用 backdrop-filter：
       元素自己带 backdrop-filter 会创建包含块，
       浏览器随即把它的 computed position 从 fixed 改回 relative，
       结果 fixed 的 inset:0 失效、遮罩塌成 0 高。
       改用稍深一点的半透明底色，视觉差别很小但行为正确。 */
    background: rgba(11, 18, 30, .52);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .cms-nav-mask[hidden] { display: none; }
  .cms-nav-mask.on { opacity: 1; }

  /* 菜单本体：变成从顶部滑下的抽屉。
     同样要绕开 .cms-head 前缀，理由同上。
     margin-left:auto 要显式清零：桌面端是靠它把菜单推到右侧的，
     到了 fixed 定位它会继续生效，把抽屉整体推偏。 */
  /* 层级安排（这个顺序踩过坑）：
     遮罩 90 < header 95 < 抽屉 110。
     header 必须压在遮罩之上，否则 logo 区域会灰掉；
     抽屉必须在 header 之上，否则整个菜单都被遮罩压暗。 */
  .cms-head { z-index: 95; }

  .cms-menu--top {
    /* 四边与 position 都加 !important：
       主题层（theme-*.css）在这份之后加载，里面的 .cms-menu--top
       规则会盖掉这里的 position，抽屉就变成一条浮在内容里的普通列表。
       与其去猜主题层会不会再动position，不如在这里锁死。 */
    position: fixed !important;
    top: var(--cms-head-h, 62px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 110 !important;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--cms-head-h, 62px));
    margin: 0;
    padding: 8px 24px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-bottom: 1px solid var(--cms-line);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .14);
    /* 收起态：transform 把它挪到视口外。
       不用 display:none——那样无法做过渡动画。 */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.22, .8, .28, 1),
                opacity .26s ease, visibility .26s;
  }
  .cms-menu--top.on {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* 菜单项：横向铺满、加大点击区域。
     44px 是苹果与安卓建议的最小可点高度。 */
  .cms-menu--top > li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cms-line);
  }
  .cms-menu--top > li:last-child { border-bottom: 0; }
  .cms-menu--top > li > a {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    font-size: 15.5px;
    font-weight: 600;
    border-radius: 0;
  }
  .cms-menu--top > li > a:hover {
    background: transparent;
    color: var(--cms-brand);
  }

  /* 二级菜单的展开箭头：默认不显示，桌面端靠 hover 就够了 */
  .cms-sub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cms-sub-btn:focus-visible {
    outline: 2px solid var(--cms-brand);
    outline-offset: -2px;
    border-radius: 8px;
  }
  /* 箭头用两条边框拼成，旋转 45 度就是朝下 */
  .cms-sub-btn-ic {
    display: block;
    width: 7.5px;
    height: 7.5px;
    border-right: 2px solid var(--cms-ink-3);
    border-bottom: 2px solid var(--cms-ink-3);
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .26s cubic-bezier(.3, 1.2, .5, 1);
  }
  .cms-sub-btn[aria-expanded="true"] .cms-sub-btn-ic {
    transform: rotate(225deg) translate(-1px, -1px);
    border-color: var(--cms-brand);
  }

  /* 二级菜单：从绝对定位改为块级流式，手风琴展开。
     max-height + overflow 是没有固定高度的展开动画做法。 */
  .cms-submenu {
    position: static;
    width: 100%;
    min-width: 0;
    max-height: 0;
    margin: 0;
    padding: 0 0 0 16px;
    overflow: hidden;
    background: none;
    border: 0;
    border-left: 2px solid var(--cms-line);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    /* 高度不限了，就不需要那个显示/隐藏的切换 */
    transition: max-height .3s cubic-bezier(.22, .8, .28, 1);
  }
  .cms-submenu.on {
    max-height: 60vh;
  }
  .cms-submenu li { display: block; }
  .cms-submenu a {
    display: block;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--cms-ink-3);
    border-radius: 8px;
  }
  .cms-submenu a::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--cms-line);
    flex: none;
  }
  .cms-submenu a:hover {
    color: var(--cms-brand);
    background: var(--cms-bg-2);
  }

  /* 展开菜单时锁住 body 滚动：
     不锁的话背景跟着一起滚，菜单会「跟着跑」，很难用。
     记下原overflow，收起时还原。 */
  body.cms-nav-open { overflow: hidden; }

  /* 页脚菜单保持平铺，只是排成两列更好读 */
  .cms-menu--foot { gap: 2px 8px; }
  .cms-menu--foot a { padding: 6px 10px; font-size: 13.5px; }
}

/* ---------- 超窄屏（iPhone SE 等 375px 以下） ---------- */
@media (max-width: 380px) {
  .cms-head .cms-wrap { padding-left: 16px; padding-right: 16px; }
  .cms-menu--top { padding-left: 16px; padding-right: 16px; }
  .cms-menu--top > li > a { font-size: 15px; }
  .cms-nav-toggle { width: 40px; height: 40px; }
}

/* ---------- 降低动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  .cms-nav-toggle-bars i,
  .cms-sub-btn-ic,
  .cms-menu--top,
  .cms-submenu,
  .cms-nav-mask { transition: none !important; }
  /* 收起态直接给 visibility:hidden，展开时立刻可见，不做位移 */
  .cms-menu--top {
    transform: none;
    transition: visibility .2s;
  }
}