.home-body {
  --home-paper: #03070c;
  --home-paper-deep: #071017;
  --home-ink: #05090d;
  --home-ink-soft: #0b1218;
  --home-muted: #82949e;
  --home-line: rgb(151 214 233 / 14%);
  --home-line-light: rgb(185 231 242 / 18%);
  --home-teal: #55d8ee;
  --home-teal-bright: #82eafd;
  --home-white: #edf8fb;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  background: var(--home-paper);
  color: var(--home-white);
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  padding-top: 0;
}

.home-body *,
.home-body *::before,
.home-body *::after {
  box-sizing: border-box;
}

.home-body a {
  color: inherit;
}

.home-body button {
  font: inherit;
}

.home-site {
  min-height: 100vh;
  overflow: clip;
  background: var(--home-paper);
}

.home-nav {
  position: sticky;
  z-index: 50;
  top: 0;
  width: 100%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--home-line);
  padding: 0 clamp(24px, 4.2vw, 72px);
  background: rgb(235 233 225 / 92%);
  backdrop-filter: blur(18px);
}

.home-nav-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.home-nav-brand > span {
  border-left: 1px solid var(--home-line);
  padding-left: 18px;
  color: var(--home-muted);
  font-size: 11px;
  letter-spacing: .08em;
}

.home-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--home-ink);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.035em;
  text-decoration: none;
}

.home-wordmark img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}

.home-nav nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.home-nav nav a {
  color: #4e544e;
  font-size: 12px;
  text-decoration: none;
  transition: color 160ms ease;
}

.home-nav nav a:hover {
  color: var(--home-ink);
}

.home-nav .nav-purchase-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--home-ink);
  padding: 0 18px;
  background: var(--home-ink);
  color: var(--home-white);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.home-nav .nav-purchase-link:hover {
  background: var(--home-teal);
  color: white;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 620ms cubic-bezier(.16, 1, .3, 1),
    transform 760ms cubic-bezier(.16, 1, .3, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.hero {
  min-height: calc(100svh - 76px);
  display: grid;
  grid-template-columns: minmax(440px, .86fr) minmax(0, 1.14fr);
  border-bottom: 1px solid var(--home-line);
  background: var(--home-paper);
}

.hero-copy {
  position: relative;
  z-index: 3;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px clamp(42px, 6vw, 104px) 56px;
}

.hero-copy::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62px;
  height: 62px;
  border-top: 1px solid var(--home-line);
  border-left: 1px solid var(--home-line);
  content: "";
}

.hero-eyebrow,
.section-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--home-teal);
  font: 10px/1.4 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .13em;
}

.hero-eyebrow span {
  width: 22px;
  height: 1px;
  display: block;
  background: currentColor;
}

.hero h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(52px, 3.8vw, 68px);
  font-weight: 690;
  line-height: .98;
  letter-spacing: -.065em;
}

.hero h1 span,
.hero h1 em {
  display: block;
  white-space: nowrap;
}

.hero h1 em {
  color: var(--home-teal);
  font-family: "Songti SC", "STSong", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.075em;
}

.hero-summary {
  max-width: 560px;
  margin: 30px 0 0;
  color: #565c56;
  font-size: 15px;
  line-height: 1.9;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 38px;
}

.primary-action {
  position: relative;
  min-height: 54px;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  border: 1px solid var(--home-ink);
  padding: 0 10px 0 22px;
  background: var(--home-ink);
  color: var(--home-white);
  font-size: 13px;
  font-weight: 720;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease, background 180ms ease;
}

.primary-action::before {
  position: absolute;
  right: 42px;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--home-teal-bright), transparent);
  content: "";
  transform: translateX(-110%);
  animation: primary-action-line 2.8s ease-in-out infinite;
}

.primary-action__label,
.primary-action__cue {
  position: relative;
  z-index: 1;
}

.home-body .primary-action__label {
  color: var(--home-white);
}

.primary-action__cue {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--home-teal-bright);
  color: var(--home-ink);
  font-size: 15px;
  transition: transform 180ms ease, background 180ms ease;
}

.primary-action:hover {
  background: var(--home-teal);
  transform: translateY(-2px);
}

.primary-action:hover .primary-action__cue {
  background: var(--home-white);
  transform: translate(2px, -2px);
}

.primary-action:active {
  transform: translateY(0);
}

.primary-action:focus-visible,
.home-body a:focus-visible,
.home-body button:focus-visible {
  outline: 2px solid var(--home-teal);
  outline-offset: 4px;
}

.text-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--home-ink-soft);
  font-size: 12px;
  text-decoration: none;
}

.text-action::after {
  width: 36px;
  height: 1px;
  display: block;
  background: currentColor;
  content: "";
  transition: width 180ms ease;
}

.text-action:hover::after {
  width: 52px;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 70px;
  border-top: 1px solid var(--home-line);
}

.hero-proof div {
  min-width: 0;
  display: grid;
  gap: 7px;
  border-left: 1px solid var(--home-line);
  padding: 18px 16px 0;
}

.hero-proof div:first-child {
  border-left: 0;
  padding-left: 0;
}

.hero-proof strong {
  font: 650 clamp(22px, 2.2vw, 32px)/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: -.07em;
}

.hero-proof span {
  color: var(--home-muted);
  font-size: 10px;
}

.hero-showcase {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: #151814;
}

.hero-media,
.hero-grade {
  position: absolute;
  inset: 0;
}

.hero-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 54% center;
  filter: saturate(.78) contrast(1.04) brightness(.88);
  transform: scale(1.025);
  transition: opacity 420ms ease, transform 1400ms cubic-bezier(.16, 1, .3, 1);
}

.hero-media.is-media-ready video {
  transform: scale(1);
}

.hero-grade {
  z-index: 2;
  background:
    linear-gradient(180deg, rgb(10 13 11 / 20%) 0%, transparent 44%, rgb(7 9 8 / 84%) 100%),
    linear-gradient(90deg, rgb(9 11 10 / 20%), transparent 28%);
  pointer-events: none;
}

.hero-media-caption {
  position: absolute;
  z-index: 5;
  right: clamp(24px, 4vw, 62px);
  bottom: 126px;
  left: clamp(24px, 4vw, 62px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--home-line-light);
  padding-top: 16px;
  color: var(--home-white);
}

.hero-media-caption span {
  color: var(--home-teal-bright);
  font: 9px/1.4 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .1em;
}

.hero-media-caption strong {
  max-width: 260px;
  font-size: 14px;
  font-weight: 560;
  text-align: right;
}

.hero-chapters {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--home-line-light);
  background: rgb(9 11 10 / 82%);
  backdrop-filter: blur(14px);
}

.hero-chapters button {
  position: relative;
  min-height: 88px;
  display: grid;
  gap: 7px;
  align-content: center;
  border: 0;
  border-left: 1px solid var(--home-line-light);
  padding: 0 17px;
  background: transparent;
  color: #a4aaa5;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.hero-chapters button:first-child {
  border-left: 0;
}

.hero-chapters button::before {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--home-teal-bright);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.hero-chapters button span {
  font-size: 12px;
  font-weight: 650;
}

.hero-chapters button small {
  color: #737a74;
  font: 9px/1 Menlo, Monaco, Consolas, monospace;
}

.hero-chapters button:hover,
.hero-chapters button.is-active {
  background: rgb(255 255 255 / 5%);
  color: var(--home-white);
}

.hero-chapters button.is-active::before {
  transform: scaleX(1);
}

.media-loading {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #111411;
  color: #858b86;
  font-size: 11px;
  transition: opacity 280ms ease;
}

.media-loading i {
  width: 40px;
  height: 2px;
  display: block;
  overflow: hidden;
  background: rgb(247 248 241 / 14%);
}

.media-loading i::after {
  width: 55%;
  height: 100%;
  display: block;
  background: var(--home-teal-bright);
  content: "";
  animation: media-loader 900ms ease-in-out infinite alternate;
}

[data-video-frame].is-media-ready .media-loading {
  opacity: 0;
  pointer-events: none;
}

[data-video-frame].is-media-error .media-loading {
  opacity: 1;
}

.section-copy h2,
.library-copy h2,
.native-copy h2,
.system-close-copy h2 {
  margin: 0;
  font-size: clamp(46px, 4.6vw, 68px);
  font-weight: 680;
  line-height: 1.02;
  letter-spacing: -.065em;
}

.library-copy h2 {
  font-size: clamp(52px, 5.8vw, 86px);
}

.section-copy > p:not(.section-kicker, .proof-caption),
.library-copy > p:not(.section-kicker),
.native-copy > p:not(.section-kicker) {
  max-width: 500px;
  margin: 28px 0 0;
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.85;
}

.route-proof {
  width: min(1380px, calc(100% - 64px));
  min-height: 900px;
  display: grid;
  grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
  gap: clamp(60px, 7vw, 120px);
  align-items: center;
  margin: 0 auto;
  padding: 150px 0;
}

.skill-dependency-stage {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--home-ink);
  background:
    radial-gradient(circle at 50% 50%, rgb(50 197 202 / 10%), transparent 30%),
    #0d100f;
}

.skill-dependency-stage::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(160 245 236 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(160 245 236 / 4%) 1px, transparent 1px);
  background-size: 40px 40px;
  content: "";
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  pointer-events: none;
}

.skill-dependency-label {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 24px;
  color: var(--home-teal-bright);
  font: 9px/1.5 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .1em;
}

.skill-graph {
  position: absolute;
  inset: 0;
}

.skill-graph-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.skill-graph-lines path {
  fill: none;
  stroke: rgb(127 230 220 / 30%);
  stroke-dasharray: 3 8;
  stroke-linecap: round;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.skill-graph-core,
.skill-graph-node {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgb(143 234 227 / 28%);
  background: rgb(12 19 19 / 92%);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
  color: #eaf6f3;
  transform: translate(-50%, -50%);
}

.skill-graph-core::before,
.skill-graph-node::before {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 22px;
  height: 1px;
  background: var(--home-teal-bright);
  box-shadow: 0 0 16px rgb(127 230 220 / 70%);
  content: "";
}

.skill-graph-core {
  top: 50%;
  left: 50%;
  width: 220px;
  min-height: 150px;
  padding: 24px;
  border-color: rgb(127 230 220 / 72%);
  background: linear-gradient(145deg, rgb(25 57 57 / 96%), rgb(10 18 19 / 98%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 6%),
    0 0 60px rgb(77 211 205 / 12%);
}

.skill-graph-node {
  width: 174px;
  min-height: 82px;
  padding: 15px 16px;
}

.skill-graph-core span,
.skill-graph-node span {
  color: #73d8d3;
  font: 8px/1.3 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .1em;
}

.skill-graph-core strong {
  font-size: 21px;
  font-weight: 580;
  letter-spacing: -.025em;
}

.skill-graph-node strong {
  margin-top: 11px;
  font-size: 13px;
  font-weight: 560;
}

.skill-graph-node-agent {
  top: 17%;
  left: 50%;
}

.skill-graph-node-capability {
  top: 24%;
  left: 79.5%;
}

.skill-graph-node-remotion {
  top: 50%;
  left: 84%;
}

.skill-graph-node-jianying {
  top: 81.5%;
  left: 76%;
}

.skill-graph-node-ffmpeg {
  top: 81.5%;
  left: 24%;
}

.skill-graph-node-material {
  top: 50%;
  left: 16%;
}

.library-proof {
  padding: 32px;
  background: var(--home-ink);
}

.library-stage {
  position: relative;
  min-height: 800px;
  overflow: hidden;
  border: 1px solid var(--home-line-light);
  background: #0d100d;
}

.library-stage video,
.library-grade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.library-stage video {
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(.63);
  transform: scale(1.03);
  transition: transform 1400ms cubic-bezier(.16, 1, .3, 1);
}

.library-stage.is-media-ready video {
  transform: scale(1);
}

.library-grade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgb(10 12 10 / 92%) 0%, rgb(10 12 10 / 52%) 48%, transparent 78%),
    linear-gradient(0deg, rgb(8 10 8 / 88%) 0%, transparent 48%);
}

.library-copy {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: clamp(32px, 7vw, 112px);
  width: min(650px, 54%);
  color: var(--home-white);
  transform: translateY(-50%);
}

.library-copy[data-reveal] {
  transform: translateY(calc(-50% + 26px));
}

.library-copy[data-reveal].is-revealed {
  transform: translateY(-50%);
}

.library-copy .section-kicker {
  color: var(--home-teal-bright);
}

.library-copy > p:not(.section-kicker) {
  color: #b2b9b3;
}

.library-text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  border-bottom: 1px solid var(--home-teal-bright);
  padding-bottom: 8px;
  color: var(--home-white);
  font-size: 12px;
  text-decoration: none;
}

.library-text-link span {
  color: var(--home-teal-bright);
  font-size: 16px;
}

.library-formats {
  position: absolute;
  z-index: 6;
  right: clamp(24px, 4vw, 62px);
  bottom: 32px;
  left: clamp(24px, 4vw, 62px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  border-top: 1px solid var(--home-line-light);
  padding-top: 18px;
}

.library-formats span {
  border-left: 1px solid var(--home-line-light);
  padding: 0 16px;
  color: #aab0ab;
  font-size: 10px;
}

.library-formats span:first-child {
  border-left: 0;
}

.native-proof {
  width: min(1380px, calc(100% - 64px));
  min-height: 980px;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(60px, 8vw, 136px);
  align-items: center;
  margin: 0 auto;
  padding: 150px 0;
}

.native-visual {
  position: relative;
  min-height: 700px;
  background: #0f1412;
}

.native-visual::before {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  left: 24px;
  border: 1px solid rgb(127 230 220 / 30%);
  content: "";
}

.native-index {
  position: absolute;
  z-index: 1;
  top: 26px;
  right: 42px;
  color: rgb(127 230 220 / 16%);
  font: 680 clamp(100px, 12vw, 178px)/.8 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.09em;
}

.native-visual figure {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(520px, 78%);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgb(247 248 241 / 30%);
  background: #171a17;
  box-shadow: 0 38px 92px rgb(0 0 0 / 48%);
  transform: translate(-50%, -50%) rotate(-1.4deg);
}

.native-visual figure video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.native-stamp {
  position: absolute;
  z-index: 6;
  right: 3%;
  bottom: 7%;
  width: 168px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--home-teal-bright);
  padding: 13px 16px;
  background: rgb(9 12 10 / 92%);
  color: var(--home-teal-bright);
  font-family: Menlo, Monaco, Consolas, monospace;
  transform: rotate(2deg);
}

