/* ==========================================================================
   超分宝官网 · site.css（营销域样式）
   分区：1 设计 token 与重置 2 工具类/按钮/卡片 3 首页 Hero 4 通用板块 5 内页 6 页脚
   ========================================================================== */

:root {
  /* 声明暗色方案：原生滚动条、表单控件、overscroll 底色跟着走，避免深色页面上出现亮色滚动条 */
  color-scheme: dark;
  /* 主色 */
  --c-primary: #7d8cf0;
  --c-primary-2: #9aa6f5;
  --c-accent: #7d8cf0;
  --c-cyan: #5fd6c8;
  --c-cyan-soft: #7fe0d3;   /* 青色高亮文字/滑块，原散落 17 处硬编码 */
  --c-grad: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary) 100%);

  /* 语义色 */
  --c-success: #2fa88c;
  --c-warn: #d9a03f;
  --c-danger: #e05c5c;

  /* 涨跌语义色（中国红：红涨绿跌） */
  --c-up: #e05c5c;
  --c-down: #2fa88c;

  /* 背景 */
  --bg-deep: #07080a;
  --bg-body: #0b0c10;
  --bg-card: #141519;
  --bg-card-2: #191b20;
  --bg-hover: #22252c;

  /* 边框 */
  --line: #2a2d34;
  --line-soft: #202227;

  /* 文字 */
  --tx-1: #f1f2ee;
  --tx-2: #c3c5c0;
  --tx-3: #8d9299;
  --tx-dim: #7c8598;

  /* 间距节奏（板块垂直节奏系统） */
  --sp-xl: 80px;     /* 首屏后的大板块 */
  --sp-lg: 56px;     /* 常规板块（相邻叠加 ≈ 112px） */
  --sp-md: 48px;     /* 相邻紧凑板块 */
  --sp-sm: 32px;     /* 次级分隔 */

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;

  /* 招商双页（/referral/ /agency/）首屏右侧卡片：两页要等高才像一对。
     返佣页的高度由三条 bar 自然撑出，加盟页用同一条 min-height 兜齐；
     改任一侧的卡内间距，把这里同步一次即可。 */
  --hero-aside-h: 253px;

  /* 阴影 */
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px rgba(125,140,240, 0.25), 0 12px 40px rgba(125,140,240, 0.15);
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.25);

  /* 字体 */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font);
  background: var(--bg-body);
  color: var(--tx-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 16px;
  letter-spacing: .2px;
}

body {
  background-image:
    radial-gradient(1280px 640px at 14% -6%, rgba(36, 88, 160, .14), transparent 58%),
    radial-gradient(1080px 540px at 90% 8%, rgba(125, 140, 240, .08), transparent 58%),
    linear-gradient(180deg, rgba(12, 24, 38, .45) 0%, rgba(11, 12, 16, 0) 42%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- 通用工具类 ---------- */
.container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 48px; }
.grad-text {
  background: var(--c-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hidden { display: none !important; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .2px;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease, border-color .25s ease, filter .25s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary) 55%, #8b98f2 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 24px rgba(125,140,240, .35);
}
.btn-primary::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none;
}
.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 34px rgba(125,140,240, .5);
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.btn-ghost {
  background: rgba(255,255,255,.02);
  color: var(--tx-1);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255,255,255,.05); border-color: #3a3e47; }
.btn-sm { padding: 8px 16px; font-size: 12.5px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
}
/* 品牌标识 = 横版组合图（图形 + 超分宝 + 星芒，透明底）。
   2026-11-04 起不再用「图形 + HTML 文字」两段拼接：字标来自设计稿，
   52px 高时图形 ≈51px、字标 ≈26px，与原来的 50/27 视觉等大。
   原图字标是深藏青，深色页头上不可读，导出时已换成白→浅银竖向渐变。 */
.logo-img {
  display: block;
  height: 52px;
  width: auto;
}

/* ==========================================================================
   营销首页（Landing）
   ========================================================================== */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,12,16, 0.78);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  gap: 24px;
}
.nav { display: flex; align-items: center; gap: 46px; }
.nav a {
  color: var(--tx-2);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .3px;
  transition: color .18s;
  position: relative;
  padding: 6px 0;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-grad);
  transition: width .25s ease;
}
.nav a:hover, .nav a.active { color: var(--tx-1); }
.nav a:hover::after, .nav a.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-actions .btn { padding: 12px 28px; font-size: 16px; border-radius: var(--r-md); }
.nav-actions .btn-primary {
  box-shadow: 0 0 0 1px rgba(125,140,240, .4), 0 8px 28px rgba(125,140,240, .5);
}
.nav-actions .btn-primary:hover { box-shadow: 0 0 0 1px rgba(125,140,240, .6), 0 12px 36px rgba(125,140,240, .65); }

.hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background:
    radial-gradient(600px 400px at 20% 0%, rgba(125,140,240, 0.18), transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(125,140,240, 0.18), transparent 60%);
  pointer-events: none;
}
.hero .container { position: relative; text-align: center; }
.hero-page { padding: 72px 0 0; }
.hero-page h1 { font-size: 46px; }
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--tx-2);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 28px;
}
.hero-tag svg { width: 17px; height: 17px; flex-shrink: 0; color: #e0b45a; }
.hero h1 { font-size: 56px; font-weight: 600; line-height: 1.15; letter-spacing: 0; }
.hero .sub {
  max-width: 640px;
  margin: 22px auto 0;
  color: var(--tx-2);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: .2px;
  text-wrap: pretty;
}
.hero-cta { margin-top: 40px; display: flex; gap: 16px; justify-content: center; }

/* 首页 Hero（左文右图双栏版） */
.hero-hero {
  position: relative;
  padding: 72px 0 96px;
  overflow: hidden;
  background:
    linear-gradient(rgba(125,140,240,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,140,240,.07) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background:
    radial-gradient(820px 520px at 22% -6%, rgba(125,140,240, .24), transparent 58%),
    radial-gradient(900px 560px at 80% 0%, rgba(125,140,240, .3), transparent 58%),
    radial-gradient(560px 420px at 4% 56%, rgba(95,214,200, .13), transparent 62%),
    radial-gradient(620px 440px at 50% 112%, rgba(95,214,200, .14), transparent 62%),
    radial-gradient(720px 460px at 96% 84%, rgba(125,140,240, .2), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, var(--bg-body) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero-hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
.hero-copy { text-align: left; }
.hero-hero .hero-tag { margin-bottom: 26px; }
.hero-hero h1 { font-size: clamp(36px, 3.9vw, 56px); font-weight: 600; line-height: 1.24; letter-spacing: 0; }
.hero-hero h1 .grad-text { display: block; margin-top: 18px; white-space: nowrap; }
.hero-hero h1 .grad-text { font-weight: 600; }
.hero-hero .sub {
  max-width: 560px;
  margin: 22px 0 0;
  color: var(--tx-2);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .2px;
  text-wrap: pretty;
}
.hero-hero .hero-cta { margin-top: 38px; justify-content: flex-start; }
.hero-hero .hero-cta .btn { padding: 15px 34px; font-size: 16px; border-radius: 12px; }
/* 首屏第二个按钮：首页这套紫色描边同时用于产品页（.hcmp-cta）与紧凑首屏（.hc-action），
   全站 banner 的次级按钮保持同一视觉。基础 .btn-ghost 的灰色版本仍用于正文与页脚。 */
.hero-hero .hero-cta .btn-ghost,
.hero-cmp .hcmp-cta .btn-ghost,
.hero-compact .hc-action .btn-ghost { border-color: rgba(125,140,240,.5); color: #aeb6f5; background: rgba(125,140,240,.06); }
.hero-hero .hero-cta .btn-ghost:hover,
.hero-cmp .hcmp-cta .btn-ghost:hover,
.hero-compact .hc-action .btn-ghost:hover { border-color: rgba(125,140,240,.75); background: rgba(125,140,240,.12); color: #fff; }
.hero-hero .hero-stats { margin-top: 64px; }

/* 右侧画质跃升对比视觉 */
.hero-compare {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow:
    0 24px 70px rgba(0,0,0,.45),
    0 0 0 1px rgba(125,140,240,.12),
    0 0 80px -20px rgba(125,140,240,.45);
  cursor: default;
}
.hero-compare video {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-compare .hc-before { filter: saturate(.82) contrast(.94) brightness(.98); -webkit-clip-path: inset(0 100% 0 0);
 clip-path: inset(0 100% 0 0); animation: hero-scan 5s ease-in-out infinite alternate; }
.hero-compare .hc-after { filter: none; }
.hero-compare .hc-scan {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
  box-shadow: 0 0 16px rgba(95,214,200,.65);
  z-index: 2;
  pointer-events: none;
  animation: hero-scanline 5s ease-in-out infinite alternate;
}
@keyframes hero-scan {
  0% { -webkit-clip-path: inset(0 100% 0 0);
 clip-path: inset(0 100% 0 0); }
  100% { -webkit-clip-path: inset(0 0 0 0);
 clip-path: inset(0 0 0 0); }
}
@keyframes hero-scanline {
  0% { left: 0%; }
  100% { left: 100%; }
}
.hv-tag {
  position: absolute;
  bottom: 16px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(9,10,13, .82);
  border: 1px solid var(--line);
  color: var(--tx-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 3;
  pointer-events: none;
}
.hv-tag-before { left: 16px; }
.hv-tag-after { right: 16px; color: var(--c-cyan); border-color: rgba(95,214,200,.45); }
/* 移动端降级为上下堆叠居中 */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { text-align: center; }
  .hero-hero h1 .grad-text { white-space: normal; }
  .hero-hero .sub { margin: 22px auto 0; }
  .hero-hero .hero-cta { justify-content: center; }
  .hero-compare { max-width: 480px; }
}

/* 静态并排对比（无拖拽） */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 64px;
}
.hero-stats .stat {
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 30px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.hero-stats .stat::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, rgba(125,140,240,0), rgba(125,140,240,.55) 28%, rgba(125,140,240,.55) 72%, rgba(125,140,240,0));
}
.hero-stats .num { font-size: 38px; font-weight: 600; letter-spacing: 0; }
.hero-stats .label { color: var(--tx-3); font-size: 12.5px; margin-top: 8px; letter-spacing: .5px; }

/* 场景标签 */

/* 对比滑块 */
.section-title { text-align: center; font-size: 40px; font-weight: 600; letter-spacing: 0; line-height: 1.22; }
.section-title .grad-text { font-weight: 600; }
.section-desc { text-align: center; color: var(--tx-3); margin-top: 16px; font-size: 16px; letter-spacing: .2px; max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.7; line-break: strict; }

/* 语义断点：`.section-desc` 里的 <br class="bp"> 一律生效（都落在句读之后）。
   桌面 736px/45 字一行，手机上每个句子自然成为一段；单句超过一行时，
   再由 ≤720 的 <br class="mb"> 在句读处细分，保证不切断词。 */

/* 手机语义断点：`.mb` 只在 ≤720 生效，721 以上隐藏（Pad 与桌面都不受影响） */
@media (min-width: 721px) {
  .section-desc br.mb { display: none; }
}

/* 窄屏追加断点：`mb2` 只在 ≤480 生效，`mb3` 只在 ≤380 生效。用于「一句在
   15px 行宽下折成两行、第二行只剩 1–6 字」的超长句（「积」「费，」「架构——」
   这类）。分两档是因为断句位置不同：390 就已经碎的句子用 mb2（再往上 481
   起这句子能一行放完，不能生效，否则 500–720 平白多折一行）；只有 360/375
   才碎的句子用 mb3，免得 390 也白多一行。 */
.section-desc br.mb2,
.section-desc br.mb3 { display: none; }
@media (max-width: 480px) {
  .section-desc br.mb2 { display: inline; }
}
@media (max-width: 380px) {
  .section-desc br.mb3 { display: inline; }
}

/* 功能卡片网格 */
.features { padding: var(--sp-lg) 0; }
/* 视觉示意区（上图） */
/* 文案区（下图） */

/* 算账对比表 */
.calc-table {
  margin: 48px auto 0; max-width: 1280px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 34px -12px rgba(125,140,240,.16), 0 4px 12px rgba(0,0,0,.35);
  overflow: hidden;
  position: relative;
}
.calc-table::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-primary), var(--c-accent), transparent);
  z-index: 1;
}
.calc-table table { width: 100%; border-collapse: collapse; }
.calc-table th, .calc-table td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.calc-table td:first-child { text-align: left; font-weight: 700; color: var(--tx-1); }
.calc-table tbody tr:last-child td { border-bottom: none; }
.calc-table tbody tr { transition: background .18s ease; }
.calc-table tbody tr:hover { background: rgba(125,140,240,.07); }
.calc-table th { color: var(--tx-2); font-weight: 700; font-size: 12.5px; letter-spacing: .6px; background: var(--bg-card-2); border-bottom: 1px solid var(--line); }
.calc-table td { font-size: 16px; }
.calc-table .win { color: var(--c-success); font-weight: 700; }
.calc-table .mid { color: var(--tx-2); }
.calc-table .lose { color: var(--tx-3); }

/* 价格方案 */
.pricing-section { padding: var(--sp-lg) 0; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.price-card {
  position: relative;
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  transition: transform .25s cubic-bezier(.4,0,.2,1), border-color .25s, box-shadow .25s;
  box-shadow: 0 14px 34px -12px rgba(125,140,240,.18), 0 4px 12px rgba(0,0,0,.35);
}
.price-card:hover { transform: translateY(-4px); border-color: rgba(125,140,240,.35); box-shadow: 0 20px 48px -12px rgba(125,140,240,.3), 0 6px 16px rgba(0,0,0,.4); }
.price-card.hot {
  border-color: rgba(125,140,240,.7);
  box-shadow: 0 26px 64px -10px rgba(125,140,240,.4), 0 0 0 1px rgba(125,140,240,.4);
  transform: translateY(-16px);
  background: linear-gradient(180deg, #1e2128 0%, #141619 100%);
}
.price-card.hot:hover { transform: translateY(-18px); box-shadow: 0 32px 80px -10px rgba(125,140,240,.5), 0 0 0 1px rgba(125,140,240,.55); }
.price-card.hot .btn-primary {
  background: #fff;
  color: #5b68d6;
  box-shadow: 0 6px 20px rgba(125,140,240,.4);
}
.price-card.hot .btn-primary::after { display: none; }
.price-card.hot .btn-primary:hover { background: #f1f2ee; box-shadow: 0 10px 28px rgba(125,140,240,.5); }
.price-card .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--c-grad); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 4px 14px; border-radius: 999px;
}
/* 右上角斜切飘带角标（参考 034.png） */
.price-card .ribbon {
  position: absolute; top: 0; right: 0;
  padding: 6px 16px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #2fa88c, #1D8F74);
  border-bottom-left-radius: 14px;
  box-shadow: -2px 3px 8px rgba(0, 0, 0, .35);
  letter-spacing: .5px;
  z-index: 2;
}
.price-card .ribbon.tone-orange {
  background: linear-gradient(135deg, #e8560a 0%, #f59e0b 100%);
  box-shadow: -2px 3px 10px rgba(232, 86, 10, .34);
}
/* 主推档高亮：认 .is-lead，不依赖 :has() */
.price-card.is-lead {
  border-color: rgba(245, 168, 0, .38);
  background: linear-gradient(180deg, rgba(232, 86, 10, .06) 0%, #15171c 48%, #101216 100%);
}
.price-card.is-lead:hover {
  border-color: rgba(245, 168, 0, .65);
}
.price-card .ribbon.tone-blue { background: linear-gradient(135deg, var(--c-primary), var(--c-primary)); }
.price-card .ribbon.tone-cyan { background: linear-gradient(135deg, #4fbcc0, #3fa3ac); }
.price-card .ribbon.tone-green { background: linear-gradient(135deg, #2fa88c, #1D8F74); }
.price-card .ribbon.tone-red { background: linear-gradient(135deg, #e05c5c, #db6076); }
.price-card .ribbon.tone-gold { background: linear-gradient(135deg, #e0b45a, #d9a03f); }
.price-card .ribbon.tone-gray { background: linear-gradient(135deg, #787f8a, #6B7280); }
.price-card h3 { font-size: 18px; font-weight: 700; }
.price-card .sub { color: var(--tx-3); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.price-card .price { font-size: 34px; font-weight: 600; margin: 14px 0 4px; }
.price-card .price small { font-size: 16px; font-weight: 600; color: var(--tx-3); }
.price-card .gems { color: var(--c-cyan); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.price-card .note { color: var(--tx-3); font-size: 12.5px; margin-bottom: 20px; flex: 1; }
.price-card .benefits { list-style: none; margin: 12px 0 18px; flex: 1; }
.price-card .benefits li {
  color: var(--tx-2); font-size: 12.5px; padding: 4px 0;
  display: flex; align-items: center; gap: 8px;
}
.price-card .benefits li::before { content: '✓'; color: var(--c-success); font-weight: 600; }
.price-card .btn { width: 100%; }
@media (max-width: 900px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } }

/* CTA 横幅（满屏深色块 + 内容居中聚焦 + 渐变光晕） */
.cta-band {
  padding: 40px 0 48px;
  text-align: center;
  position: relative;
  background:
    linear-gradient(180deg, rgba(11,12,16,0) 0%, rgba(7,8,10,.85) 100%),
    var(--bg-body);
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,140,240,.5), transparent);
}
.cta-band::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 1100px; height: 520px;
  background:
    radial-gradient(circle at 50% 50%, rgba(125,140,240,.16), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(125,140,240,.12), transparent 70%);
  pointer-events: none;
}
.cta-band .container { position: relative; }
.cta-band .inner {
  padding: 16px;
  position: relative;
}
.cta-band h2 { font-size: 34px; font-weight: 600; letter-spacing: 0; }
.cta-band p { color: var(--tx-2); margin: 12px auto 24px; max-width: 520px; }
.cta-band .btn { padding: 15px 34px; font-size: 16px; border-radius: 12px; }

.site-footer { border-top: 1px solid var(--line-soft); padding: 56px 0 40px; position: relative; }
.site-footer::before {
  content: '';
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(560px, 60%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,140,240,.45), transparent);
}
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.site-footer .links { display: flex; gap: 28px; color: var(--tx-3); font-size: 14px; }
.site-footer .links a { transition: color .18s ease; }
.site-footer .links a:hover { color: var(--c-cyan); }
.site-footer .copy { color: var(--tx-dim); font-size: 12.5px; }
.site-footer .company { flex-basis: 100%; text-align: center; color: var(--tx-dim); font-size: 12.5px; padding-top: 16px; margin-top: 10px; border-top: 1px solid var(--line-soft); }

/* 页脚地址/电话行 */
.site-footer .contact { flex-basis: 100%; text-align: center; color: var(--tx-dim); font-size: 12.5px; }
/* 页脚 ICP 备案行（平台官网自身主体，构建期写死、恒定展示） */
.site-footer .beian { flex-basis: 100%; text-align: center; font-size: 12.5px; color: var(--tx-dim); }
.site-footer .beian a { color: var(--tx-3); text-decoration: none; transition: color .18s ease; }
.site-footer .beian a:hover { color: var(--c-cyan); }

/* 落地页移动端适配 */
@media (max-width: 900px) {
  .site-header .container { flex-wrap: wrap; height: auto; padding: 12px 20px; gap: 10px; }
  .nav { order: 3; width: 100%; gap: 16px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .nav a { white-space: nowrap; font-size: 14px; }
  .hero { padding: 64px 0 56px; }
  .hero h1 { font-size: 38px; }
  .hero .sub { font-size: 16px; padding: 0 12px; }
  .hero-hero { padding: 56px 0 64px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hero-stats .num { font-size: 28px; }
  .section-title { font-size: 28px; padding: 0 12px; }
  .section-desc { padding: 0 16px; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 30px; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; max-width: 320px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-stats .stat { padding: 20px 14px; }
  .hero-stats .num { font-size: 24px; }
  .pain-grid, .tech-cards, .diff-points, .how-steps { grid-template-columns: 1fr; }
  .faq-item summary { font-size: 16px; }
  .cta-band .inner { padding: 24px 16px; }
  .cta-band h2 { font-size: 24px; }
  .site-footer .container { flex-direction: column; text-align: center; }
  .site-footer .links { flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   落地页新增版块（SEO 官网）：行业痛点 / 技术原理 / 差异化 / 使用流程 / FAQ
   ========================================================================== */

/* 行业痛点 */
.pain-section .container { position: relative; }

/* 技术原理 */
/* 移动端横向滚动时锁定「对比维度」首列 */

/* 使用流程 */
.how-section { padding: 72px 0; background: var(--bg-deep); position: relative; }
.how-section::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,12,16,.55) 0%, rgba(11,12,16,.0) 100%);
  pointer-events: none;
  opacity: .5;
}
.how-section .container { position: relative; }
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.how-step {
  /* 与 /referral/、/value/ 的三步卡同一套：序号贴右上角，标题与说明共用左缘
     （2026-11-01）。卡片顶部内距 34，标签 30，标题不必移动。 */
  position: relative;
  text-align: left;
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 30px 26px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 14px 34px -12px rgba(125,140,240,.16), 0 4px 12px rgba(0,0,0,.35);
}
.how-step::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-primary), var(--c-accent), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.how-step::after {
  content: '';
  position: absolute; top: -50px; right: -50px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(125,140,240,.22), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.how-step:hover {
  transform: translateY(-6px);
  border-color: rgba(125,140,240,.5);
  box-shadow: 0 24px 60px -12px rgba(125,140,240,.5), 0 0 0 1px rgba(125,140,240,.16);
}
.how-step:hover::before, .how-step:hover::after { opacity: 1; }
.how-step .n {
  /* 贴角标签：顶边与右边贴合，右上角由卡片圆角裁出，只留左下角 14px */
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  min-width: 68px;
  height: 30px;
  margin: 0;
  padding: 0 18px;
  border-radius: 0 0 0 14px;
  font-size: 14px;
  letter-spacing: .1em;
  background: linear-gradient(135deg, var(--c-primary), #8b98f2);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}
.how-step h3 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: .2px; color: var(--tx-1); }
.how-step p {
  margin-top: 12px;
  color: var(--tx-3);
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* FAQ */
.faq-section { padding: var(--sp-lg) 0; }
.faq-list { margin: 48px auto 0; max-width: 1320px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.faq-item {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.4,0,.2,1);
  height: 100%;
}
.faq-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
  opacity: 0; transition: opacity .3s ease;
}
.faq-item::after {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(125,140,240,.16), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.faq-item:hover {
  transform: translateY(-4px);
  border-color: rgba(125,140,240,.42);
  box-shadow: 0 16px 44px -12px rgba(125,140,240,.42);
}
.faq-item:hover::before, .faq-item:hover::after { opacity: 1; }
.faq-item h3 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-1);
  letter-spacing: .2px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.faq-item .faq-q {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 8px;
  background: var(--c-grad);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 1px;
  box-shadow: 0 0 12px rgba(125,140,240,.35);
}
.faq-item p { margin: 0; color: var(--tx-2); font-size: 16px; line-height: 1.8; }

/* ==========================================================================
   全屏化改造（混合式）：视觉满屏 + 文字留宽
   ========================================================================== */

/* 子页 Hero 光晕背景 + 大气 */
.hero-page { position: relative; overflow: hidden; padding: 72px 0 0; min-height: 0; height: auto; }
.hero-page::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background:
    radial-gradient(780px 460px at 12% -12%, rgba(125,140,240, .20), transparent 62%),
    radial-gradient(700px 440px at 88% 6%, rgba(125,140,240, .20), transparent 62%);
  pointer-events: none;
}
.hero-page .container { position: relative; }
.hero-page h1 { font-size: 54px; line-height: 1.26; }
.hero-page h1 .grad-text { display: inline-block; margin-top: 16px; }

/* 内容板块统一 1320px 内容宽（首屏 hero 除外，保留 1600 大标题层） */
.compare-section .container,
.pain-section .container,
.how-section .container,
.calc-section .container,
.faq-section .container { max-width: 1320px; }
.features .container { max-width: 1320px; }
.tech-section .container { max-width: 1320px; }
.pricing-section .container { max-width: 1320px; }

/* 落地页移动端响应式 */
@media (max-width: 900px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .hero-stats .num { font-size: 24px; }
    .hero-page { padding: 72px 0 0; }
  .hero-page h1 { font-size: 38px; }
  .faq-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-page h1 { font-size: 30px; }
}

/* ==========================================================================
   官网补充（SEO / 结构辅助）—— 以下为官网 SSG 专用，设计稿中不存在对应规则
   ========================================================================== */

/* 一、页头导航按钮区：设计稿只有 1 个「登录/注册」按钮，
   官网保留「登录 + 立即使用」两个，尺寸按设计稿 .nav-actions 基准收一档 */
.nav-actions .btn-sm { padding: 10px 22px; font-size: 16px; border-radius: var(--r-md); }

/* 三、屏幕阅读器可见、视觉隐藏（用于 SEO 锚文本与结构化内容摘要） */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 四、子页 Hero 版式：设计稿把不换行交给具体页面，
   官网统一给 .hero-page 一个居中的单列表述宽度 */
.hero-page .container { text-align: center; }
.hero-page .sub { max-width: 720px; margin: 22px auto 0; color: var(--tx-2); font-size: 18px; line-height: 1.75; }
.hero-page .hero-cta { margin-top: 34px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* 五、FAQ 页：设计稿为「常展开卡片」，双列。官网问答数更多，允许自适应列宽 */
.faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 六、404 页（官网 SSG 产物，设计稿无） */
.err-wrap { padding: 120px 0 100px; text-align: center; }
.err-code { font-size: 96px; font-weight: 600; letter-spacing: 0; line-height: 1; }
.err-wrap h1 { margin-top: 20px; font-size: 30px; font-weight: 600; }
.err-wrap p { margin-top: 14px; color: var(--tx-3); font-size: 16px; }
.err-wrap .hero-cta { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 七、正文富文本（官网暂无博客/文章，保留给后续内容页复用） */
/* 正文内链：比正文亮一档 + 一道青色细下划线，hover 才整段转青 */
.ilink {
  color: var(--tx-1);
  text-decoration: none;
  border-bottom: 1px solid rgba(95, 214, 200, .5);
  transition: color .18s ease, border-color .18s ease;
  /* 行内元素加竖向内距不改变排版，只把点击区从 21px 抬到 33px 左右 */
  padding-block: 6px;
}
.ilink:hover,
.ilink:focus-visible { color: var(--c-cyan); border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .ilink { transition: none; } }

/* 八、官网为**纯静态产物**：品牌 / 备案在构建期写死，页面无运行时注入脚本，
   因此不再有 .rt-booting、[data-brand] 锚点与代理 Logo / 备案号的运行时替换样式。 */

/* 页脚 ICP 备案行（平台官网自身主体，构建期写死、恒定展示） */
.site-footer .beian { flex-basis: 100%; text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--tx-dim); }
.site-footer .beian a { color: var(--tx-3); text-decoration: none; transition: color .18s ease; }
.site-footer .beian a:hover { color: var(--c-cyan); }

/* ==========================================================================
   竞品话术配套 · 省钱数据墙 + 剧集热度榜（2026-10-21）
   说明：数字为占位，样式与全站 token 一致；中文字重/字距遵守项目铁律。
   ========================================================================== */
.scale-section,
.cases-section { padding: var(--sp-lg) 0; }

.scale-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.scale-stat {
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 30px 20px;
}
.scale-stat .s-num {
  font-size: 30px;
  font-weight: 700;
  color: var(--tx-1);
  font-variant-numeric: tabular-nums;
}
.scale-stat .s-label { color: var(--tx-3); font-size: 12.5px; margin-top: 8px; }
.scale-stat.s-accent {
  border-color: rgba(245, 168, 0, .42);
  background: linear-gradient(180deg, rgba(232, 86, 10, .07), rgba(255, 255, 255, 0)), var(--bg-card);
}
.scale-stat.s-accent .s-num {
  color: #f6b73c;
}
/* .scale-note 的定义统一放在文件末尾的 note 组，这里不再单独写一条
   （原来这里还有一条 margin-top:16/居中/--tx-dim 的旧定义，已删，
   避免同一个类在两处不同值互相覆盖）。 */

@media (max-width: 900px) {
  .scale-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
@media (max-width: 640px) {
  .scale-band { grid-template-columns: minmax(0, 1fr); }
    .scale-stat .s-num { font-size: 26px; }
}

/* ==========================================================================
   修复：首页横向溢出（2026-10-21）
   根因：.pain-grid 基础定义为 repeat(4,1fr)，响应式 1fr 规则写在基础定义
   之前被覆盖；且列宽未用 minmax(0,1fr)，窄屏下卡片内容把列撑爆。
   ========================================================================== */

/* ==========================================================================
   数据墙 · 数字里程表：每位独立向上滚动（2026-10-22）
   高度账：line-height 1em + padding .3em×2 = 1.6em，等于原本 48px 行高，
          卡片总高 139px 不变。滚动窗口只有 1em，比 1.6em 更紧凑。
   ========================================================================== */
.scale-stat .s-num {
  line-height: 1;
  padding: .3em 0;
  font-variant-numeric: tabular-nums;
}

.s-num .od { display: inline-block; white-space: nowrap; }
.s-num .od-cell { display: inline-block; vertical-align: bottom; }

/* 数字位：固定 1ch 宽（tabular-nums 下各位等宽），竖向只露一格 */
.s-num .od-cell.od-d {
  width: 1ch;
  height: 1em;
  overflow: hidden;
}

/* 符号位：¥ 、逗号、s，不裁剪（¥ 上下有延伸） */
.s-num .od-cell.od-c {
  height: 1em;
  line-height: 1em;
}

.s-num .od-strip {
  display: block;
  will-change: transform;
  backface-visibility: hidden;
}
.s-num .od-strip > span {
  display: block;
  width: 100%;
  height: 1em;
  line-height: 1em;
  text-align: center;
}

/* ==========================================================================
   使用场景页（2026-10-22）
   三段：场景平铺网格 → 重点场景展开 → 复用的三步流程
   列宽一律 minmax(0,1fr)，断点写在文件末尾，避免被基础定义覆盖。
   ========================================================================== */
.sc-section { padding: 72px 0; }

.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}
.sc-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px 26px;
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 34px -14px rgba(125,140,240,.16), 0 4px 12px rgba(0,0,0,.32);
  transition: border-color .25s ease, transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
.sc-card:hover {
  border-color: rgba(95,214,200,.32);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(95,214,200,.22), 0 6px 16px rgba(0,0,0,.4);
}
.sc-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sc-ic {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: var(--c-cyan);
  background: rgba(95,214,200,.08);
  border: 1px solid rgba(95,214,200,.18);
}
.sc-ic svg { width: 20px; height: 20px; }
.sc-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--tx-1);
  min-width: 0;
}
.sc-card p {
  margin: 0;
  flex: 1;
  color: var(--tx-3);
  font-size: 14px;
  line-height: 1.72;
  text-wrap: pretty;
}
.sc-tag {
  align-self: flex-start;
  font-size: 12.5px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--c-cyan);
  background: rgba(95,214,200,.07);
  border: 1px solid rgba(95,214,200,.16);
}

@media (max-width: 1024px) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
@media (max-width: 640px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sc-section, .sc-deep-section { padding: 52px 0; }
    }

/* 导航增至 7 项后：900–1240px 区间收紧间距，避免 header 折成两行 */
@media (max-width: 1240px) and (min-width: 901px) {
  .nav { gap: 26px; }
  .nav a { font-size: 16px; letter-spacing: .2px; }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .nav { gap: 16px; }
  .nav a { font-size: 14px; }
}

/* 适用场景页 · 三个核心场景图文卡（2026-10-22）
   左图右文，偶数行自动镜像；1024 以下转单列、图在上。 */
.sc-spot-section { padding: 72px 0; }
.sc-spot-list { display: flex; flex-direction: column; gap: 26px; margin-top: 48px; }

.sc-spot {
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr);
  background: linear-gradient(180deg, #141619 0%, #0e1014 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 20px 46px -20px rgba(0,0,0,.55);
}
.sc-spot:nth-child(even) .sc-spot-media { order: 2; }

.sc-spot-media {
  position: relative;
  margin: 0;
  min-height: 340px;
  overflow: hidden;
  background: #090a0d;
}
.sc-spot-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-spot-body {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sc-spot-kicker {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding-left: 10px;
  position: relative;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .8px;
  color: var(--c-cyan);
}
.sc-spot-kicker::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 12px;
  margin-top: -6px;
  border-radius: 2px;
  background: var(--c-cyan);
}
.sc-spot-body h3 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.42;
  color: var(--tx-1);
}
.sc-spot-body p {
  margin: 0 0 12px;
  color: var(--tx-2);
  font-size: 14px;
  line-height: 1.82;
  text-wrap: pretty;
}
.sc-spot-body ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sc-spot-body li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx-3);
}
.sc-spot-body li::before {
  content: '';
  position: absolute;
  left: 2px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-cyan);
}
.sc-spot-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 12.5px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
  .sc-spot { grid-template-columns: minmax(0, 1fr); }
  .sc-spot:nth-child(even) .sc-spot-media { order: 0; }
  .sc-spot-media { min-height: 0; aspect-ratio: 16 / 10; }
  .sc-spot-body { padding: 28px 26px 26px; }
  .sc-spot-body h3 { font-size: 18px; }
}
@media (max-width: 640px) {
  .sc-spot-section { padding: 52px 0; }
  .sc-spot-list { gap: 18px; margin-top: 36px; }
  .sc-spot-body { padding: 22px 20px 22px; }
  .sc-spot-body h3 { font-size: 18px; }
  .sc-spot-media { aspect-ratio: 4 / 3; }
}

/* 适用场景页首屏（2026-10-22）：左侧线性 kicker，右侧三图合成一块画框 */

.hero-spot .sub { max-width: 522px; }

/* 画框本体 */

#scenes { scroll-margin-top: 112px; }

@media (max-width: 960px) {
        .hero-spot .sub { max-width: 560px; }
    }

@media (max-width: 640px) {
  .hero-spot .sub { font-size: 16px; line-height: 1.78; }
  .hero-spot .hero-cta .btn { font-size: 16px; }
                }

/* 适用场景页：全页建立同一条左轴线（首屏左对齐 → 各节标题也左对齐），
   避免「左对齐首屏 + 居中标题」的轴线打架；只在本页生效，不影响其他页。 */
.page-scenarios .section-title { text-align: left; }
.page-scenarios .section-desc {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* 适用场景页首屏：窄屏去掉手动换行，让描述自然流成一段 */
@media (max-width: 640px) {
  .hero-spot .sub br { display: none; }
}

/* ==========================================================================
   适用场景页 · 剧集墙（2026-10-22）
   左右拉满：viewport 全幅出血，轨道无缝横向滚动（JS 克隆一份内容，-50% 位移闭环）。
   卡片用 margin-right 而不是 gap，保证克隆后总宽正好是 2 倍，-50% 才对齐。
   卡片内嵌信息（剧名 + 平台热度）压在海报底部渐变上，与真实海报墙的形态一致。
   ========================================================================== */
.drama-wall {
  position: relative;
  padding: 72px 0 56px;
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.dw-head { margin-bottom: 40px; }

.dw-viewport {
  position: relative;
  overflow: hidden;
  padding: 4px 0 6px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.dw-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: dw-scroll 97s linear infinite;
  will-change: transform;
}
.dw-track:hover { animation-play-state: paused; }
@keyframes dw-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.dw-card {
  flex: 0 0 244px;
  width: 244px;
  margin-right: 18px;
}
.dw-poster {
  position: relative;
  aspect-ratio: 7 / 10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  background:
    radial-gradient(62% 44% at 50% 30%, rgba(255, 255, 255, .19), transparent 68%),
    linear-gradient(158deg, var(--p1, #1c2436), var(--p2, #0f1420));
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), border-color .3s ease, box-shadow .3s ease;
}
/* 有真实海报后不再叠斜纹，只在图片上留一层极淡的顶部压暗 */
.dw-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
/* 官方剧卡自带剧名与数据条，不再叠加任何文字层，因此顶部压暗层也去掉（会把海报压得发闷） */
/* 底部信息层：渐变压暗 + 剧名 + 平台热度（暖橙，与热度语义一致） */

.dw-card:hover .dw-poster {
  transform: translateY(-5px);
  border-color: rgba(95,214,200, .3);
  box-shadow: 0 20px 38px -20px rgba(95,214,200, .48);
}

@media (max-width: 1024px) {
  .drama-wall { padding: 60px 0 46px; }
  .dw-card { flex-basis: 216px; width: 216px; margin-right: 16px; }
}
@media (max-width: 640px) {
  .drama-wall { padding: 52px 0 40px; }
  .dw-head { margin-bottom: 30px; }
  .dw-card { flex-basis: 196px; width: 196px; margin-right: 13px; }
      .dw-poster { border-radius: 8px; }
            .dw-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dw-track { animation: none; }
}

/* 适用场景页 · 窄屏：节标题降一档并让渐变色块独占一行，避免从词中间折断 */
@media (max-width: 640px) {
  .page-scenarios .section-title { font-size: 32px; line-height: 1.34; }
  .page-scenarios .section-title .grad-text { display: block; }
}

/* ==========================================================================
   页脚重排（2026-10-22）
   原先「logo / 导航 / 版权」挤在一行，右侧黄金位放了一句版权，浪费且单薄。
   改为四栏：品牌 + 产品 + 了解 + 联系我们（电话 · 地址 · 官网二维码），
   版权与备案收进底部细条，右侧腾给联系方式。
   ========================================================================== */
.site-footer { padding: 56px 0 0; }
/* 覆盖旧版 flex 行布局（旧的 .links/.copy/.contact/.beian 已不再使用） */
.site-footer .container { display: block; }

.ft-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.35fr);
  gap: 40px;
  align-items: start;
}

.ft-tagline {
  margin: 18px 0 0;
  max-width: 310px;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: .2px;
  color: var(--tx-3);
  /* 三句改成用句号断句、不再用 <br> 后，靠 keep-all 把断行点限制在标点处，
     避免「细节」「保留」这类双字词被从中间劈开。Chrome 下仍会在 。， 之后换行。 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.ft-col {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}
.ft-col h3,
.ft-contact h3 {
  margin: 0 0 3px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--tx-2);
}
.ft-col a {
  width: fit-content;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--tx-3);
  transition: color .18s ease;
}
.ft-col a:hover { color: var(--c-cyan); }

.ft-contact { min-width: 0; }
.ft-contact-row {
  display: flex;
  /* 地址下移到 .ft-bottom 后，左侧是「座机 + 手机 + 邮箱」三行（约 88px），
     居中对齐配右侧二维码，两边重心完全平衡。 */
  align-items: center;
  gap: 18px;
}
.ft-contact-info { min-width: 0; flex: 1 1 auto; }
.ft-tel {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--tx-1);
  font-variant-numeric: tabular-nums;
  transition: color .18s ease;
}
.ft-tel:hover { color: var(--c-cyan); }
/* 手机直线（2026-11-05）：与座机同属一组联系方式，字号降一档、颜色退一档，
   读起来是「还有一个号」，而不是两个并列的主号。 */
.site-footer .ft-tel-2 {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 0;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
  transition: color .18s ease;
}
.site-footer .ft-tel-2:hover { color: var(--c-cyan); }
/* 地址移入底栏 .ft-legal：与公司名称、ICP 备案同属主体合规信息 */
.ft-addr {
  color: var(--tx-3);
}

.ft-qr {
  margin: 0;
  flex: 0 0 auto;
  text-align: center;
}
.ft-qr img {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 8px;
  background: #fff;
}
.ft-qr figcaption {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: .2px;
  color: var(--tx-3);
  white-space: nowrap;
}

.ft-bottom {
  margin-top: 46px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 12.5px;
  letter-spacing: .2px;
  color: var(--tx-dim);
}
.ft-legal {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--tx-3);
}
.ft-legal > * + *::before {
  content: "·";
  margin-right: 12px;
  color: var(--tx-dim);
}
.ft-legal a {
  color: var(--tx-3);
  text-decoration: none;
  transition: color .18s ease;
}
.ft-legal a:hover { color: var(--c-cyan); }

@media (max-width: 1024px) {
  .site-footer { padding: 48px 0 0; }
  .ft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 40px;
  }
  .ft-brand { grid-column: 1 / -1; }
  .ft-contact { grid-column: 1 / -1; }
  .ft-tagline { max-width: 460px; }
}

@media (max-width: 640px) {
  .site-footer { padding: 44px 0 0; }
  .ft-grid { gap: 28px 20px; }
  .ft-tagline { margin-top: 16px; font-size: 12.5px; max-width: none; }
  .ft-col { gap: 11px; }
  .ft-col a { font-size: 14px; }
  .ft-tel { font-size: 16px; }
  .ft-addr { font-size: 12.5px; }
  .ft-qr img { width: 104px; height: 104px; }
  .ft-bottom {
    margin-top: 32px;
    padding: 18px 0 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
  }
}

/* 页脚层次细化：顶部高光改为左起（呼应左重右轻的四栏），并给一层极淡的底部压暗 */
.site-footer {
  background: linear-gradient(180deg, rgba(8,9,12, 0) 0%, rgba(8,9,11, .55) 38%, rgba(6,7,9, .85) 100%);
}
.site-footer::before {
  left: 0;
  transform: none;
  width: 100%;
  background: linear-gradient(90deg, rgba(125,140,240, .5) 0%, rgba(95,214,200, .3) 34%, rgba(255, 255, 255, 0) 72%);
}
.ft-tagline { color: var(--tx-2); }
.ft-col { gap: 14px; }
.ft-col a { line-height: 1.5; }

/* 页脚移动端：统一左对齐，地址与备案不硬折 */
@media (max-width: 640px) {
  .site-footer .container { text-align: left; }
  .ft-brand { display: flex; flex-direction: column; align-items: flex-start; }
  .ft-contact-row { gap: 12px; }
  .ft-qr img { width: 104px; height: 104px; }
  .ft-addr { font-size: 11.5px; line-height: 1.75; }
  .ft-legal { display: flex; flex-wrap: wrap; gap: 3px 10px; }
  .ft-legal a { white-space: nowrap; }
}

/* 1024 断点重排：品牌独占一行，下方三列（产品 / 了解 / 联系），避免两列被拉到两端 */
@media (max-width: 1024px) and (min-width: 641px) {
  .ft-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 2.1fr);
    gap: 32px;
  }
  .ft-contact { grid-column: auto; }
  .ft-tagline { max-width: 520px; }
}
@media (max-width: 640px) {
  .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-contact { grid-column: 1 / -1; }
}

/* ==========================================================================
   首页 · 剧集墙（2026-10-22）
   与适用场景页同一套 .drama-wall 组件，只是卡片小一档、节奏更紧，避免首页过长。
   注意：本文件的响应式块在前部，此处的断点必须自带列/宽定义，否则会被基础规则盖掉。
   ========================================================================== */
.drama-wall--home {
  padding: 64px 0 48px;
}
.drama-wall--home .dw-head { margin-bottom: 34px; }
.drama-wall--home .dw-track { animation-duration: 80s; }
.drama-wall--home .dw-card {
  flex: 0 0 220px;
  width: 220px;
  margin-right: 16px;
}
.drama-wall--home .dw-name { font-size: 12.5px; }
.drama-wall--home .dw-hot { font-size: 14px; }

@media (max-width: 1024px) {
  .drama-wall--home { padding: 54px 0 42px; }
  .drama-wall--home .dw-card { flex: 0 0 216px; width: 216px; margin-right: 15px; }
}
@media (max-width: 640px) {
  .drama-wall--home { padding: 46px 0 36px; }
  .drama-wall--home .dw-head { margin-bottom: 26px; }
  .drama-wall--home .dw-card { flex: 0 0 196px; width: 196px; margin-right: 12px; }
  .drama-wall--home .dw-name { font-size: 11.5px; }
  .drama-wall--home .dw-hot { font-size: 12.5px; }
}

/* 首页剧集墙 · 窄屏：标题降一档并让渐变色块独占一行（与适用场景页同法，避免从词中间折断） */
@media (max-width: 640px) {
  .drama-wall--home .section-title { font-size: 30px; line-height: 1.34; }
  .drama-wall--home .section-title .grad-text { display: block; }
  .drama-wall--home .section-desc { font-size: 14px; line-height: 1.72; }
}

/* ==========================================================================
   技术页 · 客观评测表（2026-10-22）
   目的：把"我们更清楚"换成"六项指标同时看"，让结论可被逐项检视。
   窄屏允许横向滚动，不压缩成挤在一起的小字。
   ========================================================================== */

/* .eval-note / .calc-note 的排版已并入 .foot-note（见文件末尾），这里不再单独写。 */

/* 页脚联系区（2026-10-22）：电话下方补商务邮箱；二维码由单枚改为「官网 + 加微信」两枚并排 */
.ft-mail {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: .2px;
  color: var(--tx-2);
  word-break: break-all;
  transition: color .18s ease;
}
.ft-mail:hover { color: var(--c-cyan); }
.ft-qr-group .ft-qr img { width: 78px; height: 78px; }
.ft-qr-group .ft-qr figcaption { margin-top: 6px; }

/* 微信码未到位时的占位框：虚线 + 微信图标，尺寸与真实二维码一致，换图后可直接替换 */

@media (max-width: 640px) {
  .ft-mail { font-size: 12.5px; }
    .ft-qr-group .ft-qr img,
  .ft-qr-ph { width: 68px; height: 68px; }
}

/* 评测表微调：考察列左对齐、数值列等宽，避免中间留白太大 */

/* 评测表列宽改为比例分配，消除「考察」与数值列之间的大片空白 */

/* 评测表列结构定稿：4 列（指标 / A / B / 超分宝），考察与来源并入指标副行——窄屏也不用横滑 */

/* 评测表定稿：三列数值等宽 + 竖向细分隔线（列宽此前被多轮规则叠加，这里一次压平） */

/* 首屏 H1 换新版（「不换一张脸，／把画面做到播出标准」）后，窄屏 9 字一行放不下会掉单字，这里单独降一档 */
@media (max-width: 420px) {
  .hero-hero h1 {
    font-size: 30px;
    letter-spacing: 0;
    line-height: 1.3;
  }
  .hero-hero h1 .grad-text { margin-top: 12px; }
}

/* 360 及更窄：H1 再降一档，保证「把画面做到播出标准」9 字不落单字 */
@media (max-width: 380px) {
  .hero-hero h1 { font-size: 28px; letter-spacing: 0; }
}

/* ==========================================================================
   导航增至 9 项（2026-10-22）
   新增「推广返佣 / 代理加盟」后，1440 下 nav 需要 954px，原 gap 46 会把 header 撑爆。
   策略：桌面 gap 46 → 32；1001–1240 收到 16px 并降字号；901–1000 与 ≤900 一致走换行横滑。
   ========================================================================== */
@media (min-width: 901px) {
  .nav { gap: 30px; }
  .nav a { font-size: 16px; letter-spacing: .2px; }
}
@media (max-width: 1240px) and (min-width: 1001px) {
  .nav { gap: 16px; }
  .nav a { font-size: 14px; letter-spacing: .1px; white-space: nowrap; }
}
/* 9 项后 logo 与 nav 会被 flex 压缩，文字逐字折行——锁死两者不收缩 */
.logo,
.logo-text { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1000px) and (min-width: 901px) {
  .site-header .container { flex-wrap: wrap; height: auto; padding: 12px 20px; gap: 10px; }
  .nav { order: 3; width: 100%; gap: 16px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .nav a { white-space: nowrap; font-size: 14px; }
}

/* ==========================================================================
   推广返佣页（/referral/）
   ========================================================================== */
.rf-steps-section,
.rf-tier-section,
.rf-payout-section,
.rf-rule-section { padding: var(--sp-lg) 0; }

/* 三步 */
.rf-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.rf-step {
  position: relative;
  padding: 30px 26px 24px;
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 14px 34px -14px rgba(125,140,240, .18), 0 4px 12px rgba(0, 0, 0, .32);
  transition: border-color .25s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
}
.rf-step:hover { border-color: rgba(125,140,240, .38); transform: translateY(-3px); }
.rf-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(125,140,240, .9), rgba(125,140,240, .5), transparent);
}
.rf-step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2.4px;
  color: var(--c-cyan);
  margin-bottom: 20px;
}
.rf-step h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--tx-1);
  margin-bottom: 12px;
}
.rf-step p {
  font-size: 14px;
  line-height: 1.82;
  color: var(--tx-2);
}

