@font-face {
  font-family: 'Source Han Serif VF';
  src:
    local('Source Han Serif VF'), local('SourceHanSerif-VF'),
    local('Source Han Serif SC VF');
  font-display: block;
}
:root {
  --bg: #030303;
  --ink: #f6f7fa;
  --accent: #f92815;
  --orange: #ff6638;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, 'Microsoft YaHei', sans-serif;
}
.canvas-shell {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}
body:has(#experience[data-state='navigation']) .canvas-shell {
  z-index: 4;
}
#particle-field {
  display: block;
  width: 100%;
  height: 100%;
}
#experience {
  position: relative;
  z-index: 1;
}
.hero,
.analysis {
  min-height: 100svh;
  position: relative;
}
.nav {
  position: absolute;
  z-index: 5;
  inset: 32px 3.2vw auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: block;
  line-height: 0;
}
.brand img {
  display: block;
  width: 112px;
  height: 40px;
}
.nav-links {
  display: flex;
  gap: clamp(26px, 5.4vw, 88px);
}
.nav-links a {
  color: #d6d9df;
  text-decoration: none;
  font:
    11px ui-monospace,
    monospace;
}
.nav-links a::after {
  content: '↘';
  color: var(--accent);
  margin-left: 6px;
}
.hero-copy {
  position: absolute;
  z-index: 3;
  top: 24%;
  left: 50%;
  width: min(1050px, 90vw);
  text-align: center;
  transform: translateX(-50%);
  transition: opacity 0.35s;
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(56px, 8.8vw, 154px);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 0.81;
}
.hero-copy h1 span {
  display: block;
}
.hero-copy em {
  font-style: normal;
  color: var(--accent);
}
.hero-copy p {
  max-width: 360px;
  margin: 28px auto 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.4;
}
.analysis {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11vh 8vw;
}
.analysis-copy {
  position: relative;
  z-index: 3;
  max-width: 690px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.eyebrow {
  color: var(--accent);
  font:
    11px ui-monospace,
    monospace;
  letter-spacing: 0.1em;
}
.analysis h2 {
  margin: 18px 0 30px;
  font-size: clamp(48px, 8vw, 126px);
  line-height: 0.81;
  letter-spacing: 0;
}
.layer-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(249, 40, 21, 0.28);
  border: 1px solid rgba(249, 40, 21, 0.28);
}
.layer-list span {
  padding: 14px;
  background: rgba(3, 3, 3, 0.8);
  font:
    11px ui-monospace,
    monospace;
  text-align: left;
}
.analysis-note {
  position: absolute;
  z-index: 3;
  left: 3.2vw;
  bottom: 30px;
  width: 220px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.45;
}
.analysis::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.28);
  opacity: 0;
  transition: opacity 0.35s;
}
#experience[data-state='converging'] .hero-copy,
#experience[data-state='navigation'] .hero-copy {
  opacity: 0;
}
#experience[data-state='navigation'] .analysis-copy {
  opacity: 1;
  transform: translateY(0);
}
#experience[data-state='navigation'] .analysis::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-copy,
  .analysis-copy,
  .analysis::before {
    transition: none;
  }
}
@media (max-width: 700px) {
  .nav {
    inset: 18px 16px auto;
  }
  .nav-links {
    display: none;
  }
  .hero-copy {
    top: 27%;
    width: 92vw;
  }
  .hero-copy h1 {
    font-size: 12vw;
  }
  .hero-copy p {
    margin-top: 18px;
    font-size: 13px;
  }
  .analysis {
    padding-inline: 24px;
  }
  .analysis-note {
    left: 16px;
    bottom: 18px;
    width: 170px;
  }
  .layer-list span {
    font-size: 9px;
  }
}
.hero-copy em {
  display: inline-block;
  color: var(--accent);
  font-family: Garamond, Baskerville, Georgia, serif;
  font-size: 0.96em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.075em;
  transform: translateY(0.018em) skewX(-4deg);
  text-shadow: 0 0 18px rgba(249, 40, 21, 0.28);
}
.hero-copy {
  top: 110px;
  width: min(1240px, 94vw);
}
.hero-copy h1 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(44px, 5.6vw, 90px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.92;
}
.hero-title-line {
  display: block;
  white-space: nowrap;
}
.hero-copy .hero-title-accent {
  display: inline;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  transform: none;
  text-shadow: none;
}
.hero-title-line.hero-title-accent {
  display: block;
}
.hero-title-regular {
  font-weight: 400;
}
@media (max-width: 700px) {
  .hero-copy {
    top: 110px;
    width: 94vw;
  }
  .hero-copy h1 {
    font-size: clamp(28px, 7.2vw, 44px);
    line-height: 0.94;
    letter-spacing: -0.05em;
  }
}
.hero-agent-note {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 80px;
  margin: 0;
  color: #fff;
  font:
    400 clamp(11px, 0.78vw, 13px)/1.35 Outfit,
    Arial,
    sans-serif;
  letter-spacing: 0.015em;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 8px rgba(3, 3, 3, 0.9);
  transform: translateX(-50%);
}
.hero-agent-note strong {
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 700px) {
  .hero-agent-note {
    width: calc(100% - 32px);
    font-size: 10px;
    white-space: normal;
  }
}
.hero-copy > p {
  max-width: none;
  margin: 28px auto 0;
  color: #fff;
  font:
    600 20px/1.2 Montserrat,
    Arial,
    sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}
