/* ============================================================
   hero.css — 深蓝噪点主视觉 + 贴合式手机 + 底部信任块/巨字带
   几何来源：原站 1440 宽实测（底座 Zzuy 无变换 @ (792,700) 667×700；
   白屏 ~43°；巨字窗口 x427 起、行高 184、字号 ~204）
   ============================================================ */

/* 原站布局：Hero(section) 1505 高做滚动空间；Hero Mian 固定 1115 一屏、sticky 钉住，
   巨字带溢出被 clip。pin 期间手机停在视口内、白屏贴合 spring 播放。 */
.hero {
  position: relative;
  height: var(--hero-h, 1505px);
  background: var(--ink);
  color: var(--white);
}
.hero__inner {
  position: sticky;
  top: 0;
  height: var(--hero-pin, 1115px);
  overflow: clip;
  padding-top: 88px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.hero__grid {
  position: absolute;
  right: 0;
  top: 12%;
  width: 58%;
  opacity: .5;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  min-height: 1027px; /* 1115 - header */
  padding-block: 60px;
}

.hero__left { display: grid; justify-items: start; gap: 34px; align-content: center; }
.hero__left h1 { color: var(--white); max-width: 15ch; }
.hero__cta { margin-top: 6px; }

/* ---------- 舞台层：装饰底座 + 可贴合白屏（按整个 hero 块比例定位，视口无关） ---------- */
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 2; /* 手机叠在巨字带之上 */
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  left: 76%;
  top: 40%;
  width: 29%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(111 178 232 / .55), transparent 68%);
  filter: blur(40px);
}
/* 底座：Zzuy 原图原角度。原站实测 @vw1470 pin(1115) 内 phone body [792,310,667,700]
   → left 792/1470=53.9%，top 310/1115=27.8%，width 667/1470=45.4% */
.hero__phone {
  position: absolute;
  left: 53.9%;
  top: 27.8%;
  width: 45.4%;
  aspect-ratio: 667 / 700;
}
.hero__phone-body { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 白屏：外层由 JS 平移（悬浮 (30,-70) → 贴合 (0,0)，滚动触发一次），
   内框姿态恒定 = 原站实例参数 perspective(1200) rotate(-35) rotateX(17) rotateY(35) skewY(2)。
   几何 = 原站 Right Image 内 (187,-19) 305×707，相对底座 667×700 换算成百分比。 */
.hero__screens {
  position: absolute;
  left: 28.04%;   /* 187/667 */
  top: -2.71%;    /* -19/700 */
  width: 45.73%;  /* 305/667 */
  aspect-ratio: 305 / 707;
  will-change: transform;
}
.hero__screens-frame {
  position: absolute;
  inset: 0;
  transform: perspective(1200px) rotate(-35deg) rotateX(17deg) rotateY(35deg) skewY(2deg);
  /* 白色圆角机身与刘海烘焙在带透明通道的屏图里：不裁切、不涂底 */
}
/* 换屏 = 每 3s 瞬时硬切（原站 Slideshow transition duration:0），叠放显隐即可 */
.hero__screens-slides,
.hero__screens-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__screens-slides img { display: none; }
.hero__screens-slides img.is-active { display: block; }

/* ---------- 手绘箭头描线动画（lottie 式循环） ---------- */
.hero__doodle {
  position: absolute;
  left: 55%;
  top: 70%;
  width: 7.5%;
  overflow: visible;
}
.hero__doodle .doodle-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: doodle-draw 3.2s ease-in-out infinite;
}
.hero__doodle .doodle-head {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: doodle-head 3.2s ease-in-out infinite;
}
@keyframes doodle-draw {
  0%       { stroke-dashoffset: 1; opacity: 1; }
  42%      { stroke-dashoffset: 0; opacity: 1; }
  74%      { stroke-dashoffset: 0; opacity: 1; }
  86%      { stroke-dashoffset: 0; opacity: 0; }
  100%     { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes doodle-head {
  0%, 36%  { stroke-dashoffset: 1; opacity: 1; }
  52%      { stroke-dashoffset: 0; opacity: 1; }
  74%      { stroke-dashoffset: 0; opacity: 1; }
  86%      { stroke-dashoffset: 0; opacity: 0; }
  100%     { stroke-dashoffset: 1; opacity: 0; }
}
.motion-off .hero__doodle .doodle-line,
.motion-off .hero__doodle .doodle-head {
  animation: none;
  stroke-dashoffset: 0;
  opacity: 1;
}

/* ---------- 底带：左信任块 + 右侧巨字窗口（同一行） ---------- */
/* 信任块 + 巨字带：绝对贴 pin 容器底部（在 overflow:clip 可见区内），phone 叠其上 */
.hero__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 390px;
  display: flex;
  align-items: stretch;
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
}
.hero__trust {
  flex: 0 0 412px;
  align-self: center;
  display: grid;
  gap: 18px;
  justify-items: start;
}
.hero__chip { border-radius: 12px; }
.hero__trust-row { display: flex; align-items: center; gap: 16px; }
.hero__trust-row img { height: 44px; width: auto; }
.hero__trust-num { font-family: var(--font-numeric); font-weight: 500; font-size: 45px; line-height: 1; letter-spacing: -0.02em; }
.hero__trust p { color: rgb(255 255 255 / .78); font-size: var(--body-lg); }

.hero__ticker {
  flex: 1;
  min-width: 0;
  align-self: flex-end;
  height: 184px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero__ticker .marquee-track {
  gap: 66px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(120px, 14.2vw, 204px);
  line-height: 184px;
  letter-spacing: -0.026em;
  color: var(--white);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .hero__inner { padding-top: 76px; }
  .hero__content { min-height: 0; }
  .hero__band { height: 300px; }
  .hero__ticker { height: 140px; }
  .hero__ticker .marquee-track { line-height: 140px; }
}
@media (max-width: 809px) {
  .hero__content { grid-template-columns: 1fr; padding-block: 56px 620px; gap: 24px; }
  .hero__left h1 { max-width: none; }
  .hero__phone { left: 6%; top: auto; bottom: 16%; width: 96%; }
  .hero__doodle { left: 2%; top: auto; bottom: 34%; width: 68px; }
  .hero__glow { left: 50%; top: auto; bottom: 24%; width: 60%; }
  .hero__band { flex-direction: column; height: auto; gap: 30px; padding-block: 40px 0; }
  .hero__trust { flex: none; }
  .hero__ticker { align-self: stretch; height: 110px; }
  .hero__ticker .marquee-track { line-height: 110px; font-size: clamp(90px, 24vw, 120px); }
}