/* ---------- section-product-hero.css — 产品页深色主视觉（左文案右视觉 + 底部数据组） ----------
   撞色渐变底：深青（--dark/--deep）→ 朱砂（--acc）侧向发展，光斑通透；
   左列眉题/大标题/副题/双 CTA，右列终端视觉；底部数据组随 hero 同底、发丝分隔。
   令牌：G §13，禁裸 hex；动效走全局 [data-lf-fade-in] */

.lf-phero {
  position: relative;
  overflow: hidden;
  /* 上下内边距：左右文案与右侧视觉同一行居中，故上下取同一档 → 文字块上下留白对称。
     原为 7vw（1440 约 101px）/ 48px，上重下轻，眉题视觉上被压低（客户 2026-09）；
     现改为 2.5rem 起、3.5vw 递增、上限 3.5rem（1440 约 50px），移动端 40px */
  padding-block: clamp(2.5rem, 3.5vw, 3.5rem);
  background:
    linear-gradient(112deg,
      var(--dark) 0%,
      var(--deep) 44%,
      color-mix(in srgb, var(--acc) 42%, var(--deep)) 100%);
  color: var(--text-inverse);
}

/* 右侧插图（可选，资产引用）：替代行情卡 + 走势图 */
.lf-phero__visual--image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 暖色光环：把插图托成视觉焦点，并与 hero 渐变形成自然过渡 */
.lf-phero__visual--image::before {
  content: "";
  position: absolute;
  inset-block: -8%;
  inset-inline: -12%;
  z-index: 0;
  background:
    radial-gradient(closest-side at 56% 42%,
      color-mix(in srgb, var(--acc-hi) 34%, transparent) 0%,
      color-mix(in srgb, var(--acc) 17%, transparent) 46%,
      transparent 78%),
    radial-gradient(closest-side at 34% 78%,
      color-mix(in srgb, var(--pri3) 26%, transparent) 0%,
      transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}

.lf-phero__img {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: min(100%, 420px);
  block-size: auto;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.45)) saturate(1.08) contrast(1.04) brightness(1.03);
}

/* 背景图（可选，资产引用；页面级设定，未设置时保持纯渐变） */
.lf-phero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 左侧渐隐遮罩：保证有背景图时文案仍有足够对比度 */
.lf-phero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(4, 7, 10, 0.95) 0%,
    rgba(6, 10, 15, 0.80) 38%,
    rgba(8, 12, 18, 0.24) 66%,
    rgba(8, 12, 18, 0) 82%);
}

.lf-phero__glow,
.lf-phero__grid {
  position: relative;
  z-index: 1;
}

/* 渐变光斑（通透感：朱砂/青碧低透明度，仅装饰） */
.lf-phero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.lf-phero__glow--a {
  inset-inline-end: -16%;
  inset-block-start: -40%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--acc), transparent 70%);
  opacity: 0.5;
}

.lf-phero__glow--b {
  inset-inline-start: -14%;
  inset-block-end: -46%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--pri2), transparent 70%);
  opacity: 0.35;
}

.lf-phero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-8), 4vw, var(--space-11));
  align-items: center;
}

.lf-phero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* 眉题/大标题上下居中（客户 2026-08） */
}

/* 无右侧终端视觉（visual_* 全空，如假期与交割时间页）：单列、文案区限宽，避免右侧空白列 */
.lf-phero--copy-only {
  /* 只有眉题 + 大标题时上下留白改对称且收紧：原 7vw（1440 约 101px）偏大，
     文字在视觉上被压低（客户 2026-09：缩小与上部的间距） */
  padding-block: clamp(var(--space-8), 4vw, var(--space-12)) clamp(var(--space-9), 4vw, var(--space-12));
}

.lf-phero--copy-only .lf-phero__grid {
  grid-template-columns: minmax(0, 1fr);
}

.lf-phero--copy-only .lf-phero__copy {
  max-width: 62rem;
  padding-block: 0;
}

.lf-phero--copy-only .lf-phero__title {
  max-width: 24ch;
  font-size: clamp(32px, 4vw, 56px);
}

.lf-phero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-hi);
}

.lf-phero__eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--acc-hi);
}

.lf-phero__title {
  margin: 0 0 var(--space-5);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 900;
  line-height: 1.16;
  max-width: 18ch;
  text-wrap: balance; /* 多行标题均衡断行：forex 文案恰 18 字符贴 18ch 上限，
                         375/1440 断 [11]+[7]（Stage A P-02 遗留）；单行零副作用 */
  color: var(--text-inverse);
}