.native-stamp span {
  font-size: 8px;
  letter-spacing: .15em;
}

.native-stamp strong {
  font-size: 24px;
  letter-spacing: -.06em;
}

.native-copy .section-kicker {
  color: var(--home-teal);
}

.native-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 54px 0 0;
  border-top: 1px solid var(--home-line);
}

.native-facts div {
  min-width: 0;
  border-left: 1px solid var(--home-line);
  padding: 22px 15px 0;
}

.native-facts div:first-child {
  border-left: 0;
  padding-left: 0;
}

.native-facts dt {
  color: var(--home-ink);
  font: 640 clamp(20px, 2vw, 31px)/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: -.07em;
}

.native-facts dd {
  margin: 12px 0 0;
  color: var(--home-muted);
  font-size: 10px;
  line-height: 1.6;
}

.system-close {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  padding: 126px clamp(32px, 7vw, 112px) 104px;
  background: var(--home-teal);
  color: var(--home-white);
}

.system-close::before {
  position: absolute;
  top: -26%;
  right: -8%;
  width: 720px;
  height: 720px;
  border: 1px solid rgb(247 248 241 / 16%);
  border-radius: 50%;
  box-shadow: 0 0 0 86px rgb(247 248 241 / 4%), 0 0 0 172px rgb(247 248 241 / 2%);
  content: "";
  pointer-events: none;
}

.system-close-copy {
  position: relative;
  z-index: 2;
  max-width: 940px;
}

.system-close-copy .section-kicker {
  color: #c9fff9;
}

.system-close-copy h2 {
  font-size: clamp(58px, 7vw, 104px);
}

.system-close-copy > p:not(.section-kicker) {
  max-width: 580px;
  margin: 30px 0 0;
  color: rgb(247 248 241 / 75%);
  font-size: 15px;
  line-height: 1.8;
}

.system-flow {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 82px 0 0;
  border-top: 1px solid rgb(247 248 241 / 34%);
  border-bottom: 1px solid rgb(247 248 241 / 34%);
  padding: 0;
  list-style: none;
}

.system-flow li {
  min-height: 126px;
  display: grid;
  align-content: center;
  gap: 16px;
  border-left: 1px solid rgb(247 248 241 / 34%);
  padding: 22px 28px;
}

.system-flow li:first-child {
  border-left: 0;
  padding-left: 0;
}

.system-flow span {
  color: #c9fff9;
  font: 9px/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .1em;
}

.system-flow strong {
  max-width: 270px;
  color: var(--home-white);
  font-size: 14px;
  font-weight: 540;
}

.close-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-top: 72px;
}

.system-close .primary-action {
  border-color: var(--home-white);
  background: var(--home-white);
  color: var(--home-ink);
}

.home-body .system-close .primary-action__label {
  color: var(--home-ink);
}

.system-close .primary-action:hover {
  background: #c9fff9;
}

.close-actions p {
  margin: 0;
  color: rgb(247 248 241 / 62%);
  font-size: 10px;
}

.home-footer {
  min-height: 116px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  border-top: 1px solid rgb(247 248 241 / 16%);
  padding: 0 clamp(24px, 4.2vw, 72px);
  background: var(--home-ink);
  color: var(--home-white);
}

.home-footer .home-wordmark {
  color: var(--home-white);
}

.home-footer p,
.home-footer > a:last-child {
  color: #878d87;
  font-size: 10px;
}

.home-footer p {
  margin: 0;
}

.home-footer > a:last-child {
  justify-self: end;
  text-decoration: none;
}

.home-footer > a:last-child:hover {
  color: var(--home-white);
}

@keyframes media-loader {
  from { transform: translateX(-100%); }
  to { transform: translateX(190%); }
}

@keyframes primary-action-line {
  0%, 22% { transform: translateX(-110%); }
  68%, 100% { transform: translateX(110%); }
}

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

  .hero-copy {
    padding-right: 44px;
    padding-left: 44px;
  }

  .hero h1 {
    font-size: clamp(48px, 4.4vw, 60px);
  }

  .hero-chapters {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-chapters button {
    min-height: 68px;
  }

  .hero-media-caption {
    bottom: 156px;
  }

  .route-proof {
    grid-template-columns: .82fr 1.18fr;
    gap: 54px;
  }

  .skill-dependency-stage {
    min-height: 540px;
  }

  .native-proof {
    gap: 62px;
  }
}

@media (max-width: 900px) {
  .home-nav-brand > span,
  .home-nav nav > a:not(.nav-library-link):not(.nav-purchase-link) {
    display: none;
  }

  .home-nav nav {
    gap: .8rem;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: auto;
    padding: 88px 32px 72px;
  }

  .hero-copy::after {
    display: none;
  }

  .hero-showcase {
    min-height: 720px;
  }

  .hero-proof {
    max-width: 620px;
  }

  .route-proof {
    width: min(100% - 48px, 720px);
    grid-template-columns: 1fr;
    gap: 62px;
    padding: 112px 0;
  }

  .skill-dependency-stage {
    min-height: min(620px, 78vw);
  }

  .library-proof {
    padding: 20px;
  }

  .library-stage {
    min-height: 720px;
  }

  .library-copy {
    top: auto;
    right: 32px;
    bottom: 120px;
    left: 32px;
    width: auto;
    transform: none;
  }

  .library-copy[data-reveal] {
    transform: translateY(26px);
  }

  .library-copy[data-reveal].is-revealed {
    transform: translateY(0);
  }

  .native-proof {
    width: min(100% - 48px, 720px);
    grid-template-columns: 1fr;
    gap: 72px;
    padding: 112px 0;
  }

  .native-copy {
    order: -1;
  }

  .system-close {
    padding-right: 32px;
    padding-left: 32px;
  }
}

@media (max-width: 620px) {
  .home-nav {
    height: 66px;
    padding: 0 18px;
  }

  .home-nav .nav-purchase-link {
    min-height: 36px;
    padding: 0 14px;
    font-size: 11px;
  }

  .home-nav .nav-library-link {
    min-height: 36px;
    font-size: 11px;
  }

  .hero-copy {
    padding: 70px 22px 58px;
  }

  .hero h1 {
    font-size: clamp(34px, 10.3vw, 46px);
    line-height: 1.01;
  }

  .hero h1 span,
  .hero h1 em {
    white-space: nowrap;
  }

  .hero-summary {
    font-size: 14px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .hero-proof {
    margin-top: 50px;
  }

  .hero-proof div {
    padding-right: 8px;
    padding-left: 8px;
  }

  .hero-proof strong {
    font-size: 20px;
  }

  .hero-showcase {
    min-height: 610px;
  }

  .hero-media-caption {
    bottom: 155px;
  }

  .hero-media-caption strong {
    display: none;
  }

  .hero-chapters button {
    min-height: 68px;
    padding: 0 12px;
  }

  .section-copy h2,
  .library-copy h2,
  .native-copy h2,
  .system-close-copy h2 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .route-proof,
  .native-proof {
    width: calc(100% - 36px);
    padding: 92px 0;
  }

  .skill-dependency-stage {
    min-height: 700px;
  }

  .library-proof {
    padding: 10px;
  }

  .library-stage {
    min-height: 660px;
  }

  .library-copy {
    right: 22px;
    bottom: 138px;
    left: 22px;
  }

  .library-formats {
    justify-content: flex-start;
    gap: 9px 0;
  }

  .library-formats span {
    padding: 0 10px;
  }

  .native-visual {
    min-height: 540px;
  }

  .native-visual figure {
    width: 78%;
  }

  .native-stamp {
    right: 0;
    width: 138px;
  }

  .native-facts dt {
    font-size: 17px;
  }

  .system-close {
    min-height: auto;
    padding: 96px 22px 78px;
  }

  .system-flow {
    grid-template-columns: 1fr;
    margin-top: 62px;
  }

  .system-flow li,
  .system-flow li:first-child {
    min-height: 100px;
    border-top: 1px solid rgb(247 248 241 / 34%);
    border-left: 0;
    padding: 20px 0;
  }

  .system-flow li:first-child {
    border-top: 0;
  }

  .close-actions {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 52px;
  }

  .home-footer {
    min-height: 150px;
    grid-template-columns: 1fr auto;
    padding: 24px 20px;
  }

  .home-footer p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .primary-action::before,
  .media-loading i::after {
    animation: none;
  }

  .hero-media video,
  .library-stage video {
    transition: none;
    transform: none;
  }
}

.hero-automation-shell {
  width: calc(100% - 1rem);
  height: calc(100% - .9rem);
  display: grid;
  grid-template-rows: 4.65rem minmax(0, 1fr);
  margin: .45rem auto 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-scene-tabs {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  padding: .5rem;
  border: 1px solid rgb(139 207 230 / 18%);
  border-radius: .95rem;
  background: rgb(2 8 13 / 88%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 5%),
    0 1.2rem 4rem rgb(0 4 10 / 34%);
  backdrop-filter: blur(22px) saturate(112%);
}

.hero-scene-tabs button {
  position: relative;
  min-width: 0;
  display: grid;
  gap: .28rem;
  place-content: center;
  border: 1px solid transparent;
  border-radius: .62rem;
  padding: .65rem 1rem;
  background: rgb(255 255 255 / 1.8%);
  color: #738994;
  text-align: left;
  cursor: pointer;
  transition:
    color 260ms ease,
    background 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.hero-scene-tabs button:first-child {
  border-left: 1px solid transparent;
}

.hero-scene-tabs button::after {
  right: .72rem;
  bottom: .38rem;
  left: .72rem;
  height: 3px;
  border-radius: 99px;
  background: #68dff6;
  box-shadow: 0 0 1rem rgb(104 223 246 / 38%);
  transform: scaleX(0);
  transform-origin: center;
}

.hero-scene-tabs button strong,
.hero-scene-tabs button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-scene-tabs button strong {
  color: inherit;
  font-size: .76rem;
  font-weight: 650;
}

.hero-scene-tabs button small {
  color: #526873;
  font: .56rem/1.2 Menlo, Monaco, Consolas, monospace;
}

.hero-scene-tabs button:hover {
  border-color: rgb(118 211 238 / 18%);
  background: rgb(91 195 225 / 7%);
  color: #cde9f0;
}

.hero-scene-tabs button.is-active {
  border-color: rgb(104 223 246 / 48%);
  background:
    linear-gradient(180deg, rgb(89 205 236 / 18%), rgb(54 132 157 / 10%)),
    rgb(9 24 32 / 90%);
  color: #edfaff;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    inset 0 0 1.4rem rgb(83 208 240 / 6%),
    0 .75rem 2.2rem rgb(0 8 16 / 32%);
  transform: translateY(-1px);
}

.hero-scene-tabs button.is-active small {
  color: #84dcec;
}

.hero-scene-tabs button.is-active::after {
  transform: scaleX(1);
}

.hero-automation-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: block;
  padding: .72rem 0 0;
  background: transparent;
}

.hero-scene-content-layer {
  position: absolute;
  inset: .72rem 0 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(27rem, .88fr) 4.1rem minmax(40rem, 1.48fr);
  gap: .72rem;
  opacity: 0;
  transform: translateY(.7rem) scale(.992);
  visibility: hidden;
  transition:
    opacity 440ms cubic-bezier(.16, 1, .3, 1),
    transform 520ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear 520ms;
  pointer-events: none;
  will-change: opacity, transform;
}

.hero-scene-content-layer.is-active {
  z-index: 2;
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 70ms, 70ms, 0s;
  pointer-events: auto;
}

.hero-cli-panel,
.hero-output-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(147 204 224 / 17%);
  border-radius: .88rem;
  background: #070c12;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 7%),
    0 2.2rem 6rem rgb(0 4 10 / 45%);
  will-change: filter, opacity, transform;
}

.hero-cli-panel {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 12% 4%, rgb(68 185 211 / 7%), transparent 32%),
    #070b10;
}

.hero-mac-titlebar,
.hero-jianying-titlebar {
  min-height: 3.15rem;
  display: grid;
  grid-template-columns: 6rem 1fr 6rem;
  align-items: center;
  padding: 0 1rem;
  border-bottom: 1px solid rgb(155 210 230 / 10%);
  background: rgb(255 255 255 / 4.5%);
}