#experience {
  --section-progress: 0;
}
.analysis {
  min-height: 200svh;
  display: block;
  padding: 0;
  overflow: clip;
}
.analysis-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  z-index: 3;
  overflow: hidden;
}
.analysis-title {
  position: absolute;
  top: 6px;
  left: 50%;
  margin: 0;
  width: min(980px, 92vw);
  transform: translateX(-50%);
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(26px, 3.1vw, 42px);
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  letter-spacing: -0.035em;
  color: #fff;
}
.analysis .analysis-copy {
  position: absolute;
  top: 15vh;
  left: 22vw;
  max-width: 310px;
  text-align: left;
  opacity: 1;
  transform: none;
}
.analysis .eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font:
    900 18px/1 Montserrat,
    Arial,
    sans-serif;
  letter-spacing: 0;
  text-align: center;
}
.analysis .layer-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  background: transparent;
  border: 0;
}
.analysis .layer-list span {
  padding: 0;
  background: transparent;
  color: #fff;
  font:
    400 13px/1.15 Outfit,
    Arial,
    sans-serif;
}
.analysis-decision {
  position: absolute;
  top: 52vh;
  left: 57vw;
  margin: 0;
  color: var(--accent);
  font:
    900 18px/1 Montserrat,
    Arial,
    sans-serif;
}
.analysis-track {
  position: absolute;
  top: 112px;
  bottom: 78px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 18px rgba(249, 40, 21, 0.18);
}
.analysis-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--section-progress) * 100%);
  background: var(--accent);
  box-shadow: 0 0 18px rgba(249, 40, 21, 0.72);
}
.analysis-track-node {
  position: absolute;
  left: 50%;
  top: calc(var(--section-progress) * 100%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  box-shadow:
    0 0 18px rgba(249, 40, 21, 0.86),
    0 0 42px rgba(255, 255, 255, 0.28);
}
.analysis-track-end {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.68);
}
.analysis-stage::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8vh;
  height: 19vh;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(249, 40, 21, 0.44) 0,
      rgba(249, 40, 21, 0.18) 12%,
      rgba(249, 40, 21, 0.08) 24%,
      transparent 46%
    ),
    linear-gradient(
      90deg,
      transparent 0,
      rgba(249, 40, 21, 0.2) 42%,
      rgba(249, 40, 21, 0.08) 50%,
      rgba(249, 40, 21, 0.2) 58%,
      transparent 100%
    );
  filter: blur(7px);
  opacity: 0.85;
  pointer-events: none;
}
.analysis-note {
  position: sticky;
  bottom: 30px;
}
@media (max-width: 700px) {
  .analysis-title {
    top: 18px;
    font-size: 22px;
  }
  .analysis .analysis-copy {
    left: 7vw;
    top: 18vh;
    max-width: 230px;
  }
  .analysis-decision {
    left: 48vw;
    top: 55vh;
    font-size: 14px;
  }
  .analysis-track {
    top: 118px;
    bottom: 88px;
  }
  .analysis .layer-list span {
    font-size: 11px;
  }
  .analysis-note {
    left: 16px;
    bottom: 18px;
  }
}
.analysis h2.analysis-title {
  margin: 0;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.analysis-note {
  position: fixed;
  left: 3.2vw;
  bottom: 30px;
  opacity: 0;
  transition: opacity 0.25s;
}
#experience[data-state='navigation'] .analysis-note {
  opacity: 1;
}
@media (max-width: 700px) {
  .analysis h2.analysis-title {
    font-size: 22px;
  }
  .analysis-note {
    left: 16px;
    bottom: 18px;
  }
}
#experience {
  --analysis-title-ready: 0;
  --analysis-title-reveal: 0;
  --analysis-title-block-scale: 1;
  --analysis-title-block-opacity: 0;
  --analysis-track-reveal: 0;
  --analysis-cost-reveal: 0;
  --analysis-cost-y: 28px;
  --analysis-decision-reveal: 0;
  --analysis-decision-y: 28px;
}
.analysis-title {
  isolation: isolate;
  overflow: hidden;
  opacity: var(--analysis-title-ready);
  color: #fff;
}
.analysis-title::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -8px -18px -10px;
  background: var(--accent);
  transform: scaleX(var(--analysis-title-block-scale));
  transform-origin: right center;
  opacity: var(--analysis-title-block-opacity);
  box-shadow: 0 0 42px rgba(249, 40, 21, 0.38);
}
.analysis .analysis-panel {
  opacity: 0;
  will-change: opacity, transform;
}
.analysis .analysis-cost {
  top: 18vh;
  left: 24vw;
  opacity: var(--analysis-cost-reveal);
  transform: translateY(var(--analysis-cost-y));
}
.analysis-decision.analysis-panel {
  top: 55vh;
  left: 57vw;
  width: min(360px, 32vw);
  opacity: var(--analysis-decision-reveal);
  transform: translateY(var(--analysis-decision-y));
  color: #fff;
}
.analysis .analysis-panel .eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font:
    900 20px/1 Montserrat,
    Arial,
    sans-serif;
  text-align: left;
}
.analysis-subtitle {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.42);
  font:
    600 13px/1.1 Outfit,
    Arial,
    sans-serif;
}
.analysis .analysis-panel .layer-list {
  gap: 18px;
}
.analysis .analysis-panel .layer-list span {
  font:
    600 15px/1.2 Outfit,
    Arial,
    sans-serif;
}
.analysis-track {
  opacity: var(--analysis-track-reveal);
  transform: translateX(-50%) scaleY(var(--analysis-track-reveal));
  transform-origin: top center;
}
.analysis-track-node {
  display: none;
}
@media (max-width: 700px) {
  .analysis .analysis-cost {
    left: 7vw;
    top: 20vh;
  }
  .analysis-decision.analysis-panel {
    left: 43vw;
    top: 56vh;
    width: 50vw;
  }
  .analysis .analysis-panel .eyebrow {
    font-size: 14px;
  }
  .analysis .analysis-panel .layer-list span {
    font-size: 10px;
  }
  .analysis-subtitle {
    font-size: 10px;
    margin-bottom: 14px;
  }
}
#experience .analysis .analysis-cost {
  opacity: var(--analysis-cost-reveal);
  transform: translateY(var(--analysis-cost-y));
}
#experience .analysis .analysis-decision {
  opacity: var(--analysis-decision-reveal);
  transform: translateY(var(--analysis-decision-y));
}
#experience {
  --analysis-reveal-duration: 2s;
  --analysis-reveal-ease: cubic-bezier(0.18, 0.72, 0.18, 1);
}
.analysis-title {
  transition: opacity 0.45s ease;
}
.analysis-title::before {
  transition:
    transform var(--analysis-reveal-duration) var(--analysis-reveal-ease),
    opacity 0.45s ease;
}
.analysis-track {
  transition:
    opacity var(--analysis-reveal-duration) var(--analysis-reveal-ease),
    transform var(--analysis-reveal-duration) var(--analysis-reveal-ease);
}
#experience .analysis .analysis-cost,
#experience .analysis .analysis-decision {
  transition:
    opacity var(--analysis-reveal-duration) var(--analysis-reveal-ease),
    transform var(--analysis-reveal-duration) var(--analysis-reveal-ease);
}
@media (prefers-reduced-motion: reduce) {
  .analysis-title,
  .analysis-title::before,
  .analysis-track,
  #experience .analysis .analysis-cost,
  #experience .analysis .analysis-decision {
    transition: none;
  }
}
.analysis-track {
  mask-image: linear-gradient(to bottom, #000 0 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 90%, transparent 100%);
}
.analysis-stage::after {
  opacity: var(--analysis-track-reveal);
  transform: scaleX(var(--analysis-track-reveal));
  transform-origin: center bottom;
  transition:
    opacity 1s var(--analysis-reveal-ease) var(--analysis-reveal-duration),
    transform 1s var(--analysis-reveal-ease) var(--analysis-reveal-duration);
}
.analysis-track-end {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .analysis-stage::after {
    transition: none;
  }
}
.analysis-stage {
  isolation: isolate;
}
.analysis-stage::after {
  z-index: 0;
}
.analysis-title,
#experience .analysis .analysis-panel,
.analysis-track {
  z-index: 2;
}
.analysis-note {
  z-index: 3;
}
#experience {
  --analysis-title-text-opacity: 0;
  --analysis-title-cover-delay: 0.32s;
}
.analysis-title {
  opacity: 1;
  color: rgba(255, 255, 255, var(--analysis-title-text-opacity));
  transition: color 0.36s ease var(--analysis-title-cover-delay);
}
.analysis-title::before {
  inset: -16px -28px -18px;
  transition:
    opacity 0.32s ease,
    transform var(--analysis-reveal-duration) var(--analysis-reveal-ease)
      var(--analysis-title-cover-delay);
}
#experience {
  --analysis-exit-progress: 0;
  --analysis-exit-opacity: 1;
  --analysis-stage-lift-y: 0px;
  --analysis-track-exit-scale: 1;
  --analysis-glow-scale: 1;
  --analysis-glow-opacity: 1;
}
.analysis {
  min-height: 300svh;
}
.analysis-stage {
  transform: translateY(var(--analysis-stage-lift-y));
  will-change: transform;
}
.analysis-title {
  transform: translateX(-50%)
    translateY(calc(var(--analysis-exit-progress) * -68px));
  will-change: transform, color;
}
#experience .analysis .analysis-cost {
  opacity: calc(var(--analysis-cost-reveal) * var(--analysis-exit-opacity));
  transform: translateY(
    calc(var(--analysis-cost-y) + var(--analysis-exit-progress) * -72px)
  );
  will-change: transform;
}
#experience .analysis .analysis-decision {
  opacity: calc(var(--analysis-decision-reveal) * var(--analysis-exit-opacity));
  transform: translateY(
    calc(var(--analysis-decision-y) + var(--analysis-exit-progress) * -72px)
  );
  will-change: transform;
}
#experience[data-state='navigation'] .analysis-note {
  opacity: var(--analysis-exit-opacity);
  transform: translateY(calc(var(--analysis-exit-progress) * -42px));
}
.analysis-track {
  opacity: calc(var(--analysis-track-reveal) * var(--analysis-exit-opacity));
  transform: translateX(-50%)
    scaleY(
      calc(var(--analysis-track-reveal) * var(--analysis-track-exit-scale))
    );
  transform-origin: center calc(var(--analysis-exit-progress) * 100%);
}
.analysis-stage::after {
  opacity: calc(var(--analysis-track-reveal) * var(--analysis-glow-opacity));
  transform: scaleX(
      calc(var(--analysis-track-reveal) * var(--analysis-glow-scale))
    )
    scaleY(var(--analysis-glow-opacity));
  transform-origin: center bottom;
}
@media (prefers-reduced-motion: reduce) {
  .analysis-stage,
  .analysis-title,
  #experience .analysis .analysis-cost,
  #experience .analysis .analysis-decision,
  .analysis-note {
    transition: none;
    will-change: auto;
  }
}
#experience {
  --analysis-glow-spread: 0vw;
  --analysis-glow-delay: var(--analysis-reveal-duration);
  --analysis-glow-duration: 1s;
}
.analysis-stage::after {
  background:
    radial-gradient(
      ellipse at calc(50% - var(--analysis-glow-spread)) 100%,
      rgba(249, 40, 21, 0.36) 0,
      rgba(249, 40, 21, 0.16) 13%,
      rgba(249, 40, 21, 0.07) 28%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at calc(50% + var(--analysis-glow-spread)) 100%,
      rgba(249, 40, 21, 0.36) 0,
      rgba(249, 40, 21, 0.16) 13%,
      rgba(249, 40, 21, 0.07) 28%,
      transparent 52%
    );
  opacity: calc(var(--analysis-track-reveal) * var(--analysis-glow-opacity));
  transform: scaleY(var(--analysis-glow-opacity));
  transition:
    opacity var(--analysis-glow-duration) var(--analysis-reveal-ease)
      var(--analysis-glow-delay),
    transform var(--analysis-glow-duration) var(--analysis-reveal-ease)
      var(--analysis-glow-delay);
  will-change: opacity, transform;
}
.analysis .analysis-panel .eyebrow {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.analysis .analysis-panel .eyebrow::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -5px -10px -6px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: right center;
  box-shadow: 0 0 28px rgba(249, 40, 21, 0.34);
  transition: transform var(--analysis-reveal-duration)
    var(--analysis-reveal-ease) var(--analysis-title-cover-delay);
}
.analysis .analysis-cost .eyebrow::before {
  transform: scaleX(calc(1 - var(--analysis-cost-reveal)));
}
.analysis .analysis-decision .eyebrow::before {
  transform: scaleX(calc(1 - var(--analysis-decision-reveal)));
}
#experience {
  --analysis-detail-progress: 0;
  --third-ready: 0;
}
.analysis {
  min-height: 400svh;
}
.third-story {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--third-ready);
  font-family: Montserrat, Arial, sans-serif;
  transition: opacity 0.18s ease;
}
.third-title {
  position: absolute;
  top: 10.5vh;
  left: 50%;
  width: min(930px, 82vw);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  font-size: clamp(32px, 3.9vw, 56px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.third-title::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -10px -20px;
  background: var(--accent);
  transform: scaleX(calc(1 - var(--third-ready)));
  transform-origin: right center;
  box-shadow: 0 0 42px rgba(249, 40, 21, 0.34);
  transition: transform 0.5s var(--analysis-reveal-ease) 0.08s;
}
.third-title span {
  display: block;
}
.third-title span:nth-child(2) {
  color: rgba(255, 255, 255, 0.42);
}
.third-title strong {
  font-weight: 900;
}
.third-title strong span {
  display: inline;
  color: var(--accent);
}
.third-rail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(76vw, 1260px);
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(249, 40, 21, 0.66);
  transform: translate(-50%, -50%) scaleX(var(--third-ready));
  transform-origin: center;
  transition: transform 0.5s var(--analysis-reveal-ease) 0.38s;
}
.third-card {
  position: absolute;
  top: calc(50% - 86px);
  width: min(350px, 28vw);
  color: #fff;
}
.third-card-left {
  left: 15vw;
}
.third-card-right {
  right: 15vw;
  text-align: right;
}
.third-card h3 {
  position: relative;
  display: inline-block;
  margin: 0 0 22px;
  overflow: hidden;
  font-size: clamp(22px, 1.9vw, 32px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.045em;
}
.third-card h3::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -8px -12px;
  background: var(--accent);
  transform: scaleY(calc(1 - var(--third-ready)));
  transform-origin: top center;
  transition: transform 0.34s var(--analysis-reveal-ease) 0.66s;
}
.third-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  color: rgba(255, 255, 255, 0.62);
  font:
    600 clamp(13px, 1.05vw, 18px)/1.15 Outfit,
    Arial,
    sans-serif;
}
.third-card li {
  transform: translateY(calc((1 - var(--third-ready)) * -120%));
  opacity: var(--third-ready);
  transition:
    opacity 0.34s ease 0.66s,
    transform 0.34s var(--analysis-reveal-ease) 0.66s;
}
.third-card li::before {
  content: '→';
  display: inline-block;
  margin-right: 12px;
  color: var(--accent);
  font-size: 1.25em;
  line-height: 0;
}
.third-card-right li::before {
  margin-left: 0;
}
@media (max-width: 700px) {
  .third-title {
    top: 9vh;
    width: 90vw;
    font-size: clamp(25px, 7vw, 36px);
  }
  .third-card {
    width: 38vw;
    top: calc(50% - 78px);
  }
  .third-card-left {
    left: 5vw;
  }
  .third-card-right {
    right: 5vw;
  }
  .third-card h3 {
    font-size: 16px;
  }
  .third-card ul {
    font-size: 10px;
  }
  .third-rail {
    width: 86vw;
  }
}
.third-title {
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 600;
}
.third-title strong {
  font-family: MuseoModerno, Montserrat, Arial, sans-serif;
  font-weight: 900;
}
.third-title strong span {
  font-family: MuseoModerno, Montserrat, Arial, sans-serif;
  font-weight: 400;
}
.third-card h3 {
  font-family: Outfit, Arial, sans-serif;
  font-weight: 900;
}
.third-card ul {
  font-weight: 500;
}
.analysis h2.third-title {
  top: 9.5vh;
  width: min(820px, 70vw);
  margin: 0;
  font-size: clamp(24px, 2.55vw, 46px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.third-title > span {
  display: block;
  white-space: nowrap;
}
.third-title strong,
.third-title strong span {
  display: inline;
}
.third-card {
  top: calc(50% - 78px);
  width: min(360px, 24vw);
  text-align: center;
}
.third-card-left {
  left: 14vw;
}
.third-card-right {
  right: 14vw;
  text-align: center;
}
.third-card h3 {
  width: 100%;
  text-align: center;
  margin-bottom: 22px;
}
.third-card ul {
  width: 100%;
  text-align: left;
  justify-items: start;
}
.third-card li {
  text-align: left;
}
@media (max-width: 700px) {
  .analysis h2.third-title {
    top: 8.5vh;
    width: 92vw;
    font-size: clamp(20px, 5.8vw, 30px);
    line-height: 1.16;
  }
  .third-title > span {
    white-space: normal;
  }
  .third-card {
    width: 39vw;
    top: calc(50% - 72px);
  }
  .third-card-left {
    left: 5vw;
  }
  .third-card-right {
    right: 5vw;
  }
  .third-card h3 {
    text-align: center;
  }
  .third-card ul {
    text-align: left;
  }
}
.third-card li {
  display: flex;
  align-items: center;
}
.third-card li::before {
  content: '';
  display: inline-block;
  flex: 0 0 1em;
  width: 1em;
  height: 1em;
  margin: 0 12px 0 0;
  background: var(--accent);
  font-size: 1em;
  line-height: 1;
  -webkit-mask: url('../assets/mdi-arrow-right-drop-circle.svg') center/contain
    no-repeat;
  mask: url('../assets/mdi-arrow-right-drop-circle.svg') center/contain
    no-repeat;
}
.third-card-right li::before {
  margin: 0 12px 0 0;
}
.third-card h3 {
  color: transparent;
}
.third-card h3::before {
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: none;
}
#experience[data-third-ready='1'] .third-card h3 {
  animation: thirdCardTitleText 1.05s linear 0.92s both;
}
#experience[data-third-ready='1'] .third-card h3::before {
  animation: thirdCardTitleBlock 1.05s var(--analysis-reveal-ease) 0.92s both;
}
.third-card li {
  transition:
    opacity 0.34s ease 2.05s,
    transform 0.34s var(--analysis-reveal-ease) 2.05s;
}
@keyframes thirdCardTitleText {
  0%,
  48% {
    color: transparent;
  }
  49%,
  100% {
    color: #fff;
  }
}
@keyframes thirdCardTitleBlock {
  0% {
    transform: scaleY(0);
    transform-origin: bottom center;
  }
  44%,
  56% {
    transform: scaleY(1);
    transform-origin: bottom center;
  }
  57% {
    transform: scaleY(1);
    transform-origin: top center;
  }
  100% {
    transform: scaleY(0);
    transform-origin: top center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .third-card h3 {
    color: #fff;
    animation: none !important;
  }
  .third-card h3::before {
    transform: scaleY(0) !important;
    animation: none !important;
  }
  .third-card li {
    transition: none;
  }
}
.third-story {
  --third-card-edge: 14vw;
  --third-card-block-bleed: 12px;
  --third-title-block-drop: 2px;
}
.third-rail {
  width: min(
    calc(
      100vw - var(--third-card-edge) - var(--third-card-edge) +
        var(--third-card-block-bleed) + var(--third-card-block-bleed)
    ),
    1260px
  );
}
.third-card-left {
  left: var(--third-card-edge);
}
.third-card-right {
  right: var(--third-card-edge);
}
.third-card h3::before {
  inset: -8px calc(0px - var(--third-card-block-bleed))
    calc(0px - var(--third-title-block-drop));
}
@media (max-width: 700px) {
  .third-story {
    --third-card-edge: 5vw;
    --third-title-block-drop: 34px;
  }
}
.third-story {
  --third-rail-trim: 0px;
}
.third-rail {
  width: min(
    calc(
      100vw - var(--third-card-edge) - var(--third-card-edge) +
        var(--third-card-block-bleed) + var(--third-card-block-bleed) -
        var(--third-rail-trim) - var(--third-rail-trim)
    ),
    1260px
  );
}
#experience[data-third-ready='1'] .third-card h3 {
  animation: thirdCardTitleText 1.28s linear 0.92s both;
}
#experience[data-third-ready='1'] .third-card h3::before {
  animation: thirdCardTitleBlock 1.28s var(--analysis-reveal-ease) 0.92s both;
}
@keyframes thirdCardTitleText {
  0%,
  52% {
    color: transparent;
  }
  53%,
  100% {
    color: #fff;
  }
}
@keyframes thirdCardTitleBlock {
  0% {
    transform: scaleY(0);
    transform-origin: bottom center;
  }
  38%,
  70% {
    transform: scaleY(1);
    transform-origin: bottom center;
  }
  71% {
    transform: scaleY(1);
    transform-origin: top center;
  }
  100% {
    transform: scaleY(0);
    transform-origin: top center;
  }
}
@media (max-width: 700px) {
  .third-story {
    --third-rail-trim: 7px;
  }
}
.third-story {
  --third-rail-gap: clamp(92px, 10vw, 168px);
  --third-cloud-span: clamp(72px, 8vw, 132px);
  --third-cloud-height: clamp(118px, 15vw, 220px);
  --third-cloud-dot: 2px;
  --third-cloud-peak: clamp(5px, 1vw, 15px);
}
.third-rail {
  background: linear-gradient(
    to right,
    var(--accent) 0 calc(50% - var(--third-rail-gap)),
    transparent calc(50% - var(--third-rail-gap))
      calc(50% + var(--third-rail-gap)),
    var(--accent) calc(50% + var(--third-rail-gap)) 100%
  );
}
.third-story::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(
    var(--third-rail-gap) + var(--third-rail-gap) + var(--third-cloud-span)
  );
  height: var(--third-cloud-height);
  pointer-events: none;
  background-image:
    radial-gradient(
      circle,
      rgba(249, 40, 21, 0.95) 0 var(--third-cloud-dot),
      transparent calc(var(--third-cloud-dot) + 1px)
    ),
    radial-gradient(circle, rgba(249, 40, 21, 0.52) 0 1px, transparent 3px),
    radial-gradient(circle, rgba(249, 40, 21, 0.72) 0 1.5px, transparent 3.5px);
  background-size:
    18px 23px,
    34px 29px,
    50px 41px;
  background-position:
    0 0,
    13px 9px,
    27px -6px;
  filter: drop-shadow(0 0 8px rgba(249, 40, 21, 0.7));
  opacity: calc(var(--third-ready) * 0.9);
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    transparent 0 43%,
    #000 49% 78%,
    transparent 90%
  );
  mask-image: radial-gradient(
    ellipse at center,
    transparent 0 43%,
    #000 49% 78%,
    transparent 90%
  );
  animation:
    thirdRailCloudBreathe 5.2s ease-in-out infinite,
    thirdRailParticleWave 4.6s linear infinite;
}
.third-rail::before,
.third-rail::after {
  content: '';
  position: absolute;
  top: 50%;
  width: var(--third-cloud-span);
  height: var(--third-cloud-height);
  pointer-events: none;
  background-image:
    radial-gradient(
      circle,
      rgba(249, 40, 21, 0.96) 0 var(--third-cloud-dot),
      transparent calc(var(--third-cloud-dot) + 1px)
    ),
    radial-gradient(circle, rgba(249, 40, 21, 0.5) 0 1px, transparent 3px),
    radial-gradient(circle, rgba(249, 40, 21, 0.7) 0 1.5px, transparent 3.5px);
  background-size:
    16px 21px,
    31px 27px,
    48px 39px;
  background-position:
    0 0,
    11px 8px,
    25px -4px;
  filter: drop-shadow(0 0 9px rgba(249, 40, 21, 0.78));
  opacity: 0.92;
  animation: thirdRailParticleWave 4.6s linear infinite;
}
.third-rail::before {
  left: calc(50% - var(--third-rail-gap));
  clip-path: polygon(0 48%, 100% 8%, 100% 92%, 0 52%);
  transform: translateY(-50%);
}
.third-rail::after {
  right: calc(50% - var(--third-rail-gap));
  clip-path: polygon(0 8%, 100% 48%, 100% 52%, 0 92%);
  transform: translateY(-50%);
}
@keyframes thirdRailParticleWave {
  0% {
    background-position:
      0 0,
      13px 9px,
      27px -6px;
  }
  50% {
    background-position:
      50px 15px,
      -18px -9px,
      8px 10px;
  }
  100% {
    background-position:
      100px 0,
      13px 9px,
      -27px -6px;
  }
}
@keyframes thirdRailCloudBreathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scaleY(1);
  }
  50% {
    transform: translate(-50%, calc(-50% - var(--third-cloud-peak)))
      scaleY(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .third-story::before,
  .third-rail::before,
  .third-rail::after {
    animation: none;
  }
}
#experience[data-third-ready='1'] .third-card h3 {
  animation: thirdCardTitleText 0.72s linear 0.92s both;
}
#experience[data-third-ready='1'] .third-card h3::before {
  animation: thirdCardTitleBlock 0.72s var(--analysis-reveal-ease) 0.92s both;
}
.third-card li {
  transition:
    opacity 0.34s ease 1.62s,
    transform 0.34s var(--analysis-reveal-ease) 1.62s;
}
@keyframes thirdCardTitleText {
  0%,
  52% {
    color: transparent;
  }
  53%,
  100% {
    color: #fff;
  }
}
@keyframes thirdCardTitleBlock {
  0% {
    transform: scaleY(0);
    transform-origin: bottom center;
  }
  52% {
    transform: scaleY(1);
    transform-origin: bottom center;
  }
  53% {
    transform: scaleY(1);
    transform-origin: top center;
  }
  100% {
    transform: scaleY(0);
    transform-origin: top center;
  }
}
.third-story::before {
  filter: none;
  animation: thirdRailCloudBreatheLite 6s ease-in-out infinite;
}
.third-rail::before,
.third-rail::after {
  filter: none;
  animation: thirdRailSideBreatheLite 6s ease-in-out infinite;
}
@keyframes thirdRailCloudBreatheLite {
  0%,
  100% {
    transform: translate(-50%, -50%) scaleY(1);
    opacity: calc(var(--third-ready) * 0.78);
  }
  50% {
    transform: translate(-50%, calc(-50% - var(--third-cloud-peak)))
      scaleY(1.06);
    opacity: calc(var(--third-ready) * 0.9);
  }
}
@keyframes thirdRailSideBreatheLite {
  0%,
  100% {
    transform: translateY(-50%) scaleY(1);
    opacity: 0.78;
  }
  50% {
    transform: translateY(calc(-50% - var(--third-cloud-peak))) scaleY(1.06);
    opacity: 0.9;
  }
}
.third-story::before,
.third-rail::before,
.third-rail::after {
  content: none;
}
.third-story {
  --third-rail-gap: clamp(72px, 8vw, 136px);
  --third-rail-fade: clamp(28px, 3vw, 46px);
}
.third-rail {
  background: linear-gradient(
    to right,
    var(--accent) 0 calc(50% - var(--third-rail-gap) - var(--third-rail-fade)),
    rgba(249, 40, 21, 0) calc(50% - var(--third-rail-gap)),
    transparent calc(50% + var(--third-rail-gap)),
    rgba(249, 40, 21, 0) calc(50% + var(--third-rail-gap)),
    var(--accent) calc(50% + var(--third-rail-gap) + var(--third-rail-fade))
      100%
  );
}
#experience {
  --third-exit-progress: 0;
  --third-rail-inner-gap: var(--third-rail-gap);
  --ecosystem-stage-progress: 0;
  --ecosystem-logo-opacity: 0;
  --ecosystem-copy-opacity: 0;
  --ecosystem-char-ready: 0;
  --ecosystem-title-ready: 0;
  --ecosystem-title-text-opacity: 0;
  --ecosystem-title-block-scale: 1;
  --ecosystem-title-block-opacity: 0;
}
.analysis {
  min-height: 675svh;
}
.third-story {
  opacity: calc(var(--third-ready) * (1 - var(--third-exit-progress)));
  transform: translateY(calc(var(--third-exit-progress) * -96px));
  will-change: opacity, transform;
}
.third-rail {
  background: linear-gradient(
    to right,
    var(--accent) 0
      calc(50% - var(--third-rail-inner-gap) - var(--third-rail-fade)),
    rgba(249, 40, 21, 0) calc(50% - var(--third-rail-inner-gap)),
    transparent calc(50% + var(--third-rail-inner-gap)),
    rgba(249, 40, 21, 0) calc(50% + var(--third-rail-inner-gap)),
    var(--accent)
      calc(50% + var(--third-rail-inner-gap) + var(--third-rail-fade)) 100%
  );
}
.ecosystem-story {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--ecosystem-stage-progress);
  font-family: Outfit, Arial, sans-serif;
  overflow: hidden;
  transition: opacity 0.28s ease;
}
.ecosystem-logo-grid {
  position: absolute;
  z-index: 2;
  top: 16.5vh;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(70px, 9vw, 150px);
  width: min(1140px, 78vw);
  transform: translateX(-50%);
}
.ecosystem-card {
  min-width: 0;
  color: #fff;
  opacity: var(--ecosystem-logo-opacity);
  transition: opacity 0.88s ease;
}
.ecosystem-logo {
  display: block;
  width: min(250px, 14.8vw);
  height: auto;
  margin: 0 0 28px;
}
.ecosystem-card h3 {
  margin: 0 0 3px;
  font:
    900 clamp(18px, 1.18vw, 23px)/1 MuseoModerno,
    Montserrat,
    Arial,
    sans-serif;
  letter-spacing: -0.04em;
}
.ecosystem-card h3 span {
  color: var(--accent);
  font-family: MuseoModerno, Montserrat, Arial, sans-serif;
  font-weight: 600;
}
.ecosystem-kicker {
  margin: 0 0 28px;
  color: var(--accent);
  font:
    500 clamp(10px, 0.72vw, 13px)/1.1 Outfit,
    Arial,
    sans-serif;
  letter-spacing: 0.045em;
}
.ecosystem-copy,
.ecosystem-stack {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font:
    500 clamp(12px, 0.82vw, 15px)/1.35 Outfit,
    Arial,
    sans-serif;
}
.ecosystem-stack {
  display: grid;
  gap: 12px;
  color: #fff;
}
.ecosystem-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 31px 0 22px;
  background: rgba(255, 255, 255, 0.18);
}
.ecosystem-link {
  margin: 0;
  color: var(--accent);
  font:
    700 clamp(12px, 0.82vw, 15px)/1 Outfit,
    Arial,
    sans-serif;
}
.ecosystem-character-flow {
  position: absolute;
  inset: -14vh 0 0;
  z-index: 1;
  opacity: var(--ecosystem-char-ready);
  transition: opacity 0.7s ease;
  overflow: hidden;
}
.ecosystem-character-flow span {
  position: absolute;
  left: var(--x);
  top: 100%;
  display: block;
  color: rgba(255, 255, 255, var(--o));
  font:
    700 var(--s)/1 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  text-shadow: none;
  transform: translate3d(0, 18vh, 0);
  animation: ecosystemGlyphRise var(--d) linear var(--delay) infinite;
  will-change: transform, opacity;
}
.ecosystem-character-flow span:nth-child(5n) {
  color: rgba(249, 40, 21, var(--o));
  text-shadow: none;
}
@keyframes ecosystemGlyphRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 16vh, 0);
  }
  10% {
    opacity: 1;
  }
  82% {
    opacity: 0.86;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -128vh, 0);
  }
}
.ecosystem-title {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 8.5vh;
  width: min(1340px, 90vw);
  text-align: center;
  transform: translateX(-50%)
    translateY(calc((1 - var(--ecosystem-title-ready)) * 22px));
  opacity: var(--ecosystem-title-ready);
  transition:
    opacity 0.45s ease,
    transform 0.72s var(--analysis-reveal-ease);
}
.ecosystem-title h2 {
  position: relative;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  color: rgba(255, 255, 255, var(--ecosystem-title-text-opacity));
  font:
    900 clamp(34px, 3.05vw, 58px)/1.08 Montserrat,
    Arial,
    sans-serif;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition: color 0.34s ease 0.28s;
}
.ecosystem-title h2::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -10px -18px;
  background: var(--accent);
  opacity: var(--ecosystem-title-block-opacity);
  transform: scaleX(var(--ecosystem-title-block-scale));
  transform-origin: right center;
  box-shadow: 0 0 42px rgba(249, 40, 21, 0.36);
  transition:
    opacity 0.28s ease,
    transform 1.45s var(--analysis-reveal-ease) 0.28s;
}
.ecosystem-title h2 span {
  display: block;
  white-space: nowrap;
}
.ecosystem-title p {
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font:
    400 clamp(15px, 1.04vw, 18px)/1.42 Outfit,
    Arial,
    sans-serif;
  letter-spacing: 0.01em;
  opacity: var(--ecosystem-copy-opacity);
  transform: translateY(calc((1 - var(--ecosystem-copy-opacity)) * 16px));
  transition:
    opacity 0.65s ease 0.52s,
    transform 0.65s var(--analysis-reveal-ease) 0.52s;
}
@media (max-width: 700px) {
  .ecosystem-logo-grid {
    top: 14vh;
    width: 88vw;
    gap: 16px;
  }
  .ecosystem-logo {
    width: 26vw;
    margin-bottom: 16px;
  }
  .ecosystem-card h3 {
    font-size: 14px;
  }
  .ecosystem-kicker {
    min-height: 22px;
    margin-bottom: 16px;
    font-size: 8px;
  }
  .ecosystem-copy,
  .ecosystem-stack {
    font-size: 8px;
  }
  .ecosystem-stack {
    gap: 6px;
  }
  .ecosystem-rule {
    margin: 16px 0 12px;
  }
  .ecosystem-link {
    font-size: 8px;
  }
  .ecosystem-title {
    bottom: 8.5vh;
    width: 88vw;
  }
  .ecosystem-title h2 {
    font-size: clamp(25px, 7vw, 36px);
  }
  .ecosystem-title h2 span {
    white-space: normal;
  }
  .ecosystem-title p {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .third-story,
  .ecosystem-story,
  .ecosystem-card,
  .ecosystem-character-flow,
  .ecosystem-title,
  .ecosystem-title h2,
  .ecosystem-title h2::before,
  .ecosystem-title p {
    transition: none;
  }
  .ecosystem-character-flow span {
    animation: none;
  }
}
.ecosystem-link {
  display: inline-block;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}
#experience[data-ecosystem-interactive='1'] .ecosystem-link {
  pointer-events: auto;
}
.ecosystem-link:hover {
  color: #fff;
}
.ecosystem-character-flow span {
  text-shadow: none;
}
.ecosystem-character-flow span::before {
  content: '';
  position: absolute;
  left: calc(50% + var(--tail-x));
  top: calc(100% + 1px);
  width: var(--tail-w);
  height: var(--tail);
  opacity: var(--tail-o);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.72),
    rgba(255, 255, 255, 0.32) 18%,
    rgba(255, 255, 255, 0.13) 52%,
    rgba(255, 255, 255, 0)
  );
  box-shadow: none;
  filter: none;
  transform: translateX(-50%);
  pointer-events: none;
}
.ecosystem-character-flow span::after {
  content: none;
  display: none;
}
.ecosystem-character-flow span:nth-child(5n)::before {
  background: linear-gradient(
    to bottom,
    rgba(249, 40, 21, 0.66),
    rgba(249, 40, 21, 0.3) 18%,
    rgba(249, 40, 21, 0.12) 52%,
    rgba(249, 40, 21, 0)
  );
  box-shadow: none;
}
.ecosystem-logo-grid {
  perspective: 1100px;
}
.ecosystem-card {
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  --card-glow-x: 50%;
  --card-glow-y: 18%;
  position: relative;
  isolation: isolate;
  min-height: clamp(360px, 35vh, 430px);
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.035) 48%,
      rgba(249, 40, 21, 0.06)
    ),
    rgba(8, 8, 8, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 24px 70px rgba(0, 0, 0, 0.36),
    0 0 48px rgba(249, 40, 21, 0.08);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transform: perspective(980px) translate3d(0, 0, 0) rotateX(var(--card-tilt-y))
    rotateY(var(--card-tilt-x));
  transform-style: preserve-3d;
  pointer-events: none;
  cursor: default;
  will-change: transform;
  transition:
    opacity 0.88s ease,
    transform 0.32s var(--analysis-reveal-ease),
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    background 0.32s ease;
}
.ecosystem-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at var(--card-glow-x) var(--card-glow-y),
      rgba(255, 255, 255, 0.36),
      rgba(255, 255, 255, 0.09) 24%,
      transparent 48%
    ),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.16),
      transparent 38%,
      rgba(249, 40, 21, 0.12)
    );
  opacity: 0.58;
  transition: opacity 0.32s ease;
}
.ecosystem-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 42px rgba(249, 40, 21, 0.2);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.ecosystem-card > * {
  position: relative;
  z-index: 1;
  transform: translateZ(24px);
}
#experience[data-ecosystem-interactive='1'] .ecosystem-card {
  pointer-events: auto;
}
.ecosystem-card:hover,
.ecosystem-card.is-ecosystem-card-active {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.19),
      rgba(255, 255, 255, 0.055) 46%,
      rgba(249, 40, 21, 0.09)
    ),
    rgba(8, 8, 8, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 34px 90px rgba(0, 0, 0, 0.48),
    0 0 68px rgba(249, 40, 21, 0.16);
  transform: perspective(980px) translate3d(0, -10px, 36px)
    rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x));
}
.ecosystem-card:hover::before,
.ecosystem-card.is-ecosystem-card-active::before {
  opacity: 0.86;
}
.ecosystem-card:hover::after,
.ecosystem-card.is-ecosystem-card-active::after {
  opacity: 1;
}
.ecosystem-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(249, 40, 21, 0.36);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(249, 40, 21, 0.16),
    rgba(255, 255, 255, 0.055)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(249, 40, 21, 0.08);
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  transform: translate3d(0, 0, 38px);
  transition:
    color 0.22s ease,
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s var(--analysis-reveal-ease);
}
.ecosystem-card:hover .ecosystem-link,
.ecosystem-card.is-ecosystem-card-active .ecosystem-link {
  border-color: rgba(249, 40, 21, 0.74);
  background: linear-gradient(
    135deg,
    rgba(249, 40, 21, 0.32),
    rgba(255, 255, 255, 0.08)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 22px 46px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(249, 40, 21, 0.28);
  transform: translate3d(0, -18px, 58px);
}
.ecosystem-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
@media (max-width: 700px) {
  .ecosystem-card {
    min-height: 260px;
    padding: 14px;
    border-radius: 18px;
  }
  .ecosystem-link {
    min-height: 28px;
    padding: 0 10px;
  }
  .ecosystem-card:hover,
  .ecosystem-card.is-ecosystem-card-active {
    transform: perspective(760px) translate3d(0, -6px, 18px)
      rotateX(calc(var(--card-tilt-y) * 0.55))
      rotateY(calc(var(--card-tilt-x) * 0.55));
  }
  .ecosystem-card:hover .ecosystem-link,
  .ecosystem-card.is-ecosystem-card-active .ecosystem-link {
    transform: translate3d(0, -10px, 34px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ecosystem-card,
  .ecosystem-link {
    transform: none !important;
    transition:
      opacity 0.2s ease,
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease;
  }
  .ecosystem-card > * {
    transform: none;
  }
  .ecosystem-card:hover .ecosystem-link,
  .ecosystem-card.is-ecosystem-card-active .ecosystem-link {
    transform: none !important;
  }
}
.ecosystem-card {
  display: flex;
  flex-direction: column;
}
.ecosystem-logo {
  align-self: center;
  width: min(220px, 100%);
  max-width: 100%;
  height: auto;
  margin: 0 auto 30px;
  object-fit: contain;
  object-position: center;
}
.ecosystem-title {
  bottom: 4.5vh;
}
@media (max-width: 700px) {
  .ecosystem-logo {
    width: min(24vw, 100%);
    margin-bottom: 14px;
  }
  .ecosystem-title {
    bottom: 5vh;
  }
}
.ecosystem-link {
  isolation: isolate;
  transform: translate3d(0, 0, 68px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(249, 40, 21, 0.14);
}
.ecosystem-link::before {
  content: '';
  position: absolute;
  inset: 4px 10px -10px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(249, 40, 21, 0.2),
    rgba(22, 8, 6, 0.34)
  );
  box-shadow:
    0 24px 42px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(249, 40, 21, 0.16);
  opacity: 0.54;
  transform: translate3d(0, 16px, -44px) scale(0.96);
  transition:
    opacity 0.28s ease,
    transform 0.28s var(--analysis-reveal-ease),
    box-shadow 0.28s ease;
  pointer-events: none;
}
.ecosystem-card:hover .ecosystem-link,
.ecosystem-card.is-ecosystem-card-active .ecosystem-link {
  transform: translate3d(0, -32px, 118px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 34px 64px rgba(0, 0, 0, 0.5),
    0 0 42px rgba(249, 40, 21, 0.34);
}
.ecosystem-card:hover .ecosystem-link::before,
.ecosystem-card.is-ecosystem-card-active .ecosystem-link::before {
  opacity: 0.92;
  transform: translate3d(0, 34px, -72px) scale(0.88);
  box-shadow:
    0 38px 70px rgba(0, 0, 0, 0.56),
    0 0 42px rgba(249, 40, 21, 0.24);
}
@media (max-width: 700px) {
  .ecosystem-link {
    transform: translate3d(0, 0, 42px);
  }
  .ecosystem-link::before {
    transform: translate3d(0, 10px, -28px) scale(0.96);
  }
  .ecosystem-card:hover .ecosystem-link,
  .ecosystem-card.is-ecosystem-card-active .ecosystem-link {
    transform: translate3d(0, -18px, 76px);
  }
  .ecosystem-card:hover .ecosystem-link::before,
  .ecosystem-card.is-ecosystem-card-active .ecosystem-link::before {
    transform: translate3d(0, 22px, -48px) scale(0.9);
  }
}
.ecosystem-link::before {
  content: none;
}
.ecosystem-card:hover .ecosystem-link,
.ecosystem-card.is-ecosystem-card-active .ecosystem-link {
  transform: translate3d(0, 0, 128px) scale(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 20px 42px rgba(0, 0, 0, 0.42),
    0 0 44px rgba(249, 40, 21, 0.34);
}
@media (max-width: 700px) {
  .ecosystem-card:hover .ecosystem-link,
  .ecosystem-card.is-ecosystem-card-active .ecosystem-link {
    transform: translate3d(0, 0, 82px) scale(1.025);
  }
}
.ecosystem-card:hover::before,
.ecosystem-card.is-ecosystem-card-active::before {
  opacity: 0.68;
}
@media (pointer: fine) {
  .has-glass-cursor,
  .has-glass-cursor * {
    cursor: none !important;
  }
  .glass-cursor-target {
    position: relative;
    isolation: isolate;
  }
  .glass-cursor-target::before {
    content: '';
    position: absolute;
    inset: calc(var(--glass-target-pad, 8px) * -1);
    z-index: -1;
    border-radius: var(--glass-target-radius, 14px);
    background: rgba(255, 255, 255, 0.16);
    box-shadow:
      0 0 22px rgba(255, 255, 255, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(11px) saturate(155%);
    -webkit-backdrop-filter: blur(11px) saturate(155%);
    opacity: 0;
    transform: scale(0.9);
    transition:
      opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .glass-cursor-target-button::before {
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 0 16px rgba(255, 255, 255, 0.08);
  }
  .glass-cursor-target-active::before {
    opacity: 0.76;
    transform: scale(1);
  }
  .glass-cursor-target-button.glass-cursor-target-active::before {
    opacity: 0.48;
  }
  .glass-cursor-target-leaving::before {
    opacity: 0;
    transform: scale(0.96);
  }
  .glass-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 16px rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    mix-blend-mode: difference;
    opacity: 0;
    pointer-events: none;
    will-change: transform, width, height, border-radius;
    transition:
      opacity 0.18s ease,
      width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
      height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.22s ease,
      border-radius 0.32s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.22s ease,
      box-shadow 0.22s ease;
  }
  .glass-cursor[data-active='1'] {
    opacity: 0.82;
  }
  .glass-cursor[data-mode='frame'] {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
    mix-blend-mode: screen;
    opacity: 0.18;
  }
  .glass-cursor[data-mode='frame'][data-button='1'] {
    background: rgba(255, 255, 255, 0.025);
    opacity: 0.12;
  }
}
@media (pointer: fine) {
  .ecosystem-link.glass-cursor-target-button::before,
  .ecosystem-card:hover .ecosystem-link.glass-cursor-target-button::before,
  .ecosystem-card.is-ecosystem-card-active
    .ecosystem-link.glass-cursor-target-button::before {
    content: '';
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 0 16px rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: scale(0.98);
    transition:
      opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .ecosystem-link.glass-cursor-target-button.glass-cursor-target-active::before,
  .ecosystem-card:hover
    .ecosystem-link.glass-cursor-target-button.glass-cursor-target-active::before,
  .ecosystem-card.is-ecosystem-card-active
    .ecosystem-link.glass-cursor-target-button.glass-cursor-target-active::before {
    opacity: 0.48;
    transform: scale(1);
  }
  .ecosystem-link.glass-cursor-target-button.glass-cursor-target-leaving::before,
  .ecosystem-card:hover
    .ecosystem-link.glass-cursor-target-button.glass-cursor-target-leaving::before,
  .ecosystem-card.is-ecosystem-card-active
    .ecosystem-link.glass-cursor-target-button.glass-cursor-target-leaving::before {
    opacity: 0;
    transform: scale(0.98);
  }
}
#experience[data-state='navigation'] .analysis-note {
  opacity: 1;
  transform: none;
}

/* SECTION 04: independent vehicle economy page. */
#experience {
  --ecosystem-page-slide-progress: 0;
  --vehicle-page-enter-progress: 0;
  --vehicle-stage-progress: 0;
  --vehicle-title-ready: 0;
  --vehicle-title-text-opacity: 0;
  --vehicle-title-block-scale: 1;
  --vehicle-title-block-opacity: 0;
  --vehicle-layer-system-opacity: 0;
  --vehicle-side-text-progress: 0;
  --vehicle-plate-left: 40.5vw;
  --vehicle-plate-width: min(53vw, 940px);
  --vehicle-plate-height: 72px;
  --vehicle-plate-top-offset: -22px;
  --vehicle-row-1-top: 64vh;
  --vehicle-row-2-top: 64vh;
  --vehicle-row-3-top: 64vh;
  --vehicle-row-4-top: 64vh;
  --vehicle-copy-1-x: -82px;
  --vehicle-copy-1-opacity: 0;
  --vehicle-copy-2-x: -82px;
  --vehicle-copy-2-opacity: 0;
  --vehicle-copy-3-x: -82px;
  --vehicle-copy-3-opacity: 0;
  --vehicle-copy-4-x: -82px;
  --vehicle-copy-4-opacity: 0;
  --vehicle-plate-tilt: 58deg;
  --vehicle-plate-1-x: 0px;
  --vehicle-plate-1-y: 0px;
  --vehicle-plate-1-scale-x: 1;
  --vehicle-plate-1-opacity: 0;
  --vehicle-plate-2-x: 0px;
  --vehicle-plate-2-y: 0px;
  --vehicle-plate-2-scale-x: 1;
  --vehicle-plate-2-opacity: 0;
  --vehicle-plate-3-x: 0px;
  --vehicle-plate-3-y: 0px;
  --vehicle-plate-3-scale-x: 1;
  --vehicle-plate-3-opacity: 0;
  --vehicle-plate-4-x: 0px;
  --vehicle-plate-4-y: 0px;
  --vehicle-plate-4-scale-x: 1;
  --vehicle-plate-4-opacity: 0;
}
.analysis {
  min-height: 875svh;
}
.ecosystem-story {
  transform: translateY(calc(var(--ecosystem-page-slide-progress) * -100svh));
  will-change: opacity, transform;
}
.vehicle-economy-story {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--vehicle-stage-progress);
  font-family: Outfit, Arial, sans-serif;
  transform: translateY(
    calc((1 - var(--vehicle-page-enter-progress)) * 100svh)
  );
  transition: opacity 0.28s ease;
  will-change: opacity, transform;
}
.vehicle-economy-title {
  position: absolute;
  z-index: 3;
  top: 5.4vh;
  left: 50%;
  width: min(1500px, 94vw);
  text-align: center;
  transform: translateX(-50%);
  opacity: var(--vehicle-title-ready);
  transition: opacity 0.42s ease;
}
.vehicle-economy-title h2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 8px 0 10px;
  color: rgba(240, 244, 252, var(--vehicle-title-text-opacity));
  font:
    900 clamp(30px, 2.75vw, 56px)/1.03 Montserrat,
    Arial,
    sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color 0.34s ease 0.2s;
}
.vehicle-economy-title h2::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -10px -18px;
  background: var(--accent);
  opacity: var(--vehicle-title-block-opacity);
  transform: scaleX(var(--vehicle-title-block-scale));
  transform-origin: right center;
  box-shadow: 0 0 42px rgba(249, 40, 21, 0.36);
  transition:
    opacity 0.28s ease,
    transform 1.22s var(--analysis-reveal-ease) 0.18s;
}
.vehicle-economy-title h2 span {
  display: block;
  white-space: nowrap;
}
.vehicle-economy-title p {
  margin: 20px auto 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.58);
  font:
    400 clamp(13px, 0.92vw, 16px)/1.35 Outfit,
    Arial,
    sans-serif;
  letter-spacing: 0;
  opacity: var(--vehicle-title-text-opacity);
  transition: opacity 0.45s ease 0.3s;
}
.vehicle-layer-system {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--vehicle-layer-system-opacity);
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: opacity 0.36s ease;
  will-change: opacity;
}
.vehicle-layer-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 112px;
  opacity: 1;
  transform-style: preserve-3d;
  will-change: top;
}
.vehicle-layer-row-1 {
  top: var(--vehicle-row-1-top);
}
.vehicle-layer-row-2 {
  top: var(--vehicle-row-2-top);
}
.vehicle-layer-row-3 {
  top: var(--vehicle-row-3-top);
}
.vehicle-layer-row-4 {
  top: var(--vehicle-row-4-top);
}
.vehicle-layer-copy {
  position: absolute;
  left: 13.45vw;
  top: 6px;
  width: min(410px, 26vw);
  min-height: 84px;
  padding: 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-origin: left top;
  will-change: opacity, transform;
  transition:
    border-color 0.26s ease,
    background 0.26s ease;
}
.vehicle-layer-row-1 .vehicle-layer-copy {
  opacity: var(--vehicle-copy-1-opacity);
  transform: translate3d(var(--vehicle-copy-1-x), 0, 0);
}
.vehicle-layer-row-2 .vehicle-layer-copy {
  opacity: var(--vehicle-copy-2-opacity);
  transform: translate3d(var(--vehicle-copy-2-x), 0, 0);
}
.vehicle-layer-row-3 .vehicle-layer-copy {
  opacity: var(--vehicle-copy-3-opacity);
  transform: translate3d(var(--vehicle-copy-3-x), 0, 0);
}
.vehicle-layer-row-4 .vehicle-layer-copy {
  opacity: var(--vehicle-copy-4-opacity);
  transform: translate3d(var(--vehicle-copy-4-x), 0, 0);
}
.vehicle-layer-copy h3 {
  margin: 0 0 8px;
  color: var(--accent);
  font:
    700 clamp(14px, 0.98vw, 18px)/1 Outfit,
    Arial,
    sans-serif;
  letter-spacing: 0;
}
.vehicle-layer-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font:
    400 clamp(11px, 0.78vw, 14px)/1.32 Outfit,
    Arial,
    sans-serif;
  letter-spacing: 0;
}
.vehicle-layer-plate {
  position: absolute;
  display: block;
  left: var(--vehicle-plate-left);
  top: var(--vehicle-plate-top-offset);
  width: var(--vehicle-plate-width);
  height: var(--vehicle-plate-height);
  border: 0;
  outline: 0;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(249, 40, 21, 0.08) 34%,
    rgba(249, 40, 21, 0.34) 68%,
    rgba(249, 40, 21, 0.78) 100%
  );
  clip-path: polygon(8.5% 0, 91.5% 0, 100% 100%, 0 100%);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.44),
    0 10px 34px rgba(249, 40, 21, 0.1),
    inset 0 -28px 46px rgba(249, 40, 21, 0.2),
    inset 0 24px 52px rgba(0, 0, 0, 0.28);
  backface-visibility: hidden;
  transform-origin: left top;
  transform-style: preserve-3d;
  will-change: opacity, transform;
  transition:
    filter 0.28s ease,
    box-shadow 0.28s ease;
}
.vehicle-layer-plate::before,
.vehicle-layer-plate::after {
  content: none;
  display: none;
}
.vehicle-layer-row-1 .vehicle-layer-plate {
  opacity: var(--vehicle-plate-1-opacity);
  transform: translate3d(var(--vehicle-plate-1-x), var(--vehicle-plate-1-y), 0)
    perspective(980px) rotateX(var(--vehicle-plate-tilt))
    scaleX(var(--vehicle-plate-1-scale-x));
}
.vehicle-layer-row-2 .vehicle-layer-plate {
  opacity: var(--vehicle-plate-2-opacity);
  transform: translate3d(var(--vehicle-plate-2-x), var(--vehicle-plate-2-y), 0)
    perspective(980px) rotateX(var(--vehicle-plate-tilt))
    scaleX(var(--vehicle-plate-2-scale-x));
}
.vehicle-layer-row-3 .vehicle-layer-plate {
  opacity: var(--vehicle-plate-3-opacity);
  transform: translate3d(var(--vehicle-plate-3-x), var(--vehicle-plate-3-y), 0)
    perspective(980px) rotateX(var(--vehicle-plate-tilt))
    scaleX(var(--vehicle-plate-3-scale-x));
}
.vehicle-layer-row-4 .vehicle-layer-plate {
  opacity: var(--vehicle-plate-4-opacity);
  transform: translate3d(var(--vehicle-plate-4-x), var(--vehicle-plate-4-y), 0)
    perspective(980px) rotateX(var(--vehicle-plate-tilt))
    scaleX(var(--vehicle-plate-4-scale-x));
}
.vehicle-layer-row:hover .vehicle-layer-copy {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(26, 26, 26, 0.82);
}
.vehicle-layer-row:hover .vehicle-layer-plate {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.46),
    0 16px 42px rgba(249, 40, 21, 0.16),
    inset 0 -30px 50px rgba(249, 40, 21, 0.24),
    inset 0 24px 52px rgba(0, 0, 0, 0.28);
  filter: saturate(1.08);
}
#experience[data-vehicle-layers-ready='1'] .vehicle-economy-story,
#experience[data-vehicle-layers-ready='1'] .vehicle-layer-system {
  pointer-events: auto;
}
#experience[data-vehicle-layers-ready='1'] .vehicle-economy-title,
#experience[data-vehicle-layers-ready='1'] .vehicle-economy-flow {
  pointer-events: none;
}
#experience[data-vehicle-section='1'] .analysis-note {
  opacity: 0;
  pointer-events: none;
}
.vehicle-layer-hit {
  position: absolute;
  z-index: 21;
  left: var(--vehicle-plate-left);
  top: var(--vehicle-plate-top-offset);
  width: var(--vehicle-plate-width);
  height: var(--vehicle-plate-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: polygon(8.5% 0, 91.5% 0, 100% 100%, 0 100%);
  cursor: default;
  opacity: 0;
  pointer-events: none;
}
#experience[data-vehicle-layers-ready='1'] .vehicle-layer-hit {
  pointer-events: auto;
}
#experience[data-vehicle-section='1'][data-vehicle-active-layer]:not(
    [data-vehicle-active-layer='0']
  )
  .vehicle-layer-row:not(.is-vehicle-layer-active)
  .vehicle-layer-plate {
  filter: saturate(0.78) brightness(0.64);
  opacity: 0.38;
}
.vehicle-layer-row.is-vehicle-layer-active {
  z-index: 30 !important;
}
.vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-plate {
  opacity: 1;
  z-index: 22;
  transform: translate3d(
      var(--vehicle-active-plate-x),
      var(--vehicle-active-plate-y),
      96px
    )
    perspective(980px) rotateX(0deg) scaleX(var(--vehicle-active-plate-scale-x))
    scaleY(1.66);
}
.vehicle-layer-detail {
  position: absolute;
  z-index: 24;
  left: var(--vehicle-plate-left);
  top: calc(var(--vehicle-plate-top-offset) - 104px);
  width: var(--vehicle-plate-width);
  min-height: 166px;
  padding: 22px 28px 20px 34px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 2, 2, 0.96),
    rgba(249, 40, 21, 0.28) 62%,
    rgba(249, 40, 21, 0.46)
  );
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  box-shadow:
    0 28px 86px rgba(0, 0, 0, 0.62),
    0 0 58px rgba(249, 40, 21, 0.18),
    inset 0 -24px 54px rgba(249, 40, 21, 0.18);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform-origin: center bottom;
  transform: perspective(980px) rotateX(58deg) translateY(34px) scaleY(0.42);
  transition:
    opacity 0.34s ease,
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}
.vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-detail {
  opacity: 1;
  pointer-events: auto;
  transform: perspective(980px) rotateX(0deg) translateY(0) scaleY(1);
}
.vehicle-layer-detail-index {
  position: absolute;
  right: 26px;
  top: 20px;
  margin: 0;
  color: rgba(249, 40, 21, 0.36);
  font:
    900 clamp(42px, 5.4vw, 82px)/0.8 Montserrat,
    Arial,
    sans-serif;
  letter-spacing: 0;
}
.vehicle-layer-detail h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #fff;
  font:
    900 clamp(20px, 1.65vw, 30px)/1 Montserrat,
    Arial,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
}
.vehicle-layer-detail p:not(.vehicle-layer-detail-index) {
  position: relative;
  z-index: 1;
  max-width: 58ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font:
    400 clamp(12px, 0.86vw, 15px)/1.42 Outfit,
    Arial,
    sans-serif;
}
.vehicle-layer-detail ul {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.vehicle-layer-detail li {
  padding: 6px 10px;
  border: 1px solid rgba(249, 40, 21, 0.3);
  color: var(--accent);
  background: rgba(249, 40, 21, 0.08);
  font:
    700 clamp(10px, 0.72vw, 12px)/1 Outfit,
    Arial,
    sans-serif;
}
.vehicle-layer-close {
  position: absolute;
  z-index: 2;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.vehicle-layer-close::before,
.vehicle-layer-close::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  top: 16px;
  height: 2px;
  background: var(--accent);
}
.vehicle-layer-close::before {
  transform: rotate(45deg);
}
.vehicle-layer-close::after {
  transform: rotate(-45deg);
}
.vehicle-economy-flow {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(30px, 4.6vh, 54px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(760px, 72vw);
  color: rgba(255, 255, 255, 0.58);
  font:
    700 clamp(10px, 0.72vw, 12px)/1 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  letter-spacing: 0;
  opacity: var(--vehicle-title-text-opacity);
  transform: translateX(-50%)
    translateY(calc((1 - var(--vehicle-title-text-opacity)) * 18px));
  transition:
    opacity 0.45s ease,
    transform 0.45s var(--analysis-reveal-ease);
}
.vehicle-economy-flow span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.vehicle-economy-flow span:not(:last-child)::after {
  content: '';
  display: block;
  width: 38px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18),
    rgba(249, 40, 21, 0.72)
  );
}
@media (max-width: 700px) {
  #experience {
    --vehicle-plate-left: 47vw;
    --vehicle-plate-width: 49vw;
    --vehicle-plate-height: 54px;
    --vehicle-plate-top-offset: -12px;
  }
  .analysis {
    min-height: 880svh;
  }
  .vehicle-economy-title {
    top: 64px;
    width: 92vw;
  }
  .vehicle-economy-title h2 {
    font-size: clamp(23px, 6.3vw, 34px);
    line-height: 1.05;
  }
  .vehicle-economy-title h2 span {
    white-space: normal;
  }
  .vehicle-economy-title p {
    max-width: 300px;
    font-size: 10px;
  }
  .vehicle-layer-row {
    height: 76px;
  }
  .vehicle-layer-copy {
    left: 20px;
    top: -12px;
    width: 39vw;
    min-height: 62px;
    padding: 11px 10px;
  }
  .vehicle-layer-copy h3 {
    margin-bottom: 5px;
    font-size: 10px;
  }
  .vehicle-layer-copy p {
    font-size: 7.5px;
    line-height: 1.2;
  }
  .vehicle-layer-plate {
    height: 54px;
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  }
  .vehicle-layer-detail {
    top: calc(var(--vehicle-plate-top-offset) - 76px);
    min-height: 118px;
    padding: 15px 16px 14px 18px;
  }
  .vehicle-layer-detail-index {
    right: 15px;
    top: 14px;
    font-size: 36px;
  }
  .vehicle-layer-detail h3 {
    margin-bottom: 8px;
    font-size: 13px;
  }
  .vehicle-layer-detail p:not(.vehicle-layer-detail-index) {
    font-size: 8px;
    line-height: 1.28;
  }
  .vehicle-layer-detail ul {
    gap: 5px;
    margin-top: 9px;
  }
  .vehicle-layer-detail li {
    padding: 4px 6px;
    font-size: 7px;
  }
  .vehicle-layer-close {
    right: 6px;
    top: 6px;
    width: 28px;
    height: 28px;
  }
  .vehicle-economy-flow {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ecosystem-story,
  .vehicle-economy-story,
  .vehicle-economy-title,
  .vehicle-economy-title h2,
  .vehicle-economy-title h2::before,
  .vehicle-economy-title p,
  .vehicle-layer-system,
  .vehicle-layer-copy,
  .vehicle-layer-plate,
  .vehicle-layer-detail,
  .vehicle-economy-flow {
    transition: none !important;
    animation: none !important;
  }
}
.vehicle-layer-plate {
  pointer-events: none;
}

