.shell {
  --fs-ink: #050505;
  --fs-paper: #f6f5f2;
  --fs-white: #ffffff;
  --fs-on-ink: rgba(255, 255, 255, 0.96);
  --fs-on-ink-muted: rgba(255, 255, 255, 0.62);
  --fs-on-paper: rgba(5, 5, 5, 0.96);
  --fs-on-paper-muted: rgba(5, 5, 5, 0.58);
  --fs-line-dark: rgba(255, 255, 255, 0.12);
  --fs-line-light: rgba(5, 5, 5, 0.12);
  --fs-container: 75rem;
  --fs-gutter: clamp(1.25rem, 3vw, 3rem);
  --fs-section-space: clamp(5rem, 11vw, 10rem);
  --fs-radius-card: clamp(1.5rem, 2.5vw, 2rem);
  --fs-radius-panel: clamp(1.75rem, 3vw, 2.5rem);
  --fs-radius-pill: 999px;
  --fs-font-sans: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --fs-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fs-duration-fast: 180ms;
  --fs-duration-base: 320ms;
  background: var(--fs-paper);
  color: var(--fs-on-paper);
  font-family: var(--fs-font-sans);
  min-width: 0;
  overflow: clip;
}

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

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

.shell a:focus-visible {
  border-radius: 0.35rem;
  outline: 3px solid #ffbf47;
  outline-offset: 4px;
}

.skipLink {
  background: var(--fs-white);
  color: var(--fs-ink);
  font-size: 0.875rem;
  font-weight: 700;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: 1rem;
  transform: translateY(-180%);
  transition: transform var(--fs-duration-fast) ease;
  z-index: 100;
}

.skipLink:focus {
  transform: translateY(0);
}

.header {
  align-items: center;
  color: var(--fs-on-ink);
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr auto 1fr;
  left: 0;
  padding: 1.5rem var(--fs-gutter);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}

.brand {
  align-items: center;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 750;
  gap: 0.65rem;
  justify-self: start;
  letter-spacing: 0.025em;
}

.brandMark {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: inline-flex;
  font-family: var(--fs-font-mono);
  font-size: 0.65rem;
  height: 1.65rem;
  justify-content: center;
  width: 1.65rem;
}

.navigation {
  align-items: center;
  display: flex;
  font-size: 0.82rem;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  justify-content: center;
}

.navigation a {
  color: rgba(255, 255, 255, 0.74);
  transition: color var(--fs-duration-fast) ease;
}

.navigation a:hover {
  color: var(--fs-white);
}

.headerAction {
  justify-self: end;
}

.hero {
  align-items: center;
  background:
    linear-gradient(90deg, var(--fs-ink) 0%, rgba(5, 5, 5, 0.94) 44%, rgba(5, 5, 5, 0.25) 72%),
    radial-gradient(circle at 78% 50%, #202328 0%, var(--fs-ink) 42%);
  color: var(--fs-on-ink);
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(8rem, 16vh, 11rem) var(--fs-gutter) clamp(5rem, 10vh, 8rem);
  position: relative;
}

.hero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 5rem 5rem;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent 35%, black 100%);
  pointer-events: none;
  position: absolute;
}

.heroCopy {
  margin: 0 auto;
  max-width: var(--fs-container);
  position: relative;
  width: 100%;
  z-index: 2;
}

.heroKicker,
.eyebrow,
.cardEyebrow {
  font-family: var(--fs-font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.heroKicker {
  color: var(--fs-on-ink-muted);
  margin: 0 0 1.25rem;
}

.heroTitle {
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 680;
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 0;
  max-width: 10ch;
}

.heroSummary {
  color: var(--fs-on-ink-muted);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.75;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 35rem;
}

.actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.action {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--fs-radius-pill);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 0.55rem;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  transition:
    background-color var(--fs-duration-base) var(--fs-ease-out),
    border-color var(--fs-duration-base) var(--fs-ease-out),
    color var(--fs-duration-base) var(--fs-ease-out),
    transform var(--fs-duration-base) var(--fs-ease-out);
  width: fit-content;
}

.action span:last-child {
  transition: transform var(--fs-duration-base) var(--fs-ease-out);
}

.action:hover span:last-child {
  transform: translate(0.15rem, -0.15rem);
}

.actionPrimary {
  background: var(--fs-white);
  color: var(--fs-ink) !important;
}

.actionPrimary:hover {
  background: #deddda;
}

.actionSecondary {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--fs-white) !important;
}

.actionSecondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.48);
}

.actionText {
  background: var(--fs-ink);
  color: var(--fs-white) !important;
}

.actionText:hover {
  background: #262626;
  transform: translateY(-1px);
}

.headerAction .action {
  min-height: 2.5rem;
  padding: 0 1.1rem;
}

.heroArt {
  aspect-ratio: 1;
  max-width: 56rem;
  pointer-events: none;
  position: absolute;
  right: clamp(-16rem, -10vw, -6rem);
  top: 50%;
  transform: translateY(-43%);
  width: min(64vw, 58rem);
}

.heroHalo,
.heroOrbit,
.heroCore {
  border-radius: 50%;
  position: absolute;
}

.heroHalo {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 64%);
  filter: blur(1rem);
  inset: -10%;
}

.heroOrbit {
  border: 1px solid rgba(255, 255, 255, 0.35);
  inset: 7%;
  transform: rotate(-18deg) scaleY(0.55);
}

.heroOrbit::before,
.heroOrbit::after {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  content: "";
  inset: -12%;
  position: absolute;
}

.heroOrbit::after {
  inset: 14%;
}

.heroCore {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.7), transparent 8%),
    radial-gradient(circle at 36% 32%, #5d6269 0%, #1d2024 24%, #090a0c 62%, #000000 100%);
  box-shadow:
    -1.5rem -0.5rem 5rem rgba(255, 255, 255, 0.12),
    inset 1.2rem 0 2.8rem rgba(255, 255, 255, 0.1),
    inset -2rem -1rem 4rem rgba(0, 0, 0, 0.92);
  inset: 19%;
}

.section {
  padding: var(--fs-section-space) var(--fs-gutter);
}

.sectionHeading {
  max-width: 42rem;
}

.eyebrow {
  color: var(--fs-on-paper-muted);
  margin: 0 0 1rem;
}

.sectionTitle {
  font-size: clamp(2.25rem, 4.8vw, 4.75rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.04;
  margin: 0;
}

.sectionSummary {
  color: var(--fs-on-paper-muted);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.75;
  margin: 1.5rem 0 0;
  max-width: 36rem;
}

.showcaseLayout {
  align-items: start;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  margin: 0 auto;
  max-width: var(--fs-container);
}

.showcaseIntro {
  position: sticky;
  top: clamp(6rem, 12vh, 9rem);
}

.showcaseIntro .action {
  margin-top: 2rem;
}

.showcaseStack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.showcaseCard {
  background:
    radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.5px) 0 0 / 1.4rem 1.4rem,
    radial-gradient(120% 100% at 100% 0%, rgba(255, 255, 255, 0.1), transparent 54%),
    var(--fs-ink);
  border: 1px solid var(--fs-line-dark);
  border-radius: var(--fs-radius-card);
  box-shadow: 0 2rem 4rem -2.5rem rgba(0, 0, 0, 0.72);
  color: var(--fs-on-ink);
  display: flex;
  flex-direction: column;
  min-height: clamp(24rem, 50vh, 31rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  position: sticky;
  top: calc(clamp(5.5rem, 11vh, 8.5rem) + var(--fs-card-index) * 2rem);
}

.showcaseCard:nth-child(even) {
  background:
    radial-gradient(rgba(5, 5, 5, 0.07) 1px, transparent 1.5px) 0 0 / 1.4rem 1.4rem,
    var(--fs-white);
  border-color: var(--fs-line-light);
  color: var(--fs-on-paper);
}

.showcaseTop,
.stepTop {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  border: 1px solid currentColor;
  border-radius: var(--fs-radius-pill);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
}

.showcaseCard:nth-child(even) .tag {
  color: rgba(5, 5, 5, 0.58);
}

.cardNumber,
.stepNumber,
.audienceIndex {
  font-family: var(--fs-font-mono);
  font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  letter-spacing: -0.06em;
  line-height: 1;
}

.cardEyebrow {
  color: var(--fs-on-ink-muted);
  margin: clamp(2rem, 5vw, 4rem) 0 0;
}

.showcaseCard:nth-child(even) .cardEyebrow {
  color: var(--fs-on-paper-muted);
}

.showcaseCard h3 {
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0.85rem 0 0;
  max-width: 13ch;
}

.showcaseBottom {
  margin-top: auto;
}

.showcaseBottom > p {
  color: var(--fs-on-ink-muted);
  line-height: 1.72;
  margin: 2.5rem 0 1.5rem;
  max-width: 34rem;
}

.showcaseCard:nth-child(even) .showcaseBottom > p {
  color: var(--fs-on-paper-muted);
}

.metrics {
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 1.5rem;
}

.metrics div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.3rem;
}