.hero-mac-titlebar > strong,
.hero-jianying-titlebar > strong {
  justify-self: center;
  overflow: hidden;
  color: #94a7b0;
  font: 560 .64rem/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-mac-titlebar > span:last-child,
.hero-jianying-titlebar > span:last-child {
  justify-self: end;
  color: #657b86;
  font: .56rem/1 Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}

.hero-mac-window-controls {
  display: flex;
  gap: .42rem;
}

.hero-mac-window-controls i {
  width: .68rem;
  height: .68rem;
  display: block;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 -1px rgb(0 0 0 / 16%);
}

.hero-mac-window-controls i:nth-child(2) {
  background: #febc2e;
}

.hero-mac-window-controls i:nth-child(3) {
  background: #28c840;
}

.hero-cli-thread {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .78rem;
  overflow: hidden;
  padding: 1.05rem 1.15rem 1.25rem;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.hero-cli-launch {
  display: flex;
  align-items: baseline;
  gap: .38rem;
  color: #edf5f7;
  font: .72rem/1.45 SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.hero-cli-launch b {
  color: #58d6c7;
}

.hero-cli-launch span {
  color: #74838c;
}

.hero-cli-launch strong {
  font-weight: 520;
}

.hero-cli-path {
  margin-top: -.28rem;
  color: #546a75;
  font-size: .59rem;
}

.hero-cli-prompt {
  min-height: 6rem;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  border-left: 1px solid rgb(88 214 199 / 23%);
  padding-left: .72rem;
}

.hero-cli-prompt > b {
  color: #58d6c7;
}

.hero-cli-prompt pre {
  min-height: 5.25rem;
  color: #eef5f7;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.hero-tool-call {
  border-color: rgb(120 179 199 / 13%);
  background: rgb(255 255 255 / 2.6%);
}

.hero-workflow-bridge {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: #6fdff2;
}

.hero-workflow-bridge::before,
.hero-workflow-bridge::after {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(111 223 242 / 38%), transparent);
  content: "";
}

.hero-workflow-bridge span {
  color: #7897a1;
  font: 600 .52rem/1 Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}

.hero-workflow-bridge i {
  color: #8decfc;
  font-size: 1.2rem;
  font-style: normal;
  text-shadow: 0 0 1rem rgb(96 222 246 / 42%);
}

.hero-output-panel {
  display: grid;
  grid-template-rows: 3.15rem 2.55rem minmax(0, 1fr) 14.2rem;
  background: #080c11;
}

.hero-jianying-titlebar > strong {
  color: #d4e0e4;
  font-size: .68rem;
  font-weight: 620;
}

.hero-jianying-titlebar > span:last-child {
  color: #6ccfab;
}

.hero-jianying-toolbar {
  display: flex;
  align-items: stretch;
  gap: .25rem;
  padding: 0 .75rem;
  border-bottom: 1px solid rgb(155 210 230 / 8%);
  background: #090f15;
}

.hero-jianying-toolbar span {
  min-width: 3.4rem;
  display: grid;
  place-items: center;
  border-bottom: 2px solid transparent;
  color: #526973;
  font-size: .59rem;
}

.hero-jianying-toolbar span.is-active {
  border-bottom-color: #63dff7;
  color: #d8f4fa;
}

.hero-output-monitor {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: 2.45rem minmax(0, 1fr);
  overflow: hidden;
  background: #020509;
}

.hero-output-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .9rem;
  border-bottom: 1px solid rgb(148 205 225 / 8%);
  background: rgb(3 8 12 / 96%);
  color: #586d77;
  font-size: .6rem;
}

.hero-output-header > strong {
  color: #c9e8ef;
  font: 560 .6rem/1 Menlo, Monaco, Consolas, monospace;
}

.hero-video-stack {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgb(53 141 167 / 8%), transparent 60%),
    #03070a;
}

.hero-stable-video {
  position: absolute;
  inset: .72rem;
  overflow: hidden;
  background: #05080b;
  opacity: 0;
  transform: scale(1.008);
  visibility: hidden;
  transition:
    opacity 520ms cubic-bezier(.16, 1, .3, 1),
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear 620ms;
  will-change: opacity, transform;
}

.hero-stable-video.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 60ms, 60ms, 0s;
}

.hero-stable-video img,
.hero-stable-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.hero-stable-video img {
  z-index: 1;
  background: #05080b;
}

.hero-stable-video video {
  z-index: 2;
  background: transparent;
  opacity: 0;
  transition: opacity 320ms ease;
}

.hero-stable-video video.is-ready {
  opacity: 1;
}

.hero-monitor-frame {
  z-index: 6;
  top: 3.15rem;
  right: .72rem;
  bottom: .72rem;
  left: .72rem;
}

.hero-render-overlay {
  z-index: 7;
  top: 2.45rem;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgb(4 12 18 / 24%);
  backdrop-filter: blur(1.5px);
}

.hero-render-overlay span {
  color: #a5effb;
  letter-spacing: .12em;
}

.hero-draft-timeline {
  border-top-color: rgb(148 207 228 / 12%);
  background: #070b10;
}

.hero-tracks {
  min-height: 8.45rem;
}

.hero-timeline-state {
  position: absolute;
  inset: 0;
  display: grid;
  gap: .38rem;
  opacity: 0;
  transform: translateY(.35rem);
  visibility: hidden;
  transition:
    opacity 420ms ease,
    transform 480ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear 480ms;
}

.hero-timeline-state.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 70ms, 70ms, 0s;
}

.hero-playhead {
  z-index: 4;
  will-change: transform;
}

@media (max-width: 1180px) {
  .hero-scene-content-layer {
    grid-template-columns: minmax(22rem, .88fr) 3rem minmax(31rem, 1.4fr);
    gap: .55rem;
  }

  .hero-workflow-bridge span {
    font-size: .46rem;
  }
}

@media (max-width: 780px) {
  .hero.hero-automation {
    min-height: 96rem;
  }

  .hero-automation-frame {
    height: 72rem;
  }

  .hero-automation-shell {
    grid-template-rows: 4.45rem minmax(0, 1fr);
  }

  .hero-scene-tabs {
    gap: .3rem;
    padding: .38rem;
  }

  .hero-scene-tabs button {
    gap: .22rem;
    padding: .55rem .28rem;
    text-align: center;
  }

  .hero-scene-tabs button strong {
    font-size: .64rem;
  }

  .hero-scene-tabs button small {
    font-size: .48rem;
  }

  .hero-scene-content-layer {
    grid-template-columns: 1fr;
    grid-template-rows: 30rem 2.2rem minmax(0, 1fr);
    gap: .55rem;
  }

  .hero-workflow-bridge {
    flex-direction: row;
    gap: .55rem;
  }

  .hero-workflow-bridge::before,
  .hero-workflow-bridge::after {
    width: auto;
    height: 1px;
    flex: 1;
  }

  .hero-workflow-bridge i {
    font-size: .95rem;
  }

  .hero-output-panel {
    grid-template-rows: 3.15rem 2.4rem minmax(0, 1fr) 12.4rem;
  }

  .hero-output-monitor {
    grid-template-rows: 2.35rem minmax(0, 1fr);
  }

  .hero-draft-timeline {
    padding-bottom: .65rem;
  }

  .hero-tracks {
    min-height: 7.55rem;
  }
}

@media (max-width: 520px) {
  .hero.hero-automation {
    min-height: 95rem;
  }

  .hero-automation-frame {
    height: 72rem;
  }

  .hero-mac-titlebar,
  .hero-jianying-titlebar {
    grid-template-columns: 4.8rem 1fr 4.8rem;
    padding: 0 .75rem;
  }

  .hero-mac-window-controls {
    gap: .34rem;
  }

  .hero-mac-window-controls i {
    width: .58rem;
    height: .58rem;
  }

  .hero-cli-thread {
    padding-right: .82rem;
    padding-left: .82rem;
  }

  .hero-jianying-toolbar span {
    min-width: 2.9rem;
  }

  .hero-stable-video {
    inset: .52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene-content-layer,
  .hero-scene-tabs button,
  .hero-stable-video,
  .hero-stable-video video,
  .hero-timeline-state {
    transition: none;
  }

  .hero-stable-video video {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero-scene-tabs,
  .hero-render-overlay {
    backdrop-filter: none;
  }
}

/* AutoCat agent-driven hero */

.home-nav {
  border-bottom-color: rgb(164 216 236 / 12%);
  background: rgb(3 8 14 / 86%);
  color: #edf7fa;
  backdrop-filter: blur(22px) saturate(125%);
}

.home-nav-brand > span,
.home-nav nav a {
  color: #82939e;
}

.home-nav .home-wordmark,
.home-nav nav a:hover {
  color: #edf7fa;
}

.home-nav .nav-purchase-link {
  border-color: rgb(125 224 246 / 54%);
  background: linear-gradient(180deg, #8cecff, #4bcce9);
  color: #041015;
  box-shadow: 0 12px 36px rgb(36 188 226 / 16%);
}

.home-nav .nav-purchase-link:hover {
  background: #a6f1ff;
  color: #041015;
}

.home-nav .nav-library-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid rgb(126 234 255 / 58%);
  color: #bceff8;
  font-weight: 620;
  white-space: nowrap;
}

.home-nav .nav-library-link:hover {
  border-bottom-color: #dffaff;
  color: #f0fcff;
}

.hero.hero-automation {
  position: relative;
  min-height: clamp(76rem, 88vw, 106rem);
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 0;
  background: #03070c;
  color: #f1f8fa;
}

.hero.hero-automation::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24rem;
  background: linear-gradient(180deg, transparent, #03070c 80%);
  content: "";
  pointer-events: none;
}

.hero-huly-background {
  position: absolute;
  z-index: -4;
  top: -42.85vw;
  left: 59.64%;
  width: 166.5%;
  height: auto;
  aspect-ratio: 3840 / 2876;
  display: block;
  object-fit: fill;
  object-position: center top;
  transform: translateX(-50%);
  opacity: .97;
  filter: saturate(.9) contrast(1.05) brightness(.92);
  pointer-events: none;
}

.hero-automation-grade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(2 6 11 / 72%) 0%, rgb(2 6 11 / 30%) 38%, transparent 63%, rgb(2 6 11 / 22%) 100%),
    linear-gradient(180deg, rgb(2 6 11 / 12%) 0%, transparent 54%, rgb(3 7 12 / 28%) 78%, #03070c 99%);
  pointer-events: none;
}

.hero-automation-copy {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 3rem), 84rem);
  margin: 0 auto;
  padding-top: clamp(4.4rem, 4.5vw, 5.6rem);
}

.hero-automation-copy > p {
  margin: 0 0 1.15rem;
  color: #9bc9d5;
  font: 620 .72rem/1.4 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .1em;
}

.hero-automation-copy h1 {
  max-width: 82rem;
  margin: 0;
  color: #f3f8fb;
  font-family: "Geist", "SF Pro Display", "PingFang SC", system-ui, sans-serif;
  font-size: clamp(3.9rem, 5.45vw, 6.5rem);
  font-weight: 590;
  line-height: .92;
  letter-spacing: 0;
}

.hero-title-track {
  display: block;
  padding: 0 .08em .11em 0;
  margin-bottom: -.11em;
}

.hero-title-line {
  display: block;
  letter-spacing: -.018em;
}

.hero-title-line-accent {
  color: #c2f3fc;
  letter-spacing: -.006em;
  text-shadow: 0 0 2.4rem rgb(77 209 240 / 18%);
}

.hero-gradient-text .hero-title-line {
  background-image: linear-gradient(
    90deg,
    #f4fbff 0%,
    #7ee9ff 24%,
    #b99cff 48%,
    #ffb7ef 68%,
    #7ee9ff 84%,
    #f4fbff 100%
  );
  background-position: 0 50%;
  background-size: 300% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hero-gradient-text 8s ease-in-out infinite alternate;
  text-shadow: none;
}

.hero-gradient-text .hero-title-line-accent {
  animation-delay: -2.4s;
  letter-spacing: .008em;
}

.hero-automation-meta {
  position: absolute;
  top: 8.8rem;
  right: 0;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1.35rem;
}

.hero-automation-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .42rem;
  color: #9eacb5;
  font-size: .72rem;
}

.hero-automation-steps span {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  white-space: nowrap;
}

.hero-automation-steps span + span::before {
  width: .8rem;
  height: 1px;
  background: linear-gradient(90deg, rgb(111 221 242 / 12%), rgb(111 221 242 / 56%));
  content: "";
}

.hero-automation-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .7rem;
  flex: 0 0 auto;
}

.hero-purchase-price {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0 .2rem;
}

.hero-purchase-price strong {
  color: #effcff;
  font-size: clamp(2.6rem, 3vw, 3.8rem);
  font-weight: 680;
  line-height: .82;
  letter-spacing: -.055em;
  text-shadow: 0 0 2rem rgb(103 225 248 / 34%);
  font-variant-numeric: tabular-nums;
}

.hero-purchase-price small {
  margin-right: .14em;
  color: #79e5f8;
  font-size: .38em;
  vertical-align: .82em;
}

.hero-purchase-price span {
  color: #aabac1;
  font-size: .7rem;
  white-space: nowrap;
}

.hero-automation-actions::before {
  position: absolute;
  inset: -1.2rem -1.5rem;
  border-radius: 50%;
  background: rgb(80 218 244 / 28%);
  content: "";
  filter: blur(1.6rem);
  opacity: .82;
  pointer-events: none;
}

.hero-automation-actions .primary-action {
  min-height: 3.65rem;
  border-color: rgb(216 250 255 / 84%);
  border-radius: .5rem;
  padding: 0 .72rem 0 1.45rem;
  background: linear-gradient(135deg, #e9fcff 0%, #7de8fb 42%, #c4f7ff 100%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 90%),
    inset 0 -1px rgb(11 107 130 / 20%),
    0 .8rem 2.8rem rgb(38 190 225 / 36%);
  color: #031219;
}

.home-body .hero-automation-actions .primary-action__label {
  color: #031219;
}

.hero-automation-actions .primary-action__cue {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: .3rem;
  background: #06151c;
  color: #c9f8ff;
}

.hero-automation-actions .primary-action:hover {
  background: #effdff;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 92%),
    0 1rem 3.4rem rgb(54 208 239 / 48%);
  transform: translateY(-2px) scale(1.015);
}

@keyframes hero-gradient-text {
  from { background-position: 0 50%; }
  to { background-position: 100% 50%; }
}

.hero-automation-frame {
  position: absolute;
  z-index: 3;
  top: 20.14vw;
  left: 50%;
  width: 88.95vw;
  height: max(52rem, 60vw);
  overflow: hidden;
  transform: translateX(-50%);
}

.hero-automation-shell {
  width: calc(100% - 1rem);
  height: calc(100% - .9rem);
  display: flex;
  flex-direction: column;
  margin: .45rem auto 0;
  overflow: hidden;
  border: 1px solid rgb(151 215 237 / 18%);
  border-radius: 1.15rem;
  background:
    linear-gradient(145deg, rgb(11 25 36 / 94%), rgb(2 8 14 / 96%) 54%),
    #050c13;
  box-shadow:
    0 3rem 9rem rgb(0 5 13 / 76%),
    0 0 0 .38rem rgb(92 190 226 / 3%),
    0 0 5rem rgb(52 193 235 / 8%),
    inset 0 1px rgb(255 255 255 / 6%);
  backdrop-filter: blur(24px) saturate(112%);
}

.hero-automation-toolbar {
  flex: 0 0 3.55rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.1rem;
  border-bottom: 1px solid rgb(161 215 235 / 9%);
  background: rgb(1 7 12 / 84%);
}

.hero-window-controls {
  display: flex;
  gap: .36rem;
}

.hero-window-controls i {
  width: .44rem;
  height: .44rem;
  border-radius: 50%;
  background: #405362;
}

.hero-window-controls i:first-child {
  background: #56b5ca;
}

.hero-automation-toolbar > strong {
  color: #d8edf3;
  font: 650 .78rem/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .02em;
}

.hero-automation-status {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
  color: #80939e;
  font-size: .65rem;
}

.hero-automation-status i,
.hero-output-header i,
.hero-cli-result > i {
  width: .4rem;
  height: .4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #5bd9aa;
  box-shadow: 0 0 .8rem rgb(91 217 170 / 62%);
}

.hero-scene-tabs {
  flex: 0 0 3.4rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid rgb(159 211 231 / 8%);
  background: rgb(3 10 16 / 78%);
}

.hero-scene-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border: 0;
  border-left: 1px solid rgb(159 211 231 / 8%);
  background: transparent;
  color: #687d89;
  font-size: .7rem;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.hero-scene-tabs button:first-child {
  border-left: 0;
}

.hero-scene-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #62def8;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.hero-scene-tabs button span {
  color: #4f6570;
  font: .62rem/1 Menlo, Monaco, Consolas, monospace;
}