/* SECTION 04 scroll bridge: fourth-page content exits, data flow flushes, then the vehicle page enters. */
#experience {
  --ecosystem-content-opacity: 1;
  --ecosystem-content-lift-y: 0px;
  --ecosystem-flow-opacity: 1;
  --ecosystem-flow-flush-y: 0px;
  --ecosystem-blackout-opacity: 0;
}
.ecosystem-story {
  transform: none;
  transition: opacity 0.28s ease;
}
.ecosystem-story::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--bg);
  opacity: var(--ecosystem-blackout-opacity);
  pointer-events: none;
  transition: opacity 0.08s linear;
}
.ecosystem-logo-grid {
  opacity: var(--ecosystem-content-opacity);
  transform: translateX(-50%) translateY(var(--ecosystem-content-lift-y));
  transition:
    opacity 0.48s ease,
    transform 0.86s var(--analysis-reveal-ease);
}
.ecosystem-title {
  opacity: calc(
    var(--ecosystem-title-ready) * var(--ecosystem-content-opacity)
  );
  transform: translateX(-50%)
    translateY(
      calc(
        (1 - var(--ecosystem-title-ready)) * 22px +
          var(--ecosystem-content-lift-y)
      )
    );
  transition:
    opacity 0.48s ease,
    transform 0.86s var(--analysis-reveal-ease);
}
.ecosystem-character-flow {
  opacity: calc(var(--ecosystem-char-ready) * var(--ecosystem-flow-opacity));
  transition: opacity 0.22s linear;
}
.vehicle-economy-story {
  transition: opacity 0.36s ease;
}

