/* 四步动画区块（大画面版）。数字量自 Kent 选定的设计图 design/es_v2_a.png：
   设计图里画面宽 1078，--u = 设计图的 1 像素，跟着区块宽度等比缩放。 */
.es-steps {
  container-type: inline-size;
  background: transparent;   /* 底色交给放它的那一页 */
  color: #0F1D35;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.es-steps *, .es-steps *::before, .es-steps *::after { box-sizing: border-box; }
.es-steps__in {
  /* 三个上限：区块宽度、1320px、画面不要高过屏幕（画面高 = 宽 / 1.5，控制条才看得到） */
  --u: calc(min(100cqw, 1320px, 124vh) / 1122);
  max-width: calc(var(--u) * 1122);
  margin: 0 auto;
  padding: calc(var(--u) * 56) calc(var(--u) * 22) calc(var(--u) * 64);
}
.es-steps__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 24);
  margin-bottom: calc(var(--u) * 42);
}
.es-steps__title {
  margin: 0;
  padding-left: calc(var(--u) * 12);
  font-size: calc(var(--u) * 56);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .01em;
  color: #0F1D35;
  white-space: nowrap;
}
.es-steps__title span { display: inline-block; }
.es-steps__sub {
  flex: none;
  margin: 0;
  font-size: calc(var(--u) * 19);
  font-weight: 500;
  color: #6B6F76;
  white-space: nowrap;
}

/* 主角：一整块大画面，没有卡片、没有框、没有阴影 */
.es-steps__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(var(--u) * 30);
  background: #C9D0D3 center / cover no-repeat;
  cursor: pointer;
}
.es-steps__stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.es-steps__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 30, 42, .66) 0%, rgba(22, 30, 42, .42) 20%, rgba(22, 30, 42, 0) 48%);
  pointer-events: none;
}

/* 压在画面左下的字 */
.es-steps__caps {
  position: absolute;
  left: calc(var(--u) * 61);
  right: calc(var(--u) * 61);
  bottom: calc(var(--u) * 125);
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.es-steps__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #FFF;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.es-steps__cap.is-on { opacity: 1; transform: none; }
.es-steps__cap span { display: block; font-size: calc(var(--u) * 24); font-weight: 500; opacity: .92; }
.es-steps__cap h3 {
  margin: calc(var(--u) * 6) 0 0;
  font-size: calc(var(--u) * 52);
  line-height: 1.2;
  font-weight: 900;
  color: #FFF;
}
.es-steps__cap p {
  margin: calc(var(--u) * 12) 0 0;
  max-width: 34em;
  font-size: calc(var(--u) * 26);
  line-height: 1.4;
  font-weight: 500;
  color: #FFF;
}

/* 唯一的控制：一条毛玻璃胶囊 + 一颗圆键 */
.es-steps__nav {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 27);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  transform: translateX(-50%);
}
.es-steps__tabs {
  position: relative;
  display: flex;
  height: calc(var(--u) * 70);
  padding: calc(var(--u) * 10);
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.es-steps__pill {
  position: absolute;
  top: calc(var(--u) * 10);
  left: 0;
  height: calc(var(--u) * 50);
  background: #FFF;
  border-radius: 999px;
  transition: transform .5s cubic-bezier(.3, .8, .2, 1), width .5s cubic-bezier(.3, .8, .2, 1);
}
.es-steps__tabs button {
  position: relative;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 32);
  background: none;
  border: 0;
  border-radius: 999px;
  color: #FFF;
  font: inherit;
  font-size: calc(var(--u) * 21);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s;
}
.es-steps__tabs button.is-on { color: #0F1D35; }
.es-steps__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 70);
  height: calc(var(--u) * 70);
  padding: 0;
  background: rgba(255, 255, 255, .28);
  border: 0;
  border-radius: 50%;
  color: #FFF;
  cursor: pointer;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.es-steps__toggle svg { display: none; width: calc(var(--u) * 28); height: calc(var(--u) * 28); fill: currentColor; }
.es-steps__toggle[data-state="playing"] .is-pause,
.es-steps__toggle[data-state="paused"] .is-play,
.es-steps__toggle[data-state="ended"] .is-replay { display: block; }
.es-steps__tabs button:focus-visible,
.es-steps__toggle:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }
@media (hover: hover) {
  .es-steps__tabs button:not(.is-on):hover { color: rgba(255, 255, 255, .72); }
  .es-steps__toggle:hover { background: rgba(255, 255, 255, .4); }
}

/* 英文版：字体跟网站（Inter，线上只载到 800）。标题比中文长，副标放下一行。 */
.es-steps[data-lang="en"] { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.es-steps[data-lang="en"] .es-steps__head { flex-wrap: wrap; row-gap: calc(var(--u) * 10); }
.es-steps[data-lang="en"] .es-steps__title { font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
.es-steps[data-lang="en"] .es-steps__sub { flex-basis: 100%; text-wrap: balance; }
.es-steps[data-lang="en"] .es-steps__cap h3 { font-weight: 800; letter-spacing: -.01em; }
@container (min-width: 761px) {
  .es-steps[data-lang="en"] .es-steps__sub { padding-left: calc(var(--u) * 12); }
}

/* 手机：画面变直，标题两行放上面 */
@container (max-width: 760px) {
  .es-steps__in { max-width: none; padding: 28px 16px 36px; }
  .es-steps__head { display: block; margin-bottom: 18px; }
  .es-steps__title { padding-left: 2px; font-size: clamp(26px, 8.4cqw, 34px); line-height: 1.25; white-space: normal; }
  .es-steps__sub { margin-top: 8px; padding-left: 2px; font-size: 14px; white-space: normal; }
  .es-steps__stage { aspect-ratio: 370 / 642; border-radius: 22px; }
  .es-steps__stage::after { background: linear-gradient(to top, rgba(22, 30, 42, .74) 0%, rgba(22, 30, 42, .5) 24%, rgba(22, 30, 42, 0) 52%); }
  .es-steps__caps { left: 18px; right: 18px; bottom: 78px; }
  .es-steps__cap span { font-size: 13px; }
  .es-steps__cap h3 { margin-top: 3px; font-size: 30px; }
  .es-steps__cap p { margin-top: 6px; font-size: 15px; line-height: 1.45; }
  .es-steps__nav { left: 12px; right: 12px; bottom: 14px; gap: 8px; transform: none; }
  .es-steps__tabs { flex: 1; min-width: 0; height: 44px; padding: 4px; }
  .es-steps__pill { top: 4px; height: 36px; }
  .es-steps__tabs button { flex: 1 1 0; min-width: 0; height: 36px; padding: 0 2px; font-size: clamp(12px, 3.5cqw, 14px); }
  .es-steps__toggle { width: 44px; height: 44px; }
  .es-steps__toggle svg { width: 20px; height: 20px; }
}