/* ============================================================
   LAKEFOX — section-hero.css
   首屏主视觉（sections/hero.liquid 顶部自引，版本 G · v7.html 结构）
   层级（v7 §hero）：深底 --dark → 背景层 z-0（电路纹理 ::after + K 线光柱 + 终端数据 + 扫描线）
     → 内容层 z-1（左对齐：tag → H1(em 朱砂) → sub → mail-pill + btn-hero + btn-qr）→ 行情带 band
   母题（spec-g §06）：电路走线 tile（仅深底）/ K 线光柱（blur22 opacity .55，绿 #2FBF8F 朱 青）
   动效（spec-g §08）：扫描线 5s / ticker 36s linear infinite；reduced-motion 关闭循环动画
   深底规格：白字基线 + 亮朱 --acc-hi 强调（tag/终端）；btn-hero 朱砂底深字 + 影 .55（spec-g §07）
   令牌全部引用 base.css :root（rgba 端点均注释来源，无裸 hex；#0B1A1D/#173A40/#7a2b1c 为 G 渐变端点）
   ============================================================ */

/* ---------- 容器：深色底 + 电路走线母题 ---------- */
.lf-hero {
  position: relative;
  overflow: hidden; /* 裁掉越界装饰 */
  min-height: calc(100vh - 72px); /* 占一屏（含 sticky header 高差） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark);
  color: var(--text-inverse); /* 深底白字基线 ≈16.8:1 ✓ */
}

/* 机柜网格线（v2.2 科技质感层：水平 1px 线 88px 间隔，深底低度，线条装饰） */
.lf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(23, 58, 64, 0.18) 0, /* --pri 透明化（网格线端点） */
    rgba(23, 58, 64, 0.18) 1px,
    transparent 1px,
    transparent 88px
  );
}

/* G 母题 · 电路走线（spec-g §06：72×72 tile / stroke rgba(200,67,43,.4) / 整层 opacity ≤.15，仅深底） */
.lf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2772%27%20height%3D%2772%27%3E%3Cg%20stroke%3D%27rgba%28200%2C67%2C43%2C.4%29%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M0%2018h24v18h24v24M72%2054H48V36H24%27/%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2718%27%20r%3D%272.5%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%2760%27%20r%3D%272.5%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%2736%27%20r%3D%272.5%27/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* ---------- 背景层（K 线光柱 / 终端数据 / 扫描线；容器 aria-hidden） ---------- */
.lf-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* K 线光柱（spec-g §06：8 根 × 64px，blur22，opacity .55；绿 #2FBF8F(--up-hi) / 朱 --acc / 青 --pri3） */
.lf-hero__candles {
  position: absolute;
  inset: 0;
  filter: blur(22px);
  opacity: 0.55;
}

* ============================================================
   LAKEFOX — section-hero.css
   首屏主视觉（sections/hero.liquid 顶部自引，版本 G · v7.html 结构）
   层级（v7 §hero）：深底 --dark → 背景层 z-0（电路纹理 ::after + K 线光柱 + 终端数据 + 扫描线）
     → 内容层 z-1（左对齐：tag → H1(em 朱砂) → sub → mail-pill + btn-hero + btn-qr）→ 行情带 band
   母题（spec-g §06）：电路走线 tile（仅深底）/ K 线光柱（blur22 opacity .55，绿 #2FBF8F 朱 青）
   动效（spec-g §08）：扫描线 5s / ticker 36s linear infinite；reduced-motion 关闭循环动画
   深底规格：白字基线 + 亮朱 --acc-hi 强调（tag/终端）；btn-hero 朱砂底深字 + 影 .55（spec-g §07）
   令牌全部引用 base.css :root（rgba 端点均注释来源，无裸 hex；#0B1A1D/#173A40/#7a2b1c 为 G 渐变端点）
   ============================================================ */

/* ---------- 容器：深色底 + 电路走线母题 ---------- */
.lf-hero {
  position: relative;
  overflow: hidden; /* 裁掉越界装饰 */
  min-height: calc(100vh - 72px); /* 占一屏（含 sticky header 高差） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark);
  color: var(--text-inverse); /* 深底白字基线 ≈16.8:1 ✓ */
}

/* 视频背景（客户 2026-09：Ultima Markets 背景视频，cover + 中度深罩层） */




/* 机柜网格线（v2.2 科技质感层：水平 1px 线 88px 间隔，深底低度，线条装饰） */
.lf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(23, 58, 64, 0.18) 0, /* --pri 透明化（网格线端点） */
    rgba(23, 58, 64, 0.18) 1px,
    transparent 1px,
    transparent 88px
  );
}