.lf-phero__title em {
  color: var(--acc-hi);
  font-style: normal;
}

.lf-phero__sub {
  margin: 0 0 var(--space-7);
  max-width: 54ch;
  font-size: var(--text-5);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.86);
}

.lf-phero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* 右列终端视觉：报价卡 + 浮动点差徽章 + SVG 走势 */
.lf-phero__visual {
  position: relative;
  min-height: 300px;
}

.lf-phero__card {
  position: absolute;
  border-radius: var(--radius-base);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

.lf-phero__card--quote {
  inset-inline-end: 2%;
  inset-block-end: 4%;
  width: 200px;
  padding: var(--space-4);
}

.lf-phero__card-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
}

.lf-phero__card-num {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--num-font);
  font-size: 30px;
  font-weight: 800;
  color: var(--text-inverse);
}

.lf-phero__card-chg {
  display: block;
  margin-block-start: var(--space-1);
  font-family: var(--num-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--up-hi);
}




.lf-phero__chart {
  position: absolute;
  inset-inline: 8% 10%;
  inset-block-start: 32%;
  width: 82%;
  height: auto;
}

/* 底部数据组（与 hero 同底，发丝分隔；标签在上/数字在下，参考示例节奏） */
.lf-phero__stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-7) 0;
  margin-block-start: clamp(var(--space-9), 5vw, var(--space-12));
  margin-block-end: var(--space-7); /* 与下边距离（客户 2026-09） */
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}

.lf-phero__stat {
  text-align: center;
}

.lf-phero__stat + .lf-phero__stat {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.42) 18%, rgba(255, 255, 255, 0.42) 82%, transparent);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: inline-start;
}

.lf-phero__stat-lbl {
  display: block;
  margin-block-end: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.lf-phero__stat-num {
  display: block;
  font-family: var(--num-font);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--text-inverse);
}

@media (max-width: 900px) {
  .lf-phero__grid {
    grid-template-columns: 1fr;
  }

  .lf-phero__visual {
    min-height: 260px;
  }

  .lf-phero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-3);
  }

  .lf-phero__stat:nth-child(3) {
    border-inline-start: 0;
    background-image: none;
  }
}

/* 多段副标题（客户 2026-09）：段与段之间不留间距
   —— 间距来自上一段的 margin-block-end，需用 :has 归零 */
.lf-phero__sub + .lf-phero__sub {
  margin-block-start: 0;
}

.lf-phero__sub:has(+ .lf-phero__sub) {
  margin-block-end: 0;
}

.lf-phero__sub + .lf-phero__sub:last-of-type {
  margin-block-end: var(--space-7);
}

/* ---------- 整幅半透明黑蒙版 + 标题居中（客户 2026-09，about 页 hero） ---------- */
.lf-phero--overlay-full .lf-phero__bg::after {
  background: rgba(6, 10, 14, 0.58);
}

.lf-phero--align-center .lf-phero__copy {
  text-align: center;
  margin-inline: auto;
  align-items: center;
}

.lf-phero--align-center .lf-phero__title,
.lf-phero--align-center .lf-phero__sub {
  margin-inline: auto;
  text-align: center;
}

.lf-phero--align-center .lf-phero__cta {
  justify-content: center;
}

.lf-phero.lf-phero--align-center .lf-phero__grid {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- 高版式 hero：板块更高、文案垂直居中，标题留白更舒展（客户 2026-09，about 页） ---------- */
.lf-phero--tall {
  display: grid;
  align-content: center;
  min-block-size: clamp(420px, 46vw, 640px);
}

.lf-phero--align-center .lf-phero__title {
  line-height: 1.24;
  letter-spacing: -0.005em;
  /* 客户 2026-09：标题上下间距 2rem */
  margin-block: 2rem;
}

/* ---------- Banner 版式（客户 2026-09 参考示例图：圆角内嵌横幅 + 右侧 3D 插图溢出） ---------- */
.lf-phero--banner {
  margin: var(--space-5) clamp(16px, 2.5vw, 32px) var(--space-6);
  border-radius: 28px;
  min-block-size: clamp(320px, 30vw, 460px);
  overflow: visible;
  isolation: isolate;
}

.lf-phero--banner .lf-phero__bg,
.lf-phero--banner::before {
  border-radius: 28px;
}

.lf-phero--banner .lf-phero__glow {
  display: none;
}

.lf-phero--banner .lf-phero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-10);
}

