:root {
  color-scheme: dark;
  --bg: #07121d;
  --bg-deep: #03090f;
  --page-background: radial-gradient(261.85% 230.09% at -57.68% -38.99%, #13212E 0%, #02050B 100%);
  --panel: rgba(19, 35, 50, 0.78);
  --panel-strong: #122231;
  --line: rgba(166, 194, 214, 0.18);
  --text: #f5f8fb;
  --muted: #98a8b6;
  --cyan: #4ce5f7;
  --cyan-soft: #bdeef7;
  --green: #67f070;
  --blue: #546dff;
  --max: 1760px;
}

@font-face {
  font-family: "Douyin Sans";
  src: url("./assets/fonts/DouyinSans.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--page-background);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--page-background);
  -webkit-backdrop-filter: blur(140.51724243164062px);
  backdrop-filter: blur(140.51724243164062px);
  color: var(--text);
  font-family: "PingFang SC", "SF Pro Display", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.scroll-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #fe2c55, var(--cyan));
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  will-change: transform;
}

.container {
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - clamp(40px, 8vw, 160px)));
  margin-inline: auto;
}

.section {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 10vw, 200px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.025);
  background: var(--bg);
}

.section--hero {
  min-height: max(920px, 100svh);
  padding: clamp(72px, 7vw, 132px) 0;
  isolation: isolate;
}

.section--gradient {
  background:
    radial-gradient(circle at 76% 28%, rgba(39, 145, 180, 0.13), transparent 34%),
    linear-gradient(180deg, #07121d, #06101a 70%, #07121d);
}

.section--chapter {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 46%),
    #081520;
}

.section--chapter::before,
.section--celebration::before,
.summary::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 80%, transparent);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
  align-items: center;
  min-height: calc(100svh - 160px);
}

.hero-copy {
  z-index: 5;
  max-width: 980px;
}

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(48px, 8vw, 120px);
  color: #c9d7e1;
  font-size: clamp(12px, 1vw, 20px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.08em;
}

.eyebrow-row span:last-child {
  color: var(--cyan-soft);
  font-size: clamp(18px, 1.7vw, 32px);
  letter-spacing: 0;
}

.eyebrow-line {
  width: clamp(50px, 9vw, 164px);
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.hero h1 {
  max-width: 1160px;
  font-size: clamp(64px, 7.1vw, 136px);
  line-height: 0.94;
  letter-spacing: -0.065em;
  font-weight: 800;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 60px;
  color: #cad6df;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(20px, 1.9vw, 36px);
  color: white;
}

.brand-note {
  color: white;
  font-size: 1.3em;
  text-shadow: -2px 0 #25f4ee, 2px 1px #fe2c55;
}

.hero-intro {
  max-width: 770px;
  margin-top: 56px;
  color: var(--muted);
  font-size: clamp(16px, 1.25vw, 24px);
}

.hero-phones {
  position: relative;
  align-self: stretch;
  min-height: 770px;
  perspective: 1200px;
}

.phone--hero {
  position: absolute;
  width: clamp(280px, 21vw, 410px);
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.42));
}

.phone--back {
  top: 4%;
  right: 40%;
  transform: rotate(-8deg) translateZ(-40px);
  opacity: 0.86;
}

.phone--middle {
  top: 12%;
  right: 14%;
  z-index: 2;
  width: clamp(300px, 22vw, 435px);
  transform: rotate(5deg);
}

.phone--front {
  right: -3%;
  bottom: -7%;
  z-index: 3;
  transform: rotate(1deg);
}

.hero-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}

.hero-orb--one {
  width: 760px;
  height: 760px;
  right: -160px;
  top: 30px;
  background: radial-gradient(circle, rgba(21, 182, 210, 0.22), rgba(34, 68, 111, 0.1) 46%, transparent 69%);
}

.hero-orb--two {
  width: 640px;
  height: 640px;
  left: -340px;
  bottom: -330px;
  background: radial-gradient(circle, rgba(43, 98, 224, 0.12), transparent 68%);
}

.section-heading {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 56px);
  margin-bottom: clamp(58px, 6vw, 112px);
}

.section-heading h2,
.rising-grid h2 {
  font-size: clamp(44px, 4.1vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 760;
}

.section-heading--split {
  align-items: baseline;
  justify-content: space-between;
}

.section-heading--split span {
  color: var(--cyan-soft);
  font-size: clamp(20px, 1.8vw, 32px);
}

.section-no {
  flex: 0 0 auto;
  margin-top: 0.9em;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.section-lead {
  max-width: 850px;
  margin: -72px 0 70px clamp(62px, 6vw, 108px);
  color: var(--muted);
  font-size: clamp(17px, 1.25vw, 24px);
}

.context-grid {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 22px;
}

.context-label {
  padding-top: 30px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.context-card,
.brief-card,
.strategy-card,
.summary-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(20, 38, 53, 0.9), rgba(11, 24, 36, 0.7));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.context-card {
  min-height: 230px;
  padding: clamp(28px, 3vw, 52px);
}

.context-card--accent {
  border-color: rgba(76, 229, 247, 0.34);
  background: linear-gradient(145deg, rgba(22, 63, 75, 0.7), rgba(11, 28, 40, 0.78));
}

.context-year {
  display: block;
  margin-bottom: 24px;
  color: var(--cyan-soft);
  font-size: 28px;
  font-weight: 750;
}

.context-card p {
  max-width: 570px;
  color: #c5d0d8;
  font-size: clamp(17px, 1.2vw, 23px);
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 110px 2% 0 8%;
}

.timeline-track {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(76, 229, 247, 0.2), var(--cyan), rgba(76, 229, 247, 0.2));
}

.timeline article {
  position: relative;
  padding-top: 44px;
}

.timeline article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 4px solid var(--bg);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 20px rgba(76, 229, 247, 0.5);
}

.timeline span,
.timeline strong,
.timeline small {
  display: block;
}

.timeline span {
  color: var(--muted);
  font-size: 14px;
}

.timeline strong {
  margin: 9px 0 5px;
  font-size: clamp(18px, 1.35vw, 26px);
}

.timeline small {
  color: var(--muted);
}

.challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(42px, 7vw, 130px);
}

.kicker,
.overline {
  margin-bottom: 25px;
  color: var(--cyan);
  font-weight: 750;
  letter-spacing: 0.04em;
}

.challenge h3 {
  font-size: clamp(27px, 2vw, 38px);
  line-height: 1.35;
}

.issue-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 54px;
}

.issue-list span,
.step-pills span {
  padding: 13px 19px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #c2ced7;
  font-size: 15px;
}

.solution-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 44px;
}

.solution-list div {
  padding: 28px;
  border-left: 2px solid var(--cyan);
  background: rgba(15, 32, 45, 0.62);
}

.solution-list b {
  color: var(--cyan-soft);
}

.solution-list p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
}

.mechanism {
  display: grid;
  grid-template-columns: 1.05fr auto 1fr auto 1fr;
  align-items: center;
  gap: 26px;
  margin-top: 100px;
  padding: clamp(24px, 3vw, 54px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: rgba(8, 21, 31, 0.72);
}

.mechanism-core {
  display: grid;
  place-content: center;
  min-height: 200px;
  padding: 25px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 229, 247, 0.16), rgba(76, 229, 247, 0.03) 62%, transparent 64%);
  text-align: center;
}

.mechanism-core small,
.mechanism-core strong {
  display: block;
}

.mechanism-core strong {
  margin-top: 12px;
  font-size: clamp(18px, 1.5vw, 28px);
}

.mechanism-arrow {
  color: var(--cyan);
  font-size: 36px;
}

