@font-face { font-family: "Noto Sans SC"; src: local("Noto Sans SC"), local("NotoSansSC-VF"); font-weight: 100 900; }
@font-face { font-family: "Microsoft YaHei"; src: local("Microsoft YaHei"); }
@font-face { font-family: "PingFang SC"; src: local("PingFang SC"); }
:root {
  --bg: #0a0e16;
  --fg: #f3f1ec;
  --muted: #aab1bc;
  --dim: #6f7784;
  --or: #ee7d55;
  --teal: #43c6b4;
  --vio: #a797ff;
  --red: #ff5a4f;
  --amber: #f5b642;
  --green: #4cd08a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 1920px; height: 1080px; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
.clip { position: absolute; inset: 0; }
.scene { pointer-events: none; }
#gl { display: block; width: 1920px; height: 1080px; }
#vignette {
  background:
    radial-gradient(ellipse 75% 70% at 50% 46%, rgba(10, 14, 22, 0) 40%, rgba(4, 6, 11, 0.82) 100%);
}
#fader { background: #000; }

/* ---------- shared type ---------- */
.eyebrow { font-size: 26px; letter-spacing: 0.12em; color: var(--muted); font-weight: 500; }
.kicker { font-size: 26px; font-weight: 700; letter-spacing: 0.1em; }
.or { color: var(--or); } .teal { color: var(--teal); } .vio { color: var(--vio); }
h2 { font-size: 68px; line-height: 1.18; font-weight: 800; letter-spacing: 0.01em; }
.lead { font-size: 31px; line-height: 1.6; color: #d9dde3; font-weight: 400; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.fill { position: absolute; inset: 0; }
.shade {
  background: linear-gradient(90deg, rgba(8, 11, 18, 0.95) 0%, rgba(8, 11, 18, 0.86) 34%, rgba(8, 11, 18, 0) 56%);
}
.panel { position: absolute; left: 130px; top: 150px; width: 760px; }
.panel h2 { margin: 18px 0 22px; }
.tags { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.tags span {
  font-size: 22px; padding: 7px 18px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.22); color: #dfe3e8; letter-spacing: 0.02em;
}
.foot { margin-top: 22px; font-size: 23px; color: var(--muted); }

.backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse 46% 40% at 50% 50%, rgba(8, 11, 18, 0.82) 0%, rgba(8, 11, 18, 0.55) 55%, rgba(8, 11, 18, 0) 100%); }
.center > *:not(.backdrop) { position: relative; }

/* ---------- S1 ---------- */
.hook .h-line { font-size: 66px; font-weight: 700; line-height: 1.45; }
.hook .h-line b { color: var(--or); font-weight: 800; }
.words { display: flex; gap: 26px; margin-top: 48px; align-items: baseline; }
.words .w { font-size: 84px; font-weight: 800; letter-spacing: 0.04em; }
.words .d { font-size: 60px; color: var(--dim); }
.words .w.last { color: var(--or); }

