:root {
  --refresh-ink: #10263a;
  --refresh-muted: #607287;
  --refresh-line: rgba(61, 87, 113, .14);
  --refresh-blue: #3078f2;
  --refresh-cyan: #56c7e8;
  --refresh-gold: #e7b844;
  --refresh-night: #071827;
}

body {
  color: var(--refresh-ink);
  background: #f7f9fb;
}

.capabilities > [hidden],
.workflow > [hidden] { display: none !important; }

.hero.hero-ai-stage {
  isolation: isolate;
  min-height: 920px;
  padding: 190px max(7vw, 78px) 110px;
  display: block;
  overflow: hidden;
  color: var(--refresh-ink);
  background: #f7fafc;
}

.hero-ai-stage::before,
.hero-ai-stage::after { display: none; }

.hero-ai-stage .hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 1;
  overflow: hidden;
}

.hero-ai-backdrop {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.02) 54%, rgba(255,255,255,.04) 100%),
    url("assets/hero/miaora-ai-commerce-hero.png");
  background-size: cover;
  background-position: center center;
  transform: scale(1.015);
}

.hero-ai-stage .raycast-ribbon-field { display: none; }

.hero-ai-stage .hero-copy {
  position: relative;
  z-index: 4;
  max-width: 660px;
  margin: 0;
  text-align: left;
}