/* G 母题 · 电路走线（spec-g §06：72×72 tile / stroke rgba(200,67,43,.4) / 整层 opacity ≤.15，仅深底） */
.lf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2772%27%20height%3D%2772%27%3E%3Cg%20stroke%3D%27rgba%28200%2C67%2C43%2C.4%29%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M0%2018h24v18h24v24M72%2054H48V36H24%27/%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2718%27%20r%3D%272.5%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%2760%27%20r%3D%272.5%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%2736%27%20r%3D%272.5%27/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* ---------- 背景层（K 线光柱 / 终端数据 / 扫描线；容器 aria-hidden） ---------- */
.lf-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* K 线光柱（spec-g §06：8 根 × 64px，blur22，opacity .55；绿 #2FBF8F(--up-hi) / 朱 --acc / 青 --pri3） */
.lf-hero__candles {
  position: absolute;
  inset: 0;
  filter: blur(22px);
  opacity: 0.55;
}

.lf-hero__candle {
  position: absolute;
  inset-block-end: -6%;
  width: 64px;
  border-radius: 8px;
}


.lf-hero__candle--g { background: var(--up-hi); }
.lf-hero__candle--r { background: var(--acc); }
.lf-hero__candle--b { background: var(--pri3); }

/* 终端数据（v7：Plex Mono 12px/.14em；rgba(222,98,72,·) = --acc-hi 透明化） */
/* NODE SYNCED ● 呼吸（1.9s，spec-g §08 LED 闪烁档；仅 transform-free opacity） */
/* 终端光标 ▌（1.9s step-end 常显闪烁，模拟活动终端） */
@keyframes lf-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes lf-blink-step {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}


@keyframes lf-scan {
  0%, 100% { inset-block-start: 26%; }
  50% { inset-block-start: 62%; }
}

/* ---------- 内容层：左对齐（v7），压在所有装饰之上 ---------- */
.lf-hero__content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 118px 210px; /* v7 英雄区节奏：桌面 118/210（移动 80/150 见断点） */
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

/* 出场（v2.3）：hero 滚出视口 → 内容轻微上移变淡（animations.js 切类） */
.lf-hero__content.lf-exit--out {
  opacity: 0.35;
  transform: translateY(-16px);
}

/* 入场（v2.3）：首屏一次性错峰入场（tag → H1 → sub → CTA），0.7s；
   G§08 首屏直接可读的稍放宽：总时长 <1s、延迟 ≤.35s；reduced-motion 关闭 */
.lf-hero__tag,
.lf-hero__title,
.lf-hero__subtitle,
.lf-hero__cta {
  animation: lf-rise 0.7s var(--ease) backwards;
}

.lf-hero__tag { animation-delay: 0.05s; }
.lf-hero__title { animation-delay: 0.15s; }
.lf-hero__subtitle { animation-delay: 0.25s; }
.lf-hero__cta { animation-delay: 0.35s; }

@keyframes lf-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* hero-tag（spec-g §03：12.5/700/.22em/亮朱 + 2px 朱砂前横线，仅深底） */
.lf-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 22px;
  font-size: 0.78125rem; /* 12.5px */
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--acc-hi);
}

.lf-hero__tag::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--acc);
}

/* H1（spec-g §03：clamp(40,5.2vw,72)/900/lh1.14；强调词 em 朱砂，去斜体） */
.lf-hero__title {
  margin-block: 0;
  font-size: var(--text-h1);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.01em;
  text-wrap: balance; /* 长中文标题断点均衡（Stage A P-02 精神，防末行短尾） */
  color: var(--text-inverse);
}

.lf-hero__title em {
  font-style: normal;
  color: var(--acc); /* 深底强调大字号（≥3:1 ✓） */
}

/* 副标题（v7：17px / rgba(255,255,255,.82) / max 560px / 1.75） */
.lf-hero__subtitle {
  margin-block: 20px 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82); /* 深底次级文字（spec-g §02） */
}

/* ---------- CTA 组：mail-pill + btn-hero + btn-qr（v7 顺序） ---------- */
.lf-hero__cta {
  margin-block-start: 38px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* 邮件捕获条 mail-pill（spec-g §07：白底胶囊 + 24px 左距 + 34px 图标位；聚焦描边朱砂） */
.lf-mail-pill {
  display: flex;
  align-items: center;
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 6px 8px 6px 24px;
  width: min(430px, 100%);
  transition: box-shadow var(--duration-base) var(--ease);
}

.lf-mail-pill:focus-within {
  box-shadow: 0 0 0 2px var(--acc);
}

.lf-mail-pill__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
}