.hero-scene-tabs button:hover,
.hero-scene-tabs button.is-active {
  background: rgb(96 205 236 / 5%);
  color: #e2f3f7;
}

.hero-scene-tabs button.is-active::after {
  transform: scaleX(1);
}

.hero-automation-stage {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(28rem, .96fr) minmax(40rem, 1.5fr);
  gap: .82rem;
  padding: .82rem;
  background: rgb(0 5 9 / 54%);
}

.hero-cli-panel,
.hero-output-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(132 207 232 / 14%);
  border-radius: .86rem;
  background: rgb(5 14 21 / 94%);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
  will-change: filter, opacity, transform;
}

.hero-cli-panel {
  display: flex;
  flex-direction: column;
}

.hero-cli-panel > header {
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid rgb(158 214 234 / 8%);
  background: rgb(1 7 11 / 82%);
  color: #d8edf3;
  font: 650 .78rem/1 Menlo, Monaco, Consolas, monospace;
}

.hero-cli-panel > header small {
  color: #617a87;
  font-size: .58rem;
  font-weight: 500;
  white-space: nowrap;
}

.hero-cli-thread {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .82rem;
  overflow: hidden;
  padding: 1.15rem 1.2rem 1.35rem;
  font-family: Menlo, Monaco, Consolas, monospace;
}

.hero-code-accordion {
  min-height: 0;
  display: grid;
  gap: .52rem;
}

.hero-code-accordion-section {
  overflow: hidden;
  border: 1px solid rgb(148 194 211 / 12%);
  border-radius: .58rem;
  background: rgb(255 255 255 / 2.2%);
  transition:
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 300ms ease;
}

.hero-code-accordion-section.is-active {
  border-color: rgb(104 224 230 / 34%);
  background:
    radial-gradient(circle at 12% 0%, rgb(104 224 230 / 7%), transparent 48%),
    rgb(255 255 255 / 3.4%);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

.hero-code-accordion-section > header {
  min-height: 2.7rem;
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: center;
  gap: .42rem;
  padding: 0 .78rem;
  color: #758d98;
}

.hero-code-accordion-section > header span {
  color: #4f6873;
  font-size: .55rem;
  letter-spacing: .08em;
}

.hero-code-accordion-section > header strong {
  color: #9fb3bb;
  font-size: .67rem;
  font-weight: 580;
}

.hero-code-accordion-section > header i {
  color: #607985;
  font-size: .86rem;
  font-style: normal;
  transform: rotate(0deg);
  transition: color 260ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1);
}

.hero-code-accordion-section.is-active > header strong,
.hero-code-accordion-section.is-active > header i {
  color: #d9f3f5;
}

.hero-code-accordion-section.is-active > header i {
  transform: rotate(180deg);
}

.hero-code-accordion-section.is-complete > header span {
  color: #71d9b5;
}

.hero-code-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-.25rem);
  transition:
    grid-template-rows 440ms cubic-bezier(.16, 1, .3, 1),
    opacity 260ms ease,
    transform 440ms cubic-bezier(.16, 1, .3, 1);
}

.hero-code-accordion-body > div {
  min-height: 0;
  overflow: hidden;
  padding: 0 .82rem;
  transition: padding 360ms ease;
}

.hero-code-accordion-section.is-active .hero-code-accordion-body {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}

.hero-code-accordion-section.is-active .hero-code-accordion-body > div {
  padding-top: .18rem;
  padding-bottom: .8rem;
}

.hero-code-accordion .hero-cli-prompt {
  min-height: 5.5rem;
}

.hero-code-accordion .hero-cli-prompt pre {
  min-height: 4.7rem;
}

.hero-code-accordion .hero-agent-thinking {
  margin-top: .45rem;
}

.hero-code-accordion .hero-tool-call.is-visible {
  max-height: 14rem;
}

.hero-code-accordion .hero-cli-result {
  margin-top: .62rem;
}

.hero-cli-path {
  color: #5d7581;
  font-size: .65rem;
}

.hero-cli-prompt {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  align-items: start;
  color: #edf7f9;
}

.hero-cli-prompt > b {
  color: #68e0e6;
  font-size: 1.1rem;
  line-height: 1.55;
}

.hero-cli-prompt pre {
  min-height: 5.2rem;
  margin: 0;
  color: #ecf5f7;
  font: 570 clamp(.86rem, .95vw, 1.03rem)/1.58 Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
}

.hero-cli-cursor {
  width: .13em;
  height: 1.08em;
  display: inline-block;
  margin-left: .14em;
  vertical-align: -.14em;
  background: #68e0e6;
  box-shadow: 0 0 .65rem rgb(104 224 230 / 60%);
  animation: hero-cli-cursor 760ms step-end infinite;
}

.hero-agent-thinking,
.hero-tool-call,
.hero-cli-result {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(.45rem);
  transition:
    max-height 480ms cubic-bezier(.16, 1, .3, 1),
    opacity 320ms ease,
    transform 480ms cubic-bezier(.16, 1, .3, 1),
    padding 360ms ease;
}

.hero-agent-thinking.is-visible {
  max-height: 4rem;
  opacity: 1;
  transform: none;
}

.hero-agent-thinking {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #758e99;
}

.hero-agent-thinking > i {
  position: relative;
  width: .78rem;
  height: .78rem;
  flex: 0 0 auto;
  border: 1px solid rgb(104 224 230 / 42%);
  border-radius: 50%;
}

.hero-agent-thinking > i::after {
  position: absolute;
  inset: .18rem;
  border-radius: 50%;
  background: #68e0e6;
  content: "";
  animation: hero-thinking 1.1s ease-in-out infinite;
}

.hero-agent-thinking strong,
.hero-agent-thinking span {
  display: block;
}

.hero-agent-thinking strong {
  color: #91dce9;
  font-size: .62rem;
}

.hero-agent-thinking span {
  margin-top: .18rem;
  font-size: .68rem;
}

.hero-tool-call {
  border: 1px solid rgb(108 191 218 / 12%);
  border-radius: .62rem;
  background: rgb(126 194 218 / 4%);
}

.hero-tool-call.is-visible {
  max-height: 15rem;
  padding: .8rem .86rem;
  opacity: 1;
  transform: none;
}

.hero-tool-call > header {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.hero-tool-call > header span {
  color: #70d8ec;
  font-size: .58rem;
}

.hero-tool-call > header code {
  overflow: hidden;
  color: #aec7cf;
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-tool-call > p {
  margin: .56rem 0 0;
  color: #7d96a0;
  font-size: .66rem;
}

.hero-tool-call > strong {
  display: block;
  margin-top: .58rem;
  color: #d0e9ef;
  font-size: .72rem;
  font-weight: 570;
}

.hero-parameter-diff {
  display: grid;
  gap: .36rem;
  margin-top: .68rem;
}

.hero-parameter-diff > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(8.5rem, 1fr) minmax(3rem, auto) minmax(3rem, auto);
  gap: .65rem;
  align-items: center;
  color: #738c97;
  font-size: .62rem;
}

.hero-parameter-diff code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-parameter-diff del {
  color: #a66f78;
  text-decoration-color: #c16d78;
}

.hero-parameter-diff ins {
  color: #87e2c0;
  text-align: right;
  text-decoration: none;
}

.hero-render-progress {
  height: 3px;
  margin-top: .72rem;
  overflow: hidden;
  background: #1b2b33;
}

.hero-render-progress i {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #5ce0f8, #8cf4ce);
  box-shadow: 0 0 1rem rgb(92 224 248 / 60%);
  transform: scaleX(0);
  transform-origin: left;
}

.hero-cli-result.is-visible {
  max-height: 4.5rem;
  opacity: 1;
  transform: none;
}

.hero-cli-result {
  display: flex;
  align-items: center;
  gap: .68rem;
  color: #87a4af;
}

.hero-cli-result strong,
.hero-cli-result span {
  display: block;
}

.hero-cli-result strong {
  color: #cceee4;
  font-size: .7rem;
}

.hero-cli-result span {
  margin-top: .2rem;
  font-size: .62rem;
}

.hero-output-panel {
  display: grid;
  grid-template-rows: 3.2rem minmax(0, 1fr) 14.2rem;
}

.hero-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  border-bottom: 1px solid rgb(157 211 231 / 8%);
  background: rgb(1 7 11 / 82%);
  color: #7d929d;
  font-size: .68rem;
}

.hero-output-header > div {
  display: flex;
  align-items: center;
  gap: .48rem;
}

.hero-output-header > strong {
  color: #c8eaf2;
  font: 600 .66rem/1 Menlo, Monaco, Consolas, monospace;
}

.hero-output-monitor {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgb(65 183 216 / 8%), transparent 56%),
    #010509;
}

.hero-output-video {
  position: absolute;
  inset: .74rem;
  overflow: hidden;
  background: #010509;
}

.hero-output-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: none;
}

.hero-output-video .media-loading {
  background: #010509;
}

.hero-monitor-frame {
  position: absolute;
  inset: .72rem;
  pointer-events: none;
}

.hero-monitor-frame i {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border-color: rgb(126 223 243 / 26%);
}

.hero-monitor-frame i:nth-child(1) { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.hero-monitor-frame i:nth-child(2) { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.hero-monitor-frame i:nth-child(3) { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }
.hero-monitor-frame i:nth-child(4) { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }

.hero-render-overlay {
  position: absolute;
  z-index: 4;
  inset: .72rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(1 8 13 / 54%);
  backdrop-filter: blur(3px);
}

.hero-render-overlay::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  background: linear-gradient(90deg, transparent, rgb(95 224 248 / 18%), transparent);
  content: "";
  animation: hero-render-scan 1.35s ease-in-out infinite;
}

.hero-render-overlay span {
  color: #8fe9fa;
  font: 700 .68rem/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .18em;
}

.hero-draft-timeline {
  min-height: 0;
  padding: .78rem .88rem .9rem;
  border-top: 1px solid rgb(148 207 228 / 10%);
  background: rgb(1 6 10 / 94%);
}

.hero-draft-timeline > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #596f7a;
  font: .59rem/1 Menlo, Monaco, Consolas, monospace;
}

.hero-draft-timeline > header strong {
  color: #839ba5;
  font-weight: 500;
}

.hero-tracks {
  position: relative;
  display: grid;
  gap: .38rem;
  margin-top: .7rem;
}

.hero-track {
  min-height: 2.55rem;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: .5rem;
}

.hero-track > b {
  align-self: center;
  color: #536b76;
  font: .55rem/1 Menlo, Monaco, Consolas, monospace;
}

.hero-track > div {
  min-width: 0;
  display: flex;
  gap: .26rem;
}