/* 阶梯表 */

/* 算例 */
/* .rf-case-note 已不存在于页面，排版并入 .foot-note。 */

/* 佣金去向 */
.rf-payout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.rf-payout-card {
  padding: 24px 26px;
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 34px -14px rgba(125,140,240, .18), 0 4px 12px rgba(0, 0, 0, .32);
}
.rf-payout-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  background: rgba(125,140,240, .14);
  border: 1px solid rgba(125,140,240, .3);
  color: #a8b1f6;
  margin-bottom: 20px;
}
.rf-payout-ic svg { width: 22px; height: 22px; }
.rf-payout-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--tx-1);
  margin-bottom: 12px;
}
.rf-payout-card p {
  font-size: 14px;
  line-height: 1.82;
  color: var(--tx-2);
}
.rf-payout-tag {
  display: block;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  letter-spacing: .2px;
  color: var(--tx-3);
}

/* 规则 */

/* ==========================================================================
   代理加盟页（/agency/）
   ========================================================================== */
.ag-stack-section,
.ag-def-section,
.ag-req-section,
.ag-why-section,
.ag-flow-section,
.ag-compare-section { padding: var(--sp-lg) 0; }

/* 三层结构 */

/* 四样自主 */
.ag-def {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}
.ag-def-card {
  padding: 24px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  transition: border-color .25s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
}
.ag-def-card:hover { border-color: rgba(125,140,240, .36); transform: translateY(-3px); }
.ag-def-key {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--c-cyan);
}
.ag-def-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--tx-1);
  margin-bottom: 10px;
}
.ag-def-card p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--tx-2);
}

/* 准入门槛 */

/* 为什么自持 API */

/* 开通流程：三步，与 /referral/ 三步卡完全同一套语言——
   圆形渐变序号 + 整卡居中（序号、标题、说明同一条中线）+ 渐变底 + 顶部 2px 细条。
   原来是 5 列裸时间轴，每列只有约 244px，正文被挤成 7 行；
   合成三步后三列正好铺满，行宽 435px。 */
.ag-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 46px;
}
.ag-flow li {
  position: relative;
  padding: 30px 26px 24px;
  text-align: left;
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 14px 34px -14px rgba(125,140,240, .18), 0 4px 12px rgba(0, 0, 0, .32);
  transition: border-color .25s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
}
.ag-flow li:hover {
  border-color: rgba(125,140,240, .38);
  transform: translateY(-3px);
}
.ag-flow li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(125,140,240, .9), rgba(125,140,240, .5), transparent);
}
/* 序号：贴右上角的标签，与 /referral/、/value/、/features/ 三处三步卡同一套 */
.ag-flow-num {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 30px;
  margin: 0;
  padding: 0 18px;
  border-radius: 0 0 0 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: linear-gradient(165deg, #9aa4f7 0%, var(--c-primary) 54%, #6b79e2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}
.ag-flow h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--tx-1);
  margin-bottom: 12px;
}
/* 编号与标题居中、正文左对齐：这几段是 90 余字折 4–5 行的长句，
   跟着居中会让每行长短不齐、右缘成锯齿（返佣页正文只有两行，看不出这个问题）。 */
.ag-flow p {
  font-size: 14px;
  line-height: 1.82;
  color: var(--tx-2);
  text-align: left;
}

/* 对比表 */
.ag-compare-section .calc-table { max-width: 1120px; }
.ag-compare-section .calc-table th { text-align: left; padding-left: 24px; }
.ag-compare-section .calc-table td { text-align: left; padding-left: 24px; font-size: 14px; }
.ag-compare-section .calc-table th:first-child { width: 16%; }
.ag-compare-section .calc-table td:first-child { white-space: nowrap; }

/* CTA 双按钮 */

/* ---------------- 断点（必须写在基础定义之后，否则会被覆盖） ---------------- */
@media (max-width: 1024px) {
  /* 三步卡与佣金两种用法在 1024 仍保持并排：笔记本 1280 屏开 125% 缩放
     正好落在 1024 视口，这两块一旦在此处折成单列，整页会拉得很长。
     真正的单列留给 760 以下的手机与竖屏平板。 */
  .rf-steps { gap: 16px; margin-top: 40px; }
  .rf-payout { gap: 16px; margin-top: 40px; }
      .ag-def { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
      .ag-flow { gap: 18px; margin-top: 38px; }
  .ag-flow li { padding: 24px 22px 22px; }
  .ag-compare-section .calc-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ag-compare-section .calc-table table { min-width: 640px; }
}

@media (max-width: 640px) {
  .rf-steps-section,
  .rf-tier-section,
  .rf-payout-section,
  .rf-rule-section,
  .ag-stack-section,
  .ag-def-section,
  .ag-req-section,
  .ag-why-section,
  .ag-flow-section,
  .ag-compare-section { padding: 46px 0; }

  .rf-step { padding: 24px 20px; }
  .rf-payout-card { padding: 26px 20px 22px; }
  .rf-step h3,
  .rf-payout-card h3 { font-size: 18px; }
  .rf-step p,
  .rf-payout-card p { font-size: 14px; }

              
    
              
  .ag-def { grid-template-columns: minmax(0, 1fr); }
  .ag-def-card { padding: 22px 20px; }
          .ag-flow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ag-flow li { padding: 22px 20px; }
    .ag-cta-row .btn { width: 100%; }
}

/* 推广返佣 / 代理加盟首屏 · 窄屏：sub 的三行在 390 下会被切成六段并落孤字，
   这里让 br 失效、文本连续排版（三句已带句号，不粘连），并收窄测宽。 */
@media (max-width: 640px) {
  .page-referral .hero-page .sub br,
  .page-agency .hero-page .sub br { display: none; }
  .page-referral .hero-page .sub,
  .page-agency .hero-page .sub {
    max-width: 342px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.88;
  }
}

/* 窄屏 sub 末行不落孤字（Chrome 117+ 生效，其他浏览器忽略） */
.page-referral .hero-page .sub,
.page-agency .hero-page .sub { text-wrap: pretty; }

/* 阶梯表窄屏：表头曾因 nowrap 把第三列顶出容器，这里允许表头折行并重分配列宽 */

/* 阶梯表窄屏：档位列过长会顶到比例列，这里允许折行并降一档字号 */
@media (max-width: 640px) {
    .page-referral .section-desc,
  .page-agency .section-desc { text-wrap: pretty; }
}

/* 阶梯表窄屏列宽定稿：档位文案最长 12 字符，34% 装不下会折成两行；
   给第一列 42%，比例列 23% 足够放「25%」。 */

/* 三层结构定稿：描述限制行长（满宽 90 字/行太长），连接线末端加下箭头 */
.ag-compare-section .calc-table th:first-child { width: 20%; }

/* 三层结构收窄到 900，让卡片宽度与正文行长匹配，右侧不再留大块空白 */

/* 规则清单定稿：标题独立成行，说明在下，避免长句里标题与正文挤在一行 */
/* 三层结构连接箭头提亮一档，深色底上太淡看不见 */

/* 产品能力页首屏（2026-10-22）：视频铺满视口；文案装玻璃卡——整片压暗会被读成曝光差 */
@property --cmp-split {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

.hero-cmp {
  position: relative;
  height: clamp(620px, 86vh, 880px);
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* 上下两条压边：上让导航压得住，下让下一段接得顺 */
.hero-cmp::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,6,7, .72) 0%, rgba(5,6,7, 0) 24%, rgba(5,6,7, 0) 76%, rgba(5,6,7, .84) 100%),
    linear-gradient(90deg, rgba(5,6,7, .42) 0%, rgba(5,6,7, 0) 34%);
}

/* 媒体层 */
.hcmp-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  /* 必须独立层叠上下文：否则里面的蒙版（z-index 3）会直接和
     .container（z-index 2）比大小，蒙版跑到文案上面，把字也模糊了。 */
  isolation: isolate;
  z-index: 0;
  background: #050607;
  --cmp-split: 52%;
  animation: cmpSweep 3.2s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes cmpSweep {
  from { --cmp-split: 46%; }
  to   { --cmp-split: 78%; }
}

/* 分割线 */

/* 角标跟着分割线走：永远紧贴边界，说明两侧各是什么 */

/* 文案玻璃卡 */
.hero-cmp .container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  text-align: left;
}
.hero-cmp .hcmp-copy {
  max-width: 456px;
  padding: 34px 34px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(9,10,13, .68) 0%, rgba(7,8,10, .58) 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 30px 80px -28px rgba(0, 0, 0, .92), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.hero-cmp h1 {
  font-size: 33px;
  line-height: 1.36;
  letter-spacing: 0;
}
.hero-cmp h1 .grad-text { display: inline-block; margin-top: 8px; }
.hero-cmp .sub {
  max-width: 100%;
  margin: 18px 0 0;
  text-align: left;
  font-size: 14px;
  line-height: 1.88;
  color: var(--tx-2);
}
.hcmp-cap {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .2px;
  color: var(--tx-3);
}
.hcmp-cap::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 8px;
  vertical-align: 4px;
  background: rgba(95,214,200, .6);
}

@media (prefers-reduced-motion: reduce) {
  .hcmp-media { animation: none; --cmp-split: 62%; }
}

/* ---------------- ≤1180：退回「文案在上、画框在下」的堆叠版 ---------------- */
@media (max-width: 1180px) {
  .hero-cmp {
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    padding: 54px 0 62px;
  }
  .hero-cmp::after { display: none; }
  .hcmp-media {
    position: relative;
    inset: auto;
    width: min(900px, calc(100% - 96px));
    margin: 0 auto 34px;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid rgba(124,133,152, .22);
    box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .85), 0 0 0 7px rgba(124,133,152, .1);
    animation-name: cmpSweepWide;
  }
          
  .hero-cmp .hcmp-copy {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: center;
  }
  .hero-cmp h1 { font-size: 38px; }
  .hero-cmp .sub { max-width: 720px; margin: 18px auto 0; text-align: center; font-size: 16px; }
  .hcmp-cap { text-align: center; border-top: 0; padding-top: 0; margin-top: 18px; }
}

@keyframes cmpSweepWide {
  from { --cmp-split: 22%; }
  to   { --cmp-split: 82%; }
}

@media (max-width: 640px) {
  .hero-cmp { padding: 40px 0 48px; }
  .hcmp-media { width: calc(100% - 40px); margin-bottom: 26px; border-radius: 12px; aspect-ratio: 4 / 3; }
  .hero-cmp h1 { font-size: 26px; line-height: 1.42; letter-spacing: 0; }
  .hero-cmp h1 .grad-text { margin-top: 8px; }
  .hero-cmp .sub { font-size: 14px; line-height: 1.88; margin-top: 16px; }
  .hero-cmp .sub br { display: none; }
            .hcmp-cap { margin-top: 14px; font-size: 12px; }
}

/* 首屏对比微调：压边层（z-index 1）原先盖住角标与分割线，把两者抬到它上面 */
/* 左侧压边减淡：文字可读性已由玻璃卡承担，画面上不必再压暗 */
.hero-cmp::after {
  background:
    linear-gradient(180deg, rgba(5,6,7, .74) 0%, rgba(5,6,7, 0) 24%, rgba(5,6,7, 0) 62%, rgba(5,6,7, .94) 100%),
    linear-gradient(90deg, rgba(5,6,7, .26) 0%, rgba(5,6,7, 0) 30%);
}
@media (max-width: 1180px) {
  .hero-cmp::after { display: none; }
}

/* ==========================================================================
   导航 · 移动端汉堡抽屉（官网补充）
   ========================================================================== */
.nav-toggle { display: none; }
.nav-burger { display: none; }

/* 抽屉遮罩：由 mobile.js 在 ≤1180 注入一个 label，点它即关。放在抽屉之下
   （z 60 < 面板 65 < 汉堡 70），淡入淡出交给 opacity，关掉时不拦事件。 */
.nav-scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 必须低于 .site-header 的 z-index:50。header 自己创建层叠上下文，抽屉面板
     （z 65）只在这个上下文里有效，整体仍按 50 参与根层排序；遮罩若取 60，
     就会盖在面板之上，把菜单链接全截走——点一下只是触发 label 关掉抽屉。 */
  z-index: 40;
  background: rgba(4, 5, 8, .66);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.nav-scrim.is-on { opacity: 1; pointer-events: auto; }
/* 遮罩层级（40）低于 header（50），否则会把面板连同菜单链接一起盖住；
   代价是顶部导航条不跟着变暗。这里单独压一下背景，让整屏哑下来。 */
body.is-drawer-open .site-header { background: rgba(6, 7, 10, .96); }

@media (max-width: 1180px) {
  .site-header .container { flex-wrap: nowrap; }
  .nav { display: none; }
  /* 汉堡开关：1px 隐形但保留在 Tab 序列里，键盘空格/回车即可开合；
     早先 hidden + aria-hidden 会让键盘与读屏用户完全打不开菜单 */
  .nav-toggle {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  #nav-toggle:focus-visible ~ .nav-burger {
    outline: 2px solid var(--c-cyan);
    outline-offset: 3px;
  }
  .nav-burger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    cursor: pointer;
    z-index: 70;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-card);
    transition: background .18s ease, border-color .18s ease;
  }
  /* 三条线用绝对定位钉在按钮正中。原来靠 flex + gap + span 的 -3px 负外边距拼，
     三条线彼此并不共心，展开时两条斜线交不到一点，看着像个歪掉的「≡→✕」。 */
  .nav-burger span,
  .nav-burger::before,
  .nav-burger::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    margin: -1px 0 0 -9px;
    background: var(--tx-1);
    border-radius: 2px;
    transition: transform .25s ease, opacity .18s ease;
  }
  .nav-burger::before { transform: translateY(-6px); }
  .nav-burger::after { transform: translateY(6px); }
  /* 注意：.site-header 有 backdrop-filter，会给 fixed 后代建立包含块，
     top/bottom:0 会缩成头部高度（曾只铺出 120px 高）。这里显式给 100vh 撑满。 */
  #nav-toggle:checked ~ .nav {
    display: flex;
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    z-index: 65;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 88px 26px 32px;
    background: rgba(9,10,13,.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    animation: navDrawer .28s ease;
  }
  @keyframes navDrawer {
    from { transform: translateX(40%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }
  #nav-toggle:checked ~ .nav a {
    display: block;
    padding: 13px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  #nav-toggle:checked ~ .nav a:last-child { border-bottom: none; }
  /* 点击遮罩关闭：checkbox :not(:checked) 时 nav 隐藏，遮罩用 body 背景即可 */
  /* 展开：上、中两条绕中心转成 ✕，下条淡出；三条都从同一个原点旋转，交叉点才在正中 */
  #nav-toggle:checked ~ .nav-burger span { transform: rotate(45deg); }
  #nav-toggle:checked ~ .nav-burger::before { transform: rotate(-45deg); }
  #nav-toggle:checked ~ .nav-burger::after { transform: translateY(6px) rotate(-45deg); opacity: 0; }
  /* 展开后按钮贴到面板右上角：抽屉是从右边滑出来的，关闭键长在 header 上会
     和面板脱开，落在面板内偏左的地方，既不在角上也不在页面角上。header 是
     position:sticky，所以这里用 absolute 就等价于贴视口右上（不能用 fixed：
     header 的 backdrop-filter 会给 fixed 后代建立包含块，之前抽屉铺不满就是这个坑）。 */
  #nav-toggle:checked ~ .nav-burger {
    position: absolute;
    top: 20px;
    right: 20px;
    margin-left: 0;
    background: rgba(125, 140, 240, .38);
    border-color: rgba(150, 163, 248, .75);
    box-shadow: 0 0 0 1px rgba(125, 140, 240, .18), 0 6px 20px rgba(0, 0, 0, .5);
  }
  /* 展开态把两条线提到纯白并加粗一丝：底下是 97% 的黑面板，f1f2ee 加 2px
     细线在暗底上会「糊掉」，看着像禁用的图标。 */
  #nav-toggle:checked ~ .nav-burger span,
  #nav-toggle:checked ~ .nav-burger::before,
  #nav-toggle:checked ~ .nav-burger::after {
    height: 2.4px;
    margin-top: -1.2px;
    background: #fff;
  }
  #nav-toggle:checked ~ .nav-burger:hover {
    background: rgba(125, 140, 240, .42);
    border-color: rgba(150, 163, 248, .8);
  }
}
/* ==========================================================================
   推广返佣 · 返佣公式 / 算例 / 推广须知（官网补充）
   ========================================================================== */

/* ---- 公式区 ---- */
.rf-calc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  max-width: 1080px;
  margin: 48px auto 0;
  padding: 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.rf-calc-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.rf-calc-term {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 16px;
  color: var(--tx-2);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.rf-calc-term-out {
  color: var(--c-primary);
  border-color: rgba(125, 140, 240, .45);
  background: rgba(125, 140, 240, .10);
  font-weight: 600;
}
.rf-calc-op {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--tx-3);
}
.rf-calc-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.rf-calc-rate-num {
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}
.rf-calc-rate-num i { font-style: normal; font-size: .5em; margin-left: 2px; color: var(--tx-3); }
.rf-calc-rate-label {
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--tx-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ---- 算例卡 ---- */
/* ---- 长期收益条 ---- */

/* ---- 好推理由 ---- */

/* ---- 推广须知 ---- */
.rf-terms-section { padding: var(--sp-lg) 0; }
.rf-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 44px auto 0;
}
.rf-term {
  padding: 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.rf-term h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-1);
  padding-left: 14px;
  position: relative;
}
.rf-term h3::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-primary);
}
.rf-term p { margin: 0; font-size: 14px; color: var(--tx-2); line-height: 1.75; }
.rf-term-warn {
  grid-column: 1 / -1;
  border-color: rgba(224, 92, 92, .34);
  background: rgba(224, 92, 92, .06);
}
.rf-term-warn h3::before { background: var(--c-danger); }

/* ==========================================================================
   推广返佣页 · 响应式（官网补充）
   ========================================================================== */