.lf-mail-pill__input::placeholder {
  color: var(--ink-3);
}

.lf-mail-pill__ic {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
}

.lf-mail-pill__ic svg {
  width: 18px;
  height: 18px;
}

/* btn-hero（spec-g §07：朱砂底深字 + 影 .55；hover 亮朱上浮） */
.lf-btn-hero {
  display: inline-block;
  background: var(--acc);
  color: var(--dark); /* 朱砂底深字 ≈4.4:1 ✓（btn-hero 规格） */
  font-weight: 800;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-acc-strong);
  transition: background var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease);
  text-decoration: none; /* 无 UA 下划线（v7 a 重置语义，补自组件） */
}

.lf-btn-hero:hover {
  background: var(--acc-hi);
  transform: translateY(-2px);
}

/* btn-hero--ghost（可选次 CTA：深底白字线框，hover 亮朱描边）
   白 on --dark ≈16.8:1 ✓；线框 1px rgba(255,255,255,.38)，与 CTA 组齐高对齐 */
.lf-btn-hero--ghost {
  background: transparent;
  color: var(--text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: none;
}

.lf-btn-hero--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--acc-hi);
}

/* btn-qr（spec-g §07：52px 朱砂圆钮 + 影 .55；二维码线条深色） */
.lf-btn-qr {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--dark);
  box-shadow: var(--shadow-acc-strong);
  transition: background var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease);
  text-decoration: none;
}

.lf-btn-qr:hover {
  background: var(--acc-hi);
  transform: translateY(-2px);
}

.lf-btn-qr svg {
  width: 22px;
  height: 22px;
}


/* 底部数据组（参考截图：无底色底、灰白排版、竖分隔线，四列等宽，贴下沿居中）
   可读性：文字投影 + 中心柔和暗晕（不遮挡视频，仅局部增深） */


.lf-hero__stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr)); /* 四列等宽 */
  width: 100%; /* 全宽（客户 2026-09） */
  max-width: 760px;
  margin: 0 auto 30px;
  padding: 10px 6px;
  list-style: none;
}

.lf-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

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

.lf-hero__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);
}

.lf-hero__stat-num {
  font-family: var(--font-heading-family, system-ui, sans-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--text-inverse); /* 白色大数字 */
  white-space: nowrap;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
}

@media (max-width: 900px) {
  

.lf-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 避开 160px 最小宽在小屏溢出 */
  }
}

@media (max-width: 640px) {
  

.lf-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) 0;
    max-width: 100%;
  }

  .lf-hero__stat:nth-child(3) {
    border-inline-start: 0;
  }
}


/* 视频蒙版（客户 2026-09：标题/数据组可读性——左深右淡 + 上下暗角） */
.lf-hero__video {
  z-index: 0;
}

.lf-hero__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(11, 26, 29, 0.86),
      rgba(11, 26, 29, 0.55) 42%,
      rgba(11, 26, 29, 0.24) 72%,
      rgba(11, 26, 29, 0.12)),
    linear-gradient(180deg,
      rgba(11, 26, 29, 0.38),
      transparent 28%,
      transparent 58%,
      rgba(11, 26, 29, 0.62));
}


/* ---------- 手机端精修（客户 2026-09：375px 基线） ---------- */
@media (max-width: 900px) {
  .lf-hero__content {
    padding-block: 72px 24px; /* 移动节奏（桌面 118/210 → 行带已移除） */
  }

}

@media (max-width: 640px) {
  .lf-hero__content {
    padding-block: 56px 16px;
  }

  .lf-hero__title {
    font-size: clamp(26px, 7.5vw, 30px);
  }

  .lf-hero__subtitle {
    font-size: var(--text-4);
    line-height: 1.8;
  }

  /* 终端数据在小屏隐藏（避免与标题重叠） */
  .lf-hero__cta {
    margin-block-start: 24px;
    gap: 12px;
  }

  /* 按钮组：主/次按钮全宽堆叠（移动更易点击） */
  .lf-hero__cta .lf-btn-hero,
  .lf-hero__cta .lf-btn-qr {
    flex: 1 1 100%;
    min-width: 0;
    text-align: center;
  }

  .lf-mail-pill {
    padding-inline-start: 18px;
  }

  .lf-hero__stats {
    margin-block-end: 18px;
    padding-block: 10px;
  }

  .lf-hero__stat-num {
    font-size: clamp(22px, 6.5vw, 26px);
  }
}