.lf-phero--banner .lf-phero__visual {
  align-self: center;
  transform: translateY(0);
}

.lf-phero--banner .lf-phero__img {
  inline-size: min(118%, 560px);
  margin-inline-start: -8%;
  filter: drop-shadow(0 34px 54px rgba(0, 0, 0, 0.5));
}

/* 浮出效果：插图用 scale 放大（transform 不参与布局），视觉上顶出横幅上下边界 */
.lf-phero--banner .lf-phero__img {
  transform: scale(1.02);
  transform-origin: center center;
  transition: transform var(--duration-slow) var(--ease);
}

@media (min-width: 1080px) {
  .lf-phero--banner .lf-phero__visual--image {
    margin-block: 0;
  }

  .lf-phero--banner .lf-phero__img {
    inline-size: min(112%, 520px);
    margin-inline-start: -6%;
    transform: scale(1.26);
  }
}

/* Banner 版式叠层顺序（客户 2026-09）：背景图在最底，插图与文案叠在背景图之上，蒙版只作用于背景 */
.lf-phero--banner {
  position: relative;
}

.lf-phero--banner .lf-phero__bg {
  z-index: 0;
}

.lf-phero--banner .lf-phero__grid {
  position: relative;
  z-index: 2;
}

.lf-phero--banner .lf-phero__visual {
  z-index: 3;
}

/* 浮出效果（客户 2026-09）：横幅高度收紧，插图布局盒小于横幅、再按 scale 放大 → 顶出上下边界 */
@media (min-width: 1080px) {
  .lf-phero--banner {
    block-size: clamp(360px, 30vw, 440px);
    min-block-size: 0;
  }

  .lf-phero--banner .lf-phero__grid {
    block-size: 100%;
    padding-block: 0;
  }

  .lf-phero--banner .lf-phero__img {
    inline-size: min(96%, 460px);
    margin-inline-start: -4%;
    transform: scale(1.34);
  }
}

/* Banner 背景图：左侧圆角与右侧一致 + 左缘渐隐过渡出通透质感（客户 2026-09） */
.lf-phero--banner .lf-phero__bg {
  border-radius: 28px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 16%, black 42%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 16%, black 42%, black 100%);
}

.lf-phero--banner .lf-phero__bg::after {
  border-radius: 28px;
  background:
    radial-gradient(closest-side at 78% 46%, color-mix(in srgb, var(--pri3) 26%, transparent) 0%, transparent 72%),
    linear-gradient(to right,
      color-mix(in srgb, var(--dark) 92%, transparent) 0%,
      color-mix(in srgb, var(--deep) 72%, transparent) 34%,
      color-mix(in srgb, var(--deep) 34%, transparent) 62%,
      transparent 100%);
}

/* ---------- 行情卡内插图：不做渐变遮罩，按卡片质感呈现（客户 2026-09，forex hero） ---------- */
.lf-phero__card--img {
  inline-size: min(100%, 300px);
  padding: var(--space-3);
  inset-inline-end: 6%;
}

.lf-phero__card--img .lf-phero__img {
  inline-size: 100%;
  block-size: auto;
  filter: none;
  border-radius: 12px;
  display: block;
}

@media (min-width: 1200px) {
  .lf-phero__card--img {
    inline-size: min(100%, 340px);
  }
}

/* 背景图完整显示（客户 2026-09：forex hero 不裁切，整图完整呈现） */
.lf-phero--bg-contain .lf-phero__bg {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
}

.lf-phero--bg-contain .lf-phero__bg::after {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--dark) 94%, transparent) 0%,
    color-mix(in srgb, var(--deep) 68%, transparent) 38%,
    color-mix(in srgb, var(--deep) 20%, transparent) 66%,
    transparent 100%);
}

/* 文案容器最小高度（客户 2026-09：纯文案版式下 hero 内容区至少 300px 高） */
.lf-phero--copy-only .lf-phero__grid {
  min-block-size: 300px;
  align-content: center;
}

/* ---------- 数据组对齐首页 hero（客户 2026-09）：纵向居中、数值在上、发丝分隔线 ---------- */
.lf-phero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.lf-phero__stat + .lf-phero__stat {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
}