/* ---------- S2 ---------- */
.logo { display: flex; align-items: baseline; gap: 34px; margin: 30px 0 26px; }
.logo .en { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 212px; font-weight: 900; letter-spacing: 0.02em; line-height: 1; }
.logo .en span { display: inline-block; }
.logo .cn { font-size: 104px; font-weight: 800; color: var(--or); }
.acro { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 40px; font-weight: 500; color: #dfe3e8; letter-spacing: 0.01em; margin: -6px 0 26px; }
.acro span { display: inline-block; }
.acro b { color: var(--or); font-weight: 800; }
.acro .via { color: var(--muted); font-style: italic; }
.acro.small { font-size: 30px; margin: 22px 0 0; color: #cfd4da; }
.tagline { font-size: 44px; font-weight: 500; }
.tagline em { font-style: normal; color: var(--or); font-weight: 800; }
.leader { margin-top: 30px; font-size: 30px; color: var(--muted); letter-spacing: 0.06em; }
.rule { width: 120px; height: 4px; background: var(--or); border-radius: 2px; margin: 0 auto; }

/* ---------- S3 ---------- */
.loop { position: relative; margin-top: 38px; width: 760px; height: 300px; }
.loop .card {
  position: absolute; top: 0; width: 210px; padding: 20px 10px 18px; text-align: center;
  border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.16);
}
.loop .card b { display: block; font-size: 42px; font-weight: 800; }
.loop .card span { display: block; font-size: 22px; color: var(--muted); margin-top: 6px; }
.loop .arrow { position: absolute; top: 44px; font-size: 44px; color: var(--or); font-weight: 700; }
.loop svg { position: absolute; left: 0; top: 120px; }
.loop .back { position: absolute; left: 0; width: 760px; top: 222px; text-align: center; font-size: 25px; color: var(--or); font-weight: 600; }
.punch { margin-top: 34px; font-size: 38px; line-height: 1.5; font-weight: 700; }
.punch em { font-style: normal; color: var(--or); }

/* ---------- S4 ---------- */
.s4-title { position: absolute; left: 0; right: 0; top: 110px; text-align: center; }
.s4-title h2 { font-size: 72px; }
.s4-title p { margin-top: 14px; font-size: 32px; color: var(--muted); }
.clabel { position: absolute; width: 440px; margin-left: -220px; text-align: center; }
.clabel .n { font-size: 24px; font-weight: 700; letter-spacing: 0.14em; }
.clabel b { display: block; font-size: 46px; font-weight: 800; margin-top: 4px; }
.clabel span { display: block; font-size: 27px; color: #cfd4da; margin-top: 8px; }

/* ---------- S5 ---------- */
.steps { list-style: none; margin-top: 30px; }
.steps li { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; opacity: 0.32; }
.steps li i {
  flex: none; width: 38px; height: 38px; border-radius: 50%; font-style: normal; font-size: 21px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; transform: translateY(4px);
  background: rgba(255, 255, 255, 0.12);
}
.steps li b { font-size: 32px; font-weight: 800; flex: none; }
.steps li span { font-size: 25px; color: #cfd4da; }
.nlabel {
  position: absolute; transform: translate(-50%, 0); white-space: nowrap;
  font-size: 22px; color: #dfe6ee; font-weight: 600; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.flag {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  font-size: 24px; font-weight: 800; padding: 6px 16px; border-radius: 10px; color: #fff;
}
.tier { position: absolute; transform: translate(0, -50%); white-space: nowrap; font-size: 21px; font-weight: 700; letter-spacing: 0.08em; color: #aab1bc; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); }
.tier.teal { color: #7fe0d2; }
.tier.vio { color: #c9bfff; }
.elabel { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: 18px; font-weight: 700; color: #9fb6cf; text-shadow: 0 2px 6px #000; }
.elabel.or { color: #ffb591; }
.grp { position: absolute; transform: translate(-50%, -50%); font-size: 22px; font-weight: 800; letter-spacing: 0.12em; white-space: nowrap; }
.mchip {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: 19px; font-weight: 700;
  padding: 5px 13px; border-radius: 8px; color: #bfeee7; background: rgba(10, 30, 32, 0.88); border: 1.5px solid rgba(67, 198, 180, 0.35);
  transition: background 200ms, border-color 200ms, color 200ms;
}
.mchip.on { color: #06201c; background: #43c6b4; border-color: #7fe0d2; }
.sblabel { position: absolute; transform: translate(-50%, 0); text-align: center; white-space: nowrap; }
.sblabel b { display: block; font-size: 21px; font-weight: 800; color: #e6e1ff; }
.sblabel span { display: block; margin-top: 2px; font-size: 19px; color: #aab1bc; }
.sblabel span.ok { color: #7ff0b0; }
.sblabel span.bad { color: #ff8a80; }
#sigTag { background: rgba(245, 182, 66, 0.2); border: 1.5px solid var(--amber); color: #ffe2a8; font-size: 20px; }
#verTag { background: var(--green); color: #07210f; font-size: 20px; }
.mchip { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: 16px; font-weight: 700; padding: 3px 9px; border-radius: 7px; border: 1.5px solid rgba(67, 198, 180, 0.45); color: #bfeee7; background: rgba(8, 20, 24, 0.88); }
.mchip.on { background: #43c6b4; border-color: #43c6b4; color: #062320; }
.relrow { position: absolute; transform: translate(-50%, 0); display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.relrow span { font-size: 18px; font-weight: 700; padding: 4px 12px; border-radius: 8px; border: 1.5px solid rgba(76, 208, 138, 0.5); color: #bfeed4; background: rgba(10, 14, 22, 0.85); }
.relrow i { font-style: normal; font-size: 18px; color: #6f7784; }

/* ---------- S6 ---------- */
.forms { display: flex; gap: 14px; margin-top: 34px; }
.forms div {
  font-size: 25px; font-weight: 700; padding: 10px 20px; border-radius: 12px; opacity: 0.35;
  border: 1.5px solid rgba(67, 198, 180, 0.6); color: #d8f5f1;
}
.duo { margin-top: 30px; display: grid; gap: 16px; }
.duo div { font-size: 29px; line-height: 1.45; padding-left: 22px; border-left: 5px solid var(--teal); }
.duo div b { color: var(--teal); }
.duo div small { display: block; font-size: 23px; color: var(--muted); }
#tgtTag { background: rgba(238, 125, 85, 0.2); border: 1.5px solid var(--or); color: #ffd9c9; font-size: 21px; }

/* ---------- S7 ---------- */
.slabel { position: absolute; white-space: nowrap; }
.slabel .in { text-align: center; transform-origin: 50% 50%; }
.slabel b { display: block; font-size: 34px; font-weight: 800; }
.slabel span { display: block; font-size: 23px; color: #d6d2f5; margin-top: 2px; }
.core { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.core b { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 34px; font-weight: 800; letter-spacing: 0.02em; }
.core span { display: block; font-size: 22px; color: var(--muted); margin-top: 4px; }

/* ---------- S8 ---------- */
.stats { display: flex; gap: 34px; margin-top: 56px; }
.stat {
  width: 350px; padding: 34px 20px 30px; border-radius: 22px; text-align: center;
  background: rgba(12, 17, 27, 0.9); border: 1.5px solid rgba(255, 255, 255, 0.14);
}
.stat .num { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 92px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .num small { font-size: 40px; font-weight: 800; margin-left: 6px; }
.stat p { margin-top: 16px; font-size: 26px; color: #d3d8de; line-height: 1.45; }
.partners { margin-top: 50px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 14px; width: 1760px; }
.partners .pt { font-size: 24px; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #e6e9ed; }
.partners .lbl { font-size: 25px; color: var(--muted); padding: 8px 6px; }

/* ---------- S9 ---------- */
.from { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 50px; font-weight: 700; color: #dfe3e8; }
.from em { font-style: normal; color: var(--or); }
.end-logo { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 170px; font-weight: 900; margin-top: 36px; line-height: 1; letter-spacing: 0.03em; }
.end-logo span { font-family: "Noto Sans SC", sans-serif; font-size: 84px; color: var(--or); margin-left: 24px; font-weight: 800; }
.end-tag { margin-top: 26px; font-size: 36px; color: #dfe3e8; }
.cta { margin-top: 44px; display: flex; gap: 22px; align-items: center; }
.cta .btn { font-size: 32px; font-weight: 800; padding: 16px 36px; border-radius: 14px; background: var(--or); color: #1a0d07; }
.cta .url { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 34px; font-weight: 600; color: #fff; letter-spacing: 0.02em; }

/* ---------- chrome ---------- */
#bug { position: absolute; left: 60px; top: 46px; font-size: 22px; letter-spacing: 0.14em; color: #cfd4da; font-weight: 700; }
#bug b { font-family: "Inter", "Noto Sans SC", sans-serif; color: #fff; letter-spacing: 0.08em; }
#chapters { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); display: flex; gap: 14px; }
#chapters .ch { width: 200px; }
#chapters .ch span { display: block; font-size: 19px; color: #8d95a1; margin-bottom: 8px; text-align: center; letter-spacing: 0.06em; }
#chapters .ch .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#chapters .ch .bar i { display: block; height: 100%; width: 0; background: var(--or); }