/* SECTION 04 interaction polish: the active layer itself opens with detail content inside the panel. */
#experience {
  --vehicle-active-plate-scale-y: 2.32;
  --vehicle-active-detail-left: 40vw;
  --vehicle-active-detail-width: min(46vw, 720px);
  --vehicle-active-detail-top-offset: -82px;
  --vehicle-active-detail-height: 128px;
}
.vehicle-layer-system {
  isolation: isolate;
}
.vehicle-layer-row {
  z-index: 1;
  transition: top 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.vehicle-layer-copy {
  z-index: 18;
  transition:
    border-color 0.26s ease,
    background 0.26s ease,
    opacity 0.42s ease,
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.vehicle-layer-plate {
  z-index: 12;
  transition:
    transform 0.76s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.36s ease,
    filter 0.32s ease,
    box-shadow 0.38s ease,
    background 0.52s ease,
    clip-path 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.vehicle-layer-row.is-vehicle-layer-active {
  z-index: 90 !important;
}
.vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-copy {
  z-index: 92;
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(8, 8, 8, 0.78);
}
.vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-plate {
  z-index: 88;
  opacity: 1;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.62) 34%,
    rgba(249, 40, 21, 0.26) 68%,
    rgba(249, 40, 21, 0.92) 100%
  );
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.54),
    0 20px 48px rgba(249, 40, 21, 0.12),
    inset 0 -28px 58px rgba(249, 40, 21, 0.22),
    inset 0 28px 56px rgba(0, 0, 0, 0.42);
  filter: saturate(1.04);
  transform: translate3d(
      var(--vehicle-active-plate-x),
      var(--vehicle-active-plate-y),
      128px
    )
    perspective(980px) rotateX(0deg) scaleX(var(--vehicle-active-plate-scale-x))
    scaleY(var(--vehicle-active-plate-scale-y));
}
.vehicle-layer-detail {
  left: var(--vehicle-active-detail-left);
  top: var(--vehicle-active-detail-top-offset);
  width: var(--vehicle-active-detail-width);
  height: var(--vehicle-active-detail-height);
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  clip-path: none !important;
  box-shadow: none !important;
  z-index: 94;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform-origin: center center;
  transform: translate3d(0, 22px, 164px) scale(0.985);
  transition:
    opacity 0.26s ease 0.04s,
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.04s;
}
.vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-detail {
  opacity: 1;
  pointer-events: none;
  transform: translate3d(0, 0, 164px) scale(1);
}
.vehicle-layer-detail > * {
  position: relative;
  z-index: 2;
}
.vehicle-layer-detail-index {
  right: 0;
  top: 0;
  color: rgba(249, 40, 21, 0.25);
  text-shadow: none;
}
.vehicle-layer-detail h3 {
  max-width: min(780px, 86%);
  margin: clamp(4px, 1.1vh, 14px) auto 14px;
  color: rgba(240, 244, 252, 0.96);
  font:
    500 clamp(30px, 2.24vw, 48px)/1.08 Outfit,
    Arial,
    sans-serif;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.64);
}
.vehicle-layer-detail p:not(.vehicle-layer-detail-index) {
  max-width: min(45ch, 86%);
  margin: 0 auto;
  color: rgba(240, 244, 252, 0.72);
  font:
    400 clamp(15px, 1.04vw, 21px)/1.48 Outfit,
    Arial,
    sans-serif;
  text-align: center;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.58);
}
.vehicle-layer-detail ul {
  display: none;
  max-width: calc(100% - 170px);
}
.vehicle-layer-detail li {
  border-color: rgba(249, 40, 21, 0.34);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#experience[data-vehicle-section='1'][data-vehicle-active-layer]:not(
    [data-vehicle-active-layer='0']
  )
  .vehicle-layer-row:not(.is-vehicle-layer-active) {
  z-index: 2;
}
#experience[data-vehicle-section='1'][data-vehicle-active-layer]:not(
    [data-vehicle-active-layer='0']
  )
  .vehicle-layer-row:not(.is-vehicle-layer-active)
  .vehicle-layer-plate {
  opacity: 0.3;
  filter: saturate(0.76) brightness(0.58);
}
.vehicle-layer-close {
  display: none !important;
}
@media (max-width: 700px) {
  #experience {
    --vehicle-active-plate-scale-y: 2.18;
  }
  .vehicle-layer-row {
    transition: top 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-plate {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
  .vehicle-layer-detail h3 {
    max-width: calc(100% - 58px);
    margin: 16px auto 10px;
    font-size: 18px;
    white-space: normal;
  }
  .vehicle-layer-detail p:not(.vehicle-layer-detail-index) {
    max-width: calc(100% - 58px);
    font-size: 10px;
    line-height: 1.35;
  }
  .vehicle-layer-detail-index {
    right: 0;
    top: 1px;
  }
}

/* SECTION 04 hover refinement: no click-toggle, cleaner copy/plate spacing, longer hover hold. */
.vehicle-economy-flow {
  display: none !important;
}
.vehicle-layer-row {
  height: 124px;
  transition: top 0.88s cubic-bezier(0.16, 1, 0.3, 1);
}
.vehicle-layer-copy {
  left: clamp(104px, 8.6vw, 190px);
  top: 0;
  width: min(560px, 28.5vw);
  min-height: 88px;
  padding: 17px 20px;
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(8, 8, 8, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 36px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  transition:
    border-color 0.32s ease,
    background 0.32s ease,
    opacity 0.46s ease,
    transform 0.88s cubic-bezier(0.16, 1, 0.3, 1);
}
.vehicle-layer-copy h3 {
  margin-bottom: 10px;
}
.vehicle-layer-plate {
  transition:
    transform 0.98s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s ease,
    filter 0.36s ease,
    box-shadow 0.44s ease,
    background 0.62s ease,
    clip-path 0.92s cubic-bezier(0.16, 1, 0.3, 1);
}
.vehicle-layer-hit {
  cursor: default;
  transition:
    left 0.88s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.88s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.88s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.88s cubic-bezier(0.16, 1, 0.3, 1);
}
.vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-hit {
  z-index: 96;
  left: calc(var(--vehicle-plate-left) - 12px);
  top: calc(var(--vehicle-active-detail-top-offset) - 34px);
  width: calc(var(--vehicle-plate-width) + 24px);
  height: calc(var(--vehicle-active-detail-height) + 158px);
  clip-path: none;
}
.vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-copy {
  border-color: rgba(249, 40, 21, 0.28);
  background: rgba(8, 8, 8, 0.7);
  transform: translate3d(var(--vehicle-copy-1-x), 0, 0);
}
.vehicle-layer-row-2.is-vehicle-layer-active .vehicle-layer-copy {
  transform: translate3d(var(--vehicle-copy-2-x), 0, 0);
}
.vehicle-layer-row-3.is-vehicle-layer-active .vehicle-layer-copy {
  transform: translate3d(var(--vehicle-copy-3-x), 0, 0);
}
.vehicle-layer-row-4.is-vehicle-layer-active .vehicle-layer-copy {
  transform: translate3d(var(--vehicle-copy-4-x), 0, 0);
}
.vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-plate {
  box-shadow:
    0 28px 84px rgba(0, 0, 0, 0.58),
    0 22px 58px rgba(249, 40, 21, 0.16),
    inset 0 -30px 64px rgba(249, 40, 21, 0.24),
    inset 0 30px 64px rgba(0, 0, 0, 0.46);
}
.vehicle-layer-detail {
  transition:
    opacity 0.34s ease 0.1s,
    transform 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
}
@media (max-width: 700px) {
  .vehicle-layer-row {
    height: 82px;
  }
  .vehicle-layer-copy {
    left: clamp(24px, 7vw, 42px);
    top: -10px;
    width: 38vw;
    min-height: 62px;
    padding: 11px 10px;
  }
  .vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-hit {
    left: calc(var(--vehicle-plate-left) - 8px);
    top: calc(var(--vehicle-active-detail-top-offset) - 24px);
    width: calc(var(--vehicle-plate-width) + 16px);
    height: calc(var(--vehicle-active-detail-height) + 112px);
  }
}

/* SECTION 04 expanded panel copy sits within the lifted red layer. */
.vehicle-layer-detail {
  box-sizing: border-box;
  display: block;
  isolation: isolate;
  padding: 0 !important;
  clip-path: none !important;
  overflow: visible;
  transform: translate3d(0, 18px, 164px) scale(0.985);
}
.vehicle-layer-row.is-vehicle-layer-active .vehicle-layer-detail {
  transform: translate3d(0, 0, 164px) scale(1);
}
.vehicle-layer-detail-index {
  position: absolute !important;
  z-index: 0;
  left: 50%;
  right: auto;
  top: clamp(8px, 1.2vh, 16px);
  width: auto;
  transform: translateX(-50%);
  color: rgba(249, 40, 21, 0.18);
  font-size: clamp(72px, 7.4vw, 128px);
  line-height: 0.72;
  text-align: center;
  text-shadow: none;
  pointer-events: none;
}
.vehicle-layer-detail h3 {
  position: absolute !important;
  z-index: 2;
  left: 50%;
  top: 36%;
  width: min(760px, 86%);
  max-width: min(760px, 86%);
  margin: 0;
  color: rgba(240, 244, 252, 0.96);
  font-size: clamp(25px, 1.95vw, 40px);
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  transform: translate(-50%, -50%);
}
.vehicle-layer-detail p:not(.vehicle-layer-detail-index) {
  position: absolute !important;
  z-index: 2;
  left: 50%;
  top: 62%;
  width: min(60ch, 82%);
  max-width: min(60ch, 82%);
  margin: 0;
  color: rgba(240, 244, 252, 0.72);
  font-size: clamp(13px, 0.92vw, 17px);
  line-height: 1.42;
  text-align: center;
  transform: translate(-50%, -50%);
}
@media (max-width: 700px) {
  .vehicle-layer-detail {
    transform: translate3d(0, 12px, 164px) scale(0.985);
  }
  .vehicle-layer-detail-index {
    top: 9px;
    font-size: 38px;
  }
  .vehicle-layer-detail h3 {
    top: 36%;
    width: calc(100% - 44px);
    max-width: calc(100% - 44px);
    font-size: 14px;
    line-height: 1.08;
  }
  .vehicle-layer-detail p:not(.vehicle-layer-detail-index) {
    top: 64%;
    width: calc(100% - 46px);
    max-width: calc(100% - 46px);
    font-size: 8.5px;
    line-height: 1.25;
  }
}

/* SECTION 04 performance guard: no transparent earlier-section animation keeps running behind the vehicle page. */
#experience[data-front-animations-suspended='1'] .third-story::before,
#experience[data-front-animations-suspended='1'] .third-rail::before,
#experience[data-front-animations-suspended='1'] .third-rail::after {
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}
#experience[data-front-animations-suspended='1'] .analysis-stage,
#experience[data-front-animations-suspended='1'] .third-story {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  content-visibility: hidden;
  contain: layout paint style;
}
#experience[data-front-animations-suspended='1']
  .ecosystem-character-flow
  span {
  text-shadow: none;
}
#experience[data-front-animations-suspended='1']
  .ecosystem-character-flow
  span::before {
  filter: none;
  box-shadow: none;
  opacity: calc(var(--tail-o) * 0.72);
}
#experience[data-front-animations-suspended='1']
  .ecosystem-character-flow
  span::after {
  display: none;
}
#experience[data-front-stages-hidden='1'] .analysis-stage,
#experience[data-front-stages-hidden='1'] .third-story,
#experience[data-front-stages-hidden='1'] .ecosystem-story {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* SECTION 04 depth order: the Three vehicle canvas stays behind all page copy and layers. */
body:has(#experience[data-vehicle-canvas-behind='1']) .canvas-shell {
  z-index: 0;
}