.lf-phero__stat-lbl {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* web-trading hero：插图已换为抠好的透明底素材，无需卡片圆角与投影框 */

/* web-trading hero：浅色底 3D 插图以圆角卡片呈现（客户 2026-09 定稿：简单、轻量） */
.lf-phero--banner .lf-phero__img {
  border-radius: 20px;
}

/* ---------- 浅色主题 hero（客户 2026-09，web-trading：浅底 + 深字，参考 MT4 / TradingView 横幅） ---------- */
.lf-phero--light .lf-phero__eyebrow {
  color: var(--acc);
}

.lf-phero--light .lf-phero__title {
  color: var(--ink);
}

.lf-phero--light .lf-phero__title em {
  color: var(--acc);
}

.lf-phero--light .lf-phero__sub {
  color: var(--ink-2);
}

.lf-phero--light .lf-btn-hero--ghost {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  background: transparent;
}

.lf-phero--light .lf-btn-hero--ghost:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.lf-phero--light .lf-phero__stat-num {
  color: var(--ink);
}

.lf-phero--light .lf-phero__stat-lbl {
  color: var(--ink-3);
  text-shadow: none;
}

.lf-phero--light .lf-phero__stat + .lf-phero__stat {
  border-inline-start-color: color-mix(in srgb, var(--ink) 14%, transparent);
}

.lf-phero--light .lf-phero__bg::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 42%, transparent 72%);
}

.lf-phero--light .lf-phero__img {
  filter: drop-shadow(0 30px 50px rgba(20, 30, 34, 0.18)) drop-shadow(0 0 60px rgba(255, 122, 47, 0.28));
  border-radius: 0;
}

/* 浅色主题：hero 自身底色改为浅灰白，左侧不再露出深色底（客户 2026-09） */
.lf-phero--light {
  background: linear-gradient(96deg, #F7F8F9 0%, #FBFBFC 46%, #EFF1F3 100%);
}

.lf-phero--light .lf-phero__bg::after,
.lf-phero--light .lf-phero__bg {
  mix-blend-mode: normal;
}

/* 浅色主题：主 CTA 保持朱砂实底白字（深色底专用的发光按钮在浅底上不可见） */
.lf-phero.lf-phero--light .lf-btn-hero.lf-btn--glow {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--acc) 62%, transparent);
}

.lf-phero.lf-phero--light .lf-btn-hero.lf-btn--glow:hover {
  background: var(--acc-hi);
  color: #fff;
}

/* ---------- accounts hero 精修（客户 2026-09）：强制两行、渐变文字、下方过渡带 ---------- */
.lf-phero--light .lf-phero__title {
  white-space: pre-line;                 /* 按文案中的换行强制断行，避免词语被割裂 */
  font-size: clamp(30px, 3.1vw, 46px);   /* 字号下调 */
  letter-spacing: -0.02em;               /* tracking-tight */
  line-height: 1.22;
  background-image: linear-gradient(100deg, var(--ink) 0%, var(--deep) 42%, var(--acc) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* hero 与下一板块之间的过渡：微弱光带 + 极淡网格 */
.lf-phero--light::after {
  z-index: 0;
}

/* 紧随其后的板块：顶部铺极淡网格，打破纯白断层 */
.lf-phero--light + .lf-pdetail,
.lf-phero--light + .lf-ccards {
  position: relative;
}

.lf-phero--light + .lf-pdetail::before,
.lf-phero--light + .lf-ccards::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 220px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.lf-phero--light + .lf-pdetail > .lf-container,
.lf-phero--light + .lf-ccards > .lf-container {
  position: relative;
  z-index: 1;
}

/* 「账户总览」：左侧竖线改为红色渐变下划线 */
.lf-pdetail--title-bar .lf-pdetail__title {
  padding-inline-start: 0;
  border-inline-start: 0;
  position: relative;
  padding-block-end: var(--space-3);
}

.lf-pdetail--title-bar .lf-pdetail__title::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: min(100%, 180px);
  block-size: 3px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--acc) 0%, color-mix(in srgb, var(--acc-hi) 70%, transparent) 55%, transparent 100%);
}

/* faq hero：蒙版渐变与 news 页 hero 对齐（白色自左向右渐隐） */
.lf-phero--light.lf-phero--banner .lf-phero__bg::after {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.86) 42%,
    rgba(255, 255, 255, 0.32) 68%,
    rgba(255, 255, 255, 0.06) 100%);
}