@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   首屏 · 质感打磨 r22 · 2026-09-23
   委托人原话:「这个首屏就很不错,再美化一些,更高级前沿」。
   ⇒ 不重做版式(r19 的产品即背景保留),只加一层「材质与光」:
     光场 / 颗粒 / 玻璃 / 字的层次 / 按钮的重量 / 入场节奏。

   ⚠️ 一个色值都没新造 —— 全部来自 brand/tokens-dark.css,
      靠 color-mix 取不同浓度。手册 P18 仍是唯一色源。
   ══════════════════════════════════════════════════════════════════ */

/* ── §1 光场 ──────────────────────────────────────────────────────
   原来首屏的底是一张 SVG,明暗一次画死,放大后能看出色带。
   这里在它上面加三层极低浓度的光:主色在右上(产品面那一侧)、
   辅助青在左下(压住画面底角)、再一道横向暖化带把中景托起来。
   三层都不参与信息,alpha 全部 ≤ .12。 */
.hero .hlx-amb {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero .hlx-amb::before,
.hero .hlx-amb::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hero .hlx-amb::before {
  background:
    radial-gradient(56% 62% at 78% 18%,
      color-mix(in srgb, var(--c-primary-500) 16%, transparent), transparent 72%),
    radial-gradient(44% 48% at 12% 92%,
      color-mix(in srgb, var(--c-accent-500) 10%, transparent), transparent 70%);
}
/* 颗粒:纯 alpha 噪声,overlay 混合。它不改色相,只把大面积渐变的色带磨掉 ——
   深色底上的「高级感」大半来自这一层,没有它渐变永远像屏保。 */
.hero .hlx-amb::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
}

/* 一道从右上斜切下来的光带 —— 画面里有「光源方向」之后,产品面的斜切才有理由,
   否则它只是一块歪着的板子。alpha 极低,只在深底上刚好能觉察。
   两条边缘用 mask 收掉,免得光带在画面里留下两道硬边。 */
.hero .hlx-beam {
  position: absolute;
  inset-block: -30%;
  inset-inline-end: -6%;
  inline-size: 46%;
  z-index: 0;
  pointer-events: none;
  transform: rotate(14deg);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--c-primary-500) 9%, transparent) 42%,
    color-mix(in srgb, var(--c-accent-500) 7%, transparent) 62%,
    transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 62%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 62%, transparent);
  animation: hlx-breathe 26s ease-in-out infinite;
}
/* 极慢的明暗呼吸。26 秒一轮、幅度 ±10% —— 慢到不会被当成动画,
   只让画面不像一张贴死的图。 */
@keyframes hlx-breathe {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* 底边不再是一刀切:往下化进页面底,再压一条发丝亮线当「台面边缘」。 */
.hero .hlx-edge {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 180px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--c-canvas) 88%);
}
.hero .hlx-edge::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--c-border-strong) 42%, transparent) 26%,
    color-mix(in srgb, var(--c-primary-500) 34%, transparent) 58%,
    transparent);
}

/* ── §2 眉标签 → 玻璃胶囊 ────────────────────────────────────────
   原来是一行裸字,和正文同一个平面。收进一枚胶囊后它变成「标牌」,
   首屏第一眼就有了层级:标牌 → 标题 → 正文 → 动作。 */
.hero .eyebrow--hero {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-4) 7px var(--s-3);
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-surface) 56%, transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-text) 7%, transparent);
  color: var(--c-text-2);
}
.hero .hlx-dot {
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--c-accent-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent-500) 16%, transparent);
}

/* ── §3 标题 ──────────────────────────────────────────────────────
   竖向微渐变:顶端用正文主色,落到次级色。笔画上端更亮,读起来像被上方的光打到,
   而不是一块均匀的白。⚠️ 落点只到 --c-text-2(深底 13.33:1),不往下走 ——
   渐变字最容易踩的坑就是把底部拉到对比度门槛以下。 */