@media (max-width: 1024px) {
  .rf-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* 三步卡与佣金两种用法到手机与竖屏平板才折成单列 */
  .rf-steps { grid-template-columns: minmax(0, 1fr); }
  .rf-payout { grid-template-columns: minmax(0, 1fr); }
  .rf-calc-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 24px 22px;
  }
  .rf-calc-rate {
    padding-left: 0;
    padding-top: 20px;
    border-left: none;
    border-top: 1px solid var(--line);
    align-items: flex-start;
  }
  .rf-calc-eq { gap: 8px; }
  .rf-calc-term { padding: 8px 14px; font-size: 14px; }
  }
@media (max-width: 640px) {
  .rf-terms { grid-template-columns: minmax(0, 1fr); }
  .rf-calc-rate-num { font-size: 44px; }
}
/* ==========================================================================
   合规文档页（/privacy/ /terms/ /agreement/）（官网补充）
   ========================================================================== */
.hero-legal { padding: 96px 0 56px; }
.hero-legal h1 { font-size: clamp(32px, 3.4vw, 46px); }
.hero-legal .sub { margin-top: 20px; }

.legal-section { padding: var(--sp-lg) 0 var(--sp-xl); }
.legal-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}
.legal-toc {
  position: -webkit-sticky;
  position: sticky;
  top: 96px;
  padding: 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.legal-toc h2 {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--tx-3);
  font-family: var(--font-mono);
}
.legal-toc ol { margin: 0; padding-left: 18px; }
.legal-toc li { margin-bottom: 9px; font-size: 14px; line-height: 1.55; }
.legal-toc li:last-child { margin-bottom: 0; }
.legal-toc a { color: var(--tx-2); transition: color .18s ease; }
.legal-toc a:hover { color: var(--c-primary); }

.legal-body { max-width: 760px; }
.legal-block { margin-bottom: 42px; scroll-margin-top: 96px; }
.legal-block:last-child { margin-bottom: 0; }
.legal-block h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--tx-1);
  line-height: 1.4;
  padding-left: 14px;
  border-left: 2px solid var(--c-primary);
}
.legal-block p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--tx-2);
}
.legal-block p:last-child { margin-bottom: 0; }
.legal-block ul {
  margin: 0 0 14px;
  padding-left: 4px;
  list-style: none;
}
.legal-block li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--tx-2);
}
.legal-block li:last-child { margin-bottom: 0; }
.legal-block li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-primary);
  opacity: .8;
}

@media (max-width: 1024px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .legal-toc { position: static; }
  .legal-toc ol { columns: 2; column-gap: 28px; }
  .legal-body { max-width: none; }
}
@media (max-width: 640px) {
  .hero-legal { padding: 64px 0 40px; }
  .legal-toc ol { columns: 1; }
  .legal-block { margin-bottom: 34px; }
  .legal-block h2 { font-size: 18px; }
  .legal-block p, .legal-block li { font-size: 14px; line-height: 1.9; }
}

/* ==========================================================================
   代理加盟页 · 各管一段（官网补充）
   ========================================================================== */
.ag-def-section,
.ag-own-section,
.ag-flow-section,
.ag-compare-section { padding: var(--sp-lg) 0; }
.ag-own {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 44px auto 0;
}
.ag-own-card {
  position: relative;
  padding: 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .18s ease;
}
.ag-own-card:hover { border-color: rgba(125, 140, 240, .38); }
.ag-own-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--c-primary);
  margin-bottom: 12px;
}
.ag-own-card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--tx-1); }
.ag-own-card p { margin: 0; font-size: 14px; color: var(--tx-2); line-height: 1.8; }

@media (max-width: 1024px) {
  .ag-own { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ==========================================================================
   核心优势页 · 真实证据区（官网补充）
   ========================================================================== */

/* ==========================================================================
   FAQ 页 · 分组（官网补充）
   ========================================================================== */
.faq-groups { max-width: 1180px; margin: 0 auto; }
.faq-group { margin-bottom: 46px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--tx-1);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.faq-group-title span {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--c-primary);
  padding: 3px 9px;
  border: 1px solid rgba(125, 140, 240, .35);
  border-radius: 8px;
}
.faq-group .faq-list { margin-top: 0; }

@media (max-width: 640px) {
  .faq-group { margin-bottom: 34px; }
  .faq-group-title { font-size: 16px; }
}

/* ==========================================================================
   价格方案页 · 计费口径与额度说明（官网补充）
   ========================================================================== */
.price-basis-section,
.price-notes-section { padding: var(--sp-lg) 0; }
.price-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 44px auto 0;
}
.price-note {
  padding: 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .18s ease;
}
.price-note:hover { border-color: rgba(125, 140, 240, .38); }
.price-note h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-1);
  padding-left: 13px;
  position: relative;
}
.price-note h3::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--c-primary);
}
.price-note p { margin: 0; font-size: 14px; color: var(--tx-2); line-height: 1.8; }
.price-note strong { color: var(--tx-1); font-weight: 600; }
/* .price-notes-foot 的排版与链接色并入 .foot-note（见文件末尾）。 */

@media (max-width: 1024px) {
  .price-notes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* ==========================================================================
   版面系统统一层（官网补充 · 2026-10-22）
   统一：垂直节奏 / 首屏高度 / 字号阶梯 / 标题对齐 / 栅格间距 / 正文行宽
   纯覆盖规则，不改 HTML 结构。回退方式：整段删除即可。
   ========================================================================== */

/* ---- 1. 垂直节奏：所有板块上下各 96px，相邻板块间距恒为 192px ---- */
main > section[class]:not(.hero-hero):not(.hero-page):not(.hero-cmp) {
  padding-block: 96px;
}

/* ---- 2. 首屏：统一最小高度并垂直居中 ---- */
main > .hero-hero,
main > .hero-page:not(.hero-cmp) {
  display: flex;
  align-items: center;
  min-height: min(640px, 74vh);
  padding-block: 112px 96px;
}
main > .hero-hero > .container,
main > .hero-page:not(.hero-cmp) > .container {
  width: 100%;
}

/* ---- 3. 字号阶梯：文字档 11 / 12.5 / 14 / 16 / 18 / 20；展示档 24 / 30 / 40 / 56 ---- */
main > .hero-hero h1,
main > .hero-page:not(.hero-cmp) h1 {
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1.2;
}
main > .hero-page.hero-legal h1 { font-size: 40px; }
.hero-cmp h1 { font-size: clamp(26px, 2.3vw, 34px); }
.section-title { font-size: clamp(30px, 2.8vw, 40px); }
.cta-band h2 { font-size: 30px; }

/* ---- 4. 板块标题对齐统一为居中（首屏各自的构图保留） ---- */
body.page-scenarios .section-title,
body.page-scenarios .section-desc {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ---- 5. 栅格间距收敛：双栏统一 56px，卡片沿用 18–20px ---- */
.hero-grid,
.hero-spot-grid { gap: 56px; }

/* ---- 6. 正文行宽 ---- */
.section-desc { max-width: 46em; }
/* 表格/卡片下的口径小字不再限宽居中，改为跟随内容满宽（见文件末尾 .foot-note）。 */

/* ==========================================================================
   版面统一层 · 断点
   ========================================================================== */
@media (max-width: 900px) {
  main > section[class]:not(.hero-hero):not(.hero-page):not(.hero-cmp) {
    padding-block: 72px;
  }
  main > .hero-hero,
  main > .hero-page:not(.hero-cmp) {
    min-height: auto;
    padding-block: 88px 72px;
  }
  main > .hero-hero h1,
  main > .hero-page:not(.hero-cmp) h1 {
    font-size: clamp(30px, 6.2vw, 40px);
  }
  main > .hero-page.hero-legal h1 { font-size: 32px; }
  .hero-cmp h1 { font-size: clamp(26px, 5.4vw, 34px); }
  .section-title { font-size: clamp(24px, 4.6vw, 30px); }
  .cta-band h2 { font-size: 24px; }
  .hero-grid,
  .hero-spot-grid { gap: 32px; }
}

@media (max-width: 640px) {
  main > section[class]:not(.hero-hero):not(.hero-page):not(.hero-cmp) {
    padding-block: 56px;
  }
  main > .hero-hero h1,
  main > .hero-page:not(.hero-cmp) h1 { font-size: 28px; }
  .section-title { font-size: 24px; }
}

/* 法务页首屏：不占满整屏，按文档型页面收紧 */
main > .hero-page.hero-legal {
  min-height: auto;
  padding-block: 88px 56px;
}
@media (max-width: 900px) {
  main > .hero-page.hero-legal { padding-block: 64px 40px; }
}

/* ---- 7. 标题防孤字：避免末行只剩一两个字 ---- */
main h1,
main h2,
.hero-tag,
.cta-band h2 {
  text-wrap: balance;
}
main p {
  text-wrap: pretty;
}
/* 副标是居中导语：balance 让各行等长，避免末行只剩两三个字 */
.section-desc {
  text-wrap: balance;
}

/* ==========================================================================
   工具型页面 · 紧凑标题区（官网补充 · 2026-10-22）
   替代原来的 640px 空板 Banner：高度压到 ~230px，左对齐，CTA 内联右侧
   ========================================================================== */
.hero-compact {
  position: relative;
  padding-block: 60px 44px;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 150% at 8% 0%, rgba(125, 140, 240, .11) 0%, rgba(125, 140, 240, 0) 62%),
    var(--bg-deep);
}
.hero-compact .hc-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px;
}
.hero-compact .hc-main { min-width: 0; }
.hero-compact .hc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--c-primary);
}
.hero-compact .hc-kicker::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--c-primary);
  opacity: .6;
}
.hero-compact h1 {
  margin: 14px 0 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tx-1);
}
.hero-compact .hc-sub {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--tx-3);
  max-width: 54em;
}
.hero-compact .hc-action {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  padding-bottom: 3px;
}
.hero-compact .hc-action .btn { white-space: nowrap; }

@media (max-width: 1080px) {
  .hero-compact .hc-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-compact .hc-action { padding-bottom: 0; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .hero-compact { padding-block: 56px 40px; }
  .hero-compact h1 { font-size: 25px; }
  .hero-compact .hc-sub { font-size: 15.5px; }
}

/* 产品能力页首屏：玻璃卡加宽 + 补 CTA */
.hero-cmp .hcmp-copy { max-width: 500px; }
.hero-cmp .hcmp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.hero-cmp .hcmp-cta .btn { padding: 11px 22px; font-size: 14px; }
@media (max-width: 1080px) {
  .hero-cmp .hcmp-cta { justify-content: center; }
}

/* 代理页「各管一段」：4 卡布局（断点与 .ag-def 完全一致） */
.ag-own { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .ag-own { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
}
@media (max-width: 640px) {
  .ag-own { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   代理页「我们负责技术」四卡：与上方「品牌/定价/折扣/客户」四卡完全对齐
   （原来宽度 281px vs 316px、圆角 12 vs 16、纯色 vs 渐变、标签色不一致）
   ========================================================================== */
.ag-own {
  max-width: none;
  margin: 48px auto 0;
}
.ag-own-card {
  padding: 26px 24px 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  transition: border-color .25s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
}
.ag-own-card:hover {
  border-color: rgba(125, 140, 240, .36);
  transform: translateY(-3px);
}
.ag-own-num {
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--c-cyan);
}
.ag-own-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.ag-own-card p { font-size: 14px; line-height: 1.8; }

/* 代理页：对比表与 FAQ 左右边界对齐其余板块（原 1120 / 1224 vs 1344） */
.ag-compare-section .calc-table { max-width: none; }
body.page-agency .faq-list { max-width: none; }

/* 全站内容宽度统一（2026-10-22）：个别板块曾压到 13xx，统一走同一版心 */
.how-section .container,
.calc-section .container,
.faq-section .container,
.features .container,
.tech-section .container,
.pricing-section .container {
  max-width: 1600px;
}
.faq-groups,
.faq-list,
.calc-table {
  max-width: none;
}

/* ---- 全站内容宽度统一 · 收口 ----
   所有非首屏板块的容器一律回到 1600（内容宽 1344），
   内部若有更窄的 max-width 也放开，避免板块间左右边界反复跳动。 */
main > section[class]:not([class*="hero"]) > .container {
  max-width: 1600px;
}
.proof-figure,
.proof-notes,
.price-notes,
.rf-terms,
.rf-calc-hero,
.rf-life,
.rf-steps,
.rf-payout {
  max-width: none;
}

/* ==========================================================================
   工具型页面 · 紧凑标题区加网格纹理（复用首页 .hero-hero 的同一套语言）
   零图片、零额外请求，只借用首页已有的 44px 淡网格 + 左上主色光晕
   ========================================================================== */
.hero-compact {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(120% 150% at 8% 0%, rgba(125, 140, 240, .12) 0%, rgba(125, 140, 240, 0) 62%),
    linear-gradient(rgba(125, 140, 240, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 140, 240, .07) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
}

/* ==========================================================================
   推广返佣页 · 计佣口径（充值 vs 消耗）
   ========================================================================== */
/* 产品能力页首屏标签：贴视频左上/右上角，不再跟随分割线 */
.hero-cmp .cmp-tag--l { left: 28px; right: auto; }
.hero-cmp .cmp-tag--r { right: 28px; left: auto; }
@media (max-width: 1080px) {
  .hero-cmp .cmp-tag--l { left: 14px; }
  .hero-cmp .cmp-tag--r { right: 14px; }
}

/* ==========================================================================
   产品能力页首屏 · 去掉玻璃卡，改电影感版式（2026-10-23）
   玻璃卡浮在满屏视频上，像"压在电影画面上的对话框"：既挡住画面，
   又让整屏首屏分裂成「视频 + 卡片」两个东西。改为——视频满幅，
   文案压在左下角的地面压边上，可读性交给压边与投影。
   >1180 生效；≤1180 仍走「文在上、画框在下」的堆叠版。
   ========================================================================== */
@media (min-width: 1181px) {
  /* 文案改为居上：原来压到画面底部，底部留白过多、上方空一大片 */
  .hero-cmp { align-items: flex-start; }

  .hero-cmp .container {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1440px;
    padding-top: 96px;
    padding-bottom: 0;
  }

  .hero-cmp .hcmp-copy {
    max-width: 780px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 标签胶囊改成一条线性 kicker，避免「卡片里再套一张小卡片」 */
  .hero-cmp .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .14em;
    color: rgba(232, 246, 244, .84);
  }
  .hero-cmp .hero-tag::before {
    content: '';
    width: 22px;
    height: 1px;
    flex-shrink: 0;
    background: rgba(95, 214, 200, .72);
  }
  .hero-cmp .hero-tag svg { display: none; }

  .hero-cmp h1 {
    margin-top: 18px;
    font-size: clamp(34px, 3.2vw, 46px);
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 2px 28px rgba(0, 0, 0, .55);
  }
  .hero-cmp h1 .grad-text { margin-top: 6px; }

  .hero-cmp .sub {
    max-width: 600px;
    margin-top: 20px;
    font-size: 15.5px;
    line-height: 1.88;
    color: rgba(236, 241, 245, .78);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
  }

  .hero-cmp .hcmp-cta { margin-top: 30px; gap: 12px; }
  .hero-cmp .hcmp-cta .btn { padding: 14px 26px; font-size: 15.5px; }

  .hero-cmp .hcmp-cap {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
    font-size: 12.5px;
    color: rgba(236, 241, 245, .5);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  }

  /* 压边重排：只在文案所在的左下角压暗，画面其余部分（尤其是左侧「原片」区）保持亮度，
     否则左右两路的对比会被压边吃掉 */
  .hero-cmp::after {
    background:
      radial-gradient(115% 92% at 4% 102%, rgba(5,6,7,.96) 0%, rgba(5,6,7,.84) 24%, rgba(5,6,7,.52) 46%, rgba(5,6,7,.18) 68%, rgba(5,6,7,0) 86%),
      linear-gradient(180deg, rgba(5,6,7,.80) 0%, rgba(5,6,7,0) 16%, rgba(5,6,7,0) 64%, rgba(5,6,7,.52) 100%);
  }
}

/* ==========================================================================
   产品能力页 · 能力区两层结构（四张大卡 + 四索引条）
   原为 8 张同权重小卡挤两行四列：316px 装 70 字、无画面、读者不知主次
   ========================================================================== */
.cap-section { padding: var(--sp-lg) 0; }
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.cap-card {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  min-height: 300px;
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  /* 2026-11-01：原来 --line-soft(#202227) 在深底上几乎看不见，只有视频那侧因为
     画面亮度差显得有条边，右侧文字区与下沿像是没有边界。提到 --line(#2a2d34)，
     四条边一起显出来。 */
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .25s ease;
}
.cap-card:hover { border-color: rgba(125, 140, 240, .36); }
.cap-media {
  position: relative;
  overflow: hidden;
  background: #0b0c10;
  border-right: 1px solid var(--line-soft);
}
.cap-media img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.05) brightness(.92);
}
.cap-body {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 26px;
}
.cap-body h3 {
  margin: 12px 0 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--tx-1);
}
.cap-body p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--tx-2);
}
.cap-ft {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  color: var(--tx-3);
}

.cap-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
  background: rgba(255, 255, 255, .014);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cap-index-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 22px 20px;
  border-left: 1px solid var(--line);
}
.cap-index-item:first-child { border-left: 0; }
.cap-index-item h3 {
  margin: 0;
  /* 15.5：同卡正文是 14px，标题必须高一档，否则只剩字重区分、层级读不出来。 */
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tx-1);
}
.cap-index-item span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tx-3);
}

@media (max-width: 1080px) {
  .cap-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
  .cap-card { grid-template-columns: 38% minmax(0, 1fr); min-height: 260px; }
  .cap-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-index-item:nth-child(3) { border-left: 0; }
  .cap-index-item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 720px) {
  .cap-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cap-media { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .cap-body { padding: 22px 22px 20px; }
  .cap-body h3 { font-size: 20px; }
  .cap-body p { font-size: 14px; }
  .cap-index { grid-template-columns: minmax(0, 1fr); }
  .cap-index-item { border-left: 0; border-top: 1px solid var(--line-soft); }
  .cap-index-item:first-child { border-top: 0; }
}

/* ==========================================================================
   首页 · 合作伙伴（白底 logo 卡片墙；占位名称，上线前须替换真实合作方）
   ========================================================================== */
.partners-section { padding: var(--sp-lg) 0; }
.pt-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 48px;
}
.pt-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 118px;
  padding: 0 14px;
  background: #f4f5f7;
  border-radius: var(--r-lg);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.pt-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .85);
}
.pt-mark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

/* 真实合作方用位图 logo：透明 webp，按 30px 方框等比贴合 */
.pt-mark--img { object-fit: contain; }
.pt-txt { min-width: 0; }
.pt-cn {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #15181d;
  white-space: nowrap;
}
.pt-en {
  display: block;
  margin-top: 4px;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .17em;
  color: #7c8494;
  white-space: nowrap;
}
.pt-item--stack .pt-cn { font-size: 17px; }
.pt-item--word .pt-cn { font-size: 22px; letter-spacing: .08em; }
.pt-item--word .pt-en { margin-top: 6px; }

@media (max-width: 1180px) {
  .pt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .pt-item { height: 104px; }
}
@media (max-width: 760px) {
  .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 36px; }
  .pt-item { height: 92px; padding: 0 8px; gap: 8px; }
  .pt-mark { width: 24px; height: 24px; }
  .pt-cn { font-size: 15.5px; }
  .pt-en { font-size: 7px; letter-spacing: .12em; }
  .pt-item--word .pt-cn { font-size: 17px; }
}
@media (max-width: 560px) {
  .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-item { height: 84px; }
  .pt-cn { font-size: 14px; }
}

/* ==========================================================================
   全站 kicker 统一（2026-10-23）
   原状：首页/法务 = 胶囊 + 金色图标 + 灰白 14px；场景页 = 中文 + 竖线 + 英文 12.5px/字距 .4px/600；
       其余五页 = 短横 + 等宽 12.5px/字距 .14em/400/蓝紫。三套配色、五种字距字重。
   标准：短横 22px + 等宽描述，青色；12.5px / 字距 .14em / 字重 500；与 H1 恒定 16px。
   ========================================================================== */
/* 只取消小图标，标签本身与前导短横保留 —— 原来这一串选择器把 .hero-tag / .hc-kicker
   自己也一起 display:none 了，导致全站 kicker 不显示（2026-10-24 修复） */
.hero-tag svg,
.hc-kicker svg,
.spot-kicker svg { display: none; }
/* 产品能力页首屏（电影感版）的 kicker 也回到同一套 */
@media (min-width: 1181px) {
  .hero-cmp .hero-tag { color: var(--c-cyan); }
}

/* 首屏起点说明（不做强行拉平）
   顶部起排的 7 页：紧凑标题区 5 页 = 201px，法务 2 页 = 193px（差 8px，不可辨）。
   首页 217px、场景页 238px 的差异来自构图本身——文案列比右侧画面短，被垂直居中；
   强行拉平只能把文案列改成顶对齐，会破坏这两页现有的视觉平衡，故保留。 */

/* kicker 窄屏换行（nowrap 在 390 下会让首页那行 30 字溢出） */
@media (max-width: 720px) {
  .hc-kicker,
  .hero-tag,
  .spot-kicker {
    white-space: normal;
    align-items: flex-start;
    line-height: 1.62;
    letter-spacing: .06em;
  }
  .hc-kicker::before,
  .hero-tag::before,
  .spot-kicker::before { margin-top: 9px; }
}

/* ==========================================================================
   页脚重排（2026-10-23）：补上未进导航的页面
   原为四栏（品牌 / 产品 / 更多 / 联系），compare、cases、short-drama、anime-drama
   四个页面在 sitemap 里但页脚无入口，法务三页也无入口。改为五栏 + 底栏法务。
   ========================================================================== */
.ft-grid {
  grid-template-columns:
    minmax(0, 1.15fr) minmax(0, .66fr) minmax(0, .82fr)
    minmax(0, .58fr) minmax(0, 1.1fr);
}
.ft-copy {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.ft-copy-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.ft-copy-links::before {
  content: '';
  width: 1px;
  height: 11px;
  background: var(--line);
  margin-right: -2px;
}
.ft-copy-links a {
  color: var(--tx-3);
  text-decoration: none;
  transition: color .18s ease;
}
.ft-copy-links a:hover { color: var(--c-cyan); }

@media (max-width: 1200px) and (min-width: 641px) {
  .ft-grid {
    grid-template-columns:
      minmax(0, .8fr) minmax(0, .92fr) minmax(0, .7fr) minmax(0, 1.75fr);
    gap: 32px;
  }
}
@media (max-width: 640px) {
  /* 六栏在窄屏改 2 列：品牌独占、四个导航栏排成 2×2、联系独占，正好填满。
     原先 3 列时「更多」会独占一行、右侧空两格。 */
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .ft-brand, .ft-contact { grid-column: 1 / -1; }
  .ft-copy-links::before { display: none; }
  .ft-copy { gap: 6px 12px; }
}

/* 首页首屏上移（2026-10-23）：两列顶对齐 + 上边距 96，消掉上方大片留白 */
@media (min-width: 961px) {
  main > .hero-hero {
    align-items: flex-start;
    padding-block: 96px;
  }
  main > .hero-hero .hero-grid { align-items: start; }
}

/* 三态标记：取消 emoji，改用同色系的字重符号 */

/* ---------- 成本条形 ---------- */

/* ==========================================================================
   核心优势页 · 版面整合（2026-10-23）
   问题：同一页有五个不同的左边界——卡片 1344 / 表格 1160 / 成本条 1160 /
        送审条 1180 / 对比图 1084，滚动时内容边缘来回跳，这是「不和谐」的主因。
   处理：除对比图（1320，接近容器宽）外，全部回到容器宽；正文字号也统一。
   ========================================================================== */
.page-features .cost-bars { max-width: none; }
.page-features .proof-figure { max-width: 1320px; }
.page-features .proof-notes { max-width: none; }

/* 注释卡与技术卡同一张“卡面”，不再出现两种材质 */
.page-features .proof-note {
  padding: 24px 26px;
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.page-features .proof-note h3 { font-size: 15.5px; }
.page-features .proof-note p { font-size: 14px; line-height: 1.85; }

/* 对比图与说明之间收紧 */
.page-features .proof-figure { margin: 40px auto 0; }
.page-features .proof-figure img { border-color: var(--line-soft); }
.page-features .proof-notes { margin-top: 24px; gap: 20px; }

/* 成本区收口：备注贴内容左缘，排版归 .foot-note（见文件末尾） */
.page-features .cost-row { padding: 26px 0; }
.page-features .cost-track { height: 10px; }

/* ==========================================================================
   题材与内容页统一层（2026-10-23）
   适用于 /short-drama/ /anime-drama/ /cases/ /compare/ 四个页面。
   原状：首屏是旧的居中大 Banner；q-grid / plan-grid / sample-grid 三组类
        在样式表里根本没有定义，直接渲染成整页无边的文字墙；六张能力卡挤在
        四列里，第二行只有两张、右边空两格。
   ========================================================================== */

/* 六张能力卡：4 列 → 3 列（4+2 的两格空洞） */

/* ---------- 观察点卡（cases / compare） ---------- */

/* ---------- 样片卡（cases） ---------- */

/* 样片卡里的对比组件是给 <video> 写的，cases 页用的是 <img>，补上同样的铺满规则 */

/* 散文块（anime-drama）：行宽收到 60em，标题与全站其他板块一样居中 */

/* ==========================================================================
   常见问题 · 就地出口与锚点（2026-10-23）
   FAQ 分两层：各页只留该页特有的阻力问题，其余集中在 /faq/ 的分组锚点下。
   ========================================================================== */
/* 吸顶导航高 93px，锚点跳转要留出这段，否则标题被压住 */
.faq-group { scroll-margin-top: 108px; }

.sc-faq-link-section { padding: 0 0 var(--sp-md); }

/* ==========================================================================
   首页首屏 · 右侧视频“半幅出血”（2026-10-23 方案 A）
   原：视频装在 608px 宽的圆角卡片里，只占半幅还留出四周留白，冲击力弱。
   改：卡片右边缘一直顶到视口右缘（左圆角、右边无边框），画面面积 +8%，
       同时左侧文案区仍是实底，可读性不受画面影响。
   ========================================================================== */
@media (min-width: 961px) {
  .hero-hero .hero-visual {
    align-items: flex-start;
    /* 容器右内距 48px；视口宽于 1600 时再补上容器两侧的留白 */
    margin-right: calc(-48px - max(0px, (100vw - 1600px) / 2));
  }
  .hero-hero .hero-compare {
    /* 素材 1888×1088（1.735），底部 82%–88% 烧了一行对白字幕。
       画框取 2.2:1 并把画面顶到上沿，可见区只到 79%，字幕整条落在框外；
       横向零裁切，脸的尺寸不变。 */
    aspect-ratio: 2.2 / 1;
    border-radius: var(--r-lg) 0 0 20px;
    border-right: 0;
    box-shadow:
      -18px 24px 70px rgba(0, 0, 0, .5),
      0 0 90px -24px rgba(125, 140, 240, .4);
  }
}

/* ==========================================================================
   全站板块间距统一为 160（2026-10-23）
   原：内容板块 padding-block 96 → 相邻板块之间 96+96=192，一屏只能看到一个板块，
       滚动时连续两大段空白。改为 80，板块间恒为 160。
   首屏底部同步收 16，使「首屏 → 第一段」也是 160。
   ========================================================================== */
main > section[class]:not(.hero-hero):not(.hero-page):not(.hero-cmp) {
  padding-block: 80px;
}
main > .hero-hero,
main > .hero-page:not(.hero-cmp) {
  padding-bottom: 80px;
}
/* 单行出口不该占满一个板块的上下留白 */
.sc-faq-link-section { padding: 0; }
.sc-faq-link-section .faq-more { margin: 0; text-align: center; }

/* ==========================================================================
   首页首屏对比：停止「整幅来回擦」的扫描（2026-10-23）
   原动画从「全清晰」扫到「全模糊」再回来，循环 5 秒——首页有一半时间停在
   一张糊掉的画面上，作为门面完全不可接受；而且扫过脸部时像渲染出错。
   改为只在一小段区间内轻微往复：始终以清晰画面为主，对比始终可见。
   ========================================================================== */
.hero-compare .hc-before { animation: hero-scan 7s ease-in-out infinite alternate; }
@keyframes hero-scan {
  /* 原片层只占左侧 18%→30%，画面始终以清晰的增强结果为主 */
  0%   { -webkit-clip-path: inset(0 82% 0 0);
 clip-path: inset(0 82% 0 0); }
  100% { -webkit-clip-path: inset(0 70% 0 0);
 clip-path: inset(0 70% 0 0); }
}
@keyframes hero-scanline {
  0%   { left: 18%; }
  100% { left: 30%; }
}

/* 第二板块的对比视频：素材顶部有黑色胶片齿孔条，向上裁掉 */

/* ==========================================================================
   首页首屏数据：四张大卡 → 一条细指标条（2026-10-23）
   原为四张 30px 内距的卡片，各装一个数字和一行小字，占掉 151px 高度；
   信息量与体量不匹配，而且和下面几个板块的卡片句式重复。
   改为一条带竖分隔线的指标条：同样四个指标，高度压到 ~86px。
   ========================================================================== */
.hero-stats {
  margin-top: 56px;
  gap: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.hero-stats .stat {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 24px;
  text-align: left;
}
.hero-stats .stat::after { display: none; }
.hero-stats .stat + .stat { border-left: 1px solid var(--line-soft); }
.hero-stats .num {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.hero-stats .label {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .2px;
  color: var(--tx-3);
}
@media (max-width: 900px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .stat { padding: 16px 18px; }
  .hero-stats .stat:nth-child(3) { border-left: 0; }
  .hero-stats .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .hero-stats .num { font-size: 21px; }
}

/* ==========================================================================
   合作伙伴：白底卡片 → 低对比深色卡（2026-10-23）
   12 张白卡在一片深色里是最亮的一块，把注意力从首屏抢走了；
   而且名称与标识目前是占位，不宜用最高对比度的形式呈现。
   ========================================================================== */
.pt-item {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line-soft);
}
.pt-item:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(125, 140, 240, .32);
}
.pt-cn { color: var(--tx-1); }
.pt-en { color: var(--tx-3); }
.pt-mark { opacity: .9; }

/* ==========================================================================
   产品能力页首屏 · 标题在画面上的可读性（2026-10-23 第二版：简约）
   第一版用柔和背衬 + 强投影，越调越花。回到最简：
   一条自左向右的压暗（无模糊、无径向、无投影），标题用纯白，
   渐变字在这页取消——蓝紫渐变压在动态画面上既跳又弱。
   ========================================================================== */
@media (min-width: 1181px) {
  .hero-cmp::after {
    background:
      linear-gradient(90deg, rgba(5, 6, 7, .88) 0%, rgba(5, 6, 7, .74) 26%, rgba(5, 6, 7, .34) 46%, rgba(5, 6, 7, 0) 64%),
      linear-gradient(180deg, rgba(5, 6, 7, .62) 0%, rgba(5, 6, 7, 0) 20%, rgba(5, 6, 7, 0) 74%, rgba(5, 6, 7, .40) 100%);
  }
  .hero-cmp h1 { color: #fff; }
  .hero-cmp h1 .grad-text {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
}

/* ==========================================================================
   强调字：取消「蓝色填充」，改为白度差（2026-10-23 采纳建议 A+B）
   原来的 --c-grad 两个色标完全相同，效果就是纯蓝 var(--c-primary)。它在白色标题里
   明度更低，语义上想强调、视觉上却在减重。
   现在：强调部分纯白，前半句降到 --tx-2，靠明度建立层级；
        蓝色回归「可点击」这一个用途（按钮 / 链接 / kicker）。
   首页 H1 整句纯白，不分层。
   ========================================================================== */
.grad-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
.section-title:has(.grad-text) { color: var(--tx-2); }
.hero-hero h1,
.hero-hero h1 .grad-text { color: #fff; -webkit-text-fill-color: #fff; }

/* 首页首屏文案与画面成组（2026-10-23）：收窄文案列、压列间距，消掉 200px 死区 */
@media (min-width: 961px) {
  .hero-hero .hero-grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 40px;
    align-items: center;
  }
}

/* ==========================================================================
   产品能力页首屏：原始/增强两个标签移到底部左右角（2026-10-23）
   原来两个标签是跟着分割线走的（right/left 绑定 --cmp-split），在画面上方，
   和首页「左下 / 右下」的角标语言不一致。改为固定在底部两角。
   ========================================================================== */

.cap-index { margin-top: 14px; }

/* 索引条（2026-11-01 用户要求恢复边框）：此前为降权去掉了背景与边框、
   只留一条上边线，四张卡看起来像悬空的说明文字。恢复成完整卡片：
   外框 + 四格之间的竖分隔，与页面其它卡同一套 --line 描边。 */
.cap-index {
  background: rgba(255, 255, 255, .014);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: 14px;
}
.cap-index-item {
  padding: 22px 22px 20px;
  border-left: 1px solid var(--line);
}
.cap-index-item:first-child { border-left: 0; padding-left: 24px; }

/* ==========================================================================
   首页首屏减负 + 中段转化入口（2026-10-23）
   首屏只留「一句话 + 证据 + 按钮」；长页每一屏末尾都有去处。
   ========================================================================== */
/* 指标条移出首屏后，挂在第二板块末尾 */
.hero-stats--inline { margin-top: 56px; }

/* 中段去处：一条轻量文字链，不抢主 CTA */

/* ==========================================================================
   首页首屏 · 右缘渐隐（2026-10-23）
   画框改 16:9 后不再横向裁切，画面右缘被素材自带的一行竖排水印完整露出来
   （「影视效果 内容虚构 无不良导向」——源片自带的合规标注）。
   这行字只有 12px 宽，压在画面最右侧，读起来像渲染残留，不像内容。
   用一条 46px 的右缘渐隐把它收掉：画面本身贴到视口右缘，渐隐看起来就是暗角。
   ========================================================================== */
.hero-compare::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 54px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(8, 9, 12, 1) 0%, rgba(8, 9, 12, 1) 26%, rgba(8, 9, 12, .74) 58%, rgba(8, 9, 12, 0) 100%);
}

/* 窄屏 CJK 可以在任意两字之间折行，会把「漫剧」「做到」这类词拆开。
   把需要连读的片段锁成不可断单元，折行只发生在单元之间。 */
.nb { white-space: nowrap; }

/* 剧集墙不再用上下两条横线分隔（2026-10-23）
   这一屏本身是整幅出血 + 独立底色，已经和上下板块分得开；
   再加两条 1px 线反而像被框住的一段。 */
.drama-wall {
  border-top: 0;
  border-bottom: 0;
}

/* 字幕在素材底部，只裁下面不裁两侧：object-position 顶对齐 */
.hero-compare video { object-position: 50% 0; }

/* 同一比例也要覆盖 <961px 的堆叠版，否则手机端仍会露出底部字幕 */
.hero-compare { aspect-ratio: 2.2 / 1; }

/* 画框变扁之后，角标在手机端显得过大、两侧几乎碰在一起 */
@media (max-width: 560px) {
  .hv-tag {
    bottom: 10px;
    padding: 4px 10px;
    font-size: 11.5px;
  }
  .hv-tag-before { left: 10px; }
  .hv-tag-after { right: 10px; }
}

/* ==========================================================================
   首屏视频回到容器内（2026-10-23 用户否掉半幅出血）
   出血版右缘顶到视口边、左侧却是圆角卡片，一边贴边一边留白，
   和导航、正文、下方板块的 48px 容器边全部对不上，读起来像贴歪了。
   改回对称卡片：四角同圆角、四边同描边，右缘对齐容器。
   ========================================================================== */
@media (min-width: 961px) {
  .hero-hero .hero-visual { margin-right: 0; }
  .hero-hero .hero-compare {
    border-radius: var(--r-2xl);
    border-right: 1px solid var(--line);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, .45),
      0 0 0 1px rgba(125, 140, 240, .12);
  }
  .hero-hero .hero-grid { align-items: start; }
}

/* ==========================================================================
   局部对照卡提到首屏正下方（2026-10-23）
   原为独立板块，带一个 40px 的 H2 + 两行说明，把四张图推到首屏下面 400px 处。
   现在去掉标题，只留一行小字说明，卡片紧贴首屏。
   ========================================================================== */

/* ==========================================================================
   数据条移到首屏正下方（2026-10-23）
   原挂在局部卡板块末尾，离首屏已经有两大段；它本来就是首屏那三句话的量化补注，
   放在 banner 下面才接得住。包进 container，左端与标题、卡片对齐。
   ========================================================================== */
.hero-stats--inline {
  margin-top: 8px;
  margin-bottom: 0;
}

/* 首屏视频放大（2026-10-23）：H1 收到 52px，文案列才压得下去，视频从 704 加宽 */
@media (min-width: 1260px) {
  .hero-hero .hero-grid {
    grid-template-columns: 500px minmax(0, 1fr);
    gap: 20px;
  }
  .hero-hero .hero-copy h1 { font-size: 52px; }
}

/* ==========================================================================
   首屏上边距再收（2026-10-23 用户第二次反馈「上面空的太大」）
   上面那条规则把 padding-block 定在 96/96，导航 93 + 96 = 内容从 189 起。
   这次只收上边距：96 → 56，内容整体上提 40px；下边距不动，与下一段仍是 160。
   文案与画面一起上移，两列仍然顶对齐。
   ========================================================================== */
@media (min-width: 961px) {
  main > .hero-hero {
    padding-block: 56px 96px;
    /* 原规则给了 min-height: min(640px, 74vh)，内容只有 383，多出来的 257
       全部沉在下方——收掉上边距只是把空挪到下面。这里直接按内容高度走。 */
    min-height: 0;
  }
}

/* ==========================================================================
   首屏上边距全站统一为 56（2026-10-23）
   首页与场景页（.hero-hero）已在前一条规则里收到 56，kicker 落 161。
   其余三类首屏各自对齐到同一落点：
   - 八个紧凑标题区（.hero-compact）原本被全站的 padding-block:80 覆盖 → 161
   - 产品能力页（.hero-cmp）文案压在满幅视频上，容器内距 96 → 56 → 161
   ========================================================================== */
/* 全站那条 main > section[class]:not(...):not(...):not(...) 是 4 个类级特异性，
   单靠 .hero-compact 压不过，只能加 !important */
main > section.hero-compact {
  padding-block: 56px 80px !important;
}
@media (min-width: 1181px) {
  .hero-cmp .container {
    padding-top: 56px;
  }
}

/* ==========================================================================
   首屏视频下沿与文案底部对齐（2026-10-23）
   视频按 2.2:1 由宽度推算高度，宽屏（1600 容器）下会算出 447px，
   而文案块只有 383px，视频比按钮底部多出 64px，下沿垂到文案之外。
   这里让视频高度跟随行高（文案高度），宽度不变，由 object-fit 向内裁切。
   ≥1460 才生效：低于此宽度时视频本来就比文案矮，不必处理。
   ========================================================================== */
@media (min-width: 1460px) {
  /* 视频列改为 auto：宽度由 2.2:1 与行高算出，多出来的宽度给文案列，
     画面不会被裁，右缘仍贴着容器右界 */
  .hero-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }
  .hero-hero .hero-visual { height: 100%; justify-content: flex-start; }
  .hero-hero .hero-compare {
    width: auto;
    height: 100%;
  }
}