/* SECTION 04 spacing pass: keep the centered title, but give the vehicle and layer stack more air. */
@media (min-width: 701px) {
  .vehicle-economy-title {
    top: 4.6vh;
    width: min(1320px, 88vw);
  }
  .vehicle-economy-title h2 {
    font-size: clamp(28px, 2.48vw, 50px);
    line-height: 1.06;
  }
  .vehicle-economy-title p {
    margin-top: 16px;
  }
  .vehicle-layer-copy {
    left: clamp(128px, 9.6vw, 214px);
    width: min(520px, 26.2vw);
    min-height: 82px;
    padding: 16px 20px;
  }
  .vehicle-layer-row {
    height: 116px;
  }
}

/* SECTION 04 scroll bridge refinement: longer scroll distance, CSS-only data-flow flush. */
.analysis {
  min-height: 960svh;
}
.ecosystem-character-flow {
  transform: translate3d(0, var(--ecosystem-flow-flush-y), 0);
  will-change: opacity, transform;
}
@media (max-width: 700px) {
  .analysis {
    min-height: 965svh;
  }
}

/* SECTION 04 data-flow tail canvas: keep the original animation coordinate space, only release the local clip. */
.ecosystem-story {
  overflow: hidden;
}
.ecosystem-character-flow {
  inset: -14vh 0 0;
  overflow: visible;
  transform: translate3d(0, var(--ecosystem-flow-flush-y), 0);
  will-change: opacity, transform;
}