.hero-timeline-clip {
  min-width: 0;
  flex-basis: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 .58rem;
  border: 1px solid rgb(91 202 232 / 14%);
  border-radius: .3rem;
  color: #87a6b1;
  background: linear-gradient(90deg, rgb(30 108 132 / 48%), rgb(18 55 69 / 32%));
  font-size: .54rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-timeline-clip-1 {
  border-color: rgb(133 146 244 / 16%);
  background: rgb(69 82 158 / 29%);
}

.hero-timeline-clip-2 {
  border-color: rgb(107 218 177 / 16%);
  background: rgb(43 113 87 / 29%);
}

.hero-playhead {
  position: absolute;
  top: -1.25rem;
  bottom: -.22rem;
  left: 3.9rem;
  width: 1px;
  background: linear-gradient(180deg, #c6f8ff, #52d9f6 72%, transparent);
  box-shadow: 0 0 .75rem rgb(83 219 247 / 68%);
  will-change: left;
}

.hero-playhead i {
  position: absolute;
  top: -.05rem;
  left: 50%;
  width: .44rem;
  height: .34rem;
  background: #a5effd;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

@keyframes hero-cli-cursor {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: .08; }
}

@keyframes hero-thinking {
  0%, 100% { opacity: .2; transform: scale(.68); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes hero-render-scan {
  from { transform: translateX(-420%); }
  to { transform: translateX(420%); }
}

@media (max-width: 1180px) {
  .hero.hero-automation {
    min-height: clamp(72rem, 94vw, 86rem);
  }

  .hero-automation-copy {
    width: min(calc(100% - 2.5rem), 72rem);
  }

  .hero-automation-stage {
    grid-template-columns: minmax(22rem, .9fr) minmax(32rem, 1.45fr);
  }

  .hero-automation-frame {
    width: 92vw;
    height: max(49rem, 63vw);
  }

  .hero-cli-prompt pre {
    font-size: .83rem;
  }
}

@media (max-width: 780px) {
  .hero.hero-automation {
    min-height: 91rem;
  }

  .hero-huly-background {
    top: -13.4rem;
    left: 67%;
    width: 84rem;
    max-width: none;
    height: 70.8rem;
    object-fit: cover;
    opacity: .85;
  }

  .hero-automation-copy {
    width: calc(100% - 2rem);
    padding-top: 4.6rem;
  }

  .hero-automation-copy h1 {
    font-size: clamp(2.7rem, 10.7vw, 4.2rem);
    line-height: .94;
  }

  .hero-automation-copy > div {
    position: static;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .55rem .8rem;
    max-width: 30rem;
    margin-top: 1.15rem;
  }

  .hero-automation-steps {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .55rem .8rem;
    font-size: .78rem;
  }

  .hero-automation-frame {
    top: 22rem;
    width: calc(100% - 1rem);
    height: 66rem;
  }

  .hero-automation-shell {
    width: 100%;
    height: 100%;
    margin-top: 0;
  }

  .hero-automation-toolbar {
    padding: 0 .8rem;
  }

  .hero-automation-status {
    font-size: .58rem;
  }

  .hero-automation-stage {
    grid-template-columns: 1fr;
    grid-template-rows: 30rem minmax(0, 1fr);
    gap: .55rem;
    padding: .55rem;
  }

  .hero-cli-thread {
    gap: .66rem;
    padding: .82rem .86rem 1rem;
  }

  .hero-cli-prompt pre {
    min-height: 4.5rem;
    font-size: .78rem;
  }

  .hero-tool-call.is-visible {
    padding: .62rem .7rem;
  }

  .hero-output-panel {
    grid-template-rows: 2.8rem minmax(0, 1fr) 12.5rem;
  }

  .hero-track {
    min-height: 2.1rem;
  }
}

@media (max-width: 520px) {
  .home-nav {
    height: 66px;
    padding: 0 16px;
  }

  .hero.hero-automation {
    min-height: 88rem;
  }

  .hero-automation-copy {
    padding-top: 3.8rem;
  }

  .hero-automation-copy > p {
    font-size: .66rem;
  }

  .hero-automation-copy h1 {
    font-size: clamp(2.05rem, 8.7vw, 3rem);
    white-space: normal;
  }

  .hero-automation-copy h1 > .hero-title-track {
    font-size: .92em;
  }

  .skill-dependency-stage {
    min-height: 720px;
  }

  .skill-dependency-stage::after {
    position: absolute;
    z-index: 0;
    top: 116px;
    bottom: 70px;
    left: 50%;
    width: 1px;
    background: linear-gradient(transparent, rgb(127 230 220 / 32%) 14%, rgb(127 230 220 / 32%) 86%, transparent);
    content: "";
  }

  .skill-graph-lines {
    display: none;
  }

  .skill-graph-core {
    top: 18%;
    width: calc(100% - 72px);
    min-height: 108px;
    padding: 18px;
  }

  .skill-graph-core strong {
    font-size: 18px;
  }

  .skill-graph-node {
    width: calc(50% - 28px);
    min-height: 88px;
    padding: 13px;
  }

  .skill-graph-node-agent,
  .skill-graph-node-capability {
    top: 39%;
  }

  .skill-graph-node-material,
  .skill-graph-node-remotion {
    top: 58%;
  }

  .skill-graph-node-ffmpeg,
  .skill-graph-node-jianying {
    top: 77%;
  }

  .skill-graph-node-agent,
  .skill-graph-node-material,
  .skill-graph-node-ffmpeg {
    left: 25.5%;
  }

  .skill-graph-node-capability,
  .skill-graph-node-remotion,
  .skill-graph-node-jianying {
    left: 74.5%;
  }

  .hero-automation-copy > div {
    font-size: .75rem;
  }

  .hero-automation-copy > div span::before {
    display: none;
  }

  .hero-automation-actions {
    width: 100%;
  }

  .hero-automation-frame {
    top: 19.5rem;
    height: 65rem;
  }

  .hero-automation-toolbar {
    grid-template-columns: auto 1fr;
    gap: .8rem;
  }

  .hero-automation-toolbar > strong {
    justify-self: center;
  }

  .hero-automation-status {
    display: none;
  }

  .hero-scene-tabs button {
    gap: .35rem;
    font-size: .61rem;
  }

  .hero-scene-tabs button span {
    display: none;
  }

  .hero-automation-stage {
    grid-template-rows: 29rem minmax(0, 1fr);
  }

  .hero-cli-panel > header {
    padding: 0 .78rem;
    font-size: .67rem;
  }

  .hero-cli-panel > header small {
    font-size: .5rem;
  }

  .hero-parameter-diff > div {
    grid-template-columns: minmax(6.5rem, 1fr) auto auto;
    gap: .44rem;
    font-size: .55rem;
  }

  .hero-output-header > strong {
    font-size: .57rem;
  }

  .hero-draft-timeline {
    padding-right: .62rem;
    padding-left: .62rem;
  }

  .hero-track {
    grid-template-columns: 2.5rem 1fr;
    gap: .36rem;
  }

  .hero-timeline-clip {
    padding: 0 .38rem;
    font-size: .48rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-huly-background {
    display: none;
  }

  .hero-cli-cursor,
  .hero-agent-thinking > i::after,
  .hero-render-overlay::after {
    animation: none;
  }

  .hero-agent-thinking,
  .hero-tool-call,
  .hero-cli-result,
  .hero-scene-tabs button::after {
    transition: none;
  }

  .hero-title-line {
    animation: none;
    background-position: 42% 50%;
  }

  .hero-code-accordion-body,
  .hero-code-accordion-section,
  .hero-code-accordion-section > header i {
    transition: none;
  }
}

/* Hero application hierarchy overrides */

.home-body .hero-automation-shell {
  width: calc(100% - 1rem);
  height: calc(100% - .9rem);
  display: grid;
  grid-template-rows: 4.65rem minmax(0, 1fr);
  margin: .45rem auto 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-automation-shell .hero-scene-tabs {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  padding: .5rem;
  border: 1px solid rgb(139 207 230 / 18%);
  border-radius: .95rem;
  background: rgb(2 8 13 / 88%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
  backdrop-filter: blur(18px);
}

.hero-automation-shell .hero-scene-tabs button {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .28rem;
  place-content: center;
  border: 1px solid transparent;
  border-radius: .62rem;
  padding: .65rem 1rem;
  background: rgb(255 255 255 / 1.8%);
  color: #738994;
  text-align: left;
  cursor: pointer;
  transition:
    color 260ms ease,
    background 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.hero-automation-shell .hero-scene-tabs button:first-child {
  border-left: 1px solid transparent;
}

.hero-automation-shell .hero-scene-tabs button::after {
  right: .72rem;
  bottom: .38rem;
  left: .72rem;
  width: auto;
  height: 3px;
  border-radius: 99px;
  background: #68dff6;
  box-shadow: 0 0 1rem rgb(104 223 246 / 38%);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: center;
}

.hero-automation-shell .hero-scene-tabs button strong,
.hero-automation-shell .hero-scene-tabs button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-automation-shell .hero-scene-tabs button strong {
  color: inherit;
  font-size: .76rem;
  font-weight: 650;
}

.hero-automation-shell .hero-scene-tabs button small {
  color: #526873;
  font: .56rem/1.2 Menlo, Monaco, Consolas, monospace;
}

.hero-automation-shell .hero-scene-tabs button:hover {
  border-color: rgb(118 211 238 / 18%);
  background: rgb(91 195 225 / 7%);
  color: #cde9f0;
}

.hero-automation-shell .hero-scene-tabs button.is-active {
  border-color: rgb(104 223 246 / 48%);
  background:
    linear-gradient(180deg, rgb(89 205 236 / 18%), rgb(54 132 157 / 10%)),
    rgb(9 24 32 / 90%);
  color: #edfaff;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    inset 0 0 1.4rem rgb(83 208 240 / 6%),
    0 .75rem 2.2rem rgb(0 8 16 / 32%);
  transform: translateY(-1px);
}

.hero-automation-shell .hero-scene-tabs button.is-active small {
  color: #84dcec;
}

.hero-automation-shell .hero-scene-tabs button.is-active::after {
  transform: scaleX(1);
}

.hero-automation-shell .hero-automation-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: block;
  padding: .72rem 0 0;
  background: transparent;
}

.hero-automation-shell .hero-scene-content-layer {
  grid-template-columns: minmax(27rem, .88fr) 4.1rem minmax(40rem, 1.48fr);
  gap: .72rem;
}

.hero-automation-shell .hero-cli-panel,
.hero-automation-shell .hero-output-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(147 204 224 / 17%);
  border-radius: .88rem;
  background: #070c12;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 7%),
    0 2.2rem 6rem rgb(0 4 10 / 45%);
  filter: none;
  opacity: 1;
  transform: none;
  transition:
    border-color 420ms ease,
    box-shadow 420ms ease;
}

.hero-automation-shell[data-focus="agent"] .hero-scene-content-layer.is-active .hero-cli-panel,
.hero-automation-shell[data-focus="output"] .hero-scene-content-layer.is-active .hero-output-panel {
  border-color: rgb(104 223 246 / 52%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 9%),
    inset 0 0 2.4rem rgb(72 197 228 / 4%),
    0 0 0 1px rgb(78 196 226 / 8%),
    0 2.2rem 6rem rgb(0 4 10 / 45%),
    0 0 3.5rem rgb(57 181 218 / 10%);
}

.hero-automation-shell .hero-cli-panel {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 12% 4%, rgb(68 185 211 / 7%), transparent 32%),
    #070b10;
}

.hero-cli-panel > .hero-mac-titlebar,
.hero-output-panel > .hero-jianying-titlebar {
  min-height: 3.15rem;
  display: grid;
  grid-template-columns: 6rem 1fr 6rem;
  align-items: center;
  padding: 0 1rem;
  border-bottom: 1px solid rgb(155 210 230 / 10%);
  background: rgb(255 255 255 / 4.5%);
}

.hero-automation-shell .hero-output-panel {
  display: grid;
  grid-template-rows: 3.15rem 2.55rem minmax(0, 1fr) 14.2rem;
  background: #080c11;
}

.hero-automation-shell .hero-output-monitor {
  grid-template-rows: 2.45rem minmax(0, 1fr);
}

.hero-automation-shell .hero-monitor-frame {
  top: 3.15rem;
  right: .72rem;
  bottom: .72rem;
  left: .72rem;
}

.hero-automation-shell .hero-render-overlay {
  top: 2.45rem;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero-automation-shell .hero-tracks {
  min-height: 8.45rem;
}

.hero-automation-shell .hero-playhead {
  will-change: transform;
}

@media (max-width: 1180px) {
  .hero-automation-shell .hero-scene-content-layer {
    grid-template-columns: minmax(22rem, .88fr) 3rem minmax(31rem, 1.4fr);
    gap: .55rem;
  }
}

@media (max-width: 780px) {
  .home-body .hero.hero-automation {
    min-height: 96rem;
  }

  .home-body .hero-automation-frame {
    height: 72rem;
  }

  .home-body .hero-automation-shell {
    grid-template-rows: 4.45rem minmax(0, 1fr);
  }

  .hero-automation-shell .hero-scene-tabs {
    gap: .3rem;
    padding: .38rem;
  }

  .hero-automation-shell .hero-scene-tabs button {
    gap: .22rem;
    padding: .55rem .28rem;
    text-align: center;
  }

  .hero-automation-shell .hero-scene-content-layer {
    grid-template-columns: 1fr;
    grid-template-rows: 30rem 2.2rem minmax(0, 1fr);
    gap: .55rem;
  }

  .hero-automation-shell .hero-output-panel {
    grid-template-rows: 3.15rem 2.4rem minmax(0, 1fr) 12.4rem;
  }
}

@media (max-width: 520px) {
  .home-body .hero.hero-automation {
    min-height: 95rem;
  }

  .home-body .hero-automation-frame {
    height: 72rem;
  }

  .hero-cli-panel > .hero-mac-titlebar,
  .hero-output-panel > .hero-jianying-titlebar {
    grid-template-columns: 4.8rem 1fr 4.8rem;
    padding: 0 .75rem;
  }
}

/* Unified dark product surface */

.home-site {
  background:
    radial-gradient(circle at 78% 35%, rgb(43 171 207 / 8%), transparent 30rem),
    radial-gradient(circle at 16% 72%, rgb(59 119 167 / 6%), transparent 34rem),
    linear-gradient(180deg, #03070c, #050a0f 58%, #03070c);
}

.route-proof,
.library-proof,
.native-proof,
.system-close {
  background-color: transparent;
}

.route-proof {
  position: relative;
  width: min(1480px, calc(100% - 64px));
  min-height: 900px;
  grid-template-columns: minmax(320px, .62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 3.5vw, 64px);
  padding: 138px 0 126px;
}

.route-proof::before {
  position: absolute;
  z-index: 0;
  top: 8%;
  right: -8%;
  width: 70%;
  height: 82%;
  background: radial-gradient(circle, rgb(55 207 235 / 9%), transparent 68%);
  content: "";
  pointer-events: none;
}

.route-proof > * {
  position: relative;
  z-index: 1;
}

.section-copy h2,
.native-copy h2,
.native-facts dt {
  color: var(--home-white);
}

.section-copy h2 {
  max-width: 620px;
  text-wrap: balance;
}

.section-copy > p:not(.section-kicker, .proof-caption),
.native-copy > p:not(.section-kicker) {
  color: var(--home-muted);
}

.skill-orbit-reveal {
  min-width: 0;
}

.skill-orbit-stage {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(161 220 236 / 14%);
  border-radius: .95rem;
  background:
    radial-gradient(circle at 50% 50%, rgb(72 203 229 / 11%), transparent 17rem),
    radial-gradient(circle at 12% 14%, rgb(41 109 145 / 8%), transparent 16rem),
    linear-gradient(145deg, rgb(9 17 24 / 96%), rgb(3 8 13 / 99%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 4%),
    0 3rem 8rem rgb(0 0 0 / 32%);
}

.skill-orbit-stage::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgb(140 234 250 / 3%), transparent 24% 76%, rgb(140 234 250 / 2%)),
    radial-gradient(circle at center, transparent 12rem, rgb(2 7 11 / 30%) 31rem);
  content: "";
  pointer-events: none;
}

.skill-orbit-lines {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.skill-orbit-lines g {
  opacity: .62;
  transition: opacity 280ms cubic-bezier(.16, 1, .3, 1);
}

.skill-orbit-path {
  fill: none;
  stroke: rgb(139 207 222 / 24%);
  stroke-linecap: round;
  stroke-width: 1.1;
  transition:
    opacity 280ms cubic-bezier(.16, 1, .3, 1),
    stroke 280ms cubic-bezier(.16, 1, .3, 1),
    stroke-width 280ms cubic-bezier(.16, 1, .3, 1);
  vector-effect: non-scaling-stroke;
}

.skill-orbit-anchor {
  fill: #091118;
  stroke: rgb(139 207 222 / 38%);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 280ms cubic-bezier(.16, 1, .3, 1),
    opacity 280ms cubic-bezier(.16, 1, .3, 1),
    stroke 280ms cubic-bezier(.16, 1, .3, 1),
    transform 280ms cubic-bezier(.16, 1, .3, 1);
}

.skill-orbit-stage.has-active .skill-orbit-lines g:not(.is-active) {
  opacity: .18;
}

.skill-orbit-lines g.is-active {
  opacity: 1;
}

.skill-orbit-lines g.is-active .skill-orbit-path {
  stroke: #73dff3;
  stroke-width: 1.75;
}

.skill-orbit-lines g.is-active .skill-orbit-anchor {
  fill: #d8faff;
  stroke: #73dff3;
  transform: scale(1.7);
}

.skill-orbit-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 31%;
  min-height: 174px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: .95rem;
  padding: 28px 30px;
  background: rgb(119 222 239 / 24%);
  color: var(--home-white);
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 1.8rem 5rem rgb(0 0 0 / 30%);
}

.skill-orbit-core::before,
.skill-orbit-card::before {
  position: absolute;
  z-index: -1;
  inset: -115%;
  background: conic-gradient(
    from 0deg,
    transparent 0 66%,
    rgb(86 209 233 / 10%) 70%,
    #d9faff 76%,
    #61d9ef 79%,
    transparent 86% 100%
  );
  content: "";
  opacity: 0;
  transform: rotate(-35deg);
}

.skill-orbit-core::after,
.skill-orbit-card::after {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: calc(.95rem - 1px);
  background:
    linear-gradient(145deg, rgb(19 38 48 / 97%), rgb(7 14 20 / 99%));
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
  content: "";
}

.skill-orbit-core::before {
  opacity: .72;
  animation: skill-border-beam 7.8s linear infinite;
}

.skill-orbit-core.is-engaged::after {
  background:
    radial-gradient(circle at 50% 0, rgb(95 222 242 / 12%), transparent 68%),
    linear-gradient(145deg, rgb(20 41 51 / 98%), rgb(7 14 20 / 99%));
}

.skill-orbit-core span {
  color: var(--home-teal-bright);
  font: 10px/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .16em;
}

.skill-orbit-core strong {
  margin-top: 10px;
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 720;
  line-height: .96;
  letter-spacing: -.055em;
}

.skill-orbit-core p {
  margin: 18px 0 0;
  color: rgb(190 213 222 / 67%);
  font-size: 11px;
  line-height: 1.65;
}

.skill-orbit-core-signal {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.skill-orbit-core-signal i {
  width: 2px;
  height: 9px;
  display: block;
  border-radius: 99px;
  background: rgb(123 228 246 / 42%);
}

.skill-orbit-core-signal i:nth-child(2) {
  height: 17px;
  background: rgb(123 228 246 / 76%);
}

.skill-orbit-core-signal i:nth-child(3) {
  height: 12px;
}

.skill-orbit-list {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.skill-orbit-item {
  position: absolute;
  width: 28.5%;
  pointer-events: auto;
}

.skill-orbit-item-orchestrate {
  top: 5%;
  left: 3.5%;
}

.skill-orbit-item-library {
  top: 36.8%;
  left: 1.2%;
}

.skill-orbit-item-extend {
  bottom: 5%;
  left: 4.2%;
}

.skill-orbit-item-select {
  top: 5%;
  right: 3.5%;
}

.skill-orbit-item-rerender {
  top: 36.8%;
  right: 1.2%;
}

.skill-orbit-item-jianying {
  right: 4.2%;
  bottom: 5%;
}

.skill-orbit-card {
  position: relative;
  width: 100%;
  min-height: 190px;
  overflow: hidden;
  isolation: isolate;
  display: block;
  border: 0;
  border-radius: .95rem;
  padding: 0;
  background: rgb(145 210 224 / 18%);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transform: translateY(0) scale(1);
  transition:
    opacity 280ms cubic-bezier(.16, 1, .3, 1),
    transform 320ms cubic-bezier(.16, 1, .3, 1);
}

.skill-orbit-card::after {
  background:
    radial-gradient(circle at 10% 0, rgb(126 221 239 / 6%), transparent 56%),
    linear-gradient(145deg, rgb(12 23 31 / 97%), rgb(5 11 16 / 99%));
}

.skill-orbit-card:hover,
.skill-orbit-card:focus-visible,
.skill-orbit-card.is-active {
  outline: none;
  transform: translateY(-6px) scale(1.012);
}

.skill-orbit-card:focus-visible {
  box-shadow:
    0 0 0 2px #050b10,
    0 0 0 4px rgb(116 225 244 / 58%);
}

.skill-orbit-card:hover::before,
.skill-orbit-card:focus-visible::before,
.skill-orbit-card.is-active::before {
  opacity: 1;
  animation: skill-border-beam 1.7s cubic-bezier(.16, 1, .3, 1) 1;
}

.skill-orbit-stage.has-active .skill-orbit-card:not(.is-active) {
  opacity: .54;
  transform: scale(.985);
}

.skill-orbit-card-content {
  position: relative;
  z-index: 1;
  min-height: 190px;
  display: grid;
  grid-template-rows: 58px 1fr;
  gap: 14px;
  padding: 20px 20px 18px;
}

.skill-orbit-glyph {
  width: 96px;
  height: 56px;
  display: block;
  overflow: visible;
}

.skill-glyph-line {
  fill: none;
  stroke: rgb(155 205 217 / 28%);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.3;
}

.skill-glyph-shape,
.skill-glyph-focus,
.skill-glyph-new {
  fill: rgb(110 142 151 / 13%);
  stroke: rgb(165 215 226 / 30%);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.skill-glyph-focus {
  fill: rgb(81 199 221 / 14%);
  stroke: rgb(116 225 244 / 64%);
}

.skill-glyph-new,
.skill-glyph-signal {
  fill: #96ecfa;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}

.skill-glyph-playhead {
  fill: none;
  stroke: #93eaf8;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

.skill-orbit-card.is-active .skill-glyph-signal {
  animation: skill-glyph-travel 1.15s cubic-bezier(.16, 1, .3, 1) 1;
}

.skill-orbit-card.is-active .skill-glyph-piece-one {
  transform: translate(28px, 12px);
}

.skill-orbit-card.is-active .skill-glyph-piece-two {
  transform: translate(28px, -12px);
}

.skill-orbit-card.is-active .skill-glyph-piece-three {
  transform: translateX(14px);
}

.skill-orbit-card.is-active .skill-glyph-new {
  animation: skill-glyph-arrive 520ms cubic-bezier(.16, 1, .3, 1) 1;
}

.skill-orbit-card.is-active .skill-glyph-choice {
  transform: scale(1.12);
}

.skill-orbit-card.is-active .skill-glyph-after {
  transform: translateX(-4px);
}

.skill-orbit-card.is-active .skill-glyph-rendered {
  transform: translateX(-4px) scale(1.1);
}

.skill-orbit-card.is-active .skill-glyph-playhead {
  animation: skill-glyph-playhead 1.25s cubic-bezier(.16, 1, .3, 1) 1;
}

.skill-glyph-piece-one,
.skill-glyph-piece-two,
.skill-glyph-piece-three,
.skill-glyph-choice,
.skill-glyph-after,
.skill-glyph-rendered {
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
}

.skill-orbit-card-copy {
  display: block;
}

.skill-orbit-card-copy strong {
  display: block;
  color: #edf8fb;
  font-size: clamp(16px, 1.32vw, 20px);
  font-weight: 640;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.skill-orbit-card-copy > span {
  display: block;
  margin-top: 9px;
  color: rgb(177 201 210 / 66%);
  font-size: 11px;
  line-height: 1.6;
}

@keyframes skill-border-beam {
  from {
    transform: rotate(-35deg);
  }

  to {
    transform: rotate(325deg);
  }
}

@keyframes skill-glyph-travel {
  from {
    opacity: .2;
    transform: translateX(0);
  }

  to {
    opacity: 1;
    transform: translateX(64px);
  }
}

@keyframes skill-glyph-arrive {
  from {
    opacity: 0;
    transform: scale(.45);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes skill-glyph-playhead {
  from {
    opacity: .35;
    transform: translateX(0);
  }

  to {
    opacity: 1;
    transform: translateX(60px);
  }
}

.library-proof {
  padding: 24px 32px 0;
}

.library-stage {
  border-color: rgb(162 221 238 / 13%);
  background: #050a0e;
  box-shadow: 0 3rem 9rem rgb(0 0 0 / 34%);
}

.native-proof {
  border-top: 1px solid rgb(151 214 233 / 9%);
}

.native-visual {
  background:
    radial-gradient(circle at 48% 46%, rgb(62 184 210 / 9%), transparent 42%),
    #071016;
}

.native-copy .section-kicker {
  color: var(--home-teal);
}

.system-close {
  min-height: 760px;
  border-top: 1px solid rgb(151 214 233 / 11%);
  background:
    radial-gradient(circle at 80% 32%, rgb(55 207 235 / 13%), transparent 28rem),
    radial-gradient(circle at 12% 100%, rgb(60 116 166 / 9%), transparent 35rem),
    #03080d;
}

.system-close::before {
  top: auto;
  right: -12%;
  bottom: -50%;
  width: 720px;
  height: 720px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(94 220 241 / 9%), transparent 66%);
  box-shadow: none;
}

.system-close-copy .section-kicker,
.system-flow span {
  color: var(--home-teal-bright);
}

.system-close-copy > p:not(.section-kicker),
.close-actions p {
  color: var(--home-muted);
}

.system-flow {
  border-color: rgb(179 226 239 / 18%);
}

.system-flow li {
  border-color: rgb(179 226 239 / 18%);
}

.system-close .primary-action {
  border-color: #86eafe;
  background: linear-gradient(180deg, #9af0ff, #50cee9);
  color: #031017;
  box-shadow: 0 1rem 3.5rem rgb(42 192 226 / 22%);
}

.home-footer {
  border-top-color: rgb(174 222 235 / 13%);
  background: #02060a;
}

@media (max-width: 900px) {
  .route-proof {
    width: min(100% - 48px, 780px);
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 110px 0 104px;
  }

  .skill-orbit-stage {
    min-height: 720px;
  }
}

@media (max-width: 720px) {
  .skill-orbit-stage {
    min-height: 0;
    overflow: hidden;
    padding: 18px;
  }

  .skill-orbit-lines {
    display: none;
  }

  .skill-orbit-core {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 150px;
    padding: 24px;
    transform: none;
  }

  .skill-orbit-core strong {
    font-size: 34px;
  }

  .skill-orbit-list {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 28px;
    padding-left: 30px;
  }

  .skill-orbit-list::before {
    position: absolute;
    top: -28px;
    bottom: 0;
    left: 12px;
    width: 1px;
    background: linear-gradient(180deg, rgb(123 220 239 / 38%), rgb(123 220 239 / 12%));
    content: "";
    pointer-events: none;
  }

  .skill-orbit-item,
  .skill-orbit-item-orchestrate,
  .skill-orbit-item-library,
  .skill-orbit-item-extend,
  .skill-orbit-item-select,
  .skill-orbit-item-rerender,
  .skill-orbit-item-jianying {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
  }

  .skill-orbit-item::before {
    position: absolute;
    top: 50%;
    left: -18px;
    width: 18px;
    height: 1px;
    background: rgb(123 220 239 / 34%);
    content: "";
    pointer-events: none;
  }

  .skill-orbit-card,
  .skill-orbit-card-content {
    min-height: 136px;
  }

  .skill-orbit-card-content {
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
  }

  .skill-orbit-glyph {
    width: 82px;
  }

  .skill-orbit-card-copy strong {
    font-size: 18px;
  }

  .skill-orbit-card-copy > span {
    font-size: 12px;
  }
}

@media (max-width: 620px) {
  .route-proof {
    width: calc(100% - 36px);
    gap: 42px;
    padding: 88px 0 82px;
  }

  .route-proof .section-copy h2 {
    font-size: clamp(38px, 11vw, 50px);
  }

  .library-proof {
    padding: 8px 10px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skill-orbit-core::before,
  .skill-orbit-card::before,
  .skill-orbit-card.is-active .skill-glyph-signal,
  .skill-orbit-card.is-active .skill-glyph-new,
  .skill-orbit-card.is-active .skill-glyph-playhead {
    animation: none;
  }

  .skill-orbit-card,
  .skill-orbit-card:hover,
  .skill-orbit-card:focus-visible,
  .skill-orbit-card.is-active,
  .skill-orbit-stage.has-active .skill-orbit-card:not(.is-active) {
    transform: none;
    transition: none;
  }

  .skill-orbit-core::before {
    opacity: .24;
  }
}

/* Stitch dual-pillar landing page */

.product-pillars,
.product-results,
.visual-library,
.jianying-product,
.landing-purchase,
.getting-started {
  position: relative;
  color: var(--home-white);
  background: #03070c;
}

.product-pillars::before,
.product-results::before,
.jianying-product::before,
.landing-purchase::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(137 218 239 / 3.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(137 218 239 / 3.5%) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
  pointer-events: none;
}

.landing-heading {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 3rem), 86rem);
  margin: 0 auto;
}

.landing-heading h2 {
  max-width: 17ch;
  margin: 0;
  color: #f2f8fa;
  font-size: clamp(3.4rem, 6vw, 7.1rem);
  font-weight: 610;
  line-height: .95;
  letter-spacing: -.06em;
}

.landing-heading > p:last-child {
  max-width: 34rem;
  margin: 2rem 0 0;
  color: #82949e;
  font-size: clamp(.95rem, 1.25vw, 1.18rem);
  line-height: 1.8;
}

.landing-heading-wide h2 {
  max-width: 19ch;
}

.product-pillars {
  padding: clamp(8rem, 11vw, 13rem) 0 clamp(6rem, 9vw, 11rem);
  overflow: hidden;
}

.product-pillars::after {
  position: absolute;
  top: 10rem;
  right: -18rem;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: rgb(58 208 239 / 9%);
  content: "";
  filter: blur(7rem);
  pointer-events: none;
}

.pillar-grid {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 3rem), 86rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: clamp(4rem, 7vw, 7rem) auto 0;
}

.pillar-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(134 216 238 / 18%);
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 12% 0%, rgb(95 220 244 / 7%), transparent 38%),
    linear-gradient(145deg, rgb(12 25 34 / 96%), rgb(3 9 15 / 96%));
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

.pillar-card-jianying {
  border-color: rgb(249 199 71 / 22%);
  background:
    radial-gradient(circle at 88% 0%, rgb(249 199 71 / 7%), transparent 42%),
    linear-gradient(145deg, rgb(16 23 28 / 96%), rgb(4 9 14 / 96%));
}

.pillar-card > header {
  height: 4.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgb(134 216 238 / 11%);
  padding: 0 1.45rem;
}

.pillar-card > header span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgb(112 225 245 / 36%);
  color: #72dff3;
  font: .62rem/1 Menlo, Monaco, Consolas, monospace;
}

.pillar-card-jianying > header span {
  border-color: rgb(249 199 71 / 42%);
  color: #f9c747;
}

.pillar-card > header p {
  margin: 0;
  color: #acc1c9;
  font-size: .82rem;
  letter-spacing: .04em;
}

.pillar-media {
  position: relative;
  height: clamp(22rem, 29vw, 31rem);
  margin: 0;
  overflow: hidden;
  background: #010509;
}

.pillar-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .78;
  transform: scale(1.015);
  transition: opacity 600ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.pillar-card:hover .pillar-media video {
  opacity: .96;
  transform: scale(1.045);
}

.pillar-card-jianying .pillar-media video {
  object-fit: cover;
  filter: saturate(.72) contrast(1.1) brightness(.78);
}

.pillar-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgb(2 8 13 / 88%));
  content: "";
  pointer-events: none;
}

.pillar-media-tag {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  border: 1px solid rgb(127 226 246 / 28%);
  padding: .5rem .7rem;
  color: #8de9f8;
  background: rgb(2 9 14 / 72%);
  font: .58rem/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .12em;
  backdrop-filter: blur(12px);
}

.pillar-card-jianying .pillar-media-tag {
  border-color: rgb(249 199 71 / 28%);
  color: #f9c747;
}

.pillar-card-copy {
  min-height: 19rem;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 3.2vw, 3.4rem);
}

.pillar-card-copy h3 {
  max-width: 12ch;
  margin: 0;
  color: #f0f7fa;
  font-size: clamp(2.2rem, 3.5vw, 4.2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.pillar-card-copy > p {
  max-width: 28rem;
  margin: 1.6rem 0 0;
  color: #92a5ae;
  font-size: .98rem;
  line-height: 1.8;
}

.pillar-card-copy small {
  margin-top: auto;
  border-top: 1px solid rgb(133 210 231 / 12%);
  padding-top: 1.25rem;
  color: #657983;
  font-size: .72rem;
  line-height: 1.7;
}

.product-results {
  padding: clamp(7rem, 10vw, 12rem) 0;
  overflow: hidden;
  border-top: 1px solid rgb(140 216 237 / 10%);
}

.result-grid {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 3rem), 86rem);
  display: grid;
  grid-template-columns: 1.28fr .86fr .86fr;
  gap: 1rem;
  margin: clamp(4rem, 6vw, 6rem) auto 0;
}

.result-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(134 216 238 / 14%);
  border-radius: 1rem;
  background: #071018;
}

.result-media {
  position: relative;
  height: 22rem;
  overflow: hidden;
  background: #010509;
}

.result-card-1 .result-media {
  height: 30rem;
}

.result-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.result-card > div:last-child {
  min-height: 13.8rem;
  padding: 1.7rem;
}

.result-card > div:last-child > span {
  color: #6fdaed;
  font: .62rem/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
}

.result-card h3 {
  margin: 1rem 0 0;
  color: #eaf5f8;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 590;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.result-card p {
  margin: 1rem 0 0;
  color: #71858f;
  font-size: .8rem;
  line-height: 1.7;
}

.visual-library {
  padding: 1.1rem;
  background: #03070c;
}

.visual-library-stage {
  position: relative;
  min-height: min(76rem, 88vw);
  overflow: hidden;
  border: 1px solid rgb(134 216 238 / 15%);
  border-radius: 1.25rem;
  background: #02060a;
}

.visual-library-media,
.visual-library-media video,
.visual-library-grade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.visual-library-media video {
  display: block;
  object-fit: cover;
  opacity: .72;
  filter: saturate(.78) contrast(1.08) brightness(.72);
}

.visual-library-grade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(1 5 8 / 95%) 0%, rgb(2 7 11 / 78%) 39%, rgb(2 7 11 / 12%) 70%),
    linear-gradient(180deg, rgb(1 5 8 / 28%), transparent 58%, rgb(1 5 8 / 82%));
  pointer-events: none;
}

.visual-library-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(2rem, 7vw, 8rem);
  width: min(42rem, 42vw);
  transform: translateY(-50%);
}

.visual-library-copy[data-reveal] {
  transform: translateY(calc(-50% + 26px));
}

.visual-library-copy[data-reveal].is-revealed {
  transform: translateY(-50%);
}

.visual-library-copy h2 {
  margin: 0;
  color: #f3f8fa;
  font-size: clamp(3.6rem, 6vw, 7.3rem);
  font-weight: 610;
  line-height: .94;
  letter-spacing: -.065em;
}

.visual-library-copy > p:not(.section-kicker) {
  max-width: 28rem;
  margin: 2rem 0 0;
  color: #93a7b0;
  font-size: 1rem;
  line-height: 1.8;
}

.material-kind-list {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
}

.material-kind-list span {
  border: 1px solid rgb(129 219 240 / 19%);
  border-radius: 999px;
  padding: .65rem .9rem;
  color: #a9bdc5;
  background: rgb(4 13 19 / 56%);
  font-size: .72rem;
  backdrop-filter: blur(10px);
}

.landing-text-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.6rem;
  border-bottom: 1px solid rgb(113 221 242 / 36%);
  padding-bottom: .55rem;
  color: #8feaf9;
  font-size: .86rem;
  text-decoration: none;
}

.landing-text-link span {
  transition: transform 180ms ease;
}

.landing-text-link:hover span {
  transform: translate(3px, -3px);
}

.visual-library-update {
  position: absolute;
  z-index: 2;
  right: clamp(2rem, 5vw, 5rem);
  bottom: clamp(2rem, 4vw, 4rem);
  display: grid;
  gap: .35rem;
  border-left: 2px solid #6fe0f5;
  padding-left: 1rem;
}

.visual-library-update span {
  color: #6fe0f5;
  font: .62rem/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
}

.visual-library-update strong {
  color: #dcecef;
  font-size: .88rem;
  font-weight: 540;
}

.jianying-product {
  overflow: hidden;
  padding: clamp(8rem, 12vw, 14rem) 0 clamp(7rem, 10vw, 12rem);
  background:
    radial-gradient(circle at 85% 18%, rgb(249 199 71 / 7%), transparent 30%),
    #05090d;
}

.jianying-product .landing-heading h2 {
  max-width: 15ch;
}

.native-kind-marquee {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 3rem), 86rem);
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 3.6rem auto 0;
}