/* ==========================================================================
   首屏对比分割线：整幅从左到右扫一遍，速度加快（2026-10-23）
   原先只在左侧 18%–30% 之间小幅往复（为了不让首页长时间停在糊画面上），
   缺点是分割线几乎不动，看不出「这是在对比」。
   现在：3.4s 一个循环 —— 0→70% 从左扫到右（约 2.4s），
   70→76% 停在满幅，76→100% 快速收回（约 0.8s）再从头开始。
   分割线与遮罩同一时长、同一缓动，不会各自跑偏。
   ========================================================================== */
.hero-compare .hc-before {
  animation: hero-scan 3.4s cubic-bezier(.40, 0, .60, 1) infinite;
}
.hero-compare .hc-scan {
  animation: hero-scanline 3.4s cubic-bezier(.40, 0, .60, 1) infinite;
  will-change: left;
}
@keyframes hero-scan {
  0%   { -webkit-clip-path: inset(0 100% 0 0);
 clip-path: inset(0 100% 0 0); }
  70%  { -webkit-clip-path: inset(0 0 0 0);
 clip-path: inset(0 0 0 0); }
  76%  { -webkit-clip-path: inset(0 0 0 0);
 clip-path: inset(0 0 0 0); }
  100% { -webkit-clip-path: inset(0 100% 0 0);
 clip-path: inset(0 100% 0 0); }
}
@keyframes hero-scanline {
  0%   { left: 0%; }
  70%  { left: 100%; }
  76%  { left: 100%; }
  100% { left: 0%; }
}

/* ==========================================================================
   四个局部卡并入 Banner（2026-10-23）
   原来 banner 与卡片之间还夹着数据条，卡片离视频 333px，另成一个板块。
   现在顺序改为：banner → 标题+四卡 → 数据条 → 痛点，
   并把 banner 下边距 96 → 48、卡片板块上边距 56 → 32，两者间距 80，
   四张贴着视频收尾，读作 banner 的最后一行。
   ========================================================================== */
@media (min-width: 961px) {
  main > .hero-hero {
    padding-block: 56px 48px;
  }
}

/* ==========================================================================
   数据条回到 banner 与局部卡板块之间（2026-10-23）
   关系：banner →（24）数据条 →（160）「放大到 100%，四处同时对照」+ 四卡
   数据条贴着 banner 收尾，读作同一个区块；与后面板块保持全站标准的 160。
   ========================================================================== */
@media (min-width: 961px) {
  main > .hero-hero {
    padding-block: 56px 24px;
  }
}
.hero-stats--inline {
  margin-top: 0;
  margin-bottom: 80px;
}

/* ==========================================================================
   数据条第四格：7×24 → 省 72%（2026-10-23）
   7×24 是全站最弱的一条（可用性承诺，SLA 里没有对应条款），让位给成本。
   72% 只代表「单次生成」的成本差，抽卡次数越多省得越多——这层意思放在
   条下的口径里，不塞进格子，保持四格的句式整齐。
   ========================================================================== */
/* 说明行已删除，下边距回到 80，与下一板块合成标准 160 */
.hero-stats--inline { margin-bottom: 80px; }

/* 场景页首屏回正（2026-10-23）：.hero-spot 曾被首页那串 .hero-hero 规则误伤 */
@media (min-width: 961px) {
  .hero-hero.hero-spot .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 52px;
    align-items: center;
  }
  .hero-hero.hero-spot .hero-copy h1 {
    font-size: clamp(36px, 3.9vw, 56px);
  }
  .hero-hero.hero-spot .hero-visual {
    height: auto;
  }
}

/* ==========================================================================
   推广返佣页三处修正（2026-10-23）
   ========================================================================== */
/* 一、示例下方的口径小字：改为贴内容左缘满宽（原被 max-width + margin:auto
   居中成窄块，最后一行只剩「为准。」两个字挂在中间）。排版归 .foot-note 管。 */
/* 三、「不做什么」不再独占一行：去掉整行跨列，保留警示配色 */
.rf-term-warn {
  grid-column: auto;
}

/* ==========================================================================
   首页「修掉瑕疵，再谈细节」（2026-10-23）
   位置：100% 局部裁切之后、省钱板块之前。
   形制刻意不用卡片——上面已经是「四张图标卡 + 四张图卡」，再来第三组卡片会腻。
   这里用带细分隔线的清单：一行一个瑕疵，名称在左、处理方式在右，
   读起来像技术备注，而不是又一组卖点。
   ========================================================================== */

/* ==========================================================================
   导航字体润色（2026-10-23 用户反馈「字体不好看」）
   原来的 600 字重 + 16px：中文在 16px 下笔画会黏在一起，600 又把它压得更实，
   远看像一团。改成 500 字重、15px、字距 .4px——笔画留白出来，整排更透气。
   字重不随 active 变化（否则切换页面时宽度会跳）。
   ========================================================================== */
.nav a {
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: .4px;
}

/* 双栏：左清单、右对比图（覆盖上一版的整幅清单） */

/* ==========================================================================
   首页「修掉瑕疵，再谈细节」折叠版（2026-10-23）
   点标题展开，右侧图上带箭头标注。
   用原生 button + aria-expanded，不引入依赖；同一时间只开一项。
   ========================================================================== */
.rv-list { margin: 40px auto 0; max-width: 1180px; border-top: 1px solid var(--line-soft); }
.rv-item { border-bottom: 1px solid var(--line-soft); }
.rv-item.is-open .rv-head h3,
.rv-head:hover h3 { color: var(--tx-1); }
.rv-item.is-open .rv-icon { border-color: rgba(95,214,200,.5); background: rgba(95,214,200,.08); }
.rv-item.is-open .rv-icon::before { background: var(--c-cyan); }
.rv-item.is-open .rv-icon::after { transform: translate(-50%, -50%) rotate(0deg); background: var(--c-cyan); }

.rv-item.is-open .rv-panel { grid-template-rows: 1fr; }
.rv-text {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--tx-3);
  max-width: 34em;
}
.rv-shot { position: relative; margin: 0 0 26px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); }
.rv-shot img { display: block; width: 100%; height: auto; }
.rv-cues { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rv-cues line { stroke: rgba(255,255,255,.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rv-cue {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(8, 10, 14, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: .2px;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 1024px) {
    .rv-text { max-width: none; margin-bottom: 20px; }
  .rv-cue { font-size: 11.5px; padding: 3px 8px; }
}

/* 标注线加强：原来 1px / 50% 白太淡，几乎看不出指向 */
.rv-cues line { stroke: rgba(255,255,255,.72); stroke-width: 1.2; }
.rv-cues circle { fill: rgba(255,255,255,.92); }

/* ==========================================================================
   瑕疵板块改为静态铺开（2026-10-23 用户反馈：不要点击，要图文并茂全部展开）
   三行交替：奇数行文左图右，偶数行图左文右。去掉按钮、折叠面板与过渡。
   ========================================================================== */
.rv-list { margin: 48px auto 0; max-width: 1180px; border-top: 0; }
.rv-item {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.12fr);
  gap: 56px;
  align-items: center;
  padding: 0;
  border-bottom: 0;
}
.rv-item + .rv-item { margin-top: 64px; }
.rv-item:nth-child(even) .rv-copy { order: 2; }
.rv-item:nth-child(even) .rv-shot { order: 1; }
.rv-copy { min-width: 0; }
.rv-copy h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--tx-1);
}
.rv-text { margin: 0; max-width: 30em; font-size: 15.5px; line-height: 1.85; color: var(--tx-3); }
.rv-shot { margin: 0; }
.rv-shot img { border-radius: var(--r-lg); }
@media (max-width: 1024px) {
  .rv-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .rv-item:nth-child(even) .rv-copy,
  .rv-item:nth-child(even) .rv-shot { order: 0; }
  .rv-item + .rv-item { margin-top: 44px; }
  .rv-copy h3 { font-size: 19px; }
}

/* 偶数行图在左：列宽也要对调，否则图被塞进窄列 */
.rv-item:nth-child(even) {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .78fr);
}
@media (max-width: 1024px) {
  .rv-item:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
}

/* 收一版：图缩到 500 宽，行距收紧，文字顶对齐 —— 先看看是不是尺寸的问题 */
.rv-shot { max-width: 500px; }
.rv-item:nth-child(odd) .rv-shot { justify-self: end; }
.rv-item { align-items: start; }
.rv-item + .rv-item { margin-top: 48px; }
.rv-copy h3 { font-size: 20px; }

/* 文字栏补一组要点，与图上的标注一一对应——否则左栏只剩一小段字，空得发慌 */
.rv-points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
  max-width: 30em;
}
.rv-points li {
  position: relative;
  padding: 11px 0 11px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx-2);
}
.rv-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--c-cyan);
  opacity: .7;
}

/* ==========================================================================
   瑕疵板块：三列并排（2026-10-23 再收一半）
   一行三列，每列「图 → 编号 → 标题 → 一句说明 → 三条要点」。
   图和文都变小，但三者并置本身形成对照，不再是「大字配小图」的空栏。
   ========================================================================== */
.rv-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1180px;
}
.rv-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 !important;
}
.rv-item:nth-child(even) { grid-template-columns: none; }
.rv-item .rv-shot {
  order: -1;
  max-width: none;
  margin: 0 0 20px;
  justify-self: auto;
}
.rv-copy h3 { font-size: 17px; margin-bottom: 8px; }
.rv-text { font-size: 13.5px; line-height: 1.75; max-width: none; }
.rv-points { margin-top: 16px; max-width: none; }
.rv-points li { padding: 8px 0 8px 16px; font-size: 13.5px; }
.rv-cue { font-size: 11.5px; padding: 3px 7px; }
@media (max-width: 1024px) {
  .rv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 680px) {
  .rv-list { grid-template-columns: minmax(0, 1fr); }
}

/* 与其它板块同宽：去掉 1180 的内收，铺满容器（1440 屏 1344 / 1600 屏 1504）
   列宽随之从 ~370 涨到 ~430，图也跟着大一圈 */
.rv-list {
  max-width: none;
  gap: 32px;
}
.rv-cue { font-size: 11.5px; padding: 3px 8px; }

/* ==========================================================================
   首页「不只是清晰，细节是补出来的」（2026-10-23）
   位置：修掉瑕疵之后、省钱之前。结构：
   一张全幅对照 + 两组「同一放大倍率」的细节并排。
   与上面两块的区别：上面用分割线拼图，这里用两张独立成图并排，读起来是「两半对照」。
   ========================================================================== */
.more-fig { margin: 0; }
.more-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
}
.more-fig figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: .3px;
  text-align: center;
  color: var(--tx-dim);
}
.more-fig.is-after figcaption { color: var(--c-cyan); }
.more-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 三段纵向排布：两张接近满宽的大图在上，小标题在左、说明在右，排在图下方（2026-10-31）
   原来小标题在上、下方一条分割线，与相邻「修复瑕疵」区块「图在上、文在下」的次序相反；
   统一成图先建立视觉锚点、文字作解读，PC 与手机同一页不再互相打架。
   因此去掉原 `border-bottom`（否则会夹在图和它自己的图注之间），改为上方留 16px。 */
.more-list { margin-top: 52px; }
.more-group + .more-group { margin-top: 56px; }
.more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
}
.more-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--tx-1);
  white-space: nowrap;
}
.more-head p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tx-3);
  text-align: right;
}
.more-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 768px) {
  .more-head { flex-direction: column; gap: 6px; }
  .more-head p { text-align: left; }
  .more-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .more-group + .more-group { margin-top: 40px; }
}

/* 竖构图：图片改 4:5，两图一行；整块宽度收一收，否则四块竖图会把页面拉得过长 */
.more-list { max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
  .more-list { max-width: none; }
}

/* 四个板块两两并排：一行两组，每组内部仍是「两张图左右对照」
   这样四组从四行压成两行，长度减半；竖构图在半宽里依然立得住 */
.more-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 40px;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.more-group + .more-group { margin-top: 0; }
.more-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 16px;
}
.more-head h3 { white-space: normal; }
.more-head p { text-align: left; }
@media (max-width: 900px) {
  .more-list { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* 对比角标：仿首屏对比视频的做法，直接压在图片左下/右下，不再单独占一行 */
.more-fig { position: relative; }
.more-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(9, 10, 13, .82);
  border: 1px solid var(--line);
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .4px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.more-tag--after {
  left: auto;
  right: 12px;
  color: var(--c-cyan);
  border-color: rgba(95, 214, 200, .42);
}
.more-fig figcaption { display: none; }

/* 场景页首屏并入 .hero-cmp 语法：全幅图 + 文案压左上，与产品能力页同一套 */
.hero-cmp--still .hcmp-media { animation: none; }
.cmp-still {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* 场景页独有的输入/输出/计费行，放在 CTA 下面 */
.hero-cmp .spot-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.hero-cmp .spot-spec > div { display: flex; align-items: baseline; gap: 8px; }
.hero-cmp .spot-spec dt { font-size: 12.5px; letter-spacing: .1em; color: var(--tx-3); }
.hero-cmp .spot-spec dd { margin: 0; font-size: 13.5px; color: var(--tx-1); }

/* ==========================================================================
   紧凑页「结论条」（2026-10-24）
   9 个紧凑首屏原本只有「标题 + 一行副标」，比首页轻 5 倍，说服力不足。
   在副标下面加一条「数字 + 一句话」，与首页数据条同一套语言：
   数字用 22px 青色，后面跟一句能被核对的说明。
   ========================================================================== */
.hc-stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  max-width: 620px;
}
.hc-stat b {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1;
  color: var(--c-cyan);
  font-variant-numeric: tabular-nums;
}
.hc-stat span {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tx-3);
}
@media (max-width: 640px) {
  .hc-stat { margin-top: 16px; padding-top: 14px; }
  .hc-stat b { font-size: 19px; }
  .hc-stat span { font-size: 12.5px; }
}

/* ==========================================================================
   板块间距调整（2026-10-24）
   原来 160（每侧 80）：全站 6443 高，10 道缝占 25%，短板块显得空。
   · 常规板块收到 144（每侧 72）
   · 三个证据块（修复瑕疵 / 不止于清晰 / 放大到局部）收到 112（每侧 56）
     —— 它们本来是一组递进论证，拉开会读成三个独立板块
   · 移动端 112 → 96（每侧 48）
   用与 .site 原规则同级的选择器覆盖，避免 :not() 链把特异性抬高。
   ========================================================================== */
/* 2026-11-01：全站内容板块上下内距统一 52（原 48/56/64/72 四种），相邻恒 104 */
@media (min-width: 1024px) {
  main > section[class]:not(.hero-hero):not(.hero-page):not(.hero-cmp) {
    padding-block: 52px;
  }
}
@media (max-width: 640px) {
  main > section[class]:not(.hero-hero):not(.hero-page):not(.hero-cmp) {
    padding-block: 52px;
  }
}

/* 瑕疵三卡去掉 01/02/03 序号后，整块往上收一收（2026-10-24） */
.rv-list { margin-top: 34px; }
.rv-copy h3 { margin-bottom: 10px; }
.section-desc + .rv-list { margin-top: 34px; }

/* 2026-10-31：padding-top 回到 72，与全站板块内距一致（原 44/56 两处特调） */
.defect-section .section-desc { margin-top: 10px; }
.defect-section .rv-list { margin-top: 28px; }

/* 图片与下方文字贴紧：原来 20px，视觉上像断开的 */
.rv-item .rv-shot { margin-bottom: 10px; }
.rv-copy h3 { margin-bottom: 8px; }
.rv-points { margin-top: 12px; }
/* 行高带来的视觉空隙：h3 用 1.6 行高时，字还没到、盒子已经占了 */
.rv-copy h3 { line-height: 1.35; }
/* 图文间距再减半（20→10→4） */
.rv-item .rv-shot { margin-bottom: 4px; }
.rv-copy h3 { line-height: 1.25; }
/* 真凶：.rv-item 从「两栏交替」改成 flex 后，gap: 56px 还留着，一直在撑 */
.rv-item { gap: 0; }
.rv-item .rv-shot { margin-bottom: 6px; }
/* 6px 太挤，取中间值：图下 24px（比最初 60 少一半多，又不至于贴住） */
.rv-item .rv-shot { margin-bottom: 24px; }

/* ==========================================================================
   三块证据的「副标题 → 正文」统一间距（2026-10-24）
   实测原来三处分别是 28 / 52 / 44，因为各自的历史规则不一。
   统一到 40：比最紧的松一点，比最松的紧一点，三块并置时节奏一致。
   ========================================================================== */
/* 首页「修复瑕疵」卡内的三项要点（2026-10-31 方案 B）
   原来是一行 12.5px 的 --tx-3 灰字、用 26% 白的「·」分隔，与正文同色同重只小 1px，
   读起来像正文的第三行。全宽段改成浅描边胶囊：形态上把「三个并列要点」和「一句话」分开，
   三张卡并排时底部也齐。
   选择器带 .rv-item 前缀，(0,2,0) 高过.site.css 后面那条 `.rv-points{display:flex}`
   与 `.rv-points li+li::before{content:'·'}`，不依赖书写顺序。 */
.rv-item .rv-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  border-top: 0;
}
.rv-item .rv-points li {
  padding: 4px 10px;
  /* 中性配色（2026-10-31 用户选方案一）：全站紫色只给动作（按钮/CTA），
     静态标签用紫色会读成「可点」；而且同一张卡里图上的 .rv-cue 标注本来就是
     中性深底白字，再上一套紫标签等于同卡两套标签语言。
     改成 .more-tag / .rv-cue 那一族的中性描边，整卡只用一种标签语言。 */
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .2px;
  color: var(--tx-2);
}
.rv-item .rv-points li + li::before { content: none; }

.defect-section .rv-list,
.more-section .more-list,
.detail-section .dt-grid {
  margin-top: 40px;
}

/* 三块证据的副标题统一：之前 .defect-section 单独被压到 10px，与另两块（16）不一致 */
.defect-section .section-desc { margin-top: 16px; }
/* 上内边距也统一：三块都是 56，标题在自己的块里位置一致 */
.defect-section { padding-top: 72px; }

/* ==========================================================================
   全站统一层（2026-10-24 审计后）
   审计发现「副标题 → 正文」的间距有 5 种值：40 / 44 / 46 / 48 / 0，
   全部来自各页各自累积的 margin-top。统一为 40（与首页三块证据一致）。
   ========================================================================== */
main > section > .container > .section-desc + *,
main > section > .section-desc + * {
  margin-top: 40px;
}
/* .detail-section 上内边距曾有 56 / 32 / 80 三条 !important 打架，已删，回归证据组标准 */
/* 有些页面把标题+副标包在 .section-head 里，正文是它的兄弟节点，上面那条规则够不到 */
main > section > .container > .section-head + * {
  margin-top: 40px;
}

/* ==========================================================================
   首屏视频放大 + 与按钮底边对齐（2026-10-24）
   原来 824×375（2.2:1），比文案块矮、底边还悬在按钮下方 59px，显得小气。
   源视频已重裁成 1888×860（去掉底部字幕带），画框比例不再被字幕绑死，
   放到 1.9:1 → 约 812×427，高度 +52。整行 align-items:end，视频底 = 按钮底。
   ========================================================================== */
@media (min-width: 961px) {
  main > .hero-hero .hero-grid {
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    gap: 32px;
    align-items: end;
  }
  main > .hero-hero .hero-compare {
    width: 100%;
    height: auto;
    aspect-ratio: 1.9 / 1;
  }
}

/* 首页文案整体上移：标题顶端对齐能力页大标题（220px），按钮位置不动 */
@media (min-width: 961px) {
  main > .hero-hero .hero-cta { margin-top: 80px; }
}
@media (min-width: 961px) {
  main > .hero-hero .hero-cta { margin-top: 78px; }   /* 补齐后标题落在 220，与能力页一致 */
}
@media (min-width: 961px) {
  main > .hero-hero .hero-cta { margin-top: 122px; }  /* 文案再上移 44，按钮不动；上限 149（视频顶） */
}

/* 首屏文案中段的小字：填掉副标与按钮之间的空白，同时回答新访客最先问的三件事 */
.hero-hero .hero-meta {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: .2px;
  color: var(--tx-3);
}
@media (min-width: 961px) {
  main > .hero-hero .hero-cta { margin-top: 83px; }  /* 减掉小字占的高度，保持标题仍落 176 */
}

/* 省钱块的一集账（2026-11-01）：原来分两段 —— `.scale-eg` 是 15.5px 居中的算例、
   `.scale-note` 是 12.5px 的解释，读者要拼两次才读完一件事。
   现已合并成一段 `.scale-note`（算例 + 口径 + 免责），贴内容左缘、与内容同宽，
   数字仍用 <b> 强调。`.scale-eg` 这个类名随之停用，规则已删除。 */

/* 首屏对比改用静帧（第 1 帧），与视频同一套定位 */
.hero-compare img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   全站顶部标签统一（2026-10-24）
   统一前有三套：首页胶囊（边框+底+灰白 14px）、能力页短横+青色、紧凑页短横+蓝紫 16px。
   统一为 2026-10-23 就写下的标准：短横 22px + 等宽中文，青色，12.5px / 字距 .14em / 字重 500。
   胶囊属于「标签/徽章」语汇，用在 H1 上方会多出一个方框，和 H1 抢层级。
   ========================================================================== */
.hero-tag,
.hero-compact .hc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-cyan);
}
.hero-tag::before,
.hero-compact .hc-kicker::before {
  content: '';
  width: 22px;
  height: 1px;
  flex-shrink: 0;
  background: currentColor;
  opacity: .7;
}
/* 与 H1 的间距统一 16 */
.hero-hero .hero-tag { margin-bottom: 16px; }
/* 场景页的 .spot-kicker 并入同一套 */

/* 首屏整体上提：视频与导航的间距收到 62（原 94） */
@media (min-width: 961px) {
  main > .hero-hero { padding-block: 64px 96px; }
}
@media (min-width: 961px) {
  main > .hero-hero { padding-block: 40px 96px; }   /* 视频顶距导航 57（原 94） */
}
@media (min-width: 961px) {
  main > .hero-hero { padding-block: 24px 96px; }   /* 视频顶距导航 41 */
}
@media (min-width: 961px) {
  main > .hero-hero { padding-block: 24px 48px; }   /* 数据卡同步上提 */
}

/* 首屏 nav→video 间距恒等（2026-10-24）：视频盒不锁固定比例，按文案块高度反推 */
@media (min-width: 961px) {
  main > .hero-hero { padding-block: 48px 48px; }
  main > .hero-hero .hero-compare {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}
@media (min-width: 961px) {
  /* 百分比高度需要有定高的父级，否则视频盒会塌成 0 */
  main > .hero-hero .hero-visual { align-self: stretch; height: 100%; }
}
@media (min-width: 961px) {
  main > .hero-hero { padding-block: 36px 36px; }   /* 两处间距收到 36 */
}

/* ==========================================================================
   顶部标签距导航统一（2026-10-24）
   实测：首页 45、其余 11 页 65，差的 20px 来自 padding（36 vs 56）。
   统一到 36 的内边距 → 全站标签顶都落在导航下 45。
   ========================================================================== */
@media (min-width: 961px) {
  .hero-compact { padding-top: 36px; }
  main > .hero-cmp .container { padding-top: 36px; }
}

/* 紧凑页标签上移：用与全站 padding 规则同级的选择器，否则被 (0,4,2) 那条压住 */
@media (min-width: 961px) {
  main > section.hero-compact[class]:not(.hero-hero):not(.hero-page):not(.hero-cmp) {
    padding-top: 36px;
  }
}

/* 5594 行那条 `padding-block: 56px 80px !important` 压住了普通规则，只能用同等 !important 覆盖 */
@media (min-width: 961px) {
  main > section.hero-compact { padding-top: 36px !important; }
}

/* ==========================================================================
   尾部 CTA 统一改造（2026-10-24）
   改造前：12 页里 11 页只有一个按钮，且 4 种近似文案（上传视频/立即上传…），
          没有次要出口、没有风险逆转小字；H2 各页写得很好，被同一个按钮拖平。
   改造后：H2 与副标保留各页定制；主按钮统一；每个页面补一个低门槛次链接；
          底部固定一行计费口径（回答「点下去会不会花钱」）。
   ========================================================================== */
.cta-band { padding-block: 60px 64px; }
.cta-band p { max-width: 620px; margin: 14px auto 0; }
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.cta-more {
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--tx-2);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  padding-bottom: 2px;
  transition: color .18s, border-color .18s;
}
.cta-more:hover { color: var(--c-cyan); border-color: rgba(95, 214, 200, .55); }
.cta-note {
  margin: 20px auto 0 !important;
  font-size: 12.5px;
  letter-spacing: .2px;
  color: var(--tx-dim);
  max-width: none;
}
@media (max-width: 640px) {
  .cta-band { padding-block: 44px 48px; }
  .cta-actions { gap: 18px; margin-top: 22px; }
  .cta-band .btn { width: 100%; max-width: 320px; }
  .cta-more { font-size: 13.5px; }
}

/* ==========================================================================
   优势页职责切分（2026-10-24）
   两页原本都在讲「四项能力 + 细节证据」，重复度高。
   切分后：能力页 = 我们做什么（能力/机制/工序/证据/三步），
          优势页 = 凭什么选我们（路线分岔 / 证据 / 账 / 边界）。
   新增两块：.fork-*（两栏分岔对照）与 .limit-*（适用边界）。
   ========================================================================== */

/* 盈亏平衡：把一段长文变成四行算式 */

/* 不指名对比：三条理由做成三张卡 */

/* 能补 / 不能补 */

/* 什么时候别选我们：从破折号段落改成编号判断 */

/* 优点/代价原为两栏并排（.page-topic .tf 是 2 列 grid），在 660 宽的卡里每栏只剩 270，
   文字碎成两三行。改成纵向堆叠，每条占满整行。 */

/* 优点/代价标签独占一行，否则「优点 素材完全不出内网…」会连读成一句 */
/* .page-topic .tf-tag.pro/.con 是 (0,3,0)，比 .page-compare .tf-tag 高，
   所以背景条没被清掉，会在「优点/代价」后面拉出一条色带。用同级选择器覆盖。 */

/* 页脚 6 列（2026-10-29 定）：产品 / 应用参考 / AI学堂 / 更多 / 品牌 / 联系 */
@media (min-width: 1201px) {
  .ft-grid {
    grid-template-columns:
      minmax(0, 1.45fr) minmax(0, .55fr) minmax(0, .65fr)
      minmax(0, .65fr) minmax(0, .55fr) minmax(0, 1.45fr);
    gap: 24px;
  }
  /* 6 列后品牌栏只剩 335，tagline 若仍锁 310 会把 22 字的句子折成两行 */
  .ft-tagline { max-width: none; }
}
@media (max-width: 1200px) and (min-width: 641px) {
  .ft-grid {
    grid-template-columns:
      repeat(4, minmax(0, .8fr)) minmax(0, 1.9fr);
    gap: 24px;
  }
  .ft-brand { grid-column: 1 / -1; }
  .ft-tagline { max-width: 560px; }
}
/* 999 以下，联系栏按 1.9fr 算只剩 298px，扣掉二维码与间距后地址列不足 160px，
   「浙江省杭州市余杭区仓前街道」会在「街/道」之间断行。改为四栏等宽 + 联系独占整行。 */