.mechanism-stack {
  display: grid;
  gap: 12px;
}

.mechanism-stack > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  padding: 19px 22px;
  border: 1px solid rgba(76, 229, 247, 0.24);
  border-radius: 16px;
  background: rgba(76, 229, 247, 0.05);
}

.mechanism-stack span,
.mechanism-stack small {
  color: var(--muted);
  font-size: 12px;
}

.mechanism-stack small {
  grid-column: 2;
}

.mechanism-link {
  color: var(--muted);
  font-size: 13px;
}

.mechanism-stack--muted > div {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.journey {
  display: grid;
  grid-template-columns: 180px repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
}

.journey > * {
  padding: clamp(24px, 3vw, 46px);
}

.journey-head {
  display: grid;
  place-items: center;
  background: rgba(76, 229, 247, 0.08);
  color: var(--cyan-soft);
  font-weight: 700;
  text-align: center;
}

.journey article {
  min-height: 210px;
  border-left: 1px solid var(--line);
}

.journey article span {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 800;
}

.journey article h3 {
  margin: 24px 0 10px;
  font-size: clamp(18px, 1.35vw, 26px);
}

.journey article p {
  color: var(--muted);
  font-size: 15px;
}

.phone-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: clamp(15px, 2vw, 38px);
  margin-top: 88px;
  padding: 54px 34px 0;
  border-radius: 34px;
  background: radial-gradient(circle at 50% 100%, rgba(72, 144, 185, 0.16), transparent 66%);
}

.phone-strip img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.4));
}

.chapter-light {
  position: absolute;
  width: 1000px;
  height: 1000px;
  right: -240px;
  top: -370px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 169, 206, 0.16), transparent 67%);
}

.brief-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 20px;
}

.brief-card {
  padding: clamp(30px, 3vw, 52px);
}

.brief-card span {
  color: var(--cyan);
  font-weight: 750;
}

.brief-card p {
  margin-top: 28px;
  color: #b5c2cb;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1.16fr;
  gap: 30px;
}

.compare-card {
  min-height: 520px;
  padding: clamp(34px, 4vw, 66px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(16, 31, 44, 0.9), rgba(7, 17, 27, 0.8));
}

.compare-card--after {
  border-color: rgba(103, 240, 112, 0.28);
  background: linear-gradient(145deg, rgba(19, 51, 42, 0.56), rgba(7, 23, 28, 0.88));
}

.compare-label {
  display: block;
  margin-bottom: 44px;
  color: #d4dde4;
  font-size: clamp(32px, 2.6vw, 48px);
  font-weight: 750;
}

.compare-card--after .compare-label {
  color: var(--green);
}

.compare-card h3 {
  font-size: clamp(23px, 1.8vw, 34px);
}

.compare-card p {
  max-width: 620px;
  margin-top: 20px;
  color: var(--muted);
}

.wire-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 60px;
}

.wire-cards i {
  height: 70px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.wire-cards i:nth-child(2) {
  height: 110px;
}

.wire-cards i:nth-child(3) {
  transform: translateY(-38px);
}

.step-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 80px;
}

.step-pills span {
  border-color: rgba(103, 240, 112, 0.24);
  color: #c9f8ce;
}

.feature {
  background:
    radial-gradient(circle at 80% 48%, rgba(84, 109, 255, 0.09), transparent 36%),
    var(--bg);
}

.feature--cyan {
  background:
    radial-gradient(circle at 82% 50%, rgba(76, 229, 247, 0.12), transparent 39%),
    #06101a;
}

.feature--blue {
  background:
    radial-gradient(circle at 52% 70%, rgba(46, 83, 188, 0.17), transparent 42%),
    #07111b;
}

.feature-heading {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.feature-heading h2 {
  max-width: 1320px;
  font-size: clamp(42px, 4.1vw, 76px);
  line-height: 1.1;
  letter-spacing: -0.045em;
}

.feature-tag {
  display: inline-flex;
  justify-content: center;
  padding: 9px 18px;
  border: 1px solid rgba(76, 229, 247, 0.35);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 750;
}

.problem-line {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 30px;
  max-width: 1250px;
  margin-top: 72px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.problem-line strong {
  color: #e7edf2;
}

.problem-line p {
  color: var(--muted);
}

.phones-showcase {
  position: relative;
  display: grid;
  align-items: end;
  gap: clamp(24px, 4vw, 74px);
  margin-top: clamp(76px, 8vw, 140px);
}

.phones-showcase--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phones-showcase figure {
  display: grid;
  justify-items: center;
  gap: 24px;
}

.phones-showcase img {
  width: 100%;
  max-width: 455px;
  max-height: 880px;
  object-fit: contain;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.42));
}

.phones-showcase figure:nth-child(2) {
  transform: translateY(-50px);
}

.phones-showcase figcaption {
  color: #c8d4dc;
  text-align: center;
  font-size: clamp(15px, 1.1vw, 21px);
}

.diagnosis-layout {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 70px;
  margin-top: 80px;
}

.diagnosis-copy {
  align-self: center;
  padding: 40px 0;
}

.diagnosis-copy > p {
  font-size: clamp(22px, 1.6vw, 30px);
  font-weight: 680;
}

.diagnosis-copy ol {
  margin: 45px 0 0;
  padding-left: 1.4em;
  color: var(--muted);
}

.diagnosis-copy li {
  margin: 18px 0;
  padding-left: 8px;
}

.phones-showcase--diag {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0;
}

.phones-showcase--diag img {
  max-height: 700px;
}

.state-table {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
}

.state-table > div {
  min-height: 96px;
  padding: 25px 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.state-table > div:nth-child(3n) {
  border-right: 0;
}

.state-table > div:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.state-table b,
.state-table span {
  display: block;
}

.state-table b {
  color: var(--text);
}

.state-title {
  background: rgba(76, 229, 247, 0.06);
  color: var(--cyan-soft) !important;
  font-weight: 700;
}

.motion-flow,
.reward-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 65px;
}

.motion-flow span {
  padding: 16px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}

.motion-flow i,
.reward-flow i {
  color: var(--cyan);
  font-style: normal;
}

.decision-note {
  max-width: 920px;
  margin: 48px auto 0;
  color: var(--muted);
  text-align: center;
}

.decision-note b {
  color: var(--text);
}

.rising-intro {
  min-height: 1000px;
  background:
    radial-gradient(circle at 78% 48%, rgba(44, 155, 183, 0.2), transparent 28%),
    linear-gradient(135deg, #07131f, #02080d);
}

.rising-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 70px;
}

.rising-grid h2 {
  margin: 24px 0 42px;
}

.rising-grid p {
  max-width: 820px;
  color: var(--muted);
  font-size: clamp(18px, 1.3vw, 25px);
}

.core-problems {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 48px;
}

.core-problems span {
  padding: 14px 20px;
  border: 1px solid rgba(76, 229, 247, 0.25);
  border-radius: 999px;
  color: var(--cyan-soft);
}

.rising-key-phone {
  width: 100%;
  max-height: 1040px;
  object-fit: contain;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.5));
}

.strategy-goal {
  display: flex;
  gap: 26px;
  align-items: center;
  margin: -45px 0 80px;
  padding: 28px 34px;
  border: 1px solid rgba(76, 229, 247, 0.22);
  border-radius: 20px;
  background: rgba(76, 229, 247, 0.05);
  font-size: clamp(18px, 1.45vw, 27px);
}

.strategy-goal span {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 750;
}

.strategy-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.strategy-card {
  padding: clamp(34px, 4vw, 66px);
}

.strategy-card small {
  color: var(--cyan);
}