.metrics dt {
  color: var(--fs-on-ink-muted);
  font-family: var(--fs-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metrics dd {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 680;
  margin: 0;
}

.showcaseCard:nth-child(even) .metrics dt {
  color: var(--fs-on-paper-muted);
}

.showcaseCard:nth-child(even) .actionText {
  background: var(--fs-ink);
  color: var(--fs-white) !important;
}

.workflowSection,
.updatesSection {
  margin: 0 auto;
  max-width: calc(var(--fs-container) + 2 * var(--fs-gutter));
}

.workflowTrack {
  align-items: stretch;
  display: flex;
  margin: clamp(4rem, 8vw, 7rem) 0 0;
  padding: 2.75rem 0;
}

.workflowItem {
  display: contents;
}

.workflowStep {
  background: var(--fs-white);
  border: 1px solid var(--fs-line-light);
  border-radius: 1.1rem;
  box-shadow: 0 1.5rem 3rem -2.2rem rgba(0, 0, 0, 0.45);
  flex: 1 1 0;
  min-height: 17rem;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  z-index: 1;
}

.workflowItem:nth-child(odd) .workflowStep {
  transform: translateY(-2rem);
}

.workflowItem:nth-child(even) .workflowStep {
  transform: translateY(2rem);
}

.workflowConnector {
  align-self: center;
  flex: 0 0 clamp(2.75rem, 6vw, 6.5rem);
  height: 4.25rem;
  position: relative;
}

.workflowConnector svg {
  display: block;
  height: 100%;
  overflow: visible;
  width: 100%;
}

.workflowConnector path {
  animation: workflowDash 700ms linear infinite;
  animation-play-state: paused;
  fill: none;
  stroke: var(--fs-ink);
  stroke-dasharray: 7 7;
  stroke-linecap: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.workflowTrack[data-in-view="true"] .workflowConnector path {
  animation-play-state: running;
}

.stepGlyph {
  align-items: center;
  border: 1px solid var(--fs-line-light);
  border-radius: 0.85rem;
  display: inline-flex;
  font-size: 1.3rem;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.stepNumber {
  color: rgba(5, 5, 5, 0.3);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.workflowStep h3,
.audienceCard h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  letter-spacing: -0.025em;
  margin: 3rem 0 0;
}

.workflowStep p,
.audienceCard > p:last-of-type {
  color: var(--fs-on-paper-muted);
  line-height: 1.65;
  margin: 0.75rem 0 0;
}

.workflowStep > a {
  bottom: 1.5rem;
  font-size: 1.1rem;
  position: absolute;
  right: 1.5rem;
}

.audienceSection {
  background: var(--fs-paper);
  color: var(--fs-on-paper);
  padding-left: 0;
  padding-right: 0;
}

.audienceHead {
  align-items: flex-end;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--fs-container);
  padding-left: var(--fs-gutter);
  padding-right: var(--fs-gutter);
}

.audienceSection .eyebrow,
.audienceSection .sectionSummary {
  color: var(--fs-on-paper-muted);
}

.audienceControls {
  display: flex;
  flex: 0 0 auto;
  gap: 0.75rem;
  padding-bottom: 0.4rem;
}

.audienceControls button {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(5, 5, 5, 0.18);
  border-radius: 50%;
  color: var(--fs-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 3rem;
  justify-content: center;
  transition: background-color var(--fs-duration-fast) ease, border-color var(--fs-duration-fast) ease;
  width: 3rem;
}

.audienceControls button:hover {
  background: rgba(5, 5, 5, 0.06);
  border-color: rgba(5, 5, 5, 0.44);
}

.audienceControls button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 4px;
}

.audienceRail {
  column-gap: 1.5rem;
  display: flex;
  flex-wrap: nowrap;
  margin-top: clamp(3rem, 6vw, 5rem);
  overflow-x: auto;
  padding: 1.5rem max(var(--fs-gutter), calc(50vw - 37.5rem)) 3.25rem;
  scroll-padding-left: max(var(--fs-gutter), calc(50vw - 37.5rem));
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.audienceRail::-webkit-scrollbar {
  display: none;
}

.audienceCard {
  background: var(--fs-white);
  border: 1px solid var(--fs-line-light);
  border-radius: var(--fs-radius-card);
  display: flex;
  flex: 0 0 28rem;
  flex-direction: column;
  height: 39.25rem;
  overflow: hidden;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  scroll-snap-align: start;
  transition:
    background-color var(--fs-duration-base) var(--fs-ease-out),
    border-color var(--fs-duration-base) var(--fs-ease-out),
    transform var(--fs-duration-base) var(--fs-ease-out);
}

.audienceCard:hover {
  background: #fafafa;
  border-color: rgba(5, 5, 5, 0.28);
  transform: translateY(-0.25rem);
}

.audienceIndex {
  color: rgba(5, 5, 5, 0.22);
  font-size: 2.75rem;
}

.audienceCard .cardEyebrow {
  color: var(--fs-on-paper-muted);
  margin-top: 4rem;
}

.audienceCard h3 {
  margin-top: 0.75rem;
}

.audienceCard > p:last-of-type {
  color: var(--fs-on-paper-muted);
}

.audienceCard ul {
  border-top: 1px solid var(--fs-line-light);
  color: rgba(5, 5, 5, 0.76);
  display: grid;
  font-size: 0.86rem;
  gap: 0.65rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.5rem 0 0;
}

.audienceCard > ul {
  margin-top: auto;
}

.audienceCard li::before {
  content: "—";
  margin-right: 0.65rem;
}

.audienceCard[data-visual="learning"] {
  background: #0d0e11;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--fs-on-ink);
}

.audienceCard[data-visual="learning"]:hover {
  background: #121318;
  border-color: rgba(255, 255, 255, 0.28);
}

.audienceCard[data-visual="learning"] .audienceIndex,
.audienceCard[data-visual="learning"] .cardEyebrow,
.audienceCard[data-visual="learning"] > p:last-of-type {
  color: var(--fs-on-ink-muted);
}

.audienceCard[data-visual="learning"] ul {
  border-color: var(--fs-line-dark);
  color: rgba(255, 255, 255, 0.76);
}

.audienceCard[data-visual="network"] {
  background: #f0efe9;
}

.workspaceVisual,
.pipelineVisual,
.learningVisual,
.networkVisual {
  flex: 1 1 auto;
  margin-top: 1.5rem;
  min-height: 0;
}

.workspaceVisual {
  align-items: center;
  display: flex;
}

.workspacePanel {
  animation: workspaceFloat 11s ease-in-out infinite;
  background: var(--fs-white);
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 0.9rem;
  color: var(--fs-ink);
  overflow: hidden;
  width: 100%;
  will-change: transform;
}

.windowBar {
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
}

.windowBar i {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  height: 0.42rem;
  width: 0.42rem;
}

.windowBar i:first-child {
  animation: workspacePulse 2.4s ease-in-out infinite;
  background: var(--fs-ink);
}

.windowBar span {
  color: rgba(0, 0, 0, 0.38);
  font-family: var(--fs-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  margin-left: 0.4rem;
}

.workspaceBody {
  background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1.3px);
  background-size: 0.9rem 0.9rem;
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
}

.userMessage,
.systemMessage p {
  font-size: 0.7rem;
  line-height: 1.55;
  margin: 0;
}

.userMessage {
  background: var(--fs-ink);
  border-radius: 0.7rem 0.7rem 0.2rem 0.7rem;
  color: var(--fs-white);
  justify-self: end;
  max-width: 78%;
  padding: 0.5rem 0.7rem;
}

.systemMessage {
  align-items: flex-start;
  display: flex;
  gap: 0.45rem;
}

.systemMessage > div {
  display: grid;
  gap: 0.3rem;
}

.systemMessage small {
  color: rgba(0, 0, 0, 0.48);
  font-size: 0.58rem;
}

.systemMessage p {
  background: var(--fs-white);
  border: 1px solid rgba(0, 0, 0, 0.11);
  border-radius: 0.7rem 0.7rem 0.7rem 0.2rem;
  padding: 0.5rem 0.7rem;
}

.botMark {
  align-items: center;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 0.45rem;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}

.thinkingDots {
  display: inline-flex;
  gap: 0.16rem;
  margin-left: 0.2rem;
}

.thinkingDots i {
  animation: thinkingDot 1.2s ease-in-out infinite;
  background: var(--fs-ink);
  border-radius: 50%;
  height: 0.18rem;
  width: 0.18rem;
}

.thinkingDots i:nth-child(2) { animation-delay: 180ms; }
.thinkingDots i:nth-child(3) { animation-delay: 360ms; }

.workspaceBody pre {
  background: rgba(0, 0, 0, 0.045);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.6rem;
  color: rgba(0, 0, 0, 0.64);
  font: 0.62rem/1.75 var(--fs-font-mono);
  margin: 0;
  padding: 0.65rem 0.75rem;
}

.miniChart {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 0.6rem;
  height: 4.4rem;
  padding: 0.7rem;
  width: 100%;
}

.chartArea { fill: rgba(0, 0, 0, 0.06); }
.chartLine { fill: none; stroke: var(--fs-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.pipelineVisual {
  animation: pipelineFloat 13s ease-in-out infinite;
  color: var(--fs-ink);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  will-change: transform;
}

.pipelineSources,
.riskRow {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(4, 1fr);
}

.pipelineSources span,
.riskRow span {
  background: rgba(5, 5, 5, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 0.42rem;
  font: 0.52rem var(--fs-font-mono);
  padding: 0.45rem 0.2rem;
  text-align: center;
}

.flowLine {
  background: rgba(5, 5, 5, 0.18);
  height: 0.95rem;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 1px;
}

.flowLine::after {
  animation: pipelineFlow 3.4s ease-in-out infinite;
  background: linear-gradient(transparent, var(--fs-ink), transparent);
  content: "";
  height: 0.5rem;
  left: -1px;
  position: absolute;
  top: 0;
  width: 3px;
}

.pipelineTeam {
  background: rgba(5, 5, 5, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0.7rem;
  padding: 0.65rem;
}

.pipelineTeam small {
  color: rgba(0, 0, 0, 0.42);
  font: 0.52rem var(--fs-font-mono);
  letter-spacing: 0.1em;
}

.pipelineTeam > div {
  align-items: center;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: 1fr auto 1fr;
  margin-top: 0.5rem;
}

.pipelineTeam span,
.pipelineNode,
.pipelineResult span,
.pipelineResult strong {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 0.5rem;
  font-size: 0.64rem;
  padding: 0.55rem 0.35rem;
  text-align: center;
}

.pipelineTeam span {
  animation: debatePulse 4.4s ease-in-out infinite;
}

.pipelineTeam span:last-child { animation-delay: 2.2s; }
.pipelineTeam b { color: rgba(0, 0, 0, 0.34); font: 0.5rem var(--fs-font-mono); }

.pipelineNode {
  align-items: center;
  display: flex;
  font-weight: 650;
  gap: 0.45rem;
  text-align: left;
}

.pipelineNode i {
  animation: verifierBreathe 3.4s ease-in-out infinite;
  background: var(--fs-ink);
  border-radius: 50%;
  height: 0.4rem;
  width: 0.4rem;
}

.pipelineNode small { color: rgba(0, 0, 0, 0.44); margin-left: auto; }
.riskRow { grid-template-columns: repeat(3, 1fr); }

.pipelineResult {
  align-items: center;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: auto auto 1fr;
}

.pipelineResult strong {
  background: var(--fs-ink);
  color: var(--fs-white);
}

.learningVisual {
  align-items: center;
  display: flex;
}

.learningPanel {
  animation: learningBob 3.8s ease-in-out infinite;
  background: #0d0e11;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.45rem;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--fs-font-mono);
  padding: 0.75rem;
  width: 100%;
}

.learningTitle,
.learningStats {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.learningTitle {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
  padding-bottom: 0.7rem;
}

.learningTitle small { color: rgba(255, 255, 255, 0.46); }

.learningGrid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 4.5rem 1fr;
  padding: 0.8rem 0;
}

.learningTabs,
.learningGrid code {
  display: flex;
  flex-direction: column;
  font-size: 0.58rem;
  gap: 0.5rem;
}

.learningTabs { color: rgba(255, 255, 255, 0.4); }
.learningTabs b { background: rgba(255, 255, 255, 0.1); color: var(--fs-white); padding: 0.3rem; }
.learningGrid code span { color: rgba(255, 255, 255, 0.38); }
.learningGrid code b { font-weight: 400; }

.codeCursor {
  animation: codeCursor 1.1s steps(1) infinite;
  font-style: normal;
}

.learningStats {
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.5rem;
  padding-top: 0.7rem;
}

.learningStats span,
.progressBars { align-items: center; display: flex; gap: 0.2rem; }
.learningStats b { color: var(--fs-white); font-size: 0.68rem; }
.progressBars i { background: rgba(255, 255, 255, 0.16); height: 0.35rem; width: 0.35rem; }
.progressBars i:nth-child(-n + 7) { background: #6b9a7d; }

.networkVisual {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.networkVisual > div {
  font: 700 1.1rem/1.2 var(--fs-font-mono);
  letter-spacing: 0.08em;
  text-align: center;
}

.networkVisual small { color: rgba(5, 5, 5, 0.42); font-size: 0.55rem; }

.networkRing {
  animation: networkSpin 18s linear infinite;
  border: 1px dashed rgba(5, 5, 5, 0.36);
  border-radius: 50%;
  height: 12rem;
  position: absolute;
  width: 12rem;
}

.networkNode {
  animation: networkBreathe 3.2s ease-in-out infinite;
  background: var(--fs-ink);
  border-radius: 50%;
  height: 0.5rem;
  left: 50%;
  position: absolute;
  top: calc(50% - 6rem);
  transform-origin: 0 6rem;
  width: 0.5rem;
}

.networkNode:nth-child(3) { transform: rotate(90deg); animation-delay: 0.4s; }
.networkNode:nth-child(4) { transform: rotate(180deg); animation-delay: 0.8s; }
.networkNode:nth-child(5) { transform: rotate(270deg); animation-delay: 1.2s; }

.audienceRail[data-in-view="false"] .workspacePanel,
.audienceRail[data-in-view="false"] .windowBar i:first-child,
.audienceRail[data-in-view="false"] .thinkingDots i,
.audienceRail[data-in-view="false"] .pipelineVisual,
.audienceRail[data-in-view="false"] .flowLine::after,
.audienceRail[data-in-view="false"] .pipelineTeam span,
.audienceRail[data-in-view="false"] .pipelineNode i,
.audienceRail[data-in-view="false"] .learningPanel,
.audienceRail[data-in-view="false"] .codeCursor,
.audienceRail[data-in-view="false"] .networkRing,
.audienceRail[data-in-view="false"] .networkNode {
  animation-play-state: paused;
}

.updatesSection .sectionHeading {
  margin: 0 auto;
  text-align: center;
}

.updatesSection .sectionSummary {
  margin-left: auto;
  margin-right: auto;
}

.updateList {
  border-top: 1px solid var(--fs-line-light);
  list-style: none;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  max-width: 55rem;
  padding: 0;
}

.updateList li {
  border-bottom: 1px solid var(--fs-line-light);
}

.updateList a {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr auto auto;
  padding: 1.25rem 0.5rem;
  transition: background-color var(--fs-duration-fast) ease;
}

.updateList a:hover {
  background: rgba(5, 5, 5, 0.035);
}

.updateCategory {
  border: 1px solid var(--fs-line-light);
  border-radius: var(--fs-radius-pill);
  color: var(--fs-on-paper-muted);
  font-family: var(--fs-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.65rem;
  text-transform: uppercase;
}

.updateTitle {
  line-height: 1.5;
}

.updateList time {
  color: var(--fs-on-paper-muted);
  font-family: var(--fs-font-mono);
  font-size: 0.7rem;
}

.updateArrow {
  color: var(--fs-on-paper-muted);
  transition: transform var(--fs-duration-base) var(--fs-ease-out);
}

.updateList a:hover .updateArrow {
  transform: translate(0.15rem, -0.15rem);
}

.finalCta {
  align-items: center;
  background:
    radial-gradient(circle at 50% 115%, rgba(255, 255, 255, 0.14), transparent 36%),
    var(--fs-ink);
  border-radius: var(--fs-radius-panel);
  color: var(--fs-on-ink);
  display: flex;
  flex-direction: column;
  margin: 0 clamp(0.75rem, 2vw, 1.5rem);
  overflow: hidden;
  padding: clamp(5rem, 12vw, 10rem) var(--fs-gutter);
  position: relative;
  text-align: center;
}

.finalCta h2 {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1.02;
  margin: 0;
}

.finalCta .action {
  margin-top: 2.5rem;
}

.footer {
  margin: 0 auto;
  max-width: var(--fs-container);
  padding: clamp(4rem, 8vw, 7rem) var(--fs-gutter) 2rem;
}

.footerGroups {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footerGroups nav {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footerGroups h2 {
  font-size: 0.78rem;
  margin: 0 0 0.5rem;
}

.footerGroups a,
.footer > p {
  color: var(--fs-on-paper-muted);
  font-size: 0.78rem;
}

.footerGroups a:hover {
  color: var(--fs-on-paper);
}

.footer > p {
  border-top: 1px solid var(--fs-line-light);
  margin: 4rem 0 0;
  padding-top: 1.5rem;
}

@media (max-width: 900px) {
  .header {
    grid-template-columns: 1fr auto;
  }

  .navigation {
    display: none;
  }

  .hero {
    align-items: flex-end;
    background:
      linear-gradient(0deg, var(--fs-ink) 0%, rgba(5, 5, 5, 0.92) 48%, rgba(5, 5, 5, 0.22) 100%),
      radial-gradient(circle at 70% 28%, #25282d 0%, var(--fs-ink) 48%);
  }

  .hero::before {
    mask-image: linear-gradient(0deg, transparent 0%, black 100%);
  }

  .heroArt {
    right: -18vw;
    top: 28%;
    width: min(92vw, 42rem);
  }

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

  .showcaseIntro {
    position: static;
  }

  .showcaseCard {
    top: calc(4.5rem + var(--fs-card-index) * 1.4rem);
  }

  .workflowTrack {
    flex-direction: column;
    padding: 0;
  }

  .workflowItem {
    display: flex;
    flex-direction: column;
  }

  .workflowItem:nth-child(n) .workflowStep {
    transform: none;
  }

  .workflowConnector {
    align-self: center;
    flex: none;
    height: 2.5rem;
    width: 2px;
  }

  .workflowConnector svg {
    display: none;
  }

  .workflowConnector::after {
    animation: workflowDashVertical 700ms linear infinite;
    animation-play-state: paused;
    background-image: repeating-linear-gradient(180deg, var(--fs-ink) 0 7px, transparent 7px 14px);
    background-size: 100% 14px;
    content: "";
    inset: 0;
    position: absolute;
  }

  .workflowTrack[data-in-view="true"] .workflowConnector::after {
    animation-play-state: running;
  }

  .audienceHead {
    align-items: center;
  }

  .audienceCard {
    flex-basis: min(28rem, calc(100vw - 3rem));
  }

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

@media (max-width: 640px) {
  .headerAction .action span:first-child {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .heroTitle {
    font-size: clamp(2.8rem, 15vw, 4.8rem);
  }

  .heroArt {
    right: -34vw;
    width: 112vw;
  }

  .metrics,
  .footerGroups {
    grid-template-columns: 1fr;
  }

  .showcaseCard {
    min-height: 27rem;
    position: relative;
    top: auto;
  }

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

  .updateList time {
    display: none;
  }

  .finalCta {
    margin-left: 0.65rem;
    margin-right: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell *,
  .shell *::before,
  .shell *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .audienceCard:hover,
  .actionText:hover {
    transform: none;
  }

  .workflowConnector path,
  .workflowConnector::after,
  .workspacePanel,
  .windowBar i:first-child,
  .thinkingDots i,
  .pipelineVisual,
  .flowLine::after,
  .pipelineTeam span,
  .pipelineNode i,
  .learningPanel,
  .codeCursor,
  .networkRing,
  .networkNode {
    animation: none !important;
  }
}

@keyframes workflowDash {
  to { stroke-dashoffset: -14; }
}

@keyframes workflowDashVertical {
  to { background-position: 0 14px; }
}

@keyframes workspaceFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes workspacePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); opacity: 1; }
  50% { box-shadow: 0 0 0 5px transparent; opacity: 0.55; }
}

@keyframes thinkingDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

@keyframes pipelineFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes pipelineFlow {
  0% { opacity: 0; transform: translateY(-9px); }
  30%, 70% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(16px); }
}

@keyframes debatePulse {
  0%, 100% { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); }
  50% { background: rgba(0, 0, 0, 0.11); border-color: rgba(0, 0, 0, 0.42); }
}

@keyframes verifierBreathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes learningBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes codeCursor {
  50% { opacity: 0; }
}

@keyframes networkSpin {
  to { transform: rotate(360deg); }
}

@keyframes networkBreathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}