@media (max-width: 999px) and (min-width: 641px) {
  .ft-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 24px;
  }
  .ft-contact { grid-column: 1 / -1; }
}

/* ==========================================================================
   技术点从「四张卡」改成「一条链」（2026-10-24）
   四张卡和上面的四能力卡形态相同，而两者讲的是同一批名词（低频锚定、人脸、纹理、时序），
   读者会以为重复。改成四节点的横向链：形态与能力卡明确区分，也把原文那句
   「我们把它做成一条链，而不是一组可以各自开关的开关」真的画出来。
   ========================================================================== */
.page-features .chain {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 52px 0 0;
  padding: 0;
}
.page-features .chain li {
  position: relative;
  padding: 32px 26px 0 0;
  border-top: 1px solid var(--line-soft);
}
.page-features .chain li::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 0 4px rgba(95, 214, 200, .13);
}
.page-features .chain-no {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--tx-dim);
}
.page-features .chain h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--tx-1);
}
.page-features .chain p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--tx-3);
}
@media (max-width: 900px) {
  .page-features .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .page-features .chain li { padding: 26px 22px 0 0; }
}
@media (max-width: 560px) {
  .page-features .chain { grid-template-columns: minmax(0, 1fr); }
  .page-features .chain li { padding: 24px 0 0; }
}

/* dt-grid 原来挂在 .detail-section 前缀下，随四张图一起搬进证据块后选择器失配，
   四张 321px 的方图变成纵向满宽堆叠，板块高度炸到 6862。改挂 .page-features。 */
.page-features .dt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1024px) {
  .page-features .dt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .page-features .dt-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* 整幅骑兵图移除后，四张方图成为该块唯一证据，间距略放宽，避免连成一片 */
.page-features .dt-grid { gap: 22px; }

/* 四卡的关键词行：说明这一项具体管哪些对象。
   刻意不用胶囊——本站刚把标签云与技术关键词胶囊清掉，12 个描边块会在 660 宽的卡里
   形成标签墙、盖过 22px 标题；且胶囊在全站代表"可点击/可筛选"，这里只是纯文本。 */
.page-features .cap-keys {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--tx-dim);
}
.page-features .cap-keys > span {
  margin-right: 10px;
  color: var(--tx-3);
}

/* 关键词行原在中间、脚注贴底，两者被一段空白隔开像两组信息。
   改成「关键词 + 脚注」一起贴底成组。 */
.page-features .cap-keys { margin-top: auto; padding-top: 14px; }
.page-features .cap-ft { margin-top: 6px; padding-top: 0; }

/* 四张裁切图原先卡在 max-width: 1320，比其他板块的内容宽（1440 屏 1344 / 1600 屏 1504）
   左右各缩进一截。改成跟随容器，与全站边界对齐。 */
.page-features .dt-grid {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* 四项索引的描述从短语改为两句技术说明，行高与宽度同步放开 */
.cap-index-item { padding-right: 26px; }
.cap-index-item span { line-height: 1.72; font-size: 12.5px; }
.cap-index-item h3 { margin-bottom: 2px; }

/* ==========================================================================
   四项索引：图标成组布局（2026-10-24）
   原来图标挂在左侧与三段描述并排，图标只有 18px 且被 `.cap-index-item span`
   的规则改成了 block/12.5px，四列里显得碎。改成：
   图标做成 34px 的圆角浅底片 + 标题同行，描述单独占满整列宽度。
   ========================================================================== */
.cap-index-item { display: block; padding: 20px 26px 22px 2px; }
.ci-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.ci-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(95, 214, 200, .24);
  background:
    radial-gradient(120% 120% at 22% 0%, rgba(95, 214, 200, .16), rgba(95, 214, 200, .02) 72%),
    rgba(255, 255, 255, .012);
  color: var(--c-cyan-soft);
}
.ci-ic svg { display: block; width: 18px; height: 18px; }
.cap-index-item h3 { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--tx-1); }
/* 描述与标题左缘对齐（34px 图标 + 11px 间距），卡片里只剩「图标 / 文字」两条竖线 */
.ci-desc { margin: 0 0 0 45px; font-size: 12.5px; line-height: 1.75; color: var(--tx-3); text-wrap: pretty; }
@media (max-width: 1080px) {
  .cap-index-item { padding-right: 22px; }
}
@media (max-width: 720px) {
  .cap-index-item { padding: 18px 0 18px 0; }
}
.ci-ic svg { width: 19px; height: 19px; }

/* 索引条内距（2026-11-01）：这里原本是「无外框」时期的补偿——首尾两块把
   2px 内距回贴容器边缘，让文字与容器左右齐平。既然外框回来了，2px 就顶到
   边框上（首格看起来最靠左）。改成四边统一 24，与其余三格对齐。 */
.cap-index-item { padding: 20px 24px 22px 24px; }
@media (max-width: 1080px) {
  .cap-index-item:nth-child(3) { padding-left: 24px; }
  .cap-index-item:nth-child(4) { padding-right: 24px; }
}
@media (max-width: 720px) {
  .cap-index-item,
  .cap-index-item:first-child,
  .cap-index-item:nth-child(3),
  .cap-index-item:nth-child(4) { padding: 20px 24px 22px 24px; }
}

/* ==========================================================================
   产品能力页审计修复（2026-10-24）
   ========================================================================== */

/* 三步栅格原先的 ≤640 单列规则写在 .how-steps 基础规则（repeat(3,1fr)）之前，
   被后者覆盖，390 屏上仍是三列、每列约 110px，中文逐字换行、板块被拉到 1266 高。
   这条补在文件末尾，并把断点提到 820，768 下也不再挤。 */
@media (max-width: 820px) {
  .how-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 32px;
  }
  .how-step { padding: 22px 20px; }
}

/* ==========================================================================
   首屏对比区：可左右拖动（2026-10-25）
   原实现只有 CSS 动画在扫，没有指针交互；而 /cases/ 写了「首页首屏的对比区
   可以左右拖动」，属于承诺了不存在的功能。
   这里保留未操作时的自动扫描，一旦拖动就切到手动分割位置（--hc-p）。
   ========================================================================== */
.hero-compare {
  cursor: ew-resize;
  touch-action: pan-y;
  --hc-p: 50%;
}
.hero-compare.is-drag .hc-before {
  animation: none;
  -webkit-clip-path: inset(0 calc(100% - var(--hc-p)) 0 0);
  clip-path: inset(0 calc(100% - var(--hc-p)) 0 0);
}
.hero-compare.is-drag .hc-scan {
  animation: none;
  left: var(--hc-p);
}
.hero-compare:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
}

/* 合作伙伴英文名只有 8px，1366 屏上几乎不可读；提到 9.5px */
.pt-en { font-size: 11.5px; }

/* 法务三页首屏与 FAQ 等高（2026-10-25）：只调上内边距，kicker 落点才一致 */
main > .hero-page.hero-legal { padding-block: 36px 79px; }
@media (max-width: 768px) {
  main > .hero-page.hero-legal { padding-block: 56px 81px; }
}

/* ==========================================================================
   法务三页：版本行 / 要点摘要 / 相关文档 / 关键数字 / 打印（2026-10-25）
   版式本身（232px sticky 目录 + 832 正文 + 16px/1.95）保持不变，
   这里只补「读之前先知道什么」的三块信息，不与业务页争夺注意力。
   ========================================================================== */
/* 要点摘要：三句话读完再决定要不要读全文 */
.legal-summary {
  margin: 0 0 36px;
  padding: 20px 24px 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .018);
}
.legal-summary-t {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-cyan);
}
.legal-summary ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: legal-sum;
}
.legal-summary li {
  counter-increment: legal-sum;
  position: relative;
  margin: 0 0 9px;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--tx-2);
}
.legal-summary li:last-child { margin-bottom: 0; }
.legal-summary li::before {
  content: counter(legal-sum, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--c-cyan);
  opacity: .7;
}

/* 相关文档：三页之间互相可达，不必回页脚找 */
.legal-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 46px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 13.5px;
}
.legal-related span { color: var(--tx-3); letter-spacing: .08em; }
.legal-related a { color: var(--c-cyan); text-decoration: none; }
.legal-related a:hover { text-decoration: underline; }

/* 条款里的关键数字：只提亮，不加底色，避免法务页显得花 */
.legal-hl {
  font-weight: 600;
  color: var(--tx-1);
}

@media (max-width: 720px) {
  .legal-summary { padding: 18px 18px 20px; margin-bottom: 30px; }
  .legal-summary li { font-size: 14px; padding-left: 26px; }
  .legal-related { margin-top: 34px; gap: 10px 16px; }
}

/* 打印 / 存 PDF：签约留档时用，输出浅底深字，去掉导航与目录 */
@media print {
  .site-header, .site-footer, .legal-toc, .legal-related, .cta-band, .ft-grid { display: none !important; }
  html, body { background: #fff !important; color: #111 !important; }
  .legal-layout { display: block; max-width: none; }
  .legal-body { width: 100%; }
  .hero-legal { padding: 0 0 18pt !important; }
  .hero-legal h1 { color: #111 !important; }
  .hero-tag, .legal-summary-t { color: #555 !important; }
  .legal-summary { border-color: #ccc !important; background: none !important; }
  .legal-block h2 { color: #111 !important; }
  .legal-block p, .legal-block li, .legal-summary li { color: #222 !important; font-size: 10.5pt; line-height: 1.7; }
  .legal-hl { color: #000 !important; }
  .legal-block { break-inside: avoid-page; }
}

/* 目录本身已带「一、二、三」中文序号，再叠一层 ol 数字序号变成「1. 一、」，重复。
   去掉标记，左缩进归零，让条目与正文左缘对齐。 */
.legal-toc ol { list-style: none; padding-left: 0; }
.legal-toc li { margin-bottom: 10px; }

/* 法务页首屏：kicker 原来带「生效于 2026 年 10 月 22 日」，在 390 屏断成
   「生效 / 于 2026 年…」两行；日期已在正文顶部的版本行里，kicker 改为规则名。
   另外副标里的 <br> 在窄屏会造成「如 / 何使用、」这类断字，小屏去掉强制换行。 */
@media (max-width: 720px) {
  .hero-legal .sub br { display: none; }
  .hero-legal .hero-tag { max-width: 100%; }
}

/* ==========================================================================
   实测样片页（2026-10-25 重做）
   不再提供原片/成片下载：截图并排放在页面上，点开弹窗播动态对比。
   素材既有横屏 16:9 也有竖屏 9:16，所以样片墙用「宽卡通栏 + 竖卡左右分栏」：
   横屏卡占满两列，竖屏卡媒体在左、说明在右，避免 9:16 图把行高撑到不可控。
   ========================================================================== */
.case-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 40px;
}
.case-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .014);
  transition: border-color .18s ease;
}
.case-card:hover { border-color: rgba(95, 214, 200, .28); }
.case-card.is-wide { grid-column: span 2; }
.case-card.is-tall {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: stretch;
}

.case-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #05070a;
  overflow: hidden;
  cursor: pointer;
}
.case-card.is-tall .case-media { aspect-ratio: 9 / 16; height: 100%; }
.cm-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 卡片缩略图直接显示增强后的整图，原来的「原片/1080P 角标 + 中间分割线」已删除（2026-10-26） */
.cm-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(6, 8, 12, .48);
  color: #fff;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.cm-play svg { width: 20px; height: 20px; margin-left: 2px; }
.case-media:hover .cm-play,
.case-media:focus-visible .cm-play {
  transform: scale(1.08);
  background: rgba(125, 140, 240, .55);
  border-color: rgba(255, 255, 255, .7);
}

.case-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 26px 24px;
}
.case-body h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; }
.case-body p { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--tx-3); }
.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 4px 0 0;
}
.case-facts div { display: flex; flex-direction: column; gap: 3px; }
.case-facts dt { font-size: 11.5px; letter-spacing: .09em; color: rgba(255, 255, 255, .32); }
.case-facts dd { margin: 0; font-size: 12.5px; color: var(--tx-2); }
.case-card.is-tall .case-body { justify-content: center; }

/* 弹窗：两路视频叠放，右侧层按 --cmp 裁切，分割线可拖 */
.case-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-modal[hidden] { display: none; }
.cm-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(5, 7, 11, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cm-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1600px, 94vw);
  max-height: 92vh;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  background: #0b0d13;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.cm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(8, 10, 15, .62);
  color: #fff;
  cursor: pointer;
}
.cm-close svg { width: 15px; height: 15px; }
.cm-close:hover { background: rgba(255, 255, 255, .16); }
.cm-stage {
  position: relative;
  width: 100%;                    /* 横屏：左右铺满 */
  aspect-ratio: 16 / 9;           /* 高度按比例自适应 */
  max-height: calc(92vh - 58px);  /* 顶到视口时不再长高，避免溢出弹窗 */
  background: #000;
  --cmp: 50%;
  touch-action: pan-y;
  cursor: ew-resize;
}
.cm-stage.is-portrait {
  width: auto;                                    /* 竖屏：左右自适应 */
  aspect-ratio: 9 / 16;
  /* 高度铺满「弹窗可用高度」，同时受视口宽度约束，窄屏不会溢出 */
  height: min(calc(92vh - 58px), calc(94vw * 16 / 9));
  max-height: none;
  align-self: center;                             /* 父级纵向 flex，默认 stretch 会把它拉宽 */
  margin: 0 auto;
}
/* 竖屏时弹窗跟着画面收窄，不留两侧黑边 */
.cm-dialog.is-portrait { width: auto; max-width: 94vw; }
.cmv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.cmv-new { -webkit-clip-path: inset(0 0 0 var(--cmp));
 clip-path: inset(0 0 0 var(--cmp)); }
/* 弹窗对比分割线（2026-11-05）：与四个广告页的 .wstage-line / .wstage-handle 同规格
   —— 1.5px 实白线打青色外发光，40px 深底圆钮内嵌左右箭头，一眼能看出可拖。 */
.cm-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cmp);
  width: 1.5px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 0 12px rgba(56, 189, 248, .6);
  pointer-events: none;
}
.cm-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background-color: rgba(7, 8, 13, .9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 17px 17px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}
.cm-label {
  position: absolute;
  bottom: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(6, 8, 12, .6);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .86);
}
.cm-label-ori { left: 14px; }
.cm-label-new { right: 14px; border-color: rgba(95, 214, 200, .45); color: var(--c-cyan-soft); }
.cm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.cm-title { margin: 0; font-size: 14px; color: var(--tx-1); }
.cm-actions { display: flex; align-items: center; gap: 14px; }
.cm-btn {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: var(--tx-1);
  font-size: 12.5px;
  cursor: pointer;
}
.cm-btn:hover { border-color: rgba(95, 214, 200, .5); color: var(--c-cyan-soft); }

@media (max-width: 900px) {
  .case-wall { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .case-card.is-wide { grid-column: auto; }
  .case-card.is-tall { display: flex; flex-direction: column; }
  .case-card.is-tall .case-media {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
  }
}
@media (max-width: 720px) {
  .case-wall { margin-top: 28px; }
  .case-body { padding: 18px 18px 20px; }
  .case-body h3 { font-size: 16.5px; }
  .cm-dialog { width: 96vw; border-radius: var(--r-lg); }
  .cm-close { top: 8px; right: 8px; }
}
@media print {
  .case-modal, .cm-play { display: none !important; }
}

/* 样片页首屏原来为高亮金色光斑另加了一层径向压边（2026-10-25 换底图后删除），
   现在三页首屏共用 .hero-cmp::after 同一套压边，不再单开一套。 */

/* 横屏卡改为「左图右文」（2026-10-25 用户反馈：通栏太占页面）
   原来横屏卡是 16:9 通栏：1344 宽媒体 756 高 + 说明 200，一张近 960。
   改成媒体占 1.55fr、说明占 1fr，媒体高约 450，整页少掉 1400 左右。
   说明文字比媒体矮，用 align-items:center 让文字垂直居中，不留半截空白。 */
.case-card.is-wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
}
.case-card.is-wide .case-media {
  aspect-ratio: 16 / 9;
  height: auto;
}
@media (max-width: 900px) {
  .case-card.is-wide {
    display: flex;
    flex-direction: column;
  }
  .case-card.is-wide .case-media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* 样片卡参数由「三行 dt/dd」压成一行：15.0 秒 · 854×480 → 1920×1080 · 横屏 16:9
   每张卡少约 40px，信息量不减。 */
.case-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--tx-3);
}
.case-facts span { white-space: nowrap; }
.case-facts span + span::before {
  content: "·";
  margin: 0 8px;
  color: rgba(255, 255, 255, .24);
}

/* 参数行的长项（854×480 → 1920×1080）在 1024 下比文字列宽，nowrap 会顶出卡片。
   改成允许换行，只在分隔点上断，不拆数字。 */
.case-facts span { white-space: normal; }
.case-facts span + span::before { white-space: nowrap; }

/* ==========================================================================
   样片页下面的文字整合（2026-10-25）
   原来是四段长文 + 四问 FAQ，滚动到这一屏全是段落。改成：
   三张「看哪里」卡片 + 两张「说明」卡片 + 三步列表，一个 section 收住，
   与全站的卡片语汇一致，纵向也短了一屏多。
   ========================================================================== */

/* ==========================================================================
   样片墙改为 4 列网格（2026-10-25 用户指定排布）
   第一行 2 张横屏（各跨 2 列）→ 第二行 4 张竖屏（各占 1 列）→ 第三行 2 张横屏。
   所有卡片统一「媒体在上、文字在下」；横屏 16:9、竖屏 9:16。
   ========================================================================== */
.case-wall {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.case-card,
.case-card.is-wide,
.case-card.is-tall {
  display: flex;
  flex-direction: column;
  grid-column: span 1;
}
.case-card.is-wide { grid-column: span 2; }
.case-card.is-tall .case-media {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
}
.case-card.is-tall .case-body { justify-content: flex-start; }
.case-body {
  padding: 16px 18px 18px;
  gap: 8px;
}
.case-body h3 { font-size: 15.5px; }
.case-body p { font-size: 12.5px; line-height: 1.75; }
.case-facts { font-size: 11.5px; margin-top: 2px; }

@media (max-width: 1180px) {
  .case-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .case-wall { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .case-card.is-wide,
  .case-card.is-tall { grid-column: auto; }
  .case-card.is-tall .case-media { max-width: none; }
}

/* 三页视觉首屏降高（2026-10-25）：clamp 86vh 让内页首屏高过首页，收到 620–720 */
@media (min-width: 1181px) {
  .hero-cmp { height: clamp(520px, 69vh, 620px); }
}

/* 首页首屏抬到 660（2026-10-25）
   只压内页解决不了主次：内页内容本身需要 ~490 才放得下（文案底已到 465），
   压到 620 后仍比首页 517 高。所以改抬首页：min-height 660 + 内容垂直居中，
   顺序变成 首页 660 > 内页 620 > 紧凑 303。 */

/* 提权：首页首屏的 min-height 需要压过此前 main > .hero-hero 的布局规则 */
@media (min-width: 721px) {
  main > .hero-hero {
    min-height: 660px;
    display: flex;
    align-items: center;
  }
  main > .hero-hero > .container { width: 100%; }
}

/* ==========================================================================
   视频按「原比例、定高、宽度随比例」显示（2026-10-25）
   首页首屏原来把视频塞进 16/10 的框里（object-fit:cover），竖向被裁掉一截；
   现在改用素材自身比例 836×480，框高随之变化、宽度按比例收放，不再裁切。
   ========================================================================== */
.hero-compare {
  aspect-ratio: 836 / 480;
}
.hero-compare video { object-fit: cover; }

/* 样片墙里 c6 用原始比例（其余横屏卡是 16:9） */
.case-card.is-orig .case-media { aspect-ratio: 836 / 480; }

/* 弹窗舞台跟随视频真实比例：--ar 由 JS 在 loadedmetadata 时写入 */
.cm-stage { aspect-ratio: var(--ar, 16 / 9); }
.cm-stage.is-portrait { aspect-ratio: var(--ar, 9 / 16); }
.cm-stage.is-portrait .cmv { object-fit: contain; }

/* ==========================================================================
   首页首屏：视频满幅背景 + 文案区磨砂蒙版（2026-10-25）
   原来视频是右栏里一个 812×445 的圆角框，首屏其余部分是网格底线。
   现在照产品能力页的做法：视频铺满整幅，文案与按钮的位置一点不动，
   只在文案与按钮所覆盖的那片区域压一层「磨砂蒙版」——既是暗压也是
   backdrop-filter 模糊，让视频的运动会从文字后面退开。
   层级：视频 0 → 上下压边 1 → 磨砂 1 → 角标 1(后置) → 文案 2
   ========================================================================== */
.hero-hero { background: #05070a; }

/* 视频层：整幅铺开，去掉原来的圆角、边框与投影。
   z-index: 0 会把里面的 .hc-scan(z-index 2) 关进这一层，整层压在磨砂之下，
   分割线于是只在右侧磨砂变薄处可见。这是当前既定的观感（按用户要求保持），
   除非要重新设计首屏对比，不要改成 auto。 */
.hero-hero > .hero-compare {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 0;
}
.hero-hero > .hero-compare video { object-fit: cover; }

/* 上下压边：顶部让导航压得住，底部让视频收进页面底色 */
.hero-hero > .hero-compare::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 6, 7, .58) 0%,
    rgba(5, 6, 7, 0) 18%,
    rgba(5, 6, 7, 0) 54%,
    var(--bg-body) 100%);
}
/* 原来的 ::after 只留一层很轻的顶部暗角，避免和上面的压边重复 */
.hero-hero::after {
  z-index: 2;
  background: linear-gradient(180deg, rgba(5, 6, 7, .42) 0%, rgba(5, 6, 7, 0) 12%);
}

/* 磨砂蒙版：横向渐隐，左侧最重、右侧完全让开视频。
   mask 同时作用于「压暗」和「模糊」，所以边界是软的，不是一块方玻璃。 */
.hero-hero > .hero-frost {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(7, 8, 11, .88) 0%,
    rgba(7, 8, 11, .84) 30%,
    rgba(7, 8, 11, .66) 44%,
    rgba(7, 8, 11, .34) 58%,
    rgba(7, 8, 11, 0) 70%);
  -webkit-backdrop-filter: blur(30px) saturate(1.06);
  backdrop-filter: blur(30px) saturate(1.06);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, .82) 54%, rgba(0, 0, 0, .34) 66%, transparent 78%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, .82) 54%, rgba(0, 0, 0, .34) 66%, transparent 78%);
}

/* 文案层提到磨砂之上 */
.hero-hero > .container { position: relative; z-index: 3; }

/* 角标脱离对比框，落在磨砂之上，与容器左缘对齐 */
.hero-hero > .hv-tag {
  bottom: 26px;
  z-index: 2;
}
.hero-hero > .hv-tag-before { left: 48px; }
.hero-hero > .hv-tag-after { right: 48px; }

/* 分割线在满幅画面上加一点亮度，否则压边里看不清 */
.hero-hero > .hero-compare .hc-scan {
  box-shadow: 0 0 18px rgba(95, 214, 200, .8), 0 0 60px rgba(95, 214, 200, .35);
}

/* ≤900：文案变成居中一整块，磨砂改成纵向渐隐（视频在下方仍看得见） */
@media (max-width: 900px) {
  .hero-hero > .hero-frost {
    background: linear-gradient(180deg,
      rgba(7, 8, 11, .93) 0%,
      rgba(7, 8, 11, .9) 44%,
      rgba(7, 8, 11, .62) 64%,
      rgba(7, 8, 11, .18) 80%,
      rgba(7, 8, 11, 0) 90%);
    -webkit-backdrop-filter: blur(26px) saturate(1.04);
    backdrop-filter: blur(26px) saturate(1.04);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .55) 76%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .55) 76%, transparent 92%);
  }
  .hero-hero > .hv-tag-before { left: 20px; }
  .hero-hero > .hv-tag-after { right: 20px; }
}

/* 磨砂微调：原来压到 78% 才散尽，左侧几乎成了纯黑，满幅视频白铺了。
   收到 66% 散尽、强度也略降，视频在文字右侧就开始透出来。 */
.hero-hero > .hero-frost {
  background: linear-gradient(90deg,
    rgba(7, 8, 11, .86) 0%,
    rgba(7, 8, 11, .78) 26%,
    rgba(7, 8, 11, .56) 40%,
    rgba(7, 8, 11, .26) 50%,
    rgba(7, 8, 11, 0) 62%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 33%, rgba(0, 0, 0, .74) 46%, rgba(0, 0, 0, .34) 56%, transparent 66%);
  mask-image: linear-gradient(90deg, #000 0%, #000 33%, rgba(0, 0, 0, .74) 46%, rgba(0, 0, 0, .34) 56%, transparent 66%);
}

/* 首屏分割线行程（2026-10-31）：起点 = 版心左内距 + 文案列 500，右半屏全留给对比 */
.hero-hero { --hc-start: calc(48px + 500px); }
@media (min-width: 1601px) {
  .hero-hero { --hc-start: calc((100vw - 1600px) / 2 + 548px); }
}
@media (max-width: 1180px) {
  .hero-hero { --hc-start: calc(32px + 500px); }
}
@media (max-width: 960px) {
  .hero-hero { --hc-start: 62%; }
}
@keyframes hero-scan-visible {
  0%   { -webkit-clip-path: inset(0 calc(100% - var(--hc-start)) 0 var(--hc-start));
 clip-path: inset(0 calc(100% - var(--hc-start)) 0 var(--hc-start)); }
  100% { -webkit-clip-path: inset(0 0 0 var(--hc-start));
 clip-path: inset(0 0 0 var(--hc-start)); }
}
@keyframes hero-scanline-visible {
  0%   { left: var(--hc-start); }
  100% { left: calc(100% - 2px); }
}
.hero-hero > .hero-compare .hc-before { animation: hero-scan-visible 3.8s ease-in-out infinite alternate; }
.hero-hero > .hero-compare .hc-scan { animation: hero-scanline-visible 3.8s ease-in-out infinite alternate; }

/* 拖动手动模式复用同一套 clip，不用改 JS */
.hero-hero > .hero-compare.is-drag .hc-before {
  -webkit-clip-path: inset(0 calc(100% - var(--hc-p)) 0 0);
  clip-path: inset(0 calc(100% - var(--hc-p)) 0 0);
}

/* 满幅头像时，焦点框沿首屏边缘走，不要压到画面里 */
.hero-hero > .hero-compare:focus-visible { outline-offset: -8px; }

@media (max-width: 900px) {
  .hero-hero > .hero-compare .hc-before { animation: none; -webkit-clip-path: inset(0 46% 0 0);
 clip-path: inset(0 46% 0 0); }
  .hero-hero > .hero-compare .hc-scan { animation: none; left: 54%; }
}

/* ≤900：文案是一整块居中，满幅视频再叠分割线会压在字上，视频自带的
   烧录字幕也会从字缝里透出来。这一段改成「只用增强版做底 + 更重的磨砂」，
   不留分割线与角标；视频仍铺满，但退成一层质感。 */
@media (max-width: 900px) {
  .hero-hero > .hero-compare .hc-before { display: none; }
  .hero-hero > .hero-compare .hc-scan { display: none; }
  .hero-hero > .hv-tag { display: none; }
  .hero-hero > .hero-frost {
    background: linear-gradient(180deg,
      rgba(7, 8, 11, .92) 0%,
      rgba(7, 8, 11, .9) 50%,
      rgba(7, 8, 11, .76) 72%,
      rgba(7, 8, 11, .46) 100%);
    -webkit-backdrop-filter: blur(34px) saturate(1.04);
    backdrop-filter: blur(34px) saturate(1.04);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* 视频铺满后，`.container` 这块透明盒子仍然盖在画面上，宽度占满、
   高度等于文案高度，会把中间那片区域的指针事件全吃掉，拖动就只能在
   盒子外面拖。这里让容器本身透传，只有文案与按钮重新接管。 */
.hero-hero > .container { pointer-events: none; }
.hero-hero > .container .hero-copy,
.hero-hero > .container a,
.hero-hero > .container button { pointer-events: auto; }

/* 拖动时必须把动画停掉：我新加的 .hero-hero > .hero-compare .hc-before 与
   原来的 .hero-compare.is-drag .hc-before 特异性相同（都是 3 个类），
   后者写在前面就被覆盖，动画继续跑，手动的 clip-path 被动画值盖住，
   表现是「拖了但画面不动」。这里显式停掉动画。 */
.hero-hero > .hero-compare.is-drag .hc-before {
  animation: none;
  -webkit-clip-path: inset(0 calc(100% - var(--hc-p)) 0 0);
  clip-path: inset(0 calc(100% - var(--hc-p)) 0 0);
}
.hero-hero > .hero-compare.is-drag .hc-scan {
  animation: none;
  left: var(--hc-p);
}

/* 磨砂再降一档：视频本身就是夜戏，压到 .86 之后左边几乎看不出是视频，
   「满幅」只在右半边成立。降到 .74 起步，把画面透出来，靠模糊维持文字
   的可读性（模糊去掉高频，文字压在平滑底色上比压在细节上更清楚）。 */
.hero-hero > .hero-frost {
  background: linear-gradient(90deg,
    rgba(7, 8, 11, .74) 0%,
    rgba(7, 8, 11, .66) 26%,
    rgba(7, 8, 11, .46) 40%,
    rgba(7, 8, 11, .2) 50%,
    rgba(7, 8, 11, 0) 62%);
}

/* 底部压边加强：demo_001 自带烧录对白字幕（「我身上是什么味道」这类），
   压在首屏下沿正好和统计条打架，也正好是用户要避免的「视频干扰文字」。
   把压边提前到 38% 开始、88% 收尽，字幕带基本被吃掉，同时和统计条接得顺。 */
.hero-hero > .hero-compare::after {
  background: linear-gradient(180deg,
    rgba(5, 6, 7, .58) 0%,
    rgba(5, 6, 7, 0) 16%,
    rgba(5, 6, 7, 0) 38%,
    rgba(11, 12, 16, .72) 72%,
    var(--bg-body) 88%);
}

/* 手机端：原来靠 0.9 的黑色蒙版压，画面变成一块灰泥。改成「模糊 + 降亮度」
   写进 backdrop-filter，蒙版本身降到 0.5 左右，视频的轮廓与光斑能透出来，
   文字仍然压得住。 */
@media (max-width: 900px) {
  .hero-hero > .hero-frost {
    background: linear-gradient(180deg,
      rgba(7, 8, 11, .58) 0%,
      rgba(7, 8, 11, .52) 46%,
      rgba(7, 8, 11, .62) 74%,
      rgba(7, 8, 11, .34) 100%);
    -webkit-backdrop-filter: blur(38px) saturate(.94) brightness(.62);
    backdrop-filter: blur(38px) saturate(.94) brightness(.62);
  }
}

/* 磨砂减淡（2026-10-25 用户反馈「模糊度太深」）
   blur 30 → 14px、暗压各点降 0.05 左右：画面细节透出来，文字仍有底。
   手机端 blur 38 → 20px、brightness .62 → .74。 */
.hero-hero > .hero-frost {
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  background: linear-gradient(90deg,
    rgba(7, 8, 11, .7) 0%,
    rgba(7, 8, 11, .62) 26%,
    rgba(7, 8, 11, .42) 40%,
    rgba(7, 8, 11, .18) 50%,
    rgba(7, 8, 11, 0) 62%);
}
@media (max-width: 900px) {
  .hero-hero > .hero-frost {
    -webkit-backdrop-filter: blur(20px) saturate(.96) brightness(.74);
    backdrop-filter: blur(20px) saturate(.96) brightness(.74);
  }
}

/* demo_007 是一段「胶片框」素材：画面上下各有一条白色齿孔边，铺满后
   齿孔会贴首屏顶端露出来，像渲染错误。顶部压边加深并延长，把它盖掉。 */
.hero-hero > .hero-compare::after {
  background: linear-gradient(180deg,
    rgba(5, 6, 7, .92) 0%,
    rgba(5, 6, 7, .72) 7%,
    rgba(5, 6, 7, .34) 13%,
    rgba(5, 6, 7, 0) 20%,
    rgba(5, 6, 7, 0) 38%,
    rgba(11, 12, 16, .72) 72%,
    var(--bg-body) 88%);
}

/* 当前素材没有齿孔边、也没有烧录字幕，裁切全部给底部：
   cover 一共裁 150px，全部从下方去掉（地面与尘土），人物头部完整保留。
   底部那 18% 本来就被 shade 的压边渐变压住，裁掉不损失信息。
   若换成带顶部齿孔或顶部压边文字的素材，这里要改回 50% 100%。 */
.hero-hero > .hero-compare video { object-position: 50% 0; }

/* 上下压边改由独立元素承载（2026-10-25）
   原来挂在 .hero-compare::after 上，实测没盖住视频：底部 90% 处烧录字幕
   仍然清晰，说明伪元素被视频压在下层。改成 section 里的真实元素，
   z-index 与 .hero-compare 的层叠上下文分开，一定会盖在画面之上。
   层级：视频 0 → shade 1 → frost 1（后置）→ 角标 2 → 文案 3 */
.hero-hero > .hero-compare::after { background: none; content: none; }
.hero-hero > .hero-shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 6, 7, .9) 0%,
    rgba(5, 6, 7, .66) 7%,
    rgba(5, 6, 7, .3) 13%,
    rgba(5, 6, 7, 0) 20%,
    rgba(5, 6, 7, 0) 40%,
    rgba(11, 12, 16, .6) 68%,
    rgba(11, 12, 16, .96) 84%,
    var(--bg-body) 92%);
}

