/* ==========================================================================
   Hero · 满屏渐变 + 中央 3D 堆叠圆盘 + 左下标题 + 右侧下载区
   ========================================================================== */

.hero {
  background: var(--c-primary);
  color: var(--c-white);
}

/* 钉住范围必须被 __pin 限定，否则会一直钉到整段滚完、与 taglines 叠在一起 */
.hero__pin {
  height: 175svh;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- 渐变底 ---------- */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 图未到位时的兜底渐变，避免首屏空白 */
  background: linear-gradient(118deg, #d93a6f 0%, #ea5f63 46%, #f5a06a 100%);
}

.hero__art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---------- 3D 堆叠圆盘（CSS 自绘） ----------
   构图：右上一枚近正圆的大盘，向左下方散开成一串渐薄的椭圆。 */
.disc-stack {
  position: absolute;
  left: 58%;
  top: 46%;
  width: min(52vw, 84svh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.disc {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 216, 194, 0.3) 40%,
    rgba(240, 140, 130, 0.22) 74%,
    rgba(255, 255, 255, 0.14) 100%);
  box-shadow:
    0 18px 44px rgba(150, 26, 60, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 右上主盘：近正圆，实心质感 */
.disc--top {
  width: 54%;
  aspect-ratio: 1 / 0.96;
  right: 2%;
  top: 0;
  background: linear-gradient(158deg, #f7c8a2 0%, #f2a693 44%, #ec8494 100%);
  box-shadow: 0 34px 72px rgba(150, 26, 60, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.55);
}
/* 主盘正下方两片，制造厚度 */
.disc--t2 {
  width: 52%;
  aspect-ratio: 1 / 0.5;
  right: 4%;
  top: 24%;
  opacity: 0.92;
}
.disc--t3 {
  width: 50%;
  aspect-ratio: 1 / 0.4;
  right: 7%;
  top: 33%;
  opacity: 0.8;
}

/* 向左下散开的薄片，逐级左移、变扁、变淡 */
.disc--mid  { width: 50%; aspect-ratio: 1 / 0.34; right: 16%; top: 40%; transform: rotate(-4deg); }
.disc--m2   { width: 49%; aspect-ratio: 1 / 0.32; right: 24%; top: 48%; transform: rotate(-5deg); opacity: 0.94; }
.disc--m3   { width: 47%; aspect-ratio: 1 / 0.3;  right: 31%; top: 56%; transform: rotate(-6deg); opacity: 0.88; }
.disc--m4   { width: 45%; aspect-ratio: 1 / 0.29; right: 37%; top: 64%; transform: rotate(-6deg); opacity: 0.8; }
.disc--base { width: 43%; aspect-ratio: 1 / 0.28; right: 42%; top: 72%; transform: rotate(-7deg); opacity: 0.7; }

/* 两道细长高光片 */
.disc__shard {
  position: absolute;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
}
.disc__shard--a { right: 20%; top: 38%; width: 30%; transform: rotate(-10deg); }
.disc__shard--b { right: 26%; top: 44%; width: 24%; transform: rotate(-9deg); opacity: 0.65; }

/* ---------- 散布卡片：部分刻意出血到视口外 ---------- */
/* ---------- 左下主标题 ---------- */
.hero__title {
  position: absolute;
  left: var(--grid-margin);
  bottom: clamp(96px, 17svh, 190px);
  z-index: 3;
  margin: 0;
  max-width: var(--cols-6);
  font-size: clamp(44px, calc(2rem + 3.6vw), 92px);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--c-white);
  text-box: trim-both cap alphabetic;
}

/* ---------- 右侧副标题 + 下载 ---------- */
.hero__aside {
  position: absolute;
  right: var(--grid-margin);
  bottom: clamp(96px, 17svh, 190px);
  z-index: 3;
  width: var(--cols-4);
  display: grid;
  gap: var(--sp-24);
}

.hero__lede {
  font-size: var(--fs-subhead-1);
  font-weight: var(--fw-medium);
  line-height: 1.24;
  color: var(--c-white);
}

.hero__stores {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  min-width: 168px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--c-white);
  transition: background var(--dur-fast) var(--ease-std);
}
.store:hover { background: rgba(255, 255, 255, 0.16); }

.store__txt { display: grid; line-height: 1.1; }
.store__txt small { font-size: 9px; opacity: 0.85; letter-spacing: 0.02em; }
.store__txt strong { font-size: 16px; font-weight: var(--fw-medium); }

/* 按钮图形：几何自绘，语义各不相同 */
.store__glyph {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  position: relative;
  border: 1.6px solid currentColor;
  border-radius: 4px;
  opacity: 0.9;
}
/* 文档：右上折角 + 两条文本线 */
.store__glyph--doc::before,
.store__glyph--doc::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%;
  height: 1.6px;
  background: currentColor;
}
.store__glyph--doc::before { top: 34%; }
.store__glyph--doc::after { top: 58%; right: 44%; }
/* 图表：两根柱子 */
.store__glyph--chart::before,
.store__glyph--chart::after {
  content: "";
  position: absolute;
  bottom: 22%;
  width: 1.8px;
  background: currentColor;
}
.store__glyph--chart::before { left: 30%; height: 30%; }
.store__glyph--chart::after { left: 55%; height: 52%; }
/* 对话：右下引出的小尾巴 */
.store__glyph--chat::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: -5px;
  width: 6px; height: 6px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ---------- Scroll 提示 ---------- */
.hero__scroll {
  position: absolute;
  left: var(--grid-margin);
  bottom: clamp(28px, 4svh, 44px);
  z-index: 3;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(6px);
  color: var(--c-white);
}
.hero__scroll::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 9px;
  margin-right: 7px;
  border-radius: 3px;
  background: currentColor;
  vertical-align: -1px;
}

/* ---------- 逐条 sticky 的标语 ---------- */
.hero__taglines {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg-2);
}

.hero__taglines > li {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60svh;
  width: 100%;
  padding-inline: var(--grid-margin);
  color: var(--c-primary);
}
.hero__taglines > li:first-child { height: 90svh; }
.hero__taglines > li:last-child  { height: 0; }

@media (max-width: 1023px) {
  .hero__title { max-width: var(--cols-10); bottom: auto; top: 38%; }
  .hero__aside { width: var(--cols-10); right: auto; left: var(--grid-margin); }
  .disc-stack { left: 62%; top: 34%; width: 70vw; }
}

/* 窄屏：绝对定位的左下标题 + 右侧副栏会叠在一起，整块改成从下往上排的流式布局。
   ≤743px 栅格还降到 4 列，--cols-10 会算出比屏还宽的值，一并改回 --cols-4。 */
@media (max-width: 743px) {
  .hero__stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(16px, 3svh, 28px);
    /* 底部给固定胶囊让位，别被压住 */
    padding: 0 var(--grid-margin) clamp(96px, 15svh, 130px);
  }

  .hero__title,
  .hero__aside {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    z-index: 3;
  }

  .hero__title { font-size: clamp(34px, 9.2vw, 54px); }
  .hero__lede { font-size: clamp(14px, 3.9vw, 19px); }
  .hero__stores { gap: 8px; }

  /* 与底部胶囊抢位，窄屏收掉 */
  .hero__scroll { display: none; }
}