/* SECTION 05: machine-native automotive economy page. */
#experience {
  --vehicle-page-exit-opacity: 1;
  --vehicle-page-exit-y: 0px;
  --vehicle-plate-1-exit-y: 0px;
  --vehicle-plate-2-exit-y: 0px;
  --vehicle-plate-3-exit-y: 0px;
  --vehicle-plate-4-exit-y: 0px;
  --machine-stage-progress: 0;
  --machine-page-enter-progress: 0;
  --machine-title-ready: 0;
  --machine-title-text-opacity: 0;
  --machine-title-block-scale: 1;
  --machine-title-block-opacity: 0;
  --machine-card-system-opacity: 0;
  --machine-card-1-ready: 0;
  --machine-card-1-text-opacity: 0;
  --machine-card-1-block-scale: 1;
  --machine-card-1-block-opacity: 0;
  --machine-card-2-ready: 0;
  --machine-card-2-text-opacity: 0;
  --machine-card-2-block-scale: 1;
  --machine-card-2-block-opacity: 0;
  --machine-card-3-ready: 0;
  --machine-card-3-text-opacity: 0;
  --machine-card-3-block-scale: 1;
  --machine-card-3-block-opacity: 0;
  --machine-summary-opacity: 0;
  --machine-summary-y: 24px;
}
.analysis {
  min-height: 1200svh;
}
.vehicle-economy-story {
  opacity: calc(
    var(--vehicle-stage-progress) * var(--vehicle-page-exit-opacity)
  );
  transform: translateY(
    calc(
      (1 - var(--vehicle-page-enter-progress)) * 100svh +
        var(--vehicle-page-exit-y)
    )
  );
}
.vehicle-layer-row-1 .vehicle-layer-plate {
  transform: translate3d(
      var(--vehicle-plate-1-x),
      calc(var(--vehicle-plate-1-y) + var(--vehicle-plate-1-exit-y)),
      0
    )
    perspective(980px) rotateX(var(--vehicle-plate-tilt))
    scaleX(var(--vehicle-plate-1-scale-x));
}
.vehicle-layer-row-2 .vehicle-layer-plate {
  transform: translate3d(
      var(--vehicle-plate-2-x),
      calc(var(--vehicle-plate-2-y) + var(--vehicle-plate-2-exit-y)),
      0
    )
    perspective(980px) rotateX(var(--vehicle-plate-tilt))
    scaleX(var(--vehicle-plate-2-scale-x));
}
.vehicle-layer-row-3 .vehicle-layer-plate {
  transform: translate3d(
      var(--vehicle-plate-3-x),
      calc(var(--vehicle-plate-3-y) + var(--vehicle-plate-3-exit-y)),
      0
    )
    perspective(980px) rotateX(var(--vehicle-plate-tilt))
    scaleX(var(--vehicle-plate-3-scale-x));
}
.vehicle-layer-row-4 .vehicle-layer-plate {
  transform: translate3d(
      var(--vehicle-plate-4-x),
      calc(var(--vehicle-plate-4-y) + var(--vehicle-plate-4-exit-y)),
      0
    )
    perspective(980px) rotateX(var(--vehicle-plate-tilt))
    scaleX(var(--vehicle-plate-4-scale-x));
}
.machine-economy-story {
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--machine-stage-progress);
  font-family: Outfit, Arial, sans-serif;
  transform: translateY(
    calc((1 - var(--machine-page-enter-progress)) * 100svh)
  );
  transition: opacity 0.26s ease;
  will-change: opacity, transform;
}
.machine-economy-title {
  position: absolute;
  z-index: 4;
  top: 6.8vh;
  left: 50%;
  width: min(1460px, 94vw);
  text-align: center;
  transform: translateX(-50%);
  opacity: var(--machine-title-ready);
}
.machine-economy-title h2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  color: rgba(246, 247, 250, var(--machine-title-text-opacity));
  font:
    900 clamp(34px, 3.45vw, 68px)/0.92 Montserrat,
    Arial,
    sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}
