/* ============================================================
   LAKEFOX — section-cta-banner.css
   开户引导 CTA（版本 G · v7.html §CTA —— 重构对齐 v7 section.cta）
   结构：印章 strip（border-block-start 12px 渐变，v7 母题）→ 深底 --dark + 朱砂圆环（::before/::after，
     ≤.55 opacity，仅装饰不承载内容）+ 水印 ≤10% → 标题白字 → 数据组（等宽大数字 + 弱化标签，
     深底白字 + 1px rgba(255,255,255,.14) 竖分隔线）→ btn-cta（17/800 + 44px 白圆箭头）
   对齐 v7 .cta：垂直节奏一层 104px（content，去 section 层双倍 padding）；content 用块级
     text-align:center（弃 flex+gap，避免与 stats margin 叠加）；stats margin 56/52（v7 数值）
   对比度：白字 on --dark ≈16.8:1 ✓；朱砂底白字 ≈4.9:1 ✓（CTA）
   母题循环（spec-g §07）：btn-cta 为页尾唯一最大按钮
  ============================================================ */

.lf-cta-banner {
  position: relative; /* .lf-watermark / 圆环装饰锚点 */
  overflow: hidden; /* 裁掉圆环越界 */
  /* 极光式颜色过渡（客户 2026-09 第三次设计：参考截图 左上深 → 中央青 → 右下橙，柔化通透） */
  border-radius: 28px; /* 圆角卡片（参考截图） */
  margin: var(--space-5) clamp(16px, 2.5vw, 32px) var(--space-4);
  background:
    radial-gradient(52% 96% at 88% 92%, rgba(200, 67, 43, 0.52), transparent 68%), /* 右下朱砂橙 */
    radial-gradient(46% 80% at 102% 28%, rgba(222, 98, 72, 0.36), transparent 62%), /* 右侧橙晕 */
    radial-gradient(60% 100% at 10% 0%, rgba(11, 26, 29, 0.92), transparent 72%), /* 左上深墨 */
    linear-gradient(118deg, var(--dark) 0%, var(--deep) 34%, var(--pri) 64%, color-mix(in srgb, var(--acc) 52%, var(--pri3)) 100%); /* 青→橙主过渡 */
  color: var(--text-inverse);
  /* 垂直节奏由 content 层统一承担（v7 .cta-in padding:104px 0）；此处不设 padding，避免双倍 */
}

/* G 母题 · 朱砂圆环（spec-g §06：rgba(200,67,43,.3) 粗边圆环，opacity ≤.55） */
.lf-cta-banner::before {
  content: "";
  position: absolute;
  inset-inline-end: -160px;
  inset-block-start: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 72px solid rgba(200, 67, 43, 0.16); /* 朱砂透明化（装饰，非组件裸 hex） */
  opacity: 0.3;
  pointer-events: none;
}

.lf-cta-banner__ring {
  position: absolute;
  inset-inline-end: -80px;
  inset-block-end: -120px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: 1px dashed rgba(200, 67, 43, 0.22); /* 朱砂透明化（虚线环端点，v2.2） */
  animation: lf-spin 60s linear infinite; /* 慢速旋转（≥1.9s 防频闪） */
  pointer-events: none;
}

@keyframes lf-spin {
  to { transform: rotate(360deg); }
}

.lf-cta-banner::after {
  content: "";
  position: absolute;
  inset-inline-start: -120px;
  inset-block-end: -200px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 67, 43, 0.33), transparent 70%); /* 朱砂透明化 */
  pointer-events: none;
}

/* 内容层压在水印/圆环之上（z-index: 0 → 1） */
.lf-cta-banner__content {
  position: relative;
  z-index: 1;
  text-align: center; /* v7 .cta-in：块级流 + 居中，垂直节奏 104px 由 padding 承担 */
  padding-block: 104px; /* v7 §CTA .cta-in 垂直节奏 */
}

.lf-cta-banner__title {
  max-inline-size: 32ch;
  margin-inline: auto; /* 块级流 + text-align:center 下，使受限宽标题块水平居中（v7 .cta-in） */
  color: var(--text-inverse);
  margin-block: 0;
}

/* 数据组（spec-g §07 深底变体：白字 + 竖分隔线） */
.lf-cta-banner__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 56px auto 52px; /* v7 .cta-stats 节奏 */
  max-width: 960px;
}