/* 压边改到独立层之后，手机端等于「压边 + 磨砂自带黑」叠了两层，画面被压死。
   磨砂这层只留薄薄一层中性暗，亮度提回 .82，暗角交给 shade。 */
@media (max-width: 900px) {
  .hero-hero > .hero-frost {
    background: linear-gradient(180deg,
      rgba(7, 8, 11, .3) 0%,
      rgba(7, 8, 11, .26) 50%,
      rgba(7, 8, 11, .34) 78%,
      rgba(7, 8, 11, .18) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(.98) brightness(.82);
    backdrop-filter: blur(20px) saturate(.98) brightness(.82);
  }
}

/* 桌面左侧略微补回一点暗度：模糊减到 14px 后底子变亮，副标那行细字最吃亏。 */
.hero-hero > .hero-frost {
  background: linear-gradient(90deg,
    rgba(7, 8, 11, .76) 0%,
    rgba(7, 8, 11, .68) 26%,
    rgba(7, 8, 11, .46) 40%,
    rgba(7, 8, 11, .2) 50%,
    rgba(7, 8, 11, 0) 62%);
}

/* 磨砂再减一档（用户第二次反馈「模糊度太深」）
   desktop blur 14 → 9px，手机 blur 20 → 12px。
   暗压保持不变：模糊越浅，细节越多，文字靠这层暗压维持对比。 */
.hero-hero > .hero-frost {
  -webkit-backdrop-filter: blur(9px) saturate(1.04);
  backdrop-filter: blur(9px) saturate(1.04);
}
@media (max-width: 900px) {
  .hero-hero > .hero-frost {
    -webkit-backdrop-filter: blur(12px) saturate(.98) brightness(.84);
    backdrop-filter: blur(12px) saturate(.98) brightness(.84);
  }
}

/* ==========================================================================
   四指标条：上下横线改成通栏（2026-10-25 试版）
   原来横线只到 1344 内容边，而它正上方是满幅视频，视频铺到 1440、
   线停在 1344，眼睛会读成「线没画到头」。
   做法不是给 container 里的元素加负 margin（会因 100vw 含滚动条而溢出），
   而是在外面套一层块级 .hero-stats-band：块级元素宽度天然等于视口宽度，
   里面再用 .container 维持 1344 的对齐，边线通栏、文字仍对齐。
   ========================================================================== */
.hero-stats-band {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 80px;
}
.hero-stats-band .hero-stats {
  border-top: 0;
  border-bottom: 0;
  margin-bottom: 0;
}

/* ≤640 的媒体框原来是 4:3，把 16:9 的素材左右各裁掉 12.5%，
   静帧一旦被裁，「同一帧对比」这件事就不成立了。改成与素材同比例，
   宁可矮一点，也不裁画面。 */
@media (max-width: 640px) {
  .hcmp-media { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   三页首屏：≤1180 也走「图片铺满 + 文案压上」（2026-10-25，「像首页一样」）
   原来 ≤1180 会退回「文案在上、画框在下」的盒子版：图文分家、盒子带描边和
   7px 光晕，缩窗口时首屏结构整个换一套，和首页不是同一种语言。
   现在废掉堆叠版：媒体永远铺满，文案居中压在柔化蒙版上，与首页同一套。
   ========================================================================== */
.hcmp-scrim { display: none; }

@media (max-width: 1180px) {
  .hero-cmp {
    height: auto;
    min-height: 540px;
    flex-direction: column;
    display: flex;
    align-items: center;
    padding: 76px 0 78px;
  }
  .hero-cmp::after { display: block; }

  /* 媒体回到铺满，去掉盒子的一切装饰 */
  .hcmp-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    width: auto;
    margin: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  /* 背景版里对比线与角标不再成立：画面被柔化，左右差异看不出来 */
  
  /* 柔化蒙版：中间文字带最重，上下把画面留出来 */
  .hcmp-scrim {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(7, 8, 11, .34) 0%,
      rgba(7, 8, 11, .24) 32%,
      rgba(7, 8, 11, .46) 72%,
      rgba(7, 8, 11, .16) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(.96) brightness(.76);
    backdrop-filter: blur(16px) saturate(.96) brightness(.76);
    -webkit-mask-image: radial-gradient(92% 64% at 50% 46%, #000 0 40%, rgba(0, 0, 0, .55) 72%, transparent 100%);
    mask-image: radial-gradient(92% 64% at 50% 46%, #000 0 40%, rgba(0, 0, 0, .55) 72%, transparent 100%);
  }

  /* 文案：居中、彻底去卡片感 */
  .hero-cmp .hcmp-copy {
    max-width: 680px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .hero-cmp { min-height: 0; padding: 56px 0 58px; }
}

/* 指标条的长词在窄列里会被拆行（「3D 动画与数字人」在 1024 拆成三行）。
   两段收字号：901–1180 四列时 20px；≤640 两列时 17px，同时收一点内距。 */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-stats .num { font-size: 20px; }
}
@media (max-width: 640px) {
  .hero-stats .stat { padding: 14px 16px; }
  .hero-stats .num { font-size: 17px; letter-spacing: 0; }
}

/* 手机端两列时单元格只有 147 宽，17px 下「3D 动画与数字人」必然折行。
   折行本身不丢人，丢人的是断成一个孤字——用 text-wrap: balance 让两行等长
   （「3D 动画」/「与数字人」），比硬压字号更像设计。 */
@media (max-width: 640px) {
  .hero-stats .num { font-size: 17px; text-wrap: balance; }
}

/* 同一招用在 label 上：1024 时四列各约 220 宽，13px 只放得下十五六个字，
   「…全部自有素材」「…约为直出的四分之一」会甩出单字孤行。balance 让两行等长。
   五页首屏共用 .hero-stats，改这里全站生效（2026-10-27）。 */
.hero-stats .label { text-wrap: balance; }

/* ==========================================================================
   瑕疵板块三卡要点：去掉逐条横线（2026-10-25 用户反馈「不要那么密集的横线」）
   原来每条 li 一条 border-bottom、整组再一条 border-top，三卡共 12 条横线，
   把一小段要点画成了表格。改成一行三点的元信息写法：
   用「·」分隔，字号收到 12.5，颜色退到三级灰——与首屏 cap、kicker 同一套语言，
   横线全部去掉，卡与卡之间只靠图片和留白分栏。
   ========================================================================== */
.rv-points {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin-top: 14px;
  padding: 0;
  border-top: 0;
}
.rv-points li {
  position: relative;
  padding: 0;
  border-bottom: 0;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: .2px;
  color: var(--tx-3);
}
.rv-points li::before { content: none; }
.rv-points li + li::before {
  content: '·';
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 9px 0 8px;
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, .26);
}

/* ==========================================================================
   三页首屏文案的左边线跟正文对齐（2026-10-26）
   `.hero-cmp .container` 一直是 max-width:1440（当年为了框住满幅视频），
   而全站正文容器已统一到 1600。1440 视口下两者都是 48，看不出问题；
   一到 1920 就露馅：首屏文字左起 288，正文与其它页 208，整体右偏 80px。
   这里把首屏容器交回全站标准，左起和正文、和紧凑页完全一致。
   ========================================================================== */
.hero-cmp .container { max-width: 1600px; }

/* 数据条首格与文案左线对齐（2026-10-26）
   单元格是 20px 24px 的内距，首格文字因此比上面的 H1 右缩 24px。
   首格去掉左内距，四格文字的左线与文案、与正文容器完全一条线；
   分隔线画在后续单元格的 border-left 上，不受影响。 */
.hero-stats .stat:first-child { padding-left: 0; }
@media (max-width: 900px) {
  .hero-stats .stat:nth-child(odd) { padding-left: 0; }
}

/* 剧集墙卡片的「出品方 + 热度」并成一行（2026-10-26）
   换成真实剧名后，名字普遍 12–16 字（两行），再加出品方、热度两行，
   信息块会吃掉海报近一半。合并成一行后只占两行高度，海报露出更多。 */

/* ---------- 剧集墙：无热度数值时的次级信息行（与 .dw-hot 同行高，避免卡片信息错位） ---------- */

/* ---------- 剧集墙 · 窄断点剧名字号收口（2026-10-26）
   适用场景页在 ≤1024 时被后面的规则抬到 13.5px，长剧名会被挤成两行；
   这里统一回 12.5 / 11，与首页同一套字号阶梯。必须写在文件末尾才生效。 ---------- */
@media (max-width: 1024px) {
  .drama-wall .dw-name { font-size: 12.5px; }
}
@media (max-width: 640px) {
  .drama-wall .dw-name { font-size: 11.5px; }
}

/* ---------- 样片卡：横屏卡的文字块左对齐（2026-10-26）
   .case-card.is-wide 原来带着 align-items: center（为两列布局准备的），
   改成纵向单列后这条仍然生效，导致文字块被收缩并居中，看着不像左对齐。
   这里把它掰回 stretch，文字块与图片左右边缘对齐。 ---------- */
.case-card.is-wide { align-items: stretch; }
.case-card.is-wide .case-body { text-align: left; align-items: flex-start; }

/* ==========================================================================
   生成方式对比页 /compare/（2026-10-26）
   三条路径的成本表 + 九组同源样片 + 三路对比弹窗（.cc-* 独立命名，避免与 .cm-* 冲突）
   ========================================================================== */
.cmp-account { padding: 80px 0; }
/* 表注与表格/容器同宽、顶格左对齐：脚注与表格共用同一条左线才读得出「表的一部分」。
   排版并入 .foot-note（见文件末尾），这里不再单独写。 */

/* 三路对比弹窗 */
.cc-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-modal[hidden] { display: none; }
.cc-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(5, 7, 11, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cc-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1600px, 94vw);
  max-height: 92vh;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  background: #0b0d13;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.cc-dialog.is-portrait { width: auto; max-width: 94vw; }
.cc-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(8, 10, 15, .62);
  color: #fff;
  cursor: pointer;
}
.cc-close svg { width: 15px; height: 15px; }
.cc-close:hover { background: rgba(255, 255, 255, .16); }

.cc-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  max-height: calc(92vh - 58px);
  background: #000;
  --cmp: 50%;
  touch-action: pan-y;
  cursor: ew-resize;
}
.cc-stage.is-portrait {
  width: auto;
  aspect-ratio: var(--ar, 9 / 16);
  height: min(calc(92vh - 58px), calc(94vw * 16 / 9));
  max-height: none;
  align-self: center;
  margin: 0 auto;
}
.cc-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.cc-b { -webkit-clip-path: inset(0 0 0 var(--cmp));
 clip-path: inset(0 0 0 var(--cmp)); }
/* 与 .cm-line 同一规格（广告页分割线），两处弹窗看起来是同一种控件 */
.cc-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cmp);
  width: 1.5px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 0 12px rgba(56, 189, 248, .6);
  pointer-events: none;
}
.cc-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background-color: rgba(7, 8, 13, .9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 17px 17px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}
.cc-cap {
  position: absolute;
  bottom: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(6, 8, 12, .6);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .86);
}
.cc-cap-a { left: 14px; border-color: rgba(95, 214, 200, .45); color: var(--c-cyan-soft); }
.cc-cap-b { right: 14px; }
.cc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.cc-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  color: var(--tx-2);
}
.cc-switch {
  flex: none;
  display: flex;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  overflow: hidden;
}
.cc-switch button {
  border: 0;
  background: transparent;
  color: var(--tx-3);
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
}
.cc-switch button.is-on { background: rgba(95, 214, 200, .14); color: var(--c-cyan-soft); }
.cc-btn {
  flex: none;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: var(--tx-1);
  font-size: 12.5px;
  cursor: pointer;
}
.cc-btn:hover { border-color: rgba(95, 214, 200, .5); color: var(--c-cyan-soft); }

@media (max-width: 900px) {
  .cmp-account { padding: 56px 0; }
}
@media (max-width: 720px) {
  .cc-dialog { width: 96vw; border-radius: var(--r-lg); }
  .cc-dialog.is-portrait { width: auto; }
  .cc-switch button { padding: 6px 9px; font-size: 11.5px; }
  .cc-close { top: 8px; right: 8px; }
}
/* 样片分组与卡片（/compare/）：横竖分开排版，各用各的网格 */
.cmp-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 46px 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-1);
}
.cmp-sub span {
  padding: 3px 9px;
  border: 1px solid rgba(95, 214, 200, .35);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--c-cyan);
}
.cmp-wall { display: grid; gap: 20px; }
.cmp-wall--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-wall--tall { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cmp-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .014);
  transition: border-color .18s ease, transform .18s ease;
}
.cmp-card:hover { border-color: rgba(95, 214, 200, .28); transform: translateY(-2px); }
.cmp-card__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.cmp-card__media img { display: block; width: 100%; height: auto; }
.cmp-card__body { padding: 16px 18px 18px; }
.cmp-card__body h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; color: var(--tx-1); }
.cmp-card__body p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--tx-3); }
.cmp-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--tx-dim);
}
.calc-table .cmp-muted { color: var(--tx-3); }
.calc-table .cmp-muted em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: var(--tx-dim); }

@media (max-width: 1180px) {
  .cmp-wall--tall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cmp-wall--wide { grid-template-columns: minmax(0, 1fr); }
  .cmp-wall--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cmp-sub { margin: 36px 0 16px; }
}
@media (max-width: 640px) {
  .cmp-wall--tall { gap: 12px; }
  .cmp-card__body { padding: 13px 14px 15px; }
  .cmp-card__body h3 { font-size: 14px; }
}
/* 成本表窄屏：不折行，改为横向滚动（2026-10-26） */
@media (max-width: 720px) {
  .cmp-account .calc-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-account .calc-table table { min-width: 640px; }
  .cmp-account .calc-table th,
  .cmp-account .calc-table td { white-space: nowrap; }
  .cmp-account .calc-table td:first-child { white-space: normal; min-width: 150px; }
  .cmp-account .cmp-muted em { white-space: nowrap; }
}
/* 竖屏弹窗：控制条里的片名会把弹窗撑得比画面更宽，导致左右黑边，这里让它让位（2026-10-26） */
.cc-dialog.is-portrait .cc-title { display: none; }
.cc-dialog.is-portrait .cc-bar { justify-content: center; }
/* 成本表里的「推荐」小标 */
.calc-table .cmp-pick {
  display: inline-block;
  margin-left: 8px;          /* 胶囊跟在本行文字之后 */
  padding: 1px 7px;
  border: 1px solid rgba(95, 214, 200, .45);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--c-cyan);
  vertical-align: 1px;
  white-space: nowrap;
}
/* 导航增至 10 项后：901–1120 区间必须再收一档，否则 1024/1100 会把登录按钮顶出视口。
   这里用 .site-header 提升特异性，避免被前面按 7 项时写的 gap 规则盖掉（2026-10-26 实测）。 */
@media (min-width: 901px) and (max-width: 1120px) {
  .site-header .nav { gap: 14px; }
  .site-header .nav a { font-size: 13.5px; letter-spacing: 0; }
}
/* /vs/ 竞品对比：竖屏弹窗底部有两组切换按钮，允许换行，避免把弹窗撑宽 */
.cc-dialog.is-portrait .cc-bar { flex-wrap: wrap; row-gap: 8px; }
/* 底部两组切换（左路 / 右路）之间多留一档间距。注意 .cc-switch 有 overflow:hidden，
   伪元素画的分隔线会被裁掉，所以靠间距区分，不加线。 */
.cc-bar .cc-switch + .cc-switch { margin-left: 6px; }
/* ==========================================================================
   /vs/ 竞品对比：每组 = 部位标注 + 五版对比条（2026-10-27）
   ========================================================================== */
.vs-compare { padding: 80px 0; }
.vs-block {
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, .014);
}
.vs-obj { margin: 0; }
.vs-obj img { display: block; width: 84px; height: auto; border-radius: 8px; }
.vs-obj figcaption { margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--tx-dim); text-align: center; }
.vs-pk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(95, 214, 200, .4);
  background: rgba(95, 214, 200, .08);
  color: var(--c-cyan-soft);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease;
}
.vs-pk svg { width: 12px; height: 12px; }
.vs-pk:hover { background: rgba(95, 214, 200, .18); }
.vs-strip { border-top: 1px solid rgba(255, 255, 255, .06); }
.vs-strip img { display: block; width: 100%; height: auto; }
.vs-strip__cap .is-our { color: var(--c-cyan-soft); background: rgba(95, 214, 200, .08); font-weight: 600; }
/* .vs-note 的排版并入 .foot-note（见文件末尾）。 */

@media (max-width: 900px) {
  .vs-compare { padding: 56px 0; }
    .vs-obj img { width: 68px; }
  .vs-pk { grid-column: 1 / -1; justify-self: start; }
  }
@media (max-width: 640px) {
    .vs-obj img { width: 56px; }
      .vs-block { margin-top: 20px; border-radius: var(--r-lg); }
}
/* ---------- /vs/ 对比块重排（2026-10-27）：部位图放大、PK 收进文字块、标签压图 ---------- */
.vs-head {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 24px 26px 22px;
}
.vs-obj img { width: 168px; border-radius: 8px; }
.vs-obj figcaption { margin-top: 7px; font-size: 11.5px; }
.vs-head__txt { min-width: 0; }
.vs-head__txt h3 { margin: 0 0 10px; font-size: 21px; font-weight: 600; line-height: 1.35; color: var(--tx-1); }
.vs-desc { margin: 0; max-width: 720px; font-size: 13.5px; line-height: 1.9; color: var(--tx-3); }
.vs-pk { margin-top: 16px; }

/* 五栏标签压在图上，不再单独占一行表格 */
.vs-strip { position: relative; }
.vs-strip__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.vs-strip__overlay span {
  padding: 26px 4px 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .74);
  background: linear-gradient(180deg, rgba(5, 7, 11, 0) 0%, rgba(5, 7, 11, .82) 62%);
}
.vs-strip__overlay .is-our { color: var(--c-cyan-soft); font-weight: 600; }

/* 超分宝那一栏（第 4 栏）直接框出来 */
.vs-strip__pick {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60%;
  width: 20%;
  border: 1px solid rgba(95, 214, 200, .6);
  background: rgba(95, 214, 200, .05);
  box-shadow: 0 0 0 1px rgba(5, 7, 11, .5);
  pointer-events: none;
}

@media (max-width: 900px) {
  .vs-head { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 18px; }
  .vs-obj img { width: 120px; }
  .vs-head__txt h3 { font-size: 18px; }
  .vs-strip__overlay span { padding: 20px 2px 9px; font-size: 11.5px; letter-spacing: .02em; }
}
@media (max-width: 640px) {
  .vs-head { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .vs-obj img { width: 92px; }
  .vs-head__txt h3 { font-size: 16.5px; }
  .vs-desc { font-size: 12.5px; }
  .vs-strip__overlay span { padding: 16px 1px 8px; font-size: 11.5px; }
}
/* ---------- /vs/ 对比块 第二轮：head 收紧凑，右侧不留白 ---------- */
.vs-head {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
}
.vs-obj { margin: 0; }
.vs-obj img {
  display: block;
  width: 92px;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
}
.vs-head__txt { min-width: 0; }
.vs-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tx-1);
}
.vs-kind {
  padding: 2px 9px;
  border: 1px solid rgba(95, 214, 200, .32);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--c-cyan);
  white-space: nowrap;
}
.vs-desc { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--tx-3); }
.vs-pk { align-self: center; }

/* 对比条做成卡内证据：圆角 + 细边 */
.vs-strip {
  position: relative;
  margin: 0 12px 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
  background: #05070b;
}

@media (max-width: 900px) {
  .vs-head { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .vs-obj img { width: 76px; }
  .vs-pk { grid-column: 1 / -1; justify-self: start; }
  .vs-title { font-size: 17px; }
  .vs-strip { margin: 0 10px 10px; }
}
@media (max-width: 640px) {
  .vs-head { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .vs-obj img { width: 64px; }
  .vs-title { font-size: 15.5px; gap: 8px; }
  .vs-desc { font-size: 12.5px; }
  .vs-strip { margin: 0 8px 8px; }
}
/* 对比条与标题行之间留一点呼吸；标签的压暗带减薄，少盖画面 */
.vs-strip { margin-top: 6px; }
.vs-strip__overlay span { padding-top: 20px; padding-bottom: 10px; }
/* 对比块 head 定稿：左「标题+说明+按钮」纵向读，右「部位标注图」竖着贴在右端 */
.vs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: start;
  gap: 8px 24px;
  padding: 20px 22px 16px;
}
.vs-head__txt { grid-column: 1; grid-row: 1; }
.vs-pk { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 14px; }
.vs-obj { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin: 0; }
.vs-obj img { width: 96px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); }
.vs-title { margin: 0 0 10px; font-size: 20px; }
.vs-desc { max-width: 860px; }

@media (max-width: 900px) {
  .vs-head { grid-template-columns: minmax(0, 1fr) 76px; gap: 8px 16px; padding: 16px; }
  .vs-obj img { width: 76px; }
  .vs-title { font-size: 17px; }
}
@media (max-width: 640px) {
  .vs-head { grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 12px; padding: 14px; }
  .vs-obj img { width: 64px; }
  .vs-title { font-size: 15.5px; }
}
/* ---------- /vs/ 第三轮：文字一行，部位图与对比图并排（部位图放大到 220） ---------- */
.vs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 22px 14px;
}
.vs-head__txt { grid-column: auto; grid-row: auto; }
.vs-pk { grid-column: auto; grid-row: auto; margin-top: 0; }

.vs-visual {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 0 22px 18px;
}
.vs-obj { grid-column: auto; grid-row: auto; justify-self: stretch; margin: 0; }
.vs-obj img { width: 100%; height: auto; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); }
.vs-obj figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--tx-dim); }
.vs-strip { margin: 0; }

@media (max-width: 1100px) {
  .vs-visual { grid-template-columns: 180px minmax(0, 1fr); gap: 14px; padding: 0 18px 16px; }
  .vs-head { padding: 18px 18px 12px; }
}
@media (max-width: 900px) {
  .vs-head { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 16px 10px; }
  .vs-pk { justify-self: start; }
  .vs-visual { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 0 16px 14px; }
}
@media (max-width: 640px) {
  .vs-visual { grid-template-columns: minmax(0, 1fr); }
  .vs-obj { max-width: 150px; }
}
/* 窄屏：部位图略放大，别在右侧留空 */
@media (max-width: 640px) {
  .vs-obj { max-width: 180px; }
}
/* 部位图再放大、对比条相应收窄（2026-10-27） */
.vs-visual { grid-template-columns: 320px minmax(0, 1fr); }
.vs-strip__overlay span { font-size: 11.5px; }
@media (max-width: 1100px) {
  .vs-visual { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .vs-visual { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vs-obj { max-width: 220px; }
  .vs-strip__overlay span { font-size: 11.5px; letter-spacing: 0; }
}
/* 部位图与对比条的最终配比：260px 图 + 其余给条，两者高度刚好齐平（2026-10-27 实测） */
.vs-visual { grid-template-columns: 260px minmax(0, 1fr); }
/* 部位图与对比条等高、标注文字都浮在画面底部（2026-10-27 用户指定） */
.vs-visual { align-items: stretch; }
.vs-obj {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #05070b;
}
.vs-obj img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-obj figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 8px 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .78);
  background: linear-gradient(180deg, rgba(5, 7, 11, 0) 0%, rgba(5, 7, 11, .82) 62%);
}

/* 两处标注统一字号，字母间距收一点，窄栏也放得下 */
.vs-strip__overlay span { font-size: 11.5px; letter-spacing: .02em; padding-top: 22px; padding-bottom: 10px; }

@media (max-width: 900px) {
  .vs-strip__overlay span { font-size: 11.5px; }
  .vs-obj figcaption { font-size: 11.5px; padding: 18px 6px 8px; }
}
@media (max-width: 640px) {
  .vs-strip__overlay span { font-size: 11.5px; }
}
/* ==========================================================================
   /vs/ 五路并排弹窗 .vz-*（2026-10-27）：不做分割线，五路同帧 + 逐帧控制
   ========================================================================== */
.vz-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.vz-modal[hidden] { display: none; }
.vz-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(5, 7, 11, .94); -webkit-backdrop-filter: blur(8px);
 backdrop-filter: blur(8px); }
.vz-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1560px, 96vw);
  max-height: 94vh;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  background: #0b0d13;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.vz-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(8, 10, 15, .62);
  color: #fff; cursor: pointer;
}
.vz-close svg { width: 15px; height: 15px; }
.vz-close:hover { background: rgba(255, 255, 255, .16); }

.vz-head { padding: 16px 62px 12px 18px; }
.vz-title { margin: 0; font-size: 14px; color: var(--tx-1); }
.vz-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--tx-dim); }
.vz-hint kbd {
  display: inline-block;
  margin: 0 2px;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--tx-3);
}

.vz-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 0 12px;
  background: #05070b;
}
.vz-cell { position: relative; margin: 0; background: #000; overflow: hidden; }
.vz-cell video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vz-cell figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 4px 9px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .78);
  background: linear-gradient(180deg, rgba(5, 7, 11, 0) 0%, rgba(5, 7, 11, .84) 62%);
}
.vz-cell.is-our { box-shadow: inset 0 0 0 1px rgba(95, 214, 200, .7); }
.vz-cell.is-our figcaption { color: var(--c-cyan-soft); font-weight: 600; }

.vz-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #0a0c11;
}
.vz-step, .vz-play {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.vz-step svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vz-play svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.vz-play .vz-i-play { fill: currentColor; stroke: none; display: none; }
.vz-play.is-paused .vz-i-pause { display: none; }
.vz-play.is-paused .vz-i-play { display: block; }
.vz-step:hover, .vz-play:hover { border-color: rgba(95, 214, 200, .5); color: var(--c-cyan-soft); }
.vz-frame {
  flex: none;
  min-width: 86px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}
.vz-seek {
  flex: 1 1 auto;
  min-width: 80px;
  height: 4px;
  -webkit-appearance: none; appearance: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  cursor: pointer;
}
.vz-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border: none; border-radius: 50%;
  background: var(--c-cyan-soft); box-shadow: 0 0 0 3px rgba(95, 214, 200, .18);
}
.vz-seek::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--c-cyan-soft); }
.vz-time {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .vz-dialog { width: 98vw; }
  .vz-cell figcaption { font-size: 11.5px; }
}
@media (max-width: 820px) {
  .vz-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .vz-cell { scroll-snap-align: center; }
  .vz-hint { display: none; }
  .vz-frame { display: none; }
}
/* 五路里「超分宝」那格再强化一点：描边加粗 + 顶部角标 */
.vz-cell.is-our { box-shadow: inset 0 0 0 2px rgba(95, 214, 200, .75); }
.vz-cell.is-our::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(95, 214, 200, .04);
  pointer-events: none;
}
.vz-cell.is-our figcaption { color: var(--c-cyan-soft); font-weight: 600; }
/* ---------- /vs/ 弹窗改全屏（2026-10-27） ---------- */
.vz-dialog {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
}
.vz-grid {
  flex: 1 1 auto;
  min-height: 0;
  align-content: center;
}
.vz-cell {
  aspect-ratio: 1080 / 1878;   /* 素材为 1080×1874~1882 的竖版，取中位比例，避免画面内留黑边 */
}
.vz-cell video { width: 100%; height: 100%; object-fit: cover; }
.vz-head { padding: 18px 70px 14px 22px; }

@media (max-width: 820px) {
  .vz-cell { aspect-ratio: auto; height: 62vh; }
}
/* 全屏后：格子间距与标注略放大，标题行收薄，把纵向空间让给画面 */
.vz-grid { gap: 10px; padding: 0 16px; }
.vz-cell figcaption { font-size: 12.5px; }
.vz-head { padding: 14px 70px 10px 22px; }
.vz-bar { padding: 10px 18px; }
@media (max-width: 820px) {
  .vz-grid { gap: 8px; padding: 0 10px; }
}
/* 五页共用首屏：副标按住 3 行占位（3lh），按钮在各页同高，不写死 px */
@media (min-width: 641px) {
  .hcmp-copy .sub { min-height: 3lh; }
}
/* ==========================================================================
   产品能力页：技术背书一句 + 传统超分对照表（2026-10-27）
   ========================================================================== */
/* 我们那一列用底色区分，不靠整列变绿（整列强调等于没有强调） */
.diff-table th:nth-child(3),
.diff-table td:nth-child(3) { color: var(--tx-1); background: rgba(95, 214, 200, .05); }
.diff-table th:nth-child(3) { color: var(--c-cyan); }

/* ==========================================================================
   适用场景页：平台怎么判画质（两条路径 + 三档码率表）2026-10-27
   ========================================================================== */
.plat-section { padding: 80px 0; }
.bitrate-table td:first-child { font-weight: 600; color: var(--tx-1); white-space: nowrap; }
.bitrate-table td:nth-child(2) { white-space: nowrap; }
.bit-rec {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--c-cyan);
}

@media (max-width: 900px) {
  .plat-section { padding: 56px 0; }
}
@media (max-width: 720px) {
  .plat-section .calc-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .plat-section .calc-table table { min-width: 720px; }
  /* 只放开长文本两列；分辨率与码率列必须 nowrap，否则「≥ 1.5 Mbps」会被拆成两行 */
  .plat-section .calc-table td:nth-child(3),
  .plat-section .calc-table td:nth-child(4) { white-space: normal; }
}
/* ==========================================================================
   导航 11 项（新增「产品价值」后）：1181 以上按两档收紧，1180 以下走汉堡
   实测：11 项在 gap30 下宽 947；1280 可用 922、1181 可用 823，放不下必须收
   ========================================================================== */
@media (min-width: 1301px) {
  .site-header .nav { gap: 26px; }
  .site-header .nav a { font-size: 15.5px; letter-spacing: 0; }
}
@media (min-width: 1181px) and (max-width: 1300px) {
  .site-header .nav { gap: 16px; }
  .site-header .nav a { font-size: 15.5px; letter-spacing: 0; }
}
/* ==========================================================================
   /value/ 产品价值页：按飞书 02 章的五节结构（2026-10-27 重做）
   小节不再有编号与分类标签，标题直接进正题，与全站「标题居中」一套
   ========================================================================== */
/* 页外的 /value/#api 这类锚点跳转会把整节顶到视口最上方，
   节本身有 72px 上内距，再留 40px 才不会让标题压在固定头部下面 */
.val-sec { padding: 72px 0; scroll-margin-top: 40px; }
/* 板块标题统一（2026-10-31）：原来这页另起了一套 .val-h2 / .val-lead ——
   36px/字重 700/行高 1.35/副标 14.5px·上限 860，其余九页是
   .section-title 40px/字重 600/行高 1.22/副标 16px·上限 736。
   同一个「板块标题」在站内出现两种字号与字重，翻页时层级会跳。
   现已把 HTML 改成 .section-title / .section-desc，两套旧类随之删除。
   以后新增板块一律复用这两类，不要另起名字。 */
.val-sec .calc-table { margin-top: 34px; }
.val-price-table td:nth-child(2),
.val-price-table td:nth-child(3),
.val-price-table td:nth-child(4) { white-space: nowrap; }

.val-quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
/* 四类问题卡排成一行（2026-11-01 用户要求）。1200 以下退回两列，
   900 以下再退成一列（下面那条已有规则）。 */
@media (max-width: 1200px) {
  .val-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.val-q {
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .014);
}
.val-q h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--tx-1); }
.val-q p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--tx-3); }

/* 价值页三组卡（2026-11-01）：四类问题卡、底座三卡、API 三步卡统一成竞品页
   「对比通用云厂商，为什么选超分宝增强」的卡语言——实心卡底、细描边、标题前
   一道 3×15 主色竖条、正文 14 / 行高 1.8。三步卡保留右上角贴角序号
   （.val-tri.is-step .val-num 是 absolute 定位，不受这里影响）。 */
.val-quad .val-q,
.val-tri .val-t3 {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.val-quad .val-q h3,
.val-tri .val-t3n {
  padding-left: 13px;
  position: relative;
  font-size: 16px;
}
.val-quad .val-q h3::before,
.val-tri .val-t3n::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--c-primary);
}
.val-quad .val-q p,
.val-tri .val-t3d {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--tx-2);
}

.val-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.val-t3 {
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .014);
}
.val-t3n { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; color: var(--tx-1); }
.val-t3d { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--tx-3); }
/* 接入节的三步卡：徽章编号 + 左对齐排版（与底座的说明卡同一左线，2026-10-27） */
.val-tri.is-step .val-t3 { text-align: left; }
.val-tri.is-step .val-t3n { margin-bottom: 10px; font-size: 16px; }
.val-tri.is-step .val-t3d { line-height: 1.9; }
.val-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 0 16px;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: linear-gradient(165deg, #9aa4f7 0%, var(--c-primary) 54%, #6b79e2 100%);
  box-shadow: 0 10px 26px -10px rgba(125, 140, 240, .72), inset 0 1px 0 rgba(255, 255, 255, .28);
}

