/*
 * BeeHears 官网首页（index.html / zh/index.html / zh-TW/index.html 共用）
 * 依赖 common.css 的设计变量与组件，这里只放首页板块的布局。
 * 规范：STYLE.md 第一章「共同底线」+ 第三章「落地页：品牌蓝」
 * 颜色一律取 common.css 变量；手写 rgba 只出现在 Hero 柔光衬底与 CTA 顶部高光两处。
 */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* 粒子画布容器：模块在里面建 canvas 铺满；指针监听在 window 上，这里不接事件 */
.hero-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* z-index:1 建立层叠上下文，衬底用 -1 压在文字下面（reduced-motion 下文字没有 transform 也一样） */
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px var(--gutter) 64px;
  text-align: center;
}

.hero-halo {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: -1;
  width: min(56rem, 98vw);
  height: 20rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(244, 246, 250, 0.92) 0%, rgba(244, 246, 250, 0.55) 46%, transparent 74%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .hero-halo {
    background: radial-gradient(ellipse, rgba(10, 12, 18, 0.92) 0%, rgba(10, 12, 18, 0.55) 46%, transparent 74%);
  }
}

.hero-kicker {
  max-width: 40rem;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;   /* 中文上限 0.1em */
  text-transform: uppercase;
  text-wrap: balance;
}

/* 透明度写在颜色 alpha（--c-wordmark）上，入场动画收尾的 opacity:1 不会覆盖 */
.hero-wordmark {
  margin-top: 20px;
  color: var(--c-wordmark);
  font-size: clamp(2.5rem, 11vw, 8.5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.hero-subtitle {
  max-width: 36rem;
  margin-top: 24px;
  color: var(--c-muted);
  font-size: 16px;
  line-height: 1.625;
  text-wrap: pretty;
}
.hero-subtitle .accent { font-weight: 500; }
@media (min-width: 768px) {
  .hero-subtitle { font-size: 18px; }
}

.hero-actions {
  justify-content: center;
  margin-top: 32px;
}

/* 底部「向下」提示：小字 + 1px 竖线，窄屏隐藏 */
.hero-scroll {
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  margin: 0 auto 32px;
  padding: 0 24px;
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-btn) var(--ease), transform var(--dur-btn) var(--ease);
}
.hero-scroll::after {
  content: '';
  width: 1px;
  height: 32px;
  margin-top: 12px;
  background: color-mix(in srgb, var(--c-text) 35%, transparent);
}
.hero-scroll:hover { color: var(--c-text); text-decoration: none; }
.hero-scroll:active { transform: scale(0.98); }
@media (min-width: 640px) {
  .hero-scroll { display: flex; }
}

/* ---------- 板块标题：长句两行时平衡断行 ---------- */
.section-heading { text-wrap: balance; }
/* 中文字与字之间都能断，balance 会从词中间切（「开 / 始」）：改回默认换行，上蓝的后半句整体换行 */
:lang(zh) .section-heading { text-wrap: wrap; }
:lang(zh) .section-heading .accent { white-space: nowrap; }

/* ---------- 能力数字带 ---------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-hairline);
}
.stat {
  min-width: 0;
  padding: 32px 24px 32px 0;
}
.stat:nth-child(even) {
  padding: 32px 0 32px 24px;
  border-left: 1px solid var(--c-hairline);
}
@media (min-width: 768px) {
  .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat,
  .stat:nth-child(even) { padding: 40px 28px; }
  .stat + .stat { border-left: 1px solid var(--c-hairline); }
}
.stat-value {
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-label {
  margin-top: 12px;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- 特性 bento：3 列，宽卡文字走左列、配图走右列 ---------- */
.bento {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}
.bento-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.bento-card h3 {
  margin-top: 20px;
  letter-spacing: -0.02em;
}
.bento-card p {
  max-width: 28rem;
  margin-top: 12px;
  text-wrap: pretty;
}
.bento-art {
  min-width: 0;
  margin-top: 32px;
  color: var(--c-accent);
}
.bento-art svg {
  width: 100%;
  height: 112px;
}
@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 48px;
  }
  /* 文字列顶对齐：同一行的窄卡折行更多时，两张卡的图标仍在同一高度 */
  .bento-wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 32px;
  }
  .bento-wide .bento-art { align-self: center; margin-top: 0; }
}

/* ---------- 如何使用：左栏步骤，右栏代码面板 ---------- */
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 48px;
}
@media (min-width: 1024px) {
  .how-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.steps {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  gap: 16px;
}
.step-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: var(--radius-md);
  background: var(--c-ink);
  color: var(--c-surface);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
@media (prefers-color-scheme: dark) {
  .step-num { background: var(--c-text); color: var(--c-ink); }
}
.step-body { min-width: 0; }
.step-body h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.step-body p {
  max-width: 28rem;
  margin-top: 6px;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.625;
  text-wrap: pretty;
}
.step-body .step-chip {
  display: inline-block;
  max-width: 100%;
  margin-top: 10px;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--c-chip);
  box-shadow: none;
  color: var(--c-text);
  font-size: 12px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

/* ---------- 支持的模型：厂商跑马灯 + 模型卡 ---------- */
.marquee {
  margin: 0 var(--gutter) 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%);
}
/* 轨道放两份相同内容，平移 -50% 正好接上 */
.marquee-track {
  display: flex;
  width: max-content;
  animation: home-marquee 42s linear infinite;
}
.marquee-list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee-list li {
  display: flex;
  align-items: center;
  padding: 0 32px;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marquee-list li::after {
  content: '';
  width: 1px;
  height: 28px;
  margin-left: 32px;
  background: color-mix(in srgb, var(--c-text) 15%, transparent);
}
@media (min-width: 768px) {
  .marquee-list li { font-size: 32px; }
}
@keyframes home-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.model-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .model-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.model-card p { margin-top: 12px; }

.models-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ---------- CTA 反色大卡 ---------- */
.cta-section { padding: 32px 0 48px; }
@media (min-width: 768px) {
  .cta-section { padding-bottom: 80px; }
}
.cta-card {
  position: relative;
  overflow: hidden;
  padding: 64px 24px;
  border-radius: var(--radius-card);
  text-align: center;
}
@media (min-width: 768px) {
  .cta-card { padding: 96px 48px; }
}
.cta-glow {
  position: absolute;
  inset: 0 0 auto;
  height: 16rem;
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.09) 0%, transparent 62%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .cta-glow { background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.05) 0%, transparent 62%); }
}
.cta-body { position: relative; }
.cta-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.cta-lead {
  max-width: 28rem;
  margin: 20px auto 0;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.625;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .cta-lead { font-size: 16px; }
}
.cta-actions {
  justify-content: center;
  margin-top: 32px;
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  /* 跑马灯静止：去掉复制的那一份，全部厂商换行排开 */
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee-track {
    width: auto;
    justify-content: center;
    animation: none;
  }
  .marquee-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
  }
  .marquee-list[aria-hidden="true"] { display: none; }
  /* 静止时是一面换行排开的厂商名墙，分隔线会挂在行尾，去掉 */
  .marquee-list li::after { display: none; }

  .hero-scroll:active { transform: none; }
}