.hero h1 {
  background: linear-gradient(176deg,
    var(--c-text) 18%,
    color-mix(in srgb, var(--c-text-2) 84%, var(--c-text-3)) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.022em;
}
/* 不支持 background-clip:text 时回到实色 —— 标题永远不许是透明的。 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--c-text); }
}
/* 系统强制高对比度下背景被换掉,渐变字会整条消失 —— 这里必须退回实色。 */
@media (forced-colors: active) {
  .hero h1 { background: none; -webkit-text-fill-color: currentColor; }
  .hero .hlx-amb, .hero .hlx-beam, .hero .hlx-edge { display: none; }
}

.hero .sub {
  max-width: 34em;
  line-height: 1.78;
  color: var(--c-text-2);
}

/* ── §4 动作区 ────────────────────────────────────────────────────
   主按钮加重一档:实底改微渐变 + 一圈主色辉光 + 一道落影,
   悬停时抬 1px 并有一束高光横扫过去。深色界面里「贵」的做法是给主按钮
   真实的光学重量,而不是把它做大。 */
.hero .hero__cta .btn--primary {
  --btn-pad-y: 14px;
  --btn-pad-x: var(--s-6);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-primary-700) 62%, var(--c-primary-600)),
    var(--c-primary-600));
  border-color: color-mix(in srgb, var(--c-primary-700) 70%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-primary-500) 46%, transparent),
    0 18px 34px -18px color-mix(in srgb, var(--c-primary-500) 72%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--c-text) 22%, transparent);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.hero .hero__cta .btn--primary::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 40%;
  background: linear-gradient(100deg,
    transparent,
    color-mix(in srgb, var(--c-text) 30%, transparent),
    transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.hero .hero__cta .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-primary-700) 66%, transparent),
    0 22px 40px -18px color-mix(in srgb, var(--c-primary-500) 88%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--c-text) 28%, transparent);
}
.hero .hero__cta .btn--primary:hover::after {
  opacity: 1;
  animation: hlx-sheen 760ms var(--ease) 1;
}
@keyframes hlx-sheen {
  from { inset-inline-start: -60%; }
  to   { inset-inline-start: 120%; }
}

/* 次级动作:不与主按钮抢重量,只做一条会走的箭头。 */
.hero .btn-row { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.hero .hlx-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.hero .hlx-more svg {
  inline-size: 18px; block-size: 18px;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  transition: transform var(--dur-1) var(--ease);
}
.hero .hlx-more:hover { color: var(--c-text); }
.hero .hlx-more:hover svg { transform: translateX(3px); }

/* ── §5 产品面:玻璃再做薄一点 ──────────────────────────────────
   r19 的面板是「半透明 + 发丝描边」。这里把它做成真正的玻璃:
   面更透、模糊更深、顶缘一道内高光(光从上面来)、底下一片大而软的落影。
   面板越薄,压在它上面的标题越干净 —— 这是同一件事的两面。 */
.hero .hstage__panel {
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--c-border-strong) 26%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-surface) 76%, transparent),
    color-mix(in srgb, var(--c-surface) 58%, transparent));
  -webkit-backdrop-filter: blur(16px) saturate(122%);
          backdrop-filter: blur(16px) saturate(122%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c-text) 8%, transparent),
    0 44px 80px -46px #000;
}
.hero .hstage__bar {
  border-block-end-color: color-mix(in srgb, var(--c-border-strong) 22%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-text) 4%, transparent), transparent);
}
.hero .hstage__bar b { letter-spacing: .1em; }
.hero .hstage__px { font-weight: 500; letter-spacing: -.01em; }
.hero .hstage__row {
  border-block-start-color: color-mix(in srgb, var(--c-border-strong) 12%, transparent);
}
/* 产品面整体再退半步:它是背景,标题才是主角。 */
@media (min-width: 1024px) {
  .hero .hstage { opacity: .92; }
}

/* ── §7 入场 ──────────────────────────────────────────────────────
   原来是 8px 位移 + 360ms。改成 14px + 轻微失焦,节奏拉到 620ms、
   逐条错开 90ms ——「高级」在动效上等于慢半拍、且带景深。 */
[data-anim="1"] .hero .hero__copy > * {
  transform: translateY(14px);
  filter: blur(6px);
}
[data-anim="1"] .hero[data-entered="1"] .hero__copy > * {
  filter: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease), filter 620ms var(--ease);
}
[data-anim="1"] .hero[data-entered="1"] .hero__copy > *:nth-child(2) { transition-delay: 90ms; }
[data-anim="1"] .hero[data-entered="1"] .hero__copy > *:nth-child(3) { transition-delay: 180ms; }
[data-anim="1"] .hero[data-entered="1"] .hero__copy > *:nth-child(4) { transition-delay: 270ms; }
[data-anim="1"] .hero[data-entered="1"] .hero__copy > *:nth-child(n+5) { transition-delay: 340ms; }

/* ── §8 手机 ─────────────────────────────────────────────────────
   光场收窄、颗粒减半(小屏上颗粒会被当成压缩噪点)。 */
@media (max-width: 1023px) {
  .hero .hlx-amb::before {
    background: radial-gradient(70% 46% at 70% 8%,
      color-mix(in srgb, var(--c-primary-500) 14%, transparent), transparent 74%);
  }
  .hero .hlx-amb::after { opacity: .03; }
  .hero .hlx-beam { display: none; }
  .hero .hlx-edge { block-size: 120px; }
}

/* ── §9 关掉动效时 ───────────────────────────────────────────────
   换静态,不删内容:高光不扫、点不掉、失焦直接归零。 */
@media (prefers-reduced-motion: reduce) {
  .hero .hlx-beam { animation: none; }
  .hero .hero__cta .btn--primary:hover::after { animation: none; opacity: 0; }
  [data-anim="1"] .hero .hero__copy > * { filter: none !important; }
}