@media (max-width: 900px) {
  .val-sec { padding: 52px 0; }
  .val-quad, .val-tri { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 720px) {
  .val-sec .calc-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .val-sec .calc-table table { min-width: 640px; }
}
/* 价值页表格与脚注：本节内容左对齐，表头首列与脚注都跟着左对齐 */
.val-sec .calc-table th:first-child { text-align: left; }
/* ==========================================================================
   /vs/ 结论板块：通用增强 vs 影视专修（2026-10-27）
   ========================================================================== */
.vs-why { padding: 80px 0; }
/* 三条理由卡（2026-10-31 用户指定）：去掉 01/02/03 序号，
   改成与套餐页 .price-note 同一套卡片语言——标题前 3×15 主色竖条、
   实体卡底 + 实线边框、正文 14px --tx-2；
   并撑满版心（原 max-width:1280，左右各让掉 32px）。 */
.vs-reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: none;
  margin: 44px auto 0;
}
.vs-reason {
  padding: 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .18s ease;
}
.vs-reason h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-1);
  padding-left: 13px;
  position: relative;
}
.vs-reason h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--c-primary);
}
.vs-reason p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--tx-2); }
/* 收尾一句（2026-10-31）：原来居中 + max-width:1000px + margin auto。
   上面三条理由卡已经撑满版心（左缘在 48px），这段却缩成 1000 宽居中，
   左缘落在 220px 处，和卡片的左边对不上，读起来像是没对齐。
   改成左对齐、取消限宽，左缘与卡片同一条竖线。 */

@media (max-width: 900px) {
  .vs-why { padding: 56px 0; }
  .vs-reasons { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 32px; }
  }
/* ==========================================================================
   能力页合并（2026-10-27）：四张能力卡改为「视频在上、文案在下」
   —— 原来卡内是 40% 左图右文的竖条，而四段素材都是「同一帧左右各一半」的对比视频，
      放进竖条里必被 cover 裁掉一侧，原片与增强的分界就没了。所以改成上下结构，
      视频用 contain 完整显示，黑边交给深色底吃掉。
   ========================================================================== */
.page-features .cap-card {
  /* 左图右文：54% 给画面（媒体框比例与素材一致，视频因此满框）、其余给文案。
     媒体高度跟卡片走，视频 contain 始终按原比例——卡被文字撑高时画面居中，不变形。 */
  /* 媒体列 60%（上限 420px，防单列时算到 557）。媒体高度由自身比例决定、不被卡片拉伸，
     所以画面上下左右都能顶牢；文案若比画面矮，空的是文案列底部，不会在画面下留缝。 */
  /* 2026-10-27：标题改为一行不断行，文案列必须留够 14 个全角字（18px ≈ 252px）。
     所以媒体列不再按百分比抢宽，改成「卡宽减去文案最小宽 300px」，多出来的全归画面；
     卡太窄时 minmax 的 240px 兜底，标题才会回落到两行（自然换行 + balance 均分）。 */
  grid-template-columns: minmax(240px, calc(100% - 300px)) minmax(0, 1fr);
  grid-template-rows: auto;
  min-height: 0;
  align-items: start;
}
.page-features .cap-media {
  /* 四段素材已统一为 1.15（第一段裁掉上下各 10px），框按 1242/1080 走，
     cover 铺满：零缝隙，且画面上本就贴边的放大圈不会被裁 */
  aspect-ratio: 1242 / 1080;
  align-self: start;
  background: #15171c;
  border-right: 1px solid var(--line-soft);
  border-bottom: 0;
}
.page-features .cap-media .cap-v {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 框与素材同比例，铺满且不裁 */
}
/* 索引条上方不再放引导小字（2026-10-27 删除这类提示语），间距还给 24px */
.page-features .cap-index { margin-top: 24px; }

/* 单列时媒体回到上方，并按素材原生画幅满宽显示 */
@media (max-width: 720px) {
  .page-features .cap-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .page-features .cap-media {
    aspect-ratio: 1220 / 1080;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
}

/* 样片区：四张横屏排一行（原来 is-wide 各跨 2 列，排成两行两列） */
.page-features .case-card.is-wide { grid-column: span 1; }
/* 能力卡标题：类目名单独一行（小、等宽、青色），主张一行放下，避免在窄栏里折成
   「…脸才 / 立得住」这种断在词组中间的样子（2026-10-27） */
.page-features .cap-body h3 { font-size: 18px; line-height: 1.45; text-wrap: balance; }
.page-features .cap-cat {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-cyan);
}
/* 样片改成一行 4 个后卡宽只有 ~295：原来的「·」分隔符每个还带 8px 外边距（共 32px），
   三项加起来放不下、第三项必然掉行。这里去掉分隔符，只留间距（2026-10-27） */
.page-features .case-facts { gap: 4px 14px; }
.page-features .case-facts span + span::before { content: none; margin: 0; }
/* 媒体按比例定高后，若文案比它高 2–4px，画面下方会露一条卡片底色。
   把卡片下内边距收 6px，让高度由媒体决定，四边严丝合缝（2026-10-27）。 */
.page-features .cap-body { padding: 28px 26px 18px; }
/* 副标行数四卡不再完全相同（卡 3 三行、其余四行），文案列若只按内容高，
   「涵盖 / 落款」两行就会停在半空、同排两张卡对不齐。让文案列撑满卡高，
   keys 的 margin-top:auto 才真正生效，底部始终贴齐媒体底边（2026-10-27）。 */
.page-features .cap-body { align-self: stretch; }
/* 721–1080 单列时卡变宽（928），画面按比例定高 372，若文案只有两百来高，
   内容会全堆在上半部分、下方空一大块。这里让文案整体垂直居中。 */
@media (max-width: 1080px) and (min-width: 721px) {
  .page-features .cap-body { justify-content: center; }
  .page-features .cap-ft { margin-top: 18px; }
}
/* 四段对比视频各带「原片 480P / 增强 1080P」角标：左画面左下、右画面右下，
   用半透明底 + 模糊，压在画面上不挡内容（2026-10-27） */
.page-features .cap-lb {
  position: absolute;
  bottom: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .30);
  background: rgba(6, 8, 12, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
  pointer-events: none;
}
.page-features .cap-lb-ori { left: 10px; }
.page-features .cap-lb-new { right: 10px; border-color: rgba(95, 214, 200, .62); color: var(--c-cyan-soft); }
/* 单列满宽时画面大了一圈，角标字号跟上，否则显得过小 */
@media (max-width: 720px) {
  .page-features .cap-lb { font-size: 12.5px; padding: 5px 12px; bottom: 12px; }
  .page-features .cap-lb-ori { left: 12px; }
  .page-features .cap-lb-new { right: 12px; }
}

/* ===== /value/ 首屏底图换成「殿内对峙」后的专属压边（2026-10-27）
   这张图两人近景占满画面，左侧女子的脸正好落在文案区，
   通用 scrim（34% 处就淡到 .78）压不住，文字会压在她脸和眼睛上。
   这里把左侧压到 74% 才透明；能力页用的是右侧人物的图，保持通用 scrim。 */
.page-features .value-hero::after {
  background:
    linear-gradient(180deg, rgba(5, 6, 7, .74) 0%, rgba(5, 6, 7, 0) 26%, rgba(5, 6, 7, 0) 70%, rgba(5, 6, 7, .88) 100%),
    linear-gradient(90deg, rgba(5, 6, 7, .92) 0%, rgba(5, 6, 7, .82) 42%, rgba(5, 6, 7, .46) 60%, rgba(5, 6, 7, .1) 74%, rgba(5, 6, 7, 0) 84%);
}
/* 码率表四列长短不一，居中会让每行起点参差；统一左对齐，读起来是一条竖线（2026-10-27） */
.bitrate-table th,
.bitrate-table td { text-align: left; }
/* 表格独占整行后，脚注按 920 宽会掉出「风险。」这种孤字，放宽到一行装下 */
/* ===== /scenarios/ 其余题材：9 张卡改一行 4 个（2026-10-27）
   1440 下卡宽约 322，标题与正文都能正常折行；1280 以下回 3 列，避免继续变窄。 */
.sc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ===== /value/ 两张表统一左对齐（2026-10-27）
   .calc-table 默认居中，价格表与五项对照表都是长短不一的描述性单元格，
   居中后每行起点参差；左对齐后各列形成一条竖线，与场景页码率表同一口径。 */
.val-price-table th,
.val-price-table td,
.diff-table th,
.diff-table td { text-align: left; }
/* 对照表第一列是「对比项」短标签，窄屏会被拆成「AIGC 画 / 面」，锁住不折 */
.diff-table td:first-child,
.diff-table th:first-child { white-space: nowrap; }
/* ===== 样片对比弹窗：手机宽度下控制条换行（2026-10-27）
   左路按钮由「480P + 增强」换成「Seedance 2.5 直出 1080P」后变长，
   390 宽时片名被压成「侧…」只剩一个字。改为片名独占一行、按钮组落到下一行。 */
@media (max-width: 640px) {
  .cc-bar { flex-wrap: wrap; row-gap: 8px; }
  .cc-bar .cc-title { flex: 1 1 100%; }
}
/* ===== 视频弹窗统一全屏（2026-10-27）
   原来三个弹窗都是居中卡片：宽 94–96vw、高不超过 92–94vh、圆角 18px、四周露出被虚化的页面。
   现在铺满视口、去边框圆角；可用高度从「92vh」提到「整屏减底栏」，画面更大。 */
.cm-dialog,
.cc-dialog,
.vz-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cm-dialog.is-portrait,
.cc-dialog.is-portrait { width: 100vw; max-width: 100vw; }
/* 单/双画面舞台：吃满「视口高度 − 底栏」（底栏实测 56–58，取 60 留余量） */
.cm-stage,
.cc-stage {
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
}
.cm-stage.is-portrait,
.cc-stage.is-portrait {
  height: min(calc(100vh - 60px), calc(100vw * 16 / 9));
  height: min(calc(100dvh - 60px), calc(100vw * 16 / 9));
}
/* 五路并排：铺满整宽，左右不再留 12px 内距 */
.vz-grid { padding: 0; gap: 4px; }
/* 全屏后若画面比视口矮（手机 16:9 素材、或窄屏），舞台垂直居中、底栏仍贴底，
   否则视频会顶在上面、下方空出一大片。高度接近满屏时 auto 变 0，行为不变。 */
.cm-dialog > .cm-stage,
.cc-dialog > .cc-stage { margin-block: auto; }
/* ===== 舞台严格贴合视频比例（2026-10-27，全屏之后）
   全屏把舞台撑到整个视口，视频 contain 后只剩中间一块，
   左下 / 右下角的标签就浮在黑边上、离画面很远。
   这里让舞台的宽高都按视频比例算（--arw/--arh 由 JS 在 loadedmetadata 写入），
   标签仍是相对舞台定位，于是自然打在画面上。 */
.cm-dialog > .cm-stage,
.cc-dialog > .cc-stage {
  width: min(100vw, calc((100vh - 60px) * var(--arw, 16) / var(--arh, 9)));
  width: min(100vw, calc((100dvh - 60px) * var(--arw, 16) / var(--arh, 9)));
  height: auto;
  max-width: 100vw;
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  aspect-ratio: var(--ar, 16 / 9);
  margin: auto;
  align-self: center;
}
/* 五路并排：格子高度按各自视频比例算，行整体垂直居中，别贴着顶部留一大块空 */
.vz-grid { align-content: center; }
/* 全屏黑边抹平（2026-10-27）：弹窗底色与舞台、视频的黑边统一成纯黑。
   原来底色是 #0b0d13（偏蓝灰），和视频四周的 #000 一对比就显出「一条缝」；
   现在两侧留白与画面同色，看不出边界，但画面本身仍按原比例完整显示、不裁切。 */
.cm-dialog,
.cc-dialog,
.vz-dialog { background: #000; }
.vz-grid { background: #000; }
/* API 接入三步卡：序号做成贴右上角的标签、标题与说明共用左缘（2026-11-01）
   与 /referral/ 三步卡同一套（高度 30 正好等于卡片原有的 30px 顶部内距，
   标题不必为标签下移）。 */
.val-tri.is-step .val-t3 {
  position: relative;
  padding: 30px 26px 24px;   /* 上 30 = 角标高度，标题不被压 */
  text-align: left;
}
.val-tri.is-step .val-num {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 68px;
  height: 30px;
  margin: 0;
  padding: 0 18px;
  border-radius: 0 0 0 14px;
  font-size: 14px;
  letter-spacing: .1em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}
.val-tri.is-step .val-t3n { margin: 0; }
.val-tri.is-step .val-t3d {
  margin-top: 12px;
  text-wrap: pretty;
  /* 行高与另外两组卡对齐（原 1.9 是半透明卡时期的疏排版） */
  line-height: 1.8;
}
/* ===== /referral/ 三步卡：「圆形序号 + 标题同行，说明左对齐」（2026-11-01）
   原先是序号、标题、说明全部居中（2026-10-27 与 /value/#api 一步对齐的写法）。
   三列并排时说明各折两行、每行长度都不同，居中之后左右两端都在晃；卡片还比
   内容高出一截。改成与本页下方 .rf-payout-card 同一套 grid（46px 圆 + 标题，
   正文跨两列），整卡只有左缘一条线，高度也收到内容尺寸。 */
.rf-step {
  display: block;
  /* 序号做成贴右上角的标签，正好占满卡片原有的 30px 顶部内距，
     标题不用为它下移——与页面上其它卡片的首行位置保持一致 */
  text-align: left;
}
.rf-step h3 {
  display: block;
  margin: 0;
  line-height: 1.35;
}
.rf-step p {
  margin-top: 12px;
  text-align: left;
  text-wrap: pretty;
}
.rf-step-num {
  /* 贴卡片右上角的标签：顶边与右边贴合（右上角由卡片自身的圆角裁出来），
     只留左下角一个 12px 圆角，读起来像从卡片边缘伸出来的一枚书签 */
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 30px;
  margin: 0;
  padding: 0 18px;
  border-radius: 0 0 0 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: linear-gradient(165deg, #9aa4f7 0%, var(--c-primary) 54%, #6b79e2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}
/* ===== /referral/ 佣金用法两卡：图标与标题并排（2026-10-27）
   原来图标独占一行、标题在下方，卡片上半部分显得空；改成图标与标题同一条基线，
   正文与底部标签跨两列，整张卡更紧凑，也更容易一眼对上「哪种用法」。 */
.rf-payout-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}
.rf-payout-ic { grid-column: 1; margin-bottom: 0; }
.rf-payout-card h3 { grid-column: 2; margin-bottom: 0; }
.rf-payout-card p { grid-column: 2; margin-top: 18px; }
/* 标签与正文一起落在标题那一列，卡片里只剩「图标 / 文字」两条竖线 */
.rf-payout-tag { grid-column: 2; }
/* ===== 对比弹窗：从属画面裁齐到母钟比例（2026-10-27）
   两路文件的像素比例常有零点几的差（例：增强 1906×1080 vs 直出 1920×1080，差 0.8%），
   contain 时各自按自己的比例缩放，叠在一起就会出现「人物位置差一点点」的错觉。
   舞台框固定取母钟比例，另一路用 cover 填满同一框、居中裁掉不足 1% 的边缘，
   两边的内容就落在同一个位置上。 */
.cmv-new { object-fit: cover; }   /* /features/：原片是母钟 */
.cc-a { object-fit: cover; }      /* /seedance/：右路增强是母钟 */
/* /vs/ 首屏 H1 里的对比连接词：比正文小两档、留一点气口。
   两侧中文 9+7 字 = 703px，1440 下可用 780px，VS 只有 77px 的预算。 */
.h1-vs {
  margin: 0 .1em;
  font-size: .66em;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--tx-3);
}

/* 导航「进入控制台」按钮（2026-10-29）：凸起的真凶是 272 行的 1px ring 外扩，不是渐变 */
.nav-actions .btn-console {
  gap: 6px;
  padding: 8px 16px;
  font-size: 15.5px;
  border-radius: 8px;
  border: 0;
  /* 彻底不要底色。试过实心、半透明、羽化渐变三档——只要按钮还占一块
     有边界的面，它在深色导航里就是「凸」的，羽化到 .70 也还看得见圆角。
     所以改为纯文字 + 箭头：文字比导航词亮一档（#e2e6ff vs 灰），
     靠亮度与箭头区分主次，不靠面积。hover 时才浮出一团羽化柔光。 */
  background: rgba(158, 172, 255, .12);
  color: #e2e6ff;
  /* 只留一圈 1px 的极淡内描边：给一个边界，但不给「面」。
     用 inset 阴影而不是 border——border 会让 auto 宽度的按钮宽高各长 2px。 */
  box-shadow: inset 0 0 0 1px rgba(158, 172, 255, .24);
  letter-spacing: .3px;
}
.nav-actions .btn-console .bc-arrow {
  flex: 0 0 auto;
  width: 12.5px;
  height: 12.5px;
  margin-left: 1px;
  opacity: .85;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
/* .btn-primary::after 是那层顶部白光，会让上半亮下半暗、加重立体错觉 */
.nav-actions .btn-console::after { display: none; }
.nav-actions .btn-console:hover {
  color: #fff;
  background: rgba(158, 172, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(178, 189, 255, .52);
}
.nav-actions .btn-console:hover .bc-arrow { transform: translateX(2.5px); opacity: 1; }
.nav-actions .btn-console:active {
  background: rgba(158, 172, 255, .30);
  box-shadow: inset 0 0 0 1px rgba(178, 189, 255, .58);
}
.nav-actions .btn-console:focus-visible {
  outline: 2px solid rgba(174, 182, 245, .75);
  outline-offset: 2px;
}

/* ==========================================================================
   主 CTA「上传视频，看增强效果」（2026-10-29，先只改首页两处）
   与导航栏的「进入控制台」是同一套材质：半透明主色底 + 一圈极淡内描边 +
   右箭头，不做渐变、不投光晕、不上浮。区别只在浓度——
   导航那个是 .12，主按钮是 .28，因为它要承担转化，不能弱成一条链接。
   尺寸不动，仍由 `.hero-hero .hero-cta .btn` 与 `.btn` 决定。
   ========================================================================== */
.btn-console-cta {
  gap: 8px;
  border: 0;
  /* 主按钮用实心而不是半透明：试过 .28 与 .46，两次都跟右边的「看实测样片」
     撞成同一种「描边 + 淡底」，主次分不出来。主 CTA 本来就该是全页最重的一块，
     所以给它实心，但仍然不带渐变、不带光晕、不上浮——与导航按钮同一套「平」。 */
  background: #6b79e2;
  color: #fff;
  box-shadow: none;
}
/* 关掉 .btn-primary::after 那层顶部白光，它会让上半亮下半暗、又回到「立体」 */
.btn-console-cta::after { display: none; }
.btn-console-cta .bc-arrow {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  opacity: .9;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.btn-console-cta:hover {
  background: var(--c-primary);
  transform: none;
  filter: none;
}
.btn-console-cta:hover .bc-arrow { transform: translateX(3px); opacity: 1; }
.btn-console-cta:active { background: #5f6cd6; transform: none; }

/* 可访问性基础（2026-10-31）：skip-link、:focus-visible 统一 2px 青色、th scope */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--c-cyan);
  color: #07110f;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #07110f;
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
}

/* CTA 按钮统一 56px（2026-10-31）：三处 padding-block 之差造成 58/52/56 */
.hero-cta .btn,
.hc-action .btn,
.cta-band .btn {
  height: 56px;
  padding-block: 0;
}

/* ==========================================================================
   小字注释的阅读行宽（2026-10-31）
   --------------------------------------------------------------------------
   实测这几条脚注在 1440 下每行 62–103 字（12.5px 字号铺满 1344 宽），
   一行读下来眼睛要横跨整屏。收到 640px 并居中，约 50 字/行，与正文接近。
   ========================================================================== */
/* 脚注小字 .foot-note —— 全站唯一定义（2026-11-01）
   表格 / 卡片 / 数字条下面那段口径说明统一用它：满宽、左对齐、12.5px / 1.75 / --tx-3。 */
.foot-note {
  max-width: none;
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--tx-3);
  text-align: left;
}
.foot-note a {
  color: var(--tx-1);
  text-decoration: none;
  border-bottom: 1px solid rgba(95, 214, 200, .5);
  transition: color .18s ease, border-color .18s ease;
}
.foot-note a:hover,
.foot-note a:focus-visible {
  color: var(--c-cyan);
  border-bottom-color: currentColor;
}

/* CTA 面板里的那一行要素说明：同一套字号与行高，但它在深色面板上、
   且是一行并列条目（用 · 分隔），所以保留居中、更亮一档的颜色与 620 的宽度。
   它不挂 .foot-note，避免上面那条把居中改成左对齐。 */
.cta-note {
  font-size: 12.5px;
  line-height: 1.75;
}

/* 脚注里的数字强调（如首页的 674 元 / 175 元）：
   <b> 给青色 + 等宽数字，让读者一眼抓住关键金额，字号随正文。 */
.foot-note b {
  font-weight: 600;
  color: var(--c-cyan);
  font-variant-numeric: tabular-nums;
}

/* 返佣首屏（2026-11-01）：左文案 + 右测算卡，替掉原来只有一行「2.7 元」的轻首屏 */
.rf-hero .rf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
  gap: 64px;
}
.rf-hero h1,
.pk-hero h1,
.fq-hero h1 {
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.24;
}

.rf-hero .hc-action,
.pk-hero .hc-action,
.fq-hero .hc-action { margin-top: 32px; }

/* 右列：佣金测算卡 */
.rf-viz {
  min-height: var(--hero-aside-h);
  margin: 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(95, 214, 200, .10), rgba(95, 214, 200, 0) 62%),
    var(--bg-card);
}
.rf-viz-cap {
  margin: 0 0 20px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--tx-3);
}
.rf-viz-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
}
.rf-viz-row + .rf-viz-row { margin-top: 18px; }
.rf-viz-k {
  font-size: 13px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
.rf-viz-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.rf-viz-bar i {
  display: block;
  width: var(--p);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(95, 214, 200, .30), var(--c-cyan));
  transform-origin: left center;
}
.rf-viz-v {
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-cyan);
  font-variant-numeric: tabular-nums;
}
.rf-viz-note {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 1.6;
  color: var(--tx-3);
}

/* 进入视口后条形从左生长。先挂 .is-anim 归零，没有 JS 时不加这个类，条照常显示 */
.rf-viz.is-anim .rf-viz-bar i { transform: scaleX(0); }
.rf-viz.is-anim.is-in .rf-viz-bar i {
  transform: scaleX(1);
  transition: transform .75s cubic-bezier(.22, .7, .2, 1);
}
.rf-viz.is-anim.is-in .rf-viz-row:nth-child(3) .rf-viz-bar i { transition-delay: .08s; }
.rf-viz.is-anim.is-in .rf-viz-row:nth-child(4) .rf-viz-bar i { transition-delay: .16s; }

@media (max-width: 1080px) {
  .rf-hero .rf-row { grid-template-columns: 1fr; gap: 36px; }
  .rf-viz { max-width: 560px; }
}

/* 返佣测算器与「先找对人」（2026-11-01）：可输入消耗实时算佣金，取代三张静态案例卡 */

/* ---------- 佣金测算器 ---------- */
.rf-calcbox {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  max-width: 1080px;
  margin: 24px auto 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rf-calcbox-in {
  padding: 26px 28px 24px;
  border-right: 1px solid var(--line);
}
.rf-calcbox-label {
  align-self: center;
  margin-left: auto;
  padding: 4px 11px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--tx-3);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.rf-calcbox-field {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.rf-calcbox-unit {
  font-size: 18px;
  color: var(--tx-3);
}
.rf-calcbox-input {
  flex: 0 0 auto;
  width: 132px;
  padding: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--tx-1);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.rf-calcbox-input::-webkit-outer-spin-button,
.rf-calcbox-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rf-calcbox-input:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 4px; border-radius: 4px; }

.rf-calcbox-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 4px;
  margin: 22px 0 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  outline: none;
  cursor: pointer;
}
.rf-calcbox-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-cyan);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px rgba(95, 214, 200, .55);
}
.rf-calcbox-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-cyan);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px rgba(95, 214, 200, .55);
}
.rf-calcbox-range:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 6px; }
.rf-calcbox-hint {
  /* 横跨两栏、贴在卡底：左栏只有 293（1440）／228（1200），
     两段合起来需要 300 出头，只有一栏的话必然折行 */
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 5px;
  margin: 0;
  padding: 15px 28px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tx-3);
  /* 两句都不拆行；极窄屏放不下时只在中间的「·」处断开 */
  white-space: nowrap;
}

.rf-calcbox-out {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 26px 28px 24px;
  background: rgba(95, 214, 200, .035);
}
.rf-calcbox-res {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.rf-calcbox-res span { font-size: 13px; color: var(--tx-3); }
.rf-calcbox-res b {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-cyan);
  font-variant-numeric: tabular-nums;
}
/* ---------- 推荐对象 ---------- */
.rf-who {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: none;
  margin: 44px 0 0;
}
.rf-who-card {
  padding: 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.rf-who-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-1);
}
.rf-who-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tx-2);
}

@media (max-width: 1180px) {
  .rf-who { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rf-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* 公式卡在窄屏会断成「实际消耗额 × 返佣比例 =」/「你的佣金」两行，
     而下面的测算器本身就在演示这个公式，故窄屏只留测算器 */
  .rf-calc-hero { display: none; }
  .rf-calcbox { grid-template-columns: minmax(0, 1fr); }
  .rf-calcbox-in {
    padding: 22px 20px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .rf-calcbox-out { padding: 22px 20px 20px; gap: 14px; }
  .rf-calcbox-hint {
    padding: 12px 20px 16px;
    font-size: 12px;
  }
}
/* 360 宽下卡内只剩 280，两段合计 283 会被挤断；把左右内距收到 16 换 8px */
@media (max-width: 400px) {
  .rf-calcbox-hint {
    padding-left: 16px;
    padding-right: 16px;
  }
  .rf-calcbox-input { font-size: 28px; }
  .rf-calcbox-res b { font-size: 24px; }
}
@media (max-width: 640px) {
  .rf-who { grid-template-columns: minmax(0, 1fr); }
}

/* 加盟首屏（2026-11-01）：与返佣同构，右侧换价差轴（平台供货价 / 你的毛利） */
.ag-hero .ag-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
  gap: 64px;
}
.ag-hero h1 {
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.24;
}

.ag-hero .hc-action { margin-top: 32px; }

/* 价差轴：供货价段 / 你定的零售价段 */
.ag-axis {
  display: flex;
  flex-direction: column;
  min-height: var(--hero-aside-h);
  margin: 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(95, 214, 200, .10), rgba(95, 214, 200, 0) 62%),
    var(--bg-card);
}
/* 价差带 + 端点标签整体居中：多出来的高度由上下两个 auto 平分，
   注脚仍贴底，与返佣页那三条 bar 的呼吸一致 */
.ag-axis-plot {
  margin: auto 0;
}
.ag-axis-cap {
  margin: 0 0 22px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--tx-3);
}
.ag-axis-bar {
  position: relative;
  display: flex;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
/* 右端一截浅色刻度：让青色段有「到此为止」的落点，不再是一块浮着的色 */
.ag-axis-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3px;
  background: rgba(255, 255, 255, .58);
}
.ag-axis-cost {
  flex: 0 0 55%;
  background: rgba(255, 255, 255, .12);
}
.ag-axis-gain {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #05231f;
  /* 斜纹 = 这段长度由你定，不用写字说明；左侧 2px 深缝把两段分开 */
  background:
    repeating-linear-gradient(45deg, rgba(5, 35, 31, .085) 0 2px, rgba(5, 35, 31, 0) 2px 7px),
    linear-gradient(90deg, rgba(95, 214, 200, .30), var(--c-cyan));
  box-shadow: inset 2px 0 0 rgba(10, 12, 16, .38);
}
.ag-axis-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--tx-3);
}
.ag-axis-tag {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--tx-2);
}
/* 「进你的对公账户」是这句话的落点，提一档亮度 */
.ag-axis-tag b {
  font-weight: 500;
  color: var(--tx-1);
}

@media (max-width: 1080px) {
  .ag-hero .ag-row { grid-template-columns: 1fr; gap: 36px; }
  .ag-axis { max-width: 560px; }
}

/* 两页互链：招商双页（返佣 / 加盟）各引向另一边 */
.hero-xlink {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx-3);
}
.hero-xlink a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(95, 214, 200, .35);
  padding-bottom: 1px;
}
.hero-xlink a:hover { border-bottom-color: var(--c-cyan); }
.hero-xlink b { margin-right: 5px; font-weight: 600; color: var(--c-cyan); font-variant-numeric: tabular-nums; }

/* 招商双页首屏（2026-11-01）：撤掉照片底图，回到 `.hero-compact` 那套
   「左上蓝紫光晕 + 44px 网格」，并在右下补一道极淡的青色反光——没有照片
   之后右半幅只剩网格，光晕补上层次，又不至于压过左侧文案。 */
.rf-hero,
.ag-hero,
.pk-hero,
.fq-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(120% 150% at 8% 0%, rgba(125, 140, 240, .13) 0%, rgba(125, 140, 240, 0) 62%),
    radial-gradient(85% 110% at 98% 96%, rgba(95, 214, 200, .06) 0%, rgba(95, 214, 200, 0) 62%),
    linear-gradient(rgba(125, 140, 240, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 140, 240, .06) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
}
/* 这两页左右两列加起来只有 262 高，默认下内距 80 让首屏空掉一截，只收底部：
   80 → 52。**上内距不动**，保持与其它 hero-compact 页一致（桌面 36 / 手机 56），
   否则 kicker 距导航的高度就和别的页对不上了。 */
main > section.rf-hero,
main > section.ag-hero,
main > section.pk-hero,
main > section.fq-hero {
  padding-bottom: 52px !important;
}
.rf-hero > .container,
.ag-hero > .container {
  position: relative;
  z-index: 2;
}
/* 右卡顶对齐 kicker：两列改成 start 对齐后，卡片会贴到 `.hc-main` 顶，而
   `.hc-kicker` 是 inline-flex、落在行盒里天然下移 8.5px。补这 8.5px 后卡片
   上沿与 kicker 上沿同一条线，下沿也刚好和左列齐平（253 + 8.5 ≈ 262）。 */
@media (min-width: 721px) {
  .rf-hero .rf-viz,
  .ag-hero .ag-axis,
  .pk-hero .pk-viz,
  .fq-hero .fq-viz { margin-top: 8.5px; }
}
/* 右列卡片的等高基准：桌面 253，手机内容更少，收到 234 */
@media (max-width: 720px) {
  :root { --hero-aside-h: 234px; }
}

/* 套餐页首屏（2026-11-01）：与返佣 / 加盟同构——左文案 + 右侧 420px 玻璃卡，
   卡里放六档的每秒单价阶梯（越买越便宜），左列按钮跟另两页一样落在文案下方。 */
.pk-hero .pk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
  gap: 64px;
}
/* 卡上的「5 万 / 22 万 / 250 万」标签比返佣页长，列宽从 80 放到 96，右侧数值列不变 */
.pk-viz .rf-viz-row { grid-template-columns: 96px minmax(0, 1fr) 68px; }
@media (max-width: 1080px) {
  .pk-hero .pk-row { grid-template-columns: 1fr; gap: 36px; }
  .pk-viz { max-width: 560px; }
}

/* 常见问题页首屏（2026-11-01）：与招商 / 套餐同构。右卡换成四类入口——
   这页没有可测算的数字，卡片的作用是「一眼看到有几类、直接跳过去」。 */
.fq-hero .fq-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
  gap: 64px;
}
.fq-idx-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  /* 11px 让整行到 44——手机触控下限。原来 8px 只有 38。 */
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.fq-idx-row + .fq-idx-row { margin-top: 3px; }
.fq-idx-row:hover { background: rgba(255, 255, 255, .05); }
.fq-idx-row:hover .fq-idx-k { color: var(--tx-1); }
.fq-idx-n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--c-primary);
}
.fq-idx-k { font-size: 14px; color: var(--tx-2); }
.fq-idx-v { font-size: 13px; color: var(--tx-3); font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) {
  .fq-hero .fq-row { grid-template-columns: 1fr; gap: 36px; }
  .fq-viz { max-width: 560px; }
}

/* 招商双页 H1（2026-11-01）：桌面一行、≤720 两行（br 只在窄屏生效） */
@media (min-width: 721px) {
  .rf-hero h1 br,
  .ag-hero h1 br,
  .pk-hero h1 br,
  .fq-hero h1 br { display: none; }
}

/* 招商双页撤首屏数据块（2026-11-01）：与右侧卡重复，数字改在副标里加粗 */
.rf-hero .hc-sub b,
.ag-hero .hc-sub b {
  font-weight: 600;
  color: var(--c-cyan);
  /* 「默认 5%」「零售价由你定」不能被拆到两行 */
  white-space: nowrap;
}