.strategy-card h3 {
  margin: 30px 0 45px;
  font-size: clamp(28px, 2.2vw, 42px);
  line-height: 1.25;
}

.strategy-card ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strategy-card li {
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: #c4cfd7;
}

.overline {
  margin-bottom: 34px;
  font-size: 15px;
}

.annotated-phone {
  position: relative;
  min-height: 1050px;
  margin-top: 80px;
}

.annotated-phone > img {
  width: min(48vw, 600px);
  max-height: 1040px;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 38px 65px rgba(0, 0, 0, 0.5));
}

.annotation {
  position: absolute;
  display: grid;
  gap: 8px;
  width: min(350px, 25vw);
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(7, 18, 29, 0.88);
  backdrop-filter: blur(12px);
}

.annotation::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 72px;
  height: 1px;
  background: rgba(76, 229, 247, 0.5);
}

.annotation b {
  color: var(--cyan);
}

.annotation span {
  color: var(--muted);
  font-size: 15px;
}

.annotation--one {
  top: 130px;
  left: 4%;
}

.annotation--one::after,
.annotation--three::after {
  left: 100%;
}

.annotation--two {
  top: 400px;
  right: 4%;
}

.annotation--two::after {
  right: 100%;
}

.annotation--three {
  top: 690px;
  left: 5%;
}

.phone-cards-dark {
  padding: 70px 5% 0;
  border-radius: 44px;
  background: linear-gradient(180deg, rgba(4, 11, 17, 0.25), rgba(0, 0, 0, 0.45));
}

.stage-path {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  margin-top: 90px;
}

.stage-path article {
  position: relative;
  min-height: 240px;
  padding: 42px;
  border: 1px solid rgba(76, 229, 247, 0.2);
  border-radius: 24px;
  background: rgba(19, 40, 55, 0.62);
}

.stage-path article > span {
  position: absolute;
  top: 22px;
  right: 26px;
  color: rgba(76, 229, 247, 0.24);
  font-size: 58px;
  font-weight: 800;
}

.stage-path small {
  color: var(--cyan);
}

.stage-path h3 {
  margin: 28px 0 10px;
  font-size: clamp(26px, 2vw, 38px);
}

.stage-path p {
  color: var(--muted);
}

.stage-path > i {
  color: var(--cyan);
  font-size: 36px;
  font-style: normal;
}

.task-layout {
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  align-items: center;
  gap: 70px;
}

.task-copy > span {
  color: var(--cyan);
  font-size: 14px;
  font-weight: 750;
}

.task-copy h3 {
  margin: 26px 0;
  font-size: clamp(30px, 2.7vw, 50px);
  line-height: 1.18;
}

.task-copy p {
  color: var(--muted);
}

.task-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 46px;
  color: #aebbc4;
  font-size: 14px;
}

.task-legend i {
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

.task-phones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: end;
}

.task-phones img {
  width: 100%;
  filter: drop-shadow(0 25px 34px rgba(0, 0, 0, 0.46));
}

.section--celebration {
  background:
    radial-gradient(circle at 50% 56%, rgba(27, 110, 152, 0.22), transparent 34%),
    linear-gradient(180deg, #07111b, #02070b);
}

.reward-flow {
  align-items: stretch;
  margin-top: 100px;
}

.reward-flow article {
  flex: 1 1 0;
  min-height: 150px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
}

.reward-flow article span {
  color: var(--cyan);
  font-weight: 800;
}

.reward-flow article p {
  margin-top: 25px;
}

.reward-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
  margin: 100px -4% -200px;
}

.reward-gallery img {
  width: 100%;
  max-height: 870px;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.52));
}

.reward-gallery img:nth-child(2),
.reward-gallery img:nth-child(4) {
  transform: translateY(55px);
}

.section--data {
  background: linear-gradient(180deg, #06101a, #081723);
}

.data-label {
  margin: -50px 0 44px clamp(62px, 6vw, 108px);
  color: var(--muted);
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-left: clamp(62px, 6vw, 108px);
}

.data-card {
  min-height: 190px;
  padding: clamp(28px, 3vw, 48px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.025);
}

.data-card strong,
.data-card span {
  display: block;
}

.data-card strong {
  margin-bottom: 16px;
  font-size: clamp(31px, 3vw, 56px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.data-card span {
  color: var(--muted);
}

.data-card--accent {
  border-color: rgba(76, 229, 247, 0.36);
  background: rgba(76, 229, 247, 0.07);
}

.data-card--accent strong {
  color: var(--cyan);
}

.data-note {
  max-width: 1250px;
  margin: 50px 0 0 clamp(62px, 6vw, 108px);
  color: var(--muted);
}

.summary {
  min-height: 1050px;
  padding-bottom: 54px;
  background: #050d15;
}

.summary-glow {
  position: absolute;
  width: 900px;
  height: 900px;
  left: 50%;
  bottom: -560px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 137, 183, 0.21), transparent 67%);
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-left: clamp(62px, 6vw, 108px);
}

.summary-card {
  padding: clamp(35px, 4vw, 64px);
}

.summary-card > span {
  color: var(--cyan);
  font-size: 14px;
  font-weight: 760;
}

.summary-card h3 {
  margin: 28px 0 38px;
  font-size: clamp(25px, 2vw, 38px);
  line-height: 1.25;
}

.summary-card p {
  margin-top: 18px;
  color: var(--muted);
}

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: #6f808e;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.footer a {
  color: var(--cyan-soft);
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 760ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 480px;
  }

  .hero-phones {
    min-height: 650px;
  }

  .context-grid {
    grid-template-columns: 80px 1fr 1fr;
  }

  .mechanism {
    grid-template-columns: 1fr auto 1fr;
  }

  .mechanism-link,
  .mechanism-stack--muted {
    display: none;
  }

  .journey {
    grid-template-columns: repeat(3, 1fr);
  }

  .journey-head {
    grid-column: 1 / -1;
    min-height: 70px;
  }

  .journey article:first-of-type {
    border-left: 0;
  }

  .diagnosis-layout,
  .task-layout {
    grid-template-columns: 1fr;
  }

  .diagnosis-copy,
  .task-copy {
    max-width: 760px;
  }

  .annotated-phone > img {
    width: 510px;
  }
}