.native-kind-marquee span {
  border: 1px solid rgb(249 199 71 / 18%);
  border-radius: 999px;
  padding: .72rem 1rem;
  color: #baa970;
  background: rgb(249 199 71 / 3%);
  font-size: .74rem;
}

.jianying-timeline-product {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 3rem), 86rem);
  display: grid;
  grid-template-columns: minmax(20rem, .72fr) minmax(0, 1.28fr);
  gap: 1rem;
  margin: clamp(4rem, 7vw, 7rem) auto 0;
}

.jianying-timeline-copy,
.jianying-timeline-media {
  min-width: 0;
  min-height: 40rem;
  border: 1px solid rgb(249 199 71 / 15%);
  border-radius: 1.2rem;
  background: rgb(9 15 20 / 92%);
}

.jianying-timeline-copy {
  display: flex;
  flex-direction: column;
  padding: clamp(2.2rem, 4vw, 4.4rem);
}

.native-status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #e0bd5f;
  font: .64rem/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
}

.native-status i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #f9c747;
  box-shadow: 0 0 1rem rgb(249 199 71 / 62%);
}

.jianying-timeline-copy h3 {
  margin: 2.6rem 0 0;
  color: #f1f5f6;
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  font-weight: 590;
  line-height: 1;
  letter-spacing: -.06em;
}