/* 公式卡与测算器并排（2026-11-01）：左讲结构、右算数值，两卡分隔线同高 */
.rf-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  /* 与板块主流内容边缘对齐：不再收窄到 1080 居中 */
  max-width: none;
  margin: 40px 0 0;
}
.rf-pair .rf-calc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* 第一行吃掉多余空间、内容居中；第二行留给卡内口径并贴底，
     这样两卡的分隔线才会落在同一条水平线上 */
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 18px 28px;
  max-width: none;
  margin: 0;
  padding: 24px 26px 0;
}
/* 卡内口径：跟着公式走，所以放卡里而不是板块底下。
   左负边距 + 等量内距，让分隔线像右卡那样贯通整卡；
   行高、上下内距与 .rf-calcbox-hint 完全一致（15/16 + 1.6），两条线才同高 */
.rf-calc-hero-note {
  grid-column: 1 / -1;
  margin: 0 -26px;
  padding: 15px 26px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tx-3);
}
.rf-pair .rf-calc-eq {
  justify-content: flex-start;
  gap: 10px;
}
.rf-pair .rf-calc-term {
  padding: 8px 14px;
  font-size: 15px;
}
.rf-pair .rf-calc-op { font-size: 14px; }
.rf-pair .rf-calc-rate {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  padding-left: 0;
  border-left: 0;
}
.rf-pair .rf-calc-rate-num { font-size: 46px; }
.rf-pair .rf-calcbox {
  max-width: none;
  margin: 0;
  /* 多余高度全给上面一行，注脚行保持原高，分隔线才不会跟着往下漂 */
  grid-template-rows: 1fr auto;
}
/* 并排但卡片偏窄（1025–1340）：三个胶囊 + 5% 会挤成「…返佣比例 =」/「你的佣金」两行，
   比例区还被拉到右侧悬空。改成上下两行，公式与比例各自舒展 */
@media (min-width: 1025px) and (max-width: 1340px) {
  .rf-pair .rf-calc-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    gap: 14px;
  }
  .rf-pair .rf-calc-eq { align-self: center; }
  .rf-pair .rf-calc-rate { align-self: end; }
}

@media (max-width: 1024px) {
  .rf-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .rf-pair { margin-top: 22px; }
  /* 窄屏放不下三个胶囊，公式本身会断行；但卡里的口径不能跟着消失，
     所以只撤掉公式与比例，把卡壳也一并脱掉，留一段小字挪到测算器下方 */
  .rf-pair .rf-calc-hero {
    display: block;
    order: 2;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .rf-pair .rf-calc-eq,
  .rf-pair .rf-calc-rate { display: none; }
  .rf-pair .rf-calcbox { order: 1; }
  .rf-calc-hero-note {
    margin: 0;
    padding: 0;
    border-top: 0;
  }
}

/* ==========================================================================
   全站贴角步骤卡统一（2026-11-01）
   --------------------------------------------------------------------------
   增强能力 / 推广返佣 / 代理加盟 / 产品价值 四处都是「右上角贴角序号 + 标题 + 说明」
   的三步卡，但卡片语言各不相同：底色有的是 180° 渐变（#15171c→#101216）、有的是
   半透明，描边 line-soft vs line、圆角 r-lg vs r-md、标题 18px/700 与 16px/600 混用。
   统一成竞品页「对比通用云厂商，为什么选超分宝增强」那套：实心卡底 + --line 细边 +
   --r-md 圆角 + 标题前 3×15 主色竖条 + 正文 14 / 行高 1.8 / --tx-2。
   贴角序号本身（.how-step .n / .rf-step-num / .ag-flow-num / .val-num）不在改动范围，
   它们仍由各自的 absolute 定位贴着右上角。
   ========================================================================== */
.how-step,
.rf-step,
.ag-flow li,
.val-tri.is-step .val-t3 {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.how-step h3,
.rf-step h3,
.ag-flow h3,
.val-tri.is-step .val-t3n {
  position: relative;
  padding-left: 13px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-1);
}
.how-step h3::before,
.rf-step h3::before,
.ag-flow h3::before,
.val-tri.is-step .val-t3n::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--c-primary);
}
.how-step p,
.rf-step p,
.ag-flow p,
.val-tri.is-step .val-t3d {
  font-size: 14px;
  line-height: 1.8;
  color: var(--tx-2);
}

/* ==========================================================================
   推广返佣「先找对人」与「规则写清楚」两组卡（2026-11-01）
   --------------------------------------------------------------------------
   这两组的卡片外壳（bg-card / --line / --r-md）本来就和竞品页同款，差在标题标记：
   .rf-who-card 完全没有，.rf-term 是一个 4×4 圆点。统一成竞品页那道 3×15 主色竖条，
   正文行高从 1.75 收到 1.8。
   「不做什么」那张（.rf-term-warn）只保留红色边框与红底，竖条沿用 danger 色，
   特异性 (0,2,1) 高于本组，不会被打回主色。
   ========================================================================== */
.rf-who-card h3,
.rf-term h3 {
  padding-left: 13px;
  position: relative;
}
.rf-who-card h3::before,
.rf-term h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--c-primary);
}
.rf-who-card p,
.rf-term p { line-height: 1.8; }

/* ==========================================================================
   全站贴角步骤卡统一 · 以 /referral/ 为基准（2026-11-01 二次重构）
   --------------------------------------------------------------------------
   原先四处各写一套：
     /features/  .how-step    div + <div class="n">01</div> + h3 + p
     /referral/  .rf-step     article + span.rf-step-num + h3 + p   ← 选它做基准
     /agency/    .ag-flow li  li + span.ag-flow-num + h3 + p
     /value/     .val-t3      div + span.val-num + p.val-t3n + p.val-t3d
   HTML 现在四页一致：<article class="step-card"> + span.step-card-num + h3 + p
   （/agency/ 保留 ol/li 的有序语义，写成 <li class="step-card">，内部结构同上）。
   装饰性的顶部渐变条（.rf-step::before / .ag-flow li::before）不再保留，
   与竞品页那组卡保持一致。
   ========================================================================== */
.step-card,
.ag-flow li.step-card {
  position: relative;
  padding: 30px 26px 24px;      /* 上 30 = 角标高度，标题不必为角标下移 */
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;             /* 角标贴角靠它裁出左下圆角 */
  text-align: left;
  list-style: none;
  box-shadow: none;
  transition: border-color .25s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
}
.step-card:hover,
.ag-flow li.step-card:hover {
  border-color: rgba(125, 140, 240, .38);
  transform: translateY(-3px);
}
.ag-flow li.step-card::before { content: none; }

.step-card-num {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 30px;
  margin: 0;
  padding: 0 18px;
  border-radius: 0 0 0 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  background: linear-gradient(165deg, #9aa4f7 0%, var(--c-primary) 54%, #6b79e2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}

.step-card h3,
.ag-flow li.step-card h3 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 13px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tx-1);
}
.step-card h3::before,
.ag-flow li.step-card h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--c-primary);
}

.step-card p,
.ag-flow li.step-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--tx-2);
}

@media (max-width: 720px) {
  .step-card,
  .ag-flow li.step-card { padding: 30px 20px 20px; }
  .step-card h3,
  .ag-flow li.step-card h3 { margin-bottom: 8px; font-size: 15px; }
  .step-card p,
  .ag-flow li.step-card p { font-size: 13.5px; }
}

/* ==========================================================================
   全站「标题前竖条」卡统一 · 以 /packages/ 的 .price-note 为基准（2026-11-01 三改）
   --------------------------------------------------------------------------
   原先 .vs-reason（竞品页 3 张）、.val-q / .val-t3（产品价值 7 张）、
   .rf-who-card / .rf-term（推广返佣 14 张）各写一套，只有「实心底 + 细边 + r-md +
   3×15 竖条」这个大意相同，padding、hover、strong 处理都不一样。
   HTML 现在统一成 <article class="price-note"> <h3>…</h3> <p>…</p> </article>，
   直接吃 .price-note 那一段（padding 24/26、hover 只变边框色、strong 提亮）。
   贴角序号卡（.step-card）不在此列，它有自己的几何约束。
   ========================================================================== */
.price-note-warn {
  border-color: rgba(224, 92, 92, .34);
  background: rgba(224, 92, 92, .06);
}
.price-note-warn h3::before { background: var(--c-danger); }
.price-note-warn:hover { border-color: rgba(224, 92, 92, .52); }

/* ==========================================================================
   价值页统一收口（2026-11-02）
   --------------------------------------------------------------------------
   1) 表格向卡片靠：calc-table 原本是「16px 圆角 + --line-soft 淡边 + 顶部白渐变 +
      紫色投影」，和同页卡片的「12px 圆角 + --line 硬边 + 纯卡底」是两套语言。
      统一成卡片那套，表格不再单独浮起。
   2) hero 统计条的分隔线从 --line-soft 提到 --line，与卡片同档。
   3) 首屏主按钮与尾部 CTA 统一成同一套内距与高度（原来 14/26 高 55 vs 15/34 高 56）。
   4) 「推荐」徽章 11.5 → 12。
   ========================================================================== */
.calc-table {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
}
.hero-stats-band {
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
.cta-band .btn {
  padding: 14px 26px;
  min-height: 56px;
}
.btn-console-cta { min-height: 56px; }
.calc-table .cmp-pick { font-size: 12px; }

/* 首屏主 CTA 内距与尾部 CTA 统一（2026-11-02）：之前首页 15/34、紧凑首屏 0/24、
   产品页 14/26，三套内距三个宽度。统一成 14/26 + min-height 56。 */
.hero-hero .hero-cta .btn-console-cta,
.hero-compact .hc-action .btn-console-cta,
.hero-page .hcmp-cta .btn-console-cta {
  padding: 14px 26px;
  min-height: 56px;
}


/* ==========================================================================
   2026-11-05 旗舰暗房微光与双极色彩体系（借鉴广告页 v80–v90 成熟视觉语言）
   --------------------------------------------------------------------------
   核心法则：
   1. 底色告别水泥死灰（#141519），升级为 160° 冷夜蓝深邃渐变 + 右上角斜射环境聚光（Corner Spotlight）
   2. 边框告别水泥实线（#2a2d34），升级为半透明冰川蓝呼吸边 rgba(184, 225, 255, .13)
   3. 色彩分工：新 LOGO 同源冰川天蓝（#38bdf8）讲技术/画质 + 电光皇家蓝立体按钮 + 香槟钛金（#fbbf24）讲省钱/收益/终局高潮
   ========================================================================== */
:root {
  --c-amber: #f59e0b;
  --c-amber-light: #fbbf24;
  --c-amber-grad: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fde68a 100%);
  --c-royal-grad: linear-gradient(135deg, #0ea5e9 0%, #2563eb 52%, #4f46e5 100%);
  --line-ice: rgba(184, 225, 255, .13);
  --line-ice-soft: rgba(184, 225, 255, .08);
}

/* 1. 全站主按钮（.btn-primary / .btn-console-cta）：换装新 LOGO 同源电光皇家蓝立体渐变 */
.btn-primary,
.btn-console-cta {
  background: var(--c-royal-grad);
  color: #fff;
  border: 1px solid rgba(125, 211, 252, .32);
  box-shadow: 0 10px 26px -6px rgba(37, 99, 235, .52), inset 0 1px 0 rgba(255, 255, 255, .24);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover,
.btn-console-cta:hover {
  background: var(--c-royal-grad);
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -6px rgba(37, 99, 235, .68), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.btn-primary:active,
.btn-console-cta:active {
  transform: translateY(0);
  filter: brightness(.98);
}

/* 2. 四页「三步流程卡」（.step-card）：两冷一暖 · 右上角斜射聚光 · 第 3 步终局香槟金高潮 */
.step-card,
.ag-flow li.step-card {
  border-color: var(--line-ice);
  background:
    radial-gradient(260px 180px at 94% 6%, rgba(56, 189, 248, .12), transparent 72%),
    linear-gradient(160deg, rgba(17, 24, 38, .95) 0%, rgba(11, 15, 24, .98) 100%);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .65);
}
.step-card:nth-child(2),
.ag-flow li.step-card:nth-child(2) {
  background:
    radial-gradient(260px 180px at 94% 6%, rgba(37, 99, 235, .16), transparent 72%),
    linear-gradient(160deg, rgba(17, 24, 38, .95) 0%, rgba(11, 15, 24, .98) 100%);
}
.step-card-num {
  color: #38bdf8;
  background: rgba(56, 189, 248, .12);
  border-left: 1px solid rgba(56, 189, 248, .28);
  border-bottom: 1px solid rgba(56, 189, 248, .28);
  box-shadow: none;
}
.step-card h3::before,
.ag-flow li.step-card h3::before {
  background: #38bdf8;
}
/* 第 3 步：终局收获/成交高潮（香槟钛金边框 + 暖金斜射聚光 + 实心金贴角） */
.step-card:nth-child(3),
.ag-flow li.step-card:nth-child(3) {
  border-color: rgba(251, 191, 36, .42);
  background:
    radial-gradient(280px 190px at 94% 6%, rgba(251, 191, 36, .15), transparent 72%),
    linear-gradient(160deg, rgba(19, 27, 42, .95) 0%, rgba(11, 16, 26, .98) 100%);
  box-shadow: 0 16px 38px -18px rgba(245, 158, 11, .22);
}
.step-card:nth-child(3) .step-card-num,
.ag-flow li.step-card:nth-child(3) .step-card-num {
  background: var(--c-amber-grad);
  color: #0b0f19;
  font-weight: 700;
  border: 0;
  box-shadow: -2px 4px 14px rgba(245, 158, 11, .28);
}
.step-card:nth-child(3) h3::before,
.ag-flow li.step-card:nth-child(3) h3::before {
  background: #fbbf24;
}
.step-card:nth-child(3) p strong,
.ag-flow li.step-card:nth-child(3) p strong {
  color: #fde68a;
}

/* 3. 全站通用卡片（.price-note / .sc-card / .cap-card / .ag-def-card / .ag-own-card / .faq-item / .cmp-card） */
.price-note,
.sc-card,
.cap-card,
.ag-def-card,
.ag-own-card,
.faq-item,
.cmp-card {
  border-color: var(--line-ice);
  background:
    radial-gradient(240px 160px at 95% 6%, rgba(56, 189, 248, .085), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 36, .95) 0%, rgba(10, 14, 22, .98) 100%);
}
.price-note:nth-child(3n+2),
.sc-card:nth-child(2n),
.ag-def-card:nth-child(2),
.ag-own-card:nth-child(2) {
  background:
    radial-gradient(240px 160px at 95% 6%, rgba(37, 99, 235, .12), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 36, .95) 0%, rgba(10, 14, 22, .98) 100%);
}
.price-note:hover,
.sc-card:hover,
.cap-card:hover,
.ag-def-card:hover,
.ag-own-card:hover,
.faq-item:hover,
.cmp-card:hover {
  border-color: rgba(56, 189, 248, .42);
}
.price-note h3::before {
  background: #38bdf8;
}
/* 告警边界卡保持珊瑚红语义 */
.price-note.price-note-warn {
  border-color: rgba(251, 113, 133, .34);
  background:
    radial-gradient(240px 160px at 95% 6%, rgba(251, 113, 133, .11), transparent 72%),
    linear-gradient(160deg, rgba(24, 16, 24, .95) 0%, rgba(13, 11, 18, .98) 100%);
}
.price-note.price-note-warn h3::before {
  background: #fb7185;
}

/* 4. 购买套餐页（/packages/ 六档价格卡 .price-card）：砍掉五彩丝带，唯一高亮主推 ¥500 入门尝鲜 */
.price-card {
  border-color: var(--line-ice);
  background:
    radial-gradient(240px 160px at 94% 6%, rgba(56, 189, 248, .08), transparent 72%),
    linear-gradient(160deg, rgba(15, 22, 34, .96) 0%, rgba(10, 14, 22, .98) 100%);
  box-shadow: 0 14px 36px -18px rgba(0, 0, 0, .7);
}
.price-card:hover {
  border-color: rgba(56, 189, 248, .44);
  box-shadow: 0 20px 44px -16px rgba(14, 165, 233, .22);
}
/* 次席档位丝带统一收敛为克制的冷蓝暗调，绝不五颜六色抢戏 */
.price-card .ribbon,
.price-card .ribbon.tone-green,
.price-card .ribbon.tone-blue,
.price-card .ribbon.tone-cyan,
.price-card .ribbon.tone-gold,
.price-card .ribbon.tone-red,
.price-card .ribbon.tone-gray,
.price-card .ribbon.tone-orange {
  background: rgba(56, 189, 248, .13);
  color: #7dd3fc;
  border-left: 1px solid rgba(56, 189, 248, .28);
  border-bottom: 1px solid rgba(56, 189, 248, .28);
  box-shadow: none;
  font-weight: 600;
}
/* 全场唯一香槟金主角：第 2 张（¥500 入门尝鲜 · 主推） */
.price-grid .price-card:nth-child(2) {
  border-color: rgba(251, 191, 36, .52);
  background:
    radial-gradient(280px 190px at 95% 4%, rgba(251, 191, 36, .16), transparent 72%),
    linear-gradient(160deg, rgba(20, 27, 42, .97) 0%, rgba(11, 16, 26, .99) 100%);
  box-shadow: 0 20px 50px -18px rgba(245, 158, 11, .28);
}
.price-grid .price-card:nth-child(2):hover {
  border-color: rgba(251, 191, 36, .78);
  box-shadow: 0 24px 56px -16px rgba(245, 158, 11, .38);
}
.price-grid .price-card:nth-child(2) .ribbon {
  background: var(--c-amber-grad);
  color: #0b0f19;
  font-weight: 700;
  border: 0;
  box-shadow: -2px 4px 14px rgba(245, 158, 11, .32);
}
.price-card .gems {
  color: #38bdf8;
}
.price-grid .price-card:nth-child(2) .gems {
  color: #fbbf24;
}

/* 5. 算力账单对比表（.calc-table）：深海微光框 + 推荐行琥珀金高光带 */
.calc-table {
  border-color: var(--line-ice);
  background: linear-gradient(160deg, rgba(15, 22, 34, .96) 0%, rgba(10, 14, 22, .98) 100%);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .72);
}
.calc-table thead th {
  background: rgba(26, 40, 64, .42);
  border-bottom-color: var(--line-ice);
}
.calc-table tbody tr.is-pick {
  background: linear-gradient(90deg, rgba(251, 191, 36, .10) 0%, rgba(56, 189, 248, .06) 100%);
}
.calc-table .cmp-pick {
  background: var(--c-amber-grad);
  color: #0b0f19;
  font-weight: 700;
  border: 0;
  box-shadow: 0 2px 10px rgba(245, 158, 11, .25);
}
.calc-table tbody tr.is-pick strong,
.calc-table tbody tr.is-pick b,
.calc-table td.win {
  color: #fbbf24;
  font-weight: 700;
}

/* 6. 招商双页（/referral/ 推广返佣 & /agency/ 代理加盟）收益测算舱：香槟金财富高光 */
.rf-pair .rf-calc-hero,
.rf-pair .rf-calcbox,
.ag-axis {
  border-color: rgba(251, 191, 36, .34);
  background:
    radial-gradient(300px 200px at 96% 8%, rgba(251, 191, 36, .14), transparent 72%),
    radial-gradient(280px 180px at 6% 92%, rgba(56, 189, 248, .09), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 37, .96) 0%, rgba(11, 15, 24, .98) 100%);
  box-shadow: 0 20px 48px -22px rgba(0, 0, 0, .75);
}
.rf-calcbox-res:first-child b {
  color: #38bdf8;
}
.rf-calcbox-range::-webkit-slider-thumb {
  background: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .65);
}
.rf-calcbox-range::-moz-range-thumb {
  background: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .65);
}
.rf-calc-rate-num,
.rf-calcbox-res:last-child b {
  background: var(--c-amber-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ag-axis-gain {
  color: #0b0f19;
  font-weight: 700;
  background:
    repeating-linear-gradient(45deg, rgba(11, 15, 25, .09) 0 2px, rgba(11, 15, 25, 0) 2px 7px),
    var(--c-amber-grad);
}

/* 7. 首屏数据条（.hero-stats）与尾部转化带（.cta-band）双极环境光 */
.hero-stats-band {
  border-top-color: var(--line-ice);
  border-bottom-color: var(--line-ice);
  background: linear-gradient(90deg, rgba(14, 22, 36, .55) 0%, rgba(19, 30, 48, .75) 50%, rgba(14, 22, 36, .55) 100%);
}
.cta-band {
  background:
    radial-gradient(480px 220px at 22% 50%, rgba(56, 189, 248, .10), transparent 72%),
    radial-gradient(480px 220px at 78% 50%, rgba(251, 191, 36, .09), transparent 72%),
    linear-gradient(180deg, rgba(10, 15, 24, .4) 0%, rgba(6, 9, 15, .95) 100%);
}
.cta-band::before {
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .48), rgba(251, 191, 36, .42), transparent);
}


/* ==========================================================================
   2026-11-05 v82 深度化用广告页五大视觉手法（零增删 HTML，纯 CSS 最佳搭配）
   --------------------------------------------------------------------------
   1. 全站基础 Token 彻底提纯：告别旧灰紫(#7d8cf0)与旧薄荷绿(#5fd6c8)，统一对齐新 LOGO 冰川天蓝 × 电光皇家蓝 × 香槟钛金
   2. 首页 #scale 四格数据墙：四格冷暖递进（冰川蓝规模 → 珊瑚红高价痛点 → 皇家蓝增强方案 → 香槟金累计省钱高潮）
   3. 竞品页 /vs/ 五联 PK 台：冷夜蓝暗房舱 + 电光蓝立体胶囊按钮 + 第 4 列「超分宝」香槟金唯一主角框
   4. 场景页 /scenarios/ 三大图文卡：右侧文字舱两冷一暖斜射聚光 + STEP 同款胶囊徽章 + 底部虚线结算栏
   5. 能力页 /features/ 四联底座条：冷夜蓝渐变框 + 四格渐进微光 + 冰川蓝发光玻璃图标盒
   6. 首页对比标签 (.more-tag--after) 与套餐页首屏阶梯条 (.rf-viz) 冷暖高潮化
   ========================================================================== */
:root {
  --c-primary: #3b82f6;
  --c-primary-2: #60a5fa;
  --c-accent: #38bdf8;
  --c-cyan: #38bdf8;
  --c-cyan-soft: #7dd3fc;
  --bg-card: #0e131d;
  --bg-card-2: #131a27;
  --line: rgba(184, 225, 255, .13);
  --line-soft: rgba(184, 225, 255, .08);
}

/* 1. 首页第 4 屏 #scale 四格数据墙：四格冷暖递进叙事 */
.scale-stat:nth-child(1) {
  border-color: var(--line-ice);
  border-top: 1px solid rgba(56, 189, 248, .62);
  background:
    radial-gradient(240px 150px at 92% 8%, rgba(56, 189, 248, .12), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 36, .95) 0%, rgba(10, 14, 22, .98) 100%);
}
.scale-stat:nth-child(2) {
  border-color: rgba(251, 113, 133, .22);
  border-top: 1px solid rgba(251, 113, 133, .8);
  background:
    radial-gradient(240px 150px at 92% 8%, rgba(251, 113, 133, .08), transparent 72%),
    linear-gradient(160deg, rgba(20, 17, 26, .95) 0%, rgba(11, 13, 20, .98) 100%);
}
.scale-stat:nth-child(2) .s-num {
  color: #cbd5e1;
}
.scale-stat:nth-child(3) {
  border-color: rgba(56, 189, 248, .32);
  border-top: 1px solid rgba(56, 189, 248, .72);
  background:
    radial-gradient(240px 150px at 92% 8%, rgba(37, 99, 235, .16), transparent 72%),
    linear-gradient(160deg, rgba(16, 25, 40, .96) 0%, rgba(10, 15, 24, .98) 100%);
}
.scale-stat:nth-child(3) .s-num {
  color: #38bdf8;
}
.scale-stat.s-accent {
  border-color: rgba(251, 191, 36, .48);
  border-top: 1px solid rgba(251, 191, 36, .72);
  background:
    radial-gradient(260px 170px at 92% 8%, rgba(251, 191, 36, .18), transparent 72%),
    linear-gradient(160deg, rgba(22, 27, 40, .96) 0%, rgba(12, 16, 25, .99) 100%);
  box-shadow: 0 18px 42px -18px rgba(245, 158, 11, .28);
}
.scale-stat.s-accent .s-num {
  color: #fbbf24;
  text-shadow: 0 0 24px rgba(251, 191, 36, .22);
}

/* 2. 竞品对比页 /vs/ 五联 PK 台：暗房微光舱 + 电光蓝胶囊按钮 + 第 4 列香槟金主角锁定 */
.vs-block {
  border-color: var(--line-ice);
  background:
    radial-gradient(420px 220px at 95% 4%, rgba(56, 189, 248, .09), transparent 72%),
    linear-gradient(160deg, rgba(15, 22, 34, .96) 0%, rgba(9, 13, 21, .99) 100%);
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .75);
}
.vs-kind {
  background: rgba(56, 189, 248, .11);
  border-color: rgba(56, 189, 248, .32);
  color: #38bdf8;
  font-weight: 500;
}
.vs-pk {
  background: linear-gradient(135deg, rgba(14, 165, 233, .22) 0%, rgba(37, 99, 235, .32) 100%);
  border: 1px solid rgba(56, 189, 248, .48);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.vs-pk:hover {
  background: var(--c-royal-grad);
  border-color: rgba(125, 211, 252, .65);
  color: #fff;
  box-shadow: 0 10px 24px -4px rgba(37, 99, 235, .65);
}
.vs-strip__pick {
  border: 1.5px solid rgba(251, 191, 36, .88);
  border-top: 3px solid #fbbf24;
  background: linear-gradient(180deg, rgba(251, 191, 36, .08) 0%, rgba(251, 191, 36, 0) 28%);
  box-shadow: 0 0 24px rgba(245, 158, 11, .22), inset 0 0 12px rgba(251, 191, 36, .12);
}
.vs-strip__overlay .is-our {
  color: #fbbf24;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .85);
}

/* 3. 适用场景页 /scenarios/ 三张图文巨卡 (.sc-spot)：两冷一暖斜射聚光 + STEP 同款胶囊徽章 */
.sc-spot {
  border-color: var(--line-ice);
  background:
    radial-gradient(360px 240px at 96% 8%, rgba(56, 189, 248, .12), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 36, .96) 0%, rgba(10, 14, 22, .99) 100%);
}
.sc-spot:nth-child(2) {
  background:
    radial-gradient(360px 240px at 4% 8%, rgba(37, 99, 235, .15), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 36, .96) 0%, rgba(10, 14, 22, .99) 100%);
}
.sc-spot:nth-child(3) {
  border-color: rgba(251, 191, 36, .32);
  background:
    radial-gradient(360px 240px at 96% 8%, rgba(251, 191, 36, .13), transparent 72%),
    linear-gradient(160deg, rgba(18, 25, 38, .96) 0%, rgba(10, 14, 22, .99) 100%);
}
.sc-spot-kicker {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(56, 189, 248, .11);
  border: 1px solid rgba(56, 189, 248, .28);
  color: #38bdf8;
}
.sc-spot-kicker::before { display: none; }
.sc-spot:nth-child(3) .sc-spot-kicker {
  background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .34);
  color: #fbbf24;
}
.sc-spot-meta {
  border-top: 1px dashed var(--line-ice);
  padding-top: 14px;
}
.sc-spot-meta dd {
  color: #38bdf8;
  font-weight: 600;
}

/* 4. 增强能力页 /features/ 四联技术底座条 (.cap-index)：渐进斜射微光 + 发光玻璃图标盒 */
.page-features .cap-index,
.cap-index {
  border-color: var(--line-ice);
  background: linear-gradient(160deg, rgba(15, 22, 35, .95) 0%, rgba(10, 14, 22, .98) 100%);
  box-shadow: 0 16px 38px -20px rgba(0, 0, 0, .7);
}
.cap-index-item {
  border-left-color: var(--line-ice);
  background: radial-gradient(180px 120px at 92% 8%, rgba(56, 189, 248, .08), transparent 72%);
}
.cap-index-item:nth-child(2) {
  background: radial-gradient(180px 120px at 92% 8%, rgba(37, 99, 235, .11), transparent 72%);
}
.cap-index-item:nth-child(4) {
  background: radial-gradient(180px 120px at 92% 8%, rgba(251, 191, 36, .09), transparent 72%);
}
.ci-ic {
  background: rgba(56, 189, 248, .12);
  border-color: rgba(56, 189, 248, .32);
  color: #38bdf8;
  box-shadow: 0 0 14px -3px rgba(56, 189, 248, .35);
}
.cap-index-item:nth-child(4) .ci-ic {
  background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .35);
  color: #fbbf24;
  box-shadow: 0 0 14px -3px rgba(251, 191, 36, .32);
}

/* 5. 首页对比角标 (.more-tag--after / .rv-cue) 与套餐页首屏阶梯卡 (.rf-viz) */
.more-tag--after {
  background: var(--c-royal-grad);
  color: #fff;
  border-color: rgba(125, 211, 252, .45);
  box-shadow: 0 6px 16px -4px rgba(37, 99, 235, .55);
}
.rv-cue {
  border-color: rgba(56, 189, 248, .38);
  background: rgba(10, 16, 26, .86);
  color: #e0f2fe;
}
.rf-viz {
  border-color: var(--line-ice);
  background:
    radial-gradient(280px 180px at 96% 8%, rgba(251, 191, 36, .13), transparent 72%),
    radial-gradient(260px 170px at 6% 92%, rgba(56, 189, 248, .10), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 37, .96) 0%, rgba(11, 15, 24, .98) 100%);
}
.rf-viz-row:nth-child(4) .rf-viz-bar i {
  background: var(--c-amber-grad);
}
.rf-viz-row:nth-child(4) .rf-viz-v {
  color: #fbbf24;
  font-weight: 700;
}


/* ==========================================================================
   2026-11-05 v83 增强能力页（/features/）四卡升级：高清静态海报 + 毛玻璃发光播放按钮 + 大画幅暗房视频弹窗
   ========================================================================== */
.page-features .cap-media .cap-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transition: transform .36s cubic-bezier(.22, 1, .36, 1);
}
.page-features .cap-card:hover .cap-img {
  transform: scale(1.028);
}
.page-features .cap-play {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: radial-gradient(circle at 50% 50%, rgba(5, 8, 15, .18) 0%, rgba(5, 8, 15, 0) 58%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-features .cap-playbtn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(14, 165, 233, .22);
  border: 1.5px solid rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  box-shadow: 0 0 0 1px rgba(5, 7, 12, .36), 0 10px 26px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.page-features .cap-playbtn svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
.page-features .cap-card:hover .cap-playbtn,
.page-features .cap-play:focus-visible .cap-playbtn {
  transform: scale(1.08);
  background: var(--c-royal-grad);
  border-color: #fff;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .62), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.page-features .cap-lb {
  z-index: 3;
  pointer-events: none;
}
.page-features .cap-lb-new {
  background: var(--c-royal-grad);
  border-color: rgba(125, 211, 252, .52);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .45);
}

/* 大画幅 2.5 倍细节视频弹窗 */
.cap-vmodal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cap-vmodal[hidden] { display: none; }
.cap-vbackdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(4, 6, 11, .90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cap-vdialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(1040px, calc((100vh - 210px) * 1242 / 1080));
  background: #0e131d;
  border: 1px solid var(--line-ice);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 88px rgba(0, 0, 0, .88);
}
.cap-vdhead {
  padding: 14px 20px;
  background: #070a11;
  border-bottom: 1px solid var(--line-ice-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cap-vdtitle {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
}
.cap-vdclose {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line-ice);
  background: rgba(255, 255, 255, .05);
  color: var(--tx-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.cap-vdclose:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cap-vdclose svg { width: 17px; height: 17px; }
.cap-vdbody {
  background: #040508;
  padding: 12px;
}
.cap-vdbody video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1242 / 1080;
  max-height: calc(100vh - 230px);
  object-fit: contain;
  background: #000;
  border-radius: 10px;
}
.cap-vdfoot {
  padding: 12px 20px;
  background: #070a11;
  border-top: 1px solid var(--line-ice-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--tx-2);
}
.cap-vdcta {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 13.5px;
}
@media (max-width: 720px) {
  .page-features .cap-playbtn { width: 46px; height: 46px; }
  .page-features .cap-playbtn svg { width: 17px; height: 17px; }
  .cap-vmodal { padding: 10px; }
  .cap-vdialog { max-width: 100%; border-radius: 14px; }
  .cap-vdhead { padding: 11px 14px; }
  .cap-vdtitle { font-size: 14px; }
  .cap-vdbody { padding: 8px; }
  .cap-vdbody video { max-height: calc(100vh - 190px); border-radius: 8px; }
  .cap-vdfoot { padding: 10px 14px; font-size: 12px; }
  .cap-vdcta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   兼容兜底（2026-11-05）：不支持 aspect-ratio 的老内核（iOS 14 / Chromium <88）
   首屏对比、能力页弹窗舞台会塌成 0 高，这里用 padding-top 撑出同比例
   ========================================================================== */
@supports not (aspect-ratio: 1 / 1) {
  .hero-compare { height: 0; padding-top: 62.5%; }
  .hero-compare video { position: absolute; }
  /* 竖屏舞台自带显式 height，不能碰；只兜底横屏 */
  .cm-stage:not(.is-portrait),
  .cc-stage:not(.is-portrait) { height: 0; padding-top: 56.25%; }
}

/* 减弱动效偏好下关闭平滑滚动（页面内锚点仍会跳转，只是不再滚动动画） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}