@media (max-width: 860px) {
  body {
    font-size: 16px;
  }

  .container {
    width: min(100% - 36px, 680px);
  }

  .section {
    padding: 92px 0;
  }

  .section--hero {
    min-height: auto;
    padding-top: 52px;
  }

  .hero-grid {
    display: flex;
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .eyebrow-row {
    margin-bottom: 58px;
  }

  .hero h1 {
    font-size: clamp(50px, 14.2vw, 90px);
  }

  .hero-meta {
    margin-top: 36px;
  }

  .hero-intro {
    margin-top: 34px;
  }

  .hero-phones {
    width: 100%;
    min-height: 630px;
    margin-top: 55px;
  }

  .phone--hero {
    width: min(52vw, 330px);
  }

  .phone--back {
    top: 5%;
    left: -2%;
    right: auto;
  }

  .phone--middle {
    top: 8%;
    right: -2%;
    width: min(54vw, 342px);
  }

  .phone--front {
    right: 16%;
    bottom: -6%;
  }

  .section-heading,
  .feature-heading {
    display: block;
  }

  .section-heading h2,
  .rising-grid h2,
  .feature-heading h2 {
    font-size: clamp(38px, 9.5vw, 62px);
  }

  .section-heading--split span {
    display: block;
    margin-top: 16px;
  }

  .section-no {
    display: inline-block;
    margin: 0 0 16px;
  }

  .section-lead,
  .data-label,
  .data-grid,
  .data-note,
  .summary-grid {
    margin-left: 0;
  }

  .section-lead,
  .data-label {
    margin-top: -35px;
  }

  .context-grid,
  .challenge-grid,
  .brief-grid,
  .compare-grid,
  .rising-grid,
  .strategy-columns,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .context-label {
    padding: 0;
    writing-mode: horizontal-tb;
  }

  .timeline {
    grid-template-columns: 1fr;
    gap: 42px;
    margin: 70px 0 0;
    padding-left: 35px;
  }

  .timeline-track {
    top: 0;
    bottom: 0;
    left: 8px;
    width: 2px;
    height: auto;
  }

  .timeline article {
    padding-top: 0;
  }

  .timeline article::before {
    top: 4px;
    left: -35px;
  }

  .solution-list {
    grid-template-columns: 1fr;
  }

  .mechanism {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mechanism-arrow {
    transform: rotate(90deg);
    text-align: center;
  }

  .journey {
    grid-template-columns: 1fr;
  }

  .journey-head {
    grid-column: auto;
  }

  .journey article {
    min-height: auto;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .phone-strip {
    grid-template-columns: repeat(5, 42vw);
    margin-inline: calc(50% - 50vw);
    padding-inline: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .phone-strip img {
    scroll-snap-align: center;
  }

  .feature-tag {
    width: max-content;
    margin-bottom: 24px;
  }

  .problem-line {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 46px;
  }

  .phones-showcase--three,
  .phones-showcase--diag {
    grid-template-columns: repeat(3, 66vw);
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 33vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .phones-showcase img,
  .phones-showcase figure {
    scroll-snap-align: center;
  }

  .phones-showcase figure:nth-child(2) {
    transform: none;
  }

  .diagnosis-layout {
    gap: 20px;
  }

  .state-table {
    grid-template-columns: 88px 1fr 1fr;
    font-size: 13px;
  }

  .state-table > div {
    min-height: 80px;
    padding: 17px 13px;
  }

  .motion-flow {
    flex-wrap: wrap;
  }

  .motion-flow i {
    display: none;
  }

  .rising-grid {
    gap: 50px;
  }

  .rising-key-phone {
    max-height: 760px;
  }

  .strategy-goal {
    display: grid;
    margin-top: -42px;
  }

  .annotated-phone {
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 12px;
  }

  .annotated-phone > img {
    width: min(100%, 500px);
    margin-bottom: 28px;
  }

  .annotation {
    position: static;
    width: 100%;
  }

  .annotation::after {
    display: none;
  }

  .stage-path {
    grid-template-columns: 1fr;
  }

  .stage-path > i {
    transform: rotate(90deg);
    text-align: center;
  }

  .task-phones {
    grid-template-columns: repeat(4, 44vw);
    margin-inline: calc(50% - 50vw);
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .task-phones img {
    scroll-snap-align: center;
  }

  .reward-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .reward-flow i {
    display: none;
  }

  .reward-gallery {
    grid-template-columns: repeat(4, 62vw);
    margin: 70px calc(50% - 50vw) -90px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .reward-gallery img {
    scroll-snap-align: center;
  }

  .reward-gallery img:nth-child(2),
  .reward-gallery img:nth-child(4) {
    transform: none;
  }

  .data-grid {
    grid-template-columns: 1fr 1fr;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .hero-phones {
    min-height: 500px;
  }

  .phone--front {
    right: 8%;
  }

  .data-grid,
  .reward-flow {
    grid-template-columns: 1fr;
  }

  .data-card {
    min-height: 150px;
  }

  .footer {
    display: grid;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Figma canvas: always shown, scaled by viewport width */
.semantic-site {
  display: none;
}

.exact-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.exact-stage {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1920px;
    height: 27520px;
    overflow: hidden;
    color: #f7f9fb;
    background: var(--page-background);
    -webkit-backdrop-filter: blur(140.51724243164062px);
    backdrop-filter: blur(140.51724243164062px);
    transform: scale(var(--exact-scale, 1));
    transform-origin: top left;
  }

  .exact-noise {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.22;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px);
    background-size: 64px 64px;
  }

  .exact-hero-backdrop {
    z-index: 1;
    overflow: visible;
    pointer-events: none;
  }

  .exact-hero-card {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    width: 407px;
    border-radius: 36px;
    box-shadow: inset 0 1px 0 rgba(217, 217, 217, 0.12);
  }

  .exact-hero-card--left {
    top: 119px;
    left: 0;
    z-index: 1;
    height: 751px;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0.06), rgba(13, 24, 35, 0.06));
  }

  .exact-hero-card--right {
    top: 76px;
    left: 706px;
    z-index: 1;
    height: 751px;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0.06), rgba(13, 24, 35, 0.06));
  }

  .exact-hero-card--center {
    top: 0;
    left: 331px;
    z-index: 2;
    height: 239px;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0.05), rgba(13, 24, 35, 0.05));
  }

  .exact-pos {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w, auto);
    height: var(--h, auto);
  }

  .exact-logo {
    z-index: 3;
    color: #fff;
    font-size: 20px;
    font-weight: 750;
    text-shadow: -1.5px 0 #25f4ee, 1.5px 1px #fe2c55;
    visibility: hidden;
  }

  .exact-kicker {
    z-index: 3;
    color: #fff;
    font-family: "PingFang SC", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }

  .exact-title {
    z-index: 3;
    width: 769px;
    height: 284px;
    color: #fff;
    font-family: "Douyin Sans", "PingFang SC", sans-serif;
    font-size: 120px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    font-synthesis: none;
  }

  .exact-brand {
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0;
    height: 51px;
  }

  .exact-brand b {
    margin-left: 25px;
    color: #fff;
    font-family: "Douyin Sans", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .exact-brand .exact-author-pill {
    display: flex;
    width: 126.805px;
    height: 51px;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 25.5px;
    background: rgba(224, 231, 255, .47);
  }

  .exact-brand .exact-author-name {
    color: #fff;
    font-family: "PingFang SC", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34.878px;
    white-space: nowrap;
  }

  .exact-brand .exact-avatar {
    display: grid;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
  }

  .exact-brand .exact-avatar img {
    width: 37.4px;
    max-width: none;
    height: 35px;
    object-fit: fill;
  }

  .exact-lead {
    z-index: 3;
    color: #fff;
    font-family: "PingFang SC", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
  }

  .exact-lead::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 720px;
    height: 1px;
    background: rgba(255,255,255,.12);
  }

  .exact-block {
    z-index: 2;
    padding: 0;
    overflow: visible;
  }

  .exact-block h2 {
    margin: 0;
    color: #f5f8fa;
    font-size: 64px;
    font-weight: 720;
    line-height: 1.12;
    letter-spacing: -.035em;
  }

  .exact-background-section h2 {
    position: relative;
    z-index: 3;
    font-family: "Douyin Sans", "PingFang SC", sans-serif;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
  }

  .exact-background-axis {
    position: absolute;
    z-index: 2;
    top: 153px;
    left: 0;
    width: 52px;
    height: 720px;
    border-right: 1px solid rgba(170, 187, 199, .5);
    color: rgba(211, 219, 226, .58);
    font-family: "PingFang SC", sans-serif;
    font-size: 24px;
    font-weight: 300;
  }

  .exact-background-axis span {
    position: absolute;
    left: 0;
    writing-mode: vertical-rl;
    letter-spacing: .34em;
    line-height: 1;
  }

  .exact-background-axis span:first-child {
    top: 0;
  }

  .exact-background-axis span:last-child {
    top: 290px;
  }

  .exact-background-copy {
    position: absolute;
    z-index: 2;
    top: 165px;
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-family: "PingFang SC", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.42;
  }

  .exact-background-copy b {
    color: #fff;
    font-weight: 200;
  }

  .exact-background-copy--left {
    left: 108px;
    width: 470px;
  }

  .exact-background-copy--right {
    left: 617px;
    width: 1108px;
  }

  .exact-background-stage {
    position: absolute;
    z-index: 0;
    top: 317px;
    left: 617px;
    width: 1103px;
    height: 555px;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(90deg, rgba(151, 197, 251, .21) 15%, rgba(55, 91, 114, 0) 100%);
  }

  .exact-background-years {
    position: absolute;
    z-index: 2;
    top: 343px;
    left: 0;
    width: 100%;
    color: rgba(255, 255, 255, .9);
    font-family: "PingFang SC", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .exact-background-years b {
    position: absolute;
    font-weight: 400;
  }

  .exact-background-years b:nth-child(1) { left: 107px; }
  .exact-background-years b:nth-child(2) { left: 651px; font-weight: 600; }
  .exact-background-years b:nth-child(3) { left: 1182px; font-weight: 600; }

  .exact-background-lines {
    position: absolute;
    z-index: 2;
    top: 391px;
    left: 0;
    width: 100%;
    height: 18px;
  }

  .exact-background-lines i {
    position: absolute;
    top: 9px;
    display: block;
    height: 1px;
    background: rgba(184, 198, 208, .62);
  }

  .exact-background-lines i:first-child {
    left: 108px;
    width: 806px;
  }

  .exact-background-lines i:nth-child(2) {
    left: 632px;
    width: 1088px;
    height: 2px;
    background: rgba(255, 255, 255, .92);
  }

  .exact-background-lines em {
    position: absolute;
    top: 0;
    left: 623px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
  }

  .exact-background-interfaces {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
  }

  .exact-background-interfaces img {
    display: block;
    width: var(--w);
    height: var(--h);
    object-fit: contain;
  }

  .exact-background-guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-family: "PingFang SC", sans-serif;
  }

  .exact-background-guide__cards {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 138px;
    height: 301px;
  }

  .exact-background-guide__cards > div,
  .exact-background-guide__long-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
  }

  .exact-background-guide__cards > div::before,
  .exact-background-guide__long-card::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: rgba(217, 217, 217, .60);
    opacity: .1;
    content: "";
  }

  .exact-background-guide__cards > div:first-child { height: 147px; }
  .exact-background-guide__cards > div:last-child { height: 145px; }

  .exact-background-guide > b {
    width: 100%;
    margin-top: 24px;
    font-size: 20px;
    font-weight: 800;
    line-height: 28px;
    text-align: center;
  }

  .exact-background-guide__long-card {
    width: 158px;
    height: 304px;
    font-size: 16px;
    line-height: normal;
  }

  .exact-context {
    display: grid;
    grid-template-columns: 86px 470px 650px;
    gap: 30px;
    margin-top: 72px;
  }

  .exact-context .side-label {
    color: #8797a4;
    font-size: 24px;
    writing-mode: vertical-rl;
  }

  .exact-context p {
    color: #9daab5;
    font-size: 24px;
    line-height: 1.65;
  }

  .exact-context p:last-child {
    grid-column: 3;
  }

  .exact-context b {
    color: #d9e1e7;
    font-weight: 600;
  }

  .exact-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
    margin: 86px 70px 0 106px;
    padding-top: 45px;
  }

  .exact-timeline > i {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(74,210,233,.2), #4bd9ee 45%, rgba(74,210,233,.15));
  }

  .exact-timeline article::before {
    content: "";
    position: absolute;
    top: 0;
    width: 18px;
    height: 18px;
    margin-top: -45px;
    border: 5px solid #08131e;
    border-radius: 50%;
    background: #4bd9ee;
    box-shadow: 0 0 0 1px #4bd9ee;
  }

  .exact-timeline b,
  .exact-timeline span,
  .exact-timeline small {
    display: block;
  }

  .exact-timeline b {
    color: #f0f4f7;
    font-size: 24px;
  }

  .exact-timeline span {
    margin-top: 16px;
    color: #c7d2da;
    font-size: 22px;
  }

  .exact-timeline small {
    color: #748794;
    font-size: 18px;
  }

  .exact-heading-inline {
    display: flex;
    align-items: baseline;
    gap: 55px;
  }

  .exact-heading-inline p {
    color: #8ea0ad;
    font-size: 24px;
  }

  .exact-solution-section {
    position: absolute;
  }

  .exact-solution-section .exact-heading-row {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    width: 686px;
    height: 73px;
  }

  .exact-solution-section .exact-heading-row h2 {
    width: 448px;
    color: #fff;
    font-family: "Douyin Sans", "PingFang SC", sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    font-synthesis: none;
  }

  .exact-solution-section .exact-heading-row > span {
    width: 238px;
    color: #fff;
    font-family: "PingFang SC", sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
    white-space: nowrap;
  }

  .exact-challenge {
    position: absolute;
    top: 187px;
    left: 0;
    width: 1736px;
    height: 209px;
  }

  .exact-challenge article {
    position: absolute;
    top: 0;
    color: #fff;
    font-family: "PingFang SC", sans-serif;
  }

  .exact-challenge article > b {
    display: block;
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
  }

  .exact-challenge h3 {
    margin: 16px 0 0;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 34px;
  }

  .exact-challenge p {
    margin: 16px 0 0;
    color: #fff;
  }

  .exact-challenge__problem {
    left: 0;
    width: 644px;
  }

  .exact-challenge__problem p {
    position: relative;
    width: 644px;
    font-size: 28px;
    font-weight: 600;
    line-height: 39px;
    white-space: nowrap;
  }

  .exact-challenge__problem p::after {
    position: absolute;
    top: 54px;
    right: 1px;
    width: 385px;
    height: 1px;
    background: rgba(255, 255, 255, .35);
    content: "";
  }

  .exact-challenge__problem p span {
    color: rgba(255, 255, 255, .2);
  }

  .exact-challenge__problem small {
    position: absolute;
    top: 175px;
    color: rgba(255, 255, 255, .6);
    font-size: 24px;
    font-weight: 300;
    line-height: 34px;
  }

  .exact-challenge__problem small:nth-of-type(1) { left: 56px; }
  .exact-challenge__problem small:nth-of-type(2) { left: 389px; }

  .exact-challenge__answer {
    left: 859px;
    width: 877px;
  }

  .exact-challenge article.exact-challenge__answer > b {
    font-size: 28px;
    font-weight: 600;
    line-height: 39px;
  }

  .exact-challenge__answer p {
    margin-top: 18px;
    font-size: 24px;
    font-weight: 300;
    line-height: 39px;
  }

  .exact-mechanism {
    position: absolute;
    inset: 0;
  }

  .exact-capability-wheel {
    position: absolute;
    top: 522px;
    left: 98px;
    display: block;
    width: 394px;
    height: 394px;
    max-width: none;
    border: 0;
    border-radius: 0;
    object-fit: contain;
  }

  .exact-capability-wheel::before,
  .exact-capability-wheel::after {
    position: absolute;
    background: rgba(255, 255, 255, .25);
    content: "";
  }

  .exact-capability-wheel::before {
    top: 197px;
    left: 34px;
    width: 326px;
    height: 1px;
  }

  .exact-capability-wheel::after {
    top: 231px;
    left: 197px;
    width: 1px;
    height: 132px;
  }

  .exact-capability-wheel > div {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 13px;
  }

  .exact-capability-wheel b {
    font-size: 27px;
    font-weight: 500;
    line-height: 37px;
  }

  .exact-capability-wheel span {
    color: rgba(255, 255, 255, .6);
    font-size: 20px;
    line-height: 28px;
  }

  .wheel-profession { top: 68px; left: 82px; width: 231px; }
  .wheel-safety { top: 242px; left: 77px; width: 80px; }
  .wheel-career { top: 242px; left: 217px; width: 121px; }

  .wheel-standard {
    position: absolute;
    z-index: 2;
    top: 177px;
    left: 99px;
    width: 197px;
    color: #4aaff2;
    background: #0b1722;
    font-size: 27px;
    font-weight: 500;
    line-height: 39px;
  }

  .exact-mechanism-arrow {
    position: absolute;
    top: 592px;
    left: 679px;
    width: 118px;
    height: 253px;
    background: rgba(36, 69, 94, .58);
    clip-path: polygon(0 28%, 62% 28%, 62% 0, 100% 50%, 62% 100%, 62% 72%, 0 72%);
  }

  .exact-mechanism-diagram {
    position: absolute;
    top: 499px;
    left: 855px;
    display: block;
    width: 869px;
    height: 405px;
    max-width: none;
    object-fit: contain;
  }

  .mechanism-state {
    position: absolute;
    color: rgba(255, 255, 255, .38);
    font-size: 24px;
    line-height: 34px;
  }

  .mechanism-state--new { top: 499px; left: 1047px; }
  .mechanism-state--existing { top: 499px; left: 1579px; }
  .mechanism-state--future { top: 748px; left: 1579px; }

  .mechanism-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 103px;
    border-radius: 16px;
    color: #fff;
    font-family: "PingFang SC", sans-serif;
    line-height: normal;
  }

  .mechanism-card b { font-size: 32px; font-weight: 600; }
  .mechanism-card span { font-size: 24px; font-weight: 300; }
  .mechanism-card em {
    position: absolute;
    top: 0;
    right: 15px;
    color: rgba(255, 255, 255, .42);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
  }

  .mechanism-card--activity,
  .mechanism-card--teaching {
    left: 855px;
    width: 430px;
    background: #0878ab;
  }

  .mechanism-card--activity { top: 552px; }
  .mechanism-card--teaching { top: 801px; }

  .mechanism-card--report,
  .mechanism-card--long {
    left: 1482px;
    width: 242px;
    background: rgba(142, 177, 193, .17);
  }

  .mechanism-card--report { top: 552px; }
  .mechanism-card--long { top: 801px; }

  .mechanism-link {
    position: absolute;
    display: block;
    color: rgba(255, 255, 255, .58);
    font-family: "PingFang SC", sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 50px;
    text-align: center;
  }

  .mechanism-link--horizontal { top: 579px; left: 1305px; width: 177px; }
  .mechanism-link--vertical { top: 668px; left: 1096px; width: 108px; line-height: 44px; }
  .mechanism-link--diagonal { top: 708px; left: 1307px; width: 220px; transform: rotate(8deg); }

  .exact-framework-section .exact-heading-inline {
    height: 73px;
    gap: 48px;
  }

  .exact-framework-section .exact-heading-inline h2 {
    width: 256px;
    color: #fff;
    font-family: "Douyin Sans", "PingFang SC", sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    font-synthesis: none;
  }

  .exact-framework-section .exact-heading-inline p {
    color: rgba(255, 255, 255, .58);
    font-size: 24px;
    font-weight: 300;
    line-height: 34px;
  }

  .exact-framework-scroller {
    position: absolute;
    top: 143px;
    left: 0;
    width: 1840px;
    height: 1653px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-color: rgba(78, 215, 238, .55) rgba(255, 255, 255, .05);
    scrollbar-width: thin;
    cursor: grab;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .exact-framework-scroller.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  .exact-sequence-scroll {
    position: absolute;
    z-index: 10;
    left: -14px;
    width: 1854px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .exact-sequence-scroll::-webkit-scrollbar {
    display: none;
  }

  .exact-sequence-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  .exact-sequence-scroll--script {
    top: 243px;
    left: 0;
    height: 881px;
  }

  .exact-sequence-scroll--visual {
    top: 299px;
    height: 890px;
  }

  .exact-sequence-track {
    display: flex;
    width: max-content;
    height: 100%;
    box-sizing: content-box;
    padding-right: 160px;
  }

  .exact-sequence-track img {
    display: block;
    flex: 0 0 auto;
    width: 2058px;
    height: auto;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
  }

  .exact-sequence-scroll--script .exact-sequence-track img {
    width: 2154px;
  }

  .exact-sequence-scroll--visual .exact-sequence-track img {
    width: 1999px;
  }

  .exact-sequence-scroll--peak {
    top: 193px;
    left: 0;
    width: 1818px;
    height: 928px;
    z-index: 10;
    background: transparent;
    pointer-events: auto;
  }

  .exact-sequence-scroll--peak .exact-sequence-track {
    padding-right: 160px;
  }

  .exact-sequence-scroll--peak .exact-sequence-track img {
    width: 1975px;
    height: 928px;
    max-width: none;
    object-fit: fill;
  }

  .exact-framework-track {
    position: relative;
    width: 2232px;
    height: 1653px;
    overflow: hidden;
    background: #071520;
  }

  .exact-framework-composite {
    display: block;
    width: 1840px;
    height: 1653px;
    max-width: none;
    pointer-events: none;
  }

  .exact-framework-ui-patch {
    position: absolute;
    z-index: 2;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
  }

  .exact-framework-ui-patch--live-report {
    left: 223.371px;
    top: 276px;
    width: 192px;
    height: 491px;
  }

  .exact-framework-ui-patch--thankyou {
    left: 479.371px;
    top: 351px;
    width: 191.765px;
    height: 415px;
  }

  .exact-framework-ui-patch--visuals {
    left: 702.674px;
    top: 351px;
    width: 191.303px;
    height: 414px;
  }

  .exact-framework-touchpoint-bar {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    width: 2072px;
    height: 80px;
    padding: 20px 395px 19px 48px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    border-radius: 24px;
    background:
      linear-gradient(rgba(64, 88, 111, .4), rgba(64, 88, 111, .4)),
      #071520;
    color: #fff;
    font-family: "Douyin Sans", "PingFang SC", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
  }

  .exact-framework-title-bar {
    position: absolute;
    z-index: 1;
    top: 156px;
    left: 1177.978px;
    box-sizing: border-box;
    display: flex;
    width: 894px;
    height: 80px;
    padding: 20px 395px 19px 48px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    border-radius: 24px;
    background: #1c2733;
    color: #fff;
    font-family: "PingFang SC", sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
  }

  .exact-framework-activity-band {
    position: absolute;
    z-index: 1;
    top: 893px;
    left: 0;
    box-sizing: border-box;
    display: flex;
    width: 1965px;
    height: 124px;
    padding: 20px 395px 19px 394px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 24px;
    background:
      linear-gradient(rgba(88, 88, 88, .29), rgba(88, 88, 88, .29)),
      #071520;
    color: #fff;
    font-family: "PingFang SC", sans-serif;
    text-align: center;
    white-space: nowrap;
  }

  .exact-framework-activity-band strong {
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
  }

  .exact-framework-activity-band span {
    color: rgba(255, 255, 255, .8);
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
  }

  .exact-framework-figma-patch {
    position: absolute;
    z-index: 2;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
  }

  .exact-framework-figma-patch--upper-right {
    left: 1657.978px;
    top: 299.656px;
    width: 414px;
    height: 467.344px;
  }

  .exact-framework-figma-patch--lower-right {
    left: 1505px;
    top: 1063px;
    width: 462px;
    height: 583px;
  }

  .exact-framework-section.exact-reveal,
  .exact-framework-section.exact-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .teaching-intro-exact {
    padding-top: 0;
  }

  .exact-brief {
    display: grid;
    width: 820px;
    gap: 46px;
    margin-top: 75px;
  }

  .exact-brief article {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 24px;
  }

  .exact-brief b {
    color: #e8edf1;
    font-size: 32px;
    font-weight: 400;
  }

  .exact-brief p {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
  }

  .exact-before-after {
    display: grid;
    grid-template-columns: 600px 1057px;
    gap: 48px;
    margin-top: 74px;
  }

  .exact-before-after article {
    padding: 38px 0;
  }

  .exact-before-after article > b {
    color: #eef2f5;
    font-size: 48px;
  }

  .exact-before-after article:last-child > b {
    color: #67f070;
  }

  .exact-before-after p {
    margin-top: 20px;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
  }

  .exact-before-after h3 {
    margin-top: 22px;
    color: #dce5e9;
    font-size: 32px;
  }

  .teaching-intro-exact > h2,
  .reusable-framework-exact > h2,
  .ai-script-exact > h2,
  .ai-visual-exact > h2,
  .ai-states-exact > h2,
  .rising-exact > h2,
  .strategy-exact > h2 {
    color: #fff;
    font-family: "Douyin Sans", "PingFang SC", sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .exact-decision-copy {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    margin-top: 22px;
  }

  .exact-decision-copy h3,
  .exact-decision-copy p {
    margin-top: 0;
  }

  .exact-decision-copy h3 {
    flex: 0 0 auto;
  }

  .exact-decision-copy p {
    flex: 1 1 auto;
  }

  .exact-obstacle {
    display: grid;
    grid-template-columns: 134px 1fr;
    gap: 30px;
    width: 1270px;
    margin-top: 58px;
    color: #9baab4;
    font-size: 24px;
  }

  .exact-obstacle b {
    width: 134px;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
  }

  .ai-script-exact .exact-obstacle {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .ai-script-exact .exact-obstacle p {
    color: #fff;
    font-weight: 200;
  }

  .ai-visual-exact .exact-obstacle {
    grid-template-columns: 134px 1263px;
    align-items: center;
    width: 1427px;
  }

  .ai-visual-exact .exact-obstacle p {
    width: 1263px;
    color: #fff;
    font-weight: 200;
  }

  .benefit-action-exact .exact-obstacle {
    grid-template-columns: 134px 1227px;
    align-items: center;
    width: 1391px;
  }

  .benefit-action-exact .exact-obstacle p {
    width: 1227px;
    color: #fff;
    font-weight: 300;
  }

  .growth-stage-exact .exact-obstacle {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .growth-stage-exact .exact-obstacle p {
    flex: 1 1 auto;
    color: #fff;
    font-weight: 200;
  }

  .exact-state-note {
    width: 1000px;
    margin: 52px 0 0 300px;
    color: #9baab5;
    font-size: 24px;
    visibility: hidden;
  }

  .exact-state-table {
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    width: 1260px;
    margin: 52px auto 0;
    overflow: hidden;
    border: 1px solid rgba(137,165,184,.2);
    border-radius: 18px;
    visibility: hidden;
  }

  .exact-state-table > * {
    min-height: 100px;
    padding: 25px 35px;
    border-right: 1px solid rgba(137,165,184,.15);
    border-bottom: 1px solid rgba(137,165,184,.15);
    color: #a5b2bc;
    font-size: 22px;
    text-align: center;
  }

  .exact-state-table > :nth-child(3n),
  .exact-state-table > :nth-last-child(-n+3) {
    border-right: 0;
  }

  .exact-decision {
    width: 1260px;
    margin: 70px auto;
    visibility: hidden;
  }

  .exact-decision > b {
    font-size: 32px;
  }

  .exact-decision p {
    margin-top: 18px;
    color: #9aa9b4;
    font-size: 24px;
  }

  .state-pills {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 45px;
    visibility: hidden;
  }

  .state-pills span {
    padding: 18px 28px;
    border: 1px solid rgba(137,165,184,.2);
    border-radius: 14px;
    background: #101e2b;
    color: #b8c5ce;
  }

  .state-pills i {
    color: #4bd9ee;
    font-style: normal;
  }

  .exact-paragraph {
    width: 1080px;
    margin-top: 28px;
    color: #91a0ac;
    font-size: 24px;
  }

  .rising-exact .exact-paragraph {
    width: 1047px;
    color: #fff;
    font-weight: 300;
  }

  .rising-copy {
    display: grid;
    width: 1020px;
    gap: 16px;
    margin-top: 76px;
  }

  .rising-exact .rising-copy {
    width: 1074px;
    margin-top: 112px;
  }

  .rising-exact .rising-copy > b {
    color: #fff;
  }

  .rising-copy > b {
    margin-top: 25px;
    color: #e7edf1;
    font-size: 32px;
  }

  .rising-copy > p {
    color: #9aa9b4;
    font-size: 24px;
  }

  .rising-exact .rising-copy > p {
    color: #fff;
    font-weight: 300;
  }

  .rising-copy > div {
    display: flex;
    gap: 15px;
  }

  .rising-copy span {
    padding: 14px 18px;
    border-radius: 9px;
    background: #121f2c;
    color: #c2ccd3;
    font-size: 22px;
  }

  .rising-exact .rising-copy span {
    box-sizing: border-box;
    flex: none;
    color: #fff;
    font-size: 24px;
  }

  .rising-exact .rising-copy span:first-child {
    width: 533.21px;
  }

  .rising-exact .rising-copy span:nth-child(2) {
    width: 510.73px;
  }

  .exact-goal {
    margin-top: 42px;
    color: #fff;
    font-size: 32px;
    font-weight: 200;
  }

  .exact-goal b {
    color: #fff;
    font-weight: 200;
  }

  .strategy-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 84px;
    visibility: hidden;
  }

  .strategy-head b {
    padding: 20px;
    border-radius: 10px;
    background: #294e78;
    color: #eef5fa;
    font-size: 28px;
    text-align: center;
  }

  .strategy-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 20px;
    visibility: hidden;
  }

  .strategy-body article {
    min-height: 680px;
    padding: 34px 50px;
    border-left: 2px solid #24486d;
    background: linear-gradient(180deg, rgba(13,28,41,.7), rgba(8,19,29,.3));
  }

  .strategy-body .strategy-body-right {
    grid-column: 2;
  }

  .strategy-body small {
    color: #7d91a1;
    font-size: 22px;
  }

  .strategy-body h3 {
    margin: 10px 0 46px;
    font-size: 32px;
  }

  .strategy-body b {
    color: #7f93a3;
    font-size: 20px;
  }

  .strategy-body p {
    margin: 10px 0 32px;
    color: #eef2f5;
    font-size: 27px;
  }

.exact-strategy-supplement {
    position: absolute;
    inset: 0;
  z-index: 9;
    pointer-events: none;
  }

  .strategy-rail-label {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(117, 148, 174, .16);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(30, 49, 67, .62), rgba(13, 28, 41, .28));
    color: #8fa2b2;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 4px;
    line-height: 1;
    text-align: center;
    writing-mode: vertical-rl;
  }

  .strategy-task-flow-image {
    display: block;
    object-fit: contain;
    object-position: left top;
  }

  .strategy-task-flow {
    display: flex;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: space-around;
    padding: 8px 42px 0;
  }

  .strategy-task-flow--three {
    padding-inline: 12px;
  }

  .strategy-task {
    display: grid;
    width: 215px;
    flex: none;
    justify-items: center;
    gap: 18px;
    color: #c8d3dc;
    text-align: center;
  }

  .strategy-task-flow--three .strategy-task {
    width: 180px;
  }

  .strategy-task__icon {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border: 1px solid rgba(112, 154, 188, .2);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #1c3d58, #10263a 72%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    color: #c8d3dc;
    font-size: 36px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
  }

  .strategy-task b {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.35;
  }

  .strategy-task-arrow {
    position: relative;
    width: 70px;
    height: 82px;
    flex: none;
  }

  .strategy-task-arrow::before {
    position: absolute;
    top: 40px;
    right: 8px;
    left: 8px;
    height: 1px;
    background: #6f8292;
    content: "";
  }

  .strategy-task-arrow::after {
    position: absolute;
    top: 35px;
    right: 7px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #6f8292;
    border-right: 1px solid #6f8292;
    content: "";
    transform: rotate(45deg);
  }

  .exact-overline {
    display: block;
    margin-bottom: 24px;
    color: #ababab;
    font-size: 24px;
    font-weight: 200;
  }

  .exact-block h2.action-title {
    color: #fff;
    font-family: "Douyin Sans", "PingFang SC", sans-serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .exact-callouts {
    display: grid;
    width: 380px;
    gap: 14px;
    margin: 70px 0 0 60px;
  }

  .exact-callouts span {
    display: grid;
    gap: 6px;
    padding: 24px;
    border: 1px solid rgba(137,165,184,.14);
    border-radius: 12px;
    background: #111f2d;
    color: #8fa0ac;
    font-size: 18px;
    text-align: center;
  }

.exact-callouts b {
  color: #edf1f4;
  font-size: 28px;
}

.action-one-exact .exact-callouts {
  position: absolute;
  left: 60px;
  top: 330px;
  width: 524px;
  height: 620px;
  margin: 0;
  display: grid;
  grid-template-rows: 215px 108px 267px;
  gap: 15px;
  z-index: 8;
}

.action-one-exact .exact-callouts span {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 524px;
  padding: 28px;
  border: 0;
  border-radius: 24px;
  background: rgba(45, 58, 78, 0.4);
}

.action-one-exact .exact-callouts b {
  color: #fff;
  font-size: 32px;
  font-weight: 500;
}

.action-one-exact .exact-callouts small {
  color: #98aab8;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.45;
  text-align: center;
}

.action-one-honor {
  position: absolute;
  left: 690px;
  top: 330px;
  width: 410px;
  height: 474px;
  z-index: 8;
}

.action-one-honor > img {
  display: block;
  width: 410px;
  height: 305px;
  object-fit: contain;
}

.action-one-honor > div {
  width: 374px;
  margin: 53px auto 0;
  text-align: center;
}

.action-one-honor b {
  color: #fff;
  font-size: 32px;
  font-weight: 600;
}

.action-one-honor p {
  margin: 12px 0 0;
  color: #98aab8;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.45;
}

.action-one-phone {
  object-fit: contain;
}

  .data-exact h2 {
    color: #fff;
    font-family: "Douyin Sans", "PingFang SC", sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    font-synthesis: none;
  }

  .exact-data-blur {
    width: 1733px;
    margin: 72px 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    font-weight: 300;
    line-height: 34px;
  }

  .exact-data-layout {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    width: 1720px;
    margin-top: 12px;
  }

  .exact-data-col--global {
    display: flex;
    flex-direction: column;
    gap: 52px;
    width: 870px;
    flex: none;
  }

  .exact-data-col--live {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 52px;
    min-width: 0;
  }

  .exact-data-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 24px;
    border-radius: 16px;
    background: rgba(162, 199, 211, 0.1);
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
  }

  .exact-data-heading small {
    margin-left: 8px;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
  }

  .exact-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
  }

  .exact-data-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .exact-data-grid article,
  .exact-data-stack article {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
    padding: 36px 24px 36px 36px;
    border-radius: 20px;
    background: rgba(123, 141, 183, 0.24);
    color: #fff;
  }

  .exact-data-grid article.accent {
    padding: 36px;
    background: #29449d;
  }

  .exact-data-grid b,
  .exact-data-stack b {
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.15;
  }

  .exact-data-grid span,
  .exact-data-stack span {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.2;
  }

  .exact-data-rate {
    display: flex;
    gap: 26px;
    align-items: center;
  }

  .exact-data-delta {
    display: flex;
    gap: 4px;
    align-items: center;
    color: #67f070;
    font-size: 24px;
    font-weight: 600;
  }

  .exact-data-delta img {
    display: block;
    width: 18px;
    height: 18px;
  }

  .exact-data-delta i {
    font-style: normal;
  }

  .exact-data-note {
    width: 1733px;
    margin: 60px 0 0;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: normal;
  }

  .summary-exact {
    display: flex;
    flex-direction: column;
    gap: 124px;
    color: #fff;
  }

  .summary-exact h2 {
    color: #fff;
    font-family: "Douyin Sans", "PingFang SC", sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    font-synthesis: none;
  }

  .summary-exact article {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 1642px;
    margin: 0;
  }

  .summary-exact article h3 {
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
  }

  .summary-copy {
    width: 100%;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
  }

  .summary-copy p {
    margin: 0;
    line-height: 34px;
  }

  .summary-copy p.summary-path {
    line-height: 48px;
  }

  .summary-exact article:last-child .summary-copy {
    max-width: 1329px;
  }

  .exact-phone-groups {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
  }

  .exact-svg-assets,
  .exact-hd-screens {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .exact-svg-assets {
    z-index: 6;
  }

  .exact-hd-screens {
    z-index: 7;
  }

  .exact-svg-asset,
  .exact-hd-screen {
    display: block;
    width: var(--w);
    height: var(--h);
    object-fit: contain;
  }

  .exact-hero-phone-composite {
    overflow: hidden;
    border-radius: 36px;
  }

  .exact-phone-group {
    width: var(--w);
    height: var(--h);
    object-fit: contain;
  }

  .exact-demo-preview {
    z-index: 8;
    overflow: hidden;
    border-radius: 32px;
    background: #d2eefe;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
    isolation: isolate;
  }

  .exact-demo-preview__frame {
    display: block;
    width: 390px;
    height: 844px;
    border: 0;
    background: #d2eefe;
    transform: scale(0.871794872);
    transform-origin: 0 0;
  }

  .exact-fe-demo-note {
    z-index: 8;
    margin: 0;
    color: #fff;
    font-family: "PingFang SC", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
  }

  .exact-fe-demo-note strong {
    font-weight: 600;
  }

  .exact-demo-replay {
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: var(--w);
    height: var(--h);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: #fff;
    background: rgba(30, 47, 61, 0.92);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
    font: 500 22px/1 "Douyin Sans", sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease;
  }

  .exact-demo-replay span {
    font-size: 28px;
    line-height: 1;
  }

  .exact-demo-replay:hover {
    background: rgba(43, 67, 84, 0.98);
  }

  .exact-demo-replay:active {
    transform: translateY(2px);
  }

  .exact-demo-replay:focus-visible {
    outline: 3px solid #78ddff;
    outline-offset: 4px;
  }

  .peak-reward-exact {
    z-index: 8;
  }

  .exact-group-13 {
    overflow: visible;
  }

  .exact-group-13 img {
    display: block;
    width: 3139.67px;
    height: 3628.51px;
    max-width: none;
    object-fit: fill;
  }

  .exact-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 700ms ease, transform 820ms cubic-bezier(.2,.7,.2,1);
  }

  .exact-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
  }

@media (prefers-reduced-motion: reduce) {
  .exact-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}