.hero-ai-stage .hero-copy::after { display: none; }
.hero-ai-stage .eyebrow { justify-content: flex-start; color: #826221; }
.hero-ai-stage .eyebrow span { background: #4cc39d; box-shadow: 0 0 0 6px rgba(76,195,157,.12); }

.hero-ai-stage h1 {
  max-width: 740px;
  margin: 22px 0 0;
  color: #10263a;
  font-size: clamp(58px, 5.5vw, 88px);
  font-weight: 620;
  line-height: .98;
  letter-spacing: -.066em;
}

.hero-ai-stage h1 span { display: block; }
.hero-ai-stage h1 span:last-child { margin-top: 12px; font-size: .82em; }
.hero-ai-stage .brand-gradient {
  color: transparent;
  background: linear-gradient(100deg, #9a7220 0%, #d6a934 35%, #397fea 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-ai-stage .hero-lead { margin-top: 34px; color: #263f55; font-size: 22px; }
.hero-ai-stage .hero-lead strong { color: #b08327; }
.hero-ai-stage .hero-description { max-width: 590px; color: #5a6f83; font-size: 15px; line-height: 1.85; }
.hero-ai-stage .primary-action { color: #17283a; background: linear-gradient(135deg, #f4d87e, #e4ae30); border-color: rgba(172,124,21,.24); }
.hero-ai-stage .demo-action { color: #1b3852; background: rgba(255,255,255,.66); border-color: rgba(51,85,115,.17); backdrop-filter: blur(14px); }
.hero-ai-stage .trust-row { justify-content: flex-start; color: #566d82; }
.hero-ai-stage .trust-row i { background: #d2a837; box-shadow: 0 0 0 4px rgba(210,168,55,.12); }
.hero-ai-stage .scroll-cue { color: #687e91; }

.hero-ai-stage .hero-signal-stack {
  position: absolute;
  inset: 0;
  width: auto;
  min-height: 0;
  margin: 0;
  pointer-events: none;
}

.hero-signal {
  position: absolute;
  min-width: 190px;
  padding: 13px 16px 13px 54px;
  display: grid;
  gap: 3px;
  color: #173149;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 17px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 50px rgba(62,91,130,.13), inset 0 1px rgba(255,255,255,.95);
  backdrop-filter: blur(18px) saturate(125%);
}

.hero-signal i {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 31px;
  height: 31px;
  margin-top: -15px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  border-radius: 10px;
  background: linear-gradient(145deg, #4d91f4, #735be7);
}

.hero-signal b { font-size: 12px; }
.hero-signal small { color: #74879a; font-size: 9px; }
.signal-market { right: 8.5%; top: 31%; }
.signal-ai { right: 23%; top: 58%; }
.signal-ai i { color: #4d3710; background: linear-gradient(145deg, #ffe390, #e5af2e); }
.signal-local { right: 5%; top: 74%; }
.signal-local i { background: linear-gradient(145deg, #4acaa2, #308e82); }

.capabilities {
  padding-top: 120px;
  padding-bottom: 132px;
  color: var(--refresh-ink);
  overflow: hidden;
  background: #fff;
}

.capabilities .section-heading { align-items: end; }
.capabilities .section-heading h2 { max-width: 850px; color: #111820; font-size: clamp(42px, 4.2vw, 68px); font-weight: 500; letter-spacing: -.052em; }
.capabilities .section-heading p { max-width: 540px; color: #667181; font-size: 16px; line-height: 1.72; }

.showcase-controls {
  width: min(1500px, 100%);
  margin: 48px auto 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.showcase-controls button {
  width: 43px;
  height: 43px;
  color: #18334b;
  cursor: pointer;
  border: 1px solid var(--refresh-line);
  border-radius: 50%;
  background: #fff;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.showcase-controls button:hover { color: #fff; background: #10283c; transform: translateY(-2px); }
.showcase-controls span { min-width: 66px; color: #8793a1; font-size: 11px; text-align: center; }
.showcase-controls b { color: #1c3b56; font-size: 15px; }

.showcase-viewport {
  width: min(1500px, calc(100vw - 9vw));
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.showcase-viewport::-webkit-scrollbar { display: none; }
.showcase-rail { display: flex; gap: 20px; width: max-content; padding: 8px 1px 28px; }

.showcase-card {
  position: relative;
  flex: 0 0 330px;
  min-height: 500px;
  padding: 26px 27px 28px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
  overflow: hidden;
  color: #26384a;
  cursor: pointer;
  border: 1px solid rgba(31,64,94,.08);
  border-radius: 20px;
  outline: none;
  background: #f3f4f5;
  box-shadow: 0 15px 42px rgba(31,55,81,.055);
  transition: flex-basis .62s cubic-bezier(.2,.8,.2,1), color .5s ease, background .5s ease, border-color .5s ease;
}
.showcase-card.is-active { flex-basis: 470px; color: #fff; border-color: rgba(255,255,255,.08); background: linear-gradient(145deg, #071722 0%, #0d2e45 65%, #164257 100%); }
.showcase-card:focus-visible { box-shadow: 0 0 0 3px rgba(48,120,242,.28), 0 18px 50px rgba(31,55,81,.12); }
.showcase-number { position: relative; z-index: 2; color: #9aa5ae; font-size: 11px; letter-spacing: .16em; }
.showcase-card.is-active .showcase-number { color: #e8c66c; }

.showcase-art {
  position: relative;
  height: 235px;
  margin: 20px 0 16px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(222,231,238,.72));
}
.showcase-card.is-active .showcase-art { background: radial-gradient(circle at 50% 45%, rgba(48,134,201,.32), rgba(255,255,255,.045) 55%, rgba(255,255,255,.02)); }
.showcase-art > * { position: absolute; }
.art-agent b, .art-filter b {
  left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px;
  display: grid; place-items: center; color: #16344d; border-radius: 50%;
  background: linear-gradient(145deg, #f4d679, #dcae39); box-shadow: 0 0 0 18px rgba(231,184,68,.12), 0 20px 40px rgba(49,91,128,.18);
}
.art-agent i { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(65,134,203,.28); }
.art-agent i:first-child { left: 16%; top: 25%; }.art-agent i:nth-child(2) { right: 14%; bottom: 18%; }
.art-agent span { inset: 31% 19%; border: 1px dashed rgba(76,145,207,.35); border-radius: 50%; }
.art-category i { bottom: 35px; width: 58px; border-radius: 30px 30px 8px 8px; background: linear-gradient(#72c6ed,#387ee7); }
.art-category i:nth-child(1) { left: 17%; height: 72px; }.art-category i:nth-child(2) { left: 42%; height: 128px; }.art-category i:nth-child(3) { right: 17%; height: 96px; }
.art-category b { left: 50%; top: 28px; transform: translateX(-50%); color: #41647f; font-size: 11px; }
.art-growth i { bottom: 34px; width: 14%; border-radius: 8px 8px 3px 3px; background: linear-gradient(#73c5e9,#397be4); }
.art-growth i:nth-child(1){left:12%;height:35px}.art-growth i:nth-child(2){left:32%;height:70px}.art-growth i:nth-child(3){left:52%;height:112px}.art-growth i:nth-child(4){left:72%;height:158px;background:linear-gradient(#f5d374,#dfa82c)}
.art-growth b { right: 12%; top: 20px; color: #d49d21; font-size: 42px; }
.art-filter span { left: 9%; width: 32%; height: 52px; border-radius: 12px; background: rgba(72,132,192,.16); }
.art-filter span:first-child { top: 48px; }.art-filter span:nth-child(2) { bottom: 45px; }
.art-filter b { width: 62px; height: 62px; margin: -31px; color: #fff; background: linear-gradient(145deg,#4f97ef,#6d5ce6); }
.art-filter i { right: 10%; top: 50%; width: 30%; height: 5px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg,#5bc3e8,#e4b13b); }
.art-listing { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; padding: 48px 34px 74px; }
.art-listing i { position: static; display: grid; place-items: center; color: #416987; font-style: normal; border-radius: 12px; background: rgba(255,255,255,.85); box-shadow: 0 8px 22px rgba(48,79,105,.09); }
.art-listing b { left: 50%; bottom: 20px; transform: translateX(-50%); color: #fff; padding: 10px 35px; border-radius: 999px; background: linear-gradient(90deg,#4d94ef,#7564e8); }
.art-review i { bottom: 44px; width: 16%; border-radius: 8px 8px 2px 2px; background: linear-gradient(#64c9db,#347fe6); }
.art-review i:nth-child(1){left:16%;height:66px}.art-review i:nth-child(2){left:42%;height:108px}.art-review i:nth-child(3){left:68%;height:148px;background:linear-gradient(#f5d477,#dda62a)}
.art-review span { left: 13%; right: 13%; bottom: 42px; height: 2px; background: rgba(66,113,154,.18); }
.art-review b { right: 14%; top: 24px; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #48b991; }

.showcase-copy { position: relative; z-index: 2; margin-top: auto; }
.showcase-copy small { color: #82909c; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.showcase-card.is-active .showcase-copy small { color: #86d5c3; }
.showcase-copy h3 { margin: 8px 0 9px; font-size: 25px; font-weight: 580; letter-spacing: -.03em; }
.showcase-copy p { min-height: 58px; margin: 0; color: #6a7885; font-size: 13px; line-height: 1.65; }
.showcase-card.is-active .showcase-copy p { color: #a8bac8; }
.showcase-card > button { margin-top: 18px; padding: 0; display: flex; align-items: center; justify-content: space-between; color: #3e5f79; cursor: pointer; border: 0; background: transparent; font-size: 11px; font-weight: 700; }
.showcase-card.is-active > button { color: #f0cf75; }

.workflow {
  min-height: 1040px;
  padding: 0;
  color: var(--refresh-ink);
  background: linear-gradient(180deg,#edf2f5,#f7f9fa);
}
.data-connection-inner {
  min-height: 100vh;
  padding: 110px max(7vw, 80px);
  display: grid;
  grid-template-columns: minmax(380px,.78fr) minmax(620px,1.22fr);
  align-items: center;
  gap: 70px;
}
.data-connection-copy h2 { margin: 20px 0 28px; max-width: 600px; color: #111920; font-size: clamp(44px,4.6vw,72px); font-weight: 500; line-height: 1.05; letter-spacing: -.055em; }
.data-connection-copy p { max-width: 540px; color: #66798a; font-size: 16px; line-height: 1.8; }
.data-connection-copy ul { margin: 32px 0 0; padding: 0; display: grid; gap: 14px; list-style: none; color: #354f66; font-size: 13px; }
.data-connection-copy li { display: flex; align-items: center; gap: 12px; }
.data-connection-copy li i { width: 7px; height: 7px; border-radius: 50%; background: #e0ad36; box-shadow: 0 0 0 5px rgba(224,173,54,.12); }
.data-network { position: relative; width: min(680px, 100%); aspect-ratio: 1.36; margin: 0 auto; }
.connection-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.connection-lines path { fill: none; stroke: url(#none); stroke: rgba(74,128,181,.25); stroke-width: 1.3; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.source-node {
  position: absolute;
  left: var(--x); top: var(--y);
  min-width: 106px;
  padding: 10px 12px 10px 44px;
  color: #34516a;
  border: 1px solid rgba(66,104,139,.11);
  border-radius: 13px;
  background: rgba(255,255,255,.83);
  box-shadow: 0 12px 30px rgba(48,78,106,.08), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
}
.source-node i { position: absolute; left: 9px; top: 50%; width: 27px; height: 27px; margin-top: -14px; display: grid; place-items: center; color: #fff; font-size: 9px; font-style: normal; font-weight: 800; border-radius: 8px; background: linear-gradient(145deg,#4f98ef,#665de6); }
.source-node:nth-of-type(3n) i { color: #5c420e; background: linear-gradient(145deg,#f6d575,#dfa92b); }
.source-node:nth-of-type(4n) i { background: linear-gradient(145deg,#55c9b0,#2e9688); }
.source-node b { font-size: 10px; white-space: nowrap; }
.network-core { position: absolute; left: 50%; top: 50%; width: 156px; height: 156px; margin: -78px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: radial-gradient(circle at 43% 34%,#4f9ce8 0%,#315caa 35%,#172e5f 72%,#09182a 100%); box-shadow: 0 0 0 18px rgba(76,139,204,.09), 0 0 0 38px rgba(83,145,201,.045), 0 25px 60px rgba(28,64,105,.28); }
.network-core > i { position: absolute; inset: -22px; border: 1px dashed rgba(69,142,213,.35); border-radius: 50%; }
.network-core b { font-size: 36px; color: #f2ce73; }.network-core strong { margin-top: 5px; font-size: 14px; }.network-core small { margin-top: 3px; color: #a7c0d8; font-size: 8px; letter-spacing: .08em; }
.network-output { position: absolute; z-index: 4; padding: 8px 13px; color: #725413; font-size: 9px; font-weight: 800; border: 1px solid rgba(210,163,49,.2); border-radius: 999px; background: rgba(255,244,205,.9); box-shadow: 0 8px 22px rgba(126,93,20,.1); }
.output-selection { left: 35%; top: 69%; }.output-profit { left: 52%; top: 73%; }.output-listing { left: 68%; top: 65%; }

.tutorial { padding-top: 120px; padding-bottom: 140px; background: #fff; }
.tutorial-card { width: min(1180px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 46px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.tutorial-copy { order: -1; max-width: 900px; margin: 0 auto; text-align: center; }
.tutorial-copy h2 { margin: 18px 0 20px; color: #111; font-size: clamp(45px,4.7vw,72px); font-weight: 480; line-height: 1.06; letter-spacing: -.055em; }
.tutorial-copy p { max-width: 700px; margin: 0 auto; color: #697483; font-size: 16px; line-height: 1.72; }
.tutorial-button { margin: 27px auto 0; }
.tutorial-copy > small { display: block; margin-top: 14px; }
.video-stage { width: 100%; min-height: 0; aspect-ratio: 16/9; overflow: hidden; border-radius: 25px; background: #07141f; box-shadow: 0 38px 95px rgba(19,42,62,.2); }
.video-player { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #07141f; }
.video-grid { pointer-events: none; }
.video-play { z-index: 5; }
.video-stage.is-playing .video-play,
.video-stage.is-playing .video-label,
.video-stage.is-playing .video-grid { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 1100px) {
  .hero.hero-ai-stage { min-height: 860px; padding-inline: 54px; }
  .hero-ai-backdrop { background-position: 45% center; }
  .signal-market { right: 4%; }.signal-ai { right: 10%; }.signal-local { display: none; }
  .data-connection-inner { grid-template-columns: 1fr; gap: 55px; padding-inline: 54px; }
  .data-connection-copy { text-align: center; }
  .data-connection-copy p { margin-inline: auto; }.data-connection-copy ul { width: max-content; margin-inline: auto; text-align: left; }
}

@media (max-width: 760px) {
  .hero.hero-ai-stage { min-height: 780px; padding: 128px 20px 72px; }
  .hero-ai-backdrop { opacity: .63; background-size: auto 100%; background-position: 62% center; }
  .hero-ai-stage::after { content: ""; display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 58%,rgba(255,255,255,.28)); }
  .hero-ai-stage h1 { font-size: clamp(45px,13vw,61px); }
  .hero-ai-stage h1 span:last-child { font-size: .84em; }
  .hero-ai-stage .hero-description { max-width: 95%; }
  .hero-ai-stage .hero-signal-stack { display: none; }
  .capabilities { padding: 82px 20px 90px; }
  .capabilities .section-heading { display: block; }
  .capabilities .section-heading h2 { font-size: 42px; }
  .showcase-controls { margin-top: 30px; }
  .showcase-viewport { width: calc(100vw - 40px); }
  .showcase-card, .showcase-card.is-active { flex-basis: calc(100vw - 48px); min-height: 480px; }
  .showcase-art { height: 215px; }
  .workflow { min-height: auto; }
  .data-connection-inner { min-height: auto; padding: 86px 20px; }
  .data-connection-copy h2 { font-size: 43px; }
  .data-network { transform: scale(.88); transform-origin: center center; margin-block: -25px; }
  .source-node { min-width: 82px; padding-left: 36px; }
  .source-node i { left: 7px; width: 23px; height: 23px; margin-top: -12px; }
  .source-node b { font-size: 8px; }
  .network-core { width: 126px; height: 126px; margin: -63px; }
  .network-output { display: none; }
  .tutorial { padding: 85px 20px 96px; }
  .tutorial-card { gap: 30px; }
  .tutorial-copy h2 { font-size: 42px; }
  .video-stage { border-radius: 16px; }
  .video-play { width: 58px; height: 58px; margin: -29px; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card { transition: none; }
  .showcase-viewport { scroll-behavior: auto; }
}

/* Orbital homepage theme: image-led hero with a continuous deep-blue product canvas. */
:root {
  --refresh-ink: #f7faff;
  --refresh-muted: #9fb2cf;
  --refresh-line: rgba(154, 190, 239, .16);
  --refresh-blue: #4b8eff;
  --refresh-cyan: #77caff;
  --refresh-gold: #f0c47b;
  --refresh-night: #050d20;
}

html { background: #050d20; }
body {
  color: var(--refresh-ink);
  background:
    radial-gradient(circle at 15% 16%, rgba(54, 132, 241, .14), transparent 30%),
    linear-gradient(180deg, #050d20 0%, #07142c 58%, #050d20 100%);
}
.ambient { display: none; }

.site-header {
  inset: 0 0 auto;
  width: 100%;
  max-width: none;
  height: 82px;
  padding: 0 max(4vw, 56px);
  grid-template-columns: 250px 1fr 390px;
  border: 0;
  border-bottom: 1px solid rgba(160, 195, 239, .11);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(4, 11, 29, .92), rgba(5, 14, 34, .56));
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(120%);
}
.brand-copy strong { color: #fff; }
.brand-copy small { color: #8296b4; }
.brand-mark { filter: drop-shadow(0 0 18px rgba(84, 147, 255, .32)); }
.brand-mark > * { background: linear-gradient(145deg, #8fc7ff, #4f7fff); }
.site-header nav { gap: 18px; }
.site-header nav a { padding-inline: 10px; color: #8da0bd; }
.site-header nav a:hover { color: #fff; background: transparent; }
.site-header nav a.active { color: #fff; }
.site-header nav a.active::after {
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #7bc8ff, #5e7dff);
  box-shadow: 0 0 14px rgba(91, 145, 255, .65);
}
.site-header .preview-state {
  border-color: rgba(158, 190, 239, .14);
  color: #eaf2ff;
  background: rgba(137, 174, 226, .07);
}
.site-header .preview-state > span:not(.state-dot) { color: #eaf2ff; }
.site-header .preview-state small { color: #8095b4; }
.site-header .header-cta {
  color: #fff;
  border-color: rgba(150, 196, 255, .38);
  background: linear-gradient(135deg, #5da8ff, #315bea);
  box-shadow: 0 12px 35px rgba(39, 95, 224, .3), inset 0 1px rgba(255,255,255,.3);
}

.hero.hero-ai-stage {
  min-height: 100svh;
  padding: 450px 24px 88px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #fff;
  background: #050d20;
}
.hero-ai-stage .hero-atmosphere { opacity: 1; }
.hero-ai-backdrop {
  background-image:
    linear-gradient(180deg, rgba(2, 8, 24, .05) 0%, rgba(2, 8, 24, .02) 42%, rgba(2, 8, 24, .34) 78%, rgba(2, 8, 24, .82) 100%),
    url("assets/hero/miaora-orbital-hero-v2.png");
  background-size: cover;
  background-position: center center;
  transform: scale(1.006);
}
.hero-ai-stage .hero-copy {
  width: min(920px, 100%);
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.hero-ai-stage .eyebrow {
  justify-content: center;
  margin-bottom: 17px;
  color: #a9c7ee;
  text-shadow: 0 0 24px rgba(98, 159, 255, .32);
}
.hero-ai-stage .eyebrow span {
  width: 5px;
  height: 5px;
  background: #8ed6ff;
  box-shadow: 0 0 0 5px rgba(110, 193, 255, .12), 0 0 16px rgba(98, 180, 255, .7);
}
.hero-ai-stage h1 {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 5.2vw, 78px);
  font-weight: 540;
  line-height: 1.03;
  letter-spacing: -.055em;
  text-shadow: 0 12px 42px rgba(0, 6, 24, .46);
}
.hero-ai-stage h1 span:last-child { margin-top: 8px; font-size: .72em; }
.hero-ai-stage .brand-gradient {
  width: auto;
  padding: 0;
  color: transparent;
  background: linear-gradient(90deg, #fff 0%, #c9dcff 46%, #7cadff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}
.hero-ai-stage .hero-lead {
  margin: 24px auto 10px;
  color: #d5e2f5;
  font-size: 18px;
}
.hero-ai-stage .hero-lead strong { color: #8bc8ff; }
.hero-ai-stage .hero-description {
  max-width: 690px;
  margin: 0 auto;
  color: #98abc7;
  font-size: 14px;
  line-height: 1.75;
}
.hero-ai-stage .hero-actions { justify-content: center; margin-top: 27px; }
.hero-ai-stage .primary-action {
  color: #fff;
  border: 1px solid rgba(149, 202, 255, .38);
  background: linear-gradient(135deg, #63b4ff, #315ce9 76%);
  box-shadow: 0 18px 42px rgba(32, 86, 222, .34), inset 0 1px rgba(255,255,255,.35);
}
.hero-ai-stage .demo-action {
  color: #e7f1ff;
  border-color: rgba(160, 194, 238, .22);
  background: rgba(112, 151, 207, .09);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}
.hero-ai-stage .play-dot { color: #9ad7ff; background: rgba(111, 182, 255, .12); box-shadow: 0 0 0 5px rgba(73, 134, 221, .06); }
.hero-ai-stage .trust-row { justify-content: center; margin-top: 22px; color: #8296b4; }
.hero-ai-stage .trust-row i { background: #7cc9ff; box-shadow: 0 0 0 4px rgba(92,174,255,.1); }
.hero-ai-stage .scroll-cue { color: #7287a7; }
.hero-ai-stage .hero-signal-stack { display: none; }

.section-kicker { color: #79baff; }
.capabilities {
  color: #eef5ff;
  border-top: 1px solid rgba(139, 180, 233, .12);
  background:
    radial-gradient(circle at 80% 8%, rgba(53, 121, 232, .17), transparent 31%),
    linear-gradient(180deg, #07142d 0%, #081a38 100%);
}
.capabilities .section-heading h2 { color: #f7faff; }
.capabilities .section-heading p { color: #9babc4; }
.showcase-controls button {
  color: #c9dcf8;
  border-color: rgba(139, 180, 233, .16);
  background: rgba(113, 151, 205, .08);
}
.showcase-controls button:hover { background: #2e62d9; }
.showcase-controls span { color: #7186a7; }
.showcase-controls b { color: #a8cfff; }
.showcase-card {
  color: #e7f0ff;
  border-color: rgba(141, 178, 225, .13);
  background: linear-gradient(155deg, rgba(18, 40, 77, .9), rgba(10, 25, 54, .94));
  box-shadow: 0 22px 60px rgba(0, 6, 20, .22), inset 0 1px rgba(255,255,255,.035);
}
.showcase-card.is-active {
  border-color: rgba(128, 181, 255, .24);
  background:
    radial-gradient(circle at 70% 14%, rgba(88, 151, 255, .32), transparent 35%),
    linear-gradient(145deg, #10285c, #173d87 64%, #1c4fa7);
  box-shadow: 0 28px 72px rgba(3, 20, 57, .4), inset 0 1px rgba(255,255,255,.08);
}
.showcase-art { background: linear-gradient(150deg, rgba(127, 174, 239, .12), rgba(41, 76, 126, .12)); }
.showcase-copy small, .showcase-copy p { color: #92a8c6; }
.showcase-card.is-active .showcase-copy small { color: #9bdcff; }
.showcase-card.is-active .showcase-copy p { color: #c0d4ef; }
.showcase-card > button { color: #8eb9ef; }
.showcase-card.is-active > button { color: #fff; }

.workflow {
  color: #edf5ff;
  border-top: 1px solid rgba(139, 180, 233, .09);
  background:
    radial-gradient(circle at 70% 50%, rgba(50, 114, 221, .15), transparent 35%),
    linear-gradient(180deg, #081a38 0%, #06132b 100%);
}
.data-connection-copy h2 { color: #f7faff; }
.data-connection-copy p { color: #9bacc6; }
.data-connection-copy ul { color: #c2d0e5; }
.data-connection-copy li i { background: #75c5ff; box-shadow: 0 0 0 5px rgba(93,176,255,.1); }
.connection-lines path { stroke: rgba(104, 166, 255, .28); }
.source-node {
  color: #c7d8ef;
  border-color: rgba(137, 178, 232, .15);
  background: rgba(18, 39, 77, .82);
  box-shadow: 0 15px 38px rgba(0, 8, 26, .25), inset 0 1px rgba(255,255,255,.04);
}
.network-core {
  background: radial-gradient(circle at 42% 32%, #64b6ff 0%, #315fbe 35%, #142f68 70%, #07142c 100%);
  box-shadow: 0 0 0 18px rgba(76,139,204,.1), 0 0 0 38px rgba(83,145,201,.05), 0 25px 70px rgba(0,20,64,.5);
}
.network-core b { color: #ddebff; }
.network-output { color: #dcebff; border-color: rgba(132, 184, 255, .22); background: rgba(37, 82, 156, .88); }

.tutorial {
  color: #eef5ff;
  border-top: 1px solid rgba(139, 180, 233, .09);
  background:
    radial-gradient(circle at 50% 68%, rgba(45, 101, 206, .17), transparent 34%),
    #06132b;
}
.tutorial-copy h2 { color: #f7faff; }
.tutorial-copy p, .tutorial-copy > small { color: #91a4c0; }
.tutorial-button {
  color: #fff;
  border-color: rgba(144, 196, 255, .32);
  background: linear-gradient(135deg, #5cacff, #315ce9);
  box-shadow: 0 14px 36px rgba(35, 83, 202, .28);
}
.video-stage {
  border: 1px solid rgba(150, 191, 242, .14);
  background: #030a18;
  box-shadow: 0 42px 110px rgba(0, 4, 16, .5), 0 0 0 1px rgba(255,255,255,.02);
}

footer {
  width: min(1420px, calc(100% - 48px));
  color: #778eaf;
  border-top-color: rgba(139, 180, 233, .12);
}
.footer-brand { color: #edf5ff; }
footer a { color: #8dbfff; }

@media (max-width: 1100px) {
  .site-header { padding-inline: 28px; grid-template-columns: 210px 1fr auto; }
  .site-header .preview-state { display: none; }
  .hero.hero-ai-stage { min-height: 900px; padding-top: 420px; }
  .hero-ai-backdrop { background-position: 54% center; }
}

@media (max-width: 760px) {
  .site-header {
    inset: 0 0 auto;
    height: 68px;
    padding: 0 17px;
    grid-template-columns: 1fr auto;
  }
  .site-header nav, .site-header .preview-state { display: none; }
  .site-header .header-cta { height: 40px; padding-inline: 14px; }
  .brand-copy small { display: none; }
  .hero.hero-ai-stage {
    min-height: 790px;
    padding: 330px 20px 72px;
    align-items: flex-end;
  }
  .hero-ai-backdrop {
    opacity: 1;
    background-size: auto 100%;
    background-position: 43% center;
  }
  .hero-ai-stage::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(3,10,26,.02) 0%, rgba(3,10,26,.08) 35%, rgba(3,10,26,.72) 66%, rgba(3,10,26,.96) 100%);
  }
  .hero-ai-stage .eyebrow { font-size: 8px; letter-spacing: .14em; }
  .hero-ai-stage h1 { font-size: clamp(41px, 12vw, 58px); }
  .hero-ai-stage h1 span:last-child { font-size: .78em; }
  .hero-ai-stage .hero-lead { font-size: 16px; }
  .hero-ai-stage .hero-description { max-width: 100%; font-size: 12px; }
  .hero-ai-stage .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-ai-stage .primary-action, .hero-ai-stage .demo-action { width: 100%; }
  .hero-ai-stage .trust-row { gap: 14px; flex-wrap: wrap; }
  .capabilities, .workflow, .tutorial { width: 100%; margin: 0; }
}

/* Restrained spectral accents sampled from the orbital reference artwork. */
:root {
  --refresh-peach: #f1b9aa;
  --refresh-lilac: #9b91ff;
  --refresh-electric: #3b79ff;
}

.site-header nav a.active::after {
  background: linear-gradient(90deg, var(--refresh-peach), var(--refresh-lilac) 45%, #63b8ff);
  box-shadow: 0 0 16px rgba(133, 134, 255, .54);
}
.site-header .header-cta,
.hero-ai-stage .primary-action,
.tutorial-button {
  border-color: rgba(228, 197, 229, .4);
  background: linear-gradient(112deg, #efc1ad 0%, #a38df2 32%, #546ff1 62%, #247cff 100%);
  box-shadow: 0 15px 40px rgba(57, 86, 225, .3), 0 8px 28px rgba(236, 166, 154, .1), inset 0 1px rgba(255,255,255,.4);
}
.site-header .header-cta:hover,
.hero-ai-stage .primary-action:hover,
.tutorial-button:hover { filter: brightness(1.08) saturate(1.06); }

.hero-ai-stage .brand-gradient {
  background: linear-gradient(96deg, #f6d5c7 0%, #d1c3ff 42%, #76b7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-ai-stage .hero-lead strong { color: #b9a9ff; }
.hero-ai-stage .eyebrow span,
.hero-ai-stage .trust-row i {
  background: linear-gradient(145deg, #f0b7a7, #867eff 56%, #68c8ff);
}
.hero-ai-stage .demo-action {
  border-color: rgba(184, 167, 239, .2);
  background: linear-gradient(115deg, rgba(236, 184, 169, .08), rgba(116, 118, 230, .1), rgba(64, 131, 238, .08));
}

.section-kicker { color: #b8a9ff; }
.capabilities {
  background:
    radial-gradient(circle at 13% 8%, rgba(235, 172, 159, .09), transparent 27%),
    radial-gradient(circle at 80% 8%, rgba(82, 119, 239, .19), transparent 31%),
    linear-gradient(180deg, #07142d 0%, #081a38 100%);
}
.showcase-card.is-active {
  border-color: rgba(183, 163, 244, .27);
  background:
    radial-gradient(circle at 16% 7%, rgba(237, 176, 161, .18), transparent 31%),
    radial-gradient(circle at 75% 13%, rgba(91, 139, 255, .34), transparent 38%),
    linear-gradient(145deg, #17275a, #263f91 62%, #1755a8);
}
.showcase-card.is-active .showcase-number,
.showcase-card.is-active > button { color: #f4c8bb; }
.showcase-card.is-active .showcase-copy small { color: #c3b7ff; }
.art-agent b,
.art-filter b {
  background: linear-gradient(145deg, #f0c1ae, #a98cf2 46%, #4e85f4);
  box-shadow: 0 0 0 18px rgba(165, 139, 240, .12), 0 20px 42px rgba(26, 68, 148, .25);
}
.art-growth i:nth-child(4),
.art-review i:nth-child(3) { background: linear-gradient(#efb8a8, #9b84eb 62%, #4f82ef); }

.workflow {
  background:
    radial-gradient(circle at 20% 78%, rgba(234, 170, 157, .075), transparent 28%),
    radial-gradient(circle at 72% 48%, rgba(76, 112, 229, .17), transparent 36%),
    linear-gradient(180deg, #081a38 0%, #06132b 100%);
}
.data-connection-copy li i,
.source-node:nth-of-type(3n) i {
  background: linear-gradient(145deg, #edbaa9, #9e87ed 54%, #4e86f4);
  box-shadow: 0 0 0 5px rgba(165, 139, 240, .1);
}
.network-core {
  background: radial-gradient(circle at 40% 30%, #e8b9aa 0%, #9a8cec 16%, #4f77d3 42%, #1b397b 71%, #07142c 100%);
}
.network-output {
  border-color: rgba(188, 165, 242, .24);
  background: linear-gradient(110deg, rgba(146, 113, 211, .9), rgba(48, 100, 199, .9));
}

.tutorial {
  background:
    radial-gradient(circle at 18% 72%, rgba(236, 174, 158, .08), transparent 28%),
    radial-gradient(circle at 56% 65%, rgba(68, 103, 221, .18), transparent 35%),
    #06132b;
}

/* Let navigation and account entry share the orbital hero's visual language. */
.site-header {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -46px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 9, 25, .28) 0%, rgba(3, 9, 25, .09) 48%, transparent 100%);
}
.brand-copy strong,
.site-header nav a,
.site-header .preview-state,
.site-header .header-cta {
  text-shadow: 0 2px 18px rgba(0, 6, 24, .45);
}
.site-header .preview-state {
  border-color: rgba(190, 203, 241, .13);
  background: linear-gradient(115deg, rgba(237, 187, 173, .055), rgba(111, 113, 226, .07), rgba(54, 119, 232, .055));
  box-shadow: inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(10px);
}

.modal-backdrop {
  background:
    radial-gradient(circle at 31% 18%, rgba(239, 184, 168, .14), transparent 30%),
    radial-gradient(circle at 72% 76%, rgba(59, 121, 255, .22), transparent 38%),
    rgba(2, 7, 20, .74);
  backdrop-filter: blur(20px) saturate(125%);
}
.login-modal {
  overflow: hidden;
  color: #f5f8ff;
  border-color: rgba(181, 174, 239, .24);
  background:
    radial-gradient(circle at 12% 0%, rgba(240, 186, 170, .12), transparent 34%),
    radial-gradient(circle at 94% 92%, rgba(58, 121, 255, .18), transparent 38%),
    linear-gradient(145deg, rgba(17, 34, 70, .97), rgba(5, 15, 37, .98));
  box-shadow:
    0 44px 120px rgba(0, 4, 18, .58),
    0 20px 60px rgba(39, 78, 194, .2),
    inset 0 1px rgba(255,255,255,.08);
}
.login-modal::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--refresh-peach), var(--refresh-lilac), var(--refresh-electric), transparent);
  box-shadow: 0 0 22px rgba(137, 131, 255, .38);
}
.login-modal > *:not(.modal-close) { position: relative; z-index: 1; }
.modal-close {
  position: absolute;
  z-index: 3;
  color: #c8d5ec;
  border-color: rgba(181, 174, 239, .2);
  background: rgba(122, 147, 198, .08);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.modal-close:hover {
  color: #fff;
  border-color: rgba(240, 188, 173, .42);
  background: linear-gradient(135deg, rgba(239, 185, 169, .22), rgba(103, 100, 223, .24));
  transform: rotate(4deg);
}
.login-badge {
  color: #fff;
  background: linear-gradient(145deg, #efc1ad 0%, #9f8df2 48%, #3b79ff 100%);
  box-shadow: 0 16px 35px rgba(64, 86, 214, .31), inset 0 1px rgba(255,255,255,.45);
}
.login-modal .section-kicker { color: #c5baff; }
.login-modal h2 { color: #f7f9ff; }
.login-modal > p { color: #9dadc7; }
.login-modal > p strong { color: #d0c5ff; }
.login-modal label { color: #c3d0e3; }
.login-modal input {
  color: #f7faff;
  border-color: rgba(161, 176, 224, .18);
  background: rgba(6, 17, 42, .68);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.login-modal input::placeholder { color: #667a9b; }
.login-modal input:focus {
  border-color: rgba(165, 145, 244, .56);
  background: rgba(9, 22, 54, .86);
  box-shadow: 0 0 0 4px rgba(113, 104, 230, .11), 0 0 26px rgba(67, 121, 244, .1);
}
.login-modal .modal-login {
  color: #fff;
  border-color: rgba(228, 197, 229, .4);
  background: linear-gradient(112deg, #efc1ad 0%, #a38df2 32%, #546ff1 62%, #247cff 100%);
  box-shadow: 0 16px 38px rgba(57, 86, 225, .3), inset 0 1px rgba(255,255,255,.38);
}
.login-modal > small { color: #7183a2; }

@media (max-width: 760px) {
  .site-header::before { bottom: -28px; }
  .login-modal { padding: 32px 24px 26px; border-radius: 22px; }
}

/* Keep the section divider while the hero retains its original Agent execution window. */
.hero.hero-ai-stage { border-bottom: 0; }
.capabilities {
  position: relative;
  border-top: 1px solid rgba(174, 197, 235, .18);
  box-shadow: none;
  background:
    radial-gradient(circle at 14% 6%, rgba(238, 181, 165, .075), transparent 28%),
    radial-gradient(circle at 78% 9%, rgba(74, 112, 230, .16), transparent 34%),
    linear-gradient(180deg, #050d20 0%, #07142d 16%, #081a38 100%);
}
.capabilities::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(240, 190, 174, .5) 24%, rgba(164, 145, 244, .7) 52%, rgba(66, 129, 255, .58) 76%, transparent);
  box-shadow: 0 0 18px rgba(118, 126, 242, .22);
}

.hero.hero-ai-stage {
  min-height: 1360px;
  padding: 180px 24px 110px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-ai-backdrop {
  background-color: #050d20;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.hero-ai-backdrop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(420px, 34vw, 620px);
  height: clamp(360px, 30vw, 560px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 13, 32, 0), rgba(5, 13, 32, .72) 42%, #050d20 72%);
}
.hero-ai-stage .agent-workflow-demo {
  position: relative;
  z-index: 3;
  width: min(1080px, 90vw);
  min-height: 0;
  margin: 38px auto 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  transform-origin: center top;
}
.hero-ai-stage .agent-workflow-demo::before {
  content: "";
  position: absolute;
  width: 110%;
  height: 86%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse, rgba(94, 103, 231, .17), rgba(52, 108, 185, .08) 48%, transparent 74%);
  filter: blur(24px);
}
.hero-ai-stage .agent-demo {
  width: 100%;
  color: #e9f1ff;
  border-color: rgba(184, 174, 239, .22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 0%, rgba(239, 185, 169, .09), transparent 30%),
    radial-gradient(circle at 92% 100%, rgba(59, 121, 255, .13), transparent 34%),
    linear-gradient(145deg, rgba(16, 33, 70, .76), rgba(5, 17, 39, .68));
  box-shadow:
    0 54px 140px rgba(0, 6, 24, .52),
    0 0 0 1px rgba(128, 158, 225, .04),
    inset 0 1px rgba(255,255,255,.1);
  backdrop-filter: blur(28px) saturate(128%);
}
.hero-ai-stage .agent-demo::before {
  background: linear-gradient(90deg, transparent, var(--refresh-peach) 24%, var(--refresh-lilac) 52%, var(--refresh-electric) 78%, transparent);
  box-shadow: 0 0 18px rgba(134, 128, 244, .3);
}
.hero-ai-stage .agent-demo-bar {
  border-bottom-color: rgba(183, 196, 232, .11);
  background: rgba(255,255,255,.045);
}
.hero-ai-stage .agent-avatar,
.hero-ai-stage .process-agent {
  color: #fff;
  border-color: rgba(228, 197, 229, .32);
  background: linear-gradient(145deg, #efc1ad, #9e8cf2 52%, #3b79ff);
  box-shadow: 0 10px 24px rgba(70, 80, 200, .2), inset 0 1px rgba(255,255,255,.38);
}
.hero-ai-stage .agent-identity strong,
.hero-ai-stage .process-heading strong,
.hero-ai-stage .result-copy h3 { color: #f3f6ff; }
.hero-ai-stage .agent-identity small,
.hero-ai-stage .process-heading small,
.hero-ai-stage .process-time,
.hero-ai-stage .result-copy > span,
.hero-ai-stage .result-copy p { color: #8fa2c0; }
.hero-ai-stage .agent-live {
  color: #9bd8c1;
  border-color: rgba(91, 198, 157, .17);
  background: rgba(69, 166, 127, .08);
}
.hero-ai-stage .agent-demo-body {
  background: linear-gradient(180deg, rgba(3, 12, 29, .2), rgba(4, 15, 34, .4));
}
.hero-ai-stage .user-avatar {
  color: #c2cdea;
  border-color: rgba(176, 190, 229, .14);
  background: rgba(255,255,255,.07);
}
.hero-ai-stage .user-request p {
  color: #f7f9ff;
  border: 1px solid rgba(159, 171, 226, .15);
  background: linear-gradient(145deg, rgba(74, 93, 151, .78), rgba(31, 59, 111, .72));
}
.hero-ai-stage .agent-process,
.hero-ai-stage .agent-result {
  border-color: rgba(171, 187, 229, .13);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 16px 36px rgba(0, 7, 24, .14);
}
.hero-ai-stage .agent-result {
  border-color: rgba(203, 174, 230, .18);
  background: linear-gradient(145deg, rgba(238, 184, 169, .07), rgba(91, 105, 224, .07), rgba(255,255,255,.035));
}
.hero-ai-stage .process-track { background: rgba(190, 204, 238, .11); }
.hero-ai-stage .process-track span {
  background: linear-gradient(90deg, var(--refresh-peach), var(--refresh-lilac) 48%, var(--refresh-electric));
}
.hero-ai-stage .process-step { color: #8293b0; }
.hero-ai-stage .process-step > i {
  color: #99a9c3;
  border-color: rgba(168, 183, 225, .11);
  background: rgba(255,255,255,.045);
}
.hero-ai-stage .process-step b { background: rgba(255,255,255,.065); }
.hero-ai-stage .process-step.is-active {
  color: #d0d8ff;
  background: rgba(102, 103, 221, .12);
}
.hero-ai-stage .process-step.is-complete { color: #abd7c7; }
.hero-ai-stage .process-step.is-complete > i {
  color: #9ed7c1;
  border-color: rgba(91, 190, 153, .16);
  background: rgba(65, 157, 123, .1);
}
.hero-ai-stage .process-step.is-complete b {
  color: #fff;
  background: #55aa88;
}
.hero-ai-stage .result-topline,
.hero-ai-stage .result-metrics strong { color: #d7c7ff; }
.hero-ai-stage .result-topline small,
.hero-ai-stage .result-metrics small { color: #8192af; }
.hero-ai-stage .result-metrics,
.hero-ai-stage .result-metrics > span { border-color: rgba(170, 185, 226, .09); }
.hero-ai-stage .result-action {
  color: #fff;
  background: linear-gradient(112deg, #efc1ad 0%, #9f8df2 38%, #397cff 100%);
}
.hero-ai-stage .agent-demo-footer {
  color: #8294b2;
  border-top-color: rgba(176, 190, 229, .1);
  background: rgba(255,255,255,.03);
}
.hero-ai-stage .proof-float {
  color: #e4e9ff;
  border-color: rgba(181, 174, 239, .18);
  background: rgba(12, 27, 61, .76);
  box-shadow: 0 18px 48px rgba(0, 6, 22, .32), inset 0 1px rgba(255,255,255,.07);
}
.hero-ai-stage .proof-profit span,
.hero-ai-stage .proof-ready small { color: #8999b5; }
.hero-ai-stage .proof-profit strong { color: #83d5b5; }
.hero-ai-stage .proof-ready strong { color: #f2f5ff; }
.hero-ai-stage .proof-ready > i {
  background: linear-gradient(145deg, #efc1ad, #9688ef 55%, #477eff);
}

@media (max-width: 1100px) {
  .hero.hero-ai-stage { min-height: 1370px; padding: 220px 28px 96px; }
  .hero-ai-stage .agent-workflow-demo { width: min(920px, 92vw); }
}

@media (max-width: 760px) {
  .hero.hero-ai-stage {
    min-height: 1370px;
    padding: 310px 20px 76px;
    align-items: center;
  }
  .hero-ai-stage .agent-workflow-demo {
    width: 100%;
    margin-top: 38px;
  }
  .hero-ai-backdrop::after {
    top: 360px;
    height: 280px;
  }
  .hero-ai-stage .agent-demo { border-radius: 20px; }
  .hero-ai-stage .agent-result { display: none; }
  .hero-ai-stage .agent-demo-footer { flex-wrap: wrap; padding-block: 11px; }
}

/* 2026-08-29 · learning story, depth gallery and scroll-reactive mood */
:root {
  --mood-bg: #050d20;
  --mood-a: #2d6cff;
  --mood-b: #a78cf4;
  --mood-c: #efaa93;
  --story-ink: #17243a;
  --story-muted: #66758c;
  --story-line: rgba(77, 98, 139, .16);
}

html { background: var(--mood-bg); }
body {
  color: var(--story-ink);
  background: transparent;
  isolation: isolate;
}
main,
footer { position: relative; z-index: 1; }
.ambient { display: none; }
.page-mood {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--mood-bg);
  transition: background-color .25s linear;
}
.page-mood::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255,255,255,.11), transparent 34%),
    radial-gradient(circle at 50% 110%, rgba(255,255,255,.12), transparent 48%);
}
.mood-blob {
  position: absolute;
  display: block;
  width: min(78vw, 1180px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .43;
  filter: blur(88px) saturate(118%);
  mix-blend-mode: screen;
  will-change: transform;
}
.mood-blob-a { left: -31vw; top: -25vw; background: var(--mood-a); animation: moodDriftA 18s ease-in-out infinite alternate; }
.mood-blob-b { right: -35vw; top: 6vh; background: var(--mood-b); animation: moodDriftB 23s ease-in-out infinite alternate; }
.mood-blob-c { left: 27vw; bottom: -52vw; background: var(--mood-c); opacity: .32; animation: moodDriftC 20s ease-in-out infinite alternate; }
.mood-grain {
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image:
    radial-gradient(circle at 25% 32%, rgba(255,255,255,.42) 0 .6px, transparent .9px),
    radial-gradient(circle at 70% 65%, rgba(15,29,56,.28) 0 .55px, transparent .85px);
  background-size: 7px 7px, 9px 9px;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
@keyframes moodDriftA { to { transform: translate3d(12vw, 10vh, 0) scale(1.08); } }
@keyframes moodDriftB { to { transform: translate3d(-10vw, 13vh, 0) scale(.92); } }
@keyframes moodDriftC { to { transform: translate3d(5vw, -14vh, 0) scale(1.12); } }

.capabilities.capability-story,
.workflow.decision-depth,
.tutorial {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}
.capabilities.capability-story::before,
.workflow.decision-depth::before { display: none; }

.capability-story {
  position: relative;
  min-height: 100svh;
  overflow: clip;
}
.capability-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(244,247,255,.62), rgba(238,242,252,.30)),
    radial-gradient(circle at 74% 26%, rgba(95,116,246,.16), transparent 31%),
    radial-gradient(circle at 16% 72%, rgba(244,151,127,.15), transparent 30%);
}
.capability-stage {
  position: relative;
  height: 100svh;
  min-height: 760px;
  padding: 108px 0 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  perspective: 1500px;
}
.capability-story-heading {
  width: min(1320px, calc(100% - 96px));
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(330px, 470px);
  gap: 60px;
  align-items: end;
}
.capability-story-heading .section-kicker { color: #6154c8; }
.capability-story-heading h2 {
  max-width: 900px;
  margin: 12px 0 0;
  color: #17233a;
  font-size: clamp(42px, 3.9vw, 60px);
  font-weight: 520;
  line-height: .99;
  letter-spacing: -.06em;
}
.capability-story-heading > p {
  margin: 0 0 5px;
  color: #5e6e86;
  font-size: 14px;
  line-height: 1.72;
}
.capability-progress {
  width: min(1320px, calc(100% - 96px));
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #738099;
}
.capability-progress > span { min-width: 61px; font-size: 10px; letter-spacing: .12em; }
.capability-progress > span b { color: #3f4b63; font-size: 14px; }
.capability-progress > i {
  width: 24px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(54,70,104,.15);
  transition: width .35s ease, background .35s ease;
}
.capability-progress > i.is-active { width: 58px; background: linear-gradient(90deg,#7567eb,#ed9278); }
.capability-progress > small { margin-left: auto; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.capability-viewport {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  touch-action: pan-y;
}
.capability-track {
  position: absolute;
  inset: 0 auto 0 0;
  width: max-content;
  padding: 5px 8vw 22px;
  display: flex;
  align-items: stretch;
  gap: 4vw;
  will-change: transform;
}
.capability-chapter {
  position: relative;
  width: min(1180px, 84vw);
  min-width: min(1180px, 84vw);
  min-height: 470px;
  padding: clamp(30px, 3.1vw, 48px);
  display: grid;
  grid-template-columns: minmax(290px, .62fr) minmax(570px, 1.38fr);
  gap: clamp(30px, 4.3vw, 68px);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(120,136,176,.22);
  border-radius: 34px;
  background:
    radial-gradient(circle at 94% 2%, color-mix(in srgb, var(--chapter-a, #7e6ef2) 15%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(245,247,253,.63));
  box-shadow: 0 34px 90px rgba(45,55,91,.14), inset 0 1px rgba(255,255,255,.92);
  backdrop-filter: blur(30px) saturate(120%);
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform, opacity;
}
.capability-chapter::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}
.chapter-copy { position: relative; z-index: 3; }
.chapter-index { color: #6758d0; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.chapter-copy h3 {
  margin: 17px 0 18px;
  color: #19253a;
  font-size: clamp(31px, 2.65vw, 45px);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -.052em;
}
.chapter-copy > p { margin: 0; color: #65738a; font-size: 14px; line-height: 1.75; }
.chapter-copy ul { margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chapter-copy li { padding: 7px 10px; color: #506078; border: 1px solid rgba(89,106,145,.17); border-radius: 999px; background: rgba(255,255,255,.56); font-size: 9px; font-weight: 680; }
.chapter-copy button {
  min-width: 176px;
  height: 48px;
  margin-top: 28px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #fff;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(115deg,#7769e8,#526fe7 58%,#ef9b81);
  box-shadow: 0 15px 34px rgba(82,91,203,.25), inset 0 1px rgba(255,255,255,.35);
  font-size: 11px;
  font-weight: 760;
}
.chapter-visual {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  color: #dfe8fb;
  border: 1px solid rgba(167,185,228,.17);
  border-radius: 25px;
  background:
    radial-gradient(circle at 80% 20%, rgba(91,102,228,.20), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(240,154,128,.13), transparent 31%),
    linear-gradient(145deg, rgba(15,27,60,.97), rgba(7,17,40,.94));
  box-shadow: 0 32px 70px rgba(19,31,70,.30), inset 0 1px rgba(255,255,255,.08);
  transform: translateZ(32px) rotateY(-1deg);
  transform-style: preserve-3d;
}
.chapter-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .27;
  background-image: linear-gradient(rgba(139,164,220,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(139,164,220,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg,#000,transparent 88%);
}
.chapter-visual::after {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -36%;
  width: 16%;
  pointer-events: none;
  opacity: .44;
  transform: rotate(13deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  filter: blur(8px);
}
.capability-chapter.is-active .chapter-visual::after { animation: storySweep 2.1s .25s cubic-bezier(.22,.7,.16,1) both; }
@keyframes storySweep { to { left: 125%; } }
.ui-chrome {
  position: relative;
  z-index: 8;
  height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #8fa1c0;
  border-bottom: 1px solid rgba(166,184,225,.11);
  background: rgba(255,255,255,.035);
  font-size: 9px;
}
.ui-chrome > span { display: flex; gap: 5px; }
.ui-chrome > span i { width: 6px; height: 6px; border-radius: 50%; background: #60708d; }
.ui-chrome > span i:first-child { background: #ef9b81; }
.ui-chrome > span i:nth-child(2) { background: #d9b96b; }
.ui-chrome > span i:nth-child(3) { background: #57c8a7; }
.ui-chrome b { color: #c8d4ea; font-size: 10px; letter-spacing: .04em; }
.ui-chrome em { margin-left: auto; padding: 5px 8px; color: #8ed7be; border: 1px solid rgba(92,198,160,.15); border-radius: 999px; background: rgba(59,154,119,.08); font-size: 8px; font-style: normal; }
.ui-chrome em.is-running::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #69d5af; box-shadow: 0 0 0 4px rgba(105,213,175,.1); }

/* Agent learning console */
.learning-flow { position: relative; z-index: 3; width: 49%; padding: 24px 0 20px 22px; display: grid; gap: 9px; }
.learning-flow::before { content: ""; position: absolute; left: 40px; top: 37px; bottom: 34px; width: 1px; background: linear-gradient(#927ff5,#5db4e6,#63cdaa,transparent); }
.learning-step { position: relative; min-height: 58px; padding: 10px 10px 10px 52px; display: grid; align-content: center; border: 1px solid rgba(144,164,210,.11); border-radius: 13px; background: rgba(255,255,255,.035); }
.learning-step > i { position: absolute; left: 10px; top: 13px; width: 30px; height: 30px; display: grid; place-items: center; color: #95a7c5; border: 1px solid rgba(150,170,218,.14); border-radius: 9px; background: #101f42; font-size: 8px; font-style: normal; }
.learning-step b { font-size: 10px; }.learning-step small { margin-top: 3px; color: #7e91b1; font-size: 8px; }
.learning-step.is-current { border-color: rgba(145,126,244,.34); background: linear-gradient(100deg,rgba(121,101,231,.15),rgba(255,255,255,.035)); box-shadow: 0 10px 26px rgba(73,55,168,.14); }
.learning-step.is-current > i { color: #fff; background: linear-gradient(145deg,#ef9a7f,#836ff0); box-shadow: 0 8px 18px rgba(92,75,206,.25); }
.learning-memory { position: absolute; z-index: 4; right: 20px; top: 76px; width: 44%; padding: 18px; border: 1px solid rgba(165,179,226,.16); border-radius: 18px; background: rgba(16,29,63,.74); box-shadow: 0 20px 45px rgba(0,7,28,.24), inset 0 1px rgba(255,255,255,.055); backdrop-filter: blur(18px); }
.learning-memory > span { display: block; padding-bottom: 13px; border-bottom: 1px solid rgba(155,174,218,.10); }
.learning-memory > span small { display: block; color: #7c90b2; font-size: 8px; }.learning-memory > span strong { display: block; margin-top: 5px; color: #eaf0ff; font-size: 11px; }
.learning-memory > div { display: grid; grid-template-columns: 90px 1fr 38px; gap: 8px; align-items: center; margin-top: 14px; color: #91a4c3; font-size: 8px; }
.learning-memory > div i { height: 5px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.08); }.learning-memory > div em { display: block; width: var(--value); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8472ee,#ef9c83); }
.learning-memory > div small { color: #d8e2f5; text-align: right; }
.learning-memory > p { margin: 17px 0 0; padding: 10px; color: #8bd0b7; border-radius: 10px; background: rgba(71,174,135,.08); font-size: 8px; }.learning-memory > p i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #60cda7; }
.learning-pulse { position: absolute; right: 6%; bottom: -48px; width: 44%; aspect-ratio: 1; opacity: .38; }
.learning-pulse i { position: absolute; inset: 20%; border: 1px solid rgba(126,108,240,.28); border-radius: 50%; animation: learningPulse 3s ease-out infinite; }.learning-pulse i:nth-child(2) { animation-delay: 1s; }.learning-pulse i:nth-child(3) { animation-delay: 2s; }
@keyframes learningPulse { from { transform: scale(.45); opacity: .8; } to { transform: scale(1.55); opacity: 0; } }

/* Keyword map */
.keyword-console aside { position: absolute; z-index: 3; left: 0; top: 54px; bottom: 0; width: 145px; padding: 22px 14px; display: grid; align-content: start; gap: 7px; border-right: 1px solid rgba(155,174,218,.11); background: rgba(255,255,255,.025); }
.keyword-console aside strong { margin-bottom: 8px; color: #7f91b1; font-size: 8px; letter-spacing: .08em; }.keyword-console aside span { padding: 9px 10px; color: #8699b9; border-radius: 9px; font-size: 8px; }.keyword-console aside span.is-active { color: #edf2ff; background: rgba(119,102,232,.17); box-shadow: inset 3px 0 #8a75ef; }
.keyword-map { position: absolute; z-index: 3; left: 145px; right: 0; top: 54px; bottom: 0; }
.keyword-map svg { position: absolute; inset: 12px 4%; width: 92%; height: 68%; fill: none; stroke: rgba(104,163,226,.38); stroke-width: 1.2; stroke-dasharray: 5 6; }
.keyword-node { position: absolute; z-index: 2; min-width: 154px; padding: 11px 12px; border: 1px solid rgba(145,166,218,.16); border-radius: 13px; background: rgba(17,34,72,.79); box-shadow: 0 14px 32px rgba(0,7,28,.2), inset 0 1px rgba(255,255,255,.05); }
.keyword-node b { display: block; color: #dce7f9; font-size: 9px; }.keyword-node small { display: block; margin-top: 5px; color: #76c8ad; font-size: 8px; }
.keyword-node.node-a { left: 7%; top: 15%; }.keyword-node.node-b { right: 7%; top: 22%; }.keyword-node.node-c { right: 13%; bottom: 19%; }
.keyword-verdict { position: absolute; left: 9%; bottom: 12%; padding: 11px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(239,157,132,.2); border-radius: 14px; background: linear-gradient(120deg,rgba(236,147,122,.13),rgba(121,104,235,.13)); box-shadow: 0 15px 34px rgba(0,7,28,.2); }
.keyword-verdict > i { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: linear-gradient(145deg,#ef9a7f,#806cef); font-size: 9px; font-style: normal; }.keyword-verdict span small { display: block; color: #8294b3; font-size: 7px; }.keyword-verdict span strong { color: #eef3ff; font-size: 9px; }.keyword-verdict > b { margin-left: 9px; color: #87d3b9; font-size: 18px; }

/* Radar */
.radar-summary { position: relative; z-index: 3; margin: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.radar-summary span { padding: 11px 13px; border: 1px solid rgba(150,170,218,.11); border-radius: 12px; background: rgba(255,255,255,.035); }.radar-summary small { display: block; color: #7f92b2; font-size: 7px; }.radar-summary strong { display: block; margin-top: 4px; color: #e9efff; font-size: 17px; }
.radar-chart { position: relative; z-index: 3; margin: 0 19px; padding: 15px 16px 12px; border: 1px solid rgba(149,169,218,.11); border-radius: 15px; background: rgba(4,13,32,.3); }
.radar-chart > span { position: relative; z-index: 2; display: grid; grid-template-columns: 80px 1fr 42px; gap: 9px; align-items: center; margin: 13px 0; color: #8da0bf; font-size: 8px; }.radar-chart > span i { height: 6px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.07); }.radar-chart > span em { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5f78ed,#9b75ed 58%,#ee9a80); transform-origin: left center; }.radar-chart > span small { color: #80cfb5; text-align: right; }
.radar-chart svg { position: absolute; inset: 8px 10px; width: calc(100% - 20px); height: calc(100% - 16px); fill: none; stroke: rgba(239,153,128,.24); stroke-width: 2; pointer-events: none; }
.radar-callout { position: absolute; z-index: 4; right: 28px; bottom: 18px; padding: 9px 11px; display: flex; align-items: center; gap: 8px; border-radius: 12px; background: rgba(18,34,71,.88); box-shadow: 0 15px 30px rgba(0,6,25,.22); }.radar-callout > i { color: #ef9b82; font-size: 18px; font-style: normal; }.radar-callout small { display: block; color: #7f92b2; font-size: 7px; }.radar-callout strong { color: #eaf0ff; font-size: 8px; }

/* Automated selection */
.automation-pipeline { position: relative; z-index: 3; height: calc(100% - 54px); padding: 28px 20px 42px; display: grid; grid-template-columns: 1fr 120px 1fr; gap: 16px; align-items: center; }
.candidate-stack,.shortlist-stack { display: grid; gap: 8px; }.candidate-stack > small,.shortlist-stack > small { color: #8295b6; font-size: 8px; letter-spacing: .05em; }.candidate-stack > span,.shortlist-stack > span { padding: 10px; display: grid; grid-template-columns: 26px 1fr auto; gap: 7px; align-items: center; border: 1px solid rgba(148,168,216,.11); border-radius: 11px; background: rgba(255,255,255,.035); }.candidate-stack i,.shortlist-stack i { width: 25px; height: 25px; display: grid; place-items: center; color: #9bacc9; border-radius: 8px; background: rgba(114,135,185,.12); font-size: 7px; font-style: normal; }.candidate-stack b,.shortlist-stack b { color: #d6e0f2; font-size: 8px; }.candidate-stack em,.shortlist-stack em { color: #7fcdb4; font-size: 7px; font-style: normal; }.shortlist-stack > span.is-picked { border-color: rgba(100,201,166,.22); background: rgba(72,168,134,.08); }.shortlist-stack > p { margin: 3px 0 0; padding: 8px; color: #d8caff; border-radius: 9px; background: rgba(125,102,230,.1); font-size: 8px; text-align: center; }
.filter-gates { position: relative; display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.filter-gates::before { content: "AI"; position: absolute; left: 50%; top: 50%; width: 45px; height: 45px; display: grid; place-items: center; transform: translate(-50%,-50%); color: #fff; border-radius: 50%; background: linear-gradient(145deg,#ef9b81,#7d6ceb); box-shadow: 0 0 0 10px rgba(120,105,232,.09),0 12px 27px rgba(54,44,151,.27); font-size: 9px; font-weight: 800; }.filter-gates span { height: 58px; display: grid; place-content: center; justify-items: center; gap: 4px; border: 1px solid rgba(144,165,215,.13); border-radius: 12px; background: rgba(255,255,255,.035); }.filter-gates span i { width: 5px; height: 5px; border-radius: 50%; background: #6ed0af; }.filter-gates span b { color: #8fa3c3; font-size: 7px; }
.pipeline-beam { position: absolute; z-index: 1; left: 25%; right: 22%; top: 55%; height: 1px; background: linear-gradient(90deg,transparent,#657eec,#ef9b81,transparent); }.pipeline-beam i { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 13px #8a78ee; animation: pipelineTravel 2.6s linear infinite; }
@keyframes pipelineTravel { from { left: 0; } to { left: 100%; } }

/* AI image studio */
.image-compare { position: relative; z-index: 3; height: 282px; padding: 20px; display: grid; grid-template-columns: 1fr 92px 1fr; gap: 12px; align-items: center; }.image-compare figure { position: relative; height: 230px; margin: 0; overflow: hidden; border: 1px solid rgba(159,177,221,.13); border-radius: 17px; background: rgba(255,255,255,.04); }.image-compare figcaption { position: absolute; z-index: 4; left: 11px; top: 10px; color: #90a3c2; font-size: 8px; }.image-compare figure > small { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 10px; padding: 7px; color: #8799b7; border-radius: 8px; background: rgba(7,17,39,.58); font-size: 7px; text-align: center; }
.demo-product { position: absolute; left: 50%; top: 50%; width: 94px; height: 112px; transform: translate(-50%,-48%); filter: drop-shadow(0 18px 16px rgba(0,5,22,.26)); }.demo-product > i { position: absolute; inset: 18px 5px 3px; border: 1px solid rgba(218,231,255,.6); border-radius: 18px 18px 24px 24px; background: linear-gradient(145deg,#dce7ff,#8ea6d9 72%,#6a78a5); box-shadow: inset 0 1px rgba(255,255,255,.8); }.demo-product > b { position: absolute; left: 24px; right: 24px; top: 0; height: 45px; border: 7px solid #aebce0; border-bottom: 0; border-radius: 22px 22px 0 0; }.demo-product > em { position: absolute; left: 50%; top: 62%; width: 28px; height: 25px; display: grid; place-items: center; transform: translate(-50%,-50%); color: #fff; border-radius: 8px; background: linear-gradient(145deg,#ef9b81,#826fed); font-size: 9px; font-style: normal; font-weight: 800; }
.image-ready { background: radial-gradient(circle at 52% 42%,rgba(159,131,245,.34),transparent 42%),linear-gradient(145deg,rgba(37,54,100,.7),rgba(11,23,49,.8)) !important; }.scene-glow { position: absolute; left: 50%; top: 48%; width: 180px; height: 180px; transform: translate(-50%,-50%); border: 1px solid rgba(210,220,255,.24); border-radius: 50%; background: radial-gradient(circle,rgba(127,109,234,.25),transparent 65%); box-shadow: inset 0 0 34px rgba(255,255,255,.08); }.image-ready .demo-product { transform: translate(-50%,-49%) scale(1.06); }
.image-generation { display: grid; place-items: center; gap: 8px; color: #8699b8; font-size: 7px; text-align: center; }.image-generation > i { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 15px; background: linear-gradient(145deg,#ef9b80,#816dee); box-shadow: 0 0 0 10px rgba(128,108,235,.08),0 15px 28px rgba(55,43,155,.28); font-style: normal; font-weight: 800; }.image-generation > span { width: 66px; height: 1px; background: linear-gradient(90deg,transparent,#9a83ef,transparent); }
.listing-strip { position: absolute; z-index: 4; left: 20px; right: 20px; bottom: 15px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(151,171,218,.12); border-radius: 12px; background: rgba(255,255,255,.035); }.listing-strip span { min-width: 0; }.listing-strip small { display: block; color: #7d90b0; font-size: 7px; }.listing-strip strong { display: block; overflow: hidden; margin-top: 3px; color: #dce5f7; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }.listing-strip > b { margin-left: auto; padding: 6px 8px; color: #7cd0b3; border-radius: 8px; background: rgba(68,169,132,.09); font-size: 7px; white-space: nowrap; }

/* Feedback */
.feedback-metrics { position: relative; z-index: 3; margin: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.feedback-metrics span { position: relative; padding: 12px; border: 1px solid rgba(151,171,218,.11); border-radius: 12px; background: rgba(255,255,255,.035); }.feedback-metrics small { display: block; color: #7f92b2; font-size: 7px; }.feedback-metrics strong { display: block; margin-top: 4px; color: #ecf1ff; font-size: 18px; }.feedback-metrics i { position: absolute; right: 10px; bottom: 10px; color: #77ceb1; font-size: 7px; font-style: normal; }
.feedback-chart { position: relative; z-index: 3; height: 174px; margin: 0 18px; overflow: hidden; border: 1px solid rgba(151,171,218,.11); border-radius: 14px; background: rgba(4,13,32,.25); }.feedback-chart svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }.feedback-chart .area { fill: url(#feedbackFill); }.feedback-chart .line { fill: none; stroke: #9982ef; stroke-width: 2.4; filter: drop-shadow(0 0 7px rgba(151,128,239,.4)); }.feedback-chart > span { position: absolute; left: 12px; bottom: 10px; color: #8497b7; font-size: 7px; }.feedback-chart > span i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #ef9b80; }
.strategy-update { position: absolute; z-index: 5; right: 25px; bottom: 17px; max-width: 330px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(125,207,178,.18); border-radius: 12px; background: rgba(15,41,55,.9); box-shadow: 0 15px 34px rgba(0,7,28,.24); }.strategy-update > i { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: #54ae8b; font-style: normal; }.strategy-update small { display: block; color: #7dc5ad; font-size: 7px; }.strategy-update strong { color: #dfe9f9; font-size: 8px; line-height: 1.4; }

/* Depth-led decision memory */
.workflow.decision-depth {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: 0;
  display: block;
  grid-template-columns: none;
  gap: 0;
  overflow: clip;
  color: #eef3ff;
}
.workflow.decision-depth::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 50%, rgba(237,143,119,.17), transparent 31%),
    radial-gradient(circle at 84% 30%, rgba(109,94,225,.23), transparent 36%),
    linear-gradient(180deg, rgba(7,14,36,.66), rgba(8,19,47,.78));
}
.decision-stage {
  position: relative;
  height: 100svh;
  min-height: 760px;
  padding: 112px 5vw 32px;
  overflow: hidden;
  perspective: 1450px;
  transform-style: preserve-3d;
}
.decision-heading { position: relative; z-index: 10; width: min(820px,78vw); margin: 0 auto; text-align: center; }
.decision-heading .section-kicker { color: #b7a9ff; }
.decision-heading h2 { margin: 12px 0 12px; color: #f6f8ff; font-size: clamp(44px,5vw,78px); font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.decision-heading p { max-width: 720px; margin: 0 auto; color: #9baac5; font-size: 13px; line-height: 1.68; }
.decision-gallery { position: relative; z-index: 4; width: min(1320px,94vw); height: calc(100% - 178px); min-height: 430px; margin: 10px auto 0; transform-style: preserve-3d; }
.depth-panel,
.decision-profile {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(174,187,230,.18);
  background: linear-gradient(145deg,rgba(25,40,80,.78),rgba(9,21,49,.70));
  box-shadow: 0 34px 80px rgba(0,6,28,.36), inset 0 1px rgba(255,255,255,.09);
  backdrop-filter: blur(22px) saturate(125%);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.depth-panel { width: 290px; min-height: 172px; padding: 14px; border-radius: 19px; }
.depth-panel::after { content: ""; position: absolute; left: 9%; right: 9%; top: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); }
.depth-panel > header { display: flex; align-items: center; gap: 9px; }.depth-panel > header > i { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: linear-gradient(145deg,#ef9a80,#7968e6); font-size: 9px; font-style: normal; box-shadow: 0 8px 20px rgba(74,55,183,.24); }.depth-panel > header span small { display: block; color: #8193b2; font-size: 7px; }.depth-panel > header span strong { display: block; margin-top: 2px; color: #e8efff; font-size: 9px; }.depth-panel > header > b { margin-left: auto; color: #80d0b4; font-size: 16px; }
.depth-panel > footer { margin-top: 11px; padding-top: 9px; color: #8497b6; border-top: 1px solid rgba(160,178,220,.09); font-size: 7px; }.depth-panel > footer i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #64c9a7; box-shadow: 0 0 0 4px rgba(100,201,167,.08); }
.depth-keyword { left: 2%; top: 5%; }.depth-category { right: 2%; top: 7%; }.depth-selection { left: 8%; bottom: 3%; }.depth-image { right: 8%; bottom: 3%; }.depth-profit { left: 50%; bottom: -2%; }
.mini-keywords { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }.mini-keywords span { padding: 6px 8px; color: #bdc9df; border: 1px solid rgba(153,174,222,.12); border-radius: 999px; background: rgba(255,255,255,.04); font-size: 7px; }.mini-keywords span:first-child { color: #e4d8ff; background: rgba(127,105,232,.13); }
.mini-bars { height: 67px; margin-top: 12px; padding: 0 8px; display: flex; align-items: end; gap: 9px; border-bottom: 1px solid rgba(153,174,222,.13); }.mini-bars i { width: 23px; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg,#9c82ef,#556ce1 64%,rgba(85,108,225,.2)); box-shadow: 0 0 16px rgba(126,105,231,.16); }
.mini-product { margin-top: 10px; display: flex; align-items: center; gap: 12px; }.mini-product .demo-product { position: relative; left: auto; top: auto; width: 58px; height: 70px; flex: 0 0 auto; transform: none; }.mini-product .demo-product > i { inset: 12px 3px 2px; border-radius: 10px 10px 14px 14px; }.mini-product .demo-product > b { left: 15px; right: 15px; height: 28px; border-width: 4px; }.mini-product .demo-product > em { width: 18px; height: 16px; font-size: 6px; }.mini-product p { margin: 0; }.mini-product p strong { display: block; color: #e3eafa; font-size: 8px; }.mini-product p small { display: block; margin-top: 5px; color: #8194b3; font-size: 7px; }
.mini-scene { position: relative; height: 79px; margin-top: 9px; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 50% 50%,rgba(150,125,240,.26),rgba(28,43,82,.26)); }.mini-scene .scene-glow { width: 116px; height: 116px; }.mini-scene .demo-product { width: 56px; height: 69px; }.mini-scene .demo-product > i { inset: 11px 3px 2px; border-radius: 9px 9px 13px 13px; }.mini-scene .demo-product > b { left: 14px; right: 14px; height: 27px; border-width: 4px; }.mini-scene .demo-product > em { width: 18px; height: 16px; font-size: 6px; }
.mini-profit { min-height: 62px; margin-top: 11px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 7px; align-items: center; }.mini-profit span { padding: 9px; border-radius: 10px; background: rgba(255,255,255,.04); }.mini-profit small { display: block; color: #8295b4; font-size: 7px; }.mini-profit strong { display: block; margin-top: 4px; color: #e8efff; font-size: 10px; }.mini-profit > i { color: #ef9b81; font-style: normal; }
.decision-profile { left: 50%; top: 51%; width: min(640px,54vw); padding: 24px; border-radius: 25px; background: radial-gradient(circle at 83% 4%,rgba(133,108,237,.22),transparent 36%),linear-gradient(145deg,rgba(29,44,91,.94),rgba(8,20,48,.91)); box-shadow: 0 45px 110px rgba(0,6,27,.5),0 0 0 1px rgba(134,117,231,.06),inset 0 1px rgba(255,255,255,.12); }
.profile-top { display: flex; align-items: center; gap: 12px; }.profile-mark { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; border-radius: 14px; background: linear-gradient(145deg,#ef9b80,#9a7cf0 52%,#4879ef); box-shadow: 0 12px 28px rgba(77,62,193,.3),inset 0 1px rgba(255,255,255,.34); font-size: 16px; font-weight: 800; }.profile-top span small { display: block; color: #8b9cbb; font-size: 7px; letter-spacing: .11em; }.profile-top span strong { display: block; margin-top: 4px; color: #f0f4ff; font-size: 14px; }.profile-top > b { margin-left: auto; padding: 7px 10px; color: #80d1b5; border: 1px solid rgba(93,196,158,.16); border-radius: 999px; background: rgba(61,162,124,.08); font-size: 8px; }.profile-top > b i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #6dd1ad; }
.profile-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.profile-grid > span { padding: 13px; border: 1px solid rgba(156,175,221,.11); border-radius: 13px; background: rgba(255,255,255,.035); }.profile-grid small { display: block; color: #7e91b1; font-size: 7px; }.profile-grid strong { display: block; margin-top: 5px; color: #eef3ff; font-size: 19px; }.profile-grid em { display: block; margin-top: 3px; color: #8ca0bf; font-size: 7px; font-style: normal; }
.profile-recommendation { margin-top: 14px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(235,153,129,.16); border-radius: 13px; background: linear-gradient(105deg,rgba(238,150,125,.10),rgba(127,104,232,.11)); }.profile-recommendation > i { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: linear-gradient(145deg,#ef9b81,#7c6be9); font-size: 8px; font-style: normal; font-weight: 800; }.profile-recommendation small { display: block; color: #8d9dbc; font-size: 7px; }.profile-recommendation strong { display: block; margin-top: 4px; color: #e9efff; font-size: 9px; line-height: 1.4; }
.decision-progress { position: absolute; z-index: 10; left: 8%; right: 8%; bottom: 31px; height: 2px; overflow: hidden; border-radius: 99px; background: rgba(166,182,226,.12); }.decision-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg,#ef9b81,#a07ff0 48%,#4c7ff2); box-shadow: 0 0 14px rgba(128,111,236,.5); }
.decision-caption { position: absolute; z-index: 10; left: 8%; right: 8%; bottom: 11px; margin: 0; display: flex; justify-content: space-between; color: #7184a5; font-size: 7px; letter-spacing: .07em; }

.tutorial { position: relative; padding-block: 120px 140px; }
.tutorial::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(244,240,235,.56),rgba(248,245,240,.78)); }
.tutorial-copy h2 { color: #17243a; }
.tutorial-copy p,.tutorial-copy > small { color: #68758a; }
.tutorial-card .video-stage { box-shadow: 0 35px 100px rgba(50,60,91,.20); }

body.on-light-story .site-header::before {
  inset: -10px -18px -14px;
  border: 1px solid rgba(89,105,143,.10);
  border-radius: 22px;
  background: rgba(247,248,253,.72);
  box-shadow: 0 12px 40px rgba(38,51,84,.09);
  backdrop-filter: blur(18px) saturate(130%);
}
body.on-light-story .brand-copy strong,
body.on-light-story .site-header nav a,
body.on-light-story .site-header .preview-state,
body.on-light-story .site-header .header-cta { text-shadow: none; }
body.on-light-story .brand-copy strong,
body.on-light-story .site-header nav a { color: #4f5c74; }
body.on-light-story .site-header nav a:hover,
body.on-light-story .site-header nav a.active { color: #19253a; }
body.on-light-story .brand-copy small,
body.on-light-story .site-header .preview-state small { color: #78869d; }
body.on-light-story .site-header .preview-state {
  color: #34425a;
  border-color: rgba(78,95,135,.14);
  background: rgba(255,255,255,.52);
}

@media (max-width: 1100px) {
  .capability-story-heading { grid-template-columns: 1fr 340px; width: calc(100% - 56px); gap: 30px; }
  .capability-progress { width: calc(100% - 56px); }
  .capability-chapter { width: 90vw; min-width: 90vw; grid-template-columns: minmax(250px,.58fr) minmax(500px,1.42fr); gap: 28px; }
  .chapter-copy h3 { font-size: 35px; }
  .decision-profile { width: 60vw; }
  .depth-panel { width: 250px; }
}

@media (max-width: 899px) {
  .capability-stage { height: auto; min-height: 0; padding: 92px 0 80px; overflow: visible; }
  .capability-story-heading { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 20px; }
  .capability-story-heading h2 { font-size: 44px; }
  .capability-progress { width: calc(100% - 40px); margin-top: 8px; }
  .capability-progress > small { display: none; }
  .capability-viewport { height: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: auto; }
  .capability-viewport::-webkit-scrollbar { display: none; }
  .capability-track { position: relative; inset: auto; padding: 8px 20px 24px; gap: 16px; }
  .capability-chapter { width: calc(100vw - 40px); min-width: calc(100vw - 40px); min-height: 710px; grid-template-columns: 1fr; gap: 22px; align-content: start; scroll-snap-align: center; }
  .chapter-copy h3 { font-size: 37px; }.chapter-copy > p { max-width: 560px; }.chapter-copy button { margin-top: 20px; }
  .chapter-visual { min-height: 380px; transform: none; }
  .workflow.decision-depth { min-height: auto; }
  .decision-stage { height: auto; min-height: 980px; padding: 94px 20px 80px; overflow: hidden; }
  .decision-heading { width: 100%; }.decision-heading h2 { font-size: 48px; }
  .decision-gallery { width: 100%; height: 690px; margin-top: 20px; }
  .depth-panel { width: 230px; }.depth-keyword { left: -8%; top: 4%; }.depth-category { right: -8%; top: 10%; }.depth-selection { left: -6%; bottom: 10%; }.depth-image { right: -6%; bottom: 4%; }.depth-profit { left: 50%; bottom: -5%; }
  .decision-profile { width: min(580px,82vw); }
}

@media (max-width: 620px) {
  .capability-story-heading h2 { font-size: 39px; }
  .capability-story-heading > p { font-size: 13px; }
  .capability-progress > i { width: 14px; }.capability-progress > i.is-active { width: 34px; }
  .capability-chapter { min-height: 690px; padding: 24px 20px; border-radius: 25px; }
  .chapter-copy h3 { margin-block: 13px; font-size: 31px; }.chapter-copy > p { font-size: 12px; }.chapter-copy li { font-size: 8px; }.chapter-copy button { height: 44px; }
  .chapter-visual { min-height: 352px; border-radius: 19px; }
  .ui-chrome { height: 47px; padding-inline: 12px; }.ui-chrome b { font-size: 8px; }
  .learning-flow { width: 49%; padding: 15px 0 12px 10px; }.learning-step { min-height: 53px; padding-left: 43px; }.learning-step > i { left: 8px; width: 27px; height: 27px; }.learning-memory { right: 9px; top: 62px; width: 46%; padding: 11px; }.learning-memory > div { grid-template-columns: 1fr; gap: 4px; }.learning-memory > div i { grid-row: 2; }.learning-memory > div small { display: none; }
  .keyword-console aside { width: 103px; padding: 14px 8px; }.keyword-map { left: 103px; }.keyword-node { min-width: 122px; padding: 8px; }.keyword-node.node-a { left: 4%; }.keyword-node.node-b { right: 3%; }.keyword-verdict { left: 4%; }
  .automation-pipeline { padding: 18px 10px 38px; grid-template-columns: 1fr 77px 1fr; gap: 7px; }.candidate-stack > span,.shortlist-stack > span { grid-template-columns: 20px 1fr; padding: 8px 6px; }.candidate-stack em,.shortlist-stack em { display: none; }.filter-gates { gap: 5px; }.filter-gates span { height: 48px; }
  .image-compare { height: 264px; padding: 12px 8px; grid-template-columns: 1fr 52px 1fr; gap: 5px; }.image-compare figure { height: 208px; }.image-generation > i { width: 38px; height: 38px; }.image-generation > span { width: 42px; }.listing-strip { left: 8px; right: 8px; bottom: 9px; }
  .feedback-metrics { margin: 10px; }.feedback-chart { margin-inline: 10px; }.strategy-update { left: 15px; right: 15px; max-width: none; }
  .decision-stage { min-height: 930px; padding-inline: 14px; }.decision-heading h2 { font-size: 36px; }.decision-heading p { font-size: 12px; }
  .decision-gallery { height: 660px; }.depth-panel { width: 188px; min-height: 147px; padding: 10px; }.depth-panel > header > i { width: 25px; height: 25px; }.depth-panel > header > b { font-size: 12px; }.depth-panel > footer { display: none; }.depth-keyword { left: -17%; }.depth-category { right: -17%; }.depth-selection { left: -13%; bottom: 11%; }.depth-image { right: -13%; bottom: 8%; }.depth-profit { width: 210px; }
  .decision-profile { width: 88vw; padding: 18px; }.profile-mark { width: 38px; height: 38px; }.profile-grid > span { padding: 9px; }.profile-grid strong { font-size: 16px; }.profile-grid em { display: none; }.profile-recommendation strong { font-size: 8px; }
  .decision-caption { left: 5%; right: 5%; }.decision-progress { left: 5%; right: 5%; }
}

@media (prefers-reduced-motion: reduce) {
  .mood-blob,
  .learning-pulse i,
  .pipeline-beam i,
  .capability-chapter.is-active .chapter-visual::after { animation: none !important; }
  .capability-track,
  .capability-chapter,
  .depth-panel { transform: none !important; }
  .depth-profit { transform: translateX(-50%) !important; }
  .decision-profile { transform: translate(-50%,-50%) !important; }
}

/* 2026-08-29 · local contrast and M-brand corrections */
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.brand-mark > img {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: none;
}

.hero-ai-stage .hero-readable-copy {
  position: relative;
  width: min(760px, calc(100% - 48px));
  margin: 22px auto 0;
  padding: 14px 28px 16px;
  overflow: hidden;
  border: 1px solid rgba(170, 202, 247, .18);
  border-radius: 18px;
  background:
    linear-gradient(105deg, rgba(4, 13, 34, .82), rgba(8, 22, 51, .70) 56%, rgba(11, 26, 57, .58));
  box-shadow: 0 18px 48px rgba(0, 8, 30, .22), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(16px) saturate(118%);
}
.hero-ai-stage .hero-readable-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(118, 171, 255, .06), transparent 38%, rgba(171, 133, 244, .06));
}
.hero-ai-stage .hero-readable-copy > * { position: relative; z-index: 1; }
.hero-ai-stage .hero-readable-copy .hero-lead {
  margin: 0 auto 8px;
  color: #f0f5ff;
  font-size: 17px;
  line-height: 1.55;
  text-shadow: 0 2px 18px rgba(0, 7, 25, .58);
}
.hero-ai-stage .hero-readable-copy .hero-lead strong { color: #a9c8ff; }
.hero-ai-stage .hero-readable-copy .hero-description {
  margin: 0 auto;
  color: #c0cee3;
  font-size: 13px;
  line-height: 1.72;
  text-shadow: 0 2px 16px rgba(0, 7, 25, .62);
}

footer {
  width: 100%;
  max-width: none;
  min-height: 126px;
  margin: 0;
  padding: 28px max(48px, calc((100vw - 1420px) / 2));
  overflow: hidden;
  border-top: 1px solid rgba(172, 195, 239, .18);
  color: #c7d4e8;
  background:
    radial-gradient(circle at 78% 12%, rgba(153, 113, 233, .27), transparent 33%),
    linear-gradient(105deg, #07152f, #172d5a 56%, #413475);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(circle, rgba(180, 205, 255, .58) .7px, transparent .8px);
  background-size: 15px 15px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}
footer > * { position: relative; z-index: 1; }
.footer-brand { gap: 11px; color: #fff; }
.footer-brand .brand-mark { width: 42px; height: 42px; flex-basis: 42px; filter: drop-shadow(0 0 19px rgba(94, 142, 255, .35)); }
.footer-brand .brand-copy { gap: 2px; }
body .footer-brand .brand-copy strong { color: #fff; font-size: 17px; line-height: 1.1; text-shadow: 0 2px 16px rgba(0,7,28,.38); }
body .footer-brand .brand-copy small { color: #aebddb; font-size: 9px; }
footer p { color: #c4d1e5; font-size: 12px; }
footer a { color: #f1f5ff; font-size: 11px; font-weight: 700; }

@media (max-width: 760px) {
  .brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
  .hero-ai-stage .hero-readable-copy {
    width: 100%;
    margin-top: 18px;
    padding: 13px 16px 15px;
    border-radius: 15px;
  }
  .hero-ai-stage .hero-readable-copy .hero-lead { font-size: 14px; }
  .hero-ai-stage .hero-readable-copy .hero-description { font-size: 11px; line-height: 1.65; }
  footer {
    min-height: 142px;
    padding: 24px 20px 28px;
    grid-template-columns: 1fr auto;
    gap: 14px 20px;
  }
  footer .brand-copy small { display: block; }
  footer p { display: block; grid-column: 1 / -1; grid-row: 2; }
}

/* 2026-09-03 · unified dark story surface */
:root {
  --story-ink: #f4f7ff;
  --story-muted: #a7b5cc;
  --story-line: rgba(137, 161, 211, .16);
}

.page-mood::before {
  background:
    radial-gradient(circle at 16% 24%, color-mix(in srgb, var(--mood-a) 14%, transparent), transparent 33%),
    radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--mood-b) 13%, transparent), transparent 36%),
    linear-gradient(135deg, rgba(53, 90, 155, .055), transparent 42%, rgba(112, 78, 160, .045));
}
.mood-blob { opacity: .24; filter: blur(108px) saturate(112%); }
.mood-blob-c { opacity: .16; }
.mood-grain {
  opacity: .12;
  background-image:
    radial-gradient(circle at 25% 32%, rgba(159, 188, 241, .32) 0 .55px, transparent .85px),
    radial-gradient(circle at 70% 65%, rgba(80, 111, 170, .18) 0 .5px, transparent .8px);
}

.capability-story::after {
  background:
    radial-gradient(circle at 74% 22%, color-mix(in srgb, var(--mood-b) 18%, transparent), transparent 32%),
    radial-gradient(circle at 13% 72%, color-mix(in srgb, var(--mood-c) 12%, transparent), transparent 29%),
    linear-gradient(180deg, #071226 0%, rgba(8, 18, 42, .90) 18%, rgba(9, 16, 40, .88) 82%, #071126 100%);
}
.capability-story-heading .section-kicker { color: #9d92ff; }
.capability-story-heading h2 { color: #f5f7ff; text-shadow: 0 12px 42px rgba(0, 5, 24, .34); }
.capability-story-heading > p { color: #aab8cf; }
.capability-progress { color: #8595b1; }
.capability-progress > span b { color: #dce5f7; }
.capability-progress > i { background: rgba(143, 163, 207, .17); }

.capability-chapter {
  border-color: rgba(137, 159, 211, .18);
  background:
    radial-gradient(circle at 94% 2%, color-mix(in srgb, var(--chapter-a, #7e6ef2) 17%, transparent), transparent 35%),
    radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--chapter-b, #ef9b81) 10%, transparent), transparent 31%),
    linear-gradient(145deg, rgba(18, 31, 67, .91), rgba(7, 17, 40, .86));
  box-shadow: 0 38px 100px rgba(0, 6, 27, .34), inset 0 1px rgba(255, 255, 255, .075);
}
.capability-chapter::before { background: linear-gradient(90deg, transparent, rgba(190, 207, 246, .38), transparent); }
.chapter-index { color: #a99cff; }
.chapter-copy h3 { color: #f2f5ff; }
.chapter-copy > p { color: #a7b5cc; }
.chapter-copy li {
  color: #c4cfe2;
  border-color: rgba(143, 164, 210, .18);
  background: rgba(137, 158, 207, .07);
}

.workflow.decision-depth::after {
  background:
    radial-gradient(circle at 13% 50%, rgba(237, 143, 119, .13), transparent 31%),
    radial-gradient(circle at 84% 30%, rgba(109, 94, 225, .19), transparent 36%),
    linear-gradient(180deg, #071126 0%, rgba(7, 14, 36, .96) 15%, rgba(7, 18, 43, .96) 84%, #091025 100%);
}
.decision-heading p { color: #a7b6d0; }

.tutorial {
  background: transparent !important;
}
.tutorial::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(87, 111, 233, .15), transparent 31%),
    radial-gradient(circle at 81% 67%, rgba(218, 120, 174, .13), transparent 34%),
    linear-gradient(180deg, #071226 0%, #0a132c 52%, #071226 100%);
}
.tutorial-copy .section-kicker { color: #a99cff; }
.tutorial-copy h2 { color: #f5f7ff; text-shadow: 0 14px 44px rgba(0, 5, 24, .34); }
.tutorial-copy p { color: #adbad0; }
.tutorial-copy > small { color: #8293b0; }
.tutorial-card .video-stage {
  border: 1px solid rgba(142, 164, 216, .18);
  background: linear-gradient(145deg, rgba(16, 30, 64, .94), rgba(6, 16, 38, .96));
  box-shadow: 0 38px 110px rgba(0, 5, 24, .46), inset 0 1px rgba(255, 255, 255, .07);
}
.brand-film-section {
  min-height: 100svh;
  padding-block: 112px 150px;
  overflow: hidden;
  scroll-margin-top: 86px;
}
.brand-film-section::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  z-index: 0;
  height: 150px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(86, 101, 220, .10), transparent 68%);
}
.brand-film-section .tutorial-card { position: relative; z-index: 1; }
.brand-film-section .tutorial-copy { max-width: 980px; }
.brand-film-section .tutorial-copy p { max-width: 780px; }
.brand-film-section .video-stage { isolation: isolate; }
.brand-film-section .video-player { object-position: center; }

@media (max-width: 760px) {
  .brand-film-section { min-height: 0; padding-block: 88px 104px; }
  .brand-film-section .tutorial-card { gap: 30px; }
  .brand-film-section .tutorial-copy { padding-inline: 20px; }
  .brand-film-section .tutorial-copy h2 { font-size: clamp(36px, 10vw, 48px); }
  .brand-film-section .tutorial-copy p { font-size: 13px; }
  .brand-film-section .video-stage { width: calc(100% - 28px); margin-inline: auto; border-radius: 18px; }
  .brand-film-section .video-label { left: 14px; bottom: 12px; font-size: 7px; }
}

body.on-light-story .site-header::before {
  border-color: rgba(151, 176, 230, .15);
  background: rgba(7, 14, 35, .78);
  box-shadow: 0 18px 50px rgba(0, 5, 24, .27), inset 0 1px rgba(255, 255, 255, .055);
}
body.on-light-story .brand-copy strong,
body.on-light-story .site-header nav a { color: #c3cee2; }
body.on-light-story .site-header nav a:hover,
body.on-light-story .site-header nav a.active { color: #fff; }
body.on-light-story .brand-copy small,
body.on-light-story .site-header .preview-state small { color: #8293af; }
body.on-light-story .site-header .preview-state {
  color: #e1e8f6;
  border-color: rgba(145, 167, 213, .16);
  background: rgba(16, 29, 60, .58);
}