.machine-economy-title h2::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -10px -18px;
  background: var(--accent);
  opacity: var(--machine-title-block-opacity);
  transform: scaleX(var(--machine-title-block-scale));
  transform-origin: right center;
  box-shadow: 0 0 42px rgba(249, 40, 21, 0.34);
  transition:
    opacity 0.28s ease,
    transform 1.18s var(--analysis-reveal-ease) 0.12s;
}
.machine-economy-title h2 span {
  display: block;
  white-space: nowrap;
}
.machine-economy-title h2 em {
  font-style: normal;
  color: var(--accent);
}
.machine-card-grid {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 22vh;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 6.6vw, 118px);
  width: min(1260px, 82vw);
  transform: translateX(-50%);
  opacity: var(--machine-card-system-opacity);
  perspective: 1100px;
  transition: opacity 0.34s ease;
}
.machine-card {
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  --card-glow-x: 50%;
  --card-glow-y: 18%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 168px;
  padding: 24px 26px 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(8, 8, 10, 0.72) 42%,
      rgba(2, 2, 3, 0.9) 100%
    ),
    rgba(3, 3, 4, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -34px 72px rgba(0, 0, 0, 0.38),
    0 22px 70px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(249, 40, 21, 0.06);
  backdrop-filter: blur(28px) saturate(92%) brightness(0.58);
  -webkit-backdrop-filter: blur(28px) saturate(92%) brightness(0.58);
  color: #fff;
  opacity: 0;
  transform: perspective(980px)
    translate3d(0, calc((1 - var(--machine-card-1-ready)) * 18px), 0)
    rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x));
  transform-style: preserve-3d;
  will-change: opacity, transform;
  transition:
    opacity 0.52s ease,
    transform 0.34s var(--analysis-reveal-ease),
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}
.machine-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at var(--card-glow-x) var(--card-glow-y),
      rgba(255, 255, 255, 0.12),
      rgba(255, 151, 141, 0.055) 26%,
      transparent 58%
    ),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 38%,
      rgba(249, 40, 21, 0.075)
    );
  opacity: 0.34;
  transition: opacity 0.28s ease;
}
.machine-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.56));
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.machine-card > * {
  position: relative;
  z-index: 1;
  transform: translateZ(22px);
}
.machine-card h3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0 0 24px;
  color: rgba(249, 40, 21, var(--machine-card-1-text-opacity));
  font:
    900 clamp(20px, 1.35vw, 28px)/1.08 Outfit,
    Arial,
    sans-serif;
  letter-spacing: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.78);
}
.machine-card h3::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -6px -10px;
  background: var(--accent);
  opacity: var(--machine-card-1-block-opacity);
  transform: scaleX(var(--machine-card-1-block-scale));
  transform-origin: right center;
  box-shadow: 0 0 28px rgba(249, 40, 21, 0.3);
  transition:
    opacity 0.24s ease,
    transform 1s var(--analysis-reveal-ease) 0.08s;
}
.machine-card ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(246, 247, 250, 0.82);
  font:
    600 clamp(13px, 0.92vw, 17px)/1.18 Outfit,
    Arial,
    sans-serif;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.machine-card li {
  opacity: var(--machine-card-1-text-opacity);
  transform: translateY(calc((1 - var(--machine-card-1-text-opacity)) * 12px));
  transition:
    opacity 0.38s ease 0.28s,
    transform 0.5s var(--analysis-reveal-ease) 0.28s;
}
.machine-card-1 {
  opacity: var(--machine-card-1-ready);
}
.machine-card-2 {
  opacity: var(--machine-card-2-ready);
  transform: perspective(980px)
    translate3d(0, calc((1 - var(--machine-card-2-ready)) * 18px), 0)
    rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x));
}
.machine-card-3 {
  opacity: var(--machine-card-3-ready);
  transform: perspective(980px)
    translate3d(0, calc((1 - var(--machine-card-3-ready)) * 18px), 0)
    rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x));
}
.machine-card-2 h3 {
  color: rgba(249, 40, 21, var(--machine-card-2-text-opacity));
}
.machine-card-3 h3 {
  color: rgba(249, 40, 21, var(--machine-card-3-text-opacity));
}
.machine-card-2 h3::before {
  opacity: var(--machine-card-2-block-opacity);
  transform: scaleX(var(--machine-card-2-block-scale));
}
.machine-card-3 h3::before {
  opacity: var(--machine-card-3-block-opacity);
  transform: scaleX(var(--machine-card-3-block-scale));
}
.machine-card-2 li {
  opacity: var(--machine-card-2-text-opacity);
  transform: translateY(calc((1 - var(--machine-card-2-text-opacity)) * 12px));
}
.machine-card-3 li {
  opacity: var(--machine-card-3-text-opacity);
  transform: translateY(calc((1 - var(--machine-card-3-text-opacity)) * 12px));
}
#experience[data-machine-cards-ready='1'] .machine-economy-story,
#experience[data-machine-cards-ready='1'] .machine-card {
  pointer-events: auto;
}
.machine-card:hover,
.machine-card.is-machine-card-active {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.085),
      rgba(10, 10, 12, 0.76) 44%,
      rgba(2, 2, 3, 0.92) 100%
    ),
    rgba(3, 3, 4, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -38px 76px rgba(0, 0, 0, 0.42),
    0 30px 84px rgba(0, 0, 0, 0.56),
    0 0 52px rgba(255, 151, 141, 0.11);
  transform: perspective(980px) translate3d(0, -10px, 36px)
    rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x));
}
.machine-card:hover::before,
.machine-card.is-machine-card-active::before {
  opacity: 0.72;
}
.machine-economy-summary {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 8.4vh;
  width: min(1620px, 94vw);
  margin: 0;
  color: rgba(246, 247, 250, 0.94);
  font:
    400 clamp(28px, 2.3vw, 44px)/1.12 Outfit,
    Arial,
    sans-serif;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: var(--machine-summary-opacity);
  transform: translateX(-50%) translateY(var(--machine-summary-y));
  transition:
    opacity 0.52s ease,
    transform 0.7s var(--analysis-reveal-ease);
}
.machine-footer {
  position: fixed;
  z-index: 7;
  left: 50%;
  bottom: clamp(12px, 2.2vh, 28px);
  width: min(1680px, 94vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(
    180deg,
    rgba(3, 3, 4, 0.02),
    rgba(3, 3, 4, 0.72) 24%,
    rgba(3, 3, 4, 0.92)
  );
  color: rgba(246, 247, 250, 0.78);
  font:
    500 12px/1.3 Outfit,
    Arial,
    sans-serif;
  letter-spacing: 0;
  opacity: var(--machine-stage-progress);
  transform: translateX(-50%)
    translateY(calc((1 - var(--machine-page-enter-progress)) * 100svh));
  pointer-events: auto;
  will-change: opacity, transform;
}
.machine-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  max-width: min(930px, 100%);
}
.machine-footer__copyline {
  color: rgba(246, 247, 250, 0.56);
}
.machine-footer__link {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: rgba(246, 247, 250, 0.84);
  font: inherit;
  cursor: pointer;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}