.lf-cta-banner__stats > div + div {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14); /* 深底竖分隔线基底 */
  /* 渐变三段线：中段实、两端透明（v2.2 线条质感，逻辑起点定位） */
  background-image: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0.5) 82%, transparent);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: inline-start;
}

.lf-cta-banner__num {
  font-family: var(--num-font);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 800;
  color: var(--text-inverse);
}

.lf-cta-banner__lbl {
  margin-block-start: 8px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65); /* 深底弱化文字（spec-g §07） */
}

/* btn-cta（spec-g §07：17/800 + 右端 44px 白圆箭头 + 影 .55；页尾唯一最大按钮） */
.lf-cta-banner__action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* 高光微渐变 v2.2：先 background-color 再 background-image，
     避免 background 简写（见下）清空 image——原声明次序 bug 使高光从未渲染（Stage A P-05） */
  background-color: var(--acc);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 55%);
  color: var(--text-inverse);
  font-weight: 800;
  font-size: 17px;
  padding: 12px 12px 12px 34px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-acc-strong);
  transition: background-color var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease);
  text-decoration: none;
}

.lf-cta-banner__action:hover {
  background-color: var(--acc-hi);
  transform: translateY(-2px);
  box-shadow: var(--shadow-acc-strong), 0 0 0 6px rgba(200, 67, 43, 0.12); /* 朱砂光晕环（--acc 透明化，v2.2） */
}

.lf-btn-cta__cir {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
  color: var(--acc);
}

.lf-btn-cta__cir svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* 箭头 hover 位移（v2.2 微动感；RTL 镜像） */
.lf-cta-banner__action .lf-btn-cta__cir {
  transition: transform 0.3s var(--ease);
}

.lf-cta-banner__action:hover .lf-btn-cta__cir {
  transform: translateX(3px);
}

[dir="rtl"] .lf-cta-banner__action:hover .lf-btn-cta__cir {
  transform: translateX(-3px);
}

@media (max-width: 820px) {
  .lf-cta-banner__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3); /* 375 两列 2×min-content+gap 曾超容器 5px（2×141.5+20=303>298，被 overflow:hidden 掩盖，Stage A C-03）：gap 收窄消除理论溢出 */
  }

  .lf-cta-banner__stats > div + div {
    border-inline-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-cta-banner__ring {
    animation: none;
  }

  .lf-cta-banner__action .lf-btn-cta__cir,
  .lf-cta-banner__action:hover .lf-btn-cta__cir {
    transition: none;
    transform: none;
  }
}

/* 副标题（settings.sub，可选；深底弱化文字）
   与标题同居中，max-width 收敛，避免长句横跨全宽 */
.lf-cta-banner__sub {
  max-inline-size: 60ch;
  margin: var(--space-4) auto 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--leading-body);
}

/* CTA 按钮组（主按钮 + 可选次按钮，深底线框变体） */
.lf-cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.lf-cta-banner__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px; /* 触摸目标 ≥44px */
  padding: 14px 30px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-inverse); /* 白 on 深底 ≈16.8:1 ✓ */
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease),
    color var(--duration-base) var(--ease),
    border-color var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease);
}

.lf-cta-banner__secondary:hover {
  border-color: var(--acc-hi);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* 无数据组时（模板未配 stats）：sub/标题与按钮组之间恢复节奏；
   有 stats 时按钮组跟随 stats（其下距 52px），不再叠加 */
.lf-cta-banner__sub + .lf-cta-banner__actions,
.lf-cta-banner__title + .lf-cta-banner__actions {
  margin-block-start: var(--space-8);
}


/* 浅色主按钮（客户 2026-09 参考示例图：深色卡片 + 白底深字按钮） */
.lf-cta-banner--btn-light .lf-btn-cta {
  background: var(--bg-white);
  color: var(--ink);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ink) 45%, transparent);
}

.lf-cta-banner--btn-light .lf-btn-cta:hover {
  background: var(--soft);
  color: var(--ink);
}

.lf-cta-banner--btn-light .lf-btn-cta,
.lf-cta-banner--btn-light .lf-btn-cta span,
.lf-cta-banner--btn-light .lf-btn-cta__circle {
  color: var(--ink);
}