.jianying-timeline-copy > p {
  max-width: 29rem;
  margin: 2rem 0 0;
  color: #8a9aa2;
  font-size: .96rem;
  line-height: 1.85;
}

.native-maintenance {
  display: grid;
  gap: .8rem;
  margin-top: auto;
  border-top: 1px solid rgb(249 199 71 / 12%);
  padding-top: 1.5rem;
  color: #7f8f96;
  font-size: .74rem;
}

.native-maintenance span {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.native-maintenance span::before {
  width: .34rem;
  height: .34rem;
  border: 1px solid #d6b75a;
  content: "";
  transform: rotate(45deg);
}

.jianying-timeline-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #010509;
}

.jianying-timeline-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.85) contrast(1.08) brightness(.82);
}

.jianying-timeline-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgb(2 7 11 / 86%));
  content: "";
  pointer-events: none;
}

.timeline-proof-label {
  position: absolute;
  z-index: 2;
  right: 1.4rem;
  bottom: 1.4rem;
  left: 1.4rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgb(249 199 71 / 24%);
  padding-top: 1rem;
}

.timeline-proof-label span {
  color: #87969d;
  font-size: .7rem;
}

.timeline-proof-label strong {
  color: #f0c95c;
  font-size: 1rem;
  font-weight: 560;
}

.native-context-proof {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 3rem), 86rem);
  margin: 1.2rem auto 0;
  color: #596970;
  font-size: .7rem;
  text-align: right;
}

.landing-purchase {
  overflow: hidden;
  padding: clamp(8rem, 12vw, 14rem) 1.5rem;
}

.purchase-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 86rem);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgb(112 224 244 / 24%);
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 87% 0%, rgb(249 199 71 / 8%), transparent 29%),
    radial-gradient(circle at 0% 100%, rgb(80 215 240 / 10%), transparent 32%),
    #071018;
  box-shadow: 0 3rem 8rem rgb(0 0 0 / 36%), inset 0 1px rgb(255 255 255 / 4%);
}

.purchase-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #69dff4, #f2c550);
  content: "";
}

.purchase-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid rgb(137 214 235 / 13%);
  padding: clamp(2.2rem, 5vw, 5.4rem);
}

.purchase-heading h2 {
  margin: 0;
  color: #f2f7f9;
  font-size: clamp(3.2rem, 6vw, 7rem);
  font-weight: 610;
  line-height: .94;
  letter-spacing: -.06em;
}

.purchase-price {
  min-width: 19rem;
  display: grid;
  justify-items: end;
  flex: 0 0 auto;
  border: 1px solid rgb(113 224 244 / 18%);
  border-radius: 1rem;
  padding: 1.3rem 1.6rem 1.15rem;
  background: linear-gradient(145deg, rgb(91 220 242 / 9%), rgb(4 12 18 / 76%));
  box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 1.4rem 4rem rgb(0 0 0 / 18%);
}

.purchase-price > span {
  color: #a4b7bf;
  font-size: .78rem;
  font-weight: 580;
}

.purchase-price strong {
  color: #eefdff;
  font-size: clamp(5rem, 9vw, 9.8rem);
  font-weight: 680;
  line-height: .82;
  letter-spacing: -.055em;
  text-shadow: 0 0 2.5rem rgb(91 222 244 / 28%);
  font-variant-numeric: tabular-nums;
}

.purchase-price small {
  margin-right: .14em;
  color: #6edff4;
  font-size: .3em;
  vertical-align: .72em;
}

.purchase-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.purchase-pillar-grid article {
  min-height: 27rem;
  padding: clamp(2rem, 4vw, 4.4rem);
}

.purchase-pillar-grid article + article {
  border-left: 1px solid rgb(137 214 235 / 13%);
}

.purchase-pillar-grid article header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.purchase-pillar-grid article header span {
  color: #6fdef2;
  font: .64rem/1 Menlo, Monaco, Consolas, monospace;
}

.purchase-pillar-grid article:nth-child(2) header span {
  color: #f0c34f;
}

.purchase-pillar-grid h3 {
  margin: 0;
  color: #e8f2f5;
  font-size: clamp(1.55rem, 2.5vw, 2.6rem);
  font-weight: 580;
  letter-spacing: -.04em;
}

.purchase-pillar-grid ul {
  display: grid;
  gap: 1.1rem;
  margin: 2.8rem 0 0;
  padding: 0;
  list-style: none;
}

.purchase-pillar-grid li {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: #92a3ab;
  font-size: .9rem;
}

.purchase-pillar-grid li::before {
  width: .4rem;
  height: .4rem;
  border: 1px solid #6fdff3;
  content: "";
  transform: rotate(45deg);
}

.purchase-pillar-grid article:nth-child(2) li::before {
  border-color: #e8bf52;
}

.purchase-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid rgb(137 214 235 / 13%);
  padding: 2rem clamp(2rem, 4vw, 4.4rem);
}

.purchase-terms {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.6rem;
  color: #71858e;
  font-size: .7rem;
}

.purchase-terms span {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.purchase-terms span::before {
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: #5bd8ee;
  content: "";
}

.purchase-footer .primary-action {
  min-width: 13rem;
  flex: 0 0 auto;
}

.getting-started {
  width: min(calc(100% - 3rem), 86rem);
  display: grid;
  grid-template-columns: minmax(20rem, .72fr) minmax(0, 1.28fr);
  gap: 1rem;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 9rem) 0 clamp(8rem, 10vw, 12rem);
}

.install-panel,
.faq-panel,
.support-notes article {
  border: 1px solid rgb(136 214 235 / 13%);
  border-radius: 1rem;
  background: #071018;
}

.install-panel,
.faq-panel {
  padding: clamp(2rem, 4vw, 4rem);
}

.install-panel h2,
.faq-panel h2 {
  margin: 0;
  color: #edf6f8;
  font-size: clamp(2.4rem, 3.8vw, 4.3rem);
  font-weight: 590;
  line-height: 1;
  letter-spacing: -.055em;
}