.machine-footer__link:hover,
.machine-footer__link:focus-visible {
  color: #fff;
}
.machine-footer__link:focus-visible {
  outline: 1px solid rgba(249, 40, 21, 0.54);
  outline-offset: 3px;
}
.machine-footer__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  min-width: 0;
}
.machine-footer__copyright {
  color: rgba(246, 247, 250, 0.72);
  white-space: nowrap;
}
.machine-footer__divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
}
.machine-footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.machine-footer__icon {
  appearance: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #f6f7fa;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}
.machine-footer__icon svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.machine-footer__icon:hover,
.machine-footer__icon:focus-visible {
  transform: translateY(-2px);
  background: rgba(249, 40, 21, 0.12);
  border-color: rgba(249, 40, 21, 0.26);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.machine-footer__icon:focus-visible {
  outline: 1px solid rgba(249, 40, 21, 0.54);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .analysis {
    min-height: 1205svh;
  }
  .machine-economy-title {
    top: 7.6vh;
    width: 92vw;
  }
  .machine-economy-title h2 {
    font-size: clamp(24px, 7.2vw, 38px);
    line-height: 0.98;
  }
  .machine-economy-title h2 span {
    white-space: normal;
  }
  .machine-card-grid {
    bottom: 19vh;
    width: 88vw;
    gap: 10px;
  }
  .machine-card {
    min-height: 132px;
    padding: 13px 10px;
  }
  .machine-card h3 {
    margin-bottom: 12px;
    font-size: 12px;
  }
  .machine-card ul {
    gap: 8px;
    font-size: 8px;
  }
  .machine-economy-summary {
    bottom: 7vh;
    width: 90vw;
    font-size: clamp(18px, 5.4vw, 28px);
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .machine-economy-story,
  .machine-economy-title h2::before,
  .machine-card,
  .machine-card::before,
  .machine-card h3::before,
  .machine-card li,
  .machine-economy-summary {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 700px) {
  .machine-footer {
    left: 16px;
    right: 16px;
    bottom: 10px;
    width: auto;
    padding: 11px 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    transform: none;
  }
  .machine-footer__meta {
    margin-left: 0;
    align-self: stretch;
    justify-content: space-between;
    width: 100%;
  }
  .machine-footer__legal {
    max-width: none;
    font-size: 10px;
    line-height: 1.35;
  }
  .machine-footer__copyright {
    font-size: 10px;
  }
  .machine-footer__divider {
    display: none;
  }
  .machine-footer__icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }
  .machine-footer__icon svg {
    width: 14px;
    height: 14px;
  }
  .machine-economy-summary {
    bottom: 12.4vh;
    width: 92vw;
    font-size: clamp(18px, 5.2vw, 28px);
  }
}