.install-panel ol {
  display: grid;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.install-panel li {
  min-height: 5.2rem;
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  border-top: 1px solid rgb(136 214 235 / 11%);
}

.install-panel li span {
  color: #5ed9ef;
  font: .62rem/1 Menlo, Monaco, Consolas, monospace;
}

.install-panel li strong {
  color: #acbdc4;
  font-size: .92rem;
  font-weight: 520;
}

.install-panel nav {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.3rem;
  margin-top: 2rem;
}

.install-panel nav a {
  color: #6f8893;
  font-size: .72rem;
  text-decoration: none;
}

.install-panel nav a:hover {
  color: #82eafd;
}

.faq-list {
  margin-top: 2.4rem;
}

.faq-list details {
  border-top: 1px solid rgb(136 214 235 / 11%);
}

.faq-list summary {
  min-height: 5.4rem;
  display: grid;
  grid-template-columns: 2.2rem 1fr 1rem;
  align-items: center;
  gap: .8rem;
  color: #b2c2c8;
  font-size: .9rem;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  color: #516b76;
  font: .58rem/1 Menlo, Monaco, Consolas, monospace;
}

.faq-list summary i {
  position: relative;
  width: .8rem;
  height: .8rem;
}

.faq-list summary i::before,
.faq-list summary i::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: .8rem;
  height: 1px;
  background: #6c8792;
  content: "";
}

.faq-list summary i::after {
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.faq-list details[open] summary i::after {
  transform: rotate(0deg);
}

.faq-list details > p {
  max-width: 42rem;
  margin: -.2rem 1rem 0 3rem;
  padding: 0 0 1.8rem;
  color: #778b94;
  font-size: .78rem;
  line-height: 1.9;
}

.support-notes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.support-notes article {
  min-height: 12rem;
  padding: 2.2rem;
}

.support-notes article > span {
  color: #5fdbee;
  font: .62rem/1 Menlo, Monaco, Consolas, monospace;
}

.support-notes h3 {
  margin: 1.2rem 0 0;
  color: #dce9ed;
  font-size: 1.35rem;
  font-weight: 570;
}

.support-notes p {
  margin: 1rem 0 0;
  color: #6f838c;
  font-size: .78rem;
  line-height: 1.8;
}

.home-footer nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.home-footer nav a {
  color: #627882;
  font-size: .7rem;
  text-decoration: none;
}

.home-footer nav a:hover {
  color: #82eafd;
}

@media (max-width: 980px) {
  .pillar-grid,
  .purchase-pillar-grid,
  .getting-started {
    grid-template-columns: 1fr;
  }

  .result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-card-1 {
    grid-column: 1 / -1;
  }

  .result-card-1 .result-media {
    height: 28rem;
  }

  .visual-library-stage {
    min-height: 60rem;
  }

  .visual-library-copy {
    width: min(39rem, calc(100% - 4rem));
  }

  .jianying-timeline-product {
    grid-template-columns: 1fr;
  }

  .jianying-timeline-copy,
  .jianying-timeline-media {
    min-height: 34rem;
  }

  .purchase-pillar-grid article + article {
    border-top: 1px solid rgb(137 214 235 / 13%);
    border-left: 0;
  }

  .purchase-pillar-grid article {
    min-height: 22rem;
  }

  .support-notes {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .landing-heading,
  .pillar-grid,
  .result-grid,
  .native-kind-marquee,
  .jianying-timeline-product,
  .native-context-proof,
  .getting-started {
    width: calc(100% - 2rem);
  }

  .landing-heading h2 {
    font-size: clamp(2.8rem, 12vw, 4.7rem);
  }

  .pillar-grid,
  .result-grid,
  .support-notes {
    grid-template-columns: 1fr;
  }

  .pillar-media {
    height: 20rem;
  }

  .pillar-card-copy {
    min-height: 17rem;
  }

  .result-card-1 {
    grid-column: auto;
  }

  .result-card-1 .result-media,
  .result-media {
    height: 22rem;
  }

  .visual-library {
    padding: .5rem;
  }

  .visual-library-stage {
    min-height: 48rem;
  }

  .visual-library-copy {
    top: 6rem;
    left: 1.5rem;
    width: calc(100% - 3rem);
    transform: none;
  }

  .visual-library-copy[data-reveal] {
    transform: translateY(26px);
  }

  .visual-library-copy[data-reveal].is-revealed {
    transform: none;
  }

  .visual-library-copy h2 {
    font-size: clamp(3rem, 13vw, 5rem);
  }

  .visual-library-grade {
    background: linear-gradient(180deg, rgb(1 5 8 / 92%) 0%, rgb(1 5 8 / 55%) 58%, rgb(1 5 8 / 88%));
  }

  .visual-library-update {
    right: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
  }

  .jianying-timeline-copy,
  .jianying-timeline-media {
    min-height: 30rem;
  }

  .purchase-heading,
  .purchase-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .purchase-price {
    width: 100%;
    min-width: 0;
    justify-items: start;
  }

  .purchase-footer .primary-action {
    width: 100%;
  }

  .support-notes {
    grid-column: auto;
  }

  .home-footer nav {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-media video,
  .pillar-card:hover .pillar-media video,
  .landing-text-link span {
    transform: none;
    transition: none;
  }
}

/* Compact product narrative */

.hero-automation-copy h1 {
  max-width: 72rem;
  font-size: clamp(3.35rem, 4.65vw, 5.55rem);
  line-height: .96;
}

.product-pillars {
  padding: clamp(5.5rem, 7vw, 8rem) 0 clamp(4.5rem, 6vw, 6.5rem);
}

.landing-heading h2 {
  max-width: 14ch;
  font-size: clamp(2.7rem, 4.2vw, 4.7rem);
  line-height: 1;
  letter-spacing: -.052em;
}

.landing-heading > p:last-child {
  margin-top: 1.25rem;
  font-size: .95rem;
  line-height: 1.65;
}

.pillar-grid {
  margin-top: clamp(2.8rem, 4vw, 4rem);
}

.pillar-card > header {
  height: 3.6rem;
  padding: 0 1.25rem;
}

.pillar-media {
  height: clamp(16rem, 21vw, 22rem);
}

.pillar-card-copy {
  min-height: 12.5rem;
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
}

.pillar-card-copy h3 {
  max-width: 15ch;
  font-size: clamp(1.8rem, 2.5vw, 2.85rem);
  line-height: 1.04;
}

.pillar-card-copy > p {
  margin-top: 1rem;
  font-size: .84rem;
  line-height: 1.7;
}

.pillar-card-copy small {
  margin-top: 1.6rem;
  padding-top: 1rem;
}

.landing-purchase {
  padding: clamp(5rem, 7vw, 8rem) 1.5rem;
}

.purchase-heading {
  padding: clamp(2rem, 3.4vw, 3.4rem);
}

.purchase-heading h2 {
  font-size: clamp(2.7rem, 4vw, 4.4rem);
  line-height: .98;
}

.purchase-price strong {
  font-size: clamp(4.4rem, 6.2vw, 6.5rem);
}

.purchase-pillar-grid article {
  min-height: 17rem;
  padding: clamp(2rem, 3vw, 3rem);
}

.purchase-pillar-grid h3 {
  font-size: clamp(1.4rem, 1.9vw, 2rem);
}

.purchase-pillar-grid ul {
  gap: .9rem;
  margin-top: 2rem;
}

.purchase-footer {
  padding: 1.5rem clamp(2rem, 3vw, 3rem);
}

.getting-started {
  padding: clamp(3.5rem, 5vw, 5rem) 0 clamp(5rem, 7vw, 7rem);
}

.install-panel,
.faq-panel {
  padding: clamp(1.8rem, 3vw, 3rem);
}

.install-panel h2,
.faq-panel h2 {
  font-size: clamp(2rem, 2.7vw, 3rem);
  line-height: 1.05;
}

.install-panel ol {
  margin-top: 2rem;
}

.install-panel li,
.faq-list summary {
  min-height: 4.4rem;
}

.faq-list {
  margin-top: 1.6rem;
}

.support-notes article {
  min-height: 9rem;
  padding: 1.7rem;
}

.support-notes h3 {
  margin-top: .85rem;
  font-size: 1.1rem;
}

.support-notes p {
  margin-top: .65rem;
}

@media (max-width: 980px) {
  .purchase-pillar-grid article {
    min-height: 15rem;
  }
}

@media (max-width: 720px) {
  .hero-automation-copy h1 {
    font-size: clamp(2.8rem, 11vw, 4rem);
  }

  .product-pillars {
    padding: 4.5rem 0;
  }

  .landing-heading h2 {
    font-size: clamp(2.35rem, 10vw, 3.5rem);
  }

  .pillar-media {
    height: 17rem;
  }

  .pillar-card-copy {
    min-height: 11rem;
  }

  .purchase-heading h2 {
    font-size: clamp(2.4rem, 10vw, 3.4rem);
  }

  .purchase-price strong {
    font-size: clamp(4rem, 18vw, 5.4rem);
  }
}

/* Local material library showcase */

.product-pillars {
  padding: clamp(6rem, 8vw, 9rem) 0 clamp(5rem, 7vw, 8rem);
}

.product-pillars .landing-heading {
  width: min(calc(100% - 3rem), 92rem);
}

.product-pillars .landing-heading h2 {
  max-width: 12ch;
  font-size: clamp(3rem, 5vw, 5.9rem);
  letter-spacing: -.058em;
}

.local-library-showcase {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 3rem), 92rem);
  display: grid;
  grid-template-columns: minmax(15rem, .32fr) minmax(0, 1fr);
  margin: clamp(3rem, 5vw, 5rem) auto 0;
  overflow: hidden;
  border: 1px solid rgb(135 218 239 / 22%);
  border-radius: 1.5rem;
  background: #050b10;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 5%),
    0 2.4rem 6rem rgb(0 12 20 / 42%);
}

.local-library-controls {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgb(135 218 239 / 13%);
  padding: clamp(1.35rem, 2.4vw, 2.25rem);
  background:
    radial-gradient(circle at 0 0, rgb(102 217 240 / 9%), transparent 42%),
    #071016;
}

.local-library-controls > header {
  display: grid;
  gap: .55rem;
}

.local-library-controls > header strong {
  color: #eef8fa;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 620;
  letter-spacing: -.035em;
}

.local-library-controls > header span,
.local-library-controls > p {
  color: #718690;
  font-size: .76rem;
  line-height: 1.7;
}

.local-library-tabs {
  display: grid;
  gap: .72rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.local-library-tab {
  position: relative;
  width: 100%;
  display: grid;
  gap: .65rem;
  overflow: hidden;
  border: 1px solid rgb(137 218 239 / 12%);
  border-radius: .95rem;
  padding: 1.15rem 1.1rem 1.2rem 1.25rem;
  color: #82949c;
  background: rgb(255 255 255 / 1.5%);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 260ms ease,
    background 260ms ease,
    color 260ms ease,
    transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.local-library-tab::before {
  position: absolute;
  inset: .8rem auto .8rem 0;
  width: 2px;
  border-radius: 2px;
  background: #83e7f8;
  content: "";
  opacity: 0;
  transform: scaleY(.35);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.local-library-tab:hover {
  border-color: rgb(137 218 239 / 24%);
  color: #b9cbd1;
  transform: translateX(.18rem);
}

.local-library-tab:active {
  transform: translateX(.18rem) scale(.985);
}

.local-library-tab:focus-visible {
  outline: 2px solid #83e7f8;
  outline-offset: 3px;
}

.local-library-tab.is-active {
  border-color: rgb(131 231 248 / 35%);
  color: #dff7fb;
  background:
    linear-gradient(90deg, rgb(72 195 220 / 13%), rgb(72 195 220 / 2%)),
    rgb(255 255 255 / 2.5%);
}

.local-library-tab.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.local-library-tab strong {
  color: inherit;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -.02em;
}

.local-library-tab span {
  color: #6f848d;
  font-size: .7rem;
  line-height: 1.65;
}

.local-library-tab.is-active span {
  color: #91aab3;
}

.local-library-controls > p {
  margin: auto 0 0;
  border-top: 1px solid rgb(137 218 239 / 11%);
  padding-top: 1.25rem;
}

.local-library-stage {
  min-width: 0;
  background:
    radial-gradient(circle at 100% 0, rgb(72 195 220 / 7%), transparent 36%),
    #03080c;
}

.local-library-stage-header,
.local-library-stage-footer {
  min-height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1.15rem, 2vw, 1.8rem);
}

.local-library-stage-header {
  border-bottom: 1px solid rgb(137 218 239 / 11%);
}

.local-library-stage-header span {
  color: #6d828b;
  font: .65rem/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .04em;
}

.local-library-stage-header strong {
  color: #bdd0d6;
  font-size: .75rem;
  font-weight: 550;
}

.local-library-video-shell {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: #02070a;
}

.local-library-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(.992);
  transition:
    opacity 440ms ease,
    transform 700ms cubic-bezier(.16, 1, .3, 1);
}

.local-library-panel.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.local-library-media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: #02070a;
}

.local-library-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.local-library-stage-footer {
  min-height: 4.5rem;
  border-top: 1px solid rgb(137 218 239 / 11%);
}

.local-library-stage-footer strong {
  color: #dbe9ed;
  font-size: .82rem;
  font-weight: 570;
}

.local-library-stage-footer span {
  max-width: 26rem;
  color: #70858e;
  font-size: .72rem;
  line-height: 1.55;
  text-align: right;
}

@media (max-width: 980px) {
  .local-library-showcase {
    grid-template-columns: 1fr;
  }

  .local-library-controls {
    border-right: 0;
    border-bottom: 1px solid rgb(135 218 239 / 13%);
  }

  .local-library-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.5rem;
  }

  .local-library-controls > p {
    margin-top: 1.25rem;
  }
}

@media (max-width: 720px) {
  .product-pillars .landing-heading,
  .local-library-showcase {
    width: calc(100% - 2rem);
  }

  .product-pillars .landing-heading h2 {
    font-size: clamp(2.65rem, 12vw, 4rem);
  }

  .local-library-showcase {
    border-radius: 1.1rem;
  }

  .local-library-controls {
    padding: 1.25rem;
  }

  .local-library-tabs {
    grid-template-columns: 1fr;
  }

  .local-library-tab {
    min-height: 5.9rem;
  }

  .local-library-stage-header {
    min-height: 3.4rem;
  }

  .local-library-video-shell {
    aspect-ratio: 4 / 3;
  }

  .local-library-media video {
    object-position: center;
  }

  .local-library-stage-footer {
    min-height: 6.5rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .local-library-stage-footer span {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .local-library-panel,
  .local-library-tab,
  .local-library-tab::before {
    transform: none;
    transition: none;
  }
}